misraj-mushaf-renderer 1.3.17 → 1.3.21

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import { jsx as c, jsxs as L, Fragment as r4 } from "react/jsx-runtime";
-import x4, { useState as j, useEffect as A0, useContext as w0, createContext as P0, useRef as t4, useCallback as K, useMemo as Q, memo as a4 } from "react";
+import x4, { useState as j, useEffect as A0, useContext as w0, createContext as P0, useRef as t4, useCallback as $, useMemo as Q, memo as a4 } from "react";
 var J = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
 function n4(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
@@ -78,7 +78,7 @@ 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, h] = j(null), [f, l] = j(null), [g, q] = j(null), [p, v] = j(null), _ = t4(null), d = s && i, w = K(async () => {
+  const s = z4("(min-width: 1024px)"), [u, o] = j(n), [C, h] = j(null), [f, l] = j(null), [g, q] = j(null), [p, v] = j(null), _ = t4(null), d = s && i, w = $(async () => {
     _.current?.abort();
     const A = new AbortController();
     _.current = A, v(null);
@@ -99,9 +99,9 @@ const i4 = P0(void 0), s4 = P0(void 0), j4 = ({
     }
   }, [t, r, d]);
   A0(() => (w(), () => _.current?.abort()), [w]);
-  const y = K(() => {
+  const y = $(() => {
     o((A) => A < 10 ? A + 1 : A);
-  }, []), P = K(() => {
+  }, []), P = $(() => {
     o((A) => A > 3 ? A - 1 : A);
   }, []), T = Q(
     () => ({
@@ -151,7 +151,7 @@ const i4 = P0(void 0), s4 = P0(void 0), j4 = ({
   green: "#3E9257",
   blue: "#2A5D73",
   sepia: "#A97C50"
-}, u4 = P0(void 0), $ = () => {
+}, u4 = P0(void 0), F = () => {
   const e = w0(u4);
   if (!e)
     throw new Error("useThemeContext must be used within a ThemeProvider");
@@ -181,27 +181,27 @@ const i4 = P0(void 0), s4 = P0(void 0), j4 = ({
     styleOverride: t
   };
   return /* @__PURE__ */ c(u4.Provider, { value: n, children: e });
-}, K4 = "Line-line", $4 = "Line-container", k4 = "Line-mobileInline", F = {
+}, K4 = "Line-line", $4 = "Line-container", k4 = "Line-mobileInline", V = {
   line: K4,
   container: $4,
   mobileInline: k4
 }, U4 = "ChapterHeader-bismillahContainer", W4 = "ChapterHeader-header", T0 = {
   bismillahContainer: U4,
   header: W4
-}, J4 = "ChapterIconContainer-iconContainer", Q4 = "ChapterIconContainer-border", X4 = "ChapterIconContainer-blueBorder", Y4 = "ChapterIconContainer-sepiaBorder", V = {
+}, J4 = "ChapterIconContainer-iconContainer", Q4 = "ChapterIconContainer-border", X4 = "ChapterIconContainer-blueBorder", Y4 = "ChapterIconContainer-sepiaBorder", G = {
   iconContainer: J4,
   border: Q4,
   blueBorder: X4,
   sepiaBorder: Y4
 }, E0 = ({ id: e }) => /* @__PURE__ */ c("span", { translate: "no", children: e?.padStart(3, "0") }), e6 = ({ chapterId: e, hasSurahPrefix: r = !0 }) => {
-  const { hasBorder: t } = N(), { themeProps: n, styleOverride: a } = $(), { borderColor: i } = n;
+  const { hasBorder: t } = N(), { themeProps: n, styleOverride: a } = F(), { borderColor: i } = n;
   return /* @__PURE__ */ L(
     "span",
     {
-      className: S(V.iconContainer, V.iconContainerLarge, {
-        [V.border]: t,
-        [V.blueBorder]: t && i === "blue",
-        [V.sepiaBorder]: t && i === "sepia"
+      className: S(G.iconContainer, G.iconContainerLarge, {
+        [G.border]: t,
+        [G.blueBorder]: t && i === "blue",
+        [G.sepiaBorder]: t && i === "sepia"
       }),
       style: { ...a?.ChapterIconContainer?.iconContainer },
       children: [
@@ -357,12 +357,12 @@ const q6 = (e, r, t, n = !1) => e === f4.IndoPak ? `${e}_${t}-font-size-${r}` :
   }
   return r;
 }, A6 = "data-word-location", w6 = ({ word: e, onWordClick: r, onWordHover: t }) => {
-  const { selectedVerse: n, dataId: a } = N(), { styleOverride: i } = $(), s = b6(e.verse_key, e.position), u = /* @__PURE__ */ c("span", { className: z.UthmanicHafs, children: e.text }), o = n?.numberInSurah === e.verse.numberInSurah, C = T6(a), h = K(
+  const { selectedVerse: n, dataId: a } = N(), { styleOverride: i } = F(), s = b6(e.verse_key, e.position), u = /* @__PURE__ */ c("span", { className: z.UthmanicHafs, children: e.text }), o = n?.numberInSurah === e.verse.numberInSurah, C = T6(a), h = $(
     (l) => {
       r && r(e, l);
     },
     [r, e]
-  ), f = K(
+  ), f = $(
     (l) => {
       t && t(e, l);
     },
@@ -396,7 +396,7 @@ const q6 = (e, r, t, n = !1) => e === f4.IndoPak ? `${e}_${t}-font-size-${r}` :
   onWordClick: n,
   onWordHover: a
 }) => {
-  const { fontScale: i } = N(), { styleOverride: s } = $(), [u] = e, {
+  const { fontScale: i } = N(), { styleOverride: s } = F(), [u] = e, {
     line_number: o,
     page_number: C,
     location: h,
@@ -455,9 +455,9 @@ const q6 = (e, r, t, n = !1) => e === f4.IndoPak ? `${e}_${t}-font-size-${r}` :
     "div",
     {
       id: e,
-      className: S(F.container, {
-        [F.highlighted]: f,
-        [F.mobileInline]: t
+      className: S(V.container, {
+        [V.highlighted]: f,
+        [V.mobileInline]: t
       }),
       role: "button",
       tabIndex: 0,
@@ -466,8 +466,8 @@ const q6 = (e, r, t, n = !1) => e === f4.IndoPak ? `${e}_${t}-font-size-${r}` :
         /* @__PURE__ */ c(
           "div",
           {
-            className: S(F.line, {
-              [F.mobileInline]: t
+            className: S(V.line, {
+              [V.mobileInline]: t
             }),
             children: /* @__PURE__ */ c(
               R6,
@@ -769,7 +769,7 @@ function E() {
   var e = Array.isArray;
   return S1 = e, S1;
 }
-var G = { exports: {} }, x1, u9;
+var Z = { exports: {} }, x1, u9;
 function se() {
   if (u9) return x1;
   u9 = 1;
@@ -778,13 +778,13 @@ function se() {
   }
   return x1 = e, x1;
 }
-G.exports;
+Z.exports;
 var o9;
 function _4() {
   return o9 || (o9 = 1, (function(e, r) {
     var t = B(), n = se(), a = r && !r.nodeType && r, i = a && !0 && e && !e.nodeType && e, s = i && i.exports === a, u = s ? t.Buffer : void 0, o = u ? u.isBuffer : void 0, C = o || n;
     e.exports = C;
-  })(G, G.exports)), G.exports;
+  })(Z, Z.exports)), Z.exports;
 }
 var H1, c9;
 function p4() {
@@ -829,8 +829,8 @@ function oe() {
   }
   return L1 = e, L1;
 }
-var Z = { exports: {} };
-Z.exports;
+var K = { exports: {} };
+K.exports;
 var l9;
 function ce() {
   return l9 || (l9 = 1, (function(e, r) {
@@ -842,7 +842,7 @@ function ce() {
       }
     })();
     e.exports = u;
-  })(Z, Z.exports)), Z.exports;
+  })(K, K.exports)), K.exports;
 }
 var B1, d9;
 function y4() {
@@ -2033,10 +2033,13 @@ const H5 = /* @__PURE__ */ n4(x5), I5 = (e) => {
   green: O5,
   blue: L5,
   sepia: B5
-}, z5 = ({ value: e, borderColor: r }) => /* @__PURE__ */ L("div", { className: R.pageNumberContainer, children: [
-  /* @__PURE__ */ c("img", { src: E5[r || "green"] }),
-  /* @__PURE__ */ c("p", { className: R.pageNumber, children: N5(`${e}`) })
-] }), N5 = (e) => e.split("").map((t) => D5[t]).join(""), D5 = {
+}, z5 = ({ value: e, borderColor: r }) => {
+  const { styleOverride: t } = F();
+  return /* @__PURE__ */ L("div", { className: R.pageNumberContainer, children: [
+    /* @__PURE__ */ c("img", { src: E5[r || "green"] }),
+    /* @__PURE__ */ c("p", { className: R.pageNumber, style: t?.Page?.pageNumber, children: N5(`${e}`) })
+  ] });
+}, N5 = (e) => e.split("").map((t) => D5[t]).join(""), D5 = {
   0: "۰",
   1: "۱",
   2: "۲",
@@ -2435,7 +2438,7 @@ const H5 = /* @__PURE__ */ n4(x5), I5 = (e) => {
   onWordHover: a,
   pageStyleOverride: i
 }) => {
-  const { fontScale: s, hasBorder: u } = N(), { themeProps: o, styleOverride: C } = $(), { borderColor: h } = o, f = Q(
+  const { fontScale: s, hasBorder: u } = N(), { themeProps: o, styleOverride: C } = F(), { borderColor: h } = o, f = Q(
     () => e && e.length ? I5(e) : {},
     [e]
   ), l = s > 3, g = e && e.length ? e[0] : void 0, q = r === 1 || r === 2;
@@ -2531,7 +2534,7 @@ const H5 = /* @__PURE__ */ n4(x5), I5 = (e) => {
     }
   );
 }, W5 = ({ onWordClick: e, onWordHover: r }) => {
-  const { ayat: t, nextPageAyat: n, pageNumber: a } = N(), { styleOverride: i } = $(), { isTwoPagesView: s } = N(), u = Number(a);
+  const { ayat: t, nextPageAyat: n, pageNumber: a } = N(), { styleOverride: i } = F(), { isTwoPagesView: s } = N(), u = Number(a);
   return /* @__PURE__ */ c(
     "div",
     {