@manifest-editor/components 1.4.0 → 1.4.2

package/dist/index.js

@@ -33,6 +33,13 @@ function ActionButton({
   );
 }
 
+// src/AccessibilityButton.tsx
+import { Button as Button2 } from "react-aria-components";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function AccessibilityButton({ className: className2, children, ...props }) {
+  return /* @__PURE__ */ jsx2(Button2, { className: ["sr-only focus:not-sr-only p-2 bg-white text-black", className2].join(" "), ...props, children });
+}
+
 // src/utils.ts
 import { clsx } from "clsx";
 import { twMerge as twMerge2 } from "tailwind-merge";
@@ -56,9 +63,9 @@ import {
   useRole
 } from "@floating-ui/react";
 import * as React from "react";
-import { Button as Button2 } from "react-aria-components";
+import { Button as Button3 } from "react-aria-components";
 import { twMerge as twMerge3 } from "tailwind-merge";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function useTooltip({
   initialOpen = false,
   placement = "top",
@@ -114,7 +121,7 @@ var useTooltipContext = () => {
 };
 function Tooltip({ children, ...options }) {
   const tooltip = useTooltip(options);
-  return /* @__PURE__ */ jsx2(TooltipContext.Provider, { value: tooltip, children });
+  return /* @__PURE__ */ jsx3(TooltipContext.Provider, { value: tooltip, children });
 }
 var TooltipTrigger = React.forwardRef(function TooltipTrigger2({ children, asChild = false, ...props }, propRef) {
   const context = useTooltipContext();
@@ -131,8 +138,8 @@ var TooltipTrigger = React.forwardRef(function TooltipTrigger2({ children, asChi
       })
     );
   }
-  return /* @__PURE__ */ jsx2(
-    Button2,
+  return /* @__PURE__ */ jsx3(
+    Button3,
     {
       ref,
       "data-state": context.open ? "open" : "closed",
@@ -146,7 +153,7 @@ var TooltipContent = React.forwardRef(function TooltipContent2({ style, root, ..
   const ref = useMergeRefs([context.refs.setFloating, propRef]);
   if (!context.open)
     return null;
-  return /* @__PURE__ */ jsx2(FloatingPortal, { root, children: /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(FloatingPortal, { root, children: /* @__PURE__ */ jsx3(
     "div",
     {
       ref,
@@ -159,7 +166,7 @@ var TooltipContent = React.forwardRef(function TooltipContent2({ style, root, ..
   ) });
 });
 function DefaultTooltipContent(props) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     TooltipContent,
     {
       root: props.root,
@@ -170,23 +177,23 @@ function DefaultTooltipContent(props) {
 }
 
 // src/Sidebar.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 function Sidebar({ children }) {
-  return /* @__PURE__ */ jsx3("div", { className: "w-full h-full flex flex-col overflow-hidden", children });
+  return /* @__PURE__ */ jsx4("div", { className: "w-full h-full flex flex-col overflow-hidden", children });
 }
 function SidebarContent({
   children,
   className: className2,
   padding
 }) {
-  return /* @__PURE__ */ jsx3("div", { className: cn("flex-1 min-h-0 overflow-y-auto pb-64", className2, padding && "px-3 pt-3"), children });
+  return /* @__PURE__ */ jsx4("div", { className: cn("flex-1 min-h-0 overflow-y-auto pb-64", className2, padding && "px-3 pt-3"), children });
 }
 function SidebarHeader(props) {
   const { actions, title } = props;
   return /* @__PURE__ */ jsxs("div", { className: "bg-me-gray-100 h-12 flex items-center px-3 z-10 text-black border-b-me-gray-300 border-b flex-shrink-0", children: [
-    /* @__PURE__ */ jsx3("div", { className: "flex-1", children: title }),
-    /* @__PURE__ */ jsx3("div", { className: "ml-auto flex gap-2 items-center", children: actions?.map((action, index) => /* @__PURE__ */ jsxs(Tooltip, { placement: "bottom", children: [
-      /* @__PURE__ */ jsx3(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4("div", { className: "flex-1", children: title }),
+    /* @__PURE__ */ jsx4("div", { className: "ml-auto flex gap-2 items-center", children: actions?.map((action, index) => /* @__PURE__ */ jsxs(Tooltip, { placement: "bottom", children: [
+      /* @__PURE__ */ jsx4(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx4(
         "button",
         {
           className: cn(
@@ -202,7 +209,7 @@ function SidebarHeader(props) {
         },
         index
       ) }),
-      !action.disabled ? /* @__PURE__ */ jsx3(DefaultTooltipContent, { children: action.title }) : null
+      !action.disabled ? /* @__PURE__ */ jsx4(DefaultTooltipContent, { children: action.title }) : null
     ] }, index)) })
   ] });
 }
@@ -211,9 +218,9 @@ function SidebarHeader(props) {
 import { Fragment } from "react/jsx-runtime";
 
 // src/PanelSideMenuItem.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function PanelSideMenuItem(props) {
-  return /* @__PURE__ */ jsx4(Tooltip, { placement: "right", children: /* @__PURE__ */ jsx4(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx5(Tooltip, { placement: "right", children: /* @__PURE__ */ jsx5(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs2(
     "button",
     {
       className: cn(
@@ -224,18 +231,18 @@ function PanelSideMenuItem(props) {
       onMouseDown: props.onClick,
       children: [
         props.icon,
-        /* @__PURE__ */ jsx4(TooltipContent, { className: "bg-me-gray-900 text-white text-sm px-3 py-2 rounded opacity-90 z-50", children: props.label })
+        /* @__PURE__ */ jsx5(TooltipContent, { className: "bg-me-gray-900 text-white text-sm px-3 py-2 rounded opacity-90 z-50", children: props.label })
       ]
     }
   ) }) });
 }
 
 // src/PanelSideMenu.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function PanelSideMenu(props) {
-  return /* @__PURE__ */ jsx5("div", { className: "bg-white border-me-gray-300 border-t border-r flex flex-col w-12 pb-2", "data-open": props.open, children: props.items.map((panel) => /* @__PURE__ */ jsxs3(Fragment, { children: [
-    panel.divide ? /* @__PURE__ */ jsx5("div", { className: "flex-1 block w-2 min-h-1" }) : null,
-    /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6("div", { className: "bg-white border-me-gray-300 border-t border-r flex flex-col w-12 pb-2", "data-open": props.open, children: props.items.map((panel) => /* @__PURE__ */ jsxs3(Fragment, { children: [
+    panel.divide ? /* @__PURE__ */ jsx6("div", { className: "flex-1 block w-2 min-h-1" }) : null,
+    /* @__PURE__ */ jsx6(
       PanelSideMenuItem,
       {
         label: panel.label,
@@ -249,12 +256,12 @@ function PanelSideMenu(props) {
 }
 
 // src/ThumbnailGridContainer.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function ThumbnailGridContainer(props) {
   if (props.wide) {
-    return /* @__PURE__ */ jsx6("div", { className: "grid grid-md gap-4 p-4 overflow-y-auto", children: props.children });
+    return /* @__PURE__ */ jsx7("div", { className: "grid grid-md gap-4 p-4 overflow-y-auto", children: props.children });
   }
-  return /* @__PURE__ */ jsx6("div", { className: "grid grid-cols-2 gap-4 p-4", children: props.children });
+  return /* @__PURE__ */ jsx7("div", { className: "grid grid-cols-2 gap-4 p-4", children: props.children });
 }
 
 // src/LazyThumbnail.tsx
@@ -273,9 +280,9 @@ import { LazyLoadComponent } from "react-lazy-load-image-component";
 import { twMerge as twMerge4 } from "tailwind-merge";
 
 // src/Spinner.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 function Spinner(props) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "svg",
     {
       width: "1em",
@@ -285,8 +292,8 @@ function Spinner(props) {
       stroke: "currentColor",
       ...props,
       children: /* @__PURE__ */ jsxs4("g", { transform: "translate(2 2)", strokeWidth: 5, fill: "none", fillRule: "evenodd", children: [
-        /* @__PURE__ */ jsx7("circle", { strokeOpacity: 0.5, cx: 18, cy: 18, r: 18 }),
-        /* @__PURE__ */ jsx7("path", { d: "M36 18c0-9.94-8.06-18-18-18", children: /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8("circle", { strokeOpacity: 0.5, cx: 18, cy: 18, r: 18 }),
+        /* @__PURE__ */ jsx8("path", { d: "M36 18c0-9.94-8.06-18-18-18", children: /* @__PURE__ */ jsx8(
           "animateTransform",
           {
             attributeName: "transform",
@@ -303,7 +310,7 @@ function Spinner(props) {
 }
 
 // src/icons/TextIcon.tsx
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function TextIcon(props) {
   return /* @__PURE__ */ jsxs5(
     "svg",
@@ -314,8 +321,8 @@ function TextIcon(props) {
       viewBox: "0 0 24 24",
       ...props,
       children: [
-        /* @__PURE__ */ jsx8("title", { children: "Text" }),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9("title", { children: "Text" }),
+        /* @__PURE__ */ jsx9(
           "path",
           {
             fill: "currentColor",
@@ -328,12 +335,12 @@ function TextIcon(props) {
 }
 
 // src/LazyThumbnail.tsx
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 function LazyThumbnail({
   cover,
   fade = true
 }) {
-  return /* @__PURE__ */ jsx9(LazyLoadComponent, { children: /* @__PURE__ */ jsx9(LazyThumbnailInner, { cover, fade }) });
+  return /* @__PURE__ */ jsx10(LazyLoadComponent, { children: /* @__PURE__ */ jsx10(LazyThumbnailInner, { cover, fade }) });
 }
 var renderCache = /* @__PURE__ */ new Map();
 function LazyThumbnailInner({
@@ -367,7 +374,7 @@ function LazyThumbnailInner({
     [isCached]
   );
   return /* @__PURE__ */ jsxs6("div", { className: `w-full h-full relative`, children: [
-    thumbnail?.id ? /* @__PURE__ */ jsx9(
+    thumbnail?.id ? /* @__PURE__ */ jsx10(
       "img",
       {
         onLoad: () => setIsLoading(false),
@@ -376,15 +383,15 @@ function LazyThumbnailInner({
         alt: "",
         className: `w-full h-full ${cover ? "object-cover" : "object-contain"} ${!isLoading ? isCached ? "" : "animate-fadeIn" : "opacity-0"}`
       }
-    ) : /* @__PURE__ */ jsx9(ThumbnailFallback, {}),
-    !thumbnail?.id || isLoading ? /* @__PURE__ */ jsx9(
+    ) : /* @__PURE__ */ jsx10(ThumbnailFallback, {}),
+    !thumbnail?.id || isLoading ? /* @__PURE__ */ jsx10(
       "div",
       {
         className: twMerge4(
           "absolute inset-0 flex items-center justify-center bg-me-gray-100 text-2xl z-10",
           fade && "animate-fadeIn"
         ),
-        children: /* @__PURE__ */ jsx9(Spinner, {})
+        children: /* @__PURE__ */ jsx10(Spinner, {})
       }
     ) : null
   ] });
@@ -392,9 +399,9 @@ function LazyThumbnailInner({
 function ThumbnailFallback() {
   const [strategy] = useRenderingStrategy();
   if (strategy.type === "textual-content") {
-    return /* @__PURE__ */ jsx9("div", { className: "text-black/30 flex items-center justify-center h-full bg-me-gray-100 animate-fadeInDelayed absolute inset-0 z-20", children: /* @__PURE__ */ jsx9(TextIcon, { className: "w-16 h-16" }) });
+    return /* @__PURE__ */ jsx10("div", { className: "text-black/30 flex items-center justify-center h-full bg-me-gray-100 animate-fadeInDelayed absolute inset-0 z-20", children: /* @__PURE__ */ jsx10(TextIcon, { className: "w-16 h-16" }) });
   }
-  return /* @__PURE__ */ jsx9("div", { className: "text-black/30 flex items-center justify-center h-full bg-me-gray-100 animate-fadeInDelayed absolute inset-0 z-20", children: "No thumbnail" });
+  return /* @__PURE__ */ jsx10("div", { className: "text-black/30 flex items-center justify-center h-full bg-me-gray-100 animate-fadeInDelayed absolute inset-0 z-20", children: "No thumbnail" });
 }
 
 // src/CanvasThumbnailGridItem.tsx
@@ -402,18 +409,18 @@ import { CanvasContext } from "react-iiif-vault";
 
 // src/CanvasLabel.tsx
 import { LocaleString, useCanvas as useCanvas2 } from "react-iiif-vault";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function CanvasLabel(props) {
   const canvas = useCanvas2();
   if (!canvas)
     return null;
-  return /* @__PURE__ */ jsx10(LocaleString, { className: props.className, as: props.as, children: canvas.label });
+  return /* @__PURE__ */ jsx11(LocaleString, { className: props.className, as: props.as, children: canvas.label });
 }
 
 // src/Card3D.tsx
 import { useLayoutEffect as useLayoutEffect2, useRef as useRef2 } from "react";
 import { twMerge as twMerge5 } from "tailwind-merge";
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 function Card3D({
   className: className2,
   shouldTranslate,
@@ -497,7 +504,7 @@ function Card3D({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           "div",
           {
             className: "pointer-events-none absolute inset-0 transition-all",
@@ -513,10 +520,10 @@ function Card3D({
 }
 
 // src/CanvasThumbnailGridItem.tsx
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function CanvasThumbnailGridItem(props) {
-  return /* @__PURE__ */ jsx12(CanvasContext, { canvas: props.id, children: /* @__PURE__ */ jsxs8("div", { onMouseDown: props.onClick, className: "flex flex-col", "data-canvas-selected": props.selected, children: [
-    /* @__PURE__ */ jsx12("div", { className: "bg-me-gray-100 w-full aspect-square flex-1 overflow-hidden rounded", children: /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(CanvasContext, { canvas: props.id, children: /* @__PURE__ */ jsxs8("div", { onMouseDown: props.onClick, className: "flex flex-col", "data-canvas-selected": props.selected, children: [
+    /* @__PURE__ */ jsx13("div", { className: "bg-me-gray-100 w-full aspect-square flex-1 overflow-hidden rounded", children: /* @__PURE__ */ jsx13(
       Card3D,
       {
         "data-canvas-selected": props.active,
@@ -525,17 +532,17 @@ function CanvasThumbnailGridItem(props) {
           "border-2 border-transparent  p-1 w-full h-full rounded",
           props.selected && "border-me-primary-500"
         ),
-        children: /* @__PURE__ */ jsx12(LazyThumbnail, {})
+        children: /* @__PURE__ */ jsx13(LazyThumbnail, {})
       }
     ) }),
-    /* @__PURE__ */ jsx12(CanvasLabel, { className: "text-sm text-center truncate mt-1", as: "div" })
+    /* @__PURE__ */ jsx13(CanvasLabel, { className: "text-sm text-center truncate mt-1", as: "div" })
   ] }) });
 }
 
 // src/Modal.tsx
 import { CloseButton, Dialog, DialogPanel, DialogTitle } from "@headlessui/react";
 import { createPortal } from "react-dom";
-import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 function ModalBackSlot({ children }) {
   const element = document.getElementById("modal-back-slot");
   if (!element)
@@ -543,14 +550,14 @@ function ModalBackSlot({ children }) {
   return createPortal(children, element);
 }
 function Modal({ id, title, open = true, onClose, actions, children }) {
-  return /* @__PURE__ */ jsx13(Fragment2, { children: /* @__PURE__ */ jsxs9(Dialog, { open, onClose, id, className: "relative z-[500]", children: [
-    /* @__PURE__ */ jsx13("div", { className: `fixed inset-0 bg-black/30 animate-fadeIn z-[501]`, "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx13("div", { className: "fixed inset-0 flex w-screen items-center justify-center p-4 z-[502]", children: /* @__PURE__ */ jsx13("div", { className: "relative p-4 w-full max-w-4xl max-h-full", children: /* @__PURE__ */ jsxs9(DialogPanel, { className: "relative bg-white rounded-lg overflow-hidden shadow-2xl max-h-[80vh] flex flex-col", children: [
+  return /* @__PURE__ */ jsx14(Fragment2, { children: /* @__PURE__ */ jsxs9(Dialog, { open, onClose, id, className: "relative z-[500]", children: [
+    /* @__PURE__ */ jsx14("div", { className: `fixed inset-0 bg-black/30 animate-fadeIn z-[501]`, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx14("div", { className: "fixed inset-0 flex w-screen items-center justify-center p-4 z-[502]", children: /* @__PURE__ */ jsx14("div", { className: "relative p-4 w-full max-w-4xl max-h-full", children: /* @__PURE__ */ jsxs9(DialogPanel, { className: "relative bg-white rounded-lg overflow-hidden shadow-2xl max-h-[80vh] flex flex-col", children: [
       /* @__PURE__ */ jsxs9("div", { className: "flex  items-center justify-between gap-3 p-4 rounded-t-lg sticky top-0 bg-white", children: [
-        /* @__PURE__ */ jsx13("div", { id: "modal-back-slot" }),
-        /* @__PURE__ */ jsx13(DialogTitle, { className: "text-xl font-semibold text-gray-900 ", children: title }),
+        /* @__PURE__ */ jsx14("div", { id: "modal-back-slot" }),
+        /* @__PURE__ */ jsx14(DialogTitle, { className: "text-xl font-semibold text-gray-900 ", children: title }),
         /* @__PURE__ */ jsxs9(CloseButton, { className: "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center", children: [
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14(
             "svg",
             {
               className: "w-3 h-3",
@@ -558,7 +565,7 @@ function Modal({ id, title, open = true, onClose, actions, children }) {
               xmlns: "http://www.w3.org/2000/svg",
               fill: "none",
               viewBox: "0 0 14 14",
-              children: /* @__PURE__ */ jsx13(
+              children: /* @__PURE__ */ jsx14(
                 "path",
                 {
                   stroke: "currentColor",
@@ -570,23 +577,23 @@ function Modal({ id, title, open = true, onClose, actions, children }) {
               )
             }
           ),
-          /* @__PURE__ */ jsx13("span", { className: "sr-only", children: "Close" })
+          /* @__PURE__ */ jsx14("span", { className: "sr-only", children: "Close" })
         ] })
       ] }),
-      /* @__PURE__ */ jsx13("div", { className: "flex-1 min-h-0 overflow-y-auto flex flex-col", children }),
-      actions ? /* @__PURE__ */ jsx13("div", { className: "flex items-center p-4 border-t border-gray-200 rounded-b justify-end", children: actions }) : null
+      /* @__PURE__ */ jsx14("div", { className: "flex-1 min-h-0 overflow-y-auto flex flex-col", children }),
+      actions ? /* @__PURE__ */ jsx14("div", { className: "flex items-center p-4 border-t border-gray-200 rounded-b justify-end", children: actions }) : null
     ] }) }) })
   ] }) });
 }
 
 // src/ControlButton.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function ControlButton({
   children,
   className: className2,
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "button",
     {
       className: cn(
@@ -600,9 +607,9 @@ function ControlButton({
 }
 
 // src/OpaqueControls.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function OpaqueControls(props) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     "div",
     {
       className: cn("flex w-full p-0.5 opacity-0 transition-opacity duration-300 gap-2", props.active && "opacity-1"),
@@ -618,9 +625,9 @@ import {
   Tab as BaseTab,
   TabPanel as BaseTabPanel
 } from "react-aria-components";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function Tabs({ className: className2, children, ...props }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     BaseTabs,
     {
       className: (state) => {
@@ -637,7 +644,7 @@ function TabList({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     BaseTabList,
     {
       className: (state) => {
@@ -650,7 +657,7 @@ function TabList({
   );
 }
 function Tab({ className: className2, children, ...props }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     BaseTab,
     {
       className: (state) => {
@@ -668,7 +675,7 @@ function Tab({ className: className2, children, ...props }) {
   );
 }
 function TabPanel({ className: className2, children, ...props }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     BaseTabPanel,
     {
       className: (state) => {
@@ -684,9 +691,9 @@ function TabPanel({ className: className2, children, ...props }) {
 // src/CreatorGrid.tsx
 import { ListBox, ListBoxItem } from "react-aria-components";
 import { twMerge as twMerge6 } from "tailwind-merge";
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 function CreatorGrid(props) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     ListBox,
     {
       orientation: "horizontal",
@@ -694,7 +701,7 @@ function CreatorGrid(props) {
       selectionMode: "single",
       items: props.items,
       className: "grid grid-sm gap-4 p-4 mb-8",
-      children: (item) => /* @__PURE__ */ jsx17(CreatorGridItem, { ...item })
+      children: (item) => /* @__PURE__ */ jsx18(CreatorGridItem, { ...item })
     }
   );
 }
@@ -709,17 +716,17 @@ function CreatorGridItem(props) {
         $s.isFocused && "border-me-primary-500 outline-me-primary-500 outline-2"
       ),
       children: [
-        /* @__PURE__ */ jsx17("div", { className: "rounded bg-me-gray-300 mb-2 flex items-center justify-center py-1 aspect-square", children: /* @__PURE__ */ jsx17("div", { className: "text-center [&>svg]:w-16 [&>svg]:h-16", children: props.icon }) }),
-        /* @__PURE__ */ jsx17("div", { className: "text-center font-semibold text-sm", children: props.title }),
-        /* @__PURE__ */ jsx17("div", { className: "text-sm text-center text-black/50", children: props.description })
+        /* @__PURE__ */ jsx18("div", { className: "rounded bg-me-gray-300 mb-2 flex items-center justify-center py-1 aspect-square", children: /* @__PURE__ */ jsx18("div", { className: "text-center [&>svg]:w-16 [&>svg]:h-16", children: props.icon }) }),
+        /* @__PURE__ */ jsx18("div", { className: "text-center font-semibold text-sm", children: props.title }),
+        /* @__PURE__ */ jsx18("div", { className: "text-sm text-center text-black/50", children: props.description })
       ]
     }
   );
 }
 
 // src/icons/DownloadIcon.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
-var DownloadIcon = (props) => /* @__PURE__ */ jsx18("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx18(
+import { jsx as jsx19 } from "react/jsx-runtime";
+var DownloadIcon = (props) => /* @__PURE__ */ jsx19("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx19(
   "path",
   {
     d: "M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z",
@@ -729,10 +736,10 @@ var DownloadIcon = (props) => /* @__PURE__ */ jsx18("svg", { xmlns: "http://www.
 
 // src/DownloadButton.tsx
 import { useId } from "react-aria";
-import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
 function DownloadButton({ label, id: _id, getData, fileName, fileType }) {
   const id = useId(_id);
-  return /* @__PURE__ */ jsx19(Tooltip, { placement: "bottom", children: /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsx20(Tooltip, { placement: "bottom", children: /* @__PURE__ */ jsxs11(
     TooltipTrigger,
     {
       className: "bg-me-gray-100 hover:bg-me-primary-500 hover:text-white p-1 rounded-md text-me-primary-500 text-2xl",
@@ -740,8 +747,8 @@ function DownloadButton({ label, id: _id, getData, fileName, fileType }) {
       id,
       onPress: () => createDownload(getData(), fileName, fileType),
       children: [
-        /* @__PURE__ */ jsx19(DownloadIcon, { "aria-labelledby": _id }),
-        /* @__PURE__ */ jsx19(DefaultTooltipContent, { children: label })
+        /* @__PURE__ */ jsx20(DownloadIcon, { "aria-labelledby": _id }),
+        /* @__PURE__ */ jsx20(DefaultTooltipContent, { children: label })
       ]
     }
   ) });
@@ -761,11 +768,11 @@ function createDownload(data, fileName, fileType = "text/json") {
 }
 
 // src/AtlasBanner.tsx
-import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
 function AtlasBanner({ children, controlsId }) {
   return /* @__PURE__ */ jsxs12("div", { className: "bg-me-gray-100 border-b text-black p-1 flex gap-4 items-center h-12", children: [
-    /* @__PURE__ */ jsx20("div", { className: "px-4", children }),
-    /* @__PURE__ */ jsx20("div", { id: controlsId || "atlas-controls", className: "flex gap-2" })
+    /* @__PURE__ */ jsx21("div", { className: "px-4", children }),
+    /* @__PURE__ */ jsx21("div", { id: controlsId || "atlas-controls", className: "flex gap-2" })
   ] });
 }
 
@@ -773,7 +780,7 @@ function AtlasBanner({ children, controlsId }) {
 import { RenderSvgEditorControls } from "react-iiif-vault";
 
 // src/icons/DrawIcon.tsx
-import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
 var DrawIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs13(
   "svg",
   {
@@ -784,8 +791,8 @@ var DrawIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs13(
     "aria-labelledby": titleId,
     ...props,
     children: [
-      title ? /* @__PURE__ */ jsx21("title", { id: titleId, children: title }) : null,
-      /* @__PURE__ */ jsx21(
+      title ? /* @__PURE__ */ jsx22("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ jsx22(
         "path",
         {
           fill: "currentColor",
@@ -797,7 +804,7 @@ var DrawIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs13(
 );
 
 // src/icons/PolygonIcon.tsx
-import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
 var PolygonIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs14(
   "svg",
   {
@@ -808,8 +815,8 @@ var PolygonIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs14(
     "aria-labelledby": titleId,
     ...props,
     children: [
-      title ? /* @__PURE__ */ jsx22("title", { id: titleId, children: title }) : null,
-      /* @__PURE__ */ jsx22(
+      title ? /* @__PURE__ */ jsx23("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ jsx23(
         "path",
         {
           fill: "currentColor",
@@ -821,33 +828,33 @@ var PolygonIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs14(
 );
 
 // src/icons/LineIcon.tsx
-import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
 function LineIcon({ title, titleId, ...props }) {
   return /* @__PURE__ */ jsxs15("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", "aria-labelledby": titleId, ...props, children: [
-    title ? /* @__PURE__ */ jsx23("title", { id: titleId, children: title }) : null,
+    title ? /* @__PURE__ */ jsx24("title", { id: titleId, children: title }) : null,
     /* @__PURE__ */ jsxs15("g", { fill: "none", fillRule: "evenodd", children: [
-      /* @__PURE__ */ jsx23("circle", { cx: 4.5, cy: 4.5, r: 2.5, fill: "currentColor" }),
-      /* @__PURE__ */ jsx23("circle", { cx: 15.5, cy: 15.5, r: 2.5, fill: "currentColor" }),
-      /* @__PURE__ */ jsx23("path", { stroke: "currentColor", strokeLinecap: "square", strokeWidth: 2, d: "m13.5 13.5-9-9" })
+      /* @__PURE__ */ jsx24("circle", { cx: 4.5, cy: 4.5, r: 2.5, fill: "currentColor" }),
+      /* @__PURE__ */ jsx24("circle", { cx: 15.5, cy: 15.5, r: 2.5, fill: "currentColor" }),
+      /* @__PURE__ */ jsx24("path", { stroke: "currentColor", strokeLinecap: "square", strokeWidth: 2, d: "m13.5 13.5-9-9" })
     ] })
   ] });
 }
 
 // src/icons/LineBoxIcon.tsx
-import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
 function LineBoxIcon({ title, titleId, ...props }) {
   return /* @__PURE__ */ jsxs16("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", "aria-labelledby": titleId, ...props, children: [
-    title ? /* @__PURE__ */ jsx24("title", { id: titleId, children: title }) : null,
+    title ? /* @__PURE__ */ jsx25("title", { id: titleId, children: title }) : null,
     /* @__PURE__ */ jsxs16("g", { fill: "none", fillRule: "evenodd", children: [
-      /* @__PURE__ */ jsx24("path", { d: "M0 0h20v20H0z" }),
-      /* @__PURE__ */ jsx24("path", { stroke: "currentColor", strokeLinecap: "square", strokeWidth: 2, d: "m8.5 11.5 6-6M16 4v3m0-3h-3m0 14L2 7" }),
-      /* @__PURE__ */ jsx24("path", { stroke: "currentColor", strokeOpacity: 0.407, strokeWidth: 2, d: "m2 7 5-5 11 11-5 5z" })
+      /* @__PURE__ */ jsx25("path", { d: "M0 0h20v20H0z" }),
+      /* @__PURE__ */ jsx25("path", { stroke: "currentColor", strokeLinecap: "square", strokeWidth: 2, d: "m8.5 11.5 6-6M16 4v3m0-3h-3m0 14L2 7" }),
+      /* @__PURE__ */ jsx25("path", { stroke: "currentColor", strokeOpacity: 0.407, strokeWidth: 2, d: "m2 7 5-5 11 11-5 5z" })
     ] })
   ] });
 }
 
 // src/icons/ShapesIcon.tsx
-import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 var ShapesIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs17(
   "svg",
   {
@@ -858,8 +865,8 @@ var ShapesIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs17(
     "aria-labelledby": titleId,
     ...props,
     children: [
-      title ? /* @__PURE__ */ jsx25("title", { id: titleId, children: title }) : null,
-      /* @__PURE__ */ jsx25(
+      title ? /* @__PURE__ */ jsx26("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ jsx26(
         "path",
         {
           fill: "currentColor",
@@ -871,7 +878,7 @@ var ShapesIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs17(
 );
 
 // src/icons/SquareIcon.tsx
-import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
 var SquareIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs18(
   "svg",
   {
@@ -882,8 +889,8 @@ var SquareIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs18(
     "aria-labelledby": titleId,
     ...props,
     children: [
-      title ? /* @__PURE__ */ jsx26("title", { id: titleId, children: title }) : null,
-      /* @__PURE__ */ jsx26(
+      title ? /* @__PURE__ */ jsx27("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ jsx27(
         "path",
         {
           fill: "currentColor",
@@ -895,7 +902,7 @@ var SquareIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs18(
 );
 
 // src/icons/TriangleIcon.tsx
-import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
 var TriangleIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs19(
   "svg",
   {
@@ -906,14 +913,14 @@ var TriangleIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs19(
     "aria-labelledby": titleId,
     ...props,
     children: [
-      title ? /* @__PURE__ */ jsx27("title", { id: titleId, children: title }) : null,
-      /* @__PURE__ */ jsx27("path", { d: "m80-160 400-640 400 640H80Zm144-80h512L480-650 224-240Zm256-205Z", fill: "currentColor" })
+      title ? /* @__PURE__ */ jsx28("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ jsx28("path", { d: "m80-160 400-640 400 640H80Zm144-80h512L480-650 224-240Zm256-205Z", fill: "currentColor" })
     ]
   }
 );
 
 // src/icons/HexagonIcon.tsx
-import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
 var HexagonIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs20(
   "svg",
   {
@@ -924,8 +931,8 @@ var HexagonIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs20(
     "aria-labelledby": titleId,
     ...props,
     children: [
-      title ? /* @__PURE__ */ jsx28("title", { id: titleId, children: title }) : null,
-      /* @__PURE__ */ jsx28(
+      title ? /* @__PURE__ */ jsx29("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ jsx29(
         "path",
         {
           fill: "currentColor",
@@ -937,12 +944,12 @@ var HexagonIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs20(
 );
 
 // src/icons/DeleteForeverIcon.tsx
-import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
 function DeleteForeverIcon(props) {
   return /* @__PURE__ */ jsxs21("svg", { height: "1em", width: "1em", viewBox: "0 0 24 24", ...props, children: [
-    /* @__PURE__ */ jsx29("path", { d: "M0 0h24v24H0z", fill: "none" }),
-    /* @__PURE__ */ jsx29("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx30("path", { d: "M0 0h24v24H0z", fill: "none" }),
+    /* @__PURE__ */ jsx30("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+    /* @__PURE__ */ jsx30(
       "path",
       {
         d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zm2.46-7.12l1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.13-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4z",
@@ -954,18 +961,18 @@ function DeleteForeverIcon(props) {
 
 // src/SvgControlBar.tsx
 import { useEffect as useEffect2 } from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var className = 'bg-me-gray-100 border hover:bg-me-gray-300 rounded p-1 text-2xl text-me-primary-500 data-[active="true"]:border-me-primary-600';
 var icons = {
-  DrawIcon: /* @__PURE__ */ jsx30(DrawIcon, {}),
-  PolygonIcon: /* @__PURE__ */ jsx30(PolygonIcon, {}),
-  LineIcon: /* @__PURE__ */ jsx30(LineIcon, {}),
-  LineBoxIcon: /* @__PURE__ */ jsx30(LineBoxIcon, {}),
-  ShapesIcon: /* @__PURE__ */ jsx30(ShapesIcon, {}),
-  SquareIcon: /* @__PURE__ */ jsx30(SquareIcon, {}),
-  TriangleIcon: /* @__PURE__ */ jsx30(TriangleIcon, {}),
-  HexagonIcon: /* @__PURE__ */ jsx30(HexagonIcon, {}),
-  DeleteForeverIcon: /* @__PURE__ */ jsx30(DeleteForeverIcon, {})
+  DrawIcon: /* @__PURE__ */ jsx31(DrawIcon, {}),
+  PolygonIcon: /* @__PURE__ */ jsx31(PolygonIcon, {}),
+  LineIcon: /* @__PURE__ */ jsx31(LineIcon, {}),
+  LineBoxIcon: /* @__PURE__ */ jsx31(LineBoxIcon, {}),
+  ShapesIcon: /* @__PURE__ */ jsx31(ShapesIcon, {}),
+  SquareIcon: /* @__PURE__ */ jsx31(SquareIcon, {}),
+  TriangleIcon: /* @__PURE__ */ jsx31(TriangleIcon, {}),
+  HexagonIcon: /* @__PURE__ */ jsx31(HexagonIcon, {}),
+  DeleteForeverIcon: /* @__PURE__ */ jsx31(DeleteForeverIcon, {})
 };
 function SvgControlBar({
   helper,
@@ -975,7 +982,7 @@ function SvgControlBar({
   useEffect2(() => {
     helper.stamps.square();
   }, []);
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     RenderSvgEditorControls,
     {
       icons,
@@ -990,18 +997,18 @@ function SvgControlBar({
 }
 
 // src/ConfirmSelectionButton.tsx
-import { Button as Button3 } from "react-aria-components";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { Button as Button4 } from "react-aria-components";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function ConfirmSelectionButton({ onPress, children }) {
-  return /* @__PURE__ */ jsx31(Button3, { className: "bg-me-primary-500 px-3 py-1 hover:bg-me-primary-600 text-white rounded", onPress, children });
+  return /* @__PURE__ */ jsx32(Button4, { className: "bg-me-primary-500 px-3 py-1 hover:bg-me-primary-600 text-white rounded", onPress, children });
 }
 
 // src/ManifestOverviewEmptyState.tsx
-import { Button as Button4 } from "react-aria-components";
-import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Button as Button5 } from "react-aria-components";
+import { jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
 function ManifestOverviewEmptyState({ onCreate, canCreate }) {
   return /* @__PURE__ */ jsxs22("div", { className: "flex items-center flex-col gap-5 py-16", children: [
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx33(
       Card3D,
       {
         shouldTranslate: true,
@@ -1009,10 +1016,10 @@ function ManifestOverviewEmptyState({ onCreate, canCreate }) {
         className: "border-2 border-dotted bg-black/5 aspect-[3/4] rounded w-32 border-black"
       }
     ),
-    /* @__PURE__ */ jsx32("div", { className: "font-bold text-lg", children: "Let's get started!" }),
-    /* @__PURE__ */ jsx32("div", { className: "max-w-xl px-5 my-4", children: "Add a title and top level information for this manifest using the editing panel on the right, and then add some canvases and content." }),
-    canCreate ? /* @__PURE__ */ jsx32(
-      Button4,
+    /* @__PURE__ */ jsx33("div", { className: "font-bold text-lg", children: "Let's get started!" }),
+    /* @__PURE__ */ jsx33("div", { className: "max-w-xl px-5 my-4", children: "Add a title and top level information for this manifest using the editing panel on the right, and then add some canvases and content." }),
+    canCreate ? /* @__PURE__ */ jsx33(
+      Button5,
       {
         className: "px-8 font-bold py-2 border rounded-lg border-me-primary-500 text-me-primary-500 hover:border-me-primary-600 hover:text-me-primary-600",
         onPress: onCreate,
@@ -1023,41 +1030,18 @@ function ManifestOverviewEmptyState({ onCreate, canCreate }) {
 }
 
 // src/SidebarTabs.tsx
-import {
-  useLayoutEffect as useLayoutEffect3,
-  useMemo as useMemo2,
-  useRef as useRef3,
-  useState as useState3
-} from "react";
-import {
-  Button as Button5,
-  Menu,
-  MenuItem,
-  MenuTrigger,
-  Popover,
-  Tab as Tab2,
-  TabList as TabList2,
-  TabPanel as TabPanel2,
-  Tabs as Tabs2
-} from "react-aria-components";
 import { createHideableComponent } from "@react-aria/collections";
+import { useLayoutEffect as useLayoutEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
+import { Button as Button6, Menu, MenuItem, MenuTrigger, Popover, Tab as Tab2, TabList as TabList2, TabPanel as TabPanel2, Tabs as Tabs2 } from "react-aria-components";
 import { createPortal as createPortal2 } from "react-dom";
-import { Fragment as Fragment3, jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
-function SidebarTabs({
-  menu,
-  menuId,
-  selectedKey,
-  onSelectionChange
-}) {
+import { Fragment as Fragment3, jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
+function SidebarTabs({ menu, menuId, selectedKey, onSelectionChange }) {
   const ref = useRef3(null);
   const [hidden, setHidden] = useState3(0);
   const [hiddenMenu, setHiddenMenu] = useState3(null);
   const widths = useRef3([]);
   const itemsRef = useRef3([]);
-  const selectedIndex = useMemo2(
-    () => menu.findIndex((item) => item.id === selectedKey),
-    [menu, selectedKey]
-  );
+  const selectedIndex = useMemo2(() => menu.findIndex((item) => item.id === selectedKey), [menu, selectedKey]);
   useLayoutEffect3(() => {
     const cb = () => {
       if (widths.current.length === 0) {
@@ -1100,49 +1084,34 @@ function SidebarTabs({
         onSelectionChange,
         children: [
           /* @__PURE__ */ jsxs23("div", { className: "flex items-center w-full tab-shadow", children: [
-            /* @__PURE__ */ jsx33(
-              TabList2,
-              {
-                ref,
-                className: "flex-1 overflow-hidden w-full flex text-sm whitespace-nowrap",
-                children: menu.map((item, idx) => {
-                  const isHidden = hidden >= menu.length - idx;
-                  return /* @__PURE__ */ jsx33(
-                    Tab2,
-                    {
-                      ref: (el) => itemsRef.current[idx] = el,
-                      id: item.id,
-                      className: (state) => cn(
-                        //
-                        "border-b-2 px-2 py-1 text-sm text-gray-400 select-none hover:text-black focus:ring-0 focus:outline-none",
-                        state.isSelected && "border-me-primary-500 text-black",
-                        state.isFocusVisible && "ring-0 bg-me-gray-100",
-                        isHidden && "hidden"
-                      ),
-                      children: item.label
-                    },
-                    item.id
-                  );
-                })
-              }
-            ),
-            /* @__PURE__ */ jsx33("div", { ref: setHiddenMenu, id: "hidden-menu" })
+            /* @__PURE__ */ jsx34(TabList2, { ref, className: "flex-1 overflow-hidden w-full flex text-sm whitespace-nowrap", children: menu.map((item, idx) => {
+              const isHidden = hidden >= menu.length - idx;
+              return /* @__PURE__ */ jsx34(
+                Tab2,
+                {
+                  ref: (el) => itemsRef.current[idx] = el,
+                  id: item.id,
+                  className: (state) => cn(
+                    //
+                    "border-b-2 px-2 py-1 text-sm text-gray-400 select-none hover:text-black focus:ring-0 focus:outline-none",
+                    state.isSelected && "border-me-primary-500 text-black",
+                    state.isFocusVisible && "ring-0 bg-me-gray-100",
+                    isHidden && "hidden"
+                  ),
+                  children: item.label
+                },
+                item.id
+              );
+            }) }),
+            /* @__PURE__ */ jsx34("div", { ref: setHiddenMenu, id: "hidden-menu" })
           ] }),
-          menu.map((item) => /* @__PURE__ */ jsx33(
-            TabPanel2,
-            {
-              id: item.id,
-              className: "flex-1 overflow-y-auto h-full",
-              children: item.renderComponent
-            },
-            item.id
-          ))
+          menu.map((item) => /* @__PURE__ */ jsx34(TabPanel2, { id: item.id, className: "flex-1 overflow-y-auto h-full", children: item.renderComponent }, item.id))
         ]
       },
       menuId
     ),
     hiddenMenu && hidden > 0 ? createPortal2(
-      /* @__PURE__ */ jsx33(
+      /* @__PURE__ */ jsx34(
         MoreMenu,
         {
           hidden,
@@ -1158,8 +1127,8 @@ function SidebarTabs({
 }
 var MoreMenu = createHideableComponent(({ selectedIndex, hidden, menuHidden, selectedKey, onSelectionChange }) => {
   return /* @__PURE__ */ jsxs23(MenuTrigger, { children: [
-    /* @__PURE__ */ jsx33(
-      Button5,
+    /* @__PURE__ */ jsx34(
+      Button6,
       {
         className: cn(
           "border-none rounded bg-gray-100 px-1.5 py-1 mr-2 mb-1 text-me-primary-500 semibold uppercase text-[10px]",
@@ -1168,32 +1137,26 @@ var MoreMenu = createHideableComponent(({ selectedIndex, hidden, menuHidden, sel
         children: "MORE"
       }
     ),
-    /* @__PURE__ */ jsx33(Popover, { children: menuHidden.length ? /* @__PURE__ */ jsx33(
-      Menu,
-      {
-        className: "bg-white rounded shadow-lg flex flex-col gap-0.5 p-0.5 min-w-28",
-        children: menuHidden.map((item) => {
-          return /* @__PURE__ */ jsx33(
-            MenuItem,
-            {
-              className: (state) => cn(
-                "hover:bg-me-gray-100 p-1 rounded-sm text-sm",
-                selectedKey === item.id && "ring ring-me-primary-500"
-              ),
-              onAction: () => onSelectionChange?.(item.id),
-              children: item.label
-            },
-            item.id
-          );
-        })
-      }
-    ) : null })
+    /* @__PURE__ */ jsx34(Popover, { children: menuHidden.length ? /* @__PURE__ */ jsx34(Menu, { className: "bg-white rounded shadow-lg flex flex-col gap-0.5 p-0.5 min-w-28", children: menuHidden.map((item) => {
+      return /* @__PURE__ */ jsx34(
+        MenuItem,
+        {
+          className: (state) => cn(
+            "hover:bg-me-gray-100 p-1 rounded-sm text-sm",
+            selectedKey === item.id && "ring ring-me-primary-500"
+          ),
+          onAction: () => onSelectionChange?.(item.id),
+          children: item.label
+        },
+        item.id
+      );
+    }) }) : null })
   ] });
 });
 
 // src/MetadataContainer.tsx
 import { LocaleString as LocaleString2 } from "react-iiif-vault";
-import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
 function MetadataContainer({
   className: className2,
   label,
@@ -1209,7 +1172,7 @@ function MetadataContainer({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx34(LocaleString2, { className: "text-lg font-bold text-[#333] mb-2", as: "h3", children: label }),
+        /* @__PURE__ */ jsx35(LocaleString2, { className: "text-lg font-bold text-[#333] mb-2", as: "h3", children: label }),
         children
       ]
     }
@@ -1217,9 +1180,9 @@ function MetadataContainer({
 }
 
 // src/EmptyState.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 function EmptyState(props) {
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     "div",
     {
       className: cn(
@@ -1233,9 +1196,9 @@ function EmptyState(props) {
 }
 
 // src/ManifestEditorLogo.tsx
-import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs25 } from "react/jsx-runtime";
 function ManifestEditorLogo(props) {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     "svg",
     {
       width: "1em",
@@ -1245,16 +1208,16 @@ function ManifestEditorLogo(props) {
       className: "me-logo h-[23px] w-[176px]",
       ...props,
       children: /* @__PURE__ */ jsxs25("g", { fill: "none", children: [
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           "path",
           {
             d: "M62.558 5.41v14.873h-2.983v-9.675l-3.985 9.675h-2.26l-4.006-9.675v9.675H46.34V5.41h3.388l4.73 11.06L59.19 5.41zm2.173 8.928c0-1.194.238-2.252.714-3.176.476-.923 1.123-1.633 1.94-2.13.816-.498 1.73-.746 2.738-.746.88 0 1.651.177 2.312.532.66.355 1.19.803 1.588 1.343V8.477h3.004v11.806h-3.004v-1.726c-.384.554-.913 1.012-1.588 1.374-.675.363-1.453.544-2.334.544-.994 0-1.9-.256-2.717-.767-.816-.512-1.463-1.233-1.939-2.163-.476-.93-.714-2-.714-3.207Zm9.292.042c0-.724-.143-1.346-.427-1.864a3.005 3.005 0 0 0-1.15-1.194 3.076 3.076 0 0 0-1.556-.415c-.554 0-1.066.135-1.534.405-.47.27-.85.664-1.14 1.182-.292.519-.437 1.133-.437 1.844 0 .71.145 1.331.437 1.864.29.533.674.941 1.15 1.226.476.284.984.426 1.524.426.554 0 1.073-.139 1.556-.416a3.005 3.005 0 0 0 1.15-1.193c.284-.519.427-1.14.427-1.865Zm12.466-6.073c1.406 0 2.543.444 3.41 1.332.866.888 1.3 2.127 1.3 3.718v6.926h-2.984v-6.52c0-.938-.234-1.66-.703-2.164-.47-.504-1.108-.756-1.918-.756-.824 0-1.474.252-1.95.756-.476.505-.714 1.226-.714 2.163v6.521h-2.983V8.477h2.983v1.47a4.121 4.121 0 0 1 1.524-1.203 4.713 4.713 0 0 1 2.035-.437Zm9.057-1.237c-.526 0-.963-.166-1.311-.5a1.657 1.657 0 0 1-.522-1.247c0-.497.174-.912.522-1.246.348-.334.785-.5 1.31-.5.526 0 .963.166 1.311.5.348.334.522.75.522 1.246 0 .498-.174.913-.522 1.247-.348.334-.785.5-1.31.5Zm1.47 1.407v11.806h-2.983V8.477h2.983Zm8.354 2.451h-2.068v9.355h-3.026v-9.355h-1.342v-2.45h1.342V7.88c0-1.45.412-2.515 1.236-3.197.824-.682 2.067-1.001 3.73-.959V6.24c-.725-.014-1.23.106-1.513.362-.284.256-.427.718-.427 1.385v.49h2.068v2.451Zm12.913 3.197c0 .426-.028.81-.085 1.15h-8.63c.07.853.369 1.52.895 2.003.525.483 1.172.725 1.939.725 1.108 0 1.896-.476 2.365-1.428h3.218c-.34 1.137-.994 2.07-1.96 2.802-.967.732-2.153 1.098-3.56 1.098-1.136 0-2.155-.252-3.057-.757a5.325 5.325 0 0 1-2.11-2.141c-.504-.924-.756-1.99-.756-3.197 0-1.222.248-2.294.745-3.218a5.204 5.204 0 0 1 2.089-2.13c.895-.498 1.925-.746 3.09-.746 1.122 0 2.127.241 3.015.724a5.1 5.1 0 0 1 2.067 2.057c.49.887.735 1.907.735 3.058Zm-3.09-.853c-.014-.767-.29-1.381-.83-1.843-.54-.462-1.201-.693-1.982-.693-.74 0-1.36.224-1.865.671-.504.448-.813 1.07-.927 1.865h5.604Zm9.782 7.203c-.966 0-1.833-.174-2.6-.522-.767-.348-1.375-.82-1.822-1.417a3.591 3.591 0 0 1-.735-1.982h3.004c.057.454.281.83.672 1.13.39.298.877.447 1.46.447.568 0 1.012-.114 1.331-.341.32-.227.48-.519.48-.874 0-.383-.196-.671-.586-.863-.391-.192-1.012-.401-1.865-.629-.88-.213-1.602-.433-2.163-.66a3.755 3.755 0 0 1-1.449-1.044c-.405-.47-.607-1.101-.607-1.897 0-.653.188-1.25.564-1.79.377-.54.917-.966 1.62-1.279.703-.312 1.53-.468 2.483-.468 1.406 0 2.528.351 3.367 1.054.838.704 1.3 1.652 1.385 2.845h-2.856c-.042-.469-.238-.841-.586-1.118-.348-.277-.813-.416-1.396-.416-.54 0-.955.1-1.246.298a.951.951 0 0 0-.437.831c0 .398.199.7.597.906.397.206 1.015.416 1.854.629.852.213 1.555.433 2.11.66a3.727 3.727 0 0 1 1.438 1.055c.405.476.614 1.105.628 1.886 0 .682-.188 1.293-.564 1.833-.377.54-.917.962-1.62 1.268-.703.305-1.524.458-2.461.458Zm10.569-9.547v5.711c0 .398.096.686.288.863.192.178.515.267.97.267h1.385v2.514h-1.875c-2.515 0-3.772-1.222-3.772-3.665v-5.69h-1.407v-2.45h1.407v-2.92h3.004v2.92h2.643v2.45h-2.643Zm12.851-3.111v3.73h5.007v2.364h-5.007v3.943h5.647v2.43h-8.631V5.386h8.63v2.43zm7.585 6.521c0-1.194.239-2.252.715-3.176.476-.923 1.126-1.633 1.95-2.13.824-.498 1.74-.746 2.749-.746.767 0 1.498.167 2.194.5.697.334 1.25.778 1.663 1.332V4.514h3.026v15.77h-3.026v-1.748c-.37.582-.888 1.051-1.556 1.406s-1.442.533-2.323.533a5.07 5.07 0 0 1-2.727-.767c-.824-.512-1.474-1.233-1.95-2.163-.476-.93-.714-2-.714-3.207Zm9.292.042c0-.724-.142-1.346-.426-1.864a3.005 3.005 0 0 0-1.151-1.194 3.076 3.076 0 0 0-1.556-.415 3.02 3.02 0 0 0-1.534.405c-.469.27-.849.664-1.14 1.182-.291.519-.437 1.133-.437 1.844 0 .71.146 1.331.437 1.864.291.533.675.941 1.15 1.226a2.93 2.93 0 0 0 1.524.426c.554 0 1.073-.139 1.556-.416a3.005 3.005 0 0 0 1.15-1.193c.285-.519.427-1.14.427-1.865Zm7.438-7.31c-.527 0-.963-.166-1.311-.5a1.657 1.657 0 0 1-.523-1.247c0-.497.174-.912.523-1.246.348-.334.784-.5 1.31-.5s.963.166 1.31.5c.349.334.523.75.523 1.246 0 .498-.174.913-.522 1.247-.348.334-.785.5-1.31.5Zm1.47 1.407v11.806h-2.984V8.477h2.984Zm6.414 2.451v5.711c0 .398.096.686.287.863.192.178.515.267.97.267h1.385v2.514h-1.875c-2.515 0-3.772-1.222-3.772-3.665v-5.69h-1.406v-2.45h1.406v-2.92h3.005v2.92h2.642v2.45h-2.642Zm10.036 9.547c-1.136 0-2.159-.252-3.068-.757a5.447 5.447 0 0 1-2.141-2.141c-.519-.924-.778-1.99-.778-3.197s.266-2.273.799-3.196a5.553 5.553 0 0 1 2.184-2.142c.924-.504 1.954-.756 3.09-.756 1.137 0 2.167.252 3.09.756a5.553 5.553 0 0 1 2.184 2.142c.533.923.8 1.989.8 3.196 0 1.208-.274 2.273-.821 3.197a5.681 5.681 0 0 1-2.216 2.141c-.93.505-1.971.757-3.122.757Zm0-2.6a3.1 3.1 0 0 0 1.524-.394c.476-.263.856-.657 1.14-1.183.285-.526.427-1.165.427-1.918 0-1.122-.295-1.985-.885-2.589a2.907 2.907 0 0 0-2.163-.906c-.852 0-1.566.302-2.141.906-.576.604-.863 1.467-.863 2.59 0 1.122.28 1.985.841 2.588.562.604 1.268.906 2.12.906Zm11.338-7.565a4.194 4.194 0 0 1 1.502-1.47c.618-.356 1.325-.533 2.12-.533v3.132h-.788c-.938 0-1.644.22-2.12.661-.476.44-.714 1.208-.714 2.302v5.881h-2.984V8.477h2.984v1.833Z",
             fill: "#000"
           }
         ),
-        /* @__PURE__ */ jsx36("path", { fill: "#E94581", className: "me-logo-1", d: "M0 13.343 13.343 0l13.343 13.343-13.343 13.343z" }),
-        /* @__PURE__ */ jsx36("path", { fill: "#E94581", className: "me-logo-2", d: "M12.137 13.346 25.48.003l13.343 13.343L25.48 26.69z" }),
-        /* @__PURE__ */ jsx36("path", { fill: "#C63E75", className: "me-logo-3", d: "m12.104 13.348 7.311-7.311 7.312 7.311-7.312 7.312z" })
+        /* @__PURE__ */ jsx37("path", { fill: "#E94581", className: "me-logo-1", d: "M0 13.343 13.343 0l13.343 13.343-13.343 13.343z" }),
+        /* @__PURE__ */ jsx37("path", { fill: "#E94581", className: "me-logo-2", d: "M12.137 13.346 25.48.003l13.343 13.343L25.48 26.69z" }),
+        /* @__PURE__ */ jsx37("path", { fill: "#C63E75", className: "me-logo-3", d: "m12.104 13.348 7.311-7.311 7.312 7.311-7.312 7.312z" })
       ] })
     }
   );
@@ -1262,9 +1225,9 @@ function ManifestEditorLogo(props) {
 
 // src/Forms.tsx
 import { Input, Label, Form as RAForm, Radio, RadioGroup, TextArea } from "react-aria-components";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 function MeLabel({ className: className2, ...props }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     Label,
     {
       className: cn(
@@ -1277,7 +1240,7 @@ function MeLabel({ className: className2, ...props }) {
   );
 }
 function MeRadioGroup({ className: className2, ...props }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     RadioGroup,
     {
       className: cn(
@@ -1290,7 +1253,7 @@ function MeRadioGroup({ className: className2, ...props }) {
   );
 }
 function MeRadio({ className: className2, ...props }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     Radio,
     {
       className: (state) => cn(
@@ -1303,7 +1266,7 @@ function MeRadio({ className: className2, ...props }) {
   );
 }
 function MeForm({ className: className2, ...props }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     RAForm,
     {
       className: cn(
@@ -1316,7 +1279,7 @@ function MeForm({ className: className2, ...props }) {
   );
 }
 function MeInput({ className: className2, ...props }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     Input,
     {
       className: cn(
@@ -1330,7 +1293,7 @@ function MeInput({ className: className2, ...props }) {
   );
 }
 function MeTextArea({ className: className2, ...props }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     TextArea,
     {
       className: cn(
@@ -1348,7 +1311,7 @@ function MeInputContainer({
   className: className2,
   ...props
 }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     "div",
     {
       className: cn(
@@ -1398,12 +1361,12 @@ import {
   toolbarPlugin
 } from "@mdxeditor/editor";
 import { useMemo as useMemo3 } from "react";
-import { Fragment as Fragment4, jsx as jsx38, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
 function MDXEditor({
   editorRef,
   ...props
 }) {
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     BaseMDXEditor,
     {
       plugins: useMemo3(
@@ -1421,12 +1384,12 @@ function MDXEditor({
             toolbarClassName: "mdx-toolbar",
             toolbarContents: () => /* @__PURE__ */ jsxs26(Fragment4, { children: [
               " ",
-              /* @__PURE__ */ jsx38(UndoRedo, {}),
-              /* @__PURE__ */ jsx38(BoldItalicUnderlineToggles, {}),
-              /* @__PURE__ */ jsx38(BlockTypeSelect, {}),
-              /* @__PURE__ */ jsx38(ListsToggle, { options: ["bullet", "number"] }),
-              /* @__PURE__ */ jsx38(CreateLink, {}),
-              /* @__PURE__ */ jsx38(InsertImage, {})
+              /* @__PURE__ */ jsx39(UndoRedo, {}),
+              /* @__PURE__ */ jsx39(BoldItalicUnderlineToggles, {}),
+              /* @__PURE__ */ jsx39(BlockTypeSelect, {}),
+              /* @__PURE__ */ jsx39(ListsToggle, { options: ["bullet", "number"] }),
+              /* @__PURE__ */ jsx39(CreateLink, {}),
+              /* @__PURE__ */ jsx39(InsertImage, {})
             ] })
           })
         ],
@@ -1439,7 +1402,7 @@ function MDXEditor({
 }
 
 // src/HTMLEditor.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var converter = new Converter();
 converter.setFlavor("github");
 var turndownService = new TurndownService();
@@ -1467,7 +1430,7 @@ function HTMLEditor({
       }
     };
   }, []);
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     MDXEditor,
     {
       editorRef,
@@ -1493,7 +1456,7 @@ function HTMLEditor({
 
 // src/IconButton.tsx
 import { twMerge as twMerge7 } from "tailwind-merge";
-import { jsx as jsx40, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
 function IconButton({
   children,
   active,
@@ -1504,9 +1467,10 @@ function IconButton({
   className: className2,
   placement = "top"
 }) {
-  return /* @__PURE__ */ jsx40(Tooltip, { placement, children: /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsx41(Tooltip, { placement, children: /* @__PURE__ */ jsxs27(
     TooltipTrigger,
     {
+      "aria-label": label,
       onClick: onPress,
       className: twMerge7(
         "rounded flex items-center bg-white justify-center p-2 hover:bg-gray-100 text-2xl",
@@ -1516,14 +1480,14 @@ function IconButton({
       ),
       children: [
         children,
-        /* @__PURE__ */ jsx40(DefaultTooltipContent, { root, className: "translate-x-3 z-50", children: label })
+        /* @__PURE__ */ jsx41(DefaultTooltipContent, { root, className: "translate-x-3 z-50", children: label })
       ]
     }
   ) });
 }
 
 // src/ItemWithHandle.tsx
-import { jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
 function ItemWithHandle({
   children,
   handle,
@@ -1535,7 +1499,7 @@ function ItemWithHandle({
     "absolute flex p-1 gap-1 bg-white z-1 right-1 top-1 rounded"
   ) : "flex-shrink-0 flex items-center gap-1 px-1";
   return /* @__PURE__ */ jsxs28("div", { className: grid ? "relative flex flex-col" : "flex items-center", children: [
-    /* @__PURE__ */ jsx41("div", { className: "flex-1 min-w-0", style: { flex: 1, minWidth: 0 }, children }),
+    /* @__PURE__ */ jsx42("div", { className: "flex-1 min-w-0", style: { flex: 1, minWidth: 0 }, children }),
     /* @__PURE__ */ jsxs28("div", { className: gridStyleClassName, children: [
       actions,
       handle
@@ -1545,9 +1509,9 @@ function ItemWithHandle({
 
 // src/HandleContainer.tsx
 import { forwardRef as forwardRef2 } from "react";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var HandleContainer = forwardRef2(function HandleContainer2({ className: className2, ...props }, ref) {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "div",
     {
       ref,
@@ -1558,13 +1522,12 @@ var HandleContainer = forwardRef2(function HandleContainer2({ className: classNa
 });
 
 // src/CollectionListItem.tsx
-import { Button as Button6 } from "react-aria-components";
 import { LocaleString as LocaleString3, useCollection } from "react-iiif-vault";
 
 // src/icons/CollectionIcon.tsx
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 function CollectionIcon(props) {
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1574,7 +1537,7 @@ function CollectionIcon(props) {
       "aria-label": "collection",
       role: "img",
       ...props,
-      children: /* @__PURE__ */ jsx43(
+      children: /* @__PURE__ */ jsx44(
         "path",
         {
           d: "M320-320h480v-480h-80v280l-100-60-100 60v-280H320v480Zm0 80q-33 0-56.5-23.5T240-320v-480q0-33 23.5-56.5T320-880h480q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H320ZM160-80q-33 0-56.5-23.5T80-160v-560h80v560h560v80H160Zm360-720h200-200Zm-200 0h480-480Z",
@@ -1586,37 +1549,42 @@ function CollectionIcon(props) {
 }
 
 // src/CollectionListItem.tsx
-import { jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
+import { usePress } from "react-aria";
+import { getValue } from "@iiif/helpers/i18n";
+import { jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
 function CollectionListItem({ isActive, onAction }) {
   const collection = useCollection({});
+  const { pressProps } = usePress({
+    onPress: onAction
+  });
   return /* @__PURE__ */ jsxs29(
-    Button6,
+    "li",
     {
+      "aria-label": getValue(collection?.label),
       className: "border-b-2 border-b-gray-200 flex p-2 gap-3 text-left truncate items-center w-full hover:bg-gray-100 data-[active]:bg-gray-200 data-[active]:border-b-me-primary-500",
-      onPress: onAction,
       "data-active": isActive || void 0,
+      ...pressProps,
       children: [
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx45(
           CollectionIcon,
           {
             "data-active": isActive || void 0,
             className: "flex-shrink-0 text-2xl data-[active]:text-me-primary-500 text-gray-400"
           }
         ),
-        /* @__PURE__ */ jsx44(LocaleString3, { children: collection?.label })
+        /* @__PURE__ */ jsx45(LocaleString3, { children: collection?.label })
       ]
     }
   );
 }
 
 // src/ManifestListItem.tsx
-import { Button as Button7 } from "react-aria-components";
 import { LocaleString as LocaleString4, useManifest } from "react-iiif-vault";
 
 // src/icons/ManifestIcon.tsx
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 function ManifestIcon(props) {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1626,7 +1594,7 @@ function ManifestIcon(props) {
       "aria-label": "manifest",
       role: "img",
       ...props,
-      children: /* @__PURE__ */ jsx45(
+      children: /* @__PURE__ */ jsx46(
         "path",
         {
           d: "M480-160q-48-38-104-59t-116-21q-42 0-82.5 11T100-198q-21 11-40.5-1T40-234v-482q0-11 5.5-21T62-752q46-24 96-36t102-12q58 0 113.5 15T480-740v484q51-32 107-48t113-16q36 0 70.5 6t69.5 18v-480q15 5 29.5 10.5T898-752q11 5 16.5 15t5.5 21v482q0 23-19.5 35t-40.5 1q-37-20-77.5-31T700-240q-60 0-116 21t-104 59Zm80-200v-380l200-200v400L560-360Zm-160 65v-396q-33-14-68.5-21.5T260-720q-37 0-72 7t-68 21v397q35-13 69.5-19t70.5-6q36 0 70.5 6t69.5 19Zm0 0v-396 396Z",
@@ -1638,35 +1606,41 @@ function ManifestIcon(props) {
 }
 
 // src/ManifestListItem.tsx
-import { jsx as jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
+import { usePress as usePress2 } from "react-aria";
+import { getValue as getValue2 } from "@iiif/helpers";
+import { jsx as jsx47, jsxs as jsxs30 } from "react/jsx-runtime";
 function ManifestListItem({ isActive, onAction }) {
   const manifest = useManifest();
+  const { pressProps } = usePress2({
+    onPress: onAction
+  });
   return /* @__PURE__ */ jsxs30(
-    Button7,
+    "li",
     {
+      "aria-label": getValue2(manifest?.label),
       className: "border-b-2 border-b-gray-200 flex p-2 gap-3 text-left truncate items-center w-full hover:bg-gray-100 data-[active]:bg-gray-200 data-[active]:border-b-me-primary-500",
-      onPress: onAction,
       "data-active": isActive || void 0,
+      ...pressProps,
       children: [
-        /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx47(
           ManifestIcon,
           {
             "data-active": isActive || void 0,
             className: "flex-shrink-0 text-2xl data-[active]:text-me-primary-500 text-gray-400"
           }
         ),
-        /* @__PURE__ */ jsx46(LocaleString4, { children: manifest?.label })
+        /* @__PURE__ */ jsx47(LocaleString4, { children: manifest?.label })
       ]
     }
   );
 }
 
 // src/icons/CreateCanvasIcon.tsx
-import { jsx as jsx47, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs31 } from "react/jsx-runtime";
 function CreateCanvasIcon() {
   return /* @__PURE__ */ jsxs31("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 0 24 24", width: "24", children: [
-    /* @__PURE__ */ jsx47("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
-    /* @__PURE__ */ jsx47(
+    /* @__PURE__ */ jsx48("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+    /* @__PURE__ */ jsx48(
       "path",
       {
         d: "M13 11h-2v3H8v2h3v3h2v-3h3v-2h-3zm1-9H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z",
@@ -1677,8 +1651,8 @@ function CreateCanvasIcon() {
 }
 
 // src/icons/AddImageIcon.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
-var AddImageIcon = (props) => /* @__PURE__ */ jsx48("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx48(
+import { jsx as jsx49 } from "react/jsx-runtime";
+var AddImageIcon = (props) => /* @__PURE__ */ jsx49("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx49(
   "path",
   {
     d: "M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h360v80H200v560h560v-360h80v360q0 33-23.5 56.5T760-120H200Zm480-480v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80ZM240-280h480L570-480 450-320l-90-120-120 160Zm-40-480v560-560Z",
@@ -1687,7 +1661,7 @@ var AddImageIcon = (props) => /* @__PURE__ */ jsx48("svg", { xmlns: "http://www.
 ) });
 
 // src/icons/IIIFLogo.tsx
-import { jsx as jsx49, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs32 } from "react/jsx-runtime";
 var IIIFLogo = ({ mono = true, ...props }) => /* @__PURE__ */ jsxs32(
   "svg",
   {
@@ -1698,7 +1672,7 @@ var IIIFLogo = ({ mono = true, ...props }) => /* @__PURE__ */ jsxs32(
     ...props,
     viewBox: "0 0 493.36 441.333",
     children: [
-      /* @__PURE__ */ jsx49(
+      /* @__PURE__ */ jsx50(
         "path",
         {
           d: "m65.242 2178.75 710-263.75-1.25-1900-708.75 261.25v1902.5m738.903 461.34c81.441-240.91-26.473-436.2-241.04-436.2-214.558 0-454.511 195.29-535.953 436.2-81.433 240.89 26.48 436.18 241.039 436.18 214.567 0 454.512-195.29 535.954-436.18",
@@ -1711,7 +1685,7 @@ var IIIFLogo = ({ mono = true, ...props }) => /* @__PURE__ */ jsxs32(
           transform: "matrix(.13333 0 0 -.13333 0 441.333)"
         }
       ),
-      /* @__PURE__ */ jsx49(
+      /* @__PURE__ */ jsx50(
         "path",
         {
           d: "M1678.58 2178.75 968.578 1915l1.25-1900 708.752 261.25v1902.5m-743.498 461.34c-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",
@@ -1724,7 +1698,7 @@ var IIIFLogo = ({ mono = true, ...props }) => /* @__PURE__ */ jsxs32(
           transform: "matrix(.13333 0 0 -.13333 0 441.333)"
         }
       ),
-      /* @__PURE__ */ jsx49(
+      /* @__PURE__ */ jsx50(
         "path",
         {
           d: "m1860.24 2178.75 710-263.75-1.25-1900-708.75 261.25v1902.5m743.5 461.34c81.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",
@@ -1737,7 +1711,7 @@ var IIIFLogo = ({ mono = true, ...props }) => /* @__PURE__ */ jsxs32(
           transform: "matrix(.13333 0 0 -.13333 0 441.333)"
         }
       ),
-      /* @__PURE__ */ jsx49(
+      /* @__PURE__ */ jsx50(
         "path",
         {
           d: "M3700.24 3310v-652.5s-230 90-257.5-142.5c-2.5-247.5 0-336.25 0-336.25l257.5 83.75V1690l-258.61-92.5v-1335L2735.24 0v2360s-15 850 965 950",
@@ -1755,8 +1729,8 @@ var IIIFLogo = ({ mono = true, ...props }) => /* @__PURE__ */ jsxs32(
 );
 
 // src/icons/HTMLIcon.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
-var HTMLIcon = (props) => /* @__PURE__ */ jsx50("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx50(
+import { jsx as jsx51 } from "react/jsx-runtime";
+var HTMLIcon = (props) => /* @__PURE__ */ jsx51("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx51(
   "path",
   {
     d: "M0-360v-240h60v80h80v-80h60v240h-60v-100H60v100H0Zm310 0v-180h-70v-60h200v60h-70v180h-60Zm170 0v-200q0-17 11.5-28.5T520-600h180q17 0 28.5 11.5T740-560v200h-60v-180h-40v140h-60v-140h-40v180h-60Zm320 0v-240h60v180h100v60H800Z",
@@ -1765,8 +1739,8 @@ var HTMLIcon = (props) => /* @__PURE__ */ jsx50("svg", { xmlns: "http://www.w3.o
 ) });
 
 // src/icons/IIIFBrowserIcon.tsx
-import { jsx as jsx51 } from "react/jsx-runtime";
-var IIIFBrowserIcon = (props) => /* @__PURE__ */ jsx51("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx51(
+import { jsx as jsx52 } from "react/jsx-runtime";
+var IIIFBrowserIcon = (props) => /* @__PURE__ */ jsx52("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx52(
   "path",
   {
     d: "M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h200v80H200v560h560v-214l80 80v134q0 33-23.5 56.5T760-120H200Zm40-160 120-160 90 120 120-160 150 200H240Zm622-144L738-548q-21 14-45 21t-51 7q-74 0-126-52.5T464-700q0-75 52.5-127.5T644-880q75 0 127.5 52.5T824-700q0 27-8 52t-20 46l122 122-56 56ZM644-600q42 0 71-29t29-71q0-42-29-71t-71-29q-42 0-71 29t-29 71q0 42 29 71t71 29Z",
@@ -1775,12 +1749,12 @@ var IIIFBrowserIcon = (props) => /* @__PURE__ */ jsx51("svg", { xmlns: "http://w
 ) });
 
 // src/icons/InfoIcon.tsx
-import { jsx as jsx52, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs33 } from "react/jsx-runtime";
 function InfoIcon({ title, titleId, ...props }) {
   return /* @__PURE__ */ jsxs33("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", "aria-labelledby": titleId, ...props, children: [
-    title ? /* @__PURE__ */ jsx52("title", { id: titleId, children: title }) : null,
-    /* @__PURE__ */ jsx52("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
-    /* @__PURE__ */ jsx52(
+    title ? /* @__PURE__ */ jsx53("title", { id: titleId, children: title }) : null,
+    /* @__PURE__ */ jsx53("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+    /* @__PURE__ */ jsx53(
       "path",
       {
         d: "M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z",
@@ -1791,7 +1765,7 @@ function InfoIcon({ title, titleId, ...props }) {
 }
 
 // src/icons/ListingIcon.tsx
-import { jsx as jsx53, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs34 } from "react/jsx-runtime";
 function ListingIcon({
   title,
   titleId,
@@ -1807,12 +1781,12 @@ function ListingIcon({
       "aria-labelledby": titleId,
       ...props,
       children: [
-        title ? /* @__PURE__ */ jsx53("title", { id: titleId, children: title }) : null,
+        title ? /* @__PURE__ */ jsx54("title", { id: titleId, children: title }) : null,
         /* @__PURE__ */ jsxs34("g", { fill: "none", children: [
-          /* @__PURE__ */ jsx53("path", { d: "M0 0h24v24H0V0z" }),
-          /* @__PURE__ */ jsx53("path", { d: "M0 0h24v24H0V0z", opacity: ".87" })
+          /* @__PURE__ */ jsx54("path", { d: "M0 0h24v24H0V0z" }),
+          /* @__PURE__ */ jsx54("path", { d: "M0 0h24v24H0V0z", opacity: ".87" })
         ] }),
-        /* @__PURE__ */ jsx53(
+        /* @__PURE__ */ jsx54(
           "path",
           {
             d: "M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7zm-4 6h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z",
@@ -1825,8 +1799,8 @@ function ListingIcon({
 }
 
 // src/icons/YouTubeIcon.tsx
-import { jsx as jsx54 } from "react/jsx-runtime";
-var YouTubeIcon = (props) => /* @__PURE__ */ jsx54("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx54(
+import { jsx as jsx55 } from "react/jsx-runtime";
+var YouTubeIcon = (props) => /* @__PURE__ */ jsx55("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx55(
   "path",
   {
     d: "M616-242q-27 1-51.5 1.5t-43.5.5h-41q-71 0-133-2-53-2-104.5-5.5T168-257q-26-7-45-26t-26-45q-6-23-9.5-56T82-447q-2-36-2-73t2-73q2-30 5.5-63t9.5-56q7-26 26-45t45-26q23-6 74.5-9.5T347-798q62-2 133-2t133 2q53 2 104.5 5.5T792-783q26 7 45 26t26 45q6 23 9.5 56t5.5 63q2 36 2 73v17q-19-8-39-12.5t-41-4.5q-83 0-141.5 58.5T600-320q0 21 4 40.5t12 37.5ZM400-400l208-120-208-120v240Zm360 200v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80Z",
@@ -1835,7 +1809,7 @@ var YouTubeIcon = (props) => /* @__PURE__ */ jsx54("svg", { xmlns: "http://www.w
 ) });
 
 // src/icons/ListEditIcon.tsx
-import { jsx as jsx55, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs35 } from "react/jsx-runtime";
 function ListEditIcon({
   title,
   titleId,
@@ -1851,17 +1825,17 @@ function ListEditIcon({
       "aria-labelledby": titleId,
       ...props,
       children: [
-        title ? /* @__PURE__ */ jsx55("title", { id: titleId, children: title }) : null,
-        /* @__PURE__ */ jsx55("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
-        /* @__PURE__ */ jsx55("path", { d: "M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z" })
+        title ? /* @__PURE__ */ jsx56("title", { id: titleId, children: title }) : null,
+        /* @__PURE__ */ jsx56("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+        /* @__PURE__ */ jsx56("path", { d: "M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z" })
       ]
     }
   );
 }
 
 // src/icons/VideoIcon.tsx
-import { jsx as jsx56 } from "react/jsx-runtime";
-var VideoIcon = (props) => /* @__PURE__ */ jsx56("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx56(
+import { jsx as jsx57 } from "react/jsx-runtime";
+var VideoIcon = (props) => /* @__PURE__ */ jsx57("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx57(
   "path",
   {
     d: "M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h480q33 0 56.5 23.5T720-720v180l160-160v440L720-420v180q0 33-23.5 56.5T640-160H160Zm0-80h480v-480H160v480Zm0 0v-480 480Z",
@@ -1870,8 +1844,8 @@ var VideoIcon = (props) => /* @__PURE__ */ jsx56("svg", { xmlns: "http://www.w3.
 ) });
 
 // src/icons/AudioIcon.tsx
-import { jsx as jsx57 } from "react/jsx-runtime";
-var AudioIcon = (props) => /* @__PURE__ */ jsx57("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx57(
+import { jsx as jsx58 } from "react/jsx-runtime";
+var AudioIcon = (props) => /* @__PURE__ */ jsx58("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx58(
   "path",
   {
     d: "M480-400q-50 0-85-35t-35-85v-240q0-50 35-85t85-35q50 0 85 35t35 85v240q0 50-35 85t-85 35Zm0-240Zm-40 520v-123q-104-14-172-93t-68-184h80q0 83 58.5 141.5T480-320q83 0 141.5-58.5T680-520h80q0 105-68 184t-172 93v123h-80Zm40-360q17 0 28.5-11.5T520-520v-240q0-17-11.5-28.5T480-800q-17 0-28.5 11.5T440-760v240q0 17 11.5 28.5T480-480Z",
@@ -1880,8 +1854,8 @@ var AudioIcon = (props) => /* @__PURE__ */ jsx57("svg", { xmlns: "http://www.w3.
 ) });
 
 // src/icons/EmptyCanvasIcon.tsx
-import { jsx as jsx58 } from "react/jsx-runtime";
-var EmptyCanvasIcon = (props) => /* @__PURE__ */ jsx58("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx58(
+import { jsx as jsx59 } from "react/jsx-runtime";
+var EmptyCanvasIcon = (props) => /* @__PURE__ */ jsx59("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx59(
   "path",
   {
     d: "M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z",
@@ -1890,7 +1864,7 @@ var EmptyCanvasIcon = (props) => /* @__PURE__ */ jsx58("svg", { xmlns: "http://w
 ) });
 
 // src/icons/AddIcon.tsx
-import { jsx as jsx59, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs36 } from "react/jsx-runtime";
 function AddIcon({
   className: className2,
   inline,
@@ -1908,15 +1882,15 @@ function AddIcon({
       style: { verticalAlign: inline ? "bottom" : void 0 },
       className: className2,
       children: [
-        /* @__PURE__ */ jsx59("path", { d: "M0 0h24v24H0z", fill: "none" }),
-        /* @__PURE__ */ jsx59("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z", fill: "currentColor" })
+        /* @__PURE__ */ jsx60("path", { d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx60("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z", fill: "currentColor" })
       ]
     }
   );
 }
 
 // src/icons/MoreMenu.tsx
-import { jsx as jsx60, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs37 } from "react/jsx-runtime";
 function MoreMenu2() {
   return /* @__PURE__ */ jsxs37(
     "svg",
@@ -1926,8 +1900,8 @@ function MoreMenu2() {
       viewBox: "0 0 24 24",
       width: "1em",
       children: [
-        /* @__PURE__ */ jsx60("path", { d: "M0 0h24v24H0z", fill: "none" }),
-        /* @__PURE__ */ jsx60(
+        /* @__PURE__ */ jsx61("path", { d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx61(
           "path",
           {
             d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z",
@@ -1940,9 +1914,9 @@ function MoreMenu2() {
 }
 
 // src/icons/PreviewIcon.tsx
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx62 } from "react/jsx-runtime";
 function PreviewIcon(props) {
-  return /* @__PURE__ */ jsx61("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsx62("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsx62(
     "path",
     {
       fill: "currentColor",
@@ -1952,9 +1926,9 @@ function PreviewIcon(props) {
 }
 
 // src/icons/ImageListIcon.tsx
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
 function ImageListIcon(props) {
-  return /* @__PURE__ */ jsx62("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx63("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsx63(
     "path",
     {
       fill: "currentColor",
@@ -1964,16 +1938,16 @@ function ImageListIcon(props) {
 }
 
 // src/icons/BackIcon.tsx
-import { jsx as jsx63 } from "react/jsx-runtime";
+import { jsx as jsx64 } from "react/jsx-runtime";
 function BackIcon(props) {
-  return /* @__PURE__ */ jsx63("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsx63("path", { fill: "currentColor", d: "M20 11H7.83l5.59-5.59L12 4l-8 8l8 8l1.41-1.41L7.83 13H20z" }) });
+  return /* @__PURE__ */ jsx64("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsx64("path", { fill: "currentColor", d: "M20 11H7.83l5.59-5.59L12 4l-8 8l8 8l1.41-1.41L7.83 13H20z" }) });
 }
 
 // src/icons/GridIcon.tsx
-import { jsx as jsx64, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs38 } from "react/jsx-runtime";
 function GridIcon(props) {
   return /* @__PURE__ */ jsxs38("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props, children: [
-    /* @__PURE__ */ jsx64(
+    /* @__PURE__ */ jsx65(
       "path",
       {
         fill: "currentColor",
@@ -1981,7 +1955,7 @@ function GridIcon(props) {
         opacity: ".3"
       }
     ),
-    /* @__PURE__ */ jsx64(
+    /* @__PURE__ */ jsx65(
       "path",
       {
         fill: "currentColor",
@@ -1992,9 +1966,9 @@ function GridIcon(props) {
 }
 
 // src/icons/ScaledImageIcon.tsx
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
 function ScaledImageIcon(props) {
-  return /* @__PURE__ */ jsx65("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx66("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsx66(
     "path",
     {
       fill: "currentColor",
@@ -2005,9 +1979,9 @@ function ScaledImageIcon(props) {
 
 // src/ErrorMessage.tsx
 import { twMerge as twMerge8 } from "tailwind-merge";
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { jsx as jsx67 } from "react/jsx-runtime";
 function ErrorMessage({ children, small = false, className: className2 }) {
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx67(
     "div",
     {
       className: twMerge8(
@@ -2044,11 +2018,11 @@ function useFastList(list, firstRender = 24) {
 
 // src/RenderTextualContent.tsx
 import { useState as useState6 } from "react";
-import { Button as Button8 } from "react-aria-components";
+import { Button as Button7 } from "react-aria-components";
 import {
   LocaleString as LocaleString5
 } from "react-iiif-vault";
-import { jsx as jsx67, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs39 } from "react/jsx-runtime";
 function RenderTextualContent(props) {
   const languages = props.strategy.items.map(
     (item) => Object.keys(item.text)[0]
@@ -2058,9 +2032,9 @@ function RenderTextualContent(props) {
     (item) => Object.keys(item.text)[0] === langauge
   );
   return /* @__PURE__ */ jsxs39("div", { className: "overflow-y-auto bg-white shadow", children: [
-    /* @__PURE__ */ jsx67("div", { className: "flex gap-2 border-b", children: languages.map((language) => {
-      return /* @__PURE__ */ jsx67(
-        Button8,
+    /* @__PURE__ */ jsx68("div", { className: "flex gap-2 border-b", children: languages.map((language) => {
+      return /* @__PURE__ */ jsx68(
+        Button7,
         {
           className: `py-1 px-3 ${langauge === language ? "bg-me-500 text-white" : "bg-white text-black"}`,
           onPress: () => setLanguage(language),
@@ -2069,11 +2043,11 @@ function RenderTextualContent(props) {
         language
       );
     }) }),
-    /* @__PURE__ */ jsx67("div", { className: "p-4 prose", children: /* @__PURE__ */ jsx67(
+    /* @__PURE__ */ jsx68("div", { className: "p-4 prose", children: /* @__PURE__ */ jsx68(
       LocaleString5,
       {
         enableDangerouslySetInnerHTML: true,
-        defaultText: /* @__PURE__ */ jsx67("span", { className: "text-gray-500 my-8", children: "No content available" }),
+        defaultText: /* @__PURE__ */ jsx68("span", { className: "text-gray-500 my-8", children: "No content available" }),
         children: selected?.text
       }
     ) })
@@ -2087,15 +2061,15 @@ import "@vidstack/react/player/styles/default/captions.css";
 import "@vidstack/react/player/styles/default/layouts/video.css";
 import { MediaPlayer, MediaProvider, Poster, Gesture, Track } from "@vidstack/react";
 import { defaultLayoutIcons, DefaultVideoLayout } from "@vidstack/react/player/layouts/default";
-import { getValue } from "@iiif/helpers";
+import { getValue as getValue3 } from "@iiif/helpers";
 import { useRef as useRef5 } from "react";
-import { Fragment as Fragment5, jsx as jsx68, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx69, jsxs as jsxs40 } from "react/jsx-runtime";
 function IIIFMediaPlayer(props) {
   const mediaPlayer = useRef5(null);
   const captions = props.captions || [];
   const language = props.language;
   const timeRef = useRef5(props.startTime || 0);
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx69(
     MediaPlayer,
     {
       onTimeUpdate: (time) => {
@@ -2118,27 +2092,27 @@ function IIIFMediaPlayer(props) {
       ],
       children: /* @__PURE__ */ jsxs40(MediaProvider, { className: "w-full h-full [&>video]:w-full [&>video]:h-full [&>video]:object-contain", children: [
         captions.map((caption) => {
-          return /* @__PURE__ */ jsx68(
+          return /* @__PURE__ */ jsx69(
             Track,
             {
               src: caption.id,
               kind: "subtitles",
-              label: getValue(caption.label),
+              label: getValue3(caption.label),
               default: caption.language === language,
               language: caption.language
             },
             caption.id
           );
         }),
-        props.poster ? /* @__PURE__ */ jsx68(
+        props.poster ? /* @__PURE__ */ jsx69(
           Poster,
           {
             className: "absolute inset-0 bg-black block h-full w-full opacity-0 transition-opacity data-[visible]:opacity-100 object-contain",
             src: props.poster
           }
         ) : null,
-        /* @__PURE__ */ jsx68(Gestures, {}),
-        /* @__PURE__ */ jsx68(
+        /* @__PURE__ */ jsx69(Gestures, {}),
+        /* @__PURE__ */ jsx69(
           DefaultVideoLayout,
           {
             className: "z-1",
@@ -2152,7 +2126,7 @@ function IIIFMediaPlayer(props) {
 }
 function Gestures() {
   return /* @__PURE__ */ jsxs40(Fragment5, { children: [
-    /* @__PURE__ */ jsx68(
+    /* @__PURE__ */ jsx69(
       Gesture,
       {
         className: "pointer-coarse:hidden absolute top-0 start-12 bottom-20 right-0 -z-1 block",
@@ -2160,10 +2134,11 @@ function Gestures() {
         action: "toggle:paused"
       }
     ),
-    /* @__PURE__ */ jsx68(Gesture, { className: "absolute inset-0 z-0 block h-full w-full", event: "dblpointerup", action: "toggle:fullscreen" })
+    /* @__PURE__ */ jsx69(Gesture, { className: "absolute inset-0 z-0 block h-full w-full", event: "dblpointerup", action: "toggle:fullscreen" })
   ] });
 }
 export {
+  AccessibilityButton,
   ActionButton,
   AddIcon,
   AddImageIcon,