@nypl/web-reader 3.1.0 → 3.2.2

package/dist/esm/index.js

@@ -1259,6 +1259,7 @@ var require_tslib = __commonJS({
     var __importDefault2;
     var __classPrivateFieldGet2;
     var __classPrivateFieldSet2;
+    var __classPrivateFieldIn2;
     var __createBinding2;
     (function(factory2) {
       var root2 = typeof global === "object" ? global : typeof self === "object" ? self : typeof this === "object" ? this : {};
@@ -1451,9 +1452,13 @@ var require_tslib = __commonJS({
       __createBinding2 = Object.create ? function(o, m, k, k2) {
         if (k2 === void 0)
           k2 = k;
-        Object.defineProperty(o, k2, { enumerable: true, get: function() {
-          return m[k];
-        } });
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+          desc = { enumerable: true, get: function() {
+            return m[k];
+          } };
+        }
+        Object.defineProperty(o, k2, desc);
       } : function(o, m, k, k2) {
         if (k2 === void 0)
           k2 = k;
@@ -1634,6 +1639,11 @@ var require_tslib = __commonJS({
           throw new TypeError("Cannot write private member to an object whose class did not declare it");
         return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state2.set(receiver, value), value;
       };
+      __classPrivateFieldIn2 = function(state2, receiver) {
+        if (receiver === null || typeof receiver !== "object" && typeof receiver !== "function")
+          throw new TypeError("Cannot use 'in' operator on non-object");
+        return typeof state2 === "function" ? receiver === state2 : state2.has(receiver);
+      };
       exporter("__extends", __extends2);
       exporter("__assign", __assign3);
       exporter("__rest", __rest3);
@@ -1658,6 +1668,7 @@ var require_tslib = __commonJS({
       exporter("__importDefault", __importDefault2);
       exporter("__classPrivateFieldGet", __classPrivateFieldGet2);
       exporter("__classPrivateFieldSet", __classPrivateFieldSet2);
+      exporter("__classPrivateFieldIn", __classPrivateFieldIn2);
     });
   }
 });
@@ -13648,6 +13659,38 @@ var require_regenerator = __commonJS({
   }
 });
 
+// node_modules/make-event-props/dist/entry.js
+var require_entry = __commonJS({
+  "node_modules/make-event-props/dist/entry.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", {
+      value: true
+    });
+    exports2.default = exports2.focusEvents = exports2.keyboardEvents = exports2.touchEvents = exports2.mouseEvents = void 0;
+    var mouseEvents2 = ["onClick", "onContextMenu", "onDoubleClick", "onDrag", "onDragEnd", "onDragEnter", "onDragExit", "onDragLeave", "onDragOver", "onDragStart", "onDrop", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseOut", "onMouseOver", "onMouseUp"];
+    exports2.mouseEvents = mouseEvents2;
+    var touchEvents2 = ["onTouchCancel", "onTouchEnd", "onTouchMove", "onTouchStart"];
+    exports2.touchEvents = touchEvents2;
+    var keyboardEvents2 = ["onKeyDown", "onKeyPress", "onKeyUp"];
+    exports2.keyboardEvents = keyboardEvents2;
+    var focusEvents = ["onFocus", "onBlur"];
+    exports2.focusEvents = focusEvents;
+    var makeEventProps4 = function makeEventProps5(props, getArgs) {
+      var eventProps2 = {};
+      [].concat(mouseEvents2, touchEvents2, keyboardEvents2, focusEvents).forEach(function(eventName) {
+        if (props[eventName]) {
+          eventProps2[eventName] = function(event) {
+            return getArgs ? props[eventName](event, getArgs(eventName)) : props[eventName](event);
+          };
+        }
+      });
+      return eventProps2;
+    };
+    var _default = makeEventProps4;
+    exports2.default = _default;
+  }
+});
+
 // node_modules/debounce/index.js
 var require_debounce = __commonJS({
   "node_modules/debounce/index.js"(exports2, module2) {
@@ -13703,7 +13746,7 @@ var require_debounce = __commonJS({
 });
 
 // src/index.tsx
-import React67 from "react";
+import React68 from "react";
 
 // node_modules/@emotion/react/dist/emotion-react.browser.esm.js
 import * as React2 from "react";
@@ -14657,7 +14700,7 @@ var processStyleValue = function processStyleValue2(key, value) {
   return value;
 };
 if (false) {
-  contentValuePattern = /(var|attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/;
+  contentValuePattern = /(attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/;
   contentValues = ["normal", "none", "initial", "inherit", "unset"];
   oldProcessStyleValue = processStyleValue;
   msPattern = /^-ms-/;
@@ -16275,9 +16318,9 @@ import * as React7 from "react";
 
 // node_modules/@chakra-ui/hooks/dist/chakra-ui-hooks.esm.js
 import * as React6 from "react";
-import React__default, { useState as useState3, useMemo as useMemo2, useCallback as useCallback3, useEffect as useEffect4, useRef as useRef4 } from "react";
+import React__default, { useState as useState3, useCallback as useCallback3, useEffect as useEffect4, useRef as useRef4 } from "react";
 
-// node_modules/@chakra-ui/hooks/dist/use-animation-state-5054a9f7.esm.js
+// node_modules/@chakra-ui/hooks/dist/use-animation-state-35233362.esm.js
 import * as React5 from "react";
 import { useState, useEffect as useEffect2 } from "react";
 var useSafeLayoutEffect = isBrowser2 ? React5.useLayoutEffect : React5.useEffect;
@@ -16351,22 +16394,22 @@ function useBoolean(initialState2) {
     initialState2 = false;
   }
   var _useState = useState3(initialState2), value = _useState[0], setValue = _useState[1];
-  var callbacks = useMemo2(function() {
-    return {
-      on: function on() {
-        return setValue(true);
-      },
-      off: function off() {
-        return setValue(false);
-      },
-      toggle: function toggle() {
-        return setValue(function(prev2) {
-          return !prev2;
-        });
-      }
-    };
+  var on = useCallback3(function() {
+    setValue(true);
   }, []);
-  return [value, callbacks];
+  var off = useCallback3(function() {
+    setValue(false);
+  }, []);
+  var toggle = useCallback3(function() {
+    setValue(function(prev2) {
+      return !prev2;
+    });
+  }, []);
+  return [value, {
+    on,
+    off,
+    toggle
+  }];
 }
 function useControllableProp(prop2, state2) {
   var isControlled = prop2 !== void 0;
@@ -16915,7 +16958,7 @@ if (__DEV__) {
 }
 
 // node_modules/@chakra-ui/react-env/dist/chakra-ui-react-env.esm.js
-import React8, { useContext as useContext5, useState as useState4, useMemo as useMemo4, createContext as createContext5 } from "react";
+import React8, { useContext as useContext5, useState as useState4, useMemo as useMemo3, createContext as createContext5 } from "react";
 var doc = {
   body: {
     classList: {
@@ -17029,7 +17072,7 @@ function useEnvironment() {
 function EnvironmentProvider(props) {
   var children = props.children, environmentProp = props.environment;
   var _useState = useState4(null), node2 = _useState[0], setNode = _useState[1];
-  var context = useMemo4(function() {
+  var context = useMemo3(function() {
     var _ref;
     var doc3 = node2 == null ? void 0 : node2.ownerDocument;
     var win2 = node2 == null ? void 0 : node2.ownerDocument.defaultView;
@@ -18780,7 +18823,7 @@ function toCSSVar(rawTheme) {
 // node_modules/@chakra-ui/system/dist/chakra-ui-system.esm.js
 var import_react_fast_compare = __toESM(require_react_fast_compare());
 import * as React11 from "react";
-import { useRef as useRef6, useMemo as useMemo7 } from "react";
+import { useRef as useRef6, useMemo as useMemo6 } from "react";
 
 // node_modules/@emotion/styled/dist/emotion-styled.browser.esm.js
 import "react";
@@ -19392,7 +19435,7 @@ function boundAlpha(a2) {
 }
 function convertToPercentage(n) {
   if (n <= 1) {
-    return "".concat(Number(n) * 100, "%");
+    return Number(n) * 100 + "%";
   }
   return n;
 }
@@ -19761,9 +19804,9 @@ function inputToRGB(color3) {
 }
 var CSS_INTEGER = "[-\\+]?\\d+%?";
 var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?";
-var CSS_UNIT = "(?:".concat(CSS_NUMBER, ")|(?:").concat(CSS_INTEGER, ")");
-var PERMISSIVE_MATCH3 = "[\\s|\\(]+(".concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")\\s*\\)?");
-var PERMISSIVE_MATCH4 = "[\\s|\\(]+(".concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")\\s*\\)?");
+var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")";
+var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
+var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
 var matchers = {
   CSS_UNIT: new RegExp(CSS_UNIT),
   rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
@@ -19946,7 +19989,7 @@ var TinyColor = function() {
     var h = Math.round(hsv.h * 360);
     var s = Math.round(hsv.s * 100);
     var v = Math.round(hsv.v * 100);
-    return this.a === 1 ? "hsv(".concat(h, ", ").concat(s, "%, ").concat(v, "%)") : "hsva(".concat(h, ", ").concat(s, "%, ").concat(v, "%, ").concat(this.roundA, ")");
+    return this.a === 1 ? "hsv(" + h + ", " + s + "%, " + v + "%)" : "hsva(" + h + ", " + s + "%, " + v + "%, " + this.roundA + ")";
   };
   TinyColor2.prototype.toHsl = function() {
     var hsl = rgbToHsl(this.r, this.g, this.b);
@@ -19957,7 +20000,7 @@ var TinyColor = function() {
     var h = Math.round(hsl.h * 360);
     var s = Math.round(hsl.s * 100);
     var l = Math.round(hsl.l * 100);
-    return this.a === 1 ? "hsl(".concat(h, ", ").concat(s, "%, ").concat(l, "%)") : "hsla(".concat(h, ", ").concat(s, "%, ").concat(l, "%, ").concat(this.roundA, ")");
+    return this.a === 1 ? "hsl(" + h + ", " + s + "%, " + l + "%)" : "hsla(" + h + ", " + s + "%, " + l + "%, " + this.roundA + ")";
   };
   TinyColor2.prototype.toHex = function(allow3Char) {
     if (allow3Char === void 0) {
@@ -19995,11 +20038,11 @@ var TinyColor = function() {
     var r = Math.round(this.r);
     var g = Math.round(this.g);
     var b2 = Math.round(this.b);
-    return this.a === 1 ? "rgb(".concat(r, ", ").concat(g, ", ").concat(b2, ")") : "rgba(".concat(r, ", ").concat(g, ", ").concat(b2, ", ").concat(this.roundA, ")");
+    return this.a === 1 ? "rgb(" + r + ", " + g + ", " + b2 + ")" : "rgba(" + r + ", " + g + ", " + b2 + ", " + this.roundA + ")";
   };
   TinyColor2.prototype.toPercentageRgb = function() {
     var fmt = function(x) {
-      return "".concat(Math.round(bound01(x, 255) * 100), "%");
+      return Math.round(bound01(x, 255) * 100) + "%";
     };
     return {
       r: fmt(this.r),
@@ -20012,7 +20055,7 @@ var TinyColor = function() {
     var rnd = function(x) {
       return Math.round(bound01(x, 255) * 100);
     };
-    return this.a === 1 ? "rgb(".concat(rnd(this.r), "%, ").concat(rnd(this.g), "%, ").concat(rnd(this.b), "%)") : "rgba(".concat(rnd(this.r), "%, ").concat(rnd(this.g), "%, ").concat(rnd(this.b), "%, ").concat(this.roundA, ")");
+    return this.a === 1 ? "rgb(" + rnd(this.r) + "%, " + rnd(this.g) + "%, " + rnd(this.b) + "%)" : "rgba(" + rnd(this.r) + "%, " + rnd(this.g) + "%, " + rnd(this.b) + "%, " + this.roundA + ")";
   };
   TinyColor2.prototype.toName = function() {
     if (this.a === 0) {
@@ -20926,8 +20969,8 @@ var typography2 = {
   }
 };
 
-// node_modules/@chakra-ui/theme/dist/index-895c67e0.esm.js
-var baseStyleContainer$4 = {
+// node_modules/@chakra-ui/theme/dist/index-7ef32ef8.esm.js
+var baseStyleContainer$3 = {
   borderTopWidth: "1px",
   borderColor: "inherit",
   _last: {
@@ -20961,7 +21004,7 @@ var baseStyleIcon$5 = {
 };
 var baseStyle$D = {
   root: {},
-  container: baseStyleContainer$4,
+  container: baseStyleContainer$3,
   button: baseStyleButton$1,
   panel: baseStylePanel,
   icon: baseStyleIcon$5
@@ -21073,7 +21116,7 @@ var baseStyleExcessLabel = function baseStyleExcessLabel2(props) {
     bg: mode("gray.200", "whiteAlpha.400")(props)
   };
 };
-var baseStyleContainer$3 = function baseStyleContainer(props) {
+var baseStyleContainer$2 = function baseStyleContainer(props) {
   var name = props.name, theme3 = props.theme;
   var bg = name ? randomColor({
     string: name
@@ -21094,7 +21137,7 @@ var baseStyle$B = function baseStyle(props) {
   return {
     badge: baseStyleBadge(props),
     excessLabel: baseStyleExcessLabel(props),
-    container: baseStyleContainer$3(props)
+    container: baseStyleContainer$2(props)
   };
 };
 function getSize$3(size3) {
@@ -21417,11 +21460,6 @@ var baseStyleControl$1 = function baseStyleControl(props) {
     }
   };
 };
-var baseStyleContainer$2 = {
-  _disabled: {
-    cursor: "not-allowed"
-  }
-};
 var baseStyleLabel$3 = {
   userSelect: "none",
   _disabled: {
@@ -21435,7 +21473,6 @@ var baseStyleIcon$4 = {
 var baseStyle$x = function baseStyle2(props) {
   return {
     icon: baseStyleIcon$4,
-    container: baseStyleContainer$2,
     control: baseStyleControl$1(props),
     label: baseStyleLabel$3
   };
@@ -22492,7 +22529,6 @@ var baseStyleControl2 = function baseStyleControl3(props) {
 var baseStyle$c = function baseStyle13(props) {
   return {
     label: Checkbox.baseStyle(props).label,
-    container: Checkbox.baseStyle(props).container,
     control: baseStyleControl2(props)
   };
 };
@@ -23977,7 +24013,8 @@ var {
   __importStar,
   __importDefault,
   __classPrivateFieldGet,
-  __classPrivateFieldSet
+  __classPrivateFieldSet,
+  __classPrivateFieldIn
 } = import_tslib.default;
 
 // node_modules/framer-motion/dist/es/motion/index.js
@@ -24227,7 +24264,7 @@ function useMotionRef(visualState, visualElement2, externalRef) {
 }
 
 // node_modules/framer-motion/dist/es/context/MotionContext/create.js
-import { useMemo as useMemo8, useContext as useContext13 } from "react";
+import { useMemo as useMemo7, useContext as useContext13 } from "react";
 
 // node_modules/framer-motion/dist/es/render/utils/variants.js
 function isVariantLabels(v) {
@@ -24290,7 +24327,7 @@ function getCurrentTreeVariants(props, context) {
 // node_modules/framer-motion/dist/es/context/MotionContext/create.js
 function useCreateMotionContext(props, isStatic) {
   var _a = getCurrentTreeVariants(props, useContext13(MotionContext)), initial = _a.initial, animate2 = _a.animate;
-  return useMemo8(function() {
+  return useMemo7(function() {
     return { initial, animate: animate2 };
   }, isStatic ? [
     variantLabelsAsDependency(initial),
@@ -24381,7 +24418,7 @@ function isSVGComponent(Component4) {
 import { createElement as createElement14 } from "react";
 
 // node_modules/framer-motion/dist/es/render/html/use-props.js
-import { useMemo as useMemo9 } from "react";
+import { useMemo as useMemo8 } from "react";
 
 // node_modules/framer-motion/dist/es/render/dom/projection/scale-correction.js
 var valueScaleCorrection = {};
@@ -24829,7 +24866,7 @@ function copyRawValuesOnly(target, source, props) {
 }
 function useInitialMotionValues(_a, visualState, isStatic) {
   var transformTemplate2 = _a.transformTemplate;
-  return useMemo9(function() {
+  return useMemo8(function() {
     var state2 = createHtmlRenderState();
     buildHTMLStyles(state2, visualState, void 0, void 0, { enableHardwareAcceleration: !isStatic }, transformTemplate2);
     var vars = state2.vars, style = state2.style;
@@ -24942,7 +24979,7 @@ function filterProps(props, isDom, forwardMotionProps) {
 }
 
 // node_modules/framer-motion/dist/es/render/svg/use-props.js
-import { useMemo as useMemo10 } from "react";
+import { useMemo as useMemo9 } from "react";
 
 // node_modules/framer-motion/dist/es/render/svg/utils/transform-origin.js
 function calcOrigin(origin, offset2, size3) {
@@ -25014,7 +25051,7 @@ var createSvgRenderState = function() {
 
 // node_modules/framer-motion/dist/es/render/svg/use-props.js
 function useSVGProps(props, visualState) {
-  var visualProps = useMemo10(function() {
+  var visualProps = useMemo9(function() {
     var state2 = createSvgRenderState();
     buildSVGAttrs(state2, visualState, void 0, void 0, { enableHardwareAcceleration: false }, props.transformTemplate);
     return __assign(__assign({}, state2.attrs), { style: __assign({}, state2.style) });
@@ -30508,13 +30545,13 @@ var FormErrorIcon = /* @__PURE__ */ forwardRef3(function(props, ref) {
 if (__DEV__) {
   FormErrorIcon.displayName = "FormErrorIcon";
 }
-var _excluded8 = ["className", "children", "requiredIndicator", "optionalIndicator"];
+var _excluded8 = ["className", "children", "requiredIndicator"];
 var FormLabel = /* @__PURE__ */ forwardRef3(function(passedProps, ref) {
   var _field$getLabelProps;
   var styles2 = useStyleConfig("FormLabel", passedProps);
   var props = omitThemingProps(passedProps);
   props.className;
-  var children = props.children, _props$requiredIndica = props.requiredIndicator, requiredIndicator = _props$requiredIndica === void 0 ? /* @__PURE__ */ React20.createElement(RequiredIndicator, null) : _props$requiredIndica, _props$optionalIndica = props.optionalIndicator, optionalIndicator = _props$optionalIndica === void 0 ? null : _props$optionalIndica, rest = _objectWithoutPropertiesLoose8(props, _excluded8);
+  var children = props.children, _props$requiredIndica = props.requiredIndicator, requiredIndicator = _props$requiredIndica === void 0 ? /* @__PURE__ */ React20.createElement(RequiredIndicator, null) : _props$requiredIndica, rest = _objectWithoutPropertiesLoose8(props, _excluded8);
   var field = useFormControlContext();
   var ownProps = (_field$getLabelProps = field == null ? void 0 : field.getLabelProps(rest, ref)) != null ? _field$getLabelProps : _extends14({
     ref
@@ -30525,7 +30562,7 @@ var FormLabel = /* @__PURE__ */ forwardRef3(function(passedProps, ref) {
       display: "block",
       textAlign: "start"
     }, styles2)
-  }), children, field != null && field.isRequired ? requiredIndicator : optionalIndicator);
+  }), children, field != null && field.isRequired ? requiredIndicator : null);
 });
 if (__DEV__) {
   FormLabel.displayName = "FormLabel";
@@ -31204,28 +31241,18 @@ var Text = /* @__PURE__ */ forwardRef3(function(props, ref) {
 if (__DEV__) {
   Text.displayName = "Text";
 }
-var _excluded$13 = ["spacing", "spacingX", "spacingY", "children", "justify", "direction", "align", "className", "shouldWrapChildren"];
+var _excluded$13 = ["spacing", "children", "justify", "direction", "align", "className", "shouldWrapChildren"];
 var _excluded2$12 = ["className"];
 var Wrap = /* @__PURE__ */ forwardRef3(function(props, ref) {
-  var _props$spacing = props.spacing, spacing3 = _props$spacing === void 0 ? "0.5rem" : _props$spacing, spacingX = props.spacingX, spacingY = props.spacingY, children = props.children, justify = props.justify, direction2 = props.direction, align = props.align, className = props.className, shouldWrapChildren = props.shouldWrapChildren, rest = _objectWithoutPropertiesLoose10(props, _excluded$13);
+  var _props$spacing = props.spacing, spacing3 = _props$spacing === void 0 ? "0.5rem" : _props$spacing, children = props.children, justify = props.justify, direction2 = props.direction, align = props.align, className = props.className, shouldWrapChildren = props.shouldWrapChildren, rest = _objectWithoutPropertiesLoose10(props, _excluded$13);
   var styles2 = React22.useMemo(function() {
-    var _spacingX$spacingY = {
-      spacingX,
-      spacingY
-    }, _spacingX$spacingY$sp = _spacingX$spacingY.spacingX, x = _spacingX$spacingY$sp === void 0 ? spacing3 : _spacingX$spacingY$sp, _spacingX$spacingY$sp2 = _spacingX$spacingY.spacingY, y = _spacingX$spacingY$sp2 === void 0 ? spacing3 : _spacingX$spacingY$sp2;
     return {
-      "--chakra-wrap-x-spacing": function chakraWrapXSpacing(theme3) {
-        return mapResponsive(x, function(value) {
+      "--chakra-wrap-spacing": function chakraWrapSpacing(theme3) {
+        return mapResponsive(spacing3, function(value) {
           return tokenToCSSVar("space", value)(theme3);
         });
       },
-      "--chakra-wrap-y-spacing": function chakraWrapYSpacing(theme3) {
-        return mapResponsive(y, function(value) {
-          return tokenToCSSVar("space", value)(theme3);
-        });
-      },
-      "--wrap-x-spacing": "calc(var(--chakra-wrap-x-spacing) / 2)",
-      "--wrap-y-spacing": "calc(var(--chakra-wrap-y-spacing) / 2)",
+      "--wrap-spacing": "calc(var(--chakra-wrap-spacing) / 2)",
       display: "flex",
       flexWrap: "wrap",
       justifyContent: justify,
@@ -31233,12 +31260,12 @@ var Wrap = /* @__PURE__ */ forwardRef3(function(props, ref) {
       flexDirection: direction2,
       listStyleType: "none",
       padding: "0",
-      margin: "calc(var(--wrap-y-spacing) * -1) calc(var(--wrap-x-spacing) * -1)",
+      margin: "calc(var(--wrap-spacing) * -1)",
       "& > *:not(style)": {
-        margin: "var(--wrap-y-spacing) var(--wrap-x-spacing)"
+        margin: "var(--wrap-spacing)"
       }
     };
-  }, [spacing3, spacingX, spacingY, justify, align, direction2]);
+  }, [spacing3, justify, align, direction2]);
   var childrenToRender = shouldWrapChildren ? React22.Children.map(children, function(child, index) {
     return /* @__PURE__ */ React22.createElement(WrapItem, {
       key: index
@@ -36613,6 +36640,9 @@ var ErrorBoundary = class extends React40.Component {
 var ErrorBoundary_default = ErrorBoundary;
 
 // src/ui/manager.tsx
+import * as React43 from "react";
+
+// src/ui/Footer.tsx
 import * as React42 from "react";
 
 // src/ui/PageButton.tsx
@@ -36633,12 +36663,55 @@ function PageButton(props) {
 }
 var PageButton_default = PageButton;
 
+// src/ui/Footer.tsx
+var Footer = (_a) => {
+  var _b = _a, {
+    state: state2,
+    navigator: navigator2
+  } = _b, rest = __objRest(_b, [
+    "state",
+    "navigator"
+  ]);
+  const bgColor = useColorModeValue_default("ui.white", "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({
+    as: "footer",
+    position: "sticky",
+    height: `${FOOTER_HEIGHT}px`,
+    zIndex: "sticky",
+    bottom: "0",
+    justifyContent: "space-between",
+    w: "100%",
+    bg: bgColor,
+    borderTop: "1px solid",
+    borderColor: "gray.100"
+  }, rest), /* @__PURE__ */ React42.createElement(PageButton_default, {
+    onClick: navigator2 == null ? void 0 : navigator2.goBackward,
+    "aria-label": "Previous Page",
+    disabled: isAtStart
+  }, /* @__PURE__ */ React42.createElement(Icon, {
+    as: MdKeyboardArrowLeft,
+    w: 6,
+    h: 6
+  }), "Previous"), /* @__PURE__ */ React42.createElement(PageButton_default, {
+    onClick: navigator2 == null ? void 0 : navigator2.goForward,
+    "aria-label": "Next Page",
+    disabled: isAtEnd
+  }, "Next ", /* @__PURE__ */ React42.createElement(Icon, {
+    as: MdKeyboardArrowRight,
+    w: 6,
+    h: 6
+  })));
+};
+var Footer_default = Footer;
+
 // src/ui/manager.tsx
 var ManagerUI = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ React42.createElement(ThemeProvider3, {
+  return /* @__PURE__ */ React43.createElement(ThemeProvider3, {
     theme: getTheme3((_b = (_a = props.state) == null ? void 0 : _a.settings) == null ? void 0 : _b.colorMode)
-  }, /* @__PURE__ */ React42.createElement(WebReaderContent, __spreadValues({}, props)));
+  }, /* @__PURE__ */ React43.createElement(WebReaderContent, __spreadValues({}, props)));
 };
 var WebReaderContent = (_a) => {
   var _b = _a, {
@@ -36648,19 +36721,16 @@ var WebReaderContent = (_a) => {
     "children",
     "headerLeft"
   ]);
-  var _a2, _b2, _c, _d;
   const bgColor = useColorModeValue_default("ui.white", "ui.black", "ui.sepia");
-  const containerRef = React42.useRef(null);
-  const isAtStart = (_a2 = props.state) == null ? void 0 : _a2.atStart;
-  const isAtEnd = (_b2 = props.state) == null ? void 0 : _b2.atEnd;
-  return /* @__PURE__ */ React42.createElement(Flex, {
+  const containerRef = React43.useRef(null);
+  return /* @__PURE__ */ React43.createElement(Flex, {
     flexDir: "column",
     w: "100%",
     position: "relative"
-  }, !props.isLoading && /* @__PURE__ */ React42.createElement(Header, __spreadValues({
+  }, !props.isLoading && /* @__PURE__ */ React43.createElement(Header, __spreadValues({
     headerLeft,
     containerRef
-  }, props)), /* @__PURE__ */ React42.createElement(Flex, {
+  }, props)), /* @__PURE__ */ React43.createElement(Flex, {
     as: "main",
     ref: containerRef,
     position: "relative",
@@ -36668,39 +36738,15 @@ var WebReaderContent = (_a) => {
     flexDir: "column",
     alignItems: "stretch",
     flex: "1 1 auto"
-  }, children), /* @__PURE__ */ React42.createElement(Flex, {
-    as: "footer",
-    position: "sticky",
-    height: `${FOOTER_HEIGHT}px`,
-    zIndex: "docked",
-    bottom: "0",
-    justifyContent: "space-between",
-    w: "100%",
-    bg: bgColor,
-    borderTop: "1px solid",
-    borderColor: "gray.100"
-  }, /* @__PURE__ */ React42.createElement(PageButton_default, {
-    onClick: (_c = props.navigator) == null ? void 0 : _c.goBackward,
-    "aria-label": "Previous Page",
-    disabled: isAtStart
-  }, /* @__PURE__ */ React42.createElement(Icon, {
-    as: MdKeyboardArrowLeft,
-    w: 6,
-    h: 6
-  }), "Previous"), /* @__PURE__ */ React42.createElement(PageButton_default, {
-    onClick: (_d = props.navigator) == null ? void 0 : _d.goForward,
-    "aria-label": "Next Page",
-    disabled: isAtEnd
-  }, "Next ", /* @__PURE__ */ React42.createElement(Icon, {
-    as: MdKeyboardArrowRight,
-    w: 6,
-    h: 6
-  }))));
+  }, children), /* @__PURE__ */ React43.createElement(Footer_default, {
+    state: props.state,
+    navigator: props.navigator
+  }));
 };
 var manager_default = ManagerUI;
 
 // src/useWebReader.tsx
-import React65 from "react";
+import React66 from "react";
 
 // src/utils/fetch.ts
 function fetchJson(url) {
@@ -36859,44 +36905,8 @@ function _getPrototypeOf(o) {
 
 // node_modules/react-pdf/dist/esm/Document.js
 var import_prop_types3 = __toESM(require_prop_types());
-import React44, { PureComponent } from "react";
-
-// node_modules/make-event-props/dist/esm/index.js
-var clipboardEvents = ["onCopy", "onCut", "onPaste"];
-var compositionEvents = ["onCompositionEnd", "onCompositionStart", "onCompositionUpdate"];
-var keyboardEvents = ["onKeyDown", "onKeyPress", "onKeyUp"];
-var focusEvents = ["onFocus", "onBlur"];
-var formEvents = ["onChange", "onInput", "onInvalid", "onReset", "onSubmit"];
-var genericEvents = ["onError", "onLoad"];
-var mouseEvents = ["onClick", "onContextMenu", "onDoubleClick", "onDrag", "onDragEnd", "onDragEnter", "onDragExit", "onDragLeave", "onDragOver", "onDragStart", "onDrop", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseOut", "onMouseOver", "onMouseUp"];
-var pointerEvents = ["onPointerDown", "onPointerMove", "onPointerUp", "onPointerCancel", "onGotPointerCapture", "onLostPointerCapture", "onPointerEnter", "onPointerLeave", "onPointerOver", "onPointerOut"];
-var selectionEvents = ["onSelect"];
-var touchEvents = ["onTouchCancel", "onTouchEnd", "onTouchMove", "onTouchStart"];
-var uiEvents = ["onScroll"];
-var wheelEvents = ["onWheel"];
-var mediaEvents = ["onAbort", "onCanPlay", "onCanPlayThrough", "onDurationChange", "onEmptied", "onEncrypted", "onEnded", "onError", "onLoadedData", "onLoadedMetadata", "onLoadStart", "onPause", "onPlay", "onPlaying", "onProgress", "onRateChange", "onSeeked", "onSeeking", "onStalled", "onSuspend", "onTimeUpdate", "onVolumeChange", "onWaiting"];
-var imageEvents = ["onLoad", "onError"];
-var animationEvents = ["onAnimationStart", "onAnimationEnd", "onAnimationIteration"];
-var transitionEvents = ["onTransitionEnd"];
-var otherEvents = ["onToggle"];
-var allEvents = [].concat(clipboardEvents, compositionEvents, keyboardEvents, focusEvents, formEvents, genericEvents, mouseEvents, pointerEvents, selectionEvents, touchEvents, uiEvents, wheelEvents, mediaEvents, imageEvents, animationEvents, transitionEvents, otherEvents);
-var makeEventProps = function makeEventProps2(props, getArgs) {
-  var eventProps2 = {};
-  allEvents.forEach(function(eventName) {
-    if (!(eventName in props)) {
-      return;
-    }
-    if (!getArgs) {
-      eventProps2[eventName] = props[eventName];
-      return;
-    }
-    eventProps2[eventName] = function(event) {
-      return props[eventName](event, getArgs(eventName));
-    };
-  });
-  return eventProps2;
-};
-var esm_default = makeEventProps;
+var import_make_event_props2 = __toESM(require_entry());
+import React45, { PureComponent } from "react";
 
 // node_modules/make-cancellable-promise/dist/esm/index.js
 function makeCancellablePromise(promise) {
@@ -36934,10 +36944,10 @@ var DocumentContext_default = /* @__PURE__ */ createContext13(null);
 
 // node_modules/react-pdf/dist/esm/Message.js
 var import_prop_types = __toESM(require_prop_types());
-import React43 from "react";
+import React44 from "react";
 function Message(_ref) {
   var children = _ref.children, type = _ref.type;
-  return /* @__PURE__ */ React43.createElement("div", {
+  return /* @__PURE__ */ React44.createElement("div", {
     className: "react-pdf__message react-pdf__message--".concat(type)
   }, children);
 }
@@ -37327,9 +37337,10 @@ function _toConsumableArray(arr) {
 
 // node_modules/react-pdf/dist/esm/shared/propTypes.js
 var import_prop_types2 = __toESM(require_prop_types());
+var import_make_event_props = __toESM(require_entry());
 var eventProps = function() {
   var result = {};
-  [].concat(_toConsumableArray(mouseEvents), _toConsumableArray(touchEvents), _toConsumableArray(keyboardEvents)).forEach(function(eventName) {
+  [].concat(_toConsumableArray(import_make_event_props.mouseEvents), _toConsumableArray(import_make_event_props.touchEvents), _toConsumableArray(import_make_event_props.keyboardEvents)).forEach(function(eventName) {
     result[eventName] = import_prop_types2.default.func;
   });
   return result;
@@ -37760,7 +37771,7 @@ var Document = /* @__PURE__ */ function(_PureComponent) {
     key: "renderChildren",
     value: function renderChildren() {
       var children = this.props.children;
-      return /* @__PURE__ */ React44.createElement(DocumentContext_default.Provider, {
+      return /* @__PURE__ */ React45.createElement(DocumentContext_default.Provider, {
         value: this.childContext
       }, children);
     }
@@ -37771,19 +37782,19 @@ var Document = /* @__PURE__ */ function(_PureComponent) {
       var pdf = this.state.pdf;
       if (!file) {
         var noData = this.props.noData;
-        return /* @__PURE__ */ React44.createElement(Message, {
+        return /* @__PURE__ */ React45.createElement(Message, {
           type: "no-data"
         }, typeof noData === "function" ? noData() : noData);
       }
       if (pdf === null) {
         var loading = this.props.loading;
-        return /* @__PURE__ */ React44.createElement(Message, {
+        return /* @__PURE__ */ React45.createElement(Message, {
           type: "loading"
         }, typeof loading === "function" ? loading() : loading);
       }
       if (pdf === false) {
         var error2 = this.props.error;
-        return /* @__PURE__ */ React44.createElement(Message, {
+        return /* @__PURE__ */ React45.createElement(Message, {
           type: "error"
         }, typeof error2 === "function" ? error2() : error2);
       }
@@ -37793,7 +37804,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__ */ React44.createElement("div", _extends({
+      return /* @__PURE__ */ React45.createElement("div", _extends({
         className: mergeClassNames("react-pdf__Document", className),
         ref: inputRef
       }, this.eventProps), this.renderContent());
@@ -37818,7 +37829,7 @@ var Document = /* @__PURE__ */ function(_PureComponent) {
     key: "eventProps",
     get: function get4() {
       var _this2 = this;
-      return esm_default(this.props, function() {
+      return (0, import_make_event_props2.default)(this.props, function() {
         return _this2.state.pdf;
       });
     }
@@ -37868,7 +37879,8 @@ 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 React46, { PureComponent as PureComponent3 } from "react";
+import React47, { PureComponent as PureComponent3 } from "react";
+var import_make_event_props3 = __toESM(require_entry());
 
 // node_modules/react-pdf/dist/esm/OutlineContext.js
 import { createContext as createContext14 } from "react";
@@ -37877,7 +37889,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 React45, { PureComponent as PureComponent2 } from "react";
+import React46, { PureComponent as PureComponent2 } from "react";
 
 // node_modules/react-pdf/dist/esm/Ref.js
 var Ref = /* @__PURE__ */ function() {
@@ -38071,8 +38083,8 @@ var OutlineItemInternal = /* @__PURE__ */ function(_PureComponent) {
         return null;
       }
       var subitems = item.items;
-      return /* @__PURE__ */ React45.createElement("ul", null, subitems.map(function(subitem, subitemIndex) {
-        return /* @__PURE__ */ React45.createElement(OutlineItemInternal2, _extends({
+      return /* @__PURE__ */ React46.createElement("ul", null, subitems.map(function(subitem, subitemIndex) {
+        return /* @__PURE__ */ React46.createElement(OutlineItemInternal2, _extends({
           key: typeof subitem.destination === "string" ? subitem.destination : subitemIndex,
           item: subitem
         }, otherProps));
@@ -38082,7 +38094,7 @@ var OutlineItemInternal = /* @__PURE__ */ function(_PureComponent) {
     key: "render",
     value: function render() {
       var item = this.props.item;
-      return /* @__PURE__ */ React45.createElement("li", null, /* @__PURE__ */ React45.createElement("a", {
+      return /* @__PURE__ */ React46.createElement("li", null, /* @__PURE__ */ React46.createElement("a", {
         href: "#",
         onClick: this.onClick
       }, item.title), this.renderSubitems());
@@ -38104,9 +38116,9 @@ OutlineItemInternal.propTypes = {
   pdf: isPdf.isRequired
 };
 var OutlineItem = function OutlineItem2(props) {
-  return /* @__PURE__ */ React45.createElement(DocumentContext_default.Consumer, null, function(documentContext) {
-    return /* @__PURE__ */ React45.createElement(OutlineContext_default.Consumer, null, function(outlineContext) {
-      return /* @__PURE__ */ React45.createElement(OutlineItemInternal, _extends({}, documentContext, outlineContext, 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));
     });
   });
 };
@@ -38274,8 +38286,8 @@ var OutlineInternal = /* @__PURE__ */ function(_PureComponent) {
     key: "renderOutline",
     value: function renderOutline() {
       var outline5 = this.state.outline;
-      return /* @__PURE__ */ React46.createElement("ul", null, outline5.map(function(item, itemIndex) {
-        return /* @__PURE__ */ React46.createElement(OutlineItem_default, {
+      return /* @__PURE__ */ React47.createElement("ul", null, outline5.map(function(item, itemIndex) {
+        return /* @__PURE__ */ React47.createElement(OutlineItem_default, {
           key: typeof item.destination === "string" ? item.destination : itemIndex,
           item
         });
@@ -38290,10 +38302,10 @@ var OutlineInternal = /* @__PURE__ */ function(_PureComponent) {
         return null;
       }
       var _this$props = this.props, className = _this$props.className, inputRef = _this$props.inputRef;
-      return /* @__PURE__ */ React46.createElement("div", _extends({
+      return /* @__PURE__ */ React47.createElement("div", _extends({
         className: mergeClassNames("react-pdf__Outline", className),
         ref: inputRef
-      }, this.eventProps), /* @__PURE__ */ React46.createElement(OutlineContext_default.Provider, {
+      }, this.eventProps), /* @__PURE__ */ React47.createElement(OutlineContext_default.Provider, {
         value: this.childContext
       }, this.renderOutline()));
     }
@@ -38308,7 +38320,7 @@ var OutlineInternal = /* @__PURE__ */ function(_PureComponent) {
     key: "eventProps",
     get: function get4() {
       var _this2 = this;
-      return esm_default(this.props, function() {
+      return (0, import_make_event_props3.default)(this.props, function() {
         return _this2.state.outline;
       });
     }
@@ -38327,7 +38339,8 @@ 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 React52, { PureComponent as PureComponent9 } from "react";
+import React53, { PureComponent as PureComponent9 } from "react";
+var import_make_event_props4 = __toESM(require_entry());
 
 // node_modules/merge-refs/dist/esm/index.js
 function mergeRefs2() {
@@ -38355,7 +38368,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 React47, { PureComponent as PureComponent4 } from "react";
+import React48, { PureComponent as PureComponent4 } from "react";
 function _createSuper4(Derived) {
   var hasNativeReflectConstruct = _isNativeReflectConstruct4();
   return function _createSuperInternal() {
@@ -38470,7 +38483,7 @@ var PageCanvasInternal = /* @__PURE__ */ function(_PureComponent) {
     value: function render() {
       var _this2 = this;
       var canvasRef = this.props.canvasRef;
-      return /* @__PURE__ */ React47.createElement("canvas", {
+      return /* @__PURE__ */ React48.createElement("canvas", {
         className: "react-pdf__Page__canvas",
         dir: "ltr",
         ref: mergeRefs2(canvasRef, function(ref) {
@@ -38514,15 +38527,15 @@ PageCanvasInternal.propTypes = {
   scale: import_prop_types6.default.number.isRequired
 };
 function PageCanvas(props) {
-  return /* @__PURE__ */ React47.createElement(PageContext_default.Consumer, null, function(context) {
-    return /* @__PURE__ */ React47.createElement(PageCanvasInternal, _extends({}, context, props));
+  return /* @__PURE__ */ React48.createElement(PageContext_default.Consumer, null, function(context) {
+    return /* @__PURE__ */ React48.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 React48, { PureComponent as PureComponent5 } from "react";
+import React49, { PureComponent as PureComponent5 } from "react";
 function _createSuper5(Derived) {
   var hasNativeReflectConstruct = _isNativeReflectConstruct5();
   return function _createSuperInternal() {
@@ -38615,7 +38628,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__ */ React48.createElement("div", {
+      return /* @__PURE__ */ React49.createElement("div", {
         className: "react-pdf__Page__svg",
         ref: function ref(_ref) {
           return _this2.drawPageOnContainer(_ref);
@@ -38650,20 +38663,20 @@ PageSVGInternal.propTypes = {
   scale: import_prop_types7.default.number.isRequired
 };
 function PageSVG(props) {
-  return /* @__PURE__ */ React48.createElement(PageContext_default.Consumer, null, function(context) {
-    return /* @__PURE__ */ React48.createElement(PageSVGInternal, _extends({}, context, props));
+  return /* @__PURE__ */ React49.createElement(PageContext_default.Consumer, null, function(context) {
+    return /* @__PURE__ */ React49.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 React50, { PureComponent as PureComponent7 } from "react";
+import React51, { 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 React49, { PureComponent as PureComponent6 } from "react";
+import React50, { PureComponent as PureComponent6 } from "react";
 function _createSuper6(Derived) {
   var hasNativeReflectConstruct = _isNativeReflectConstruct6();
   return function _createSuperInternal() {
@@ -38799,7 +38812,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__ */ React49.createElement("span", {
+      return /* @__PURE__ */ React50.createElement("span", {
         ref: function ref(_ref) {
           _this2.item = _ref;
         },
@@ -38883,8 +38896,8 @@ TextLayerItemInternal.propTypes = {
   width: import_prop_types8.default.number.isRequired
 };
 function TextLayerItem(props) {
-  return /* @__PURE__ */ React49.createElement(PageContext_default.Consumer, null, function(context) {
-    return /* @__PURE__ */ React49.createElement(TextLayerItemInternal, _extends({}, context, props));
+  return /* @__PURE__ */ React50.createElement(PageContext_default.Consumer, null, function(context) {
+    return /* @__PURE__ */ React50.createElement(TextLayerItemInternal, _extends({}, context, props));
   });
 }
 
@@ -39008,7 +39021,7 @@ var TextLayerInternal = /* @__PURE__ */ function(_PureComponent) {
         return null;
       }
       return textItems.map(function(textItem, itemIndex) {
-        return /* @__PURE__ */ React50.createElement(TextLayerItem, _extends({
+        return /* @__PURE__ */ React51.createElement(TextLayerItem, _extends({
           key: itemIndex,
           itemIndex
         }, textItem));
@@ -39018,7 +39031,7 @@ var TextLayerInternal = /* @__PURE__ */ function(_PureComponent) {
     key: "render",
     value: function render() {
       var viewport2 = this.unrotatedViewport, rotate = this.rotate;
-      return /* @__PURE__ */ React50.createElement("div", {
+      return /* @__PURE__ */ React51.createElement("div", {
         className: "react-pdf__Page__textContent",
         style: {
           position: "absolute",
@@ -39058,8 +39071,8 @@ TextLayerInternal.propTypes = {
   scale: import_prop_types9.default.number
 };
 function TextLayer(props) {
-  return /* @__PURE__ */ React50.createElement(PageContext_default.Consumer, null, function(context) {
-    return /* @__PURE__ */ React50.createElement(TextLayerInternal, _extends({}, context, props));
+  return /* @__PURE__ */ React51.createElement(PageContext_default.Consumer, null, function(context) {
+    return /* @__PURE__ */ React51.createElement(TextLayerInternal, _extends({}, context, props));
   });
 }
 
@@ -39067,7 +39080,7 @@ function TextLayer(props) {
 var import_regenerator7 = __toESM(require_regenerator());
 var import_prop_types10 = __toESM(require_prop_types());
 var pdfjs3 = __toESM(require_pdf());
-import React51, { PureComponent as PureComponent8 } from "react";
+import React52, { PureComponent as PureComponent8 } from "react";
 function _createSuper8(Derived) {
   var hasNativeReflectConstruct = _isNativeReflectConstruct8();
   return function _createSuperInternal() {
@@ -39221,7 +39234,7 @@ var AnnotationLayerInternal = /* @__PURE__ */ function(_PureComponent) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      return /* @__PURE__ */ React51.createElement("div", {
+      return /* @__PURE__ */ React52.createElement("div", {
         className: "react-pdf__Page__annotations annotationLayer",
         ref: function ref(_ref2) {
           _this2.annotationLayer = _ref2;
@@ -39253,9 +39266,9 @@ AnnotationLayerInternal.propTypes = {
   scale: import_prop_types10.default.number
 };
 var AnnotationLayer2 = function AnnotationLayer3(props) {
-  return /* @__PURE__ */ React51.createElement(DocumentContext_default.Consumer, null, function(documentContext) {
-    return /* @__PURE__ */ React51.createElement(PageContext_default.Consumer, null, function(pageContext) {
-      return /* @__PURE__ */ React51.createElement(AnnotationLayerInternal, _extends({}, documentContext, pageContext, 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));
     });
   });
 };
@@ -39457,12 +39470,12 @@ var PageInternal = /* @__PURE__ */ function(_PureComponent) {
         case "none":
           return null;
         case "svg":
-          return /* @__PURE__ */ React52.createElement(PageSVG, {
+          return /* @__PURE__ */ React53.createElement(PageSVG, {
             key: "".concat(this.pageKeyNoScale, "_svg")
           });
         case "canvas":
         default:
-          return /* @__PURE__ */ React52.createElement(PageCanvas, {
+          return /* @__PURE__ */ React53.createElement(PageCanvas, {
             key: "".concat(this.pageKey, "_canvas"),
             canvasRef
           });
@@ -39475,7 +39488,7 @@ var PageInternal = /* @__PURE__ */ function(_PureComponent) {
       if (!renderTextLayer2) {
         return null;
       }
-      return /* @__PURE__ */ React52.createElement(TextLayer, {
+      return /* @__PURE__ */ React53.createElement(TextLayer, {
         key: "".concat(this.pageKey, "_text")
       });
     }
@@ -39486,7 +39499,7 @@ var PageInternal = /* @__PURE__ */ function(_PureComponent) {
       if (!renderAnnotationLayer2) {
         return null;
       }
-      return /* @__PURE__ */ React52.createElement(AnnotationLayer_default, {
+      return /* @__PURE__ */ React53.createElement(AnnotationLayer_default, {
         key: "".concat(this.pageKey, "_annotations")
       });
     }
@@ -39494,7 +39507,7 @@ var PageInternal = /* @__PURE__ */ function(_PureComponent) {
     key: "renderChildren",
     value: function renderChildren() {
       var children = this.props.children;
-      return /* @__PURE__ */ React52.createElement(PageContext_default.Provider, {
+      return /* @__PURE__ */ React53.createElement(PageContext_default.Provider, {
         value: this.childContext
       }, this.renderMainLayer(), this.renderTextLayer(), this.renderAnnotationLayer(), children);
     }
@@ -39506,19 +39519,19 @@ var PageInternal = /* @__PURE__ */ function(_PureComponent) {
       var page = this.state.page;
       if (!pageNumber) {
         var noData = this.props.noData;
-        return /* @__PURE__ */ React52.createElement(Message, {
+        return /* @__PURE__ */ React53.createElement(Message, {
           type: "no-data"
         }, typeof noData === "function" ? noData() : noData);
       }
       if (pdf === null || page === null) {
         var loading = this.props.loading;
-        return /* @__PURE__ */ React52.createElement(Message, {
+        return /* @__PURE__ */ React53.createElement(Message, {
           type: "loading"
         }, typeof loading === "function" ? loading() : loading);
       }
       if (pdf === false || page === false) {
         var error2 = this.props.error;
-        return /* @__PURE__ */ React52.createElement(Message, {
+        return /* @__PURE__ */ React53.createElement(Message, {
           type: "error"
         }, typeof error2 === "function" ? error2() : error2);
       }
@@ -39529,7 +39542,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__ */ React52.createElement("div", _extends({
+      return /* @__PURE__ */ React53.createElement("div", _extends({
         className: mergeClassNames("react-pdf__Page", className),
         "data-page-number": pageNumber,
         ref: mergeRefs2(inputRef, this.ref),
@@ -39609,7 +39622,7 @@ var PageInternal = /* @__PURE__ */ function(_PureComponent) {
     key: "eventProps",
     get: function get4() {
       var _this2 = this;
-      return esm_default(this.props, function() {
+      return (0, import_make_event_props4.default)(this.props, function() {
         var page = _this2.state.page;
         if (!page) {
           return page;
@@ -39673,13 +39686,13 @@ PageInternal.propTypes = _objectSpread3(_objectSpread3({}, eventProps), {}, {
   width: import_prop_types11.default.number
 });
 function Page(props, ref) {
-  return /* @__PURE__ */ React52.createElement(DocumentContext_default.Consumer, null, function(context) {
-    return /* @__PURE__ */ React52.createElement(PageInternal, _extends({
+  return /* @__PURE__ */ React53.createElement(DocumentContext_default.Consumer, null, function(context) {
+    return /* @__PURE__ */ React53.createElement(PageInternal, _extends({
       ref
     }, context, props));
   });
 }
-var Page_default = /* @__PURE__ */ React52.forwardRef(Page);
+var Page_default = /* @__PURE__ */ React53.forwardRef(Page);
 
 // node_modules/react-pdf/dist/esm/entry.js
 if (isLocalFileSystem) {
@@ -39688,10 +39701,10 @@ if (isLocalFileSystem) {
 pdfjs4.GlobalWorkerOptions.workerSrc = "pdf.worker.js";
 
 // src/PdfReader/index.tsx
-import * as React56 from "react";
+import * as React57 from "react";
 
 // src/PdfReader/useMeasure.tsx
-import * as React53 from "react";
+import * as React54 from "react";
 var DEFAULT_DIMENSION = {
   x: 0,
   y: 0,
@@ -39703,9 +39716,9 @@ var DEFAULT_DIMENSION = {
   right: 0
 };
 function useMeasure() {
-  const [element, ref] = React53.useState(null);
-  const [rect, setRect] = React53.useState(DEFAULT_DIMENSION);
-  const observer = React53.useMemo(() => new window.ResizeObserver((entries) => {
+  const [element, ref] = React54.useState(null);
+  const [rect, setRect] = React54.useState(DEFAULT_DIMENSION);
+  const observer = React54.useMemo(() => new window.ResizeObserver((entries) => {
     if (entries[0]) {
       const {
         x,
@@ -39720,7 +39733,7 @@ function useMeasure() {
       setRect({ x, y, width, height, top: top2, left: left2, bottom: bottom2, right: right2 });
     }
   }), []);
-  React53.useLayoutEffect(() => {
+  React54.useLayoutEffect(() => {
     if (!element)
       return;
     observer.observe(element);
@@ -39749,10 +39762,10 @@ var ChakraPage = chakra(Page_default, {
 var ChakraPage_default = ChakraPage;
 
 // src/PdfReader/ScrollPage.tsx
-import React54 from "react";
+import React55 from "react";
 
 // node_modules/react-intersection-observer/react-intersection-observer.m.js
-import { createElement as createElement32, Component as Component3, useRef as useRef19, useState as useState18, useCallback as useCallback15, useEffect as useEffect20 } from "react";
+import { createElement as createElement33, Component as Component3, useRef as useRef19, useState as useState18, useCallback as useCallback15, useEffect as useEffect20 } from "react";
 function _extends22() {
   _extends22 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -39943,7 +39956,7 @@ var InView = /* @__PURE__ */ function(_React$Component) {
       });
     }
     var _this$props2 = this.props, children = _this$props2.children, as = _this$props2.as, tag2 = _this$props2.tag, props = _objectWithoutPropertiesLoose17(_this$props2, ["children", "as", "tag", "triggerOnce", "threshold", "root", "rootMargin", "onChange", "skip", "trackVisibility", "delay", "initialInView"]);
-    return /* @__PURE__ */ createElement32(as || tag2 || "div", _extends22({
+    return /* @__PURE__ */ createElement33(as || tag2 || "div", _extends22({
       ref: this.handleNode
     }, props), children);
   };
@@ -40011,7 +40024,7 @@ function useInView(_temp) {
 
 // src/PdfReader/ScrollPage.tsx
 var Placeholder = ({ width, height, pageNumber }) => {
-  return /* @__PURE__ */ React54.createElement("div", {
+  return /* @__PURE__ */ React55.createElement("div", {
     "data-page-number": pageNumber,
     style: { width, height }
   });
@@ -40028,15 +40041,15 @@ var ScrollPage = ({
     threshold: 0,
     triggerOnce: true
   });
-  return /* @__PURE__ */ React54.createElement("div", {
+  return /* @__PURE__ */ React55.createElement("div", {
     ref
-  }, inView ? /* @__PURE__ */ React54.createElement(ChakraPage_default, {
+  }, inView ? /* @__PURE__ */ React55.createElement(ChakraPage_default, {
     "data-page-number": pageNumber,
     pageNumber,
     scale: scale2,
     width,
     onLoadSuccess
-  }) : /* @__PURE__ */ React54.createElement(Placeholder, {
+  }) : /* @__PURE__ */ React55.createElement(Placeholder, {
     width: placeholderWidth,
     height: placeholderHeight,
     pageNumber
@@ -40045,33 +40058,51 @@ var ScrollPage = ({
 var ScrollPage_default = ScrollPage;
 
 // src/ui/LoadingSkeleton.tsx
-import React55 from "react";
-function LoadingSkeleton({
+import React56 from "react";
+var LoadingSkeletonContent = ({
   height
-}) {
-  return /* @__PURE__ */ React55.createElement(React55.Fragment, null, /* @__PURE__ */ React55.createElement(HeaderWrapper, null), /* @__PURE__ */ React55.createElement(Box, {
+}) => {
+  const bgColor = useColorModeValue_default("ui.white", "ui.black", "ui.sepia");
+  return /* @__PURE__ */ React56.createElement(React56.Fragment, null, /* @__PURE__ */ React56.createElement(HeaderWrapper, {
+    bg: bgColor
+  }), /* @__PURE__ */ React56.createElement(Box, {
     padding: "6",
-    bg: "white",
-    mt: "7",
+    bg: bgColor,
+    mt: "0",
     height,
     "aria-label": "Loading book...",
     "aria-busy": "true",
     role: "progressbar"
-  }, /* @__PURE__ */ React55.createElement(Flex, {
+  }, /* @__PURE__ */ React56.createElement(Flex, {
     justifyContent: "center"
-  }, /* @__PURE__ */ React55.createElement(Skeleton, {
+  }, /* @__PURE__ */ React56.createElement(Skeleton, {
     height: "20px",
     mb: "7",
     w: "30%"
-  })), /* @__PURE__ */ React55.createElement(SkeletonText, {
+  })), /* @__PURE__ */ React56.createElement(SkeletonText, {
     mb: "7",
     noOfLines: 10,
     spacing: "4"
-  }), /* @__PURE__ */ React55.createElement(SkeletonText, {
+  }), /* @__PURE__ */ React56.createElement(SkeletonText, {
     mb: "7",
     noOfLines: 5,
     spacing: "4"
-  })));
+  })), /* @__PURE__ */ React56.createElement(Footer_default, {
+    state: null,
+    navigator: null,
+    zIndex: "tooltip"
+  }));
+};
+function LoadingSkeleton({
+  height,
+  state: state2
+}) {
+  var _a;
+  return /* @__PURE__ */ React56.createElement(ThemeProvider3, {
+    theme: getTheme3((_a = state2 == null ? void 0 : state2.settings) == null ? void 0 : _a.colorMode)
+  }, /* @__PURE__ */ React56.createElement(LoadingSkeletonContent, {
+    height
+  }));
 }
 
 // src/PdfReader/index.tsx
@@ -40185,7 +40216,7 @@ function usePdfReader(args) {
     height = DEFAULT_HEIGHT,
     growWhenScrolling = DEFAULT_SHOULD_GROW_WHEN_SCROLLING
   } = args != null ? args : {};
-  const [state2, dispatch] = React56.useReducer(pdfReducer, {
+  const [state2, dispatch] = React57.useReducer(pdfReducer, {
     state: "INACTIVE",
     resourceIndex: 0,
     resource: null,
@@ -40204,7 +40235,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();
-  React56.useEffect(() => {
+  React57.useEffect(() => {
     if (!webpubManifestUrl || !manifest) {
       return dispatch({ type: "ARGS_CHANGED", args: void 0 });
     }
@@ -40229,7 +40260,7 @@ function usePdfReader(args) {
     height,
     growWhenScrolling
   ]);
-  React56.useEffect(() => {
+  React57.useEffect(() => {
     if (!manifest)
       return;
     if (!manifest.readingOrder || !manifest.readingOrder.length) {
@@ -40243,7 +40274,7 @@ function usePdfReader(args) {
       });
     });
   }, [state2.resourceIndex, manifest, proxyUrl]);
-  const resizePage = React56.useCallback((pdfWidth, pdfHeight, containerSize2) => {
+  const resizePage = React57.useCallback((pdfWidth, pdfHeight, containerSize2) => {
     const wRatio = pdfWidth / containerSize2.width;
     const hRatio = pdfHeight / containerSize2.height;
     const fitHorizontal = wRatio > hRatio;
@@ -40251,10 +40282,10 @@ function usePdfReader(args) {
     const height2 = !fitHorizontal ? Math.round(containerSize2.height) : void 0;
     dispatch({ type: "RESIZE_PAGE", width, height: height2 });
   }, []);
-  React56.useEffect(() => {
+  React57.useEffect(() => {
     resizePage(state2.pdfWidth, state2.pdfHeight, containerSize);
   }, [containerSize, state2.pdfWidth, state2.pdfHeight, resizePage]);
-  React56.useEffect(() => {
+  React57.useEffect(() => {
     var _a2;
     if (!manifest || state2.state !== "ACTIVE")
       return;
@@ -40284,7 +40315,7 @@ function usePdfReader(args) {
     state2.resourceIndex,
     isSinglePDF
   ]);
-  const goForward = React56.useCallback(() => __async(this, null, function* () {
+  const goForward = React57.useCallback(() => __async(this, null, function* () {
     var _a2;
     if (!state2.numPages)
       return;
@@ -40318,7 +40349,7 @@ function usePdfReader(args) {
     state2.pageNumber,
     state2.resourceIndex
   ]);
-  const goBackward = React56.useCallback(() => __async(this, null, function* () {
+  const goBackward = React57.useCallback(() => __async(this, null, function* () {
     if (!isParsed)
       return;
     if (state2.state !== "ACTIVE")
@@ -40345,23 +40376,23 @@ function usePdfReader(args) {
     state2.pageNumber,
     state2.resourceIndex
   ]);
-  const setScroll = React56.useCallback((val) => __async(this, null, function* () {
+  const setScroll = React57.useCallback((val) => __async(this, null, function* () {
     const isScrolling = val === "scrolling";
     dispatch({ type: "SET_SCROLL", isScrolling });
   }), []);
-  const zoomIn = React56.useCallback(() => __async(this, null, function* () {
+  const zoomIn = React57.useCallback(() => __async(this, null, function* () {
     dispatch({
       type: "SET_SCALE",
       scale: state2.scale + SCALE_STEP
     });
   }), [state2.scale]);
-  const zoomOut = React56.useCallback(() => __async(this, null, function* () {
+  const zoomOut = React57.useCallback(() => __async(this, null, function* () {
     dispatch({
       type: "SET_SCALE",
       scale: state2.scale - SCALE_STEP
     });
   }), [state2.scale]);
-  const goToPage = React56.useCallback((href) => __async(this, null, function* () {
+  const goToPage = React57.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) => {
@@ -40392,8 +40423,9 @@ function usePdfReader(args) {
     return {
       type: null,
       isLoading: true,
-      content: /* @__PURE__ */ React56.createElement(LoadingSkeleton, {
-        height
+      content: /* @__PURE__ */ React57.createElement(LoadingSkeleton, {
+        height,
+        state: state2
       }),
       navigator: null,
       manifest: null,
@@ -40423,7 +40455,7 @@ function usePdfReader(args) {
   return {
     type: "PDF",
     isLoading: false,
-    content: /* @__PURE__ */ React56.createElement(Flex, {
+    content: /* @__PURE__ */ React57.createElement(Flex, {
       as: "main",
       zIndex: "base",
       flex: "1 0 auto",
@@ -40433,16 +40465,16 @@ function usePdfReader(args) {
       id: IFRAME_WRAPPER_ID,
       ref: containerRef,
       height: finalHeight
-    }, /* @__PURE__ */ React56.createElement("style", null, `
+    }, /* @__PURE__ */ React57.createElement("style", null, `
             .react-pdf__Document {
               height: calc(100vh - ${HEADER_HEIGHT + FOOTER_HEIGHT}px);
               overflow-x: hidden;
               overflow-y: auto;
             }
-          `), /* @__PURE__ */ React56.createElement(Document, {
+          `), /* @__PURE__ */ React57.createElement(Document, {
       file: state2.resource,
       onLoadSuccess: onDocumentLoadSuccess
-    }, isParsed && state2.numPages && /* @__PURE__ */ React56.createElement(React56.Fragment, null, state2.settings.isScrolling && Array.from(new Array(state2.numPages), (_, index) => /* @__PURE__ */ React56.createElement(ScrollPage_default, {
+    }, isParsed && state2.numPages && /* @__PURE__ */ React57.createElement(React57.Fragment, null, state2.settings.isScrolling && Array.from(new Array(state2.numPages), (_, index) => /* @__PURE__ */ React57.createElement(ScrollPage_default, {
       key: `page_${index + 1}`,
       width: containerSize.width,
       placeholderHeight: state2.pdfHeight,
@@ -40450,13 +40482,13 @@ function usePdfReader(args) {
       scale: state2.scale,
       pageNumber: index + 1,
       onLoadSuccess: onRenderSuccess
-    })), !state2.settings.isScrolling && /* @__PURE__ */ React56.createElement(ChakraPage_default, {
+    })), !state2.settings.isScrolling && /* @__PURE__ */ React57.createElement(ChakraPage_default, {
       pageNumber: state2.pageNumber,
       onLoadSuccess: onRenderSuccess,
       width: state2.pageWidth,
       height: state2.pageHeight,
       scale: state2.scale,
-      loading: /* @__PURE__ */ React56.createElement(React56.Fragment, null)
+      loading: /* @__PURE__ */ React57.createElement(React57.Fragment, null)
     })))),
     state: state2,
     manifest,
@@ -40476,7 +40508,7 @@ function handleInvalidTransition(state2, action) {
 }
 
 // src/HtmlReader/index.tsx
-import React64 from "react";
+import React65 from "react";
 
 // src/HtmlReader/lib.ts
 var FONT_SIZE_STEP = 4;
@@ -40494,8 +40526,18 @@ function makeInjectableElement(document2, injectable) {
       }
       return el;
     }
+    case "script": {
+      const el = document2.createElement("script");
+      el.setAttribute("type", "text/javascript");
+      if (injectable.url) {
+        el.setAttribute("src", injectable.url);
+      } else {
+        console.warn("Injectable missing url", injectable);
+      }
+      return el;
+    }
     default:
-      return;
+      return void 0;
   }
 }
 function getCurrentIndex(manifest, state2, baseUrl) {
@@ -40518,10 +40560,15 @@ function getFromReadingOrder(href, manifest, baseUrl) {
   } : void 0;
 }
 function isSameResource(href1, href2, baseUrl) {
-  const url1 = new URL(href1, baseUrl);
-  const url2 = new URL(href2, baseUrl);
-  const doMatch = url1.origin === url2.origin && url1.pathname === url2.pathname;
-  return doMatch;
+  try {
+    const url1 = new URL(href1, baseUrl);
+    const url2 = new URL(href2, baseUrl);
+    const doMatch = url1.origin === url2.origin && url1.pathname === url2.pathname;
+    return doMatch;
+  } catch (e) {
+    console.error(e);
+  }
+  return false;
 }
 function linkToLocator(link2, baseUrl, locations = {}) {
   var _a;
@@ -40640,7 +40687,7 @@ var familyToReadiumFamily = {
 };
 
 // src/utils/localstorage.ts
-import React57 from "react";
+import React58 from "react";
 function getLocalStorageLocation(identifier2, args) {
   if (!(args == null ? void 0 : args.persistLastLocation))
     return void 0;
@@ -40663,7 +40710,7 @@ function getLocalStorageSettings(args) {
   return void 0;
 }
 function useUpdateLocalStorage(identifier2, state2, args) {
-  React57.useEffect(() => {
+  React58.useEffect(() => {
     if (!identifier2 || !(args == null ? void 0 : args.persistLastLocation))
       return;
     if (state2.location) {
@@ -40684,7 +40731,7 @@ function useUpdateLocalStorage(identifier2, state2, args) {
       }
     }
   }, [state2.location, identifier2, args == null ? void 0 : args.persistLastLocation]);
-  React57.useEffect(() => {
+  React58.useEffect(() => {
     if (!identifier2 || !state2.settings || !(args == null ? void 0 : args.persistSettings))
       return;
     const settings = {
@@ -40703,10 +40750,10 @@ function clearWebReaderLocalStorage() {
 }
 
 // src/HtmlReader/useLocationQuery.ts
-import React58 from "react";
+import React59 from "react";
 var LOCATION_QUERY_TITLE = "location";
 function useLocationQuery(state2) {
-  React58.useEffect(() => {
+  React59.useEffect(() => {
     if (state2.state === "READY")
       updateQuery(state2.location);
   }, [state2.location, state2.state]);
@@ -41173,11 +41220,11 @@ function extractContentContainerSize(container3) {
 }
 
 // src/HtmlReader/useResource.tsx
-import React59 from "react";
+import React60 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;
-  React59.useEffect(() => {
+  React60.useEffect(() => {
     if (!currentResourceUrl) {
       return;
     }
@@ -41232,8 +41279,11 @@ function injectJS(body) {
       function handleLinkClick(evt) {
         // don't navigate
         evt.preventDefault();
-        // send message to parent
-        window.parent.postMessage( { type: 'LINK_CLICKED', href: evt.target.href } );
+        const  href = evt.currentTarget.href;
+        if(href) {
+          // send message to parent
+          window.parent.postMessage( { type: 'LINK_CLICKED', href  } );
+        }
       };
       for ( var i = 0; i < links.length; i ++ ) {
         links[i].addEventListener('click', handleLinkClick);
@@ -41247,9 +41297,9 @@ function injectJS(body) {
 
 // src/HtmlReader/useWindowResize.ts
 var import_debounce2 = __toESM(require_debounce());
-import React60 from "react";
+import React61 from "react";
 function useWindowResize(manifest, state2, dispatch) {
-  React60.useEffect(() => {
+  React61.useEffect(() => {
     if (state2.state !== "NAVIGATING" && state2.state !== "READY")
       return;
     function handleResize() {
@@ -41270,11 +41320,11 @@ function useWindowResize(manifest, state2, dispatch) {
 }
 
 // src/HtmlReader/useUpdateScroll.ts
-import * as React61 from "react";
+import * as React62 from "react";
 var SCROLL_STOP_DEBOUNCE = 100;
 function useUpdateScroll(state2, dispatch) {
-  const timeout = React61.useRef();
-  React61.useLayoutEffect(() => {
+  const timeout = React62.useRef();
+  React62.useLayoutEffect(() => {
     if (state2.state !== "READY")
       return;
     const iframeDocument = state2.iframe.contentDocument;
@@ -41293,9 +41343,9 @@ function useUpdateScroll(state2, dispatch) {
 }
 
 // src/HtmlReader/useUpdateCSS.ts
-import React62 from "react";
+import React63 from "react";
 function useUpdateCSS(state2, manifest) {
-  React62.useEffect(() => {
+  React63.useEffect(() => {
     if (!manifest)
       return;
     if (state2.state !== "NAVIGATING" && state2.state !== "READY")
@@ -41308,19 +41358,34 @@ function useUpdateCSS(state2, manifest) {
 }
 
 // src/HtmlReader/useIframeLinkClick.ts
-import React63 from "react";
-function useIframeLinkClick(dispatch) {
-  React63.useEffect(() => {
-    window.addEventListener("message", ({ data }) => {
+import React64 from "react";
+function useIframeLinkClick(baseUrl, manifest, dispatch) {
+  React64.useEffect(() => {
+    if (!baseUrl || !manifest)
+      return;
+    const messageHandler = ({ data }) => {
       if (typeof data === "object" && data !== null && "type" in data) {
         switch (data.type) {
           case "LINK_CLICKED":
-            dispatch({ type: "GO_TO_HREF", href: data.href });
+            handleIframeLink(data.href, manifest, baseUrl, dispatch);
         }
       }
-    });
-  }, [dispatch]);
+    };
+    window.addEventListener("message", messageHandler);
+    return () => window.removeEventListener("message", messageHandler);
+  }, [dispatch, baseUrl, manifest]);
 }
+var handleIframeLink = (href, manifest, baseUrl, dispatch) => {
+  if (isExternalLink(href, manifest, baseUrl)) {
+    window.open(href, "_blank");
+  } else {
+    dispatch({ type: "GO_TO_HREF", href });
+  }
+};
+var isExternalLink = (href, manifest, baseUrl) => {
+  const resource = getFromReadingOrder(href, manifest, baseUrl);
+  return resource === void 0;
+};
 
 // src/HtmlReader/index.tsx
 var IFRAME_ID_SELECTOR = "html-reader-iframe";
@@ -41337,7 +41402,7 @@ function useHtmlReader(args) {
     persistLastLocation = true,
     persistSettings = true
   } = args != null ? args : {};
-  const [state2, dispatch] = React64.useReducer(makeHtmlReducer(args), inactiveState);
+  const [state2, dispatch] = React65.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);
@@ -41347,8 +41412,8 @@ function useHtmlReader(args) {
   useLocationQuery(state2);
   useWindowResize(manifest, state2, dispatch);
   useUpdateCSS(state2, manifest);
-  useIframeLinkClick(dispatch);
-  React64.useEffect(() => {
+  useIframeLinkClick(webpubManifestUrl, manifest, dispatch);
+  React65.useEffect(() => {
     if (!webpubManifestUrl || !manifest) {
       return dispatch({ type: "ARGS_CHANGED", args: void 0 });
     }
@@ -41377,7 +41442,7 @@ function useHtmlReader(args) {
     persistLastLocation,
     persistSettings
   ]);
-  React64.useEffect(() => {
+  React65.useEffect(() => {
     process.nextTick(() => {
       if (state2.state === "NAVIGATING") {
         const { fragment, progression, position: position3 } = state2.location.locations;
@@ -41399,7 +41464,7 @@ function useHtmlReader(args) {
     (_g = state2.settings) == null ? void 0 : _g.isScrolling,
     (_h = state2.location) == null ? void 0 : _h.locations
   ]);
-  const navigator2 = React64.useRef({
+  const navigator2 = React65.useRef({
     goToPage(href) {
       dispatch({ type: "GO_TO_HREF", href });
     },
@@ -41440,7 +41505,7 @@ function useHtmlReader(args) {
       });
     }
   }).current;
-  const setIframe = React64.useRef((el) => {
+  const setIframe = React65.useRef((el) => {
     dispatch({ type: "SET_IFRAME", iframe: el });
   }).current;
   if (!webpubManifestUrl || !manifest)
@@ -41449,8 +41514,9 @@ function useHtmlReader(args) {
     return {
       type: null,
       isLoading: true,
-      content: /* @__PURE__ */ React64.createElement(LoadingSkeleton, {
-        height
+      content: /* @__PURE__ */ React65.createElement(LoadingSkeleton, {
+        height,
+        state: state2
       }),
       navigator: null,
       manifest: null,
@@ -41472,7 +41538,7 @@ function useHtmlReader(args) {
   return {
     type: "HTML",
     isLoading: false,
-    content: /* @__PURE__ */ React64.createElement(React64.Fragment, null, /* @__PURE__ */ React64.createElement("iframe", {
+    content: /* @__PURE__ */ React65.createElement(React65.Fragment, null, /* @__PURE__ */ React65.createElement("iframe", {
       id: IFRAME_ID_SELECTOR,
       onLoad: () => dispatch({ type: "IFRAME_LOADED" }),
       ref: setIframe,
@@ -41524,8 +41590,8 @@ function useWebReader(args) {
     persistLastLocation = true,
     persistSettings = true
   } = args;
-  const [manifest, setManifest] = React65.useState(null);
-  const [error2, setError] = React65.useState(null);
+  const [manifest, setManifest] = React66.useState(null);
+  const [error2, setError] = React66.useState(null);
   if (error2) {
     throw error2;
   }
@@ -41551,14 +41617,15 @@ function useWebReader(args) {
     persistLastLocation,
     persistSettings
   } : void 0);
-  React65.useEffect(() => {
+  React66.useEffect(() => {
     fetchJson(webpubManifestUrl).then(setManifest).catch(setError);
   }, [webpubManifestUrl]);
   if (manifest === null) {
     return {
       isLoading: true,
-      content: /* @__PURE__ */ React65.createElement(LoadingSkeleton, {
-        height
+      content: /* @__PURE__ */ React66.createElement(LoadingSkeleton, {
+        height,
+        state: htmlReader == null ? void 0 : htmlReader.state
       }),
       manifest: null,
       navigator: null,
@@ -41576,7 +41643,7 @@ function useWebReader(args) {
 }
 
 // src/ServiceWorker/client.ts
-import React66 from "react";
+import React67 from "react";
 
 // src/ServiceWorker/constants.ts
 var PRECACHE_PUBLICATIONS = "PRECACHE_PUBLICATIONS";
@@ -41584,7 +41651,7 @@ var CACHE_EXPIRATION_SECONDS = 7 * 24 * 60 * 60;
 
 // src/ServiceWorker/client.ts
 function usePublicationSW(publications) {
-  React66.useEffect(() => {
+  React67.useEffect(() => {
     var _a;
     if ("serviceWorker" in navigator) {
       const message = {
@@ -41615,12 +41682,12 @@ var WebReaderWithoutBoundary = (_a) => {
     getContent
   }, props));
   const { content } = webReader;
-  return /* @__PURE__ */ React67.createElement(manager_default, __spreadValues({
+  return /* @__PURE__ */ React68.createElement(manager_default, __spreadValues({
     headerLeft
   }, webReader), content);
 };
 var WebReader = (props) => {
-  return /* @__PURE__ */ React67.createElement(ErrorBoundary_default, __spreadValues({}, props), /* @__PURE__ */ React67.createElement(WebReaderWithoutBoundary, __spreadValues({}, props)));
+  return /* @__PURE__ */ React68.createElement(ErrorBoundary_default, __spreadValues({}, props), /* @__PURE__ */ React68.createElement(WebReaderWithoutBoundary, __spreadValues({}, props)));
 };
 var src_default = WebReader;
 export {
@@ -41644,20 +41711,6 @@ export {
   usePublicationSW,
   useWebReader
 };
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
 /** @license React v16.13.1
  * react-is.production.min.js
  *