npm - @nypl/web-reader - Versions diffs - 0.1.4 → 0.2.0-alpha.3 - Mend

@nypl/web-reader 0.1.4 → 0.2.0-alpha.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (144) hide show

package/dist/cjs/ServiceWorker/sw.js +2 -0
package/dist/cjs/ServiceWorker/sw.js.map +7 -0
package/dist/cjs/index.js +683 -0
package/dist/cjs/index.js.map +7 -0
package/dist/esm/ServiceWorker/sw.js +1263 -0
package/dist/esm/ServiceWorker/sw.js.map +7 -0
package/dist/esm/index.js +88803 -0
package/dist/esm/index.js.map +7 -0
package/dist/html-styles.css +2 -0
package/dist/html-styles.css.map +7 -0
package/dist/pdf-styles.css +2 -0
package/dist/pdf-styles.css.map +7 -0
package/dist/{HtmlReader → types/HtmlReader}/HtmlReaderContent.d.ts +3 -3
package/dist/{HtmlReader → types/HtmlReader}/index.d.ts +22 -22
package/dist/{HtmlReader → types/HtmlReader}/injectables.d.ts +30 -30
package/dist/{PdfReader → types/PdfReader}/index.d.ts +11 -12
package/dist/{PdfReader → types/PdfReader}/useMeasure.d.ts +7 -4
package/dist/{ServiceWorker → types/ServiceWorker}/client.d.ts +9 -9
package/dist/{ServiceWorker → types/ServiceWorker}/constants.d.ts +3 -3
package/{src/ServiceWorker/index.ts → dist/types/ServiceWorker/index.d.ts} +0 -0
package/dist/{ServiceWorker → types/ServiceWorker}/sw.d.ts +7 -7
package/dist/{ServiceWorker → types/ServiceWorker}/types.d.ts +3 -3
package/dist/{WebpubManifestTypes → types/WebpubManifestTypes}/ConformsTo.d.ts +3 -3
package/dist/{WebpubManifestTypes → types/WebpubManifestTypes}/Contributor.d.ts +17 -17
package/dist/{WebpubManifestTypes → types/WebpubManifestTypes}/EpubExtension.d.ts +47 -47
package/dist/{WebpubManifestTypes → types/WebpubManifestTypes}/LanguageMap.d.ts +3 -3
package/dist/{WebpubManifestTypes → types/WebpubManifestTypes}/Metadata.d.ts +46 -46
package/dist/{WebpubManifestTypes → types/WebpubManifestTypes}/OPDSLink.d.ts +63 -63
package/dist/{WebpubManifestTypes → types/WebpubManifestTypes}/PresentationHints.d.ts +53 -53
package/dist/{WebpubManifestTypes → types/WebpubManifestTypes}/ReadiumLink.d.ts +58 -58
package/dist/{WebpubManifestTypes → types/WebpubManifestTypes}/Subject.d.ts +16 -16
package/dist/{WebpubManifestTypes → types/WebpubManifestTypes}/WebpubManifest.d.ts +14 -14
package/dist/{constants.d.ts → types/constants.d.ts} +2 -2
package/dist/{index.d.ts → types/index.d.ts} +7 -7
package/dist/{types.d.ts → types/types.d.ts} +66 -66
package/dist/{ui → types/ui}/Button.d.ts +9 -7
package/dist/{ui → types/ui}/Header.d.ts +6 -6
package/dist/{ui → types/ui}/HtmlSettings.d.ts +9 -9
package/dist/{ui → types/ui}/PageButton.d.ts +7 -7
package/dist/{ui → types/ui}/PdfSettings.d.ts +9 -9
package/dist/{ui → types/ui}/SettingsButton.d.ts +5 -5
package/dist/{ui → types/ui}/TableOfContent.d.ts +7 -7
package/dist/{ui → types/ui}/ToggleButton.d.ts +10 -10
package/dist/{ui → types/ui}/ToggleGroup.d.ts +8 -8
package/dist/{ui → types/ui}/constants.d.ts +1 -1
package/dist/{ui → types/ui}/hooks/useColorModeValue.d.ts +7 -7
package/dist/{ui → types/ui}/hooks/useContainerWidth.d.ts +6 -6
package/dist/{ui → types/ui}/hooks/useEventListener.d.ts +8 -8
package/dist/{ui → types/ui}/manager.d.ts +9 -9
package/dist/{ui → types/ui}/nypl-base-theme/components/button.d.ts +94 -94
package/dist/{ui → types/ui}/nypl-base-theme/components/checkbox.d.ts +41 -41
package/dist/{ui → types/ui}/nypl-base-theme/components/form-error.d.ts +14 -14
package/dist/{ui → types/ui}/nypl-base-theme/components/form-label.d.ts +14 -14
package/dist/{ui → types/ui}/nypl-base-theme/components/form.d.ts +15 -15
package/dist/{ui → types/ui}/nypl-base-theme/components/input.d.ts +107 -107
package/dist/{ui → types/ui}/nypl-base-theme/components/text-area.d.ts +34 -34
package/dist/{ui → types/ui}/nypl-base-theme/foundations/breakpoints.d.ts +8 -8
package/dist/{ui → types/ui}/nypl-base-theme/foundations/colors.d.ts +3 -3
package/dist/{ui → types/ui}/nypl-base-theme/foundations/global.d.ts +13 -13
package/dist/{ui → types/ui}/nypl-base-theme/foundations/radii.d.ts +12 -12
package/dist/{ui → types/ui}/nypl-base-theme/foundations/spacing.d.ts +49 -49
package/dist/{ui → types/ui}/nypl-base-theme/foundations/typography.d.ts +10 -10
package/dist/{ui → types/ui}/nypl-base-theme/index.d.ts +6 -6
package/dist/{ui → types/ui}/nypl-base-theme/types.d.ts +1 -1
package/dist/{ui → types/ui}/theme/components/button.d.ts +78 -78
package/dist/{ui → types/ui}/theme/components/text.d.ts +20 -20
package/dist/{ui → types/ui}/theme/foundations/colors.d.ts +3 -3
package/dist/{ui → types/ui}/theme/index.d.ts +11 -11
package/dist/{ui → types/ui}/theme/types.d.ts +1 -1
package/dist/{useWebReader.d.ts → types/useWebReader.d.ts} +7 -7
package/dist/{utils → types/utils}/decryptAxisNow.d.ts +0 -0
package/dist/{utils → types/utils}/fetch.d.ts +4 -4
package/dist/{utils → types/utils}/getColor.d.ts +2 -2
package/dist/{utils → types/utils}/toggleFullScreen.d.ts +5 -5
package/package.json +21 -33
package/dist/ServiceWorker/index.d.ts +0 -1
package/dist/index.js +0 -8
package/dist/web-reader.cjs.development.js +0 -3363
package/dist/web-reader.cjs.development.js.map +0 -1
package/dist/web-reader.cjs.production.min.js +0 -2
package/dist/web-reader.cjs.production.min.js.map +0 -1
package/dist/web-reader.esm.js +0 -3356
package/dist/web-reader.esm.js.map +0 -1
package/src/HtmlReader/HtmlReaderContent.tsx +0 -19
package/src/HtmlReader/index.tsx +0 -262
package/src/HtmlReader/injectables.ts +0 -26
package/src/PdfReader/index.tsx +0 -492
package/src/PdfReader/useMeasure.tsx +0 -68
package/src/ServiceWorker/client.ts +0 -106
package/src/ServiceWorker/constants.ts +0 -4
package/src/ServiceWorker/sw.ts +0 -84
package/src/ServiceWorker/types.ts +0 -3
package/src/WebpubManifestTypes/ConformsTo.ts +0 -9
package/src/WebpubManifestTypes/Contributor.ts +0 -24
package/src/WebpubManifestTypes/EpubExtension.ts +0 -48
package/src/WebpubManifestTypes/LanguageMap.ts +0 -5
package/src/WebpubManifestTypes/Metadata.ts +0 -48
package/src/WebpubManifestTypes/OPDSLink.ts +0 -251
package/src/WebpubManifestTypes/PresentationHints.ts +0 -54
package/src/WebpubManifestTypes/ReadiumLink.ts +0 -61
package/src/WebpubManifestTypes/Subject.ts +0 -20
package/src/WebpubManifestTypes/WebpubManifest.ts +0 -15
package/src/constants.ts +0 -3
package/src/index.tsx +0 -25
package/src/types.ts +0 -94
package/src/ui/Button.tsx +0 -12
package/src/ui/Header.tsx +0 -89
package/src/ui/HtmlSettings.tsx +0 -97
package/src/ui/PageButton.tsx +0 -39
package/src/ui/PdfSettings.tsx +0 -85
package/src/ui/SettingsButton.tsx +0 -71
package/src/ui/TableOfContent.tsx +0 -144
package/src/ui/ToggleButton.tsx +0 -60
package/src/ui/ToggleGroup.tsx +0 -41
package/src/ui/constants.ts +0 -2
package/src/ui/hooks/useColorModeValue.tsx +0 -19
package/src/ui/hooks/useContainerWidth.ts +0 -24
package/src/ui/hooks/useEventListener.ts +0 -26
package/src/ui/manager.tsx +0 -73
package/src/ui/nypl-base-theme/components/button.ts +0 -117
package/src/ui/nypl-base-theme/components/checkbox.ts +0 -45
package/src/ui/nypl-base-theme/components/form-error.ts +0 -15
package/src/ui/nypl-base-theme/components/form-label.ts +0 -15
package/src/ui/nypl-base-theme/components/form.ts +0 -16
package/src/ui/nypl-base-theme/components/input.ts +0 -101
package/src/ui/nypl-base-theme/components/text-area.ts +0 -17
package/src/ui/nypl-base-theme/foundations/breakpoints.ts +0 -10
package/src/ui/nypl-base-theme/foundations/colors.ts +0 -136
package/src/ui/nypl-base-theme/foundations/global.ts +0 -16
package/src/ui/nypl-base-theme/foundations/radii.ts +0 -13
package/src/ui/nypl-base-theme/foundations/spacing.ts +0 -58
package/src/ui/nypl-base-theme/foundations/typography.ts +0 -43
package/src/ui/nypl-base-theme/index.ts +0 -42
package/src/ui/nypl-base-theme/types.ts +0 -1
package/src/ui/theme/components/button.ts +0 -85
package/src/ui/theme/components/text.ts +0 -24
package/src/ui/theme/foundations/colors.ts +0 -10
package/src/ui/theme/index.ts +0 -34
package/src/ui/theme/types.ts +0 -1
package/src/useWebReader.tsx +0 -105
package/src/utils/decryptAxisNow.ts +0 -45
package/src/utils/fetch.ts +0 -13
package/src/utils/getColor.ts +0 -14
package/src/utils/toggleFullScreen.ts +0 -71

package/dist/web-reader.esm.js DELETED Viewed

