diff --git a/dist/remote/GBadge.js b/dist/remote/GBadge.js
index a1cc625..de58161 100644
--- a/dist/remote/GBadge.js
+++ b/dist/remote/GBadge.js
@@ -1,4 +1,4 @@
-const p = {
+const c = {
   fontSize: "sm",
   colorScheme: "teal",
   variant: "subtle",
@@ -17,29 +17,32 @@ function i() {
     );
   return t;
 }
-function l(t = {}) {
+function d(t = {}) {
   const { children: e, theme: r, chakraProviderProps: n, ...o } = t;
   return {
     children: e,
     theme: r,
     chakraProviderProps: n,
     badgeProps: {
-      ...p,
+      ...c,
       ...o,
       fontFamily: o.fontFamily || "var(--uikit-font-family, inherit)"
     }
   };
 }
-class m extends HTMLElement {
+class l extends HTMLElement {
   constructor() {
-    super(), this._props = {}, this._root = null;
+    super(), this._props = {}, this._root = null, this._unmountTimer = null;
   }
   connectedCallback() {
+    this._unmountTimer && (clearTimeout(this._unmountTimer), this._unmountTimer = null);
     const { createRoot: e } = i();
     this._root || (this._root = e(this)), this.renderComponent();
   }
   disconnectedCallback() {
-    this._root && (this._root.unmount(), this._root = null);
+    !this._root || this._unmountTimer || (this._unmountTimer = setTimeout(() => {
+      this._unmountTimer = null, this._root && (this._root.unmount(), this._root = null);
+    }, 0));
   }
   set componentProps(e) {
     this._props = e ?? {}, this.isConnected && this.renderComponent();
@@ -49,19 +52,25 @@ class m extends HTMLElement {
   }
   renderComponent() {
     if (!this._root) return;
-    const { React: e, ChakraProvider: r, Badge: n, theme: o, chakraProviderProps: s } = i(), { children: a, theme: c, chakraProviderProps: d, badgeProps: h } = l(this._props);
+    const {
+      React: e,
+      ChakraProvider: r,
+      Badge: n,
+      theme: o,
+      chakraProviderProps: s
+    } = i(), { children: a, theme: h, chakraProviderProps: m, badgeProps: u } = d(this._props);
     this._root.render(
       e.createElement(
         r,
         {
-          theme: c || o,
+          theme: h || o,
           resetCSS: !1,
           ...s || {},
-          ...d || {}
+          ...m || {}
         },
-        e.createElement(n, h, a)
+        e.createElement(n, u, a)
       )
     );
   }
 }
-customElements.get("uikit-g-badge") || customElements.define("uikit-g-badge", m);
+customElements.get("uikit-g-badge") || customElements.define("uikit-g-badge", l);
diff --git a/dist/remote/Pagination.js b/dist/remote/Pagination.js
index 85cec3e..d4c4605 100644
--- a/dist/remote/Pagination.js
+++ b/dist/remote/Pagination.js
@@ -36,7 +36,7 @@ const H = {
     getPageNumbers: () => []
   }
 }, V = ["۰", "۱", "۲", "۳", "۴", "۵", "۶", "۷", "۸", "۹"], ne = /[۰-۹]/g, oe = /[٠-٩]/g;
-function k() {
+function I() {
   const t = window.__UIKIT_REMOTE_DEPS__, e = [];
   if (t?.React || e.push("React"), t?.createRoot || e.push("createRoot"), t?.ChakraProvider || e.push("ChakraProvider"), t?.Button || e.push("Button"), t?.HStack || e.push("HStack"), t?.IconButton || e.push("IconButton"), t?.Input || e.push("Input"), t?.Text || e.push("Text"), e.length)
     throw new Error(
@@ -57,11 +57,11 @@ function re(t) {
   return H[t] ? t : "full";
 }
 function W(t, e) {
-  const m = Number(t), g = Number(e);
-  return !g || g <= 0 || !m || Number.isNaN(m) ? 1 : Math.min(Math.max(m, 1), g);
+  const p = Number(t), h = Number(e);
+  return !h || h <= 0 || !p || Number.isNaN(p) ? 1 : Math.min(Math.max(p, 1), h);
 }
 function ie(t) {
-  const { React: e } = k();
+  const { React: e } = I();
   return e.createElement(
     "svg",
     {
@@ -83,7 +83,7 @@ function ie(t) {
   );
 }
 function se(t) {
-  const { React: e } = k();
+  const { React: e } = I();
   return e.createElement(
     "svg",
     {
@@ -107,109 +107,109 @@ function se(t) {
 function ue({
   currentPage: t = 1,
   totalCount: e = 0,
-  totalPages: m,
-  pageSize: g = 10,
-  onPageChange: h,
+  totalPages: p,
+  pageSize: h = 10,
+  onPageChange: g,
   level: v = "full",
   ...B
 }) {
-  const { React: n, Button: K, HStack: S, IconButton: j, Input: O, Text: P } = k(), { useCallback: I, useEffect: N, useMemo: U, useRef: X, useState: R } = n, F = re(v), f = H[F], r = F === "simple", y = Number(g), $ = Number.isFinite(y) && y > 0 ? y : 10, L = Number(e), D = Number.isFinite(L) && L > 0 ? L : 0, A = Number(m), u = Number.isFinite(A) && A > 0 ? Math.ceil(A) : Math.ceil(D / $), i = W(t, u), [d, c] = R(
+  const { React: n, Button: K, HStack: k, IconButton: j, Input: O, Text: P } = I(), { useCallback: C, useEffect: N, useMemo: U, useRef: X, useState: R } = n, F = re(v), m = H[F], r = F === "simple", y = Number(h), $ = Number.isFinite(y) && y > 0 ? y : 10, L = Number(e), D = Number.isFinite(L) && L > 0 ? L : 0, A = Number(p), u = Number.isFinite(A) && A > 0 ? Math.ceil(A) : Math.ceil(D / $), i = W(t, u), [d, l] = R(
     r ? "" : a(i)
-  ), [E, b] = R(!1), [p, l] = R(null), C = X(null), w = p ?? i, q = D > 0, J = U(() => r || u <= 0 ? [] : Array.from(
+  ), [E, b] = R(!1), [f, c] = R(null), _ = X(null), w = f ?? i, q = D > 0, J = U(() => r || u <= 0 ? [] : Array.from(
     new Set(
-      f.getPageNumbers({
+      m.getPageNumbers({
         currentPage: i,
         totalPages: u
       })
     )
-  ).filter((o) => o >= 1 && o <= u).sort((o, s) => o - s), [f, r, i, u]), _ = I(() => {
-    c(r ? "" : a(i)), b(!1), l(null);
-  }, [r, i]), M = I(
+  ).filter((o) => o >= 1 && o <= u).sort((o, s) => o - s), [m, r, i, u]), T = C(() => {
+    l(r ? "" : a(i)), b(!1), c(null);
+  }, [r, i]), M = C(
     (o) => {
       const s = W(o, u);
-      b(!1), c(r ? "" : a(i)), l(null), s !== i && h?.(s);
+      b(!1), l(r ? "" : a(i)), c(null), s !== i && g?.(s);
     },
-    [r, h, i, u]
-  ), x = I(() => {
+    [r, g, i, u]
+  ), S = C(() => {
     if (!d) {
-      _(), C.current?.blur();
+      T(), _.current?.blur();
       return;
     }
     const o = parseInt(G(d), 10);
     if (Number.isNaN(o)) {
-      _(), C.current?.blur();
+      T(), _.current?.blur();
       return;
     }
     const s = W(o, u);
     if (r) {
-      b(!1), c(""), s !== i ? (l(s), h?.(s)) : l(null), C.current?.blur();
+      b(!1), l(""), s !== i ? (c(s), g?.(s)) : c(null), _.current?.blur();
       return;
     }
-    s !== i ? (l(s), c(a(s)), h?.(s)) : (c(a(i)), b(!1), l(null)), C.current?.blur();
+    s !== i ? (c(s), l(a(s)), g?.(s)) : (l(a(i)), b(!1), c(null)), _.current?.blur();
   }, [
     d,
     r,
-    h,
-    _,
+    g,
+    T,
     i,
     u
-  ]), Q = I(() => {
-    l(null), c(""), b(!0);
-  }, []), Y = I((o) => {
+  ]), Q = C(() => {
+    c(null), l(""), b(!0);
+  }, []), Y = C((o) => {
     const s = o.target.value, te = G(s).replace(/\D/g, "");
-    c(a(te));
+    l(a(te));
   }, []);
   if (N(() => {
     if (r) {
-      p !== null && i === p && l(null);
+      f !== null && i === f && c(null);
       return;
     }
-    if (p !== null) {
-      i === p && (l(null), b(!1), c(a(i)));
+    if (f !== null) {
+      i === f && (c(null), b(!1), l(a(i)));
       return;
     }
-    E || c(a(i));
-  }, [E, r, p, i]), N(() => {
-    r && E && C.current?.focus();
+    E || l(a(i));
+  }, [E, r, f, i]), N(() => {
+    r && E && _.current?.focus();
   }, [E, r]), N(() => {
-    if (!E || !d || !r && p !== null) return;
+    if (!E || !d || !r && f !== null) return;
     const o = setTimeout(() => {
-      x();
+      S();
     }, 1e3);
     return () => clearTimeout(o);
-  }, [x, d, E, r, p]), u <= 0) return null;
+  }, [S, d, E, r, f]), u <= 0) return null;
   const z = () => n.createElement(O, {
-    ref: C,
+    ref: _,
     type: "text",
     inputMode: "numeric",
     placeholder: "صفحه",
-    w: f.inputWidth,
+    w: m.inputWidth,
     value: d,
     onFocus: () => {
-      r || (b(!0), l(null), c(""));
+      r || (b(!0), c(null), l(""));
     },
     onChange: Y,
     onBlur: () => {
       if (d) {
-        r && x();
+        r && S();
         return;
       }
-      _();
+      T();
     },
     onKeyDown: (o) => {
-      o.key === "Enter" && x(), o.key === "Escape" && _();
+      o.key === "Enter" && S(), o.key === "Escape" && T();
     },
     textAlign: "center",
     color: "#1D2939",
     px: 1,
     minW: 0,
     dir: "ltr"
-  }), T = (o, s = !1) => n.createElement(
+  }), x = (o, s = !1) => n.createElement(
     K,
     {
       key: o,
       size: "md",
-      px: f.pageButtonPx,
+      px: m.pageButtonPx,
       bg: s ? "#4B49AC" : "#e6e6f1",
       color: s ? "#e6e6f1" : "#4B49AC",
       _hover: { bg: s ? "#4B49AC" : "#cbcbe8" },
@@ -219,9 +219,9 @@ function ue({
     a(o)
   ), Z = r && u > 1 && w !== 1, ee = r && u > 1 && w !== u;
   return n.createElement(
-    S,
+    k,
     {
-      justifyContent: f.justifyContent,
+      justifyContent: m.justifyContent,
       backgroundColor: "white",
       py: "10px",
       px: "16px",
@@ -231,8 +231,8 @@ function ue({
       w: "100%",
       ...B
     },
-    f.showPageSummary && n.createElement(
-      S,
+    m.showPageSummary && n.createElement(
+      k,
       { spacing: 2, whiteSpace: "nowrap" },
       n.createElement(P, { fontWeight: "bold" }, "صفحه"),
       n.createElement(P, null, a(i)),
@@ -240,7 +240,7 @@ function ue({
       n.createElement(P, null, a(u))
     ),
     n.createElement(
-      S,
+      k,
       { spacing: 2, alignItems: "center", justifyContent: "center" },
       n.createElement(j, {
         size: "md",
@@ -253,18 +253,18 @@ function ue({
         "aria-label": "صفحه قبلی"
       }),
       r ? [
-        Z ? T(1) : null,
+        Z ? x(1) : null,
         E ? n.createElement(
           n.Fragment,
           { key: "input" },
           z()
-        ) : T(w, !0),
-        ee ? T(u) : null
+        ) : x(w, !0),
+        ee ? x(u) : null
       ] : [
         ...J.map(
-          (o) => T(o, i === o)
+          (o) => x(o, i === o)
         ),
-        f.showInput ? n.createElement(
+        m.showInput ? n.createElement(
           n.Fragment,
           { key: "input" },
           z()
@@ -281,8 +281,8 @@ function ue({
         "aria-label": "صفحه بعدی"
       })
     ),
-    f.showTotalCount && q && n.createElement(
-      S,
+    m.showTotalCount && q && n.createElement(
+      k,
       { spacing: 2, whiteSpace: "nowrap" },
       n.createElement(
         P,
@@ -295,14 +295,17 @@ function ue({
 }
 class ae extends HTMLElement {
   constructor() {
-    super(), this._props = {}, this._root = null;
+    super(), this._props = {}, this._root = null, this._unmountTimer = null;
   }
   connectedCallback() {
-    const { createRoot: e } = k();
+    this._unmountTimer && (clearTimeout(this._unmountTimer), this._unmountTimer = null);
+    const { createRoot: e } = I();
     this._root || (this._root = e(this)), this.renderComponent();
   }
   disconnectedCallback() {
-    this._root && (this._root.unmount(), this._root = null);
+    !this._root || this._unmountTimer || (this._unmountTimer = setTimeout(() => {
+      this._unmountTimer = null, this._root && (this._root.unmount(), this._root = null);
+    }, 0));
   }
   set componentProps(e) {
     this._props = e ?? {}, this.isConnected && this.renderComponent();
@@ -314,17 +317,17 @@ class ae extends HTMLElement {
     if (!this._root) return;
     const {
       React: e,
-      ChakraProvider: m,
-      theme: g,
-      chakraProviderProps: h
-    } = k(), { theme: v, chakraProviderProps: B, ...n } = this._props || {};
+      ChakraProvider: p,
+      theme: h,
+      chakraProviderProps: g
+    } = I(), { theme: v, chakraProviderProps: B, ...n } = this._props || {};
     this._root.render(
       e.createElement(
-        m,
+        p,
         {
-          theme: v || g,
+          theme: v || h,
           resetCSS: !1,
-          ...h || {},
+          ...g || {},
           ...B || {}
         },
         e.createElement(ue, n)
diff --git a/src/remote/ui/GBadge.remote.jsx b/src/remote/ui/GBadge.remote.jsx
index 144f9ed..c626063 100644
--- a/src/remote/ui/GBadge.remote.jsx
+++ b/src/remote/ui/GBadge.remote.jsx
@@ -50,9 +50,15 @@ class GBadgeElement extends HTMLElement {
 
     this._props = {};
     this._root = null;
+    this._unmountTimer = null;
   }
 
   connectedCallback() {
+    if (this._unmountTimer) {
+      clearTimeout(this._unmountTimer);
+      this._unmountTimer = null;
+    }
+
     const { createRoot } = getRemoteDeps();
 
     if (!this._root) {
@@ -63,10 +69,16 @@ class GBadgeElement extends HTMLElement {
   }
 
   disconnectedCallback() {
-    if (this._root) {
+    if (!this._root || this._unmountTimer) return;
+
+    this._unmountTimer = setTimeout(() => {
+      this._unmountTimer = null;
+
+      if (!this._root) return;
+
       this._root.unmount();
       this._root = null;
-    }
+    }, 0);
   }
 
   set componentProps(value) {
@@ -84,10 +96,16 @@ class GBadgeElement extends HTMLElement {
   renderComponent() {
     if (!this._root) return;
 
-    const { React, ChakraProvider, Badge, theme: defaultTheme, chakraProviderProps: defaultProviderProps } =
-      getRemoteDeps();
+    const {
+      React,
+      ChakraProvider,
+      Badge,
+      theme: defaultTheme,
+      chakraProviderProps: defaultProviderProps,
+    } = getRemoteDeps();
 
-    const { children, theme, chakraProviderProps, badgeProps } = normalizeBadgeProps(this._props);
+    const { children, theme, chakraProviderProps, badgeProps } =
+      normalizeBadgeProps(this._props);
 
     this._root.render(
       React.createElement(
diff --git a/src/remote/ui/Pagination.remote.jsx b/src/remote/ui/Pagination.remote.jsx
index 679db76..59cb790 100644
--- a/src/remote/ui/Pagination.remote.jsx
+++ b/src/remote/ui/Pagination.remote.jsx
@@ -496,9 +496,15 @@ class PaginationElement extends HTMLElement {
 
     this._props = {};
     this._root = null;
+    this._unmountTimer = null;
   }
 
   connectedCallback() {
+    if (this._unmountTimer) {
+      clearTimeout(this._unmountTimer);
+      this._unmountTimer = null;
+    }
+
     const { createRoot } = getRemoteDeps();
 
     if (!this._root) {
@@ -509,10 +515,16 @@ class PaginationElement extends HTMLElement {
   }
 
   disconnectedCallback() {
-    if (this._root) {
+    if (!this._root || this._unmountTimer) return;
+
+    this._unmountTimer = setTimeout(() => {
+      this._unmountTimer = null;
+
+      if (!this._root) return;
+
       this._root.unmount();
       this._root = null;
-    }
+    }, 0);
   }
 
   set componentProps(value) {