@enerex/template-studio 1.1.41 → 1.1.44

package/dist/enerex-template-editor.es.js

@@ -1,92 +1,92 @@
-import { jsx as t, jsxs as c, Fragment as fe } from "react/jsx-runtime";
-import W, { useContext as Se, useEffect as L, useState as N, useRef as J, useCallback as xe, createContext as je, memo as qe, useMemo as re } from "react";
-import { QueryClient as Ue, QueryClientProvider as Ve, useQuery as he, useMutation as oe, useQueryClient as He } from "@tanstack/react-query";
-import be from "axios";
-import { Spinner as Ke } from "react-bootstrap";
-import { Controller as Ge, useForm as We } from "react-hook-form";
-import Le, { components as Pe } from "react-select";
-const Me = W.createContext(
+import { jsx as t, jsxs as d, Fragment as ye } from "react/jsx-runtime";
+import G, { useContext as ke, useEffect as L, useState as C, useRef as te, useCallback as Se, createContext as He, memo as ze, useMemo as ae } from "react";
+import { QueryClient as Ge, QueryClientProvider as We, useQuery as ge, useMutation as ce, useQueryClient as Ye } from "@tanstack/react-query";
+import we from "axios";
+import { Spinner as Qe } from "react-bootstrap";
+import { Controller as Xe, useForm as Je } from "react-hook-form";
+import $e, { components as Ae } from "react-select";
+const Fe = G.createContext(
   void 0
-), ze = ({
+), Ze = ({
   children: e,
   configs: n
 }) => {
-  const [s, a] = W.useState(n.clientId), [i, r] = W.useState(n.apiKey), [l, o] = W.useState(
+  const [r, a] = G.useState(n.clientId), [i, s] = G.useState(n.apiKey), [l, o] = G.useState(
     n.enerexIdentifier
-  ), [d, y] = W.useState(n.projectId), [m, T] = W.useState(n.userEmail), [w, E] = W.useState(n.isAdmin), [A, h] = W.useState(n.meBaseUrl), [g, b] = W.useState(
+  ), [c, v] = G.useState(n.projectId), [E, I] = G.useState(n.userEmail), [b, x] = G.useState(n.isAdmin), [u, p] = G.useState(n.meBaseUrl), [T, h] = G.useState(
     n.defaultSelector
-  ), p = (v) => {
-    r(v.apiKey), a(v.clientId), y(v.projectId), o(v.enerexIdentifier), T(v.userEmail), E(v.isAdmin), b(v.defaultSelector), h(v.meBaseUrl);
+  ), y = (g) => {
+    s(g.apiKey), a(g.clientId), v(g.projectId), o(g.enerexIdentifier), I(g.userEmail), x(g.isAdmin), h(g.defaultSelector), p(g.meBaseUrl);
   };
   return /* @__PURE__ */ t(
-    Me.Provider,
+    Fe.Provider,
     {
       value: {
-        clientId: s,
+        clientId: r,
         apiKey: i,
-        setConfiguration: p,
+        setConfiguration: y,
         enerexIdentifier: l,
-        projectId: d,
-        userEmail: m,
-        isAdmin: w,
-        defaultSelector: g,
-        meBaseUrl: A
+        projectId: c,
+        userEmail: E,
+        isAdmin: b,
+        defaultSelector: T,
+        meBaseUrl: u
       },
       children: e
     }
   );
-}, q = () => {
-  const e = Se(Me);
+}, V = () => {
+  const e = ke(Fe);
   if (!e)
     throw new Error("widgetConfig must be used within a ConfigProvider");
   return e;
-}, Qe = ({
+}, et = ({
   message: e,
   type: n = "info",
-  duration: s = 3e3,
+  duration: r = 3e3,
   onClose: a
 }) => (L(() => {
-  const i = setTimeout(a, s);
+  const i = setTimeout(a, r);
   return () => clearTimeout(i);
-}, [s, a]), /* @__PURE__ */ c("div", { className: `ts-toast ts-toast-${n}`, children: [
+}, [r, a]), /* @__PURE__ */ d("div", { className: `ts-toast ts-toast-${n}`, children: [
   /* @__PURE__ */ t("span", { className: "ts-toast-message", children: e }),
   /* @__PURE__ */ t("button", { className: "ts-toast-close", onClick: a, children: "×" })
-] })), Xe = () => {
-  const [e, n] = N(null), s = J(null);
-  return { showNotification: xe(
-    (r, l = "info") => {
-      s.current !== r && (s.current = r, n({ message: r, type: l }));
+] })), tt = () => {
+  const [e, n] = C(null), r = te(null);
+  return { showNotification: Se(
+    (s, l = "info") => {
+      r.current !== s && (r.current = s, n({ message: s, type: l }));
     },
     []
   ), NotificationRenderer: () => e ? /* @__PURE__ */ t(
-    Qe,
+    et,
     {
       message: e.message,
       type: e.type,
       onClose: () => {
-        s.current = null, n(null);
+        r.current = null, n(null);
       }
     }
   ) : null };
-}, Re = je(null), Ye = ({
+}, Oe = He(null), nt = ({
   children: e
 }) => {
-  const n = Xe();
-  return /* @__PURE__ */ c(Re.Provider, { value: n, children: [
+  const n = tt();
+  return /* @__PURE__ */ d(Oe.Provider, { value: n, children: [
     e,
     /* @__PURE__ */ t(n.NotificationRenderer, {})
   ] });
-}, ke = () => {
-  const e = Se(Re);
+}, ve = () => {
+  const e = ke(Oe);
   if (!e)
     throw new Error(
       "useGlobalNotification must be used within NotificationProvider"
     );
   return e;
-}, Oe = (e = "", n) => ({ get: async (r, l) => {
+}, je = (e = "", n) => ({ get: async (s, l) => {
   try {
-    const o = await be.get(
-      `${e}${r}`,
+    const o = await we.get(
+      `${e}${s}`,
       l ?? n
     );
     if (o.status === 200)
@@ -94,22 +94,22 @@ const Me = W.createContext(
   } catch (o) {
     throw o;
   }
-}, post: async (r, l, o) => {
+}, post: async (s, l, o) => {
   try {
-    const d = await be.post(
-      `${e}${r}`,
+    const c = await we.post(
+      `${e}${s}`,
       l,
       o ?? n
     );
-    if (d.status === 200)
-      return d.data;
-  } catch (d) {
-    throw d;
+    if (c.status === 200)
+      return c.data;
+  } catch (c) {
+    throw c;
   }
-}, delete: async (r, l) => {
+}, delete: async (s, l) => {
   try {
-    const o = await be.delete(
-      `${e}${r}`,
+    const o = await we.delete(
+      `${e}${s}`,
       l ?? n
     );
     if (o.status === 200 || o.status === 204)
@@ -117,7 +117,7 @@ const Me = W.createContext(
   } catch (o) {
     throw o;
   }
-} }), Be = W.createContext({
+} }), qe = G.createContext({
   get: () => {
     throw new Error("HttpClientContext.get not implemented");
   },
@@ -127,20 +127,20 @@ const Me = W.createContext(
   delete: () => {
     throw new Error("HttpClientContext.delete not implemented");
   }
-}), Je = ({ children: e }) => {
-  const { clientId: n, apiKey: s, isAdmin: a, meBaseUrl: i } = q(), r = {
+}), rt = ({ children: e }) => {
+  const { clientId: n, apiKey: r, isAdmin: a, meBaseUrl: i } = V(), s = {
     headers: {
       client_id: n,
-      "x-api-key": s,
+      "x-api-key": r,
       "Security-Context": a ? "admin" : "viewer"
     }
-  }, { get: l, post: o, delete: d } = Oe(i, r);
-  return /* @__PURE__ */ t(Be.Provider, { value: { get: l, post: o, delete: d }, children: e });
-}, Ze = ({ children: e }) => {
-  const n = new Ue();
-  return /* @__PURE__ */ t(Je, { children: /* @__PURE__ */ t(Ve, { client: n, children: e }) });
-}, z = () => {
-  const e = Se(Be);
+  }, { get: l, post: o, delete: c } = je(i, s);
+  return /* @__PURE__ */ t(qe.Provider, { value: { get: l, post: o, delete: c }, children: e });
+}, st = ({ children: e }) => {
+  const n = new Ge();
+  return /* @__PURE__ */ t(rt, { children: /* @__PURE__ */ t(We, { client: n, children: e }) });
+}, Y = () => {
+  const e = ke(qe);
   if (e)
     return e;
   throw new Error("useHttpClient must be used within a HttpClientProvider");
@@ -154,56 +154,56 @@ const Me = W.createContext(
   markFavourite: "/Template/MarkFavourite/",
   deleteTemplate: "/Template/DeleteTemplate/",
   duplicateTemplate: "/Template/DuplicateTemplate/"
-}, et = () => {
-  const e = z(), { enerexIdentifier: n, projectId: s } = q();
-  return he({
+}, at = () => {
+  const e = Y(), { enerexIdentifier: n, projectId: r } = V();
+  return ge({
     queryKey: ["getTemplatesList"],
     queryFn: async (i) => await e.get(
-      `${Q.Template_list}${s}/${n}`
+      `${Q.Template_list}${r}/${n}`
     ),
     refetchOnWindowFocus: !1,
     refetchOnReconnect: !1,
     refetchOnMount: !1
   });
-}, tt = () => {
-  const e = z(), { enerexIdentifier: n, projectId: s } = q();
-  return he({
+}, it = () => {
+  const e = Y(), { enerexIdentifier: n, projectId: r } = V();
+  return ge({
     queryKey: ["getTemplateTypes"],
     queryFn: async (i) => await e.get(
-      `${Q.TemplateTypes}${n}/${s}`
+      `${Q.TemplateTypes}${n}/${r}`
     ),
     refetchOnWindowFocus: !1,
     refetchOnReconnect: !1,
     refetchOnMount: !1
   });
-}, nt = () => {
-  const e = z(), { enerexIdentifier: n, projectId: s } = q();
-  return oe({
+}, lt = () => {
+  const e = Y(), { enerexIdentifier: n, projectId: r } = V();
+  return ce({
     mutationKey: ["getTemplate"],
     mutationFn: async ({ id: i }) => {
       if (i)
         return await e.get(
-          `${Q.Template}${n}/${i}/${s}`
+          `${Q.Template}${n}/${i}/${r}`
         );
     }
   });
-}, se = ({
+}, ie = ({
   size: e = "md",
   center: n = !1,
-  overlay: s = !1
+  overlay: r = !1
 }) => {
   const a = /* @__PURE__ */ t("div", { className: `ts-loader ts-loader-${e}` });
-  return s ? /* @__PURE__ */ t("div", { className: "ts-loader-overlay", children: a }) : n ? /* @__PURE__ */ t("div", { className: "ts-loader-center", children: a }) : a;
-}, Fe = () => {
-  const e = z(), { enerexIdentifier: n, projectId: s } = q();
-  return oe({
+  return r ? /* @__PURE__ */ t("div", { className: "ts-loader-overlay", children: a }) : n ? /* @__PURE__ */ t("div", { className: "ts-loader-center", children: a }) : a;
+}, Ue = () => {
+  const e = Y(), { enerexIdentifier: n, projectId: r } = V();
+  return ce({
     mutationKey: ["markFavourite"],
     mutationFn: async (i) => await e.post(
-      `${Q.markFavourite}${s}/${n}`,
+      `${Q.markFavourite}${r}/${n}`,
       i
     )
   });
-}, Ee = (e) => {
+}, Le = (e) => {
   let n = /* @__PURE__ */ t(
     "span",
     {
@@ -216,8 +216,8 @@ const Me = W.createContext(
       version: "1.0",
       id: "Layer_1",
       xmlns: "http://www.w3.org/2000/svg",
-      width: "20px",
-      height: "20px",
+      width: "18px",
+      height: "18px",
       viewBox: "0 0 64 64",
       "enable-background": "new 0 0 64 64",
       children: /* @__PURE__ */ t(
@@ -239,8 +239,8 @@ const Me = W.createContext(
       version: "1.0",
       id: "Layer_1",
       xmlns: "http://www.w3.org/2000/svg",
-      width: "20px",
-      height: "20px",
+      width: "18px",
+      height: "18px",
       viewBox: "0 0 64 64",
       enableBackground: "new 0 0 64 64",
       children: /* @__PURE__ */ t(
@@ -260,99 +260,151 @@ const Me = W.createContext(
     }
   )), n;
 };
-function rt({
+function Te(e) {
+  return e.sort((n, r) => n.name.localeCompare(r.name));
+}
+function ot(e) {
+  const n = /* @__PURE__ */ new Map(), r = [];
+  e.forEach((s) => n.set(s.id, s));
+  let a = e.filter((s) => s.parent_id === 0), i = 0;
+  for (; a.length > 0; ) {
+    r.push({ level: i, data: a });
+    const s = a.map((o) => o.id);
+    a = e.filter(
+      (o) => s.includes(o.parent_id)
+    ), i++;
+  }
+  return r;
+}
+function Ne(e, n) {
+  const a = ot(e).find((i) => i.level === n);
+  return a ? a.data : [];
+}
+const ct = (e) => {
+  if (!e) return "";
+  const n = new Date(e);
+  if (isNaN(n.getTime())) return "";
+  const r = String(n.getMonth() + 1).padStart(2, "0"), a = String(n.getDate()).padStart(2, "0"), i = String(n.getFullYear()).slice(-2);
+  return `${r}/${a}/${i}`;
+}, dt = (e) => /* @__PURE__ */ t(
+  "svg",
+  {
+    "aria-hidden": "true",
+    focusable: "false",
+    role: "img",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 128 512",
+    height: "11px",
+    width: "14px",
+    ...e,
+    children: /* @__PURE__ */ t(
+      "path",
+      {
+        fill: "#6c757d",
+        d: "M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z"
+      }
+    )
+  }
+);
+function ut({
   template: e,
   openActionId: n,
-  setOpenActionId: s,
+  setOpenActionId: r,
   onEdit: a,
   onDuplicate: i,
-  onRemove: r,
+  onRemove: s,
   onPreview: l,
   onRefresh: o
 }) {
-  const { isAdmin: d } = q(), y = n === e.id, m = J(null), T = J(null), [w, E, A] = e.categoryChain, { mutateAsync: h, isPending: g } = Fe(), { showNotification: b } = ke(), p = E?.key, v = A?.key, O = p === 9, M = d || v !== 2, P = d || v !== 2;
+  const { isAdmin: c } = V(), v = n === e.id, E = te(null), I = te(null), [b, x, u] = e.categoryChain, { mutateAsync: p, isPending: T } = Ue(), { showNotification: h } = ve(), y = x?.key, g = u?.key, R = !c && y === 9, B = c || g !== 2, _ = c || g !== 2;
   L(() => {
-    function C(k) {
-      y && m.current && !m.current.contains(k.target) && !T.current?.contains(k.target) && s(null);
+    function S(D) {
+      v && E.current && !E.current.contains(D.target) && !I.current?.contains(D.target) && r(null);
     }
-    return document.addEventListener("mousedown", C), () => document.removeEventListener("mousedown", C);
-  }, [y, s]), L(() => {
-    function C(k) {
-      k.key === "Escape" && s(null);
+    return document.addEventListener("mousedown", S), () => document.removeEventListener("mousedown", S);
+  }, [v, r]), L(() => {
+    function S(D) {
+      D.key === "Escape" && r(null);
     }
-    return y && document.addEventListener("keydown", C), () => document.removeEventListener("keydown", C);
-  }, [y, s]), L(() => {
-    if (!y || !m.current) return;
-    const C = Array.from(
-      m.current.querySelectorAll('[role="menuitem"]')
+    return v && document.addEventListener("keydown", S), () => document.removeEventListener("keydown", S);
+  }, [v, r]), L(() => {
+    if (!v || !E.current) return;
+    const S = Array.from(
+      E.current.querySelectorAll('[role="menuitem"]')
     );
-    if (!C.length) return;
-    let k = 0;
-    C[0].focus();
-    function x($) {
-      $.key === "ArrowDown" && (k = (k + 1) % C.length, C[k].focus(), $.preventDefault()), $.key === "ArrowUp" && (k = (k - 1 + C.length) % C.length, C[k].focus(), $.preventDefault());
+    if (!S.length) return;
+    let D = 0;
+    S[0].focus();
+    function M(w) {
+      w.key === "ArrowDown" && (D = (D + 1) % S.length, S[D].focus(), w.preventDefault()), w.key === "ArrowUp" && (D = (D - 1 + S.length) % S.length, S[D].focus(), w.preventDefault());
     }
-    return document.addEventListener("keydown", x), () => document.removeEventListener("keydown", x);
-  }, [y]);
-  const U = async () => {
+    return document.addEventListener("keydown", M), () => document.removeEventListener("keydown", M);
+  }, [v]);
+  const A = async () => {
     try {
-      await h({
-        categoryId: v?.toString() ?? "",
+      await p({
+        categoryId: g?.toString() ?? "",
         templateId: e.id ?? ""
-      }), o(), b(
+      }), o(), h(
         `Template "${e?.name}" marked as favourite`,
         "success"
       );
-    } catch (C) {
-      console.error(C), b(
+    } catch (S) {
+      console.error(S), h(
         "Unable to mark template as favourite. Please try again.",
         "error"
       );
     }
   };
-  return /* @__PURE__ */ t(fe, { children: /* @__PURE__ */ c("tr", { className: "ts-table-row", children: [
-    /* @__PURE__ */ t("td", { children: /* @__PURE__ */ c("div", { className: "ts-name-cell", children: [
-      O && /* @__PURE__ */ t(
-        "button",
-        {
-          type: "button",
-          className: "ts-fav-btn ts-btn-light",
-          disabled: e.is_favourite,
-          onClick: U,
-          title: "Mark as favourite",
-          children: g ? /* @__PURE__ */ t(se, { size: "sm" }) : e.is_favourite ? /* @__PURE__ */ t(Ee, { variant: "filled" }) : /* @__PURE__ */ t(Ee, { variant: "outlined" })
-        }
-      ),
-      /* @__PURE__ */ t(
-        "span",
-        {
-          className: e.readonly ? "ts-badge default" : "ts-badge custom",
-          children: e.readonly ? "Default" : "Custom"
-        }
-      ),
-      /* @__PURE__ */ t("span", { className: "ts-template-name", children: e.name })
-    ] }) }),
-    /* @__PURE__ */ t("td", { children: w?.name ?? "" }),
-    /* @__PURE__ */ t("td", { children: E?.name ?? "" }),
-    /* @__PURE__ */ t("td", { children: A?.name ?? "" }),
+  return /* @__PURE__ */ t(ye, { children: /* @__PURE__ */ d("tr", { className: "ts-table-row", children: [
+    /* @__PURE__ */ d("td", { children: [
+      " ",
+      /* @__PURE__ */ d("div", { className: "ts-name-cell", children: [
+        R && /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            className: "ts-fav-btn ts-btn-light",
+            disabled: e.is_favourite,
+            onClick: A,
+            title: "Mark as favourite",
+            children: T ? /* @__PURE__ */ t(ie, { size: "sm" }) : e.is_favourite ? /* @__PURE__ */ t(Le, { variant: "filled" }) : /* @__PURE__ */ t(Le, { variant: "outlined" })
+          }
+        ),
+        /* @__PURE__ */ t(
+          "span",
+          {
+            className: e.readonly ? "ts-badge default" : "ts-badge custom",
+            children: e.readonly ? "Default" : "Custom"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ t("td", { children: /* @__PURE__ */ t("div", { className: "", children: /* @__PURE__ */ t("span", { className: "ts-template-name", children: e.name }) }) }),
+    c && /* @__PURE__ */ t("td", { children: e?.id ?? "" }),
+    /* @__PURE__ */ t("td", { children: b?.name ?? "" }),
+    /* @__PURE__ */ t("td", { children: x?.name ?? "" }),
+    /* @__PURE__ */ t("td", { children: u?.name ?? "" }),
+    c && /* @__PURE__ */ t("td", { children: e?.companyName ?? "" }),
     /* @__PURE__ */ t("td", { children: e?.updatedByName ?? "" }),
-    /* @__PURE__ */ t("td", { className: "ts-actions-cell", children: /* @__PURE__ */ c("div", { className: "ts-actions-wrapper", children: [
+    /* @__PURE__ */ t("td", { children: ct(e.updatedDateTime) }),
+    /* @__PURE__ */ t("td", { className: "ts-actions-cell", children: /* @__PURE__ */ d("div", { className: "ts-actions-wrapper", children: [
       /* @__PURE__ */ t(
         "button",
         {
-          ref: T,
+          ref: I,
           className: "ts-actions-btn",
           "aria-haspopup": "true",
-          "aria-expanded": y,
-          onClick: () => s(y ? null : e.id),
-          children: "⋯"
+          "aria-expanded": v,
+          onClick: () => r(v ? null : e.id),
+          children: /* @__PURE__ */ t(dt, {})
         }
       ),
-      /* @__PURE__ */ c(
+      /* @__PURE__ */ d(
         "div",
         {
-          ref: m,
-          className: `ts-actions-menu ${y ? "open" : ""}`,
+          ref: E,
+          className: `ts-actions-menu ${v ? "open" : ""}`,
           role: "menu",
           children: [
             /* @__PURE__ */ t(
@@ -362,19 +414,19 @@ function rt({
                 role: "menuitem",
                 className: "ts-menu-item",
                 onClick: () => {
-                  s(null), l(e);
+                  r(null), l(e);
                 },
                 children: "Preview"
               }
             ),
-            M && /* @__PURE__ */ t(
+            B && /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
                 role: "menuitem",
                 className: "ts-menu-item",
                 onClick: () => {
-                  s(null), a(e);
+                  r(null), a(e);
                 },
                 children: "Edit"
               }
@@ -386,19 +438,19 @@ function rt({
                 role: "menuitem",
                 className: "ts-menu-item",
                 onClick: () => {
-                  s(null), i(e);
+                  r(null), i(e);
                 },
                 children: "Duplicate"
               }
             ),
-            P && /* @__PURE__ */ t(
+            _ && /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
                 role: "menuitem",
                 className: "ts-menu-item danger",
                 onClick: () => {
-                  s(null), r(e);
+                  r(null), s(e);
                 },
                 children: "Remove"
               }
@@ -409,144 +461,214 @@ function rt({
     ] }) })
   ] }) });
 }
-const st = qe(rt), ve = 5, at = ({
+const mt = ze(ut), pt = (e) => /* @__PURE__ */ t(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 320 512",
+    width: "6.01px",
+    height: "9.63px",
+    ...e,
+    children: /* @__PURE__ */ t(
+      "path",
+      {
+        fill: e.fill || "#6c757d",
+        d: "M182.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z"
+      }
+    )
+  }
+), ft = (e) => /* @__PURE__ */ t(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 320 512",
+    width: "6.01px",
+    height: "9.63px",
+    ...e,
+    children: /* @__PURE__ */ t(
+      "path",
+      {
+        fill: e.fill || "#6c757d",
+        d: "M182.6 470.6c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-9.2-9.2-11.9-22.9-6.9-34.9s16.6-19.8 29.6-19.8H288c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9l-128 128z"
+      }
+    )
+  }
+), J = ({
+  label: e,
+  sortKey: n,
+  sortBy: r,
+  sortOrder: a,
+  onSort: i
+}) => /* @__PURE__ */ t("th", { onClick: () => i(n), className: "ts-sortable", children: /* @__PURE__ */ d("div", { className: "ts-th-sort", children: [
+  e,
+  /* @__PURE__ */ d("div", { className: "ts-sort-icons", children: [
+    /* @__PURE__ */ t(
+      pt,
+      {
+        fill: r === n && a === "asc" ? "#007bff" : "#6c757d",
+        className: r === n && a === "asc" ? "active" : ""
+      }
+    ),
+    /* @__PURE__ */ t(
+      ft,
+      {
+        style: { marginTop: -9.6 },
+        fill: r === n && a === "desc" ? "#007bff" : "#6c757d",
+        className: r === n && a === "desc" ? "active" : ""
+      }
+    )
+  ] })
+] }) }), Ce = 5, ht = ({
   page: e,
   pageSize: n,
-  totalRecords: s,
+  totalRecords: r,
   onPageChange: a,
   onPageSizeChange: i
 }) => {
-  const r = Math.ceil(s / n), o = r <= ve ? Array.from({ length: r }, (m, T) => T + 1) : Array.from({ length: ve }, (m, T) => T + 1), d = r > ve, y = r;
-  return /* @__PURE__ */ c("div", { className: "ts-pagination-bar", children: [
-    /* @__PURE__ */ c("div", { className: "ts-page-container", children: [
-      /* @__PURE__ */ c("div", { className: "ts-page-size", children: [
-        "Display:",
+  const s = Math.ceil(r / n), o = s <= Ce ? Array.from({ length: s }, (u, p) => p + 1) : Array.from({ length: Ce }, (u, p) => p + 1), c = s > Ce, v = s, { showNotification: E } = ve(), [I, b] = C(String(e));
+  L(() => {
+    b(String(e));
+  }, [e]);
+  const x = () => {
+    const u = Number(I);
+    if (!u || u < 1 || u > s) {
+      E("Page out of range", "error"), b(String(e));
+      return;
+    }
+    a(u);
+  };
+  return /* @__PURE__ */ d("div", { className: "ts-pagination-bar", children: [
+    /* @__PURE__ */ d("div", { className: "ts-page-container", children: [
+      /* @__PURE__ */ d("div", { className: "ts-page-size", children: [
+        /* @__PURE__ */ t("label", { children: "Display:" }),
         /* @__PURE__ */ t(
           "select",
           {
             value: n,
-            onChange: (m) => {
-              i(Number(m.target.value)), a(1);
+            onChange: (u) => {
+              i(Number(u.target.value)), a(1);
             },
-            children: [10, 25, 50, 100].map((m) => /* @__PURE__ */ t("option", { value: m, children: m }, m))
+            children: [10, 25, 50, 100].map((u) => /* @__PURE__ */ t("option", { value: u, children: u }, u))
           }
         )
       ] }),
-      /* @__PURE__ */ c("div", { className: "ts-page-info", children: [
+      /* @__PURE__ */ d("div", { className: "ts-page-info", children: [
         "Page ",
-        e,
-        " of ",
-        r
+        /* @__PURE__ */ d("span", { children: [
+          e,
+          " of ",
+          s
+        ] })
       ] }),
-      /* @__PURE__ */ c("div", { className: "ts-go-to", children: [
-        "Go to page:",
+      /* @__PURE__ */ d("div", { className: "ts-go-to", children: [
+        /* @__PURE__ */ t("span", { children: "Go to page:" }),
         /* @__PURE__ */ t(
           "input",
           {
             type: "number",
-            min: 1,
-            max: r,
-            value: e,
-            onChange: (m) => {
-              const T = Number(m.target.value);
-              T >= 1 && T <= r && a(T);
+            value: I,
+            onChange: (u) => b(u.target.value),
+            onBlur: x,
+            onKeyDown: (u) => {
+              u.key === "Enter" && x();
             }
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ c("div", { className: "ts-total", children: [
-      "Total: ",
-      s
+    /* @__PURE__ */ d("div", { className: "ts-total", children: [
+      /* @__PURE__ */ t("span", { children: "Total:" }),
+      " ",
+      r
     ] }),
-    /* @__PURE__ */ c("div", { className: "ts-page-buttons", children: [
+    /* @__PURE__ */ d("div", { className: "ts-page-buttons", children: [
       /* @__PURE__ */ t("button", { disabled: e === 1, onClick: () => a(e - 1), children: "‹" }),
-      o.map((m) => /* @__PURE__ */ t(
+      o.map((u) => /* @__PURE__ */ t(
         "button",
         {
-          className: m === e ? "active" : "",
-          onClick: () => a(m),
-          children: m
+          className: u === e ? "active" : "",
+          onClick: () => a(u),
+          children: u
         },
-        m
+        u
       )),
-      d && /* @__PURE__ */ t("span", { style: { padding: "0 6px" }, children: "…" }),
-      d && /* @__PURE__ */ t(
+      c && /* @__PURE__ */ t("span", { style: { padding: "0 6px" }, children: "…" }),
+      c && /* @__PURE__ */ t(
         "button",
         {
-          className: e === y ? "active" : "",
-          onClick: () => a(y),
-          children: y
+          className: e === v ? "active" : "",
+          onClick: () => a(v),
+          children: v
         }
       ),
       /* @__PURE__ */ t(
         "button",
         {
-          disabled: e === r,
+          disabled: e === s,
           onClick: () => a(e + 1),
           children: "›"
         }
       )
     ] })
   ] });
-}, it = ({
+}, yt = ({
   show: e,
   variant: n,
-  title: s = "Are you sure?",
+  title: r = "Are you sure?",
   message: a,
   label: i = "Name",
-  value: r = "",
+  value: s = "",
   placeholder: l = "",
   requiredMessage: o = "This field is required",
-  externalError: d = !1,
-  externalErrorMessage: y = "",
-  confirmText: m = "Ok",
-  cancelText: T = "Cancel",
-  confirmButtonVariant: w = "danger",
-  disableConfirm: E = !1,
-  onConfirm: A,
-  onCancel: h,
-  onInputChange: g
+  externalError: c = !1,
+  externalErrorMessage: v = "",
+  confirmText: E = "Ok",
+  cancelText: I = "Cancel",
+  confirmButtonVariant: b = "danger",
+  disableConfirm: x = !1,
+  onConfirm: u,
+  onCancel: p,
+  onInputChange: T
 }) => {
-  const [b, p] = N(r), [v, O] = N(!1), M = J(null);
+  const [h, y] = C(s), [g, R] = C(!1), B = te(null);
   if (L(() => {
     if (!e) return;
-    const x = ($) => {
-      $.key === "Escape" && h();
+    const M = (w) => {
+      w.key === "Escape" && p();
     };
-    return document.addEventListener("keydown", x), () => document.removeEventListener("keydown", x);
-  }, [e, h]), L(() => {
+    return document.addEventListener("keydown", M), () => document.removeEventListener("keydown", M);
+  }, [e, p]), L(() => {
     if (!e) return;
-    const x = ($) => {
-      M.current && !M.current.contains($.target) && h();
+    const M = (w) => {
+      B.current && !B.current.contains(w.target) && p();
     };
-    return document.addEventListener("mousedown", x), () => document.removeEventListener("mousedown", x);
-  }, [e, h]), L(() => {
+    return document.addEventListener("mousedown", M), () => document.removeEventListener("mousedown", M);
+  }, [e, p]), L(() => {
     if (e)
       return document.body.style.overflow = "hidden", () => {
         document.body.style.overflow = "";
       };
   }, [e]), L(() => {
-    e && (p(r), O(!1));
-  }, [e, r]), L(() => {
-    d && O(!0);
-  }, [d]), !e) return null;
-  const P = n === "input" && !b.trim(), U = n === "input" && (P || d), C = P ? o : d ? y : "", k = () => {
-    if (U || E) {
-      O(!0);
+    e && (y(s), R(!1));
+  }, [e, s]), L(() => {
+    c && R(!0);
+  }, [c]), !e) return null;
+  const _ = n === "input" && !h.trim(), A = n === "input" && (_ || c), S = _ ? o : c ? v : "", D = () => {
+    if (A || x) {
+      R(!0);
       return;
     }
-    A(b.trim());
+    u(h.trim());
   };
-  return /* @__PURE__ */ t("div", { className: "ts-modal-overlay", children: /* @__PURE__ */ c("div", { ref: M, className: "ts-modal", children: [
-    /* @__PURE__ */ c("div", { className: "ts-modal-header", children: [
-      /* @__PURE__ */ t("h4", { className: "ts-modal-title ", children: s }),
-      /* @__PURE__ */ t("button", { className: "ts-modal-close", onClick: h, children: "✕" })
+  return /* @__PURE__ */ t("div", { className: "ts-modal-overlay", children: /* @__PURE__ */ d("div", { ref: B, className: "ts-modal", children: [
+    /* @__PURE__ */ d("div", { className: "ts-modal-header", children: [
+      /* @__PURE__ */ t("h4", { className: "ts-modal-title ", children: r }),
+      /* @__PURE__ */ t("button", { className: "ts-modal-close", onClick: p, children: "✕" })
     ] }),
-    /* @__PURE__ */ c("div", { className: "ts-modal-body", children: [
+    /* @__PURE__ */ d("div", { className: "ts-modal-body", children: [
       a && /* @__PURE__ */ t("p", { className: "ts-modal-message", children: a }),
-      n === "input" && /* @__PURE__ */ c("div", { className: "ts-form-group", children: [
-        /* @__PURE__ */ c("label", { className: "ts-label", children: [
+      n === "input" && /* @__PURE__ */ d("div", { className: "ts-form-group", children: [
+        /* @__PURE__ */ d("label", { className: "ts-label", children: [
           i,
           /* @__PURE__ */ t("span", { className: "ts-required", children: "*" })
         ] }),
@@ -554,62 +676,62 @@ const st = qe(rt), ve = 5, at = ({
           "input",
           {
             type: "text",
-            className: `ts-input ${v && U ? "ts-input-error" : ""}`,
+            className: `ts-input ${g && A ? "ts-input-error" : ""}`,
             placeholder: l,
-            value: b,
-            onChange: (x) => {
-              p(x.target.value), v && O(!1), g?.(x.target.value);
+            value: h,
+            onChange: (M) => {
+              y(M.target.value), g && R(!1), T?.(M.target.value);
             },
             autoFocus: !0,
             style: { paddingBlock: "0", paddingInline: "0" }
           }
         ),
-        v && U && /* @__PURE__ */ t("div", { className: "ts-error-text", children: C })
+        g && A && /* @__PURE__ */ t("div", { className: "ts-error-text", children: S })
       ] })
     ] }),
-    /* @__PURE__ */ c("div", { className: "ts-modal-footer", children: [
+    /* @__PURE__ */ d("div", { className: "ts-modal-footer", children: [
       /* @__PURE__ */ t(
         "button",
         {
           type: "button",
           className: "ts-btn ts-btn-secondary",
-          onClick: h,
-          children: T
+          onClick: p,
+          children: I
         }
       ),
       /* @__PURE__ */ t(
         "button",
         {
           type: "button",
-          className: `ts-btn ts-btn-${w}`,
-          onClick: k,
-          disabled: E,
-          children: m
+          className: `ts-btn ts-btn-${b}`,
+          onClick: D,
+          disabled: x,
+          children: E
         }
       )
     ] })
   ] }) });
-}, lt = () => /* @__PURE__ */ t(
+}, gt = () => /* @__PURE__ */ t(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512",
-    width: "16px",
-    height: "16px",
+    width: "11px",
+    height: "11px",
     children: /* @__PURE__ */ t("path", { fill: "#ffffff", d: "M368 208A160 160 0 1 0 48 208a160 160 0 1 0 320 0zM337.1 371.1C301.7 399.2 256.8 416 208 416C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208c0 48.8-16.8 93.7-44.9 129.1L505 471c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L337.1 371.1z" })
   }
-), ot = () => {
-  const e = z(), { enerexIdentifier: n, projectId: s, userEmail: a } = q();
-  return oe({
+), vt = () => {
+  const e = Y(), { enerexIdentifier: n, projectId: r, userEmail: a } = V();
+  return ce({
     mutationKey: ["duplicateTemplate"],
-    mutationFn: async ({ templateId: r, request: l }) => (l.enerexIdentifier = n ?? "", l.projectId = s ?? "", l.updatedBy = a ?? "", await e.post(
-      `${Q.duplicateTemplate}${r}`,
+    mutationFn: async ({ templateId: s, request: l }) => (l.enerexIdentifier = n ?? "", l.projectId = r ?? "", l.updatedBy = a ?? "", await e.post(
+      `${Q.duplicateTemplate}${s}`,
       l
     ))
   });
-}, ct = () => {
-  const e = z();
-  return oe({
+}, bt = () => {
+  const e = Y();
+  return ce({
     mutationKey: ["deleteTemplate"],
     mutationFn: async (n) => {
       await e.delete(
@@ -617,309 +739,305 @@ const st = qe(rt), ve = 5, at = ({
       );
     }
   });
-}, dt = ({
+}, wt = ({
   data: e,
   page: n,
-  pageSize: s
+  pageSize: r
 }) => {
-  const a = re(() => Math.ceil(e.length / s), [e.length, s]);
-  return { pagedData: re(() => {
-    const r = (n - 1) * s, l = n * s;
-    return e.slice(r, l);
-  }, [e, n, s]), totalPages: a };
-}, mt = ({
+  const a = ae(() => Math.ceil(e.length / r), [e.length, r]);
+  return { pagedData: ae(() => {
+    const s = (n - 1) * r, l = n * r;
+    return e.slice(s, l);
+  }, [e, n, r]), totalPages: a };
+}, Tt = ({
   templates: e,
   templateTypes: n,
-  onRefresh: s,
+  onRefresh: r,
   onAdd: a,
   onEdit: i,
-  onPreview: r
+  onPreview: s
 }) => {
-  const { mutateAsync: l, isPending: o } = ot(), { mutateAsync: d, isPending: y } = ct(), [m, T] = N(""), [w, E] = N(""), [A, h] = N(null), [g, b] = N(e), [p, v] = N(n), [O, M] = N(!1), [P, U] = N("input"), [C, k] = N(!1), [x, $] = N(null), [B, ce] = N("asc"), V = (u) => {
-    x === u ? ce((S) => S === "asc" ? "desc" : "asc") : ($(u), ce("asc")), ie(1);
-  }, [K, G] = N(null);
+  const { isAdmin: l } = V(), { mutateAsync: o, isPending: c } = vt(), { mutateAsync: v, isPending: E } = bt(), [I, b] = C(""), [x, u] = C(""), [p, T] = C(null), [h, y] = C(e), [g, R] = C(n), [B, _] = C(!1), [A, S] = C("input"), [D, M] = C(!1), [w, ne] = C(null), [U, W] = C("asc"), K = (m) => {
+    w === m ? W((N) => N === "asc" ? "desc" : "asc") : (ne(m), W("asc")), ee(1);
+  }, [O, re] = C(null);
   L(() => {
-    const u = [...e].sort((S, R) => {
-      if (S.is_favourite !== R.is_favourite)
-        return Number(R.is_favourite) - Number(S.is_favourite);
-      const D = new Date(R.updatedDateTime).getTime() - new Date(S.updatedDateTime).getTime();
-      return D !== 0 ? D : S.readonly !== R.readonly ? Number(S.readonly) - Number(R.readonly) : S.name.localeCompare(R.name);
+    const m = [...e].sort((N, $) => {
+      if (!l && N.is_favourite !== $.is_favourite)
+        return Number($.is_favourite) - Number(N.is_favourite);
+      const P = new Date($.updatedDateTime).getTime() - new Date(N.updatedDateTime).getTime();
+      return P !== 0 ? P : N.readonly !== $.readonly ? Number(N.readonly) - Number($.readonly) : N.name.localeCompare($.name);
     });
-    b(u), $(null);
+    y(m), ne(null);
   }, [e]), L(() => {
-    v(n.filter((u) => u.id != null));
+    R(n.filter((m) => m.id != null));
   }, [n]);
-  const Z = re(() => {
-    const u = /* @__PURE__ */ new Map();
-    return p.forEach((S) => u.set(S.id, S)), u;
-  }, [p]), ye = xe(
-    (u) => {
-      const S = [], R = /* @__PURE__ */ new Set();
-      let D = Z.get(u);
-      for (; D && !(R.has(D.id) || (R.add(D.id), S.push({ id: D.id, name: D.name, key: D.key }), !D.parent_id)); )
-        D = Z.get(D.parent_id);
-      return S.reverse();
+  const le = ae(() => {
+    const m = /* @__PURE__ */ new Map();
+    return g.forEach((N) => m.set(N.id, N)), m;
+  }, [g]), de = Se(
+    (m) => {
+      const N = [], $ = /* @__PURE__ */ new Set();
+      let P = le.get(m);
+      for (; P && !($.has(P.id) || ($.add(P.id), N.push({ id: P.id, name: P.name, key: P.key }), !P.parent_id)); )
+        P = le.get(P.parent_id);
+      return N.reverse();
     },
-    [Z]
-  ), ee = re(() => !g.length || !p.length ? [] : g.map((u) => ({
-    ...u,
-    categoryChain: ye(u.type)
-  })), [g, p]);
+    [le]
+  ), Z = ae(() => !h.length || !g.length ? [] : h.map((m) => ({
+    ...m,
+    categoryChain: de(m.type)
+  })), [h, g]);
   L(() => {
-    const u = setTimeout(() => {
-      E(m), ie(1);
+    const m = setTimeout(() => {
+      u(I), ee(1);
     }, 300);
-    return () => clearTimeout(u);
-  }, [m]);
-  const [te, ae] = N(10), [H, ie] = N(1), ne = re(() => {
-    const u = w.trim().toLowerCase();
-    return u ? ee.filter((S) => {
-      const R = S.name.toLowerCase().includes(u), D = S.categoryChain?.some(
-        (Y) => Y.name.toLowerCase().includes(u)
+    return () => clearTimeout(m);
+  }, [I]);
+  const [se, H] = C(25), [ue, ee] = C(1), me = ae(() => {
+    const m = x.trim().toLowerCase();
+    return m ? Z.filter((N) => {
+      const $ = N.name.toLowerCase().includes(m), P = N.categoryChain?.some(
+        (z) => z.name.toLowerCase().includes(m)
       );
-      return R || D;
-    }) : ee;
-  }, [ee, w]), de = re(() => {
-    const u = [...ne];
-    return u.sort((S, R) => {
-      let D = "", Y = "";
-      switch (x) {
+      return $ || P;
+    }) : Z;
+  }, [Z, x]), pe = ae(() => {
+    const m = [...me];
+    return m.sort((N, $) => {
+      if (w === "lastUpdatedOn") {
+        const Ve = new Date(N.updatedDateTime).getTime(), Ke = new Date($.updatedDateTime).getTime(), Pe = Ve - Ke;
+        return U === "asc" ? Pe : -Pe;
+      }
+      let P = "", z = "";
+      switch (w) {
         case "name":
-          D = S.name, Y = R.name;
+          P = N.name, z = $.name;
           break;
         case "category":
-          D = S.categoryChain?.[0]?.name ?? "", Y = R.categoryChain?.[0]?.name ?? "";
+          P = N.categoryChain?.[0]?.name ?? "", z = $.categoryChain?.[0]?.name ?? "";
           break;
         case "type":
-          D = S.categoryChain?.[1]?.name ?? "", Y = R.categoryChain?.[1]?.name ?? "";
+          P = N.categoryChain?.[1]?.name ?? "", z = $.categoryChain?.[1]?.name ?? "";
           break;
         case "subtype":
-          D = S.categoryChain?.[2]?.name ?? "", Y = R.categoryChain?.[2]?.name ?? "";
+          P = N.categoryChain?.[2]?.name ?? "", z = $.categoryChain?.[2]?.name ?? "";
+          break;
+        case "templateId":
+          P = N.id ?? "", z = $.id ?? "";
+          break;
+        case "companyName":
+          P = N.companyName ?? "", z = $.companyName ?? "";
+          break;
+        case "lastUpdatedBy":
+          P = N.updatedByName ?? "", z = $.updatedByName ?? "";
           break;
       }
-      const Ie = D.localeCompare(Y, void 0, {
+      const De = P.localeCompare(z, void 0, {
         sensitivity: "base"
       });
-      return B === "asc" ? Ie : -Ie;
-    }), u;
-  }, [ne, x, B]), { pagedData: le } = dt({
-    data: de,
-    page: H,
-    pageSize: te
-  }), ge = xe(
-    (u) => g.some(
-      (S) => S.name.trim().toLowerCase() === u.trim().toLowerCase()
+      return U === "asc" ? De : -De;
+    }), m;
+  }, [me, w, U]), { pagedData: be } = wt({
+    data: pe,
+    page: ue,
+    pageSize: se
+  }), f = Se(
+    (m) => h.some(
+      (N) => N.name.trim().toLowerCase() === m.trim().toLowerCase()
     ),
-    [g]
-  ), f = (u) => {
-    G(u), k(!1), U("input"), M(!0);
-  }, I = (u) => {
-    G(u), U("confirm"), M(!0);
-  }, { showNotification: _ } = ke(), j = async (u) => {
-    if (K)
+    [h]
+  ), k = (m) => {
+    re(m), M(!1), S("input"), _(!0);
+  }, F = (m) => {
+    re(m), S("confirm"), _(!0);
+  }, { showNotification: j } = ve(), X = async (m) => {
+    if (O)
       try {
-        if (P === "input") {
-          if (!u) return;
-          if (ge(u)) {
-            k(!0);
+        if (A === "input") {
+          if (!m) return;
+          if (f(m)) {
+            M(!0);
             return;
           }
-          await l({
-            templateId: K.id,
+          await o({
+            templateId: O.id,
             request: {
               projectId: "",
               enerexIdentifier: "",
-              newName: u,
-              parent_id: K.id ?? null
+              newName: m,
+              parent_id: O.id ?? null
             }
-          }), _(
-            `Template "${u}" duplicated successfully`,
+          }), j(
+            `Template "${m}" duplicated successfully`,
             "success"
           );
         }
-        P === "confirm" && (await d(K.id), _(
-          `Template "${K.name}" deleted successfully`,
+        A === "confirm" && (await v(O.id), j(
+          `Template "${O.name}" deleted successfully`,
           "success"
-        )), M(!1), G(null), s();
+        )), _(!1), re(null), r();
       } catch {
-        _(
-          P === "confirm" ? "Failed to delete template. Please try again." : "Failed to duplicate template. Please try again.",
+        j(
+          A === "confirm" ? "Failed to delete template. Please try again." : "Failed to duplicate template. Please try again.",
           "error"
         );
       }
-  }, X = K?.categoryChain?.[2]?.name?.toLowerCase() ?? "this", F = K?.name?.toLowerCase() ?? "";
-  return /* @__PURE__ */ c(fe, { children: [
-    (o || y) && /* @__PURE__ */ t(se, { overlay: !0 }),
-    /* @__PURE__ */ c("div", { className: "ts-page", children: [
-      /* @__PURE__ */ c("div", { className: "ts-header", children: [
+  }, q = O?.categoryChain?.[2]?.name?.toLowerCase() ?? "this", oe = O?.name?.toLowerCase() ?? "";
+  return /* @__PURE__ */ d(ye, { children: [
+    (c || E) && /* @__PURE__ */ t(ie, { overlay: !0 }),
+    /* @__PURE__ */ d("div", { className: "ts-page", children: [
+      /* @__PURE__ */ d("div", { className: "ts-header", children: [
         /* @__PURE__ */ t("h1", { className: "ts-title", children: "Templates" }),
         /* @__PURE__ */ t("button", { className: "ts-btn ts-btn-primary", onClick: a, children: "+ Add Template" })
       ] }),
-      /* @__PURE__ */ t("div", { className: "ts-search", children: /* @__PURE__ */ c("div", { className: "ts-search-box", children: [
-        /* @__PURE__ */ t(
-          "input",
-          {
-            type: "text",
-            placeholder: "Search...",
-            value: m,
-            onChange: (u) => T(u.target.value)
-          }
-        ),
-        m && /* @__PURE__ */ t(
-          "button",
-          {
-            className: "ts-clear-btn",
-            "aria-label": "Clear search",
-            onClick: () => T(""),
-            children: "×"
-          }
-        ),
-        /* @__PURE__ */ t("button", { className: "ts-search-btn", "aria-label": "Search", children: /* @__PURE__ */ t(lt, {}) })
-      ] }) }),
-      /* @__PURE__ */ c("div", { className: "ts-table-wrapper", children: [
-        /* @__PURE__ */ c("table", { className: "ts-table", children: [
-          /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ c("tr", { children: [
-            /* @__PURE__ */ t("th", { onClick: () => V("name"), className: "ts-sortable", children: /* @__PURE__ */ c("div", { className: "ts-th-sort", children: [
-              "Name",
-              /* @__PURE__ */ c("span", { className: "ts-sort-icons", children: [
-                /* @__PURE__ */ t(
-                  "span",
-                  {
-                    className: x === "name" && B === "asc" ? "active" : "",
-                    children: "▲"
-                  }
-                ),
-                /* @__PURE__ */ t(
-                  "span",
-                  {
-                    className: x === "name" && B === "desc" ? "active" : "",
-                    children: "▼"
-                  }
-                )
-              ] })
+      /* @__PURE__ */ t("div", { className: "ts-search-container", children: /* @__PURE__ */ d("div", { className: "ts-search-container-inner", children: [
+        /* @__PURE__ */ t("div", { className: "ts-search", children: /* @__PURE__ */ d("div", { className: "ts-search-box", children: [
+          /* @__PURE__ */ t(
+            "input",
+            {
+              type: "text",
+              placeholder: "Search...",
+              value: I,
+              onChange: (m) => b(m.target.value)
+            }
+          ),
+          /* @__PURE__ */ t("button", { className: "ts-search-btn", "aria-label": "Search", children: /* @__PURE__ */ t(gt, {}) })
+        ] }) }),
+        /* @__PURE__ */ d("div", { className: "ts-table-wrapper", children: [
+          /* @__PURE__ */ d("table", { className: "ts-table", children: [
+            /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ d("tr", { children: [
+              /* @__PURE__ */ t("th", { className: "ts-cursor-default" }),
+              /* @__PURE__ */ t(
+                J,
+                {
+                  label: "Name",
+                  sortKey: "name",
+                  sortBy: w,
+                  sortOrder: U,
+                  onSort: K
+                }
+              ),
+              l && /* @__PURE__ */ t(
+                J,
+                {
+                  label: "Template Id",
+                  sortKey: "templateId",
+                  sortBy: w,
+                  sortOrder: U,
+                  onSort: K
+                }
+              ),
+              /* @__PURE__ */ t(
+                J,
+                {
+                  label: "Category",
+                  sortKey: "category",
+                  sortBy: w,
+                  sortOrder: U,
+                  onSort: K
+                }
+              ),
+              /* @__PURE__ */ t(
+                J,
+                {
+                  label: "Type",
+                  sortKey: "type",
+                  sortBy: w,
+                  sortOrder: U,
+                  onSort: K
+                }
+              ),
+              /* @__PURE__ */ t(
+                J,
+                {
+                  label: "Subtype",
+                  sortKey: "subtype",
+                  sortBy: w,
+                  sortOrder: U,
+                  onSort: K
+                }
+              ),
+              l && /* @__PURE__ */ t(
+                J,
+                {
+                  label: "Company Name",
+                  sortKey: "companyName",
+                  sortBy: w,
+                  sortOrder: U,
+                  onSort: K
+                }
+              ),
+              /* @__PURE__ */ t(
+                J,
+                {
+                  label: "Last Updated by",
+                  sortKey: "lastUpdatedBy",
+                  sortBy: w,
+                  sortOrder: U,
+                  onSort: K
+                }
+              ),
+              /* @__PURE__ */ t(
+                J,
+                {
+                  label: "Last Updated on",
+                  sortKey: "lastUpdatedOn",
+                  sortBy: w,
+                  sortOrder: U,
+                  onSort: K
+                }
+              ),
+              /* @__PURE__ */ t("th", { className: "ts-cursor-default", children: "Actions" })
             ] }) }),
-            /* @__PURE__ */ t(
-              "th",
+            /* @__PURE__ */ t("tbody", { children: be.map((m) => /* @__PURE__ */ t(
+              mt,
               {
-                onClick: () => V("category"),
-                className: "ts-sortable",
-                children: /* @__PURE__ */ c("div", { className: "ts-th-sort", children: [
-                  "Category",
-                  /* @__PURE__ */ c("span", { className: "ts-sort-icons", children: [
-                    /* @__PURE__ */ t(
-                      "span",
-                      {
-                        className: x === "category" && B === "asc" ? "active" : "",
-                        children: "▲"
-                      }
-                    ),
-                    /* @__PURE__ */ t(
-                      "span",
-                      {
-                        className: x === "category" && B === "desc" ? "active" : "",
-                        children: "▼"
-                      }
-                    )
-                  ] })
-                ] })
-              }
-            ),
-            /* @__PURE__ */ t("th", { onClick: () => V("type"), className: "ts-sortable", children: /* @__PURE__ */ c("div", { className: "ts-th-sort", children: [
-              "Type",
-              /* @__PURE__ */ c("span", { className: "ts-sort-icons", children: [
-                /* @__PURE__ */ t(
-                  "span",
-                  {
-                    className: x === "type" && B === "asc" ? "active" : "",
-                    children: "▲"
-                  }
-                ),
-                /* @__PURE__ */ t(
-                  "span",
-                  {
-                    className: x === "type" && B === "desc" ? "active" : "",
-                    children: "▼"
-                  }
-                )
-              ] })
-            ] }) }),
-            /* @__PURE__ */ t(
-              "th",
-              {
-                onClick: () => V("subtype"),
-                className: "ts-sortable",
-                children: /* @__PURE__ */ c("div", { className: "ts-th-sort", children: [
-                  "Subtype",
-                  /* @__PURE__ */ c("span", { className: "ts-sort-icons", children: [
-                    /* @__PURE__ */ t(
-                      "span",
-                      {
-                        className: x === "subtype" && B === "asc" ? "active" : "",
-                        children: "▲"
-                      }
-                    ),
-                    /* @__PURE__ */ t(
-                      "span",
-                      {
-                        className: x === "subtype" && B === "desc" ? "active" : "",
-                        children: "▼"
-                      }
-                    )
-                  ] })
-                ] })
-              }
-            ),
-            /* @__PURE__ */ t("th", { children: "Updated by" }),
-            /* @__PURE__ */ t("th", { className: "align-right", children: "Actions" })
-          ] }) }),
-          /* @__PURE__ */ t("tbody", { children: le.map((u) => /* @__PURE__ */ t(
-            st,
+                template: m,
+                openActionId: p,
+                setOpenActionId: T,
+                onDuplicate: k,
+                onEdit: i,
+                onRemove: F,
+                onPreview: s,
+                onRefresh: r
+              },
+              m.id
+            )) })
+          ] }),
+          /* @__PURE__ */ t(
+            ht,
             {
-              template: u,
-              openActionId: A,
-              setOpenActionId: h,
-              onDuplicate: f,
-              onEdit: i,
-              onRemove: I,
-              onPreview: r,
-              onRefresh: s
-            },
-            u.id
-          )) })
-        ] }),
-        /* @__PURE__ */ t(
-          at,
-          {
-            page: H,
-            pageSize: te,
-            totalRecords: de.length,
-            onPageChange: ie,
-            onPageSizeChange: ae
-          }
-        )
-      ] })
+              page: ue,
+              pageSize: se,
+              totalRecords: pe.length,
+              onPageChange: ee,
+              onPageSizeChange: H
+            }
+          )
+        ] })
+      ] }) })
     ] }),
     /* @__PURE__ */ t(
-      it,
+      yt,
       {
-        show: O,
-        variant: P,
-        title: P === "confirm" ? "Are you sure?" : "Save Template As",
-        message: P === "confirm" ? `Are you sure you want to remove ${X} template "${F}"?` : "",
-        placeholder: P === "input" ? "New name" : "",
+        show: B,
+        variant: A,
+        title: A === "confirm" ? "Are you sure?" : "Save Template As",
+        message: A === "confirm" ? `Are you sure you want to remove ${q} template "${oe}"?` : "",
+        placeholder: A === "input" ? "New name" : "",
         label: "New Name",
         requiredMessage: "Enter a new name",
-        externalError: C,
+        externalError: D,
         externalErrorMessage: "Template name already exists. Please choose a different name",
-        confirmText: P === "confirm" ? "Ok" : "Save as",
-        confirmButtonVariant: P === "confirm" ? "danger" : "primary",
-        onConfirm: j,
-        onCancel: () => M(!1),
-        onInputChange: P === "input" ? () => k(!1) : void 0
+        confirmText: A === "confirm" ? "Ok" : "Save as",
+        confirmButtonVariant: A === "confirm" ? "danger" : "primary",
+        onConfirm: X,
+        onCancel: () => _(!1),
+        onInputChange: A === "input" ? () => M(!1) : void 0
       }
     )
   ] });
-}, pe = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+}, he = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
 <html\r
   dir="ltr"\r
   xmlns:o="urn:schemas-microsoft-com:office:office"\r
@@ -1275,70 +1393,70 @@ const st = qe(rt), ve = 5, at = ({
     </div>\r
   </body>\r
 </html>\r
-`, we = {
+`, xe = {
   EDITOR_SCRIPT_URL: "https://plugins.stripo.email/resources/uieditor/latest/UIEditor.js",
   EDITOR_PLUGIN_ID: "1afdc3161ec7409a8627a1c8561d45f5",
   EDITOR_SECRET_KEY: "54ba748ed7e94f2e929555783acb03da"
-}, ut = (e) => {
-  const n = Array.from(new Set(e.map((a) => a.category))), s = [];
+}, Nt = (e) => {
+  const n = Array.from(new Set(e.map((a) => a.category))), r = [];
   return n.forEach((a) => {
-    const i = e.filter((r) => r.category === a).map((r) => ({
-      label: r.label,
-      value: r.value,
-      hint: r.hint,
-      hidden: r.hidden
+    const i = e.filter((s) => s.category === a).map((s) => ({
+      label: s.label,
+      value: s.value,
+      hint: s.hint,
+      hidden: s.hidden
     }));
-    s.push({ category: a, entries: i });
-  }), s;
-}, pt = () => {
-  const e = z(), { enerexIdentifier: n, projectId: s } = q();
-  return he({
+    r.push({ category: a, entries: i });
+  }), r;
+}, Ct = () => {
+  const e = Y(), { enerexIdentifier: n, projectId: r } = V();
+  return ge({
     queryKey: ["getTemplateTags"],
     queryFn: async (i) => await e.get(
-      `${Q.MergeTags}${s}/${n}`
+      `${Q.MergeTags}${r}/${n}`
     )
   });
-}, ft = () => {
-  const e = z(), { enerexIdentifier: n, projectId: s } = q();
-  return he({
+}, xt = () => {
+  const e = Y(), { enerexIdentifier: n, projectId: r } = V();
+  return ge({
     queryKey: ["getExcludeCategory"],
     queryFn: async (i) => await e.get(
-      `${Q.ExcludeCategory}${s}/${n}`
+      `${Q.ExcludeCategory}${r}/${n}`
     )
   });
-}, ht = ({
+}, Et = ({
   templateHTML: e,
   className: n = "",
-  loading: s = !1,
+  loading: r = !1,
   onEditorInitialized: a
 }) => {
-  const { post: i } = Oe(), { data: r } = pt(), { data: l } = ft(), [o, d] = N(
-    e ?? { html: pe, css: "" }
-  ), { userEmail: y } = q(), m = J(null), T = "https://plugin.stripocdn.email/content/guids/CABINET_eab4e7d5a4603ac03f4120652a3a5a540f0c79c688514939f095f67433ed4a67/images/photo256.png", w = "https://plugins.stripo.email/api/v1/auth";
+  const { post: i } = je(), { data: s } = Ct(), { data: l } = xt(), [o, c] = C(
+    e ?? { html: he, css: "" }
+  ), { userEmail: v } = V(), E = te(null), I = "https://plugin.stripocdn.email/content/guids/CABINET_eab4e7d5a4603ac03f4120652a3a5a540f0c79c688514939f095f67433ed4a67/images/photo256.png", b = "https://plugins.stripo.email/api/v1/auth";
   L(() => {
-    (async () => (await E(), r && l && await A(we.EDITOR_SCRIPT_URL)))();
-  }, [r, l]);
-  async function E() {
-    window.Zone || await new Promise((g, b) => {
-      const p = document.createElement("script");
-      p.src = "https://unpkg.com/zone.js@0.13.1/bundles/zone.umd.min.js";
-      const v = document.querySelector("script[nonce]")?.nonce;
-      v && p.setAttribute("nonce", v), p.onload = () => g(), p.onerror = () => b(new Error("Failed to load zone.js")), document.head.appendChild(p);
+    (async () => (await x(), s && l && await u(xe.EDITOR_SCRIPT_URL)))();
+  }, [s, l]);
+  async function x() {
+    window.Zone || await new Promise((T, h) => {
+      const y = document.createElement("script");
+      y.src = "https://unpkg.com/zone.js@0.13.1/bundles/zone.umd.min.js";
+      const g = document.querySelector("script[nonce]")?.nonce;
+      g && y.setAttribute("nonce", g), y.onload = () => T(), y.onerror = () => h(new Error("Failed to load zone.js")), document.head.appendChild(y);
     });
   }
-  async function A(g) {
-    let b = document.getElementById(
+  async function u(T) {
+    let h = document.getElementById(
       "UiEditorScript"
     );
-    b || (b = document.createElement("script"), b.id = "UiEditorScript", b.src = g, b.onload = async () => {
-      await h();
-    }, document.body.appendChild(b)), await new Promise(
-      (p) => b.addEventListener("load", () => p(), { once: !0 })
+    h || (h = document.createElement("script"), h.id = "UiEditorScript", h.src = T, h.onload = async () => {
+      await p();
+    }, document.body.appendChild(h)), await new Promise(
+      (y) => h.addEventListener("load", () => y(), { once: !0 })
     );
   }
-  const h = async () => {
-    const g = m.current;
-    if (!g) {
+  const p = async () => {
+    const T = E.current;
+    if (!T) {
       console.error("Missing #stripoEditorContainer in DOM");
       return;
     }
@@ -1346,48 +1464,48 @@ const st = qe(rt), ve = 5, at = ({
       console.error("UIEditor script not loaded or not exposing initEditor");
       return;
     }
-    const b = {
+    const h = {
       html: o.html,
       css: o.css,
       modulesExcludedCategories: l ?? [],
       forceRecreate: !0,
       metadata: {
-        emailId: y,
+        emailId: v,
         userId: "1",
         // username: userName,
-        avatarUrl: T
+        avatarUrl: I
       },
       locale: "en",
-      onTokenRefreshRequest: async (p) => {
-        const v = {
-          pluginId: we.EDITOR_PLUGIN_ID,
-          secretKey: we.EDITOR_SECRET_KEY,
-          userId: y,
+      onTokenRefreshRequest: async (y) => {
+        const g = {
+          pluginId: xe.EDITOR_PLUGIN_ID,
+          secretKey: xe.EDITOR_SECRET_KEY,
+          userId: v,
           role: "user"
-        }, O = await i(
-          w,
-          v
+        }, R = await i(
+          b,
+          g
         );
-        O?.token && p(O.token);
+        R?.token && y(R.token);
       },
       onTemplateLoaded: () => {
         a && a(!0);
       },
-      mergeTags: ut(r ?? [])
+      mergeTags: Nt(s ?? [])
     };
-    for (const [p, v] of Object.entries({
+    for (const [y, g] of Object.entries({
       codeEditorButtonSelector: "#codeEditor",
       undoButtonSelector: "#undoButton",
       redoButtonSelector: "#redoButton",
       mobileViewButtonSelector: "#mobileViewButton",
       desktopViewButtonSelector: "#desktopViewButton"
     }))
-      g.ownerDocument && g.getRootNode() instanceof ShadowRoot && g.getRootNode().querySelector(v) && (b[p] = v);
-    await window.UIEditor.initEditor(g, b);
+      T.ownerDocument && T.getRootNode() instanceof ShadowRoot && T.getRootNode().querySelector(g) && (h[y] = g);
+    await window.UIEditor.initEditor(T, h);
   };
-  return /* @__PURE__ */ t("div", { className: "position-relative", children: /* @__PURE__ */ c("div", { className: `editor-container ${n}`, children: [
-    s && /* @__PURE__ */ t("div", { className: "loading-overlay", children: /* @__PURE__ */ t(
-      Ke,
+  return /* @__PURE__ */ t("div", { className: "position-relative", children: /* @__PURE__ */ d("div", { className: `editor-container ${n}`, children: [
+    r && /* @__PURE__ */ t("div", { className: "loading-overlay", children: /* @__PURE__ */ t(
+      Qe,
       {
         animation: "border",
         style: { width: "11px", height: "11px" },
@@ -1398,21 +1516,21 @@ const st = qe(rt), ve = 5, at = ({
       }
     ) }),
     /* @__PURE__ */ t("div", { id: "externalSystemContainer" }),
-    /* @__PURE__ */ t("div", { id: "stripoEditorContainer", ref: m })
+    /* @__PURE__ */ t("div", { id: "stripoEditorContainer", ref: E })
   ] }) });
-}, $e = ({
+}, Me = ({
   label: e,
   register: n,
-  validation: s,
+  validation: r,
   required: a = !1,
   name: i,
-  error: r,
+  error: s,
   className: l = "",
   ...o
 }) => {
-  const d = !!(r && r[i]);
-  return /* @__PURE__ */ c("div", { className: `ts-form-group ${l}`, children: [
-    e && /* @__PURE__ */ c("label", { className: "ts-form-label", children: [
+  const c = !!(s && s[i]);
+  return /* @__PURE__ */ d("div", { className: `ts-form-group ${l}`, children: [
+    e && /* @__PURE__ */ d("label", { className: "ts-form-label", children: [
       e,
       a && /* @__PURE__ */ t("span", { className: "ts-required", children: "*" })
     ] }),
@@ -1423,79 +1541,59 @@ const st = qe(rt), ve = 5, at = ({
         type: "text",
         ...o,
         ...n ? n(i, {
-          ...s
+          ...r
         }) : {},
-        className: `ts-input ${d ? "ts-input-error" : ""}`,
-        "aria-invalid": d
+        className: `ts-input ${c ? "ts-input-error" : ""}`,
+        "aria-invalid": c
       }
     ),
-    d && /* @__PURE__ */ t("div", { className: "ts-error-text", children: r?.[i]?.message })
+    c && /* @__PURE__ */ t("div", { className: "ts-error-text", children: s?.[i]?.message })
   ] });
 };
-function Ne(e) {
-  return e.sort((n, s) => n.name.localeCompare(s.name));
-}
-function yt(e) {
-  const n = /* @__PURE__ */ new Map(), s = [];
-  e.forEach((r) => n.set(r.id, r));
-  let a = e.filter((r) => r.parent_id === 0), i = 0;
-  for (; a.length > 0; ) {
-    s.push({ level: i, data: a });
-    const r = a.map((o) => o.id);
-    a = e.filter(
-      (o) => r.includes(o.parent_id)
-    ), i++;
-  }
-  return s;
-}
-function Te(e, n) {
-  const a = yt(e).find((i) => i.level === n);
-  return a ? a.data : [];
-}
-function gt(e) {
+function St(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var Ce = { exports: {} };
+var Ee = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
 	http://jedwatson.github.io/classnames
 */
-var Ae;
-function bt() {
-  return Ae || (Ae = 1, function(e) {
+var _e;
+function Lt() {
+  return _e || (_e = 1, function(e) {
     (function() {
       var n = {}.hasOwnProperty;
-      function s() {
-        for (var r = "", l = 0; l < arguments.length; l++) {
+      function r() {
+        for (var s = "", l = 0; l < arguments.length; l++) {
           var o = arguments[l];
-          o && (r = i(r, a(o)));
+          o && (s = i(s, a(o)));
         }
-        return r;
+        return s;
       }
-      function a(r) {
-        if (typeof r == "string" || typeof r == "number")
-          return r;
-        if (typeof r != "object")
+      function a(s) {
+        if (typeof s == "string" || typeof s == "number")
+          return s;
+        if (typeof s != "object")
           return "";
-        if (Array.isArray(r))
-          return s.apply(null, r);
-        if (r.toString !== Object.prototype.toString && !r.toString.toString().includes("[native code]"))
-          return r.toString();
+        if (Array.isArray(s))
+          return r.apply(null, s);
+        if (s.toString !== Object.prototype.toString && !s.toString.toString().includes("[native code]"))
+          return s.toString();
         var l = "";
-        for (var o in r)
-          n.call(r, o) && r[o] && (l = i(l, o));
+        for (var o in s)
+          n.call(s, o) && s[o] && (l = i(l, o));
         return l;
       }
-      function i(r, l) {
-        return l ? r ? r + " " + l : r + l : r;
+      function i(s, l) {
+        return l ? s ? s + " " + l : s + l : s;
       }
-      e.exports ? (s.default = s, e.exports = s) : window.classNames = s;
+      e.exports ? (r.default = r, e.exports = r) : window.classNames = r;
     })();
-  }(Ce)), Ce.exports;
+  }(Ee)), Ee.exports;
 }
-var vt = bt();
-const _e = /* @__PURE__ */ gt(vt), De = (e) => e.data.isSeparator ? /* @__PURE__ */ t("div", { style: { padding: 0, margin: "2px 0" }, children: /* @__PURE__ */ t(
+var kt = Lt();
+const Re = /* @__PURE__ */ St(kt), Be = (e) => e.data.isSeparator ? /* @__PURE__ */ t("div", { style: { padding: 0, margin: "2px 0" }, children: /* @__PURE__ */ t(
   "hr",
   {
     style: {
@@ -1505,37 +1603,37 @@ const _e = /* @__PURE__ */ gt(vt), De = (e) => e.data.isSeparator ? /* @__PURE__
       margin: 0
     }
   }
-) }) : e.data.icon ? /* @__PURE__ */ c("div", { className: "d-flex align-items-center", children: [
-  /* @__PURE__ */ t(Pe.Option, { ...e }),
+) }) : e.data.icon ? /* @__PURE__ */ d("div", { className: "d-flex align-items-center", children: [
+  /* @__PURE__ */ t(Ae.Option, { ...e }),
   /* @__PURE__ */ t("span", { className: "px-1 template-studio-dropdown-postfix-icon", children: e.data.icon })
-] }) : /* @__PURE__ */ t(Pe.Option, { ...e }), wt = ({
+] }) : /* @__PURE__ */ t(Ae.Option, { ...e }), It = ({
   name: e = "",
   control: n,
-  options: s,
+  options: r,
   multiple: a = !1,
   placeholder: i,
-  validation: r,
+  validation: s,
   labelKey: l = "name",
   disabled: o,
-  isInvalid: d,
-  value: y,
-  onChange: m,
-  uncontrolled: T,
-  menuPlacement: w = "auto",
-  closeOnSelect: E = !0
+  isInvalid: c,
+  value: v,
+  onChange: E,
+  uncontrolled: I,
+  menuPlacement: b = "auto",
+  closeOnSelect: x = !0
 }) => {
-  const A = {
-    control: (h) => ({
-      ...h,
+  const u = {
+    control: (p) => ({
+      ...p,
       minHeight: "33px",
       // state.isFocused can display different borderColor if you need it
-      borderColor: d ? "var(--bs-form-invalid-border-color) !important" : "var(--ct-input-border-color)",
-      backgroundImage: d ? 'url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27 width=%2712%27 height=%2712%27 fill=%27none%27 stroke=%27%23fa5c7c%27%3e%3ccircle cx=%276%27 cy=%276%27 r=%274.5%27/%3e%3cpath stroke-linejoin=%27round%27 d=%27M5.8 3.6h.4L6 6.5z%27/%3e%3ccircle cx=%276%27 cy=%278.2%27 r=%27.6%27 fill=%27%23fa5c7c%27 stroke=%27none%27/%3e%3c/svg%3e")' : "none",
+      borderColor: c ? "var(--bs-form-invalid-border-color) !important" : "var(--ct-input-border-color)",
+      backgroundImage: c ? 'url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27 width=%2712%27 height=%2712%27 fill=%27none%27 stroke=%27%23fa5c7c%27%3e%3ccircle cx=%276%27 cy=%276%27 r=%274.5%27/%3e%3cpath stroke-linejoin=%27round%27 d=%27M5.8 3.6h.4L6 6.5z%27/%3e%3ccircle cx=%276%27 cy=%278.2%27 r=%27.6%27 fill=%27%23fa5c7c%27 stroke=%27none%27/%3e%3c/svg%3e")' : "none",
       backgroundRepeat: "no-repeat",
       backgroundPosition: "right calc(0.375em + 0.225rem) center",
       backgroundSize: "calc(0.75em + 0.45rem) calc(0.75em + 0.45rem)",
       "&:hover": {
-        borderColor: d ? "var(--bs-form-invalid-border-color)" : "var(--ct-input-border-color)"
+        borderColor: c ? "var(--bs-form-invalid-border-color)" : "var(--ct-input-border-color)"
       },
       "& .react-select__single-value": {
         color: "var(--ct-input-color) !important"
@@ -1547,344 +1645,342 @@ const _e = /* @__PURE__ */ gt(vt), De = (e) => e.data.isSeparator ? /* @__PURE__
         display: "none"
       }
     }),
-    menu: (h) => ({
-      ...h,
+    menu: (p) => ({
+      ...p,
       marginTop: 0,
       width: "max-content",
       minWidth: "100%"
     }),
-    menuPortal: (h) => ({
-      ...h,
+    menuPortal: (p) => ({
+      ...p,
       zIndex: 1e4
     }),
-    multiValueRemove: (h) => ({
-      ...h,
+    multiValueRemove: (p) => ({
+      ...p,
       display: o ? "none" : "block"
     })
   };
-  return T ? /* @__PURE__ */ t(
-    Le,
+  return I ? /* @__PURE__ */ t(
+    $e,
     {
-      components: { Option: De },
-      isOptionDisabled: (h) => !!h.isSeparator,
-      className: _e({
-        "is-invalid": d
+      components: { Option: Be },
+      isOptionDisabled: (p) => !!p.isSeparator,
+      className: Re({
+        "is-invalid": c
       }),
-      styles: A,
+      styles: u,
       classNamePrefix: "react-select",
       isMulti: a,
-      options: s,
-      onChange: m,
+      options: r,
+      onChange: E,
       placeholder: i,
       menuPortalTarget: document.body,
-      value: y,
-      getOptionLabel: typeof l == "string" ? (h) => h[l] : l,
-      getOptionValue: (h) => h.id,
+      value: v,
+      getOptionLabel: typeof l == "string" ? (p) => p[l] : l,
+      getOptionValue: (p) => p.id,
       isDisabled: o,
-      menuPlacement: w,
-      closeMenuOnSelect: E
+      menuPlacement: b,
+      closeMenuOnSelect: x
     }
   ) : /* @__PURE__ */ t(
-    Ge,
+    Xe,
     {
       control: n,
       name: e,
-      rules: r,
-      render: ({ field: { onChange: h, value: g, onBlur: b } }) => /* @__PURE__ */ t(
-        Le,
+      rules: s,
+      render: ({ field: { onChange: p, value: T, onBlur: h } }) => /* @__PURE__ */ t(
+        $e,
         {
-          components: { Option: De },
-          isOptionDisabled: (p) => !!p.isSeparator,
-          className: _e({
-            "is-invalid": d
+          components: { Option: Be },
+          isOptionDisabled: (y) => !!y.isSeparator,
+          className: Re({
+            "is-invalid": c
           }),
-          styles: A,
+          styles: u,
           classNamePrefix: "react-select",
           isMulti: a,
-          options: s,
-          onBlur: b,
-          onChange: h,
+          options: r,
+          onBlur: h,
+          onChange: p,
           placeholder: i,
           menuPortalTarget: document.body,
-          value: g,
-          getOptionLabel: typeof l == "string" ? (p) => p[l] : l,
-          getOptionValue: (p) => p.id,
+          value: T,
+          getOptionLabel: typeof l == "string" ? (y) => y[l] : l,
+          getOptionValue: (y) => y.id,
           isDisabled: o,
-          menuPlacement: w,
-          closeMenuOnSelect: E
+          menuPlacement: b,
+          closeMenuOnSelect: x
         },
-        g ? g.id || g.value || JSON.stringify(g) : "reset"
+        T ? T.id || T.value || JSON.stringify(T) : "reset"
       )
     }
   );
-}, ue = ({
+}, fe = ({
   label: e,
   name: n,
-  validation: s,
+  validation: r,
   control: a,
   error: i,
-  options: r = [],
+  options: s = [],
   required: l = !1,
   disabled: o = !1,
-  className: d = ""
+  className: c = ""
 }) => {
-  const y = !!(i && i[n]);
-  return /* @__PURE__ */ c("div", { className: `ts-form-group ${d}`, children: [
-    e && /* @__PURE__ */ c("label", { className: "ts-form-label", children: [
+  const v = !!(i && i[n]);
+  return /* @__PURE__ */ d("div", { className: `ts-form-group ${c}`, children: [
+    e && /* @__PURE__ */ d("label", { className: "ts-form-label", children: [
       e,
       l && /* @__PURE__ */ t("span", { className: "ts-required", children: "*" })
     ] }),
     /* @__PURE__ */ t(
-      wt,
+      It,
       {
         name: n,
         control: a,
-        options: r,
-        validation: s,
+        options: s,
+        validation: r,
         disabled: o,
-        isInvalid: y
+        isInvalid: v
       }
     ),
-    y && /* @__PURE__ */ t("div", { className: "ts-error-text", children: i?.[n]?.message })
+    v && /* @__PURE__ */ t("div", { className: "ts-error-text", children: i?.[n]?.message })
   ] });
-}, Nt = () => {
-  const e = z();
-  He();
-  const { enerexIdentifier: n, projectId: s } = q();
-  return oe({
+}, Dt = () => {
+  const e = Y();
+  Ye();
+  const { enerexIdentifier: n, projectId: r } = V();
+  return ce({
     mutationKey: ["saveTemplate"],
-    mutationFn: async (i) => (i.enerexIdentifier = n ?? "", i.projectId = s ?? "", await e.post(
+    mutationFn: async (i) => (i.enerexIdentifier = n ?? "", i.projectId = r ?? "", await e.post(
       `${Q.SaveTemplate}`,
       i
     ))
   });
-}, Tt = {
+}, Pt = {
   id: "",
   name: "New (Blank)"
-}, Ct = ({
+}, $t = ({
   onReset: e,
   editorInitialized: n,
-  mode: s,
+  mode: r,
   templateTypes: a,
   templateList: i,
-  template: r,
+  template: s,
   onRefresh: l,
   closeEditorModal: o
 }) => {
-  const { defaultSelector: d, isAdmin: y, userEmail: m } = q(), { mutateAsync: T, isPending: w } = Fe(), {
-    register: E,
-    handleSubmit: A,
-    clearErrors: h,
-    setValue: g,
-    control: b,
-    watch: p,
-    reset: v,
-    setError: O,
-    formState: { errors: M }
-  } = We({
+  const { defaultSelector: c, isAdmin: v, userEmail: E } = V(), { mutateAsync: I, isPending: b } = Ue(), {
+    register: x,
+    handleSubmit: u,
+    clearErrors: p,
+    setValue: T,
+    control: h,
+    watch: y,
+    reset: g,
+    setError: R,
+    formState: { errors: B }
+  } = Je({
     defaultValues: {
       templateName: "",
       subTemplateType: void 0,
       subTemplateType2: void 0,
       subject: "",
       templateType: void 0,
-      template: Tt
+      template: Pt
     },
     mode: "onChange"
-  }), [P, U] = N([]), [C, k] = N(), { mutateAsync: x, isPending: $ } = Nt(), [B, ce] = N([]), [V, K] = N([]), [G, Z] = N([]), [ye, ee] = N(!1), te = J(!1), { showNotification: ae } = ke(), H = s === "edit", ie = ye || $ || w || !n;
+  }), [_, A] = C([]), [S, D] = C(), { mutateAsync: M, isPending: w } = Dt(), [ne, U] = C([]), [W, K] = C([]), [O, re] = C([]), [le, de] = C(!1), Z = te(!1), { showNotification: se } = ve(), H = r === "edit", ue = le || w || b || !n;
   L(() => {
     if (a) {
-      let f = a.filter((_) => _.id != null), I = Te(f, 0);
-      ce(Ne(I));
+      let f = a.filter((F) => F.id != null), k = Ne(f, 0);
+      U(Te(k));
     }
   }, [a]), L(() => {
-    s === "edit" && !te.current && ee(!0);
-  }, [s]), L(() => {
-    if (s !== "edit" || !r || !n || !a.length || !P.length || te.current) return;
-    const f = P.find((F) => F.id === r.templateID);
+    r === "edit" && !Z.current && de(!0);
+  }, [r]), L(() => {
+    if (r !== "edit" || !s || !n || !a.length || !_.length || Z.current) return;
+    const f = _.find((q) => q.id === s.templateID);
     if (!f) return;
-    const I = a.filter((F) => F.id != null), _ = I.find((F) => `${F.id}` == `${f.type}`), j = _ ? I.find((F) => `${F.id}` == `${_.parent_id}`) : void 0, X = j ? I.find((F) => `${F.id}` == `${j.parent_id}`) : void 0;
-    v({
-      templateType: X ? ne(X) : void 0,
-      subTemplateType: j ? ne(j) : void 0,
-      subTemplateType2: _ ? ne(_) : void 0,
+    const k = a.filter((q) => q.id != null), F = k.find((q) => `${q.id}` == `${f.type}`), j = F ? k.find((q) => `${q.id}` == `${F.parent_id}`) : void 0, X = j ? k.find((q) => `${q.id}` == `${j.parent_id}`) : void 0;
+    g({
+      templateType: X ? ee(X) : void 0,
+      subTemplateType: j ? ee(j) : void 0,
+      subTemplateType2: F ? ee(F) : void 0,
       template: f,
-      templateName: r.name ?? "",
-      subject: r.subject ?? ""
-    }), k(f), te.current = !0, ee(!1);
-  }, [s, r, n, a, P, v]);
-  const ne = (f) => ({
+      templateName: s.name ?? "",
+      subject: s.subject ?? ""
+    }), D(f), Z.current = !0, de(!1);
+  }, [r, s, n, a, _, g]);
+  const ee = (f) => ({
     id: String(f.id),
     name: f.name,
     key: f.key
   });
   L(() => {
-    i?.sort((f, I) => f.readonly !== I.readonly ? (f.readonly ? 0 : 1) - (I.readonly ? 0 : 1) : f.name.localeCompare(I.name)), U(i ?? []);
+    i?.sort((f, k) => f.readonly !== k.readonly ? (f.readonly ? 0 : 1) - (k.readonly ? 0 : 1) : f.name.localeCompare(k.name)), A(i ?? []);
   }, [i]), L(() => {
-    if (!p("templateType")) return;
-    const f = Te(a, 1);
+    if (!y("templateType")) return;
+    const f = Ne(a, 1);
     K(
-      Ne(
-        f.filter((I) => `${I.parent_id}` == `${p("templateType")?.id}`)
+      Te(
+        f.filter((k) => `${k.parent_id}` == `${y("templateType")?.id}`)
       )
-    );
-  }, [p("templateType"), a]), L(() => {
-    const f = p("subTemplateType");
+    ), T("subTemplateType", void 0);
+  }, [y("templateType"), a]), L(() => {
+    const f = y("subTemplateType");
     if (!f) return;
-    const I = Te(a, 2);
-    let _ = Ne(
-      I.filter((j) => `${j.parent_id}` == `${f.id}`)
+    const k = Ne(a, 2);
+    let F = Te(
+      k.filter((j) => `${j.parent_id}` == `${f.id}`)
     );
-    s !== "edit" && !y && (_ = _.filter((j) => j.key !== 2)), Z(_);
-  }, [p("subTemplateType"), a, s]), L(() => {
-    if (d && d.type1) {
-      const f = B?.find(
-        (I) => `${I.id}` === d.type1
+    r !== "edit" && !v && (F = F.filter((j) => j.key !== 2)), re(F);
+  }, [y("subTemplateType"), a, r]), L(() => {
+    if (c && c.type1) {
+      const f = ne?.find(
+        (k) => `${k.id}` === c.type1
       );
-      g("templateType", f);
+      T("templateType", f);
     }
-  }, [a, B]), L(() => {
-    if (d && d.type2) {
-      const f = V?.find(
-        (I) => `${I.id}` === d.type2
+  }, [a, ne]), L(() => {
+    if (c && c.type2) {
+      const f = W?.find(
+        (k) => `${k.id}` === c.type2
       );
-      g("subTemplateType", f);
+      T("subTemplateType", f);
     }
-  }, [a, V]), L(() => {
-    if (d && d.type3) {
-      const f = G?.find(
-        (I) => `${I.id}` === d.type3
+  }, [a, W]), L(() => {
+    if (c && c.type3) {
+      const f = O?.find(
+        (k) => `${k.id}` === c.type3
       );
-      g("subTemplateType2", f);
+      T("subTemplateType2", f);
     }
-  }, [a, G]);
-  const de = (f) => {
+  }, [a, O]);
+  const me = (f) => {
     window.StripoEditorApi.actionsApi.getTemplateData(
-      async (I) => {
+      async (k) => {
         try {
-          let _ = f.template.id, j = "";
-          const X = f.templateName.trim();
-          C?.readonly && (_ = "", j = f.template.id);
-          const F = P.find(
-            (R) => R.name === f.templateName.trim()
+          let F = f.template.id, j = "";
+          const X = f.templateName.trim(), q = _.find(
+            (N) => N.name === f.templateName.trim()
           );
-          if (F && F.id !== _) {
-            O("templateName", {
+          if (q && q?.id !== f.template.id) {
+            R("templateName", {
               type: "validate",
               message: "Template name already exists. Please choose a different name."
             });
             return;
           }
-          let me = f.templateType.id;
-          G?.length > 0 ? me = f.subTemplateType2.id : V?.length > 0 && (me = f.subTemplateType.id);
-          const u = {
+          let oe = f.templateType.id;
+          O?.length > 0 ? oe = f.subTemplateType2.id : W?.length > 0 && (oe = f.subTemplateType.id);
+          const Ie = {
             enerexIdentifier: "",
             projectId: "",
-            templateId: _,
-            templateType: me,
+            templateId: F,
+            templateType: oe,
             name: X,
-            html: I.html,
-            css: I.css,
+            html: k.html,
+            css: k.css,
             subject: f.templateType.id === "2" ? f?.subject ?? "" : "",
             parent_id: j,
-            updatedBy: m ?? ""
+            updatedBy: E ?? ""
           };
-          if (!await x(u)) {
-            ae(
+          if (!await M(Ie)) {
+            se(
               "Failed to save template. Please try again.",
               "error"
             );
             return;
           }
-          ae(
+          se(
             H ? `Template "${X}" updated successfully.` : `Template "${X}" created successfully.`,
             "success"
-          ), h(), l(), o();
-        } catch (_) {
-          console.error(_), ae(
+          ), p(), l(), o();
+        } catch (F) {
+          console.error(F), se(
             "Something went wrong while saving the template.",
             "error"
           );
         }
       }
     );
-  }, le = p("templateType"), ge = p("subTemplateType");
-  return /* @__PURE__ */ c(fe, { children: [
-    ie && /* @__PURE__ */ t(se, { overlay: !0 }),
-    /* @__PURE__ */ t("div", { className: "ts-card", children: /* @__PURE__ */ t("div", { className: "ts-card-body", children: /* @__PURE__ */ t("form", { children: /* @__PURE__ */ t("div", { className: "template-list-container", children: /* @__PURE__ */ c("div", { className: "ts-row", children: [
+  }, pe = y("templateType"), be = y("subTemplateType");
+  return /* @__PURE__ */ d(ye, { children: [
+    ue && /* @__PURE__ */ t(ie, { overlay: !0 }),
+    /* @__PURE__ */ t("div", { className: "ts-card", children: /* @__PURE__ */ t("div", { className: "ts-card-body", children: /* @__PURE__ */ t("form", { children: /* @__PURE__ */ t("div", { className: "template-list-container", children: /* @__PURE__ */ d("div", { className: "ts-row", children: [
       /* @__PURE__ */ t("div", { className: "ts-col", children: /* @__PURE__ */ t(
-        ue,
+        fe,
         {
           label: "Category",
-          control: b,
-          error: M,
-          options: B,
+          control: h,
+          error: B,
+          options: ne,
           required: !0,
-          disabled: H || $ || w || !n,
+          disabled: H || w || b || !n,
           validation: {
             required: {
               value: !0,
               message: "Select a category"
             }
           },
-          ...E("templateType")
+          ...x("templateType")
         }
       ) }),
-      V && V.length > 0 && /* @__PURE__ */ t("div", { className: "ts-col", children: /* @__PURE__ */ t(
-        ue,
+      W && W.length > 0 && /* @__PURE__ */ t("div", { className: "ts-col", children: /* @__PURE__ */ t(
+        fe,
         {
           label: "Type",
-          control: b,
-          error: M,
-          options: V,
+          control: h,
+          error: B,
+          options: W,
           required: !0,
-          disabled: H || $ || w || !n,
+          disabled: H || w || b || !n,
           validation: {
             required: {
               value: !0,
               message: "Select a type"
             }
           },
-          ...E("subTemplateType")
+          ...x("subTemplateType")
         }
       ) }),
-      G && G.length > 0 && /* @__PURE__ */ t("div", { className: "ts-col", children: /* @__PURE__ */ t(
-        ue,
+      O && O.length > 0 && /* @__PURE__ */ t("div", { className: "ts-col", children: /* @__PURE__ */ t(
+        fe,
         {
           label: "Sub Type",
-          control: b,
-          error: M,
-          options: G,
+          control: h,
+          error: B,
+          options: O,
           required: !0,
-          disabled: H || $ || w || !n,
+          disabled: H || w || b || !n,
           validation: {
             required: {
               value: !0,
               message: "Select a subtype"
             }
           },
-          ...E("subTemplateType2")
+          ...x("subTemplateType2")
         }
       ) }),
       /* @__PURE__ */ t("div", { className: "ts-col", children: /* @__PURE__ */ t(
-        ue,
+        fe,
         {
           label: "Template",
-          control: b,
-          error: M,
-          disabled: H || !H || $ || w || !n,
+          control: h,
+          error: B,
+          disabled: H || !H || w || b || !n,
           options: [],
           required: !1,
-          ...E("template")
+          ...x("template")
         }
       ) }),
-      /* @__PURE__ */ c("div", { className: "ts-col ts-template-name-col", children: [
+      /* @__PURE__ */ d("div", { className: "ts-col ts-template-name-col", children: [
         /* @__PURE__ */ t(
-          $e,
+          Me,
           {
             label: "Name",
-            register: E,
-            error: M,
+            register: x,
+            error: B,
             required: !0,
             name: "templateName",
             validation: {
@@ -1895,141 +1991,117 @@ const _e = /* @__PURE__ */ gt(vt), De = (e) => e.data.isSeparator ? /* @__PURE__
             }
           }
         ),
-        ge?.key?.toString() === "9" && H && C?.is_favourite && // <button
-        //   type="button"
-        //   className="template-favourite-btn ts-btn-light"
-        //   disabled={
-        //     loading3 ||
-        //     loading5 ||
-        //     (selectedTemplateMeta
-        //       ? selectedTemplateMeta?.is_favourite
-        //       : false)
-        //   }
-        //   onClick={handlemarkFavourite}
-        // >
-        //   {loading3 || loading5 ? (
-        //     <Loader size="sm" />
-        //   ) : selectedTemplateMeta ? (
-        //     selectedTemplateMeta?.is_favourite ? (
-        //       <StarIcon variant="filled" />
-        //     ) : (
-        //       <StarIcon variant="outlined" />
-        //     )
-        //   ) : (
-        //     <StarIcon variant="outlined" />
-        //   )}
-        // </button>
-        /* @__PURE__ */ t("span", { className: "ts-favourite-icon", children: /* @__PURE__ */ t(Ee, { variant: "filled" }) })
+        be?.key?.toString() === "9" && H && !v && S?.is_favourite && /* @__PURE__ */ t("span", { className: "ts-favourite-icon", children: /* @__PURE__ */ t(Le, { variant: "filled" }) })
       ] }),
-      le?.key?.toString() === "12" && /* @__PURE__ */ t("div", { className: "ts-col", children: /* @__PURE__ */ t(
-        $e,
+      pe?.key?.toString() === "12" && /* @__PURE__ */ t("div", { className: "ts-col", children: /* @__PURE__ */ t(
+        Me,
         {
           label: "Subject",
-          register: E,
-          error: M,
+          register: x,
+          error: B,
           required: !1,
           name: "subject"
         }
       ) }),
-      /* @__PURE__ */ c("div", { className: "ts-col ts-actions btn-padding", children: [
+      /* @__PURE__ */ d("div", { className: "ts-col ts-actions btn-padding", children: [
         !H && /* @__PURE__ */ t(
           "button",
           {
             type: "button",
             className: "ts-btn ts-btn-primary",
-            disabled: $ || w || !n,
+            disabled: w || b || !n,
             onClick: () => {
-              k(void 0), v(), K([]), Z([]), e();
+              D(void 0), g(), K([]), re([]), e();
             },
-            children: $ || w ? /* @__PURE__ */ t(se, { size: "sm" }) : "Clear"
+            children: w || b ? /* @__PURE__ */ t(ie, { size: "sm" }) : "Clear"
           }
         ),
-        (le?.key?.toString() !== "12" || (le?.key?.toString() === "12" && (C?.id ?? "")) !== "") && /* @__PURE__ */ t(
+        /* @__PURE__ */ t(
           "button",
           {
             type: "button",
             className: "ts-btn ts-btn-primary",
-            disabled: $ || w || !n,
-            onClick: A(de),
-            children: $ || w ? (
+            disabled: w || b || !n,
+            onClick: u(me),
+            children: w || b ? (
               // <span className="ts-spinner" />
-              /* @__PURE__ */ t(se, { size: "sm" })
+              /* @__PURE__ */ t(ie, { size: "sm" })
             ) : "Save"
           }
         )
       ] })
     ] }) }) }) }) })
   ] });
-}, xt = ({
+}, At = (e) => /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", height: "20px", width: "20px", viewBox: "0 0 640 640", ...e, children: /* @__PURE__ */ t("path", { fill: "#6c757d", d: "M560 144L240 144L240 176L192 176L192 96L608 96L608 416L496 416L496 368L560 368L560 144zM80 352L80 496L400 496L400 352L80 352zM80 224L448 224L448 544L32 544L32 224L80 224z" }) }), Mt = (e) => /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", height: "20px", width: "20px", viewBox: "0 0 640 640", ...e, children: /* @__PURE__ */ t("path", { fill: "#6c757d", d: "M112 288L112 464L528 464L528 288L112 288zM64 128L576 128L576 512L64 512L64 128z" }) }), _t = ({
   show: e,
   mode: n,
-  template: s,
+  template: r,
   templateTypes: a,
   templateList: i,
-  editorInitialized: r,
+  editorInitialized: s,
   previewHtml: l,
   onEditorInitialized: o,
-  onClose: d,
-  onRefresh: y
+  onClose: c,
+  onRefresh: v
 }) => {
-  const m = J(null), [T, w] = N(!1);
+  const E = te(null), [I, b] = C(!1);
   L(() => {
-    e && r && window.StripoEditorApi?.actionsApi && (n === "add" ? window.StripoEditorApi.actionsApi.updateHtmlAndCss(pe, "", "") : n === "edit" && s && window.StripoEditorApi.actionsApi.updateHtmlAndCss(
-      s.html ?? pe,
-      s.css ?? "",
+    e && s && window.StripoEditorApi?.actionsApi && (n === "add" ? window.StripoEditorApi.actionsApi.updateHtmlAndCss(he, "", "") : n === "edit" && r && window.StripoEditorApi.actionsApi.updateHtmlAndCss(
+      r.html ?? he,
+      r.css ?? "",
       ""
     ));
-  }, [e, r, n, s]), L(() => {
-    e || w(!1);
+  }, [e, s, n, r]), L(() => {
+    e || b(!1);
   }, [e]);
-  const E = () => {
-    window.StripoEditorApi.actionsApi.updateHtmlAndCss(pe, "", "");
+  const x = () => {
+    window.StripoEditorApi.actionsApi.updateHtmlAndCss(he, "", "");
   };
-  return e ? /* @__PURE__ */ t("div", { className: "ts-editor-modal-overlay", children: /* @__PURE__ */ c(
+  return e ? /* @__PURE__ */ t("div", { className: "ts-editor-modal-overlay", children: /* @__PURE__ */ d(
     "div",
     {
-      className: `ts-editor-modal ${T ? "ts-editor-modal--fullscreen" : ""}`,
-      ref: m,
+      className: `ts-editor-modal ${I ? "ts-editor-modal--fullscreen" : ""}`,
+      ref: E,
       children: [
-        /* @__PURE__ */ c("div", { className: "ts-editor-modal-header", children: [
-          /* @__PURE__ */ c("h3", { className: "ts-modal-title", children: [
+        /* @__PURE__ */ d("div", { className: "ts-editor-modal-header", children: [
+          /* @__PURE__ */ d("h3", { className: "ts-modal-title", children: [
             n === "add" && "Create Template",
             n === "edit" && "Edit Template",
             n === "preview" && "Preview Template"
           ] }),
-          /* @__PURE__ */ c("div", { className: "ts-editor-header-actions", children: [
+          /* @__PURE__ */ d("div", { className: "ts-editor-header-actions", children: [
             /* @__PURE__ */ t(
               "button",
               {
                 className: "ts-editor-fullscreen-btn",
-                onClick: () => w((A) => !A),
+                onClick: () => b((u) => !u),
                 "aria-label": "Toggle fullscreen",
-                children: T ? "🗗" : "🗖"
+                children: I ? /* @__PURE__ */ t(At, { style: { display: "block" } }) : /* @__PURE__ */ t(Mt, { style: { display: "block" } })
               }
             ),
             /* @__PURE__ */ t(
               "button",
               {
                 className: "ts-editor-close-btn",
-                onClick: d,
+                onClick: c,
                 "aria-label": "Close editor",
                 children: "✕"
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ c("div", { className: "ts-editor-modal-body", children: [
+        /* @__PURE__ */ d("div", { className: "ts-editor-modal-body", children: [
           n !== "preview" && /* @__PURE__ */ t(
-            Ct,
+            $t,
             {
               mode: n,
-              template: s,
+              template: r,
               templateTypes: a,
               templateList: i,
-              editorInitialized: r,
-              onReset: E,
-              onRefresh: y,
-              closeEditorModal: d
+              editorInitialized: s,
+              onReset: x,
+              onRefresh: v,
+              closeEditorModal: c
             }
           ),
           n === "preview" ? /* @__PURE__ */ t("div", { className: "ts-template-preview", children: /* @__PURE__ */ t(
@@ -2040,7 +2112,7 @@ const _e = /* @__PURE__ */ gt(vt), De = (e) => e.data.isSeparator ? /* @__PURE__
               srcDoc: l ?? ""
             }
           ) }) : /* @__PURE__ */ t(
-            ht,
+            Et,
             {
               onEditorInitialized: o,
               loading: !1,
@@ -2051,61 +2123,61 @@ const _e = /* @__PURE__ */ gt(vt), De = (e) => e.data.isSeparator ? /* @__PURE__
       ]
     }
   ) }) : null;
-}, Et = () => {
+}, Rt = () => {
   const {
     data: e,
     isLoading: n,
-    isFetching: s,
+    isFetching: r,
     refetch: a
-  } = et(), {
+  } = at(), {
     data: i,
-    isLoading: r,
+    isLoading: s,
     isFetching: l
-  } = tt(), { mutateAsync: o, isPending: d } = nt(), [y, m] = N(!1), [T, w] = N("add"), [E, A] = N(!1), [h, g] = N(""), [b, p] = N(), v = () => {
-    w("add"), m(!0);
-  }, O = async (C) => {
-    const k = await o({ id: C.id });
-    p({ ...k }), w("edit"), m(!0);
-  }, M = (C) => {
+  } = it(), { mutateAsync: o, isPending: c } = lt(), [v, E] = C(!1), [I, b] = C("add"), [x, u] = C(!1), [p, T] = C(""), [h, y] = C(), g = () => {
+    b("add"), E(!0);
+  }, R = async (S) => {
+    const D = await o({ id: S.id });
+    y({ ...D }), b("edit"), E(!0);
+  }, B = (S) => {
     if (!e || e.length === 0) return;
-    const k = e.find((x) => x.id === C.id);
-    g(k?.html ?? ""), w("preview"), m(!0);
-  }, P = () => {
-    m(!1), A(!1), document.getElementById("UiEditorScript")?.remove();
+    const D = e.find((M) => M.id === S.id);
+    T(D?.html + "<style>" + D?.css + "</style>"), b("preview"), E(!0);
+  }, _ = () => {
+    E(!1), u(!1), document.getElementById("UiEditorScript")?.remove();
   };
-  return /* @__PURE__ */ c(fe, { children: [
-    (n || r || s || l || d) && /* @__PURE__ */ t(se, { overlay: !0 }),
+  return /* @__PURE__ */ d(ye, { children: [
+    (n || s || r || l || c) && /* @__PURE__ */ t(ie, { overlay: !0 }),
     /* @__PURE__ */ t(
-      mt,
+      Tt,
       {
         templates: e ?? [],
         templateTypes: i ?? [],
         onRefresh: a,
-        onAdd: v,
-        onEdit: O,
-        onPreview: M
+        onAdd: g,
+        onEdit: R,
+        onPreview: B
       }
     ),
     /* @__PURE__ */ t(
-      xt,
+      _t,
       {
-        show: y,
-        mode: T,
-        template: b,
+        show: v,
+        mode: I,
+        template: h,
         templateTypes: i ?? [],
         templateList: e ?? [],
-        editorInitialized: E,
-        onEditorInitialized: A,
-        onClose: P,
+        editorInitialized: x,
+        onEditorInitialized: u,
+        onClose: _,
         onSaved: () => {
-          P(), a();
+          _(), a();
         },
         onRefresh: a,
-        previewHtml: h
+        previewHtml: p
       }
     )
   ] });
-}, _t = ({ config: e }) => /* @__PURE__ */ t(ze, { configs: e, children: /* @__PURE__ */ t(Ze, { children: /* @__PURE__ */ t(Ye, { children: /* @__PURE__ */ t("div", { className: "root-widget", children: /* @__PURE__ */ t(Et, {}) }) }) }) });
+}, Kt = ({ config: e }) => /* @__PURE__ */ t(Ze, { configs: e, children: /* @__PURE__ */ t(st, { children: /* @__PURE__ */ t(nt, { children: /* @__PURE__ */ t("div", { className: "root-widget", children: /* @__PURE__ */ t(Rt, {}) }) }) }) });
 export {
-  _t as EditorWidget
+  Kt as EditorWidget
 };