@@ -1,3356 +0,0 @@
-import React__default, { createElement, Fragment, useState, useMemo, useLayoutEffect, useReducer, useEffect, useCallback } from 'react';
-import { Button as Button$1, extendTheme, useRadio, useTheme as useTheme$1, ThemeProvider, Box, Circle, useRadioGroup, Flex, ButtonGroup, Popover, PopoverTrigger, Text, PopoverContent, PopoverBody, Menu, MenuButton, Portal, MenuList, MenuItem, Link, chakra, HStack, shouldForwardProp } from '@chakra-ui/react';
-import { Icon, IconNames, LogoNames, IconRotationTypes } from '@nypl/design-system-react-components';
-import { useTheme } from '@emotion/react';
-import { createBreakpoints } from '@chakra-ui/theme-tools';
-import { pdfjs, Page, Document } from 'react-pdf';
-import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
-import D2Reader from '@d-i-t-a/reader';
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
-  try {
-    var info = gen[key](arg);
-    var value = info.value;
-  } catch (error) {
-    reject(error);
-    return;
-  }
-  if (info.done) {
-    resolve(value);
-  } else {
-    Promise.resolve(value).then(_next, _throw);
-  }
-}
-function _asyncToGenerator(fn) {
-  return function () {
-    var self = this,
-        args = arguments;
-    return new Promise(function (resolve, reject) {
-      var gen = fn.apply(self, args);
-      function _next(value) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
-      }
-      function _throw(err) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
-      }
-      _next(undefined);
-    });
-  };
-}
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-function getColor(colorMode) {
-  return function (light, dark, sepia) {
-    switch (colorMode) {
-      case 'day':
-        return light;
-      case 'night':
-        return dark;
-      case 'sepia':
-        return sepia;
-    }
-  };
-}
-var useColorModeValue = function useColorModeValue(light, dark, sepia) {
-  var _useTheme = useTheme(),
-      currentColorMode = _useTheme.currentColorMode;
-  var color = getColor(currentColorMode)(light, dark, sepia);
-  return color;
-};
-var doc = document;
-var docElm = document.documentElement; // For Safari IOS: Only available on iPad, not on iPhone.
-var enterFullScreen = function enterFullScreen() {
-  var fullScreenFunc = docElm.requestFullscreen || docElm.mozRequestFullScreen || docElm.webkitRequestFullscreen || docElm.msRequestFullscreen;
-  if (typeof fullScreenFunc === 'function') {
-    fullScreenFunc.call(docElm);
-  }
-};
-var exitFullScreen = function exitFullScreen() {
-  var exitFunc = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;
-  if (typeof exitFunc === 'function') {
-    exitFunc.call(doc);
-  }
-};
-/**
- * Toggles fullscreen mode on the <html> element.
- */
-function toggleFullScreen() {
-  var isFullscreen = doc.fullscreenElement || doc.mozFullScreenElement || doc.webkitFullscreenElement || doc.msFullscreenElement;
-  if (isFullscreen) {
-    exitFullScreen();
-  } else {
-    enterFullScreen();
-  }
-}
-var Button = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
-  return React__default.createElement(Button$1, Object.assign({
-    ref: ref,
-    variant: "solid"
-  }, props));
-});
-var TextStyle = {
-  // style object for base or default style
-  baseStyle: {},
-  // styles for different sizes ("sm", "md", "lg")
-  sizes: {},
-  // styles for different visual variants ("outline", "solid")
-  variants: {
-    headerNav: variantHeaderNav
-  },
-  // default values for `size`, `variant`, `colorScheme`
-  defaultProps: {}
-};
-function variantHeaderNav() {
-  return {
-    pl: 2,
-    my: 0,
-    letterSpacing: 1,
-    fontSize: 0,
-    display: {
-      sm: 'none',
-      md: 'none',
-      lg: 'inline-block'
-    }
-  };
-}
-var colors = {
-  transparent: 'transparent',
-  ui: {
-    sepia: '#F9F4E9'
-  }
-};
-var sizes = {
-  lg: {
-    h: 12,
-    minW: 12,
-    fontSize: 'lg',
-    px: 6
-  },
-  md: {
-    h: '38px',
-    minW: 10,
-    fontSize: 'sm',
-    px: 2.5
-  },
-  sm: {
-    h: 8,
-    minW: 8,
-    fontSize: 'sm',
-    px: 3
-  },
-  xs: {
-    h: 6,
-    minW: 6,
-    fontSize: 'xs',
-    px: 2
-  }
-};
-var ButtonStyle = {
-  // style object for base or default style
-  baseStyle: {
-    borderRadius: 'sm',
-    fontWeight: 'light'
-  },
-  // styles for different sizes ("sm", "md", "lg")
-  sizes: sizes,
-  // styles for different visual variants ("outline", "solid")
-  variants: {
-    pill: {
-      border: '1px solid',
-      borderColor: 'gray.200',
-      borderRadius: '2xl',
-      height: 6,
-      px: 6,
-      fontSize: '-1',
-      my: 'auto'
-    },
-    solid: variantSolid,
-    secondary: {
-      border: '1px solid',
-      borderColor: 'ui.gray.light-cool',
-      _hover: {
-        bg: 'ui.gray.x-light-cool',
-        borderColor: 'ui.gray.medium'
-      }
-    }
-  },
-  // default values for `size`, `variant`, `colorScheme`
-  defaultProps: {
-    size: 'md',
-    variant: 'solid',
-    colorScheme: 'gray'
-  }
-};
-function solidColors(colorScheme) {
-  switch (colorScheme) {
-    case 'gray':
-      return {
-        bg: 'gray.100',
-        _hover: {
-          bg: 'gray.200',
-          _disabled: {
-            bg: 'gray.100'
-          }
-        },
-        _active: {
-          bg: 'gray.300'
-        }
-      };
-    case 'red':
-      return {
-        bg: 'brand.nypl-red',
-        color: 'white',
-        hoverBg: 'red.500',
-        activeBg: 'red.600'
-      };
-    default:
-      return {
-        bg: colorScheme + ".500",
-        color: 'white',
-        hoverBg: colorScheme + ".600",
-        activeBg: colorScheme + ".700"
-      };
-  }
-}
-function variantSolid(props) {
-  var colors = solidColors(props.colorScheme);
-  return _extends({}, colors, {
-    _hover: {
-      _disabled: {
-        bg: 'ui.gray.light-cool',
-        color: 'ui.gray.dark'
-      }
-    },
-    _disabled: {
-      bg: 'ui.gray.light-cool',
-      color: 'ui.gray.dark'
-    }
-  });
-}
-// theme.js
-var breakpoints = /*#__PURE__*/createBreakpoints({
-  sm: '20em',
-  md: '38em',
-  lg: '60em',
-  xl: '80em',
-  '2xl': '96em'
-});
-var typography = {
-  fonts: {
-    body: '-apple-system, BlinkMacSystemFont, system-ui, sans-serif',
-    heading: '-apple-system, BlinkMacSystemFont, system-ui, sans-seri',
-    mono: "Courier,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace"
-  },
-  fontSizes: {
-    '-2': '0.75rem',
-    '-1': '0.875rem',
-    '0': '1rem',
-    '1': '1.125rem',
-    '2': '1.25rem',
-    '3': '1.75rem',
-    '4': '2.25rem',
-    '5': '3rem'
-  },
-  fontWeights: {
-    light: 300,
-    regular: 400,
-    medium: 500,
-    bold: 700
-  },
-  lineHeights: [1, 1.1, 1.25, 1.5],
-  letterSpacings: {
-    tighter: '-0.05em',
-    tight: '-0.025em',
-    normal: '0',
-    wide: '0.025em',
-    wider: '0.05em',
-    widest: '0.1em'
-  }
-};
-var colors$1 = {
-  transparent: 'transparent',
-  // ui fills
-  ui: {
-    black: '#000',
-    white: '#fff',
-    focus: '#4181F1',
-    link: {
-      primary: '#0576D3',
-      secondary: '#004B98'
-    },
-    success: {
-      primary: '#077719',
-      secondary: '#095212'
-    },
-    warning: {
-      primary: '#F0974E',
-      secondary: '#EC7B1F'
-    },
-    status: {
-      primary: '#F9E08E',
-      secondary: '#FBE7E1'
-    },
-    error: '#97272C',
-    disabled: {
-      primary: '#E0E0E0',
-      secondary: '#FAFAFA'
-    },
-    test: '#FF6347',
-    gray: {
-      'x-dark': '#424242',
-      dark: '#616161',
-      medium: '#BDBDBD',
-      'light-cool': '#E0E0E0',
-      'light-warm': '#EFEDEB',
-      'x-light-cool': '#F5F5F5',
-      'x-light-warm': '#F8F8F7',
-      'xx-light-cool': '#FAFAFA'
-    }
-  },
-  // brand fills. Only primary and secondary filled in for now.
-  brand: {
-    primary: '#C60917',
-    secondary: '#760000',
-    'nypl-red': '#D0343A'
-  },
-  /**
-   * The following color scales are useful for color edge cases
-   * where a distinct named ui or brand color doesn't quite work.
-   */
-  // based on ui/gray/medium
-  gray: {
-    '50': '#F2F2F2',
-    '100': '#DBDBDB',
-    '200': '#C4C4C4',
-    '300': '#ADADAD',
-    '400': '#969696',
-    '500': '#808080',
-    '600': '#666666',
-    '700': '#4D4D4D',
-    '800': '#333333',
-    '900': '#1A1A1A'
-  },
-  // based on NYPL red
-  red: {
-    50: '#ffe7e6',
-    100: '#f6c2bf',
-    200: '#e99796',
-    300: '#de6d6e',
-    400: '#d4454a',
-    500: '#ba2f2b',
-    600: '#922b21',
-    700: '#692216',
-    800: '#41150a',
-    900: '#1d0a01'
-  },
-  // based on ui/warning/secondary
-  orange: {
-    '50': '#FDF1E7',
-    '100': '#F9D8BD',
-    '200': '#F6BF93',
-    '300': '#F2A669',
-    '400': '#EF8D3E',
-    '500': '#EB7414',
-    '600': '#BC5D10',
-    '700': '#8D460C',
-    '800': '#5E2F08',
-    '900': '#2F1704'
-  },
-  // based on ui/status/primary
-  yellow: {
-    '50': '#FEF8E7',
-    '100': '#FBECBB',
-    '200': '#F9E090',
-    '300': '#F7D464',
-    '400': '#F4C938',
-    '500': '#F2BD0D',
-    '600': '#C2970A',
-    '700': '#917108',
-    '800': '#614B05',
-    '900': '#302603'
-  },
-  // based on ui/success/primary
-  green: {
-    '50': '#E7FEEB',
-    '100': '#BCFBC6',
-    '200': '#90F8A1',
-    '300': '#65F67C',
-    '400': '#3AF357',
-    '500': '#0EF133',
-    '600': '#0BC128',
-    '700': '#08911E',
-    '800': '#066014',
-    '900': '#03300A'
-  },
-  // based on NYPL blue
-  blue: {
-    50: '#dbefff',
-    100: '#add2ff',
-    200: '#7cb8ff',
-    300: '#4aa2ff',
-    400: '#1a8fff',
-    500: '#007ee6',
-    600: '#0056b4',
-    700: '#003582',
-    800: '#001a51',
-    900: '#000621'
-  }
-};
-var radii = {
-  none: '0',
-  sm: '0.125rem',
-  base: '0.25rem',
-  md: '0.375rem',
-  lg: '0.5rem',
-  xl: '0.75rem',
-  '2xl': '1rem',
-  '3xl': '1.5rem',
-  full: '9999px'
-};
-/**
- * A comprehensive spacin scale based on NYPL Design System,
- * with intermediate values interpolated. Those marked with comments
- * are directly from the NYPL DS.
- *
- * 1 spacing unit is 4px or 0.25rem.
- *
- * Mental model: If you need a spacing of 40px, divide it by 4.
- * That'll give you 10. Then use it in your component.
- */
-var spacing = {
-  space: {
-    px: '1px',
-    0: '0',
-    0.5: '0.125rem',
-    // 4px
-    1: '0.25rem',
-    1.5: '0.375rem',
-    // 8px
-    2: '0.5rem',
-    2.5: '0.625rem',
-    3: '0.75rem',
-    3.5: '0.875rem',
-    // 16px
-    4: '1rem',
-    5: '1.25rem',
-    // 24px
-    6: '1.5rem',
-    7: '1.75rem',
-    // 32 px
-    8: '2rem',
-    9: '2.25rem',
-    10: '2.5rem',
-    // 48px
-    12: '3rem',
-    14: '3.5rem',
-    // 64px
-    16: '4rem',
-    20: '5rem',
-    // 96px
-    24: '6rem',
-    28: '7rem',
-    32: '8rem',
-    36: '9rem',
-    40: '10rem',
-    44: '11rem',
-    48: '12rem',
-    52: '13rem',
-    56: '14rem',
-    60: '15rem',
-    64: '16rem',
-    72: '18rem',
-    80: '20rem',
-    96: '24rem'
-  }
-};
-var baseStyleLabel = {
-  userSelect: 'none',
-  fontWeight: 'light',
-  _disabled: {
-    color: 'ui.gray.x-dark',
-    opacity: 1
-  }
-};
-var Checkbox = {
-  // style object for base or default style
-  baseStyle: {
-    control: {
-      borderColor: 'ui.gray.dark',
-      _hover: {
-        bg: 'white',
-        _disabled: {
-          bg: 'ui.gray.x-light-cool'
-        }
-      },
-      _checked: {
-        bg: 'white',
-        color: 'gray.800',
-        borderColor: 'ui.gray.dark',
-        _hover: {
-          bg: 'white',
-          borderColor: 'ui.gray.x-dark'
-        }
-      },
-      _disabled: {
-        bg: 'ui.gray.x-light-cool',
-        borderColor: 'ui.gray.medium'
-      }
-    },
-    label: baseStyleLabel
-  },
-  // styles for different sizes ("sm", "md", "lg")
-  sizes: {},
-  // styles for different visual variants ("outline", "solid")
-  variants: {},
-  // default values for `size`, `variant`, `colorScheme`
-  defaultProps: {
-    size: 'md',
-    colorScheme: 'gray'
-  }
-};
-var size = {
-  lg: {
-    fontSize: 'lg',
-    px: 4,
-    h: 12,
-    borderRadius: 'none'
-  },
-  md: {
-    fontSize: 'sm',
-    px: 4,
-    h: 9,
-    borderRadius: 'none'
-  },
-  sm: {
-    fontSize: 'sm',
-    px: 3,
-    h: 8,
-    borderRadius: 'none'
-  },
-  xs: {
-    fontSize: 'xs',
-    px: 2,
-    h: 6,
-    borderRadius: 'none'
-  }
-};
-var sizes$1 = {
-  lg: {
-    field: size.lg,
-    addon: size.lg
-  },
-  md: {
-    field: size.md,
-    addon: size.md
-  },
-  sm: {
-    field: size.sm,
-    addon: size.sm
-  },
-  xs: {
-    field: size.xs,
-    addon: size.xs
-  }
-};
-var Input = {
-  // style object for base or default style
-  baseStyle: {
-    field: {
-      borderRadius: 'none',
-      fontSize: 'sm',
-      _focus: {
-        borderColor: 'ui.link.primary',
-        _hover: {
-          borderColor: 'ui.link.primary'
-        }
-      },
-      _placeholder: {
-        fontStyle: 'italic',
-        color: 'ui.gray.dark'
-      },
-      _invalid: {
-        borderColor: 'ui.error',
-        _placeholder: {
-          color: 'ui.error'
-        },
-        _hover: {
-          borderColor: 'ui.error'
-        }
-      }
-    }
-  },
-  // styles for different sizes ("sm", "md", "lg")
-  sizes: sizes$1,
-  // styles for different visual variants ("outline", "solid")
-  variants: {
-    outline: {
-      field: {
-        _disabled: {
-          bg: 'ui.gray.xx-light-cool'
-        },
-        _focus: {
-          boxShadow: 'none',
-          _hover: {
-            borderColor: 'ui.link.primary'
-          }
-        },
-        _invalid: {
-          boxShadow: 'none'
-        }
-      }
-    }
-  },
-  // default values for `size`, `variant`, `colorScheme`
-  defaultProps: {
-    size: 'md'
-  }
-};
-var global = {
-  // styles for the `body`
-  body: {
-    bg: 'white',
-    color: 'black'
-  },
-  // styles for the `a`
-  a: {
-    color: 'ui.link.primary',
-    _hover: {
-      textDecoration: 'underline'
-    }
-  }
-};
-var baseStyle = {
-  fontSize: 'sm',
-  marginEnd: 0,
-  mb: 2,
-  fontWeight: 'medium',
-  transition: 'all 0.2s',
-  opacity: 1,
-  _disabled: {
-    opacity: 1
-  }
-};
-var FormLabel = {
-  baseStyle: baseStyle
-};
-var baseStyle$1 = {
-  requiredIndicator: {
-    marginStart: 1,
-    color: 'red.500'
-  },
-  helperText: {
-    mt: 2,
-    color: 'black',
-    lineHeight: 'normal',
-    fontSize: 'xs'
-  }
-};
-var Form = {
-  baseStyle: baseStyle$1
-};
-var baseStyle$2 = {
-  text: {
-    color: 'ui.error',
-    mt: 2,
-    fontSize: 'xs'
-  },
-  icon: {
-    marginEnd: '0.5em',
-    color: 'ui.error'
-  }
-};
-var FormError = {
-  baseStyle: baseStyle$2
-};
-var sizes$2 = {
-  xs: Input.sizes.xs.field,
-  sm: Input.sizes.sm.field,
-  md: Input.sizes.md.field,
-  lg: Input.sizes.lg.field
-};
-var Textarea = {
-  baseStyle: {
-    _disabled: {
-      bg: 'ui.gray.x-light-cool'
-    }
-  },
-  sizes: sizes$2
-};
-/**
- * See Chakra default theme for shape of theme object:
- * https://github.com/chakra-ui/chakra-ui/tree/main/packages/theme
- */
-var theme = /*#__PURE__*/extendTheme( /*#__PURE__*/_extends({
-  styles: {
-    global: global
-  },
-  breakpoints: breakpoints,
-  radii: radii,
-  colors: colors$1
-}, typography, {
-  space: spacing,
-  /**
-   * Chakra documentation on component styles:
-   * https://chakra-ui.com/docs/theming/component-style
-   */
-  components: {
-    Button: ButtonStyle,
-    Checkbox: Checkbox,
-    Input: Input,
-    FormLabel: FormLabel,
-    Form: Form,
-    FormError: FormError,
-    Textarea: Textarea
-  }
-}));
-var getButtonStyle = function getButtonStyle(getColor) {
-  return {
-    // style object for base or default style
-    baseStyle: {
-      borderRadius: 'none'
-    },
-    // styles for different sizes ("sm", "md", "lg")
-    sizes: {},
-    // styles for different visual variants ("outline", "solid")
-    variants: {
-      solid: variantSolid$1(getColor),
-      toggle: variantToggle(getColor)
-    },
-    // default values for `size`, `variant`, `colorScheme`
-    defaultProps: {
-      size: 'sm',
-      variant: 'solid'
-    }
-  };
-};
-/* Color Schemes:
- ** Light, Sepia, Dark
- * States:
- ** Normal
- ** Selected
- ** Disabled
- ** Hovered
- */
-var variantSolid$1 = function variantSolid(getColor) {
-  return function (props) {
-    var bgColor = getColor('ui.white', 'ui.black', 'ui.sepia');
-    var color = getColor('gray.800', 'ui.white', 'gray.800');
-    var _focus = {
-      bgColor: bgColor,
-      color: color
-    };
-    var _hover = {
-      bgColor: bgColor,
-      color: color,
-      _disabled: {
-        bgColor: bgColor
-      }
-    };
-    var _active = {
-      bgColor: bgColor,
-      color: color
-    };
-    var _checked = {
-      bgColor: bgColor,
-      color: color
-    };
-    var _disabled = {
-      bgColor: bgColor
-    };
-    return {
-      border: '1px solid',
-      borderColor: 'gray.100',
-      transition: 'none',
-      fontSize: 0,
-      letterSpacing: 1,
-      textTransform: 'uppercase',
-      maxWidth: '100%',
-      cursor: 'pointer',
-      bgColor: bgColor,
-      color: color,
-      _focus: _focus,
-      _hover: _hover,
-      _active: _active,
-      _checked: _checked,
-      _disabled: _disabled
-    };
-  };
-};
-var variantToggle = function variantToggle(getColor) {
-  return function (props) {
-    var bgColor = getColor('ui.white', 'gray.800', 'ui.white');
-    var color = getColor('gray.800', 'ui.white', 'gray.800');
-    return _extends({}, variantSolid$1(getColor)(props), {
-      bgColor: bgColor,
-      color: color,
-      px: 8,
-      fontWeight: 'medium',
-      fontSize: -2,
-      _focus: {
-        bgColor: bgColor
-      },
-      _hover: {
-        bgColor: bgColor
-      },
-      _active: {
-        bgColor: bgColor
-      },
-      _checked: {
-        color: 'ui.white',
-        bgColor: 'green.700'
-      }
-    });
-  };
-};
-/**
- * See Chakra default theme for shape of theme object:
- * https://github.com/chakra-ui/chakra-ui/tree/main/packages/theme
- *
- * Making this a function because we need to adjust the theme based
- * on the colorMode that's being passed in.
- *
- * Returns the chakra theme object with an additional property `currentColorMode`
- */
-function getTheme(colorMode) {
-  return extendTheme({
-    colors: colors,
-    /**
-     * Chakra documentation on component styles:
-     * https://chakra-ui.com/docs/theming/component-style
-     */
-    components: {
-      Button: getButtonStyle(getColor(colorMode)),
-      Text: TextStyle
-    },
-    currentColorMode: colorMode
-  }, theme);
-}
-function ToggleButton(props) {
-  var isChecked = props.isChecked,
-      children = props.children,
-      colorMode = props.colorMode,
-      rest = _objectWithoutPropertiesLoose(props, ["isChecked", "children", "colorMode"]);
-  var _useRadio = useRadio(props),
-      getInputProps = _useRadio.getInputProps,
-      getCheckboxProps = _useRadio.getCheckboxProps;
-  var input = getInputProps();
-  var checkbox = getCheckboxProps();
-  var theme = useTheme$1();
-  return (// This will override the default theme if we specify the colorMode to the toggle button.
-    React__default.createElement(ThemeProvider, {
-      theme: getTheme(colorMode != null ? colorMode : theme.currentColorMode)
-    }, React__default.createElement(Box, {
-      as: "label",
-      d: "flex",
-      flexGrow: 1
-    }, React__default.createElement("input", Object.assign({}, input)), React__default.createElement(Button, Object.assign({
-      as: "div"
-    }, checkbox, {
-      variant: "toggle"
-    }, rest, {
-      flexGrow: 1
-    }), children, isChecked && React__default.createElement(Circle, {
-      position: "absolute",
-      verticalAlign: "middle",
-      right: 2,
-      top: "50%",
-      transform: "translateY(-50%)",
-      borderColor: "white",
-      border: "1px solid",
-      size: "15px",
-      alignItems: "baseline"
-    }, React__default.createElement(Icon, {
-      decorative: true,
-      name: IconNames.check,
-      modifiers: ['small']
-    })))))
-  );
-}
-var ToggleGroup = function ToggleGroup(_ref) {
-  var value = _ref.value,
-      label = _ref.label,
-      name = _ref.name,
-      children = _ref.children,
-      onChange = _ref.onChange;
-  var _useRadioGroup = useRadioGroup({
-    name: name,
-    onChange: onChange,
-    value: value
-  }),
-      getRootProps = _useRadioGroup.getRootProps,
-      getRadioProps = _useRadioGroup.getRadioProps;
-  var group = getRootProps();
-  return React__default.createElement(Flex, Object.assign({}, group, {
-    "aria-label": label,
-    flex: "1 0 auto",
-    flexWrap: "wrap",
-    my: 2
-  }), React__default.Children.map(children, function (element) {
-    try {
-      var _value = element.props.value;
-      var radio = getRadioProps({
-        value: _value
-      });
-      return React__default.cloneElement(element, radio);
-    } catch (e) {
-      throw new Error('ToggleGroup expects ToggleButton children with `value` props.');
-    }
-  }));
-};
-function PdfSettings(props) {
-  var navigator = props.navigator,
-      readerState = props.readerState,
-      paginationValue = props.paginationValue;
-  var fontFamily = readerState.fontFamily;
-  var setFontFamily = navigator.setFontFamily,
-      decreaseFontSize = navigator.decreaseFontSize,
-      increaseFontSize = navigator.increaseFontSize,
-      setScroll = navigator.setScroll;
-  return createElement(Fragment, null, createElement(ToggleGroup, {
-    value: fontFamily,
-    label: "text font options",
-    onChange: setFontFamily
-  }, createElement(ToggleButton, {
-    value: "publisher"
-  }, "Publisher"), createElement(ToggleButton, {
-    value: "serif"
-  }, "Serif"), createElement(ToggleButton, {
-    value: "sans-serif"
-  }, "Sans-Serif"), createElement(ToggleButton, {
-    value: "open-dyslexic"
-  }, "Dyslexia-Friendly")), createElement(ButtonGroup, {
-    d: "flex",
-    spacing: 0
-  }, createElement(Button, {
-    flexGrow: 1,
-    "aria-label": "Zoom In",
-    onClick: decreaseFontSize,
-    variant: "toggle"
-  }, "Zoom", createElement(Circle, {
-    border: "1px solid",
-    p: 1,
-    ml: 1,
-    size: "17px",
-    alignItems: "baseline"
-  }, createElement(Icon, {
-    decorative: true,
-    name: IconNames.minus,
-    modifiers: ['small']
-  }), ' ')), createElement(Button, {
-    flexGrow: 1,
-    "aria-label": "Zoom Out",
-    onClick: increaseFontSize,
-    variant: "toggle"
-  }, "Zoom", createElement(Circle, {
-    border: "1px solid",
-    p: 1,
-    ml: 1,
-    size: "17px",
-    alignItems: "baseline"
-  }, createElement(Icon, {
-    decorative: true,
-    name: IconNames.plus,
-    modifiers: ['small']
-  }), ' '))), createElement(ToggleGroup, {
-    onChange: setScroll,
-    value: paginationValue,
-    label: "pagination options"
-  }, createElement(ToggleButton, {
-    value: "paginated"
-  }, "Paginated"), createElement(ToggleButton, {
-    value: "scrolling"
-  }, "Scrolling")));
-}
-function HtmlSettings(props) {
-  var navigator = props.navigator,
-      readerState = props.readerState,
-      paginationValue = props.paginationValue;
-  var fontFamily = readerState.fontFamily,
-      colorMode = readerState.colorMode;
-  var setFontFamily = navigator.setFontFamily,
-      decreaseFontSize = navigator.decreaseFontSize,
-      increaseFontSize = navigator.increaseFontSize,
-      setColorMode = navigator.setColorMode,
-      setScroll = navigator.setScroll;
-  return createElement(Fragment, null, createElement(ToggleGroup, {
-    value: fontFamily,
-    label: "text font options",
-    onChange: setFontFamily
-  }, createElement(ToggleButton, {
-    value: "publisher"
-  }, "Publisher"), createElement(ToggleButton, {
-    value: "serif"
-  }, "Serif"), createElement(ToggleButton, {
-    value: "sans-serif"
-  }, "Sans-Serif"), createElement(ToggleButton, {
-    value: "open-dyslexic"
-  }, "Dyslexia-Friendly")), createElement(ButtonGroup, {
-    d: "flex",
-    spacing: 0
-  }, createElement(Button, {
-    flexGrow: 1,
-    "aria-label": "Decrease font size",
-    onClick: decreaseFontSize,
-    variant: "toggle"
-  }, "A-"), createElement(Button, {
-    flexGrow: 1,
-    "aria-label": "Increase font size",
-    onClick: increaseFontSize,
-    variant: "toggle"
-  }, "A+")), createElement(ToggleGroup, {
-    value: colorMode,
-    label: "reading theme options",
-    onChange: setColorMode
-  }, createElement(ToggleButton, {
-    colorMode: "day",
-    value: "day",
-    _checked: {
-      bg: 'ui.white'
-    }
-  }, "Day"), createElement(ToggleButton, {
-    colorMode: "sepia",
-    value: "sepia",
-    bg: "ui.sepia" // distinct case where default needs to be sepia
-    ,
-    _active: {
-      bg: 'ui.sepia'
-    },
-    _hover: {
-      bg: 'ui.sepia'
-    },
-    _checked: {
-      bg: 'ui.sepia'
-    }
-  }, "Sepia"), createElement(ToggleButton, {
-    colorMode: "night",
-    value: "night",
-    _checked: {
-      bg: 'ui.black'
-    }
-  }, "Night")), createElement(ToggleGroup, {
-    onChange: setScroll,
-    value: paginationValue,
-    label: "pagination options"
-  }, createElement(ToggleButton, {
-    value: "paginated"
-  }, "Paginated"), createElement(ToggleButton, {
-    value: "scrolling"
-  }, "Scrolling")));
-}
-function SettingsCard(props) {
-  var _React$useState = useState(false),
-      isOpen = _React$useState[0],
-      setIsOpen = _React$useState[1];
-  var open = function open() {
-    return setIsOpen(!isOpen);
-  };
-  var close = function close() {
-    return setIsOpen(false);
-  };
-  var navigator = props.navigator,
-      state = props.state,
-      type = props.type;
-  var paginationValue = state != null && state.isScrolling ? 'scrolling' : 'paginated';
-  var contentBgColor = useColorModeValue('ui.white', 'ui.black', 'ui.white');
-  return createElement(Fragment, null, createElement(Popover, {
-    placement: "bottom",
-    isOpen: isOpen,
-    onClose: close,
-    autoFocus: true
-  }, createElement(PopoverTrigger, null, createElement(Button, {
-    onClick: open,
-    border: "none"
-  }, createElement(Icon, {
-    decorative: true,
-    name: IconNames.plus,
-    modifiers: ['small']
-  }), ' ', createElement(Text, {
-    variant: "headerNav"
-  }, "Settings"))), createElement(PopoverContent, {
-    borderColor: "gray.100",
-    width: "fit-content",
-    bgColor: contentBgColor
-  }, createElement(PopoverBody, {
-    p: 0,
-    maxWidth: "95vw"
-  }, type === 'PDF' && createElement(PdfSettings, {
-    navigator: navigator,
-    readerState: state,
-    paginationValue: paginationValue
-  }), type === 'HTML' && createElement(HtmlSettings, {
-    navigator: navigator,
-    readerState: state,
-    paginationValue: paginationValue
-  })))));
-}
-// we have to set a constant height to make this work with R2D2BC
-var HEADER_HEIGHT = 48;
-var TocItem = function TocItem(props) {
-  var href = props.href,
-      title = props.title,
-      isActive = props.isActive,
-      rest = _objectWithoutPropertiesLoose(props, ["href", "title", "isActive"]);
-  var bgColor = useColorModeValue('ui.white', 'ui.black', 'ui.sepia');
-  var color = useColorModeValue('ui.black', 'ui.white', 'ui.black');
-  var borderColor = useColorModeValue('ui.gray.medium', 'gray.500', 'yellow.600');
-  var activeColor = 'ui.black';
-  var activeBgColor = 'ui.gray.light-cool';
-  var _hover = {
-    textDecoration: 'none',
-    background: isActive ? 'ui.black' : 'ui.gray.x-dark',
-    color: 'ui.white'
-  };
-  var _focus = _extends({}, _hover, {
-    boxShadow: 'none'
-  });
-  var styles = {
-    background: isActive ? activeBgColor : bgColor,
-    color: isActive ? activeColor : color,
-    borderBottom: "1px solid",
-    borderColor: borderColor,
-    py: 3,
-    _hover: _hover,
-    _focus: _focus
-  };
-  return React__default.createElement(MenuItem, Object.assign({
-    as: Link,
-    href: href
-  }, styles, rest), title);
-};
-function TableOfContent(_ref) {
-  var navigator = _ref.navigator,
-      manifest = _ref.manifest,
-      readerState = _ref.readerState;
-  var _useState = useState(false),
-      isOpen = _useState[0],
-      setIsOpen = _useState[1];
-  var tocLinkHandler = function tocLinkHandler(evt) {
-    evt.preventDefault();
-    var href = evt.currentTarget.getAttribute('href');
-    if (!href) {
-      console.warn('TOC Link clicked without an href');
-      return;
-    }
-    navigator.goToPage(href);
-    setIsOpen(false);
-  };
-  var tocBgColor = useColorModeValue('ui.white', 'ui.black', 'ui.sepia');
-  var getLinkHref = function getLinkHref(link) {
-    if (link.href) return link.href;
-    if (!link.children) throw new Error('Manifest is not well formed');
-    return getLinkHref(link.children[0]);
-  };
-  return React__default.createElement(Menu, {
-    onOpen: function onOpen() {
-      return setIsOpen(true);
-    },
-    onClose: function onClose() {
-      return setIsOpen(false);
-    }
-  }, React__default.createElement(MenuButton, {
-    as: Button,
-    border: "none"
-  }, React__default.createElement(Icon, {
-    decorative: true,
-    name: IconNames.download,
-    modifiers: ['small']
-  }), React__default.createElement(Text, {
-    variant: "headerNav"
-  }, "Table of Contents")), isOpen && (manifest == null ? void 0 : manifest.toc) && React__default.createElement(Portal, null, React__default.createElement(MenuList, {
-    width: "100vw",
-    height: "calc(100vh - " + HEADER_HEIGHT + "px)",
-    background: tocBgColor,
-    borderRadius: "none",
-    borderColor: tocBgColor,
-    zIndex: "popover",
-    px: 7,
-    mt: "-2px" // Move the popover slightly higher to hide Header border
-    ,
-    overflow: "auto"
-  }, manifest.toc.map(function (content) {
-    return React__default.createElement(React__default.Fragment, {
-      key: content.title
-    }, React__default.createElement(TocItem, {
-      href: getLinkHref(content),
-      title: content.title,
-      isActive: (readerState == null ? void 0 : readerState.currentTocUrl) === content.href,
-      onClick: tocLinkHandler
-    }), content.children && content.children.map(function (subLink) {
-      return React__default.createElement(TocItem, {
-        key: subLink.title,
-        href: getLinkHref(subLink),
-        title: subLink.title,
-        isActive: (readerState == null ? void 0 : readerState.currentTocUrl) === subLink.href,
-        onClick: tocLinkHandler,
-        pl: 10
-      });
-    }));
-  }))));
-}
-function Header(props) {
-  var headerLeft = props.headerLeft,
-      state = props.state,
-      navigator = props.navigator,
-      manifest = props.manifest;
-  var linkColor = useColorModeValue('gray.700', 'gray.100', 'gray.700');
-  var mainBgColor = useColorModeValue('ui.white', 'ui.black', 'ui.sepia'); // Add custom styles to the NYPL Icon
-  var ChakraIcon = chakra(Icon, {
-    baseStyle: {
-      height: '100%'
-    }
-  });
-  return React__default.createElement(Flex, {
-    as: "header",
-    position: "sticky",
-    top: 0,
-    left: 0,
-    right: 0,
-    height: HEADER_HEIGHT + "px",
-    zIndex: "sticky",
-    alignContent: "space-between",
-    alignItems: "center",
-    px: 8,
-    borderBottom: "1px solid",
-    borderColor: "gray.100",
-    bgColor: mainBgColor
-  }, headerLeft ? headerLeft : React__default.createElement(Link, {
-    href: "https://www.nypl.org",
-    "aria-label": "Return to NYPL",
-    tabIndex: 0,
-    fontSize: 0,
-    py: 1,
-    textTransform: "uppercase",
-    d: "flex",
-    color: linkColor,
-    height: "100%",
-    alignItems: "center",
-    _hover: {
-      textDecoration: 'none'
-    }
-  }, React__default.createElement(ChakraIcon, {
-    decorative: true,
-    name: LogoNames.logo_nypl,
-    modifiers: ['xlarge']
-  }), React__default.createElement(Text, {
-    variant: "headerNav"
-  }, "Return to NYPL")), React__default.createElement(HStack, {
-    ml: "auto",
-    spacing: 1
-  }, React__default.createElement(TableOfContent, {
-    navigator: navigator,
-    manifest: manifest,
-    readerState: state
-  }), React__default.createElement(SettingsCard, Object.assign({}, props)), React__default.createElement(Button, {
-    border: "none",
-    onClick: toggleFullScreen
-  }, React__default.createElement(Icon, {
-    decorative: true,
-    name: IconNames.search,
-    modifiers: ['small']
-  }), React__default.createElement(Text, {
-    variant: "headerNav"
-  }, "Toggle Fullscreen"))));
-}
-function PageButton(props) {
-  var children = props.children,
-      onClick = props.onClick,
-      rest = _objectWithoutPropertiesLoose(props, ["children", "onClick"]);
-  var circleColor = useColorModeValue('ui.black', 'ui.white', 'ui.black');
-  var circleBgColor = useColorModeValue('ui.white', 'gray.700', 'ui.white');
-  return React__default.createElement(Circle, Object.assign({
-    as: "button",
-    d: "flex",
-    position: "fixed",
-    zIndex: "docked",
-    alignItems: "center",
-    border: "1px solid",
-    borderColor: "ui.gray.light-cool",
-    color: circleColor,
-    bg: circleBgColor,
-    size: {
-      sm: '40px',
-      md: '50px'
-    },
-    mx: {
-      sm: 2,
-      md: 6
-    },
-    top: "50%",
-    cursor: "pointer",
-    onClick: onClick
-  }, rest), children);
-}
-/**
- * The default Manager UI. This will be broken into individual components
- * that can be imported and used separately or in a customized setup.
- * It takes the return value of useWebReader as props
- */
-var ManagerUI = function ManagerUI(props) {
-  var _props$state$colorMod, _props$state;
-  return createElement(ThemeProvider, {
-    theme: getTheme((_props$state$colorMod = (_props$state = props.state) == null ? void 0 : _props$state.colorMode) != null ? _props$state$colorMod : 'day')
-  }, createElement(WebReaderContent, Object.assign({}, props)));
-};
-var WebReaderContent = function WebReaderContent(_ref) {
-  var _props$navigator, _props$navigator2;
-  var children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, ["children"]);
-  var bgColor = useColorModeValue('ui.white', 'ui.black', 'ui.sepia');
-  return createElement(Flex, {
-    flexDir: "column",
-    minHeight: "100vh",
-    w: "100vw"
-  }, !props.isLoading && createElement(Header, Object.assign({}, props)), createElement(PageButton, {
-    onClick: (_props$navigator = props.navigator) == null ? void 0 : _props$navigator.goBackward,
-    left: 0,
-    pr: 2,
-    "aria-label": "Previous Page"
-  }, createElement(Icon, {
-    decorative: true,
-    name: IconNames.arrow,
-    modifiers: ['small'],
-    iconRotation: IconRotationTypes.rotate90
-  })), createElement(Flex, {
-    width: "100vw",
-    bg: bgColor,
-    // accounting for the prev/next buttons
-    px: {
-      sm: 10,
-      md: '5vw'
-    },
-    flexDir: "column",
-    alignItems: "stretch",
-    flex: "1 1 100%"
-  }, children), createElement(PageButton, {
-    onClick: (_props$navigator2 = props.navigator) == null ? void 0 : _props$navigator2.goForward,
-    right: 0,
-    pl: 2,
-    "aria-label": "Next Page"
-  }, createElement(Icon, {
-    decorative: true,
-    name: IconNames.arrow,
-    modifiers: ['small'],
-    iconRotation: IconRotationTypes.rotate270
-  })));
-};
-function createCommonjsModule(fn, module) {
-	return module = { exports: {} }, fn(module, module.exports), module.exports;
-}
-var runtime_1 = createCommonjsModule(function (module) {
-/**
- * Copyright (c) 2014-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var runtime = (function (exports) {
-  var Op = Object.prototype;
-  var hasOwn = Op.hasOwnProperty;
-  var undefined$1; // More compressible than void 0.
-  var $Symbol = typeof Symbol === "function" ? Symbol : {};
-  var iteratorSymbol = $Symbol.iterator || "@@iterator";
-  var asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator";
-  var toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
-  function define(obj, key, value) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-    return obj[key];
-  }
-  try {
-    // IE 8 has a broken Object.defineProperty that only works on DOM objects.
-    define({}, "");
-  } catch (err) {
-    define = function(obj, key, value) {
-      return obj[key] = value;
-    };
-  }
-  function wrap(innerFn, outerFn, self, tryLocsList) {
-    // If outerFn provided and outerFn.prototype is a Generator, then outerFn.prototype instanceof Generator.
-    var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator;
-    var generator = Object.create(protoGenerator.prototype);
-    var context = new Context(tryLocsList || []);
-    // The ._invoke method unifies the implementations of the .next,
-    // .throw, and .return methods.
-    generator._invoke = makeInvokeMethod(innerFn, self, context);
-    return generator;
-  }
-  exports.wrap = wrap;
-  // Try/catch helper to minimize deoptimizations. Returns a completion
-  // record like context.tryEntries[i].completion. This interface could
-  // have been (and was previously) designed to take a closure to be
-  // invoked without arguments, but in all the cases we care about we
-  // already have an existing method we want to call, so there's no need
-  // to create a new function object. We can even get away with assuming
-  // the method takes exactly one argument, since that happens to be true
-  // in every case, so we don't have to touch the arguments object. The
-  // only additional allocation required is the completion record, which
-  // has a stable shape and so hopefully should be cheap to allocate.
-  function tryCatch(fn, obj, arg) {
-    try {
-      return { type: "normal", arg: fn.call(obj, arg) };
-    } catch (err) {
-      return { type: "throw", arg: err };
-    }
-  }
-  var GenStateSuspendedStart = "suspendedStart";
-  var GenStateSuspendedYield = "suspendedYield";
-  var GenStateExecuting = "executing";
-  var GenStateCompleted = "completed";
-  // Returning this object from the innerFn has the same effect as
-  // breaking out of the dispatch switch statement.
-  var ContinueSentinel = {};
-  // Dummy constructor functions that we use as the .constructor and
-  // .constructor.prototype properties for functions that return Generator
-  // objects. For full spec compliance, you may wish to configure your
-  // minifier not to mangle the names of these two functions.
-  function Generator() {}
-  function GeneratorFunction() {}
-  function GeneratorFunctionPrototype() {}
-  // This is a polyfill for %IteratorPrototype% for environments that
-  // don't natively support it.
-  var IteratorPrototype = {};
-  IteratorPrototype[iteratorSymbol] = function () {
-    return this;
-  };
-  var getProto = Object.getPrototypeOf;
-  var NativeIteratorPrototype = getProto && getProto(getProto(values([])));
-  if (NativeIteratorPrototype &&
-      NativeIteratorPrototype !== Op &&
-      hasOwn.call(NativeIteratorPrototype, iteratorSymbol)) {
-    // This environment has a native %IteratorPrototype%; use it instead
-    // of the polyfill.
-    IteratorPrototype = NativeIteratorPrototype;
-  }
-  var Gp = GeneratorFunctionPrototype.prototype =
-    Generator.prototype = Object.create(IteratorPrototype);
-  GeneratorFunction.prototype = Gp.constructor = GeneratorFunctionPrototype;
-  GeneratorFunctionPrototype.constructor = GeneratorFunction;
-  GeneratorFunction.displayName = define(
-    GeneratorFunctionPrototype,
-    toStringTagSymbol,
-    "GeneratorFunction"
-  );
-  // Helper for defining the .next, .throw, and .return methods of the
-  // Iterator interface in terms of a single ._invoke method.
-  function defineIteratorMethods(prototype) {
-    ["next", "throw", "return"].forEach(function(method) {
-      define(prototype, method, function(arg) {
-        return this._invoke(method, arg);
-      });
-    });
-  }
-  exports.isGeneratorFunction = function(genFun) {
-    var ctor = typeof genFun === "function" && genFun.constructor;
-    return ctor
-      ? ctor === GeneratorFunction ||
-        // For the native GeneratorFunction constructor, the best we can
-        // do is to check its .name property.
-        (ctor.displayName || ctor.name) === "GeneratorFunction"
-      : false;
-  };
-  exports.mark = function(genFun) {
-    if (Object.setPrototypeOf) {
-      Object.setPrototypeOf(genFun, GeneratorFunctionPrototype);
-    } else {
-      genFun.__proto__ = GeneratorFunctionPrototype;
-      define(genFun, toStringTagSymbol, "GeneratorFunction");
-    }
-    genFun.prototype = Object.create(Gp);
-    return genFun;
-  };
-  // Within the body of any async function, `await x` is transformed to
-  // `yield regeneratorRuntime.awrap(x)`, so that the runtime can test
-  // `hasOwn.call(value, "__await")` to determine if the yielded value is
-  // meant to be awaited.
-  exports.awrap = function(arg) {
-    return { __await: arg };
-  };
-  function AsyncIterator(generator, PromiseImpl) {
-    function invoke(method, arg, resolve, reject) {
-      var record = tryCatch(generator[method], generator, arg);
-      if (record.type === "throw") {
-        reject(record.arg);
-      } else {
-        var result = record.arg;
-        var value = result.value;
-        if (value &&
-            typeof value === "object" &&
-            hasOwn.call(value, "__await")) {
-          return PromiseImpl.resolve(value.__await).then(function(value) {
-            invoke("next", value, resolve, reject);
-          }, function(err) {
-            invoke("throw", err, resolve, reject);
-          });
-        }
-        return PromiseImpl.resolve(value).then(function(unwrapped) {
-          // When a yielded Promise is resolved, its final value becomes
-          // the .value of the Promise<{value,done}> result for the
-          // current iteration.
-          result.value = unwrapped;
-          resolve(result);
-        }, function(error) {
-          // If a rejected Promise was yielded, throw the rejection back
-          // into the async generator function so it can be handled there.
-          return invoke("throw", error, resolve, reject);
-        });
-      }
-    }
-    var previousPromise;
-    function enqueue(method, arg) {
-      function callInvokeWithMethodAndArg() {
-        return new PromiseImpl(function(resolve, reject) {
-          invoke(method, arg, resolve, reject);
-        });
-      }
-      return previousPromise =
-        // If enqueue has been called before, then we want to wait until
-        // all previous Promises have been resolved before calling invoke,
-        // so that results are always delivered in the correct order. If
-        // enqueue has not been called before, then it is important to
-        // call invoke immediately, without waiting on a callback to fire,
-        // so that the async generator function has the opportunity to do
-        // any necessary setup in a predictable way. This predictability
-        // is why the Promise constructor synchronously invokes its
-        // executor callback, and why async functions synchronously
-        // execute code before the first await. Since we implement simple
-        // async functions in terms of async generators, it is especially
-        // important to get this right, even though it requires care.
-        previousPromise ? previousPromise.then(
-          callInvokeWithMethodAndArg,
-          // Avoid propagating failures to Promises returned by later
-          // invocations of the iterator.
-          callInvokeWithMethodAndArg
-        ) : callInvokeWithMethodAndArg();
-    }
-    // Define the unified helper method that is used to implement .next,
-    // .throw, and .return (see defineIteratorMethods).
-    this._invoke = enqueue;
-  }
-  defineIteratorMethods(AsyncIterator.prototype);
-  AsyncIterator.prototype[asyncIteratorSymbol] = function () {
-    return this;
-  };
-  exports.AsyncIterator = AsyncIterator;
-  // Note that simple async functions are implemented on top of
-  // AsyncIterator objects; they just return a Promise for the value of
-  // the final result produced by the iterator.
-  exports.async = function(innerFn, outerFn, self, tryLocsList, PromiseImpl) {
-    if (PromiseImpl === void 0) PromiseImpl = Promise;
-    var iter = new AsyncIterator(
-      wrap(innerFn, outerFn, self, tryLocsList),
-      PromiseImpl
-    );
-    return exports.isGeneratorFunction(outerFn)
-      ? iter // If outerFn is a generator, return the full iterator.
-      : iter.next().then(function(result) {
-          return result.done ? result.value : iter.next();
-        });
-  };
-  function makeInvokeMethod(innerFn, self, context) {
-    var state = GenStateSuspendedStart;
-    return function invoke(method, arg) {
-      if (state === GenStateExecuting) {
-        throw new Error("Generator is already running");
-      }
-      if (state === GenStateCompleted) {
-        if (method === "throw") {
-          throw arg;
-        }
-        // Be forgiving, per 25.3.3.3.3 of the spec:
-        // https://people.mozilla.org/~jorendorff/es6-draft.html#sec-generatorresume
-        return doneResult();
-      }
-      context.method = method;
-      context.arg = arg;
-      while (true) {
-        var delegate = context.delegate;
-        if (delegate) {
-          var delegateResult = maybeInvokeDelegate(delegate, context);
-          if (delegateResult) {
-            if (delegateResult === ContinueSentinel) continue;
-            return delegateResult;
-          }
-        }
-        if (context.method === "next") {
-          // Setting context._sent for legacy support of Babel's
-          // function.sent implementation.
-          context.sent = context._sent = context.arg;
-        } else if (context.method === "throw") {
-          if (state === GenStateSuspendedStart) {
-            state = GenStateCompleted;
-            throw context.arg;
-          }
-          context.dispatchException(context.arg);
-        } else if (context.method === "return") {
-          context.abrupt("return", context.arg);
-        }
-        state = GenStateExecuting;
-        var record = tryCatch(innerFn, self, context);
-        if (record.type === "normal") {
-          // If an exception is thrown from innerFn, we leave state ===
-          // GenStateExecuting and loop back for another invocation.
-          state = context.done
-            ? GenStateCompleted
-            : GenStateSuspendedYield;
-          if (record.arg === ContinueSentinel) {
-            continue;
-          }
-          return {
-            value: record.arg,
-            done: context.done
-          };
-        } else if (record.type === "throw") {
-          state = GenStateCompleted;
-          // Dispatch the exception by looping back around to the
-          // context.dispatchException(context.arg) call above.
-          context.method = "throw";
-          context.arg = record.arg;
-        }
-      }
-    };
-  }
-  // Call delegate.iterator[context.method](context.arg) and handle the
-  // result, either by returning a { value, done } result from the
-  // delegate iterator, or by modifying context.method and context.arg,
-  // setting context.delegate to null, and returning the ContinueSentinel.
-  function maybeInvokeDelegate(delegate, context) {
-    var method = delegate.iterator[context.method];
-    if (method === undefined$1) {
-      // A .throw or .return when the delegate iterator has no .throw
-      // method always terminates the yield* loop.
-      context.delegate = null;
-      if (context.method === "throw") {
-        // Note: ["return"] must be used for ES3 parsing compatibility.
-        if (delegate.iterator["return"]) {
-          // If the delegate iterator has a return method, give it a
-          // chance to clean up.
-          context.method = "return";
-          context.arg = undefined$1;
-          maybeInvokeDelegate(delegate, context);
-          if (context.method === "throw") {
-            // If maybeInvokeDelegate(context) changed context.method from
-            // "return" to "throw", let that override the TypeError below.
-            return ContinueSentinel;
-          }
-        }
-        context.method = "throw";
-        context.arg = new TypeError(
-          "The iterator does not provide a 'throw' method");
-      }
-      return ContinueSentinel;
-    }
-    var record = tryCatch(method, delegate.iterator, context.arg);
-    if (record.type === "throw") {
-      context.method = "throw";
-      context.arg = record.arg;
-      context.delegate = null;
-      return ContinueSentinel;
-    }
-    var info = record.arg;
-    if (! info) {
-      context.method = "throw";
-      context.arg = new TypeError("iterator result is not an object");
-      context.delegate = null;
-      return ContinueSentinel;
-    }
-    if (info.done) {
-      // Assign the result of the finished delegate to the temporary
-      // variable specified by delegate.resultName (see delegateYield).
-      context[delegate.resultName] = info.value;
-      // Resume execution at the desired location (see delegateYield).
-      context.next = delegate.nextLoc;
-      // If context.method was "throw" but the delegate handled the
-      // exception, let the outer generator proceed normally. If
-      // context.method was "next", forget context.arg since it has been
-      // "consumed" by the delegate iterator. If context.method was
-      // "return", allow the original .return call to continue in the
-      // outer generator.
-      if (context.method !== "return") {
-        context.method = "next";
-        context.arg = undefined$1;
-      }
-    } else {
-      // Re-yield the result returned by the delegate method.
-      return info;
-    }
-    // The delegate iterator is finished, so forget it and continue with
-    // the outer generator.
-    context.delegate = null;
-    return ContinueSentinel;
-  }
-  // Define Generator.prototype.{next,throw,return} in terms of the
-  // unified ._invoke helper method.
-  defineIteratorMethods(Gp);
-  define(Gp, toStringTagSymbol, "Generator");
-  // A Generator should always return itself as the iterator object when the
-  // @@iterator function is called on it. Some browsers' implementations of the
-  // iterator prototype chain incorrectly implement this, causing the Generator
-  // object to not be returned from this call. This ensures that doesn't happen.
-  // See https://github.com/facebook/regenerator/issues/274 for more details.
-  Gp[iteratorSymbol] = function() {
-    return this;
-  };
-  Gp.toString = function() {
-    return "[object Generator]";
-  };
-  function pushTryEntry(locs) {
-    var entry = { tryLoc: locs[0] };
-    if (1 in locs) {
-      entry.catchLoc = locs[1];
-    }
-    if (2 in locs) {
-      entry.finallyLoc = locs[2];
-      entry.afterLoc = locs[3];
-    }
-    this.tryEntries.push(entry);
-  }
-  function resetTryEntry(entry) {
-    var record = entry.completion || {};
-    record.type = "normal";
-    delete record.arg;
-    entry.completion = record;
-  }
-  function Context(tryLocsList) {
-    // The root entry object (effectively a try statement without a catch
-    // or a finally block) gives us a place to store values thrown from
-    // locations where there is no enclosing try statement.
-    this.tryEntries = [{ tryLoc: "root" }];
-    tryLocsList.forEach(pushTryEntry, this);
-    this.reset(true);
-  }
-  exports.keys = function(object) {
-    var keys = [];
-    for (var key in object) {
-      keys.push(key);
-    }
-    keys.reverse();
-    // Rather than returning an object with a next method, we keep
-    // things simple and return the next function itself.
-    return function next() {
-      while (keys.length) {
-        var key = keys.pop();
-        if (key in object) {
-          next.value = key;
-          next.done = false;
-          return next;
-        }
-      }
-      // To avoid creating an additional object, we just hang the .value
-      // and .done properties off the next function object itself. This
-      // also ensures that the minifier will not anonymize the function.
-      next.done = true;
-      return next;
-    };
-  };
-  function values(iterable) {
-    if (iterable) {
-      var iteratorMethod = iterable[iteratorSymbol];
-      if (iteratorMethod) {
-        return iteratorMethod.call(iterable);
-      }
-      if (typeof iterable.next === "function") {
-        return iterable;
-      }
-      if (!isNaN(iterable.length)) {
-        var i = -1, next = function next() {
-          while (++i < iterable.length) {
-            if (hasOwn.call(iterable, i)) {
-              next.value = iterable[i];
-              next.done = false;
-              return next;
-            }
-          }
-          next.value = undefined$1;
-          next.done = true;
-          return next;
-        };
-        return next.next = next;
-      }
-    }
-    // Return an iterator with no values.
-    return { next: doneResult };
-  }
-  exports.values = values;
-  function doneResult() {
-    return { value: undefined$1, done: true };
-  }
-  Context.prototype = {
-    constructor: Context,
-    reset: function(skipTempReset) {
-      this.prev = 0;
-      this.next = 0;
-      // Resetting context._sent for legacy support of Babel's
-      // function.sent implementation.
-      this.sent = this._sent = undefined$1;
-      this.done = false;
-      this.delegate = null;
-      this.method = "next";
-      this.arg = undefined$1;
-      this.tryEntries.forEach(resetTryEntry);
-      if (!skipTempReset) {
-        for (var name in this) {
-          // Not sure about the optimal order of these conditions:
-          if (name.charAt(0) === "t" &&
-              hasOwn.call(this, name) &&
-              !isNaN(+name.slice(1))) {
-            this[name] = undefined$1;
-          }
-        }
-      }
-    },
-    stop: function() {
-      this.done = true;
-      var rootEntry = this.tryEntries[0];
-      var rootRecord = rootEntry.completion;
-      if (rootRecord.type === "throw") {
-        throw rootRecord.arg;
-      }
-      return this.rval;
-    },
-    dispatchException: function(exception) {
-      if (this.done) {
-        throw exception;
-      }
-      var context = this;
-      function handle(loc, caught) {
-        record.type = "throw";
-        record.arg = exception;
-        context.next = loc;
-        if (caught) {
-          // If the dispatched exception was caught by a catch block,
-          // then let that catch block handle the exception normally.
-          context.method = "next";
-          context.arg = undefined$1;
-        }
-        return !! caught;
-      }
-      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-        var entry = this.tryEntries[i];
-        var record = entry.completion;
-        if (entry.tryLoc === "root") {
-          // Exception thrown outside of any try block that could handle
-          // it, so set the completion value of the entire function to
-          // throw the exception.
-          return handle("end");
-        }
-        if (entry.tryLoc <= this.prev) {
-          var hasCatch = hasOwn.call(entry, "catchLoc");
-          var hasFinally = hasOwn.call(entry, "finallyLoc");
-          if (hasCatch && hasFinally) {
-            if (this.prev < entry.catchLoc) {
-              return handle(entry.catchLoc, true);
-            } else if (this.prev < entry.finallyLoc) {
-              return handle(entry.finallyLoc);
-            }
-          } else if (hasCatch) {
-            if (this.prev < entry.catchLoc) {
-              return handle(entry.catchLoc, true);
-            }
-          } else if (hasFinally) {
-            if (this.prev < entry.finallyLoc) {
-              return handle(entry.finallyLoc);
-            }
-          } else {
-            throw new Error("try statement without catch or finally");
-          }
-        }
-      }
-    },
-    abrupt: function(type, arg) {
-      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-        var entry = this.tryEntries[i];
-        if (entry.tryLoc <= this.prev &&
-            hasOwn.call(entry, "finallyLoc") &&
-            this.prev < entry.finallyLoc) {
-          var finallyEntry = entry;
-          break;
-        }
-      }
-      if (finallyEntry &&
-          (type === "break" ||
-           type === "continue") &&
-          finallyEntry.tryLoc <= arg &&
-          arg <= finallyEntry.finallyLoc) {
-        // Ignore the finally entry if control is not jumping to a
-        // location outside the try/catch block.
-        finallyEntry = null;
-      }
-      var record = finallyEntry ? finallyEntry.completion : {};
-      record.type = type;
-      record.arg = arg;
-      if (finallyEntry) {
-        this.method = "next";
-        this.next = finallyEntry.finallyLoc;
-        return ContinueSentinel;
-      }
-      return this.complete(record);
-    },
-    complete: function(record, afterLoc) {
-      if (record.type === "throw") {
-        throw record.arg;
-      }
-      if (record.type === "break" ||
-          record.type === "continue") {
-        this.next = record.arg;
-      } else if (record.type === "return") {
-        this.rval = this.arg = record.arg;
-        this.method = "return";
-        this.next = "end";
-      } else if (record.type === "normal" && afterLoc) {
-        this.next = afterLoc;
-      }
-      return ContinueSentinel;
-    },
-    finish: function(finallyLoc) {
-      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-        var entry = this.tryEntries[i];
-        if (entry.finallyLoc === finallyLoc) {
-          this.complete(entry.completion, entry.afterLoc);
-          resetTryEntry(entry);
-          return ContinueSentinel;
-        }
-      }
-    },
-    "catch": function(tryLoc) {
-      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-        var entry = this.tryEntries[i];
-        if (entry.tryLoc === tryLoc) {
-          var record = entry.completion;
-          if (record.type === "throw") {
-            var thrown = record.arg;
-            resetTryEntry(entry);
-          }
-          return thrown;
-        }
-      }
-      // The context.catch method must only be called with a location
-      // argument that corresponds to a known catch block.
-      throw new Error("illegal catch attempt");
-    },
-    delegateYield: function(iterable, resultName, nextLoc) {
-      this.delegate = {
-        iterator: values(iterable),
-        resultName: resultName,
-        nextLoc: nextLoc
-      };
-      if (this.method === "next") {
-        // Deliberately forget the last sent value so that we don't
-        // accidentally pass it on to the delegate.
-        this.arg = undefined$1;
-      }
-      return ContinueSentinel;
-    }
-  };
-  // Regardless of whether this script is executing as a CommonJS module
-  // or not, return the runtime object so that we can declare the variable
-  // regeneratorRuntime in the outer scope, which allows this module to be
-  // injected easily by `bin/regenerator --include-runtime script.js`.
-  return exports;
-}(
-  // If this script is executing as a CommonJS module, use module.exports
-  // as the regeneratorRuntime namespace. Otherwise create a new empty
-  // object. Either way, the resulting object will be used to initialize
-  // the regeneratorRuntime variable at the top of this file.
-   module.exports
-));
-try {
-  regeneratorRuntime = runtime;
-} catch (accidentalStrictMode) {
-  // This module should not be running in strict mode, so the above
-  // assignment should always work unless something is misconfigured. Just
-  // in case runtime.js accidentally runs in strict mode, we can escape
-  // strict mode using a global Function call. This could conceivably fail
-  // if a Content Security Policy forbids using Function, but in that case
-  // the proper solution is to fix the accidental strict mode problem. If
-  // you've misconfigured your bundler to force strict mode and applied a
-  // CSP to forbid Function, and you're not willing to fix either of those
-  // problems, please detail your unique predicament in a GitHub issue.
-  Function("r", "regeneratorRuntime = r")(runtime);
-}
-});
-/**
- * Utilities for fetching specific types
- */
-function fetchJson(_x) {
-  return _fetchJson.apply(this, arguments);
-}
-function _fetchJson() {
-  _fetchJson = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(url) {
-    var response;
-    return runtime_1.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            _context.next = 2;
-            return fetch(url);
-          case 2:
-            response = _context.sent;
-            if (response.ok) {
-              _context.next = 5;
-              break;
-            }
-            throw new Error('Response not Ok for URL: ' + url);
-          case 5:
-            _context.next = 7;
-            return response.json();
-          case 7:
-            return _context.abrupt("return", _context.sent);
-          case 8:
-          case "end":
-            return _context.stop();
-        }
-      }
-    }, _callee);
-  }));
-  return _fetchJson.apply(this, arguments);
-}
-var HtmlReaderContent = function HtmlReaderContent() {
-  return createElement("div", {
-    id: "D2Reader-Container"
-  }, createElement("main", {
-    tabIndex: -1,
-    id: "iframe-wrapper",
-    style: {
-      height: "calc(100vh - " + HEADER_HEIGHT + "px)"
-    }
-  }, createElement("div", {
-    id: "reader-loading",
-    className: "loading"
-  }), createElement("div", {
-    id: "reader-error",
-    className: "error"
-  })));
-};
-function useMeasure() {
-  // this is a little trick to get a reference to an HTML element. Using useRef wouldn't
-  // work because we actually need rerenders when it changes, to update the useLayoutEffect
-  var _React$useState = useState(null),
-      element = _React$useState[0],
-      ref = _React$useState[1];
-  var _React$useState2 = useState(null),
-      rect = _React$useState2[0],
-      setRect = _React$useState2[1];
-  var observer = useMemo(function () {
-    return new window.ResizeObserver(function (entries) {
-      if (entries[0]) {
-        var _entries$0$contentRec = entries[0].contentRect,
-            x = _entries$0$contentRec.x,
-            y = _entries$0$contentRec.y,
-            width = _entries$0$contentRec.width,
-            height = _entries$0$contentRec.height,
-            top = _entries$0$contentRec.top,
-            left = _entries$0$contentRec.left,
-            bottom = _entries$0$contentRec.bottom,
-            right = _entries$0$contentRec.right;
-        setRect({
-          x: x,
-          y: y,
-          width: width,
-          height: height,
-          top: top,
-          left: left,
-          bottom: bottom,
-          right: right
-        });
-      }
-    });
-  }, []);
-  useLayoutEffect(function () {
-    if (!element) return;
-    observer.observe(element);
-    return function () {
-      observer.disconnect();
-    };
-  }, [element, observer]);
-  return [ref, rect];
-}
-pdfjs.GlobalWorkerOptions.workerSrc = "pdf.worker.min.js";
-var IFRAME_WRAPPER_ID = 'iframe-wrapper';
-function pdfReducer(state, action) {
-  switch (action.type) {
-    /**
-     * Cleares the current resource and sets the current index, which will cause
-     * the useEffect hook to load a new resource.
-     */
-    case 'SET_CURRENT_RESOURCE':
-      return _extends({}, state, {
-        resource: null,
-        resourceIndex: action.index,
-        pageNumber: action.shouldNavigateToEnd ? -1 : 1,
-        numPages: null
-      });
-    case 'RESOURCE_FETCH_SUCCESS':
-      return _extends({}, state, {
-        resource: action.resource
-      });
-    // called when the resource has been parsed by react-pdf
-    // and we know the number of pages
-    case 'PDF_PARSED':
-      return _extends({}, state, {
-        numPages: action.numPages,
-        // if the state.pageNumber is -1, we know to navigate to the
-        // end of the PDF that was just parsed
-        pageNumber: state.pageNumber === -1 ? action.numPages : state.pageNumber
-      });
-    // Navigates to page in resource
-    case 'NAVIGATE_PAGE':
-      return _extends({}, state, {
-        pageNumber: action.pageNum
-      });
-    case 'SET_COLOR_MODE':
-      return _extends({}, state, {
-        colorMode: action.mode
-      });
-    case 'SET_SCROLL':
-      return _extends({}, state, {
-        isScrolling: action.isScrolling
-      });
-    case 'SET_SCALE':
-      return _extends({}, state, {
-        scale: action.scale
-      });
-    case 'PAGE_LOAD_SUCCESS':
-      return _extends({}, state, {
-        pdfWidth: action.width,
-        pdfHeight: action.height,
-        pageWidth: action.width,
-        pageHeight: action.height
-      });
-    case 'RESIZE_PAGE':
-      return _extends({}, state, {
-        pageWidth: action.width,
-        pageHeight: action.height
-      });
-  }
-}
-var getResourceUrl = function getResourceUrl(index, readingOrder) {
-  if (!readingOrder || !readingOrder.length) {
-    throw new Error('A manifest has been returned, but has no reading order');
-  } // If it has no children, return the link href
-  return readingOrder[index].href;
-};
-var loadResource = /*#__PURE__*/function () {
-  var _ref = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(resourceUrl, proxyUrl) {
-    var resource, response, array;
-    return runtime_1.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            // Generate the resource URL using the proxy
-            resource = proxyUrl + encodeURI(resourceUrl);
-            _context.next = 3;
-            return fetch(resource, {
-              mode: 'cors'
-            });
-          case 3:
-            response = _context.sent;
-            _context.t0 = Uint8Array;
-            _context.next = 7;
-            return response.arrayBuffer();
-          case 7:
-            _context.t1 = _context.sent;
-            array = new _context.t0(_context.t1);
-            if (response.ok) {
-              _context.next = 11;
-              break;
-            }
-            throw new Error('Response not Ok for URL: ' + resource);
-          case 11:
-            return _context.abrupt("return", array);
-          case 12:
-          case "end":
-            return _context.stop();
-        }
-      }
-    }, _callee);
-  }));
-  return function loadResource(_x, _x2) {
-    return _ref.apply(this, arguments);
-  };
-}();
-/**
- * The PDF reader
- *
- * The PDF reader loads resources in two stages:  First, it fetches the PDF resource as an Uint8Array
- * Then, it passes this array into the <Document> object, which loads the PDF inside an iframe
- *
- * @param args T
- * @returns
- */
-function usePdfReader(args) {
-  var _ref2 = args != null ? args : {},
-      webpubManifestUrl = _ref2.webpubManifestUrl,
-      manifest = _ref2.manifest,
-      proxyUrl = _ref2.proxyUrl;
-  var _React$useReducer = useReducer(pdfReducer, {
-    colorMode: 'day',
-    isScrolling: false,
-    fontSize: 16,
-    fontFamily: 'sans-serif',
-    resourceIndex: 0,
-    resource: null,
-    pageNumber: 1,
-    numPages: null,
-    currentTocUrl: null,
-    scale: 1,
-    pdfWidth: 0,
-    pdfHeight: 0,
-    pageHeight: undefined,
-    pageWidth: undefined
-  }),
-      state = _React$useReducer[0],
-      dispatch = _React$useReducer[1]; // state we can derive from the state above
-  var isFetching = !state.resource;
-  var isParsed = typeof state.numPages === 'number';
-  var _useMeasure = useMeasure(),
-      containerRef = _useMeasure[0],
-      containerSize = _useMeasure[1]; // Wrap Page component so that we can pass it styles
-  var ChakraPage = chakra(Page, {
-    shouldForwardProp: function shouldForwardProp$1(prop) {
-      // Definitely forward width and height
-      if (['width', 'height', 'scale'].includes(prop)) return true; // don't forward the rest of Chakra's props
-      var isChakraProp = !shouldForwardProp(prop);
-      if (isChakraProp) return false; // else, only forward `sample` prop
-      return true;
-    },
-    baseStyle: {
-      outline: '1px',
-      outlineColor: 'ui.gray.light-cool'
-    }
-  });
-  /**
-   * Load the current resource and set it in state,
-   * and reload whenever it changes (via navigation)
-   */
-  useEffect(function () {
-    // bail out if there is not manifest passed in,
-    // that indicates that this format is inactive
-    if (!manifest) return; // throw an error on a badly formed manifest
-    if (!manifest.readingOrder || !manifest.readingOrder.length) {
-      throw new Error('Manifest has no Reading Order');
-    }
-    var resourceUrl = getResourceUrl(state.resourceIndex, manifest.readingOrder);
-    loadResource(resourceUrl, proxyUrl).then(function (data) {
-      dispatch({
-        type: 'RESOURCE_FETCH_SUCCESS',
-        resource: {
-          data: data
-        }
-      });
-    });
-  }, [state.resourceIndex, manifest, proxyUrl]);
-  /**
-   * calculate the height or width of the pdf page in paginated mode.
-   *  - if the page's aspect ratio is taller than the container's, we will constrain
-   *    the page to the height of the container.
-   *  - if the page's aspect ratio is wider than the container's, we will constrain
-   *    the page to the width of the container
-   */
-  var resizePage = useCallback(function (pdfWidth, pdfHeight, containerSize) {
-    var wRatio = pdfWidth / containerSize.width;
-    var hRatio = pdfHeight / containerSize.height;
-    var fitHorizontal = wRatio > hRatio;
-    var width = fitHorizontal ? Math.round(containerSize.width) : undefined;
-    var height = !fitHorizontal ? Math.round(containerSize.height) : undefined;
-    dispatch({
-      type: 'RESIZE_PAGE',
-      width: width,
-      height: height
-    });
-  }, []); //TODO: Somehow, this window size updates when height
-  useEffect(function () {
-    if (containerSize) {
-      resizePage(state.pdfWidth, state.pdfHeight, containerSize);
-    }
-  }, [containerSize, state.pdfWidth, state.pdfHeight, resizePage]); // prev and next page functions
-  var goForward = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2() {
-    var _manifest$readingOrde;
-    var nextIndex;
-    return runtime_1.wrap(function _callee2$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            if (state.numPages) {
-              _context2.next = 2;
-              break;
-            }
-            return _context2.abrupt("return");
-          case 2:
-            if (state.pageNumber < state.numPages && !state.isScrolling) {
-              dispatch({
-                type: 'NAVIGATE_PAGE',
-                pageNum: state.pageNumber + 1
-              });
-            } else if (manifest && manifest.readingOrder && state.resourceIndex < (manifest == null ? void 0 : (_manifest$readingOrde = manifest.readingOrder) == null ? void 0 : _manifest$readingOrde.length) - 1) {
-              nextIndex = state.resourceIndex + 1;
-              dispatch({
-                type: 'SET_CURRENT_RESOURCE',
-                index: nextIndex,
-                shouldNavigateToEnd: false
-              });
-            } // Do nothing if it's at the last page of the last resource
-          case 3:
-          case "end":
-            return _context2.stop();
-        }
-      }
-    }, _callee2);
-  })), [manifest, state.isScrolling, state.numPages, state.pageNumber, state.resourceIndex]);
-  var goBackward = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3() {
-    var nextIndex;
-    return runtime_1.wrap(function _callee3$(_context3) {
-      while (1) {
-        switch (_context3.prev = _context3.next) {
-          case 0:
-            if (isParsed) {
-              _context3.next = 2;
-              break;
-            }
-            return _context3.abrupt("return");
-          case 2:
-            if (state.pageNumber > 1) {
-              dispatch({
-                type: 'NAVIGATE_PAGE',
-                pageNum: state.pageNumber - 1
-              });
-            } else if (manifest != null && manifest.readingOrder && state.resourceIndex > 0) {
-              nextIndex = state.resourceIndex - 1;
-              dispatch({
-                type: 'SET_CURRENT_RESOURCE',
-                index: nextIndex,
-                shouldNavigateToEnd: !state.isScrolling
-              });
-            }
-          case 3:
-          case "end":
-            return _context3.stop();
-        }
-      }
-    }, _callee3);
-  })), [manifest, isParsed, state.isScrolling, state.pageNumber, state.resourceIndex]);
-  /**
-   * These ones don't make sense in the PDF case I dont think. I'm still
-   * deciding how we will separate the types of Navigators and States, so
-   * for now just pass dummies through.
-   */
-  var setColorMode = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee4() {
-    return runtime_1.wrap(function _callee4$(_context4) {
-      while (1) {
-        switch (_context4.prev = _context4.next) {
-          case 0:
-            console.log('unimplemented');
-          case 1:
-          case "end":
-            return _context4.stop();
-        }
-      }
-    }, _callee4);
-  })), []);
-  var setScroll = useCallback( /*#__PURE__*/function () {
-    var _ref6 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee5(val) {
-      var isScrolling;
-      return runtime_1.wrap(function _callee5$(_context5) {
-        while (1) {
-          switch (_context5.prev = _context5.next) {
-            case 0:
-              isScrolling = val === 'scrolling';
-              dispatch({
-                type: 'SET_SCROLL',
-                isScrolling: isScrolling
-              });
-            case 2:
-            case "end":
-              return _context5.stop();
-          }
-        }
-      }, _callee5);
-    }));
-    return function (_x3) {
-      return _ref6.apply(this, arguments);
-    };
-  }(), []);
-  /**
-   * TODO: Change this button into a different "scale" button
-   */
-  var increaseFontSize = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee6() {
-    return runtime_1.wrap(function _callee6$(_context6) {
-      while (1) {
-        switch (_context6.prev = _context6.next) {
-          case 0:
-            dispatch({
-              type: 'SET_SCALE',
-              scale: state.scale + 0.1
-            });
-          case 1:
-          case "end":
-            return _context6.stop();
-        }
-      }
-    }, _callee6);
-  })), [state.scale]);
-  var decreaseFontSize = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee7() {
-    return runtime_1.wrap(function _callee7$(_context7) {
-      while (1) {
-        switch (_context7.prev = _context7.next) {
-          case 0:
-            dispatch({
-              type: 'SET_SCALE',
-              scale: state.scale - 0.1
-            });
-          case 1:
-          case "end":
-            return _context7.stop();
-        }
-      }
-    }, _callee7);
-  })), [state.scale]);
-  var setFontFamily = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee8() {
-    return runtime_1.wrap(function _callee8$(_context8) {
-      while (1) {
-        switch (_context8.prev = _context8.next) {
-          case 0:
-            console.log('unimplemented');
-          case 1:
-          case "end":
-            return _context8.stop();
-        }
-      }
-    }, _callee8);
-  })), []);
-  var goToPage = useCallback( /*#__PURE__*/function () {
-    var _ref10 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee9(href) {
-      var getIndexFromHref;
-      return runtime_1.wrap(function _callee9$(_context9) {
-        while (1) {
-          switch (_context9.prev = _context9.next) {
-            case 0:
-              getIndexFromHref = function getIndexFromHref(href) {
-                var _manifest$readingOrde2;
-                var index = manifest == null ? void 0 : (_manifest$readingOrde2 = manifest.readingOrder) == null ? void 0 : _manifest$readingOrde2.findIndex(function (link) {
-                  return link.href === href;
-                });
-                if (!index) {
-                  throw new Error('Cannot find resource in readingOrder');
-                }
-                return index;
-              };
-              dispatch({
-                type: 'SET_CURRENT_RESOURCE',
-                index: getIndexFromHref(href),
-                shouldNavigateToEnd: false
-              });
-            case 2:
-            case "end":
-              return _context9.stop();
-          }
-        }
-      }, _callee9);
-    }));
-    return function (_x4) {
-      return _ref10.apply(this, arguments);
-    };
-  }(), [manifest == null ? void 0 : manifest.readingOrder]); // this format is inactive, return null
-  if (!webpubManifestUrl || !manifest) return null;
-  if (isFetching) {
-    // The Reader is fetching a PDF resource
-    return {
-      type: 'PDF',
-      isLoading: false,
-      content: createElement(Flex, {
-        as: "main",
-        tabIndex: -1,
-        id: "iframe-wrapper",
-        zIndex: "base",
-        alignItems: "center",
-        justifyContent: "center",
-        flex: "1 0 auto"
-      }, "PDF is loading"),
-      state: state,
-      manifest: manifest,
-      navigator: {
-        goForward: goForward,
-        goBackward: goBackward,
-        increaseFontSize: increaseFontSize,
-        decreaseFontSize: decreaseFontSize,
-        setFontFamily: setFontFamily,
-        setColorMode: setColorMode,
-        setScroll: setScroll,
-        goToPage: goToPage
-      }
-    };
-  }
-  function onDocumentLoadSuccess(_ref11) {
-    var numPages = _ref11.numPages;
-    dispatch({
-      type: 'PDF_PARSED',
-      numPages: numPages
-    });
-  }
-  function onRenderSuccess(page) {
-    if (!page.height || !page.width || !containerSize) throw new Error('Error rendering page from Reader');
-    if (Math.round(page.height) !== state.pdfHeight || Math.round(page.width) !== state.pdfWidth) {
-      dispatch({
-        type: 'PAGE_LOAD_SUCCESS',
-        height: Math.round(page.height),
-        width: Math.round(page.width)
-      });
-      resizePage(page.width, page.height, containerSize);
-    }
-  } // the reader is active but loading a page
-  return {
-    type: 'PDF',
-    isLoading: false,
-    content: createElement(Flex, {
-      as: "main",
-      zIndex: "base",
-      flex: "1 0 auto",
-      justifyContent: "center",
-      alignItems: "center",
-      tabIndex: -1,
-      id: IFRAME_WRAPPER_ID,
-      ref: containerRef
-    }, createElement(Document, {
-      file: state.resource,
-      onLoadSuccess: onDocumentLoadSuccess
-    }, isParsed && state.numPages && createElement(Fragment, null, state.isScrolling && Array.from(new Array(state.numPages), function (_, index) {
-      return createElement(ChakraPage, {
-        key: "page_" + (index + 1),
-        width: containerSize == null ? void 0 : containerSize.width,
-        scale: state.scale,
-        pageNumber: index + 1
-      });
-    }), !state.isScrolling && createElement(ChakraPage, {
-      pageNumber: state.pageNumber,
-      onLoadSuccess: onRenderSuccess,
-      width: state.pageWidth,
-      height: state.pageHeight,
-      scale: state.scale,
-      loading: createElement(Fragment, null)
-    })))),
-    state: state,
-    manifest: manifest,
-    navigator: {
-      goForward: goForward,
-      goBackward: goBackward,
-      setColorMode: setColorMode,
-      setScroll: setScroll,
-      increaseFontSize: increaseFontSize,
-      decreaseFontSize: decreaseFontSize,
-      setFontFamily: setFontFamily,
-      goToPage: goToPage
-    }
-  };
-}
-var origin = window.location.origin;
-var injectables = [{
-  type: 'style',
-  url: origin + "/css/ReadiumCSS-before.css",
-  r2before: true
-}, {
-  type: 'style',
-  url: origin + "/css/ReadiumCSS-default.css",
-  r2default: true
-}, {
-  type: 'style',
-  url: origin + "/css/ReadiumCSS-after.css",
-  r2after: true
-}, {
-  type: 'style',
-  url: origin + "/fonts/opendyslexic/opendyslexic.css",
-  fontFamily: 'opendyslexic'
-}];
-function htmlReducer(state, action) {
-  switch (action.type) {
-    case 'SET_READER':
-      {
-        var _r2FamilyToFamily$set;
-        // set all the initial settings taken from the reader
-        var settings = action.reader.currentSettings;
-        return {
-          reader: action.reader,
-          isScrolling: settings.verticalScroll,
-          colorMode: getColorMode(settings.appearance),
-          fontSize: settings.fontSize,
-          fontFamily: (_r2FamilyToFamily$set = r2FamilyToFamily[settings.fontFamily]) != null ? _r2FamilyToFamily$set : 'publisher',
-          currentTocUrl: action.reader.mostRecentNavigatedTocItem()
-        };
-      }
-    case 'SET_COLOR_MODE':
-      return _extends({}, state, {
-        colorMode: action.mode
-      });
-    case 'SET_SCROLL':
-      return _extends({}, state, {
-        isScrolling: action.isScrolling
-      });
-    case 'SET_FONT_SIZE':
-      return _extends({}, state, {
-        fontSize: action.size
-      });
-    case 'SET_FONT_FAMILY':
-      return _extends({}, state, {
-        fontFamily: action.family
-      });
-    case 'SET_CURRENT_TOC_URL':
-      return _extends({}, state, {
-        currentTocUrl: action.currentTocUrl
-      });
-  }
-}
-var FONT_SIZE_STEP = 4;
-function useHtmlReader(args) {
-  var _ref = args != null ? args : {},
-      webpubManifestUrl = _ref.webpubManifestUrl,
-      manifest = _ref.manifest,
-      getContent = _ref.getContent;
-  var _React$useReducer = React__default.useReducer(htmlReducer, {
-    colorMode: 'day',
-    isScrolling: false,
-    fontSize: 16,
-    fontFamily: 'sans-serif',
-    reader: undefined,
-    currentTocUrl: null
-  }),
-      state = _React$useReducer[0],
-      dispatch = _React$useReducer[1];
-  var reader = state.reader,
-      fontSize = state.fontSize; // initialize the reader
-  React__default.useEffect(function () {
-    // bail out if there is no webpubManifestUrl. It indicates this format is not being used.
-    if (!webpubManifestUrl) return;
-    var url = new URL(webpubManifestUrl);
-    D2Reader.build({
-      url: url,
-      injectables: injectables,
-      injectablesFixed: [],
-      attributes: {
-        navHeight: HEADER_HEIGHT,
-        margin: 0
-      },
-      api: {
-        getContent: getContent
-      }
-    }).then(function (reader) {
-      dispatch({
-        type: 'SET_READER',
-        reader: reader
-      });
-    });
-  }, [webpubManifestUrl, getContent]); // prev and next page functions
-  var goForward = React__default.useCallback(function () {
-    if (!reader) return;
-    var isLastPage = reader.atEnd();
-    reader.nextPage();
-    if (isLastPage) {
-      dispatch({
-        type: 'SET_CURRENT_TOC_URL',
-        currentTocUrl: reader.mostRecentNavigatedTocItem()
-      });
-    }
-  }, [reader]);
-  var goBackward = React__default.useCallback(function () {
-    if (!reader) return;
-    var isFirstPage = reader.atStart();
-    reader.previousPage();
-    if (isFirstPage) {
-      dispatch({
-        type: 'SET_CURRENT_TOC_URL',
-        currentTocUrl: reader.mostRecentNavigatedTocItem()
-      });
-    }
-  }, [reader]);
-  var setColorMode = React__default.useCallback( /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(mode) {
-      return runtime_1.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              if (reader) {
-                _context.next = 2;
-                break;
-              }
-              return _context.abrupt("return");
-            case 2:
-              dispatch({
-                type: 'SET_COLOR_MODE',
-                mode: mode
-              });
-              _context.next = 5;
-              return reader.applyUserSettings({
-                appearance: mode
-              });
-            case 5:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-    return function (_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }(), [reader]);
-  var setScroll = React__default.useCallback( /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(val) {
-      var isScrolling;
-      return runtime_1.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              isScrolling = val === 'scrolling';
-              _context2.next = 3;
-              return reader == null ? void 0 : reader.scroll(isScrolling);
-            case 3:
-              dispatch({
-                type: 'SET_SCROLL',
-                isScrolling: isScrolling
-              });
-            case 4:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2);
-    }));
-    return function (_x2) {
-      return _ref3.apply(this, arguments);
-    };
-  }(), [reader]);
-  var increaseFontSize = React__default.useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3() {
-    var newSize;
-    return runtime_1.wrap(function _callee3$(_context3) {
-      while (1) {
-        switch (_context3.prev = _context3.next) {
-          case 0:
-            if (reader) {
-              _context3.next = 2;
-              break;
-            }
-            return _context3.abrupt("return");
-          case 2:
-            newSize = fontSize + FONT_SIZE_STEP;
-            _context3.next = 5;
-            return reader.applyUserSettings({
-              fontSize: newSize
-            });
-          case 5:
-            dispatch({
-              type: 'SET_FONT_SIZE',
-              size: newSize
-            });
-          case 6:
-          case "end":
-            return _context3.stop();
-        }
-      }
-    }, _callee3);
-  })), [reader, fontSize]);
-  var decreaseFontSize = React__default.useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee4() {
-    var newSize;
-    return runtime_1.wrap(function _callee4$(_context4) {
-      while (1) {
-        switch (_context4.prev = _context4.next) {
-          case 0:
-            if (reader) {
-              _context4.next = 2;
-              break;
-            }
-            return _context4.abrupt("return");
-          case 2:
-            newSize = fontSize - FONT_SIZE_STEP;
-            _context4.next = 5;
-            return reader.applyUserSettings({
-              fontSize: newSize
-            });
-          case 5:
-            dispatch({
-              type: 'SET_FONT_SIZE',
-              size: newSize
-            });
-          case 6:
-          case "end":
-            return _context4.stop();
-        }
-      }
-    }, _callee4);
-  })), [reader, fontSize]);
-  var setFontFamily = React__default.useCallback( /*#__PURE__*/function () {
-    var _ref6 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee5(family) {
-      var r2Family;
-      return runtime_1.wrap(function _callee5$(_context5) {
-        while (1) {
-          switch (_context5.prev = _context5.next) {
-            case 0:
-              if (reader) {
-                _context5.next = 2;
-                break;
-              }
-              return _context5.abrupt("return");
-            case 2:
-              r2Family = familyToR2Family[family]; // the applyUserSettings type is incorrect. We are supposed to pass in a string.
-              _context5.next = 5;
-              return reader.applyUserSettings({
-                fontFamily: r2Family
-              });
-            case 5:
-              dispatch({
-                type: 'SET_FONT_FAMILY',
-                family: family
-              });
-            case 6:
-            case "end":
-              return _context5.stop();
-          }
-        }
-      }, _callee5);
-    }));
-    return function (_x3) {
-      return _ref6.apply(this, arguments);
-    };
-  }(), [reader]);
-  var goToPage = React__default.useCallback(function (href) {
-    if (!reader) return; // Adding try/catch here because goTo throws a TypeError
-    // if the TOC link you clicked on was the current page..
-    try {
-      reader.goTo({
-        href: href
-      }); // This needs to be fixed, locations should be optional.
-      dispatch({
-        type: 'SET_CURRENT_TOC_URL',
-        currentTocUrl: href
-      });
-    } catch (error) {
-      console.error(error);
-    }
-  }, [reader]);
-  var isLoading = !reader; // this format is inactive, return null
-  if (!webpubManifestUrl || !manifest) return null; // we are initializing the reader
-  if (isLoading) {
-    return {
-      type: null,
-      isLoading: true,
-      content: React__default.createElement(HtmlReaderContent, null),
-      navigator: null,
-      manifest: null,
-      state: null
-    };
-  } // the reader is active
-  return {
-    type: 'HTML',
-    isLoading: false,
-    content: React__default.createElement(HtmlReaderContent, null),
-    state: state,
-    manifest: manifest,
-    navigator: {
-      goForward: goForward,
-      goBackward: goBackward,
-      setColorMode: setColorMode,
-      setScroll: setScroll,
-      increaseFontSize: increaseFontSize,
-      decreaseFontSize: decreaseFontSize,
-      setFontFamily: setFontFamily,
-      goToPage: goToPage
-    }
-  };
-}
-function getColorMode(d2Mode) {
-  switch (d2Mode) {
-    case 'readium-default-on':
-      return 'day';
-    case 'readium-night-on':
-      return 'night';
-    case 'readium-sepia-on':
-      return 'sepia';
-    default:
-      console.error('COLOR MODE SLIPPED THROUG', d2Mode);
-      return 'day';
-  }
-}
-/**
- * We need to map from our family values to R2D2BC's family values.
- */
-var familyToR2Family = {
-  publisher: 'Original',
-  serif: 'serif',
-  'sans-serif': 'sans-serif',
-  'open-dyslexic': 'opendyslexic'
-};
-/**
- * And vice-versa
- */
-var r2FamilyToFamily = {
-  Original: 'publisher',
-  serif: 'serif',
-  'sans-serif': 'sans-serif',
-  opendyslexic: 'open-dyslexic'
-};
-// a webpub pdf collection
-var WebpubPdfConformsTo = 'https://librarysimplified.org/terms/profiles/pdf'; // a webpub of axisnow content
-var AxisNowEpubConformsTo = 'stub/webpub+axisnow';
-function getReaderType(conformsTo) {
-  switch (conformsTo) {
-    case AxisNowEpubConformsTo:
-      return 'HTML';
-    case WebpubPdfConformsTo:
-      return 'PDF';
-    case undefined:
-      // the manifest didn't indicate any conformsTo,
-      // so return our default
-      return 'HTML';
-    case null:
-      // the manifest is still loading, return undefined
-      return undefined;
-  }
-}
-/**
- * The React hook that exposes the main API into the reader. It
- * will determine the type of the webpub, and then use the correct reader
- * for that type.
- */
-function useWebReader(args) {
-  var webpubManifestUrl = args.webpubManifestUrl,
-      getContent = args.getContent,
-      proxyUrl = args.proxyUrl;
-  var _React$useState = React__default.useState(null),
-      manifest = _React$useState[0],
-      setManifest = _React$useState[1];
-  var readerType = getReaderType(manifest ? manifest.metadata.conformsTo : null);
-  /**
-   * Our HTML reader and PDf Reader. Note that we cannot conditionally
-   * call a React hook, so we must _always_ call the hook, but allow for the
-   * case where we call the hook with `undefined`, which tells the hook that
-   * that format is inactive, and it will in turn return the InactiveState.
-   */
-  var htmlReader = useHtmlReader(readerType === 'HTML' && manifest ? {
-    webpubManifestUrl: webpubManifestUrl,
-    manifest: manifest,
-    getContent: getContent
-  } : undefined);
-  var pdfReader = usePdfReader(readerType === 'PDF' && manifest ? {
-    webpubManifestUrl: webpubManifestUrl,
-    manifest: manifest,
-    proxyUrl: proxyUrl
-  } : undefined); // fetch the manifest and set it in state
-  React__default.useEffect(function () {
-    fetchJson(webpubManifestUrl).then(setManifest);
-  }, [webpubManifestUrl]); // first if we are still fetching the manifest, return loading
-  if (manifest === null) {
-    return {
-      isLoading: true,
-      content: React__default.createElement(HtmlReaderContent, null),
-      manifest: null,
-      navigator: null,
-      state: null,
-      type: null
-    };
-  }
-  /**
-   * Return whichever reader is not Inactive (not `null`)
-   */
-  if (htmlReader) {
-    return htmlReader;
-  }
-  if (pdfReader) {
-    return pdfReader;
-  }
-  throw new Error("No reader was initialized for the webpub with url: " + webpubManifestUrl + " and type: " + readerType + ".");
-}
-/**
- * The main React component export.
- */
-var WebReader = function WebReader(_ref) {
-  var webpubManifestUrl = _ref.webpubManifestUrl,
-      proxyUrl = _ref.proxyUrl,
-      getContent = _ref.getContent;
-  var webReader = useWebReader({
-    webpubManifestUrl: webpubManifestUrl,
-    proxyUrl: proxyUrl,
-    getContent: getContent
-  });
-  var content = webReader.content;
-  return React__default.createElement(ManagerUI, Object.assign({}, webReader), content);
-};
-export default WebReader;
-//# sourceMappingURL=web-reader.esm.js.map