npm - @enerex/template-studio - Versions diffs - 1.1.39 → 1.1.41 - Mend

@enerex/template-studio 1.1.39 → 1.1.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/README.md +3 -1
package/dist/enerex-template-editor.es.js +1492 -916
package/dist/enerex-template-editor.umd.js +13 -13
package/dist/template-studio.css +1 -1
package/dist/types/component/TemplateList/index.d.ts +20 -0
package/dist/types/component/TemplateList/pagination/pagination.d.ts +10 -0
package/dist/types/component/TemplateList/template-row.d.ts +15 -0
package/dist/types/component/editor-widget-content/index.d.ts +2 -0
package/dist/types/component/editormodal/index.d.ts +18 -0
package/dist/types/component/form-input/select.d.ts +10 -3
package/dist/types/component/form-input/textbox.d.ts +1 -0
package/dist/types/component/icons/serach-icon.d.ts +2 -0
package/dist/types/component/loader/index.d.ts +8 -0
package/dist/types/component/modal/index.d.ts +1 -2
package/dist/types/component/notification/notification.d.ts +10 -0
package/dist/types/component/template-form/index.d.ts +9 -3
package/dist/types/component/template-form/index1.d.ts +11 -0
package/dist/types/context/notification-provider.d.ts +8 -0
package/dist/types/hook/useNotification.d.ts +5 -0
package/dist/types/hook/usePagination.d.ts +11 -0
package/dist/types/queries/delete_template.mutation.d.ts +1 -0
package/dist/types/queries/duplicate_template.mutation.d.ts +6 -0
package/dist/types/queries/endpoints.d.ts +3 -0
package/dist/types/queries/get_template_list_all.query.d.ts +2 -0
package/dist/types/queries/types.d.ts +11 -0
package/dist/types/service/api-client.d.ts +2 -0
package/dist/types/type/application-type.d.ts +2 -0
package/package.json +1 -1

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

