zimme-zoom 0.1.1 → 0.1.2

package/dist/components/ImageOverlay.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { OverlayPosition, OverlaySize } from '../types/image.type';
+interface ImageOverlayProps {
+    overlay: React.ReactNode | string;
+    position?: OverlayPosition;
+    size?: OverlaySize;
+}
+export declare const ImageOverlay: React.FC<ImageOverlayProps>;
+export default ImageOverlay;

package/dist/components/Navigation.d.ts

@@ -8,6 +8,8 @@ interface NavigationProps {
     onReset?: () => void;
     onNext?: () => void;
     onPrevious?: () => void;
+    onToggleOverlay?: () => void;
+    showOverlay?: boolean;
     showControls?: boolean;
 }
 export declare const Navigation: React.FC<NavigationProps>;

package/dist/components/NavigationActionButton.d.ts

@@ -3,6 +3,7 @@ interface NavigationActionButtonProps {
     icon: string;
     onClick?: (e?: React.MouseEvent) => void;
     transform?: string;
+    style?: React.CSSProperties;
 }
 export declare const NavigationActionButton: React.FC<NavigationActionButtonProps>;
 export default NavigationActionButton;

package/dist/components/icons.d.ts

@@ -4,3 +4,4 @@ export declare const IconZoomIn = "url(\"data:image/svg+xml;base64,PD94bWwgdmVyc
 export declare const IconZoomOut = "url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSIxMDAwIiB3aWR0aD0iMTAwMCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgo8bWV0YWRhdGE+SWNvRm9udCBJY29uczwvbWV0YWRhdGE+Cjx0aXRsZT51aS16b29tLW91dDwvdGl0bGU+CjxnbHlwaCBnbHlwaC1uYW1lPSJ1aS16b29tLW91dCIgdW5pY29kZT0iJiN4ZWM5ODsiIGhvcml6LWFkdi14PSIxMDAwIiAvPgo8cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNOTgyLjIgNzg4LjZsLTIzNC45MDAwMDAwMDAwMDAxLTIxNmMyNy01My41IDQyLjYwMDAwMDAwMDAwMDAyLTExMy43MDAwMDAwMDAwMDAwNSA0Mi42MDAwMDAwMDAwMDAwMi0xNzcuNzAwMDAwMDAwMDAwMDUgMC0yMTguMDk5OTk5OTk5OTk5OTctMTc2Ljg5OTk5OTk5OTk5OTk4LTM5NC45LTM5NC45LTM5NC45LTIxOC4yIDAtMzk1IDE3Ni44LTM5NSAzOTQuOSAwIDIxOC4xMDAwMDAwMDAwMDAwMiAxNzYuOCAzOTUgMzk1IDM5NSA2My44OTk5OTk5OTk5OTk5OCAwIDEyNC4xMDAwMDAwMDAwMDAwMi0xNS41IDE3Ny42MDAwMDAwMDAwMDAwMi00Mi41bDIxNS44OTk5OTk5OTk5OTk5OCAyMzQuODk5OTk5OTk5OTk5OThjMjEgMjIuOTAwMDAwMDAwMDAwMDkgNTYuMjAwMDAwMDAwMDAwMDQ1IDIzLjYwMDAwMDAwMDAwMDAyMyA3OC4yMDAwMDAwMDAwMDAwNSAxLjYwMDAwMDAwMDAwMDAyMjdsMTE3LjI5OTk5OTk5OTk5OTk1LTExNy4yOTk5OTk5OTk5OTk5NWMyMS43OTk5OTk5OTk5OTk5NTUtMjEuODAwMDAwMDAwMDAwMDY4IDIxLjEwMDAwMDAwMDAwMDAyMy01Ny0xLjc5OTk5OTk5OTk5OTk1NDUtNzh6IG0tNTg3LjItMTUyLjcwMDAwMDAwMDAwMDA1Yy0xMzMgMC0yNDAuOS0xMDcuODk5OTk5OTk5OTk5OTgtMjQwLjktMjQwLjg5OTk5OTk5OTk5OTk4czEwNy45LTI0MSAyNDAuOS0yNDFjMTMzLjEwMDAwMDAwMDAwMDAyIDAgMjQwLjg5OTk5OTk5OTk5OTk4IDEwNy44OTk5OTk5OTk5OTk5OCAyNDAuODk5OTk5OTk5OTk5OTggMjQwLjg5OTk5OTk5OTk5OTk4cy0xMDcuODk5OTk5OTk5OTk5OTggMjQxLTI0MC44OTk5OTk5OTk5OTk5OCAyNDF6IG0xMjUuMjk5OTk5OTk5OTk5OTUtMjgyLjVoLTI1My41OTk5OTk5OTk5OTk5N2MtMTIuMzk5OTk5OTk5OTk5OTc3IDAtMjIuNSAxMC4xMDAwMDAwMDAwMDAwMjMtMjIuNSAyMi42MDAwMDAwMDAwMDAwMjN2MjkuNWMwIDEyLjM5OTk5OTk5OTk5OTk3NyAxMC4xMDAwMDAwMDAwMDAwMjMgMjIuNjAwMDAwMDAwMDAwMDIzIDIyLjUgMjIuNjAwMDAwMDAwMDAwMDIzaDI1My41OTk5OTk5OTk5OTk5N2MxMi40MDAwMDAwMDAwMDAwOTEgMCAyMi41LTEwLjEwMDAwMDAwMDAwMDAyMyAyMi41LTIyLjYwMDAwMDAwMDAwMDAyM3YtMjkuNWMwLTEyLjM5OTk5OTk5OTk5OTk3Ny0xMC4wOTk5OTk5OTk5OTk5MDktMjIuNjAwMDAwMDAwMDAwMDIzLTIyLjUtMjIuNjAwMDAwMDAwMDAwMDIzeiIvPgo8L3N2Zz4=\")";
 export declare const IconRotate = "url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSIxMDAwIiB3aWR0aD0iMTAwMCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgo8bWV0YWRhdGE+SWNvRm9udCBJY29uczwvbWV0YWRhdGE+Cjx0aXRsZT51bmRvPC90aXRsZT4KPGdseXBoIGdseXBoLW5hbWU9InVuZG8iIHVuaWNvZGU9IiYjeGVlMGI7IiBob3Jpei1hZHYteD0iMTAwMCIgLz4KPHBhdGggIGZpbGw9IiNmZmZmZmYiIGQ9Ik04OTguMSA2NTVjLTcuMjAwMDAwMDAwMDAwMDQ1NSAyOS41LTExLjM5OTk5OTk5OTk5OTk3NyA1OS43MDAwMDAwMDAwMDAwNDUtMjEuNzAwMDAwMDAwMDAwMDQ1IDg4LjUtNTMuMzk5OTk5OTk5OTk5OTggMTUwLjcwMDAwMDAwMDAwMDA1LTIwMCAyNTUuODk5OTk5OTk5OTk5OTgtMzU4LjI5OTk5OTk5OTk5OTk1IDI1Ni41LTQxLjcwMDAwMDAwMDAwMDA0NSAwLjEwMDAwMDAwMDAwMDAyMjc0LTc2LjMwMDAwMDAwMDAwMDAxLTI4Ljg5OTk5OTk5OTk5OTk3Ny04MC40MDAwMDAwMDAwMDAwMy02Ny4zOTk5OTk5OTk5OTk5OC00LjM5OTk5OTk5OTk5OTk3Ny00MC44OTk5OTk5OTk5OTk5OCAyMC45MDAwMDAwMDAwMDAwMzQtNzcuODk5OTk5OTk5OTk5OTggNjAuNjAwMDAwMDAwMDAwMDItODUuMTAwMDAwMDAwMDAwMDIgMjIuODAwMDAwMDAwMDAwMDEtNC4xMDAwMDAwMDAwMDAwMjMgNDYuNjk5OTk5OTk5OTk5OTktMi4yOTk5OTk5OTk5OTk5NTQ1IDY5LjQwMDAwMDAwMDAwMDAzLTguNSA5Mi4wOTk5OTk5OTk5OTk5MS0yNS4yMDAwMDAwMDAwMDAwNDUgMTUzLTg0IDE3MC43OTk5OTk5OTk5OTk5NS0xNzcuMjk5OTk5OTk5OTk5OTUgMTguODk5OTk5OTk5OTk5OTc3LTk4LjMwMDAwMDAwMDAwMDA3LTkuNS0xODQuMDAwMDAwMDAwMDAwMDYtOTIuMjAwMDAwMDAwMDAwMDUtMjQ2LjQwMDAwMDAwMDAwMDAzLTIzLjM5OTk5OTk5OTk5OTk3Ny0xNy42MDAwMDAwMDAwMDAwMjMtNTAuODk5OTk5OTk5OTk5OTgtMjguMTk5OTk5OTk5OTk5OTktODAtMjktNTYuMTk5OTk5OTk5OTk5OTMtMS41LTExMi4zOTk5OTk5OTk5OTk5OC0wLjQwMDAwMDAwMDAwMDAzNDEtMTY5LjA5OTk5OTk5OTk5OTk3LTAuNDAwMDAwMDAwMDAwMDM0MSAwLjQwMDAwMDAwMDAwMDAzNDEgNy41IDYuNSAxMC4yMDAwMDAwMDAwMDAwNDUgMTAuNDAwMDAwMDAwMDAwMDM0IDE0LjEwMDAwMDAwMDAwMDAyMyAyNy43OTk5OTk5OTk5OTk5NTUgMjguMTAwMDAwMDAwMDAwMDIzIDU2LjM5OTk5OTk5OTk5OTk4IDU1LjYwMDAwMDAwMDAwMDAyIDgzLjc5OTk5OTk5OTk5OTk1IDg0LjEwMDAwMDAwMDAwMDAyIDMxIDMyLjEwMDAwMDAwMDAwMDAyIDMwLjUgNzkuMjk5OTk5OTk5OTk5OTUtMC4wOTk5OTk5OTk5OTk5NjU5IDEwOS42OTk5OTk5OTk5OTk5My0yOS44MDAwMDAwMDAwMDAwMSAyOS42MDAwMDAwMDAwMDAwMjMtNzcuMTAwMDAwMDAwMDAwMDIgMzAuMjAwMDAwMDAwMDAwMDQ1LTEwOC4zMDAwMDAwMDAwMDAwMS0wLjY5OTk5OTk5OTk5OTkzMTgtOTIuNS05MS43MDAwMDAwMDAwMDAwNS0xODQuMi0xODQuMTAwMDAwMDAwMDAwMDItMjc2LjQtMjc1LjkwMDAwMDAwMDAwMDAzLTcuNTAwMDAwMDAwMDAwMDI4LTcuNS02LjIwMDAwMDAwMDAwMDAxNy0xMS4zOTk5OTk5OTk5OTk5NzcgMC42OTk5OTk5OTk5OTk5NzQ0LTE4LjMwMDAwMDAwMDAwMDAxIDkxLjgtOTEuMjk5OTk5OTk5OTk5OTggMTgzLjM5OTk5OTk5OTk5OTk4LTE4Mi44OTk5OTk5OTk5OTk5OCAyNzQuNy0yNzQuNyAxMS44MDAwMDAwMDAwMDAwMTEtMTEuODk5OTk5OTk5OTk5OTg4IDI3LTE2LjY5OTk5OTk5OTk5OTk5IDQxLTI0LjE5OTk5OTk5OTk5OTk5aDI4LjgwMDAwMDAwMDAwMDAxYzEuMzk5OTk5OTk5OTk5OTc3MyAzLjQgNC41OTk5OTk5OTk5OTk5NjYgMy4xIDcuMzk5OTk5OTk5OTk5OTc3IDQuMSA1OC4xOTk5OTk5OTk5OTk5OSAyMC41IDczLjY5OTk5OTk5OTk5OTk5IDg1LjUgMzAuOTAwMDAwMDAwMDAwMDM0IDEzMC05LjUgOS45MDAwMDAwMDAwMDAwMDYtMTkuNSAxOS41LTI5LjMwMDAwMDAwMDAwMDAxIDI5LjIwMDAwMDAwMDAwMDAxNy0yMS41IDIxLjE5OTk5OTk5OTk5OTk5LTQzIDQyLjUtNjguMzAwMDAwMDAwMDAwMDEgNjcuMzk5OTk5OTk5OTk5OThoMjMuMTAwMDAwMDAwMDAwMDIzYzQ3LjM5OTk5OTk5OTk5OTk4IDAgOTQuNjk5OTk5OTk5OTk5OTktMC4zOTk5OTk5OTk5OTk5NzcyNiAxNDIuMTAwMDAwMDAwMDAwMDIgMC4zMDAwMDAwMDAwMDAwMTEzNyAzNC44OTk5OTk5OTk5OTk5OCAwLjU5OTk5OTk5OTk5OTk5NDMgNjkuMTk5OTk5OTk5OTk5OTMgNi41IDEwMS43OTk5OTk5OTk5OTk5NSAxOS4wOTk5OTk5OTk5OTk5OTQgMTEzLjEwMDAwMDAwMDAwMDAyIDQzLjU5OTk5OTk5OTk5OTk5NCAxODIuMzk5OTk5OTk5OTk5OTggMTI3LjUwMDAwMDAwMDAwMDAzIDIyMC4xMDAwMDAwMDAwMDAwMiAyNDAuMjk5OTk5OTk5OTk5OTggOC44OTk5OTk5OTk5OTk5NzcgMjYuNzAwMDAwMDAwMDAwMDQ1IDExLjM5OTk5OTk5OTk5OTk3NyA1NC44MDAwMDAwMDAwMDAwNyAxOC4zOTk5OTk5OTk5OTk5NzcgODEuODAwMDAwMDAwMDAwMDcgMC4xMDAwMDAwMDAwMDAwMjI3NCAyNy41OTk5OTk5OTk5OTk5MSAwLjEwMDAwMDAwMDAwMDAyMjc0IDU1LjE5OTk5OTk5OTk5OTkzIDAuMTAwMDAwMDAwMDAwMDIyNzQgODIuNzk5OTk5OTk5OTk5OTV6Ii8+Cjwvc3ZnPg==\")";
 export declare const IconReset = "url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSIxMDAwIiB3aWR0aD0iMTAwMCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgo8bWV0YWRhdGE+SWNvRm9udCBJY29uczwvbWV0YWRhdGE+Cjx0aXRsZT5yZWZyZXNoPC90aXRsZT4KPGdseXBoIGdseXBoLW5hbWU9InJlZnJlc2giIHVuaWNvZGU9IiYjeGVmZDE7IiBob3Jpei1hZHYteD0iMTAwMCIgLz4KPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTg5OS44IDU1NC42aC00Mi4xOTk5OTk5OTk5OTk5M2MtMTguODk5OTk5OTk5OTk5OTc3IDAtMzYuNSAxNS4xOTk5OTk5OTk5OTk5MzItNDEuNjAwMDAwMDAwMDAwMDIgMzMuMzk5OTk5OTk5OTk5OTgtMzguMjk5OTk5OTk5OTk5OTU1IDEzOC4zOTk5OTk5OTk5OTk5OC0xNjUuMzk5OTk5OTk5OTk5OTggMjQwLTMxNi4yIDI0MC0xMDIuODAwMDAwMDAwMDAwMDEgMC0xOTQuOC00Ny4yOTk5OTk5OTk5OTk5NTUtMjU0LjktMTIxLjYwMDAwMDAwMDAwMDAyLTExLjkwMDAwMDAwMDAwMDAwNi0xNC42OTk5OTk5OTk5OTk5MzItOC44MDAwMDAwMDAwMDAwMTEtMzggNS4wOTk5OTk5OTk5OTk5OTQtNTAuNzk5OTk5OTk5OTk5OTU1bDg0LjgwMDAwMDAwMDAwMDAxLTc3Ljg5OTk5OTk5OTk5OTk4YzEzLjg5OTk5OTk5OTk5OTk3Ny0xMi44MDAwMDAwMDAwMDAwNjggOS44OTk5OTk5OTk5OTk5NzctMjMuMTAwMDAwMDAwMDAwMDIzLTktMjMuMTAwMDAwMDAwMDAwMDIzaC0yMjkuMTAwMDAwMDAwMDAwMDJjLTE4Ljg5OTk5OTk5OTk5OTk5IDAtMzQuMTk5OTk5OTk5OTk5OTkgMTUuMjk5OTk5OTk5OTk5OTU1LTM0LjE5OTk5OTk5OTk5OTk5IDM0LjE5OTk5OTk5OTk5OTkzdjIwNS4xMDAwMDAwMDAwMDAwMmMwIDE4Ljg5OTk5OTk5OTk5OTk3NyAxMS4yOTk5OTk5OTk5OTk5OTcgMjMuODAwMDAwMDAwMDAwMDY4IDI1LjA5OTk5OTk5OTk5OTk5NCAxMWwzMC42MDAwMDAwMDAwMDAwMS0yOC4xOTk5OTk5OTk5OTk5MzJjMTMuODk5OTk5OTk5OTk5OTkxLTEyLjgwMDAwMDAwMDAwMDA2OCAzMy44OTk5OTk5OTk5OTk5OS0xMC42MDAwMDAwMDAwMDAwMjMgNDYuMTAwMDAwMDAwMDAwMDEgMy44OTk5OTk5OTk5OTk5NzczIDgwLjI5OTk5OTk5OTk5OTk4IDk1Ljg5OTk5OTk5OTk5OTk4IDIwMC44OTk5OTk5OTk5OTk5OCAxNTYuODk5OTk5OTk5OTk5OTggMzM1LjUgMTU2Ljg5OTk5OTk5OTk5OTk4IDIxMS40OTk5OTk5OTk5OTk5NCAwIDM4Ny43LTE1MCA0MjguNTk5OTk5OTk5OTk5OTctMzQ5LjIwMDAwMDAwMDAwMDA1IDMuODk5OTk5OTk5OTk5OTc3My0xOC41LTkuNjk5OTk5OTk5OTk5OTMyLTMzLjY5OTk5OTk5OTk5OTkzLTI4LjYwMDAwMDAwMDAwMDAyMy0zMy42OTk5OTk5OTk5OTk5M3ogbTEzLjUtMzU4LjQwMDAwMDAwMDAwMDAzbC0yOS44OTk5OTk5OTk5OTk5NzcgMjkuODAwMDAwMDAwMDAwMDFjLTEzLjM5OTk5OTk5OTk5OTk3NyAxMy4zMDAwMDAwMDAwMDAwMTEtMzIuNzk5OTk5OTk5OTk5OTU1IDExLjUtNDQuNzk5OTk5OTk5OTk5OTU1LTMuMDk5OTk5OTk5OTk5OTk0My04MC4yMDAwMDAwMDAwMDAwNS05Ny45LTIwMi4zMDAwMDAwMDAwMDAwNy0xNjAuNC0zMzguOC0xNjAuNC0yMTEuMTAwMDAwMDAwMDAwMDIgMC0zODcuNiAxNDkuNy00MjguMyAzNDkuMi0zLjc5OTk5OTk5OTk5OTk5NyAxOC41IDkuNzk5OTk5OTk5OTk5OTk3IDMzLjgwMDAwMDAwMDAwMDAxIDI4LjcwMDAwMDAwMDAwMDAwMyAzMy44MDAwMDAwMDAwMDAwMWg0Mi4yYzE4LjkwMDAwMDAwMDAwMDAwNiAwIDM2LjUtMTUuMTAwMDAwMDAwMDAwMDIzIDQxLjUtMzMuMzAwMDAwMDAwMDAwMDEgMzguMjk5OTk5OTk5OTk5OTgtMTM4LjggMTY1LjQtMjQwLjIgMzE1LjktMjQwLjIgMTA2LjYwMDAwMDAwMDAwMDAyIDAgMjAxLjIwMDAwMDAwMDAwMDA1IDUwLjUgMjYxLjIwMDAwMDAwMDAwMDA1IDEyOS4xMDAwMDAwMDAwMDAwMiAxMS41IDE1IDguMzk5OTk5OTk5OTk5OTc3IDM5LTQuODk5OTk5OTk5OTk5OTc3IDUyLjI5OTk5OTk5OTk5OTk1NWwtNjcuODAwMDAwMDAwMDAwMDcgNjcuOTAwMDAwMDAwMDAwMDNjLTEzLjI5OTk5OTk5OTk5OTk1NSAxMy4zOTk5OTk5OTk5OTk5NzctOC44OTk5OTk5OTk5OTk5NzcgMjQuMTk5OTk5OTk5OTk5OTkgMTAgMjQuMTk5OTk5OTk5OTk5OTloMjA1LjEwMDAwMDAwMDAwMDAyYzE4Ljg5OTk5OTk5OTk5OTk3NyAwIDM0LjIwMDAwMDAwMDAwMDA0NS0xNS4zMDAwMDAwMDAwMDAwMTEgMzQuMjAwMDAwMDAwMDAwMDQ1LTM0LjE5OTk5OTk5OTk5OTk5di0yMDUuMTAwMDAwMDAwMDAwMDJjLTAuMTAwMDAwMDAwMDAwMDIyNzQtMTguODk5OTk5OTk5OTk5OTc3LTEwLjg5OTk5OTk5OTk5OTk3Ny0yMy4zOTk5OTk5OTk5OTk5NzctMjQuMzAwMDAwMDAwMDAwMDY4LTEweiIvPgo8L3N2Zz4=\")";
