@performant-software/core-data 2.1.0-beta.0 → 2.1.0-beta.11

package/dist/index.es24.js

@@ -1,11 +1,2934 @@
-import e from "./index.es277.js";
-import { root as t } from "./index.es23.js";
-var o = e("Function"), i = t.document && t.document.childNodes;
-typeof /./ != "function" && typeof Int8Array != "object" && typeof i != "function" && (o = function(n) {
-  return typeof n == "function" || !1;
-});
-const c = o;
+import e, { createContext as qe, useCallback as D, useState as E, useEffect as x, useReducer as _e, useLayoutEffect as Ze, useRef as Ue, cloneElement as Xe, Fragment as Ye, useContext as Je } from "react";
+import { Vault as pe } from "./index.es93.js";
+import { Trigger as Ke, Content as Qe, Root as et } from "./index.es94.js";
+import { ErrorBoundary as tt } from "./index.es95.js";
+import { createStitches as nt, createTheme as at } from "./index.es96.js";
+import { Root as rt, List as ot, Trigger as it, Content as lt } from "./index.es97.js";
+import st from "./index.es98.js";
+import { Hls as A } from "./index.es99.js";
+import { Root as ge, Item as fe } from "./index.es100.js";
+import { n as ct } from "./index.es101.js";
+import { Arrow as dt, Close as mt, Content as ut, Trigger as pt, Root as gt } from "./index.es102.js";
+import { Trigger as ft, Content as ht, Item as vt, Label as bt, Root as xt, SelectValue as yt, SelectIcon as Et, SelectPortal as wt, SelectScrollUpButton as $t, SelectViewport as Ct, SelectGroup as kt, SelectScrollDownButton as St, SelectItemText as It, SelectItemIndicator as At } from "./index.es103.js";
+import ne from "./index.es104.js";
+import { Root as Mt, Thumb as zt } from "./index.es105.js";
+import he from "./index.es106.js";
+const Tt = (t) => {
+  const n = t.toString().split(":"), a = Math.ceil(parseInt(n[0])), r = Math.ceil(parseInt(n[1])), o = Lt(Math.ceil(parseInt(n[2])), 2);
+  let i = `${a !== 0 && r < 10 ? (r + "").padStart(2, "0") : r}:${o}`;
+  return a !== 0 && (i = `${a}:${i}`), i;
+}, ve = (t) => {
+  const n = new Date(t * 1e3).toISOString().substr(11, 8);
+  return Tt(n);
+}, be = (t, n) => {
+  if (typeof t != "object" || t === null)
+    return n;
+  for (const a in n)
+    typeof n[a] == "object" && n[a] !== null && !Array.isArray(n[a]) ? (t[a] || (t[a] = {}), t[a] = be(t[a], n[a])) : t[a] = n[a];
+  return t;
+}, xe = (t, n) => Object.hasOwn(t, n) ? t[n].toString() : void 0, Lt = (t, n) => String(t).padStart(n, "0"), q = {
+  background: "transparent",
+  canvasBackgroundColor: "#6662",
+  canvasHeight: "61.8vh",
+  ignoreCaptionLabels: [],
+  informationPanel: {
+    open: !0,
+    renderAbout: !0,
+    renderSupplementing: !0,
+    renderToggle: !0
+  },
+  openSeadragon: {},
+  requestHeaders: { "Content-Type": "application/json" },
+  showIIIFBadge: !0,
+  showTitle: !0,
+  withCredentials: !1
+};
+var ae;
+const W = {
+  activeCanvas: "",
+  activeManifest: "",
+  collection: {},
+  configOptions: q,
+  customDisplays: [],
+  informationOpen: (ae = q == null ? void 0 : q.informationPanel) == null ? void 0 : ae.open,
+  isLoaded: !1,
+  vault: new pe()
+}, ye = e.createContext(W), Ee = e.createContext(W);
+function Rt(t, n) {
+  switch (n.type) {
+    case "updateActiveCanvas":
+      return n.canvasId || (n.canvasId = ""), {
+        ...t,
+        activeCanvas: n.canvasId
+      };
+    case "updateActiveManifest":
+      return {
+        ...t,
+        activeManifest: n.manifestId
+      };
+    case "updateCollection":
+      return {
+        ...t,
+        collection: n.collection
+      };
+    case "updateConfigOptions":
+      return {
+        ...t,
+        configOptions: be(t.configOptions, n.configOptions)
+      };
+    case "updateInformationOpen":
+      return {
+        ...t,
+        informationOpen: n.informationOpen
+      };
+    case "updateIsLoaded":
+      return {
+        ...t,
+        isLoaded: n.isLoaded
+      };
+    default:
+      throw new Error(`Unhandled action type: ${n.type}`);
+  }
+}
+const Ft = ({
+  initialState: t = W,
+  children: n
+}) => {
+  const [a, r] = _e(Rt, t);
+  return /* @__PURE__ */ e.createElement(ye.Provider, { value: a }, /* @__PURE__ */ e.createElement(
+    Ee.Provider,
+    {
+      value: r
+    },
+    n
+  ));
+};
+function S() {
+  const t = e.useContext(ye);
+  if (t === void 0)
+    throw new Error("useViewerState must be used within a ViewerProvider");
+  return t;
+}
+function H() {
+  const t = e.useContext(Ee);
+  if (t === void 0)
+    throw new Error("useViewerDispatch must be used within a ViewerProvider");
+  return t;
+}
+const we = (t, n, a, r) => {
+  var o, i;
+  const s = {
+    canvas: void 0,
+    accompanyingCanvas: void 0,
+    annotationPage: void 0,
+    annotations: []
+  }, l = (c) => {
+    if (c) {
+      if (!c.body || !c.motivation) {
+        console.error(
+          "Invalid annotation after Hyperion parsing: missing either 'body' or 'motivation'",
+          c
+        );
+        return;
+      }
+      let m = c.body;
+      Array.isArray(m) && (m = m[0]);
+      const u = t.get(m.id);
+      if (!u)
+        return;
+      switch (a) {
+        case "painting":
+          return c.target === n.id && c.motivation && c.motivation[0] === "painting" && r.includes(u.type) && (c.body = u), !!c;
+        case "supplementing":
+          return;
+        default:
+          throw new Error("Invalid annotation motivation.");
+      }
+    }
+  };
+  if (s.canvas = t.get(n), s.canvas && (s.annotationPage = t.get(s.canvas.items[0]), s.accompanyingCanvas = (o = s.canvas) != null && o.accompanyingCanvas ? t.get((i = s.canvas) == null ? void 0 : i.accompanyingCanvas) : void 0), s.annotationPage) {
+    const c = t.get(s.annotationPage.items).map((u) => ({
+      body: t.get(u.body[0].id),
+      motivation: u.motivation,
+      type: "Annotation"
+    })), m = [];
+    c.forEach((u) => {
+      u.body.type === "Choice" ? u.body.items.forEach(
+        (g) => m.push({
+          ...u,
+          id: g.id,
+          body: t.get(g.id)
+        })
+      ) : m.push(u);
+    }), s.annotations = m.filter(l);
+  }
+  return s;
+}, P = (t, n = "en") => {
+  if (!t)
+    return "";
+  if (!t[n]) {
+    const a = Object.getOwnPropertyNames(t);
+    if (a.length > 0)
+      return t[a[0]];
+  }
+  return t[n];
+}, j = (t, n) => {
+  const a = we(
+    t,
+    { id: n, type: "Canvas" },
+    "painting",
+    ["Image", "Sound", "Video"]
+  );
+  if (a.annotations.length !== 0 && a.annotations && a.annotations)
+    return a.annotations.map(
+      (r) => r == null ? void 0 : r.body
+    );
+}, Ot = (t, n, a) => {
+  const r = t.get({
+    id: n,
+    type: "Canvas"
+  });
+  if (!(r != null && r.annotations) || !r.annotations[0])
+    return [];
+  const o = t.get(r.annotations[0]), i = t.get(o.items);
+  return Array.isArray(i) ? i.filter((s) => {
+    var l;
+    if (s.body && (l = s.motivation) != null && l.includes("supplementing")) {
+      let c = s.body;
+      Array.isArray(c) && (c = c[0]);
+      const m = t.get(c.id);
+      if (m.format === a)
+        return s.body = m, s;
+    }
+  }).map((s) => s.body) : [];
+}, Ht = (t, n, a, r) => {
+  const o = [];
+  if (n.canvas && n.canvas.thumbnail.length > 0) {
+    const i = t.get(
+      n.canvas.thumbnail[0]
+    );
+    o.push(i);
+  }
+  if (n.annotations[0]) {
+    if (n.annotations[0].thumbnail && n.annotations[0].thumbnail.length > 0) {
+      const s = t.get(
+        n.annotations[0].thumbnail[0]
+      );
+      o.push(s);
+    }
+    if (!n.annotations[0].body)
+      return;
+    const i = n.annotations[0].body;
+    i.type === "Image" && o.push(i);
+  }
+  return o.length === 0 ? void 0 : {
+    id: o[0].id,
+    format: o[0].format,
+    type: o[0].type,
+    width: a,
+    height: r
+  };
+}, _ = 209, Pt = {
+  colors: {
+    /*
+     * Black and dark grays in a light theme.
+     * Must contrast to 4.5 or greater with `secondary`.
+     */
+    primary: "#1a1d1e",
+    primaryMuted: "#26292b",
+    primaryAlt: "#151718",
+    /*
+     * Key brand color(s).
+     * Must contrast to 4.5 or greater with `secondary`.
+     */
+    accent: `hsl(${_} 100% 38.2%)`,
+    accentMuted: `hsl(${_} 80% 61.8%)`,
+    accentAlt: `hsl(${_} 80% 30%)`,
+    /*
+     * White and light grays in a light theme.
+     * Must contrast to 4.5 or greater with `primary` and  `accent`.
+     */
+    secondary: "#FFFFFF",
+    secondaryMuted: "#e6e8eb",
+    secondaryAlt: "#c1c8cd"
+  },
+  fontSizes: {
+    1: "12px",
+    2: "13px",
+    3: "15px",
+    4: "17px",
+    5: "19px",
+    6: "21px",
+    7: "27px",
+    8: "35px",
+    9: "59px"
+  },
+  lineHeights: {
+    1: "12px",
+    2: "13px",
+    3: "15px",
+    4: "17px",
+    5: "19px",
+    6: "21px",
+    7: "27px",
+    8: "35px",
+    9: "59px"
+  },
+  sizes: {
+    1: "5px",
+    2: "10px",
+    3: "15px",
+    4: "20px",
+    5: "25px",
+    6: "35px",
+    7: "45px",
+    8: "65px",
+    9: "80px"
+  },
+  space: {
+    1: "5px",
+    2: "10px",
+    3: "15px",
+    4: "20px",
+    5: "25px",
+    6: "35px",
+    7: "45px",
+    8: "65px",
+    9: "80px"
+  },
+  radii: {
+    1: "4px",
+    2: "6px",
+    3: "8px",
+    4: "12px",
+    round: "50%",
+    pill: "9999px"
+  },
+  transitions: {
+    all: "all 300ms cubic-bezier(0.16, 1, 0.3, 1)"
+  },
+  zIndices: {
+    1: "100",
+    2: "200",
+    3: "300",
+    4: "400",
+    max: "999"
+  }
+}, J = {
+  xxs: "(max-width: 349px)",
+  xs: "(max-width: 575px)",
+  sm: "(max-width: 767px)",
+  md: "(max-width: 991px)",
+  lg: "(max-width: 90rem)",
+  xl: "(min-width: calc(90rem + 1px))"
+}, { styled: d, css: $r, keyframes: K, createTheme: Cr } = nt({
+  theme: Pt,
+  media: J
+}), Vt = d("div", {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center"
+}), Bt = d("p", {
+  fontWeight: "bold",
+  fontSize: "x-large"
+}), jt = d("span", {
+  fontSize: "medium"
+}), Dt = ({ error: t }) => {
+  const { message: n } = t;
+  return /* @__PURE__ */ e.createElement(Vt, { role: "alert" }, /* @__PURE__ */ e.createElement(Bt, { "data-testid": "headline" }, "Something went wrong"), n && /* @__PURE__ */ e.createElement(jt, null, `Error message: ${n}`, " "));
+}, $e = d("div", {
+  position: "relative",
+  zIndex: "0"
+}), Ce = d("div", {
+  display: "flex",
+  flexDirection: "row",
+  overflow: "hidden",
+  "@sm": {
+    flexDirection: "column"
+  }
+}), ke = d("div", {
+  display: "flex",
+  flexDirection: "column",
+  flexGrow: "1",
+  flexShrink: "1",
+  width: "61.8%",
+  "@sm": {
+    width: "100%"
+  }
+}), Se = d(Ke, {
+  display: "none",
+  border: "none",
+  padding: "0",
+  transition: "$all",
+  opacity: "1",
+  background: "#6663",
+  margin: "1rem 0",
+  borderRadius: "6px",
+  "&[data-information-panel='false']": {
+    opacity: "0",
+    marginTop: "-59px"
+  },
+  "@sm": {
+    display: "flex",
+    "> span": {
+      display: "flex",
+      flexGrow: "1",
+      fontSize: "0.8333em",
+      justifyContent: "center",
+      padding: "0.5rem",
+      fontFamily: "inherit"
+    }
+  }
+}), Ie = d(Qe, {
+  width: "100%",
+  display: "flex"
+}), Wt = d("aside", {
+  display: "flex",
+  flexGrow: "1",
+  flexShrink: "0",
+  width: "38.2%",
+  maxHeight: "100%",
+  "@sm": {
+    width: "100%"
+  }
+}), Nt = d("div", {
+  display: "flex",
+  flexDirection: "column",
+  fontSmooth: "auto",
+  webkitFontSmoothing: "antialiased",
+  "> div": {
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: "1",
+    justifyContent: "flex-start",
+    "@sm": {
+      [`& ${Ce}`]: {
+        flexGrow: "1"
+      },
+      [`& ${ke}`]: {
+        flexGrow: "0"
+      }
+    }
+  },
+  "@sm": {
+    padding: "0"
+  },
+  "&[data-information-panel-open='true']": {
+    "@sm": {
+      position: "fixed",
+      height: "100%",
+      width: "100%",
+      top: "0",
+      left: "0",
+      zIndex: "2500000000",
+      [`& ${$e}`]: {
+        display: "none"
+      },
+      [`& ${Se}`]: {
+        margin: "1rem"
+      },
+      [`& ${Ie}`]: {
+        height: "100%"
+      }
+    }
+  }
+}), Gt = d(rt, {
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  height: "100%",
+  flexGrow: "1",
+  flexShrink: "0",
+  position: "relative",
+  zIndex: "1",
+  maskImage: "linear-gradient(180deg, rgba(0, 0, 0, 1) calc(100% - 2rem), transparent 100%)",
+  "@sm": {
+    marginTop: "0.5rem",
+    boxShadow: "none"
+  }
+}), qt = d(ot, {
+  display: "flex",
+  flexGrow: "0",
+  margin: "0 1.618rem",
+  borderBottom: "4px solid #6663",
+  "@sm": {
+    margin: "0 1rem"
+  }
+}), re = d(it, {
+  display: "flex",
+  position: "relative",
+  padding: "0.5rem 1rem",
+  background: "none",
+  backgroundColor: "transparent",
+  fontFamily: "inherit",
+  border: "none",
+  opacity: "0.7",
+  fontSize: "1rem",
+  marginRight: "1rem",
+  lineHeight: "1rem",
+  whiteSpace: "nowrap",
+  cursor: "pointer",
+  fontWeight: 400,
+  transition: "$all",
+  "&::after": {
+    width: "0",
+    height: "4px",
+    content: "",
+    position: "absolute",
+    bottom: "-4px",
+    left: "0",
+    transition: "$all"
+  },
+  "&[data-state='active']": {
+    opacity: "1",
+    fontWeight: 700,
+    "&::after": {
+      width: "100%",
+      backgroundColor: "$accent"
+    }
+  }
+}), oe = d(lt, {
+  display: "flex",
+  flexGrow: "1",
+  flexShrink: "0",
+  position: "absolute",
+  top: "0",
+  left: "0",
+  "&[data-state='active']": {
+    width: "100%",
+    height: "calc(100% - 2rem)",
+    padding: "1.618rem 0"
+  }
+}), _t = d("div", {
+  position: "relative",
+  height: "100%",
+  width: "100%",
+  overflowY: "scroll"
+}), Zt = d("div", {
+  padding: " 0 1.618rem 2rem",
+  display: "flex",
+  flexDirection: "column",
+  overflow: "scroll",
+  position: "absolute",
+  fontWeight: "400",
+  fontSize: "1rem",
+  zIndex: "0",
+  img: {
+    maxWidth: "100px",
+    maxHeight: "100px",
+    objectFit: "contain",
+    color: "transparent",
+    margin: "0 0 1rem",
+    borderRadius: "3px",
+    backgroundColor: "$secondaryMuted"
+  },
+  video: {
+    display: "none"
+  },
+  "a, a:visited": {
+    color: "$accent"
+  },
+  p: {
+    fontSize: "1rem",
+    lineHeight: "1.45em",
+    margin: "0"
+  },
+  dl: {
+    margin: "0",
+    dt: {
+      fontWeight: "700",
+      margin: "1rem 0 0.25rem"
+    },
+    dd: {
+      margin: "0"
+    }
+  },
+  ".manifest-property-title": {
+    fontWeight: "700",
+    margin: "1rem 0 0.25rem"
+  },
+  "ul, ol": {
+    padding: "0",
+    margin: "0",
+    li: {
+      fontSize: "1rem",
+      lineHeight: "1.45em",
+      listStyle: "none",
+      margin: "0.25rem 0 0.25rem"
+    }
+  }
+}), Ut = d("div", {
+  position: "relative",
+  width: "100%",
+  height: "100%",
+  zIndex: "0"
+}), Ae = (t, n = "none") => {
+  if (!t)
+    return null;
+  if (typeof t == "string")
+    return [t];
+  if (!t[n]) {
+    const a = Object.getOwnPropertyNames(t);
+    if (a.length > 0)
+      return t[a[0]];
+  }
+  return !t[n] || !Array.isArray(t[n]) ? null : t[n];
+}, z = (t, n = "none", a = ", ") => {
+  const r = Ae(t, n);
+  return Array.isArray(r) ? r.join(`${a}`) : r;
+};
+function Xt(t) {
+  return { __html: Yt(t) };
+}
+function M(t, n) {
+  const a = Object.keys(t).filter(
+    (o) => n.includes(o) ? null : o
+  ), r = new Object();
+  return a.forEach((o) => {
+    r[o] = t[o];
+  }), r;
+}
+function Yt(t) {
+  return st(t, {
+    allowedAttributes: {
+      a: ["href"],
+      img: ["alt", "src", "height", "width"]
+    },
+    allowedSchemes: ["http", "https", "mailto"],
+    allowedTags: [
+      "a",
+      "b",
+      "br",
+      "i",
+      "img",
+      "p",
+      "small",
+      "span",
+      "sub",
+      "sup"
+    ]
+  });
+}
+const Jt = d("span", {}), L = (t) => {
+  const { as: n, label: a } = t, r = M(t, ["as", "label"]);
+  return /* @__PURE__ */ e.createElement(Jt, { as: n, ...r }, z(a, r.lang));
+}, Kt = (t, n = "200,", a = "full") => {
+  Array.isArray(t) && (t = t[0]);
+  const { id: r, service: o } = t;
+  let i;
+  if (!o)
+    return r;
+  if (Array.isArray(t.service) && t.service.length > 0 && (i = o[0]), i) {
+    if (i["@id"])
+      return `${i["@id"]}/${a}/${n}/0/default.jpg`;
+    if (i.id)
+      return `${i.id}/${a}/${n}/0/default.jpg`;
+  }
+}, ie = d("img", { objectFit: "cover" }), Qt = (t) => {
+  const n = Ue(null), { contentResource: a, altAsLabel: r, region: o = "full" } = t;
+  let i;
+  r && (i = z(r));
+  const s = M(t, ["contentResource", "altAsLabel"]), { type: l, id: c, width: m = 200, height: u = 200, duration: g } = a;
+  x(() => {
+    if (!c && !n.current || ["Image"].includes(l) || !c.includes("m3u8"))
+      return;
+    const p = new A();
+    return n.current && (p.attachMedia(n.current), p.on(A.Events.MEDIA_ATTACHED, function() {
+      p.loadSource(c);
+    })), p.on(A.Events.ERROR, function(h, f) {
+      if (f.fatal)
+        switch (f.type) {
+          case A.ErrorTypes.NETWORK_ERROR:
+            console.error(
+              `fatal ${h} network error encountered, try to recover`
+            ), p.startLoad();
+            break;
+          case A.ErrorTypes.MEDIA_ERROR:
+            console.error(
+              `fatal ${h} media error encountered, try to recover`
+            ), p.recoverMediaError();
+            break;
+          default:
+            p.destroy();
+            break;
+        }
+    }), () => {
+      p && (p.detachMedia(), p.destroy());
+    };
+  }, [c, l]);
+  const v = D(() => {
+    if (!n.current)
+      return;
+    let p = 0, h = 30;
+    if (g && (h = g), !c.split("#t=") && g && (p = g * 0.1), c.split("#t=").pop()) {
+      const y = c.split("#t=").pop();
+      y && (p = parseInt(y.split(",")[0]));
+    }
+    const f = n.current;
+    f.autoplay = !0, f.currentTime = p, setTimeout(() => v(), h * 1e3);
+  }, [g, c]);
+  x(() => v(), [v]);
+  const b = Kt(
+    a,
+    `${m},${u}`,
+    o
+  );
+  switch (l) {
+    case "Image":
+      return /* @__PURE__ */ e.createElement(
+        ie,
+        {
+          as: "img",
+          alt: i,
+          css: { width: m, height: u },
+          key: c,
+          src: b,
+          ...s
+        }
+      );
+    case "Video":
+      return /* @__PURE__ */ e.createElement(
+        ie,
+        {
+          as: "video",
+          css: { width: m, height: u },
+          disablePictureInPicture: !0,
+          key: c,
+          loop: !0,
+          muted: !0,
+          onPause: v,
+          ref: n,
+          src: c
+        }
+      );
+    default:
+      return console.warn(
+        `Resource type: ${l} is not valid or not yet supported in Primitives.`
+      ), /* @__PURE__ */ e.createElement(e.Fragment, null);
+  }
+}, en = d("a", {}), tn = (t) => {
+  const { children: n, homepage: a } = t, r = M(t, ["children", "homepage"]);
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, a && a.map((o) => {
+    const i = z(
+      o.label,
+      r.lang
+    );
+    return /* @__PURE__ */ e.createElement(
+      en,
+      {
+        "aria-label": n ? i : void 0,
+        href: o.id,
+        key: o.id,
+        ...r
+      },
+      n || i
+    );
+  }));
+}, nn = {
+  delimiter: ", "
+}, Q = qe(void 0), Me = () => {
+  const t = Je(Q);
+  if (t === void 0)
+    throw new Error(
+      "usePrimitivesContext must be used with a PrimitivesProvider"
+    );
+  return t;
+}, ee = ({
+  children: t,
+  initialState: n = nn
+}) => {
+  const a = an(n, "delimiter");
+  return /* @__PURE__ */ e.createElement(Q.Provider, { value: { delimiter: a } }, t);
+}, an = (t, n) => Object.hasOwn(t, n) ? t[n].toString() : void 0, rn = d("span", {}), le = (t) => {
+  const { as: n, markup: a } = t, { delimiter: r } = Me();
+  if (!a)
+    return /* @__PURE__ */ e.createElement(e.Fragment, null);
+  const o = M(t, ["as", "markup"]), i = Xt(
+    z(a, o.lang, r)
+  );
+  return /* @__PURE__ */ e.createElement(rn, { as: n, ...o, dangerouslySetInnerHTML: i });
+}, ze = (t) => e.useContext(Q) ? /* @__PURE__ */ e.createElement(le, { ...t }) : /* @__PURE__ */ e.createElement(ee, null, /* @__PURE__ */ e.createElement(le, { ...t })), on = ({ as: t = "dd", lang: n, value: a }) => /* @__PURE__ */ e.createElement(ze, { markup: a, as: t, lang: n }), ln = d("span", {}), sn = ({
+  as: t = "dd",
+  customValueContent: n,
+  lang: a,
+  value: r
+}) => {
+  var o;
+  const { delimiter: i } = Me(), s = (o = Ae(r, a)) == null ? void 0 : o.map((l) => Xe(n, {
+    value: l
+  }));
+  return /* @__PURE__ */ e.createElement(ln, { as: t, lang: a }, s == null ? void 0 : s.map((l, c) => [
+    c > 0 && `${i}`,
+    /* @__PURE__ */ e.createElement(Ye, { key: c }, l)
+  ]));
+}, Te = (t) => {
+  var n;
+  const { item: a, lang: r, customValueContent: o } = t, { label: i, value: s } = a, l = (n = z(i)) == null ? void 0 : n.replace(" ", "-").toLowerCase();
+  return /* @__PURE__ */ e.createElement("div", { role: "group", "data-label": l }, /* @__PURE__ */ e.createElement(L, { as: "dt", label: i, lang: r }), o ? /* @__PURE__ */ e.createElement(
+    sn,
+    {
+      as: "dd",
+      customValueContent: o,
+      value: s,
+      lang: r
+    }
+  ) : /* @__PURE__ */ e.createElement(on, { as: "dd", value: s, lang: r }));
+};
+function cn(t, n) {
+  const a = n.filter((r) => {
+    const { matchingLabel: o } = r, i = Object.keys(r.matchingLabel)[0], s = z(o, i);
+    if (z(t, i) === s)
+      return !0;
+  }).map((r) => r.Content);
+  if (Array.isArray(a))
+    return a[0];
+}
+const dn = d("dl", {}), mn = (t) => {
+  const { as: n, customValueContent: a, metadata: r } = t;
+  if (!Array.isArray(r))
+    return /* @__PURE__ */ e.createElement(e.Fragment, null);
+  const o = xe(t, "customValueDelimiter"), i = M(t, [
+    "as",
+    "customValueContent",
+    "customValueDelimiter",
+    "metadata"
+  ]);
+  return /* @__PURE__ */ e.createElement(
+    ee,
+    {
+      ...typeof o == "string" ? { initialState: { delimiter: o } } : void 0
+    },
+    r.length > 0 && /* @__PURE__ */ e.createElement(dn, { as: n, ...i }, r.map((s, l) => {
+      const c = a ? cn(s.label, a) : void 0;
+      return /* @__PURE__ */ e.createElement(
+        Te,
+        {
+          customValueContent: c,
+          item: s,
+          key: l,
+          lang: i == null ? void 0 : i.lang
+        }
+      );
+    }))
+  );
+};
+d("li", {});
+d("ul", {});
+const un = d("dl", {}), pn = (t) => {
+  const { as: n, requiredStatement: a } = t;
+  if (!a)
+    return /* @__PURE__ */ e.createElement(e.Fragment, null);
+  const r = xe(t, "customValueDelimiter"), o = M(t, ["as", "customValueDelimiter", "requiredStatement"]);
+  return /* @__PURE__ */ e.createElement(
+    ee,
+    {
+      ...typeof r == "string" ? { initialState: { delimiter: r } } : void 0
+    },
+    /* @__PURE__ */ e.createElement(un, { as: n, ...o }, /* @__PURE__ */ e.createElement(Te, { item: a, lang: o.lang }))
+  );
+}, gn = d("li", {}), fn = d("ul", {}), hn = (t) => {
+  const { as: n, seeAlso: a } = t, r = M(t, ["as", "seeAlso"]);
+  return /* @__PURE__ */ e.createElement(fn, { as: n }, a && a.map((o) => {
+    const i = z(
+      o.label,
+      r.lang
+    );
+    return /* @__PURE__ */ e.createElement(gn, { key: o.id }, /* @__PURE__ */ e.createElement("a", { href: o.id, ...r }, i || o.id));
+  }));
+}, vn = (t) => {
+  const { as: n, summary: a } = t, r = M(t, ["as", "customValueDelimiter", "summary"]);
+  return /* @__PURE__ */ e.createElement(ze, { as: n, markup: a, ...r });
+}, Le = (t) => {
+  const { thumbnail: n, region: a } = t, r = M(t, ["thumbnail"]);
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, n && n.map((o) => /* @__PURE__ */ e.createElement(
+    Qt,
+    {
+      contentResource: o,
+      key: o.id,
+      region: a,
+      ...r
+    }
+  )));
+}, bn = ({
+  homepage: t
+}) => (t == null ? void 0 : t.length) === 0 ? /* @__PURE__ */ e.createElement(e.Fragment, null) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", { className: "manifest-property-title" }, "Homepage"), /* @__PURE__ */ e.createElement(tn, { homepage: t })), xn = ({
+  id: t,
+  htmlLabel: n,
+  parent: a = "manifest"
+}) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", { className: "manifest-property-title" }, n), /* @__PURE__ */ e.createElement("a", { href: t, target: "_blank", id: `iiif-${a}-id` }, t)), yn = ({
+  metadata: t,
+  parent: n = "manifest"
+}) => t ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(mn, { metadata: t, id: `iiif-${n}-metadata` })) : /* @__PURE__ */ e.createElement(e.Fragment, null), En = ({
+  requiredStatement: t,
+  parent: n = "manifest"
+}) => t ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
+  pn,
+  {
+    requiredStatement: t,
+    id: `iiif-${n}-required-statement`
+  }
+)) : /* @__PURE__ */ e.createElement(e.Fragment, null), wn = ({ rights: t }) => t ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", { className: "manifest-property-title" }, "Rights"), /* @__PURE__ */ e.createElement("a", { href: t, target: "_blank" }, t)) : /* @__PURE__ */ e.createElement(e.Fragment, null), $n = ({ seeAlso: t }) => (t == null ? void 0 : t.length) === 0 ? /* @__PURE__ */ e.createElement(e.Fragment, null) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", { className: "manifest-property-title" }, "See Also"), /* @__PURE__ */ e.createElement(hn, { seeAlso: t })), Cn = ({
+  summary: t,
+  parent: n = "manifest"
+}) => t ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(vn, { summary: t, as: "p", id: `iiif-${n}-summary` })) : /* @__PURE__ */ e.createElement(e.Fragment, null), kn = ({
+  label: t,
+  thumbnail: n
+}) => (n == null ? void 0 : n.length) === 0 ? /* @__PURE__ */ e.createElement(e.Fragment, null) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
+  Le,
+  {
+    altAsLabel: t || { none: ["resource"] },
+    thumbnail: n,
+    style: { backgroundColor: "#6663", objectFit: "cover" }
+  }
+)), Sn = () => {
+  const t = S(), { activeManifest: n, vault: a } = t, [r, o] = E(), [i, s] = E([]), [l, c] = E([]), [m, u] = E([]);
+  return x(() => {
+    var g, v, b;
+    const p = a.get(n);
+    o(p), ((g = p.homepage) == null ? void 0 : g.length) > 0 && s(a.get(p.homepage)), ((v = p.seeAlso) == null ? void 0 : v.length) > 0 && c(a.get(p.seeAlso)), ((b = p.thumbnail) == null ? void 0 : b.length) > 0 && u(a.get(p.thumbnail));
+  }, [n, a]), r ? /* @__PURE__ */ e.createElement(Ut, null, /* @__PURE__ */ e.createElement(Zt, null, /* @__PURE__ */ e.createElement(kn, { thumbnail: m, label: r.label }), /* @__PURE__ */ e.createElement(Cn, { summary: r.summary }), /* @__PURE__ */ e.createElement(yn, { metadata: r.metadata }), /* @__PURE__ */ e.createElement(En, { requiredStatement: r.requiredStatement }), /* @__PURE__ */ e.createElement(wn, { rights: r.rights }), /* @__PURE__ */ e.createElement(
+    bn,
+    {
+      homepage: i
+    }
+  ), /* @__PURE__ */ e.createElement(
+    $n,
+    {
+      seeAlso: l
+    }
+  ), /* @__PURE__ */ e.createElement(xn, { id: r.id, htmlLabel: "IIIF Manifest" }))) : /* @__PURE__ */ e.createElement(e.Fragment, null);
+}, In = () => {
+  function t(o) {
+    return o.map((i) => {
+      const s = i.identifier || he();
+      return { ...i, identifier: s };
+    });
+  }
+  function n(o) {
+    var i;
+    const s = [], l = [], c = t(o);
+    for (const m of c) {
+      for (; l.length > 0 && l[l.length - 1].end <= m.start; )
+        l.pop();
+      l.length > 0 ? (l[l.length - 1].children || (l[l.length - 1].children = []), (i = l[l.length - 1].children) == null || i.push(m), l.push(m)) : (s.push(m), l.push(m));
+    }
+    return s;
+  }
+  function a(o, i = []) {
+    return i.some(
+      (s) => o.start >= s.start && o.end <= s.end
+    );
+  }
+  function r(o = []) {
+    return o.sort((i, s) => i.start - s.start);
+  }
+  return {
+    addIdentifiersToParsedCues: t,
+    createNestedCues: n,
+    isChild: a,
+    orderCuesByTime: r
+  };
+}, se = K({
+  from: { transform: "rotate(360deg)" },
+  to: { transform: "rotate(0deg)" }
+}), An = d(ge, {
+  display: "flex",
+  flexDirection: "column",
+  width: "100%"
+}), Re = d(fe, {
+  position: "relative",
+  cursor: "pointer",
+  display: "flex",
+  width: "100%",
+  justifyContent: "space-between",
+  textAlign: "left",
+  margin: "0",
+  padding: "0.5rem 1.618rem",
+  fontFamily: "inherit",
+  lineHeight: "1.25em",
+  fontSize: "1rem",
+  color: "inherit",
+  border: "none",
+  background: "none",
+  "@sm": {
+    padding: "0.5rem 1rem",
+    fontSize: "0.8333rem"
+  },
+  "&::before": {
+    content: "",
+    width: "12px",
+    height: "12px",
+    borderRadius: "12px",
+    position: "absolute",
+    backgroundColor: "$primaryMuted",
+    opacity: "0",
+    left: "8px",
+    marginTop: "3px",
+    boxSizing: "content-box",
+    "@sm": {
+      content: "unset"
+    }
+  },
+  "&::after": {
+    content: "",
+    width: "4px",
+    height: "6px",
+    position: "absolute",
+    backgroundColor: "$secondary",
+    opacity: "0",
+    clipPath: "polygon(100% 50%, 0 100%, 0 0)",
+    left: "13px",
+    marginTop: "6px",
+    boxSizing: "content-box",
+    "@sm": {
+      content: "unset"
+    }
+  },
+  strong: {
+    marginLeft: "1rem"
+  },
+  "&:hover": {
+    color: "$accent",
+    "&::before": {
+      backgroundColor: "$accent",
+      opacity: "1"
+    },
+    "&::after": {
+      content: "",
+      width: "4px",
+      height: "6px",
+      position: "absolute",
+      backgroundColor: "$secondary",
+      clipPath: "polygon(100% 50%, 0 100%, 0 0)",
+      opacity: "1"
+    }
+  },
+  "&[aria-checked='true']": {
+    backgroundColor: "#6663",
+    "&::before": {
+      content: "",
+      width: "6px",
+      height: "6px",
+      position: "absolute",
+      backgroundColor: "transparent",
+      border: "3px solid $accentMuted",
+      borderRadius: "12px",
+      left: "8px",
+      marginTop: "4px",
+      opacity: "1",
+      animation: "1s linear infinite",
+      animationName: se,
+      boxSizing: "content-box",
+      "@sm": {
+        content: "unset"
+      }
+    },
+    "&::after": {
+      content: "",
+      width: "6px",
+      height: "6px",
+      position: "absolute",
+      backgroundColor: "transparent",
+      border: "3px solid $accent",
+      clipPath: "polygon(100% 0, 100% 100%, 0 0)",
+      borderRadius: "12px",
+      left: "8px",
+      marginTop: "4px",
+      opacity: "1",
+      animation: "1.5s linear infinite",
+      animationName: se,
+      boxSizing: "content-box",
+      "@sm": {
+        content: "unset"
+      }
+    }
+  }
+}), Mn = ({ label: t, start: n, end: a }) => {
+  const [r, o] = E(!1), i = document.getElementById(
+    "clover-iiif-video"
+  );
+  x(() => (i == null || i.addEventListener("timeupdate", () => {
+    const { currentTime: l } = i;
+    o(n <= l && l < a);
+  }), () => document.removeEventListener("timeupdate", () => {
+  })), [a, n, i]);
+  const s = () => {
+    i && (i.pause(), i.currentTime = n, i.play());
+  };
+  return /* @__PURE__ */ e.createElement(
+    Re,
+    {
+      "aria-checked": r,
+      "data-testid": "information-panel-cue",
+      onClick: s,
+      value: t
+    },
+    t,
+    /* @__PURE__ */ e.createElement("strong", null, ve(n))
+  );
+}, zn = d("ul", {
+  listStyle: "none",
+  paddingLeft: "1rem",
+  position: "relative",
+  "&&:first-child": {
+    paddingLeft: "0"
+  },
+  "& li ul": {
+    [`& ${Re}`]: {
+      backgroundColor: "unset",
+      "&::before": {
+        content: "none"
+      },
+      "&::after": {
+        content: "none"
+      }
+    }
+  },
+  "&:first-child": {
+    margin: "0 0 1.618rem"
+  }
+}), Fe = ({ items: t }) => /* @__PURE__ */ e.createElement(zn, null, t.map((n) => {
+  const { text: a, start: r, end: o, children: i, identifier: s } = n;
+  return /* @__PURE__ */ e.createElement("li", { key: s }, /* @__PURE__ */ e.createElement(Mn, { label: a, start: r, end: o }), i && /* @__PURE__ */ e.createElement(Fe, { items: i }));
+})), Tn = ({ resource: t }) => {
+  const [n, a] = e.useState([]), { id: r, label: o } = t, { createNestedCues: i, orderCuesByTime: s } = In();
+  return x(() => {
+    r && fetch(r, {
+      headers: {
+        "Content-Type": "text/plain",
+        Accept: "application/json"
+      }
+    }).then((l) => l.text()).then((l) => {
+      const c = ct.parse(l).cues, m = s(c), u = i(m);
+      a(u);
+    }).catch((l) => console.error(r, l.toString()));
+  }, [r]), /* @__PURE__ */ e.createElement(
+    An,
+    {
+      "aria-label": `navigate ${P(o, "en")}`
+    },
+    /* @__PURE__ */ e.createElement(Fe, { items: n })
+  );
+}, Ln = ({
+  activeCanvas: t,
+  resources: n
+}) => {
+  var a;
+  const r = S(), { configOptions: o } = r, { informationPanel: i } = o, [s, l] = E(), c = (i == null ? void 0 : i.renderAbout) || ((a = o == null ? void 0 : o.informationPanel) == null ? void 0 : a.renderAbout), m = i == null ? void 0 : i.renderSupplementing;
+  x(() => {
+    c ? l("manifest-about") : n && (n == null ? void 0 : n.length) > 0 && !c && l(n[0].id);
+  }, [t, c, n]);
+  const u = (g) => {
+    l(g);
+  };
+  return n ? /* @__PURE__ */ e.createElement(
+    Gt,
+    {
+      "data-testid": "information-panel",
+      defaultValue: s,
+      onValueChange: u,
+      orientation: "horizontal",
+      value: s,
+      className: "clover-viewer-information-panel"
+    },
+    /* @__PURE__ */ e.createElement(qt, { "aria-label": "select chapter", "data-testid": "information-panel-list" }, c && /* @__PURE__ */ e.createElement(re, { value: "manifest-about" }, "About"), m && n && n.map(({ id: g, label: v }) => /* @__PURE__ */ e.createElement(re, { key: g, value: g }, /* @__PURE__ */ e.createElement(L, { label: v })))),
+    /* @__PURE__ */ e.createElement(_t, null, c && /* @__PURE__ */ e.createElement(oe, { value: "manifest-about" }, /* @__PURE__ */ e.createElement(Sn, null)), m && n && n.map((g) => /* @__PURE__ */ e.createElement(oe, { key: g.id, value: g.id }, /* @__PURE__ */ e.createElement(Tn, { resource: g }))))
+  ) : /* @__PURE__ */ e.createElement(e.Fragment, null);
+}, Oe = d("div", {
+  position: "absolute",
+  right: "1rem",
+  top: "1rem",
+  display: "flex",
+  justifyContent: "flex-end",
+  zIndex: "1"
+}), Rn = d("input", {
+  flexGrow: "1",
+  border: "none",
+  backgroundColor: "$secondaryMuted",
+  color: "$primary",
+  marginRight: "1rem",
+  height: "2rem",
+  padding: "0 1rem",
+  borderRadius: "2rem",
+  fontFamily: "inherit",
+  fontSize: "1rem",
+  lineHeight: "1rem",
+  boxShadow: "inset 1px 1px 2px #0003",
+  "&::placeholder": {
+    color: "$primaryMuted"
+  }
+}), Z = d("button", {
+  display: "flex",
+  background: "none",
+  border: "none",
+  width: "2rem !important",
+  height: "2rem !important",
+  padding: "0",
+  margin: "0",
+  fontWeight: "700",
+  borderRadius: "2rem",
+  backgroundColor: "$accent",
+  color: "$secondary",
+  cursor: "pointer",
+  boxSizing: "content-box !important",
+  transition: "$all",
+  svg: {
+    height: "60%",
+    width: "60%",
+    padding: "20%",
+    fill: "$secondary",
+    stroke: "$secondary",
+    opacity: "1",
+    filter: "drop-shadow(5px 5px 5px #000D)",
+    boxSizing: "inherit",
+    transition: "$all"
+  },
+  "&:disabled": {
+    backgroundColor: "transparent",
+    boxShadow: "none",
+    svg: { opacity: "0.25" }
+  }
+}), Fn = d("div", {
+  display: "flex",
+  marginRight: "0.618rem",
+  backgroundColor: "$accentAlt",
+  borderRadius: "2rem",
+  boxShadow: "5px 5px 5px #0003",
+  color: "$secondary",
+  alignItems: "center",
+  "> span": {
+    display: "flex",
+    margin: "0 0.5rem",
+    fontSize: "0.7222rem"
+  }
+}), On = d("div", {
+  display: "flex",
+  position: "relative",
+  zIndex: "1",
+  width: "100%",
+  padding: "0",
+  transition: "$all",
+  variants: {
+    isToggle: {
+      true: {
+        paddingTop: "2.618rem",
+        [`& ${Oe}`]: {
+          width: "calc(100% - 2rem)",
+          "@sm": {
+            width: "calc(100% - 2rem)"
+          }
+        }
+      }
+    }
+  }
+}), Hn = (t, n) => {
+  x(() => {
+    function a(r) {
+      r.key === t && n();
+    }
+    return window.addEventListener("keyup", a), () => window.removeEventListener("keyup", a);
+  }, []);
+}, Pn = () => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, /* @__PURE__ */ e.createElement("title", null, "Arrow Back"), /* @__PURE__ */ e.createElement(
+  "path",
+  {
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeMiterlimit: "10",
+    strokeWidth: "45",
+    d: "M244 400L100 256l144-144M120 256h292"
+  }
+)), Vn = () => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, /* @__PURE__ */ e.createElement("title", null, "Arrow Forward"), /* @__PURE__ */ e.createElement(
+  "path",
+  {
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeMiterlimit: "10",
+    strokeWidth: "45",
+    d: "M268 112l144 144-144 144M392 256H100"
+  }
+)), Bn = () => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, /* @__PURE__ */ e.createElement("title", null, "Close"), /* @__PURE__ */ e.createElement("path", { d: "M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z" })), jn = () => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, /* @__PURE__ */ e.createElement("title", null, "Search"), /* @__PURE__ */ e.createElement("path", { d: "M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z" })), Dn = ({
+  handleCanvasToggle: t,
+  handleFilter: n,
+  activeIndex: a,
+  canvasLength: r
+}) => {
+  const [o, i] = E(!1), [s, l] = E(!1), [c, m] = E(!1);
+  x(() => {
+    m(a === 0), a === r - 1 ? l(!0) : l(!1);
+  }, [a, r]), Hn("Escape", () => {
+    i(!1), n("");
+  });
+  const u = () => {
+    i((v) => !v), n("");
+  }, g = (v) => n(v.target.value);
+  return /* @__PURE__ */ e.createElement(On, { isToggle: o }, /* @__PURE__ */ e.createElement(Oe, null, o && /* @__PURE__ */ e.createElement(Rn, { autoFocus: !0, onChange: g, placeholder: "Search" }), !o && /* @__PURE__ */ e.createElement(Fn, null, /* @__PURE__ */ e.createElement(
+    Z,
+    {
+      onClick: () => t(-1),
+      disabled: c,
+      type: "button"
+    },
+    /* @__PURE__ */ e.createElement(Pn, null)
+  ), /* @__PURE__ */ e.createElement("span", null, a + 1, " of ", r), /* @__PURE__ */ e.createElement(
+    Z,
+    {
+      onClick: () => t(1),
+      disabled: s,
+      type: "button"
+    },
+    /* @__PURE__ */ e.createElement(Vn, null)
+  )), /* @__PURE__ */ e.createElement(Z, { onClick: u, type: "button" }, o ? /* @__PURE__ */ e.createElement(Bn, null) : /* @__PURE__ */ e.createElement(jn, null))));
+}, Wn = d(ge, {
+  display: "flex",
+  flexDirection: "row",
+  flexGrow: "1",
+  padding: "1.618rem",
+  overflowX: "scroll",
+  position: "relative",
+  zIndex: "0"
+}), Nn = () => /* @__PURE__ */ e.createElement(
+  "path",
+  {
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "32",
+    d: "M256 112v288M400 256H112"
+  }
+), Gn = () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M232 416a23.88 23.88 0 01-14.2-4.68 8.27 8.27 0 01-.66-.51L125.76 336H56a24 24 0 01-24-24V200a24 24 0 0124-24h69.75l91.37-74.81a8.27 8.27 0 01.66-.51A24 24 0 01256 120v272a24 24 0 01-24 24zm-106.18-80zm-.27-159.86zM320 336a16 16 0 01-14.29-23.19c9.49-18.87 14.3-38 14.3-56.81 0-19.38-4.66-37.94-14.25-56.73a16 16 0 0128.5-14.54C346.19 208.12 352 231.44 352 256c0 23.86-6 47.81-17.7 71.19A16 16 0 01320 336z" }), /* @__PURE__ */ e.createElement("path", { d: "M368 384a16 16 0 01-13.86-24C373.05 327.09 384 299.51 384 256c0-44.17-10.93-71.56-29.82-103.94a16 16 0 0127.64-16.12C402.92 172.11 416 204.81 416 256c0 50.43-13.06 83.29-34.13 120a16 16 0 01-13.87 8z" }), /* @__PURE__ */ e.createElement("path", { d: "M416 432a16 16 0 01-13.39-24.74C429.85 365.47 448 323.76 448 256c0-66.5-18.18-108.62-45.49-151.39a16 16 0 1127-17.22C459.81 134.89 480 181.74 480 256c0 64.75-14.66 113.63-50.6 168.74A16 16 0 01416 432z" })), qn = () => /* @__PURE__ */ e.createElement("path", { d: "M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z" }), _n = () => /* @__PURE__ */ e.createElement("path", { d: "M416 64H96a64.07 64.07 0 00-64 64v256a64.07 64.07 0 0064 64h320a64.07 64.07 0 0064-64V128a64.07 64.07 0 00-64-64zm-80 64a48 48 0 11-48 48 48.05 48.05 0 0148-48zM96 416a32 32 0 01-32-32v-67.63l94.84-84.3a48.06 48.06 0 0165.8 1.9l64.95 64.81L172.37 416zm352-32a32 32 0 01-32 32H217.63l121.42-121.42a47.72 47.72 0 0161.64-.16L448 333.84z" }), Zn = () => /* @__PURE__ */ e.createElement("path", { d: "M464 384.39a32 32 0 01-13-2.77 15.77 15.77 0 01-2.71-1.54l-82.71-58.22A32 32 0 01352 295.7v-79.4a32 32 0 0113.58-26.16l82.71-58.22a15.77 15.77 0 012.71-1.54 32 32 0 0145 29.24v192.76a32 32 0 01-32 32zM268 400H84a68.07 68.07 0 01-68-68V180a68.07 68.07 0 0168-68h184.48A67.6 67.6 0 01336 179.52V332a68.07 68.07 0 01-68 68z" }), He = d("svg", {
+  display: "inline-flex",
+  variants: {
+    isLarge: {
+      true: {
+        height: "4rem",
+        width: "4rem"
+      }
+    },
+    isMedium: {
+      true: {
+        height: "2rem",
+        width: "2rem"
+      }
+    },
+    isSmall: {
+      true: {
+        height: "1rem",
+        width: "1rem"
+      }
+    }
+  }
+}), Un = ({ children: t }) => /* @__PURE__ */ e.createElement("title", null, t), k = (t) => /* @__PURE__ */ e.createElement(
+  He,
+  {
+    ...t,
+    "data-testid": "icon-svg",
+    role: "img",
+    viewBox: "0 0 512 512",
+    xmlns: "http://www.w3.org/2000/svg"
+  },
+  t.children
+);
+k.Title = Un;
+k.Add = Nn;
+k.Audio = Gn;
+k.Close = qn;
+k.Image = _n;
+k.Video = Zn;
+const Xn = K({
+  "0%": { opacity: 0, transform: "translateY(1rem)" },
+  "100%": { opacity: 1, transform: "translateY(0)" }
+}), Yn = K({
+  "0%": { opacity: 0, transform: "translateY(1rem)" },
+  "100%": { opacity: 1, transform: "translateY(0)" }
+}), Pe = d(dt, {
+  fill: "$secondaryAlt"
+}), Jn = d(mt, {
+  position: "absolute",
+  right: "0",
+  top: "0",
+  padding: "0.5rem",
+  margin: "0",
+  cursor: "pointer",
+  border: "none",
+  background: "none",
+  fill: "inherit",
+  "&:hover": {
+    opacity: "0.75"
+  }
+}), Kn = d(ut, {
+  border: "none",
+  backgroundColor: "white",
+  fill: "inhrerit",
+  padding: "1rem 2rem 1rem 1rem",
+  width: "auto",
+  minWidth: "200px",
+  maxWidth: "350px",
+  borderRadius: "3px",
+  boxShadow: "5px 5px 13px #0002",
+  /**
+   * Animate toggle
+   */
+  animationDuration: "0.3s",
+  animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
+  '&[data-side="top"]': { animationName: Yn },
+  '&[data-side="bottom"]': { animationName: Xn },
+  /**
+   *
+   */
+  '&[data-align="end"]': {
+    [`& ${Pe}`]: {
+      margin: "0 0.7rem"
+    }
+  }
+}), Qn = d(pt, {
+  display: "inline-flex",
+  padding: "0.5rem 0",
+  margin: "0 0.5rem 0 0",
+  cursor: "pointer",
+  border: "none",
+  background: "none",
+  "> button, > span": {
+    margin: "0"
+  }
+}), ea = d(gt, {
+  boxSizing: "content-box"
+}), ta = (t) => /* @__PURE__ */ e.createElement(Qn, { ...t }, t.children), na = (t) => /* @__PURE__ */ e.createElement(Kn, { ...t }, /* @__PURE__ */ e.createElement(Pe, null), /* @__PURE__ */ e.createElement(Jn, null, /* @__PURE__ */ e.createElement(k, { isSmall: !0 }, /* @__PURE__ */ e.createElement(k.Close, null))), t.children), V = ({ children: t }) => /* @__PURE__ */ e.createElement(ea, null, t);
+V.Trigger = ta;
+V.Content = na;
+const X = d("div", {
+  // Reset
+  boxSizing: "border-box",
+  // Custom
+  display: "inline-flex",
+  alignItems: "center",
+  borderRadius: "5px",
+  padding: "$1",
+  marginBottom: "$2",
+  marginRight: "$2",
+  backgroundColor: "$lightGrey",
+  color: "$richBlack50",
+  textTransform: "uppercase",
+  fontSize: "$2",
+  objectFit: "contain",
+  lineHeight: "1em !important",
+  "&:last-child": {
+    marginRight: "0"
+  },
+  [`${He}`]: {
+    position: "absolute",
+    left: "$1",
+    height: "$3",
+    width: "$3"
+  },
+  variants: {
+    isIcon: {
+      true: { position: "relative", paddingLeft: "$5" }
+    }
+  }
+}), Y = d("span", {
+  display: "flex"
+}), aa = d("span", {
+  display: "flex",
+  width: "1.2111rem",
+  height: "0.7222rem"
+}), ra = d("span", {
+  display: "inline-flex",
+  marginLeft: "5px",
+  marginBottom: "-1px"
+}), oa = d(fe, {
+  display: "flex",
+  flexShrink: "0",
+  margin: "0 1.618rem 0 0",
+  padding: "0",
+  cursor: "pointer",
+  background: "none",
+  border: "none",
+  fontFamily: "inherit",
+  lineHeight: "1.25em",
+  fontSize: "1rem",
+  textAlign: "left",
+  "&:last-child": {
+    marginRight: "1rem"
+  },
+  figure: {
+    margin: "0",
+    width: "161.8px",
+    "> div": {
+      position: "relative",
+      display: "flex",
+      backgroundColor: "$secondaryAlt",
+      width: "inherit",
+      height: "100px",
+      overflow: "hidden",
+      borderRadius: "3px",
+      transition: "$all",
+      img: {
+        width: "100%",
+        height: "100%",
+        objectFit: "cover",
+        filter: "blur(0)",
+        transform: "scale3d(1, 1, 1)",
+        transition: "$all",
+        color: "transparent"
+      },
+      [`& ${Y}`]: {
+        position: "absolute",
+        right: "0",
+        bottom: "0",
+        [`& ${X}`]: {
+          margin: "0",
+          paddingLeft: "0",
+          fontSize: "0.7222rem",
+          backgroundColor: "#000d",
+          color: "$secondary",
+          fill: "$secondary",
+          borderBottomLeftRadius: "0",
+          borderTopRightRadius: "0"
+        }
+      }
+    },
+    figcaption: {
+      marginTop: "0.5rem",
+      fontWeight: "400",
+      fontSize: "0.8333rem",
+      display: "-webkit-box",
+      overflow: "hidden",
+      MozBoxOrient: "vertical",
+      WebkitBoxOrient: "vertical",
+      WebkitLineClamp: "5",
+      "@sm": {
+        fontSize: "0.8333rem"
+      }
+    }
+  },
+  "&[aria-checked='true']": {
+    figure: {
+      "> div": {
+        backgroundColor: "$primaryAlt",
+        "&::before": {
+          position: "absolute",
+          zIndex: "1",
+          color: "$secondaryMuted",
+          content: "Active Item",
+          textTransform: "uppercase",
+          fontWeight: "700",
+          fontSize: "0.6111rem",
+          letterSpacing: "0.03rem",
+          display: "flex",
+          width: "100%",
+          height: "100%",
+          flexDirection: "column",
+          justifyContent: "center",
+          textAlign: "center",
+          textShadow: "5px 5px 5px #0003"
+        },
+        img: {
+          opacity: "0.3",
+          transform: "scale3d(1.1, 1.1, 1.1)",
+          filter: "blur(2px)"
+        },
+        [`& ${Y}`]: {
+          [`& ${X}`]: {
+            backgroundColor: "$accent"
+          }
+        }
+      }
+    },
+    figcaption: {
+      fontWeight: "700"
+    }
+  }
+}), ia = ({ type: t }) => {
+  switch (t) {
+    case "Sound":
+      return /* @__PURE__ */ e.createElement(k.Audio, null);
+    case "Image":
+      return /* @__PURE__ */ e.createElement(k.Image, null);
+    case "Video":
+      return /* @__PURE__ */ e.createElement(k.Video, null);
+    default:
+      return /* @__PURE__ */ e.createElement(k.Image, null);
+  }
+}, la = ({
+  canvas: t,
+  canvasIndex: n,
+  isActive: a,
+  thumbnail: r,
+  type: o,
+  handleChange: i
+}) => /* @__PURE__ */ e.createElement(
+  oa,
+  {
+    "aria-checked": a,
+    "data-testid": "media-thumbnail",
+    "data-canvas": n,
+    onClick: () => i(t.id),
+    value: t.id
+  },
+  /* @__PURE__ */ e.createElement("figure", null, /* @__PURE__ */ e.createElement("div", null, (r == null ? void 0 : r.id) && /* @__PURE__ */ e.createElement(
+    "img",
+    {
+      src: r.id,
+      alt: t != null && t.label ? P(t.label) : ""
+    }
+  ), /* @__PURE__ */ e.createElement(Y, null, /* @__PURE__ */ e.createElement(X, { isIcon: !0, "data-testid": "thumbnail-tag" }, /* @__PURE__ */ e.createElement(aa, null), /* @__PURE__ */ e.createElement(k, { "aria-label": o }, /* @__PURE__ */ e.createElement(ia, { type: o })), ["Video", "Sound"].includes(o) && /* @__PURE__ */ e.createElement(ra, null, ve(t.duration))))), (t == null ? void 0 : t.label) && /* @__PURE__ */ e.createElement("figcaption", { "data-testid": "fig-caption" }, /* @__PURE__ */ e.createElement(L, { label: t.label })))
+), sa = (t) => t.body ? t.body.type : "Image", ca = ({ items: t }) => {
+  const n = H(), a = S(), { activeCanvas: r, vault: o } = a, [i, s] = E(""), [l, c] = E([]), [m, u] = E(0), g = e.useRef(null), v = "painting", b = (f) => {
+    r !== f && n({
+      type: "updateActiveCanvas",
+      canvasId: f
+    });
+  };
+  x(() => {
+    if (!l.length) {
+      const f = ["Image", "Sound", "Video"], y = t.map(
+        (w) => we(o, w, v, f)
+      ).filter((w) => w.annotations.length > 0);
+      c(y);
+    }
+  }, [t, l.length, o]), x(() => {
+    l.forEach((f, y) => {
+      f != null && f.canvas && f.canvas.id === r && u(y);
+    });
+  }, [r, l]), x(() => {
+    const f = document.querySelector(
+      `[data-canvas="${m}"]`
+    );
+    if (f instanceof HTMLElement && g.current) {
+      const y = f.offsetLeft - g.current.offsetWidth / 2 + f.offsetWidth / 2;
+      g.current.scrollTo({ left: y, behavior: "smooth" });
+    }
+  }, [m]);
+  const p = (f) => s(f), h = (f) => {
+    const y = l[m + f];
+    y != null && y.canvas && b(y.canvas.id);
+  };
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
+    Dn,
+    {
+      handleFilter: p,
+      handleCanvasToggle: h,
+      activeIndex: m,
+      canvasLength: l.length
+    }
+  ), /* @__PURE__ */ e.createElement(Wn, { "aria-label": "select item", "data-testid": "media", ref: g }, l.filter((f) => {
+    var y;
+    if ((y = f.canvas) != null && y.label) {
+      const w = P(f.canvas.label);
+      if (Array.isArray(w))
+        return w[0].toLowerCase().includes(i.toLowerCase());
+    }
+  }).map((f, y) => {
+    var w, $;
+    return /* @__PURE__ */ e.createElement(
+      la,
+      {
+        canvas: f.canvas,
+        canvasIndex: y,
+        handleChange: b,
+        isActive: r === ((w = f == null ? void 0 : f.canvas) == null ? void 0 : w.id),
+        key: ($ = f == null ? void 0 : f.canvas) == null ? void 0 : $.id,
+        thumbnail: Ht(o, f, 200, 200),
+        type: sa(f.annotations[0])
+      }
+    );
+  })));
+}, Ve = d("button", {
+  background: "none",
+  border: "none",
+  cursor: "zoom-in",
+  width: "100%",
+  height: "100%",
+  margin: "0",
+  padding: "0",
+  transition: "$all",
+  "& img": {
+    width: "100%",
+    height: "100%",
+    objectFit: "contain",
+    color: "transparent",
+    transition: "$all"
+  },
+  variants: {
+    isMedia: {
+      true: {
+        cursor: "pointer"
+      }
+    }
+  }
+}), Be = d("button", {
+  display: "flex",
+  height: "2rem",
+  width: "2rem",
+  borderRadius: "2rem",
+  padding: "0",
+  margin: "0",
+  fontFamily: "inherit",
+  background: "none",
+  border: "none",
+  color: "white",
+  cursor: "pointer",
+  marginLeft: "0.618rem",
+  backgroundColor: "$primary",
+  filter: "drop-shadow(2px 2px 5px #0003)",
+  transition: "$all",
+  boxSizing: "content-box !important",
+  "&:first-child": {
+    marginLeft: "0"
+  },
+  "@xs": {
+    marginBottom: "0.618rem",
+    marginLeft: "0",
+    "&:last-child": {
+      marginBottom: "0"
+    }
+  },
+  svg: {
+    height: "60%",
+    width: "60%",
+    padding: "20%",
+    fill: "$secondary",
+    stroke: "$secondary",
+    filter: "drop-shadow(2px 2px 5px #0003)",
+    transition: "$all",
+    boxSizing: "inherit"
+  },
+  "&:hover, &:focus": {
+    backgroundColor: "$accent"
+  },
+  "&#rotateRight": {
+    "&:hover, &:focus": {
+      svg: {
+        rotate: "45deg"
+      }
+    }
+  },
+  "&#rotateLeft": {
+    transform: "scaleX(-1)",
+    "&:hover, &:focus": {
+      svg: {
+        rotate: "45deg"
+      }
+    }
+  },
+  "&#reset": {
+    "&:hover, &:focus": {
+      svg: {
+        rotate: "-15deg"
+      }
+    }
+  }
+}), je = d(Be, {
+  position: "absolute",
+  width: "2rem",
+  top: "1rem",
+  right: "1rem",
+  zIndex: 100,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  textAlign: "center",
+  transition: "$all",
+  borderRadius: "50%",
+  backgroundColor: "$accent",
+  cursor: "pointer",
+  "&:hover, &:focus": {
+    backgroundColor: "$accent !important"
+  },
+  variants: {
+    isInteractive: {
+      true: {
+        "&:hover": {
+          opacity: "1"
+        }
+      },
+      false: {}
+    },
+    isMedia: {
+      true: {
+        cursor: "pointer !important"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      isInteractive: !1,
+      isMedia: !0,
+      css: {
+        top: "50%",
+        right: "50%",
+        width: "4rem",
+        height: "4rem",
+        transform: "translate(50%,-50%)"
+      }
+    }
+  ]
+}), da = d("div", {
+  position: "relative",
+  zIndex: "0",
+  display: "flex",
+  flexDirection: "column",
+  gap: "1rem",
+  "&:hover": {
+    [`${je}`]: {
+      backgroundColor: "$accent"
+    },
+    [`${Ve}`]: {
+      backgroundColor: "#6662",
+      img: {
+        filter: "brightness(0.85)"
+      }
+    }
+  }
+}), ma = d("div", {}), ua = d("svg", {
+  height: "19px",
+  color: "$accent",
+  fill: "$accent",
+  stroke: "$accent",
+  display: "flex",
+  margin: "0.25rem 0.85rem"
+}), pa = d(ft, {
+  fontSize: "1.25rem",
+  fontWeight: "400",
+  fontFamily: "inherit",
+  alignSelf: "flex-start",
+  flexGrow: "1",
+  cursor: "pointer",
+  transition: "$all",
+  border: "1px solid #6663",
+  boxShadow: "2px 2px 5px #0001",
+  borderRadius: "3px",
+  display: "flex",
+  alignItems: "center",
+  paddingLeft: "0.5rem",
+  width: "100%",
+  "@sm": {
+    fontSize: "1rem"
+  }
+}), ga = d(ht, {
+  borderRadius: "3px",
+  boxShadow: "3px 3px 8px #0003",
+  backgroundColor: "$secondary",
+  marginTop: "2.25rem",
+  marginLeft: "6px",
+  paddingBottom: "0.25rem",
+  maxHeight: "calc(61.8vh - 2.5rem) !important",
+  borderTopLeftRadius: "0",
+  border: "1px solid $secondaryMuted",
+  maxWidth: "90vw"
+}), fa = d(vt, {
+  display: "flex",
+  alignItems: "center",
+  fontFamily: "inherit",
+  padding: "0.25rem 0.5rem",
+  color: "$primary",
+  fontWeight: "400",
+  fontSize: "0.8333rem",
+  cursor: "pointer",
+  backgroundColor: "$secondary",
+  width: "calc(100% - 1rem)",
+  "> span": {
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+    overflow: "hidden"
+  },
+  '&[data-state="checked"]': {
+    fontWeight: "700",
+    color: "$primary !important"
+  },
+  "&:hover": {
+    color: "$accent"
+  },
+  img: {
+    width: "31px",
+    height: "31px",
+    marginRight: "0.5rem",
+    borderRadius: "3px"
+  }
+}), ha = d(bt, {
+  color: "$primaryMuted",
+  fontFamily: "inherit",
+  fontSize: "0.85rem",
+  padding: "0.5rem 1rem 0.5rem 0.5rem",
+  display: "flex",
+  alignItems: "center",
+  marginBottom: "0.25rem",
+  borderRadius: "3px",
+  borderTopLeftRadius: "0",
+  borderBottomLeftRadius: "0",
+  borderBottomRightRadius: "0",
+  backgroundColor: "$secondaryMuted"
+}), De = d(xt, {
+  position: "relative",
+  zIndex: "5",
+  width: "100%"
+}), U = ({ direction: t, title: n }) => {
+  const a = () => /* @__PURE__ */ e.createElement("path", { d: "M414 321.94L274.22 158.82a24 24 0 00-36.44 0L98 321.94c-13.34 15.57-2.28 39.62 18.22 39.62h279.6c20.5 0 31.56-24.05 18.18-39.62z" }), r = () => /* @__PURE__ */ e.createElement("path", { d: "M98 190.06l139.78 163.12a24 24 0 0036.44 0L414 190.06c13.34-15.57 2.28-39.62-18.22-39.62h-279.6c-20.5 0-31.56 24.05-18.18 39.62z" });
+  return /* @__PURE__ */ e.createElement(
+    ua,
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      focusable: "false",
+      viewBox: "0 0 512 512",
+      role: "img"
+    },
+    /* @__PURE__ */ e.createElement("title", null, n),
+    t === "up" && /* @__PURE__ */ e.createElement(a, null),
+    t === "down" && /* @__PURE__ */ e.createElement(r, null)
+  );
+}, We = ({
+  children: t,
+  label: n,
+  maxHeight: a,
+  onValueChange: r,
+  value: o
+}) => /* @__PURE__ */ e.createElement(De, { onValueChange: r, value: o }, /* @__PURE__ */ e.createElement(pa, { "data-testid": "select-button" }, /* @__PURE__ */ e.createElement(yt, { "data-testid": "select-button-value" }), /* @__PURE__ */ e.createElement(Et, null, /* @__PURE__ */ e.createElement(U, { direction: "down", title: "select" }))), /* @__PURE__ */ e.createElement(wt, null, /* @__PURE__ */ e.createElement(
+  ga,
+  {
+    css: { maxHeight: `${a} !important` },
+    "data-testid": "select-content"
+  },
+  /* @__PURE__ */ e.createElement($t, null, /* @__PURE__ */ e.createElement(U, { direction: "up", title: "scroll up for more" })),
+  /* @__PURE__ */ e.createElement(Ct, null, /* @__PURE__ */ e.createElement(kt, null, n && /* @__PURE__ */ e.createElement(ha, null, /* @__PURE__ */ e.createElement(L, { "data-testid": "select-label", label: n })), t)),
+  /* @__PURE__ */ e.createElement(St, null, /* @__PURE__ */ e.createElement(U, { direction: "down", title: "scroll down for more" }))
+))), Ne = (t) => /* @__PURE__ */ e.createElement(fa, { ...t }, t.thumbnail && /* @__PURE__ */ e.createElement(Le, { thumbnail: t.thumbnail }), /* @__PURE__ */ e.createElement(It, null, /* @__PURE__ */ e.createElement(L, { label: t.label })), /* @__PURE__ */ e.createElement(At, null)), va = d("div", {
+  position: "absolute !important",
+  zIndex: "1",
+  top: "1rem",
+  left: "1rem",
+  width: "161.8px",
+  height: "100px",
+  backgroundColor: "#000D",
+  boxShadow: "5px 5px 5px #0002",
+  borderRadius: "3px",
+  ".displayregion": {
+    border: " 3px solid $accent !important",
+    boxShadow: "0 0 3px #0006"
+  },
+  "@sm": {
+    width: "123px",
+    height: "76px"
+  },
+  "@xs": {
+    width: "100px",
+    height: "61.8px"
+  }
+}), ba = d("div", {
+  position: "relative",
+  width: "100%",
+  height: "100%",
+  zIndex: "0"
+}), xa = d("div", {
+  width: "100%",
+  height: "61.8vh",
+  maxHeight: "100vh",
+  background: "black",
+  backgroundSize: "contain",
+  color: "white",
+  position: "relative",
+  zIndex: "1",
+  overflow: "hidden"
+}), T = ({ id: t, label: n, children: a }) => /* @__PURE__ */ e.createElement(Be, { id: t, "data-testid": "openseadragon-button" }, /* @__PURE__ */ e.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": `${t}-svg-title`,
+    "data-testid": "openseadragon-button-svg",
+    focusable: "false",
+    viewBox: "0 0 512 512",
+    role: "img"
+  },
+  /* @__PURE__ */ e.createElement("title", { id: `${t}-svg-title` }, n),
+  a
+)), ya = d("div", {
+  position: "absolute",
+  zIndex: "1",
+  top: "1rem",
+  display: "flex",
+  "@xs": {
+    flexDirection: "column",
+    zIndex: "2"
+  },
+  variants: {
+    hasPlaceholder: {
+      true: {
+        right: "3.618rem",
+        "@xs": {
+          top: "3.618rem",
+          right: "1rem"
+        }
+      },
+      false: {
+        right: "1rem",
+        "@xs": {
+          top: "1rem",
+          right: "1rem"
+        }
+      }
+    }
+  }
+}), Ea = () => /* @__PURE__ */ e.createElement(
+  "path",
+  {
+    strokeLinecap: "round",
+    strokeMiterlimit: "10",
+    strokeWidth: "45",
+    d: "M256 112v288M400 256H112"
+  }
+), wa = () => /* @__PURE__ */ e.createElement(
+  "path",
+  {
+    strokeLinecap: "round",
+    strokeMiterlimit: "10",
+    strokeWidth: "45",
+    d: "M400 256H112"
+  }
+), $a = () => /* @__PURE__ */ e.createElement(
+  "path",
+  {
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "32",
+    d: "M432 320v112H320M421.8 421.77L304 304M80 192V80h112M90.2 90.23L208 208M320 80h112v112M421.77 90.2L304 208M192 432H80V320M90.23 421.8L208 304"
+  }
+), Ca = () => /* @__PURE__ */ e.createElement("path", { d: "M448 440a16 16 0 01-12.61-6.15c-22.86-29.27-44.07-51.86-73.32-67C335 352.88 301 345.59 256 344.23V424a16 16 0 01-27 11.57l-176-168a16 16 0 010-23.14l176-168A16 16 0 01256 88v80.36c74.14 3.41 129.38 30.91 164.35 81.87C449.32 292.44 464 350.9 464 424a16 16 0 01-16 16z" }), ce = () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
+  "path",
+  {
+    fill: "none",
+    strokeLinecap: "round",
+    strokeMiterlimit: "10",
+    strokeWidth: "45",
+    d: "M400 148l-21.12-24.57A191.43 191.43 0 00240 64C134 64 48 150 48 256s86 192 192 192a192.09 192.09 0 00181.07-128"
+  }
+), /* @__PURE__ */ e.createElement("path", { d: "M464 97.42V208a16 16 0 01-16 16H337.42c-14.26 0-21.4-17.23-11.32-27.31L436.69 86.1C446.77 76 464 83.16 464 97.42z" })), ka = ({
+  hasPlaceholder: t,
+  options: n
+}) => /* @__PURE__ */ e.createElement(
+  ya,
+  {
+    "data-testid": "openseadragon-controls",
+    hasPlaceholder: t,
+    id: "openseadragon-controls"
+  },
+  n.showZoomControl && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(T, { id: "zoomIn", label: "zoom in" }, /* @__PURE__ */ e.createElement(Ea, null)), /* @__PURE__ */ e.createElement(T, { id: "zoomOut", label: "zoom out" }, /* @__PURE__ */ e.createElement(wa, null))),
+  n.showFullPageControl && /* @__PURE__ */ e.createElement(T, { id: "fullPage", label: "full page" }, /* @__PURE__ */ e.createElement($a, null)),
+  n.showRotationControl && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(T, { id: "rotateRight", label: "rotate right" }, /* @__PURE__ */ e.createElement(ce, null)), /* @__PURE__ */ e.createElement(T, { id: "rotateLeft", label: "rotate left" }, /* @__PURE__ */ e.createElement(ce, null))),
+  n.showHomeControl && /* @__PURE__ */ e.createElement(T, { id: "reset", label: "reset" }, /* @__PURE__ */ e.createElement(Ca, null))
+), Sa = (t) => fetch(`${t.replace(/\/$/, "")}/info.json`).then((n) => n.json()).then((n) => n).catch((n) => {
+  console.error(
+    `The IIIF tilesource ${t.replace(
+      /\/$/,
+      ""
+    )}/info.json failed to load: ${n}`
+  );
+}), Ia = (t) => {
+  let n, a;
+  if (Array.isArray(t) && (n = t[0], n)) {
+    let r;
+    "@id" in n ? r = n["@id"] : r = n.id, a = r;
+  }
+  return a;
+}, Aa = ({ uri: t, hasPlaceholder: n, imageType: a }) => {
+  const [r, o] = E(), [i, s] = E(), l = S(), { configOptions: c } = l, m = {
+    id: `openseadragon-viewport-${i}`,
+    loadTilesWithAjax: !0,
+    fullPageButton: "fullPage",
+    homeButton: "reset",
+    rotateLeftButton: "rotateLeft",
+    rotateRightButton: "rotateRight",
+    zoomInButton: "zoomIn",
+    zoomOutButton: "zoomOut",
+    showNavigator: !0,
+    showFullPageControl: !0,
+    showHomeControl: !0,
+    showRotationControl: !0,
+    showZoomControl: !0,
+    navigatorBorderColor: "transparent",
+    navigatorId: `openseadragon-navigator-${i}`,
+    gestureSettingsMouse: {
+      clickToZoom: !0,
+      dblClickToZoom: !0,
+      pinchToZoom: !0,
+      scrollToZoom: !0
+    },
+    ...c.openSeadragon,
+    ajaxWithCredentials: c.withCredentials
+  };
+  return x(() => {
+    t !== r && (o(t), s(he()));
+  }, [r, t]), x(() => {
+    if (r)
+      switch (a) {
+        case "simpleImage":
+          ne(m).addSimpleImage({
+            url: r
+          });
+          break;
+        case "tiledImage":
+          Sa(r).then(
+            (u) => ne(m).addTiledImage({
+              tileSource: u
+            })
+          );
+          break;
+        default:
+          console.warn(
+            `Unable to render ${r} in OpenSeadragon as type: "${a}"`
+          );
+          break;
+      }
+  }, [r]), i ? /* @__PURE__ */ e.createElement(
+    xa,
+    {
+      css: {
+        backgroundColor: c.canvasBackgroundColor,
+        height: c.canvasHeight
+      },
+      className: "clover-viewer-osd-wrapper",
+      "data-testid": "clover-viewer-osd-wrapper"
+    },
+    /* @__PURE__ */ e.createElement(ka, { hasPlaceholder: n, options: m }),
+    /* @__PURE__ */ e.createElement(va, { id: `openseadragon-navigator-${i}` }),
+    /* @__PURE__ */ e.createElement(ba, { id: `openseadragon-viewport-${i}` })
+  ) : null;
+}, Ma = ({
+  painting: t,
+  hasPlaceholder: n
+}) => {
+  const [a, r] = E(), [o, i] = E();
+  return x(() => {
+    Array.isArray(t == null ? void 0 : t.service) && (t == null ? void 0 : t.service.length) > 0 ? (r("tiledImage"), i(Ia(t == null ? void 0 : t.service))) : (r("simpleImage"), i(t == null ? void 0 : t.id));
+  }, [t]), /* @__PURE__ */ e.createElement(
+    Aa,
+    {
+      uri: o,
+      key: o,
+      hasPlaceholder: n,
+      imageType: a
+    }
+  );
+}, za = ({
+  isMedia: t,
+  label: n,
+  placeholderCanvas: a,
+  setIsInteractive: r
+}) => {
+  const { vault: o } = S(), i = j(o, a), s = i ? i[0] : void 0, l = n ? P(n) : ["placeholder image"];
+  return /* @__PURE__ */ e.createElement(
+    Ve,
+    {
+      onClick: () => r(!0),
+      isMedia: t,
+      className: "clover-viewer-placeholder"
+    },
+    /* @__PURE__ */ e.createElement(
+      "img",
+      {
+        src: (s == null ? void 0 : s.id) || "",
+        alt: l.join(),
+        height: s == null ? void 0 : s.height,
+        width: s == null ? void 0 : s.width
+      }
+    )
+  );
+}, Ta = d("canvas", {
+  position: "absolute",
+  width: "100%",
+  height: "100%",
+  zIndex: "0"
+}), La = e.forwardRef(
+  (t, n) => {
+    const a = e.useRef(null), r = D(() => {
+      var i, s;
+      if ((i = n.current) != null && i.currentTime && ((s = n.current) == null ? void 0 : s.currentTime) > 0)
+        return;
+      const l = n.current;
+      if (!l)
+        return;
+      const c = new AudioContext(), m = c.createMediaElementSource(l), u = c.createAnalyser(), g = a.current;
+      if (!g)
+        return;
+      g.width = l.offsetWidth, g.height = l.offsetHeight;
+      const v = g.getContext("2d");
+      m.connect(u), u.connect(c.destination), u.fftSize = 256;
+      const b = u.frequencyBinCount, p = new Uint8Array(b);
+      setInterval(function() {
+        o(
+          u,
+          v,
+          b,
+          p,
+          g.width,
+          g.height
+        );
+      }, 20);
+    }, [n]);
+    e.useEffect(() => {
+      !n || !n.current || (n.current.onplay = r);
+    }, [r, n]);
+    function o(i, s, l, c, m, u) {
+      const g = m / l * 2.6;
+      let v, b = 0;
+      i.getByteFrequencyData(c), s.fillStyle = "#000000", s.fillRect(0, 0, m, u);
+      for (let p = 0; p < l; p++)
+        v = c[p] * 2, s.fillStyle = "rgba(78, 42, 132, 1)", s.fillRect(b, u - v, g, v), b += g + 6;
+    }
+    return /* @__PURE__ */ e.createElement(Ta, { ref: a, role: "presentation" });
+  }
+), Ra = d("div", {
+  position: "relative",
+  backgroundColor: "$primaryAlt",
+  display: "flex",
+  flexGrow: "0",
+  flexShrink: "1",
+  maxHeight: "500px",
+  zIndex: "1",
+  video: {
+    backgroundColor: "transparent",
+    objectFit: "contain",
+    width: "100%",
+    height: "100%",
+    position: "relative",
+    zIndex: "1"
+  }
+}), Fa = ({ resource: t, ignoreCaptionLabels: n }) => {
+  const a = P(t.label, "en");
+  return Array.isArray(a) && a.some((r) => n.includes(r)) ? null : /* @__PURE__ */ e.createElement(
+    "track",
+    {
+      key: t.id,
+      src: t.id,
+      label: Array.isArray(a) ? a[0] : a,
+      srcLang: "en",
+      "data-testid": "player-track"
+    }
+  );
+}, Oa = ({ allSources: t, resources: n, painting: a }) => {
+  const [r, o] = e.useState(0), [i, s] = e.useState(), l = e.useRef(null), c = (a == null ? void 0 : a.type) === "Sound", m = S(), { activeCanvas: u, configOptions: g, vault: v } = m;
+  return x(() => {
+    if (!a.id || !l.current)
+      return;
+    if (l != null && l.current) {
+      const h = l.current;
+      h.src = a.id, h.load();
+    }
+    if (a.id.split(".").pop() !== "m3u8")
+      return;
+    const b = {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      xhrSetup: function(h, f) {
+        h.withCredentials = !!g.withCredentials;
+      }
+    }, p = new A(b);
+    return p.attachMedia(l.current), p.on(A.Events.MEDIA_ATTACHED, function() {
+      p.loadSource(a.id);
+    }), p.on(A.Events.ERROR, function(h, f) {
+      if (f.fatal)
+        switch (f.type) {
+          case A.ErrorTypes.NETWORK_ERROR:
+            console.error(
+              `fatal ${h} network error encountered, try to recover`
+            ), p.startLoad();
+            break;
+          case A.ErrorTypes.MEDIA_ERROR:
+            console.error(
+              `fatal ${h} media error encountered, try to recover`
+            ), p.recoverMediaError();
+            break;
+          default:
+            p.destroy();
+            break;
+        }
+    }), () => {
+      if (p && l.current) {
+        const h = l.current;
+        p.detachMedia(), p.destroy(), h.currentTime = 0;
+      }
+    };
+  }, [g.withCredentials, a.id]), x(() => {
+    var b, p, h, f;
+    const y = v.get(u), w = (b = y.accompanyingCanvas) != null && b.id ? j(v, (p = y.accompanyingCanvas) == null ? void 0 : p.id) : null, $ = (h = y.placeholderCanvas) != null && h.id ? j(v, (f = y.placeholderCanvas) == null ? void 0 : f.id) : null;
+    w && $ ? s(r === 0 ? $[0].id : w[0].id) : (w && s(w[0].id), $ && s($[0].id));
+  }, [u, r, v]), x(() => {
+    if (l != null && l.current) {
+      const b = l.current;
+      return b == null || b.addEventListener(
+        "timeupdate",
+        () => o(b.currentTime)
+      ), () => document.removeEventListener("timeupdate", () => {
+      });
+    }
+  }, []), /* @__PURE__ */ e.createElement(
+    Ra,
+    {
+      css: {
+        backgroundColor: g.canvasBackgroundColor,
+        maxHeight: g.canvasHeight,
+        position: "relative"
+      },
+      "data-testid": "player-wrapper",
+      className: "clover-viewer-player-wrapper"
+    },
+    /* @__PURE__ */ e.createElement(
+      "video",
+      {
+        id: "clover-iiif-video",
+        key: a.id,
+        ref: l,
+        controls: !0,
+        height: a.height,
+        width: a.width,
+        crossOrigin: "anonymous",
+        poster: i,
+        style: {
+          maxHeight: g.canvasHeight,
+          position: "relative",
+          zIndex: "1"
+        }
+      },
+      t.map((b) => /* @__PURE__ */ e.createElement("source", { src: b.id, type: b.format, key: b.id })),
+      n.length > 0 && n.map((b) => /* @__PURE__ */ e.createElement(
+        Fa,
+        {
+          resource: b,
+          ignoreCaptionLabels: g.ignoreCaptionLabels || [],
+          key: b.id
+        }
+      )),
+      "Sorry, your browser doesn't support embedded videos."
+    ),
+    c && /* @__PURE__ */ e.createElement(La, { ref: l })
+  );
+}, Ha = () => /* @__PURE__ */ e.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": "close-svg-title",
+    focusable: "false",
+    viewBox: "0 0 512 512",
+    role: "img"
+  },
+  /* @__PURE__ */ e.createElement("title", { id: "close-svg-title" }, "close"),
+  /* @__PURE__ */ e.createElement("path", { d: "M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z" })
+), Pa = ({ isMedia: t }) => /* @__PURE__ */ e.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": "open-svg-title",
+    focusable: "false",
+    viewBox: "0 0 512 512",
+    role: "img"
+  },
+  /* @__PURE__ */ e.createElement("title", { id: "open-svg-title" }, "open"),
+  t ? /* @__PURE__ */ e.createElement("path", { d: "M133 440a35.37 35.37 0 01-17.5-4.67c-12-6.8-19.46-20-19.46-34.33V111c0-14.37 7.46-27.53 19.46-34.33a35.13 35.13 0 0135.77.45l247.85 148.36a36 36 0 010 61l-247.89 148.4A35.5 35.5 0 01133 440z" }) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "m456.69,421.39l-94.09-94.09c22.65-30.16,34.88-66.86,34.84-104.58,0-96.34-78.38-174.72-174.72-174.72S48,126.38,48,222.72s78.38,174.72,174.72,174.72c37.72.04,74.42-12.19,104.58-34.84l94.09,94.09c10.29,9.2,26.1,8.32,35.3-1.98,8.48-9.49,8.48-23.83,0-33.32Zm-233.97-73.87c-68.89-.08-124.72-55.91-124.8-124.8h0c0-68.93,55.87-124.8,124.8-124.8s124.8,55.87,124.8,124.8-55.87,124.8-124.8,124.8Z" }), /* @__PURE__ */ e.createElement("path", { d: "m279.5,197.76h-3.35s-28.47,0-28.47,0v-31.82c-.77-13.79-12.57-24.33-26.36-23.56-12.71.71-22.85,10.86-23.56,23.56v3.35h0v28.47h-31.82c-13.79.77-24.33,12.57-23.56,26.36.71,12.71,10.86,22.85,23.56,23.56h3.35s28.47,0,28.47,0v31.82c.77,13.79,12.57,24.33,26.36,23.56,12.71-.71,22.85-10.86,23.56-23.56v-3.35h0v-28.47h31.82c13.79-.77,24.33-12.57,23.56-26.36-.71-12.71-10.86-22.85-23.56-23.56Z" }))
+), Va = ({
+  handleToggle: t,
+  isInteractive: n,
+  isMedia: a
+}) => /* @__PURE__ */ e.createElement(
+  je,
+  {
+    onClick: t,
+    isInteractive: n,
+    isMedia: a,
+    "data-testid": "placeholder-toggle"
+  },
+  n ? /* @__PURE__ */ e.createElement(Ha, null) : /* @__PURE__ */ e.createElement(Pa, { isMedia: a })
+), Ba = ({
+  activeCanvas: t,
+  isMedia: n,
+  painting: a,
+  resources: r
+}) => {
+  var o, i, s;
+  const [l, c] = e.useState(0), [m, u] = e.useState(!1), { configOptions: g, customDisplays: v, vault: b } = S(), p = b.get(t), h = (o = p == null ? void 0 : p.placeholderCanvas) == null ? void 0 : o.id, f = !!h, y = (a == null ? void 0 : a.length) > 1, w = h && !m && !n, $ = () => u(!m), R = (I) => {
+    const B = a.findIndex((O) => O.id === I);
+    c(B);
+  }, C = v.find((I) => {
+    var B;
+    let O = !1;
+    const { canvasId: N, paintingFormat: G } = I.target;
+    if (Array.isArray(N) && N.length > 0 && (O = N.includes(t)), Array.isArray(G) && G.length > 0) {
+      const te = ((B = a[l]) == null ? void 0 : B.format) || "";
+      O = !!(te && G.includes(te));
+    }
+    return O;
+  }), F = (i = C == null ? void 0 : C.display) == null ? void 0 : i.component;
+  return /* @__PURE__ */ e.createElement(da, { className: "clover-viewer-painting" }, /* @__PURE__ */ e.createElement(
+    ma,
+    {
+      style: {
+        backgroundColor: g.canvasBackgroundColor,
+        maxHeight: g.canvasHeight
+      }
+    },
+    h && !n && /* @__PURE__ */ e.createElement(
+      Va,
+      {
+        handleToggle: $,
+        isInteractive: m,
+        isMedia: n
+      }
+    ),
+    w && !n && /* @__PURE__ */ e.createElement(
+      za,
+      {
+        isMedia: n,
+        label: p == null ? void 0 : p.label,
+        placeholderCanvas: h,
+        setIsInteractive: u
+      }
+    ),
+    !w && !C && (n ? /* @__PURE__ */ e.createElement(
+      Oa,
+      {
+        allSources: a,
+        painting: a[l],
+        resources: r
+      }
+    ) : a && /* @__PURE__ */ e.createElement(
+      Ma,
+      {
+        painting: a[l],
+        hasPlaceholder: f,
+        key: t
+      }
+    )),
+    !w && F && /* @__PURE__ */ e.createElement(
+      F,
+      {
+        id: t,
+        annotationBody: a[l],
+        ...C == null ? void 0 : C.display.componentProps
+      }
+    )
+  ), y && /* @__PURE__ */ e.createElement(
+    We,
+    {
+      value: (s = a[l]) == null ? void 0 : s.id,
+      onValueChange: R,
+      maxHeight: "200px"
+    },
+    a == null ? void 0 : a.map((I) => /* @__PURE__ */ e.createElement(
+      Ne,
+      {
+        value: I == null ? void 0 : I.id,
+        key: I == null ? void 0 : I.id,
+        label: I == null ? void 0 : I.label
+      }
+    ))
+  ));
+}, ja = ({
+  activeCanvas: t,
+  painting: n,
+  resources: a,
+  items: r,
+  isAudioVideo: o
+}) => {
+  const { informationOpen: i, configOptions: s } = S(), { informationPanel: l } = s, c = (l == null ? void 0 : l.renderAbout) || (l == null ? void 0 : l.renderSupplementing) && a.length > 0;
+  return /* @__PURE__ */ e.createElement(
+    Ce,
+    {
+      className: "clover-viewer-content",
+      "data-testid": "clover-viewer-content"
+    },
+    /* @__PURE__ */ e.createElement(ke, null, /* @__PURE__ */ e.createElement(
+      Ba,
+      {
+        activeCanvas: t,
+        isMedia: o,
+        painting: n,
+        resources: a
+      }
+    ), c && /* @__PURE__ */ e.createElement(Se, null, /* @__PURE__ */ e.createElement("span", null, i ? "View Items" : "More Information")), r.length > 1 && /* @__PURE__ */ e.createElement($e, { className: "clover-viewer-media-wrapper" }, /* @__PURE__ */ e.createElement(ca, { items: r, activeItem: 0 }))),
+    i && c && /* @__PURE__ */ e.createElement(Wt, null, /* @__PURE__ */ e.createElement(Ie, null, /* @__PURE__ */ e.createElement(
+      Ln,
+      {
+        activeCanvas: t,
+        resources: a
+      }
+    )))
+  );
+}, Da = d(V.Trigger, {
+  width: "30px",
+  padding: "5px"
+}), Wa = d(V.Content, {
+  display: "flex",
+  flexDirection: "column",
+  fontSize: "0.8333rem",
+  border: "none",
+  boxShadow: "2px 2px 5px #0003",
+  zIndex: "2",
+  button: {
+    display: "flex",
+    textDecoration: "none",
+    marginBottom: "0.5em",
+    color: "$accentAlt",
+    cursor: "pointer",
+    background: "$secondary",
+    border: "none",
+    "&:last-child": {
+      marginBottom: "0"
+    }
+  }
+}), Na = d("span", {
+  fontSize: "1.33rem",
+  alignSelf: "flex-start",
+  flexGrow: "0",
+  flexShrink: "1",
+  padding: "1rem",
+  "@sm": {
+    fontSize: "1rem"
+  },
+  "&.visually-hidden": {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    padding: "0",
+    margin: "-1px",
+    overflow: "hidden",
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap",
+    border: "0"
+  }
+}), Ga = d("header", {
+  display: "flex",
+  backgroundColor: "transparent !important",
+  justifyContent: "space-between",
+  alignItems: "flex-start",
+  width: "100%",
+  [`> ${De}`]: {
+    flexGrow: "1",
+    flexShrink: "0"
+  },
+  form: {
+    flexGrow: "0",
+    flexShrink: "1"
+  }
+}), qa = d("div", {
+  display: "flex",
+  alignItems: "flex-end",
+  justifyContent: "flex-end",
+  padding: "1rem",
+  flexShrink: "0",
+  flexGrow: "1"
+}), _a = () => {
+  var t;
+  const n = H(), a = S(), { activeManifest: r, collection: o, configOptions: i, vault: s } = a, l = i == null ? void 0 : i.canvasHeight, c = (m) => {
+    n({
+      type: "updateActiveManifest",
+      manifestId: m
+    });
+  };
+  return /* @__PURE__ */ e.createElement("div", { style: { margin: "0.75rem" } }, /* @__PURE__ */ e.createElement(
+    We,
+    {
+      label: o.label,
+      maxHeight: l,
+      value: r,
+      onValueChange: c
+    },
+    (t = o == null ? void 0 : o.items) == null ? void 0 : t.map((m) => /* @__PURE__ */ e.createElement(
+      Ne,
+      {
+        value: m.id,
+        key: m.id,
+        thumbnail: m != null && m.thumbnail ? s.get(m == null ? void 0 : m.thumbnail) : void 0,
+        label: m.label
+      }
+    ))
+  ));
+}, Za = (t, n = 2500) => {
+  const [a, r] = E(), o = D(() => {
+    navigator.clipboard.writeText(t).then(
+      () => r("copied"),
+      () => r("failed")
+    );
+  }, [t]);
+  return x(() => {
+    if (!a)
+      return;
+    const i = setTimeout(() => r(void 0), n);
+    return () => clearTimeout(i);
+  }, [a]), [a, o];
+}, Ua = d("span", {
+  display: "flex",
+  alignContent: "center",
+  alignItems: "center",
+  padding: "0.125rem 0.25rem 0",
+  marginTop: "-0.125rem",
+  marginLeft: "0.5rem",
+  backgroundColor: "$accent",
+  color: "$secondary",
+  borderRadius: "3px",
+  fontSize: "0.6111rem",
+  textTransform: "uppercase",
+  lineHeight: "1em"
+}), Xa = ({ status: t }) => t ? /* @__PURE__ */ e.createElement(Ua, { "data-copy-status": t }, t) : null, de = ({
+  textPrompt: t,
+  textToCopy: n
+}) => {
+  const [a, r] = Za(n);
+  return /* @__PURE__ */ e.createElement("button", { onClick: r }, t, " ", /* @__PURE__ */ e.createElement(Xa, { status: a }));
+}, Ya = () => {
+  const t = "#ed1d33", n = "#2873ab";
+  return /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 493.35999 441.33334", id: "iiif-logo", version: "1.1" }, /* @__PURE__ */ e.createElement("title", null, "IIIF Manifest Options"), /* @__PURE__ */ e.createElement("g", { transform: "matrix(1.3333333,0,0,-1.3333333,0,441.33333)" }, /* @__PURE__ */ e.createElement("g", { transform: "scale(0.1)" }, /* @__PURE__ */ e.createElement(
+    "path",
+    {
+      style: { fill: n },
+      d: "M 65.2422,2178.75 775.242,1915 773.992,15 65.2422,276.25 v 1902.5"
+    }
+  ), /* @__PURE__ */ e.createElement(
+    "path",
+    {
+      style: { fill: n },
+      d: "m 804.145,2640.09 c 81.441,-240.91 -26.473,-436.2 -241.04,-436.2 -214.558,0 -454.511,195.29 -535.9527,436.2 -81.4335,240.89 26.4805,436.18 241.0387,436.18 214.567,0 454.512,-195.29 535.954,-436.18"
+    }
+  ), /* @__PURE__ */ e.createElement(
+    "path",
+    {
+      style: { fill: t },
+      d: "M 1678.58,2178.75 968.578,1915 969.828,15 1678.58,276.25 v 1902.5"
+    }
+  ), /* @__PURE__ */ e.createElement(
+    "path",
+    {
+      style: { fill: t },
+      d: "m 935.082,2640.09 c -81.437,-240.91 26.477,-436.2 241.038,-436.2 214.56,0 454.51,195.29 535.96,436.2 81.43,240.89 -26.48,436.18 -241.04,436.18 -214.57,0 -454.52,-195.29 -535.958,-436.18"
+    }
+  ), /* @__PURE__ */ e.createElement(
+    "path",
+    {
+      style: { fill: n },
+      d: "m 1860.24,2178.75 710,-263.75 -1.25,-1900 -708.75,261.25 v 1902.5"
+    }
+  ), /* @__PURE__ */ e.createElement(
+    "path",
+    {
+      style: { fill: n },
+      d: "m 2603.74,2640.09 c 81.45,-240.91 -26.47,-436.2 -241.03,-436.2 -214.58,0 -454.52,195.29 -535.96,436.2 -81.44,240.89 26.48,436.18 241.03,436.18 214.57,0 454.51,-195.29 535.96,-436.18"
+    }
+  ), /* @__PURE__ */ e.createElement(
+    "path",
+    {
+      style: { fill: t },
+      d: "m 3700.24,3310 v -652.5 c 0,0 -230,90 -257.5,-142.5 -2.5,-247.5 0,-336.25 0,-336.25 l 257.5,83.75 V 1690 l -258.61,-92.5 V 262.5 L 2735.24,0 v 2360 c 0,0 -15,850 965,950"
+    }
+  ))));
+}, Ja = d(Mt, {
+  all: "unset",
+  height: "2rem",
+  width: "3.236rem",
+  backgroundColor: "#6663",
+  borderRadius: "9999px",
+  position: "relative",
+  WebkitTapHighlightColor: "transparent",
+  cursor: "pointer",
+  "&:focus": {
+    boxShadow: "0 0 0 2px $secondaryAlt"
+  },
+  '&[data-state="checked"]': {
+    backgroundColor: "$accent",
+    boxShadow: "inset 2px 2px 5px #0003"
+  }
+}), Ka = d(zt, {
+  display: "block",
+  height: "calc(2rem - 12px)",
+  width: "calc(2rem - 12px)",
+  backgroundColor: "$secondary",
+  borderRadius: "100%",
+  boxShadow: "2px 2px 5px #0001",
+  transition: "$all",
+  transform: "translateX(6px)",
+  willChange: "transform",
+  '&[data-state="checked"]': {
+    transform: "translateX(calc(1.236rem + 6px))"
+  }
+}), Qa = d("label", {
+  fontSize: "0.8333rem",
+  fontWeight: "400",
+  lineHeight: "1em",
+  userSelect: "none",
+  cursor: "pointer",
+  paddingRight: "0.618rem"
+}), er = d("form", {
+  display: "flex",
+  flexShrink: "0",
+  flexGrow: "1",
+  alignItems: "center",
+  marginLeft: "1.618rem"
+}), tr = () => {
+  var t;
+  const { configOptions: n } = S(), a = H(), [r, o] = E((t = n == null ? void 0 : n.informationPanel) == null ? void 0 : t.open);
+  return x(() => {
+    a({
+      type: "updateInformationOpen",
+      informationOpen: r
+    });
+  }, [r]), /* @__PURE__ */ e.createElement(er, null, /* @__PURE__ */ e.createElement(Qa, { htmlFor: "information-toggle", css: r ? { opacity: "1" } : {} }, "More Information"), /* @__PURE__ */ e.createElement(
+    Ja,
+    {
+      checked: r,
+      onCheckedChange: () => o(!r),
+      id: "information-toggle",
+      "aria-label": "information panel toggle",
+      name: "toggled?"
+    },
+    /* @__PURE__ */ e.createElement(Ka, null)
+  ));
+}, Ge = (t) => {
+  const n = () => window.matchMedia ? window.matchMedia(t).matches : !1, [a, r] = E(n);
+  return x(() => {
+    const o = () => r(n);
+    return window.addEventListener("resize", o), () => window.removeEventListener("resize", o);
+  }), a;
+}, nr = ({ manifestId: t, manifestLabel: n }) => {
+  const a = S(), { collection: r, configOptions: o } = a, { showTitle: i, showIIIFBadge: s, informationPanel: l } = o, c = s || (l == null ? void 0 : l.renderToggle), m = Ge(J.sm);
+  return /* @__PURE__ */ e.createElement(Ga, { className: "clover-viewer-header" }, r != null && r.items ? /* @__PURE__ */ e.createElement(_a, null) : /* @__PURE__ */ e.createElement(Na, { className: i ? "" : "visually-hidden" }, i && /* @__PURE__ */ e.createElement(L, { label: n, className: "label" })), c && /* @__PURE__ */ e.createElement(qa, null, s && /* @__PURE__ */ e.createElement(V, null, /* @__PURE__ */ e.createElement(Da, null, /* @__PURE__ */ e.createElement(Ya, null)), /* @__PURE__ */ e.createElement(Wa, null, (r == null ? void 0 : r.items) && /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      onClick: (u) => {
+        u.preventDefault(), window.open(r.id, "_blank");
+      }
+    },
+    "View Collection"
+  ), /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      onClick: (u) => {
+        u.preventDefault(), window.open(t, "_blank");
+      }
+    },
+    "View Manifest"
+  ), " ", (r == null ? void 0 : r.items) && /* @__PURE__ */ e.createElement(
+    de,
+    {
+      textPrompt: "Copy Collection URL",
+      textToCopy: r.id
+    }
+  ), /* @__PURE__ */ e.createElement(
+    de,
+    {
+      textPrompt: "Copy Manifest URL",
+      textToCopy: t
+    }
+  ))), (l == null ? void 0 : l.renderToggle) && !m && /* @__PURE__ */ e.createElement(tr, null)));
+}, ar = (t = !1) => {
+  const [n, a] = E(t);
+  return Ze(() => {
+    if (!n)
+      return;
+    const r = document.documentElement.style.overflow;
+    return document.documentElement.style.overflow = "hidden", () => {
+      document.documentElement.style.overflow = r;
+    };
+  }, [n]), x(() => {
+    n !== t && a(t);
+  }, [t]), [n, a];
+}, rr = ({ manifest: t, theme: n }) => {
+  var a;
+  const r = S(), o = H(), { activeCanvas: i, informationOpen: s, vault: l, configOptions: c } = r, [m, u] = E(!1), [g, v] = E(!1), [b, p] = E([]), [h, f] = E([]), [y, w] = ar(!1), $ = Ge(J.sm), R = D(
+    (C) => {
+      o({
+        type: "updateInformationOpen",
+        informationOpen: C
+      });
+    },
+    [o]
+  );
+  return x(() => {
+    var C;
+    (C = c == null ? void 0 : c.informationPanel) != null && C.open && R(!$);
+  }, [
+    $,
+    (a = c == null ? void 0 : c.informationPanel) == null ? void 0 : a.open,
+    R
+  ]), x(() => {
+    if (!$) {
+      w(!1);
+      return;
+    }
+    w(s);
+  }, [s, $, w]), x(() => {
+    const C = j(l, i), F = Ot(
+      l,
+      i,
+      "text/vtt"
+    );
+    C && (v(
+      ["Sound", "Video"].indexOf(C[0].type) > -1
+    ), p(C)), f(F), u(F.length !== 0);
+  }, [i, l]), /* @__PURE__ */ e.createElement(tt, { FallbackComponent: Dt }, /* @__PURE__ */ e.createElement(
+    Nt,
+    {
+      className: `${n} clover-viewer`,
+      css: { background: c == null ? void 0 : c.background },
+      "data-body-locked": y,
+      "data-information-panel": m,
+      "data-information-panel-open": s
+    },
+    /* @__PURE__ */ e.createElement(
+      et,
+      {
+        open: s,
+        onOpenChange: R
+      },
+      /* @__PURE__ */ e.createElement(
+        nr,
+        {
+          manifestLabel: t.label,
+          manifestId: t.id
+        }
+      ),
+      /* @__PURE__ */ e.createElement(
+        ja,
+        {
+          activeCanvas: i,
+          painting: b,
+          resources: h,
+          items: t.items,
+          isAudioVideo: g
+        }
+      )
+    )
+  ));
+}, me = {
+  ignoreCache: !1,
+  headers: {
+    Accept: "application/json, text/javascript, text/plain"
+  },
+  timeout: 5e3,
+  withCredentials: !1
+};
+function or(t) {
+  return {
+    ok: t.status >= 200 && t.status < 300,
+    status: t.status,
+    statusText: t.statusText,
+    headers: t.getAllResponseHeaders(),
+    data: t.responseText,
+    json: () => JSON.parse(t.responseText)
+  };
+}
+function ue(t, n = null) {
+  return {
+    ok: !1,
+    status: t.status,
+    statusText: t.statusText,
+    headers: t.getAllResponseHeaders(),
+    data: n || t.statusText,
+    json: () => JSON.parse(n || t.statusText)
+  };
+}
+function ir(t, n = me) {
+  const a = n.headers || me.headers;
+  return new Promise((r, o) => {
+    const i = new XMLHttpRequest();
+    i.open("get", t), i.withCredentials = n.withCredentials, a && Object.keys(a).forEach(
+      (s) => i.setRequestHeader(s, a[s])
+    ), i.onload = () => {
+      r(or(i));
+    }, i.onerror = () => {
+      o(ue(i, "Failed to make request."));
+    }, i.ontimeout = () => {
+      o(ue(i, "Request took longer than expected."));
+    }, i.send();
+  });
+}
+const kr = ({
+  canvasIdCallback: t = () => {
+  },
+  customDisplays: n = [],
+  customTheme: a,
+  iiifContent: r,
+  id: o,
+  manifestId: i,
+  options: s
+}) => {
+  var l;
+  let c = r;
+  return o && (c = o), i && (c = i), /* @__PURE__ */ e.createElement(
+    Ft,
+    {
+      initialState: {
+        ...W,
+        customDisplays: n,
+        informationOpen: !!((l = s == null ? void 0 : s.informationPanel) != null && l.open),
+        vault: new pe({
+          customFetcher: (m) => ir(m, {
+            withCredentials: s == null ? void 0 : s.withCredentials,
+            headers: s == null ? void 0 : s.requestHeaders
+          }).then((u) => JSON.parse(u.data))
+        })
+      }
+    },
+    /* @__PURE__ */ e.createElement(
+      lr,
+      {
+        iiifContent: c,
+        canvasIdCallback: t,
+        customTheme: a,
+        options: s
+      }
+    )
+  );
+}, lr = ({
+  canvasIdCallback: t,
+  customTheme: n,
+  iiifContent: a,
+  options: r
+}) => {
+  const o = H(), i = S(), { activeCanvas: s, activeManifest: l, isLoaded: c, vault: m } = i, [u, g] = E(), [v, b] = E();
+  let p = {};
+  return n && (p = at("custom", n)), x(() => {
+    t && t(s);
+  }, [s, t]), x(() => {
+    l && m.loadManifest(l).then((h) => {
+      b(h), o({
+        type: "updateActiveCanvas",
+        canvasId: h.items[0] && h.items[0].id
+      });
+    }).catch((h) => {
+      console.error(`Manifest failed to load: ${h}`);
+    }).finally(() => {
+      o({
+        type: "updateIsLoaded",
+        isLoaded: !0
+      });
+    });
+  }, [l, o, m]), x(() => {
+    o({
+      type: "updateConfigOptions",
+      configOptions: r
+    }), m.load(a).then((h) => {
+      g(h);
+    }).catch((h) => {
+      console.error(
+        `The IIIF resource ${a} failed to load: ${h}`
+      );
+    });
+  }, [o, a, r, m]), x(() => {
+    let h = [];
+    (u == null ? void 0 : u.type) === "Collection" ? (o({
+      type: "updateCollection",
+      collection: u
+    }), h = u.items.filter((f) => f.type === "Manifest").map((f) => f.id), h.length > 0 && o({
+      type: "updateActiveManifest",
+      manifestId: h[0]
+    })) : (u == null ? void 0 : u.type) === "Manifest" && o({
+      type: "updateActiveManifest",
+      manifestId: u.id
+    });
+  }, [o, u]), c ? !v || !v.items ? (console.log(`The IIIF manifest ${a} failed to load.`), /* @__PURE__ */ e.createElement(e.Fragment, null)) : v.items.length === 0 ? (console.log(`The IIIF manifest ${a} does not contain canvases.`), /* @__PURE__ */ e.createElement(e.Fragment, null)) : /* @__PURE__ */ e.createElement(rr, { manifest: v, theme: p, key: v.id }) : /* @__PURE__ */ e.createElement(e.Fragment, null, "Loading");
+};
 export {
-  c as default
+  kr as default
 };
 //# sourceMappingURL=index.es24.js.map