@tma.js/sdk 1.4.2 → 1.4.4

package/dist/index.mjs

@@ -1,17 +1,17 @@
 var Rt = Object.defineProperty;
 var It = (r, t, e) => t in r ? Rt(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
 var o = (r, t, e) => (It(r, typeof t != "symbol" ? t + "" : t, e), e);
-function H(r) {
+function R(r) {
   return typeof r == "object" && r !== null && !Array.isArray(r);
 }
-function ut() {
+function ht() {
   return performance.getEntriesByType("navigation")[0] || null;
 }
 function Lt() {
-  const r = ut();
+  const r = ht();
   return r ? r.type === "reload" : null;
 }
-function I() {
+function L() {
   return new TypeError("Value has unexpected type");
 }
 class F extends Error {
@@ -50,7 +50,7 @@ function $t(r) {
         return t;
     } catch {
     }
-  throw I();
+  throw L();
 }
 class Tt extends z {
   constructor(e, s, n) {
@@ -66,15 +66,15 @@ class Tt extends z {
     return this.itemParser = typeof e == "function" ? e : e.parse.bind(e), this;
   }
 }
-function L(r, t) {
+function $(r, t) {
   return () => new z(r, !1, t);
 }
-class G extends Error {
+class j extends Error {
   constructor(t, { cause: e, type: s } = {}) {
-    super(`Unable to parse field "${t}"${s ? ` as ${s}` : ""}`, { cause: e }), Object.setPrototypeOf(this, G.prototype);
+    super(`Unable to parse field "${t}"${s ? ` as ${s}` : ""}`, { cause: e }), Object.setPrototypeOf(this, j.prototype);
   }
 }
-function ht(r, t) {
+function pt(r, t) {
   const e = {};
   for (const s in r) {
     const n = r[s];
@@ -92,10 +92,10 @@ function ht(r, t) {
     try {
       c = a(p);
     } catch (h) {
-      throw h instanceof F ? new G(i, {
+      throw h instanceof F ? new j(i, {
         type: h.type,
         cause: h
-      }) : new G(i, { cause: h });
+      }) : new j(i, { cause: h });
     }
     c !== void 0 && (e[s] = c);
   }
@@ -104,7 +104,7 @@ function ht(r, t) {
 function Bt(r) {
   return new Tt((t) => t, !1, r);
 }
-const k = L((r) => {
+const k = $((r) => {
   if (typeof r == "boolean")
     return r;
   const t = String(r);
@@ -112,8 +112,8 @@ const k = L((r) => {
     return !0;
   if (t === "0" || t === "false")
     return !1;
-  throw I();
-}, "boolean"), q = L((r) => {
+  throw L();
+}, "boolean"), q = $((r) => {
   if (typeof r == "number")
     return r;
   if (typeof r == "string") {
@@ -121,21 +121,21 @@ const k = L((r) => {
     if (!Number.isNaN(t))
       return t;
   }
-  throw I();
-}, "number"), pt = L((r) => r instanceof Date ? r : new Date(q().parse(r) * 1e3), "Date");
+  throw L();
+}, "number"), lt = $((r) => r instanceof Date ? r : new Date(q().parse(r) * 1e3), "Date");
 function Y(r) {
   let t = r;
   if (typeof t == "string" && (t = JSON.parse(t)), typeof t != "object" || t === null || Array.isArray(t))
-    throw I();
+    throw L();
   return t;
 }
 function f(r, t) {
   return new z((e) => {
     const s = Y(e);
-    return ht(r, (n) => s[n]);
+    return pt(r, (n) => s[n]);
   }, !1, t);
 }
-function lt(r) {
+function X(r) {
   return /^#[\da-f]{6}$/i.test(r);
 }
 function Dt(r) {
@@ -143,7 +143,7 @@ function Dt(r) {
 }
 function dt(r) {
   const t = r.replace(/\s/g, "").toLowerCase();
-  if (lt(t))
+  if (X(t))
     return t;
   if (Dt(t)) {
     let s = "#";
@@ -168,17 +168,17 @@ function ft(r) {
     }, 0)
   ) < 120;
 }
-const u = L((r) => {
+const u = $((r) => {
   if (typeof r == "string" || typeof r == "number")
     return r.toString();
-  throw I();
-}, "string"), gt = L((r) => dt(u().parse(r)), "rgb");
-function X(r, t) {
+  throw L();
+}, "string"), gt = $((r) => dt(u().parse(r)), "rgb");
+function tt(r, t) {
   return new z((e) => {
     if (typeof e != "string" && !(e instanceof URLSearchParams))
-      throw I();
+      throw L();
     const s = typeof e == "string" ? new URLSearchParams(e) : e;
-    return ht(r, (n) => {
+    return pt(r, (n) => {
       const i = s.get(n);
       return i === null ? void 0 : i;
     });
@@ -196,7 +196,7 @@ function Wt() {
     username: u().optional()
   }, "Chat");
 }
-class Ot {
+class Nt {
   constructor(t) {
     this.initData = t;
   }
@@ -269,7 +269,7 @@ class Ot {
     return this.initData.user;
   }
 }
-function rt() {
+function st() {
   return f({
     addedToAttachmentMenu: {
       type: k().optional(),
@@ -308,9 +308,9 @@ function rt() {
   }, "User");
 }
 function wt() {
-  return X({
+  return tt({
     authDate: {
-      type: pt(),
+      type: lt(),
       from: "auth_date"
     },
     canSendAfter: {
@@ -331,34 +331,34 @@ function wt() {
       type: u().optional(),
       from: "query_id"
     },
-    receiver: rt().optional(),
+    receiver: st().optional(),
     startParam: {
       type: u().optional(),
       from: "start_param"
     },
-    user: rt().optional()
+    user: st().optional()
   }, "InitData");
 }
-function er(r) {
+function tr(r) {
   return wt().parse(r);
 }
-function Nt(r) {
+function Ot(r) {
   return r.replace(/(^|_)bg/, (t, e) => `${e}background`).replace(/_([a-z])/g, (t, e) => e.toUpperCase());
 }
 function Ht(r) {
   return r.replace(/[A-Z]/g, (t) => `_${t.toLowerCase()}`).replace(/(^|_)background/, (t, e) => `${e}bg`);
 }
-const _t = L(
+const _t = $(
   (r) => {
     const t = gt().optional();
-    return Object.entries(Y(r)).reduce((e, [s, n]) => (e[Nt(s)] = t.parse(n), e), {});
+    return Object.entries(Y(r)).reduce((e, [s, n]) => (e[Ot(s)] = t.parse(n), e), {});
   },
   "ThemeParams"
 );
 function bt(r) {
   return _t().parse(r);
 }
-function rr(r = {}) {
+function er(r = {}) {
   return m("web_app_request_theme", "theme_changed", r).then(bt);
 }
 function Ut(r) {
@@ -577,7 +577,7 @@ class Mt {
   }
 }
 function mt() {
-  return X({
+  return tt({
     botInline: {
       type: k().optional(),
       from: "tgWebAppBotInline"
@@ -612,18 +612,18 @@ function mt() {
     }
   }, "LaunchParams");
 }
-function jt(r) {
+function Gt(r) {
   return mt().parse(r);
 }
 function yt(r) {
   const t = r.includes("?") ? r.replace("#", "&").slice(r.indexOf("?") + 1) : r.slice(r.indexOf("#") + 1);
-  return jt(t);
+  return Gt(t);
 }
-function Gt() {
+function jt() {
   return yt(window.location.href);
 }
 function Ft() {
-  const r = ut();
+  const r = ht();
   if (!r)
     throw new Error("Unable to get first navigation entry.");
   return yt(r.name);
@@ -634,7 +634,7 @@ function zt() {
   } catch {
   }
   try {
-    return Gt();
+    return jt();
   } catch {
   }
   return null;
@@ -687,15 +687,15 @@ function Yt() {
     };
   throw new Error("Unable to retrieve any launch parameters.");
 }
-const st = "tmajsLaunchData";
+const nt = "tmajsLaunchData";
 function Ct() {
-  const r = window[st];
+  const r = window[nt];
   if (r)
     return r;
   const t = Yt();
-  return window[st] = t, Zt(t.launchParams), t;
+  return window[nt] = t, Zt(t.launchParams), t;
 }
-function sr() {
+function rr() {
   try {
     return Ct(), !0;
   } catch {
@@ -703,10 +703,10 @@ function sr() {
   }
 }
 function Xt(r) {
-  return "external" in r && H(r.external) && "notify" in r.external && typeof r.external.notify == "function";
+  return "external" in r && R(r.external) && "notify" in r.external && typeof r.external.notify == "function";
 }
 function te(r) {
-  return "TelegramWebviewProxy" in r && H(r.TelegramWebviewProxy) && "postEvent" in r.TelegramWebviewProxy && typeof r.TelegramWebviewProxy.postEvent == "function";
+  return "TelegramWebviewProxy" in r && R(r.TelegramWebviewProxy) && "postEvent" in r.TelegramWebviewProxy && typeof r.TelegramWebviewProxy.postEvent == "function";
 }
 function vt() {
   try {
@@ -715,14 +715,14 @@ function vt() {
     return !0;
   }
 }
-class tt extends Error {
+class et extends Error {
   constructor(t, e) {
-    super(`Method "${t}" is unsupported in the Mini Apps version ${e}.`), Object.setPrototypeOf(this, tt.prototype);
+    super(`Method "${t}" is unsupported in the Mini Apps version ${e}.`), Object.setPrototypeOf(this, et.prototype);
   }
 }
-class et extends Error {
+class rt extends Error {
   constructor(t, e, s) {
-    super(`Parameter "${e}" in method "${t}" is unsupported in the Mini Apps version ${s}.`), Object.setPrototypeOf(this, et.prototype);
+    super(`Parameter "${e}" in method "${t}" is unsupported in the Mini Apps version ${s}.`), Object.setPrototypeOf(this, rt.prototype);
   }
 }
 class Pt {
@@ -782,14 +782,14 @@ class Pt {
 }
 let kt = "https://web.telegram.org";
 const V = new Pt("[SDK]", !1);
-function nr(r) {
+function sr(r) {
   if (r) {
     V.enable();
     return;
   }
   V.disable();
 }
-function ir(r) {
+function nr(r) {
   kt = r;
 }
 function ee() {
@@ -804,7 +804,9 @@ function se(r) {
 }
 function ne(r, t) {
   window.dispatchEvent(new MessageEvent("message", {
-    data: JSON.stringify({ eventType: r, eventData: t })
+    data: JSON.stringify({ eventType: r, eventData: t }),
+    // We specify window.parent to imitate the case, it sent us this event.
+    source: window.parent
   }));
 }
 function ie() {
@@ -829,11 +831,12 @@ function ie() {
 }
 function oe(r) {
   ie(), window.addEventListener("message", (t) => {
-    try {
-      const { eventType: e, eventData: s } = se(t.data);
-      r(e, s);
-    } catch {
-    }
+    if (t.source === window.parent)
+      try {
+        const { eventType: e, eventData: s } = se(t.data);
+        r(e, s);
+      } catch {
+      }
   });
 }
 function ae() {
@@ -944,19 +947,19 @@ function U() {
   const r = window;
   return r[Q] === void 0 && (r[Q] = we()), r[Q];
 }
-function $(r, t) {
+function T(r, t) {
   U().off(r, t);
 }
 function y(r, t) {
-  return U().on(r, t), () => $(r, t);
+  return U().on(r, t), () => T(r, t);
 }
-function or(r, t) {
-  return U().once(r, t), () => $(r, t);
+function ir(r, t) {
+  return U().once(r, t), () => T(r, t);
 }
 function _e(r) {
   U().unsubscribe(r);
 }
-function ar(r) {
+function or(r) {
   return U().subscribe(r), () => _e(r);
 }
 function be(r, t) {
@@ -971,7 +974,7 @@ function be(r, t) {
 function P(r, t) {
   return be(r, t) <= 0;
 }
-function R(r, t, e) {
+function I(r, t, e) {
   if (typeof e == "string") {
     if (r === "web_app_open_link" && t === "try_instant_view")
       return P("6.4", e);
@@ -1005,12 +1008,12 @@ function R(r, t, e) {
   }
 }
 function E(r, t) {
-  return (e) => R(t[e], r);
+  return (e) => I(t[e], r);
 }
 function St(r, t) {
   return (e) => {
     const [s, n] = t[e];
-    return R(s, n, r);
+    return I(s, n, r);
   };
 }
 function d(r, t, e) {
@@ -1038,12 +1041,12 @@ function d(r, t, e) {
 }
 function me(r) {
   return (t, e) => {
-    if (!R(t, r))
-      throw new tt(t, r);
-    if (H(e)) {
+    if (!I(t, r))
+      throw new et(t, r);
+    if (R(e)) {
       let s;
-      if (t === "web_app_open_link" && "try_instant_view" in e ? s = "try_instant_view" : t === "web_app_set_header_color" && "color" in e && (s = "color"), s && !R(t, s, r))
-        throw new et(t, s, r);
+      if (t === "web_app_open_link" && "try_instant_view" in e ? s = "try_instant_view" : t === "web_app_set_header_color" && "color" in e && (s = "color"), s && !I(t, s, r))
+        throw new rt(t, s, r);
     }
     return d(t, e);
   };
@@ -1053,7 +1056,7 @@ class J extends Error {
     super(`Async call timeout exceeded. Timeout: ${t}`), Object.setPrototypeOf(this, J.prototype);
   }
 }
-function cr(r) {
+function ar(r) {
   return r instanceof J;
 }
 function ye(r) {
@@ -1074,10 +1077,10 @@ function xt(r, t) {
 }
 function m(r, t, e, s) {
   let n, i, a, c;
-  typeof t == "string" || Array.isArray(t) ? (a = Array.isArray(t) ? t : [t], n = e) : (i = t, a = Array.isArray(e) ? e : [e], n = s), H(i) && typeof i.req_id == "string" && (c = i.req_id);
+  typeof t == "string" || Array.isArray(t) ? (a = Array.isArray(t) ? t : [t], n = e) : (i = t, a = Array.isArray(e) ? e : [e], n = s), R(i) && typeof i.req_id == "string" && (c = i.req_id);
   const { postEvent: p = d, timeout: h } = n || {}, g = n && "capture" in n ? n.capture : null, _ = () => new Promise((A, l) => {
     const C = a.map((v) => y(v, (M) => {
-      c && (!H(M) || M.req_id !== c) || typeof g == "function" && !g(M) || (x(), A(M));
+      c && (!R(M) || M.req_id !== c) || typeof g == "function" && !g(M) || (x(), A(M));
     })), x = () => C.forEach((v) => v());
     try {
       p(r, i);
@@ -1117,7 +1120,7 @@ class Ce {
      * @param event - event name.
      * @param listener - event listener.
      */
-    o(this, "off", (t, e) => t === "click" ? $("back_button_pressed", e) : this.ee.off(t, e));
+    o(this, "off", (t, e) => t === "click" ? T("back_button_pressed", e) : this.ee.off(t, e));
     /**
      * Checks if specified method is supported by current component.
      */
@@ -1149,25 +1152,22 @@ class Ce {
     this.isVisible = !0;
   }
 }
-function nt(r, t) {
+function it(r, t) {
   return r + (r.length > 0 && t.length > 0 ? ` ${t}` : t);
 }
 function ve(...r) {
   return r.reduce((t, e) => {
     let s = "";
-    return typeof e == "string" ? s = e : typeof e == "object" && e !== null && (s = Object.entries(e).reduce((n, [i, a]) => a ? nt(n, i) : n, "")), nt(t, s);
+    return typeof e == "string" ? s = e : typeof e == "object" && e !== null && (s = Object.entries(e).reduce((n, [i, a]) => a ? it(n, i) : n, "")), it(t, s);
   }, "");
 }
-function Pe(r) {
-  return typeof r == "object" && r !== null && !Array.isArray(null);
-}
-function ur(...r) {
-  return r.reduce((t, e) => (Pe(e) && Object.entries(e).forEach(([s, n]) => {
+function cr(...r) {
+  return r.reduce((t, e) => (R(e) && Object.entries(e).forEach(([s, n]) => {
     const i = ve(t[s], n);
     i.length > 0 && (t[s] = i);
   }), t), {});
 }
-class ke {
+class Pe {
   constructor(t, e = d) {
     o(this, "ee", new w());
     o(this, "state");
@@ -1206,10 +1206,10 @@ class ke {
     this.isConfirmationNeeded = !0;
   }
 }
-function it(r, t) {
+function ot(r, t) {
   return r.reduce((e, s) => (e[s] = t, e), {});
 }
-class Se {
+class ke {
   constructor(t, e, s = d) {
     /**
      * Checks if specified method is supported by current component.
@@ -1252,9 +1252,9 @@ class Se {
   async get(t, e = {}) {
     const s = Array.isArray(t) ? t : [t];
     if (s.length === 0)
-      return it(s, "");
+      return ot(s, "");
     const n = f(
-      it(s, u())
+      ot(s, u())
     ), i = await O(
       "getStorageValues",
       { keys: s },
@@ -1278,7 +1278,46 @@ class Se {
     );
   }
 }
-class xe {
+function S(r, t) {
+  document.documentElement.style.setProperty(r, t);
+}
+function Se(r, t) {
+  const e = () => {
+    S("--tg-background-color", r.backgroundColor);
+  }, s = () => {
+    const {
+      backgroundColor: n,
+      secondaryBackgroundColor: i
+    } = t;
+    if (X(r.headerColor)) {
+      S("--tg-header-color", r.headerColor);
+      return;
+    }
+    if (r.headerColor === "bg_color" && n) {
+      S("--tg-header-color", n);
+      return;
+    }
+    r.headerColor === "secondary_bg_color" && i && S("--tg-header-color", i);
+  };
+  t.on("change", s), r.on("change:backgroundColor", e), r.on("change:headerColor", s), e(), s();
+}
+function xe(r) {
+  const t = () => {
+    const e = r.getState();
+    Object.entries(e).forEach(([s, n]) => {
+      if (n) {
+        const i = s.replace(/[A-Z]/g, (a) => `-${a.toLowerCase()}`);
+        S(`--tg-theme-${i}`, n);
+      }
+    });
+  };
+  r.on("change", t), t();
+}
+function at(r) {
+  const t = () => S("--tg-viewport-height", `${r.height}px`), e = () => S("--tg-viewport-width", `${r.width}px`), s = () => S("--tg-viewport-stable-height", `${r.stableHeight}px`);
+  r.on("change:height", t), r.on("change:width", e), r.on("change:stableHeight", s), t(), e(), s();
+}
+class qe {
   constructor(t, e = d) {
     /**
      * Checks if specified method is supported by current component.
@@ -1324,7 +1363,7 @@ class xe {
     this.postEvent("web_app_trigger_haptic_feedback", { type: "selection_change" });
   }
 }
-function qe() {
+function Ae() {
   const r = document.createElement("style");
   r.id = "telegram-custom-styles", document.head.appendChild(r), y("set_custom_style", (t) => {
     r.innerHTML = t;
@@ -1333,26 +1372,26 @@ function qe() {
 function qt(r) {
   return `telegram-mini-apps-${r}`;
 }
-function T(r, t) {
+function B(r, t) {
   sessionStorage.setItem(qt(r), JSON.stringify(t));
 }
-function B(r) {
+function D(r) {
   const t = sessionStorage.getItem(qt(r));
   return t ? JSON.parse(t) : null;
 }
-function Ae(r, t, e) {
-  const { isVisible: s = !1 } = r ? B("back-button") || {} : {}, n = new Ce(s, t, e);
+function Ve(r, t, e) {
+  const { isVisible: s = !1 } = r ? D("back-button") || {} : {}, n = new Ce(s, t, e);
   return n.on("change", () => {
-    T("back-button", { isVisible: n.isVisible });
+    B("back-button", { isVisible: n.isVisible });
   }), n;
 }
-function Ve(r, t) {
-  const { isConfirmationNeeded: e = !1 } = r ? B("closing-behavior") || {} : {}, s = new ke(e, t);
-  return s.on("change", () => T("closing-behavior", {
+function Re(r, t) {
+  const { isConfirmationNeeded: e = !1 } = r ? D("closing-behavior") || {} : {}, s = new Pe(e, t);
+  return s.on("change", () => B("closing-behavior", {
     isConfirmationNeeded: s.isConfirmationNeeded
   })), s;
 }
-class Re {
+class Ie {
   constructor(t) {
     o(this, "ee", new w());
     o(this, "state");
@@ -1373,7 +1412,7 @@ class Re {
      * @param event - event name.
      * @param listener - event listener.
      */
-    o(this, "off", (t, e) => t === "click" ? $("main_button_pressed", e) : this.ee.off(t, e));
+    o(this, "off", (t, e) => t === "click" ? T("main_button_pressed", e) : this.ee.off(t, e));
     const {
       postEvent: e = d,
       text: s,
@@ -1517,7 +1556,7 @@ class Re {
     return this.state.set(t), this.commit(), this;
   }
 }
-function Ie(r, t, e, s) {
+function Le(r, t, e, s) {
   const {
     backgroundColor: n = t,
     isEnabled: i = !1,
@@ -1525,7 +1564,7 @@ function Ie(r, t, e, s) {
     isLoaderVisible: c = !1,
     textColor: p = e,
     text: h = ""
-  } = r ? B("main-button") || {} : {}, g = new Re({
+  } = r ? D("main-button") || {} : {}, g = new Ie({
     backgroundColor: n,
     isEnabled: i,
     isLoaderVisible: c,
@@ -1533,7 +1572,7 @@ function Ie(r, t, e, s) {
     postEvent: s,
     text: h,
     textColor: p
-  }), _ = () => T("main-button", {
+  }), _ = () => B("main-button", {
     backgroundColor: g.backgroundColor,
     isEnabled: g.isEnabled,
     isLoaderVisible: g.isLoaderVisible,
@@ -1543,7 +1582,7 @@ function Ie(r, t, e, s) {
   });
   return g.on("change", _), g;
 }
-const Le = X({
+const $e = tt({
   contact: f({
     userId: {
       type: q(),
@@ -1563,12 +1602,12 @@ const Le = X({
     }
   }),
   authDate: {
-    type: pt(),
+    type: lt(),
     from: "auth_date"
   },
   hash: u()
 });
-class $e {
+class Te {
   constructor(t) {
     o(this, "ee", new w());
     o(this, "state");
@@ -1623,7 +1662,7 @@ class $e {
         postEvent: this.postEvent,
         timeout: 1e4
       }
-    ).then((t) => Le.parse(t));
+    ).then((t) => $e.parse(t));
   }
   /**
    * The Mini App background color.
@@ -1758,7 +1797,7 @@ class $e {
    * @param color - color key or RGB color.
    */
   setHeaderColor(t) {
-    this.postEvent("web_app_set_header_color", lt(t) ? { color: t } : { color_key: t }), this.state.set("headerColor", t);
+    this.postEvent("web_app_set_header_color", X(t) ? { color: t } : { color_key: t }), this.state.set("headerColor", t);
   }
   /**
    * Updates current Mini App background color.
@@ -1786,28 +1825,28 @@ class $e {
     });
   }
 }
-function Te(r, t, e, s, n, i) {
+function Be(r, t, e, s, n, i) {
   const {
     backgroundColor: a = t,
     headerColor: c = "bg_color"
-  } = r ? B("mini-app") || {} : {}, p = new $e({
+  } = r ? D("mini-app") || {} : {}, p = new Te({
     headerColor: c,
     backgroundColor: a,
     version: e,
     botInline: s,
     createRequestId: n,
     postEvent: i
-  }), h = () => T("mini-app", {
+  }), h = () => B("mini-app", {
     backgroundColor: p.backgroundColor,
     headerColor: p.headerColor
   });
   return p.on("change", h), p;
 }
-function Be() {
+function De() {
   let r = 0;
   return () => (r += 1, r.toString());
 }
-class De {
+class We {
   constructor(t, e, s = d) {
     o(this, "ee", new w());
     o(this, "state");
@@ -1822,7 +1861,7 @@ class De {
      * @param event - event name.
      * @param listener - event listener.
      */
-    o(this, "off", (t, e) => t === "click" ? $("settings_button_pressed", e) : this.ee.off(t, e));
+    o(this, "off", (t, e) => t === "click" ? T("settings_button_pressed", e) : this.ee.off(t, e));
     /**
      * Checks if specified method is supported by current component.
      */
@@ -1854,17 +1893,17 @@ class De {
     this.isVisible = !0;
   }
 }
-function We(r, t, e) {
-  const { isVisible: s = !1 } = r ? B("settings-button") || {} : {}, n = new De(s, t, e);
+function Ne(r, t, e) {
+  const { isVisible: s = !1 } = r ? D("settings-button") || {} : {}, n = new We(s, t, e);
   return n.on("change", () => {
-    T("settings-button", { isVisible: n.isVisible });
+    B("settings-button", { isVisible: n.isVisible });
   }), n;
 }
 function Oe(r) {
   const t = new Mt(r);
   return t.listen(), t;
 }
-function Ne(r) {
+function He(r) {
   return ["macos", "tdesktop", "unigram", "web", "weba"].includes(r);
 }
 async function At(r) {
@@ -1876,10 +1915,10 @@ async function At(r) {
     isStateStable: t.is_state_stable
   };
 }
-function D(r) {
+function W(r) {
   return r < 0 ? 0 : r;
 }
-class He {
+class Ue {
   constructor(t) {
     o(this, "ee", new w());
     o(this, "state");
@@ -1900,10 +1939,10 @@ class He {
       postEvent: a = d
     } = t;
     this.postEvent = a, this.state = new b({
-      height: D(e),
+      height: W(e),
       isExpanded: s,
-      stableHeight: D(i),
-      width: D(n)
+      stableHeight: W(i),
+      width: W(n)
     }, this.ee);
   }
   /**
@@ -1969,9 +2008,9 @@ class He {
         is_expanded: n,
         is_state_stable: i
       } = t, a = {
-        height: D(e),
+        height: W(e),
         isExpanded: n,
-        width: D(s)
+        width: W(s)
       };
       i && (a.stableHeight = a.height), this.state.set(a);
     });
@@ -2008,21 +2047,21 @@ class He {
     return this.stableHeight === this.height;
   }
 }
-function j(r) {
-  const t = new He(r);
-  return t.on("change", () => T("viewport", {
+function G(r) {
+  const t = new Ue(r);
+  return t.on("change", () => B("viewport", {
     height: t.height,
     isExpanded: t.isExpanded,
     stableHeight: t.stableHeight,
     width: t.width
   })), t.listen(), t;
 }
-function Ue(r, t, e, s) {
-  const n = r ? B("viewport") : null;
+function Me(r, t, e, s) {
+  const n = r ? D("viewport") : null;
   if (n)
-    return j({ ...n, postEvent: e });
-  if (Ne(t))
-    return j({
+    return G({ ...n, postEvent: e });
+  if (He(t))
+    return G({
       height: window.innerHeight,
       isExpanded: !0,
       postEvent: e,
@@ -2033,12 +2072,12 @@ function Ue(r, t, e, s) {
     return At({
       postEvent: e,
       timeout: 5e3
-    }).then(({ height: a, isStateStable: c, ...p }) => j({
+    }).then(({ height: a, isStateStable: c, ...p }) => G({
       ...p,
       height: a,
       stableHeight: c ? a : 0
     }));
-  const i = j({
+  const i = G({
     width: 0,
     height: 0,
     isExpanded: !1,
@@ -2049,37 +2088,6 @@ function Ue(r, t, e, s) {
     console.error("Unable to actualize viewport state", a);
   }), i;
 }
-function S(r, t) {
-  document.documentElement.style.setProperty(r, t);
-}
-function Me(r, t) {
-  const e = () => {
-    S("--tg-background-color", r.backgroundColor);
-  }, s = () => {
-    const {
-      backgroundColor: n,
-      secondaryBackgroundColor: i
-    } = t;
-    r.headerColor === "bg_color" ? n && S("--tg-header-color", n) : r.headerColor === "secondary_bg_color" ? i && S("--tg-header-color", i) : S("--tg-header-color", r.headerColor);
-  };
-  t.on("change", s), r.on("change:backgroundColor", e), r.on("change:headerColor", s), e(), s();
-}
-function je(r) {
-  const t = () => {
-    const e = r.getState();
-    Object.entries(e).forEach(([s, n]) => {
-      if (n) {
-        const i = s.replace(/[A-Z]/g, (a) => `-${a.toLowerCase()}`);
-        S(`--tg-theme-${i}`, n);
-      }
-    });
-  };
-  r.on("change", t), t();
-}
-function ot(r) {
-  const t = () => S("--tg-viewport-height", `${r.height}px`), e = () => S("--tg-viewport-width", `${r.width}px`), s = () => S("--tg-viewport-height", `${r.stableHeight}px`);
-  r.on("change:height", t), r.on("change:width", e), r.on("change:stableHeight", s), t(), e(), s();
-}
 function Ge(r) {
   return typeof r == "object" ? r : r ? {
     themeParams: !0,
@@ -2087,11 +2095,11 @@ function Ge(r) {
     miniApp: !0
   } : {};
 }
-function at(r, t, e, s) {
+function ct(r, t, e, s) {
   const n = Ge(r);
-  n.miniApp && Me(t, e), n.themeParams && je(e), n.viewport && (s instanceof Promise ? s.then(ot) : ot(s));
+  n.miniApp && Se(t, e), n.themeParams && xe(e), n.viewport && (s instanceof Promise ? s.then(at) : at(s));
 }
-function Fe(r) {
+function je(r) {
   const { hostname: t, pathname: e } = new URL(r, window.location.href);
   if (t !== "t.me")
     throw new Error(`Incorrect hostname: ${t}`);
@@ -2100,7 +2108,7 @@ function Fe(r) {
     throw new Error('Link pathname has incorrect format. Expected to receive "/invoice/{slug}" or "/${slug}"');
   return s[2];
 }
-class ze {
+class Fe {
   constructor(t, e = d) {
     o(this, "ee", new w());
     o(this, "state");
@@ -2130,7 +2138,7 @@ class ze {
   async open(t, e) {
     if (this.isOpened)
       throw new Error("Invoice is already opened");
-    const s = e ? Fe(t) : t;
+    const s = e ? je(t) : t;
     this.isOpened = !0;
     try {
       return (await m(
@@ -2149,7 +2157,7 @@ class ze {
     }
   }
 }
-function Je(r) {
+function ze(r) {
   const t = r.message.trim(), e = (r.title || "").trim(), s = r.buttons || [];
   let n;
   if (e.length > 64)
@@ -2173,7 +2181,7 @@ function Je(r) {
     return { ...i, id: a };
   }), { title: e, message: t, buttons: n };
 }
-class Qe {
+class Je {
   constructor(t, e = d) {
     o(this, "ee", new w());
     o(this, "state");
@@ -2218,7 +2226,7 @@ class Qe {
       throw new Error("Popup is already opened.");
     return this.isOpened = !0, m(
       "web_app_open_popup",
-      Je(t),
+      ze(t),
       "popup_closed",
       { postEvent: this.postEvent }
     ).then(({ button_id: e = null }) => e).finally(() => {
@@ -2226,7 +2234,7 @@ class Qe {
     });
   }
 }
-class Ze {
+class Qe {
   constructor(t, e = d) {
     o(this, "ee", new w());
     o(this, "state");
@@ -2285,7 +2293,7 @@ class Ze {
     }
   }
 }
-class Ke {
+class Ze {
   constructor(t, e, s = d) {
     /**
      * Checks if specified method is supported by current component.
@@ -2312,7 +2320,7 @@ class Ke {
    */
   openLink(t, e) {
     const s = new URL(t, window.location.href).toString();
-    if (!R("web_app_open_link", this.version)) {
+    if (!I("web_app_open_link", this.version)) {
       window.open(s, "_blank");
       return;
     }
@@ -2335,7 +2343,7 @@ class Ke {
     } = new URL(t, window.location.href);
     if (e !== "t.me")
       throw new Error(`URL has not allowed hostname: ${e}. Only "t.me" is allowed`);
-    if (!R("web_app_open_tg_link", this.version)) {
+    if (!I("web_app_open_tg_link", this.version)) {
       window.location.href = t;
       return;
     }
@@ -2356,7 +2364,7 @@ class Ke {
     ).then(({ data: t = null }) => t);
   }
 }
-function hr(r = {}) {
+function ur(r = {}) {
   const {
     async: t = !1,
     complete: e = t,
@@ -2374,22 +2382,22 @@ function hr(r = {}) {
         botInline: g = !1
       },
       isPageReload: _
-    } = Ct(), A = Be(), l = me(c);
-    vt() && (n && qe(), l("iframe_ready", { reload_supported: !0 }), y("reload_iframe", () => window.location.reload()));
+    } = Ct(), A = De(), l = me(c);
+    vt() && (n && Ae(), l("iframe_ready", { reload_supported: !0 }), y("reload_iframe", () => window.location.reload()));
     const C = {
-      backButton: Ae(_, c, l),
-      closingBehavior: Ve(_, l),
-      cloudStorage: new Se(c, A, l),
+      backButton: Ve(_, c, l),
+      closingBehavior: Re(_, l),
+      cloudStorage: new ke(c, A, l),
       createRequestId: A,
-      hapticFeedback: new xe(c, l),
-      invoice: new ze(c, l),
-      mainButton: Ie(
+      hapticFeedback: new qe(c, l),
+      invoice: new Fe(c, l),
+      mainButton: Le(
         _,
         h.buttonColor || "#000000",
         h.buttonTextColor || "#ffffff",
         l
       ),
-      miniApp: Te(
+      miniApp: Be(
         _,
         h.backgroundColor || "#ffffff",
         c,
@@ -2397,23 +2405,23 @@ function hr(r = {}) {
         A,
         l
       ),
-      popup: new Qe(c, l),
+      popup: new Je(c, l),
       postEvent: l,
-      qrScanner: new Ze(c, l),
-      settingsButton: We(_, c, l),
+      qrScanner: new Qe(c, l),
+      settingsButton: Ne(_, c, l),
       themeParams: Oe(h),
-      utils: new Ke(c, A, l),
+      utils: new Ze(c, A, l),
       ...i ? {
-        initData: new Ot(i),
+        initData: new Nt(i),
         initDataRaw: a
       } : {}
-    }, x = Ue(_, p, l, e);
-    return x instanceof Promise || e ? Promise.resolve(x).then((v) => (at(
+    }, x = Me(_, p, l, e);
+    return x instanceof Promise || e ? Promise.resolve(x).then((v) => (ct(
       s,
       C.miniApp,
       C.themeParams,
       v
-    ), { ...C, viewport: v })) : (at(
+    ), { ...C, viewport: v })) : (ct(
       s,
       C.miniApp,
       C.themeParams,
@@ -2425,14 +2433,14 @@ function hr(r = {}) {
     throw i;
   }
 }
-function W(r, t) {
+function N(r, t) {
   return r.startsWith(t) ? r : `${t}${r}`;
 }
-function pr(r) {
+function hr(r) {
   const t = r.match(/#(.+)/);
   return t ? t[1] : null;
 }
-async function N(r) {
+async function H(r) {
   return r === 0 ? !0 : Promise.race([
     new Promise((t) => {
       window.addEventListener("popstate", function e() {
@@ -2445,14 +2453,14 @@ async function N(r) {
     })
   ]);
 }
-async function Ye() {
-  if (window.history.length <= 1 || (window.history.pushState(null, ""), await N(1 - window.history.length)))
+async function Ke() {
+  if (window.history.length <= 1 || (window.history.pushState(null, ""), await H(1 - window.history.length)))
     return;
-  let t = await N(-1);
+  let t = await H(-1);
   for (; t; )
-    t = await N(-1);
+    t = await H(-1);
 }
-class Xe {
+class Ye {
   constructor(t, e, {
     debug: s = !1,
     loggerPrefix: n = "Navigator"
@@ -2467,9 +2475,9 @@ class Xe {
       if (!i.startsWith("/") && i.length > 0)
         throw new Error('Pathname should start with "/"');
       return {
-        pathname: W(i, "/"),
-        search: a ? W(a, "?") : "",
-        hash: c ? W(c, "#") : ""
+        pathname: N(i, "/"),
+        search: a ? N(a, "?") : "",
+        hash: c ? N(c, "#") : ""
       };
     }), this.logger = new Pt(`[${n}]`, s);
   }
@@ -2487,7 +2495,7 @@ class Xe {
         search: c,
         hash: p
       } = t;
-      e = a + (c ? W(c, "?") : "") + (p ? W(p, "#") : "");
+      e = a + (c ? N(c, "?") : "") + (p ? N(p, "#") : "");
     }
     const {
       pathname: s,
@@ -2651,8 +2659,8 @@ class Xe {
     return this.entry.search;
   }
 }
-const ct = 0, Z = 1, K = 2;
-class Vt extends Xe {
+const ut = 0, Z = 1, K = 2;
+class Vt extends Ye {
   constructor(e, s, n = {}) {
     super(e, s, {
       ...n,
@@ -2667,7 +2675,7 @@ class Vt extends Xe {
     o(this, "onPopState", async ({ state: e }) => {
       if (this.logger.log('"popstate" event received. State:', e), e === null)
         return this.push(window.location.hash.slice(1));
-      if (e === ct) {
+      if (e === ut) {
         this.logger.log("Void reached. Moving history forward"), window.history.forward();
         return;
       }
@@ -2716,7 +2724,7 @@ class Vt extends Xe {
   async syncHistory() {
     window.removeEventListener("popstate", this.onPopState);
     const e = `#${this.path}`;
-    await Ye(), d("web_app_setup_back_button", { is_visible: this.canGoBack }), this.canGoBack && this.canGoForward ? (this.logger.log("Setting up history: [<-, *, ->]"), window.history.replaceState(Z, ""), window.history.pushState(null, "", e), window.history.pushState(K, ""), await N(-1)) : this.canGoBack ? (this.logger.log("Setting up history: [<-, *]"), window.history.replaceState(Z, ""), window.history.pushState(null, "", e)) : this.canGoForward ? (this.logger.log("Setting up history: [*, ->]"), window.history.replaceState(null, e), window.history.pushState(K, ""), await N(-1)) : (this.logger.log("Setting up history: [~, *]"), window.history.replaceState(ct, ""), window.history.pushState(null, "", e)), window.addEventListener("popstate", this.onPopState);
+    await Ke(), d("web_app_setup_back_button", { is_visible: this.canGoBack }), this.canGoBack && this.canGoForward ? (this.logger.log("Setting up history: [<-, *, ->]"), window.history.replaceState(Z, ""), window.history.pushState(null, "", e), window.history.pushState(K, ""), await H(-1)) : this.canGoBack ? (this.logger.log("Setting up history: [<-, *]"), window.history.replaceState(Z, ""), window.history.pushState(null, "", e)) : this.canGoForward ? (this.logger.log("Setting up history: [*, ->]"), window.history.replaceState(null, e), window.history.pushState(K, ""), await H(-1)) : (this.logger.log("Setting up history: [~, *]"), window.history.replaceState(ut, ""), window.history.pushState(null, "", e)), window.addEventListener("popstate", this.onPopState);
   }
   emitChanged(e, s) {
     this.ee.emit("change", {
@@ -2736,79 +2744,83 @@ class Vt extends Xe {
    * Detaches current navigator from the browser history.
    */
   detach() {
-    this.attached && (this.logger.log("Detaching", this), this.attached = !1, window.removeEventListener("popstate", this.onPopState), $("back_button_pressed", this.back));
+    this.attached && (this.logger.log("Detaching", this), this.attached = !1, window.removeEventListener("popstate", this.onPopState), T("back_button_pressed", this.back));
   }
 }
 export {
   Ce as BackButton,
-  ke as ClosingBehavior,
-  Se as CloudStorage,
-  xe as HapticFeedback,
+  Pe as ClosingBehavior,
+  ke as CloudStorage,
+  qe as HapticFeedback,
   Vt as HashNavigator,
-  Ot as InitData,
-  ze as Invoice,
-  Re as MainButton,
-  tt as MethodUnsupportedError,
-  $e as MiniApp,
-  Xe as Navigator,
-  et as ParameterUnsupportedError,
+  Nt as InitData,
+  Fe as Invoice,
+  Ie as MainButton,
+  et as MethodUnsupportedError,
+  Te as MiniApp,
+  Ye as Navigator,
+  rt as ParameterUnsupportedError,
   F as ParseError,
-  G as ParseSchemaFieldError,
-  Qe as Popup,
-  Ze as QRScanner,
-  De as SettingsButton,
+  j as ParseSchemaFieldError,
+  Je as Popup,
+  Qe as QRScanner,
+  We as SettingsButton,
   Mt as ThemeParams,
   J as TimeoutError,
-  Ke as Utils,
-  He as Viewport,
+  Ze as Utils,
+  Ue as Viewport,
   Bt as array,
+  Se as bindMiniAppCSSVars,
+  xe as bindThemeCSSVars,
+  at as bindViewportCSSVars,
   k as boolean,
   Wt as chatParser,
   ve as classNames,
   be as compareVersions,
   me as createPostEvent,
-  pt as date,
-  pr as getHash,
-  hr as init,
+  lt as date,
+  hr as getHash,
+  ur as init,
   wt as initDataParser,
   O as invokeCustomMethod,
   ft as isColorDark,
   vt as isIframe,
-  lt as isRGB,
+  X as isRGB,
   Dt as isRGBShort,
-  H as isRecord,
-  Ne as isStableViewportPlatform,
-  sr as isTMA,
-  cr as isTimeoutError,
+  R as isRecord,
+  He as isStableViewportPlatform,
+  rr as isTMA,
+  ar as isTimeoutError,
   f as json,
   mt as launchParamsParser,
-  ur as mergeClassNames,
+  cr as mergeClassNames,
   q as number,
-  $ as off,
+  T as off,
   y as on,
-  or as once,
-  er as parseInitData,
-  jt as parseLaunchParams,
+  ir as once,
+  tr as parseInitData,
+  Gt as parseLaunchParams,
   se as parseMessage,
   bt as parseThemeParams,
   d as postEvent,
   m as request,
-  rr as requestThemeParams,
+  er as requestThemeParams,
   At as requestViewport,
   Ct as retrieveLaunchData,
   gt as rgb,
-  X as searchParams,
+  tt as searchParams,
   Jt as serializeLaunchParams,
   Ut as serializeThemeParams,
-  nr as setDebug,
-  ir as setTargetOrigin,
+  S as setCSSVar,
+  sr as setDebug,
+  nr as setTargetOrigin,
   u as string,
-  ar as subscribe,
-  R as supports,
+  or as subscribe,
+  I as supports,
   _t as themeParamsParser,
   dt as toRGB,
   _e as unsubscribe,
-  rt as userParser,
+  st as userParser,
   xt as withTimeout
 };
 //# sourceMappingURL=index.mjs.map