@invoice-sdk/widget 1.3.1 → 1.4.0

package/dist/index.esm.js

@@ -1,424 +1,445 @@
-function Q({ steps: f = [], currentStep: p = 1 } = {}) {
+function Z({ steps: m = [], currentStep: e = 1 } = {}) {
+  const s = document.createElement("div");
+  s.className = [
+    "wgt:relative",
+    "wgt:flex",
+    "wgt:bg-weak-50",
+    "wgt:rounded-[10px]",
+    "wgt:overflow-hidden",
+    "wgt:shadow-sm",
+    "wgt:justify-between"
+  ].join(" ");
   const o = document.createElement("div");
   o.className = [
-    "relative",
-    "flex",
-    "bg-weak-50",
-    "rounded-[10px]",
-    "overflow-hidden",
-    "shadow-sm",
-    "justify-between"
-  ].join(" ");
-  const l = document.createElement("div");
-  l.className = [
-    "absolute",
-    "inset-0",
-    "h-full",
-    "bg-primary/16",
-    "transition-all",
-    "duration-250"
+    "wgt:absolute",
+    "wgt:inset-0",
+    "wgt:h-full",
+    "wgt:bg-primary/16",
+    "wgt:transition-all",
+    "wgt:duration-250"
   ].join(" ");
   const c = document.createElement("div");
-  c.className = "relative flex w-full z-10";
-  const e = [];
-  f.forEach((t, r) => {
-    const n = r + 1, a = document.createElement("div");
+  c.className = "wgt:relative wgt:flex wgt:w-full wgt:z-10";
+  const t = [];
+  m.forEach((n, r) => {
+    const l = r + 1, a = document.createElement("div");
     a.setAttribute("role", "listitem"), a.setAttribute(
       "aria-label",
-      `Step ${n} of ${f.length}: ${t.label}${p === n ? " (current)" : ""}`
+      `Step ${l} of ${m.length}: ${n.label}${e === l ? " (current)" : ""}`
     ), a.className = [
-      "relative",
-      "flex-1",
-      "flex",
-      "items-center",
-      "justify-center",
-      "py-5",
-      "pr-9",
-      "px-4"
+      "wgt:relative",
+      "wgt:flex-1",
+      "wgt:flex",
+      "wgt:items-center",
+      "wgt:justify-center",
+      "wgt:py-5",
+      "wgt:pr-9",
+      "wgt:px-4"
     ].join(" ");
-    const i = document.createElement("div");
-    i.className = [
-      "flex",
-      "items-center",
-      "justify-center",
-      "w-8",
-      "h-8",
-      "rounded-full",
+    const g = document.createElement("div");
+    g.className = [
+      "wgt:flex",
+      "wgt:items-center",
+      "wgt:justify-center",
+      "wgt:w-8",
+      "wgt:h-8",
+      "wgt:rounded-full",
       // color will be set in update()
-      "flex-shrink-0",
-      "mr-4"
+      "wgt:flex-shrink-0",
+      "wgt:mr-4"
     ].join(" ");
-    const s = document.createElement("span");
-    s.innerText = String(n), s.className = "text-white font-medium", i.appendChild(s);
-    const m = document.createElement("span");
-    m.innerText = t.label, m.className = "font-medium whitespace-nowrap", a.appendChild(i), a.appendChild(m), c.appendChild(a), e.push({ wrapper: a, circle: i, textSpan: m });
-  }), o.appendChild(l), o.appendChild(c);
-  function d(t) {
-    const r = o.getBoundingClientRect(), n = r.width || 0;
+    const i = document.createElement("span");
+    i.innerText = String(l), i.className = "wgt:text-white wgt:font-medium", g.appendChild(i);
+    const w = document.createElement("span");
+    w.innerText = n.label, w.className = "wgt:font-medium wgt:whitespace-nowrap", a.appendChild(g), a.appendChild(w), c.appendChild(a), t.push({ wrapper: a, circle: g, textSpan: w });
+  }), s.appendChild(o), s.appendChild(c);
+  function d(n) {
+    const r = s.getBoundingClientRect(), l = r.width || 0;
     let a = 0;
-    if (t > 0 && t <= e.length) {
-      const m = e[t - 1].wrapper.getBoundingClientRect(), x = r.left;
-      a = m.left - x + m.width;
+    if (n > 0 && n <= t.length) {
+      const w = t[n - 1].wrapper.getBoundingClientRect(), u = r.left;
+      a = w.left - u + w.width;
     }
-    const i = n > 0 ? Math.min(a / n * 100, 100) : 0;
-    l.style.width = `${i}%`, e.forEach((s, m) => {
-      const x = m + 1, v = x < t, g = x === t;
-      v || g ? (s.textSpan.classList.add("text-primary-dark"), s.textSpan.classList.remove("text-soft-400")) : (s.textSpan.classList.add("text-soft-400"), s.textSpan.classList.remove("text-primary-dark")), v || g ? (s.circle.classList.add("bg-icon-primary"), s.circle.classList.remove("bg-icon-soft-400")) : (s.circle.classList.add("bg-icon-soft-400"), s.circle.classList.remove("bg-icon-primary"));
+    const g = l > 0 ? Math.min(a / l * 100, 100) : 0;
+    o.style.width = `${g}%`, t.forEach((i, w) => {
+      const u = w + 1, T = u < n, f = u === n;
+      T || f ? (i.textSpan.classList.add("wgt:text-primary-dark"), i.textSpan.classList.remove("wgt:text-soft-400")) : (i.textSpan.classList.add("wgt:text-soft-400"), i.textSpan.classList.remove("wgt:text-primary-dark")), T || f ? (i.circle.classList.add("wgt:bg-icon-primary"), i.circle.classList.remove("wgt:bg-icon-soft-400")) : (i.circle.classList.add("wgt:bg-icon-soft-400"), i.circle.classList.remove("wgt:bg-icon-primary"));
     });
   }
-  return setTimeout(() => d(p), 0), {
-    container: o,
+  return setTimeout(() => d(e), 0), {
+    container: s,
     /**
      * @param {number} newStep – the new 1‐based current step
      */
-    update(t) {
-      d(t);
+    update(n) {
+      d(n);
     }
   };
 }
-function A({ steps: f = [], currentStep: p = 1 } = {}) {
-  const o = document.createElement("div");
-  o.className = ["flex", "flex-col", "h-fit", "gap-6", "items-center", "justify-start"].join(" ");
-  const l = document.createElement("h1");
-  l.className = ["text-[28px]", "font-bold", "leading-[30px]", "text-strong-950"].join(" "), l.innerText = "Đăng ký hóa đơn điện tử";
+function _({ steps: m = [], currentStep: e = 1 } = {}) {
+  const s = document.createElement("div");
+  s.className = [
+    "wgt:flex",
+    "wgt:flex-col",
+    "wgt:h-fit",
+    "wgt:gap-6",
+    "wgt:items-center",
+    "wgt:justify-start",
+    "wgt:fixed",
+    "wgt:w-full",
+    "wgt:h-screen",
+    "wgt:inset-0",
+    "wgt:py-8",
+    "wgt:overflow-auto"
+  ].join(" ");
+  const o = document.createElement("h1");
+  o.className = [
+    "wgt:text-[28px]",
+    "wgt:font-bold",
+    "wgt:leading-[30px]",
+    "wgt:text-strong-950"
+  ].join(" "), o.innerText = "Đăng ký hóa đơn điện tử";
   const c = document.createElement("div");
   c.className = [
-    "w-[1320px]",
-    "flex-1",
-    "mx-auto",
-    "p-6",
-    "flex",
-    "flex-col",
-    "border",
-    "border-[#E1E4EA]",
-    "rounded-3xl",
-    "gap-6",
-    "shadow-[0px_1px_8px_0px_rgba(82,88,102,0.06)]"
+    "wgt:w-[1320px]",
+    "wgt:flex-1",
+    "wgt:mx-auto",
+    "wgt:p-6",
+    "wgt:flex",
+    "wgt:flex-col",
+    "wgt:border",
+    "wgt:border-[#E1E4EA]",
+    "wgt:rounded-3xl",
+    "wgt:gap-6",
+    "wgt:shadow-[0px_1px_8px_0px_rgba(82,88,102,0.06)]"
   ].join(" ");
-  const e = Q({ steps: f.map((t) => ({ label: t })), currentStep: p });
-  c.appendChild(e.container);
+  const t = Z({
+    steps: m.map((n) => ({ label: n })),
+    currentStep: e
+  });
+  c.appendChild(t.container);
   const d = document.createElement("div");
-  return d.className = "flex-1", c.appendChild(d), o.appendChild(l), o.appendChild(c), {
-    container: o,
+  return d.className = "wgt:flex-1", c.appendChild(d), s.appendChild(o), s.appendChild(c), {
+    container: s,
     /**
      * Change which step is active (1‐based index):
      */
-    setStep(t) {
-      e.update(t);
+    setStep(n) {
+      t.update(n);
     },
     /**
      * Replace whatever content is inside the “children” area:
      * @param {HTMLElement} domNode
      */
-    setContent(t) {
-      d.replaceChildren(t);
+    setContent(n) {
+      d.replaceChildren(n);
     }
   };
 }
-function W({ checked: f = !1, onChange: p }) {
-  const o = document.createElement("label");
-  o.className = "relative inline-flex cursor-pointer items-center";
-  const l = document.createElement("input");
-  l.type = "checkbox", l.checked = f, l.className = "peer sr-only", l.addEventListener("change", (t) => {
-    const r = t.target.checked;
-    typeof p == "function" && p(r), l.checked = r, e(r);
+function I({ checked: m = !1, onChange: e }) {
+  const s = document.createElement("label");
+  s.className = "wgt:relative wgt:inline-flex wgt:cursor-pointer wgt:items-center";
+  const o = document.createElement("input");
+  o.type = "checkbox", o.checked = m, o.className = "wgt:peer wgt:sr-only", o.addEventListener("change", (n) => {
+    const r = n.target.checked;
+    typeof e == "function" && e(r), o.checked = r, t(r);
   });
   const c = document.createElement("div");
   c.className = [
-    "border-grey-6",
-    "relative",
-    "h-5",
-    "w-5",
-    "rounded-full",
-    "border-2"
+    "wgt:border-grey-6",
+    "wgt:relative",
+    "wgt:h-5",
+    "wgt:w-5",
+    "wgt:rounded-full",
+    "wgt:border-2"
     // The “before:” pseudo‐element shows when checked → we’ll toggle via JS
   ].join(" ");
-  function e(t) {
-    t ? (c.classList.add("border-primary"), d.style.display = "block") : (c.classList.remove("border-primary"), d.style.display = "none");
+  function t(n) {
+    n ? (c.classList.add("wgt:border-primary"), d.style.display = "block") : (c.classList.remove("wgt:border-primary"), d.style.display = "none");
   }
   const d = document.createElement("div");
   return d.className = [
-    "absolute",
-    "left-1/2",
-    "top-1/2",
-    "h-2.5",
-    "w-2.5",
-    "-translate-x-1/2",
-    "-translate-y-1/2",
-    "rounded-full",
-    "bg-primary"
-  ].join(" "), d.style.display = f ? "block" : "none", c.appendChild(d), o.appendChild(l), o.appendChild(c), {
-    container: o,
-    setChecked(t) {
-      l.checked = t, e(t), typeof p == "function" && p(t);
+    "wgt:absolute",
+    "wgt:left-1/2",
+    "wgt:top-1/2",
+    "wgt:h-2.5",
+    "wgt:w-2.5",
+    "wgt:-translate-x-1/2",
+    "wgt:-translate-y-1/2",
+    "wgt:rounded-full",
+    "wgt:bg-primary"
+  ].join(" "), d.style.display = m ? "block" : "none", c.appendChild(d), s.appendChild(o), s.appendChild(c), {
+    container: s,
+    setChecked(n) {
+      o.checked = n, t(n), typeof e == "function" && e(n);
     }
   };
 }
-function q({
-  providers: f = [],
-  selectedRoute: p = null,
-  onProviderChange: o
+function $({
+  providers: m = [],
+  selectedRoute: e = null,
+  onProviderChange: s
 }) {
-  const l = document.createElement("div");
-  l.className = "w-full flex flex-col gap-4";
+  const o = document.createElement("div");
+  o.className = "wgt:w-full wgt:flex wgt:flex-col wgt:gap-4";
   const c = document.createElement("h2");
-  c.className = "heading", c.innerText = "Nhà cung cấp", l.appendChild(c);
-  const e = document.createElement("div");
-  e.className = "grid grid-cols-3 gap-4", l.appendChild(e);
+  c.className = "heading", c.innerText = "Nhà cung cấp", o.appendChild(c);
+  const t = document.createElement("div");
+  t.className = "wgt:grid wgt:grid-cols-3 wgt:gap-4", o.appendChild(t);
   function d() {
-    e.innerHTML = "", f.forEach((t) => {
-      const r = t.route === p, n = document.createElement("div");
-      n.dataset.checked = r ? "true" : "false", n.className = [
-        "flex",
-        "items-center",
-        "justify-between",
-        "gap-2",
-        "p-4",
-        "border",
-        "border-border-light",
-        "rounded-xl",
-        "hover:bg-gray-100",
-        "cursor-pointer",
-        "transition-colors",
-        "duration-200",
-        r ? "border-primary" : ""
-      ].filter(Boolean).join(" "), n.addEventListener("click", () => {
-        p = t.route, typeof o == "function" && o(t), d();
+    t.innerHTML = "", m.forEach((n) => {
+      const r = n.route === e, l = document.createElement("div");
+      l.dataset.checked = r ? "true" : "false", l.className = [
+        "wgt:flex",
+        "wgt:items-center",
+        "wgt:justify-between",
+        "wgt:gap-2",
+        "wgt:p-4",
+        "wgt:border",
+        "wgt:border-border-light",
+        "wgt:rounded-xl",
+        "wgt:hover:bg-gray-100",
+        "wgt:cursor-pointer",
+        "wgt:transition-colors",
+        "wgt:duration-200",
+        r ? "wgt:border-primary" : ""
+      ].filter(Boolean).join(" "), l.addEventListener("click", () => {
+        e = n.route, typeof s == "function" && s(n), d();
       });
       const a = document.createElement("div");
-      a.className = "flex items-center gap-3";
-      const i = document.createElement("img");
-      i.src = t.logoUrl, i.alt = t.name, i.className = "h-8 object-contain";
-      const s = document.createElement("div");
-      s.className = "w-[1px] h-8 bg-border-light";
-      const m = document.createElement("label");
-      m.className = "text-base font-semibold leading-5 text-black uppercase", m.innerText = t.name, a.appendChild(i), a.appendChild(s), a.appendChild(m);
-      const { container: x } = W({
+      a.className = "wgt:flex wgt:items-center wgt:gap-3";
+      const g = document.createElement("img");
+      g.src = n.logoUrl, g.alt = n.name, g.className = "wgt:h-8 wgt:object-contain";
+      const i = document.createElement("div");
+      i.className = "wgt:w-[1px] wgt:h-8 wgt:bg-border-light";
+      const w = document.createElement("label");
+      w.className = "wgt:text-base wgt:font-semibold wgt:leading-5 wgt:text-black wgt:uppercase", w.innerText = n.name, a.appendChild(g), a.appendChild(i), a.appendChild(w);
+      const { container: u } = I({
         checked: r,
-        onChange: (v) => {
-          v && (p = t.route, typeof o == "function" && o(t), d());
+        onChange: (T) => {
+          T && (e = n.route, typeof s == "function" && s(n), d());
         }
       });
-      n.appendChild(a), n.appendChild(x), e.appendChild(n);
+      l.appendChild(a), l.appendChild(u), t.appendChild(l);
     });
   }
   return d(), {
-    container: l,
-    setSelectedRoute(t) {
-      p = t, d();
+    container: o,
+    setSelectedRoute(n) {
+      e = n, d();
     }
   };
 }
-function S({
-  name: f,
-  value: p = "",
-  type: o = "text",
-  placeholder: l = "",
+function j({
+  name: m,
+  value: e = "",
+  type: s = "text",
+  placeholder: o = "",
   label: c,
-  required: e = !1,
+  required: t = !1,
   error: d = null,
-  onInput: t = null
+  onInput: n = null
 }) {
   const r = document.createElement("div");
-  r.className = "flex flex-col";
-  const n = document.createElement("label");
-  if (n.htmlFor = f, n.className = "font-medium mb-2 text-text-black", n.innerText = c, e) {
-    const s = document.createElement("span");
-    s.className = "text-red-500 ml-1", s.innerText = "*", n.appendChild(s);
+  r.className = "wgt:flex wgt:flex-col";
+  const l = document.createElement("label");
+  if (l.htmlFor = m, l.className = "wgt:font-medium wgt:mb-2 wgt:text-text-black", l.innerText = c, t) {
+    const i = document.createElement("span");
+    i.className = "wgt:text-red-500 wgt:ml-1", i.innerText = "*", l.appendChild(i);
   }
   const a = document.createElement("input");
-  a.type = o, a.name = f, a.id = f, a.value = p, a.placeholder = l, a.className = [
-    "border",
-    "rounded",
-    "px-3",
-    "py-2",
-    "focus:outline-none",
-    "focus:ring-2",
-    "focus:ring-blue-500",
-    d ? "border-red-500" : "border-gray-300"
-  ].join(" "), e && a.setAttribute("required", "true"), typeof t == "function" && a.addEventListener("input", t);
-  const i = document.createElement("span");
-  return i.className = "text-red-500 text-sm mt-1", i.innerText = d || "", d || (i.style.display = "none"), r.appendChild(n), r.appendChild(a), r.appendChild(i), {
+  a.type = s, a.name = m, a.id = m, a.value = e, a.placeholder = o, a.className = [
+    "wgt:border",
+    "wgt:rounded",
+    "wgt:px-3",
+    "wgt:py-2",
+    "wgt:focus:outline-none",
+    "wgt:focus:ring-2",
+    "wgt:focus:ring-blue-500",
+    d ? "wgt:border-red-500" : "wgt:border-gray-300"
+  ].join(" "), t && a.setAttribute("required", "true"), typeof n == "function" && a.addEventListener("input", n);
+  const g = document.createElement("span");
+  return g.className = "wgt:text-red-500 wgt:text-sm mt-1", g.innerText = d || "", d || (g.style.display = "none"), r.appendChild(l), r.appendChild(a), r.appendChild(g), {
     container: r,
     inputEl: a,
-    setError(s) {
-      s ? (i.innerText = s, i.style.display = "block", a.classList.remove("border-gray-300"), a.classList.add("border-red-500")) : (i.innerText = "", i.style.display = "none", a.classList.remove("border-red-500"), a.classList.add("border-gray-300"));
+    setError(i) {
+      i ? (g.innerText = i, g.style.display = "block", a.classList.remove("wgt:border-gray-300"), a.classList.add("wgt:border-red-500")) : (g.innerText = "", g.style.display = "none", a.classList.remove("wgt:border-red-500"), a.classList.add("wgt:border-gray-300"));
     },
     getValue() {
       return a.value;
     }
   };
 }
-function j({
-  name: f,
-  value: p = "",
-  options: o = [],
-  label: l,
+function F({
+  name: m,
+  value: e = "",
+  options: s = [],
+  label: o,
   disabled: c = !1,
-  error: e = null,
+  error: t = null,
   onChange: d = null
 }) {
-  const t = document.createElement("div");
-  t.className = "flex flex-col";
+  const n = document.createElement("div");
+  n.className = "wgt:flex wgt:flex-col";
   const r = document.createElement("label");
-  r.htmlFor = f, r.className = "font-medium mb-1 text-gray-700", r.innerText = l;
-  const n = document.createElement("select");
-  n.id = f, n.name = f, n.disabled = c, n.className = [
-    "border",
-    "rounded",
-    "px-3",
-    "py-2",
-    "bg-white",
-    "focus:outline-none",
-    "focus:ring-2",
-    "focus:ring-blue-500",
-    e ? "border-red-500" : "border-gray-300"
+  r.htmlFor = m, r.className = "wgt:font-medium wgt:mb-1 wgt:text-gray-700", r.innerText = o;
+  const l = document.createElement("select");
+  l.id = m, l.name = m, l.disabled = c, l.className = [
+    "wgt:border",
+    "wgt:rounded",
+    "wgt:px-3",
+    "wgt:py-2",
+    "wgt:bg-white",
+    "wgt:focus:outline-none",
+    "wgt:focus:ring-2",
+    "wgt:focus:ring-blue-500",
+    t ? "wgt:border-red-500" : "wgt:border-gray-300"
   ].join(" ");
   const a = document.createElement("option");
-  a.value = "", a.disabled = !0, a.selected = p === "" || p == null, a.innerText = `-- Chọn ${l.toLowerCase()} --`, n.appendChild(a), o.forEach((s) => {
-    const m = document.createElement("option");
-    m.value = s.value, m.innerText = s.label, s.value === p && (m.selected = !0), n.appendChild(m);
-  }), typeof d == "function" && n.addEventListener("change", d);
-  const i = document.createElement("span");
-  return i.className = "text-red-500 text-sm mt-1", i.innerText = e || "", e || (i.style.display = "none"), t.appendChild(n), t.appendChild(i), {
-    container: t,
-    selectEl: n,
-    setError(s) {
-      s ? (i.innerText = s, i.style.display = "block", n.classList.remove("border-gray-300"), n.classList.add("border-red-500")) : (i.innerText = "", i.style.display = "none", n.classList.remove("border-red-500"), n.classList.add("border-gray-300"));
+  a.value = "", a.disabled = !0, a.selected = e === "" || e == null, a.innerText = `-- Chọn ${o.toLowerCase()} --`, l.appendChild(a), s.forEach((i) => {
+    const w = document.createElement("option");
+    w.value = i.value, w.innerText = i.label, i.value === e && (w.selected = !0), l.appendChild(w);
+  }), typeof d == "function" && l.addEventListener("change", d);
+  const g = document.createElement("span");
+  return g.className = "wgt:text-red-500 wgt:text-sm wgt:mt-1", g.innerText = t || "", t || (g.style.display = "none"), n.appendChild(l), n.appendChild(g), {
+    container: n,
+    selectEl: l,
+    setError(i) {
+      i ? (g.innerText = i, g.style.display = "block", l.classList.remove("wgt:border-gray-300"), l.classList.add("wgt:border-red-500")) : (g.innerText = "", g.style.display = "none", l.classList.remove("wgt:border-red-500"), l.classList.add("wgt:border-gray-300"));
     },
     getValue() {
-      return n.value;
+      return l.value;
     },
-    setOptions(s) {
-      for (; n.options.length > 1; )
-        n.remove(1);
-      s.forEach((m) => {
-        const x = document.createElement("option");
-        x.value = m.value, x.innerText = m.label, n.appendChild(x);
+    setOptions(i) {
+      for (; l.options.length > 1; )
+        l.remove(1);
+      i.forEach((w) => {
+        const u = document.createElement("option");
+        u.value = w.value, u.innerText = w.label, l.appendChild(u);
       });
     },
-    setDisabled(s) {
-      n.disabled = !!s;
+    setDisabled(i) {
+      l.disabled = !!i;
     }
   };
 }
-function I({
-  label: f,
-  required: p = !1,
-  file: o = null,
-  onFileChange: l,
+function O({
+  label: m,
+  required: e = !1,
+  file: s = null,
+  onFileChange: o,
   error: c = null
 }) {
-  const e = document.createElement("div");
-  e.className = "flex flex-col";
+  const t = document.createElement("form");
+  t.className = "wgt:flex wgt:flex-col";
   const d = document.createElement("label");
-  if (d.className = "font-medium mb-1 text-gray-700", d.innerText = f, p) {
-    const u = document.createElement("span");
-    u.className = "text-red-500 ml-1", u.innerText = "*", d.appendChild(u);
+  if (d.htmlFor = "upload", d.className = "wgt:font-medium wgt:mb-1 wgt:text-gray-700", d.innerText = m, e) {
+    const p = document.createElement("span");
+    p.className = "wgt:text-red-500 wgt:ml-1", p.innerText = "*", d.appendChild(p);
   }
-  e.appendChild(d);
-  const t = document.createElement("div");
-  t.className = [
-    "h-fit",
-    "py-4",
-    "w-full",
-    "rounded",
-    "overflow-hidden",
-    "flex",
-    "items-center",
-    "cursor-pointer",
-    "justify-center",
-    "border",
-    "border-dashed",
-    "border-grey-6",
-    "flex-col",
-    "gap-2"
-  ].join(" "), t.addEventListener("click", () => {
-    r.click();
-  });
+  t.appendChild(d);
+  const n = document.createElement("div");
+  n.className = [
+    "wgt:h-fit",
+    "wgt:py-4",
+    "wgt:w-full",
+    "wgt:rounded",
+    "wgt:overflow-hidden",
+    "wgt:flex",
+    "wgt:items-center",
+    "wgt:cursor-pointer",
+    "wgt:justify-center",
+    "wgt:border",
+    "wgt:border-dashed",
+    "wgt:border-grey-6",
+    "wgt:flex-col",
+    "wgt:gap-2"
+  ].join(" ");
   const r = document.createElement("input");
-  r.type = "file", r.accept = "image/*,.pdf", r.className = "hidden", r.addEventListener("change", (u) => {
-    const C = u.target.files && u.target.files[0] ? u.target.files[0] : null;
-    N(C);
+  r.id = "upload", r.type = "file", r.accept = "image/*,.pdf", r.className = "wgt:hidden", r.addEventListener("change", (p) => {
+    const b = p.target.files && p.target.files[0] ? p.target.files[0] : null;
+    x(b), s = b;
   });
-  const n = document.createElement("div");
-  n.className = "w-full flex flex-col gap-2 items-center justify-center";
+  const l = document.createElement("div");
+  l.className = "wgt:w-full wgt:flex wgt:flex-col wgt:gap-2 wgt:items-center wgt:justify-center";
   const a = document.createElement("span");
-  a.className = "text-red-500 text-sm mt-1", a.innerText = c || "", c || (a.style.display = "none");
-  let i = null;
-  function s() {
-    if (!o || i) return;
-    i = document.createElement("div"), i.className = [
-      "fixed",
-      "inset-0",
-      "bg-black",
-      "bg-opacity-75",
-      "z-50",
-      "flex",
-      "items-center",
-      "justify-center"
-    ].join(" "), i.addEventListener("click", () => m());
-    const u = document.createElement("div");
-    u.className = "relative w-full h-screen bg-white overflow-auto";
-    const C = document.createElement("button");
-    C.innerHTML = "&times;", C.className = "absolute w-8 h-8 top-2 right-2 text-gray-600 text-2xl cursor-pointer", C.setAttribute("aria-label", "Close preview"), C.addEventListener("click", (h) => {
-      h.stopPropagation(), m();
-    }), u.appendChild(C);
-    const y = document.createElement("div");
-    if (y.className = "px-10 w-full h-full flex flex-col items-center justify-center", o.type === "application/pdf") {
+  a.className = "wgt:text-red-500 wgt:text-sm wgt:mt-1", a.innerText = c || "", c || (a.style.display = "none");
+  let g = null;
+  function i() {
+    if (!s || g) return;
+    g = document.createElement("div"), g.className = [
+      "wgt:fixed",
+      "wgt:inset-0",
+      "wgt:bg-black",
+      "wgt:bg-opacity-75",
+      "wgt:z-50",
+      "wgt:flex",
+      "wgt:items-center",
+      "wgt:justify-center"
+    ].join(" "), g.addEventListener("click", () => w());
+    const p = document.createElement("div");
+    p.className = "wgt:relative wgt:w-full wgt:h-screen wgt:bg-white wgt:overflow-auto";
+    const b = document.createElement("button");
+    b.innerHTML = "&times;", b.className = "wgt:absolute wgt:w-8 wgt:h-8 wgt:top-2 wgt:right-2 wgt:text-gray-600 wgt:text-2xl wgt:cursor-pointer", b.setAttribute("aria-label", "Close preview"), b.addEventListener("click", (h) => {
+      h.stopPropagation(), w();
+    }), p.appendChild(b);
+    const v = document.createElement("div");
+    if (v.className = "wgt:px-10 wgt:w-full wgt:h-full wgt:flex wgt:flex-col wgt:items-center wgt:justify-center", s.type === "application/pdf") {
       const h = document.createElement("object");
-      h.data = g, h.type = "application/pdf", h.className = "w-full h-full object-contain", y.appendChild(h);
+      h.data = f, h.type = "application/pdf", h.className = "wgt:w-full wgt:h-full wgt:object-contain", v.appendChild(h);
     } else {
       const h = document.createElement("img");
-      h.src = g, h.alt = "Full Preview", h.className = "max-h-screen object-contain", y.appendChild(h);
+      h.src = f, h.alt = "Full Preview", h.className = "wgt:max-h-screen wgt:object-contain", v.appendChild(h);
     }
-    u.appendChild(y), i.appendChild(u), document.body.appendChild(i);
+    p.appendChild(v), g.appendChild(p), document.body.appendChild(g);
   }
-  function m() {
-    i && (document.body.removeChild(i), i = null);
+  function w() {
+    g && (document.body.removeChild(g), g = null);
   }
-  const x = document.createElement("button");
-  x.type = "button", x.className = "bg-primary hover:bg-primary-dark text-white px-4 py-1 rounded-md cursor-pointer", x.innerText = "Upload file", x.addEventListener("click", (u) => {
-    u.stopPropagation(), r.click();
+  const u = document.createElement("button");
+  u.type = "button", u.className = "wgt:bg-primary wgt:hover:bg-primary-dark wgt:text-white wgt:px-4 wgt:py-1 wgt:rounded-md wgt:cursor-pointer", u.innerText = "Upload file", u.addEventListener("click", (p) => {
+    p.stopPropagation(), r.click();
   });
-  function v(u, C = 2) {
-    if (u === 0) return "0 Bytes";
-    const y = 1024, h = Math.max(0, C), w = ["Bytes", "KB", "MB", "GB", "TB"], b = Math.floor(Math.log(u) / Math.log(y));
-    return parseFloat((u / Math.pow(y, b)).toFixed(h)) + " " + w[b];
+  function T(p, b = 2) {
+    if (p === 0) return "0 Bytes";
+    const v = 1024, h = Math.max(0, b), H = ["Bytes", "KB", "MB", "GB", "TB"], y = Math.floor(Math.log(p) / Math.log(v));
+    return parseFloat((p / Math.pow(v, y)).toFixed(h)) + " " + H[y];
   }
-  let g = null;
-  function E(u) {
-    g && (URL.revokeObjectURL(g), g = null), u && (g = URL.createObjectURL(u));
+  let f = null;
+  function E(p) {
+    f && (URL.revokeObjectURL(f), f = null), p && (f = URL.createObjectURL(p));
   }
-  function N(u) {
-    if (E(u), n.innerHTML = "", u) {
-      const C = document.createElement("div");
-      C.className = "flex w-full items-center justify-between";
-      const y = document.createElement("div");
-      if (y.className = "flex space-x-4 w-full justify-start items-center px-4", u.type === "application/pdf") {
-        const T = document.createElement("div");
-        T.className = "flex-shrink-0 flex items-center justify-center rounded", T.innerHTML = `
+  function x(p) {
+    if (E(p), l.innerHTML = "", p) {
+      const b = document.createElement("div");
+      b.className = "wgt:flex wgt:w-full wgt:items-center wgt:justify-between";
+      const v = document.createElement("div");
+      if (v.className = "wgt:flex wgt:space-x-4 wgt:w-full wgt:justify-start wgt:items-center wgt:px-4", v.addEventListener("click", () => {
+        r.click();
+      }), p.type === "application/pdf") {
+        const N = document.createElement("div");
+        N.className = "wgt:flex-shrink-0 wgt:flex wgt:items-center wgt:justify-center wgt:rounded", N.innerHTML = `
           <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-gray-500" fill="currentColor" viewBox="0 0 24 24">
             <path d="M6 2h9l5 5v15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z"/>
             <path d="M14 2v5h5"/>
           </svg>
-        `, y.appendChild(T);
+        `, v.appendChild(N);
       } else {
-        const T = document.createElement("img");
-        T.src = g, T.alt = "Preview thumbnail", T.className = "object-contain h-20 w-20 rounded", y.appendChild(T);
+        const N = document.createElement("img");
+        N.src = f, N.alt = "Preview thumbnail", N.className = "wgt:object-contain wgt:h-20 wgt:w-20 wgt:rounded", v.appendChild(N);
       }
       const h = document.createElement("div");
-      h.className = "flex-1";
-      const w = document.createElement("p");
-      w.className = "text-sm font-medium text-gray-800 truncate", w.innerText = u.name;
-      const b = document.createElement("p");
-      b.className = "text-sm text-gray-500", b.innerText = v(u.size), h.appendChild(w), h.appendChild(b), y.appendChild(h), C.appendChild(y);
-      const k = document.createElement("button");
-      k.type = "button", k.innerText = "Preview", k.className = "px-2 text-xs font-medium text-text-black", k.addEventListener("click", (T) => {
-        T.preventDefault(), s();
-      }), C.appendChild(k), n.appendChild(C);
+      h.className = "wgt:flex-1";
+      const H = document.createElement("p");
+      H.className = "wgt:text-sm wgt:font-medium wgt:text-gray-800 wgt:truncate", H.innerText = p.name;
+      const y = document.createElement("p");
+      y.className = "wgt:text-sm wgt:text-gray-500", y.innerText = T(p.size), h.appendChild(H), h.appendChild(y), v.appendChild(h), b.appendChild(v);
+      const C = document.createElement("button");
+      C.type = "button", C.innerText = "Preview", C.className = "wgt:p-2 wgt:text-xs wgt:font-medium wgt:text-text-black wgt:cursor:pointer", C.addEventListener("click", (N) => {
+        N.stopPropagation(), i();
+      }), b.appendChild(C), l.appendChild(b);
     } else {
-      n.innerHTML = `
+      l.innerHTML = `
         <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M13.1313 9.25809L13.1313 22.2754" stroke="#595959" stroke-width="0.810811" stroke-linecap="round" stroke-linejoin="round"/>
           <path d="M16.2832 12.4238L13.1308 9.25842L9.97834 12.4238" stroke="#595959" stroke-width="0.810811" stroke-linecap="round" stroke-linejoin="round"/>
@@ -427,27 +448,30 @@ function I({
         <span class="text-sm font-semibold leading-4 text-grey-8">Tải tệp lên</span>
         <span class="text-xs font-normal leading-3 text-grey-7">(Tối thiểu 400x400px, PNG hoặc JPEG)</span>
       `;
-      const C = document.createElement("div");
-      C.className = "flex items-center", C.appendChild(x), n.appendChild(C);
+      const b = document.createElement("div");
+      b.className = "wgt:flex wgt:items-center", b.appendChild(u), l.appendChild(b);
     }
   }
-  return N(o), t.appendChild(n), t.appendChild(r), e.appendChild(t), e.appendChild(a), {
-    container: e,
-    setFile(u) {
-      o = u, N(u);
+  return x(s), n.appendChild(l), n.appendChild(r), t.appendChild(n), t.appendChild(a), {
+    container: t,
+    getValues() {
+      return s;
+    },
+    setFile(p) {
+      s = p, x(p);
     },
     clearFile() {
-      o = null, N(null);
+      s = null, x(null);
     },
-    setError(u) {
-      u ? (a.innerText = u, a.style.display = "block") : (a.innerText = "", a.style.display = "none");
+    setError(p) {
+      p ? (a.innerText = p, a.style.display = "block") : (a.innerText = "", a.style.display = "none");
     }
   };
 }
-const U = [
+const z = [
   { value: "VN", label: "Việt Nam" }
   // …you could list other countries here…
-], D = {
+], U = {
   VN: [
     { value: "HN", label: "Hà Nội" },
     { value: "HCM", label: "TP. Hồ Chí Minh" },
@@ -455,7 +479,7 @@ const U = [
     // …etc…
   ]
   // if you had other countries, put them here
-}, F = {
+}, R = {
   HN: [
     { value: "QL", label: "Quận Ba Đình" },
     { value: "TL", label: "Quận Tây Hồ" }
@@ -471,7 +495,7 @@ const U = [
     { value: "S0", label: "Sơn Trà" }
     // …etc…
   ]
-}, R = {
+}, W = {
   QL: [
     { value: "PD", label: "Phường Điện Biên" },
     { value: "NT", label: "Phường Ngọc Hà" }
@@ -497,127 +521,134 @@ const U = [
     { value: "NB", label: "Phường Nại Hiên Đông" }
   ]
 };
-function Z({ onSubmit: f }) {
-  const p = document.createElement("form");
-  p.className = "w-full", p.addEventListener("submit", (h) => {
-    h.preventDefault();
-    const w = y();
-    typeof f == "function" && f(w);
+function G({ onSubmit: m, registrationData: e }) {
+  var H, y, C, N, V, M, S;
+  const s = document.createElement("form");
+  s.className = "wgt:w-full", s.addEventListener("submit", (k) => {
+    k.preventDefault();
+    const L = h();
+    typeof m == "function" && m(L);
   });
   const o = document.createElement("div");
-  o.className = "grid grid-cols-1 md:grid-cols-2 gap-8", p.appendChild(o);
-  const l = document.createElement("div");
-  l.className = "space-y-4";
+  o.className = "wgt:grid wgt:grid-cols-1 wgt:md:grid-cols-2 wgt:gap-8", s.appendChild(o);
   const c = document.createElement("div");
-  c.className = "space-y-4", o.appendChild(l), o.appendChild(c);
-  const e = S({
+  c.className = "wgt:space-y-4";
+  const t = document.createElement("div");
+  t.className = "wgt:space-y-4", o.appendChild(c), o.appendChild(t);
+  const d = j({
     name: "taxCode",
     label: "Mã số thuế",
     required: !0,
     error: null,
     placeholder: "",
-    type: "text"
+    type: "text",
+    value: (e == null ? void 0 : e.taxCode) ?? ""
   });
-  l.appendChild(e.container);
-  const d = S({
+  c.appendChild(d.container);
+  const n = j({
     name: "representative",
     label: "Người đại diện",
     required: !0,
     error: null,
     placeholder: "",
-    type: "text"
+    type: "text",
+    value: (e == null ? void 0 : e.representative) ?? ""
   });
-  l.appendChild(d.container);
-  const t = S({
+  c.appendChild(n.container);
+  const r = j({
     name: "email",
     label: "Email",
     required: !0,
     error: null,
     placeholder: "",
-    type: "email"
+    type: "email",
+    value: (e == null ? void 0 : e.email) ?? ""
   });
-  l.appendChild(t.container);
-  const r = S({
+  c.appendChild(r.container);
+  const l = j({
     name: "phone",
     label: "Số điện thoại",
     required: !0,
     error: null,
     placeholder: "",
-    type: "tel"
+    type: "tel",
+    value: (e == null ? void 0 : e.phone) ?? ""
   });
-  l.appendChild(r.container);
-  const n = I({
+  c.appendChild(l.container);
+  const a = O({
     label: "Giấy phép đăng ký kinh doanh",
     required: !0,
-    file: null,
-    onFileChange: (h) => {
+    file: (e == null ? void 0 : e.license) ?? null,
+    onFileChange: (k) => {
     },
     error: null
   });
-  l.appendChild(n.container);
-  const a = S({
+  c.appendChild(a.container);
+  const g = j({
     name: "companyName",
     label: "Tên công ty",
     required: !1,
     error: null,
     placeholder: "",
-    type: "text"
+    type: "text",
+    value: (e == null ? void 0 : e.companyName) ?? ""
   });
-  c.appendChild(a.container);
-  const i = S({
+  t.appendChild(g.container);
+  const i = j({
     name: "position",
     label: "Chức vụ",
     required: !1,
     error: null,
     placeholder: "",
-    type: "text"
+    type: "text",
+    value: (e == null ? void 0 : e.position) ?? ""
   });
-  c.appendChild(i.container);
-  const s = document.createElement("div");
-  s.className = "w-full flex flex-col gap-2", c.appendChild(s);
-  const m = document.createElement("span");
-  m.className = "font-medium text-text-black", m.innerText = "Địa chỉ", s.appendChild(m);
-  const x = j({
+  t.appendChild(i.container);
+  const w = document.createElement("div");
+  w.className = "wgt:w-full wgt:flex wgt:flex-col wgt:gap-2", t.appendChild(w);
+  const u = document.createElement("span");
+  u.className = "wgt:font-medium wgt:text-text-black", u.innerText = "Địa chỉ", w.appendChild(u);
+  const T = F({
     name: "country",
     label: "Quốc gia",
-    options: U,
+    options: z,
     // e.g. [{value:"vn",label:"Việt Nam"}, …]
     value: "",
     disabled: !1,
     error: null,
-    onChange: (h) => {
-      const w = h.target.value;
-      D[w] ? (v.setOptions(D[w]), v.setDisabled(!1)) : (v.setOptions([]), v.setDisabled(!0)), v.selectEl.value = "", g.setOptions([]), g.selectEl.value = "", g.setDisabled(!0), E.setOptions([]), E.selectEl.value = "", E.setDisabled(!0);
+    onChange: (k) => {
+      const L = k.target.value;
+      U[L] ? (f.setOptions(U[L]), f.setDisabled(!1)) : (f.setOptions([]), f.setDisabled(!0)), f.selectEl.value = "", E.setOptions([]), E.selectEl.value = "", E.setDisabled(!0), x.setOptions([]), x.selectEl.value = "", x.setDisabled(!0);
     }
   });
-  s.appendChild(x.container);
-  const v = j({
+  w.appendChild(T.container);
+  const f = F({
     name: "province",
     label: "Tỉnh/Thành phố",
     options: [],
     value: "",
     disabled: !0,
     error: null,
-    onChange: (h) => {
-      const w = h.target.value;
-      F[w] ? (g.setOptions(F[w]), g.setDisabled(!1)) : (g.setOptions([]), g.setDisabled(!0)), E.setOptions([]), E.selectEl.value = "", E.setDisabled(!0);
+    onChange: (k) => {
+      const L = k.target.value;
+      R[L] ? (E.setOptions(R[L]), E.setDisabled(!1)) : (E.setOptions([]), E.setDisabled(!0)), x.setOptions([]), x.selectEl.value = "", x.setDisabled(!0);
     }
   });
-  s.appendChild(v.container);
-  const g = j({
+  w.appendChild(f.container);
+  const E = F({
     name: "district",
     label: "Quận/Huyện",
     options: [],
     value: "",
     disabled: !0,
     error: null,
-    onChange: (h) => {
-      const w = h.target.value;
-      R[w] ? (E.setOptions(R[w]), E.setDisabled(!1)) : (E.setOptions([]), E.setDisabled(!0));
+    onChange: (k) => {
+      const L = k.target.value;
+      W[L] ? (x.setOptions(W[L]), x.setDisabled(!1)) : (x.setOptions([]), x.setDisabled(!0));
     }
   });
-  s.appendChild(g.container);
-  const E = j({
+  w.appendChild(E.container);
+  const x = F({
     name: "ward",
     label: "Phường/Xã",
     options: [],
@@ -627,231 +658,268 @@ function Z({ onSubmit: f }) {
     onChange: () => {
     }
   });
-  s.appendChild(E.container);
-  const N = S({
+  w.appendChild(x.container);
+  const p = j({
     name: "detail",
     label: "Địa chỉ cụ thể",
     required: !1,
     error: null,
     placeholder: "",
-    type: "text"
+    type: "text",
+    value: ((H = e == null ? void 0 : e.address) == null ? void 0 : H.detail) ?? ""
   });
-  s.appendChild(N.container);
-  const u = document.createElement("div");
-  u.className = "flex items-center justify-end gap-2";
-  const C = document.createElement("button");
-  C.type = "submit", C.innerText = "Tiếp theo", C.className = [
-    "bg-primary",
-    "hover:bg-primary-dark",
-    "text-white",
-    "px-6",
-    "py-2",
-    "rounded",
-    "disabled:opacity-50",
-    "disabled:cursor-not-allowed",
-    "cursor-pointer"
-  ].join(" "), u.appendChild(C), p.appendChild(u);
-  function y() {
+  w.appendChild(p.container);
+  const b = document.createElement("div");
+  b.className = "wgt:flex wgt:mt-4 wgt:items-center wgt:justify-end wgt:gap-2 ";
+  const v = document.createElement("button");
+  if (v.type = "submit", v.innerText = "Tiếp theo", v.className = [
+    "wgt:bg-primary",
+    "wgt:hover:bg-primary-dark",
+    "wgt:text-white",
+    "wgt:px-6",
+    "wgt:py-2",
+    "wgt:rounded",
+    "wgt:disabled:opacity-50",
+    "wgt:disabled:cursor-not-allowed",
+    "wgt:cursor-pointer"
+  ].join(" "), b.appendChild(v), s.appendChild(b), (y = e == null ? void 0 : e.address) != null && y.country) {
+    const k = e == null ? void 0 : e.address.country;
+    T.selectEl.value = k;
+    const L = U[k] || [];
+    if (L.length > 0) {
+      f.setOptions(L), f.setDisabled(!1);
+      const P = (C = e == null ? void 0 : e.address) == null ? void 0 : C.province;
+      P && (f.selectEl.value = P);
+    }
+    const A = (N = e == null ? void 0 : e.address) == null ? void 0 : N.province;
+    if (A && R[A]) {
+      const P = R[A];
+      E.setOptions(P), E.setDisabled(!1);
+      const B = (V = e == null ? void 0 : e.address) == null ? void 0 : V.district;
+      B && (E.selectEl.value = B);
+    }
+    const q = (M = e == null ? void 0 : e.address) == null ? void 0 : M.district;
+    if (q && W[q]) {
+      const P = W[q];
+      x.setOptions(P), x.setDisabled(!1);
+      const B = (S = e == null ? void 0 : e.address) == null ? void 0 : S.ward;
+      B && (x.selectEl.value = B);
+    }
+  }
+  function h() {
     return {
-      taxCode: e.getValue().trim(),
-      representative: d.getValue().trim(),
-      email: t.getValue().trim(),
-      phone: r.getValue().trim(),
-      license: n ? n.file : null,
-      companyName: a.getValue().trim(),
+      taxCode: d.getValue().trim(),
+      representative: n.getValue().trim(),
+      email: r.getValue().trim(),
+      phone: l.getValue().trim(),
+      license: a.getValues(),
+      companyName: g.getValue().trim(),
       position: i.getValue().trim(),
       address: {
-        country: x.getValue(),
-        province: v.getValue(),
-        district: g.getValue(),
-        ward: E.getValue(),
-        detail: N.getValue().trim()
+        country: T.getValue(),
+        province: f.getValue(),
+        district: E.getValue(),
+        ward: x.getValue(),
+        detail: p.getValue().trim()
       }
     };
   }
   return {
-    container: p,
-    getValues: y
+    container: s,
+    getValues: h
   };
 }
-function _({ providerProps: f, formProps: p }) {
-  const o = document.createElement("div");
-  o.className = "flex flex-col gap-4 w-full max-w-[1072px] mx-auto";
-  const l = q(f);
-  o.appendChild(l.container);
-  const c = Z(p);
-  return o.appendChild(c.container), { container: o };
+function K({ providerProps: m, formProps: e }) {
+  const s = document.createElement("div");
+  s.className = "wgt:flex wgt:flex-col wgt:gap-4 wgt:w-full wgt:max-w-[1072px] wgt:mx-auto";
+  const o = $(m);
+  s.appendChild(o.container);
+  const c = G(e);
+  return s.appendChild(c.container), { container: s };
 }
-function O({ value: f = "", onInputChange: p } = {}) {
-  const o = document.createElement("div");
-  o.className = "flex flex-col";
-  const l = document.createElement("label");
-  l.className = "font-medium mb-1 text-gray-700", l.innerHTML = 'Chọn gói đăng ký <span class="text-red-500">*</span>', o.appendChild(l);
+function X({ value: m = "", onInputChange: e } = {}) {
+  const s = document.createElement("div");
+  s.className = "wgt:flex wgt:flex-col";
+  const o = document.createElement("label");
+  o.className = "wgt:font-medium wgt:mb-1 wgt:text-gray-700", o.innerHTML = 'Chọn gói đăng ký <span class="wgt:text-red-500">*</span>', s.appendChild(o);
   const c = document.createElement("div");
-  c.className = "flex rounded-lg border border-gray-300 overflow-hidden";
-  const e = document.createElement("input");
-  e.type = "text", e.inputMode = "numeric", e.value = f, e.placeholder = "Số đơn/tháng", e.className = [
-    "flex-1",
-    "px-4",
-    "py-2",
-    "text-gray-700",
-    "placeholder-gray-400",
-    "bg-white",
-    "focus:outline-none"
-  ].join(" "), typeof p == "function" && e.addEventListener("input", p);
+  c.className = "wgt:flex wgt:rounded-lg wgt:border wgt:border-gray-300 wgt:overflow-hidden";
+  const t = document.createElement("input");
+  t.type = "text", t.inputMode = "numeric", t.value = m, t.placeholder = "Số đơn/tháng", t.className = [
+    "wgt:flex-1",
+    "wgt:px-4",
+    "wgt:py-2",
+    "wgt:text-gray-700",
+    "wgt:placeholder-gray-400",
+    "wgt:bg-white",
+    "wgt:focus:outline-none"
+  ].join(" "), typeof e == "function" && t.addEventListener("input", e);
   const d = document.createElement("span");
-  return d.className = "px-4 py-2 bg-gray-100 text-gray-600 flex-shrink-0", d.innerText = "đơn/tháng", c.appendChild(e), c.appendChild(d), o.appendChild(c), {
-    container: o,
-    inputEl: e,
+  return d.className = "wgt:px-4 wgt:py-2 wgt:bg-gray-100 wgt:text-gray-600 wgt:flex-shrink-0", d.innerText = "đơn/tháng", c.appendChild(t), c.appendChild(d), s.appendChild(c), {
+    container: s,
+    inputEl: t,
     getValue() {
-      return e.value;
+      return t.value;
     },
-    setValue(t) {
-      e.value = t;
+    setValue(n) {
+      t.value = n;
     }
   };
 }
-function $({
-  packageOptions: f = [],
-  selectedPackageId: p = "",
-  onPackageSelect: o
+function J({
+  packageOptions: m = [],
+  selectedPackageId: e = "",
+  handlePackageSelect: s
 } = {}) {
-  const l = document.createElement("div");
-  l.className = "space-y-6";
+  const o = document.createElement("div");
+  o.className = "space-y-6";
   const c = document.createElement("h3");
-  c.className = "text-lg font-medium text-gray-800 mb-2", c.innerText = "Gói phù hợp nhất", l.appendChild(c);
-  const e = document.createElement("div");
-  e.className = "w-full grid grid-cols-3 gap-6", l.appendChild(e);
+  c.className = "wgt:text-lg wgt:font-medium wgt:text-gray-800 wgt:mb-2", c.innerText = "Gói phù hợp nhất", o.appendChild(c);
+  const t = document.createElement("div");
+  t.className = "wgt:w-full wgt:grid wgt:grid-cols-3 wgt:gap-6", o.appendChild(t);
   function d() {
-    e.innerHTML = "", f.forEach((t) => {
-      const r = t.id === p, n = document.createElement("label");
-      n.className = [
-        "relative",
-        "border",
-        "rounded-xl",
-        "p-4",
-        "flex-shrink-0",
-        "cursor-pointer",
-        "bg-white",
-        r ? "border-primary" : "border-grey-6 hover:border-gray-300"
+    t.innerHTML = "", m.forEach((n) => {
+      const r = n.id === e, l = document.createElement("label");
+      l.className = [
+        "wgt:relative",
+        "wgt:border",
+        "wgt:rounded-xl",
+        "wgt:p-4",
+        "wgt:flex-shrink-0",
+        "wgt:cursor-pointer",
+        "wgt:bg-white",
+        r ? "wgt:border-primary" : "wgt:border-grey-6 wgt:hover:border-gray-300"
       ].filter(Boolean).join(" ");
       const a = document.createElement("div");
-      a.className = "flex justify-between items-center";
-      const i = document.createElement("span");
-      i.className = [
-        "text-base",
-        "font-semibold",
-        r ? "text-green-700" : "text-gray-800"
-      ].join(" "), i.innerText = t.code, a.appendChild(i);
-      const { container: s } = W({
+      a.className = "wgt:flex wgt:justify-between wgt:items-center";
+      const g = document.createElement("span");
+      g.className = [
+        "wgt:text-base",
+        "wgt:font-semibold",
+        r ? "wgt:text-green-700" : "wgt:text-gray-800"
+      ].join(" "), g.innerText = n.code, a.appendChild(g);
+      const { container: i } = I({
         checked: r,
-        onChange: (u) => {
-          u && (p = t.id, typeof o == "function" && o(t.id), d());
+        onChange: (p) => {
+          p && (e = n.id, typeof s == "function" && s(n.id), d());
         }
       });
-      a.appendChild(s), n.appendChild(a);
-      const m = document.createElement("div");
-      m.className = "flex items-center text-gray-600 mt-2";
-      const x = document.createElement("svg");
-      x.setAttribute("xmlns", "http://www.w3.org/2000/svg"), x.setAttribute("class", "w-5 h-5 text-green-500 flex-shrink-0"), x.setAttribute("fill", "none"), x.setAttribute("viewBox", "0 0 24 24"), x.setAttribute("stroke", "currentColor"), x.setAttribute("stroke-width", "3"), x.innerHTML = `
+      a.appendChild(i), l.appendChild(a);
+      const w = document.createElement("div");
+      w.className = "wgt:flex wgt:items-center wgt:text-gray-600 wgt:mt-2";
+      const u = document.createElement("svg");
+      u.setAttribute("xmlns", "http://www.w3.org/2000/svg"), u.setAttribute("class", "w-5 h-5 text-green-500 flex-shrink-0"), u.setAttribute("fill", "none"), u.setAttribute("viewBox", "0 0 24 24"), u.setAttribute("stroke", "currentColor"), u.setAttribute("stroke-width", "3"), u.innerHTML = `
         <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
-      `, m.appendChild(x);
-      const v = document.createElement("span");
-      v.className = "ml-2 text-sm", v.innerText = `${t.unitsPerMonth.toLocaleString("vi-VN")} hóa đơn điện tử / tháng`, m.appendChild(v), n.appendChild(m);
-      const g = document.createElement("div");
-      g.className = "mt-4";
+      `, w.appendChild(u);
+      const T = document.createElement("span");
+      T.className = "wgt:ml-2 wgt:text-sm", T.innerText = `${n.unitsPerMonth.toLocaleString("vi-VN")} hóa đơn điện tử / tháng`, w.appendChild(T), l.appendChild(w);
+      const f = document.createElement("div");
+      f.className = "wgt:mt-4";
       const E = document.createElement("span");
       E.className = [
-        "block",
-        "text-2xl",
-        "font-bold",
-        r ? "text-green-700" : "text-gray-900"
-      ].join(" "), E.innerText = t.priceVND.toLocaleString("vi-VN"), g.appendChild(E);
-      const N = document.createElement("span");
-      N.className = "text-sm text-gray-600", N.innerText = "VND/Gói", g.appendChild(N), n.appendChild(g), e.appendChild(n);
+        "wgt:block",
+        "wgt:text-2xl",
+        "wgt:font-bold",
+        r ? "wgt:text-green-700" : "wgt:text-gray-900"
+      ].join(" "), E.innerText = n.priceVND.toLocaleString("vi-VN"), f.appendChild(E);
+      const x = document.createElement("span");
+      x.className = "wgt:text-sm wgt:text-gray-600", x.innerText = "VND/Gói", f.appendChild(x), l.appendChild(f), t.appendChild(l);
     });
   }
   return d(), {
-    container: l,
-    setSelectedPackageId(t) {
-      p = t, d();
+    container: o,
+    setSelectedPackageId(n) {
+      e = n, d();
     }
   };
 }
-function P({
-  title: f,
-  isDisabled: p = !1,
-  handleClick: o = null,
-  type: l = "button",
+function Q({
+  title: m,
+  isDisabled: e = !1,
+  handleClick: s = null,
+  type: o = "button",
   className: c = ""
 } = {}) {
-  const e = document.createElement("button");
-  return e.type = l, e.disabled = p, e.className = [
-    "bg-primary",
-    "hover:bg-primary-dark",
-    "text-white",
-    "px-6",
-    "py-2",
-    "rounded",
-    "disabled:opacity-50",
-    "disabled:cursor-not-allowed",
-    "cursor-pointer",
+  const t = document.createElement("button");
+  return t.type = o, t.disabled = e, t.className = [
+    "wgt:bg-primary",
+    "wgt:hover:bg-primary-dark",
+    "wgt:text-white",
+    "wgt:px-6",
+    "wgt:py-2",
+    "wgt:rounded",
+    "wgt:disabled:opacity-50",
+    "wgt:disabled:cursor-not-allowed",
+    "wgt:cursor-pointer",
     c
-  ].filter(Boolean).join(" "), e.innerText = f, typeof o == "function" && e.addEventListener("click", (d) => {
-    e.disabled || o(d);
-  }), e;
+  ].filter(Boolean).join(" "), t.innerText = m, typeof s == "function" && t.addEventListener("click", (d) => {
+    t.disabled || s(d);
+  }), t;
 }
-function z({ onNext: f, onPrev: p, setSelectedOption: o }) {
-  const l = [
+function Y({
+  onNext: m,
+  onPrev: e,
+  setSelectedOption: s,
+  selectedOption: o
+}) {
+  const c = [
     { id: "pkg-300-a", code: "DT-300", unitsPerMonth: 300, priceVND: 45e4 },
     { id: "pkg-500", code: "DT-500", unitsPerMonth: 500, priceVND: 75e4 },
-    { id: "pkg-1000-b", code: "DT-1000", unitsPerMonth: 1e3, priceVND: 105e4 }
-  ], c = document.createElement("div");
-  c.className = "flex flex-col gap-6";
-  const e = document.createElement("div");
-  e.className = "w-full max-w-[1070px] mx-auto flex flex-col gap-6", c.appendChild(e);
+    {
+      id: "pkg-1000-b",
+      code: "DT-1000",
+      unitsPerMonth: 1e3,
+      priceVND: 105e4
+    }
+  ], t = document.createElement("div");
+  t.className = "wgt:flex wgt:flex-col wgt:gap-6 wgt:h-full wgt:justify-between";
   const d = document.createElement("div");
-  d.className = "w-full px-6 pb-6 pt-4 rounded-3xl bg-weak-50 flex flex-col gap-6", e.appendChild(d);
-  let t = "", r = [...l], n = l[1].id;
-  const a = O({
-    value: t,
-    onInputChange: (b) => {
-      t = b.target.value.replace(/\D/g, ""), v();
+  d.className = "wgt:w-full wgt:max-w-[1070px] wgt:mx-auto wgt:flex wgt:flex-col wgt:gap-6", t.appendChild(d);
+  const n = document.createElement("div");
+  n.className = "wgt:w-full wgt:px-6 wgt:pb-6 wgt:pt-4 wgt:rounded-3xl wgt:bg-weak-50 wgt:flex wgt:flex-col wgt:gap-6", d.appendChild(n);
+  let r = "", l = [...c], a = (o == null ? void 0 : o.id) ?? c[1].id;
+  const g = X({
+    value: r,
+    onInputChange: (C) => {
+      r = C.target.value.replace(/\D/g, ""), f();
     }
   });
-  d.appendChild(a.container);
+  n.appendChild(g.container);
   const i = document.createElement("div");
-  d.appendChild(i);
-  let s = null;
-  function m() {
-    if (i.innerHTML = "", r.length > 0)
-      s = $({
-        packageOptions: r,
-        selectedPackageId: n
-      }), i.appendChild(s.container);
+  n.appendChild(i);
+  let w = null;
+  function u() {
+    if (i.innerHTML = "", l.length > 0)
+      w = J({
+        packageOptions: l,
+        selectedPackageId: a,
+        handlePackageSelect: (C) => {
+          a = C, u();
+        }
+      }), i.appendChild(w.container);
     else {
-      const b = document.createElement("span");
-      b.className = "text-gray-500", b.innerText = "No package found.", i.appendChild(b), s = null;
+      const C = document.createElement("span");
+      C.className = "wgt:text-gray-500", C.innerText = "No package found.", i.appendChild(C), w = null;
     }
   }
-  let x = null;
-  function v() {
-    x && clearTimeout(x), t !== "" ? x = setTimeout(() => {
-      const b = l.find(
-        (k) => k.code.endsWith(t)
+  let T = null;
+  function f() {
+    T && clearTimeout(T), r !== "" ? T = setTimeout(() => {
+      const C = c.find(
+        (N) => N.code.endsWith(r)
       );
-      b ? (n = b.id, r = [b]) : r = [], m();
-    }, 500) : (r = [...l], m());
+      C ? (a = C.id, l = [C]) : l = [], u();
+    }, 500) : (l = [...c], u());
   }
-  m();
-  const g = document.createElement("div");
-  g.className = "flex items-center gap-4";
-  const E = document.createElement("span");
-  E.className = "text-sm font-semibold leading-[18px] text-text-black", E.innerText = "Hình thức thanh toán:", g.appendChild(E);
-  const N = document.createElement("div");
-  N.className = "p-2 w-fit rounded-[10px] border border-soft-200 flex items-center gap-2";
-  const u = document.createElement("div");
-  u.innerHTML = `
+  u();
+  const E = document.createElement("div");
+  E.className = "wgt:flex wgt:items-center wgt:gap-4";
+  const x = document.createElement("span");
+  x.className = "wgt:text-sm wgt:font-semibold wgt:leading-[18px] wgt:text-text-black", x.innerText = "Hình thức thanh toán:", E.appendChild(x);
+  const p = document.createElement("div");
+  p.className = "wgt:p-2 wgt:w-fit wgt:rounded-[10px] wgt:border wgt:border-soft-200 wgt:flex wgt:items-center wgt:gap-2";
+  const b = document.createElement("div");
+  b.innerHTML = `
     <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
       xmlns="http://www.w3.org/2000/svg">
       <rect width="24" height="24" rx="8" fill="#379DF1" />
@@ -871,146 +939,146 @@ function z({ onNext: f, onPrev: p, setSelectedOption: o }) {
         </clipPath>
       </defs>
     </svg>
-  `, N.appendChild(u);
-  const C = document.createElement("span");
-  C.className = "text-base font-semibold leading-5 text-strong-950", C.innerText = "Thanh toán qua mã QR", N.appendChild(C), g.appendChild(N), e.appendChild(g);
-  const y = document.createElement("div");
-  y.className = "flex items-center justify-between gap-2 px-6";
-  const h = P({
+  `, p.appendChild(b);
+  const v = document.createElement("span");
+  v.className = "wgt:text-base wgt:font-semibold wgt:leading-5 wgt:text-strong-950", v.innerText = "Thanh toán qua mã QR", p.appendChild(v), E.appendChild(p), d.appendChild(E);
+  const h = document.createElement("div");
+  h.className = "wgt:flex wgt:items-center wgt:justify-between wgt:gap-2 wgt:px-6";
+  const H = Q({
     type: "button",
     title: "Quay lại",
-    className: "bg-transparent !text-primary hover:bg-transparent underline",
-    handleClick: p
+    className: "wgt:bg-transparent wgt:!text-primary wgt:hover:bg-transparent wgt:underline",
+    handleClick: e
   });
-  y.appendChild(h);
-  const w = P({
+  h.appendChild(H);
+  const y = Q({
     type: "button",
     title: "Tiếp theo",
     className: "",
     handleClick: () => {
-      const b = l.find(
-        (k) => k.id === n
+      const C = c.find(
+        (N) => N.id === a
       );
-      b && (o(b), f());
+      C && (s(C), m());
     }
   });
-  return y.appendChild(w), c.appendChild(y), { container: c };
+  return h.appendChild(y), t.appendChild(h), { container: t };
 }
-function G({
-  qrSrc: f = "",
-  logos: p = [],
-  accountName: o = "",
-  accountNumber: l = "",
+function D({
+  qrSrc: m = "",
+  logos: e = [],
+  accountName: s = "",
+  accountNumber: o = "",
   bankName: c = "",
-  instructions: e = [],
+  instructions: t = [],
   illustrationSrc: d = ""
 } = {}) {
-  const t = document.createElement("div");
-  t.className = "flex flex-col md:flex-row gap-6 p-6 bg-gray-50 rounded-xl";
-  const r = document.createElement("div"), n = document.createElement("h3");
-  n.className = "text-lg font-semibold text-gray-800 mb-4 text-center", n.innerText = "Quét mã QR để thanh toán", r.appendChild(n);
+  const n = document.createElement("div");
+  n.className = "wgt:flex wgt:flex-col wgt:md:flex-row wgt:gap-6 wgt:p-6 wgt:bg-gray-50 wgt:rounded-xl";
+  const r = document.createElement("div"), l = document.createElement("h3");
+  l.className = "wgt:text-lg wgt:font-semibold wgt:text-gray-800 wgt:mb-4 wgt:text-center", l.innerText = "Quét mã QR để thanh toán", r.appendChild(l);
   const a = document.createElement("div");
-  a.className = "bg-white rounded-md p-6 flex flex-col gap-4 border border-[#E4E7EC]";
-  const i = document.createElement("div");
-  i.className = "flex justify-center";
-  const s = document.createElement("img");
-  s.src = f, s.alt = "QR code", s.className = "w-full max-w-[200px] aspect-square object-contain", i.appendChild(s), a.appendChild(i);
-  const m = document.createElement("div");
-  m.className = "flex justify-center items-center gap-4 flex-wrap", p.forEach((b) => {
-    const k = document.createElement("img");
-    k.src = b, k.alt = "Logo", k.className = "w-8 object-contain", m.appendChild(k);
-  }), a.appendChild(m);
-  const x = document.createElement("div");
-  x.className = "text-center flex flex-col gap-1";
-  const v = document.createElement("h3");
-  v.className = "text-lg font-bold text-text-black", v.innerText = o, x.appendChild(v);
-  const g = document.createElement("p");
-  g.className = "text-sm text-grey-8", g.innerHTML = `Số tài khoản: <span class="font-medium">${l}</span>`, x.appendChild(g);
+  a.className = "wgt:bg-white wgt:rounded-md wgt:p-6 wgt:flex wgt:flex-col wgt:gap-4 wgt:border wgt:border-[#E4E7EC]";
+  const g = document.createElement("div");
+  g.className = "wgt:flex wgt:justify-center";
+  const i = document.createElement("img");
+  i.src = m, i.alt = "QR code", i.className = "wgt:w-full wgt:max-w-[200px] wgt:aspect-square wgt:object-contain", g.appendChild(i), a.appendChild(g);
+  const w = document.createElement("div");
+  w.className = "wgt:flex wgt:justify-center wgt:items-center wgt:gap-4 wgt:flex-wrap", e.forEach((y) => {
+    const C = document.createElement("img");
+    C.src = y, C.alt = "Logo", C.className = "wgt:w-8 wgt:object-contain", w.appendChild(C);
+  }), a.appendChild(w);
+  const u = document.createElement("div");
+  u.className = "wgt:text-center wgt:flex wgt:flex-col wgt:gap-1";
+  const T = document.createElement("h3");
+  T.className = "wgt:text-lg wgt:font-bold wgt:text-text-black", T.innerText = s, u.appendChild(T);
+  const f = document.createElement("p");
+  f.className = "wgt:text-sm wgt:text-grey-8", f.innerHTML = `Số tài khoản: <span class="wgt:font-medium">${o}</span>`, u.appendChild(f);
   const E = document.createElement("p");
-  E.className = "text-sm text-grey-8", E.innerHTML = `Ngân hàng thụ hưởng: <span class="font-medium">${c}</span>`, x.appendChild(E), a.appendChild(x), r.appendChild(a), t.appendChild(r);
-  const N = document.createElement("div");
-  N.className = "flex flex-col justify-between md:w-1/2";
-  const u = document.createElement("div"), C = document.createElement("h3");
-  C.className = "text-lg font-semibold text-gray-800 mb-4", C.innerText = "Hướng dẫn thanh toán QR", u.appendChild(C);
-  const y = document.createElement("ol");
-  y.className = "space-y-4", e.forEach((b, k) => {
-    const T = document.createElement("li");
-    T.className = "flex items-start";
-    const L = document.createElement("div");
-    L.className = "flex-shrink-0 mt-0.5";
-    const H = document.createElement("div");
-    H.className = "w-6 h-6 rounded-full bg-primary flex items-center justify-center";
-    const M = document.createElement("span");
-    M.className = "text-white text-sm font-semibold", M.innerText = String(k + 1), H.appendChild(M), L.appendChild(H);
-    const V = document.createElement("p");
-    V.className = "ml-3 text-gray-700", V.innerText = b, T.appendChild(L), T.appendChild(V), y.appendChild(T);
-  }), u.appendChild(y), N.appendChild(u);
+  E.className = "wgt:text-sm wgt:text-grey-8", E.innerHTML = `Ngân hàng thụ hưởng: <span class="wgt:font-medium">${c}</span>`, u.appendChild(E), a.appendChild(u), r.appendChild(a), n.appendChild(r);
+  const x = document.createElement("div");
+  x.className = "wgt:flex wgt:flex-col wgt:justify-between wgt:md:w-1/2";
+  const p = document.createElement("div"), b = document.createElement("h3");
+  b.className = "wgt:text-lg wgt:font-semibold wgt:text-gray-800 mb-4", b.innerText = "Hướng dẫn thanh toán QR", p.appendChild(b);
+  const v = document.createElement("ol");
+  v.className = "wgt:space-y-4", t.forEach((y, C) => {
+    const N = document.createElement("li");
+    N.className = "wgt:flex wgt:items-start";
+    const V = document.createElement("div");
+    V.className = "wgt:flex-shrink-0 wgt:mt-0.5";
+    const M = document.createElement("div");
+    M.className = "wgt:w-6 wgt:h-6 wgt:rounded-full wgt:bg-primary wgt:flex wgt:items-center wgt:justify-center";
+    const S = document.createElement("span");
+    S.className = "wgt:text-white wgt:text-sm wgt:font-semibold", S.innerText = String(C + 1), M.appendChild(S), V.appendChild(M);
+    const k = document.createElement("p");
+    k.className = "wgt:ml-3 wgt:text-gray-700", k.innerText = y, N.appendChild(V), N.appendChild(k), v.appendChild(N);
+  }), p.appendChild(v), x.appendChild(p);
   const h = document.createElement("div");
-  h.className = "h-[300px] flex justify-center";
-  const w = document.createElement("img");
-  return w.src = d, w.alt = "QR payment illustration", w.className = "h-full object-contain", h.appendChild(w), N.appendChild(h), t.appendChild(N), {
-    container: t,
-    update(b = {}) {
-      b.qrSrc != null && (s.src = b.qrSrc), b.logos && (m.innerHTML = "", b.logos.forEach((k) => {
-        const T = document.createElement("img");
-        T.src = k, T.alt = "Logo", T.className = "w-8 object-contain", m.appendChild(T);
-      })), b.accountName != null && (v.innerText = b.accountName), b.accountNumber != null && (g.innerHTML = `Số tài khoản: <span class="font-medium">${b.accountNumber}</span>`), b.bankName != null && (E.innerHTML = `Ngân hàng thụ hưởng: <span class="font-medium">${b.bankName}</span>`), b.instructions && (y.innerHTML = "", b.instructions.forEach((k, T) => {
-        const L = document.createElement("li");
-        L.className = "flex items-start";
-        const H = document.createElement("div");
-        H.className = "flex-shrink-0 mt-0.5";
+  h.className = "wgt:h-[300px] wgt:flex wgt:justify-center";
+  const H = document.createElement("img");
+  return H.src = d, H.alt = "QR payment illustration", H.className = "wgt:h-full wgt:object-contain", h.appendChild(H), x.appendChild(h), n.appendChild(x), {
+    container: n,
+    update(y = {}) {
+      y.qrSrc != null && (i.src = y.qrSrc), y.logos && (w.innerHTML = "", y.logos.forEach((C) => {
+        const N = document.createElement("img");
+        N.src = C, N.alt = "Logo", N.className = "wgt:w-8 wgt:object-contain", w.appendChild(N);
+      })), y.accountName != null && (T.innerText = y.accountName), y.accountNumber != null && (f.innerHTML = `Số tài khoản: <span class="wgt:font-medium">${y.accountNumber}</span>`), y.bankName != null && (E.innerHTML = `Ngân hàng thụ hưởng: <span class="wgt:font-medium">${y.bankName}</span>`), y.instructions && (v.innerHTML = "", y.instructions.forEach((C, N) => {
+        const V = document.createElement("li");
+        V.className = "wgt:flex wgt:items-start";
         const M = document.createElement("div");
-        M.className = "w-6 h-6 rounded-full bg-primary flex items-center justify-center";
-        const V = document.createElement("span");
-        V.className = "text-white text-sm font-semibold", V.innerText = String(T + 1), M.appendChild(V), H.appendChild(M);
-        const B = document.createElement("p");
-        B.className = "ml-3 text-gray-700", B.innerText = k, L.appendChild(H), L.appendChild(B), y.appendChild(L);
-      })), b.illustrationSrc != null && (w.src = b.illustrationSrc);
+        M.className = "wgt:flex-shrink-0 wgt:mt-0.5";
+        const S = document.createElement("div");
+        S.className = "wgt:w-6 wgt:h-6 wgt:rounded-full wgt:bg-primary wgt:flex wgt:items-center wgt:justify-center";
+        const k = document.createElement("span");
+        k.className = "wgt:text-white wgt:text-sm wgt:font-semibold", k.innerText = String(N + 1), S.appendChild(k), M.appendChild(S);
+        const L = document.createElement("p");
+        L.className = "wgt:ml-3 wgt:text-gray-700", L.innerText = C, V.appendChild(M), V.appendChild(L), v.appendChild(V);
+      })), y.illustrationSrc != null && (H.src = y.illustrationSrc);
     }
   };
 }
-function K({
-  qrSrc: f,
-  logos: p = [],
-  accountName: o = "",
-  accountNumber: l = "",
+function ee({
+  qrSrc: m,
+  logos: e = [],
+  accountName: s = "",
+  accountNumber: o = "",
   bankName: c = "",
-  instructions: e = [],
+  instructions: t = [],
   illustrationSrc: d
 } = {}) {
-  const { container: t } = G({
-    qrSrc: f,
-    logos: p,
-    accountName: o,
-    accountNumber: l,
+  const { container: n } = D({
+    qrSrc: m,
+    logos: e,
+    accountName: s,
+    accountNumber: o,
     bankName: c,
-    instructions: e,
+    instructions: t,
     illustrationSrc: d
   });
-  return { container: t };
+  return { container: n };
 }
-function X({
-  selectedProvider: f = null,
-  selectedOption: p = null,
-  totalAmountText: o = "",
-  onCancel: l
+function te({
+  selectedProvider: m = null,
+  selectedOption: e = null,
+  totalAmountText: s = "",
+  onCancel: o
 } = {}) {
   const c = document.createElement("div");
   c.className = [
-    "w-[440px]",
-    "flex",
-    "flex-col",
-    "rounded-2xl",
-    "border",
-    "border-soft-200",
-    "overflow-hidden"
+    "wgt:w-[440px]",
+    "wgt:flex",
+    "wgt:flex-col",
+    "wgt:rounded-2xl",
+    "wgt:border",
+    "wgt:border-soft-200",
+    "wgt:overflow-hidden"
   ].join(" ");
-  const e = document.createElement("div");
-  e.className = "p-4 w-full flex items-center justify-center gap-2 bg-primary/10";
+  const t = document.createElement("div");
+  t.className = "wgt:p-4 wgt:w-full wgt:flex wgt:items-center wgt:justify-center wgt:gap-2 wgt:bg-primary/10";
   const d = document.createElement("p");
-  d.className = "text-base font-medium leading-6 text-primary", d.innerHTML = 'Hoàn tất thanh toán của bạn trong <span class="font-bold">01:00:00</span>', e.appendChild(d);
-  const t = document.createElement("svg");
-  t.setAttribute("width", "24"), t.setAttribute("height", "24"), t.setAttribute("viewBox", "0 0 24 24"), t.setAttribute("fill", "none"), t.setAttribute("xmlns", "http://www.w3.org/2000/svg"), t.innerHTML = `
+  d.className = "wgt:text-base wgt:font-medium wgt:leading-6 wgt:text-primary", d.innerHTML = 'Hoàn tất thanh toán của bạn trong <span class="font-bold">01:00:00</span>', t.appendChild(d);
+  const n = document.createElement("svg");
+  n.setAttribute("width", "24"), n.setAttribute("height", "24"), n.setAttribute("viewBox", "0 0 24 24"), n.setAttribute("fill", "none"), n.setAttribute("xmlns", "http://www.w3.org/2000/svg"), n.innerHTML = `
     <path
       d="M12 1.40039C17.8537 1.40039 22.5996 6.14633 22.5996 12C22.5996 17.8537 17.8537 22.5996 12 22.5996C6.14633 22.5996 1.40039 17.8537 1.40039 12C1.40039 6.14633 6.14633 1.40039 12 1.40039ZM12 3.38086C7.24117 3.38086 3.38086 7.24117 3.38086 12C3.38086 16.7588 7.24117 20.6191 12 20.6191C16.7588 20.6191 20.6191 16.7588 20.6191 12C20.6191 7.24117 16.7588 3.38086 12 3.38086Z"
       fill="#1D963E"
@@ -1021,95 +1089,95 @@ function X({
       d="M16.0945 14.9672L12.7523 12.5508V6.75C12.7523 6.64687 12.668 6.5625 12.5648 6.5625H11.4375C11.3344 6.5625 11.25 6.64687 11.25 6.75V13.2047C11.25 13.2656 11.2781 13.3219 11.3273 13.357L15.2039 16.1836C15.2883 16.2445 15.4055 16.2258 15.4664 16.1437L16.1367 15.2297C16.1976 15.1429 16.1789 15.0258 16.0945 14.9672Z"
       fill="#1D963E"
     />
-  `, e.appendChild(t), c.appendChild(e);
+  `, t.appendChild(n), c.appendChild(t);
   const r = document.createElement("div");
   r.className = [
-    "p-6",
-    "w-full",
-    "flex",
-    "flex-col",
-    "gap-10",
-    "shadow-[0px_2px_6px_0px_rgba(31,34,41,0.04)]"
+    "wgt:p-6",
+    "wgt:w-full",
+    "wgt:flex",
+    "wgt:flex-col",
+    "wgt:gap-10",
+    "wgt:shadow-[0px_2px_6px_0px_rgba(31,34,41,0.04)]"
   ].join(" ");
-  const n = document.createElement("div");
-  n.className = "w-full flex flex-col gap-4";
+  const l = document.createElement("div");
+  l.className = "wgt:w-full wgt:flex wgt:flex-col wgt:gap-4";
   const a = document.createElement("h2");
-  a.className = "text-xl font-semibold leading-6 text-black", a.innerText = "Thông tin đơn hàng", n.appendChild(a);
-  const i = document.createElement("div");
-  i.className = "w-full flex items-center justify-between";
-  const s = document.createElement("h4");
-  s.className = "text-sm font-normal leading-5 text-[#475467]", s.innerText = "Nhà cung cấp";
-  const m = document.createElement("img");
-  f && f.logo && (m.src = f.logo, m.alt = f.name, m.className = "h-6 object-contain"), i.appendChild(s), i.appendChild(m), n.appendChild(i);
-  const x = document.createElement("div");
-  x.className = "w-full flex items-center justify-between";
-  const v = document.createElement("h4");
-  v.className = "text-sm font-normal leading-5 text-[#475467]", v.innerText = "Gói đăng ký";
-  const g = document.createElement("span");
-  g.className = "text-base font-semibold leading-6 text-text-blackF", g.innerText = p ? String(p.unitsPerMonth) : "", x.appendChild(v), x.appendChild(g), n.appendChild(x);
+  a.className = "wgt:text-xl wgt:font-semibold wgt:leading-6 wgt:text-black", a.innerText = "Thông tin đơn hàng", l.appendChild(a);
+  const g = document.createElement("div");
+  g.className = "wgt:w-full wgt:flex wgt:items-center wgt:justify-between";
+  const i = document.createElement("h4");
+  i.className = "wgt:text-sm wgt:font-normal wgt:leading-5 wgt:text-[#475467]", i.innerText = "Nhà cung cấp";
+  const w = document.createElement("img");
+  m && m.logoUrl && (w.src = m.logoUrl, w.alt = m.name, w.className = "wgt:h-6 wgt:object-contain"), g.appendChild(i), g.appendChild(w), l.appendChild(g);
+  const u = document.createElement("div");
+  u.className = "wgt:w-full wgt:flex wgt:items-center wgt:justify-between";
+  const T = document.createElement("h4");
+  T.className = "wgt:text-sm wgt:font-normal wgt:leading-5 wgt:text-[#475467]", T.innerText = "Gói đăng ký";
+  const f = document.createElement("span");
+  f.className = "wgt:text-base wgt:font-semibold wgt:leading-6 wgt:text-text-black", f.innerText = e ? String(e.unitsPerMonth) : "", u.appendChild(T), u.appendChild(f), l.appendChild(u);
   const E = document.createElement("hr");
-  n.appendChild(E);
-  const N = document.createElement("div");
-  N.className = "w-full flex items-center justify-between";
-  const u = document.createElement("h4");
-  u.className = "text-sm font-normal leading-5 text-[#475467]", u.innerText = "Số tiền thanh toán";
-  const C = document.createElement("span");
-  C.className = "text-2xl font-bold leading-6 text-[#ED1C24]", C.innerText = o, N.appendChild(u), N.appendChild(C), n.appendChild(N), r.appendChild(n);
-  const y = P({
+  l.appendChild(E);
+  const x = document.createElement("div");
+  x.className = "wgt:w-full wgt:flex wgt:items-center wgt:justify-between";
+  const p = document.createElement("h4");
+  p.className = "wgt:text-sm wgt:font-normal wgt:leading-5 wgt:text-[#475467]", p.innerText = "Số tiền thanh toán";
+  const b = document.createElement("span");
+  b.className = "wgt:text-2xl wgt:font-bold wgt:leading-6 wgt:text-[#ED1C24]", b.innerText = s, x.appendChild(p), x.appendChild(b), l.appendChild(x), r.appendChild(l);
+  const v = Q({
     title: "Hủy giao dịch",
-    className: "bg-transparent border border-primary !text-primary hover:bg-transparent",
+    className: "wgt:bg-transparent wgt:border wgt:border-primary wgt:!text-primary wgt:hover:bg-transparent",
     handleClick: () => {
-      typeof l == "function" && l();
+      typeof o == "function" && o();
     }
   });
-  return r.appendChild(y), c.appendChild(r), {
+  return r.appendChild(v), c.appendChild(r), {
     container: c,
     setSelectedProvider(h) {
-      f = h, m.src = (h == null ? void 0 : h.logo) || "", m.alt = (h == null ? void 0 : h.name) || "";
+      m = h, w.src = (h == null ? void 0 : h.logo) || "", w.alt = (h == null ? void 0 : h.name) || "";
     },
     setSelectedOption(h) {
-      p = h, g.innerText = h ? String(h.unitsPerMonth) : "";
+      e = h, f.innerText = h ? String(h.unitsPerMonth) : "";
     },
     setTotalAmountText(h) {
-      o = h, C.innerText = h;
+      s = h, b.innerText = h;
     }
   };
 }
-function J({ onPrev: f, checkoutProps: p, orderInfoProps: o }) {
-  const l = document.createElement("div");
-  l.className = "flex flex-col gap-6";
+function ne({ onPrev: m, checkoutProps: e, orderInfoProps: s }) {
+  const o = document.createElement("div");
+  o.className = "wgt:flex wgt:flex-col wgt:gap-6";
   const c = document.createElement("div");
-  c.className = "w-full flex items-start gap-6";
-  const e = document.createElement("div");
-  e.className = "flex-1";
-  const { container: d } = K(p);
-  e.appendChild(d), c.appendChild(e);
-  const { container: t } = X(o);
-  c.appendChild(t), l.appendChild(c);
+  c.className = "wgt:w-full wgt:flex wgt:items-start wgt:gap-6";
+  const t = document.createElement("div");
+  t.className = "wgt:flex-1";
+  const { container: d } = ee(e);
+  t.appendChild(d), c.appendChild(t);
+  const { container: n } = te(s);
+  c.appendChild(n), o.appendChild(c);
   const r = document.createElement("div");
-  r.className = "flex items-center justify-between gap-2 px-6";
-  const n = P({
+  r.className = "wgt:flex wgt:items-center wgt:justify-between wgt:gap-2 wgt:px-6";
+  const l = Q({
     type: "button",
     title: "Quay lại",
-    className: "bg-transparent !text-primary hover:bg-transparent underline",
-    handleClick: f
+    className: "wgt:bg-transparent wgt:!text-primary wgt:hover:bg-transparent wgt:underline",
+    handleClick: m
   });
-  return r.appendChild(n), l.appendChild(r), { container: l };
+  return r.appendChild(l), o.appendChild(r), { container: o };
 }
-function Y(f) {
-  const p = [
+function le(m) {
+  const e = [
     "Thông Tin",
     "Gói Hóa Đơn",
     "Xác Nhận Và Thanh Toán"
-  ], { container: o, setStep: l, setContent: c } = A({
-    steps: p.map((n) => n),
+  ], { container: s, setStep: o, setContent: c } = _({
+    steps: e.map((a) => a),
     currentStep: 1
   });
-  f.appendChild(o);
-  let e = 1, d = null, t = null;
-  function r(n) {
-    if (n === 1) {
-      const { container: a } = _({
+  m.appendChild(s);
+  let t = 1, d = null, n = null, r = null;
+  function l(a) {
+    if (a === 1) {
+      const { container: g } = K({
         providerProps: {
           providers: [
             { name: "Misa", route: "misa", logoUrl: "./assets/misa.svg" },
@@ -1123,28 +1191,30 @@ function Y(f) {
         },
         formProps: {
           onSubmit: (i) => {
-            e = 2, l(e), r(e);
-          }
+            n = i, t = 2, o(t), l(t);
+          },
+          registrationData: n
         }
       });
-      c(a);
-    } else if (n === 2) {
-      const { container: a } = z({
+      c(g);
+    } else if (a === 2) {
+      const { container: g } = Y({
         onNext: () => {
-          e = 3, l(e), r(e);
+          t = 3, o(t), l(t);
         },
         onPrev: () => {
-          e = 1, l(e), r(e);
+          t = 1, o(t), l(t);
         },
         setSelectedOption: (i) => {
-          t = i;
-        }
+          r = i;
+        },
+        selectedOption: r
       });
-      c(a);
-    } else if (n === 3) {
-      const { container: a } = J({
+      c(g);
+    } else if (a === 3) {
+      const { container: g } = ne({
         onPrev: () => {
-          e = 2, l(e), r(e);
+          t = 2, o(t), l(t);
         },
         checkoutProps: {
           qrSrc: "./assets/qrcode.png",
@@ -1167,18 +1237,18 @@ function Y(f) {
         },
         orderInfoProps: {
           selectedProvider: d || { name: "", logo: "" },
-          selectedOption: t || { unitsPerMonth: 0 },
-          totalAmountText: t ? t.priceVND.toLocaleString("vi-VN") + " VND" : "0 VND",
+          selectedOption: r || { unitsPerMonth: 0 },
+          totalAmountText: r ? r.priceVND.toLocaleString("vi-VN") + " VND" : "0 VND",
           onCancel: () => {
-            e = 2, l(e), r(e);
+            t = 2, o(t), l(t);
           }
         }
       });
-      c(a);
+      c(g);
     }
   }
-  r(e);
+  l(t);
 }
 export {
-  Y as InvoiceRegisterWidget
+  le as InvoiceRegisterWidget
 };