misraj-mushaf-renderer 1.2.4 → 1.3.1

package/dist/index.es.js

@@ -44,7 +44,7 @@ function x4() {
   })(i1)), i1.exports;
 }
 var I4 = x4();
-const H = /* @__PURE__ */ n4(I4), O4 = "MushafReader-twoPagesRow", L4 = {
+const S = /* @__PURE__ */ n4(I4), O4 = "MushafReader-twoPagesRow", L4 = {
   twoPagesRow: O4
 }, B4 = "ReadingView-container", E4 = {
   container: B4
@@ -78,53 +78,53 @@ const i4 = P0(void 0), s4 = P0(void 0), j4 = ({
   hasBorder: a = !0,
   initialIsTwoPagesView: i = !1
 }) => {
-  const s = z4("(min-width: 1024px)"), [u, o] = j(n), [C, l] = j(null), [f, h] = j(null), [d, T] = j(null), [p, _] = j(null), v = t4(null), g = s && i, w = K(async () => {
-    v.current?.abort();
+  const s = z4("(min-width: 1024px)"), [u, o] = j(n), [C, l] = j(null), [f, h] = j(null), [g, q] = j(null), [p, v] = j(null), _ = t4(null), d = s && i, w = K(async () => {
+    _.current?.abort();
     const A = new AbortController();
-    v.current = A, _(null);
+    _.current = A, v(null);
     try {
-      const M = B0(t, r, A.signal), x = g ? B0(t + 1, r, A.signal) : Promise.resolve(void 0), m = await M;
-      let S;
-      if (g)
+      const M = B0(t, r, A.signal), x = d ? B0(t + 1, r, A.signal) : Promise.resolve(void 0), m = await M;
+      let H;
+      if (d)
         try {
-          S = await x;
+          H = await x;
         } catch {
-          S = void 0;
+          H = void 0;
         }
-      h(m), T(S);
+      h(m), q(H);
     } catch (M) {
       if (M?.name === "AbortError") return;
-      _(M instanceof Error ? M : new Error("Unknown error")), h(null), T(null);
+      v(M instanceof Error ? M : new Error("Unknown error")), h(null), q(null);
     } finally {
     }
-  }, [t, r, g]);
-  A0(() => (w(), () => v.current?.abort()), [w]);
+  }, [t, r, d]);
+  A0(() => (w(), () => _.current?.abort()), [w]);
   const y = K(() => {
     o((A) => A < 10 ? A + 1 : A);
   }, []), P = K(() => {
     o((A) => A > 3 ? A - 1 : A);
-  }, []), q = Q(
+  }, []), T = Q(
     () => ({
       fontScale: u,
       selectedVerse: C,
       ayat: f,
-      nextPageAyat: d,
+      nextPageAyat: g,
       error: p,
       pageNumber: t,
       dataId: r,
       hasBorder: a,
-      isTwoPagesView: g
+      isTwoPagesView: d
     }),
     [
       u,
       C,
       f,
-      d,
+      g,
       p,
       t,
       r,
       a,
-      g
+      d
     ]
   ), b = Q(
     () => ({
@@ -135,7 +135,7 @@ const i4 = P0(void 0), s4 = P0(void 0), j4 = ({
     }),
     [y, P, l, w]
   );
-  return /* @__PURE__ */ c(i4.Provider, { value: q, children: /* @__PURE__ */ c(s4.Provider, { value: b, children: e }) });
+  return /* @__PURE__ */ c(i4.Provider, { value: T, children: /* @__PURE__ */ c(s4.Provider, { value: b, children: e }) });
 }, F4 = () => {
   const e = w0(i4);
   if (!e) throw new Error("useMushafPageState must be used within a MushafPageProvider");
@@ -198,7 +198,7 @@ const i4 = P0(void 0), s4 = P0(void 0), j4 = ({
   return /* @__PURE__ */ O(
     "span",
     {
-      className: H(V.iconContainer, V.iconContainerLarge, {
+      className: S(V.iconContainer, V.iconContainerLarge, {
         [V.border]: t,
         [V.blueBorder]: t && i === "blue",
         [V.sepiaBorder]: t && i === "sepia"
@@ -374,7 +374,7 @@ const b6 = (e, r, t, n = !1) => e === f4.IndoPak ? `${e}_${t}-font-size-${r}` :
       role: "button",
       tabIndex: 0,
       [q6]: s,
-      className: H(z.container, z[C], {
+      className: S(z.container, z[C], {
         [z.highlightOnHover]: !0,
         [z.colored]: !o,
         [z.highlighted]: o
@@ -402,36 +402,36 @@ const b6 = (e, r, t, n = !1) => e === f4.IndoPak ? `${e}_${t}-font-size-${r}` :
   } = u, h = Q(
     () => c6(C, o),
     [C, o]
-  ), d = v6(l), T = i > 3, { chapterId: p } = d, _ = t ? "h1" : "div", v = b6(y6, i, l4.FifteenLines, !0);
+  ), g = v6(l), q = i > 3, { chapterId: p } = g, v = t ? "h1" : "div", _ = b6(y6, i, l4.FifteenLines, !0);
   return /* @__PURE__ */ c(r4, { children: /* @__PURE__ */ c(
-    _,
+    v,
     {
       "data-verse-key": f,
       "data-page": C,
       "data-chapter-id": p,
-      className: H(E.verseTextContainer, {
-        [E.largeMushafTextLayoutContainer]: T,
+      className: S(E.verseTextContainer, {
+        [E.largeMushafTextLayoutContainer]: q,
         [E.highlighted]: r,
-        [E[v]]: !0
+        [E[_]]: !0
       }),
       style: s?.VerseText?.highlighted,
       children: /* @__PURE__ */ c(
         "div",
         {
           translate: "no",
-          className: H(E.verseText, {
-            [E.largeMushafTextLayout]: T,
+          className: S(E.verseText, {
+            [E.largeMushafTextLayout]: q,
             [E.verseTextCenterAlign]: h,
             [E.verseTextSpaceBetween]: !h
           }),
-          children: e?.map((g) => /* @__PURE__ */ c(
+          children: e?.map((d) => /* @__PURE__ */ c(
             A6,
             {
-              word: g,
+              word: d,
               onWordClick: n,
               onWordHover: a
             },
-            g.location
+            d.location
           ))
         }
       )
@@ -451,7 +451,7 @@ const b6 = (e, r, t, n = !1) => e === f4.IndoPak ? `${e}_${t}-font-size-${r}` :
     "div",
     {
       id: e,
-      className: H(F.container, {
+      className: S(F.container, {
         [F.highlighted]: f,
         [F.mobileInline]: t
       }),
@@ -462,7 +462,7 @@ const b6 = (e, r, t, n = !1) => e === f4.IndoPak ? `${e}_${t}-font-size-${r}` :
         /* @__PURE__ */ c(
           "div",
           {
-            className: H(F.line, {
+            className: S(F.line, {
               [F.mobileInline]: t
             }),
             children: /* @__PURE__ */ c(
@@ -628,8 +628,8 @@ function W6() {
   function f(h) {
     if (!t(h) || r(h))
       return !1;
-    var d = e(h) ? l : i;
-    return d.test(n(h));
+    var g = e(h) ? l : i;
+    return g.test(n(h));
   }
   return _1 = f, _1;
 }
@@ -807,12 +807,12 @@ var O1, f9;
 function ie() {
   if (f9) return O1;
   f9 = 1;
-  var e = k(), r = R0(), t = U(), n = "[object Arguments]", a = "[object Array]", i = "[object Boolean]", s = "[object Date]", u = "[object Error]", o = "[object Function]", C = "[object Map]", l = "[object Number]", f = "[object Object]", h = "[object RegExp]", d = "[object Set]", T = "[object String]", p = "[object WeakMap]", _ = "[object ArrayBuffer]", v = "[object DataView]", g = "[object Float32Array]", w = "[object Float64Array]", y = "[object Int8Array]", P = "[object Int16Array]", q = "[object Int32Array]", b = "[object Uint8Array]", A = "[object Uint8ClampedArray]", M = "[object Uint16Array]", x = "[object Uint32Array]", m = {};
-  m[g] = m[w] = m[y] = m[P] = m[q] = m[b] = m[A] = m[M] = m[x] = !0, m[n] = m[a] = m[_] = m[i] = m[v] = m[s] = m[u] = m[o] = m[C] = m[l] = m[f] = m[h] = m[d] = m[T] = m[p] = !1;
-  function S(I) {
+  var e = k(), r = R0(), t = U(), n = "[object Arguments]", a = "[object Array]", i = "[object Boolean]", s = "[object Date]", u = "[object Error]", o = "[object Function]", C = "[object Map]", l = "[object Number]", f = "[object Object]", h = "[object RegExp]", g = "[object Set]", q = "[object String]", p = "[object WeakMap]", v = "[object ArrayBuffer]", _ = "[object DataView]", d = "[object Float32Array]", w = "[object Float64Array]", y = "[object Int8Array]", P = "[object Int16Array]", T = "[object Int32Array]", b = "[object Uint8Array]", A = "[object Uint8ClampedArray]", M = "[object Uint16Array]", x = "[object Uint32Array]", m = {};
+  m[d] = m[w] = m[y] = m[P] = m[T] = m[b] = m[A] = m[M] = m[x] = !0, m[n] = m[a] = m[v] = m[i] = m[_] = m[s] = m[u] = m[o] = m[C] = m[l] = m[f] = m[h] = m[g] = m[q] = m[p] = !1;
+  function H(I) {
     return t(I) && r(I.length) && !!m[e(I)];
   }
-  return O1 = S, O1;
+  return O1 = H, O1;
 }
 var L1, l9;
 function se() {
@@ -853,14 +853,14 @@ function oe() {
   g9 = 1;
   var e = te(), r = v4(), t = B(), n = _4(), a = p4(), i = y4(), s = Object.prototype, u = s.hasOwnProperty;
   function o(C, l) {
-    var f = t(C), h = !f && r(C), d = !f && !h && n(C), T = !f && !h && !d && i(C), p = f || h || d || T, _ = p ? e(C.length, String) : [], v = _.length;
-    for (var g in C)
-      (l || u.call(C, g)) && !(p && // Safari 9 has enumerable `arguments.length` in strict mode.
-      (g == "length" || // Node.js 0.10 has enumerable non-index properties on buffers.
-      d && (g == "offset" || g == "parent") || // PhantomJS 2 has enumerable non-index properties on typed arrays.
-      T && (g == "buffer" || g == "byteLength" || g == "byteOffset") || // Skip index properties.
-      a(g, v))) && _.push(g);
-    return _;
+    var f = t(C), h = !f && r(C), g = !f && !h && n(C), q = !f && !h && !g && i(C), p = f || h || g || q, v = p ? e(C.length, String) : [], _ = v.length;
+    for (var d in C)
+      (l || u.call(C, d)) && !(p && // Safari 9 has enumerable `arguments.length` in strict mode.
+      (d == "length" || // Node.js 0.10 has enumerable non-index properties on buffers.
+      g && (d == "offset" || d == "parent") || // PhantomJS 2 has enumerable non-index properties on typed arrays.
+      q && (d == "buffer" || d == "byteLength" || d == "byteOffset") || // Skip index properties.
+      a(d, _))) && v.push(d);
+    return v;
   }
   return E1 = o, E1;
 }
@@ -1366,21 +1366,21 @@ function T4() {
   u3 = 1;
   var e = Fe(), r = Ve(), t = Ge(), n = 1, a = 2;
   function i(s, u, o, C, l, f) {
-    var h = o & n, d = s.length, T = u.length;
-    if (d != T && !(h && T > d))
+    var h = o & n, g = s.length, q = u.length;
+    if (g != q && !(h && q > g))
       return !1;
-    var p = f.get(s), _ = f.get(u);
-    if (p && _)
-      return p == u && _ == s;
-    var v = -1, g = !0, w = o & a ? new e() : void 0;
-    for (f.set(s, u), f.set(u, s); ++v < d; ) {
-      var y = s[v], P = u[v];
+    var p = f.get(s), v = f.get(u);
+    if (p && v)
+      return p == u && v == s;
+    var _ = -1, d = !0, w = o & a ? new e() : void 0;
+    for (f.set(s, u), f.set(u, s); ++_ < g; ) {
+      var y = s[_], P = u[_];
       if (C)
-        var q = h ? C(P, y, v, u, s, f) : C(y, P, v, s, u, f);
-      if (q !== void 0) {
-        if (q)
+        var T = h ? C(P, y, _, u, s, f) : C(y, P, _, s, u, f);
+      if (T !== void 0) {
+        if (T)
           continue;
-        g = !1;
+        d = !1;
         break;
       }
       if (w) {
@@ -1388,15 +1388,15 @@ function T4() {
           if (!t(w, A) && (y === b || l(y, b, o, C, f)))
             return w.push(A);
         })) {
-          g = !1;
+          d = !1;
           break;
         }
       } else if (!(y === P || l(y, P, o, C, f))) {
-        g = !1;
+        d = !1;
         break;
       }
     }
-    return f.delete(s), f.delete(u), g;
+    return f.delete(s), f.delete(u), d;
   }
   return R2 = i, R2;
 }
@@ -1435,39 +1435,39 @@ var I2, f3;
 function ke() {
   if (f3) return I2;
   f3 = 1;
-  var e = X(), r = Ze(), t = m4(), n = T4(), a = Ke(), i = $e(), s = 1, u = 2, o = "[object Boolean]", C = "[object Date]", l = "[object Error]", f = "[object Map]", h = "[object Number]", d = "[object RegExp]", T = "[object Set]", p = "[object String]", _ = "[object Symbol]", v = "[object ArrayBuffer]", g = "[object DataView]", w = e ? e.prototype : void 0, y = w ? w.valueOf : void 0;
-  function P(q, b, A, M, x, m, S) {
+  var e = X(), r = Ze(), t = m4(), n = T4(), a = Ke(), i = $e(), s = 1, u = 2, o = "[object Boolean]", C = "[object Date]", l = "[object Error]", f = "[object Map]", h = "[object Number]", g = "[object RegExp]", q = "[object Set]", p = "[object String]", v = "[object Symbol]", _ = "[object ArrayBuffer]", d = "[object DataView]", w = e ? e.prototype : void 0, y = w ? w.valueOf : void 0;
+  function P(T, b, A, M, x, m, H) {
     switch (A) {
-      case g:
-        if (q.byteLength != b.byteLength || q.byteOffset != b.byteOffset)
+      case d:
+        if (T.byteLength != b.byteLength || T.byteOffset != b.byteOffset)
           return !1;
-        q = q.buffer, b = b.buffer;
-      case v:
-        return !(q.byteLength != b.byteLength || !m(new r(q), new r(b)));
+        T = T.buffer, b = b.buffer;
+      case _:
+        return !(T.byteLength != b.byteLength || !m(new r(T), new r(b)));
       case o:
       case C:
       case h:
-        return t(+q, +b);
+        return t(+T, +b);
       case l:
-        return q.name == b.name && q.message == b.message;
-      case d:
+        return T.name == b.name && T.message == b.message;
+      case g:
       case p:
-        return q == b + "";
+        return T == b + "";
       case f:
         var I = a;
-      case T:
+      case q:
         var n1 = M & s;
-        if (I || (I = i), q.size != b.size && !n1)
+        if (I || (I = i), T.size != b.size && !n1)
           return !1;
-        var W = S.get(q);
+        var W = H.get(T);
         if (W)
           return W == b;
-        M |= u, S.set(q, b);
-        var S4 = n(I(q), I(b), M, x, m, S);
-        return S.delete(q), S4;
-      case _:
+        M |= u, H.set(T, b);
+        var S4 = n(I(T), I(b), M, x, m, H);
+        return H.delete(T), S4;
+      case v:
         if (y)
-          return y.call(q) == y.call(b);
+          return y.call(T) == y.call(b);
     }
     return !1;
   }
@@ -1544,29 +1544,29 @@ function e5() {
   p3 = 1;
   var e = Ye(), r = 1, t = Object.prototype, n = t.hasOwnProperty;
   function a(i, s, u, o, C, l) {
-    var f = u & r, h = e(i), d = h.length, T = e(s), p = T.length;
-    if (d != p && !f)
+    var f = u & r, h = e(i), g = h.length, q = e(s), p = q.length;
+    if (g != p && !f)
       return !1;
-    for (var _ = d; _--; ) {
-      var v = h[_];
-      if (!(f ? v in s : n.call(s, v)))
+    for (var v = g; v--; ) {
+      var _ = h[v];
+      if (!(f ? _ in s : n.call(s, _)))
         return !1;
     }
-    var g = l.get(i), w = l.get(s);
-    if (g && w)
-      return g == s && w == i;
+    var d = l.get(i), w = l.get(s);
+    if (d && w)
+      return d == s && w == i;
     var y = !0;
     l.set(i, s), l.set(s, i);
-    for (var P = f; ++_ < d; ) {
-      v = h[_];
-      var q = i[v], b = s[v];
+    for (var P = f; ++v < g; ) {
+      _ = h[v];
+      var T = i[_], b = s[_];
       if (o)
-        var A = f ? o(b, q, v, s, i, l) : o(q, b, v, i, s, l);
-      if (!(A === void 0 ? q === b || C(q, b, u, o, l) : A)) {
+        var A = f ? o(b, T, _, s, i, l) : o(T, b, _, i, s, l);
+      if (!(A === void 0 ? T === b || C(T, b, u, o, l) : A)) {
         y = !1;
         break;
       }
-      P || (P = v == "constructor");
+      P || (P = _ == "constructor");
     }
     if (y && !P) {
       var M = i.constructor, x = s.constructor;
@@ -1608,51 +1608,51 @@ var Z2, T3;
 function i5() {
   if (T3) return Z2;
   T3 = 1;
-  var e = r5(), r = H0(), t = t5(), n = a5(), a = n5(), i = k(), s = g4(), u = "[object Map]", o = "[object Object]", C = "[object Promise]", l = "[object Set]", f = "[object WeakMap]", h = "[object DataView]", d = s(e), T = s(r), p = s(t), _ = s(n), v = s(a), g = i;
-  return (e && g(new e(new ArrayBuffer(1))) != h || r && g(new r()) != u || t && g(t.resolve()) != C || n && g(new n()) != l || a && g(new a()) != f) && (g = function(w) {
-    var y = i(w), P = y == o ? w.constructor : void 0, q = P ? s(P) : "";
-    if (q)
-      switch (q) {
-        case d:
+  var e = r5(), r = H0(), t = t5(), n = a5(), a = n5(), i = k(), s = g4(), u = "[object Map]", o = "[object Object]", C = "[object Promise]", l = "[object Set]", f = "[object WeakMap]", h = "[object DataView]", g = s(e), q = s(r), p = s(t), v = s(n), _ = s(a), d = i;
+  return (e && d(new e(new ArrayBuffer(1))) != h || r && d(new r()) != u || t && d(t.resolve()) != C || n && d(new n()) != l || a && d(new a()) != f) && (d = function(w) {
+    var y = i(w), P = y == o ? w.constructor : void 0, T = P ? s(P) : "";
+    if (T)
+      switch (T) {
+        case g:
           return h;
-        case T:
+        case q:
           return u;
         case p:
           return C;
-        case _:
-          return l;
         case v:
+          return l;
+        case _:
           return f;
       }
     return y;
-  }), Z2 = g, Z2;
+  }), Z2 = d, Z2;
 }
 var K2, A3;
 function s5() {
   if (A3) return K2;
   A3 = 1;
-  var e = q4(), r = T4(), t = ke(), n = e5(), a = i5(), i = B(), s = _4(), u = y4(), o = 1, C = "[object Arguments]", l = "[object Array]", f = "[object Object]", h = Object.prototype, d = h.hasOwnProperty;
-  function T(p, _, v, g, w, y) {
-    var P = i(p), q = i(_), b = P ? l : a(p), A = q ? l : a(_);
+  var e = q4(), r = T4(), t = ke(), n = e5(), a = i5(), i = B(), s = _4(), u = y4(), o = 1, C = "[object Arguments]", l = "[object Array]", f = "[object Object]", h = Object.prototype, g = h.hasOwnProperty;
+  function q(p, v, _, d, w, y) {
+    var P = i(p), T = i(v), b = P ? l : a(p), A = T ? l : a(v);
     b = b == C ? f : b, A = A == C ? f : A;
     var M = b == f, x = A == f, m = b == A;
     if (m && s(p)) {
-      if (!s(_))
+      if (!s(v))
         return !1;
       P = !0, M = !1;
     }
     if (m && !M)
-      return y || (y = new e()), P || u(p) ? r(p, _, v, g, w, y) : t(p, _, b, v, g, w, y);
-    if (!(v & o)) {
-      var S = M && d.call(p, "__wrapped__"), I = x && d.call(_, "__wrapped__");
-      if (S || I) {
-        var n1 = S ? p.value() : p, W = I ? _.value() : _;
-        return y || (y = new e()), w(n1, W, v, g, y);
+      return y || (y = new e()), P || u(p) ? r(p, v, _, d, w, y) : t(p, v, b, _, d, w, y);
+    if (!(_ & o)) {
+      var H = M && g.call(p, "__wrapped__"), I = x && g.call(v, "__wrapped__");
+      if (H || I) {
+        var n1 = H ? p.value() : p, W = I ? v.value() : v;
+        return y || (y = new e()), w(n1, W, _, d, y);
       }
     }
-    return m ? (y || (y = new e()), n(p, _, v, g, w, y)) : !1;
+    return m ? (y || (y = new e()), n(p, v, _, d, w, y)) : !1;
   }
-  return K2 = T, K2;
+  return K2 = q, K2;
 }
 var $2, w3;
 function A4() {
@@ -1680,15 +1680,15 @@ function u5() {
     }
     for (; ++C < l; ) {
       h = u[C];
-      var d = h[0], T = i[d], p = h[1];
+      var g = h[0], q = i[g], p = h[1];
       if (f && h[2]) {
-        if (T === void 0 && !(d in i))
+        if (q === void 0 && !(g in i))
           return !1;
       } else {
-        var _ = new e();
+        var v = new e();
         if (o)
-          var v = o(T, p, d, i, s, _);
-        if (!(v === void 0 ? r(p, T, t | n, o, _) : v))
+          var _ = o(q, p, g, i, s, v);
+        if (!(_ === void 0 ? r(p, q, t | n, o, v) : _))
           return !1;
       }
     }
@@ -1913,12 +1913,12 @@ function p5() {
   function s(u, o, C) {
     o = e(o, u);
     for (var l = -1, f = o.length, h = !1; ++l < f; ) {
-      var d = i(o[l]);
-      if (!(h = u != null && C(u, d)))
+      var g = i(o[l]);
+      if (!(h = u != null && C(u, g)))
         break;
-      u = u[d];
+      u = u[g];
     }
-    return h || ++l != f ? h : (f = u == null ? 0 : u.length, !!f && a(f) && n(d, f) && (t(u) || r(u)));
+    return h || ++l != f ? h : (f = u == null ? 0 : u.length, !!f && a(f) && n(g, f) && (t(u) || r(u)));
   }
   return f0 = s, f0;
 }
@@ -1939,8 +1939,8 @@ function b5() {
   var e = A4(), r = v5(), t = y5(), n = O0(), a = w4(), i = P4(), s = a1(), u = 1, o = 2;
   function C(l, f) {
     return n(l) && a(f) ? i(s(l), f) : function(h) {
-      var d = r(h, l);
-      return d === void 0 && d === f ? t(h, l) : e(f, d, u | o);
+      var g = r(h, l);
+      return g === void 0 && g === f ? t(h, l) : e(f, g, u | o);
     };
   }
   return h0 = C, h0;
@@ -2424,84 +2424,107 @@ const S5 = /* @__PURE__ */ n4(R5), H5 = (e) => {
   "الثامن والعشرون",
   "التاسع والعشرون",
   "الثلاثون"
-], z5 = (e) => `الجزء ${E5[e - 1]}`, m0 = ({ verses: e, pageNumber: r, pageIndex: t, onWordClick: n, onWordHover: a }) => {
-  const { fontScale: i, hasBorder: s } = D(), { themeProps: u, styleOverride: o } = $(), { borderColor: C } = u, l = Q(
+], z5 = (e) => `الجزء ${E5[e - 1]}`, m0 = ({
+  verses: e,
+  pageNumber: r,
+  pageIndex: t,
+  onWordClick: n,
+  onWordHover: a,
+  pageStyleOverride: i
+}) => {
+  const { fontScale: s, hasBorder: u } = D(), { themeProps: o, styleOverride: C } = $(), { borderColor: l } = o, f = Q(
     () => e && e.length ? H5(e) : {},
     [e]
-  ), f = i > 3, h = e && e.length ? e[0] : void 0, d = r === 1 || r === 2;
+  ), h = s > 3, g = e && e.length ? e[0] : void 0, q = r === 1 || r === 2;
   return /* @__PURE__ */ O(
     "div",
     {
       id: `page-${r}`,
-      className: H(R.container, {
-        [R.mobileCenterText]: f,
-        [R.border]: s,
-        [R.blueBorder]: s && C === "blue",
-        [R.sepiaBorder]: s && C === "sepia"
+      className: S(R.container, {
+        [R.mobileCenterText]: h
       }),
-      style: { position: "relative", ...o?.Page?.container },
+      style: {
+        ...C?.Page?.container,
+        ...i?.container
+      },
       children: [
-        s && /* @__PURE__ */ O(r4, { children: [
-          /* @__PURE__ */ c(
-            e4,
-            {
-              borderColor: C,
-              className: H(R.surah),
-              style: o?.Page?.surah,
-              children: h?.surah?.name
-            }
-          ),
-          /* @__PURE__ */ c(
-            e4,
-            {
-              borderColor: C,
-              className: H(R.juz),
-              style: o?.Page?.juz,
-              children: z5(h?.juz || 1)
-            }
-          )
-        ] }),
         /* @__PURE__ */ O(
           "div",
           {
-            className: H(o?.Page?.bottomBorder, {
-              [R.bottomBorder]: s && d,
-              [R.blueBottomBorder]: s && d && C === "blue",
-              [R.sepiaBottomBorder]: s && d && C === "sepia"
+            className: S({
+              [R.border]: u,
+              [R.blueBorder]: u && l === "blue",
+              [R.sepiaBorder]: u && l === "sepia"
             }),
-            style: { width: "100%" },
+            style: {
+              position: "relative",
+              ...i?.border
+            },
             children: [
-              d && /* @__PURE__ */ c(c4, { chapterId: `${r}`, pageNumber: r }),
+              u && /* @__PURE__ */ O(r4, { children: [
+                /* @__PURE__ */ c(
+                  e4,
+                  {
+                    borderColor: l,
+                    className: S(R.surah),
+                    style: C?.Page?.surah,
+                    children: g?.surah?.name
+                  }
+                ),
+                /* @__PURE__ */ c(
+                  e4,
+                  {
+                    borderColor: l,
+                    className: S(R.juz),
+                    style: C?.Page?.juz,
+                    children: z5(g?.juz || 1)
+                  }
+                )
+              ] }),
               /* @__PURE__ */ O(
                 "div",
                 {
-                  className: H(o?.Page?.firstTwoPagesBorder, {
-                    [R.firstTwoPagesBorder]: s && d,
-                    [R.blueFirstTwoPagesBorder]: s && d && C === "blue",
-                    [R.sepiaFirstTwoPagesBorder]: s && d && C === "sepia"
+                  className: S(C?.Page?.bottomBorder, {
+                    [R.bottomBorder]: u && q,
+                    [R.blueBottomBorder]: u && q && l === "blue",
+                    [R.sepiaBottomBorder]: u && q && l === "sepia"
                   }),
+                  style: { width: "100%" },
                   children: [
-                    r === 2 && /* @__PURE__ */ c("div", { className: T0.bismillahContainer, children: /* @__PURE__ */ c(o4, {}) }),
-                    Object.keys(l).map((T, p) => /* @__PURE__ */ c(
-                      S6,
+                    q && /* @__PURE__ */ c(c4, { chapterId: `${r}`, pageNumber: r }),
+                    /* @__PURE__ */ O(
+                      "div",
                       {
-                        pageIndex: t,
-                        lineIndex: p,
-                        lineKey: T,
-                        words: l[T],
-                        isBigTextLayout: f,
-                        onWordClick: n,
-                        onWordHover: a
-                      },
-                      T
-                    ))
+                        className: S(C?.Page?.firstTwoPagesBorder, {
+                          [R.firstTwoPagesBorder]: u && q,
+                          [R.blueFirstTwoPagesBorder]: u && q && l === "blue",
+                          [R.sepiaFirstTwoPagesBorder]: u && q && l === "sepia"
+                        }),
+                        children: [
+                          r === 2 && /* @__PURE__ */ c("div", { className: T0.bismillahContainer, children: /* @__PURE__ */ c(o4, {}) }),
+                          Object.keys(f).map((p, v) => /* @__PURE__ */ c(
+                            S6,
+                            {
+                              pageIndex: t,
+                              lineIndex: v,
+                              lineKey: p,
+                              words: f[p],
+                              isBigTextLayout: h,
+                              onWordClick: n,
+                              onWordHover: a
+                            },
+                            p
+                          ))
+                        ]
+                      }
+                    )
                   ]
                 }
               )
             ]
           }
         ),
-        s && /* @__PURE__ */ c(B5, { borderColor: C, value: r })
+        u && /* @__PURE__ */ c(B5, { borderColor: l, value: r })
       ]
     }
   );
@@ -2510,12 +2533,12 @@ const S5 = /* @__PURE__ */ n4(R5), H5 = (e) => {
   return /* @__PURE__ */ c(
     "div",
     {
-      className: H(E4.container),
+      className: S(E4.container),
       style: i?.ReadingView?.container,
       children: s && n ? /* @__PURE__ */ O(
         "div",
         {
-          className: H(L4.twoPagesRow),
+          className: S(L4.twoPagesRow),
           style: i?.MushafReader?.twoPagesRow,
           children: [
             /* @__PURE__ */ c(