@nypl/web-reader 4.1.0 → 4.2.0

package/dist/esm/index.js

@@ -34516,8 +34516,8 @@ var FONT_DETAILS = {
   },
   "sans-serif": {
     heading: "Sans-serif font",
-    body: "Helvetica",
-    token: "sansSerif",
+    body: "Roboto",
+    token: "body",
     fontWeight: "regular"
   },
   "open-dyslexic": {
@@ -34866,18 +34866,6 @@ import React42 from "react";
 var Fonts = () => /* @__PURE__ */ React42.createElement(Global, {
   styles: `
       /* latin */
-      @font-face {
-        font-family: 'Helvetica';
-        src: url('Helvetica.eot');
-        src: local('Helvetica'),
-            url('Helvetica.eot?#iefix') format('embedded-opentype'),
-            url('Helvetica.woff2') format('woff2'),
-            url('Helvetica.woff') format('woff'),
-            url('Helvetica.ttf') format('truetype');
-        font-weight: normal;
-        font-style: normal;
-        font-display: swap;
-    }
       @font-face {
         font-family: 'OpenDyslexic';
         font-style: normal;
@@ -34887,29 +34875,6 @@ var Fonts = () => /* @__PURE__ */ React42.createElement(Global, {
           url('/fonts/opendyslexic/opendyslexic-regular-webfont.woff')
             format('woff');
       }
-      @font-face {
-        font-family: 'robotoregular';
-        src: url('Roboto-Regular-webfont.eot');
-        src: url('Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
-             url('Roboto-Regular-webfont.woff2') format('woff2'),
-             url('Roboto-Regular-webfont.woff') format('woff'),
-             url('Roboto-Regular-webfont.ttf') format('truetype'),
-             url('Roboto-Regular-webfont.svg#robotoregular') format('svg');
-        font-weight: normal;
-        font-style: normal;
-    }
-      @font-face {
-        font-family: 'robotolight';
-        src: url('Roboto-Light-webfont.eot');
-        src: url('Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
-             url('Roboto-Light-webfont.woff2') format('woff2'),
-             url('Roboto-Light-webfont.woff') format('woff'),
-             url('Roboto-Light-webfont.ttf') format('truetype'),
-             url('Roboto-Light-webfont.svg#robotolight') format('svg');
-        font-weight: normal;
-        font-style: normal;
-    
-    }
     `
 });
 var fonts_default = Fonts;
@@ -34984,7 +34949,6 @@ var typography3 = {
     body: "Roboto, -apple-system, BlinkMacSystemFont, system-ui, sans-serif",
     heading: "Roboto, -apple-system, BlinkMacSystemFont, system-ui, sans-serif",
     serif: `'Georgia', serif`,
-    sansSerif: `'Helvetica', 'Arial', serif`,
     opendyslexic: `'OpenDyslexic', sans-serif`
   }
 };