@@ -1,11 +1,925 @@
-import { jsx as n, jsxs as S, Fragment as Ee } from "react/jsx-runtime";
-import M, { useContext as qe, useState as w, useRef as st, useEffect as E } from "react";
-import { QueryClient as it, QueryClientProvider as at, useQuery as ce, useMutation as Te, useQueryClient as lt } from "@tanstack/react-query";
-import _e from "axios";
-import { Spinner as z, Form as H, Card as ke, Row as ot, Col as U, Button as J } from "react-bootstrap";
-import { Controller as dt, useForm as ct } from "react-hook-form";
-import Ae, { components as Le } from "react-select";
-const de = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+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(
+  void 0
+), ze = ({
+  children: e,
+  configs: n
+}) => {
+  const [s, a] = W.useState(n.clientId), [i, r] = W.useState(n.apiKey), [l, o] = W.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(
+    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);
+  };
+  return /* @__PURE__ */ t(
+    Me.Provider,
+    {
+      value: {
+        clientId: s,
+        apiKey: i,
+        setConfiguration: p,
+        enerexIdentifier: l,
+        projectId: d,
+        userEmail: m,
+        isAdmin: w,
+        defaultSelector: g,
+        meBaseUrl: A
+      },
+      children: e
+    }
+  );
+}, q = () => {
+  const e = Se(Me);
+  if (!e)
+    throw new Error("widgetConfig must be used within a ConfigProvider");
+  return e;
+}, Qe = ({
+  message: e,
+  type: n = "info",
+  duration: s = 3e3,
+  onClose: a
+}) => (L(() => {
+  const i = setTimeout(a, s);
+  return () => clearTimeout(i);
+}, [s, a]), /* @__PURE__ */ c("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 }));
+    },
+    []
+  ), NotificationRenderer: () => e ? /* @__PURE__ */ t(
+    Qe,
+    {
+      message: e.message,
+      type: e.type,
+      onClose: () => {
+        s.current = null, n(null);
+      }
+    }
+  ) : null };
+}, Re = je(null), Ye = ({
+  children: e
+}) => {
+  const n = Xe();
+  return /* @__PURE__ */ c(Re.Provider, { value: n, children: [
+    e,
+    /* @__PURE__ */ t(n.NotificationRenderer, {})
+  ] });
+}, ke = () => {
+  const e = Se(Re);
+  if (!e)
+    throw new Error(
+      "useGlobalNotification must be used within NotificationProvider"
+    );
+  return e;
+}, Oe = (e = "", n) => ({ get: async (r, l) => {
+  try {
+    const o = await be.get(
+      `${e}${r}`,
+      l ?? n
+    );
+    if (o.status === 200)
+      return o.data;
+  } catch (o) {
+    throw o;
+  }
+}, post: async (r, l, o) => {
+  try {
+    const d = await be.post(
+      `${e}${r}`,
+      l,
+      o ?? n
+    );
+    if (d.status === 200)
+      return d.data;
+  } catch (d) {
+    throw d;
+  }
+}, delete: async (r, l) => {
+  try {
+    const o = await be.delete(
+      `${e}${r}`,
+      l ?? n
+    );
+    if (o.status === 200 || o.status === 204)
+      return o.data;
+  } catch (o) {
+    throw o;
+  }
+} }), Be = W.createContext({
+  get: () => {
+    throw new Error("HttpClientContext.get not implemented");
+  },
+  post: () => {
+    throw new Error("HttpClientContext.post not implemented");
+  },
+  delete: () => {
+    throw new Error("HttpClientContext.delete not implemented");
+  }
+}), Je = ({ children: e }) => {
+  const { clientId: n, apiKey: s, isAdmin: a, meBaseUrl: i } = q(), r = {
+    headers: {
+      client_id: n,
+      "x-api-key": s,
+      "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);
+  if (e)
+    return e;
+  throw new Error("useHttpClient must be used within a HttpClientProvider");
+}, Q = {
+  Template_list: "/Template/list/",
+  Template: "/Template/GetTemplate/",
+  MergeTags: "/Template/TemplateMergeTags/",
+  ExcludeCategory: "/Template/GetExcludeCategories/",
+  SaveTemplate: "/Template/save-update/",
+  TemplateTypes: "/Template/TemplateTypes/",
+  markFavourite: "/Template/MarkFavourite/",
+  deleteTemplate: "/Template/DeleteTemplate/",
+  duplicateTemplate: "/Template/DuplicateTemplate/"
+}, et = () => {
+  const e = z(), { enerexIdentifier: n, projectId: s } = q();
+  return he({
+    queryKey: ["getTemplatesList"],
+    queryFn: async (i) => await e.get(
+      `${Q.Template_list}${s}/${n}`
+    ),
+    refetchOnWindowFocus: !1,
+    refetchOnReconnect: !1,
+    refetchOnMount: !1
+  });
+}, tt = () => {
+  const e = z(), { enerexIdentifier: n, projectId: s } = q();
+  return he({
+    queryKey: ["getTemplateTypes"],
+    queryFn: async (i) => await e.get(
+      `${Q.TemplateTypes}${n}/${s}`
+    ),
+    refetchOnWindowFocus: !1,
+    refetchOnReconnect: !1,
+    refetchOnMount: !1
+  });
+}, nt = () => {
+  const e = z(), { enerexIdentifier: n, projectId: s } = q();
+  return oe({
+    mutationKey: ["getTemplate"],
+    mutationFn: async ({ id: i }) => {
+      if (i)
+        return await e.get(
+          `${Q.Template}${n}/${i}/${s}`
+        );
+    }
+  });
+}, se = ({
+  size: e = "md",
+  center: n = !1,
+  overlay: s = !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({
+    mutationKey: ["markFavourite"],
+    mutationFn: async (i) => await e.post(
+      `${Q.markFavourite}${s}/${n}`,
+      i
+    )
+  });
+}, Ee = (e) => {
+  let n = /* @__PURE__ */ t(
+    "span",
+    {
+      style: { width: "20px", height: "20px", display: "inline-block" }
+    }
+  );
+  return e.variant === "filled" ? n = /* @__PURE__ */ t(
+    "svg",
+    {
+      version: "1.0",
+      id: "Layer_1",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "20px",
+      height: "20px",
+      viewBox: "0 0 64 64",
+      "enable-background": "new 0 0 64 64",
+      children: /* @__PURE__ */ t(
+        "path",
+        {
+          fill: "#2196F3",
+          d: `M63.893,24.277c-0.238-0.711-0.854-1.229-1.595-1.343l-19.674-3.006L33.809,1.15\r
+	C33.479,0.448,32.773,0,31.998,0s-1.48,0.448-1.811,1.15l-8.815,18.778L1.698,22.935c-0.741,0.113-1.356,0.632-1.595,1.343\r
+	c-0.238,0.71-0.059,1.494,0.465,2.031l14.294,14.657L11.484,61.67c-0.124,0.756,0.195,1.517,0.822,1.957\r
+	c0.344,0.243,0.747,0.366,1.151,0.366c0.332,0,0.666-0.084,0.968-0.25l17.572-9.719l17.572,9.719c0.302,0.166,0.636,0.25,0.968,0.25\r
+	c0.404,0,0.808-0.123,1.151-0.366c0.627-0.44,0.946-1.201,0.822-1.957l-3.378-20.704l14.294-14.657\r
+	C63.951,25.771,64.131,24.987,63.893,24.277z`
+        }
+      )
+    }
+  ) : e.variant === "outlined" && (n = /* @__PURE__ */ t(
+    "svg",
+    {
+      version: "1.0",
+      id: "Layer_1",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "20px",
+      height: "20px",
+      viewBox: "0 0 64 64",
+      enableBackground: "new 0 0 64 64",
+      children: /* @__PURE__ */ t(
+        "path",
+        {
+          fill: e.fill || "rgba(247, 216, 40, 0)",
+          stroke: e.stroke || "#000000",
+          strokeWidth: e.strokeWidth || "2",
+          d: `M63.893,24.277c-0.238-0.711-0.854-1.229-1.595-1.343l-19.674-3.006L33.809,1.15\r
+	C33.479,0.448,32.773,0,31.998,0s-1.48,0.448-1.811,1.15l-8.815,18.778L1.698,22.935c-0.741,0.113-1.356,0.632-1.595,1.343\r
+	c-0.238,0.71-0.059,1.494,0.465,2.031l14.294,14.657L11.484,61.67c-0.124,0.756,0.195,1.517,0.822,1.957\r
+	c0.344,0.243,0.747,0.366,1.151,0.366c0.332,0,0.666-0.084,0.968-0.25l17.572-9.719l17.572,9.719c0.302,0.166,0.636,0.25,0.968,0.25\r
+	c0.404,0,0.808-0.123,1.151-0.366c0.627-0.44,0.946-1.201,0.822-1.957l-3.378-20.704l14.294-14.657\r
+	C63.951,25.771,64.131,24.987,63.893,24.277z`
+        }
+      )
+    }
+  )), n;
+};
+function rt({
+  template: e,
+  openActionId: n,
+  setOpenActionId: s,
+  onEdit: a,
+  onDuplicate: i,
+  onRemove: r,
+  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;
+  L(() => {
+    function C(k) {
+      y && m.current && !m.current.contains(k.target) && !T.current?.contains(k.target) && s(null);
+    }
+    return document.addEventListener("mousedown", C), () => document.removeEventListener("mousedown", C);
+  }, [y, s]), L(() => {
+    function C(k) {
+      k.key === "Escape" && s(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"]')
+    );
+    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());
+    }
+    return document.addEventListener("keydown", x), () => document.removeEventListener("keydown", x);
+  }, [y]);
+  const U = async () => {
+    try {
+      await h({
+        categoryId: v?.toString() ?? "",
+        templateId: e.id ?? ""
+      }), o(), b(
+        `Template "${e?.name}" marked as favourite`,
+        "success"
+      );
+    } catch (C) {
+      console.error(C), b(
+        "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 ?? "" }),
+    /* @__PURE__ */ t("td", { children: e?.updatedByName ?? "" }),
+    /* @__PURE__ */ t("td", { className: "ts-actions-cell", children: /* @__PURE__ */ c("div", { className: "ts-actions-wrapper", children: [
+      /* @__PURE__ */ t(
+        "button",
+        {
+          ref: T,
+          className: "ts-actions-btn",
+          "aria-haspopup": "true",
+          "aria-expanded": y,
+          onClick: () => s(y ? null : e.id),
+          children: "⋯"
+        }
+      ),
+      /* @__PURE__ */ c(
+        "div",
+        {
+          ref: m,
+          className: `ts-actions-menu ${y ? "open" : ""}`,
+          role: "menu",
+          children: [
+            /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                className: "ts-menu-item",
+                onClick: () => {
+                  s(null), l(e);
+                },
+                children: "Preview"
+              }
+            ),
+            M && /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                className: "ts-menu-item",
+                onClick: () => {
+                  s(null), a(e);
+                },
+                children: "Edit"
+              }
+            ),
+            /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                className: "ts-menu-item",
+                onClick: () => {
+                  s(null), i(e);
+                },
+                children: "Duplicate"
+              }
+            ),
+            P && /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                className: "ts-menu-item danger",
+                onClick: () => {
+                  s(null), r(e);
+                },
+                children: "Remove"
+              }
+            )
+          ]
+        }
+      )
+    ] }) })
+  ] }) });
+}
+const st = qe(rt), ve = 5, at = ({
+  page: e,
+  pageSize: n,
+  totalRecords: s,
+  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:",
+        /* @__PURE__ */ t(
+          "select",
+          {
+            value: n,
+            onChange: (m) => {
+              i(Number(m.target.value)), a(1);
+            },
+            children: [10, 25, 50, 100].map((m) => /* @__PURE__ */ t("option", { value: m, children: m }, m))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ c("div", { className: "ts-page-info", children: [
+        "Page ",
+        e,
+        " of ",
+        r
+      ] }),
+      /* @__PURE__ */ c("div", { className: "ts-go-to", 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);
+            }
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ c("div", { className: "ts-total", children: [
+      "Total: ",
+      s
+    ] }),
+    /* @__PURE__ */ c("div", { className: "ts-page-buttons", children: [
+      /* @__PURE__ */ t("button", { disabled: e === 1, onClick: () => a(e - 1), children: "‹" }),
+      o.map((m) => /* @__PURE__ */ t(
+        "button",
+        {
+          className: m === e ? "active" : "",
+          onClick: () => a(m),
+          children: m
+        },
+        m
+      )),
+      d && /* @__PURE__ */ t("span", { style: { padding: "0 6px" }, children: "…" }),
+      d && /* @__PURE__ */ t(
+        "button",
+        {
+          className: e === y ? "active" : "",
+          onClick: () => a(y),
+          children: y
+        }
+      ),
+      /* @__PURE__ */ t(
+        "button",
+        {
+          disabled: e === r,
+          onClick: () => a(e + 1),
+          children: "›"
+        }
+      )
+    ] })
+  ] });
+}, it = ({
+  show: e,
+  variant: n,
+  title: s = "Are you sure?",
+  message: a,
+  label: i = "Name",
+  value: r = "",
+  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
+}) => {
+  const [b, p] = N(r), [v, O] = N(!1), M = J(null);
+  if (L(() => {
+    if (!e) return;
+    const x = ($) => {
+      $.key === "Escape" && h();
+    };
+    return document.addEventListener("keydown", x), () => document.removeEventListener("keydown", x);
+  }, [e, h]), L(() => {
+    if (!e) return;
+    const x = ($) => {
+      M.current && !M.current.contains($.target) && h();
+    };
+    return document.addEventListener("mousedown", x), () => document.removeEventListener("mousedown", x);
+  }, [e, h]), 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);
+      return;
+    }
+    A(b.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: "✕" })
+    ] }),
+    /* @__PURE__ */ c("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: [
+          i,
+          /* @__PURE__ */ t("span", { className: "ts-required", children: "*" })
+        ] }),
+        /* @__PURE__ */ t(
+          "input",
+          {
+            type: "text",
+            className: `ts-input ${v && U ? "ts-input-error" : ""}`,
+            placeholder: l,
+            value: b,
+            onChange: (x) => {
+              p(x.target.value), v && O(!1), g?.(x.target.value);
+            },
+            autoFocus: !0,
+            style: { paddingBlock: "0", paddingInline: "0" }
+          }
+        ),
+        v && U && /* @__PURE__ */ t("div", { className: "ts-error-text", children: C })
+      ] })
+    ] }),
+    /* @__PURE__ */ c("div", { className: "ts-modal-footer", children: [
+      /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          className: "ts-btn ts-btn-secondary",
+          onClick: h,
+          children: T
+        }
+      ),
+      /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          className: `ts-btn ts-btn-${w}`,
+          onClick: k,
+          disabled: E,
+          children: m
+        }
+      )
+    ] })
+  ] }) });
+}, lt = () => /* @__PURE__ */ t(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 512 512",
+    width: "16px",
+    height: "16px",
+    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({
+    mutationKey: ["duplicateTemplate"],
+    mutationFn: async ({ templateId: r, request: l }) => (l.enerexIdentifier = n ?? "", l.projectId = s ?? "", l.updatedBy = a ?? "", await e.post(
+      `${Q.duplicateTemplate}${r}`,
+      l
+    ))
+  });
+}, ct = () => {
+  const e = z();
+  return oe({
+    mutationKey: ["deleteTemplate"],
+    mutationFn: async (n) => {
+      await e.delete(
+        `${Q.deleteTemplate}${n}`
+      );
+    }
+  });
+}, dt = ({
+  data: e,
+  page: n,
+  pageSize: s
+}) => {
+  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 = ({
+  templates: e,
+  templateTypes: n,
+  onRefresh: s,
+  onAdd: a,
+  onEdit: i,
+  onPreview: r
+}) => {
+  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);
+  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);
+    });
+    b(u), $(null);
+  }, [e]), L(() => {
+    v(n.filter((u) => u.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();
+    },
+    [Z]
+  ), ee = re(() => !g.length || !p.length ? [] : g.map((u) => ({
+    ...u,
+    categoryChain: ye(u.type)
+  })), [g, p]);
+  L(() => {
+    const u = setTimeout(() => {
+      E(m), ie(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 R || D;
+    }) : ee;
+  }, [ee, w]), de = re(() => {
+    const u = [...ne];
+    return u.sort((S, R) => {
+      let D = "", Y = "";
+      switch (x) {
+        case "name":
+          D = S.name, Y = R.name;
+          break;
+        case "category":
+          D = S.categoryChain?.[0]?.name ?? "", Y = R.categoryChain?.[0]?.name ?? "";
+          break;
+        case "type":
+          D = S.categoryChain?.[1]?.name ?? "", Y = R.categoryChain?.[1]?.name ?? "";
+          break;
+        case "subtype":
+          D = S.categoryChain?.[2]?.name ?? "", Y = R.categoryChain?.[2]?.name ?? "";
+          break;
+      }
+      const Ie = D.localeCompare(Y, 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()
+    ),
+    [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)
+      try {
+        if (P === "input") {
+          if (!u) return;
+          if (ge(u)) {
+            k(!0);
+            return;
+          }
+          await l({
+            templateId: K.id,
+            request: {
+              projectId: "",
+              enerexIdentifier: "",
+              newName: u,
+              parent_id: K.id ?? null
+            }
+          }), _(
+            `Template "${u}" duplicated successfully`,
+            "success"
+          );
+        }
+        P === "confirm" && (await d(K.id), _(
+          `Template "${K.name}" deleted successfully`,
+          "success"
+        )), M(!1), G(null), s();
+      } catch {
+        _(
+          P === "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: [
+        /* @__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(
+              "th",
+              {
+                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: 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
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ t(
+      it,
+      {
+        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" : "",
+        label: "New Name",
+        requiredMessage: "Enter a new name",
+        externalError: C,
+        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
+      }
+    )
+  ] });
+}, pe = `<!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
@@ -361,160 +1275,70 @@ const de = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http
     </div>\r
   </body>\r
 </html>\r
-`, Re = M.createContext(
-  void 0
-), pt = ({
-  children: t,
-  configs: s
-}) => {
-  const [l, a] = M.useState(s.clientId), [i, e] = M.useState(s.apiKey), [d, o] = M.useState(
-    s.enerexIdentifier
-  ), [b, D] = M.useState(s.projectId), [A, m] = M.useState(s.userEmail), [_, u] = M.useState(s.isAdmin), [j, h] = M.useState(s.meBaseUrl), [v, y] = M.useState(
-    s.defaultSelector
-  ), f = (g) => {
-    e(g.apiKey), a(g.clientId), D(g.projectId), o(g.enerexIdentifier), m(g.userEmail), u(g.isAdmin), y(g.defaultSelector), h(g.meBaseUrl);
-  };
-  return /* @__PURE__ */ n(
-    Re.Provider,
-    {
-      value: {
-        clientId: l,
-        apiKey: i,
-        setConfiguration: f,
-        enerexIdentifier: d,
-        projectId: b,
-        userEmail: A,
-        isAdmin: _,
-        defaultSelector: v,
-        meBaseUrl: j
-      },
-      children: t
-    }
-  );
-}, B = () => {
-  const t = qe(Re);
-  if (!t)
-    throw new Error("widgetConfig must be used within a ConfigProvider");
-  return t;
-}, Me = (t = "", s) => ({ get: async (i, e) => {
-  try {
-    const d = await _e.get(
-      `${t}${i}`,
-      e ?? s
-    );
-    if (d.status === 200)
-      return d.data;
-  } catch (d) {
-    throw d;
-  }
-}, post: async (i, e, d) => {
-  try {
-    const o = await _e.post(
-      `${t}${i}`,
-      e,
-      d ?? s
-    );
-    if (o.status === 200)
-      return o.data;
-  } catch (o) {
-    throw o;
-  }
-} }), Be = M.createContext({
-  get: () => {
-    throw new Error("HttpClientContext.get not implemented");
-  },
-  post: () => {
-    throw new Error("HttpClientContext.post not implemented");
-  }
-}), mt = ({ children: t }) => {
-  const { clientId: s, apiKey: l, isAdmin: a, meBaseUrl: i } = B(), e = {
-    headers: {
-      client_id: s,
-      "x-api-key": l,
-      "Security-Context": a ? "admin" : "viewer"
-    }
-  }, { get: d, post: o } = Me(i, e);
-  return /* @__PURE__ */ n(Be.Provider, { value: { get: d, post: o }, children: t });
-}, ut = ({ children: t }) => {
-  const s = new it();
-  return /* @__PURE__ */ n(mt, { children: /* @__PURE__ */ n(at, { client: s, children: t }) });
-}, he = {
+`, we = {
   EDITOR_SCRIPT_URL: "https://plugins.stripo.email/resources/uieditor/latest/UIEditor.js",
   EDITOR_PLUGIN_ID: "1afdc3161ec7409a8627a1c8561d45f5",
   EDITOR_SECRET_KEY: "54ba748ed7e94f2e929555783acb03da"
-}, ft = (t) => {
-  const s = Array.from(new Set(t.map((a) => a.category))), l = [];
-  return s.forEach((a) => {
-    const i = t.filter((e) => e.category === a).map((e) => ({
-      label: e.label,
-      value: e.value,
-      hint: e.hint,
-      hidden: e.hidden
+}, ut = (e) => {
+  const n = Array.from(new Set(e.map((a) => a.category))), s = [];
+  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
     }));
-    l.push({ category: a, entries: i });
-  }), l;
-}, V = () => {
-  const t = qe(Be);
-  if (t)
-    return t;
-  throw new Error("useHttpClient must be used within a HttpClientProvider");
-}, G = {
-  Template_list: "/Template/list/",
-  Template: "/Template/GetTemplate/",
-  MergeTags: "/Template/TemplateMergeTags/",
-  ExcludeCategory: "/Template/GetExcludeCategories/",
-  SaveTemplate: "/Template/save-update/",
-  TemplateTypes: "/Template/TemplateTypes/",
-  markFavourite: "/Template/MarkFavourite/"
-}, yt = () => {
-  const t = V(), { enerexIdentifier: s, projectId: l } = B();
-  return ce({
+    s.push({ category: a, entries: i });
+  }), s;
+}, pt = () => {
+  const e = z(), { enerexIdentifier: n, projectId: s } = q();
+  return he({
     queryKey: ["getTemplateTags"],
-    queryFn: async (i) => await t.get(
-      `${G.MergeTags}${l}/${s}`
+    queryFn: async (i) => await e.get(
+      `${Q.MergeTags}${s}/${n}`
     )
   });
-}, gt = () => {
-  const t = V(), { enerexIdentifier: s, projectId: l } = B();
-  return ce({
+}, ft = () => {
+  const e = z(), { enerexIdentifier: n, projectId: s } = q();
+  return he({
     queryKey: ["getExcludeCategory"],
-    queryFn: async (i) => await t.get(
-      `${G.ExcludeCategory}${l}/${s}`
+    queryFn: async (i) => await e.get(
+      `${Q.ExcludeCategory}${s}/${n}`
     )
   });
 }, ht = ({
-  templateHTML: t,
-  className: s = "",
-  loading: l = !1,
+  templateHTML: e,
+  className: n = "",
+  loading: s = !1,
   onEditorInitialized: a
 }) => {
-  const { post: i } = Me(), { data: e } = yt(), { data: d } = gt(), [o, b] = w(
-    t ?? { html: de, css: "" }
-  ), { userEmail: D } = B(), A = st(null), m = "https://plugin.stripocdn.email/content/guids/CABINET_eab4e7d5a4603ac03f4120652a3a5a540f0c79c688514939f095f67433ed4a67/images/photo256.png", _ = "https://plugins.stripo.email/api/v1/auth";
-  E(() => {
-    (async () => (await u(), e && d && await j(he.EDITOR_SCRIPT_URL)))();
-  }, [e, d]);
-  async function u() {
-    window.Zone || await new Promise((v, y) => {
-      const f = document.createElement("script");
-      f.src = "https://unpkg.com/zone.js@0.13.1/bundles/zone.umd.min.js";
-      const g = document.querySelector("script[nonce]")?.nonce;
-      g && f.setAttribute("nonce", g), f.onload = () => v(), f.onerror = () => y(new Error("Failed to load zone.js")), document.head.appendChild(f);
+  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";
+  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 function j(v) {
-    let y = document.getElementById(
+  async function A(g) {
+    let b = document.getElementById(
       "UiEditorScript"
     );
-    y || (y = document.createElement("script"), y.id = "UiEditorScript", y.src = v, y.onload = async () => {
+    b || (b = document.createElement("script"), b.id = "UiEditorScript", b.src = g, b.onload = async () => {
       await h();
-    }, document.body.appendChild(y)), await new Promise(
-      (f) => y.addEventListener("load", () => f(), { once: !0 })
+    }, document.body.appendChild(b)), await new Promise(
+      (p) => b.addEventListener("load", () => p(), { once: !0 })
     );
   }
   const h = async () => {
-    const v = A.current;
-    if (!v) {
+    const g = m.current;
+    if (!g) {
       console.error("Missing #stripoEditorContainer in DOM");
       return;
     }
@@ -522,261 +1346,156 @@ const de = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http
       console.error("UIEditor script not loaded or not exposing initEditor");
       return;
     }
-    const y = {
+    const b = {
       html: o.html,
       css: o.css,
-      modulesExcludedCategories: d ?? [],
+      modulesExcludedCategories: l ?? [],
       forceRecreate: !0,
       metadata: {
-        emailId: D,
+        emailId: y,
         userId: "1",
         // username: userName,
-        avatarUrl: m
+        avatarUrl: T
       },
       locale: "en",
-      onTokenRefreshRequest: async (f) => {
-        const g = {
-          pluginId: he.EDITOR_PLUGIN_ID,
-          secretKey: he.EDITOR_SECRET_KEY,
-          userId: D,
+      onTokenRefreshRequest: async (p) => {
+        const v = {
+          pluginId: we.EDITOR_PLUGIN_ID,
+          secretKey: we.EDITOR_SECRET_KEY,
+          userId: y,
           role: "user"
-        }, T = await i(
-          _,
-          g
+        }, O = await i(
+          w,
+          v
         );
-        T?.token && f(T.token);
+        O?.token && p(O.token);
       },
       onTemplateLoaded: () => {
         a && a(!0);
       },
-      mergeTags: ft(e ?? [])
+      mergeTags: ut(r ?? [])
     };
-    for (const [f, g] of Object.entries({
+    for (const [p, v] of Object.entries({
       codeEditorButtonSelector: "#codeEditor",
       undoButtonSelector: "#undoButton",
       redoButtonSelector: "#redoButton",
       mobileViewButtonSelector: "#mobileViewButton",
       desktopViewButtonSelector: "#desktopViewButton"
     }))
-      v.ownerDocument && v.getRootNode() instanceof ShadowRoot && v.getRootNode().querySelector(g) && (y[f] = g);
-    await window.UIEditor.initEditor(v, y);
+      g.ownerDocument && g.getRootNode() instanceof ShadowRoot && g.getRootNode().querySelector(v) && (b[p] = v);
+    await window.UIEditor.initEditor(g, b);
   };
-  return /* @__PURE__ */ n("div", { className: "position-relative", children: /* @__PURE__ */ S("div", { className: `editor-container ${s}`, children: [
-    l && /* @__PURE__ */ n("div", { className: "loading-overlay", children: /* @__PURE__ */ n(
-      z,
+  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,
       {
         animation: "border",
         style: { width: "11px", height: "11px" },
         size: "sm",
         role: "status",
         className: "me-1",
-        children: /* @__PURE__ */ n("span", { className: "visually-hidden", children: "Loading..." })
+        children: /* @__PURE__ */ t("span", { className: "visually-hidden", children: "Loading..." })
       }
     ) }),
-    /* @__PURE__ */ n("div", { id: "externalSystemContainer" }),
-    /* @__PURE__ */ n("div", { id: "stripoEditorContainer", ref: A })
+    /* @__PURE__ */ t("div", { id: "externalSystemContainer" }),
+    /* @__PURE__ */ t("div", { id: "stripoEditorContainer", ref: m })
   ] }) });
-}, je = ({
-  label: t,
-  register: s,
-  validation: l,
+}, $e = ({
+  label: e,
+  register: n,
+  validation: s,
   required: a = !1,
   name: i,
-  error: e,
-  className: d = "",
+  error: r,
+  className: l = "",
   ...o
-}) => /* @__PURE__ */ S(H.Group, { className: d + " mb-1", style: { width: "100%" }, children: [
-  t ? /* @__PURE__ */ S(H.Label, { className: "mb-3 d-block form-label ts-label-height", children: [
-    t,
-    a && /* @__PURE__ */ n("label", { className: "text-danger", children: "*" })
-  ] }) : null,
-  /* @__PURE__ */ n(
-    H.Control,
-    {
-      name: i,
-      type: "text",
-      ...o,
-      isInvalid: !!(e && e[i]),
-      ...s ? s(i, {
-        ...l
-      }) : {},
-      className: `react-select__control ${e && e[i] && "border border-danger"}`
-    }
-  ),
-  e && e[i] ? /* @__PURE__ */ n(H.Control.Feedback, { type: "invalid", children: e[i].message }) : null
-] }), bt = ({
-  show: t,
-  variant: s,
-  title: l = "Are you sure?",
-  message: a,
-  label: i = "Name",
-  value: e = "",
-  placeholder: d = "",
-  requiredMessage: o = "This field is required",
-  externalError: b = !1,
-  externalErrorMessage: D = "",
-  confirmText: A = "Ok",
-  cancelText: m = "Cancel",
-  confirmButtonVariant: _ = "danger",
-  onConfirm: u,
-  onCancel: j,
-  onInputChange: h
 }) => {
-  const [v, y] = w(e), [f, g] = w(!1);
-  if (E(() => {
-    t && (y(e), g(!1));
-  }, [t, e]), E(() => {
-    b && g(!0);
-  }, [b]), !t) return null;
-  const T = s === "input" && !v.trim(), P = s === "input" && (T || b), pe = T ? o : b ? D : "", K = () => {
-    if (P) {
-      g(!0);
-      return;
-    }
-    u(v.trim());
-  };
-  return /* @__PURE__ */ n("div", { className: "template-studio-modal-overlay", children: /* @__PURE__ */ S("div", { className: "template-studio-modal", children: [
-    /* @__PURE__ */ S("div", { className: "template-studio-modal-header", children: [
-      /* @__PURE__ */ n("h4", { children: l }),
-      /* @__PURE__ */ n("button", { className: "template-studio-modal-close", onClick: j, children: "✕" })
-    ] }),
-    /* @__PURE__ */ S("div", { className: "template-studio-modal-body", children: [
-      a && /* @__PURE__ */ n("p", { children: a }),
-      s === "input" && /* @__PURE__ */ S("div", { className: "mb-3", children: [
-        /* @__PURE__ */ S("label", { className: "form-label", children: [
-          i,
-          /* @__PURE__ */ n("span", { className: "text-danger", children: "*" })
-        ] }),
-        /* @__PURE__ */ n(
-          "input",
-          {
-            type: "text",
-            className: `form-control ${f && P ? "is-invalid" : ""}`,
-            placeholder: d,
-            value: v,
-            onChange: (ee) => {
-              y(ee.target.value), f && g(!1), h?.(ee.target.value);
-            },
-            autoFocus: !0
-          }
-        ),
-        f && P && /* @__PURE__ */ n("div", { className: "invalid-feedback d-block", children: pe })
-      ] })
+  const d = !!(r && r[i]);
+  return /* @__PURE__ */ c("div", { className: `ts-form-group ${l}`, children: [
+    e && /* @__PURE__ */ c("label", { className: "ts-form-label", children: [
+      e,
+      a && /* @__PURE__ */ t("span", { className: "ts-required", children: "*" })
     ] }),
-    /* @__PURE__ */ S("div", { className: "template-studio-modal-footer", children: [
-      /* @__PURE__ */ n("button", { className: "btn btn-secondary", onClick: j, children: m }),
-      /* @__PURE__ */ n(
-        "button",
-        {
-          className: `btn btn-${_}`,
-          onClick: K,
-          children: A
-        }
-      )
-    ] })
-  ] }) });
-}, vt = () => {
-  const t = V(), { enerexIdentifier: s, projectId: l } = B();
-  return ce({
-    queryKey: ["getTemplatesList"],
-    queryFn: async (i) => await t.get(
-      `${G.Template_list}${l}/${s}`
-    )
-  });
+    /* @__PURE__ */ t(
+      "input",
+      {
+        name: i,
+        type: "text",
+        ...o,
+        ...n ? n(i, {
+          ...s
+        }) : {},
+        className: `ts-input ${d ? "ts-input-error" : ""}`,
+        "aria-invalid": d
+      }
+    ),
+    d && /* @__PURE__ */ t("div", { className: "ts-error-text", children: r?.[i]?.message })
+  ] });
 };
-function be(t) {
-  return t.sort((s, l) => s.name.localeCompare(l.name));
+function Ne(e) {
+  return e.sort((n, s) => n.name.localeCompare(s.name));
 }
-function wt(t) {
-  const s = /* @__PURE__ */ new Map(), l = [];
-  t.forEach((e) => s.set(e.id, e));
-  let a = t.filter((e) => e.parent_id === 0), i = 0;
+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; ) {
-    l.push({ level: i, data: a });
-    const e = a.map((o) => o.id);
-    a = t.filter(
-      (o) => e.includes(o.parent_id)
+    s.push({ level: i, data: a });
+    const r = a.map((o) => o.id);
+    a = e.filter(
+      (o) => r.includes(o.parent_id)
     ), i++;
   }
-  return l;
+  return s;
 }
-function ve(t, s) {
-  const a = wt(t).find((i) => i.level === s);
+function Te(e, n) {
+  const a = yt(e).find((i) => i.level === n);
   return a ? a.data : [];
 }
-const Tt = () => {
-  const t = V(), { enerexIdentifier: s, projectId: l } = B();
-  return Te({
-    mutationKey: ["markFavourite"],
-    mutationFn: async (i) => await t.post(
-      `${G.markFavourite}${l}/${s}`,
-      i
-    )
-  });
-}, xt = () => {
-  const t = V(), { enerexIdentifier: s, projectId: l } = B();
-  return Te({
-    mutationKey: ["getTemplate"],
-    mutationFn: async ({ id: i }) => {
-      if (i)
-        return await t.get(
-          `${G.Template}${s}/${i}/${l}`
-        );
-    }
-  });
-}, St = () => {
-  const t = V(), { enerexIdentifier: s, projectId: l } = B();
-  return ce({
-    queryKey: ["getTemplateTypes"],
-    queryFn: async (i) => await t.get(
-      `${G.TemplateTypes}${s}/${l}`
-    )
-  });
-};
-function Ct(t) {
-  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+function gt(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var we = { exports: {} };
+var Ce = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
 	http://jedwatson.github.io/classnames
 */
-var Pe;
-function Nt() {
-  return Pe || (Pe = 1, function(t) {
+var Ae;
+function bt() {
+  return Ae || (Ae = 1, function(e) {
     (function() {
-      var s = {}.hasOwnProperty;
-      function l() {
-        for (var e = "", d = 0; d < arguments.length; d++) {
-          var o = arguments[d];
-          o && (e = i(e, a(o)));
+      var n = {}.hasOwnProperty;
+      function s() {
+        for (var r = "", l = 0; l < arguments.length; l++) {
+          var o = arguments[l];
+          o && (r = i(r, a(o)));
         }
-        return e;
+        return r;
       }
-      function a(e) {
-        if (typeof e == "string" || typeof e == "number")
-          return e;
-        if (typeof e != "object")
+      function a(r) {
+        if (typeof r == "string" || typeof r == "number")
+          return r;
+        if (typeof r != "object")
           return "";
-        if (Array.isArray(e))
-          return l.apply(null, e);
-        if (e.toString !== Object.prototype.toString && !e.toString.toString().includes("[native code]"))
-          return e.toString();
-        var d = "";
-        for (var o in e)
-          s.call(e, o) && e[o] && (d = i(d, o));
-        return d;
+        if (Array.isArray(r))
+          return s.apply(null, r);
+        if (r.toString !== Object.prototype.toString && !r.toString.toString().includes("[native code]"))
+          return r.toString();
+        var l = "";
+        for (var o in r)
+          n.call(r, o) && r[o] && (l = i(l, o));
+        return l;
       }
-      function i(e, d) {
-        return d ? e ? e + " " + d : e + d : e;
+      function i(r, l) {
+        return l ? r ? r + " " + l : r + l : r;
       }
-      t.exports ? (l.default = l, t.exports = l) : window.classNames = l;
+      e.exports ? (s.default = s, e.exports = s) : window.classNames = s;
     })();
-  }(we)), we.exports;
+  }(Ce)), Ce.exports;
 }
-var It = Nt();
-const Oe = /* @__PURE__ */ Ct(It), $e = (t) => t.data.isSeparator ? /* @__PURE__ */ n("div", { style: { padding: 0, margin: "2px 0" }, children: /* @__PURE__ */ n(
+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(
   "hr",
   {
     style: {
@@ -786,37 +1505,37 @@ const Oe = /* @__PURE__ */ Ct(It), $e = (t) => t.data.isSeparator ? /* @__PURE__
       margin: 0
     }
   }
-) }) : t.data.icon ? /* @__PURE__ */ S("div", { className: "d-flex align-items-center", children: [
-  /* @__PURE__ */ n(Le.Option, { ...t }),
-  /* @__PURE__ */ n("span", { className: "px-1 template-studio-dropdown-postfix-icon", children: t.data.icon })
-] }) : /* @__PURE__ */ n(Le.Option, { ...t }), Et = ({
-  name: t = "",
-  control: s,
-  options: l,
+) }) : e.data.icon ? /* @__PURE__ */ c("div", { className: "d-flex align-items-center", children: [
+  /* @__PURE__ */ t(Pe.Option, { ...e }),
+  /* @__PURE__ */ t("span", { className: "px-1 template-studio-dropdown-postfix-icon", children: e.data.icon })
+] }) : /* @__PURE__ */ t(Pe.Option, { ...e }), wt = ({
+  name: e = "",
+  control: n,
+  options: s,
   multiple: a = !1,
   placeholder: i,
-  validation: e,
-  labelKey: d = "name",
+  validation: r,
+  labelKey: l = "name",
   disabled: o,
-  isInvalid: b,
-  value: D,
-  onChange: A,
-  uncontrolled: m,
-  menuPlacement: _ = "auto",
-  closeOnSelect: u = !0
+  isInvalid: d,
+  value: y,
+  onChange: m,
+  uncontrolled: T,
+  menuPlacement: w = "auto",
+  closeOnSelect: E = !0
 }) => {
-  const j = {
+  const A = {
     control: (h) => ({
       ...h,
       minHeight: "33px",
       // state.isFocused can display different borderColor if you need it
-      borderColor: b ? "var(--bs-form-invalid-border-color) !important" : "var(--ct-input-border-color)",
-      backgroundImage: b ? '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: 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",
       backgroundRepeat: "no-repeat",
       backgroundPosition: "right calc(0.375em + 0.225rem) center",
       backgroundSize: "calc(0.75em + 0.45rem) calc(0.75em + 0.45rem)",
       "&:hover": {
-        borderColor: b ? "var(--bs-form-invalid-border-color)" : "var(--ct-input-border-color)"
+        borderColor: d ? "var(--bs-form-invalid-border-color)" : "var(--ct-input-border-color)"
       },
       "& .react-select__single-value": {
         color: "var(--ct-input-color) !important"
@@ -836,504 +1555,336 @@ const Oe = /* @__PURE__ */ Ct(It), $e = (t) => t.data.isSeparator ? /* @__PURE__
     }),
     menuPortal: (h) => ({
       ...h,
-      zIndex: 9999
+      zIndex: 1e4
     }),
     multiValueRemove: (h) => ({
       ...h,
       display: o ? "none" : "block"
     })
   };
-  return m ? /* @__PURE__ */ n(
-    Ae,
+  return T ? /* @__PURE__ */ t(
+    Le,
     {
-      components: { Option: $e },
+      components: { Option: De },
       isOptionDisabled: (h) => !!h.isSeparator,
-      className: Oe({
-        "is-invalid": b
+      className: _e({
+        "is-invalid": d
       }),
-      styles: j,
+      styles: A,
       classNamePrefix: "react-select",
       isMulti: a,
-      options: l,
-      onChange: A,
+      options: s,
+      onChange: m,
       placeholder: i,
       menuPortalTarget: document.body,
-      value: D,
-      getOptionLabel: typeof d == "string" ? (h) => h[d] : d,
+      value: y,
+      getOptionLabel: typeof l == "string" ? (h) => h[l] : l,
       getOptionValue: (h) => h.id,
       isDisabled: o,
-      menuPlacement: _,
-      closeMenuOnSelect: u
+      menuPlacement: w,
+      closeMenuOnSelect: E
     }
-  ) : /* @__PURE__ */ n(
-    dt,
+  ) : /* @__PURE__ */ t(
+    Ge,
     {
-      control: s,
-      name: t,
-      rules: e,
-      render: ({ field: { onChange: h, value: v, onBlur: y } }) => /* @__PURE__ */ n(
-        Ae,
+      control: n,
+      name: e,
+      rules: r,
+      render: ({ field: { onChange: h, value: g, onBlur: b } }) => /* @__PURE__ */ t(
+        Le,
         {
-          components: { Option: $e },
-          isOptionDisabled: (f) => !!f.isSeparator,
-          className: Oe({
-            "is-invalid": b
+          components: { Option: De },
+          isOptionDisabled: (p) => !!p.isSeparator,
+          className: _e({
+            "is-invalid": d
           }),
-          styles: j,
+          styles: A,
           classNamePrefix: "react-select",
           isMulti: a,
-          options: l,
-          onBlur: y,
+          options: s,
+          onBlur: b,
           onChange: h,
           placeholder: i,
           menuPortalTarget: document.body,
-          value: v,
-          getOptionLabel: typeof d == "string" ? (f) => f[d] : d,
-          getOptionValue: (f) => f.id,
+          value: g,
+          getOptionLabel: typeof l == "string" ? (p) => p[l] : l,
+          getOptionValue: (p) => p.id,
           isDisabled: o,
-          menuPlacement: _,
-          closeMenuOnSelect: u
+          menuPlacement: w,
+          closeMenuOnSelect: E
         },
-        v ? v.id || v.value || JSON.stringify(v) : "reset"
+        g ? g.id || g.value || JSON.stringify(g) : "reset"
       )
     }
   );
-}, oe = ({
-  label: t,
-  name: s,
-  validation: l,
+}, ue = ({
+  label: e,
+  name: n,
+  validation: s,
   control: a,
   error: i,
-  ...e
-}) => /* @__PURE__ */ S(H.Group, { className: "mb-1", children: [
-  t && /* @__PURE__ */ S(H.Label, { className: "mb-3 d-block form-label ts-label-height", children: [
-    t,
-    " ",
-    e.required && /* @__PURE__ */ n("span", { className: "text-danger", children: "*" })
-  ] }),
-  /* @__PURE__ */ n(
-    Et,
-    {
-      control: a,
-      disabled: e.disabled,
-      options: e.options ?? [],
-      validation: l,
-      isInvalid: i && !!i[s],
-      name: s
-    }
-  ),
-  i && i[s] ? /* @__PURE__ */ n(H.Control.Feedback, { type: "invalid", children: i[s].message }) : null
-] }), _t = () => {
-  const t = V();
-  lt();
-  const { enerexIdentifier: s, projectId: l } = B();
-  return Te({
+  options: r = [],
+  required: l = !1,
+  disabled: o = !1,
+  className: d = ""
+}) => {
+  const y = !!(i && i[n]);
+  return /* @__PURE__ */ c("div", { className: `ts-form-group ${d}`, children: [
+    e && /* @__PURE__ */ c("label", { className: "ts-form-label", children: [
+      e,
+      l && /* @__PURE__ */ t("span", { className: "ts-required", children: "*" })
+    ] }),
+    /* @__PURE__ */ t(
+      wt,
+      {
+        name: n,
+        control: a,
+        options: r,
+        validation: s,
+        disabled: o,
+        isInvalid: y
+      }
+    ),
+    y && /* @__PURE__ */ t("div", { className: "ts-error-text", children: i?.[n]?.message })
+  ] });
+}, Nt = () => {
+  const e = z();
+  He();
+  const { enerexIdentifier: n, projectId: s } = q();
+  return oe({
     mutationKey: ["saveTemplate"],
-    mutationFn: async (i) => (i.enerexIdentifier = s ?? "", i.projectId = l ?? "", await t.post(
-      `${G.SaveTemplate}`,
+    mutationFn: async (i) => (i.enerexIdentifier = n ?? "", i.projectId = s ?? "", await e.post(
+      `${Q.SaveTemplate}`,
       i
     ))
   });
-}, X = (t) => {
-  let s = /* @__PURE__ */ n(
-    "span",
-    {
-      style: { width: "20px", height: "20px", display: "inline-block" }
-    }
-  );
-  return t.variant === "filled" ? s = /* @__PURE__ */ n(
-    "svg",
-    {
-      version: "1.0",
-      id: "Layer_1",
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "20px",
-      height: "20px",
-      viewBox: "0 0 64 64",
-      "enable-background": "new 0 0 64 64",
-      children: /* @__PURE__ */ n(
-        "path",
-        {
-          fill: "#2196F3",
-          d: `M63.893,24.277c-0.238-0.711-0.854-1.229-1.595-1.343l-19.674-3.006L33.809,1.15\r
-	C33.479,0.448,32.773,0,31.998,0s-1.48,0.448-1.811,1.15l-8.815,18.778L1.698,22.935c-0.741,0.113-1.356,0.632-1.595,1.343\r
-	c-0.238,0.71-0.059,1.494,0.465,2.031l14.294,14.657L11.484,61.67c-0.124,0.756,0.195,1.517,0.822,1.957\r
-	c0.344,0.243,0.747,0.366,1.151,0.366c0.332,0,0.666-0.084,0.968-0.25l17.572-9.719l17.572,9.719c0.302,0.166,0.636,0.25,0.968,0.25\r
-	c0.404,0,0.808-0.123,1.151-0.366c0.627-0.44,0.946-1.201,0.822-1.957l-3.378-20.704l14.294-14.657\r
-	C63.951,25.771,64.131,24.987,63.893,24.277z`
-        }
-      )
-    }
-  ) : t.variant === "outlined" && (s = /* @__PURE__ */ n(
-    "svg",
-    {
-      version: "1.0",
-      id: "Layer_1",
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "20px",
-      height: "20px",
-      viewBox: "0 0 64 64",
-      enableBackground: "new 0 0 64 64",
-      children: /* @__PURE__ */ n(
-        "path",
-        {
-          fill: t.fill || "rgba(247, 216, 40, 0)",
-          stroke: t.stroke || "#000000",
-          strokeWidth: t.strokeWidth || "2",
-          d: `M63.893,24.277c-0.238-0.711-0.854-1.229-1.595-1.343l-19.674-3.006L33.809,1.15\r
-	C33.479,0.448,32.773,0,31.998,0s-1.48,0.448-1.811,1.15l-8.815,18.778L1.698,22.935c-0.741,0.113-1.356,0.632-1.595,1.343\r
-	c-0.238,0.71-0.059,1.494,0.465,2.031l14.294,14.657L11.484,61.67c-0.124,0.756,0.195,1.517,0.822,1.957\r
-	c0.344,0.243,0.747,0.366,1.151,0.366c0.332,0,0.666-0.084,0.968-0.25l17.572-9.719l17.572,9.719c0.302,0.166,0.636,0.25,0.968,0.25\r
-	c0.404,0,0.808-0.123,1.151-0.366c0.627-0.44,0.946-1.201,0.822-1.957l-3.378-20.704l14.294-14.657\r
-	C63.951,25.771,64.131,24.987,63.893,24.277z`
-        }
-      )
-    }
-  )), s;
-}, Z = {
+}, Tt = {
   id: "",
   name: "New (Blank)"
-}, De = {
-  id: "",
-  name: "Separator",
-  isSeparator: !0
-}, kt = ({
-  onSelectItem: t,
-  templateLoading: s,
-  onReset: l,
-  editorInitialized: a
+}, Ct = ({
+  onReset: e,
+  editorInitialized: n,
+  mode: s,
+  templateTypes: a,
+  templateList: i,
+  template: r,
+  onRefresh: l,
+  closeEditorModal: o
 }) => {
-  const { isAdmin: i, defaultSelector: e } = B(), { mutateAsync: d, isPending: o } = Tt(), {
-    register: b,
-    handleSubmit: D,
-    clearErrors: A,
-    setValue: m,
-    control: _,
-    watch: u,
-    reset: j,
-    setError: h,
-    getValues: v,
-    formState: { errors: y }
-  } = ct({
+  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({
     defaultValues: {
       templateName: "",
       subTemplateType: void 0,
       subTemplateType2: void 0,
       subject: "",
       templateType: void 0,
-      template: Z
+      template: Tt
     },
     mode: "onChange"
-  }), {
-    data: f,
-    refetch: g,
-    isLoading: T
-  } = vt(), [P, pe] = w([]), [K, ee] = w(!1), [L, te] = w(), [ne, re] = w(), { mutateAsync: me, isPending: N } = xt(), { mutateAsync: ue, isPending: I } = _t(), { data: F, isLoading: q } = St(), [fe, Fe] = w([]), [O, se] = w([]), [$, ie] = w([]), [Ue, ye] = w(!1), [W, He] = w("confirm"), [Ve, ge] = w(!1), [xe, Se] = w(!1);
-  E(() => {
-    if (F) {
-      let r = F.filter((p) => p.id != null), c = ve(r, 0);
-      Fe(be(c));
-    }
-  }, [F]);
-  const Ge = (r, c) => {
-    let p = [];
-    return r.forEach((C, k) => {
-      c.includes(k) && k !== 0 && p.push(De), p.push(C);
-    }), p;
-  };
-  E(() => {
-    s(!!(T || N || I || q || !a));
-  }, [T, N, I, q, a]), E(() => {
-    f?.sort((r, c) => r.readonly !== c.readonly ? (r.readonly ? 0 : 1) - (c.readonly ? 0 : 1) : r.name.localeCompare(c.name)), pe(f ?? []);
-  }, [f]);
-  const Ke = async (r) => {
-    te(r), r && (i || !r.readonly) ? (m("templateName", r?.name), A()) : (m("templateName", ""), m("subject", ""));
-    const c = await me({ id: r?.id });
-    c ? re(c) : ae();
-  };
-  E(() => {
-    if ((e === void 0 || e.templateId === void 0 || K) && m("template", Z), u("templateType")) {
-      let r = F?.filter((p) => p.id !== void 0) ?? [], c = ve(r, 1);
-      se(
-        be(
-          c.filter(
-            (p) => p.parent_id.toString() === `${u("templateType")?.id}`
-          )
-        )
-      ), m("subTemplateType", void 0), m("subTemplateType2", void 0);
-    }
-  }, [u("templateType")]), E(() => {
-    if ((e === void 0 || e.templateId === void 0) && m("template", Z), u("subTemplateType")) {
-      let r = F?.filter((p) => p.id !== void 0) ?? [], c = ve(r, 2);
-      ie(
-        be(
-          c.filter(
-            (p) => p.parent_id.toString() === `${u("subTemplateType")?.id}`
-          )
-        )
-      ), m("subTemplateType2", void 0);
+  }), [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;
+  L(() => {
+    if (a) {
+      let f = a.filter((_) => _.id != null), I = Te(f, 0);
+      ce(Ne(I));
     }
-  }, [u("subTemplateType")]), E(() => {
-    const r = Ne();
-    r.length > 0 && r[0].id !== "" ? (e === void 0 || e.templateId === void 0 || K) && m("template", r[0]) : (e === void 0 || e.templateId === void 0 || K) && m("template", Z);
-  }, [u("subTemplateType2")]), E(() => {
-    let r = P.find((c) => c.id === u("template")?.id);
-    Ke(r);
-  }, [u("template")]);
-  const [We, Ce] = w(!1);
-  E(() => {
-    xe || We || ne && L && a && (Ce(!0), t(ne), m("subject", ne.subject ?? ""), setTimeout(() => {
-      Ce(!1);
-    }, 1e3));
-  }, [ne, L, a, xe]);
-  const Ne = () => {
-    let r = [Z], c = "templateType";
-    $.length > 0 ? c = "subTemplateType2" : O.length > 0 && (c = "subTemplateType");
-    let p = P.filter(
-      (k) => (k.type?.toString() === u(c)?.id.toString() || k.type === null) && u(c)?.id != null
-    ), C = Ge(p, [p.findIndex((k) => !k.readonly)]);
-    return C.length > 0 && (C[0].readonly === !0 && !i ? r = [] : r.push(De), r = [
-      ...r,
-      ...C.map((x) => ({
-        id: x.id,
-        name: ze(p, x.id),
-        icon: et(p, x.id) ? /* @__PURE__ */ n(X, { variant: "filled" }) : /* @__PURE__ */ n(X, { variant: "empty" }),
-        isSeparator: x.isSeparator
-      }))
-    ]), r.length ? r : [];
-  };
-  E(() => {
-    if (e && e.type1) {
-      const r = fe?.find(
-        (c) => `${c.id}` === e.type1
-      );
-      m("templateType", r);
-    }
-  }, [F, fe]), E(() => {
-    if (e && e.type2) {
-      const r = O?.find(
-        (c) => `${c.id}` === e.type2
+  }, [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);
+    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,
+      template: f,
+      templateName: r.name ?? "",
+      subject: r.subject ?? ""
+    }), k(f), te.current = !0, ee(!1);
+  }, [s, r, n, a, P, v]);
+  const ne = (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]), L(() => {
+    if (!p("templateType")) return;
+    const f = Te(a, 1);
+    K(
+      Ne(
+        f.filter((I) => `${I.parent_id}` == `${p("templateType")?.id}`)
+      )
+    );
+  }, [p("templateType"), a]), L(() => {
+    const f = p("subTemplateType");
+    if (!f) return;
+    const I = Te(a, 2);
+    let _ = Ne(
+      I.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
       );
-      m("subTemplateType", r);
+      g("templateType", f);
     }
-  }, [F, O]), E(() => {
-    if (e && e.type3) {
-      const r = $?.find(
-        (c) => `${c.id}` === e.type3
+  }, [a, B]), L(() => {
+    if (d && d.type2) {
+      const f = V?.find(
+        (I) => `${I.id}` === d.type2
       );
-      m("subTemplateType2", r);
+      g("subTemplateType", f);
     }
-  }, [F, $]), E(() => {
-    if (e && e.templateId && P && P.length > 0 && !K && a) {
-      const r = P?.find(
-        (c) => `${c.id}` === e.templateId
+  }, [a, V]), L(() => {
+    if (d && d.type3) {
+      const f = G?.find(
+        (I) => `${I.id}` === d.type3
       );
-      ee(!0), r && (te(r), m("template", r));
+      g("subTemplateType2", f);
     }
-  }, [P, a]);
-  const ze = (r, c) => {
-    let p = r.find((C) => C.id === c);
-    return p ? `${p.displayName}` : "";
-  }, Qe = (r) => {
+  }, [a, G]);
+  const de = (f) => {
     window.StripoEditorApi.actionsApi.getTemplateData(
-      async (c) => {
-        let p = r.template.id, C = "";
-        L?.readonly && (p = "", C = r.template.id);
-        let k = P.find(
-          (R) => R.name === r.templateName.trim()
-        );
-        if (k && k.id !== p) {
-          h("templateName", {
-            type: "validate",
-            message: "Template name already exists. Please choose a different name."
-          });
-          return;
-        }
-        let x = r.templateType.id;
-        $ && $.length > 0 ? x = r.subTemplateType2.id : O && O.length > 0 && (x = r.subTemplateType.id);
-        const Q = {
-          enerexIdentifier: "",
-          projectId: "",
-          templateId: p,
-          templateType: x,
-          name: r.templateName.trim(),
-          html: c.html,
-          css: c.css,
-          subject: r.templateType.id === "2" ? r?.subject ?? "" : "",
-          parent_id: C
-        };
-        if (await ue(Q)) {
-          if (A(), L?.readonly && !i)
-            j(), se([]), ie([]);
-          else {
-            const R = await me({ id: p });
-            R ? re(R) : ae();
+      async (I) => {
+        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()
+          );
+          if (F && F.id !== _) {
+            O("templateName", {
+              type: "validate",
+              message: "Template name already exists. Please choose a different name."
+            });
+            return;
           }
-          await g();
-        }
-      }
-    );
-  }, ae = () => {
-    Se(!0), s(!1), re(void 0), t(void 0), setTimeout(() => {
-      Se(!1);
-    }, 0);
-  }, Ye = (r, c) => {
-    const p = c.trim(), C = "";
-    if (P.find(
-      (x) => x.name === p && x.id !== C
-    )) {
-      ge(!0);
-      return;
-    }
-    ye(!1), window.StripoEditorApi.actionsApi.getTemplateData(
-      async (x) => {
-        const Q = r.template.id;
-        let Y = r.templateType.id;
-        $?.length ? Y = r.subTemplateType2.id : O?.length && (Y = r.subTemplateType.id);
-        const R = {
-          enerexIdentifier: "",
-          projectId: "",
-          templateId: C,
-          templateType: Y,
-          name: p,
-          html: x.html,
-          css: x.css,
-          subject: r.templateType.id === "2" ? r?.subject ?? "" : "",
-          parent_id: Q
-        };
-        await ue(R) && (A(), ae(), j(), se([]), ie([]), await g(), m("template", void 0));
-      }
-    );
-  }, Je = (r) => {
-    window.StripoEditorApi.actionsApi.getTemplateData(
-      async (c) => {
-        let p = r.template.id, C = "", k = P.find(
-          (R) => R.name === r.templateName.trim()
-        );
-        if (k && k.id !== p) {
-          h("templateName", {
-            type: "validate",
-            message: "Template name already exists. Please choose a different name."
-          });
-          return;
-        }
-        let x = r.templateType.id;
-        $ && $.length > 0 ? x = r.subTemplateType2.id : O && O.length > 0 && (x = r.subTemplateType.id);
-        const Q = {
-          enerexIdentifier: "",
-          projectId: "",
-          templateId: p,
-          templateType: x,
-          name: r.templateName.trim(),
-          html: c.html,
-          css: c.css,
-          subject: r.templateType.id === "2" ? r?.subject ?? "" : "",
-          parent_id: C
-        };
-        if (await ue(Q)) {
-          A();
-          const R = await me({ id: p });
-          R ? re(R) : ae(), await g();
+          let me = f.templateType.id;
+          G?.length > 0 ? me = f.subTemplateType2.id : V?.length > 0 && (me = f.subTemplateType.id);
+          const u = {
+            enerexIdentifier: "",
+            projectId: "",
+            templateId: _,
+            templateType: me,
+            name: X,
+            html: I.html,
+            css: I.css,
+            subject: f.templateType.id === "2" ? f?.subject ?? "" : "",
+            parent_id: j,
+            updatedBy: m ?? ""
+          };
+          if (!await x(u)) {
+            ae(
+              "Failed to save template. Please try again.",
+              "error"
+            );
+            return;
+          }
+          ae(
+            H ? `Template "${X}" updated successfully.` : `Template "${X}" created successfully.`,
+            "success"
+          ), h(), l(), o();
+        } catch (_) {
+          console.error(_), ae(
+            "Something went wrong while saving the template.",
+            "error"
+          );
         }
       }
     );
-  }, Xe = () => {
-    He("input"), ye(!0), ge(!1);
-  }, Ze = (r) => {
-    if (W === "input") {
-      const c = v();
-      Ye(c, r || "");
-      return;
-    }
-  }, et = (r, c) => {
-    let p = r.find((C) => C.id === c);
-    if (p)
-      return p.is_favourite;
-  }, tt = async () => {
-    let r = u("templateType")?.id;
-    $ && $.length > 0 ? r = u("subTemplateType2")?.id : O && O.length > 0 && (r = u("subTemplateType")?.id), await d({
-      categoryId: r ?? "",
-      templateId: u("template")?.id ?? ""
-    }), L && te({
-      ...L,
-      is_favourite: !0
-    }), await g();
-  }, le = u("templateType"), Ie = u("subTemplateType"), nt = u("subTemplateType2"), rt = u("template");
-  return /* @__PURE__ */ S(Ee, { children: [
-    /* @__PURE__ */ n(ke, { className: "border border-0 text-start", children: /* @__PURE__ */ n(ke.Body, { className: "pe-0 ps-2", children: /* @__PURE__ */ n("form", { children: /* @__PURE__ */ n("div", { className: "template-list-container gap-3", children: /* @__PURE__ */ S(ot, { children: [
-      /* @__PURE__ */ n(U, { children: /* @__PURE__ */ n(
-        oe,
+  }, 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: [
+      /* @__PURE__ */ t("div", { className: "ts-col", children: /* @__PURE__ */ t(
+        ue,
         {
           label: "Category",
-          control: _,
-          error: y,
-          options: fe,
+          control: b,
+          error: M,
+          options: B,
           required: !0,
-          disabled: T || N || I || q || o || !a,
+          disabled: H || $ || w || !n,
           validation: {
             required: {
               value: !0,
               message: "Select a category"
             }
           },
-          ...b("templateType")
+          ...E("templateType")
         }
       ) }),
-      O && O.length > 0 && /* @__PURE__ */ n(U, { children: /* @__PURE__ */ n(
-        oe,
+      V && V.length > 0 && /* @__PURE__ */ t("div", { className: "ts-col", children: /* @__PURE__ */ t(
+        ue,
         {
           label: "Type",
-          control: _,
-          error: y,
-          options: O,
+          control: b,
+          error: M,
+          options: V,
           required: !0,
-          disabled: T || N || I || q || o || !a,
+          disabled: H || $ || w || !n,
           validation: {
             required: {
               value: !0,
               message: "Select a type"
             }
           },
-          ...b("subTemplateType")
+          ...E("subTemplateType")
         }
       ) }),
-      $ && $.length > 0 && /* @__PURE__ */ n(U, { children: /* @__PURE__ */ n(
-        oe,
+      G && G.length > 0 && /* @__PURE__ */ t("div", { className: "ts-col", children: /* @__PURE__ */ t(
+        ue,
         {
           label: "Sub Type",
-          control: _,
-          error: y,
-          options: $,
+          control: b,
+          error: M,
+          options: G,
           required: !0,
-          disabled: T || N || I || q || o || !a,
+          disabled: H || $ || w || !n,
           validation: {
             required: {
               value: !0,
               message: "Select a subtype"
             }
           },
-          ...b("subTemplateType2")
+          ...E("subTemplateType2")
         }
       ) }),
-      /* @__PURE__ */ n(U, { children: /* @__PURE__ */ n(
-        oe,
+      /* @__PURE__ */ t("div", { className: "ts-col", children: /* @__PURE__ */ t(
+        ue,
         {
           label: "Template",
-          control: _,
-          error: y,
-          disabled: T || N || I || q || o || !a,
-          options: Ne(),
+          control: b,
+          error: M,
+          disabled: H || !H || $ || w || !n,
+          options: [],
           required: !1,
-          ...b("template")
+          ...E("template")
         }
       ) }),
-      /* @__PURE__ */ S(U, { className: "d-flex align-self-start", children: [
-        /* @__PURE__ */ n(
-          je,
+      /* @__PURE__ */ c("div", { className: "ts-col ts-template-name-col", children: [
+        /* @__PURE__ */ t(
+          $e,
           {
             label: "Name",
-            register: b,
-            error: y,
+            register: E,
+            error: M,
             required: !0,
             name: "templateName",
             validation: {
@@ -1344,192 +1895,217 @@ const Oe = /* @__PURE__ */ Ct(It), $e = (t) => t.data.isSeparator ? /* @__PURE__
             }
           }
         ),
-        Ie?.key?.toString() === "9" && /* @__PURE__ */ n(
-          J,
-          {
-            className: "template-favourite-btn",
-            style: { width: "26px", marginTop: "25px" },
-            variant: "light",
-            disabled: T || N || I || q || o || (L ? L?.is_favourite : !1),
-            onClick: tt,
-            children: N || I || o ? /* @__PURE__ */ n(
-              z,
-              {
-                animation: "border",
-                style: { width: "11px", height: "11px" },
-                size: "sm",
-                role: "status",
-                className: "me-1",
-                children: /* @__PURE__ */ n("span", { className: "visually-hidden", children: "Loading..." })
-              }
-            ) : L ? L?.is_favourite ? /* @__PURE__ */ n(X, { variant: "filled" }) : /* @__PURE__ */ n(X, { variant: "outlined" }) : /* @__PURE__ */ n(X, { variant: "outlined" })
-          }
-        )
+        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" }) })
       ] }),
-      le?.key?.toString() === "12" && /* @__PURE__ */ n(U, { children: /* @__PURE__ */ n(
-        je,
+      le?.key?.toString() === "12" && /* @__PURE__ */ t("div", { className: "ts-col", children: /* @__PURE__ */ t(
+        $e,
         {
           label: "Subject",
-          register: b,
-          error: y,
+          register: E,
+          error: M,
           required: !1,
           name: "subject"
         }
       ) }),
-      /* @__PURE__ */ S(U, { className: "d-flex align-self-start justify-content-end gap-2 mb-1 btn-padding", children: [
-        /* @__PURE__ */ n(
-          J,
+      /* @__PURE__ */ c("div", { className: "ts-col ts-actions btn-padding", children: [
+        !H && /* @__PURE__ */ t(
+          "button",
           {
-            style: { width: "70px" },
-            variant: "primary",
-            disabled: T || N || I || q || o || !a,
+            type: "button",
+            className: "ts-btn ts-btn-primary",
+            disabled: $ || w || !n,
             onClick: () => {
-              te(void 0), j(), se([]), ie([]), l();
+              k(void 0), v(), K([]), Z([]), e();
             },
-            children: N || I || o ? /* @__PURE__ */ n(
-              z,
-              {
-                animation: "border",
-                style: { width: "11px", height: "11px" },
-                size: "sm",
-                role: "status",
-                className: "me-1",
-                children: /* @__PURE__ */ n("span", { className: "visually-hidden", children: "Loading..." })
-              }
-            ) : "Clear"
+            children: $ || w ? /* @__PURE__ */ t(se, { size: "sm" }) : "Clear"
           }
         ),
-        (le?.key?.toString() !== "12" || (le?.key?.toString() === "12" && (L?.id ?? "")) !== "") && /* @__PURE__ */ S(Ee, { children: [
-          !(L?.readonly && i) && /* @__PURE__ */ n(
-            J,
+        (le?.key?.toString() !== "12" || (le?.key?.toString() === "12" && (C?.id ?? "")) !== "") && /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            className: "ts-btn ts-btn-primary",
+            disabled: $ || w || !n,
+            onClick: A(de),
+            children: $ || w ? (
+              // <span className="ts-spinner" />
+              /* @__PURE__ */ t(se, { size: "sm" })
+            ) : "Save"
+          }
+        )
+      ] })
+    ] }) }) }) }) })
+  ] });
+}, xt = ({
+  show: e,
+  mode: n,
+  template: s,
+  templateTypes: a,
+  templateList: i,
+  editorInitialized: r,
+  previewHtml: l,
+  onEditorInitialized: o,
+  onClose: d,
+  onRefresh: y
+}) => {
+  const m = J(null), [T, w] = N(!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, r, n, s]), L(() => {
+    e || w(!1);
+  }, [e]);
+  const E = () => {
+    window.StripoEditorApi.actionsApi.updateHtmlAndCss(pe, "", "");
+  };
+  return e ? /* @__PURE__ */ t("div", { className: "ts-editor-modal-overlay", children: /* @__PURE__ */ c(
+    "div",
+    {
+      className: `ts-editor-modal ${T ? "ts-editor-modal--fullscreen" : ""}`,
+      ref: m,
+      children: [
+        /* @__PURE__ */ c("div", { className: "ts-editor-modal-header", children: [
+          /* @__PURE__ */ c("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__ */ t(
+              "button",
+              {
+                className: "ts-editor-fullscreen-btn",
+                onClick: () => w((A) => !A),
+                "aria-label": "Toggle fullscreen",
+                children: T ? "🗗" : "🗖"
+              }
+            ),
+            /* @__PURE__ */ t(
+              "button",
+              {
+                className: "ts-editor-close-btn",
+                onClick: d,
+                "aria-label": "Close editor",
+                children: "✕"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ c("div", { className: "ts-editor-modal-body", children: [
+          n !== "preview" && /* @__PURE__ */ t(
+            Ct,
             {
-              type: "button",
-              onClick: D(Qe),
-              variant: "primary",
-              style: { width: "80px" },
-              disabled: T || N || I || q || o || !a,
-              children: N || I || o ? /* @__PURE__ */ n(
-                z,
-                {
-                  animation: "border",
-                  style: { width: "11px", height: "11px" },
-                  size: "sm",
-                  role: "status",
-                  className: "me-1",
-                  children: /* @__PURE__ */ n("span", { className: "visually-hidden", children: "Loading..." })
-                }
-              ) : L?.readonly ? "Save as" : "Save"
+              mode: n,
+              template: s,
+              templateTypes: a,
+              templateList: i,
+              editorInitialized: r,
+              onReset: E,
+              onRefresh: y,
+              closeEditorModal: d
             }
           ),
-          (le?.key?.toString() === "28" || Ie?.key?.toString() === "9" && nt?.key?.toString() === "3" && (rt?.id ?? "") !== "") && /* @__PURE__ */ n(
-            J,
+          n === "preview" ? /* @__PURE__ */ t("div", { className: "ts-template-preview", children: /* @__PURE__ */ t(
+            "iframe",
             {
-              type: "button",
-              variant: "primary",
-              style: { width: "80px" },
-              onClick: () => Xe(),
-              disabled: T || N || I || q || o || !a,
-              children: N || I || o ? /* @__PURE__ */ n(
-                z,
-                {
-                  animation: "border",
-                  style: { width: "11px", height: "11px" },
-                  size: "sm",
-                  role: "status",
-                  className: "me-1",
-                  children: /* @__PURE__ */ n("span", { className: "visually-hidden", children: "Loading..." })
-                }
-              ) : "Save as"
+              title: "Template Preview",
+              className: "ts-template-preview-frame",
+              srcDoc: l ?? ""
             }
-          ),
-          L?.readonly && i && /* @__PURE__ */ n(
-            J,
+          ) }) : /* @__PURE__ */ t(
+            ht,
             {
-              type: "button",
-              onClick: D(Je),
-              variant: "primary",
-              style: { width: "80px" },
-              disabled: T || N || I || q || o || !a,
-              children: N || I || o ? /* @__PURE__ */ n(
-                z,
-                {
-                  animation: "border",
-                  style: { width: "11px", height: "11px" },
-                  size: "sm",
-                  role: "status",
-                  className: "me-1",
-                  children: /* @__PURE__ */ n("span", { className: "visually-hidden", children: "Loading..." })
-                }
-              ) : "Save"
+              onEditorInitialized: o,
+              loading: !1,
+              className: "editor-container"
             }
           )
         ] })
-      ] })
-    ] }) }) }) }) }),
-    /* @__PURE__ */ n(
-      bt,
-      {
-        show: Ue,
-        variant: W,
-        title: W === "confirm" ? "Are you sure?" : "Save Template As",
-        message: W === "confirm" ? 'Are you sure you want to remove custom template ""?' : "",
-        label: "New Name",
-        requiredMessage: "Enter a new name",
-        externalError: Ve,
-        externalErrorMessage: "Template name already exists. Please choose a different name",
-        confirmText: W === "confirm" ? "Ok" : "Save as",
-        confirmButtonVariant: W === "confirm" ? "danger" : "primary",
-        onConfirm: Ze,
-        onCancel: () => ye(!1),
-        onInputChange: () => ge(!1)
-      }
-    )
-  ] });
-}, Rt = ({ config: t }) => {
-  const [s, l] = w(!1), [a, i] = w(), [e, d] = w(!1);
-  E(() => {
-    t.isAdmin || d(!0);
-  }, []);
-  const [o, b] = w(!1);
-  return /* @__PURE__ */ n(pt, { configs: t, children: /* @__PURE__ */ n(ut, { children: /* @__PURE__ */ S("div", { className: "root-widget", children: [
-    /* @__PURE__ */ n(
-      kt,
+      ]
+    }
+  ) }) : null;
+}, Et = () => {
+  const {
+    data: e,
+    isLoading: n,
+    isFetching: s,
+    refetch: a
+  } = et(), {
+    data: i,
+    isLoading: r,
+    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) => {
+    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();
+  };
+  return /* @__PURE__ */ c(fe, { children: [
+    (n || r || s || l || d) && /* @__PURE__ */ t(se, { overlay: !0 }),
+    /* @__PURE__ */ t(
+      mt,
       {
-        templateLoading: b,
-        onSelectItem: (m) => {
-          if (i(m), t.isAdmin && d(!0), window.StripoEditorApi && window.StripoEditorApi.actionsApi) {
-            let _ = de;
-            console.log("selected template:"), window.StripoEditorApi.actionsApi.updateHtmlAndCss(
-              m?.html ?? _,
-              m?.css ?? "",
-              ""
-            );
-          }
-        },
-        editorInitialized: s,
-        onReset: () => {
-          b(!1), i(void 0), window.StripoEditorApi && window.StripoEditorApi.actionsApi && window.StripoEditorApi.actionsApi.updateHtmlAndCss(
-            de,
-            "",
-            ""
-          );
-        }
+        templates: e ?? [],
+        templateTypes: i ?? [],
+        onRefresh: a,
+        onAdd: v,
+        onEdit: O,
+        onPreview: M
       }
     ),
-    e && /* @__PURE__ */ n(
-      ht,
+    /* @__PURE__ */ t(
+      xt,
       {
-        onEditorInitialized: l,
-        templateHTML: {
-          css: a?.css ?? "",
-          html: a?.html ?? de
+        show: y,
+        mode: T,
+        template: b,
+        templateTypes: i ?? [],
+        templateList: e ?? [],
+        editorInitialized: E,
+        onEditorInitialized: A,
+        onClose: P,
+        onSaved: () => {
+          P(), a();
         },
-        loading: o,
-        className: "col-span-5"
+        onRefresh: a,
+        previewHtml: h
       }
     )
-  ] }) }) });
-};
+  ] });
+}, _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, {}) }) }) }) });
 export {
-  Rt as EditorWidget
+  _t as EditorWidget
 };