+export declare const IconOverlay = "url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwMCIgd2lkdGg9IjEwMDAiPjxwYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik0xMDAgMTAwaDIwMHYyMDBoLTIwMHYtMjAweiBNNDAwIDEwMGgyMDB2MjAwaC0yMDB2LTIwMHogTTcwMCAxMDBoMjAwdjIwMGgtMjAwdi0yMDB6IE0xMDAgNDAwaDIwMHYyMDBoLTIwMHYtMjAweiBNNDAwIDQwMGgyMDB2MjAwaC0yMDB2LTIwMHogTTcwMCA0MDBoMjAwdjIwMGgtMjAwdi0yMDB6IE0xMDAgNzAwaDIwMHYyMDBoLTIwMHYtMjAweiBNNDAwIDcwMGgyMDB2MjAwaC0yMDB2LTIwMHogTTcwMCA3MDBoMjAwdjIwMGgtMjAwdi0yMDB6Ii8+PC9zdmc+\")";

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { PhotoViewer } from './components/PhotoViewer';
 export type { PhotoViewerProps } from './components/PhotoViewer';
 export { Gallery } from './components/Gallery';
-export type { ZZImage } from './types/image.type';
 export { Image } from './components/Image';
+export type { ZZImage, OverlayPosition, OverlaySize } from './types/image.type';