@@ -35574,7 +35538,12 @@ var variantSolid6 = (getColor4) => (props) => {
   const bgColor = getColor4("ui.gray.light-warm", "ui.black", "ui.sepia");
   const bgColorActive = getColor4("ui.gray.active", "ui.gray.x-dark", "ui.sepiaChecked");
   const color3 = getColor4("gray.800", "ui.white", "gray.800");
-  const _focus = { bgColor: bgColorActive, color: color3 };
+  const _focus = {
+    bgColor: bgColorActive,
+    color: color3,
+    ring: "2px",
+    ringInset: "inset"
+  };
   const _hover = {
     bgColor: bgColorActive,
     color: color3,
@@ -35586,7 +35555,7 @@ var variantSolid6 = (getColor4) => (props) => {
   return {
     border: "none",
     borderColor: "gray.100",
-    height: "48px",
+    height: "45px",
     transition: "none",
     fontSize: 0,
     letterSpacing: 1,
@@ -35613,6 +35582,9 @@ var variantSettings = (getColor4) => (props) => {
     width: [8, 16, 36],
     fontSize: [0, 0, 2],
     whiteSpace: ["normal", "normal", "nowrap"],
+    p: {
+      textAlign: "center"
+    },
     _active: {
       bgColor
     },
@@ -35621,7 +35593,8 @@ var variantSettings = (getColor4) => (props) => {
       bgColor: checkedBgColor,
       borderBottomColor: checkedBgColor,
       p: {
-        textDecoration: "underline"
+        textDecoration: "underline",
+        textUnderlinePosition: "under"
       }
     },
     _hover: {
@@ -35679,7 +35652,7 @@ function ToggleButton(props) {
 }
 var FontToggleButton = (props) => {
   return /* @__PURE__ */ React43.createElement(ToggleButton, __spreadValues({
-    fontSize: [-1, -1, 0],
+    fontSize: [-2, -2, -1, -1, 0],
     py: 6
   }, props));
 };
@@ -35694,7 +35667,8 @@ var ColorModeToggleButton = (_a) => {
       _checked: {
         bgColor,
         p: {
-          textDecoration: "underline"
+          textDecoration: "underline",
+          textUnderlinePosition: "under"
         }
       }
     }
@@ -35907,28 +35881,31 @@ function HtmlSettings(props) {
   }), /* @__PURE__ */ React48.createElement(FontToggleButton, {
     value: "sans-serif",
     label: "Sans-Serif",
-    fontFamily: "sansSerif",
+    fontFamily: "body",
     fontWeight: "regular"
   }), /* @__PURE__ */ React48.createElement(FontToggleButton, {
     value: "open-dyslexic",
     label: "Dyslexia",
     fontFamily: "opendyslexic",
     fontWeight: "regular"
-  })), /* @__PURE__ */ React48.createElement(Stack, {
+  })), /* @__PURE__ */ React48.createElement(Box, {
     bgColor: checkedButtonBgColor,
-    px: 7,
-    py: 5
+    display: "flex",
+    flexDirection: "column",
+    px: [3, 3, 7],
+    py: [4, 4, 5]
   }, /* @__PURE__ */ React48.createElement(Heading, {
     as: "h3",
     color: buttonTextColor,
-    pb: "10px",
+    pb: [1.5, 1.5, 2.5],
     fontSize: 2,
     fontWeight: "light"
   }, FONT_DETAILS[fontFamily].heading), /* @__PURE__ */ React48.createElement(Text, {
     color: buttonTextColor,
     fontFamily: FONT_DETAILS[fontFamily].token,
     fontSize: -1,
-    fontWeight: FONT_DETAILS[fontFamily].fontWeight
+    fontWeight: FONT_DETAILS[fontFamily].fontWeight,
+    margin: 0
   }, FONT_DETAILS[fontFamily].body)), /* @__PURE__ */ React48.createElement(ToggleGroup_default, {
     value: colorMode,
     label: "reading theme options",
@@ -36038,31 +36015,35 @@ function SettingsCard(props) {
   const paginationValue = ((_b = (_a = props.state) == null ? void 0 : _a.settings) == null ? void 0 : _b.isScrolling) ? "scrolling" : "paginated";
   return /* @__PURE__ */ React49.createElement(React49.Fragment, null, /* @__PURE__ */ React49.createElement(Popover, {
     gutter: 0,
+    closeOnBlur: true,
     placement: "bottom-start",
     isOpen,
-    onOpen: open,
     onClose: close,
+    onOpen: open,
     autoFocus: true,
     preventOverflow: true,
     strategy: "fixed"
   }, /* @__PURE__ */ React49.createElement(PopoverTrigger, null, /* @__PURE__ */ React49.createElement(Button_default, {
+    "aria-label": "Settings",
     onClick: open,
+    onMouseDown: (e) => e.preventDefault(),
     border: "none",
-    "aria-label": "Settings",
-    leftIcon: /* @__PURE__ */ React49.createElement(Icon, {
-      as: ReaderSettings_default,
-      w: 6,
-      h: 6,
-      fill: iconFill
-    })
-  }, /* @__PURE__ */ React49.createElement(Text, {
+    gap: [0, 0, 2]
+  }, /* @__PURE__ */ React49.createElement(Icon, {
+    as: ReaderSettings_default,
+    fill: iconFill,
+    w: 6,
+    h: 6
+  }), /* @__PURE__ */ React49.createElement(Text, {
     variant: "headerNav"
   }, "Settings"))), /* @__PURE__ */ React49.createElement(PopoverContent, {
     overflow: "hidden",
     bgColor: contentBgColor,
-    borderRadius: "0 0 4px 4px",
-    boxShadow: "0 4px 4px -2px #424242",
-    width: "inherit",
+    borderColor: "ui.gray.disabled",
+    borderRadius: "0 0 2px 2px",
+    filter: "drop-shadow(0 1px 2px #00000040)",
+    width: ["90vw", "90vw", "inherit"],
+    marginRight: [4, 4, 4, 0],
     maxWidth: "100vw"
   }, /* @__PURE__ */ React49.createElement(PopoverBody, {
     p: 0
@@ -36941,7 +36922,7 @@ function Header(props) {
     bg: mainBgColor
   }, headerLeft != null ? headerLeft : /* @__PURE__ */ React53.createElement(DefaultHeaderLeft, null), /* @__PURE__ */ React53.createElement(HStack, {
     ml: "auto",
-    spacing: 1
+    spacing: 0
   }, /* @__PURE__ */ React53.createElement(TableOfContent, {
     containerRef,
     navigator: navigator2,
@@ -36950,14 +36931,17 @@ function Header(props) {
     "aria-expanded": isFullscreen,
     "aria-label": "Toggle full screen",
     border: "none",
+    bgColor: mainBgColor,
+    gap: [0, 0, 2],
     onClick: toggleFullScreen2,
-    leftIcon: /* @__PURE__ */ React53.createElement(Icon, {
-      as: isFullscreen ? ToggleFullScreenExit_default : ToggleFullScreen_default,
-      fill: iconFill,
-      w: 6,
-      h: 6
-    })
-  }, /* @__PURE__ */ React53.createElement(Text, {
+    _active: { bgColor: mainBgColor },
+    _focus: { bgColor: mainBgColor, ring: "2px", ringInset: "inset" }
+  }, /* @__PURE__ */ React53.createElement(Icon, {
+    as: isFullscreen ? ToggleFullScreenExit_default : ToggleFullScreen_default,
+    fill: iconFill,
+    w: 6,
+    h: 6
+  }), /* @__PURE__ */ React53.createElement(Text, {
     variant: "headerNav"
   }, isFullscreen ? "Full screen exit" : "Full screen"))));
 }
@@ -36974,7 +36958,7 @@ var HeaderWrapper = React53.forwardRef((_a, ref) => {
     zIndex: "sticky",
     alignContent: "space-between",
     alignItems: "center",
-    px: 8,
+    px: [0, 0, 8],
     borderBottom: "1px solid",
     borderColor: "gray.100"
   }, rest), children);