@nypl/web-reader 4.3.3 → 4.3.4

package/dist/index.mjs

@@ -1648,2397 +1648,2384 @@ function variantSolid(props) {
 }
 var button_default = ButtonStyle;
 
-// node_modules/@chakra-ui/shared-utils/dist/index.mjs
-function isDev() {
-  return process.env.NODE_ENV !== "production";
-}
-function isObject(value) {
-  const type = typeof value;
-  return value != null && (type === "object" || type === "function") && !Array.isArray(value);
-}
-var warn = (options) => {
-  const { condition, message } = options;
-  if (condition && isDev()) {
-    console.warn(message);
-  }
+// src/ui/nypl-base-theme/foundations/breakpoints.ts
+var breakpoints = {
+  sm: "20em",
+  // 320px
+  md: "38em",
+  // 600px
+  lg: "60em",
+  // 960px
+  xl: "80em",
+  // 1280px
+  "2xl": "96em"
 };
-function runIfFn(valueOrFn, ...args) {
-  return isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn;
-}
-var isFunction = (value) => typeof value === "function";
-var dataAttr = (condition) => condition ? "" : void 0;
+var breakpoints_default = breakpoints;
 
-// node_modules/@chakra-ui/styled-system/dist/index.mjs
-var import_lodash = __toESM(require_lodash(), 1);
-var import_lodash2 = __toESM(require_lodash(), 1);
-var import_lodash3 = __toESM(require_lodash(), 1);
-var import_lodash4 = __toESM(require_lodash(), 1);
-var isImportant = (value) => /!(important)?$/.test(value);
-var withoutImportant = (value) => typeof value === "string" ? value.replace(/!(important)?$/, "").trim() : value;
-var tokenToCSSVar = (scale, value) => (theme2) => {
-  const valueStr = String(value);
-  const important = isImportant(valueStr);
-  const valueWithoutImportant = withoutImportant(valueStr);
-  const key = scale ? `${scale}.${valueWithoutImportant}` : valueWithoutImportant;
-  let transformed = isObject(theme2.__cssMap) && key in theme2.__cssMap ? theme2.__cssMap[key].varRef : value;
-  transformed = withoutImportant(transformed);
-  return important ? `${transformed} !important` : transformed;
-};
-function createTransform(options) {
-  const { scale, transform: transform2, compose: compose2 } = options;
-  const fn = (value, theme2) => {
-    var _a2;
-    const _value = tokenToCSSVar(scale, value)(theme2);
-    let result = (_a2 = transform2 == null ? void 0 : transform2(_value, theme2)) != null ? _a2 : _value;
-    if (compose2) {
-      result = compose2(result, theme2);
-    }
-    return result;
-  };
-  return fn;
-}
-var pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
-function toConfig(scale, transform2) {
-  return (property) => {
-    const result = { property, scale };
-    result.transform = createTransform({
-      scale,
-      transform: transform2
-    });
-    return result;
-  };
-}
-var getRtl = ({ rtl, ltr }) => (theme2) => theme2.direction === "rtl" ? rtl : ltr;
-function logical(options) {
-  const { property, scale, transform: transform2 } = options;
-  return {
-    scale,
-    property: getRtl(property),
-    transform: scale ? createTransform({
-      scale,
-      compose: transform2
-    }) : transform2
-  };
-}
-var transformTemplate = [
-  "rotate(var(--chakra-rotate, 0))",
-  "scaleX(var(--chakra-scale-x, 1))",
-  "scaleY(var(--chakra-scale-y, 1))",
-  "skewX(var(--chakra-skew-x, 0))",
-  "skewY(var(--chakra-skew-y, 0))"
-];
-function getTransformTemplate() {
-  return [
-    "translateX(var(--chakra-translate-x, 0))",
-    "translateY(var(--chakra-translate-y, 0))",
-    ...transformTemplate
-  ].join(" ");
-}
-function getTransformGpuTemplate() {
-  return [
-    "translate3d(var(--chakra-translate-x, 0), var(--chakra-translate-y, 0), 0)",
-    ...transformTemplate
-  ].join(" ");
-}
-var filterTemplate = {
-  "--chakra-blur": "var(--chakra-empty,/*!*/ /*!*/)",
-  "--chakra-brightness": "var(--chakra-empty,/*!*/ /*!*/)",
-  "--chakra-contrast": "var(--chakra-empty,/*!*/ /*!*/)",
-  "--chakra-grayscale": "var(--chakra-empty,/*!*/ /*!*/)",
-  "--chakra-hue-rotate": "var(--chakra-empty,/*!*/ /*!*/)",
-  "--chakra-invert": "var(--chakra-empty,/*!*/ /*!*/)",
-  "--chakra-saturate": "var(--chakra-empty,/*!*/ /*!*/)",
-  "--chakra-sepia": "var(--chakra-empty,/*!*/ /*!*/)",
-  "--chakra-drop-shadow": "var(--chakra-empty,/*!*/ /*!*/)",
-  filter: [
-    "var(--chakra-blur)",
-    "var(--chakra-brightness)",
-    "var(--chakra-contrast)",
-    "var(--chakra-grayscale)",
-    "var(--chakra-hue-rotate)",
-    "var(--chakra-invert)",
-    "var(--chakra-saturate)",
-    "var(--chakra-sepia)",
-    "var(--chakra-drop-shadow)"
-  ].join(" ")
-};
-var backdropFilterTemplate = {
-  backdropFilter: [
-    "var(--chakra-backdrop-blur)",
-    "var(--chakra-backdrop-brightness)",
-    "var(--chakra-backdrop-contrast)",
-    "var(--chakra-backdrop-grayscale)",
-    "var(--chakra-backdrop-hue-rotate)",
-    "var(--chakra-backdrop-invert)",
-    "var(--chakra-backdrop-opacity)",
-    "var(--chakra-backdrop-saturate)",
-    "var(--chakra-backdrop-sepia)"
-  ].join(" "),
-  "--chakra-backdrop-blur": "var(--chakra-empty,/*!*/ /*!*/)",
-  "--chakra-backdrop-brightness": "var(--chakra-empty,/*!*/ /*!*/)",
-  "--chakra-backdrop-contrast": "var(--chakra-empty,/*!*/ /*!*/)",
-  "--chakra-backdrop-grayscale": "var(--chakra-empty,/*!*/ /*!*/)",
-  "--chakra-backdrop-hue-rotate": "var(--chakra-empty,/*!*/ /*!*/)",
-  "--chakra-backdrop-invert": "var(--chakra-empty,/*!*/ /*!*/)",
-  "--chakra-backdrop-opacity": "var(--chakra-empty,/*!*/ /*!*/)",
-  "--chakra-backdrop-saturate": "var(--chakra-empty,/*!*/ /*!*/)",
-  "--chakra-backdrop-sepia": "var(--chakra-empty,/*!*/ /*!*/)"
-};
-function getRingTemplate(value) {
-  return {
-    "--chakra-ring-offset-shadow": `var(--chakra-ring-inset) 0 0 0 var(--chakra-ring-offset-width) var(--chakra-ring-offset-color)`,
-    "--chakra-ring-shadow": `var(--chakra-ring-inset) 0 0 0 calc(var(--chakra-ring-width) + var(--chakra-ring-offset-width)) var(--chakra-ring-color)`,
-    "--chakra-ring-width": value,
-    boxShadow: [
-      `var(--chakra-ring-offset-shadow)`,
-      `var(--chakra-ring-shadow)`,
-      `var(--chakra-shadow, 0 0 #0000)`
-    ].join(", ")
-  };
-}
-var flexDirectionTemplate = {
-  "row-reverse": {
-    space: "--chakra-space-x-reverse",
-    divide: "--chakra-divide-x-reverse"
-  },
-  "column-reverse": {
-    space: "--chakra-space-y-reverse",
-    divide: "--chakra-divide-y-reverse"
-  }
-};
-var directionMap = {
-  "to-t": "to top",
-  "to-tr": "to top right",
-  "to-r": "to right",
-  "to-br": "to bottom right",
-  "to-b": "to bottom",
-  "to-bl": "to bottom left",
-  "to-l": "to left",
-  "to-tl": "to top left"
-};
-var valueSet = new Set(Object.values(directionMap));
-var globalSet = /* @__PURE__ */ new Set([
-  "none",
-  "-moz-initial",
-  "inherit",
-  "initial",
-  "revert",
-  "unset"
-]);
-var trimSpace = (str) => str.trim();
-function parseGradient(value, theme2) {
-  if (value == null || globalSet.has(value))
-    return value;
-  const prevent = isCSSFunction(value) || globalSet.has(value);
-  if (!prevent)
-    return `url('${value}')`;
-  const regex = /(^[a-z-A-Z]+)\((.*)\)/g;
-  const results = regex.exec(value);
-  const type = results == null ? void 0 : results[1];
-  const values = results == null ? void 0 : results[2];
-  if (!type || !values)
-    return value;
-  const _type = type.includes("-gradient") ? type : `${type}-gradient`;
-  const [maybeDirection, ...stops] = values.split(",").map(trimSpace).filter(Boolean);
-  if ((stops == null ? void 0 : stops.length) === 0)
-    return value;
-  const direction = maybeDirection in directionMap ? directionMap[maybeDirection] : maybeDirection;
-  stops.unshift(direction);
-  const _values = stops.map((stop) => {
-    if (valueSet.has(stop))
-      return stop;
-    const firstStop = stop.indexOf(" ");
-    const [_color, _stop] = firstStop !== -1 ? [stop.substr(0, firstStop), stop.substr(firstStop + 1)] : [stop];
-    const _stopOrFunc = isCSSFunction(_stop) ? _stop : _stop && _stop.split(" ");
-    const key = `colors.${_color}`;
-    const color2 = key in theme2.__cssMap ? theme2.__cssMap[key].varRef : _color;
-    return _stopOrFunc ? [
-      color2,
-      ...Array.isArray(_stopOrFunc) ? _stopOrFunc : [_stopOrFunc]
-    ].join(" ") : color2;
-  });
-  return `${_type}(${_values.join(", ")})`;
-}
-var isCSSFunction = (value) => {
-  return typeof value === "string" && value.includes("(") && value.includes(")");
-};
-var gradientTransform = (value, theme2) => parseGradient(value, theme2 != null ? theme2 : {});
-function isCssVar(value) {
-  return /^var\(--.+\)$/.test(value);
-}
-var analyzeCSSValue = (value) => {
-  const num = parseFloat(value.toString());
-  const unit = value.toString().replace(String(num), "");
-  return { unitless: !unit, value: num, unit };
-};
-var wrap = (str) => (value) => `${str}(${value})`;
-var transformFunctions = {
-  filter(value) {
-    return value !== "auto" ? value : filterTemplate;
+// src/ui/nypl-base-theme/foundations/typography.ts
+var typography2 = {
+  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`
   },
-  backdropFilter(value) {
-    return value !== "auto" ? value : backdropFilterTemplate;
+  fontSizes: {
+    "-2": "0.75rem",
+    "-1": "0.875rem",
+    "0": "1rem",
+    "1": "1.125rem",
+    "2": "1.25rem",
+    "3": "1.75rem",
+    "4": "2.25rem",
+    "5": "3rem"
   },
-  ring(value) {
-    return getRingTemplate(transformFunctions.px(value));
+  fontWeights: {
+    light: 300,
+    regular: 400,
+    medium: 500,
+    bold: 700
   },
-  bgClip(value) {
-    return value === "text" ? { color: "transparent", backgroundClip: "text" } : { backgroundClip: value };
-  },
-  transform(value) {
-    if (value === "auto")
-      return getTransformTemplate();
-    if (value === "auto-gpu")
-      return getTransformGpuTemplate();
-    return value;
-  },
-  vh(value) {
-    return value === "$100vh" ? "var(--chakra-vh)" : value;
+  lineHeights: [1, 1.1, 1.25, 1.5, 2, 2.5],
+  letterSpacings: {
+    tighter: "-0.05em",
+    tight: "-0.025em",
+    normal: "0",
+    wide: "0.025em",
+    wider: "0.05em",
+    widest: "0.1em"
+  }
+};
+var typography_default2 = typography2;
+
+// src/ui/nypl-base-theme/foundations/colors.ts
+var colors2 = {
+  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: {
+      active: "#D9D9D9",
+      disabled: "#979797",
+      icon: "#1C1B1F",
+      medium: "#BDBDBD",
+      dark: "#616161",
+      "x-dark": "#424242",
+      "light-cool": "#E0E0E0",
+      "light-warm": "#EFEDEB",
+      "x-light-cool": "#F5F5F5",
+      "x-light-warm": "#F8F8F7",
+      "xx-light-cool": "#FAFAFA"
+    }
   },
-  px(value) {
-    if (value == null)
-      return value;
-    const { unitless } = analyzeCSSValue(value);
-    return unitless || typeof value === "number" ? `${value}px` : value;
+  // brand fills. Only primary and secondary filled in for now.
+  brand: {
+    primary: "#C60917",
+    secondary: "#760000",
+    "nypl-red": "#D0343A"
   },
-  fraction(value) {
-    return !(typeof value === "number") || value > 1 ? value : `${value * 100}%`;
+  /**
+   * 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"
   },
-  float(value, theme2) {
-    const map = { left: "right", right: "left" };
-    return theme2.direction === "rtl" ? map[value] : value;
+  // 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"
   },
-  degree(value) {
-    if (isCssVar(value) || value == null)
-      return value;
-    const unitless = typeof value === "string" && !value.endsWith("deg");
-    return typeof value === "number" || unitless ? `${value}deg` : value;
+  // 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"
   },
-  gradient: gradientTransform,
-  blur: wrap("blur"),
-  opacity: wrap("opacity"),
-  brightness: wrap("brightness"),
-  contrast: wrap("contrast"),
-  dropShadow: wrap("drop-shadow"),
-  grayscale: wrap("grayscale"),
-  hueRotate: wrap("hue-rotate"),
-  invert: wrap("invert"),
-  saturate: wrap("saturate"),
-  sepia: wrap("sepia"),
-  bgImage(value) {
-    if (value == null)
-      return value;
-    const prevent = isCSSFunction(value) || globalSet.has(value);
-    return !prevent ? `url(${value})` : value;
+  // 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"
   },
-  outline(value) {
-    const isNoneOrZero = String(value) === "0" || String(value) === "none";
-    return value !== null && isNoneOrZero ? { outline: "2px solid transparent", outlineOffset: "2px" } : { outline: value };
+  // 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"
   },
-  flexDirection(value) {
-    var _a2;
-    const { space: space2, divide: divide2 } = (_a2 = flexDirectionTemplate[value]) != null ? _a2 : {};
-    const result = { flexDirection: value };
-    if (space2)
-      result[space2] = 1;
-    if (divide2)
-      result[divide2] = 1;
-    return result;
+  // 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 t = {
-  borderWidths: toConfig("borderWidths"),
-  borderStyles: toConfig("borderStyles"),
-  colors: toConfig("colors"),
-  borders: toConfig("borders"),
-  gradients: toConfig("gradients", transformFunctions.gradient),
-  radii: toConfig("radii", transformFunctions.px),
-  space: toConfig("space", pipe(transformFunctions.vh, transformFunctions.px)),
-  spaceT: toConfig("space", pipe(transformFunctions.vh, transformFunctions.px)),
-  degreeT(property) {
-    return { property, transform: transformFunctions.degree };
-  },
-  prop(property, scale, transform2) {
-    return __spreadValues({
-      property,
-      scale
-    }, scale && {
-      transform: createTransform({ scale, transform: transform2 })
-    });
-  },
-  propT(property, transform2) {
-    return { property, transform: transform2 };
-  },
-  sizes: toConfig("sizes", pipe(transformFunctions.vh, transformFunctions.px)),
-  sizesT: toConfig("sizes", pipe(transformFunctions.vh, transformFunctions.fraction)),
-  shadows: toConfig("shadows"),
-  logical,
-  blur: toConfig("blur", transformFunctions.blur)
-};
-var background = {
-  background: t.colors("background"),
-  backgroundColor: t.colors("backgroundColor"),
-  backgroundImage: t.gradients("backgroundImage"),
-  backgroundSize: true,
-  backgroundPosition: true,
-  backgroundRepeat: true,
-  backgroundAttachment: true,
-  backgroundClip: { transform: transformFunctions.bgClip },
-  bgSize: t.prop("backgroundSize"),
-  bgPosition: t.prop("backgroundPosition"),
-  bg: t.colors("background"),
-  bgColor: t.colors("backgroundColor"),
-  bgPos: t.prop("backgroundPosition"),
-  bgRepeat: t.prop("backgroundRepeat"),
-  bgAttachment: t.prop("backgroundAttachment"),
-  bgGradient: t.gradients("backgroundImage"),
-  bgClip: { transform: transformFunctions.bgClip }
+var colors_default2 = colors2;
+
+// src/ui/nypl-base-theme/foundations/radii.ts
+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"
 };
-Object.assign(background, {
-  bgImage: background.backgroundImage,
-  bgImg: background.backgroundImage
-});
-var border = {
-  border: t.borders("border"),
-  borderWidth: t.borderWidths("borderWidth"),
-  borderStyle: t.borderStyles("borderStyle"),
-  borderColor: t.colors("borderColor"),
-  borderRadius: t.radii("borderRadius"),
-  borderTop: t.borders("borderTop"),
-  borderBlockStart: t.borders("borderBlockStart"),
-  borderTopLeftRadius: t.radii("borderTopLeftRadius"),
-  borderStartStartRadius: t.logical({
-    scale: "radii",
-    property: {
-      ltr: "borderTopLeftRadius",
-      rtl: "borderTopRightRadius"
-    }
-  }),
-  borderEndStartRadius: t.logical({
-    scale: "radii",
-    property: {
-      ltr: "borderBottomLeftRadius",
-      rtl: "borderBottomRightRadius"
-    }
-  }),
-  borderTopRightRadius: t.radii("borderTopRightRadius"),
-  borderStartEndRadius: t.logical({
-    scale: "radii",
-    property: {
-      ltr: "borderTopRightRadius",
-      rtl: "borderTopLeftRadius"
-    }
-  }),
-  borderEndEndRadius: t.logical({
-    scale: "radii",
-    property: {
-      ltr: "borderBottomRightRadius",
-      rtl: "borderBottomLeftRadius"
-    }
-  }),
-  borderRight: t.borders("borderRight"),
-  borderInlineEnd: t.borders("borderInlineEnd"),
-  borderBottom: t.borders("borderBottom"),
-  borderBlockEnd: t.borders("borderBlockEnd"),
-  borderBottomLeftRadius: t.radii("borderBottomLeftRadius"),
-  borderBottomRightRadius: t.radii("borderBottomRightRadius"),
-  borderLeft: t.borders("borderLeft"),
-  borderInlineStart: {
-    property: "borderInlineStart",
-    scale: "borders"
-  },
-  borderInlineStartRadius: t.logical({
-    scale: "radii",
-    property: {
-      ltr: ["borderTopLeftRadius", "borderBottomLeftRadius"],
-      rtl: ["borderTopRightRadius", "borderBottomRightRadius"]
-    }
-  }),
-  borderInlineEndRadius: t.logical({
-    scale: "radii",
-    property: {
-      ltr: ["borderTopRightRadius", "borderBottomRightRadius"],
-      rtl: ["borderTopLeftRadius", "borderBottomLeftRadius"]
-    }
-  }),
-  borderX: t.borders(["borderLeft", "borderRight"]),
-  borderInline: t.borders("borderInline"),
-  borderY: t.borders(["borderTop", "borderBottom"]),
-  borderBlock: t.borders("borderBlock"),
-  borderTopWidth: t.borderWidths("borderTopWidth"),
-  borderBlockStartWidth: t.borderWidths("borderBlockStartWidth"),
-  borderTopColor: t.colors("borderTopColor"),
-  borderBlockStartColor: t.colors("borderBlockStartColor"),
-  borderTopStyle: t.borderStyles("borderTopStyle"),
-  borderBlockStartStyle: t.borderStyles("borderBlockStartStyle"),
-  borderBottomWidth: t.borderWidths("borderBottomWidth"),
-  borderBlockEndWidth: t.borderWidths("borderBlockEndWidth"),
-  borderBottomColor: t.colors("borderBottomColor"),
-  borderBlockEndColor: t.colors("borderBlockEndColor"),
-  borderBottomStyle: t.borderStyles("borderBottomStyle"),
-  borderBlockEndStyle: t.borderStyles("borderBlockEndStyle"),
-  borderLeftWidth: t.borderWidths("borderLeftWidth"),
-  borderInlineStartWidth: t.borderWidths("borderInlineStartWidth"),
-  borderLeftColor: t.colors("borderLeftColor"),
-  borderInlineStartColor: t.colors("borderInlineStartColor"),
-  borderLeftStyle: t.borderStyles("borderLeftStyle"),
-  borderInlineStartStyle: t.borderStyles("borderInlineStartStyle"),
-  borderRightWidth: t.borderWidths("borderRightWidth"),
-  borderInlineEndWidth: t.borderWidths("borderInlineEndWidth"),
-  borderRightColor: t.colors("borderRightColor"),
-  borderInlineEndColor: t.colors("borderInlineEndColor"),
-  borderRightStyle: t.borderStyles("borderRightStyle"),
-  borderInlineEndStyle: t.borderStyles("borderInlineEndStyle"),
-  borderTopRadius: t.radii(["borderTopLeftRadius", "borderTopRightRadius"]),
-  borderBottomRadius: t.radii([
-    "borderBottomLeftRadius",
-    "borderBottomRightRadius"
-  ]),
-  borderLeftRadius: t.radii(["borderTopLeftRadius", "borderBottomLeftRadius"]),
-  borderRightRadius: t.radii([
-    "borderTopRightRadius",
-    "borderBottomRightRadius"
-  ])
-};
-Object.assign(border, {
-  rounded: border.borderRadius,
-  roundedTop: border.borderTopRadius,
-  roundedTopLeft: border.borderTopLeftRadius,
-  roundedTopRight: border.borderTopRightRadius,
-  roundedTopStart: border.borderStartStartRadius,
-  roundedTopEnd: border.borderStartEndRadius,
-  roundedBottom: border.borderBottomRadius,
-  roundedBottomLeft: border.borderBottomLeftRadius,
-  roundedBottomRight: border.borderBottomRightRadius,
-  roundedBottomStart: border.borderEndStartRadius,
-  roundedBottomEnd: border.borderEndEndRadius,
-  roundedLeft: border.borderLeftRadius,
-  roundedRight: border.borderRightRadius,
-  roundedStart: border.borderInlineStartRadius,
-  roundedEnd: border.borderInlineEndRadius,
-  borderStart: border.borderInlineStart,
-  borderEnd: border.borderInlineEnd,
-  borderTopStartRadius: border.borderStartStartRadius,
-  borderTopEndRadius: border.borderStartEndRadius,
-  borderBottomStartRadius: border.borderEndStartRadius,
-  borderBottomEndRadius: border.borderEndEndRadius,
-  borderStartRadius: border.borderInlineStartRadius,
-  borderEndRadius: border.borderInlineEndRadius,
-  borderStartWidth: border.borderInlineStartWidth,
-  borderEndWidth: border.borderInlineEndWidth,
-  borderStartColor: border.borderInlineStartColor,
-  borderEndColor: border.borderInlineEndColor,
-  borderStartStyle: border.borderInlineStartStyle,
-  borderEndStyle: border.borderInlineEndStyle
-});
-var color = {
-  color: t.colors("color"),
-  textColor: t.colors("color"),
-  fill: t.colors("fill"),
-  stroke: t.colors("stroke")
-};
-var effect = {
-  boxShadow: t.shadows("boxShadow"),
-  mixBlendMode: true,
-  blendMode: t.prop("mixBlendMode"),
-  backgroundBlendMode: true,
-  bgBlendMode: t.prop("backgroundBlendMode"),
-  opacity: true
-};
-Object.assign(effect, {
-  shadow: effect.boxShadow
-});
-var filter = {
-  filter: { transform: transformFunctions.filter },
-  blur: t.blur("--chakra-blur"),
-  brightness: t.propT("--chakra-brightness", transformFunctions.brightness),
-  contrast: t.propT("--chakra-contrast", transformFunctions.contrast),
-  hueRotate: t.degreeT("--chakra-hue-rotate"),
-  invert: t.propT("--chakra-invert", transformFunctions.invert),
-  saturate: t.propT("--chakra-saturate", transformFunctions.saturate),
-  dropShadow: t.propT("--chakra-drop-shadow", transformFunctions.dropShadow),
-  backdropFilter: { transform: transformFunctions.backdropFilter },
-  backdropBlur: t.blur("--chakra-backdrop-blur"),
-  backdropBrightness: t.propT(
-    "--chakra-backdrop-brightness",
-    transformFunctions.brightness
-  ),
-  backdropContrast: t.propT("--chakra-backdrop-contrast", transformFunctions.contrast),
-  backdropHueRotate: t.degreeT("--chakra-backdrop-hue-rotate"),
-  backdropInvert: t.propT("--chakra-backdrop-invert", transformFunctions.invert),
-  backdropSaturate: t.propT("--chakra-backdrop-saturate", transformFunctions.saturate)
-};
-var flexbox = {
-  alignItems: true,
-  alignContent: true,
-  justifyItems: true,
-  justifyContent: true,
-  flexWrap: true,
-  flexDirection: { transform: transformFunctions.flexDirection },
-  flex: true,
-  flexFlow: true,
-  flexGrow: true,
-  flexShrink: true,
-  flexBasis: t.sizes("flexBasis"),
-  justifySelf: true,
-  alignSelf: true,
-  order: true,
-  placeItems: true,
-  placeContent: true,
-  placeSelf: true,
-  gap: t.space("gap"),
-  rowGap: t.space("rowGap"),
-  columnGap: t.space("columnGap")
-};
-Object.assign(flexbox, {
-  flexDir: flexbox.flexDirection
-});
-var grid = {
-  gridGap: t.space("gridGap"),
-  gridColumnGap: t.space("gridColumnGap"),
-  gridRowGap: t.space("gridRowGap"),
-  gridColumn: true,
-  gridRow: true,
-  gridAutoFlow: true,
-  gridAutoColumns: true,
-  gridColumnStart: true,
-  gridColumnEnd: true,
-  gridRowStart: true,
-  gridRowEnd: true,
-  gridAutoRows: true,
-  gridTemplate: true,
-  gridTemplateColumns: true,
-  gridTemplateRows: true,
-  gridTemplateAreas: true,
-  gridArea: true
-};
-var interactivity = {
-  appearance: true,
-  cursor: true,
-  resize: true,
-  userSelect: true,
-  pointerEvents: true,
-  outline: { transform: transformFunctions.outline },
-  outlineOffset: true,
-  outlineColor: t.colors("outlineColor")
-};
-var layout = {
-  width: t.sizesT("width"),
-  inlineSize: t.sizesT("inlineSize"),
-  height: t.sizes("height"),
-  blockSize: t.sizes("blockSize"),
-  boxSize: t.sizes(["width", "height"]),
-  minWidth: t.sizes("minWidth"),
-  minInlineSize: t.sizes("minInlineSize"),
-  minHeight: t.sizes("minHeight"),
-  minBlockSize: t.sizes("minBlockSize"),
-  maxWidth: t.sizes("maxWidth"),
-  maxInlineSize: t.sizes("maxInlineSize"),
-  maxHeight: t.sizes("maxHeight"),
-  maxBlockSize: t.sizes("maxBlockSize"),
-  overflow: true,
-  overflowX: true,
-  overflowY: true,
-  overscrollBehavior: true,
-  overscrollBehaviorX: true,
-  overscrollBehaviorY: true,
-  display: true,
-  aspectRatio: true,
-  hideFrom: {
-    scale: "breakpoints",
-    transform: (value, theme2) => {
-      var _a2, _b, _c;
-      const breakpoint = (_c = (_b = (_a2 = theme2.__breakpoints) == null ? void 0 : _a2.get(value)) == null ? void 0 : _b.minW) != null ? _c : value;
-      const mq = `@media screen and (min-width: ${breakpoint})`;
-      return { [mq]: { display: "none" } };
-    }
-  },
-  hideBelow: {
-    scale: "breakpoints",
-    transform: (value, theme2) => {
-      var _a2, _b, _c;
-      const breakpoint = (_c = (_b = (_a2 = theme2.__breakpoints) == null ? void 0 : _a2.get(value)) == null ? void 0 : _b._minW) != null ? _c : value;
-      const mq = `@media screen and (max-width: ${breakpoint})`;
-      return { [mq]: { display: "none" } };
-    }
-  },
-  verticalAlign: true,
-  boxSizing: true,
-  boxDecorationBreak: true,
-  float: t.propT("float", transformFunctions.float),
-  objectFit: true,
-  objectPosition: true,
-  visibility: true,
-  isolation: true
-};
-Object.assign(layout, {
-  w: layout.width,
-  h: layout.height,
-  minW: layout.minWidth,
-  maxW: layout.maxWidth,
-  minH: layout.minHeight,
-  maxH: layout.maxHeight,
-  overscroll: layout.overscrollBehavior,
-  overscrollX: layout.overscrollBehaviorX,
-  overscrollY: layout.overscrollBehaviorY
-});
-var list = {
-  listStyleType: true,
-  listStylePosition: true,
-  listStylePos: t.prop("listStylePosition"),
-  listStyleImage: true,
-  listStyleImg: t.prop("listStyleImage")
-};
-function get(obj, path, fallback, index) {
-  const key = typeof path === "string" ? path.split(".") : [path];
-  for (index = 0; index < key.length; index += 1) {
-    if (!obj)
-      break;
-    obj = obj[key[index]];
-  }
-  return obj === void 0 ? fallback : obj;
-}
-var memoize = (fn) => {
-  const cache = /* @__PURE__ */ new WeakMap();
-  const memoizedFn = (obj, path, fallback, index) => {
-    if (typeof obj === "undefined") {
-      return fn(obj, path, fallback);
-    }
-    if (!cache.has(obj)) {
-      cache.set(obj, /* @__PURE__ */ new Map());
-    }
-    const map = cache.get(obj);
-    if (map.has(path)) {
-      return map.get(path);
-    }
-    const value = fn(obj, path, fallback, index);
-    map.set(path, value);
-    return value;
-  };
-  return memoizedFn;
-};
-var memoizedGet = memoize(get);
-var srOnly = {
-  border: "0px",
-  clip: "rect(0, 0, 0, 0)",
-  width: "1px",
-  height: "1px",
-  margin: "-1px",
-  padding: "0px",
-  overflow: "hidden",
-  whiteSpace: "nowrap",
-  position: "absolute"
+var radii_default = radii;
+
+// src/ui/nypl-base-theme/foundations/spacing.ts
+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 srFocusable = {
-  position: "static",
-  width: "auto",
-  height: "auto",
-  clip: "auto",
-  padding: "0",
-  margin: "0",
-  overflow: "visible",
-  whiteSpace: "normal"
+var spacing_default = spacing;
+
+// src/ui/nypl-base-theme/components/checkbox.ts
+var baseStyleLabel = {
+  userSelect: "none",
+  fontWeight: "light",
+  _disabled: { color: "ui.gray.x-dark", opacity: 1 }
 };
-var getWithPriority = (theme2, key, styles) => {
-  const result = {};
-  const obj = memoizedGet(theme2, key, {});
-  for (const prop in obj) {
-    const isInStyles = prop in styles && styles[prop] != null;
-    if (!isInStyles)
-      result[prop] = obj[prop];
+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"
   }
-  return result;
 };
-var others = {
-  srOnly: {
-    transform(value) {
-      if (value === true)
-        return srOnly;
-      if (value === "focusable")
-        return srFocusable;
-      return {};
-    }
+var checkbox_default = Checkbox;
+
+// src/ui/nypl-base-theme/components/input.ts
+var size = {
+  lg: {
+    fontSize: "lg",
+    px: 4,
+    h: 12,
+    borderRadius: "none"
   },
-  layerStyle: {
-    processResult: true,
-    transform: (value, theme2, styles) => getWithPriority(theme2, `layerStyles.${value}`, styles)
+  md: {
+    fontSize: "sm",
+    px: 4,
+    h: 9,
+    borderRadius: "none"
   },
-  textStyle: {
-    processResult: true,
-    transform: (value, theme2, styles) => getWithPriority(theme2, `textStyles.${value}`, styles)
+  sm: {
+    fontSize: "sm",
+    px: 3,
+    h: 8,
+    borderRadius: "none"
   },
-  apply: {
-    processResult: true,
-    transform: (value, theme2, styles) => getWithPriority(theme2, value, styles)
+  xs: {
+    fontSize: "xs",
+    px: 2,
+    h: 6,
+    borderRadius: "none"
   }
 };
-var position = {
-  position: true,
-  pos: t.prop("position"),
-  zIndex: t.prop("zIndex", "zIndices"),
-  inset: t.spaceT("inset"),
-  insetX: t.spaceT(["left", "right"]),
-  insetInline: t.spaceT("insetInline"),
-  insetY: t.spaceT(["top", "bottom"]),
-  insetBlock: t.spaceT("insetBlock"),
-  top: t.spaceT("top"),
-  insetBlockStart: t.spaceT("insetBlockStart"),
-  bottom: t.spaceT("bottom"),
-  insetBlockEnd: t.spaceT("insetBlockEnd"),
-  left: t.spaceT("left"),
-  insetInlineStart: t.logical({
-    scale: "space",
-    property: { ltr: "left", rtl: "right" }
-  }),
-  right: t.spaceT("right"),
-  insetInlineEnd: t.logical({
-    scale: "space",
-    property: { ltr: "right", rtl: "left" }
-  })
-};
-Object.assign(position, {
-  insetStart: position.insetInlineStart,
-  insetEnd: position.insetInlineEnd
-});
-var ring = {
-  ring: { transform: transformFunctions.ring },
-  ringColor: t.colors("--chakra-ring-color"),
-  ringOffset: t.prop("--chakra-ring-offset-width"),
-  ringOffsetColor: t.colors("--chakra-ring-offset-color"),
-  ringInset: t.prop("--chakra-ring-inset")
-};
-var space = {
-  margin: t.spaceT("margin"),
-  marginTop: t.spaceT("marginTop"),
-  marginBlockStart: t.spaceT("marginBlockStart"),
-  marginRight: t.spaceT("marginRight"),
-  marginInlineEnd: t.spaceT("marginInlineEnd"),
-  marginBottom: t.spaceT("marginBottom"),
-  marginBlockEnd: t.spaceT("marginBlockEnd"),
-  marginLeft: t.spaceT("marginLeft"),
-  marginInlineStart: t.spaceT("marginInlineStart"),
-  marginX: t.spaceT(["marginInlineStart", "marginInlineEnd"]),
-  marginInline: t.spaceT("marginInline"),
-  marginY: t.spaceT(["marginTop", "marginBottom"]),
-  marginBlock: t.spaceT("marginBlock"),
-  padding: t.space("padding"),
-  paddingTop: t.space("paddingTop"),
-  paddingBlockStart: t.space("paddingBlockStart"),
-  paddingRight: t.space("paddingRight"),
-  paddingBottom: t.space("paddingBottom"),
-  paddingBlockEnd: t.space("paddingBlockEnd"),
-  paddingLeft: t.space("paddingLeft"),
-  paddingInlineStart: t.space("paddingInlineStart"),
-  paddingInlineEnd: t.space("paddingInlineEnd"),
-  paddingX: t.space(["paddingInlineStart", "paddingInlineEnd"]),
-  paddingInline: t.space("paddingInline"),
-  paddingY: t.space(["paddingTop", "paddingBottom"]),
-  paddingBlock: t.space("paddingBlock")
-};
-Object.assign(space, {
-  m: space.margin,
-  mt: space.marginTop,
-  mr: space.marginRight,
-  me: space.marginInlineEnd,
-  marginEnd: space.marginInlineEnd,
-  mb: space.marginBottom,
-  ml: space.marginLeft,
-  ms: space.marginInlineStart,
-  marginStart: space.marginInlineStart,
-  mx: space.marginX,
-  my: space.marginY,
-  p: space.padding,
-  pt: space.paddingTop,
-  py: space.paddingY,
-  px: space.paddingX,
-  pb: space.paddingBottom,
-  pl: space.paddingLeft,
-  ps: space.paddingInlineStart,
-  paddingStart: space.paddingInlineStart,
-  pr: space.paddingRight,
-  pe: space.paddingInlineEnd,
-  paddingEnd: space.paddingInlineEnd
-});
-var textDecoration = {
-  textDecorationColor: t.colors("textDecorationColor"),
-  textDecoration: true,
-  textDecor: { property: "textDecoration" },
-  textDecorationLine: true,
-  textDecorationStyle: true,
-  textDecorationThickness: true,
-  textUnderlineOffset: true,
-  textShadow: t.shadows("textShadow")
-};
-var transform = {
-  clipPath: true,
-  transform: t.propT("transform", transformFunctions.transform),
-  transformOrigin: true,
-  translateX: t.spaceT("--chakra-translate-x"),
-  translateY: t.spaceT("--chakra-translate-y"),
-  skewX: t.degreeT("--chakra-skew-x"),
-  skewY: t.degreeT("--chakra-skew-y"),
-  scaleX: t.prop("--chakra-scale-x"),
-  scaleY: t.prop("--chakra-scale-y"),
-  scale: t.prop(["--chakra-scale-x", "--chakra-scale-y"]),
-  rotate: t.degreeT("--chakra-rotate")
-};
-var transition = {
-  transition: true,
-  transitionDelay: true,
-  animation: true,
-  willChange: true,
-  transitionDuration: t.prop("transitionDuration", "transition.duration"),
-  transitionProperty: t.prop("transitionProperty", "transition.property"),
-  transitionTimingFunction: t.prop(
-    "transitionTimingFunction",
-    "transition.easing"
-  )
-};
-var typography2 = {
-  fontFamily: t.prop("fontFamily", "fonts"),
-  fontSize: t.prop("fontSize", "fontSizes", transformFunctions.px),
-  fontWeight: t.prop("fontWeight", "fontWeights"),
-  lineHeight: t.prop("lineHeight", "lineHeights"),
-  letterSpacing: t.prop("letterSpacing", "letterSpacings"),
-  textAlign: true,
-  fontStyle: true,
-  textIndent: true,
-  wordBreak: true,
-  overflowWrap: true,
-  textOverflow: true,
-  textTransform: true,
-  whiteSpace: true,
-  isTruncated: {
-    transform(value) {
-      if (value === true) {
-        return {
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap"
-        };
+var sizes2 = {
+  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"
+        }
       }
     }
   },
-  noOfLines: {
-    static: {
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      display: "-webkit-box",
-      WebkitBoxOrient: "vertical",
-      WebkitLineClamp: "var(--chakra-line-clamp)"
-    },
-    property: "--chakra-line-clamp"
+  // styles for different sizes ("sm", "md", "lg")
+  sizes: sizes2,
+  // 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 scroll = {
-  scrollBehavior: true,
-  scrollSnapAlign: true,
-  scrollSnapStop: true,
-  scrollSnapType: true,
-  scrollMargin: t.spaceT("scrollMargin"),
-  scrollMarginTop: t.spaceT("scrollMarginTop"),
-  scrollMarginBottom: t.spaceT("scrollMarginBottom"),
-  scrollMarginLeft: t.spaceT("scrollMarginLeft"),
-  scrollMarginRight: t.spaceT("scrollMarginRight"),
-  scrollMarginX: t.spaceT(["scrollMarginLeft", "scrollMarginRight"]),
-  scrollMarginY: t.spaceT(["scrollMarginTop", "scrollMarginBottom"]),
-  scrollPadding: t.spaceT("scrollPadding"),
-  scrollPaddingTop: t.spaceT("scrollPaddingTop"),
-  scrollPaddingBottom: t.spaceT("scrollPaddingBottom"),
-  scrollPaddingLeft: t.spaceT("scrollPaddingLeft"),
-  scrollPaddingRight: t.spaceT("scrollPaddingRight"),
-  scrollPaddingX: t.spaceT(["scrollPaddingLeft", "scrollPaddingRight"]),
-  scrollPaddingY: t.spaceT(["scrollPaddingTop", "scrollPaddingBottom"])
-};
-function resolveReference(operand) {
-  if (isObject(operand) && operand.reference) {
-    return operand.reference;
-  }
-  return String(operand);
-}
-var toExpression = (operator, ...operands) => operands.map(resolveReference).join(` ${operator} `).replace(/calc/g, "");
-var add = (...operands) => `calc(${toExpression("+", ...operands)})`;
-var subtract = (...operands) => `calc(${toExpression("-", ...operands)})`;
-var multiply = (...operands) => `calc(${toExpression("*", ...operands)})`;
-var divide = (...operands) => `calc(${toExpression("/", ...operands)})`;
-var negate = (x) => {
-  const value = resolveReference(x);
-  if (value != null && !Number.isNaN(parseFloat(value))) {
-    return String(value).startsWith("-") ? String(value).slice(1) : `-${value}`;
+var input_default = Input;
+
+// src/ui/nypl-base-theme/foundations/global.ts
+var global2 = {
+  // styles for the `body`
+  body: {
+    bg: "white",
+    color: "black"
+  },
+  // styles for the `a`
+  a: {
+    color: "ui.link.primary",
+    _hover: {
+      textDecoration: "underline"
+    }
   }
-  return multiply(value, -1);
 };
-var calc = Object.assign(
-  (x) => ({
-    add: (...operands) => calc(add(x, ...operands)),
-    subtract: (...operands) => calc(subtract(x, ...operands)),
-    multiply: (...operands) => calc(multiply(x, ...operands)),
-    divide: (...operands) => calc(divide(x, ...operands)),
-    negate: () => calc(negate(x)),
-    toString: () => x.toString()
-  }),
-  {
-    add,
-    subtract,
-    multiply,
-    divide,
-    negate
+var global_default = global2;
+
+// src/ui/nypl-base-theme/components/form-label.ts
+var baseStyle2 = {
+  fontSize: "sm",
+  marginEnd: 0,
+  mb: 2,
+  fontWeight: "medium",
+  transition: "all 0.2s",
+  opacity: 1,
+  _disabled: {
+    opacity: 1
   }
-);
-function analyzeCSSValue2(value) {
-  const num = parseFloat(value.toString());
-  const unit = value.toString().replace(String(num), "");
-  return { unitless: !unit, value: num, unit };
-}
-function px(value) {
-  if (value == null)
-    return value;
-  const { unitless } = analyzeCSSValue2(value);
-  return unitless || typeof value === "number" ? `${value}px` : value;
-}
-function toMediaQueryString(min, max) {
-  const query = ["@media screen"];
-  if (min)
-    query.push("and", `(min-width: ${px(min)})`);
-  if (max)
-    query.push("and", `(max-width: ${px(max)})`);
-  return query.join(" ");
-}
-var state = {
-  hover: (str, post) => `${str}:hover ${post}, ${str}[data-hover] ${post}`,
-  focus: (str, post) => `${str}:focus ${post}, ${str}[data-focus] ${post}`,
-  focusVisible: (str, post) => `${str}:focus-visible ${post}`,
-  focusWithin: (str, post) => `${str}:focus-within ${post}`,
-  active: (str, post) => `${str}:active ${post}, ${str}[data-active] ${post}`,
-  disabled: (str, post) => `${str}:disabled ${post}, ${str}[data-disabled] ${post}`,
-  invalid: (str, post) => `${str}:invalid ${post}, ${str}[data-invalid] ${post}`,
-  checked: (str, post) => `${str}:checked ${post}, ${str}[data-checked] ${post}`,
-  indeterminate: (str, post) => `${str}:indeterminate ${post}, ${str}[aria-checked=mixed] ${post}, ${str}[data-indeterminate] ${post}`,
-  readOnly: (str, post) => `${str}:read-only ${post}, ${str}[readonly] ${post}, ${str}[data-read-only] ${post}`,
-  expanded: (str, post) => `${str}:read-only ${post}, ${str}[aria-expanded=true] ${post}, ${str}[data-expanded] ${post}`,
-  placeholderShown: (str, post) => `${str}:placeholder-shown ${post}`
 };
-var toGroup = (fn) => merge((v) => fn(v, "&"), "[role=group]", "[data-group]", ".group");
-var toPeer = (fn) => merge((v) => fn(v, "~ &"), "[data-peer]", ".peer");
-var merge = (fn, ...selectors) => selectors.map(fn).join(", ");
-var pseudoSelectors = {
-  _hover: "&:hover, &[data-hover]",
-  _active: "&:active, &[data-active]",
-  _focus: "&:focus, &[data-focus]",
-  _highlighted: "&[data-highlighted]",
-  _focusWithin: "&:focus-within",
-  _focusVisible: "&:focus-visible, &[data-focus-visible]",
-  _disabled: "&:disabled, &[disabled], &[aria-disabled=true], &[data-disabled]",
-  _readOnly: "&[aria-readonly=true], &[readonly], &[data-readonly]",
-  _before: "&::before",
-  _after: "&::after",
-  _empty: "&:empty",
-  _expanded: "&[aria-expanded=true], &[data-expanded]",
-  _checked: "&[aria-checked=true], &[data-checked]",
-  _grabbed: "&[aria-grabbed=true], &[data-grabbed]",
-  _pressed: "&[aria-pressed=true], &[data-pressed]",
-  _invalid: "&[aria-invalid=true], &[data-invalid]",
-  _valid: "&[data-valid], &[data-state=valid]",
-  _loading: "&[data-loading], &[aria-busy=true]",
-  _selected: "&[aria-selected=true], &[data-selected]",
-  _hidden: "&[hidden], &[data-hidden]",
-  _autofill: "&:-webkit-autofill",
-  _even: "&:nth-of-type(even)",
-  _odd: "&:nth-of-type(odd)",
-  _first: "&:first-of-type",
-  _firstLetter: "&::first-letter",
-  _last: "&:last-of-type",
-  _notFirst: "&:not(:first-of-type)",
-  _notLast: "&:not(:last-of-type)",
-  _visited: "&:visited",
-  _activeLink: "&[aria-current=page]",
-  _activeStep: "&[aria-current=step]",
-  _indeterminate: "&:indeterminate, &[aria-checked=mixed], &[data-indeterminate]",
-  _groupHover: toGroup(state.hover),
-  _peerHover: toPeer(state.hover),
-  _groupFocus: toGroup(state.focus),
-  _peerFocus: toPeer(state.focus),
-  _groupFocusVisible: toGroup(state.focusVisible),
-  _peerFocusVisible: toPeer(state.focusVisible),
-  _groupActive: toGroup(state.active),
-  _peerActive: toPeer(state.active),
-  _groupDisabled: toGroup(state.disabled),
-  _peerDisabled: toPeer(state.disabled),
-  _groupInvalid: toGroup(state.invalid),
-  _peerInvalid: toPeer(state.invalid),
-  _groupChecked: toGroup(state.checked),
-  _peerChecked: toPeer(state.checked),
-  _groupFocusWithin: toGroup(state.focusWithin),
-  _peerFocusWithin: toPeer(state.focusWithin),
-  _peerPlaceholderShown: toPeer(state.placeholderShown),
-  _placeholder: "&::placeholder",
-  _placeholderShown: "&:placeholder-shown",
-  _fullScreen: "&:fullscreen",
-  _selection: "&::selection",
-  _rtl: "[dir=rtl] &, &[dir=rtl]",
-  _ltr: "[dir=ltr] &, &[dir=ltr]",
-  _mediaDark: "@media (prefers-color-scheme: dark)",
-  _mediaReduceMotion: "@media (prefers-reduced-motion: reduce)",
-  _dark: ".chakra-ui-dark &:not([data-theme]),[data-theme=dark] &:not([data-theme]),&[data-theme=dark]",
-  _light: ".chakra-ui-light &:not([data-theme]),[data-theme=light] &:not([data-theme]),&[data-theme=light]",
-  _horizontal: "&[data-orientation=horizontal]",
-  _vertical: "&[data-orientation=vertical]"
+var form_label_default = {
+  baseStyle: baseStyle2
+};
+
+// src/ui/nypl-base-theme/components/form.ts
+var baseStyle3 = {
+  requiredIndicator: {
+    marginStart: 1,
+    color: "red.500"
+  },
+  helperText: {
+    mt: 2,
+    color: "black",
+    lineHeight: "normal",
+    fontSize: "xs"
+  }
 };
-var pseudoPropNames = Object.keys(
-  pseudoSelectors
-);
-function omit(object, keysToOmit = []) {
-  const clone = Object.assign({}, object);
-  for (const key of keysToOmit) {
-    if (key in clone) {
-      delete clone[key];
+var form_default = {
+  baseStyle: baseStyle3
+};
+
+// src/ui/nypl-base-theme/components/form-error.ts
+var baseStyle4 = {
+  text: {
+    color: "ui.error",
+    mt: 2,
+    fontSize: "xs"
+  },
+  icon: {
+    marginEnd: "0.5em",
+    color: "ui.error"
+  }
+};
+var form_error_default = {
+  baseStyle: baseStyle4
+};
+
+// src/ui/nypl-base-theme/components/text-area.ts
+var sizes3 = {
+  xs: input_default.sizes.xs.field,
+  sm: input_default.sizes.sm.field,
+  md: input_default.sizes.md.field,
+  lg: input_default.sizes.lg.field
+};
+var text_area_default = {
+  baseStyle: {
+    _disabled: {
+      bg: "ui.gray.x-light-cool"
     }
+  },
+  sizes: sizes3
+};
+
+// src/ui/nypl-base-theme/index.ts
+var theme = extendTheme(__spreadProps(__spreadValues({
+  styles: { global: global_default },
+  breakpoints: breakpoints_default,
+  radii: radii_default,
+  colors: colors_default2
+}, typography_default2), {
+  space: spacing_default,
+  /**
+   * Chakra documentation on component styles:
+   * https://chakra-ui.com/docs/theming/component-style
+   */
+  components: {
+    Button: button_default,
+    Checkbox: checkbox_default,
+    Input: input_default,
+    FormLabel: form_label_default,
+    Form: form_default,
+    FormError: form_error_default,
+    Textarea: text_area_default
   }
-  return clone;
-}
-var systemProps = (0, import_lodash3.default)(
-  {},
-  background,
-  border,
-  color,
-  flexbox,
-  layout,
-  filter,
-  ring,
-  interactivity,
-  grid,
-  others,
-  position,
-  effect,
-  space,
-  scroll,
-  typography2,
-  textDecoration,
-  transform,
-  list,
-  transition
-);
-var layoutSystem = Object.assign({}, space, layout, flexbox, grid, position);
-var layoutPropNames = Object.keys(
-  layoutSystem
-);
-var propNames = [...Object.keys(systemProps), ...pseudoPropNames];
-var styleProps = __spreadValues(__spreadValues({}, systemProps), pseudoSelectors);
-var isStyleProp = (prop) => prop in styleProps;
-var expandResponsive = (styles) => (theme2) => {
-  if (!theme2.__breakpoints)
-    return styles;
-  const { isResponsive, toArrayValue, media: medias } = theme2.__breakpoints;
-  const computedStyles = {};
-  for (const key in styles) {
-    let value = runIfFn(styles[key], theme2);
-    if (value == null)
-      continue;
-    value = isObject(value) && isResponsive(value) ? toArrayValue(value) : value;
-    if (!Array.isArray(value)) {
-      computedStyles[key] = value;
-      continue;
+}));
+var nypl_base_theme_default = theme;
+
+// src/ui/theme/components/button.ts
+var getButtonStyle = (getColor2) => ({
+  // 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: variantSolid2(getColor2),
+    settings: variantSettings(getColor2)
+  },
+  // default values for `size`, `variant`, `colorScheme`
+  defaultProps: {
+    size: "sm",
+    variant: "solid"
+  }
+});
+var variantSolid2 = (getColor2) => (props) => {
+  const { "aria-expanded": expanded } = props;
+  const bgColor = getColor2("ui.gray.light-warm", "ui.black", "ui.sepia");
+  const bgColorActive = getColor2(
+    "ui.gray.active",
+    "ui.gray.x-dark",
+    "ui.sepiaChecked"
+  );
+  const color2 = getColor2("gray.800", "ui.white", "gray.800");
+  const _focus = {
+    bgColor: bgColorActive,
+    color: color2,
+    ring: "2px",
+    ringInset: "inset"
+  };
+  const _hover = {
+    bgColor: bgColorActive,
+    color: color2,
+    _disabled: { bgColor }
+  };
+  const _active = { bgColor: bgColorActive, color: color2 };
+  const _checked = { bgColor, color: color2 };
+  const _disabled = { bgColor };
+  return {
+    border: "none",
+    borderColor: "gray.100",
+    height: "45px",
+    transition: "none",
+    fontSize: 0,
+    letterSpacing: 1,
+    maxWidth: "100%",
+    cursor: "pointer",
+    bgColor: expanded ? bgColorActive : bgColor,
+    color: color2,
+    _focus,
+    _hover,
+    _active,
+    _checked,
+    _disabled
+  };
+};
+var variantSettings = (getColor2) => (props) => {
+  const { bgColor } = props;
+  const color2 = getColor2("ui.black", "ui.white", "ui.black");
+  const checkedBgColor = getColor2(
+    "ui.gray.light-warm",
+    "ui.gray.x-dark",
+    "ui.sepiaChecked"
+  );
+  return __spreadProps(__spreadValues({}, variantSolid2(getColor2)(props)), {
+    bgColor: getColor2("ui.white", "ui.black", "ui.sepia"),
+    border: "1px solid",
+    color: color2,
+    py: 8,
+    width: [8, 16, 36],
+    fontSize: [0, 0, 2],
+    whiteSpace: ["normal", "normal", "nowrap"],
+    p: {
+      textAlign: "center"
+    },
+    _active: {
+      bgColor
+    },
+    _checked: {
+      color: color2,
+      bgColor: checkedBgColor,
+      borderBottomColor: checkedBgColor,
+      p: {
+        textDecoration: "underline",
+        textUnderlinePosition: "under"
+      }
+    },
+    _hover: {
+      bgColor
+    },
+    _focus: {
+      bgColor,
+      ring: "2px",
+      ringInset: "inset"
     }
-    const queries = value.slice(0, medias.length).length;
-    for (let index = 0; index < queries; index += 1) {
-      const media = medias == null ? void 0 : medias[index];
-      if (!media) {
-        computedStyles[key] = value[index];
-        continue;
+  });
+};
+var button_default2 = getButtonStyle;
+
+// src/ui/theme/index.ts
+function getTheme(colorMode = "day") {
+  return extendTheme2(
+    __spreadProps(__spreadValues({
+      colors: colors_default
+    }, typography_default), {
+      /**
+       * Chakra documentation on component styles:
+       * https://chakra-ui.com/docs/theming/component-style
+       */
+      components: {
+        Button: button_default2(getColor(colorMode)),
+        Text: text_default,
+        Alert: alert_default,
+        SkipNavigation: skipNavigation_default
+      },
+      currentColorMode: colorMode
+    }),
+    nypl_base_theme_default
+  );
+}
+
+// src/ui/ToggleButton.tsx
+function ToggleButton(props) {
+  const _a2 = props, {
+    children,
+    colorMode,
+    icon,
+    iconFill,
+    label,
+    value,
+    isChecked
+  } = _a2, rest = __objRest(_a2, [
+    "children",
+    "colorMode",
+    "icon",
+    "iconFill",
+    "label",
+    "value",
+    "isChecked"
+  ]);
+  const { getInputProps, getRadioProps } = useRadio(props);
+  const input = getInputProps();
+  const radio = getRadioProps();
+  const theme2 = useTheme2();
+  return (
+    // This will override the default theme if we specify the colorMode to the toggle button.
+    /* @__PURE__ */ React16.createElement(ThemeProvider, { theme: getTheme(colorMode != null ? colorMode : theme2.currentColorMode) }, /* @__PURE__ */ React16.createElement(fonts_default, null), /* @__PURE__ */ React16.createElement(ChakraBox, { as: "label", display: "flex", flexGrow: 1, "aria-label": label }, /* @__PURE__ */ React16.createElement("input", __spreadValues({}, input)), /* @__PURE__ */ React16.createElement(Button_default, __spreadValues(__spreadValues({ as: "div", variant: "settings", flexGrow: 1 }, radio), rest), icon && /* @__PURE__ */ React16.createElement(
+      Icon14,
+      {
+        as: icon,
+        verticalAlign: "middle",
+        mr: 1.5,
+        w: 6,
+        h: 6,
+        fill: iconFill && iconFill
       }
-      computedStyles[media] = computedStyles[media] || {};
-      if (value[index] == null) {
-        continue;
+    ), label && /* @__PURE__ */ React16.createElement(Text, null, label))))
+  );
+}
+var FontToggleButton = (props) => {
+  return /* @__PURE__ */ React16.createElement(ToggleButton, __spreadValues({ fontSize: [-2, -2, -1, -1, 0], py: 6 }, props));
+};
+var ColorModeToggleButton = (_a2) => {
+  var _b = _a2, {
+    bgColor
+  } = _b, rest = __objRest(_b, [
+    "bgColor"
+  ]);
+  return /* @__PURE__ */ React16.createElement(
+    ToggleButton,
+    __spreadValues({
+      sx: {
+        _checked: {
+          bgColor,
+          p: {
+            textDecoration: "underline",
+            textUnderlinePosition: "under"
+          }
+        }
       }
-      computedStyles[media][key] = value[index];
-    }
-  }
-  return computedStyles;
+    }, rest)
+  );
 };
-function splitByComma(value) {
-  const chunks = [];
-  let chunk2 = "";
-  let inParens = false;
-  for (let i = 0; i < value.length; i++) {
-    const char = value[i];
-    if (char === "(") {
-      inParens = true;
-      chunk2 += char;
-    } else if (char === ")") {
-      inParens = false;
-      chunk2 += char;
-    } else if (char === "," && !inParens) {
-      chunks.push(chunk2);
-      chunk2 = "";
-    } else {
-      chunk2 += char;
+var ToggleButton_default = ToggleButton;
+
+// src/ui/ToggleGroup.tsx
+import React17 from "react";
+import { Flex, useRadioGroup } from "@chakra-ui/react";
+var ToggleGroup = ({
+  value,
+  label,
+  name,
+  children,
+  onChange
+}) => {
+  const { getRootProps, getRadioProps } = useRadioGroup({
+    name,
+    onChange,
+    value
+  });
+  const group = getRootProps();
+  return /* @__PURE__ */ React17.createElement(Flex, __spreadProps(__spreadValues({}, group), { "aria-label": label, flex: "1 0 auto", flexWrap: "nowrap" }), React17.Children.map(children, (element) => {
+    try {
+      const value2 = element.props.value;
+      const radio = getRadioProps({ value: value2 });
+      return React17.cloneElement(element, __spreadValues({}, radio));
+    } catch (e) {
+      throw new Error(
+        "ToggleGroup expects ToggleButton children with `value` props."
+      );
     }
-  }
-  chunk2 = chunk2.trim();
-  if (chunk2) {
-    chunks.push(chunk2);
-  }
-  return chunks;
-}
-function isCssVar2(value) {
-  return /^var\(--.+\)$/.test(value);
-}
-var isCSSVariableTokenValue = (key, value) => key.startsWith("--") && typeof value === "string" && !isCssVar2(value);
-var resolveTokenValue = (theme2, value) => {
-  var _a2, _b;
-  if (value == null)
-    return value;
-  const getVar = (val) => {
-    var _a22, _b2;
-    return (_b2 = (_a22 = theme2.__cssMap) == null ? void 0 : _a22[val]) == null ? void 0 : _b2.varRef;
-  };
-  const getValue = (val) => {
-    var _a22;
-    return (_a22 = getVar(val)) != null ? _a22 : val;
-  };
-  const [tokenValue, fallbackValue] = splitByComma(value);
-  value = (_b = (_a2 = getVar(tokenValue)) != null ? _a2 : getValue(fallbackValue)) != null ? _b : getValue(value);
-  return value;
+  }));
 };
-function getCss(options) {
-  const { configs = {}, pseudos = {}, theme: theme2 } = options;
-  const css2 = (stylesOrFn, nested = false) => {
-    var _a2, _b, _c;
-    const _styles = runIfFn(stylesOrFn, theme2);
-    const styles = expandResponsive(_styles)(theme2);
-    let computedStyles = {};
-    for (let key in styles) {
-      const valueOrFn = styles[key];
-      let value = runIfFn(valueOrFn, theme2);
-      if (key in pseudos) {
-        key = pseudos[key];
+var ToggleGroup_default = ToggleGroup;
+
+// src/ui/PdfSettings.tsx
+import { MdOutlineZoomIn, MdOutlineZoomOut } from "react-icons/md";
+function PdfSettings(props) {
+  const { navigator, paginationValue } = props;
+  const { zoomOut, zoomIn, setScroll } = navigator;
+  const iconFill = "ui.gray.icon";
+  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(ButtonGroup, { display: "flex", spacing: 0 }, /* @__PURE__ */ React18.createElement(
+    Button_default,
+    {
+      flexGrow: 1,
+      "aria-label": "Zoom Out",
+      onClick: zoomOut,
+      variant: "settings"
+    },
+    /* @__PURE__ */ React18.createElement(Icon15, { as: MdOutlineZoomOut, w: 7, h: 7, pl: 1 }),
+    "Zoom Out"
+  ), /* @__PURE__ */ React18.createElement(
+    Button_default,
+    {
+      flexGrow: 1,
+      "aria-label": "Zoom In",
+      onClick: zoomIn,
+      variant: "settings"
+    },
+    /* @__PURE__ */ React18.createElement(Icon15, { as: MdOutlineZoomIn, w: 7, h: 7, pl: 1 }),
+    "Zoom In"
+  )), /* @__PURE__ */ React18.createElement(
+    ToggleGroup_default,
+    {
+      onChange: setScroll,
+      value: paginationValue,
+      label: "pagination options"
+    },
+    /* @__PURE__ */ React18.createElement(
+      ToggleButton_default,
+      {
+        value: "paginated",
+        borderRadius: "0 0 0 4px",
+        label: "Paginated",
+        icon: Paginated_default,
+        iconFill
       }
-      if (isCSSVariableTokenValue(key, value)) {
-        value = resolveTokenValue(theme2, value);
+    ),
+    /* @__PURE__ */ React18.createElement(
+      ToggleButton_default,
+      {
+        value: "scrolling",
+        borderRadius: "0 0 4px 0",
+        label: "Scrolling",
+        icon: Continuous_default,
+        iconFill
+      }
+    )
+  ));
+}
+
+// src/ui/HtmlSettings.tsx
+import * as React19 from "react";
+import { Box, ButtonGroup as ButtonGroup2, Heading, Text as Text2 } from "@chakra-ui/react";
+function HtmlSettings(props) {
+  const { navigator, iconFill, readerState, paginationValue } = props;
+  const buttonTextColor = useColorModeValue_default("ui.black", "ui.white", "ui.black");
+  const checkedButtonBgColor = useColorModeValue_default(
+    "ui.gray.light-warm",
+    "ui.gray.x-dark",
+    "ui.sepiaChecked"
+  );
+  if (!readerState.settings)
+    return null;
+  const { colorMode, fontFamily } = readerState.settings;
+  const {
+    setFontFamily,
+    decreaseFontSize,
+    increaseFontSize,
+    resetSettings,
+    setColorMode,
+    setScroll
+  } = navigator;
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
+    ToggleGroup_default,
+    {
+      value: fontFamily,
+      label: "text font options",
+      onChange: setFontFamily
+    },
+    /* @__PURE__ */ React19.createElement(FontToggleButton, { value: "publisher", label: "Default" }),
+    /* @__PURE__ */ React19.createElement(
+      FontToggleButton,
+      {
+        value: "serif",
+        label: "Serif",
+        fontFamily: "serif",
+        fontWeight: "regular"
+      }
+    ),
+    /* @__PURE__ */ React19.createElement(
+      FontToggleButton,
+      {
+        value: "sans-serif",
+        label: "Sans-Serif",
+        fontFamily: "body",
+        fontWeight: "regular"
+      }
+    ),
+    /* @__PURE__ */ React19.createElement(
+      FontToggleButton,
+      {
+        value: "open-dyslexic",
+        label: "Dyslexia",
+        fontFamily: "opendyslexic",
+        fontWeight: "regular"
+      }
+    )
+  ), /* @__PURE__ */ React19.createElement(
+    Box,
+    {
+      bgColor: checkedButtonBgColor,
+      display: "flex",
+      flexDirection: "column",
+      px: [3, 3, 7],
+      py: [4, 4, 5]
+    },
+    /* @__PURE__ */ React19.createElement(
+      Heading,
+      {
+        as: "h3",
+        color: buttonTextColor,
+        pb: [1.5, 1.5, 2.5],
+        fontSize: 2,
+        fontWeight: "light"
+      },
+      FONT_DETAILS[fontFamily].heading
+    ),
+    /* @__PURE__ */ React19.createElement(
+      Text2,
+      {
+        color: buttonTextColor,
+        fontFamily: FONT_DETAILS[fontFamily].token,
+        fontSize: -1,
+        fontWeight: FONT_DETAILS[fontFamily].fontWeight,
+        margin: 0
+      },
+      FONT_DETAILS[fontFamily].body
+    )
+  ), /* @__PURE__ */ React19.createElement(
+    ToggleGroup_default,
+    {
+      value: colorMode,
+      label: "reading theme options",
+      onChange: setColorMode
+    },
+    /* @__PURE__ */ React19.createElement(
+      ColorModeToggleButton,
+      {
+        colorMode: "day",
+        icon: Day_default,
+        value: "day",
+        label: "Day",
+        bgColor: "ui.white",
+        textColor: "ui.black"
       }
-      let config = configs[key];
-      if (config === true) {
-        config = { property: key };
+    ),
+    /* @__PURE__ */ React19.createElement(
+      ColorModeToggleButton,
+      {
+        colorMode: "sepia",
+        icon: Sepia_default,
+        value: "sepia",
+        label: "Sepia",
+        bgColor: "ui.sepia",
+        textColor: "ui.black"
       }
-      if (isObject(value)) {
-        computedStyles[key] = (_a2 = computedStyles[key]) != null ? _a2 : {};
-        computedStyles[key] = (0, import_lodash2.default)(
-          {},
-          computedStyles[key],
-          css2(value, true)
-        );
-        continue;
+    ),
+    /* @__PURE__ */ React19.createElement(
+      ColorModeToggleButton,
+      {
+        colorMode: "night",
+        icon: Night_default,
+        value: "night",
+        label: "Night",
+        bgColor: "ui.black",
+        textColor: "ui.white"
       }
-      let rawValue = (_c = (_b = config == null ? void 0 : config.transform) == null ? void 0 : _b.call(config, value, theme2, _styles)) != null ? _c : value;
-      rawValue = (config == null ? void 0 : config.processResult) ? css2(rawValue, true) : rawValue;
-      const configProperty = runIfFn(config == null ? void 0 : config.property, theme2);
-      if (!nested && (config == null ? void 0 : config.static)) {
-        const staticStyles = runIfFn(config.static, theme2);
-        computedStyles = (0, import_lodash2.default)({}, computedStyles, staticStyles);
+    )
+  ), /* @__PURE__ */ React19.createElement(ButtonGroup2, { display: "flex", spacing: 0 }, /* @__PURE__ */ React19.createElement(
+    Button_default,
+    {
+      flexGrow: 1,
+      "aria-label": "Reset settings",
+      onClick: resetSettings,
+      variant: "settings"
+    },
+    /* @__PURE__ */ React19.createElement(
+      Reset_default,
+      {
+        w: "45px",
+        h: "45px",
+        fill: areSettingsDefault(readerState.settings) ? "ui.gray.disabled" : iconFill
       }
-      if (configProperty && Array.isArray(configProperty)) {
-        for (const property of configProperty) {
-          computedStyles[property] = rawValue;
+    )
+  ), /* @__PURE__ */ React19.createElement(
+    Button_default,
+    {
+      "aria-label": "Decrease font size",
+      flexGrow: 1,
+      onClick: decreaseFontSize,
+      sx: {
+        _active: {
+          bgColor: checkedButtonBgColor
         }
-        continue;
-      }
-      if (configProperty) {
-        if (configProperty === "&" && isObject(rawValue)) {
-          computedStyles = (0, import_lodash2.default)({}, computedStyles, rawValue);
-        } else {
-          computedStyles[configProperty] = rawValue;
+      },
+      value: "decrease font size",
+      variant: "settings"
+    },
+    /* @__PURE__ */ React19.createElement(ReduceFont_default, { w: "45px", h: "45px", fill: iconFill })
+  ), /* @__PURE__ */ React19.createElement(
+    Button_default,
+    {
+      "aria-label": "Increase font size",
+      flexGrow: 1,
+      onClick: increaseFontSize,
+      sx: {
+        _active: {
+          bgColor: checkedButtonBgColor
         }
-        continue;
+      },
+      value: "increase font size",
+      variant: "settings"
+    },
+    /* @__PURE__ */ React19.createElement(EnlargeFont_default, { w: "45px", h: "45px", fill: iconFill })
+  )), /* @__PURE__ */ React19.createElement(
+    ToggleGroup_default,
+    {
+      onChange: setScroll,
+      value: paginationValue,
+      label: "pagination options"
+    },
+    /* @__PURE__ */ React19.createElement(
+      ToggleButton_default,
+      {
+        value: "paginated",
+        borderRadius: "0 0 0 4px",
+        label: "Paginated",
+        icon: Paginated_default,
+        iconFill
       }
-      if (isObject(rawValue)) {
-        computedStyles = (0, import_lodash2.default)({}, computedStyles, rawValue);
-        continue;
+    ),
+    /* @__PURE__ */ React19.createElement(
+      ToggleButton_default,
+      {
+        value: "scrolling",
+        borderRadius: "0 0 4px 0",
+        label: "Scrolling",
+        icon: Continuous_default,
+        iconFill
       }
-      computedStyles[key] = rawValue;
-    }
-    return computedStyles;
-  };
-  return css2;
+    )
+  ));
 }
-var css = (styles) => (theme2) => {
-  const cssFn = getCss({
-    theme: theme2,
-    pseudos: pseudoSelectors,
-    configs: systemProps
-  });
-  return cssFn(styles);
+var areSettingsDefault = (readerSettings) => {
+  if (!readerSettings) {
+    return false;
+  }
+  let setting;
+  for (setting in DEFAULT_SETTINGS) {
+    if (readerSettings[setting] !== DEFAULT_SETTINGS[setting]) {
+      return false;
+    }
+  }
+  return true;
 };
-function normalize2(value, toArray) {
-  if (Array.isArray(value))
-    return value;
-  if (isObject(value))
-    return toArray(value);
-  if (value != null)
-    return [value];
+
+// src/ui/SettingsButton.tsx
+function SettingsCard(props) {
+  var _a2, _b;
+  const [isOpen, setIsOpen] = React20.useState(false);
+  const open = () => setIsOpen(true);
+  const close = () => setIsOpen(false);
+  const contentBgColor = useColorModeValue_default("ui.white", "ui.black", "ui.white");
+  const iconFill = useColorModeValue_default(
+    "ui.gray.icon",
+    "ui.white",
+    "ui.gray.icon"
+  );
+  const paginationValue = ((_b = (_a2 = props.state) == null ? void 0 : _a2.settings) == null ? void 0 : _b.isScrolling) ? "scrolling" : "paginated";
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
+    Popover,
+    {
+      gutter: 0,
+      closeOnBlur: true,
+      placement: "bottom-start",
+      isOpen,
+      onClose: close,
+      onOpen: open,
+      autoFocus: true,
+      preventOverflow: true,
+      strategy: "fixed"
+    },
+    /* @__PURE__ */ React20.createElement(PopoverTrigger, null, /* @__PURE__ */ React20.createElement(
+      Button_default,
+      {
+        "aria-label": "Settings",
+        onClick: open,
+        onMouseDown: (e) => e.preventDefault(),
+        border: "none",
+        gap: [0, 0, 2]
+      },
+      /* @__PURE__ */ React20.createElement(Icon16, { as: ReaderSettings_default, fill: iconFill, w: 6, h: 6 }),
+      /* @__PURE__ */ React20.createElement(Text3, { variant: "headerNav" }, "Settings")
+    )),
+    /* @__PURE__ */ React20.createElement(
+      PopoverContent,
+      {
+        overflow: "hidden",
+        bgColor: contentBgColor,
+        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__ */ React20.createElement(PopoverBody, { p: 0 }, props.type === "PDF" && /* @__PURE__ */ React20.createElement(
+        PdfSettings,
+        {
+          navigator: props.navigator,
+          readerState: props.state,
+          paginationValue
+        }
+      ), props.type === "HTML" && /* @__PURE__ */ React20.createElement(
+        HtmlSettings,
+        {
+          navigator: props.navigator,
+          iconFill,
+          readerState: props.state,
+          paginationValue
+        }
+      ))
+    )
+  ));
+}
+
+// src/ui/TableOfContent.tsx
+import React24 from "react";
+import { Portal, Text as Text4, Icon as Icon17, Box as Box2 } from "@chakra-ui/react";
+
+// node_modules/@chakra-ui/system/dist/chunk-UIGT7YZF.mjs
+import { ThemeContext } from "@emotion/react";
+import { useContext } from "react";
+function useTheme3() {
+  const theme2 = useContext(
+    ThemeContext
+  );
+  if (!theme2) {
+    throw Error(
+      "useTheme: `theme` is undefined. Seems you forgot to wrap your app in `<ChakraProvider />` or `<ThemeProvider />`"
+    );
+  }
+  return theme2;
 }
-function getNextIndex(values, i) {
-  for (let j = i + 1; j < values.length; j++) {
-    if (values[j] != null)
-      return j;
+
+// node_modules/@chakra-ui/color-mode/dist/chunk-UQDW7KKV.mjs
+import { createContext, useContext as useContext2 } from "react";
+var ColorModeContext = createContext({});
+ColorModeContext.displayName = "ColorModeContext";
+function useColorMode() {
+  const context = useContext2(ColorModeContext);
+  if (context === void 0) {
+    throw new Error("useColorMode must be used within a ColorModeProvider");
   }
-  return -1;
+  return context;
 }
-function createResolver(theme2) {
-  const breakpointUtil = theme2.__breakpoints;
-  return function resolver(config, prop, value, props) {
-    var _a2, _b;
-    if (!breakpointUtil)
-      return;
-    const result = {};
-    const normalized = normalize2(value, breakpointUtil.toArrayValue);
-    if (!normalized)
-      return result;
-    const len = normalized.length;
-    const isSingle = len === 1;
-    const isMultipart = !!config.parts;
-    for (let i = 0; i < len; i++) {
-      const key = breakpointUtil.details[i];
-      const nextKey = breakpointUtil.details[getNextIndex(normalized, i)];
-      const query = toMediaQueryString(key.minW, nextKey == null ? void 0 : nextKey._minW);
-      const styles = runIfFn((_a2 = config[prop]) == null ? void 0 : _a2[normalized[i]], props);
-      if (!styles)
-        continue;
-      if (isMultipart) {
-        (_b = config.parts) == null ? void 0 : _b.forEach((part) => {
-          (0, import_lodash4.default)(result, {
-            [part]: isSingle ? styles[part] : { [query]: styles[part] }
-          });
-        });
-        continue;
-      }
-      if (!isMultipart) {
-        if (isSingle)
-          (0, import_lodash4.default)(result, styles);
-        else
-          result[query] = styles;
-        continue;
-      }
-      result[query] = styles;
+
+// node_modules/@chakra-ui/system/dist/chunk-7FWEOSAE.mjs
+function useChakra() {
+  const colorModeResult = useColorMode();
+  const theme2 = useTheme3();
+  return __spreadProps(__spreadValues({}, colorModeResult), { theme: theme2 });
+}
+
+// node_modules/@chakra-ui/shared-utils/dist/index.mjs
+function isObject(value) {
+  const type = typeof value;
+  return value != null && (type === "object" || type === "function") && !Array.isArray(value);
+}
+function runIfFn(valueOrFn, ...args) {
+  return isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn;
+}
+var isFunction = (value) => typeof value === "function";
+var dataAttr = (condition) => condition ? "" : void 0;
+
+// node_modules/@chakra-ui/styled-system/dist/index.mjs
+var import_lodash = __toESM(require_lodash(), 1);
+var import_lodash2 = __toESM(require_lodash(), 1);
+var import_lodash3 = __toESM(require_lodash(), 1);
+var import_lodash4 = __toESM(require_lodash(), 1);
+var isImportant = (value) => /!(important)?$/.test(value);
+var withoutImportant = (value) => typeof value === "string" ? value.replace(/!(important)?$/, "").trim() : value;
+var tokenToCSSVar = (scale, value) => (theme2) => {
+  const valueStr = String(value);
+  const important = isImportant(valueStr);
+  const valueWithoutImportant = withoutImportant(valueStr);
+  const key = scale ? `${scale}.${valueWithoutImportant}` : valueWithoutImportant;
+  let transformed = isObject(theme2.__cssMap) && key in theme2.__cssMap ? theme2.__cssMap[key].varRef : value;
+  transformed = withoutImportant(transformed);
+  return important ? `${transformed} !important` : transformed;
+};
+function createTransform(options) {
+  const { scale, transform: transform2, compose: compose2 } = options;
+  const fn = (value, theme2) => {
+    var _a2;
+    const _value = tokenToCSSVar(scale, value)(theme2);
+    let result = (_a2 = transform2 == null ? void 0 : transform2(_value, theme2)) != null ? _a2 : _value;
+    if (compose2) {
+      result = compose2(result, theme2);
     }
     return result;
   };
+  return fn;
 }
-function resolveStyleConfig(config) {
-  return (props) => {
-    var _a2;
-    const { variant, size: size2, theme: theme2 } = props;
-    const recipe = createResolver(theme2);
-    return (0, import_lodash4.default)(
-      {},
-      runIfFn((_a2 = config.baseStyle) != null ? _a2 : {}, props),
-      recipe(config, "sizes", size2, props),
-      recipe(config, "variants", variant, props)
-    );
+var pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
+function toConfig(scale, transform2) {
+  return (property) => {
+    const result = { property, scale };
+    result.transform = createTransform({
+      scale,
+      transform: transform2
+    });
+    return result;
   };
 }
-function omitThemingProps(props) {
-  return omit(props, ["styleConfig", "size", "variant", "colorScheme"]);
+var getRtl = ({ rtl, ltr }) => (theme2) => theme2.direction === "rtl" ? rtl : ltr;
+function logical(options) {
+  const { property, scale, transform: transform2 } = options;
+  return {
+    scale,
+    property: getRtl(property),
+    transform: scale ? createTransform({
+      scale,
+      compose: transform2
+    }) : transform2
+  };
+}
+var transformTemplate = [
+  "rotate(var(--chakra-rotate, 0))",
+  "scaleX(var(--chakra-scale-x, 1))",
+  "scaleY(var(--chakra-scale-y, 1))",
+  "skewX(var(--chakra-skew-x, 0))",
+  "skewY(var(--chakra-skew-y, 0))"
+];
+function getTransformTemplate() {
+  return [
+    "translateX(var(--chakra-translate-x, 0))",
+    "translateY(var(--chakra-translate-y, 0))",
+    ...transformTemplate
+  ].join(" ");
+}
+function getTransformGpuTemplate() {
+  return [
+    "translate3d(var(--chakra-translate-x, 0), var(--chakra-translate-y, 0), 0)",
+    ...transformTemplate
+  ].join(" ");
+}
+var filterTemplate = {
+  "--chakra-blur": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-brightness": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-contrast": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-grayscale": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-hue-rotate": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-invert": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-saturate": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-sepia": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-drop-shadow": "var(--chakra-empty,/*!*/ /*!*/)",
+  filter: [
+    "var(--chakra-blur)",
+    "var(--chakra-brightness)",
+    "var(--chakra-contrast)",
+    "var(--chakra-grayscale)",
+    "var(--chakra-hue-rotate)",
+    "var(--chakra-invert)",
+    "var(--chakra-saturate)",
+    "var(--chakra-sepia)",
+    "var(--chakra-drop-shadow)"
+  ].join(" ")
+};
+var backdropFilterTemplate = {
+  backdropFilter: [
+    "var(--chakra-backdrop-blur)",
+    "var(--chakra-backdrop-brightness)",
+    "var(--chakra-backdrop-contrast)",
+    "var(--chakra-backdrop-grayscale)",
+    "var(--chakra-backdrop-hue-rotate)",
+    "var(--chakra-backdrop-invert)",
+    "var(--chakra-backdrop-opacity)",
+    "var(--chakra-backdrop-saturate)",
+    "var(--chakra-backdrop-sepia)"
+  ].join(" "),
+  "--chakra-backdrop-blur": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-backdrop-brightness": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-backdrop-contrast": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-backdrop-grayscale": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-backdrop-hue-rotate": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-backdrop-invert": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-backdrop-opacity": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-backdrop-saturate": "var(--chakra-empty,/*!*/ /*!*/)",
+  "--chakra-backdrop-sepia": "var(--chakra-empty,/*!*/ /*!*/)"
+};
+function getRingTemplate(value) {
+  return {
+    "--chakra-ring-offset-shadow": `var(--chakra-ring-inset) 0 0 0 var(--chakra-ring-offset-width) var(--chakra-ring-offset-color)`,
+    "--chakra-ring-shadow": `var(--chakra-ring-inset) 0 0 0 calc(var(--chakra-ring-width) + var(--chakra-ring-offset-width)) var(--chakra-ring-color)`,
+    "--chakra-ring-width": value,
+    boxShadow: [
+      `var(--chakra-ring-offset-shadow)`,
+      `var(--chakra-ring-shadow)`,
+      `var(--chakra-shadow, 0 0 #0000)`
+    ].join(", ")
+  };
+}
+var flexDirectionTemplate = {
+  "row-reverse": {
+    space: "--chakra-space-x-reverse",
+    divide: "--chakra-divide-x-reverse"
+  },
+  "column-reverse": {
+    space: "--chakra-space-y-reverse",
+    divide: "--chakra-divide-y-reverse"
+  }
+};
+var directionMap = {
+  "to-t": "to top",
+  "to-tr": "to top right",
+  "to-r": "to right",
+  "to-br": "to bottom right",
+  "to-b": "to bottom",
+  "to-bl": "to bottom left",
+  "to-l": "to left",
+  "to-tl": "to top left"
+};
+var valueSet = new Set(Object.values(directionMap));
+var globalSet = /* @__PURE__ */ new Set([
+  "none",
+  "-moz-initial",
+  "inherit",
+  "initial",
+  "revert",
+  "unset"
+]);
+var trimSpace = (str) => str.trim();
+function parseGradient(value, theme2) {
+  if (value == null || globalSet.has(value))
+    return value;
+  const prevent = isCSSFunction(value) || globalSet.has(value);
+  if (!prevent)
+    return `url('${value}')`;
+  const regex = /(^[a-z-A-Z]+)\((.*)\)/g;
+  const results = regex.exec(value);
+  const type = results == null ? void 0 : results[1];
+  const values = results == null ? void 0 : results[2];
+  if (!type || !values)
+    return value;
+  const _type = type.includes("-gradient") ? type : `${type}-gradient`;
+  const [maybeDirection, ...stops] = values.split(",").map(trimSpace).filter(Boolean);
+  if ((stops == null ? void 0 : stops.length) === 0)
+    return value;
+  const direction = maybeDirection in directionMap ? directionMap[maybeDirection] : maybeDirection;
+  stops.unshift(direction);
+  const _values = stops.map((stop) => {
+    if (valueSet.has(stop))
+      return stop;
+    const firstStop = stop.indexOf(" ");
+    const [_color, _stop] = firstStop !== -1 ? [stop.substr(0, firstStop), stop.substr(firstStop + 1)] : [stop];
+    const _stopOrFunc = isCSSFunction(_stop) ? _stop : _stop && _stop.split(" ");
+    const key = `colors.${_color}`;
+    const color2 = key in theme2.__cssMap ? theme2.__cssMap[key].varRef : _color;
+    return _stopOrFunc ? [
+      color2,
+      ...Array.isArray(_stopOrFunc) ? _stopOrFunc : [_stopOrFunc]
+    ].join(" ") : color2;
+  });
+  return `${_type}(${_values.join(", ")})`;
+}
+var isCSSFunction = (value) => {
+  return typeof value === "string" && value.includes("(") && value.includes(")");
+};
+var gradientTransform = (value, theme2) => parseGradient(value, theme2 != null ? theme2 : {});
+function isCssVar(value) {
+  return /^var\(--.+\)$/.test(value);
 }
-
-// node_modules/@chakra-ui/theme-tools/dist/chunk-N4TQSR52.mjs
-var createBreakpoints = (config) => {
-  warn({
-    condition: true,
-    message: [
-      `[chakra-ui]: createBreakpoints(...) will be deprecated pretty soon`,
-      `simply pass the breakpoints as an object. Remove the createBreakpoints(..) call`
-    ].join("")
-  });
-  return __spreadValues({ base: "0em" }, config);
+var analyzeCSSValue = (value) => {
+  const num = parseFloat(value.toString());
+  const unit = value.toString().replace(String(num), "");
+  return { unitless: !unit, value: num, unit };
 };
-
-// src/ui/nypl-base-theme/foundations/breakpoints.ts
-var breakpoints_default = createBreakpoints({
-  sm: "20em",
-  // 320px
-  md: "38em",
-  // 600px
-  lg: "60em",
-  // 960px
-  xl: "80em",
-  // 1280px
-  "2xl": "96em"
-});
-
-// src/ui/nypl-base-theme/foundations/typography.ts
-var typography3 = {
-  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`
+var wrap = (str) => (value) => `${str}(${value})`;
+var transformFunctions = {
+  filter(value) {
+    return value !== "auto" ? value : filterTemplate;
   },
-  fontSizes: {
-    "-2": "0.75rem",
-    "-1": "0.875rem",
-    "0": "1rem",
-    "1": "1.125rem",
-    "2": "1.25rem",
-    "3": "1.75rem",
-    "4": "2.25rem",
-    "5": "3rem"
+  backdropFilter(value) {
+    return value !== "auto" ? value : backdropFilterTemplate;
   },
-  fontWeights: {
-    light: 300,
-    regular: 400,
-    medium: 500,
-    bold: 700
+  ring(value) {
+    return getRingTemplate(transformFunctions.px(value));
   },
-  lineHeights: [1, 1.1, 1.25, 1.5, 2, 2.5],
-  letterSpacings: {
-    tighter: "-0.05em",
-    tight: "-0.025em",
-    normal: "0",
-    wide: "0.025em",
-    wider: "0.05em",
-    widest: "0.1em"
-  }
-};
-var typography_default2 = typography3;
-
-// src/ui/nypl-base-theme/foundations/colors.ts
-var colors2 = {
-  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: {
-      active: "#D9D9D9",
-      disabled: "#979797",
-      icon: "#1C1B1F",
-      medium: "#BDBDBD",
-      dark: "#616161",
-      "x-dark": "#424242",
-      "light-cool": "#E0E0E0",
-      "light-warm": "#EFEDEB",
-      "x-light-cool": "#F5F5F5",
-      "x-light-warm": "#F8F8F7",
-      "xx-light-cool": "#FAFAFA"
-    }
+  bgClip(value) {
+    return value === "text" ? { color: "transparent", backgroundClip: "text" } : { backgroundClip: value };
   },
-  // brand fills. Only primary and secondary filled in for now.
-  brand: {
-    primary: "#C60917",
-    secondary: "#760000",
-    "nypl-red": "#D0343A"
+  transform(value) {
+    if (value === "auto")
+      return getTransformTemplate();
+    if (value === "auto-gpu")
+      return getTransformGpuTemplate();
+    return value;
   },
-  /**
-   * 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"
+  vh(value) {
+    return value === "$100vh" ? "var(--chakra-vh)" : value;
   },
-  // 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"
+  px(value) {
+    if (value == null)
+      return value;
+    const { unitless } = analyzeCSSValue(value);
+    return unitless || typeof value === "number" ? `${value}px` : value;
   },
-  // 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"
+  fraction(value) {
+    return !(typeof value === "number") || value > 1 ? value : `${value * 100}%`;
   },
-  // 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"
+  float(value, theme2) {
+    const map = { left: "right", right: "left" };
+    return theme2.direction === "rtl" ? map[value] : value;
+  },
+  degree(value) {
+    if (isCssVar(value) || value == null)
+      return value;
+    const unitless = typeof value === "string" && !value.endsWith("deg");
+    return typeof value === "number" || unitless ? `${value}deg` : value;
+  },
+  gradient: gradientTransform,
+  blur: wrap("blur"),
+  opacity: wrap("opacity"),
+  brightness: wrap("brightness"),
+  contrast: wrap("contrast"),
+  dropShadow: wrap("drop-shadow"),
+  grayscale: wrap("grayscale"),
+  hueRotate: wrap("hue-rotate"),
+  invert: wrap("invert"),
+  saturate: wrap("saturate"),
+  sepia: wrap("sepia"),
+  bgImage(value) {
+    if (value == null)
+      return value;
+    const prevent = isCSSFunction(value) || globalSet.has(value);
+    return !prevent ? `url(${value})` : value;
+  },
+  outline(value) {
+    const isNoneOrZero = String(value) === "0" || String(value) === "none";
+    return value !== null && isNoneOrZero ? { outline: "2px solid transparent", outlineOffset: "2px" } : { outline: value };
+  },
+  flexDirection(value) {
+    var _a2;
+    const { space: space2, divide: divide2 } = (_a2 = flexDirectionTemplate[value]) != null ? _a2 : {};
+    const result = { flexDirection: value };
+    if (space2)
+      result[space2] = 1;
+    if (divide2)
+      result[divide2] = 1;
+    return result;
+  }
+};
+var t = {
+  borderWidths: toConfig("borderWidths"),
+  borderStyles: toConfig("borderStyles"),
+  colors: toConfig("colors"),
+  borders: toConfig("borders"),
+  gradients: toConfig("gradients", transformFunctions.gradient),
+  radii: toConfig("radii", transformFunctions.px),
+  space: toConfig("space", pipe(transformFunctions.vh, transformFunctions.px)),
+  spaceT: toConfig("space", pipe(transformFunctions.vh, transformFunctions.px)),
+  degreeT(property) {
+    return { property, transform: transformFunctions.degree };
   },
-  // 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"
+  prop(property, scale, transform2) {
+    return __spreadValues({
+      property,
+      scale
+    }, scale && {
+      transform: createTransform({ scale, transform: transform2 })
+    });
   },
-  // 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"
-  }
+  propT(property, transform2) {
+    return { property, transform: transform2 };
+  },
+  sizes: toConfig("sizes", pipe(transformFunctions.vh, transformFunctions.px)),
+  sizesT: toConfig("sizes", pipe(transformFunctions.vh, transformFunctions.fraction)),
+  shadows: toConfig("shadows"),
+  logical,
+  blur: toConfig("blur", transformFunctions.blur)
 };
-var colors_default2 = colors2;
-
-// src/ui/nypl-base-theme/foundations/radii.ts
-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"
+var background = {
+  background: t.colors("background"),
+  backgroundColor: t.colors("backgroundColor"),
+  backgroundImage: t.gradients("backgroundImage"),
+  backgroundSize: true,
+  backgroundPosition: true,
+  backgroundRepeat: true,
+  backgroundAttachment: true,
+  backgroundClip: { transform: transformFunctions.bgClip },
+  bgSize: t.prop("backgroundSize"),
+  bgPosition: t.prop("backgroundPosition"),
+  bg: t.colors("background"),
+  bgColor: t.colors("backgroundColor"),
+  bgPos: t.prop("backgroundPosition"),
+  bgRepeat: t.prop("backgroundRepeat"),
+  bgAttachment: t.prop("backgroundAttachment"),
+  bgGradient: t.gradients("backgroundImage"),
+  bgClip: { transform: transformFunctions.bgClip }
 };
-var radii_default = radii;
-
-// src/ui/nypl-base-theme/foundations/spacing.ts
-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"
-  }
+Object.assign(background, {
+  bgImage: background.backgroundImage,
+  bgImg: background.backgroundImage
+});
+var border = {
+  border: t.borders("border"),
+  borderWidth: t.borderWidths("borderWidth"),
+  borderStyle: t.borderStyles("borderStyle"),
+  borderColor: t.colors("borderColor"),
+  borderRadius: t.radii("borderRadius"),
+  borderTop: t.borders("borderTop"),
+  borderBlockStart: t.borders("borderBlockStart"),
+  borderTopLeftRadius: t.radii("borderTopLeftRadius"),
+  borderStartStartRadius: t.logical({
+    scale: "radii",
+    property: {
+      ltr: "borderTopLeftRadius",
+      rtl: "borderTopRightRadius"
+    }
+  }),
+  borderEndStartRadius: t.logical({
+    scale: "radii",
+    property: {
+      ltr: "borderBottomLeftRadius",
+      rtl: "borderBottomRightRadius"
+    }
+  }),
+  borderTopRightRadius: t.radii("borderTopRightRadius"),
+  borderStartEndRadius: t.logical({
+    scale: "radii",
+    property: {
+      ltr: "borderTopRightRadius",
+      rtl: "borderTopLeftRadius"
+    }
+  }),
+  borderEndEndRadius: t.logical({
+    scale: "radii",
+    property: {
+      ltr: "borderBottomRightRadius",
+      rtl: "borderBottomLeftRadius"
+    }
+  }),
+  borderRight: t.borders("borderRight"),
+  borderInlineEnd: t.borders("borderInlineEnd"),
+  borderBottom: t.borders("borderBottom"),
+  borderBlockEnd: t.borders("borderBlockEnd"),
+  borderBottomLeftRadius: t.radii("borderBottomLeftRadius"),
+  borderBottomRightRadius: t.radii("borderBottomRightRadius"),
+  borderLeft: t.borders("borderLeft"),
+  borderInlineStart: {
+    property: "borderInlineStart",
+    scale: "borders"
+  },
+  borderInlineStartRadius: t.logical({
+    scale: "radii",
+    property: {
+      ltr: ["borderTopLeftRadius", "borderBottomLeftRadius"],
+      rtl: ["borderTopRightRadius", "borderBottomRightRadius"]
+    }
+  }),
+  borderInlineEndRadius: t.logical({
+    scale: "radii",
+    property: {
+      ltr: ["borderTopRightRadius", "borderBottomRightRadius"],
+      rtl: ["borderTopLeftRadius", "borderBottomLeftRadius"]
+    }
+  }),
+  borderX: t.borders(["borderLeft", "borderRight"]),
+  borderInline: t.borders("borderInline"),
+  borderY: t.borders(["borderTop", "borderBottom"]),
+  borderBlock: t.borders("borderBlock"),
+  borderTopWidth: t.borderWidths("borderTopWidth"),
+  borderBlockStartWidth: t.borderWidths("borderBlockStartWidth"),
+  borderTopColor: t.colors("borderTopColor"),
+  borderBlockStartColor: t.colors("borderBlockStartColor"),
+  borderTopStyle: t.borderStyles("borderTopStyle"),
+  borderBlockStartStyle: t.borderStyles("borderBlockStartStyle"),
+  borderBottomWidth: t.borderWidths("borderBottomWidth"),
+  borderBlockEndWidth: t.borderWidths("borderBlockEndWidth"),
+  borderBottomColor: t.colors("borderBottomColor"),
+  borderBlockEndColor: t.colors("borderBlockEndColor"),
+  borderBottomStyle: t.borderStyles("borderBottomStyle"),
+  borderBlockEndStyle: t.borderStyles("borderBlockEndStyle"),
+  borderLeftWidth: t.borderWidths("borderLeftWidth"),
+  borderInlineStartWidth: t.borderWidths("borderInlineStartWidth"),
+  borderLeftColor: t.colors("borderLeftColor"),
+  borderInlineStartColor: t.colors("borderInlineStartColor"),
+  borderLeftStyle: t.borderStyles("borderLeftStyle"),
+  borderInlineStartStyle: t.borderStyles("borderInlineStartStyle"),
+  borderRightWidth: t.borderWidths("borderRightWidth"),
+  borderInlineEndWidth: t.borderWidths("borderInlineEndWidth"),
+  borderRightColor: t.colors("borderRightColor"),
+  borderInlineEndColor: t.colors("borderInlineEndColor"),
+  borderRightStyle: t.borderStyles("borderRightStyle"),
+  borderInlineEndStyle: t.borderStyles("borderInlineEndStyle"),
+  borderTopRadius: t.radii(["borderTopLeftRadius", "borderTopRightRadius"]),
+  borderBottomRadius: t.radii([
+    "borderBottomLeftRadius",
+    "borderBottomRightRadius"
+  ]),
+  borderLeftRadius: t.radii(["borderTopLeftRadius", "borderBottomLeftRadius"]),
+  borderRightRadius: t.radii([
+    "borderTopRightRadius",
+    "borderBottomRightRadius"
+  ])
+};
+Object.assign(border, {
+  rounded: border.borderRadius,
+  roundedTop: border.borderTopRadius,
+  roundedTopLeft: border.borderTopLeftRadius,
+  roundedTopRight: border.borderTopRightRadius,
+  roundedTopStart: border.borderStartStartRadius,
+  roundedTopEnd: border.borderStartEndRadius,
+  roundedBottom: border.borderBottomRadius,
+  roundedBottomLeft: border.borderBottomLeftRadius,
+  roundedBottomRight: border.borderBottomRightRadius,
+  roundedBottomStart: border.borderEndStartRadius,
+  roundedBottomEnd: border.borderEndEndRadius,
+  roundedLeft: border.borderLeftRadius,
+  roundedRight: border.borderRightRadius,
+  roundedStart: border.borderInlineStartRadius,
+  roundedEnd: border.borderInlineEndRadius,
+  borderStart: border.borderInlineStart,
+  borderEnd: border.borderInlineEnd,
+  borderTopStartRadius: border.borderStartStartRadius,
+  borderTopEndRadius: border.borderStartEndRadius,
+  borderBottomStartRadius: border.borderEndStartRadius,
+  borderBottomEndRadius: border.borderEndEndRadius,
+  borderStartRadius: border.borderInlineStartRadius,
+  borderEndRadius: border.borderInlineEndRadius,
+  borderStartWidth: border.borderInlineStartWidth,
+  borderEndWidth: border.borderInlineEndWidth,
+  borderStartColor: border.borderInlineStartColor,
+  borderEndColor: border.borderInlineEndColor,
+  borderStartStyle: border.borderInlineStartStyle,
+  borderEndStyle: border.borderInlineEndStyle
+});
+var color = {
+  color: t.colors("color"),
+  textColor: t.colors("color"),
+  fill: t.colors("fill"),
+  stroke: t.colors("stroke")
 };
-var spacing_default = spacing;
-
-// src/ui/nypl-base-theme/components/checkbox.ts
-var baseStyleLabel = {
-  userSelect: "none",
-  fontWeight: "light",
-  _disabled: { color: "ui.gray.x-dark", opacity: 1 }
+var effect = {
+  boxShadow: t.shadows("boxShadow"),
+  mixBlendMode: true,
+  blendMode: t.prop("mixBlendMode"),
+  backgroundBlendMode: true,
+  bgBlendMode: t.prop("backgroundBlendMode"),
+  opacity: true
 };
-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"
-  }
+Object.assign(effect, {
+  shadow: effect.boxShadow
+});
+var filter = {
+  filter: { transform: transformFunctions.filter },
+  blur: t.blur("--chakra-blur"),
+  brightness: t.propT("--chakra-brightness", transformFunctions.brightness),
+  contrast: t.propT("--chakra-contrast", transformFunctions.contrast),
+  hueRotate: t.degreeT("--chakra-hue-rotate"),
+  invert: t.propT("--chakra-invert", transformFunctions.invert),
+  saturate: t.propT("--chakra-saturate", transformFunctions.saturate),
+  dropShadow: t.propT("--chakra-drop-shadow", transformFunctions.dropShadow),
+  backdropFilter: { transform: transformFunctions.backdropFilter },
+  backdropBlur: t.blur("--chakra-backdrop-blur"),
+  backdropBrightness: t.propT(
+    "--chakra-backdrop-brightness",
+    transformFunctions.brightness
+  ),
+  backdropContrast: t.propT("--chakra-backdrop-contrast", transformFunctions.contrast),
+  backdropHueRotate: t.degreeT("--chakra-backdrop-hue-rotate"),
+  backdropInvert: t.propT("--chakra-backdrop-invert", transformFunctions.invert),
+  backdropSaturate: t.propT("--chakra-backdrop-saturate", transformFunctions.saturate)
 };
-var checkbox_default = Checkbox;
-
-// src/ui/nypl-base-theme/components/input.ts
-var size = {
-  lg: {
-    fontSize: "lg",
-    px: 4,
-    h: 12,
-    borderRadius: "none"
-  },
-  md: {
-    fontSize: "sm",
-    px: 4,
-    h: 9,
-    borderRadius: "none"
+var flexbox = {
+  alignItems: true,
+  alignContent: true,
+  justifyItems: true,
+  justifyContent: true,
+  flexWrap: true,
+  flexDirection: { transform: transformFunctions.flexDirection },
+  flex: true,
+  flexFlow: true,
+  flexGrow: true,
+  flexShrink: true,
+  flexBasis: t.sizes("flexBasis"),
+  justifySelf: true,
+  alignSelf: true,
+  order: true,
+  placeItems: true,
+  placeContent: true,
+  placeSelf: true,
+  gap: t.space("gap"),
+  rowGap: t.space("rowGap"),
+  columnGap: t.space("columnGap")
+};
+Object.assign(flexbox, {
+  flexDir: flexbox.flexDirection
+});
+var grid = {
+  gridGap: t.space("gridGap"),
+  gridColumnGap: t.space("gridColumnGap"),
+  gridRowGap: t.space("gridRowGap"),
+  gridColumn: true,
+  gridRow: true,
+  gridAutoFlow: true,
+  gridAutoColumns: true,
+  gridColumnStart: true,
+  gridColumnEnd: true,
+  gridRowStart: true,
+  gridRowEnd: true,
+  gridAutoRows: true,
+  gridTemplate: true,
+  gridTemplateColumns: true,
+  gridTemplateRows: true,
+  gridTemplateAreas: true,
+  gridArea: true
+};
+var interactivity = {
+  appearance: true,
+  cursor: true,
+  resize: true,
+  userSelect: true,
+  pointerEvents: true,
+  outline: { transform: transformFunctions.outline },
+  outlineOffset: true,
+  outlineColor: t.colors("outlineColor")
+};
+var layout = {
+  width: t.sizesT("width"),
+  inlineSize: t.sizesT("inlineSize"),
+  height: t.sizes("height"),
+  blockSize: t.sizes("blockSize"),
+  boxSize: t.sizes(["width", "height"]),
+  minWidth: t.sizes("minWidth"),
+  minInlineSize: t.sizes("minInlineSize"),
+  minHeight: t.sizes("minHeight"),
+  minBlockSize: t.sizes("minBlockSize"),
+  maxWidth: t.sizes("maxWidth"),
+  maxInlineSize: t.sizes("maxInlineSize"),
+  maxHeight: t.sizes("maxHeight"),
+  maxBlockSize: t.sizes("maxBlockSize"),
+  overflow: true,
+  overflowX: true,
+  overflowY: true,
+  overscrollBehavior: true,
+  overscrollBehaviorX: true,
+  overscrollBehaviorY: true,
+  display: true,
+  aspectRatio: true,
+  hideFrom: {
+    scale: "breakpoints",
+    transform: (value, theme2) => {
+      var _a2, _b, _c;
+      const breakpoint = (_c = (_b = (_a2 = theme2.__breakpoints) == null ? void 0 : _a2.get(value)) == null ? void 0 : _b.minW) != null ? _c : value;
+      const mq = `@media screen and (min-width: ${breakpoint})`;
+      return { [mq]: { display: "none" } };
+    }
   },
-  sm: {
-    fontSize: "sm",
-    px: 3,
-    h: 8,
-    borderRadius: "none"
+  hideBelow: {
+    scale: "breakpoints",
+    transform: (value, theme2) => {
+      var _a2, _b, _c;
+      const breakpoint = (_c = (_b = (_a2 = theme2.__breakpoints) == null ? void 0 : _a2.get(value)) == null ? void 0 : _b._minW) != null ? _c : value;
+      const mq = `@media screen and (max-width: ${breakpoint})`;
+      return { [mq]: { display: "none" } };
+    }
   },
-  xs: {
-    fontSize: "xs",
-    px: 2,
-    h: 6,
-    borderRadius: "none"
+  verticalAlign: true,
+  boxSizing: true,
+  boxDecorationBreak: true,
+  float: t.propT("float", transformFunctions.float),
+  objectFit: true,
+  objectPosition: true,
+  visibility: true,
+  isolation: true
+};
+Object.assign(layout, {
+  w: layout.width,
+  h: layout.height,
+  minW: layout.minWidth,
+  maxW: layout.maxWidth,
+  minH: layout.minHeight,
+  maxH: layout.maxHeight,
+  overscroll: layout.overscrollBehavior,
+  overscrollX: layout.overscrollBehaviorX,
+  overscrollY: layout.overscrollBehaviorY
+});
+var list = {
+  listStyleType: true,
+  listStylePosition: true,
+  listStylePos: t.prop("listStylePosition"),
+  listStyleImage: true,
+  listStyleImg: t.prop("listStyleImage")
+};
+function get(obj, path, fallback, index) {
+  const key = typeof path === "string" ? path.split(".") : [path];
+  for (index = 0; index < key.length; index += 1) {
+    if (!obj)
+      break;
+    obj = obj[key[index]];
   }
+  return obj === void 0 ? fallback : obj;
+}
+var memoize = (fn) => {
+  const cache = /* @__PURE__ */ new WeakMap();
+  const memoizedFn = (obj, path, fallback, index) => {
+    if (typeof obj === "undefined") {
+      return fn(obj, path, fallback);
+    }
+    if (!cache.has(obj)) {
+      cache.set(obj, /* @__PURE__ */ new Map());
+    }
+    const map = cache.get(obj);
+    if (map.has(path)) {
+      return map.get(path);
+    }
+    const value = fn(obj, path, fallback, index);
+    map.set(path, value);
+    return value;
+  };
+  return memoizedFn;
+};
+var memoizedGet = memoize(get);
+var srOnly = {
+  border: "0px",
+  clip: "rect(0, 0, 0, 0)",
+  width: "1px",
+  height: "1px",
+  margin: "-1px",
+  padding: "0px",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  position: "absolute"
 };
-var sizes2 = {
-  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 srFocusable = {
+  position: "static",
+  width: "auto",
+  height: "auto",
+  clip: "auto",
+  padding: "0",
+  margin: "0",
+  overflow: "visible",
+  whiteSpace: "normal"
+};
+var getWithPriority = (theme2, key, styles) => {
+  const result = {};
+  const obj = memoizedGet(theme2, key, {});
+  for (const prop in obj) {
+    const isInStyles = prop in styles && styles[prop] != null;
+    if (!isInStyles)
+      result[prop] = obj[prop];
   }
+  return result;
 };
-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"
-        }
-      }
+var others = {
+  srOnly: {
+    transform(value) {
+      if (value === true)
+        return srOnly;
+      if (value === "focusable")
+        return srFocusable;
+      return {};
     }
   },
-  // styles for different sizes ("sm", "md", "lg")
-  sizes: sizes2,
-  // 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"
-        }
-      }
-    }
+  layerStyle: {
+    processResult: true,
+    transform: (value, theme2, styles) => getWithPriority(theme2, `layerStyles.${value}`, styles)
   },
-  // default values for `size`, `variant`, `colorScheme`
-  defaultProps: {
-    size: "md"
-  }
-};
-var input_default = Input;
-
-// src/ui/nypl-base-theme/foundations/global.ts
-var global2 = {
-  // styles for the `body`
-  body: {
-    bg: "white",
-    color: "black"
+  textStyle: {
+    processResult: true,
+    transform: (value, theme2, styles) => getWithPriority(theme2, `textStyles.${value}`, styles)
   },
-  // styles for the `a`
-  a: {
-    color: "ui.link.primary",
-    _hover: {
-      textDecoration: "underline"
-    }
-  }
-};
-var global_default = global2;
-
-// src/ui/nypl-base-theme/components/form-label.ts
-var baseStyle2 = {
-  fontSize: "sm",
-  marginEnd: 0,
-  mb: 2,
-  fontWeight: "medium",
-  transition: "all 0.2s",
-  opacity: 1,
-  _disabled: {
-    opacity: 1
+  apply: {
+    processResult: true,
+    transform: (value, theme2, styles) => getWithPriority(theme2, value, styles)
   }
 };
-var form_label_default = {
-  baseStyle: baseStyle2
+var position = {
+  position: true,
+  pos: t.prop("position"),
+  zIndex: t.prop("zIndex", "zIndices"),
+  inset: t.spaceT("inset"),
+  insetX: t.spaceT(["left", "right"]),
+  insetInline: t.spaceT("insetInline"),
+  insetY: t.spaceT(["top", "bottom"]),
+  insetBlock: t.spaceT("insetBlock"),
+  top: t.spaceT("top"),
+  insetBlockStart: t.spaceT("insetBlockStart"),
+  bottom: t.spaceT("bottom"),
+  insetBlockEnd: t.spaceT("insetBlockEnd"),
+  left: t.spaceT("left"),
+  insetInlineStart: t.logical({
+    scale: "space",
+    property: { ltr: "left", rtl: "right" }
+  }),
+  right: t.spaceT("right"),
+  insetInlineEnd: t.logical({
+    scale: "space",
+    property: { ltr: "right", rtl: "left" }
+  })
 };
-
-// src/ui/nypl-base-theme/components/form.ts
-var baseStyle3 = {
-  requiredIndicator: {
-    marginStart: 1,
-    color: "red.500"
-  },
-  helperText: {
-    mt: 2,
-    color: "black",
-    lineHeight: "normal",
-    fontSize: "xs"
-  }
+Object.assign(position, {
+  insetStart: position.insetInlineStart,
+  insetEnd: position.insetInlineEnd
+});
+var ring = {
+  ring: { transform: transformFunctions.ring },
+  ringColor: t.colors("--chakra-ring-color"),
+  ringOffset: t.prop("--chakra-ring-offset-width"),
+  ringOffsetColor: t.colors("--chakra-ring-offset-color"),
+  ringInset: t.prop("--chakra-ring-inset")
 };
-var form_default = {
-  baseStyle: baseStyle3
+var space = {
+  margin: t.spaceT("margin"),
+  marginTop: t.spaceT("marginTop"),
+  marginBlockStart: t.spaceT("marginBlockStart"),
+  marginRight: t.spaceT("marginRight"),
+  marginInlineEnd: t.spaceT("marginInlineEnd"),
+  marginBottom: t.spaceT("marginBottom"),
+  marginBlockEnd: t.spaceT("marginBlockEnd"),
+  marginLeft: t.spaceT("marginLeft"),
+  marginInlineStart: t.spaceT("marginInlineStart"),
+  marginX: t.spaceT(["marginInlineStart", "marginInlineEnd"]),
+  marginInline: t.spaceT("marginInline"),
+  marginY: t.spaceT(["marginTop", "marginBottom"]),
+  marginBlock: t.spaceT("marginBlock"),
+  padding: t.space("padding"),
+  paddingTop: t.space("paddingTop"),
+  paddingBlockStart: t.space("paddingBlockStart"),
+  paddingRight: t.space("paddingRight"),
+  paddingBottom: t.space("paddingBottom"),
+  paddingBlockEnd: t.space("paddingBlockEnd"),
+  paddingLeft: t.space("paddingLeft"),
+  paddingInlineStart: t.space("paddingInlineStart"),
+  paddingInlineEnd: t.space("paddingInlineEnd"),
+  paddingX: t.space(["paddingInlineStart", "paddingInlineEnd"]),
+  paddingInline: t.space("paddingInline"),
+  paddingY: t.space(["paddingTop", "paddingBottom"]),
+  paddingBlock: t.space("paddingBlock")
 };
-
-// src/ui/nypl-base-theme/components/form-error.ts
-var baseStyle4 = {
-  text: {
-    color: "ui.error",
-    mt: 2,
-    fontSize: "xs"
-  },
-  icon: {
-    marginEnd: "0.5em",
-    color: "ui.error"
-  }
+Object.assign(space, {
+  m: space.margin,
+  mt: space.marginTop,
+  mr: space.marginRight,
+  me: space.marginInlineEnd,
+  marginEnd: space.marginInlineEnd,
+  mb: space.marginBottom,
+  ml: space.marginLeft,
+  ms: space.marginInlineStart,
+  marginStart: space.marginInlineStart,
+  mx: space.marginX,
+  my: space.marginY,
+  p: space.padding,
+  pt: space.paddingTop,
+  py: space.paddingY,
+  px: space.paddingX,
+  pb: space.paddingBottom,
+  pl: space.paddingLeft,
+  ps: space.paddingInlineStart,
+  paddingStart: space.paddingInlineStart,
+  pr: space.paddingRight,
+  pe: space.paddingInlineEnd,
+  paddingEnd: space.paddingInlineEnd
+});
+var textDecoration = {
+  textDecorationColor: t.colors("textDecorationColor"),
+  textDecoration: true,
+  textDecor: { property: "textDecoration" },
+  textDecorationLine: true,
+  textDecorationStyle: true,
+  textDecorationThickness: true,
+  textUnderlineOffset: true,
+  textShadow: t.shadows("textShadow")
 };
-var form_error_default = {
-  baseStyle: baseStyle4
+var transform = {
+  clipPath: true,
+  transform: t.propT("transform", transformFunctions.transform),
+  transformOrigin: true,
+  translateX: t.spaceT("--chakra-translate-x"),
+  translateY: t.spaceT("--chakra-translate-y"),
+  skewX: t.degreeT("--chakra-skew-x"),
+  skewY: t.degreeT("--chakra-skew-y"),
+  scaleX: t.prop("--chakra-scale-x"),
+  scaleY: t.prop("--chakra-scale-y"),
+  scale: t.prop(["--chakra-scale-x", "--chakra-scale-y"]),
+  rotate: t.degreeT("--chakra-rotate")
 };
-
-// src/ui/nypl-base-theme/components/text-area.ts
-var sizes3 = {
-  xs: input_default.sizes.xs.field,
-  sm: input_default.sizes.sm.field,
-  md: input_default.sizes.md.field,
-  lg: input_default.sizes.lg.field
+var transition = {
+  transition: true,
+  transitionDelay: true,
+  animation: true,
+  willChange: true,
+  transitionDuration: t.prop("transitionDuration", "transition.duration"),
+  transitionProperty: t.prop("transitionProperty", "transition.property"),
+  transitionTimingFunction: t.prop(
+    "transitionTimingFunction",
+    "transition.easing"
+  )
 };
-var text_area_default = {
-  baseStyle: {
-    _disabled: {
-      bg: "ui.gray.x-light-cool"
+var typography3 = {
+  fontFamily: t.prop("fontFamily", "fonts"),
+  fontSize: t.prop("fontSize", "fontSizes", transformFunctions.px),
+  fontWeight: t.prop("fontWeight", "fontWeights"),
+  lineHeight: t.prop("lineHeight", "lineHeights"),
+  letterSpacing: t.prop("letterSpacing", "letterSpacings"),
+  textAlign: true,
+  fontStyle: true,
+  textIndent: true,
+  wordBreak: true,
+  overflowWrap: true,
+  textOverflow: true,
+  textTransform: true,
+  whiteSpace: true,
+  isTruncated: {
+    transform(value) {
+      if (value === true) {
+        return {
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        };
+      }
     }
   },
-  sizes: sizes3
+  noOfLines: {
+    static: {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      display: "-webkit-box",
+      WebkitBoxOrient: "vertical",
+      WebkitLineClamp: "var(--chakra-line-clamp)"
+    },
+    property: "--chakra-line-clamp"
+  }
 };
-
-// src/ui/nypl-base-theme/index.ts
-var theme = extendTheme(__spreadProps(__spreadValues({
-  styles: { global: global_default },
-  breakpoints: breakpoints_default,
-  radii: radii_default,
-  colors: colors_default2
-}, typography_default2), {
-  space: spacing_default,
-  /**
-   * Chakra documentation on component styles:
-   * https://chakra-ui.com/docs/theming/component-style
-   */
-  components: {
-    Button: button_default,
-    Checkbox: checkbox_default,
-    Input: input_default,
-    FormLabel: form_label_default,
-    Form: form_default,
-    FormError: form_error_default,
-    Textarea: text_area_default
+var scroll = {
+  scrollBehavior: true,
+  scrollSnapAlign: true,
+  scrollSnapStop: true,
+  scrollSnapType: true,
+  scrollMargin: t.spaceT("scrollMargin"),
+  scrollMarginTop: t.spaceT("scrollMarginTop"),
+  scrollMarginBottom: t.spaceT("scrollMarginBottom"),
+  scrollMarginLeft: t.spaceT("scrollMarginLeft"),
+  scrollMarginRight: t.spaceT("scrollMarginRight"),
+  scrollMarginX: t.spaceT(["scrollMarginLeft", "scrollMarginRight"]),
+  scrollMarginY: t.spaceT(["scrollMarginTop", "scrollMarginBottom"]),
+  scrollPadding: t.spaceT("scrollPadding"),
+  scrollPaddingTop: t.spaceT("scrollPaddingTop"),
+  scrollPaddingBottom: t.spaceT("scrollPaddingBottom"),
+  scrollPaddingLeft: t.spaceT("scrollPaddingLeft"),
+  scrollPaddingRight: t.spaceT("scrollPaddingRight"),
+  scrollPaddingX: t.spaceT(["scrollPaddingLeft", "scrollPaddingRight"]),
+  scrollPaddingY: t.spaceT(["scrollPaddingTop", "scrollPaddingBottom"])
+};
+function resolveReference(operand) {
+  if (isObject(operand) && operand.reference) {
+    return operand.reference;
   }
-}));
-var nypl_base_theme_default = theme;
-
-// src/ui/theme/components/button.ts
-var getButtonStyle = (getColor2) => ({
-  // 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: variantSolid2(getColor2),
-    settings: variantSettings(getColor2)
-  },
-  // default values for `size`, `variant`, `colorScheme`
-  defaultProps: {
-    size: "sm",
-    variant: "solid"
+  return String(operand);
+}
+var toExpression = (operator, ...operands) => operands.map(resolveReference).join(` ${operator} `).replace(/calc/g, "");
+var add = (...operands) => `calc(${toExpression("+", ...operands)})`;
+var subtract = (...operands) => `calc(${toExpression("-", ...operands)})`;
+var multiply = (...operands) => `calc(${toExpression("*", ...operands)})`;
+var divide = (...operands) => `calc(${toExpression("/", ...operands)})`;
+var negate = (x) => {
+  const value = resolveReference(x);
+  if (value != null && !Number.isNaN(parseFloat(value))) {
+    return String(value).startsWith("-") ? String(value).slice(1) : `-${value}`;
   }
-});
-var variantSolid2 = (getColor2) => (props) => {
-  const { "aria-expanded": expanded } = props;
-  const bgColor = getColor2("ui.gray.light-warm", "ui.black", "ui.sepia");
-  const bgColorActive = getColor2(
-    "ui.gray.active",
-    "ui.gray.x-dark",
-    "ui.sepiaChecked"
-  );
-  const color2 = getColor2("gray.800", "ui.white", "gray.800");
-  const _focus = {
-    bgColor: bgColorActive,
-    color: color2,
-    ring: "2px",
-    ringInset: "inset"
-  };
-  const _hover = {
-    bgColor: bgColorActive,
-    color: color2,
-    _disabled: { bgColor }
-  };
-  const _active = { bgColor: bgColorActive, color: color2 };
-  const _checked = { bgColor, color: color2 };
-  const _disabled = { bgColor };
-  return {
-    border: "none",
-    borderColor: "gray.100",
-    height: "45px",
-    transition: "none",
-    fontSize: 0,
-    letterSpacing: 1,
-    maxWidth: "100%",
-    cursor: "pointer",
-    bgColor: expanded ? bgColorActive : bgColor,
-    color: color2,
-    _focus,
-    _hover,
-    _active,
-    _checked,
-    _disabled
-  };
-};
-var variantSettings = (getColor2) => (props) => {
-  const { bgColor } = props;
-  const color2 = getColor2("ui.black", "ui.white", "ui.black");
-  const checkedBgColor = getColor2(
-    "ui.gray.light-warm",
-    "ui.gray.x-dark",
-    "ui.sepiaChecked"
-  );
-  return __spreadProps(__spreadValues({}, variantSolid2(getColor2)(props)), {
-    bgColor: getColor2("ui.white", "ui.black", "ui.sepia"),
-    border: "1px solid",
-    color: color2,
-    py: 8,
-    width: [8, 16, 36],
-    fontSize: [0, 0, 2],
-    whiteSpace: ["normal", "normal", "nowrap"],
-    p: {
-      textAlign: "center"
-    },
-    _active: {
-      bgColor
-    },
-    _checked: {
-      color: color2,
-      bgColor: checkedBgColor,
-      borderBottomColor: checkedBgColor,
-      p: {
-        textDecoration: "underline",
-        textUnderlinePosition: "under"
-      }
-    },
-    _hover: {
-      bgColor
-    },
-    _focus: {
-      bgColor,
-      ring: "2px",
-      ringInset: "inset"
-    }
-  });
+  return multiply(value, -1);
 };
-var button_default2 = getButtonStyle;
-
-// src/ui/theme/index.ts
-function getTheme(colorMode = "day") {
-  return extendTheme2(
-    __spreadProps(__spreadValues({
-      colors: colors_default
-    }, typography_default), {
-      /**
-       * Chakra documentation on component styles:
-       * https://chakra-ui.com/docs/theming/component-style
-       */
-      components: {
-        Button: button_default2(getColor(colorMode)),
-        Text: text_default,
-        Alert: alert_default,
-        SkipNavigation: skipNavigation_default
-      },
-      currentColorMode: colorMode
-    }),
-    nypl_base_theme_default
-  );
+var calc = Object.assign(
+  (x) => ({
+    add: (...operands) => calc(add(x, ...operands)),
+    subtract: (...operands) => calc(subtract(x, ...operands)),
+    multiply: (...operands) => calc(multiply(x, ...operands)),
+    divide: (...operands) => calc(divide(x, ...operands)),
+    negate: () => calc(negate(x)),
+    toString: () => x.toString()
+  }),
+  {
+    add,
+    subtract,
+    multiply,
+    divide,
+    negate
+  }
+);
+function analyzeCSSValue2(value) {
+  const num = parseFloat(value.toString());
+  const unit = value.toString().replace(String(num), "");
+  return { unitless: !unit, value: num, unit };
 }
-
-// src/ui/ToggleButton.tsx
-function ToggleButton(props) {
-  const _a2 = props, { children, colorMode, icon, iconFill, label, value } = _a2, rest = __objRest(_a2, ["children", "colorMode", "icon", "iconFill", "label", "value"]);
-  const { getInputProps, getCheckboxProps } = useRadio(props);
-  const input = getInputProps();
-  const checkbox = getCheckboxProps();
-  const theme2 = useTheme2();
-  return (
-    // This will override the default theme if we specify the colorMode to the toggle button.
-    /* @__PURE__ */ React16.createElement(ThemeProvider, { theme: getTheme(colorMode != null ? colorMode : theme2.currentColorMode) }, /* @__PURE__ */ React16.createElement(fonts_default, null), /* @__PURE__ */ React16.createElement(ChakraBox, { as: "label", display: "flex", flexGrow: 1, "aria-label": label }, /* @__PURE__ */ React16.createElement("input", __spreadValues({}, input)), /* @__PURE__ */ React16.createElement(
-      Button_default,
-      __spreadValues(__spreadValues({
-        as: "div",
-        variant: "settings",
-        flexGrow: 1
-      }, checkbox), rest),
-      icon && /* @__PURE__ */ React16.createElement(
-        Icon14,
-        {
-          as: icon,
-          verticalAlign: "middle",
-          mr: 1.5,
-          w: 6,
-          h: 6,
-          fill: iconFill && iconFill
-        }
-      ),
-      label && /* @__PURE__ */ React16.createElement(Text, null, label)
-    )))
-  );
+function px(value) {
+  if (value == null)
+    return value;
+  const { unitless } = analyzeCSSValue2(value);
+  return unitless || typeof value === "number" ? `${value}px` : value;
 }
-var FontToggleButton = (props) => {
-  return /* @__PURE__ */ React16.createElement(ToggleButton, __spreadValues({ fontSize: [-2, -2, -1, -1, 0], py: 6 }, props));
+function toMediaQueryString(min, max) {
+  const query = ["@media screen"];
+  if (min)
+    query.push("and", `(min-width: ${px(min)})`);
+  if (max)
+    query.push("and", `(max-width: ${px(max)})`);
+  return query.join(" ");
+}
+var state = {
+  hover: (str, post) => `${str}:hover ${post}, ${str}[data-hover] ${post}`,
+  focus: (str, post) => `${str}:focus ${post}, ${str}[data-focus] ${post}`,
+  focusVisible: (str, post) => `${str}:focus-visible ${post}`,
+  focusWithin: (str, post) => `${str}:focus-within ${post}`,
+  active: (str, post) => `${str}:active ${post}, ${str}[data-active] ${post}`,
+  disabled: (str, post) => `${str}:disabled ${post}, ${str}[data-disabled] ${post}`,
+  invalid: (str, post) => `${str}:invalid ${post}, ${str}[data-invalid] ${post}`,
+  checked: (str, post) => `${str}:checked ${post}, ${str}[data-checked] ${post}`,
+  indeterminate: (str, post) => `${str}:indeterminate ${post}, ${str}[aria-checked=mixed] ${post}, ${str}[data-indeterminate] ${post}`,
+  readOnly: (str, post) => `${str}:read-only ${post}, ${str}[readonly] ${post}, ${str}[data-read-only] ${post}`,
+  expanded: (str, post) => `${str}:read-only ${post}, ${str}[aria-expanded=true] ${post}, ${str}[data-expanded] ${post}`,
+  placeholderShown: (str, post) => `${str}:placeholder-shown ${post}`
 };
-var ColorModeToggleButton = (_a2) => {
-  var _b = _a2, {
-    bgColor
-  } = _b, rest = __objRest(_b, [
-    "bgColor"
-  ]);
-  return /* @__PURE__ */ React16.createElement(
-    ToggleButton,
-    __spreadValues({
-      sx: {
-        _checked: {
-          bgColor,
-          p: {
-            textDecoration: "underline",
-            textUnderlinePosition: "under"
-          }
-        }
-      }
-    }, rest)
-  );
+var toGroup = (fn) => merge((v) => fn(v, "&"), "[role=group]", "[data-group]", ".group");
+var toPeer = (fn) => merge((v) => fn(v, "~ &"), "[data-peer]", ".peer");
+var merge = (fn, ...selectors) => selectors.map(fn).join(", ");
+var pseudoSelectors = {
+  _hover: "&:hover, &[data-hover]",
+  _active: "&:active, &[data-active]",
+  _focus: "&:focus, &[data-focus]",
+  _highlighted: "&[data-highlighted]",
+  _focusWithin: "&:focus-within",
+  _focusVisible: "&:focus-visible, &[data-focus-visible]",
+  _disabled: "&:disabled, &[disabled], &[aria-disabled=true], &[data-disabled]",
+  _readOnly: "&[aria-readonly=true], &[readonly], &[data-readonly]",
+  _before: "&::before",
+  _after: "&::after",
+  _empty: "&:empty",
+  _expanded: "&[aria-expanded=true], &[data-expanded]",
+  _checked: "&[aria-checked=true], &[data-checked]",
+  _grabbed: "&[aria-grabbed=true], &[data-grabbed]",
+  _pressed: "&[aria-pressed=true], &[data-pressed]",
+  _invalid: "&[aria-invalid=true], &[data-invalid]",
+  _valid: "&[data-valid], &[data-state=valid]",
+  _loading: "&[data-loading], &[aria-busy=true]",
+  _selected: "&[aria-selected=true], &[data-selected]",
+  _hidden: "&[hidden], &[data-hidden]",
+  _autofill: "&:-webkit-autofill",
+  _even: "&:nth-of-type(even)",
+  _odd: "&:nth-of-type(odd)",
+  _first: "&:first-of-type",
+  _firstLetter: "&::first-letter",
+  _last: "&:last-of-type",
+  _notFirst: "&:not(:first-of-type)",
+  _notLast: "&:not(:last-of-type)",
+  _visited: "&:visited",
+  _activeLink: "&[aria-current=page]",
+  _activeStep: "&[aria-current=step]",
+  _indeterminate: "&:indeterminate, &[aria-checked=mixed], &[data-indeterminate]",
+  _groupHover: toGroup(state.hover),
+  _peerHover: toPeer(state.hover),
+  _groupFocus: toGroup(state.focus),
+  _peerFocus: toPeer(state.focus),
+  _groupFocusVisible: toGroup(state.focusVisible),
+  _peerFocusVisible: toPeer(state.focusVisible),
+  _groupActive: toGroup(state.active),
+  _peerActive: toPeer(state.active),
+  _groupDisabled: toGroup(state.disabled),
+  _peerDisabled: toPeer(state.disabled),
+  _groupInvalid: toGroup(state.invalid),
+  _peerInvalid: toPeer(state.invalid),
+  _groupChecked: toGroup(state.checked),
+  _peerChecked: toPeer(state.checked),
+  _groupFocusWithin: toGroup(state.focusWithin),
+  _peerFocusWithin: toPeer(state.focusWithin),
+  _peerPlaceholderShown: toPeer(state.placeholderShown),
+  _placeholder: "&::placeholder",
+  _placeholderShown: "&:placeholder-shown",
+  _fullScreen: "&:fullscreen",
+  _selection: "&::selection",
+  _rtl: "[dir=rtl] &, &[dir=rtl]",
+  _ltr: "[dir=ltr] &, &[dir=ltr]",
+  _mediaDark: "@media (prefers-color-scheme: dark)",
+  _mediaReduceMotion: "@media (prefers-reduced-motion: reduce)",
+  _dark: ".chakra-ui-dark &:not([data-theme]),[data-theme=dark] &:not([data-theme]),&[data-theme=dark]",
+  _light: ".chakra-ui-light &:not([data-theme]),[data-theme=light] &:not([data-theme]),&[data-theme=light]",
+  _horizontal: "&[data-orientation=horizontal]",
+  _vertical: "&[data-orientation=vertical]"
 };
-var ToggleButton_default = ToggleButton;
-
-// src/ui/ToggleGroup.tsx
-import React17 from "react";
-import { Flex, useRadioGroup } from "@chakra-ui/react";
-var ToggleGroup = ({
-  value,
-  label,
-  name,
-  children,
-  onChange
-}) => {
-  const { getRootProps, getRadioProps } = useRadioGroup({
-    name,
-    onChange,
-    value
-  });
-  const group = getRootProps();
-  return /* @__PURE__ */ React17.createElement(Flex, __spreadProps(__spreadValues({}, group), { "aria-label": label, flex: "1 0 auto", flexWrap: "nowrap" }), React17.Children.map(children, (element) => {
-    try {
-      const value2 = element.props.value;
-      const radio = getRadioProps({ value: value2 });
-      return React17.cloneElement(element, __spreadValues({}, radio));
-    } catch (e) {
-      throw new Error(
-        "ToggleGroup expects ToggleButton children with `value` props."
-      );
+var pseudoPropNames = Object.keys(
+  pseudoSelectors
+);
+function omit(object, keysToOmit = []) {
+  const clone = Object.assign({}, object);
+  for (const key of keysToOmit) {
+    if (key in clone) {
+      delete clone[key];
     }
-  }));
-};
-var ToggleGroup_default = ToggleGroup;
-
-// src/ui/PdfSettings.tsx
-import { MdOutlineZoomIn, MdOutlineZoomOut } from "react-icons/md";
-function PdfSettings(props) {
-  const { navigator, paginationValue } = props;
-  const { zoomOut, zoomIn, setScroll } = navigator;
-  const iconFill = "ui.gray.icon";
-  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(ButtonGroup, { display: "flex", spacing: 0 }, /* @__PURE__ */ React18.createElement(
-    Button_default,
-    {
-      flexGrow: 1,
-      "aria-label": "Zoom Out",
-      onClick: zoomOut,
-      variant: "settings"
-    },
-    /* @__PURE__ */ React18.createElement(Icon15, { as: MdOutlineZoomOut, w: 7, h: 7, pl: 1 }),
-    "Zoom Out"
-  ), /* @__PURE__ */ React18.createElement(
-    Button_default,
-    {
-      flexGrow: 1,
-      "aria-label": "Zoom In",
-      onClick: zoomIn,
-      variant: "settings"
-    },
-    /* @__PURE__ */ React18.createElement(Icon15, { as: MdOutlineZoomIn, w: 7, h: 7, pl: 1 }),
-    "Zoom In"
-  )), /* @__PURE__ */ React18.createElement(
-    ToggleGroup_default,
-    {
-      onChange: setScroll,
-      value: paginationValue,
-      label: "pagination options"
-    },
-    /* @__PURE__ */ React18.createElement(
-      ToggleButton_default,
-      {
-        value: "paginated",
-        borderRadius: "0 0 0 4px",
-        label: "Paginated",
-        icon: Paginated_default,
-        iconFill
+  }
+  return clone;
+}
+var systemProps = (0, import_lodash3.default)(
+  {},
+  background,
+  border,
+  color,
+  flexbox,
+  layout,
+  filter,
+  ring,
+  interactivity,
+  grid,
+  others,
+  position,
+  effect,
+  space,
+  scroll,
+  typography3,
+  textDecoration,
+  transform,
+  list,
+  transition
+);
+var layoutSystem = Object.assign({}, space, layout, flexbox, grid, position);
+var layoutPropNames = Object.keys(
+  layoutSystem
+);
+var propNames = [...Object.keys(systemProps), ...pseudoPropNames];
+var styleProps = __spreadValues(__spreadValues({}, systemProps), pseudoSelectors);
+var isStyleProp = (prop) => prop in styleProps;
+var expandResponsive = (styles) => (theme2) => {
+  if (!theme2.__breakpoints)
+    return styles;
+  const { isResponsive, toArrayValue, media: medias } = theme2.__breakpoints;
+  const computedStyles = {};
+  for (const key in styles) {
+    let value = runIfFn(styles[key], theme2);
+    if (value == null)
+      continue;
+    value = isObject(value) && isResponsive(value) ? toArrayValue(value) : value;
+    if (!Array.isArray(value)) {
+      computedStyles[key] = value;
+      continue;
+    }
+    const queries = value.slice(0, medias.length).length;
+    for (let index = 0; index < queries; index += 1) {
+      const media = medias == null ? void 0 : medias[index];
+      if (!media) {
+        computedStyles[key] = value[index];
+        continue;
       }
-    ),
-    /* @__PURE__ */ React18.createElement(
-      ToggleButton_default,
-      {
-        value: "scrolling",
-        borderRadius: "0 0 4px 0",
-        label: "Scrolling",
-        icon: Continuous_default,
-        iconFill
+      computedStyles[media] = computedStyles[media] || {};
+      if (value[index] == null) {
+        continue;
       }
-    )
-  ));
+      computedStyles[media][key] = value[index];
+    }
+  }
+  return computedStyles;
+};
+function splitByComma(value) {
+  const chunks = [];
+  let chunk2 = "";
+  let inParens = false;
+  for (let i = 0; i < value.length; i++) {
+    const char = value[i];
+    if (char === "(") {
+      inParens = true;
+      chunk2 += char;
+    } else if (char === ")") {
+      inParens = false;
+      chunk2 += char;
+    } else if (char === "," && !inParens) {
+      chunks.push(chunk2);
+      chunk2 = "";
+    } else {
+      chunk2 += char;
+    }
+  }
+  chunk2 = chunk2.trim();
+  if (chunk2) {
+    chunks.push(chunk2);
+  }
+  return chunks;
 }
-
-// src/ui/HtmlSettings.tsx
-import * as React19 from "react";
-import { Box, ButtonGroup as ButtonGroup2, Heading, Text as Text2 } from "@chakra-ui/react";
-function HtmlSettings(props) {
-  const { navigator, iconFill, readerState, paginationValue } = props;
-  const buttonTextColor = useColorModeValue_default("ui.black", "ui.white", "ui.black");
-  const checkedButtonBgColor = useColorModeValue_default(
-    "ui.gray.light-warm",
-    "ui.gray.x-dark",
-    "ui.sepiaChecked"
-  );
-  if (!readerState.settings)
-    return null;
-  const { colorMode, fontFamily } = readerState.settings;
-  const {
-    setFontFamily,
-    decreaseFontSize,
-    increaseFontSize,
-    resetSettings,
-    setColorMode,
-    setScroll
-  } = navigator;
-  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
-    ToggleGroup_default,
-    {
-      value: fontFamily,
-      label: "text font options",
-      onChange: setFontFamily
-    },
-    /* @__PURE__ */ React19.createElement(FontToggleButton, { value: "publisher", label: "Default" }),
-    /* @__PURE__ */ React19.createElement(
-      FontToggleButton,
-      {
-        value: "serif",
-        label: "Serif",
-        fontFamily: "serif",
-        fontWeight: "regular"
-      }
-    ),
-    /* @__PURE__ */ React19.createElement(
-      FontToggleButton,
-      {
-        value: "sans-serif",
-        label: "Sans-Serif",
-        fontFamily: "body",
-        fontWeight: "regular"
-      }
-    ),
-    /* @__PURE__ */ React19.createElement(
-      FontToggleButton,
-      {
-        value: "open-dyslexic",
-        label: "Dyslexia",
-        fontFamily: "opendyslexic",
-        fontWeight: "regular"
-      }
-    )
-  ), /* @__PURE__ */ React19.createElement(
-    Box,
-    {
-      bgColor: checkedButtonBgColor,
-      display: "flex",
-      flexDirection: "column",
-      px: [3, 3, 7],
-      py: [4, 4, 5]
-    },
-    /* @__PURE__ */ React19.createElement(
-      Heading,
-      {
-        as: "h3",
-        color: buttonTextColor,
-        pb: [1.5, 1.5, 2.5],
-        fontSize: 2,
-        fontWeight: "light"
-      },
-      FONT_DETAILS[fontFamily].heading
-    ),
-    /* @__PURE__ */ React19.createElement(
-      Text2,
-      {
-        color: buttonTextColor,
-        fontFamily: FONT_DETAILS[fontFamily].token,
-        fontSize: -1,
-        fontWeight: FONT_DETAILS[fontFamily].fontWeight,
-        margin: 0
-      },
-      FONT_DETAILS[fontFamily].body
-    )
-  ), /* @__PURE__ */ React19.createElement(
-    ToggleGroup_default,
-    {
-      value: colorMode,
-      label: "reading theme options",
-      onChange: setColorMode
-    },
-    /* @__PURE__ */ React19.createElement(
-      ColorModeToggleButton,
-      {
-        colorMode: "day",
-        icon: Day_default,
-        value: "day",
-        label: "Day",
-        bgColor: "ui.white",
-        textColor: "ui.black"
+function isCssVar2(value) {
+  return /^var\(--.+\)$/.test(value);
+}
+var isCSSVariableTokenValue = (key, value) => key.startsWith("--") && typeof value === "string" && !isCssVar2(value);
+var resolveTokenValue = (theme2, value) => {
+  var _a2, _b;
+  if (value == null)
+    return value;
+  const getVar = (val) => {
+    var _a22, _b2;
+    return (_b2 = (_a22 = theme2.__cssMap) == null ? void 0 : _a22[val]) == null ? void 0 : _b2.varRef;
+  };
+  const getValue = (val) => {
+    var _a22;
+    return (_a22 = getVar(val)) != null ? _a22 : val;
+  };
+  const [tokenValue, fallbackValue] = splitByComma(value);
+  value = (_b = (_a2 = getVar(tokenValue)) != null ? _a2 : getValue(fallbackValue)) != null ? _b : getValue(value);
+  return value;
+};
+function getCss(options) {
+  const { configs = {}, pseudos = {}, theme: theme2 } = options;
+  const css2 = (stylesOrFn, nested = false) => {
+    var _a2, _b, _c;
+    const _styles = runIfFn(stylesOrFn, theme2);
+    const styles = expandResponsive(_styles)(theme2);
+    let computedStyles = {};
+    for (let key in styles) {
+      const valueOrFn = styles[key];
+      let value = runIfFn(valueOrFn, theme2);
+      if (key in pseudos) {
+        key = pseudos[key];
       }
-    ),
-    /* @__PURE__ */ React19.createElement(
-      ColorModeToggleButton,
-      {
-        colorMode: "sepia",
-        icon: Sepia_default,
-        value: "sepia",
-        label: "Sepia",
-        bgColor: "ui.sepia",
-        textColor: "ui.black"
+      if (isCSSVariableTokenValue(key, value)) {
+        value = resolveTokenValue(theme2, value);
       }
-    ),
-    /* @__PURE__ */ React19.createElement(
-      ColorModeToggleButton,
-      {
-        colorMode: "night",
-        icon: Night_default,
-        value: "night",
-        label: "Night",
-        bgColor: "ui.black",
-        textColor: "ui.white"
+      let config = configs[key];
+      if (config === true) {
+        config = { property: key };
       }
-    )
-  ), /* @__PURE__ */ React19.createElement(ButtonGroup2, { display: "flex", spacing: 0 }, /* @__PURE__ */ React19.createElement(
-    Button_default,
-    {
-      flexGrow: 1,
-      "aria-label": "Reset settings",
-      onClick: resetSettings,
-      variant: "settings"
-    },
-    /* @__PURE__ */ React19.createElement(
-      Reset_default,
-      {
-        w: "45px",
-        h: "45px",
-        fill: areSettingsDefault(readerState.settings) ? "ui.gray.disabled" : iconFill
+      if (isObject(value)) {
+        computedStyles[key] = (_a2 = computedStyles[key]) != null ? _a2 : {};
+        computedStyles[key] = (0, import_lodash2.default)(
+          {},
+          computedStyles[key],
+          css2(value, true)
+        );
+        continue;
       }
-    )
-  ), /* @__PURE__ */ React19.createElement(
-    Button_default,
-    {
-      "aria-label": "Decrease font size",
-      flexGrow: 1,
-      onClick: decreaseFontSize,
-      sx: {
-        _active: {
-          bgColor: checkedButtonBgColor
+      let rawValue = (_c = (_b = config == null ? void 0 : config.transform) == null ? void 0 : _b.call(config, value, theme2, _styles)) != null ? _c : value;
+      rawValue = (config == null ? void 0 : config.processResult) ? css2(rawValue, true) : rawValue;
+      const configProperty = runIfFn(config == null ? void 0 : config.property, theme2);
+      if (!nested && (config == null ? void 0 : config.static)) {
+        const staticStyles = runIfFn(config.static, theme2);
+        computedStyles = (0, import_lodash2.default)({}, computedStyles, staticStyles);
+      }
+      if (configProperty && Array.isArray(configProperty)) {
+        for (const property of configProperty) {
+          computedStyles[property] = rawValue;
         }
-      },
-      value: "decrease font size",
-      variant: "settings"
-    },
-    /* @__PURE__ */ React19.createElement(ReduceFont_default, { w: "45px", h: "45px", fill: iconFill })
-  ), /* @__PURE__ */ React19.createElement(
-    Button_default,
-    {
-      "aria-label": "Increase font size",
-      flexGrow: 1,
-      onClick: increaseFontSize,
-      sx: {
-        _active: {
-          bgColor: checkedButtonBgColor
+        continue;
+      }
+      if (configProperty) {
+        if (configProperty === "&" && isObject(rawValue)) {
+          computedStyles = (0, import_lodash2.default)({}, computedStyles, rawValue);
+        } else {
+          computedStyles[configProperty] = rawValue;
         }
-      },
-      value: "increase font size",
-      variant: "settings"
-    },
-    /* @__PURE__ */ React19.createElement(EnlargeFont_default, { w: "45px", h: "45px", fill: iconFill })
-  )), /* @__PURE__ */ React19.createElement(
-    ToggleGroup_default,
-    {
-      onChange: setScroll,
-      value: paginationValue,
-      label: "pagination options"
-    },
-    /* @__PURE__ */ React19.createElement(
-      ToggleButton_default,
-      {
-        value: "paginated",
-        borderRadius: "0 0 0 4px",
-        label: "Paginated",
-        icon: Paginated_default,
-        iconFill
+        continue;
       }
-    ),
-    /* @__PURE__ */ React19.createElement(
-      ToggleButton_default,
-      {
-        value: "scrolling",
-        borderRadius: "0 0 4px 0",
-        label: "Scrolling",
-        icon: Continuous_default,
-        iconFill
+      if (isObject(rawValue)) {
+        computedStyles = (0, import_lodash2.default)({}, computedStyles, rawValue);
+        continue;
       }
-    )
-  ));
-}
-var areSettingsDefault = (readerSettings) => {
-  if (!readerSettings) {
-    return false;
-  }
-  let setting;
-  for (setting in DEFAULT_SETTINGS) {
-    if (readerSettings[setting] !== DEFAULT_SETTINGS[setting]) {
-      return false;
+      computedStyles[key] = rawValue;
     }
-  }
-  return true;
+    return computedStyles;
+  };
+  return css2;
+}
+var css = (styles) => (theme2) => {
+  const cssFn = getCss({
+    theme: theme2,
+    pseudos: pseudoSelectors,
+    configs: systemProps
+  });
+  return cssFn(styles);
 };
-
-// src/ui/SettingsButton.tsx
-function SettingsCard(props) {
-  var _a2, _b;
-  const [isOpen, setIsOpen] = React20.useState(false);
-  const open = () => setIsOpen(true);
-  const close = () => setIsOpen(false);
-  const contentBgColor = useColorModeValue_default("ui.white", "ui.black", "ui.white");
-  const iconFill = useColorModeValue_default(
-    "ui.gray.icon",
-    "ui.white",
-    "ui.gray.icon"
-  );
-  const paginationValue = ((_b = (_a2 = props.state) == null ? void 0 : _a2.settings) == null ? void 0 : _b.isScrolling) ? "scrolling" : "paginated";
-  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
-    Popover,
-    {
-      gutter: 0,
-      closeOnBlur: true,
-      placement: "bottom-start",
-      isOpen,
-      onClose: close,
-      onOpen: open,
-      autoFocus: true,
-      preventOverflow: true,
-      strategy: "fixed"
-    },
-    /* @__PURE__ */ React20.createElement(PopoverTrigger, null, /* @__PURE__ */ React20.createElement(
-      Button_default,
-      {
-        "aria-label": "Settings",
-        onClick: open,
-        onMouseDown: (e) => e.preventDefault(),
-        border: "none",
-        gap: [0, 0, 2]
-      },
-      /* @__PURE__ */ React20.createElement(Icon16, { as: ReaderSettings_default, fill: iconFill, w: 6, h: 6 }),
-      /* @__PURE__ */ React20.createElement(Text3, { variant: "headerNav" }, "Settings")
-    )),
-    /* @__PURE__ */ React20.createElement(
-      PopoverContent,
-      {
-        overflow: "hidden",
-        bgColor: contentBgColor,
-        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__ */ React20.createElement(PopoverBody, { p: 0 }, props.type === "PDF" && /* @__PURE__ */ React20.createElement(
-        PdfSettings,
-        {
-          navigator: props.navigator,
-          readerState: props.state,
-          paginationValue
-        }
-      ), props.type === "HTML" && /* @__PURE__ */ React20.createElement(
-        HtmlSettings,
-        {
-          navigator: props.navigator,
-          iconFill,
-          readerState: props.state,
-          paginationValue
-        }
-      ))
-    )
-  ));
+function normalize2(value, toArray) {
+  if (Array.isArray(value))
+    return value;
+  if (isObject(value))
+    return toArray(value);
+  if (value != null)
+    return [value];
 }
-
-// src/ui/TableOfContent.tsx
-import React24 from "react";
-import { Portal, Text as Text4, Icon as Icon17, Box as Box2 } from "@chakra-ui/react";
-
-// node_modules/@chakra-ui/system/dist/chunk-UIGT7YZF.mjs
-import { ThemeContext } from "@emotion/react";
-import { useContext } from "react";
-function useTheme3() {
-  const theme2 = useContext(
-    ThemeContext
-  );
-  if (!theme2) {
-    throw Error(
-      "useTheme: `theme` is undefined. Seems you forgot to wrap your app in `<ChakraProvider />` or `<ThemeProvider />`"
-    );
+function getNextIndex(values, i) {
+  for (let j = i + 1; j < values.length; j++) {
+    if (values[j] != null)
+      return j;
   }
-  return theme2;
+  return -1;
 }
-
-// node_modules/@chakra-ui/color-mode/dist/chunk-UQDW7KKV.mjs
-import { createContext, useContext as useContext2 } from "react";
-var ColorModeContext = createContext({});
-ColorModeContext.displayName = "ColorModeContext";
-function useColorMode() {
-  const context = useContext2(ColorModeContext);
-  if (context === void 0) {
-    throw new Error("useColorMode must be used within a ColorModeProvider");
-  }
-  return context;
+function createResolver(theme2) {
+  const breakpointUtil = theme2.__breakpoints;
+  return function resolver(config, prop, value, props) {
+    var _a2, _b;
+    if (!breakpointUtil)
+      return;
+    const result = {};
+    const normalized = normalize2(value, breakpointUtil.toArrayValue);
+    if (!normalized)
+      return result;
+    const len = normalized.length;
+    const isSingle = len === 1;
+    const isMultipart = !!config.parts;
+    for (let i = 0; i < len; i++) {
+      const key = breakpointUtil.details[i];
+      const nextKey = breakpointUtil.details[getNextIndex(normalized, i)];
+      const query = toMediaQueryString(key.minW, nextKey == null ? void 0 : nextKey._minW);
+      const styles = runIfFn((_a2 = config[prop]) == null ? void 0 : _a2[normalized[i]], props);
+      if (!styles)
+        continue;
+      if (isMultipart) {
+        (_b = config.parts) == null ? void 0 : _b.forEach((part) => {
+          (0, import_lodash4.default)(result, {
+            [part]: isSingle ? styles[part] : { [query]: styles[part] }
+          });
+        });
+        continue;
+      }
+      if (!isMultipart) {
+        if (isSingle)
+          (0, import_lodash4.default)(result, styles);
+        else
+          result[query] = styles;
+        continue;
+      }
+      result[query] = styles;
+    }
+    return result;
+  };
 }
-
-// node_modules/@chakra-ui/system/dist/chunk-7FWEOSAE.mjs
-function useChakra() {
-  const colorModeResult = useColorMode();
-  const theme2 = useTheme3();
-  return __spreadProps(__spreadValues({}, colorModeResult), { theme: theme2 });
+function resolveStyleConfig(config) {
+  return (props) => {
+    var _a2;
+    const { variant, size: size2, theme: theme2 } = props;
+    const recipe = createResolver(theme2);
+    return (0, import_lodash4.default)(
+      {},
+      runIfFn((_a2 = config.baseStyle) != null ? _a2 : {}, props),
+      recipe(config, "sizes", size2, props),
+      recipe(config, "variants", variant, props)
+    );
+  };
+}
+function omitThemingProps(props) {
+  return omit(props, ["styleConfig", "size", "variant", "colorScheme"]);
 }
 
 // node_modules/@chakra-ui/utils/dist/chunk-O3SWHQEE.mjs
@@ -4184,7 +4171,7 @@ function once(fn) {
     return result;
   };
 }
-var warn2 = /* @__PURE__ */ once((options) => () => {
+var warn = /* @__PURE__ */ once((options) => () => {
   const { condition, message } = options;
   if (condition && __DEV__) {
     console.warn(message);
@@ -4287,7 +4274,7 @@ function focus(element, options = {}) {
     return -1;
   function triggerFocus() {
     if (!element) {
-      warn2({
+      warn({
         condition: true,
         message: "[chakra-ui]: can't call focus() on `null` or `undefined` element"
       });