package/dist/index.esm.js

@@ -39,28 +39,18 @@ var IconZoomIn = "url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdG
 var IconZoomOut = "url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSIxMDAwIiB3aWR0aD0iMTAwMCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgo8bWV0YWRhdGE+SWNvRm9udCBJY29uczwvbWV0YWRhdGE+Cjx0aXRsZT51aS16b29tLW91dDwvdGl0bGU+CjxnbHlwaCBnbHlwaC1uYW1lPSJ1aS16b29tLW91dCIgdW5pY29kZT0iJiN4ZWM5ODsiIGhvcml6LWFkdi14PSIxMDAwIiAvPgo8cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNOTgyLjIgNzg4LjZsLTIzNC45MDAwMDAwMDAwMDAxLTIxNmMyNy01My41IDQyLjYwMDAwMDAwMDAwMDAyLTExMy43MDAwMDAwMDAwMDAwNSA0Mi42MDAwMDAwMDAwMDAwMi0xNzcuNzAwMDAwMDAwMDAwMDUgMC0yMTguMDk5OTk5OTk5OTk5OTctMTc2Ljg5OTk5OTk5OTk5OTk4LTM5NC45LTM5NC45LTM5NC45LTIxOC4yIDAtMzk1IDE3Ni44LTM5NSAzOTQuOSAwIDIxOC4xMDAwMDAwMDAwMDAwMiAxNzYuOCAzOTUgMzk1IDM5NSA2My44OTk5OTk5OTk5OTk5OCAwIDEyNC4xMDAwMDAwMDAwMDAwMi0xNS41IDE3Ny42MDAwMDAwMDAwMDAwMi00Mi41bDIxNS44OTk5OTk5OTk5OTk5OCAyMzQuODk5OTk5OTk5OTk5OThjMjEgMjIuOTAwMDAwMDAwMDAwMDkgNTYuMjAwMDAwMDAwMDAwMDQ1IDIzLjYwMDAwMDAwMDAwMDAyMyA3OC4yMDAwMDAwMDAwMDAwNSAxLjYwMDAwMDAwMDAwMDAyMjdsMTE3LjI5OTk5OTk5OTk5OTk1LTExNy4yOTk5OTk5OTk5OTk5NWMyMS43OTk5OTk5OTk5OTk5NTUtMjEuODAwMDAwMDAwMDAwMDY4IDIxLjEwMDAwMDAwMDAwMDAyMy01Ny0xLjc5OTk5OTk5OTk5OTk1NDUtNzh6IG0tNTg3LjItMTUyLjcwMDAwMDAwMDAwMDA1Yy0xMzMgMC0yNDAuOS0xMDcuODk5OTk5OTk5OTk5OTgtMjQwLjktMjQwLjg5OTk5OTk5OTk5OTk4czEwNy45LTI0MSAyNDAuOS0yNDFjMTMzLjEwMDAwMDAwMDAwMDAyIDAgMjQwLjg5OTk5OTk5OTk5OTk4IDEwNy44OTk5OTk5OTk5OTk5OCAyNDAuODk5OTk5OTk5OTk5OTggMjQwLjg5OTk5OTk5OTk5OTk4cy0xMDcuODk5OTk5OTk5OTk5OTggMjQxLTI0MC44OTk5OTk5OTk5OTk5OCAyNDF6IG0xMjUuMjk5OTk5OTk5OTk5OTUtMjgyLjVoLTI1My41OTk5OTk5OTk5OTk5N2MtMTIuMzk5OTk5OTk5OTk5OTc3IDAtMjIuNSAxMC4xMDAwMDAwMDAwMDAwMjMtMjIuNSAyMi42MDAwMDAwMDAwMDAwMjN2MjkuNWMwIDEyLjM5OTk5OTk5OTk5OTk3NyAxMC4xMDAwMDAwMDAwMDAwMjMgMjIuNjAwMDAwMDAwMDAwMDIzIDIyLjUgMjIuNjAwMDAwMDAwMDAwMDIzaDI1My41OTk5OTk5OTk5OTk5N2MxMi40MDAwMDAwMDAwMDAwOTEgMCAyMi41LTEwLjEwMDAwMDAwMDAwMDAyMyAyMi41LTIyLjYwMDAwMDAwMDAwMDAyM3YtMjkuNWMwLTEyLjM5OTk5OTk5OTk5OTk3Ny0xMC4wOTk5OTk5OTk5OTk5MDktMjIuNjAwMDAwMDAwMDAwMDIzLTIyLjUtMjIuNjAwMDAwMDAwMDAwMDIzeiIvPgo8L3N2Zz4=\")";
 var IconRotate = "url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSIxMDAwIiB3aWR0aD0iMTAwMCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgo8bWV0YWRhdGE+SWNvRm9udCBJY29uczwvbWV0YWRhdGE+Cjx0aXRsZT51bmRvPC90aXRsZT4KPGdseXBoIGdseXBoLW5hbWU9InVuZG8iIHVuaWNvZGU9IiYjeGVlMGI7IiBob3Jpei1hZHYteD0iMTAwMCIgLz4KPHBhdGggIGZpbGw9IiNmZmZmZmYiIGQ9Ik04OTguMSA2NTVjLTcuMjAwMDAwMDAwMDAwMDQ1NSAyOS41LTExLjM5OTk5OTk5OTk5OTk3NyA1OS43MDAwMDAwMDAwMDAwNDUtMjEuNzAwMDAwMDAwMDAwMDQ1IDg4LjUtNTMuMzk5OTk5OTk5OTk5OTggMTUwLjcwMDAwMDAwMDAwMDA1LTIwMCAyNTUuODk5OTk5OTk5OTk5OTgtMzU4LjI5OTk5OTk5OTk5OTk1IDI1Ni41LTQxLjcwMDAwMDAwMDAwMDA0NSAwLjEwMDAwMDAwMDAwMDAyMjc0LTc2LjMwMDAwMDAwMDAwMDAxLTI4Ljg5OTk5OTk5OTk5OTk3Ny04MC40MDAwMDAwMDAwMDAwMy02Ny4zOTk5OTk5OTk5OTk5OC00LjM5OTk5OTk5OTk5OTk3Ny00MC44OTk5OTk5OTk5OTk5OCAyMC45MDAwMDAwMDAwMDAwMzQtNzcuODk5OTk5OTk5OTk5OTggNjAuNjAwMDAwMDAwMDAwMDItODUuMTAwMDAwMDAwMDAwMDIgMjIuODAwMDAwMDAwMDAwMDEtNC4xMDAwMDAwMDAwMDAwMjMgNDYuNjk5OTk5OTk5OTk5OTktMi4yOTk5OTk5OTk5OTk5NTQ1IDY5LjQwMDAwMDAwMDAwMDAzLTguNSA5Mi4wOTk5OTk5OTk5OTk5MS0yNS4yMDAwMDAwMDAwMDAwNDUgMTUzLTg0IDE3MC43OTk5OTk5OTk5OTk5NS0xNzcuMjk5OTk5OTk5OTk5OTUgMTguODk5OTk5OTk5OTk5OTc3LTk4LjMwMDAwMDAwMDAwMDA3LTkuNS0xODQuMDAwMDAwMDAwMDAwMDYtOTIuMjAwMDAwMDAwMDAwMDUtMjQ2LjQwMDAwMDAwMDAwMDAzLTIzLjM5OTk5OTk5OTk5OTk3Ny0xNy42MDAwMDAwMDAwMDAwMjMtNTAuODk5OTk5OTk5OTk5OTgtMjguMTk5OTk5OTk5OTk5OTktODAtMjktNTYuMTk5OTk5OTk5OTk5OTMtMS41LTExMi4zOTk5OTk5OTk5OTk5OC0wLjQwMDAwMDAwMDAwMDAzNDEtMTY5LjA5OTk5OTk5OTk5OTk3LTAuNDAwMDAwMDAwMDAwMDM0MSAwLjQwMDAwMDAwMDAwMDAzNDEgNy41IDYuNSAxMC4yMDAwMDAwMDAwMDAwNDUgMTAuNDAwMDAwMDAwMDAwMDM0IDE0LjEwMDAwMDAwMDAwMDAyMyAyNy43OTk5OTk5OTk5OTk5NTUgMjguMTAwMDAwMDAwMDAwMDIzIDU2LjM5OTk5OTk5OTk5OTk4IDU1LjYwMDAwMDAwMDAwMDAyIDgzLjc5OTk5OTk5OTk5OTk1IDg0LjEwMDAwMDAwMDAwMDAyIDMxIDMyLjEwMDAwMDAwMDAwMDAyIDMwLjUgNzkuMjk5OTk5OTk5OTk5OTUtMC4wOTk5OTk5OTk5OTk5NjU5IDEwOS42OTk5OTk5OTk5OTk5My0yOS44MDAwMDAwMDAwMDAwMSAyOS42MDAwMDAwMDAwMDAwMjMtNzcuMTAwMDAwMDAwMDAwMDIgMzAuMjAwMDAwMDAwMDAwMDQ1LTEwOC4zMDAwMDAwMDAwMDAwMS0wLjY5OTk5OTk5OTk5OTkzMTgtOTIuNS05MS43MDAwMDAwMDAwMDAwNS0xODQuMi0xODQuMTAwMDAwMDAwMDAwMDItMjc2LjQtMjc1LjkwMDAwMDAwMDAwMDAzLTcuNTAwMDAwMDAwMDAwMDI4LTcuNS02LjIwMDAwMDAwMDAwMDAxNy0xMS4zOTk5OTk5OTk5OTk5NzcgMC42OTk5OTk5OTk5OTk5NzQ0LTE4LjMwMDAwMDAwMDAwMDAxIDkxLjgtOTEuMjk5OTk5OTk5OTk5OTggMTgzLjM5OTk5OTk5OTk5OTk4LTE4Mi44OTk5OTk5OTk5OTk5OCAyNzQuNy0yNzQuNyAxMS44MDAwMDAwMDAwMDAwMTEtMTEuODk5OTk5OTk5OTk5OTg4IDI3LTE2LjY5OTk5OTk5OTk5OTk5IDQxLTI0LjE5OTk5OTk5OTk5OTk5aDI4LjgwMDAwMDAwMDAwMDAxYzEuMzk5OTk5OTk5OTk5OTc3MyAzLjQgNC41OTk5OTk5OTk5OTk5NjYgMy4xIDcuMzk5OTk5OTk5OTk5OTc3IDQuMSA1OC4xOTk5OTk5OTk5OTk5OSAyMC41IDczLjY5OTk5OTk5OTk5OTk5IDg1LjUgMzAuOTAwMDAwMDAwMDAwMDM0IDEzMC05LjUgOS45MDAwMDAwMDAwMDAwMDYtMTkuNSAxOS41LTI5LjMwMDAwMDAwMDAwMDAxIDI5LjIwMDAwMDAwMDAwMDAxNy0yMS41IDIxLjE5OTk5OTk5OTk5OTk5LTQzIDQyLjUtNjguMzAwMDAwMDAwMDAwMDEgNjcuMzk5OTk5OTk5OTk5OThoMjMuMTAwMDAwMDAwMDAwMDIzYzQ3LjM5OTk5OTk5OTk5OTk4IDAgOTQuNjk5OTk5OTk5OTk5OTktMC4zOTk5OTk5OTk5OTk5NzcyNiAxNDIuMTAwMDAwMDAwMDAwMDIgMC4zMDAwMDAwMDAwMDAwMTEzNyAzNC44OTk5OTk5OTk5OTk5OCAwLjU5OTk5OTk5OTk5OTk5NDMgNjkuMTk5OTk5OTk5OTk5OTMgNi41IDEwMS43OTk5OTk5OTk5OTk5NSAxOS4wOTk5OTk5OTk5OTk5OTQgMTEzLjEwMDAwMDAwMDAwMDAyIDQzLjU5OTk5OTk5OTk5OTk5NCAxODIuMzk5OTk5OTk5OTk5OTggMTI3LjUwMDAwMDAwMDAwMDAzIDIyMC4xMDAwMDAwMDAwMDAwMiAyNDAuMjk5OTk5OTk5OTk5OTggOC44OTk5OTk5OTk5OTk5NzcgMjYuNzAwMDAwMDAwMDAwMDQ1IDExLjM5OTk5OTk5OTk5OTk3NyA1NC44MDAwMDAwMDAwMDAwNyAxOC4zOTk5OTk5OTk5OTk5NzcgODEuODAwMDAwMDAwMDAwMDcgMC4xMDAwMDAwMDAwMDAwMjI3NCAyNy41OTk5OTk5OTk5OTk5MSAwLjEwMDAwMDAwMDAwMDAyMjc0IDU1LjE5OTk5OTk5OTk5OTkzIDAuMTAwMDAwMDAwMDAwMDIyNzQgODIuNzk5OTk5OTk5OTk5OTV6Ii8+Cjwvc3ZnPg==\")";
 var IconReset = "url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSIxMDAwIiB3aWR0aD0iMTAwMCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgo8bWV0YWRhdGE+SWNvRm9udCBJY29uczwvbWV0YWRhdGE+Cjx0aXRsZT5yZWZyZXNoPC90aXRsZT4KPGdseXBoIGdseXBoLW5hbWU9InJlZnJlc2giIHVuaWNvZGU9IiYjeGVmZDE7IiBob3Jpei1hZHYteD0iMTAwMCIgLz4KPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTg5OS44IDU1NC42aC00Mi4xOTk5OTk5OTk5OTk5M2MtMTguODk5OTk5OTk5OTk5OTc3IDAtMzYuNSAxNS4xOTk5OTk5OTk5OTk5MzItNDEuNjAwMDAwMDAwMDAwMDIgMzMuMzk5OTk5OTk5OTk5OTgtMzguMjk5OTk5OTk5OTk5OTU1IDEzOC4zOTk5OTk5OTk5OTk5OC0xNjUuMzk5OTk5OTk5OTk5OTggMjQwLTMxNi4yIDI0MC0xMDIuODAwMDAwMDAwMDAwMDEgMC0xOTQuOC00Ny4yOTk5OTk5OTk5OTk5NTUtMjU0LjktMTIxLjYwMDAwMDAwMDAwMDAyLTExLjkwMDAwMDAwMDAwMDAwNi0xNC42OTk5OTk5OTk5OTk5MzItOC44MDAwMDAwMDAwMDAwMTEtMzggNS4wOTk5OTk5OTk5OTk5OTQtNTAuNzk5OTk5OTk5OTk5OTU1bDg0LjgwMDAwMDAwMDAwMDAxLTc3Ljg5OTk5OTk5OTk5OTk4YzEzLjg5OTk5OTk5OTk5OTk3Ny0xMi44MDAwMDAwMDAwMDAwNjggOS44OTk5OTk5OTk5OTk5NzctMjMuMTAwMDAwMDAwMDAwMDIzLTktMjMuMTAwMDAwMDAwMDAwMDIzaC0yMjkuMTAwMDAwMDAwMDAwMDJjLTE4Ljg5OTk5OTk5OTk5OTk5IDAtMzQuMTk5OTk5OTk5OTk5OTkgMTUuMjk5OTk5OTk5OTk5OTU1LTM0LjE5OTk5OTk5OTk5OTk5IDM0LjE5OTk5OTk5OTk5OTkzdjIwNS4xMDAwMDAwMDAwMDAwMmMwIDE4Ljg5OTk5OTk5OTk5OTk3NyAxMS4yOTk5OTk5OTk5OTk5OTcgMjMuODAwMDAwMDAwMDAwMDY4IDI1LjA5OTk5OTk5OTk5OTk5NCAxMWwzMC42MDAwMDAwMDAwMDAwMS0yOC4xOTk5OTk5OTk5OTk5MzJjMTMuODk5OTk5OTk5OTk5OTkxLTEyLjgwMDAwMDAwMDAwMDA2OCAzMy44OTk5OTk5OTk5OTk5OS0xMC42MDAwMDAwMDAwMDAwMjMgNDYuMTAwMDAwMDAwMDAwMDEgMy44OTk5OTk5OTk5OTk5NzczIDgwLjI5OTk5OTk5OTk5OTk4IDk1Ljg5OTk5OTk5OTk5OTk4IDIwMC44OTk5OTk5OTk5OTk5OCAxNTYuODk5OTk5OTk5OTk5OTggMzM1LjUgMTU2Ljg5OTk5OTk5OTk5OTk4IDIxMS40OTk5OTk5OTk5OTk5NCAwIDM4Ny43LTE1MCA0MjguNTk5OTk5OTk5OTk5OTctMzQ5LjIwMDAwMDAwMDAwMDA1IDMuODk5OTk5OTk5OTk5OTc3My0xOC41LTkuNjk5OTk5OTk5OTk5OTMyLTMzLjY5OTk5OTk5OTk5OTkzLTI4LjYwMDAwMDAwMDAwMDAyMy0zMy42OTk5OTk5OTk5OTk5M3ogbTEzLjUtMzU4LjQwMDAwMDAwMDAwMDAzbC0yOS44OTk5OTk5OTk5OTk5NzcgMjkuODAwMDAwMDAwMDAwMDFjLTEzLjM5OTk5OTk5OTk5OTk3NyAxMy4zMDAwMDAwMDAwMDAwMTEtMzIuNzk5OTk5OTk5OTk5OTU1IDExLjUtNDQuNzk5OTk5OTk5OTk5OTU1LTMuMDk5OTk5OTk5OTk5OTk0My04MC4yMDAwMDAwMDAwMDAwNS05Ny45LTIwMi4zMDAwMDAwMDAwMDAwNy0xNjAuNC0zMzguOC0xNjAuNC0yMTEuMTAwMDAwMDAwMDAwMDIgMC0zODcuNiAxNDkuNy00MjguMyAzNDkuMi0zLjc5OTk5OTk5OTk5OTk5NyAxOC41IDkuNzk5OTk5OTk5OTk5OTk3IDMzLjgwMDAwMDAwMDAwMDAxIDI4LjcwMDAwMDAwMDAwMDAwMyAzMy44MDAwMDAwMDAwMDAwMWg0Mi4yYzE4LjkwMDAwMDAwMDAwMDAwNiAwIDM2LjUtMTUuMTAwMDAwMDAwMDAwMDIzIDQxLjUtMzMuMzAwMDAwMDAwMDAwMDEgMzguMjk5OTk5OTk5OTk5OTgtMTM4LjggMTY1LjQtMjQwLjIgMzE1LjktMjQwLjIgMTA2LjYwMDAwMDAwMDAwMDAyIDAgMjAxLjIwMDAwMDAwMDAwMDA1IDUwLjUgMjYxLjIwMDAwMDAwMDAwMDA1IDEyOS4xMDAwMDAwMDAwMDAwMiAxMS41IDE1IDguMzk5OTk5OTk5OTk5OTc3IDM5LTQuODk5OTk5OTk5OTk5OTc3IDUyLjI5OTk5OTk5OTk5OTk1NWwtNjcuODAwMDAwMDAwMDAwMDcgNjcuOTAwMDAwMDAwMDAwMDNjLTEzLjI5OTk5OTk5OTk5OTk1NSAxMy4zOTk5OTk5OTk5OTk5NzctOC44OTk5OTk5OTk5OTk5NzcgMjQuMTk5OTk5OTk5OTk5OTkgMTAgMjQuMTk5OTk5OTk5OTk5OTloMjA1LjEwMDAwMDAwMDAwMDAyYzE4Ljg5OTk5OTk5OTk5OTk3NyAwIDM0LjIwMDAwMDAwMDAwMDA0NS0xNS4zMDAwMDAwMDAwMDAwMTEgMzQuMjAwMDAwMDAwMDAwMDQ1LTM0LjE5OTk5OTk5OTk5OTk5di0yMDUuMTAwMDAwMDAwMDAwMDJjLTAuMTAwMDAwMDAwMDAwMDIyNzQtMTguODk5OTk5OTk5OTk5OTc3LTEwLjg5OTk5OTk5OTk5OTk3Ny0yMy4zOTk5OTk5OTk5OTk5NzctMjQuMzAwMDAwMDAwMDAwMDY4LTEweiIvPgo8L3N2Zz4=\")";
+var IconOverlay = "url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwMCIgd2lkdGg9IjEwMDAiPjxwYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik0xMDAgMTAwaDIwMHYyMDBoLTIwMHYtMjAweiBNNDAwIDEwMGgyMDB2MjAwaC0yMDB2LTIwMHogTTcwMCAxMDBoMjAwdjIwMGgtMjAwdi0yMDB6IE0xMDAgNDAwaDIwMHYyMDBoLTIwMHYtMjAweiBNNDAwIDQwMGgyMDB2MjAwaC0yMDB2LTIwMHogTTcwMCA0MDBoMjAwdjIwMGgtMjAwdi0yMDB6IE0xMDAgNzAwaDIwMHYyMDBoLTIwMHYtMjAweiBNNDAwIDcwMGgyMDB2MjAwaC0yMDB2LTIwMHogTTcwMCA3MDBoMjAwdjIwMGgtMjAwdi0yMDB6Ii8+PC9zdmc+\")";
 
 var NavigationActionButton = function (_a) {
-    var icon = _a.icon, onClick = _a.onClick, transform = _a.transform;
-    return (React.createElement("div", { className: "nav-action-button", style: {
-            width: '12px',
-            height: '12px',
-            backgroundImage: icon,
-            backgroundSize: 'contain',
-            backgroundRepeat: 'no-repeat',
-            cursor: 'pointer',
-            transform: transform,
-            transition: 'all 0.2s ease-in-out',
-            borderRadius: '4px',
-            padding: '4px',
-        }, onClick: onClick }));
+    var icon = _a.icon, onClick = _a.onClick, transform = _a.transform, customStyle = _a.style;
+    return (React.createElement("div", { className: "nav-action-button", style: __assign({ width: '12px', height: '12px', backgroundImage: icon, backgroundSize: 'contain', backgroundRepeat: 'no-repeat', cursor: 'pointer', transform: transform, transition: 'all 0.2s ease-in-out', borderRadius: '4px', padding: '4px' }, customStyle), onClick: onClick }));
 };
 var style = document.createElement('style');
 style.textContent = "\n  .nav-action-button:hover {\n    transform: scale(1.2);\n    background-color: rgba(0, 0, 0, 0.05);\n  }\n";
 document.head.appendChild(style);
 
 var Navigation = function (_a) {
-    var title = _a.title, onClose = _a.onClose, onZoomIn = _a.onZoomIn, onZoomOut = _a.onZoomOut, onRotate = _a.onRotate, onReset = _a.onReset, onNext = _a.onNext, onPrevious = _a.onPrevious, _b = _a.showControls, showControls = _b === void 0 ? true : _b;
+    var title = _a.title, onClose = _a.onClose, onZoomIn = _a.onZoomIn, onZoomOut = _a.onZoomOut, onRotate = _a.onRotate, onReset = _a.onReset, onNext = _a.onNext, onPrevious = _a.onPrevious, onToggleOverlay = _a.onToggleOverlay, _b = _a.showOverlay, showOverlay = _b === void 0 ? false : _b, _c = _a.showControls, showControls = _c === void 0 ? true : _c;
     return (React.createElement("div", { className: "photo-viewer-navigation", style: {
             position: 'fixed',
             bottom: 30,
@@ -86,9 +76,126 @@ var Navigation = function (_a) {
             onZoomIn && React.createElement(NavigationActionButton, { icon: IconZoomIn, onClick: onZoomIn }),
             onRotate && React.createElement(NavigationActionButton, { icon: IconRotate, onClick: function () { return onRotate('left'); } }),
             onRotate && (React.createElement(NavigationActionButton, { icon: IconRotate, onClick: function () { return onRotate('right'); }, transform: "rotateY(180deg)" })),
+            onToggleOverlay && (React.createElement(NavigationActionButton, { icon: IconOverlay, onClick: onToggleOverlay, style: showOverlay ? { backgroundColor: 'rgba(255, 255, 255, 0.2)' } : undefined })),
             onClose && React.createElement(NavigationActionButton, { icon: IconClose, onClick: onClose }))));
 };
 
+var ImageOverlay = function (_a) {
+    var overlay = _a.overlay, _b = _a.position, position = _b === void 0 ? 'center' : _b, _c = _a.size, size = _c === void 0 ? {} : _c;
+    // Calculate position styles
+    var getPositionStyles = function (pos) {
+        var styles = {};
+        switch (pos) {
+            case 'center':
+                styles.top = '50%';
+                styles.left = '50%';
+                styles.transform = 'translate(-50%, -50%)';
+                styles.display = 'flex';
+                styles.alignItems = 'center';
+                styles.justifyContent = 'center';
+                break;
+            case 'top-left':
+                styles.top = 0;
+                styles.left = 0;
+                break;
+            case 'top-right':
+                styles.top = 0;
+                styles.right = 0;
+                break;
+            case 'bottom-left':
+                styles.bottom = 0;
+                styles.left = 0;
+                break;
+            case 'bottom-right':
+                styles.bottom = 0;
+                styles.right = 0;
+                break;
+            case 'top':
+                styles.top = 0;
+                styles.left = '50%';
+                styles.transform = 'translateX(-50%)';
+                break;
+            case 'bottom':
+                styles.bottom = 0;
+                styles.left = '50%';
+                styles.transform = 'translateX(-50%)';
+                break;
+            case 'left':
+                styles.top = '50%';
+                styles.left = 0;
+                styles.transform = 'translateY(-50%)';
+                break;
+            case 'right':
+                styles.top = '50%';
+                styles.right = 0;
+                styles.transform = 'translateY(-50%)';
+                break;
+        }
+        return styles;
+    };
+    // Calculate size styles
+    var getSizeStyles = function () {
+        var sizeStyles = {};
+        if (size.maxWidth !== undefined) {
+            sizeStyles.maxWidth = typeof size.maxWidth === 'number' ? "".concat(size.maxWidth, "px") : size.maxWidth;
+        }
+        if (size.maxHeight !== undefined) {
+            sizeStyles.maxHeight = typeof size.maxHeight === 'number' ? "".concat(size.maxHeight, "px") : size.maxHeight;
+        }
+        if (size.width !== undefined) {
+            sizeStyles.width = typeof size.width === 'number' ? "".concat(size.width, "px") : size.width;
+        }
+        if (size.height !== undefined) {
+            sizeStyles.height = typeof size.height === 'number' ? "".concat(size.height, "px") : size.height;
+        }
+        // Keep aspect ratio if only one dimension is specified
+        if (size.width && !size.height) {
+            sizeStyles.height = 'auto';
+        }
+        else if (size.height && !size.width) {
+            sizeStyles.width = 'auto';
+        }
+        // If maxWidth or maxHeight is set, ensure aspect ratio is maintained
+        if (size.maxWidth && !size.maxHeight && !size.width && !size.height) {
+            sizeStyles.height = 'auto';
+        }
+        else if (size.maxHeight && !size.maxWidth && !size.width && !size.height) {
+            sizeStyles.width = 'auto';
+        }
+        return sizeStyles;
+    };
+    var positionStyles = getPositionStyles(position);
+    var sizeStyles = getSizeStyles();
+    // If no size is specified, assume the overlay should cover the full image
+    var hasSizeConstraints = size.maxWidth !== undefined ||
+        size.maxHeight !== undefined ||
+        size.width !== undefined ||
+        size.height !== undefined;
+    var shouldCoverFullImage = !hasSizeConstraints;
+    // Check if overlay is a URL string
+    var isUrlOverlay = typeof overlay === 'string';
+    return (React.createElement("div", { style: {
+            position: 'absolute',
+            pointerEvents: 'none',
+            top: shouldCoverFullImage ? 0 : positionStyles.top,
+            left: shouldCoverFullImage ? 0 : positionStyles.left,
+            right: shouldCoverFullImage ? 0 : positionStyles.right,
+            bottom: shouldCoverFullImage ? 0 : positionStyles.bottom,
+            width: shouldCoverFullImage ? '100%' : sizeStyles.width,
+            height: shouldCoverFullImage ? '100%' : sizeStyles.height,
+            maxWidth: shouldCoverFullImage ? undefined : sizeStyles.maxWidth,
+            maxHeight: shouldCoverFullImage ? undefined : sizeStyles.maxHeight,
+            transform: shouldCoverFullImage ? undefined : positionStyles.transform,
+            display: shouldCoverFullImage ? 'block' : positionStyles.display,
+            alignItems: positionStyles.alignItems,
+            justifyContent: positionStyles.justifyContent,
+        } }, isUrlOverlay ? (React.createElement("img", { src: overlay, alt: "Overlay", style: {
+            width: '100%',
+            height: '100%',
+            objectFit: 'contain',
+        } })) : (overlay)));
+};
+
 var DEFAULT_ZOOM_STEP = 0.3;
 var DEFAULT_LARGE_ZOOM = 4;
 var defaultSettings = {
@@ -109,13 +216,15 @@ var PhotoViewer = function (_a) {
     var _c = useState(1), zoom = _c[0], setZoom = _c[1];
     var _d = useState(0), rotationCount = _d[0], setRotationCount = _d[1];
     var _e = useState(false), isHovered = _e[0], setIsHovered = _e[1];
+    var _f = useState(false), showOverlay = _f[0], setShowOverlay = _f[1];
     var containerRef = useRef(null);
     var imageRef = useRef(null);
-    var _f = useState(selectedImage), currentSelectedImage = _f[0], setCurrentSelectedImage = _f[1];
+    var _g = useState(selectedImage), currentSelectedImage = _g[0], setCurrentSelectedImage = _g[1];
     useEffect(function () {
         setCurrentSelectedImage(selectedImage);
         setZoom(1);
         setRotationCount(0);
+        setShowOverlay(false);
     }, [selectedImage]);
     var handleNext = useCallback(function () {
         var currentImageIndex = images.findIndex(function (img) { return img.id === (currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.id); });
@@ -125,6 +234,7 @@ var PhotoViewer = function (_a) {
             setCurrentSelectedImage(nextImage);
             setZoom(1);
             setRotationCount(0);
+            setShowOverlay(false);
             onImageChange === null || onImageChange === void 0 ? void 0 : onImageChange(nextImage);
         }
     }, [images, currentSelectedImage, onImageChange]);
@@ -136,6 +246,7 @@ var PhotoViewer = function (_a) {
             setCurrentSelectedImage(prevImage);
             setZoom(1);
             setRotationCount(0);
+            setShowOverlay(false);
             onImageChange === null || onImageChange === void 0 ? void 0 : onImageChange(prevImage);
         }
     }, [images, currentSelectedImage, onImageChange]);
@@ -233,7 +344,7 @@ var PhotoViewer = function (_a) {
             justifyContent: 'center',
             zIndex: 1000,
         }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
-        React.createElement(Navigation, { title: (currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.title) || 'Photo Viewer', onClose: onClose, onNext: images.length > 1 ? handleNext : undefined, onPrevious: images.length > 1 ? handlePrevious : undefined, onZoomIn: allowZoom ? function () { return handleZoom(zoom + zoomStep); } : undefined, onZoomOut: allowZoom ? function () { return handleZoom(zoom - zoomStep); } : undefined, onRotate: allowRotate ? handleRotate : undefined, onReset: zoom !== 1 || rotationCount !== 0 ? handleReset : undefined, showControls: isHovered }),
+        React.createElement(Navigation, { title: (currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.title) || 'Photo Viewer', onClose: onClose, onNext: images.length > 1 ? handleNext : undefined, onPrevious: images.length > 1 ? handlePrevious : undefined, onZoomIn: allowZoom ? function () { return handleZoom(zoom + zoomStep); } : undefined, onZoomOut: allowZoom ? function () { return handleZoom(zoom - zoomStep); } : undefined, onRotate: allowRotate ? handleRotate : undefined, onReset: zoom !== 1 || rotationCount !== 0 ? handleReset : undefined, onToggleOverlay: (currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.svgOverlay) ? function () { return setShowOverlay(!showOverlay); } : undefined, showOverlay: showOverlay, showControls: isHovered }),
         React.createElement("div", { style: {
                 position: 'relative',
                 width: '100%',
@@ -242,15 +353,20 @@ var PhotoViewer = function (_a) {
                 alignItems: 'center',
                 justifyContent: 'center',
             } },
-            React.createElement("img", { ref: imageRef, src: currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.src, alt: (currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.alt) || '', onDoubleClick: handleDoubleClick, style: {
-                    maxWidth: '80%',
-                    maxHeight: '80%',
-                    minHeight: '80%',
-                    objectFit: 'contain',
+            React.createElement("div", { style: {
+                    position: 'relative',
                     transform: "scale(".concat(zoom, ") rotateZ(").concat(rotationCount * 90, "deg)"),
                     transformOrigin: 'center',
                     transition: 'transform 0.2s ease',
-                } }))));
+                    display: 'inline-block',
+                } },
+                React.createElement("img", { ref: imageRef, src: currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.src, alt: (currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.alt) || '', onDoubleClick: handleDoubleClick, style: {
+                        maxWidth: '80vw',
+                        maxHeight: '80vh',
+                        objectFit: 'contain',
+                        display: 'block',
+                    } }),
+                showOverlay && (currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.svgOverlay) && (React.createElement(ImageOverlay, { overlay: currentSelectedImage.svgOverlay, position: currentSelectedImage.overlayPosition, size: currentSelectedImage.overlaySize }))))));
 };
 
 var Image = function (_a) {

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -41,28 +41,18 @@ var IconZoomIn = "url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdG
 var IconZoomOut = "url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSIxMDAwIiB3aWR0aD0iMTAwMCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgo8bWV0YWRhdGE+SWNvRm9udCBJY29uczwvbWV0YWRhdGE+Cjx0aXRsZT51aS16b29tLW91dDwvdGl0bGU+CjxnbHlwaCBnbHlwaC1uYW1lPSJ1aS16b29tLW91dCIgdW5pY29kZT0iJiN4ZWM5ODsiIGhvcml6LWFkdi14PSIxMDAwIiAvPgo8cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNOTgyLjIgNzg4LjZsLTIzNC45MDAwMDAwMDAwMDAxLTIxNmMyNy01My41IDQyLjYwMDAwMDAwMDAwMDAyLTExMy43MDAwMDAwMDAwMDAwNSA0Mi42MDAwMDAwMDAwMDAwMi0xNzcuNzAwMDAwMDAwMDAwMDUgMC0yMTguMDk5OTk5OTk5OTk5OTctMTc2Ljg5OTk5OTk5OTk5OTk4LTM5NC45LTM5NC45LTM5NC45LTIxOC4yIDAtMzk1IDE3Ni44LTM5NSAzOTQuOSAwIDIxOC4xMDAwMDAwMDAwMDAwMiAxNzYuOCAzOTUgMzk1IDM5NSA2My44OTk5OTk5OTk5OTk5OCAwIDEyNC4xMDAwMDAwMDAwMDAwMi0xNS41IDE3Ny42MDAwMDAwMDAwMDAwMi00Mi41bDIxNS44OTk5OTk5OTk5OTk5OCAyMzQuODk5OTk5OTk5OTk5OThjMjEgMjIuOTAwMDAwMDAwMDAwMDkgNTYuMjAwMDAwMDAwMDAwMDQ1IDIzLjYwMDAwMDAwMDAwMDAyMyA3OC4yMDAwMDAwMDAwMDAwNSAxLjYwMDAwMDAwMDAwMDAyMjdsMTE3LjI5OTk5OTk5OTk5OTk1LTExNy4yOTk5OTk5OTk5OTk5NWMyMS43OTk5OTk5OTk5OTk5NTUtMjEuODAwMDAwMDAwMDAwMDY4IDIxLjEwMDAwMDAwMDAwMDAyMy01Ny0xLjc5OTk5OTk5OTk5OTk1NDUtNzh6IG0tNTg3LjItMTUyLjcwMDAwMDAwMDAwMDA1Yy0xMzMgMC0yNDAuOS0xMDcuODk5OTk5OTk5OTk5OTgtMjQwLjktMjQwLjg5OTk5OTk5OTk5OTk4czEwNy45LTI0MSAyNDAuOS0yNDFjMTMzLjEwMDAwMDAwMDAwMDAyIDAgMjQwLjg5OTk5OTk5OTk5OTk4IDEwNy44OTk5OTk5OTk5OTk5OCAyNDAuODk5OTk5OTk5OTk5OTggMjQwLjg5OTk5OTk5OTk5OTk4cy0xMDcuODk5OTk5OTk5OTk5OTggMjQxLTI0MC44OTk5OTk5OTk5OTk5OCAyNDF6IG0xMjUuMjk5OTk5OTk5OTk5OTUtMjgyLjVoLTI1My41OTk5OTk5OTk5OTk5N2MtMTIuMzk5OTk5OTk5OTk5OTc3IDAtMjIuNSAxMC4xMDAwMDAwMDAwMDAwMjMtMjIuNSAyMi42MDAwMDAwMDAwMDAwMjN2MjkuNWMwIDEyLjM5OTk5OTk5OTk5OTk3NyAxMC4xMDAwMDAwMDAwMDAwMjMgMjIuNjAwMDAwMDAwMDAwMDIzIDIyLjUgMjIuNjAwMDAwMDAwMDAwMDIzaDI1My41OTk5OTk5OTk5OTk5N2MxMi40MDAwMDAwMDAwMDAwOTEgMCAyMi41LTEwLjEwMDAwMDAwMDAwMDAyMyAyMi41LTIyLjYwMDAwMDAwMDAwMDAyM3YtMjkuNWMwLTEyLjM5OTk5OTk5OTk5OTk3Ny0xMC4wOTk5OTk5OTk5OTk5MDktMjIuNjAwMDAwMDAwMDAwMDIzLTIyLjUtMjIuNjAwMDAwMDAwMDAwMDIzeiIvPgo8L3N2Zz4=\")";
 var IconRotate = "url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSIxMDAwIiB3aWR0aD0iMTAwMCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgo8bWV0YWRhdGE+SWNvRm9udCBJY29uczwvbWV0YWRhdGE+Cjx0aXRsZT51bmRvPC90aXRsZT4KPGdseXBoIGdseXBoLW5hbWU9InVuZG8iIHVuaWNvZGU9IiYjeGVlMGI7IiBob3Jpei1hZHYteD0iMTAwMCIgLz4KPHBhdGggIGZpbGw9IiNmZmZmZmYiIGQ9Ik04OTguMSA2NTVjLTcuMjAwMDAwMDAwMDAwMDQ1NSAyOS41LTExLjM5OTk5OTk5OTk5OTk3NyA1OS43MDAwMDAwMDAwMDAwNDUtMjEuNzAwMDAwMDAwMDAwMDQ1IDg4LjUtNTMuMzk5OTk5OTk5OTk5OTggMTUwLjcwMDAwMDAwMDAwMDA1LTIwMCAyNTUuODk5OTk5OTk5OTk5OTgtMzU4LjI5OTk5OTk5OTk5OTk1IDI1Ni41LTQxLjcwMDAwMDAwMDAwMDA0NSAwLjEwMDAwMDAwMDAwMDAyMjc0LTc2LjMwMDAwMDAwMDAwMDAxLTI4Ljg5OTk5OTk5OTk5OTk3Ny04MC40MDAwMDAwMDAwMDAwMy02Ny4zOTk5OTk5OTk5OTk5OC00LjM5OTk5OTk5OTk5OTk3Ny00MC44OTk5OTk5OTk5OTk5OCAyMC45MDAwMDAwMDAwMDAwMzQtNzcuODk5OTk5OTk5OTk5OTggNjAuNjAwMDAwMDAwMDAwMDItODUuMTAwMDAwMDAwMDAwMDIgMjIuODAwMDAwMDAwMDAwMDEtNC4xMDAwMDAwMDAwMDAwMjMgNDYuNjk5OTk5OTk5OTk5OTktMi4yOTk5OTk5OTk5OTk5NTQ1IDY5LjQwMDAwMDAwMDAwMDAzLTguNSA5Mi4wOTk5OTk5OTk5OTk5MS0yNS4yMDAwMDAwMDAwMDAwNDUgMTUzLTg0IDE3MC43OTk5OTk5OTk5OTk5NS0xNzcuMjk5OTk5OTk5OTk5OTUgMTguODk5OTk5OTk5OTk5OTc3LTk4LjMwMDAwMDAwMDAwMDA3LTkuNS0xODQuMDAwMDAwMDAwMDAwMDYtOTIuMjAwMDAwMDAwMDAwMDUtMjQ2LjQwMDAwMDAwMDAwMDAzLTIzLjM5OTk5OTk5OTk5OTk3Ny0xNy42MDAwMDAwMDAwMDAwMjMtNTAuODk5OTk5OTk5OTk5OTgtMjguMTk5OTk5OTk5OTk5OTktODAtMjktNTYuMTk5OTk5OTk5OTk5OTMtMS41LTExMi4zOTk5OTk5OTk5OTk5OC0wLjQwMDAwMDAwMDAwMDAzNDEtMTY5LjA5OTk5OTk5OTk5OTk3LTAuNDAwMDAwMDAwMDAwMDM0MSAwLjQwMDAwMDAwMDAwMDAzNDEgNy41IDYuNSAxMC4yMDAwMDAwMDAwMDAwNDUgMTAuNDAwMDAwMDAwMDAwMDM0IDE0LjEwMDAwMDAwMDAwMDAyMyAyNy43OTk5OTk5OTk5OTk5NTUgMjguMTAwMDAwMDAwMDAwMDIzIDU2LjM5OTk5OTk5OTk5OTk4IDU1LjYwMDAwMDAwMDAwMDAyIDgzLjc5OTk5OTk5OTk5OTk1IDg0LjEwMDAwMDAwMDAwMDAyIDMxIDMyLjEwMDAwMDAwMDAwMDAyIDMwLjUgNzkuMjk5OTk5OTk5OTk5OTUtMC4wOTk5OTk5OTk5OTk5NjU5IDEwOS42OTk5OTk5OTk5OTk5My0yOS44MDAwMDAwMDAwMDAwMSAyOS42MDAwMDAwMDAwMDAwMjMtNzcuMTAwMDAwMDAwMDAwMDIgMzAuMjAwMDAwMDAwMDAwMDQ1LTEwOC4zMDAwMDAwMDAwMDAwMS0wLjY5OTk5OTk5OTk5OTkzMTgtOTIuNS05MS43MDAwMDAwMDAwMDAwNS0xODQuMi0xODQuMTAwMDAwMDAwMDAwMDItMjc2LjQtMjc1LjkwMDAwMDAwMDAwMDAzLTcuNTAwMDAwMDAwMDAwMDI4LTcuNS02LjIwMDAwMDAwMDAwMDAxNy0xMS4zOTk5OTk5OTk5OTk5NzcgMC42OTk5OTk5OTk5OTk5NzQ0LTE4LjMwMDAwMDAwMDAwMDAxIDkxLjgtOTEuMjk5OTk5OTk5OTk5OTggMTgzLjM5OTk5OTk5OTk5OTk4LTE4Mi44OTk5OTk5OTk5OTk5OCAyNzQuNy0yNzQuNyAxMS44MDAwMDAwMDAwMDAwMTEtMTEuODk5OTk5OTk5OTk5OTg4IDI3LTE2LjY5OTk5OTk5OTk5OTk5IDQxLTI0LjE5OTk5OTk5OTk5OTk5aDI4LjgwMDAwMDAwMDAwMDAxYzEuMzk5OTk5OTk5OTk5OTc3MyAzLjQgNC41OTk5OTk5OTk5OTk5NjYgMy4xIDcuMzk5OTk5OTk5OTk5OTc3IDQuMSA1OC4xOTk5OTk5OTk5OTk5OSAyMC41IDczLjY5OTk5OTk5OTk5OTk5IDg1LjUgMzAuOTAwMDAwMDAwMDAwMDM0IDEzMC05LjUgOS45MDAwMDAwMDAwMDAwMDYtMTkuNSAxOS41LTI5LjMwMDAwMDAwMDAwMDAxIDI5LjIwMDAwMDAwMDAwMDAxNy0yMS41IDIxLjE5OTk5OTk5OTk5OTk5LTQzIDQyLjUtNjguMzAwMDAwMDAwMDAwMDEgNjcuMzk5OTk5OTk5OTk5OThoMjMuMTAwMDAwMDAwMDAwMDIzYzQ3LjM5OTk5OTk5OTk5OTk4IDAgOTQuNjk5OTk5OTk5OTk5OTktMC4zOTk5OTk5OTk5OTk5NzcyNiAxNDIuMTAwMDAwMDAwMDAwMDIgMC4zMDAwMDAwMDAwMDAwMTEzNyAzNC44OTk5OTk5OTk5OTk5OCAwLjU5OTk5OTk5OTk5OTk5NDMgNjkuMTk5OTk5OTk5OTk5OTMgNi41IDEwMS43OTk5OTk5OTk5OTk5NSAxOS4wOTk5OTk5OTk5OTk5OTQgMTEzLjEwMDAwMDAwMDAwMDAyIDQzLjU5OTk5OTk5OTk5OTk5NCAxODIuMzk5OTk5OTk5OTk5OTggMTI3LjUwMDAwMDAwMDAwMDAzIDIyMC4xMDAwMDAwMDAwMDAwMiAyNDAuMjk5OTk5OTk5OTk5OTggOC44OTk5OTk5OTk5OTk5NzcgMjYuNzAwMDAwMDAwMDAwMDQ1IDExLjM5OTk5OTk5OTk5OTk3NyA1NC44MDAwMDAwMDAwMDAwNyAxOC4zOTk5OTk5OTk5OTk5NzcgODEuODAwMDAwMDAwMDAwMDcgMC4xMDAwMDAwMDAwMDAwMjI3NCAyNy41OTk5OTk5OTk5OTk5MSAwLjEwMDAwMDAwMDAwMDAyMjc0IDU1LjE5OTk5OTk5OTk5OTkzIDAuMTAwMDAwMDAwMDAwMDIyNzQgODIuNzk5OTk5OTk5OTk5OTV6Ii8+Cjwvc3ZnPg==\")";
 var IconReset = "url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSIxMDAwIiB3aWR0aD0iMTAwMCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgo8bWV0YWRhdGE+SWNvRm9udCBJY29uczwvbWV0YWRhdGE+Cjx0aXRsZT5yZWZyZXNoPC90aXRsZT4KPGdseXBoIGdseXBoLW5hbWU9InJlZnJlc2giIHVuaWNvZGU9IiYjeGVmZDE7IiBob3Jpei1hZHYteD0iMTAwMCIgLz4KPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTg5OS44IDU1NC42aC00Mi4xOTk5OTk5OTk5OTk5M2MtMTguODk5OTk5OTk5OTk5OTc3IDAtMzYuNSAxNS4xOTk5OTk5OTk5OTk5MzItNDEuNjAwMDAwMDAwMDAwMDIgMzMuMzk5OTk5OTk5OTk5OTgtMzguMjk5OTk5OTk5OTk5OTU1IDEzOC4zOTk5OTk5OTk5OTk5OC0xNjUuMzk5OTk5OTk5OTk5OTggMjQwLTMxNi4yIDI0MC0xMDIuODAwMDAwMDAwMDAwMDEgMC0xOTQuOC00Ny4yOTk5OTk5OTk5OTk5NTUtMjU0LjktMTIxLjYwMDAwMDAwMDAwMDAyLTExLjkwMDAwMDAwMDAwMDAwNi0xNC42OTk5OTk5OTk5OTk5MzItOC44MDAwMDAwMDAwMDAwMTEtMzggNS4wOTk5OTk5OTk5OTk5OTQtNTAuNzk5OTk5OTk5OTk5OTU1bDg0LjgwMDAwMDAwMDAwMDAxLTc3Ljg5OTk5OTk5OTk5OTk4YzEzLjg5OTk5OTk5OTk5OTk3Ny0xMi44MDAwMDAwMDAwMDAwNjggOS44OTk5OTk5OTk5OTk5NzctMjMuMTAwMDAwMDAwMDAwMDIzLTktMjMuMTAwMDAwMDAwMDAwMDIzaC0yMjkuMTAwMDAwMDAwMDAwMDJjLTE4Ljg5OTk5OTk5OTk5OTk5IDAtMzQuMTk5OTk5OTk5OTk5OTkgMTUuMjk5OTk5OTk5OTk5OTU1LTM0LjE5OTk5OTk5OTk5OTk5IDM0LjE5OTk5OTk5OTk5OTkzdjIwNS4xMDAwMDAwMDAwMDAwMmMwIDE4Ljg5OTk5OTk5OTk5OTk3NyAxMS4yOTk5OTk5OTk5OTk5OTcgMjMuODAwMDAwMDAwMDAwMDY4IDI1LjA5OTk5OTk5OTk5OTk5NCAxMWwzMC42MDAwMDAwMDAwMDAwMS0yOC4xOTk5OTk5OTk5OTk5MzJjMTMuODk5OTk5OTk5OTk5OTkxLTEyLjgwMDAwMDAwMDAwMDA2OCAzMy44OTk5OTk5OTk5OTk5OS0xMC42MDAwMDAwMDAwMDAwMjMgNDYuMTAwMDAwMDAwMDAwMDEgMy44OTk5OTk5OTk5OTk5NzczIDgwLjI5OTk5OTk5OTk5OTk4IDk1Ljg5OTk5OTk5OTk5OTk4IDIwMC44OTk5OTk5OTk5OTk5OCAxNTYuODk5OTk5OTk5OTk5OTggMzM1LjUgMTU2Ljg5OTk5OTk5OTk5OTk4IDIxMS40OTk5OTk5OTk5OTk5NCAwIDM4Ny43LTE1MCA0MjguNTk5OTk5OTk5OTk5OTctMzQ5LjIwMDAwMDAwMDAwMDA1IDMuODk5OTk5OTk5OTk5OTc3My0xOC41LTkuNjk5OTk5OTk5OTk5OTMyLTMzLjY5OTk5OTk5OTk5OTkzLTI4LjYwMDAwMDAwMDAwMDAyMy0zMy42OTk5OTk5OTk5OTk5M3ogbTEzLjUtMzU4LjQwMDAwMDAwMDAwMDAzbC0yOS44OTk5OTk5OTk5OTk5NzcgMjkuODAwMDAwMDAwMDAwMDFjLTEzLjM5OTk5OTk5OTk5OTk3NyAxMy4zMDAwMDAwMDAwMDAwMTEtMzIuNzk5OTk5OTk5OTk5OTU1IDExLjUtNDQuNzk5OTk5OTk5OTk5OTU1LTMuMDk5OTk5OTk5OTk5OTk0My04MC4yMDAwMDAwMDAwMDAwNS05Ny45LTIwMi4zMDAwMDAwMDAwMDAwNy0xNjAuNC0zMzguOC0xNjAuNC0yMTEuMTAwMDAwMDAwMDAwMDIgMC0zODcuNiAxNDkuNy00MjguMyAzNDkuMi0zLjc5OTk5OTk5OTk5OTk5NyAxOC41IDkuNzk5OTk5OTk5OTk5OTk3IDMzLjgwMDAwMDAwMDAwMDAxIDI4LjcwMDAwMDAwMDAwMDAwMyAzMy44MDAwMDAwMDAwMDAwMWg0Mi4yYzE4LjkwMDAwMDAwMDAwMDAwNiAwIDM2LjUtMTUuMTAwMDAwMDAwMDAwMDIzIDQxLjUtMzMuMzAwMDAwMDAwMDAwMDEgMzguMjk5OTk5OTk5OTk5OTgtMTM4LjggMTY1LjQtMjQwLjIgMzE1LjktMjQwLjIgMTA2LjYwMDAwMDAwMDAwMDAyIDAgMjAxLjIwMDAwMDAwMDAwMDA1IDUwLjUgMjYxLjIwMDAwMDAwMDAwMDA1IDEyOS4xMDAwMDAwMDAwMDAwMiAxMS41IDE1IDguMzk5OTk5OTk5OTk5OTc3IDM5LTQuODk5OTk5OTk5OTk5OTc3IDUyLjI5OTk5OTk5OTk5OTk1NWwtNjcuODAwMDAwMDAwMDAwMDcgNjcuOTAwMDAwMDAwMDAwMDNjLTEzLjI5OTk5OTk5OTk5OTk1NSAxMy4zOTk5OTk5OTk5OTk5NzctOC44OTk5OTk5OTk5OTk5NzcgMjQuMTk5OTk5OTk5OTk5OTkgMTAgMjQuMTk5OTk5OTk5OTk5OTloMjA1LjEwMDAwMDAwMDAwMDAyYzE4Ljg5OTk5OTk5OTk5OTk3NyAwIDM0LjIwMDAwMDAwMDAwMDA0NS0xNS4zMDAwMDAwMDAwMDAwMTEgMzQuMjAwMDAwMDAwMDAwMDQ1LTM0LjE5OTk5OTk5OTk5OTk5di0yMDUuMTAwMDAwMDAwMDAwMDJjLTAuMTAwMDAwMDAwMDAwMDIyNzQtMTguODk5OTk5OTk5OTk5OTc3LTEwLjg5OTk5OTk5OTk5OTk3Ny0yMy4zOTk5OTk5OTk5OTk5NzctMjQuMzAwMDAwMDAwMDAwMDY4LTEweiIvPgo8L3N2Zz4=\")";
+var IconOverlay = "url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwMCIgd2lkdGg9IjEwMDAiPjxwYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik0xMDAgMTAwaDIwMHYyMDBoLTIwMHYtMjAweiBNNDAwIDEwMGgyMDB2MjAwaC0yMDB2LTIwMHogTTcwMCAxMDBoMjAwdjIwMGgtMjAwdi0yMDB6IE0xMDAgNDAwaDIwMHYyMDBoLTIwMHYtMjAweiBNNDAwIDQwMGgyMDB2MjAwaC0yMDB2LTIwMHogTTcwMCA0MDBoMjAwdjIwMGgtMjAwdi0yMDB6IE0xMDAgNzAwaDIwMHYyMDBoLTIwMHYtMjAweiBNNDAwIDcwMGgyMDB2MjAwaC0yMDB2LTIwMHogTTcwMCA3MDBoMjAwdjIwMGgtMjAwdi0yMDB6Ii8+PC9zdmc+\")";
 
 var NavigationActionButton = function (_a) {
-    var icon = _a.icon, onClick = _a.onClick, transform = _a.transform;
-    return (React.createElement("div", { className: "nav-action-button", style: {
-            width: '12px',
-            height: '12px',
-            backgroundImage: icon,
-            backgroundSize: 'contain',
-            backgroundRepeat: 'no-repeat',
-            cursor: 'pointer',
-            transform: transform,
-            transition: 'all 0.2s ease-in-out',
-            borderRadius: '4px',
-            padding: '4px',
-        }, onClick: onClick }));
+    var icon = _a.icon, onClick = _a.onClick, transform = _a.transform, customStyle = _a.style;
+    return (React.createElement("div", { className: "nav-action-button", style: __assign({ width: '12px', height: '12px', backgroundImage: icon, backgroundSize: 'contain', backgroundRepeat: 'no-repeat', cursor: 'pointer', transform: transform, transition: 'all 0.2s ease-in-out', borderRadius: '4px', padding: '4px' }, customStyle), onClick: onClick }));
 };
 var style = document.createElement('style');
 style.textContent = "\n  .nav-action-button:hover {\n    transform: scale(1.2);\n    background-color: rgba(0, 0, 0, 0.05);\n  }\n";
 document.head.appendChild(style);
 
 var Navigation = function (_a) {
-    var title = _a.title, onClose = _a.onClose, onZoomIn = _a.onZoomIn, onZoomOut = _a.onZoomOut, onRotate = _a.onRotate, onReset = _a.onReset, onNext = _a.onNext, onPrevious = _a.onPrevious, _b = _a.showControls, showControls = _b === void 0 ? true : _b;
+    var title = _a.title, onClose = _a.onClose, onZoomIn = _a.onZoomIn, onZoomOut = _a.onZoomOut, onRotate = _a.onRotate, onReset = _a.onReset, onNext = _a.onNext, onPrevious = _a.onPrevious, onToggleOverlay = _a.onToggleOverlay, _b = _a.showOverlay, showOverlay = _b === void 0 ? false : _b, _c = _a.showControls, showControls = _c === void 0 ? true : _c;
     return (React.createElement("div", { className: "photo-viewer-navigation", style: {
             position: 'fixed',
             bottom: 30,
@@ -88,9 +78,126 @@ var Navigation = function (_a) {
             onZoomIn && React.createElement(NavigationActionButton, { icon: IconZoomIn, onClick: onZoomIn }),
             onRotate && React.createElement(NavigationActionButton, { icon: IconRotate, onClick: function () { return onRotate('left'); } }),
             onRotate && (React.createElement(NavigationActionButton, { icon: IconRotate, onClick: function () { return onRotate('right'); }, transform: "rotateY(180deg)" })),
+            onToggleOverlay && (React.createElement(NavigationActionButton, { icon: IconOverlay, onClick: onToggleOverlay, style: showOverlay ? { backgroundColor: 'rgba(255, 255, 255, 0.2)' } : undefined })),
             onClose && React.createElement(NavigationActionButton, { icon: IconClose, onClick: onClose }))));
 };
 
+var ImageOverlay = function (_a) {
+    var overlay = _a.overlay, _b = _a.position, position = _b === void 0 ? 'center' : _b, _c = _a.size, size = _c === void 0 ? {} : _c;
+    // Calculate position styles
+    var getPositionStyles = function (pos) {
+        var styles = {};
+        switch (pos) {
+            case 'center':
+                styles.top = '50%';
+                styles.left = '50%';
+                styles.transform = 'translate(-50%, -50%)';
+                styles.display = 'flex';
+                styles.alignItems = 'center';
+                styles.justifyContent = 'center';
+                break;
+            case 'top-left':
+                styles.top = 0;
+                styles.left = 0;
+                break;
+            case 'top-right':
+                styles.top = 0;
+                styles.right = 0;
+                break;
+            case 'bottom-left':
+                styles.bottom = 0;
+                styles.left = 0;
+                break;
+            case 'bottom-right':
+                styles.bottom = 0;
+                styles.right = 0;
+                break;
+            case 'top':
+                styles.top = 0;
+                styles.left = '50%';
+                styles.transform = 'translateX(-50%)';
+                break;
+            case 'bottom':
+                styles.bottom = 0;
+                styles.left = '50%';
+                styles.transform = 'translateX(-50%)';
+                break;
+            case 'left':
+                styles.top = '50%';
+                styles.left = 0;
+                styles.transform = 'translateY(-50%)';
+                break;
+            case 'right':
+                styles.top = '50%';
+                styles.right = 0;
+                styles.transform = 'translateY(-50%)';
+                break;
+        }
+        return styles;
+    };
+    // Calculate size styles
+    var getSizeStyles = function () {
+        var sizeStyles = {};
+        if (size.maxWidth !== undefined) {
+            sizeStyles.maxWidth = typeof size.maxWidth === 'number' ? "".concat(size.maxWidth, "px") : size.maxWidth;
+        }
+        if (size.maxHeight !== undefined) {
+            sizeStyles.maxHeight = typeof size.maxHeight === 'number' ? "".concat(size.maxHeight, "px") : size.maxHeight;
+        }
+        if (size.width !== undefined) {
+            sizeStyles.width = typeof size.width === 'number' ? "".concat(size.width, "px") : size.width;
+        }
+        if (size.height !== undefined) {
+            sizeStyles.height = typeof size.height === 'number' ? "".concat(size.height, "px") : size.height;
+        }
+        // Keep aspect ratio if only one dimension is specified
+        if (size.width && !size.height) {
+            sizeStyles.height = 'auto';
+        }
+        else if (size.height && !size.width) {
+            sizeStyles.width = 'auto';
+        }
+        // If maxWidth or maxHeight is set, ensure aspect ratio is maintained
+        if (size.maxWidth && !size.maxHeight && !size.width && !size.height) {
+            sizeStyles.height = 'auto';
+        }
+        else if (size.maxHeight && !size.maxWidth && !size.width && !size.height) {
+            sizeStyles.width = 'auto';
+        }
+        return sizeStyles;
+    };
+    var positionStyles = getPositionStyles(position);
+    var sizeStyles = getSizeStyles();
+    // If no size is specified, assume the overlay should cover the full image
+    var hasSizeConstraints = size.maxWidth !== undefined ||
+        size.maxHeight !== undefined ||
+        size.width !== undefined ||
+        size.height !== undefined;
+    var shouldCoverFullImage = !hasSizeConstraints;
+    // Check if overlay is a URL string
+    var isUrlOverlay = typeof overlay === 'string';
+    return (React.createElement("div", { style: {
+            position: 'absolute',
+            pointerEvents: 'none',
+            top: shouldCoverFullImage ? 0 : positionStyles.top,
+            left: shouldCoverFullImage ? 0 : positionStyles.left,
+            right: shouldCoverFullImage ? 0 : positionStyles.right,
+            bottom: shouldCoverFullImage ? 0 : positionStyles.bottom,
+            width: shouldCoverFullImage ? '100%' : sizeStyles.width,
+            height: shouldCoverFullImage ? '100%' : sizeStyles.height,
+            maxWidth: shouldCoverFullImage ? undefined : sizeStyles.maxWidth,
+            maxHeight: shouldCoverFullImage ? undefined : sizeStyles.maxHeight,
+            transform: shouldCoverFullImage ? undefined : positionStyles.transform,
+            display: shouldCoverFullImage ? 'block' : positionStyles.display,
+            alignItems: positionStyles.alignItems,
+            justifyContent: positionStyles.justifyContent,
+        } }, isUrlOverlay ? (React.createElement("img", { src: overlay, alt: "Overlay", style: {
+            width: '100%',
+            height: '100%',
+            objectFit: 'contain',
+        } })) : (overlay)));
+};
+
 var DEFAULT_ZOOM_STEP = 0.3;
 var DEFAULT_LARGE_ZOOM = 4;
 var defaultSettings = {
@@ -111,13 +218,15 @@ var PhotoViewer = function (_a) {
     var _c = React.useState(1), zoom = _c[0], setZoom = _c[1];
     var _d = React.useState(0), rotationCount = _d[0], setRotationCount = _d[1];
     var _e = React.useState(false), isHovered = _e[0], setIsHovered = _e[1];
+    var _f = React.useState(false), showOverlay = _f[0], setShowOverlay = _f[1];
     var containerRef = React.useRef(null);
     var imageRef = React.useRef(null);
-    var _f = React.useState(selectedImage), currentSelectedImage = _f[0], setCurrentSelectedImage = _f[1];
+    var _g = React.useState(selectedImage), currentSelectedImage = _g[0], setCurrentSelectedImage = _g[1];
     React.useEffect(function () {
         setCurrentSelectedImage(selectedImage);
         setZoom(1);
         setRotationCount(0);
+        setShowOverlay(false);
     }, [selectedImage]);
     var handleNext = React.useCallback(function () {
         var currentImageIndex = images.findIndex(function (img) { return img.id === (currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.id); });
@@ -127,6 +236,7 @@ var PhotoViewer = function (_a) {
             setCurrentSelectedImage(nextImage);
             setZoom(1);
             setRotationCount(0);
+            setShowOverlay(false);
             onImageChange === null || onImageChange === void 0 ? void 0 : onImageChange(nextImage);
         }
     }, [images, currentSelectedImage, onImageChange]);
@@ -138,6 +248,7 @@ var PhotoViewer = function (_a) {
             setCurrentSelectedImage(prevImage);
             setZoom(1);
             setRotationCount(0);
+            setShowOverlay(false);
             onImageChange === null || onImageChange === void 0 ? void 0 : onImageChange(prevImage);
         }
     }, [images, currentSelectedImage, onImageChange]);
@@ -235,7 +346,7 @@ var PhotoViewer = function (_a) {
             justifyContent: 'center',
             zIndex: 1000,
         }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
-        React.createElement(Navigation, { title: (currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.title) || 'Photo Viewer', onClose: onClose, onNext: images.length > 1 ? handleNext : undefined, onPrevious: images.length > 1 ? handlePrevious : undefined, onZoomIn: allowZoom ? function () { return handleZoom(zoom + zoomStep); } : undefined, onZoomOut: allowZoom ? function () { return handleZoom(zoom - zoomStep); } : undefined, onRotate: allowRotate ? handleRotate : undefined, onReset: zoom !== 1 || rotationCount !== 0 ? handleReset : undefined, showControls: isHovered }),
+        React.createElement(Navigation, { title: (currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.title) || 'Photo Viewer', onClose: onClose, onNext: images.length > 1 ? handleNext : undefined, onPrevious: images.length > 1 ? handlePrevious : undefined, onZoomIn: allowZoom ? function () { return handleZoom(zoom + zoomStep); } : undefined, onZoomOut: allowZoom ? function () { return handleZoom(zoom - zoomStep); } : undefined, onRotate: allowRotate ? handleRotate : undefined, onReset: zoom !== 1 || rotationCount !== 0 ? handleReset : undefined, onToggleOverlay: (currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.svgOverlay) ? function () { return setShowOverlay(!showOverlay); } : undefined, showOverlay: showOverlay, showControls: isHovered }),
         React.createElement("div", { style: {
                 position: 'relative',
                 width: '100%',
@@ -244,15 +355,20 @@ var PhotoViewer = function (_a) {
                 alignItems: 'center',
                 justifyContent: 'center',
             } },
-            React.createElement("img", { ref: imageRef, src: currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.src, alt: (currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.alt) || '', onDoubleClick: handleDoubleClick, style: {
-                    maxWidth: '80%',
-                    maxHeight: '80%',
-                    minHeight: '80%',
-                    objectFit: 'contain',
+            React.createElement("div", { style: {
+                    position: 'relative',
                     transform: "scale(".concat(zoom, ") rotateZ(").concat(rotationCount * 90, "deg)"),
                     transformOrigin: 'center',
                     transition: 'transform 0.2s ease',
-                } }))));
+                    display: 'inline-block',
+                } },
+                React.createElement("img", { ref: imageRef, src: currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.src, alt: (currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.alt) || '', onDoubleClick: handleDoubleClick, style: {
+                        maxWidth: '80vw',
+                        maxHeight: '80vh',
+                        objectFit: 'contain',
+                        display: 'block',
+                    } }),
+                showOverlay && (currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.svgOverlay) && (React.createElement(ImageOverlay, { overlay: currentSelectedImage.svgOverlay, position: currentSelectedImage.overlayPosition, size: currentSelectedImage.overlaySize }))))));
 };
 
 var Image = function (_a) {

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/types/image.type.d.ts

@@ -1,7 +1,16 @@
+export type OverlayPosition = 'center' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top' | 'bottom' | 'left' | 'right';
+export type OverlaySize = {
+    maxWidth?: string | number;
+    maxHeight?: string | number;
+    width?: string | number;
+    height?: string | number;
+};
 export type ZZImage = {
     id: string;
     src: string;
     alt?: string;
     title?: string;
-    svgOverlay?: React.ReactNode;
+    svgOverlay?: React.ReactNode | string;
+    overlayPosition?: OverlayPosition;
+    overlaySize?: OverlaySize;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zimme-zoom",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "A lightweight React photo viewer with zoom, navigation, blurred background, and SVG overlay support",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -64,7 +64,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/kulcsarrudolf/zimme-zoom"
+    "url": "git+https://github.com/kulcsarrudolf/zimme-zoom.git"
   },
   "bugs": {
     "url": "https://github.com/kulcsarrudolf/zimme-zoom/issues"