@nypl/web-reader 3.2.5 → 4.1.0

package/dist/esm/index.js

@@ -1743,6 +1743,7 @@ var require_factoryWithThrowingShims = __commonJS({
       ;
       var ReactPropTypes = {
         array: shim,
+        bigint: shim,
         bool: shim,
         func: shim,
         number: shim,
@@ -13616,7 +13617,7 @@ var require_debounce = __commonJS({
 });
 
 // src/index.tsx
-import React68 from "react";
+import React81 from "react";
 
 // node_modules/@emotion/react/dist/emotion-react.browser.esm.js
 import * as React2 from "react";
@@ -34471,126 +34472,366 @@ function mergeThemeCustomizer(source, override, key, object) {
 }
 
 // src/ui/ErrorBoundary.tsx
-import * as React40 from "react";
+import * as React54 from "react";
 
 // src/ui/Header.tsx
-import React39 from "react";
+import React53 from "react";
 
-// node_modules/react-icons/lib/esm/iconBase.js
-import React29 from "react";
-
-// node_modules/react-icons/lib/esm/iconContext.js
+// src/ui/Button.tsx
 import React28 from "react";
-var DefaultContext = {
-  color: void 0,
-  size: void 0,
-  className: void 0,
-  style: void 0,
-  attr: void 0
-};
-var IconContext = React28.createContext && React28.createContext(DefaultContext);
+var Button2 = React28.forwardRef((props, ref) => {
+  return /* @__PURE__ */ React28.createElement(Button, __spreadValues({
+    ref,
+    variant: "solid"
+  }, props));
+});
+var Button_default = Button2;
 
-// node_modules/react-icons/lib/esm/iconBase.js
-var __assign2 = function() {
-  __assign2 = Object.assign || function(t2) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s)
-        if (Object.prototype.hasOwnProperty.call(s, p))
-          t2[p] = s[p];
-    }
-    return t2;
-  };
-  return __assign2.apply(this, arguments);
+// src/constants.ts
+var ReadiumWebpubContext = "http://readium.org/webpub/default.jsonld";
+var IS_DEV = false;
+var HEADER_HEIGHT = 48;
+var FOOTER_HEIGHT = 48;
+var CHROME_HEIGHT = HEADER_HEIGHT + FOOTER_HEIGHT;
+var DEFAULT_HEIGHT = `calc(100vh - ${CHROME_HEIGHT}px)`;
+var DEFAULT_SHOULD_GROW_WHEN_SCROLLING = true;
+var DEFAULT_SETTINGS = {
+  colorMode: "day",
+  isScrolling: false,
+  fontSize: 100,
+  fontFamily: "publisher"
 };
-var __rest2 = function(s, e) {
-  var t2 = {};
-  for (var p in s)
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-      t2[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function")
-    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-        t2[p[i]] = s[p[i]];
-    }
-  return t2;
+var FONT_DETAILS = {
+  publisher: {
+    heading: "Publisher's default font",
+    body: "Show the publisher's-specified fonts and layout choices in this ebook",
+    token: "body",
+    fontWeight: "light"
+  },
+  serif: {
+    heading: "Serif font",
+    body: "Georgia",
+    token: "serif",
+    fontWeight: "regular"
+  },
+  "sans-serif": {
+    heading: "Sans-serif font",
+    body: "Helvetica",
+    token: "sansSerif",
+    fontWeight: "regular"
+  },
+  "open-dyslexic": {
+    heading: "Dyslexic friendly font",
+    body: "OpenDyslexic",
+    token: "opendyslexic",
+    fontWeight: "regular"
+  }
 };
-function Tree2Element(tree) {
-  return tree && tree.map(function(node2, i) {
-    return React29.createElement(node2.tag, __assign2({
-      key: i
-    }, node2.attr), Tree2Element(node2.child));
-  });
-}
-function GenIcon(data) {
-  return function(props) {
-    return React29.createElement(IconBase, __assign2({
-      attr: __assign2({}, data.attr)
-    }, props), Tree2Element(data.child));
-  };
-}
-function IconBase(props) {
-  var elem = function(conf) {
-    var attr = props.attr, size3 = props.size, title = props.title, svgProps = __rest2(props, ["attr", "size", "title"]);
-    var computedSize = size3 || conf.size || "1em";
-    var className;
-    if (conf.className)
-      className = conf.className;
-    if (props.className)
-      className = (className ? className + " " : "") + props.className;
-    return React29.createElement("svg", __assign2({
-      stroke: "currentColor",
-      fill: "currentColor",
-      strokeWidth: "0"
-    }, conf.attr, attr, svgProps, {
-      className,
-      style: __assign2(__assign2({
-        color: props.color || conf.color
-      }, conf.style), props.style),
-      height: computedSize,
-      width: computedSize,
-      xmlns: "http://www.w3.org/2000/svg"
-    }), title && React29.createElement("title", null, title), props.children);
-  };
-  return IconContext !== void 0 ? React29.createElement(IconContext.Consumer, null, function(conf) {
-    return elem(conf);
-  }) : elem(DefaultContext);
-}
+var LOCAL_STORAGE_SETTINGS_KEY = "web-reader-settings";
+var LOCAL_STORAGE_LOCATIONS_KEY = "web-reader-locations";
 
-// node_modules/react-icons/md/index.esm.js
-function MdHome(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0z" } }, { "tag": "path", "attr": { "d": "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" } }] })(props);
-}
-function MdKeyboardArrowLeft(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z" } }] })(props);
-}
-function MdKeyboardArrowRight(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" } }] })(props);
-}
-function MdOutlineCheckCircle(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z" } }] })(props);
-}
-function MdOutlineSettings(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46a.5.5 0 00-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65A.488.488 0 0014 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1a.566.566 0 00-.18-.03c-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46a.5.5 0 00.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" } }] })(props);
-}
-function MdOutlineToc(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0zm0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M3 9h14V7H3v2zm0 4h14v-2H3v2zm0 4h14v-2H3v2zm16 0h2v-2h-2v2zm0-10v2h2V7h-2zm0 6h2v-2h-2v2z" } }] })(props);
-}
-function MdOutlineZoomIn(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zm.5-7H9v2H7v1h2v2h1v-2h2V9h-2z" } }] })(props);
-}
-function MdOutlineZoomOut(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z" } }] })(props);
-}
-function MdOutlineCancel(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z", "opacity": ".87" } }, { "tag": "path", "attr": { "d": "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z" } }] })(props);
-}
-function MdOutlineFullscreenExit(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" } }] })(props);
-}
-function MdOutlineFullscreen(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" } }] })(props);
-}
+// src/ui/icons/Continuous.tsx
+import React29 from "react";
+var Continuous = (props) => /* @__PURE__ */ React29.createElement(Icon, __spreadValues({
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 45 45"
+}, props), /* @__PURE__ */ React29.createElement("mask", {
+  id: "continuous",
+  width: "45",
+  height: "45",
+  x: "0",
+  y: "0",
+  maskUnits: "userSpaceOnUse"
+}, /* @__PURE__ */ React29.createElement("path", {
+  fill: "#D9D9D9",
+  d: "M0 0h45v45H0z"
+})), /* @__PURE__ */ React29.createElement("g", {
+  mask: "url(#continuous)"
+}, /* @__PURE__ */ React29.createElement("path", {
+  fill: props.fill,
+  d: "M10.172 31.875c-2.594 0-4.781-.922-6.563-2.766C1.83 27.266.938 25.047.938 22.453c0-2.594.89-4.797 2.671-6.61 1.782-1.812 3.97-2.718 6.563-2.718 1 0 1.969.172 2.906.516a7.226 7.226 0 0 1 2.531 1.593l4.5 4.032-1.03.937-4.313-3.937A7.456 7.456 0 0 0 12.562 15a7.01 7.01 0 0 0-2.39-.422c-2.188 0-4.031.766-5.531 2.297-1.5 1.531-2.25 3.39-2.25 5.578s.742 4.063 2.226 5.625c1.485 1.563 3.336 2.344 5.555 2.344.812 0 1.61-.14 2.39-.422a7.456 7.456 0 0 0 2.204-1.266l14.625-13.5a6.739 6.739 0 0 1 2.507-1.593 8.575 8.575 0 0 1 2.93-.516c2.594 0 4.781.906 6.563 2.719 1.78 1.812 2.672 4.015 2.672 6.61 0 2.593-.891 4.812-2.672 6.655-1.782 1.844-3.97 2.766-6.563 2.766-1 0-1.96-.188-2.883-.563a10.255 10.255 0 0 1-2.554-1.5l-4.407-4.03.985-1.032 4.312 3.984a5.669 5.669 0 0 0 2.133 1.29 7.587 7.587 0 0 0 2.414.398c2.188 0 4.031-.781 5.531-2.344 1.5-1.562 2.25-3.437 2.25-5.625 0-2.187-.757-4.047-2.273-5.578-1.516-1.531-3.352-2.297-5.508-2.297-.812 0-1.61.149-2.39.445-.782.297-1.5.711-2.157 1.243L15.61 29.813a6.494 6.494 0 0 1-2.507 1.57 8.941 8.941 0 0 1-2.93.492Z"
+})));
+var Continuous_default = Continuous;
+
+// src/ui/icons/Day.tsx
+import React30 from "react";
+var Day = (props) => /* @__PURE__ */ React30.createElement(Icon, __spreadValues({
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 41 41"
+}, props), /* @__PURE__ */ React30.createElement("path", {
+  fill: "#1C1B1F",
+  d: "M20.5 28c-2.094 0-3.867-.727-5.32-2.18C13.727 24.367 13 22.594 13 20.5c0-2.094.727-3.867 2.18-5.32C16.633 13.727 18.406 13 20.5 13c2.094 0 3.867.727 5.32 2.18C27.273 16.633 28 18.406 28 20.5c0 2.094-.727 3.867-2.18 5.32C24.367 27.273 22.594 28 20.5 28ZM1.516 21.203a.675.675 0 0 1-.493-.21.675.675 0 0 1-.21-.493c0-.219.07-.39.21-.516a.718.718 0 0 1 .493-.187h5.156c.187 0 .351.07.492.21.14.141.211.305.211.493 0 .219-.07.39-.21.516a.718.718 0 0 1-.493.187H1.516Zm32.812 0a.675.675 0 0 1-.492-.21.675.675 0 0 1-.211-.493c0-.219.07-.39.21-.516a.718.718 0 0 1 .493-.187h5.156c.188 0 .352.07.493.21.14.141.21.305.21.493 0 .219-.07.39-.21.516a.718.718 0 0 1-.493.187h-5.156ZM20.5 7.375c-.219 0-.39-.07-.516-.21a.718.718 0 0 1-.187-.493V1.516c0-.188.07-.352.21-.493.141-.14.305-.21.493-.21.219 0 .39.07.516.21.125.141.187.305.187.493v5.156c0 .187-.07.351-.21.492a.675.675 0 0 1-.493.211Zm0 32.813c-.219 0-.39-.07-.516-.211a.718.718 0 0 1-.187-.493v-5.156c0-.187.07-.351.21-.492.141-.14.305-.211.493-.211.219 0 .39.07.516.21.125.142.187.306.187.493v5.156c0 .188-.07.352-.21.493a.675.675 0 0 1-.493.21ZM10.234 11.172l-3-2.906a.542.542 0 0 1-.21-.493.961.961 0 0 1 .21-.539A.717.717 0 0 1 7.75 7c.188 0 .36.078.516.234l2.953 2.954a.717.717 0 0 1 .234.515c0 .188-.078.36-.234.516a.636.636 0 0 1-.469.187.717.717 0 0 1-.516-.234Zm22.5 22.594-2.953-2.953a.717.717 0 0 1-.234-.516c0-.188.094-.36.281-.516a.416.416 0 0 1 .422-.21c.188.015.36.1.516.257l3 2.906a.542.542 0 0 1 .21.493.962.962 0 0 1-.21.539.716.716 0 0 1-.516.234.716.716 0 0 1-.516-.234Zm-2.953-22.547a.517.517 0 0 1-.21-.469.817.817 0 0 1 .257-.516l2.906-3a.542.542 0 0 1 .493-.21.961.961 0 0 1 .539.21.717.717 0 0 1 .234.516c0 .188-.078.36-.234.516l-2.953 2.953a.717.717 0 0 1-.516.234.717.717 0 0 1-.516-.234ZM7.234 33.766A.717.717 0 0 1 7 33.25c0-.188.078-.36.234-.516l2.954-2.953a.717.717 0 0 1 .515-.234c.188 0 .36.078.516.234a.636.636 0 0 1 .187.469c0 .188-.078.36-.234.516l-2.906 3A.717.717 0 0 1 7.75 34a.717.717 0 0 1-.516-.234Z"
+}));
+var Day_default = Day;
+
+// src/ui/icons/EnlargeFont.tsx
+import React31 from "react";
+var EnlargeFont = (props) => /* @__PURE__ */ React31.createElement(Icon, __spreadValues({
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 46 46"
+}, props), /* @__PURE__ */ React31.createElement("mask", {
+  id: "enlargeFont",
+  width: "46",
+  height: "46",
+  x: "0",
+  y: "0",
+  maskUnits: "userSpaceOnUse"
+}, /* @__PURE__ */ React31.createElement("path", {
+  fill: "#D9D9D9",
+  d: "M0 0h45.639v45.639H0z"
+})), /* @__PURE__ */ React31.createElement("g", {
+  mask: "url(#enlargeFont)"
+}, /* @__PURE__ */ React31.createElement("path", {
+  fill: props.fill,
+  d: "M3.09 35.18 13.121 10.46h1.854L25.006 35.18h-2.282l-2.757-6.893H7.987L5.229 35.18H3.09Zm5.562-8.747h10.65L14.12 13.502h-.238l-5.23 12.93Zm26.29 3.042V23.77h-5.704V21.87h5.705v-5.705h1.901v5.705h5.705v1.901h-5.705v5.705h-1.901Z"
+})));
+var EnlargeFont_default = EnlargeFont;
+
+// src/ui/icons/Night.tsx
+import React32 from "react";
+var Night = (props) => /* @__PURE__ */ React32.createElement(Icon, __spreadValues({
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 45 45",
+  fill: "none"
+}, props), /* @__PURE__ */ React32.createElement("mask", {
+  id: "night",
+  width: "45",
+  height: "45",
+  x: "0",
+  y: "0",
+  maskUnits: "userSpaceOnUse"
+}, /* @__PURE__ */ React32.createElement("path", {
+  fill: "#D9D9D9",
+  d: "M0 0h45v45H0z"
+})), /* @__PURE__ */ React32.createElement("g", {
+  mask: "url(#night)"
+}, /* @__PURE__ */ React32.createElement("path", {
+  fill: "#FFF",
+  d: "M22.594 37.5c-4.157 0-7.696-1.46-10.617-4.383-2.922-2.922-4.383-6.46-4.383-10.617 0-3.813 1.242-7.11 3.726-9.89 2.485-2.782 5.555-4.422 9.211-4.922h.282c-.563.906-1 1.906-1.313 3a12.224 12.224 0 0 0-.469 3.374c0 3.344 1.172 6.18 3.516 8.508 2.344 2.328 5.172 3.492 8.484 3.492 1.157 0 2.282-.14 3.375-.421a11.62 11.62 0 0 0 3-1.22c-.031.095-.039.15-.023.165l.023.023c-.5 3.657-2.14 6.72-4.922 9.188-2.78 2.469-6.078 3.703-9.89 3.703Z"
+})));
+var Night_default = Night;
+
+// src/ui/icons/Paginated.tsx
+import React33 from "react";
+var Paginated = (props) => /* @__PURE__ */ React33.createElement(Icon, __spreadValues({
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 45 45"
+}, props), /* @__PURE__ */ React33.createElement("mask", {
+  id: "paginated",
+  width: "45",
+  height: "45",
+  x: "0",
+  y: "0",
+  maskUnits: "userSpaceOnUse"
+}, /* @__PURE__ */ React33.createElement("path", {
+  fill: "#D9D9D9",
+  d: "M0 0h45v45H0z"
+})), /* @__PURE__ */ React33.createElement("g", {
+  mask: "url(#paginated)"
+}, /* @__PURE__ */ React33.createElement("path", {
+  fill: props.fill,
+  d: "m30.563 32.438-1.032-1.032 8.907-8.906-8.907-8.906 1.032-1.031 9.984 9.937-9.984 9.938Zm-16.125 0L4.453 22.5l9.985-9.938 1.03 1.032L6.564 22.5l8.906 8.906-1.031 1.032ZM15 23.812c-.375 0-.688-.125-.938-.375a1.272 1.272 0 0 1-.374-.937c0-.344.124-.656.374-.938.25-.28.563-.421.938-.421.344 0 .656.14.938.422.28.28.421.593.421.937 0 .375-.14.688-.422.938-.28.25-.593.375-.937.375Zm7.5 0c-.375 0-.688-.125-.938-.375a1.272 1.272 0 0 1-.375-.937c0-.344.125-.656.375-.938.25-.28.563-.421.938-.421.344 0 .656.14.938.422.28.28.421.593.421.937 0 .375-.14.688-.422.938-.28.25-.593.375-.937.375Zm7.5 0c-.375 0-.688-.125-.938-.375a1.272 1.272 0 0 1-.375-.937c0-.344.125-.656.375-.938.25-.28.563-.421.938-.421.344 0 .656.14.938.422.28.28.421.593.421.937 0 .375-.14.688-.422.938-.28.25-.593.375-.937.375Z"
+})));
+var Paginated_default = Paginated;
+
+// src/ui/icons/Previous.tsx
+import React34 from "react";
+var Previous = (props) => /* @__PURE__ */ React34.createElement(Icon, __spreadValues({
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 48 48"
+}, props), /* @__PURE__ */ React34.createElement("mask", {
+  id: "previous",
+  width: "48",
+  height: "48",
+  x: "0",
+  y: "0",
+  maskUnits: "userSpaceOnUse"
+}, /* @__PURE__ */ React34.createElement("path", {
+  fill: "#D9D9D9",
+  d: "M0 0h48v48H0z"
+})), /* @__PURE__ */ React34.createElement("g", {
+  mask: "url(#previous)"
+}, /* @__PURE__ */ React34.createElement("path", {
+  fill: props.fill,
+  d: "M20 42.6 1.4 24 20 5.4l1.8 1.8L4.95 24 21.8 40.8 20 42.6Z"
+})));
+var Previous_default = Previous;
+
+// src/ui/icons/ReaderSettings.tsx
+import React35 from "react";
+var ReaderSettings = (props) => /* @__PURE__ */ React35.createElement(Icon, __spreadValues({
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 49 49"
+}, props), /* @__PURE__ */ React35.createElement("mask", {
+  id: "readerSettings",
+  width: "49",
+  height: "49",
+  x: "0",
+  y: "0",
+  maskUnits: "userSpaceOnUse"
+}, /* @__PURE__ */ React35.createElement("path", {
+  fill: "#D9D9D9",
+  d: "M0 0h49v49H0z"
+})), /* @__PURE__ */ React35.createElement("g", {
+  mask: "url(#readerSettings)"
+}, /* @__PURE__ */ React35.createElement("path", {
+  fill: props.fill,
+  d: "M30.37 37.014V9.633H20.16V7h22.97v2.633H32.92v27.38H30.37Zm-18.375 0v-16.85H5.87V17.53h14.802v2.633h-6.125v16.85h-2.552Z"
+})));
+var ReaderSettings_default = ReaderSettings;
+
+// src/ui/icons/ReduceFont.tsx
+import React36 from "react";
+var ReduceFont = (props) => /* @__PURE__ */ React36.createElement(Icon, __spreadValues({
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 46 46"
+}, props), /* @__PURE__ */ React36.createElement("mask", {
+  id: "reduceFont",
+  width: "46",
+  height: "46",
+  x: "0",
+  y: "0",
+  maskUnits: "userSpaceOnUse"
+}, /* @__PURE__ */ React36.createElement("path", {
+  fill: "#D9D9D9",
+  d: "M0 0h45.639v45.639H0z"
+})), /* @__PURE__ */ React36.createElement("g", {
+  mask: "url(#reduceFont)"
+}, /* @__PURE__ */ React36.createElement("path", {
+  fill: props.fill,
+  d: "M3.09 35.18 13.121 10.46h1.854L25.006 35.18h-2.282l-2.757-6.893H7.987L5.229 35.18H3.09Zm5.562-8.747h10.65L14.12 13.502h-.238l-5.23 12.93Zm20.586-2.663V21.87h13.311v1.901H29.238Z"
+})));
+var ReduceFont_default = ReduceFont;
+
+// src/ui/icons/Reset.tsx
+import React37 from "react";
+var Reset = (props) => /* @__PURE__ */ React37.createElement(Icon, __spreadValues({
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 45 45"
+}, props), /* @__PURE__ */ React37.createElement("mask", {
+  id: "a",
+  width: "45",
+  height: "45",
+  x: "0",
+  y: "0",
+  maskUnits: "userSpaceOnUse"
+}, /* @__PURE__ */ React37.createElement("path", {
+  fill: "#D9D9D9",
+  d: "M0 0h45v45H0z"
+})), /* @__PURE__ */ React37.createElement("g", {
+  mask: "url(#reset)"
+}, /* @__PURE__ */ React37.createElement("path", {
+  fill: props.fill,
+  d: "M20.11 37.266c-3.126-.563-5.696-2.047-7.712-4.453-2.015-2.407-3.023-5.22-3.023-8.438 0-1.781.367-3.484 1.102-5.11a13.358 13.358 0 0 1 3.117-4.312c.094-.094.226-.133.398-.117.172.016.32.086.445.21a.537.537 0 0 1 .258.517.787.787 0 0 1-.304.562 10.21 10.21 0 0 0-2.672 3.75 11.674 11.674 0 0 0-.89 4.5c0 2.813.882 5.281 2.648 7.406 1.765 2.125 4.023 3.469 6.773 4.032.188 0 .336.078.445.234a.88.88 0 0 1 .164.516c0 .218-.078.39-.234.515a.807.807 0 0 1-.516.188Zm4.828.047a.628.628 0 0 1-.516-.141.624.624 0 0 1-.235-.516.88.88 0 0 1 .165-.515.655.655 0 0 1 .445-.282c2.719-.656 4.96-2.03 6.726-4.125 1.766-2.093 2.649-4.547 2.649-7.359 0-3.25-1.125-6.008-3.375-8.273-2.25-2.266-5.016-3.399-8.297-3.399h-1.547l2.86 2.86a.6.6 0 0 1 .234.492.741.741 0 0 1-.235.539.741.741 0 0 1-.539.234.74.74 0 0 1-.539-.234l-3.656-3.703a1.33 1.33 0 0 1-.281-.399 1.203 1.203 0 0 1-.094-.492c0-.188.031-.36.094-.516.062-.156.156-.296.281-.421l3.656-3.704a.838.838 0 0 1 .54-.187c.203 0 .382.062.538.187a.906.906 0 0 1 .235.586.6.6 0 0 1-.235.493l-2.859 2.812H22.5c3.656 0 6.758 1.281 9.305 3.844 2.547 2.562 3.82 5.656 3.82 9.281 0 3.188-1.008 5.984-3.023 8.39-2.016 2.407-4.57 3.922-7.664 4.547Z"
+})));
+var Reset_default = Reset;
+
+// src/ui/icons/Sepia.tsx
+import React38 from "react";
+var Sepia = (props) => /* @__PURE__ */ React38.createElement(Icon, __spreadValues({
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 45 45"
+}, props), /* @__PURE__ */ React38.createElement("mask", {
+  id: "sepia",
+  width: "45",
+  height: "45",
+  x: "0",
+  y: "0",
+  maskUnits: "userSpaceOnUse"
+}, /* @__PURE__ */ React38.createElement("path", {
+  fill: "#D9D9D9",
+  d: "M0 0h45v45H0z"
+})), /* @__PURE__ */ React38.createElement("g", {
+  mask: "url(#sepia)"
+}, /* @__PURE__ */ React38.createElement("path", {
+  fill: "#1C1B1F",
+  d: "m22.5 41.063-5.484-5.438H9.375v-7.64L3.844 22.5l5.531-5.484V9.375h7.64L22.5 3.844l5.484 5.531h7.641v7.64l5.531 5.485-5.531 5.484v7.641h-7.64L22.5 41.063Zm-.047-6.891c3.281 0 6.055-1.133 8.32-3.399 2.266-2.265 3.399-5.023 3.399-8.273 0-3.281-1.133-6.055-3.399-8.32-2.265-2.266-5.039-3.399-8.32-3.399-.812 0-1.601.094-2.367.281-.766.188-1.57.454-2.414.797a11.296 11.296 0 0 1 4.992 4.29c1.234 1.921 1.852 4.038 1.852 6.351 0 2.281-.618 4.383-1.852 6.305a11.296 11.296 0 0 1-4.992 4.289c.781.312 1.562.57 2.344.773a9.65 9.65 0 0 0 2.437.305Z"
+})));
+var Sepia_default = Sepia;
+
+// src/ui/icons/TableOfContents.tsx
+import React39 from "react";
+var TableOfContents = (props) => /* @__PURE__ */ React39.createElement(Icon, __spreadValues({
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 50 50"
+}, props), /* @__PURE__ */ React39.createElement("mask", {
+  id: "tableOfContents",
+  width: "50",
+  height: "50",
+  x: "0",
+  y: "0",
+  maskUnits: "userSpaceOnUse"
+}, /* @__PURE__ */ React39.createElement("path", {
+  fill: "#D9D9D9",
+  d: "M0 0h49.264v49.264H0z"
+})), /* @__PURE__ */ React39.createElement("g", {
+  mask: "url(#tableOfContents)"
+}, /* @__PURE__ */ React39.createElement("path", {
+  fill: props.fill,
+  d: "M7.544 33.376v-2.118h27.454v2.118H7.544Zm0-8.47v-2.118h27.454v2.117H7.544Zm0-8.47v-2.118h27.454v2.117H7.544Zm32.842 17.257c-.376 0-.692-.132-.948-.398a1.347 1.347 0 0 1-.386-.978c0-.388.129-.715.386-.98.256-.264.572-.396.948-.396s.693.132.95.396c.256.265.384.592.384.98s-.128.714-.383.978a1.272 1.272 0 0 1-.95.398Zm0-8.47c-.376 0-.692-.133-.948-.398a1.347 1.347 0 0 1-.386-.978c0-.389.129-.715.386-.98.256-.265.572-.397.948-.397s.693.132.95.396c.256.266.384.592.384.98 0 .389-.128.715-.383.979a1.272 1.272 0 0 1-.95.398Zm0-8.47c-.376 0-.692-.133-.948-.398a1.347 1.347 0 0 1-.386-.979c0-.388.129-.715.386-.98.256-.264.572-.396.948-.396s.693.132.95.396c.256.265.384.592.384.98 0 .389-.128.715-.383.979a1.272 1.272 0 0 1-.95.398Z"
+})));
+var TableOfContents_default = TableOfContents;
+
+// src/ui/icons/ToggleFullScreen.tsx
+import React40 from "react";
+var ToggleFullScreen = (props) => /* @__PURE__ */ React40.createElement(Icon, __spreadValues({
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 49 49"
+}, props), /* @__PURE__ */ React40.createElement("mask", {
+  id: "toggleFullScreen",
+  width: "49",
+  height: "49",
+  x: "0",
+  y: "0",
+  maskUnits: "userSpaceOnUse"
+}, /* @__PURE__ */ React40.createElement("path", {
+  fill: "#D9D9D9",
+  d: "M0 0h49v49H0z"
+})), /* @__PURE__ */ React40.createElement("g", {
+  mask: "url(#toggleFullScreen)"
+}, /* @__PURE__ */ React40.createElement("path", {
+  fill: props.fill,
+  d: "M10.208 41.487V30.956h2.042v8.425h8.167v2.106H10.208Zm0-18.956V12h10.209v2.106H12.25v8.425h-2.042Zm18.375 18.956v-2.106h8.167v-8.425h2.042v10.531H28.583Zm8.167-18.956v-8.425h-8.167V12h10.209v10.531H36.75Z"
+})));
+var ToggleFullScreen_default = ToggleFullScreen;
+
+// src/ui/icons/ToggleFullScreenExit.tsx
+import React41 from "react";
+var ToggleFullScreenExit = (props) => /* @__PURE__ */ React41.createElement(Icon, __spreadValues({
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 51 51"
+}, props), /* @__PURE__ */ React41.createElement("mask", {
+  id: "toggleFullScreenExit",
+  width: "51",
+  height: "51",
+  x: "0",
+  y: "0",
+  maskUnits: "userSpaceOnUse"
+}, /* @__PURE__ */ React41.createElement("path", {
+  fill: "#D9D9D9",
+  d: "M0 0h51v51H0z"
+})), /* @__PURE__ */ React41.createElement("g", {
+  mask: "url(#toggleFullScreenExit)"
+}, /* @__PURE__ */ React41.createElement("path", {
+  fill: props.fill,
+  d: "M19.125 38.69v-8.768h-8.5V27.73H21.25v10.96h-2.125Zm10.625 0V27.73h10.625v2.192h-8.5v8.769H29.75ZM10.625 18.96V16.77h8.5V8h2.125v10.96H10.625Zm19.125 0V8h2.125v8.769h8.5v2.192H29.75Z"
+})));
+var ToggleFullScreenExit_default = ToggleFullScreenExit;
+
+// src/ui/SettingsButton.tsx
+import * as React49 from "react";
 
 // src/utils/getColor.ts
 function getColor3(colorMode) {
@@ -34614,24 +34855,91 @@ var useColorModeValue = (light, dark, sepia) => {
 };
 var useColorModeValue_default = useColorModeValue;
 
-// src/ui/SettingsButton.tsx
-import * as React35 from "react";
-
-// src/ui/Button.tsx
-import React30 from "react";
-var Button2 = React30.forwardRef((props, ref) => {
-  return /* @__PURE__ */ React30.createElement(Button, __spreadValues({
-    ref,
-    variant: "solid"
-  }, props));
-});
-var Button_default = Button2;
-
 // src/ui/PdfSettings.tsx
-import * as React33 from "react";
+import * as React47 from "react";
 
 // src/ui/ToggleButton.tsx
-import React31 from "react";
+import React43 from "react";
+
+// src/ui/theme/foundations/fonts.tsx
+import React42 from "react";
+var Fonts = () => /* @__PURE__ */ React42.createElement(Global, {
+  styles: `
+      /* latin */
+      @font-face {
+        font-family: 'Helvetica';
+        src: url('Helvetica.eot');
+        src: local('Helvetica'),
+            url('Helvetica.eot?#iefix') format('embedded-opentype'),
+            url('Helvetica.woff2') format('woff2'),
+            url('Helvetica.woff') format('woff'),
+            url('Helvetica.ttf') format('truetype');
+        font-weight: normal;
+        font-style: normal;
+        font-display: swap;
+    }
+      @font-face {
+        font-family: 'OpenDyslexic';
+        font-style: normal;
+        font-weight: 700;
+        src: url('/fonts/opendyslexic/opendyslexic-regular-webfont.woff2')
+            format('woff2'),
+          url('/fonts/opendyslexic/opendyslexic-regular-webfont.woff')
+            format('woff');
+      }
+      @font-face {
+        font-family: 'robotoregular';
+        src: url('Roboto-Regular-webfont.eot');
+        src: url('Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
+             url('Roboto-Regular-webfont.woff2') format('woff2'),
+             url('Roboto-Regular-webfont.woff') format('woff'),
+             url('Roboto-Regular-webfont.ttf') format('truetype'),
+             url('Roboto-Regular-webfont.svg#robotoregular') format('svg');
+        font-weight: normal;
+        font-style: normal;
+    }
+      @font-face {
+        font-family: 'robotolight';
+        src: url('Roboto-Light-webfont.eot');
+        src: url('Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
+             url('Roboto-Light-webfont.woff2') format('woff2'),
+             url('Roboto-Light-webfont.woff') format('woff'),
+             url('Roboto-Light-webfont.ttf') format('truetype'),
+             url('Roboto-Light-webfont.svg#robotolight') format('svg');
+        font-weight: normal;
+        font-style: normal;
+    
+    }
+    `
+});
+var fonts_default = Fonts;
+
+// src/ui/theme/components/alert.ts
+var baseStyle22 = {
+  container: {
+    px: 4,
+    py: 5
+  },
+  title: {
+    fontWeight: "bold",
+    lineHeight: 4,
+    marginEnd: 2
+  },
+  description: {
+    lineHeight: 3,
+    maxWidth: "100%"
+  },
+  icon: {
+    flexShrink: 0,
+    marginEnd: 4,
+    w: 5,
+    h: 6
+  }
+};
+var Alert2 = {
+  baseStyle: baseStyle22
+};
+var alert_default = Alert2;
 
 // src/ui/theme/components/text.ts
 var TextStyle = {
@@ -34656,12 +34964,32 @@ var text_default = TextStyle;
 // src/ui/theme/foundations/colors.ts
 var colors2 = {
   transparent: "transparent",
+  gray: {
+    active: "#D9D9D9",
+    disabled: "#979797",
+    icon: "#1C1B1F",
+    dark: "#616161",
+    "x-dark": "#424242"
+  },
   ui: {
-    sepia: "#F9F4E9"
+    sepia: "#F2E4CA",
+    sepiaChecked: "#D9CDB7"
   }
 };
 var colors_default = colors2;
 
+// src/ui/theme/foundations/typography.ts
+var typography3 = {
+  fonts: {
+    body: "Roboto, -apple-system, BlinkMacSystemFont, system-ui, sans-serif",
+    heading: "Roboto, -apple-system, BlinkMacSystemFont, system-ui, sans-serif",
+    serif: `'Georgia', serif`,
+    sansSerif: `'Helvetica', 'Arial', serif`,
+    opendyslexic: `'OpenDyslexic', sans-serif`
+  }
+};
+var typography_default = typography3;
+
 // src/ui/nypl-base-theme/components/button.ts
 var sizes3 = {
   lg: {
@@ -34777,7 +35105,7 @@ var breakpoints_default = createBreakpoints({
 });
 
 // src/ui/nypl-base-theme/foundations/typography.ts
-var typography3 = {
+var typography4 = {
   fonts: {
     body: "-apple-system, BlinkMacSystemFont, system-ui, sans-serif",
     heading: "-apple-system, BlinkMacSystemFont, system-ui, sans-seri",
@@ -34809,7 +35137,7 @@ var typography3 = {
     widest: "0.1em"
   }
 };
-var typography_default = typography3;
+var typography_default2 = typography4;
 
 // src/ui/nypl-base-theme/foundations/colors.ts
 var colors3 = {
@@ -34841,9 +35169,12 @@ var colors3 = {
     },
     test: "#FF6347",
     gray: {
-      "x-dark": "#424242",
-      dark: "#616161",
+      active: "#D9D9D9",
+      disabled: "#979797",
+      icon: "#1C1B1F",
       medium: "#BDBDBD",
+      dark: "#616161",
+      "x-dark": "#424242",
       "light-cool": "#E0E0E0",
       "light-warm": "#EFEDEB",
       "x-light-cool": "#F5F5F5",
@@ -35139,7 +35470,7 @@ var global3 = {
 var global_default = global3;
 
 // src/ui/nypl-base-theme/components/form-label.ts
-var baseStyle22 = {
+var baseStyle23 = {
   fontSize: "sm",
   marginEnd: 0,
   mb: 2,
@@ -35151,11 +35482,11 @@ var baseStyle22 = {
   }
 };
 var form_label_default = {
-  baseStyle: baseStyle22
+  baseStyle: baseStyle23
 };
 
 // src/ui/nypl-base-theme/components/form.ts
-var baseStyle23 = {
+var baseStyle24 = {
   requiredIndicator: {
     marginStart: 1,
     color: "red.500"
@@ -35168,11 +35499,11 @@ var baseStyle23 = {
   }
 };
 var form_default = {
-  baseStyle: baseStyle23
+  baseStyle: baseStyle24
 };
 
 // src/ui/nypl-base-theme/components/form-error.ts
-var baseStyle24 = {
+var baseStyle25 = {
   text: {
     color: "ui.error",
     mt: 2,
@@ -35184,7 +35515,7 @@ var baseStyle24 = {
   }
 };
 var form_error_default = {
-  baseStyle: baseStyle24
+  baseStyle: baseStyle25
 };
 
 // src/ui/nypl-base-theme/components/text-area.ts
@@ -35209,7 +35540,7 @@ var theme2 = extendTheme(__spreadProps(__spreadValues({
   breakpoints: breakpoints_default,
   radii: radii_default,
   colors: colors_default2
-}, typography_default), {
+}, typography_default2), {
   space: spacing_default,
   components: {
     Button: button_default,
@@ -35231,7 +35562,7 @@ var getButtonStyle = (getColor4) => ({
   sizes: {},
   variants: {
     solid: variantSolid6(getColor4),
-    toggle: variantToggle(getColor4)
+    settings: variantSettings(getColor4)
   },
   defaultProps: {
     size: "sm",
@@ -35239,23 +35570,29 @@ var getButtonStyle = (getColor4) => ({
   }
 });
 var variantSolid6 = (getColor4) => (props) => {
-  const bgColor = getColor4("ui.white", "ui.black", "ui.sepia");
+  const { "aria-expanded": expanded2 } = props;
+  const bgColor = getColor4("ui.gray.light-warm", "ui.black", "ui.sepia");
+  const bgColorActive = getColor4("ui.gray.active", "ui.gray.x-dark", "ui.sepiaChecked");
   const color3 = getColor4("gray.800", "ui.white", "gray.800");
-  const _focus = { bgColor, color: color3 };
-  const _hover = { bgColor, color: color3, _disabled: { bgColor } };
-  const _active = { bgColor, color: color3 };
+  const _focus = { bgColor: bgColorActive, color: color3 };
+  const _hover = {
+    bgColor: bgColorActive,
+    color: color3,
+    _disabled: { bgColor }
+  };
+  const _active = { bgColor: bgColorActive, color: color3 };
   const _checked = { bgColor, color: color3 };
   const _disabled = { bgColor };
   return {
-    border: "1px solid",
+    border: "none",
     borderColor: "gray.100",
+    height: "48px",
     transition: "none",
     fontSize: 0,
     letterSpacing: 1,
-    textTransform: "uppercase",
     maxWidth: "100%",
     cursor: "pointer",
-    bgColor,
+    bgColor: expanded2 ? bgColorActive : bgColor,
     color: color3,
     _focus,
     _hover,
@@ -35264,108 +35601,109 @@ var variantSolid6 = (getColor4) => (props) => {
     _disabled
   };
 };
-var variantToggle = (getColor4) => (props) => {
-  const bgColor = getColor4("ui.white", "gray.800", "ui.white");
-  const color3 = getColor4("gray.800", "ui.white", "gray.800");
+var variantSettings = (getColor4) => (props) => {
+  const { bgColor } = props;
+  const color3 = getColor4("ui.black", "ui.white", "ui.black");
+  const checkedBgColor = getColor4("ui.gray.light-warm", "ui.gray.x-dark", "ui.sepiaChecked");
   return __spreadProps(__spreadValues({}, variantSolid6(getColor4)(props)), {
-    bgColor,
+    bgColor: getColor4("ui.white", "ui.black", "ui.sepia"),
+    border: "1px solid",
     color: color3,
-    px: 8,
-    fontWeight: "medium",
-    fontSize: -2,
-    _focus: {
+    py: 8,
+    width: [8, 16, 36],
+    fontSize: [0, 0, 2],
+    whiteSpace: ["normal", "normal", "nowrap"],
+    _active: {
       bgColor
     },
-    _hover: {
-      bgColor
+    _checked: {
+      color: color3,
+      bgColor: checkedBgColor,
+      borderBottomColor: checkedBgColor,
+      p: {
+        textDecoration: "underline"
+      }
     },
-    _active: {
+    _hover: {
       bgColor
     },
-    _checked: {
-      color: "ui.white",
-      bgColor: "green.700"
+    _focus: {
+      bgColor,
+      ring: "2px",
+      ringInset: "inset"
     }
   });
 };
 var button_default2 = getButtonStyle;
 
-// src/ui/theme/components/alert.ts
-var baseStyle25 = {
-  container: {
-    px: 4,
-    py: 5
-  },
-  title: {
-    fontWeight: "bold",
-    lineHeight: 4,
-    marginEnd: 2
-  },
-  description: {
-    lineHeight: 3,
-    maxWidth: "100%"
-  },
-  icon: {
-    flexShrink: 0,
-    marginEnd: 4,
-    w: 5,
-    h: 6
-  }
-};
-var Alert2 = {
-  baseStyle: baseStyle25
-};
-var alert_default = Alert2;
-
 // src/ui/theme/index.ts
 function getTheme3(colorMode = "day") {
-  return extendTheme({
-    colors: colors_default,
+  return extendTheme(__spreadProps(__spreadValues({
+    colors: colors_default
+  }, typography_default), {
     components: {
       Button: button_default2(getColor3(colorMode)),
       Text: text_default,
       Alert: alert_default
     },
     currentColorMode: colorMode
-  }, nypl_base_theme_default);
+  }), nypl_base_theme_default);
 }
 
 // src/ui/ToggleButton.tsx
 function ToggleButton(props) {
-  const _a = props, { isChecked, children, colorMode, label } = _a, rest = __objRest(_a, ["isChecked", "children", "colorMode", "label"]);
+  const _a = props, { children, colorMode, icon, iconFill, label, value } = _a, rest = __objRest(_a, ["children", "colorMode", "icon", "iconFill", "label", "value"]);
   const { getInputProps, getCheckboxProps } = useRadio(props);
   const input = getInputProps();
   const checkbox = getCheckboxProps();
   const theme3 = useTheme3();
-  return /* @__PURE__ */ React31.createElement(ThemeProvider3, {
+  return /* @__PURE__ */ React43.createElement(ThemeProvider3, {
     theme: getTheme3(colorMode != null ? colorMode : theme3.currentColorMode)
-  }, /* @__PURE__ */ React31.createElement(Box, {
+  }, /* @__PURE__ */ React43.createElement(fonts_default, null), /* @__PURE__ */ React43.createElement(Box, {
     as: "label",
     d: "flex",
     flexGrow: 1,
     "aria-label": label
-  }, /* @__PURE__ */ React31.createElement("input", __spreadValues({}, input)), /* @__PURE__ */ React31.createElement(Button_default, __spreadProps(__spreadValues(__spreadProps(__spreadValues({
-    as: "div"
-  }, checkbox), {
-    variant: "toggle"
-  }), rest), {
+  }, /* @__PURE__ */ React43.createElement("input", __spreadValues({}, input)), /* @__PURE__ */ React43.createElement(Button_default, __spreadValues(__spreadValues({
+    as: "div",
+    variant: "settings",
     flexGrow: 1
-  }), children, isChecked && /* @__PURE__ */ React31.createElement(Icon, {
-    as: MdOutlineCheckCircle,
-    position: "absolute",
+  }, checkbox), rest), icon && /* @__PURE__ */ React43.createElement(Icon, {
+    as: icon,
     verticalAlign: "middle",
-    right: 2,
-    top: "50%",
-    transform: "translateY(-50%)",
-    alignItems: "baseline",
-    w: 5,
-    h: 5
-  }))));
+    mr: 1.5,
+    w: 6,
+    h: 6,
+    fill: iconFill && iconFill
+  }), label && /* @__PURE__ */ React43.createElement(Text, null, label))));
 }
+var FontToggleButton = (props) => {
+  return /* @__PURE__ */ React43.createElement(ToggleButton, __spreadValues({
+    fontSize: [-1, -1, 0],
+    py: 6
+  }, props));
+};
+var ColorModeToggleButton = (_a) => {
+  var _b = _a, {
+    bgColor
+  } = _b, rest = __objRest(_b, [
+    "bgColor"
+  ]);
+  return /* @__PURE__ */ React43.createElement(ToggleButton, __spreadValues({
+    sx: {
+      _checked: {
+        bgColor,
+        p: {
+          textDecoration: "underline"
+        }
+      }
+    }
+  }, rest));
+};
 var ToggleButton_default = ToggleButton;
 
 // src/ui/ToggleGroup.tsx
-import React32 from "react";
+import React44 from "react";
 var ToggleGroup = ({
   value,
   label,
@@ -35379,16 +35717,15 @@ var ToggleGroup = ({
     value
   });
   const group = getRootProps();
-  return /* @__PURE__ */ React32.createElement(Flex, __spreadProps(__spreadValues({}, group), {
+  return /* @__PURE__ */ React44.createElement(Flex, __spreadProps(__spreadValues({}, group), {
     "aria-label": label,
     flex: "1 0 auto",
-    flexWrap: "wrap",
-    my: 2
-  }), React32.Children.map(children, (element) => {
+    flexWrap: "nowrap"
+  }), React44.Children.map(children, (element) => {
     try {
       const value2 = element.props.value;
       const radio2 = getRadioProps({ value: value2 });
-      return React32.cloneElement(element, radio2);
+      return React44.cloneElement(element, __spreadValues({}, radio2));
     } catch (e) {
       throw new Error("ToggleGroup expects ToggleButton children with `value` props.");
     }
@@ -35396,175 +35733,359 @@ var ToggleGroup = ({
 };
 var ToggleGroup_default = ToggleGroup;
 
+// node_modules/react-icons/lib/esm/iconBase.js
+import React46 from "react";
+
+// node_modules/react-icons/lib/esm/iconContext.js
+import React45 from "react";
+var DefaultContext = {
+  color: void 0,
+  size: void 0,
+  className: void 0,
+  style: void 0,
+  attr: void 0
+};
+var IconContext = React45.createContext && React45.createContext(DefaultContext);
+
+// node_modules/react-icons/lib/esm/iconBase.js
+var __assign2 = function() {
+  __assign2 = Object.assign || function(t2) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p))
+          t2[p] = s[p];
+    }
+    return t2;
+  };
+  return __assign2.apply(this, arguments);
+};
+var __rest2 = function(s, e) {
+  var t2 = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t2[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t2[p[i]] = s[p[i]];
+    }
+  return t2;
+};
+function Tree2Element(tree) {
+  return tree && tree.map(function(node2, i) {
+    return React46.createElement(node2.tag, __assign2({
+      key: i
+    }, node2.attr), Tree2Element(node2.child));
+  });
+}
+function GenIcon(data) {
+  return function(props) {
+    return React46.createElement(IconBase, __assign2({
+      attr: __assign2({}, data.attr)
+    }, props), Tree2Element(data.child));
+  };
+}
+function IconBase(props) {
+  var elem = function(conf) {
+    var attr = props.attr, size3 = props.size, title = props.title, svgProps = __rest2(props, ["attr", "size", "title"]);
+    var computedSize = size3 || conf.size || "1em";
+    var className;
+    if (conf.className)
+      className = conf.className;
+    if (props.className)
+      className = (className ? className + " " : "") + props.className;
+    return React46.createElement("svg", __assign2({
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0"
+    }, conf.attr, attr, svgProps, {
+      className,
+      style: __assign2(__assign2({
+        color: props.color || conf.color
+      }, conf.style), props.style),
+      height: computedSize,
+      width: computedSize,
+      xmlns: "http://www.w3.org/2000/svg"
+    }), title && React46.createElement("title", null, title), props.children);
+  };
+  return IconContext !== void 0 ? React46.createElement(IconContext.Consumer, null, function(conf) {
+    return elem(conf);
+  }) : elem(DefaultContext);
+}
+
+// node_modules/react-icons/md/index.esm.js
+function MdKeyboardArrowLeft(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z" } }] })(props);
+}
+function MdKeyboardArrowRight(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" } }] })(props);
+}
+function MdOutlineZoomIn(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zm.5-7H9v2H7v1h2v2h1v-2h2V9h-2z" } }] })(props);
+}
+function MdOutlineZoomOut(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z" } }] })(props);
+}
+
 // src/ui/PdfSettings.tsx
 function PdfSettings(props) {
   const { navigator: navigator2, paginationValue } = props;
   const { zoomOut, zoomIn, setScroll } = navigator2;
-  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(ButtonGroup, {
+  const iconFill = "ui.gray.icon";
+  return /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement(ButtonGroup, {
     d: "flex",
     spacing: 0
-  }, /* @__PURE__ */ React33.createElement(Button_default, {
+  }, /* @__PURE__ */ React47.createElement(Button_default, {
     flexGrow: 1,
     "aria-label": "Zoom Out",
     onClick: zoomOut,
-    variant: "toggle"
-  }, "Zoom Out", /* @__PURE__ */ React33.createElement(Icon, {
+    variant: "settings"
+  }, /* @__PURE__ */ React47.createElement(Icon, {
     as: MdOutlineZoomOut,
     w: 7,
     h: 7,
     pl: 1
-  })), /* @__PURE__ */ React33.createElement(Button_default, {
+  }), "Zoom Out"), /* @__PURE__ */ React47.createElement(Button_default, {
     flexGrow: 1,
     "aria-label": "Zoom In",
     onClick: zoomIn,
-    variant: "toggle"
-  }, "Zoom In", /* @__PURE__ */ React33.createElement(Icon, {
+    variant: "settings"
+  }, /* @__PURE__ */ React47.createElement(Icon, {
     as: MdOutlineZoomIn,
     w: 7,
     h: 7,
     pl: 1
-  }))), /* @__PURE__ */ React33.createElement(ToggleGroup_default, {
+  }), "Zoom In")), /* @__PURE__ */ React47.createElement(ToggleGroup_default, {
     onChange: setScroll,
     value: paginationValue,
     label: "pagination options"
-  }, /* @__PURE__ */ React33.createElement(ToggleButton_default, {
+  }, /* @__PURE__ */ React47.createElement(ToggleButton_default, {
     value: "paginated",
-    label: "Paginated"
-  }, "Paginated"), /* @__PURE__ */ React33.createElement(ToggleButton_default, {
+    borderRadius: "0 0 0 4px",
+    label: "Paginated",
+    icon: Paginated_default,
+    iconFill
+  }), /* @__PURE__ */ React47.createElement(ToggleButton_default, {
     value: "scrolling",
-    label: "Scrolling"
-  }, "Scrolling")));
+    borderRadius: "0 0 4px 0",
+    label: "Scrolling",
+    icon: Continuous_default,
+    iconFill
+  })));
 }
 
 // src/ui/HtmlSettings.tsx
-import * as React34 from "react";
+import * as React48 from "react";
 function HtmlSettings(props) {
-  const { navigator: navigator2, readerState, paginationValue } = props;
+  const { navigator: navigator2, iconFill, readerState, paginationValue } = props;
+  const buttonTextColor = useColorModeValue_default("ui.black", "ui.white", "ui.black");
+  const checkedButtonBgColor = useColorModeValue_default("ui.gray.light-warm", "ui.gray.x-dark", "ui.sepiaChecked");
   if (!readerState.settings)
     return null;
-  const { fontFamily, colorMode } = readerState.settings;
+  const { colorMode, fontFamily } = readerState.settings;
   const {
     setFontFamily,
     decreaseFontSize,
     increaseFontSize,
+    resetSettings,
     setColorMode,
     setScroll
   } = navigator2;
-  return /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(ToggleGroup_default, {
+  return /* @__PURE__ */ React48.createElement(React48.Fragment, null, /* @__PURE__ */ React48.createElement(ToggleGroup_default, {
     value: fontFamily,
     label: "text font options",
     onChange: setFontFamily
-  }, /* @__PURE__ */ React34.createElement(ToggleButton_default, {
+  }, /* @__PURE__ */ React48.createElement(FontToggleButton, {
     value: "publisher",
-    label: "Publisher"
-  }, "Publisher"), /* @__PURE__ */ React34.createElement(ToggleButton_default, {
+    label: "Default"
+  }), /* @__PURE__ */ React48.createElement(FontToggleButton, {
     value: "serif",
-    label: "Serif"
-  }, "Serif"), /* @__PURE__ */ React34.createElement(ToggleButton_default, {
+    label: "Serif",
+    fontFamily: "serif",
+    fontWeight: "regular"
+  }), /* @__PURE__ */ React48.createElement(FontToggleButton, {
     value: "sans-serif",
-    label: "Sans-Serif"
-  }, "Sans-Serif"), /* @__PURE__ */ React34.createElement(ToggleButton_default, {
+    label: "Sans-Serif",
+    fontFamily: "sansSerif",
+    fontWeight: "regular"
+  }), /* @__PURE__ */ React48.createElement(FontToggleButton, {
     value: "open-dyslexic",
-    label: "Dyslexia-Friendly"
-  }, "Dyslexia-Friendly")), /* @__PURE__ */ React34.createElement(ButtonGroup, {
-    d: "flex",
-    spacing: 0
-  }, /* @__PURE__ */ React34.createElement(Button_default, {
-    flexGrow: 1,
-    "aria-label": "Decrease font size",
-    onClick: decreaseFontSize,
-    variant: "toggle"
-  }, "A-"), /* @__PURE__ */ React34.createElement(Button_default, {
-    flexGrow: 1,
-    "aria-label": "Increase font size",
-    onClick: increaseFontSize,
-    variant: "toggle"
-  }, "A+")), /* @__PURE__ */ React34.createElement(ToggleGroup_default, {
+    label: "Dyslexia",
+    fontFamily: "opendyslexic",
+    fontWeight: "regular"
+  })), /* @__PURE__ */ React48.createElement(Stack, {
+    bgColor: checkedButtonBgColor,
+    px: 7,
+    py: 5
+  }, /* @__PURE__ */ React48.createElement(Heading, {
+    as: "h3",
+    color: buttonTextColor,
+    pb: "10px",
+    fontSize: 2,
+    fontWeight: "light"
+  }, FONT_DETAILS[fontFamily].heading), /* @__PURE__ */ React48.createElement(Text, {
+    color: buttonTextColor,
+    fontFamily: FONT_DETAILS[fontFamily].token,
+    fontSize: -1,
+    fontWeight: FONT_DETAILS[fontFamily].fontWeight
+  }, FONT_DETAILS[fontFamily].body)), /* @__PURE__ */ React48.createElement(ToggleGroup_default, {
     value: colorMode,
     label: "reading theme options",
     onChange: setColorMode
-  }, /* @__PURE__ */ React34.createElement(ToggleButton_default, {
+  }, /* @__PURE__ */ React48.createElement(ColorModeToggleButton, {
     colorMode: "day",
+    icon: Day_default,
     value: "day",
     label: "Day",
-    _checked: { bg: "ui.white" }
-  }, "Day"), /* @__PURE__ */ React34.createElement(ToggleButton_default, {
+    bgColor: "ui.white",
+    textColor: "ui.black"
+  }), /* @__PURE__ */ React48.createElement(ColorModeToggleButton, {
     colorMode: "sepia",
+    icon: Sepia_default,
     value: "sepia",
     label: "Sepia",
-    bg: "ui.sepia",
-    _active: { bg: "ui.sepia" },
-    _hover: { bg: "ui.sepia" },
-    _checked: { bg: "ui.sepia" }
-  }, "Sepia"), /* @__PURE__ */ React34.createElement(ToggleButton_default, {
+    bgColor: "ui.sepia",
+    textColor: "ui.black"
+  }), /* @__PURE__ */ React48.createElement(ColorModeToggleButton, {
     colorMode: "night",
+    icon: Night_default,
     value: "night",
     label: "Night",
-    _checked: { bg: "ui.black" }
-  }, "Night")), /* @__PURE__ */ React34.createElement(ToggleGroup_default, {
+    bgColor: "ui.black",
+    textColor: "ui.white"
+  })), /* @__PURE__ */ React48.createElement(ButtonGroup, {
+    d: "flex",
+    spacing: 0
+  }, /* @__PURE__ */ React48.createElement(Button_default, {
+    flexGrow: 1,
+    "aria-label": "Reset settings",
+    onClick: resetSettings,
+    variant: "settings"
+  }, /* @__PURE__ */ React48.createElement(Reset_default, {
+    w: "45px",
+    h: "45px",
+    fill: areSettingsDefault(readerState.settings) ? "ui.gray.disabled" : iconFill
+  })), /* @__PURE__ */ React48.createElement(Button_default, {
+    "aria-label": "Decrease font size",
+    flexGrow: 1,
+    onClick: decreaseFontSize,
+    sx: {
+      _active: {
+        bgColor: checkedButtonBgColor
+      }
+    },
+    value: "decrease font size",
+    variant: "settings"
+  }, /* @__PURE__ */ React48.createElement(ReduceFont_default, {
+    w: "45px",
+    h: "45px",
+    fill: iconFill
+  })), /* @__PURE__ */ React48.createElement(Button_default, {
+    "aria-label": "Increase font size",
+    flexGrow: 1,
+    onClick: increaseFontSize,
+    sx: {
+      _active: {
+        bgColor: checkedButtonBgColor
+      }
+    },
+    value: "increase font size",
+    variant: "settings"
+  }, /* @__PURE__ */ React48.createElement(EnlargeFont_default, {
+    w: "45px",
+    h: "45px",
+    fill: iconFill
+  }))), /* @__PURE__ */ React48.createElement(ToggleGroup_default, {
     onChange: setScroll,
     value: paginationValue,
     label: "pagination options"
-  }, /* @__PURE__ */ React34.createElement(ToggleButton_default, {
+  }, /* @__PURE__ */ React48.createElement(ToggleButton_default, {
     value: "paginated",
-    label: "Paginated"
-  }, "Paginated"), /* @__PURE__ */ React34.createElement(ToggleButton_default, {
+    borderRadius: "0 0 0 4px",
+    label: "Paginated",
+    icon: Paginated_default,
+    iconFill
+  }), /* @__PURE__ */ React48.createElement(ToggleButton_default, {
     value: "scrolling",
-    label: "Scrolling"
-  }, "Scrolling")));
+    borderRadius: "0 0 4px 0",
+    label: "Scrolling",
+    icon: Continuous_default,
+    iconFill
+  })));
 }
+var areSettingsDefault = (readerSettings) => {
+  if (!readerSettings) {
+    return false;
+  }
+  let setting;
+  for (setting in DEFAULT_SETTINGS) {
+    if (readerSettings[setting] !== DEFAULT_SETTINGS[setting]) {
+      return false;
+    }
+  }
+  return true;
+};
 
 // src/ui/SettingsButton.tsx
 function SettingsCard(props) {
   var _a, _b;
-  const [isOpen, setIsOpen] = React35.useState(false);
+  const [isOpen, setIsOpen] = React49.useState(false);
   const open = () => setIsOpen(true);
   const close = () => setIsOpen(false);
-  const paginationValue = ((_b = (_a = props.state) == null ? void 0 : _a.settings) == null ? void 0 : _b.isScrolling) ? "scrolling" : "paginated";
   const contentBgColor = useColorModeValue_default("ui.white", "ui.black", "ui.white");
-  return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(Popover, {
-    placement: "bottom",
+  const iconFill = useColorModeValue_default("ui.gray.icon", "ui.white", "ui.gray.icon");
+  const paginationValue = ((_b = (_a = props.state) == null ? void 0 : _a.settings) == null ? void 0 : _b.isScrolling) ? "scrolling" : "paginated";
+  return /* @__PURE__ */ React49.createElement(React49.Fragment, null, /* @__PURE__ */ React49.createElement(Popover, {
+    gutter: 0,
+    placement: "bottom-start",
     isOpen,
     onOpen: open,
     onClose: close,
-    autoFocus: true
-  }, /* @__PURE__ */ React35.createElement(PopoverTrigger, null, /* @__PURE__ */ React35.createElement(Button_default, {
+    autoFocus: true,
+    preventOverflow: true,
+    strategy: "fixed"
+  }, /* @__PURE__ */ React49.createElement(PopoverTrigger, null, /* @__PURE__ */ React49.createElement(Button_default, {
     onClick: open,
     border: "none",
     "aria-label": "Settings",
-    leftIcon: /* @__PURE__ */ React35.createElement(Icon, {
-      as: isOpen ? MdOutlineCancel : MdOutlineSettings,
+    leftIcon: /* @__PURE__ */ React49.createElement(Icon, {
+      as: ReaderSettings_default,
       w: 6,
-      h: 6
+      h: 6,
+      fill: iconFill
     })
-  }, /* @__PURE__ */ React35.createElement(Text, {
+  }, /* @__PURE__ */ React49.createElement(Text, {
     variant: "headerNav"
-  }, "Settings"))), /* @__PURE__ */ React35.createElement(PopoverContent, {
-    borderColor: "gray.100",
-    width: "fit-content",
-    bgColor: contentBgColor
-  }, /* @__PURE__ */ React35.createElement(PopoverBody, {
-    p: 0,
-    maxWidth: "95vw"
-  }, props.type === "PDF" && /* @__PURE__ */ React35.createElement(PdfSettings, {
+  }, "Settings"))), /* @__PURE__ */ React49.createElement(PopoverContent, {
+    overflow: "hidden",
+    bgColor: contentBgColor,
+    borderRadius: "0 0 4px 4px",
+    boxShadow: "0 4px 4px -2px #424242",
+    width: "inherit",
+    maxWidth: "100vw"
+  }, /* @__PURE__ */ React49.createElement(PopoverBody, {
+    p: 0
+  }, props.type === "PDF" && /* @__PURE__ */ React49.createElement(PdfSettings, {
     navigator: props.navigator,
     readerState: props.state,
     paginationValue
-  }), props.type === "HTML" && /* @__PURE__ */ React35.createElement(HtmlSettings, {
+  }), props.type === "HTML" && /* @__PURE__ */ React49.createElement(HtmlSettings, {
     navigator: props.navigator,
+    iconFill,
     readerState: props.state,
     paginationValue
   })))));
 }
 
 // src/ui/TableOfContent.tsx
-import React38 from "react";
+import React52 from "react";
 
 // src/ui/menu/menu.tsx
-import * as React37 from "react";
+import * as React51 from "react";
 
 // src/ui/menu/use-menu.tsx
-import * as React36 from "react";
+import * as React50 from "react";
 var [
   MenuDescendantsProvider,
   useMenuDescendantsContext,
@@ -35605,16 +36126,16 @@ function useMenu(props = {}) {
     "direction",
     "computePositionOnMount"
   ]);
-  const menuRef = React36.useRef(null);
-  const buttonRef = React36.useRef(null);
+  const menuRef = React50.useRef(null);
+  const buttonRef = React50.useRef(null);
   const descendants = useMenuDescendants();
-  const focusMenu = React36.useCallback(() => {
+  const focusMenu = React50.useCallback(() => {
     focus(menuRef.current, {
       nextTick: true,
       selectTextIfInput: false
     });
   }, []);
-  const focusFirstItem = React36.useCallback(() => {
+  const focusFirstItem = React50.useCallback(() => {
     const id2 = setTimeout(() => {
       const first = descendants.firstEnabled();
       if (first)
@@ -35622,7 +36143,7 @@ function useMenu(props = {}) {
     });
     timeoutIds.current.add(id2);
   }, [descendants]);
-  const focusLastItem = React36.useCallback(() => {
+  const focusLastItem = React50.useCallback(() => {
     const id2 = setTimeout(() => {
       const last = descendants.lastEnabled();
       if (last)
@@ -35630,7 +36151,7 @@ function useMenu(props = {}) {
     });
     timeoutIds.current.add(id2);
   }, [descendants]);
-  const onOpenInternal = React36.useCallback(() => {
+  const onOpenInternal = React50.useCallback(() => {
     onOpenProp == null ? void 0 : onOpenProp();
     if (autoSelect) {
       focusFirstItem();
@@ -35654,7 +36175,7 @@ function useMenu(props = {}) {
       }
     }
   });
-  const [focusedIndex, setFocusedIndex] = React36.useState(-1);
+  const [focusedIndex, setFocusedIndex] = React50.useState(-1);
   useUpdateEffect(() => {
     if (!isOpen) {
       setFocusedIndex(-1);
@@ -35666,24 +36187,24 @@ function useMenu(props = {}) {
     shouldFocus: true
   });
   const [buttonId, menuId] = useIds(id, `menu-button`, `menu-list`);
-  const openAndFocusMenu = React36.useCallback(() => {
+  const openAndFocusMenu = React50.useCallback(() => {
     onOpen();
     focusMenu();
   }, [onOpen, focusMenu]);
-  const timeoutIds = React36.useRef(/* @__PURE__ */ new Set([]));
+  const timeoutIds = React50.useRef(/* @__PURE__ */ new Set([]));
   useUnmountEffect(() => {
     timeoutIds.current.forEach((id2) => clearTimeout(id2));
     timeoutIds.current.clear();
   });
-  const openAndFocusFirstItem = React36.useCallback(() => {
+  const openAndFocusFirstItem = React50.useCallback(() => {
     onOpen();
     focusFirstItem();
   }, [focusFirstItem, onOpen]);
-  const openAndFocusLastItem = React36.useCallback(() => {
+  const openAndFocusLastItem = React50.useCallback(() => {
     onOpen();
     focusLastItem();
   }, [onOpen, focusLastItem]);
-  const refocus = React36.useCallback(() => {
+  const refocus = React50.useCallback(() => {
     var _a2, _b;
     const doc3 = getOwnerDocument(menuRef.current);
     const hasFocusWithin2 = (_a2 = menuRef.current) == null ? void 0 : _a2.contains(doc3.activeElement);
@@ -35726,7 +36247,7 @@ function useMenuButton(props = {}, externalRef = null) {
     openAndFocusFirstItem,
     openAndFocusLastItem
   } = menu2;
-  const onKeyDown = React36.useCallback((event) => {
+  const onKeyDown = React50.useCallback((event) => {
     const eventKey = normalizeEventKey(event);
     const keyMap = {
       Enter: openAndFocusFirstItem,
@@ -35774,7 +36295,7 @@ function useMenuList(props = {}, ref = null) {
   const createTypeaheadHandler = useShortcut({
     preventDefault: (event) => event.key !== " " && isTargetMenuItem(event.target)
   });
-  const onKeyDown = React36.useCallback((event) => {
+  const onKeyDown = React50.useCallback((event) => {
     const eventKey = normalizeEventKey(event);
     const keyMap = {
       Tab: (event2) => event2.preventDefault(),
@@ -35816,7 +36337,7 @@ function useMenuList(props = {}, ref = null) {
     onClose,
     setFocusedIndex
   ]);
-  const hasBeenOpened = React36.useRef(false);
+  const hasBeenOpened = React50.useRef(false);
   if (isOpen) {
     hasBeenOpened.current = true;
   }
@@ -35867,30 +36388,30 @@ function useMenuItem(props = {}, externalRef = null) {
     isOpen,
     menuId
   } = menu2;
-  const ref = React36.useRef(null);
+  const ref = React50.useRef(null);
   const id = `${menuId}-menuitem-${useId()}`;
   const { index, register } = useMenuDescendant({
     disabled: isDisabled2 && !isFocusable2
   });
-  const onMouseEnter = React36.useCallback((event) => {
+  const onMouseEnter = React50.useCallback((event) => {
     onMouseEnterProp == null ? void 0 : onMouseEnterProp(event);
     if (isDisabled2)
       return;
     setFocusedIndex(index);
   }, [setFocusedIndex, index, isDisabled2, onMouseEnterProp]);
-  const onMouseMove = React36.useCallback((event) => {
+  const onMouseMove = React50.useCallback((event) => {
     onMouseMoveProp == null ? void 0 : onMouseMoveProp(event);
     if (ref.current && !isActiveElement(ref.current)) {
       onMouseEnter(event);
     }
   }, [onMouseEnter, onMouseMoveProp]);
-  const onMouseLeave = React36.useCallback((event) => {
+  const onMouseLeave = React50.useCallback((event) => {
     onMouseLeaveProp == null ? void 0 : onMouseLeaveProp(event);
     if (isDisabled2)
       return;
     setFocusedIndex(-1);
   }, [setFocusedIndex, isDisabled2, onMouseLeaveProp]);
-  const onClick = React36.useCallback((event) => {
+  const onClick = React50.useCallback((event) => {
     onClickProp == null ? void 0 : onClickProp(event);
     if (!isTargetMenuItem(event.currentTarget))
       return;
@@ -35957,7 +36478,7 @@ function useMenuOptionGroup(props = {}) {
     value: valueProp,
     onChange: onChangeProp
   });
-  const onChange = React36.useCallback((selectedValue) => {
+  const onChange = React50.useCallback((selectedValue) => {
     if (type === "radio" && isString(value)) {
       setValue(selectedValue);
     }
@@ -35976,7 +36497,7 @@ function useMenuOptionGroup(props = {}) {
       (_b = (_a2 = child.props).onClick) == null ? void 0 : _b.call(_a2, event);
     };
     const isChecked = type === "radio" ? child.props.value === value : value.includes(child.props.value);
-    return React36.cloneElement(child, {
+    return React50.cloneElement(child, {
       type,
       onClick,
       isChecked
@@ -35994,13 +36515,13 @@ var Menu = (props) => {
   const ownProps = omitThemingProps(props);
   const { direction: direction2 } = useTheme3();
   const _a = useMenu(__spreadProps(__spreadValues({}, ownProps), { direction: direction2 })), { descendants } = _a, ctx = __objRest(_a, ["descendants"]);
-  const context = React37.useMemo(() => ctx, [ctx]);
+  const context = React51.useMemo(() => ctx, [ctx]);
   const { isOpen, onClose } = context;
-  return /* @__PURE__ */ React37.createElement(MenuDescendantsProvider, {
+  return /* @__PURE__ */ React51.createElement(MenuDescendantsProvider, {
     value: descendants
-  }, /* @__PURE__ */ React37.createElement(MenuProvider, {
+  }, /* @__PURE__ */ React51.createElement(MenuProvider, {
     value: context
-  }, /* @__PURE__ */ React37.createElement(StylesProvider, {
+  }, /* @__PURE__ */ React51.createElement(StylesProvider, {
     value: styles2
   }, runIfFn(children, { isOpen, onClose }))));
 };
@@ -36009,7 +36530,7 @@ if (__DEV__) {
 }
 var StyledMenuButton = forwardRef3((props, ref) => {
   const styles2 = useStyles();
-  return /* @__PURE__ */ React37.createElement(chakra.button, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React51.createElement(chakra.button, __spreadProps(__spreadValues({
     ref
   }, props), {
     __css: __spreadValues({
@@ -36024,10 +36545,14 @@ var MenuButton = forwardRef3((props, ref) => {
   const _a = props, { children, as: As } = _a, rest = __objRest(_a, ["children", "as"]);
   const buttonProps = useMenuButton(rest, ref);
   const Element2 = As || StyledMenuButton;
-  return /* @__PURE__ */ React37.createElement(Element2, __spreadProps(__spreadValues({}, buttonProps), {
+  return /* @__PURE__ */ React51.createElement(Element2, __spreadProps(__spreadValues({}, buttonProps), {
     className: cx("chakra-menu__menu-button", props.className)
-  }), /* @__PURE__ */ React37.createElement(chakra.span, {
-    __css: { pointerEvents: "none", flex: "1 1 auto", minW: 0 }
+  }), /* @__PURE__ */ React51.createElement(chakra.span, {
+    __css: {
+      pointerEvents: "none",
+      flex: "1 1 auto",
+      minW: 0
+    }
   }, props.children));
 });
 if (__DEV__) {
@@ -36062,9 +36587,9 @@ var MenuList = forwardRef3((props, ref) => {
   const { isOpen, onTransitionEnd } = useMenuContext();
   const menulistProps = useMenuList(rest, ref);
   const styles2 = useStyles();
-  return /* @__PURE__ */ React37.createElement(chakra.div, {
+  return /* @__PURE__ */ React51.createElement(chakra.div, {
     __css: { zIndex: (_c = props.zIndex) != null ? _c : (_b = styles2.list) == null ? void 0 : _b.zIndex }
-  }, /* @__PURE__ */ React37.createElement(MotionDiv, __spreadProps(__spreadValues({}, menulistProps), {
+  }, /* @__PURE__ */ React51.createElement(MotionDiv, __spreadProps(__spreadValues({}, menulistProps), {
     onUpdate: onTransitionEnd,
     className: cx("chakra-menu__menu-list", menulistProps.className),
     variants: motionVariants,
@@ -36093,7 +36618,7 @@ var StyledMenuItem = forwardRef3((props, ref) => {
     flex: "0 0 auto",
     outline: 0
   }, styles2.item);
-  return /* @__PURE__ */ React37.createElement(chakra.button, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React51.createElement(chakra.button, __spreadProps(__spreadValues({
     ref,
     type: btnType
   }, rest), {
@@ -36116,39 +36641,39 @@ var MenuItem = forwardRef3((props, ref) => {
   ]);
   const menuitemProps = useMenuItem(rest, ref);
   const shouldWrap = icon || command;
-  const _children = shouldWrap ? /* @__PURE__ */ React37.createElement("span", {
+  const _children = shouldWrap ? /* @__PURE__ */ React51.createElement("span", {
     style: { pointerEvents: "none", flex: 1 }
   }, children) : children;
-  return /* @__PURE__ */ React37.createElement(StyledMenuItem, __spreadProps(__spreadValues({}, menuitemProps), {
+  return /* @__PURE__ */ React51.createElement(StyledMenuItem, __spreadProps(__spreadValues({}, menuitemProps), {
     className: cx("chakra-menu__menuitem", menuitemProps.className)
-  }), icon && /* @__PURE__ */ React37.createElement(MenuIcon, {
+  }), icon && /* @__PURE__ */ React51.createElement(MenuIcon, {
     fontSize: "0.8em",
     marginEnd: iconSpacing2
-  }, icon), _children, command && /* @__PURE__ */ React37.createElement(MenuCommand, {
+  }, icon), _children, command && /* @__PURE__ */ React51.createElement(MenuCommand, {
     marginStart: commandSpacing
   }, command));
 });
 if (__DEV__) {
   MenuItem.displayName = "MenuItem";
 }
-var CheckIcon3 = (props) => /* @__PURE__ */ React37.createElement("svg", __spreadValues({
+var CheckIcon3 = (props) => /* @__PURE__ */ React51.createElement("svg", __spreadValues({
   viewBox: "0 0 14 14",
   width: "1em",
   height: "1em"
-}, props), /* @__PURE__ */ React37.createElement("polygon", {
+}, props), /* @__PURE__ */ React51.createElement("polygon", {
   fill: "currentColor",
   points: "5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"
 }));
 var MenuItemOption = forwardRef3((props, ref) => {
   const _a = props, { icon, iconSpacing: iconSpacing2 = "0.75rem" } = _a, rest = __objRest(_a, ["icon", "iconSpacing"]);
   const optionProps = useMenuOption(rest, ref);
-  return /* @__PURE__ */ React37.createElement(StyledMenuItem, __spreadProps(__spreadValues({}, optionProps), {
+  return /* @__PURE__ */ React51.createElement(StyledMenuItem, __spreadProps(__spreadValues({}, optionProps), {
     className: cx("chakra-menu__menuitem-option", rest.className)
-  }), /* @__PURE__ */ React37.createElement(MenuIcon, {
+  }), /* @__PURE__ */ React51.createElement(MenuIcon, {
     fontSize: "0.8em",
     marginEnd: iconSpacing2,
     opacity: props.isChecked ? 1 : 0
-  }, icon || /* @__PURE__ */ React37.createElement(CheckIcon3, null)), /* @__PURE__ */ React37.createElement("span", {
+  }, icon || /* @__PURE__ */ React51.createElement(CheckIcon3, null)), /* @__PURE__ */ React51.createElement("span", {
     style: { flex: 1 }
   }, optionProps.children));
 });
@@ -36159,7 +36684,7 @@ if (__DEV__) {
 var MenuOptionGroup = (props) => {
   const _a = props, { className, title } = _a, rest = __objRest(_a, ["className", "title"]);
   const ownProps = useMenuOptionGroup(rest);
-  return /* @__PURE__ */ React37.createElement(MenuGroup, __spreadValues({
+  return /* @__PURE__ */ React51.createElement(MenuGroup, __spreadValues({
     title,
     className: cx("chakra-menu__option-group", className)
   }, ownProps));
@@ -36171,11 +36696,11 @@ var MenuGroup = forwardRef3((props, ref) => {
   const _a = props, { title, children, className } = _a, rest = __objRest(_a, ["title", "children", "className"]);
   const _className = cx("chakra-menu__group__title", className);
   const styles2 = useStyles();
-  return /* @__PURE__ */ React37.createElement("div", {
+  return /* @__PURE__ */ React51.createElement("div", {
     ref,
     className: "chakra-menu__group",
     role: "group"
-  }, title && /* @__PURE__ */ React37.createElement(chakra.p, __spreadProps(__spreadValues({
+  }, title && /* @__PURE__ */ React51.createElement(chakra.p, __spreadProps(__spreadValues({
     className: _className
   }, rest), {
     __css: styles2.groupTitle
@@ -36186,7 +36711,7 @@ if (__DEV__) {
 }
 var MenuCommand = forwardRef3((props, ref) => {
   const styles2 = useStyles();
-  return /* @__PURE__ */ React37.createElement(chakra.span, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React51.createElement(chakra.span, __spreadProps(__spreadValues({
     ref
   }, props), {
     __css: styles2.command,
@@ -36198,14 +36723,14 @@ if (__DEV__) {
 }
 var MenuIcon = (props) => {
   const _a = props, { className, children } = _a, rest = __objRest(_a, ["className", "children"]);
-  const child = React37.Children.only(children);
-  const clone = React37.isValidElement(child) ? React37.cloneElement(child, {
+  const child = React51.Children.only(children);
+  const clone = React51.isValidElement(child) ? React51.cloneElement(child, {
     focusable: "false",
     "aria-hidden": true,
     className: cx("chakra-menu__icon", child.props.className)
   }) : null;
   const _className = cx("chakra-menu__icon-wrapper", className);
-  return /* @__PURE__ */ React37.createElement(chakra.span, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React51.createElement(chakra.span, __spreadProps(__spreadValues({
     className: _className
   }, rest), {
     __css: {
@@ -36219,7 +36744,7 @@ if (__DEV__) {
 var MenuDivider = (props) => {
   const _a = props, { className } = _a, rest = __objRest(_a, ["className"]);
   const styles2 = useStyles();
-  return /* @__PURE__ */ React37.createElement(chakra.hr, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React51.createElement(chakra.hr, __spreadProps(__spreadValues({
     role: "separator",
     "aria-orientation": "horizontal",
     className: cx("chakra-menu__divider", className)
@@ -36241,6 +36766,7 @@ function TableOfContent({
     navigator2.goToPage(href);
   };
   const tocBgColor = useColorModeValue_default("ui.white", "ui.black", "ui.sepia");
+  const iconFill = useColorModeValue_default("ui.black", "ui.white", "ui.black");
   const getLinkHref = (link2) => {
     if (link2.href)
       return link2.href;
@@ -36248,20 +36774,21 @@ function TableOfContent({
       throw new Error("Manifest is not well formed");
     return getLinkHref(link2.children[0]);
   };
-  return /* @__PURE__ */ React38.createElement(Menu, null, ({ isOpen }) => /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement(MenuButton, {
+  return /* @__PURE__ */ React52.createElement(Menu, null, ({ isOpen }) => /* @__PURE__ */ React52.createElement(React52.Fragment, null, /* @__PURE__ */ React52.createElement(MenuButton, {
     as: Button_default,
     border: "none",
     "aria-label": "Table of Contents",
-    leftIcon: /* @__PURE__ */ React38.createElement(Icon, {
-      as: isOpen ? MdOutlineCancel : MdOutlineToc,
+    leftIcon: /* @__PURE__ */ React52.createElement(Icon, {
+      as: TableOfContents_default,
       w: 6,
-      h: 6
+      h: 6,
+      fill: iconFill
     })
-  }, /* @__PURE__ */ React38.createElement(Text, {
+  }, /* @__PURE__ */ React52.createElement(Text, {
     variant: "headerNav"
-  }, "Table of Contents")), /* @__PURE__ */ React38.createElement(Portal, {
+  }, "Table of Contents")), /* @__PURE__ */ React52.createElement(Portal, {
     containerRef
-  }, /* @__PURE__ */ React38.createElement(MenuList, {
+  }, /* @__PURE__ */ React52.createElement(MenuList, {
     overflowY: "auto",
     m: "0",
     position: "absolute",
@@ -36275,14 +36802,14 @@ function TableOfContent({
     borderRadius: "0"
   }, manifest.toc && manifest.toc.length > 0 ? manifest.toc.map((content, i) => {
     var _a;
-    return /* @__PURE__ */ React38.createElement(Item, {
+    return /* @__PURE__ */ React52.createElement(Item, {
       key: content.title,
       "aria-label": content.title,
       onClick: () => tocLinkHandler(getLinkHref(content)),
       html: (_a = content.title) != null ? _a : ""
-    }, content.children && /* @__PURE__ */ React38.createElement(React38.Fragment, null, content.children.map((subLink) => {
+    }, content.children && /* @__PURE__ */ React52.createElement(React52.Fragment, null, content.children.map((subLink) => {
       var _a2;
-      return /* @__PURE__ */ React38.createElement(Item, {
+      return /* @__PURE__ */ React52.createElement(Item, {
         "aria-label": subLink.title,
         key: subLink.title,
         onClick: () => tocLinkHandler(getLinkHref(subLink)),
@@ -36290,12 +36817,12 @@ function TableOfContent({
         html: (_a2 = subLink.title) != null ? _a2 : ""
       });
     })));
-  }) : /* @__PURE__ */ React38.createElement(MissingToc, null, "This publication does not have a Table of Contents.")))));
+  }) : /* @__PURE__ */ React52.createElement(MissingToc, null, "This publication does not have a Table of Contents.")))));
 }
 var MissingToc = ({
   children
 }) => {
-  return /* @__PURE__ */ React38.createElement(Box, {
+  return /* @__PURE__ */ React52.createElement(Box, {
     d: "flex",
     justifyContent: "center",
     alignItems: "center",
@@ -36303,7 +36830,7 @@ var MissingToc = ({
     maxHeight: "100vmin"
   }, children);
 };
-var Item = React38.forwardRef((_a, ref) => {
+var Item = React52.forwardRef((_a, ref) => {
   var _b = _a, { html, children } = _b, props = __objRest(_b, ["html", "children"]);
   const bgColor = useColorModeValue_default("ui.white", "ui.black", "ui.sepia");
   const color3 = useColorModeValue_default("ui.black", "ui.white", "ui.black");
@@ -36316,7 +36843,7 @@ var Item = React38.forwardRef((_a, ref) => {
   const _focus = __spreadProps(__spreadValues({}, _hover), {
     boxShadow: "none"
   });
-  return /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement(MenuItem, __spreadValues({
+  return /* @__PURE__ */ React52.createElement(React52.Fragment, null, /* @__PURE__ */ React52.createElement(MenuItem, __spreadValues({
     d: "flex",
     flexDir: "column",
     alignItems: "stretch",
@@ -36328,7 +36855,7 @@ var Item = React38.forwardRef((_a, ref) => {
     tabIndex: -1,
     borderBottom: "1px solid",
     borderColor
-  }, props), /* @__PURE__ */ React38.createElement("span", {
+  }, props), /* @__PURE__ */ React52.createElement("span", {
     dangerouslySetInnerHTML: { __html: html }
   })), children);
 });
@@ -36373,77 +36900,70 @@ function toggleFullScreen() {
   }
 }
 
-// src/constants.ts
-var ReadiumWebpubContext = "http://readium.org/webpub/default.jsonld";
-var IS_DEV = false;
-var HEADER_HEIGHT = 48;
-var FOOTER_HEIGHT = 48;
-var CHROME_HEIGHT = HEADER_HEIGHT + FOOTER_HEIGHT;
-var DEFAULT_HEIGHT = `calc(100vh - ${CHROME_HEIGHT}px)`;
-var DEFAULT_SHOULD_GROW_WHEN_SCROLLING = true;
-var DEFAULT_SETTINGS = {
-  colorMode: "day",
-  isScrolling: false,
-  fontSize: 100,
-  fontFamily: "publisher"
-};
-var LOCAL_STORAGE_SETTINGS_KEY = "web-reader-settings";
-var LOCAL_STORAGE_LOCATIONS_KEY = "web-reader-locations";
-
 // src/ui/Header.tsx
 var DefaultHeaderLeft = () => {
   const linkColor = useColorModeValue_default("gray.700", "gray.100", "gray.700");
-  return /* @__PURE__ */ React39.createElement(Link, {
+  const iconFill = useColorModeValue_default("ui.gray.icon", "ui.white", "ui.gray.icon");
+  const bgColorFocus = useColorModeValue_default("ui.gray.active", "ui.gray.x-dark", "ui.gray.active");
+  return /* @__PURE__ */ React53.createElement(Link, {
     href: "/",
     "aria-label": "Return to Homepage",
     tabIndex: 0,
     fontSize: 0,
+    px: 3,
     py: 1,
-    textTransform: "uppercase",
     d: "flex",
     color: linkColor,
     height: "100%",
     alignItems: "center",
     _hover: {
+      bgColor: bgColorFocus,
       textDecoration: "none"
+    },
+    _focus: {
+      bgColor: bgColorFocus
     }
-  }, /* @__PURE__ */ React39.createElement(Icon, {
-    as: MdHome,
+  }, /* @__PURE__ */ React53.createElement(Icon, {
+    as: Previous_default,
+    fill: iconFill,
     w: 6,
     h: 6
-  }), /* @__PURE__ */ React39.createElement(Text, {
-    paddingLeft: 2,
+  }), /* @__PURE__ */ React53.createElement(Text, {
     variant: "headerNav"
-  }, "Back to Homepage"));
+  }, "Back"));
 };
 function Header(props) {
   const [isFullscreen, toggleFullScreen2] = useFullscreen();
   const { headerLeft, navigator: navigator2, manifest, containerRef } = props;
-  const mainBgColor = useColorModeValue_default("ui.white", "ui.black", "ui.sepia");
-  return /* @__PURE__ */ React39.createElement(HeaderWrapper, {
+  const iconFill = useColorModeValue_default("ui.gray.icon", "ui.white", "ui.gray.icon");
+  const mainBgColor = useColorModeValue_default("ui.gray.light-warm", "ui.black", "ui.sepia");
+  return /* @__PURE__ */ React53.createElement(HeaderWrapper, {
     bg: mainBgColor
-  }, headerLeft != null ? headerLeft : /* @__PURE__ */ React39.createElement(DefaultHeaderLeft, null), /* @__PURE__ */ React39.createElement(HStack, {
+  }, headerLeft != null ? headerLeft : /* @__PURE__ */ React53.createElement(DefaultHeaderLeft, null), /* @__PURE__ */ React53.createElement(HStack, {
     ml: "auto",
     spacing: 1
-  }, /* @__PURE__ */ React39.createElement(TableOfContent, {
+  }, /* @__PURE__ */ React53.createElement(TableOfContent, {
     containerRef,
     navigator: navigator2,
     manifest
-  }), /* @__PURE__ */ React39.createElement(SettingsCard, __spreadValues({}, props)), /* @__PURE__ */ React39.createElement(Button_default, {
+  }), /* @__PURE__ */ React53.createElement(SettingsCard, __spreadValues({}, props)), /* @__PURE__ */ React53.createElement(Button_default, {
+    "aria-expanded": isFullscreen,
+    "aria-label": "Toggle full screen",
     border: "none",
     onClick: toggleFullScreen2,
-    leftIcon: /* @__PURE__ */ React39.createElement(Icon, {
-      as: isFullscreen ? MdOutlineFullscreenExit : MdOutlineFullscreen,
+    leftIcon: /* @__PURE__ */ React53.createElement(Icon, {
+      as: isFullscreen ? ToggleFullScreenExit_default : ToggleFullScreen_default,
+      fill: iconFill,
       w: 6,
       h: 6
     })
-  }, /* @__PURE__ */ React39.createElement(Text, {
+  }, /* @__PURE__ */ React53.createElement(Text, {
     variant: "headerNav"
-  }, "Toggle Fullscreen"))));
+  }, isFullscreen ? "Full screen exit" : "Full screen"))));
 }
-var HeaderWrapper = React39.forwardRef((_a, ref) => {
+var HeaderWrapper = React53.forwardRef((_a, ref) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React39.createElement(Flex, __spreadValues({
+  return /* @__PURE__ */ React53.createElement(Flex, __spreadValues({
     ref,
     as: "header",
     position: "sticky",
@@ -36462,7 +36982,7 @@ var HeaderWrapper = React39.forwardRef((_a, ref) => {
 
 // src/ui/ErrorBoundary.tsx
 var initialState = { error: void 0, info: void 0 };
-var ErrorBoundary = class extends React40.Component {
+var ErrorBoundary = class extends React54.Component {
   constructor() {
     super(...arguments);
     this.state = initialState;
@@ -36483,13 +37003,13 @@ var ErrorBoundary = class extends React40.Component {
     var _a;
     const { error: error2, info } = this.state;
     if (error2 && info) {
-      return /* @__PURE__ */ React40.createElement(ThemeProvider3, {
+      return /* @__PURE__ */ React54.createElement(ThemeProvider3, {
         theme: getTheme3("day")
-      }, /* @__PURE__ */ React40.createElement(HeaderWrapper, null, (_a = this.props.headerLeft) != null ? _a : /* @__PURE__ */ React40.createElement(DefaultHeaderLeft, null)), /* @__PURE__ */ React40.createElement(Flex, {
+      }, /* @__PURE__ */ React54.createElement(HeaderWrapper, null, (_a = this.props.headerLeft) != null ? _a : /* @__PURE__ */ React54.createElement(DefaultHeaderLeft, null)), /* @__PURE__ */ React54.createElement(Flex, {
         m: 3,
         justifyContent: "center",
         mt: "20%"
-      }, /* @__PURE__ */ React40.createElement(Alert, {
+      }, /* @__PURE__ */ React54.createElement(Alert, {
         status: "error",
         variant: "top-accent",
         flexDirection: "column",
@@ -36497,9 +37017,9 @@ var ErrorBoundary = class extends React40.Component {
         justifyContent: "center",
         textAlign: "center",
         maxW: "600px"
-      }, /* @__PURE__ */ React40.createElement(AlertIcon, null), /* @__PURE__ */ React40.createElement(AlertTitle, {
+      }, /* @__PURE__ */ React54.createElement(AlertIcon, null), /* @__PURE__ */ React54.createElement(AlertTitle, {
         as: "h1"
-      }, "An error occurred"), /* @__PURE__ */ React40.createElement(AlertDescription, {
+      }, "An error occurred"), /* @__PURE__ */ React54.createElement(AlertDescription, {
         role: "alert",
         "aria-label": error2.message
       }, error2.message))));
@@ -36510,18 +37030,18 @@ var ErrorBoundary = class extends React40.Component {
 var ErrorBoundary_default = ErrorBoundary;
 
 // src/ui/manager.tsx
-import * as React43 from "react";
+import * as React57 from "react";
 
 // src/ui/Footer.tsx
-import * as React42 from "react";
+import * as React56 from "react";
 
 // src/ui/PageButton.tsx
-import React41 from "react";
+import React55 from "react";
 function PageButton(props) {
   const _a = props, { children, onClick } = _a, rest = __objRest(_a, ["children", "onClick"]);
   const circleColor = useColorModeValue_default("ui.black", "ui.white", "ui.black");
   const circleBgColor = useColorModeValue_default("ui.white", "gray.700", "ui.white");
-  return /* @__PURE__ */ React41.createElement(Button, __spreadValues({
+  return /* @__PURE__ */ React55.createElement(Button, __spreadValues({
     color: circleColor,
     bg: circleBgColor,
     height: "auto",
@@ -36542,10 +37062,10 @@ var Footer = (_a) => {
     "state",
     "navigator"
   ]);
-  const bgColor = useColorModeValue_default("ui.white", "ui.black", "ui.sepia");
+  const bgColor = useColorModeValue_default("ui.gray.light-warm", "ui.black", "ui.sepia");
   const isAtStart = state2 == null ? void 0 : state2.atStart;
   const isAtEnd = state2 == null ? void 0 : state2.atEnd;
-  return /* @__PURE__ */ React42.createElement(Flex, __spreadValues({
+  return /* @__PURE__ */ React56.createElement(Flex, __spreadValues({
     as: "footer",
     position: "sticky",
     height: `${FOOTER_HEIGHT}px`,
@@ -36556,19 +37076,19 @@ var Footer = (_a) => {
     bg: bgColor,
     borderTop: "1px solid",
     borderColor: "gray.100"
-  }, rest), /* @__PURE__ */ React42.createElement(PageButton_default, {
+  }, rest), /* @__PURE__ */ React56.createElement(PageButton_default, {
     onClick: navigator2 == null ? void 0 : navigator2.goBackward,
     "aria-label": "Previous Page",
     disabled: isAtStart
-  }, /* @__PURE__ */ React42.createElement(Icon, {
+  }, /* @__PURE__ */ React56.createElement(Icon, {
     as: MdKeyboardArrowLeft,
     w: 6,
     h: 6
-  }), "Previous"), /* @__PURE__ */ React42.createElement(PageButton_default, {
+  }), "Previous"), /* @__PURE__ */ React56.createElement(PageButton_default, {
     onClick: navigator2 == null ? void 0 : navigator2.goForward,
     "aria-label": "Next Page",
     disabled: isAtEnd
-  }, "Next ", /* @__PURE__ */ React42.createElement(Icon, {
+  }, "Next ", /* @__PURE__ */ React56.createElement(Icon, {
     as: MdKeyboardArrowRight,
     w: 6,
     h: 6
@@ -36579,9 +37099,9 @@ var Footer_default = Footer;
 // src/ui/manager.tsx
 var ManagerUI = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ React43.createElement(ThemeProvider3, {
+  return /* @__PURE__ */ React57.createElement(ThemeProvider3, {
     theme: getTheme3((_b = (_a = props.state) == null ? void 0 : _a.settings) == null ? void 0 : _b.colorMode)
-  }, /* @__PURE__ */ React43.createElement(WebReaderContent, __spreadValues({}, props)));
+  }, /* @__PURE__ */ React57.createElement(WebReaderContent, __spreadValues({}, props)));
 };
 var WebReaderContent = (_a) => {
   var _b = _a, {
@@ -36592,15 +37112,15 @@ var WebReaderContent = (_a) => {
     "headerLeft"
   ]);
   const bgColor = useColorModeValue_default("ui.white", "ui.black", "ui.sepia");
-  const containerRef = React43.useRef(null);
-  return /* @__PURE__ */ React43.createElement(Flex, {
+  const containerRef = React57.useRef(null);
+  return /* @__PURE__ */ React57.createElement(Flex, {
     flexDir: "column",
     w: "100%",
     position: "relative"
-  }, !props.isLoading && /* @__PURE__ */ React43.createElement(Header, __spreadValues({
+  }, !props.isLoading && /* @__PURE__ */ React57.createElement(Header, __spreadValues({
     headerLeft,
     containerRef
-  }, props)), /* @__PURE__ */ React43.createElement(Flex, {
+  }, props)), /* @__PURE__ */ React57.createElement(Flex, {
     as: "main",
     ref: containerRef,
     position: "relative",
@@ -36608,7 +37128,7 @@ var WebReaderContent = (_a) => {
     flexDir: "column",
     alignItems: "stretch",
     flex: "1 1 auto"
-  }, children), /* @__PURE__ */ React43.createElement(Footer_default, {
+  }, children), /* @__PURE__ */ React57.createElement(Footer_default, {
     state: props.state,
     navigator: props.navigator
   }));
@@ -36616,7 +37136,7 @@ var WebReaderContent = (_a) => {
 var manager_default = ManagerUI;
 
 // src/useWebReader.tsx
-import React66 from "react";
+import React80 from "react";
 
 // src/utils/fetch.ts
 function fetchJson(url) {
@@ -36777,7 +37297,7 @@ function _getPrototypeOf(o) {
 // node_modules/react-pdf/dist/esm/Document.js
 var import_prop_types3 = __toESM(require_prop_types());
 var import_make_event_props2 = __toESM(require_entry());
-import React45, { PureComponent } from "react";
+import React59, { PureComponent } from "react";
 
 // node_modules/make-cancellable-promise/dist/esm/index.js
 function makeCancellablePromise(promise) {
@@ -36815,10 +37335,10 @@ var DocumentContext_default = /* @__PURE__ */ createContext13(null);
 
 // node_modules/react-pdf/dist/esm/Message.js
 var import_prop_types = __toESM(require_prop_types());
-import React44 from "react";
+import React58 from "react";
 function Message(_ref) {
   var children = _ref.children, type = _ref.type;
-  return /* @__PURE__ */ React44.createElement("div", {
+  return /* @__PURE__ */ React58.createElement("div", {
     className: "react-pdf__message react-pdf__message--".concat(type)
   }, children);
 }
@@ -37642,7 +38162,7 @@ var Document = /* @__PURE__ */ function(_PureComponent) {
     key: "renderChildren",
     value: function renderChildren() {
       var children = this.props.children;
-      return /* @__PURE__ */ React45.createElement(DocumentContext_default.Provider, {
+      return /* @__PURE__ */ React59.createElement(DocumentContext_default.Provider, {
         value: this.childContext
       }, children);
     }
@@ -37653,19 +38173,19 @@ var Document = /* @__PURE__ */ function(_PureComponent) {
       var pdf = this.state.pdf;
       if (!file) {
         var noData = this.props.noData;
-        return /* @__PURE__ */ React45.createElement(Message, {
+        return /* @__PURE__ */ React59.createElement(Message, {
           type: "no-data"
         }, typeof noData === "function" ? noData() : noData);
       }
       if (pdf === null) {
         var loading = this.props.loading;
-        return /* @__PURE__ */ React45.createElement(Message, {
+        return /* @__PURE__ */ React59.createElement(Message, {
           type: "loading"
         }, typeof loading === "function" ? loading() : loading);
       }
       if (pdf === false) {
         var error2 = this.props.error;
-        return /* @__PURE__ */ React45.createElement(Message, {
+        return /* @__PURE__ */ React59.createElement(Message, {
           type: "error"
         }, typeof error2 === "function" ? error2() : error2);
       }
@@ -37675,7 +38195,7 @@ var Document = /* @__PURE__ */ function(_PureComponent) {
     key: "render",
     value: function render() {
       var _this$props2 = this.props, className = _this$props2.className, inputRef = _this$props2.inputRef;
-      return /* @__PURE__ */ React45.createElement("div", _extends({
+      return /* @__PURE__ */ React59.createElement("div", _extends({
         className: mergeClassNames("react-pdf__Document", className),
         ref: inputRef
       }, this.eventProps), this.renderContent());
@@ -37750,7 +38270,7 @@ Document.propTypes = _objectSpread(_objectSpread({}, eventProps), {}, {
 // node_modules/react-pdf/dist/esm/Outline.js
 var import_regenerator4 = __toESM(require_regenerator());
 var import_prop_types5 = __toESM(require_prop_types());
-import React47, { PureComponent as PureComponent3 } from "react";
+import React61, { PureComponent as PureComponent3 } from "react";
 var import_make_event_props3 = __toESM(require_entry());
 
 // node_modules/react-pdf/dist/esm/OutlineContext.js
@@ -37760,7 +38280,7 @@ var OutlineContext_default = /* @__PURE__ */ createContext14(null);
 // node_modules/react-pdf/dist/esm/OutlineItem.js
 var import_regenerator3 = __toESM(require_regenerator());
 var import_prop_types4 = __toESM(require_prop_types());
-import React46, { PureComponent as PureComponent2 } from "react";
+import React60, { PureComponent as PureComponent2 } from "react";
 
 // node_modules/react-pdf/dist/esm/Ref.js
 var Ref = /* @__PURE__ */ function() {
@@ -37954,8 +38474,8 @@ var OutlineItemInternal = /* @__PURE__ */ function(_PureComponent) {
         return null;
       }
       var subitems = item.items;
-      return /* @__PURE__ */ React46.createElement("ul", null, subitems.map(function(subitem, subitemIndex) {
-        return /* @__PURE__ */ React46.createElement(OutlineItemInternal2, _extends({
+      return /* @__PURE__ */ React60.createElement("ul", null, subitems.map(function(subitem, subitemIndex) {
+        return /* @__PURE__ */ React60.createElement(OutlineItemInternal2, _extends({
           key: typeof subitem.destination === "string" ? subitem.destination : subitemIndex,
           item: subitem
         }, otherProps));
@@ -37965,7 +38485,7 @@ var OutlineItemInternal = /* @__PURE__ */ function(_PureComponent) {
     key: "render",
     value: function render() {
       var item = this.props.item;
-      return /* @__PURE__ */ React46.createElement("li", null, /* @__PURE__ */ React46.createElement("a", {
+      return /* @__PURE__ */ React60.createElement("li", null, /* @__PURE__ */ React60.createElement("a", {
         href: "#",
         onClick: this.onClick
       }, item.title), this.renderSubitems());
@@ -37987,9 +38507,9 @@ OutlineItemInternal.propTypes = {
   pdf: isPdf.isRequired
 };
 var OutlineItem = function OutlineItem2(props) {
-  return /* @__PURE__ */ React46.createElement(DocumentContext_default.Consumer, null, function(documentContext) {
-    return /* @__PURE__ */ React46.createElement(OutlineContext_default.Consumer, null, function(outlineContext) {
-      return /* @__PURE__ */ React46.createElement(OutlineItemInternal, _extends({}, documentContext, outlineContext, props));
+  return /* @__PURE__ */ React60.createElement(DocumentContext_default.Consumer, null, function(documentContext) {
+    return /* @__PURE__ */ React60.createElement(OutlineContext_default.Consumer, null, function(outlineContext) {
+      return /* @__PURE__ */ React60.createElement(OutlineItemInternal, _extends({}, documentContext, outlineContext, props));
     });
   });
 };
@@ -38157,8 +38677,8 @@ var OutlineInternal = /* @__PURE__ */ function(_PureComponent) {
     key: "renderOutline",
     value: function renderOutline() {
       var outline5 = this.state.outline;
-      return /* @__PURE__ */ React47.createElement("ul", null, outline5.map(function(item, itemIndex) {
-        return /* @__PURE__ */ React47.createElement(OutlineItem_default, {
+      return /* @__PURE__ */ React61.createElement("ul", null, outline5.map(function(item, itemIndex) {
+        return /* @__PURE__ */ React61.createElement(OutlineItem_default, {
           key: typeof item.destination === "string" ? item.destination : itemIndex,
           item
         });
@@ -38173,10 +38693,10 @@ var OutlineInternal = /* @__PURE__ */ function(_PureComponent) {
         return null;
       }
       var _this$props = this.props, className = _this$props.className, inputRef = _this$props.inputRef;
-      return /* @__PURE__ */ React47.createElement("div", _extends({
+      return /* @__PURE__ */ React61.createElement("div", _extends({
         className: mergeClassNames("react-pdf__Outline", className),
         ref: inputRef
-      }, this.eventProps), /* @__PURE__ */ React47.createElement(OutlineContext_default.Provider, {
+      }, this.eventProps), /* @__PURE__ */ React61.createElement(OutlineContext_default.Provider, {
         value: this.childContext
       }, this.renderOutline()));
     }
@@ -38210,7 +38730,7 @@ OutlineInternal.propTypes = _objectSpread2({
 // node_modules/react-pdf/dist/esm/Page.js
 var import_regenerator8 = __toESM(require_regenerator());
 var import_prop_types11 = __toESM(require_prop_types());
-import React53, { PureComponent as PureComponent9 } from "react";
+import React67, { PureComponent as PureComponent9 } from "react";
 var import_make_event_props4 = __toESM(require_entry());
 
 // node_modules/merge-refs/dist/esm/index.js
@@ -38239,7 +38759,7 @@ var PageContext_default = /* @__PURE__ */ createContext15(null);
 
 // node_modules/react-pdf/dist/esm/Page/PageCanvas.js
 var import_prop_types6 = __toESM(require_prop_types());
-import React48, { PureComponent as PureComponent4 } from "react";
+import React62, { PureComponent as PureComponent4 } from "react";
 function _createSuper4(Derived) {
   var hasNativeReflectConstruct = _isNativeReflectConstruct4();
   return function _createSuperInternal() {
@@ -38354,7 +38874,7 @@ var PageCanvasInternal = /* @__PURE__ */ function(_PureComponent) {
     value: function render() {
       var _this2 = this;
       var canvasRef = this.props.canvasRef;
-      return /* @__PURE__ */ React48.createElement("canvas", {
+      return /* @__PURE__ */ React62.createElement("canvas", {
         className: "react-pdf__Page__canvas",
         dir: "ltr",
         ref: mergeRefs2(canvasRef, function(ref) {
@@ -38398,15 +38918,15 @@ PageCanvasInternal.propTypes = {
   scale: import_prop_types6.default.number.isRequired
 };
 function PageCanvas(props) {
-  return /* @__PURE__ */ React48.createElement(PageContext_default.Consumer, null, function(context) {
-    return /* @__PURE__ */ React48.createElement(PageCanvasInternal, _extends({}, context, props));
+  return /* @__PURE__ */ React62.createElement(PageContext_default.Consumer, null, function(context) {
+    return /* @__PURE__ */ React62.createElement(PageCanvasInternal, _extends({}, context, props));
   });
 }
 
 // node_modules/react-pdf/dist/esm/Page/PageSVG.js
 var import_prop_types7 = __toESM(require_prop_types());
 var pdfjs2 = __toESM(require_pdf());
-import React49, { PureComponent as PureComponent5 } from "react";
+import React63, { PureComponent as PureComponent5 } from "react";
 function _createSuper5(Derived) {
   var hasNativeReflectConstruct = _isNativeReflectConstruct5();
   return function _createSuperInternal() {
@@ -38499,7 +39019,7 @@ var PageSVGInternal = /* @__PURE__ */ function(_PureComponent) {
     value: function render() {
       var _this2 = this;
       var _this$viewport2 = this.viewport, width = _this$viewport2.width, height = _this$viewport2.height;
-      return /* @__PURE__ */ React49.createElement("div", {
+      return /* @__PURE__ */ React63.createElement("div", {
         className: "react-pdf__Page__svg",
         ref: function ref(_ref) {
           return _this2.drawPageOnContainer(_ref);
@@ -38534,20 +39054,20 @@ PageSVGInternal.propTypes = {
   scale: import_prop_types7.default.number.isRequired
 };
 function PageSVG(props) {
-  return /* @__PURE__ */ React49.createElement(PageContext_default.Consumer, null, function(context) {
-    return /* @__PURE__ */ React49.createElement(PageSVGInternal, _extends({}, context, props));
+  return /* @__PURE__ */ React63.createElement(PageContext_default.Consumer, null, function(context) {
+    return /* @__PURE__ */ React63.createElement(PageSVGInternal, _extends({}, context, props));
   });
 }
 
 // node_modules/react-pdf/dist/esm/Page/TextLayer.js
 var import_regenerator6 = __toESM(require_regenerator());
 var import_prop_types9 = __toESM(require_prop_types());
-import React51, { PureComponent as PureComponent7 } from "react";
+import React65, { PureComponent as PureComponent7 } from "react";
 
 // node_modules/react-pdf/dist/esm/Page/TextLayerItem.js
 var import_regenerator5 = __toESM(require_regenerator());
 var import_prop_types8 = __toESM(require_prop_types());
-import React50, { PureComponent as PureComponent6 } from "react";
+import React64, { PureComponent as PureComponent6 } from "react";
 function _createSuper6(Derived) {
   var hasNativeReflectConstruct = _isNativeReflectConstruct6();
   return function _createSuperInternal() {
@@ -38683,7 +39203,7 @@ var TextLayerItemInternal = /* @__PURE__ */ function(_PureComponent) {
       var _this2 = this;
       var fontSize = this.fontSize, top2 = this.top, left2 = this.left;
       var _this$props2 = this.props, customTextRenderer = _this$props2.customTextRenderer, scale2 = _this$props2.scale, text = _this$props2.str;
-      return /* @__PURE__ */ React50.createElement("span", {
+      return /* @__PURE__ */ React64.createElement("span", {
         ref: function ref(_ref) {
           _this2.item = _ref;
         },
@@ -38767,8 +39287,8 @@ TextLayerItemInternal.propTypes = {
   width: import_prop_types8.default.number.isRequired
 };
 function TextLayerItem(props) {
-  return /* @__PURE__ */ React50.createElement(PageContext_default.Consumer, null, function(context) {
-    return /* @__PURE__ */ React50.createElement(TextLayerItemInternal, _extends({}, context, props));
+  return /* @__PURE__ */ React64.createElement(PageContext_default.Consumer, null, function(context) {
+    return /* @__PURE__ */ React64.createElement(TextLayerItemInternal, _extends({}, context, props));
   });
 }
 
@@ -38892,7 +39412,7 @@ var TextLayerInternal = /* @__PURE__ */ function(_PureComponent) {
         return null;
       }
       return textItems.map(function(textItem, itemIndex) {
-        return /* @__PURE__ */ React51.createElement(TextLayerItem, _extends({
+        return /* @__PURE__ */ React65.createElement(TextLayerItem, _extends({
           key: itemIndex,
           itemIndex
         }, textItem));
@@ -38902,7 +39422,7 @@ var TextLayerInternal = /* @__PURE__ */ function(_PureComponent) {
     key: "render",
     value: function render() {
       var viewport2 = this.unrotatedViewport, rotate = this.rotate;
-      return /* @__PURE__ */ React51.createElement("div", {
+      return /* @__PURE__ */ React65.createElement("div", {
         className: "react-pdf__Page__textContent",
         style: {
           position: "absolute",
@@ -38942,8 +39462,8 @@ TextLayerInternal.propTypes = {
   scale: import_prop_types9.default.number
 };
 function TextLayer(props) {
-  return /* @__PURE__ */ React51.createElement(PageContext_default.Consumer, null, function(context) {
-    return /* @__PURE__ */ React51.createElement(TextLayerInternal, _extends({}, context, props));
+  return /* @__PURE__ */ React65.createElement(PageContext_default.Consumer, null, function(context) {
+    return /* @__PURE__ */ React65.createElement(TextLayerInternal, _extends({}, context, props));
   });
 }
 
@@ -38951,7 +39471,7 @@ function TextLayer(props) {
 var import_regenerator7 = __toESM(require_regenerator());
 var import_prop_types10 = __toESM(require_prop_types());
 var pdfjs3 = __toESM(require_pdf());
-import React52, { PureComponent as PureComponent8 } from "react";
+import React66, { PureComponent as PureComponent8 } from "react";
 function _createSuper8(Derived) {
   var hasNativeReflectConstruct = _isNativeReflectConstruct8();
   return function _createSuperInternal() {
@@ -39105,7 +39625,7 @@ var AnnotationLayerInternal = /* @__PURE__ */ function(_PureComponent) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      return /* @__PURE__ */ React52.createElement("div", {
+      return /* @__PURE__ */ React66.createElement("div", {
         className: "react-pdf__Page__annotations annotationLayer",
         ref: function ref(_ref2) {
           _this2.annotationLayer = _ref2;
@@ -39137,9 +39657,9 @@ AnnotationLayerInternal.propTypes = {
   scale: import_prop_types10.default.number
 };
 var AnnotationLayer2 = function AnnotationLayer3(props) {
-  return /* @__PURE__ */ React52.createElement(DocumentContext_default.Consumer, null, function(documentContext) {
-    return /* @__PURE__ */ React52.createElement(PageContext_default.Consumer, null, function(pageContext) {
-      return /* @__PURE__ */ React52.createElement(AnnotationLayerInternal, _extends({}, documentContext, pageContext, props));
+  return /* @__PURE__ */ React66.createElement(DocumentContext_default.Consumer, null, function(documentContext) {
+    return /* @__PURE__ */ React66.createElement(PageContext_default.Consumer, null, function(pageContext) {
+      return /* @__PURE__ */ React66.createElement(AnnotationLayerInternal, _extends({}, documentContext, pageContext, props));
     });
   });
 };
@@ -39341,12 +39861,12 @@ var PageInternal = /* @__PURE__ */ function(_PureComponent) {
         case "none":
           return null;
         case "svg":
-          return /* @__PURE__ */ React53.createElement(PageSVG, {
+          return /* @__PURE__ */ React67.createElement(PageSVG, {
             key: "".concat(this.pageKeyNoScale, "_svg")
           });
         case "canvas":
         default:
-          return /* @__PURE__ */ React53.createElement(PageCanvas, {
+          return /* @__PURE__ */ React67.createElement(PageCanvas, {
             key: "".concat(this.pageKey, "_canvas"),
             canvasRef
           });
@@ -39359,7 +39879,7 @@ var PageInternal = /* @__PURE__ */ function(_PureComponent) {
       if (!renderTextLayer2) {
         return null;
       }
-      return /* @__PURE__ */ React53.createElement(TextLayer, {
+      return /* @__PURE__ */ React67.createElement(TextLayer, {
         key: "".concat(this.pageKey, "_text")
       });
     }
@@ -39370,7 +39890,7 @@ var PageInternal = /* @__PURE__ */ function(_PureComponent) {
       if (!renderAnnotationLayer2) {
         return null;
       }
-      return /* @__PURE__ */ React53.createElement(AnnotationLayer_default, {
+      return /* @__PURE__ */ React67.createElement(AnnotationLayer_default, {
         key: "".concat(this.pageKey, "_annotations")
       });
     }
@@ -39378,7 +39898,7 @@ var PageInternal = /* @__PURE__ */ function(_PureComponent) {
     key: "renderChildren",
     value: function renderChildren() {
       var children = this.props.children;
-      return /* @__PURE__ */ React53.createElement(PageContext_default.Provider, {
+      return /* @__PURE__ */ React67.createElement(PageContext_default.Provider, {
         value: this.childContext
       }, this.renderMainLayer(), this.renderTextLayer(), this.renderAnnotationLayer(), children);
     }
@@ -39390,19 +39910,19 @@ var PageInternal = /* @__PURE__ */ function(_PureComponent) {
       var page = this.state.page;
       if (!pageNumber) {
         var noData = this.props.noData;
-        return /* @__PURE__ */ React53.createElement(Message, {
+        return /* @__PURE__ */ React67.createElement(Message, {
           type: "no-data"
         }, typeof noData === "function" ? noData() : noData);
       }
       if (pdf === null || page === null) {
         var loading = this.props.loading;
-        return /* @__PURE__ */ React53.createElement(Message, {
+        return /* @__PURE__ */ React67.createElement(Message, {
           type: "loading"
         }, typeof loading === "function" ? loading() : loading);
       }
       if (pdf === false || page === false) {
         var error2 = this.props.error;
-        return /* @__PURE__ */ React53.createElement(Message, {
+        return /* @__PURE__ */ React67.createElement(Message, {
           type: "error"
         }, typeof error2 === "function" ? error2() : error2);
       }
@@ -39413,7 +39933,7 @@ var PageInternal = /* @__PURE__ */ function(_PureComponent) {
     value: function render() {
       var pageNumber = this.pageNumber;
       var _this$props3 = this.props, className = _this$props3.className, inputRef = _this$props3.inputRef;
-      return /* @__PURE__ */ React53.createElement("div", _extends({
+      return /* @__PURE__ */ React67.createElement("div", _extends({
         className: mergeClassNames("react-pdf__Page", className),
         "data-page-number": pageNumber,
         ref: mergeRefs2(inputRef, this.ref),
@@ -39557,13 +40077,13 @@ PageInternal.propTypes = _objectSpread3(_objectSpread3({}, eventProps), {}, {
   width: import_prop_types11.default.number
 });
 function Page(props, ref) {
-  return /* @__PURE__ */ React53.createElement(DocumentContext_default.Consumer, null, function(context) {
-    return /* @__PURE__ */ React53.createElement(PageInternal, _extends({
+  return /* @__PURE__ */ React67.createElement(DocumentContext_default.Consumer, null, function(context) {
+    return /* @__PURE__ */ React67.createElement(PageInternal, _extends({
       ref
     }, context, props));
   });
 }
-var Page_default = /* @__PURE__ */ React53.forwardRef(Page);
+var Page_default = /* @__PURE__ */ React67.forwardRef(Page);
 
 // node_modules/react-pdf/dist/esm/entry.js
 if (isLocalFileSystem) {
@@ -39572,10 +40092,10 @@ if (isLocalFileSystem) {
 pdfjs4.GlobalWorkerOptions.workerSrc = "pdf.worker.js";
 
 // src/PdfReader/index.tsx
-import * as React57 from "react";
+import * as React71 from "react";
 
 // src/PdfReader/useMeasure.tsx
-import * as React54 from "react";
+import * as React68 from "react";
 var DEFAULT_DIMENSION = {
   x: 0,
   y: 0,
@@ -39587,9 +40107,9 @@ var DEFAULT_DIMENSION = {
   right: 0
 };
 function useMeasure() {
-  const [element, ref] = React54.useState(null);
-  const [rect, setRect] = React54.useState(DEFAULT_DIMENSION);
-  const observer = React54.useMemo(() => new window.ResizeObserver((entries) => {
+  const [element, ref] = React68.useState(null);
+  const [rect, setRect] = React68.useState(DEFAULT_DIMENSION);
+  const observer = React68.useMemo(() => new window.ResizeObserver((entries) => {
     if (entries[0]) {
       const {
         x,
@@ -39604,7 +40124,7 @@ function useMeasure() {
       setRect({ x, y, width, height, top: top2, left: left2, bottom: bottom2, right: right2 });
     }
   }), []);
-  React54.useLayoutEffect(() => {
+  React68.useLayoutEffect(() => {
     if (!element)
       return;
     observer.observe(element);
@@ -39633,7 +40153,7 @@ var ChakraPage = chakra(Page_default, {
 var ChakraPage_default = ChakraPage;
 
 // src/PdfReader/ScrollPage.tsx
-import React55 from "react";
+import React69 from "react";
 
 // node_modules/react-intersection-observer/react-intersection-observer.m.js
 import { createElement as createElement33, Component as Component3, useRef as useRef19, useState as useState18, useCallback as useCallback15, useEffect as useEffect20 } from "react";
@@ -39895,7 +40415,7 @@ function useInView(_temp) {
 
 // src/PdfReader/ScrollPage.tsx
 var Placeholder = ({ width, height, pageNumber }) => {
-  return /* @__PURE__ */ React55.createElement("div", {
+  return /* @__PURE__ */ React69.createElement("div", {
     "data-page-number": pageNumber,
     style: { width, height }
   });
@@ -39912,15 +40432,15 @@ var ScrollPage = ({
     threshold: 0,
     triggerOnce: true
   });
-  return /* @__PURE__ */ React55.createElement("div", {
+  return /* @__PURE__ */ React69.createElement("div", {
     ref
-  }, inView ? /* @__PURE__ */ React55.createElement(ChakraPage_default, {
+  }, inView ? /* @__PURE__ */ React69.createElement(ChakraPage_default, {
     "data-page-number": pageNumber,
     pageNumber,
     scale: scale2,
     width,
     onLoadSuccess
-  }) : /* @__PURE__ */ React55.createElement(Placeholder, {
+  }) : /* @__PURE__ */ React69.createElement(Placeholder, {
     width: placeholderWidth,
     height: placeholderHeight,
     pageNumber
@@ -39929,14 +40449,14 @@ var ScrollPage = ({
 var ScrollPage_default = ScrollPage;
 
 // src/ui/LoadingSkeleton.tsx
-import React56 from "react";
+import React70 from "react";
 var LoadingSkeletonContent = ({
   height
 }) => {
   const bgColor = useColorModeValue_default("ui.white", "ui.black", "ui.sepia");
-  return /* @__PURE__ */ React56.createElement(React56.Fragment, null, /* @__PURE__ */ React56.createElement(HeaderWrapper, {
+  return /* @__PURE__ */ React70.createElement(React70.Fragment, null, /* @__PURE__ */ React70.createElement(HeaderWrapper, {
     bg: bgColor
-  }), /* @__PURE__ */ React56.createElement(Box, {
+  }), /* @__PURE__ */ React70.createElement(Box, {
     padding: "6",
     bg: bgColor,
     mt: "0",
@@ -39944,21 +40464,21 @@ var LoadingSkeletonContent = ({
     "aria-label": "Loading book...",
     "aria-busy": "true",
     role: "progressbar"
-  }, /* @__PURE__ */ React56.createElement(Flex, {
+  }, /* @__PURE__ */ React70.createElement(Flex, {
     justifyContent: "center"
-  }, /* @__PURE__ */ React56.createElement(Skeleton, {
+  }, /* @__PURE__ */ React70.createElement(Skeleton, {
     height: "20px",
     mb: "7",
     w: "30%"
-  })), /* @__PURE__ */ React56.createElement(SkeletonText, {
+  })), /* @__PURE__ */ React70.createElement(SkeletonText, {
     mb: "7",
     noOfLines: 10,
     spacing: "4"
-  }), /* @__PURE__ */ React56.createElement(SkeletonText, {
+  }), /* @__PURE__ */ React70.createElement(SkeletonText, {
     mb: "7",
     noOfLines: 5,
     spacing: "4"
-  })), /* @__PURE__ */ React56.createElement(Footer_default, {
+  })), /* @__PURE__ */ React70.createElement(Footer_default, {
     state: null,
     navigator: null,
     zIndex: "tooltip"
@@ -39969,9 +40489,9 @@ function LoadingSkeleton({
   state: state2
 }) {
   var _a;
-  return /* @__PURE__ */ React56.createElement(ThemeProvider3, {
+  return /* @__PURE__ */ React70.createElement(ThemeProvider3, {
     theme: getTheme3((_a = state2 == null ? void 0 : state2.settings) == null ? void 0 : _a.colorMode)
-  }, /* @__PURE__ */ React56.createElement(LoadingSkeletonContent, {
+  }, /* @__PURE__ */ React70.createElement(LoadingSkeletonContent, {
     height
   }));
 }
@@ -40087,7 +40607,7 @@ function usePdfReader(args) {
     height = DEFAULT_HEIGHT,
     growWhenScrolling = DEFAULT_SHOULD_GROW_WHEN_SCROLLING
   } = args != null ? args : {};
-  const [state2, dispatch] = React57.useReducer(pdfReducer, {
+  const [state2, dispatch] = React71.useReducer(pdfReducer, {
     state: "INACTIVE",
     resourceIndex: 0,
     resource: null,
@@ -40106,7 +40626,7 @@ function usePdfReader(args) {
   const isParsed = typeof state2.numPages === "number";
   const isSinglePDF = manifest && (manifest == null ? void 0 : manifest.readingOrder.length) === 1;
   const [containerRef, containerSize] = useMeasure();
-  React57.useEffect(() => {
+  React71.useEffect(() => {
     if (!webpubManifestUrl || !manifest) {
       return dispatch({ type: "ARGS_CHANGED", args: void 0 });
     }
@@ -40131,7 +40651,7 @@ function usePdfReader(args) {
     height,
     growWhenScrolling
   ]);
-  React57.useEffect(() => {
+  React71.useEffect(() => {
     if (!manifest)
       return;
     if (!manifest.readingOrder || !manifest.readingOrder.length) {
@@ -40145,7 +40665,7 @@ function usePdfReader(args) {
       });
     });
   }, [state2.resourceIndex, manifest, proxyUrl]);
-  const resizePage = React57.useCallback((pdfWidth, pdfHeight, containerSize2) => {
+  const resizePage = React71.useCallback((pdfWidth, pdfHeight, containerSize2) => {
     const wRatio = pdfWidth / containerSize2.width;
     const hRatio = pdfHeight / containerSize2.height;
     const fitHorizontal = wRatio > hRatio;
@@ -40153,10 +40673,10 @@ function usePdfReader(args) {
     const height2 = !fitHorizontal ? Math.round(containerSize2.height) : void 0;
     dispatch({ type: "RESIZE_PAGE", width, height: height2 });
   }, []);
-  React57.useEffect(() => {
+  React71.useEffect(() => {
     resizePage(state2.pdfWidth, state2.pdfHeight, containerSize);
   }, [containerSize, state2.pdfWidth, state2.pdfHeight, resizePage]);
-  React57.useEffect(() => {
+  React71.useEffect(() => {
     var _a2;
     if (!manifest || state2.state !== "ACTIVE")
       return;
@@ -40186,7 +40706,7 @@ function usePdfReader(args) {
     state2.resourceIndex,
     isSinglePDF
   ]);
-  const goForward = React57.useCallback(() => __async(this, null, function* () {
+  const goForward = React71.useCallback(() => __async(this, null, function* () {
     var _a2;
     if (!state2.numPages)
       return;
@@ -40220,7 +40740,7 @@ function usePdfReader(args) {
     state2.pageNumber,
     state2.resourceIndex
   ]);
-  const goBackward = React57.useCallback(() => __async(this, null, function* () {
+  const goBackward = React71.useCallback(() => __async(this, null, function* () {
     if (!isParsed)
       return;
     if (state2.state !== "ACTIVE")
@@ -40247,23 +40767,23 @@ function usePdfReader(args) {
     state2.pageNumber,
     state2.resourceIndex
   ]);
-  const setScroll = React57.useCallback((val) => __async(this, null, function* () {
+  const setScroll = React71.useCallback((val) => __async(this, null, function* () {
     const isScrolling = val === "scrolling";
     dispatch({ type: "SET_SCROLL", isScrolling });
   }), []);
-  const zoomIn = React57.useCallback(() => __async(this, null, function* () {
+  const zoomIn = React71.useCallback(() => __async(this, null, function* () {
     dispatch({
       type: "SET_SCALE",
       scale: state2.scale + SCALE_STEP
     });
   }), [state2.scale]);
-  const zoomOut = React57.useCallback(() => __async(this, null, function* () {
+  const zoomOut = React71.useCallback(() => __async(this, null, function* () {
     dispatch({
       type: "SET_SCALE",
       scale: state2.scale - SCALE_STEP
     });
   }), [state2.scale]);
-  const goToPage = React57.useCallback((href) => __async(this, null, function* () {
+  const goToPage = React71.useCallback((href) => __async(this, null, function* () {
     const getIndexFromHref = (href2) => {
       var _a2;
       const index = (_a2 = manifest == null ? void 0 : manifest.readingOrder) == null ? void 0 : _a2.findIndex((link2) => {
@@ -40294,7 +40814,7 @@ function usePdfReader(args) {
     return {
       type: null,
       isLoading: true,
-      content: /* @__PURE__ */ React57.createElement(LoadingSkeleton, {
+      content: /* @__PURE__ */ React71.createElement(LoadingSkeleton, {
         height,
         state: state2
       }),
@@ -40326,7 +40846,7 @@ function usePdfReader(args) {
   return {
     type: "PDF",
     isLoading: false,
-    content: /* @__PURE__ */ React57.createElement(Flex, {
+    content: /* @__PURE__ */ React71.createElement(Flex, {
       as: "main",
       zIndex: "base",
       flex: "1 0 auto",
@@ -40336,16 +40856,16 @@ function usePdfReader(args) {
       id: IFRAME_WRAPPER_ID,
       ref: containerRef,
       height: finalHeight
-    }, /* @__PURE__ */ React57.createElement("style", null, `
+    }, /* @__PURE__ */ React71.createElement("style", null, `
             .react-pdf__Document {
               height: calc(100vh - ${HEADER_HEIGHT + FOOTER_HEIGHT}px);
               overflow-x: hidden;
               overflow-y: auto;
             }
-          `), /* @__PURE__ */ React57.createElement(Document, {
+          `), /* @__PURE__ */ React71.createElement(Document, {
       file: state2.resource,
       onLoadSuccess: onDocumentLoadSuccess
-    }, isParsed && state2.numPages && /* @__PURE__ */ React57.createElement(React57.Fragment, null, state2.settings.isScrolling && Array.from(new Array(state2.numPages), (_, index) => /* @__PURE__ */ React57.createElement(ScrollPage_default, {
+    }, isParsed && state2.numPages && /* @__PURE__ */ React71.createElement(React71.Fragment, null, state2.settings.isScrolling && Array.from(new Array(state2.numPages), (_, index) => /* @__PURE__ */ React71.createElement(ScrollPage_default, {
       key: `page_${index + 1}`,
       width: containerSize.width,
       placeholderHeight: state2.pdfHeight,
@@ -40353,13 +40873,13 @@ function usePdfReader(args) {
       scale: state2.scale,
       pageNumber: index + 1,
       onLoadSuccess: onRenderSuccess
-    })), !state2.settings.isScrolling && /* @__PURE__ */ React57.createElement(ChakraPage_default, {
+    })), !state2.settings.isScrolling && /* @__PURE__ */ React71.createElement(ChakraPage_default, {
       pageNumber: state2.pageNumber,
       onLoadSuccess: onRenderSuccess,
       width: state2.pageWidth,
       height: state2.pageHeight,
       scale: state2.scale,
-      loading: /* @__PURE__ */ React57.createElement(React57.Fragment, null)
+      loading: /* @__PURE__ */ React71.createElement(React71.Fragment, null)
     })))),
     state: state2,
     manifest,
@@ -40379,7 +40899,7 @@ function handleInvalidTransition(state2, action) {
 }
 
 // src/HtmlReader/index.tsx
-import React65 from "react";
+import React79 from "react";
 
 // src/HtmlReader/lib.ts
 var FONT_SIZE_STEP = 4;
@@ -40558,7 +41078,7 @@ var familyToReadiumFamily = {
 };
 
 // src/utils/localstorage.ts
-import React58 from "react";
+import React72 from "react";
 function getLocalStorageLocation(identifier2, args) {
   if (!(args == null ? void 0 : args.persistLastLocation))
     return void 0;
@@ -40581,7 +41101,7 @@ function getLocalStorageSettings(args) {
   return void 0;
 }
 function useUpdateLocalStorage(identifier2, state2, args) {
-  React58.useEffect(() => {
+  React72.useEffect(() => {
     if (!identifier2 || !(args == null ? void 0 : args.persistLastLocation))
       return;
     if (state2.location) {
@@ -40602,7 +41122,7 @@ function useUpdateLocalStorage(identifier2, state2, args) {
       }
     }
   }, [state2.location, identifier2, args == null ? void 0 : args.persistLastLocation]);
-  React58.useEffect(() => {
+  React72.useEffect(() => {
     if (!identifier2 || !state2.settings || !(args == null ? void 0 : args.persistSettings))
       return;
     const settings = {
@@ -40621,10 +41141,10 @@ function clearWebReaderLocalStorage() {
 }
 
 // src/HtmlReader/useLocationQuery.ts
-import React59 from "react";
+import React73 from "react";
 var LOCATION_QUERY_TITLE = "location";
 function useLocationQuery(state2) {
-  React59.useEffect(() => {
+  React73.useEffect(() => {
     if (state2.state === "READY")
       updateQuery(state2.location);
   }, [state2.location, state2.state]);
@@ -40959,6 +41479,13 @@ function makeHtmlReducer(args) {
           })
         });
       }
+      case "RESET_SETTINGS":
+        if (state2.state === "INACTIVE") {
+          return handleInvalidTransition2(state2, action);
+        }
+        return __spreadProps(__spreadValues({}, state2), {
+          settings: DEFAULT_SETTINGS
+        });
       case "SET_FONT_FAMILY":
         if (state2.state === "INACTIVE") {
           return handleInvalidTransition2(state2, action);
@@ -41092,11 +41619,11 @@ function extractContentContainerSize(container3) {
 }
 
 // src/HtmlReader/useResource.tsx
-import React60 from "react";
+import React74 from "react";
 function useResource(manifest, state2, getContent, injectables, dispatch) {
   var _a, _b;
   const currentResourceUrl = (_b = (_a = state2.location) == null ? void 0 : _a.href) != null ? _b : null;
-  React60.useEffect(() => {
+  React74.useEffect(() => {
     if (!currentResourceUrl) {
       return;
     }
@@ -41169,9 +41696,9 @@ function injectJS(body) {
 
 // src/HtmlReader/useWindowResize.ts
 var import_debounce2 = __toESM(require_debounce());
-import React61 from "react";
+import React75 from "react";
 function useWindowResize(manifest, state2, dispatch) {
-  React61.useEffect(() => {
+  React75.useEffect(() => {
     if (state2.state !== "NAVIGATING" && state2.state !== "READY")
       return;
     function handleResize() {
@@ -41192,11 +41719,11 @@ function useWindowResize(manifest, state2, dispatch) {
 }
 
 // src/HtmlReader/useUpdateScroll.ts
-import * as React62 from "react";
+import * as React76 from "react";
 var SCROLL_STOP_DEBOUNCE = 100;
 function useUpdateScroll(state2, dispatch) {
-  const timeout = React62.useRef();
-  React62.useLayoutEffect(() => {
+  const timeout = React76.useRef();
+  React76.useLayoutEffect(() => {
     if (state2.state !== "READY")
       return;
     const iframeDocument = state2.iframe.contentDocument;
@@ -41215,9 +41742,9 @@ function useUpdateScroll(state2, dispatch) {
 }
 
 // src/HtmlReader/useUpdateCSS.ts
-import React63 from "react";
+import React77 from "react";
 function useUpdateCSS(state2, manifest) {
-  React63.useEffect(() => {
+  React77.useEffect(() => {
     if (!manifest)
       return;
     if (state2.state !== "NAVIGATING" && state2.state !== "READY")
@@ -41230,9 +41757,9 @@ function useUpdateCSS(state2, manifest) {
 }
 
 // src/HtmlReader/useIframeLinkClick.ts
-import React64 from "react";
+import React78 from "react";
 function useIframeLinkClick(baseUrl, manifest, dispatch) {
-  React64.useEffect(() => {
+  React78.useEffect(() => {
     if (!baseUrl || !manifest)
       return;
     const messageHandler = ({ data }) => {
@@ -41274,7 +41801,7 @@ function useHtmlReader(args) {
     persistLastLocation = true,
     persistSettings = true
   } = args != null ? args : {};
-  const [state2, dispatch] = React65.useReducer(makeHtmlReducer(args), inactiveState);
+  const [state2, dispatch] = React79.useReducer(makeHtmlReducer(args), inactiveState);
   const currentResourceUrl = (_b = (_a = state2.location) == null ? void 0 : _a.href) != null ? _b : null;
   const injectables = ((_d = (_c = manifest == null ? void 0 : manifest.metadata) == null ? void 0 : _c.presentation) == null ? void 0 : _d.layout) === "fixed" ? injectablesFixed : injectablesReflowable;
   useResource(manifest, state2, getContent, injectables, dispatch);
@@ -41285,7 +41812,7 @@ function useHtmlReader(args) {
   useWindowResize(manifest, state2, dispatch);
   useUpdateCSS(state2, manifest);
   useIframeLinkClick(webpubManifestUrl, manifest, dispatch);
-  React65.useEffect(() => {
+  React79.useEffect(() => {
     if (!webpubManifestUrl || !manifest) {
       return dispatch({ type: "ARGS_CHANGED", args: void 0 });
     }
@@ -41314,7 +41841,7 @@ function useHtmlReader(args) {
     persistLastLocation,
     persistSettings
   ]);
-  React65.useEffect(() => {
+  React79.useEffect(() => {
     process.nextTick(() => {
       if (state2.state === "NAVIGATING") {
         const { fragment, progression, position: position3 } = state2.location.locations;
@@ -41336,7 +41863,7 @@ function useHtmlReader(args) {
     (_g = state2.settings) == null ? void 0 : _g.isScrolling,
     (_h = state2.location) == null ? void 0 : _h.locations
   ]);
-  const navigator2 = React65.useRef({
+  const navigator2 = React79.useRef({
     goToPage(href) {
       dispatch({ type: "GO_TO_HREF", href });
     },
@@ -41371,13 +41898,18 @@ function useHtmlReader(args) {
         dispatch({ type: "DECREASE_FONT_SIZE" });
       });
     },
+    resetSettings() {
+      return __async(this, null, function* () {
+        dispatch({ type: "RESET_SETTINGS" });
+      });
+    },
     setFontFamily(family) {
       return __async(this, null, function* () {
         dispatch({ type: "SET_FONT_FAMILY", family });
       });
     }
   }).current;
-  const setIframe = React65.useRef((el) => {
+  const setIframe = React79.useRef((el) => {
     dispatch({ type: "SET_IFRAME", iframe: el });
   }).current;
   if (!webpubManifestUrl || !manifest)
@@ -41386,7 +41918,7 @@ function useHtmlReader(args) {
     return {
       type: null,
       isLoading: true,
-      content: /* @__PURE__ */ React65.createElement(LoadingSkeleton, {
+      content: /* @__PURE__ */ React79.createElement(LoadingSkeleton, {
         height,
         state: state2
       }),
@@ -41410,7 +41942,7 @@ function useHtmlReader(args) {
   return {
     type: "HTML",
     isLoading: false,
-    content: /* @__PURE__ */ React65.createElement(React65.Fragment, null, /* @__PURE__ */ React65.createElement("iframe", {
+    content: /* @__PURE__ */ React79.createElement(React79.Fragment, null, /* @__PURE__ */ React79.createElement("iframe", {
       id: IFRAME_ID_SELECTOR,
       onLoad: () => dispatch({ type: "IFRAME_LOADED" }),
       ref: setIframe,
@@ -41462,8 +41994,8 @@ function useWebReader(args) {
     persistLastLocation = true,
     persistSettings = true
   } = args;
-  const [manifest, setManifest] = React66.useState(null);
-  const [error2, setError] = React66.useState(null);
+  const [manifest, setManifest] = React80.useState(null);
+  const [error2, setError] = React80.useState(null);
   if (error2) {
     throw error2;
   }
@@ -41489,13 +42021,13 @@ function useWebReader(args) {
     persistLastLocation,
     persistSettings
   } : void 0);
-  React66.useEffect(() => {
+  React80.useEffect(() => {
     fetchJson(webpubManifestUrl).then(setManifest).catch(setError);
   }, [webpubManifestUrl]);
   if (manifest === null) {
     return {
       isLoading: true,
-      content: /* @__PURE__ */ React66.createElement(LoadingSkeleton, {
+      content: /* @__PURE__ */ React80.createElement(LoadingSkeleton, {
         height,
         state: htmlReader == null ? void 0 : htmlReader.state
       }),
@@ -41514,27 +42046,6 @@ function useWebReader(args) {
   throw new Error(`No reader was initialized for the webpub with url: ${webpubManifestUrl} and type: ${readerType}.`);
 }
 
-// src/ServiceWorker/client.ts
-import React67 from "react";
-
-// src/ServiceWorker/constants.ts
-var PRECACHE_PUBLICATIONS = "PRECACHE_PUBLICATIONS";
-var CACHE_EXPIRATION_SECONDS = 7 * 24 * 60 * 60;
-
-// src/ServiceWorker/client.ts
-function usePublicationSW(publications) {
-  React67.useEffect(() => {
-    var _a;
-    if ("serviceWorker" in navigator) {
-      const message = {
-        type: PRECACHE_PUBLICATIONS,
-        publications
-      };
-      (_a = navigator.serviceWorker.controller) == null ? void 0 : _a.postMessage(message);
-    }
-  }, [publications]);
-}
-
 // src/index.tsx
 var WebReaderWithoutBoundary = (_a) => {
   var _b = _a, {
@@ -41554,12 +42065,12 @@ var WebReaderWithoutBoundary = (_a) => {
     getContent
   }, props));
   const { content } = webReader;
-  return /* @__PURE__ */ React68.createElement(manager_default, __spreadValues({
+  return /* @__PURE__ */ React81.createElement(manager_default, __spreadValues({
     headerLeft
   }, webReader), content);
 };
 var WebReader = (props) => {
-  return /* @__PURE__ */ React68.createElement(ErrorBoundary_default, __spreadValues({}, props), /* @__PURE__ */ React68.createElement(WebReaderWithoutBoundary, __spreadValues({}, props)));
+  return /* @__PURE__ */ React81.createElement(ErrorBoundary_default, __spreadValues({}, props), /* @__PURE__ */ React81.createElement(WebReaderWithoutBoundary, __spreadValues({}, props)));
 };
 var src_default = WebReader;
 export {
@@ -41567,6 +42078,7 @@ export {
   DEFAULT_HEIGHT,
   DEFAULT_SETTINGS,
   DEFAULT_SHOULD_GROW_WHEN_SCROLLING,
+  FONT_DETAILS,
   FOOTER_HEIGHT,
   HEADER_HEIGHT,
   IS_DEV,
@@ -41580,7 +42092,6 @@ export {
   useColorModeValue_default as useColorModeValue,
   useHtmlReader,
   usePdfReader,
-  usePublicationSW,
   useWebReader
 };
 /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */