react-image-gallery 2.0.0 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/build/image-gallery.cjs +1 -1
- package/build/image-gallery.css +1 -1
- package/build/image-gallery.es.js +1 -1
- package/build/types/types.d.ts +2 -0
- package/package.json +3 -2
- package/styles/image-gallery.css +24 -6
package/README.md
CHANGED
|
@@ -150,6 +150,8 @@ function MyGallery() {
|
|
|
150
150
|
- `isRTL`: Boolean, default `false`
|
|
151
151
|
- if true, gallery's direction will be from right-to-left (to support right-to-left languages)
|
|
152
152
|
- `showBullets`: Boolean, default `false`
|
|
153
|
+
- `maxBullets`: Number, default `undefined`
|
|
154
|
+
- Maximum number of bullets to show at once. Active bullet stays centered while bullets slide. Minimum value is 3.
|
|
153
155
|
- `showIndex`: Boolean, default `false`
|
|
154
156
|
- `autoPlay`: Boolean, default `false`
|
|
155
157
|
- `disableThumbnailScroll`: Boolean, default `false`
|
package/build/image-gallery.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("react")):"function"==typeof define&&define.amd?define(["react"],n):"object"==typeof exports?exports.ImageGallery=n(require("react")):e.ImageGallery=n(e.React)}(this,(e=>(()=>{"use strict";var n={698:(e,n)=>{var l=Symbol.for("react.transitional.element"),a=Symbol.for("react.fragment");function t(e,n,a){var t=null;if(void 0!==a&&(t=""+a),void 0!==n.key&&(t=""+n.key),"key"in n)for(var i in a={},n)"key"!==i&&(a[i]=n[i]);else a=n;return n=a.ref,{$$typeof:l,type:e,key:t,ref:void 0!==n?n:null,props:a}}n.Fragment=a,n.jsx=t,n.jsxs=t},848:(e,n,l)=>{e.exports=l(698)},12:n=>{n.exports=e}},l={};function a(e){var t=l[e];if(void 0!==t)return t.exports;var i=l[e]={exports:{}};return n[e](i,i.exports,a),i.exports}a.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return a.d(n,{a:n}),n},a.d=(e,n)=>{for(var l in n)a.o(n,l)&&!a.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:n[l]})},a.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var t={};a.r(t),a.d(t,{default:()=>J});var i=a(848),r=a(12),s=a.n(r);function o(e){var n,l,a="";if("string"==typeof e||"number"==typeof e)a+=e;else if("object"==typeof e)if(Array.isArray(e)){var t=e.length;for(n=0;n<t;n++)e[n]&&(l=o(e[n]))&&(a&&(a+=" "),a+=l)}else for(l in e)e[l]&&(a&&(a+=" "),a+=l);return a}const u=function(){for(var e,n,l=0,a="",t=arguments.length;l<t;l++)(e=arguments[l])&&(n=o(e))&&(a&&(a+=" "),a+=n);return a},g="Left",c="Right",m="Up",d="Down",h={delta:10,preventScrollOnSwipe:!1,rotationAngle:0,trackMouse:!1,trackTouch:!0,swipeDuration:1/0,touchEventOptions:{passive:!0}},b={first:!0,initial:[0,0],start:0,swiping:!1,xy:[0,0]},p="mousemove",y="mouseup";function f(e,n){if(0===n)return e;const l=Math.PI/180*n;return[e[0]*Math.cos(l)+e[1]*Math.sin(l),e[1]*Math.cos(l)-e[0]*Math.sin(l)]}function v(e){const{trackMouse:n}=e,l=r.useRef(Object.assign({},b)),a=r.useRef(Object.assign({},h)),t=r.useRef(Object.assign({},a.current));let i;for(i in t.current=Object.assign({},a.current),a.current=Object.assign(Object.assign({},h),e),h)void 0===a.current[i]&&(a.current[i]=h[i]);const[s,o]=r.useMemo((()=>function(e,n){const l=n=>{const l="touches"in n;l&&n.touches.length>1||e(((e,t)=>{t.trackMouse&&!l&&(document.addEventListener(p,a),document.addEventListener(y,i));const{clientX:r,clientY:s}=l?n.touches[0]:n,o=f([r,s],t.rotationAngle);return t.onTouchStartOrOnMouseDown&&t.onTouchStartOrOnMouseDown({event:n}),Object.assign(Object.assign(Object.assign({},e),b),{initial:o.slice(),xy:o,start:n.timeStamp||0})}))},a=n=>{e(((e,l)=>{const a="touches"in n;if(a&&n.touches.length>1)return e;if(n.timeStamp-e.start>l.swipeDuration)return e.swiping?Object.assign(Object.assign({},e),{swiping:!1}):e;const{clientX:t,clientY:i}=a?n.touches[0]:n,[r,s]=f([t,i],l.rotationAngle),o=r-e.xy[0],u=s-e.xy[1],b=Math.abs(o),p=Math.abs(u),y=(n.timeStamp||0)-e.start,v=Math.sqrt(b*b+p*p)/(y||1),x=[o/(y||1),u/(y||1)],w=function(e,n,l,a){return e>n?l>0?c:g:a>0?d:m}(b,p,o,u),S="number"==typeof l.delta?l.delta:l.delta[w.toLowerCase()]||h.delta;if(b<S&&p<S&&!e.swiping)return e;const k={absX:b,absY:p,deltaX:o,deltaY:u,dir:w,event:n,first:e.first,initial:e.initial,velocity:v,vxvy:x};k.first&&l.onSwipeStart&&l.onSwipeStart(k),l.onSwiping&&l.onSwiping(k);let T=!1;return(l.onSwiping||l.onSwiped||l[`onSwiped${w}`])&&(T=!0),T&&l.preventScrollOnSwipe&&l.trackTouch&&n.cancelable&&n.preventDefault(),Object.assign(Object.assign({},e),{first:!1,eventData:k,swiping:!0})}))},t=n=>{e(((e,l)=>{let a;if(e.swiping&&e.eventData){if(n.timeStamp-e.start<l.swipeDuration){a=Object.assign(Object.assign({},e.eventData),{event:n}),l.onSwiped&&l.onSwiped(a);const t=l[`onSwiped${a.dir}`];t&&t(a)}}else l.onTap&&l.onTap({event:n});return l.onTouchEndOrOnMouseUp&&l.onTouchEndOrOnMouseUp({event:n}),Object.assign(Object.assign(Object.assign({},e),b),{eventData:a})}))},i=e=>{document.removeEventListener(p,a),document.removeEventListener(y,i),t(e)},r=(e,n)=>{let i=()=>{};if(e&&e.addEventListener){const r=Object.assign(Object.assign({},h.touchEventOptions),n.touchEventOptions),s=[["touchstart",l,r],["touchmove",a,Object.assign(Object.assign({},r),n.preventScrollOnSwipe?{passive:!1}:{})],["touchend",t,r]];s.forEach((([n,l,a])=>e.addEventListener(n,l,a))),i=()=>s.forEach((([n,l])=>e.removeEventListener(n,l)))}return i},s={ref:n=>{null!==n&&e(((e,l)=>{if(e.el===n)return e;const a={};return e.el&&e.el!==n&&e.cleanUpTouch&&(e.cleanUpTouch(),a.cleanUpTouch=void 0),l.trackTouch&&n&&(a.cleanUpTouch=r(n,l)),Object.assign(Object.assign(Object.assign({},e),{el:n}),a)}))}};return n.trackMouse&&(s.onMouseDown=l),[s,r]}((e=>l.current=e(l.current,a.current)),{trackMouse:n})),[n]);return l.current=function(e,n,l,a){return n.trackTouch&&e.el?e.cleanUpTouch?n.preventScrollOnSwipe!==l.preventScrollOnSwipe||n.touchEventOptions.passive!==l.touchEventOptions.passive?(e.cleanUpTouch(),Object.assign(Object.assign({},e),{cleanUpTouch:a(e.el,n)})):e:Object.assign(Object.assign({},e),{cleanUpTouch:a(e.el,n)}):(e.cleanUpTouch&&e.cleanUpTouch(),Object.assign(Object.assign({},e),{cleanUpTouch:void 0}))}(l.current,a.current,t.current,o),s}const x=(0,r.memo)((function({index:e,isActive:n=!1,bulletClass:l="",onClick:a}){const t=u("image-gallery-bullet",l,{active:n});return(0,i.jsx)("button",{"aria-label":`Go to Slide ${e+1}`,"aria-pressed":n?"true":"false",className:t,type:"button",onClick:a},`bullet-${e}`)})),w=(0,r.memo)((function({bullets:e=[],slideVertically:n=!1}){const l=u("image-gallery-bullets",{"image-gallery-bullets-vertical":n});return e&&0!==e.length?(0,i.jsx)("div",{className:l,children:(0,i.jsx)("div",{"aria-label":"Bullet Navigation",className:"image-gallery-bullets-container",role:"navigation",children:e})}):null})),S={left:(0,i.jsx)("polyline",{points:"15 18 9 12 15 6"}),right:(0,i.jsx)("polyline",{points:"9 18 15 12 9 6"}),top:(0,i.jsx)("polyline",{points:"6 15 12 9 18 15"}),bottom:(0,i.jsx)("polyline",{points:"6 9 12 15 18 9"}),maximize:(0,i.jsx)("path",{d:"M8 3H3v5m18 0V3h-5m0 18h5v-5M3 16v5h5"}),minimize:(0,i.jsx)("path",{d:"M8 3v5H3m18 0h-5V3m0 18v-5h5M3 16h5v5"}),play:(0,i.jsx)("polygon",{points:"5 3 19 12 5 21 5 3"}),pause:(0,i.jsxs)(s().Fragment,{children:[(0,i.jsx)("rect",{height:"16",width:"4",x:"6",y:"4"}),(0,i.jsx)("rect",{height:"16",width:"4",x:"14",y:"4"})]})},k={strokeWidth:1,viewBox:"0 0 24 24"},T=e=>{const{strokeWidth:n,viewBox:l,icon:a}={...k,...e};return(0,i.jsx)("svg",{className:"image-gallery-svg",fill:"none",stroke:"currentColor",strokeLinecap:"square",strokeLinejoin:"miter",strokeWidth:n,viewBox:l,xmlns:"http://www.w3.org/2000/svg",children:S[a]})},C=s().memo((({disabled:e,onClick:n})=>(0,i.jsx)("button",{"aria-label":"Next Slide",className:"image-gallery-icon image-gallery-bottom-nav",disabled:e,type:"button",onClick:n,children:(0,i.jsx)(T,{icon:"bottom",viewBox:"6 0 12 24"})})));C.displayName="BottomNav";const j=C,R=s().memo((({isFullscreen:e,onClick:n})=>(0,i.jsx)("button",{"aria-label":"Open Fullscreen",className:"image-gallery-icon image-gallery-fullscreen-button",type:"button",onClick:n,children:(0,i.jsx)(T,{icon:e?"minimize":"maximize",strokeWidth:2})})));R.displayName="Fullscreen";const O=R,I=s().memo((({disabled:e,onClick:n})=>(0,i.jsx)("button",{"aria-label":"Previous Slide",className:"image-gallery-icon image-gallery-left-nav",disabled:e,type:"button",onClick:n,children:(0,i.jsx)(T,{icon:"left",viewBox:"6 0 12 24"})})));I.displayName="LeftNav";const E=I,N=s().memo((({isPlaying:e,onClick:n})=>(0,i.jsx)("button",{"aria-label":"Play or Pause Slideshow",className:"image-gallery-icon image-gallery-play-button",type:"button",onClick:n,children:(0,i.jsx)(T,{icon:e?"pause":"play",strokeWidth:2})})));N.displayName="PlayPause";const F=N,z=s().memo((({disabled:e,onClick:n})=>(0,i.jsx)("button",{"aria-label":"Next Slide",className:"image-gallery-icon image-gallery-right-nav",disabled:e,type:"button",onClick:n,children:(0,i.jsx)(T,{icon:"right",viewBox:"6 0 12 24"})})));z.displayName="RightNav";const M=z,L=s().memo((({disabled:e,onClick:n})=>(0,i.jsx)("button",{"aria-label":"Previous Slide",className:"image-gallery-icon image-gallery-top-nav",disabled:e,type:"button",onClick:n,children:(0,i.jsx)(T,{icon:"top",viewBox:"6 0 12 24"})})));L.displayName="TopNav";const P=L;function W(e,n,l={}){const{leading:a=!0,trailing:t=!0}=l;let i=0,r=null,s=null,o=null;function u(){null!==s&&(e.apply(o,s),i=Date.now(),s=null,o=null)}return function(...e){const l=Date.now(),g=l-i;s=e,o=this,g>=n?(r&&(clearTimeout(r),r=null),a?u():i=l):t&&!r&&(r=setTimeout((()=>{r=null,s&&u()}),n-g))}}function $(e,n){let l;return function(...a){clearTimeout(l),l=setTimeout((()=>{e.apply(this,a)}),n)}}const B=(0,r.memo)((function({currentIndex:e,totalItems:n,indexSeparator:l=" / "}){return(0,i.jsxs)("div",{className:"image-gallery-index",children:[(0,i.jsx)("span",{className:"image-gallery-index-current",children:e+1}),(0,i.jsx)("span",{className:"image-gallery-index-separator",children:l}),(0,i.jsx)("span",{className:"image-gallery-index-total",children:n})]})})),D={description:"",fullscreen:"",isFullscreen:!1,originalAlt:"",originalHeight:"",originalWidth:"",originalTitle:"",sizes:"",srcSet:"",loading:"eager"},U=s().memo((e=>{const{description:n,fullscreen:l,handleImageLoaded:a,isFullscreen:t,onImageError:r,original:o,originalAlt:u,originalHeight:g,originalWidth:c,originalTitle:m,sizes:d,srcSet:h,loading:b}={...D,...e},p=t&&l||o;return(0,i.jsxs)(s().Fragment,{children:[(0,i.jsx)("img",{alt:u,className:"image-gallery-image",height:g,loading:b,sizes:d,src:p,srcSet:h,title:m,width:c,onError:r,onLoad:e=>a(e,o)}),n&&(0,i.jsx)("span",{className:"image-gallery-description",children:n})]})}));U.displayName="Item";const H=U,A=(0,r.memo)((function({index:e,alignment:n="",originalClass:l="",style:a={},onClick:t,onKeyUp:r,onTouchMove:s,onTouchEnd:o,onTouchStart:u,onMouseOver:g,onMouseLeave:c,children:m=null}){return(0,i.jsx)("div",{"aria-label":`Go to Slide ${e+1}`,className:`image-gallery-slide ${n} ${l}`,role:"button",style:a,tabIndex:-1,onClick:t,onFocus:g,onKeyUp:r,onMouseLeave:c,onMouseOver:g,onTouchEnd:o,onTouchMove:s,onTouchStart:u,children:m},`slide-${e}`)}));let q=!1;const G={className:"",delta:0,onSwiping:()=>{},onSwiped:()=>{}},K=e=>{const{children:n,className:l,delta:a,onSwiping:t,onSwiped:r}={...G,...e},s=v({delta:a,onSwiping:t,onSwiped:r});return(0,i.jsx)("div",{...s,className:l,children:n})},V=(0,r.memo)((function({index:e,isActive:n=!1,thumbnailClass:l="",onMouseLeave:a,onMouseOver:t,onFocus:r,onKeyUp:s,onClick:o,children:g=null}){const c=u("image-gallery-thumbnail",l,{active:n});return(0,i.jsx)("button",{"aria-label":`Go to Slide ${e+1}`,"aria-pressed":n?"true":"false",className:c,tabIndex:0,type:"button",onClick:o??void 0,onFocus:r??void 0,onKeyUp:s??void 0,onMouseLeave:a??void 0,onMouseOver:t??void 0,children:g},`thumbnail-${e}`)})),Y=(0,r.memo)((function({thumbnails:e=[],thumbnailPosition:n="bottom",thumbnailStyle:l={},thumbnailBarHeight:a={},isRTL:t=!1,disableThumbnailSwipe:r=!1,onSwiping:s,onSwiped:o,thumbnailsWrapperRef:g,thumbnailsRef:c}){const m="left"===n||"right"===n,d=u("image-gallery-thumbnails-wrapper",(e=>{const n={left:"image-gallery-thumbnails-left",right:"image-gallery-thumbnails-right",bottom:"image-gallery-thumbnails-bottom",top:"image-gallery-thumbnails-top"};return n[e]?` ${n[e]}`:""})(n),{"thumbnails-wrapper-rtl":!m&&t},{"thumbnails-swipe-horizontal":!m&&!r},{"thumbnails-swipe-vertical":m&&!r});return e&&0!==e.length?(0,i.jsx)(K,{className:d,delta:0,onSwiped:r?void 0:o??void 0,onSwiping:r?void 0:s??void 0,children:(0,i.jsx)("div",{ref:g,className:"image-gallery-thumbnails",style:a,children:(0,i.jsx)("nav",{ref:c,"aria-label":"Thumbnail Navigation",className:"image-gallery-thumbnails-container",style:l,children:e})})}):null}));!function(){if(q||"undefined"==typeof document)return;if(document.querySelector("style[data-image-gallery]"))return void(q=!0);const e=document.createElement("style");e.setAttribute("data-image-gallery",""),e.textContent="/**\n * React Image Gallery - Styles\n * \n * Design System: Base-4 spacing scale\n * Spacing: 2, 4, 8, 12, 16, 20, 24, 32, 48, 64, 80, 96, 120px\n * \n * CSS Custom Properties for theming:\n * --ig-primary-color: Primary/accent color (default: #337ab7)\n * --ig-white: Icon and text color (default: #fff)\n * --ig-black: Background color in fullscreen (default: #000)\n * --ig-background-overlay: Overlay background (default: rgba(0, 0, 0, 0.4))\n * --ig-thumbnail-size: Thumbnail dimensions (default: 96px)\n * --ig-thumbnail-size-small: Thumbnail size on small screens (default: 80px)\n * --ig-thumbnail-border-width: Thumbnail border width (default: 4px)\n * --ig-thumbnail-border-width-small: Thumbnail border on small screens (default: 3px)\n * --ig-bullet-size: Bullet size (default: 4px)\n * --ig-bullet-size-small: Bullet size on small screens (default: 3px)\n */\n\n:root {\n --ig-primary-color: #337ab7;\n --ig-white: #fff;\n --ig-black: #000;\n --ig-background-overlay: rgba(0, 0, 0, 0.4);\n --ig-thumbnail-size: 96px;\n --ig-thumbnail-size-small: 80px;\n --ig-thumbnail-border-width: 4px;\n --ig-thumbnail-border-width-small: 3px;\n --ig-bullet-size: 4px;\n --ig-bullet-size-small: 3px;\n}\n\n/* ==========================================================================\n SVG Icon Styles\n ========================================================================== */\n\n.image-gallery-icon {\n color: var(--ig-white, #fff);\n transition: all 0.3s ease-out;\n appearance: none;\n background-color: transparent;\n border: 0;\n cursor: pointer;\n outline: none;\n position: absolute;\n z-index: 4;\n filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));\n}\n\n@media (hover: hover) and (pointer: fine) {\n .image-gallery-icon:hover {\n color: var(--ig-primary-color, #337ab7);\n }\n .image-gallery-icon:hover .image-gallery-svg {\n transform: scale(1.1);\n }\n}\n\n.image-gallery-icon:focus {\n outline: 2px solid var(--ig-primary-color, #337ab7);\n}\n\n.image-gallery-using-mouse .image-gallery-icon:focus {\n outline: none;\n}\n\n/* Fullscreen & Play buttons */\n.image-gallery-fullscreen-button,\n.image-gallery-play-button {\n bottom: 0;\n padding: 20px;\n}\n\n.image-gallery-fullscreen-button .image-gallery-svg,\n.image-gallery-play-button .image-gallery-svg {\n height: 32px;\n width: 32px;\n}\n\n@media (max-width: 768px) {\n .image-gallery-fullscreen-button,\n .image-gallery-play-button {\n padding: 16px;\n }\n .image-gallery-fullscreen-button .image-gallery-svg,\n .image-gallery-play-button .image-gallery-svg {\n height: 24px;\n width: 24px;\n }\n}\n\n@media (max-width: 480px) {\n .image-gallery-fullscreen-button,\n .image-gallery-play-button {\n padding: 12px;\n }\n .image-gallery-fullscreen-button .image-gallery-svg,\n .image-gallery-play-button .image-gallery-svg {\n height: 16px;\n width: 16px;\n }\n}\n\n.image-gallery-fullscreen-button {\n right: 0;\n}\n\n.image-gallery-play-button {\n left: 0;\n}\n\n/* Top & Bottom navigation */\n.image-gallery-top-nav,\n.image-gallery-bottom-nav {\n padding: 12px;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.image-gallery-top-nav .image-gallery-svg,\n.image-gallery-bottom-nav .image-gallery-svg {\n height: 120px;\n width: 96px;\n}\n\n@media (max-width: 768px) {\n .image-gallery-top-nav .image-gallery-svg,\n .image-gallery-bottom-nav .image-gallery-svg {\n height: 72px;\n width: 48px;\n }\n}\n\n@media (max-width: 480px) {\n .image-gallery-top-nav .image-gallery-svg,\n .image-gallery-bottom-nav .image-gallery-svg {\n height: 48px;\n width: 32px;\n }\n}\n\n.image-gallery-top-nav[disabled],\n.image-gallery-bottom-nav[disabled] {\n cursor: not-allowed;\n opacity: 0.6;\n pointer-events: none;\n}\n\n.image-gallery-top-nav {\n top: 0;\n}\n\n.image-gallery-bottom-nav {\n bottom: 0;\n}\n\n/* Left & Right navigation */\n.image-gallery-left-nav,\n.image-gallery-right-nav {\n padding: 48px 12px;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.image-gallery-left-nav .image-gallery-svg,\n.image-gallery-right-nav .image-gallery-svg {\n height: 120px;\n width: 64px;\n}\n\n@media (max-width: 768px) {\n .image-gallery-left-nav .image-gallery-svg,\n .image-gallery-right-nav .image-gallery-svg {\n height: 72px;\n width: 32px;\n }\n}\n\n@media (max-width: 480px) {\n .image-gallery-left-nav .image-gallery-svg,\n .image-gallery-right-nav .image-gallery-svg {\n height: 48px;\n width: 24px;\n }\n}\n\n.image-gallery-left-nav[disabled],\n.image-gallery-right-nav[disabled] {\n cursor: not-allowed;\n opacity: 0.6;\n pointer-events: none;\n}\n\n.image-gallery-left-nav {\n left: 0;\n}\n\n.image-gallery-right-nav {\n right: 0;\n}\n\n/* ==========================================================================\n Gallery Container\n ========================================================================== */\n\n.image-gallery {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n position: relative;\n /* Prevent mobile overscroll/pull-to-refresh */\n overscroll-behavior: none;\n -webkit-overflow-scrolling: touch;\n}\n\n.image-gallery.fullscreen-modal {\n background: var(--ig-black, #000);\n bottom: 0;\n height: 100%;\n left: 0;\n position: fixed;\n right: 0;\n top: 0;\n width: 100%;\n z-index: 5;\n}\n\n.image-gallery.fullscreen-modal .image-gallery-content {\n top: 50%;\n transform: translateY(-50%);\n}\n\n/* ==========================================================================\n Gallery Content\n ========================================================================== */\n\n.image-gallery-content {\n position: relative;\n line-height: 0;\n top: 0;\n}\n\n.image-gallery-content.fullscreen {\n background: var(--ig-black, #000);\n}\n\n.image-gallery-content .image-gallery-slide .image-gallery-image {\n max-height: calc(100vh - 80px);\n}\n\n.image-gallery-content.image-gallery-thumbnails-left\n .image-gallery-slide\n .image-gallery-image,\n.image-gallery-content.image-gallery-thumbnails-right\n .image-gallery-slide\n .image-gallery-image {\n max-height: 100vh;\n}\n\n/* ==========================================================================\n Slide Wrapper\n ========================================================================== */\n\n.image-gallery-slide-wrapper {\n position: relative;\n}\n\n.image-gallery-slide-wrapper.image-gallery-thumbnails-left,\n.image-gallery-slide-wrapper.image-gallery-thumbnails-right {\n display: inline-block;\n width: calc(100% - 112px);\n}\n\n@media (max-width: 768px) {\n .image-gallery-slide-wrapper.image-gallery-thumbnails-left,\n .image-gallery-slide-wrapper.image-gallery-thumbnails-right {\n width: calc(100% - 88px);\n }\n}\n\n.image-gallery-slide-wrapper.image-gallery-rtl {\n direction: rtl;\n}\n\n.image-gallery-swipe {\n overflow: hidden;\n /* GPU acceleration */\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n /* Prevent overscroll during swipe */\n overscroll-behavior: contain;\n touch-action: pan-y pinch-zoom;\n}\n\n/* ==========================================================================\n Slides\n ========================================================================== */\n\n.image-gallery-slides {\n overflow: hidden;\n position: relative;\n touch-action: none;\n /* GPU acceleration for smooth swiping */\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n contain: layout style paint;\n isolation: isolate;\n overscroll-behavior: none;\n}\n\n/* Flex container that holds all slides and gets transformed */\n.image-gallery-slides-container {\n display: flex;\n /* GPU acceleration for smooth swiping */\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n -webkit-transform-style: preserve-3d;\n transform-style: preserve-3d;\n will-change: transform;\n}\n\n.image-gallery-slides-container.vertical {\n flex-direction: column;\n height: 100%;\n}\n\n.image-gallery-slides-container.vertical .image-gallery-slide {\n flex: 0 0 100%;\n height: 100%;\n min-height: 0;\n}\n\n.image-gallery-slides-container.vertical\n .image-gallery-slide\n .image-gallery-image {\n height: 100%;\n width: auto;\n max-width: 100%;\n}\n\n.image-gallery-slide {\n flex: 0 0 100%;\n min-width: 0;\n /* GPU acceleration for smooth swiping */\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n}\n\n.image-gallery-slide .image-gallery-image {\n width: 100%;\n object-fit: contain;\n}\n\n.image-gallery-slide .image-gallery-description {\n background: var(--ig-background-overlay, rgba(0, 0, 0, 0.4));\n bottom: 72px;\n color: var(--ig-white, #fff);\n left: 0;\n line-height: 1;\n padding: 12px 20px;\n position: absolute;\n white-space: normal;\n}\n\n@media (max-width: 768px) {\n .image-gallery-slide .image-gallery-description {\n bottom: 48px;\n font-size: 0.8em;\n padding: 8px 16px;\n }\n}\n\n/* ==========================================================================\n Bullets\n ========================================================================== */\n\n.image-gallery-bullets {\n bottom: 20px;\n left: 0;\n margin: 0 auto;\n position: absolute;\n right: 0;\n width: 80%;\n z-index: 4;\n}\n\n.image-gallery-bullets .image-gallery-bullets-container {\n margin: 0;\n padding: 0;\n text-align: center;\n}\n\n.image-gallery-bullets .image-gallery-bullet {\n appearance: none;\n background-color: transparent;\n border: 1px solid var(--ig-white, #fff);\n border-radius: 50%;\n box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);\n cursor: pointer;\n display: inline-block;\n margin: 0 4px;\n outline: none;\n padding: var(--ig-bullet-size, 4px);\n transition: all 0.2s ease-out;\n}\n\n@media (max-width: 768px) {\n .image-gallery-bullets .image-gallery-bullet {\n margin: 0 3px;\n padding: var(--ig-bullet-size-small, 3px);\n }\n}\n\n@media (max-width: 480px) {\n .image-gallery-bullets .image-gallery-bullet {\n padding: 3px;\n }\n}\n\n.image-gallery-bullets .image-gallery-bullet:focus {\n transform: scale(1.2);\n background: var(--ig-primary-color, #337ab7);\n border: 1px solid var(--ig-primary-color, #337ab7);\n}\n\n.image-gallery-bullets .image-gallery-bullet.active {\n transform: scale(1.2);\n border: 1px solid var(--ig-white, #fff);\n background: var(--ig-white, #fff);\n}\n\n@media (hover: hover) and (pointer: fine) {\n .image-gallery-bullets .image-gallery-bullet:hover {\n background: var(--ig-primary-color, #337ab7);\n border: 1px solid var(--ig-primary-color, #337ab7);\n }\n .image-gallery-bullets .image-gallery-bullet.active:hover {\n background: var(--ig-primary-color, #337ab7);\n }\n}\n\n/* Vertical bullets */\n.image-gallery-bullets.image-gallery-bullets-vertical {\n left: 20px;\n right: auto;\n bottom: auto;\n width: auto;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.image-gallery-bullets.image-gallery-bullets-vertical .image-gallery-bullet {\n display: block;\n margin: 12px 0;\n}\n\n@media (max-width: 768px) {\n .image-gallery-bullets.image-gallery-bullets-vertical .image-gallery-bullet {\n margin: 8px 0;\n padding: var(--ig-bullet-size-small, 3px);\n }\n}\n\n@media (max-width: 480px) {\n .image-gallery-bullets.image-gallery-bullets-vertical .image-gallery-bullet {\n padding: 3px;\n }\n}\n\n/* ==========================================================================\n Thumbnails Wrapper\n ========================================================================== */\n\n.image-gallery-thumbnails-wrapper {\n position: relative;\n}\n\n.image-gallery-thumbnails-wrapper.thumbnails-swipe-horizontal {\n touch-action: pan-y;\n}\n\n.image-gallery-thumbnails-wrapper.thumbnails-swipe-vertical {\n touch-action: pan-x;\n}\n\n.image-gallery-thumbnails-wrapper.thumbnails-wrapper-rtl {\n direction: rtl;\n}\n\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right {\n display: inline-block;\n vertical-align: top;\n width: var(--ig-thumbnail-size, 96px);\n}\n\n@media (max-width: 768px) {\n .image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,\n .image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right {\n width: var(--ig-thumbnail-size-small, 80px);\n }\n}\n\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left\n .image-gallery-thumbnails,\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right\n .image-gallery-thumbnails {\n height: 100%;\n width: 100%;\n left: 0;\n padding: 0;\n position: absolute;\n top: 0;\n}\n\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left\n .image-gallery-thumbnails\n .image-gallery-thumbnail,\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right\n .image-gallery-thumbnails\n .image-gallery-thumbnail {\n display: block;\n margin-right: 0;\n padding: 0;\n}\n\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left\n .image-gallery-thumbnails\n .image-gallery-thumbnail\n + .image-gallery-thumbnail,\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right\n .image-gallery-thumbnails\n .image-gallery-thumbnail\n + .image-gallery-thumbnail {\n margin-left: 0;\n margin-top: 2px;\n}\n\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right {\n margin: 0 4px;\n}\n\n@media (max-width: 768px) {\n .image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,\n .image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right {\n margin: 0 4px;\n }\n}\n\n/* ==========================================================================\n Thumbnails\n ========================================================================== */\n\n.image-gallery-thumbnails {\n overflow: hidden;\n padding: 4px 0;\n}\n\n@media (max-width: 768px) {\n .image-gallery-thumbnails {\n padding: 4px 0;\n }\n}\n\n.image-gallery-thumbnails .image-gallery-thumbnails-container {\n cursor: pointer;\n text-align: center;\n white-space: nowrap;\n}\n\n.image-gallery-thumbnail {\n display: inline-block;\n border: var(--ig-thumbnail-border-width, 4px) solid transparent;\n transition: border 0.3s ease-out;\n width: var(--ig-thumbnail-size, 96px);\n background: transparent;\n padding: 0;\n}\n\n@media (max-width: 768px) {\n .image-gallery-thumbnail {\n border: var(--ig-thumbnail-border-width-small, 3px) solid transparent;\n width: var(--ig-thumbnail-size-small, 80px);\n }\n}\n\n.image-gallery-thumbnail + .image-gallery-thumbnail {\n margin-left: 2px;\n}\n\n.image-gallery-thumbnail .image-gallery-thumbnail-inner {\n display: block;\n position: relative;\n}\n\n.image-gallery-thumbnail .image-gallery-thumbnail-image {\n vertical-align: middle;\n width: 100%;\n line-height: 0;\n}\n\n.image-gallery-thumbnail.active,\n.image-gallery-thumbnail:focus {\n outline: none;\n border: var(--ig-thumbnail-border-width, 4px) solid\n var(--ig-primary-color, #337ab7);\n}\n\n@media (max-width: 768px) {\n .image-gallery-thumbnail.active,\n .image-gallery-thumbnail:focus {\n border: var(--ig-thumbnail-border-width-small, 3px) solid\n var(--ig-primary-color, #337ab7);\n }\n}\n\n@media (hover: hover) and (pointer: fine) {\n .image-gallery-thumbnail:hover {\n outline: none;\n border: var(--ig-thumbnail-border-width, 4px) solid\n var(--ig-primary-color, #337ab7);\n }\n}\n\n@media (hover: hover) and (pointer: fine) and (max-width: 768px) {\n .image-gallery-thumbnail:hover {\n border: var(--ig-thumbnail-border-width-small, 3px) solid\n var(--ig-primary-color, #337ab7);\n }\n}\n\n/* ==========================================================================\n Thumbnail Label\n ========================================================================== */\n\n.image-gallery-thumbnail-label {\n box-sizing: border-box;\n color: var(--ig-white, #fff);\n font-size: 1em;\n left: 0;\n line-height: 1em;\n padding: 5%;\n position: absolute;\n top: 50%;\n text-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);\n transform: translateY(-50%);\n white-space: normal;\n width: 100%;\n}\n\n@media (max-width: 768px) {\n .image-gallery-thumbnail-label {\n font-size: 0.8em;\n line-height: 0.8em;\n }\n}\n\n/* ==========================================================================\n Index Display\n ========================================================================== */\n\n.image-gallery-index {\n background: var(--ig-background-overlay, rgba(0, 0, 0, 0.4));\n color: var(--ig-white, #fff);\n line-height: 1;\n padding: 10px 20px;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 4;\n}\n\n@media (max-width: 768px) {\n .image-gallery-index {\n font-size: 0.8em;\n padding: 5px 10px;\n }\n}\n",document.head.appendChild(e),q=!0}();const X=["fullscreenchange","MSFullscreenChange","mozfullscreenchange","webkitfullscreenchange"];function _(e){const n=parseInt(String(e.keyCode||e.which||0),10);return 13===n||32===n}function Z(e){return{left:" image-gallery-thumbnails-left",right:" image-gallery-thumbnails-right",bottom:" image-gallery-thumbnails-bottom",top:" image-gallery-thumbnails-top"}[e]||""}const J=(0,r.forwardRef)((function(e,n){const{additionalClass:l="",autoPlay:a=!1,disableKeyDown:t=!1,disableSwipe:s=!1,disableThumbnailScroll:o=!1,disableThumbnailSwipe:h=!1,flickThreshold:b=.4,indexSeparator:p=" / ",infinite:y=!0,isRTL:f=!1,items:v,lazyLoad:S=!1,onBeforeSlide:k,onBulletClick:T,onClick:C,onErrorImageURL:R="",onImageError:I,onImageLoad:N,onMouseLeave:z,onMouseOver:L,onPause:D,onPlay:U,onScreenChange:q,onSlide:G,onThumbnailClick:J,onThumbnailError:Q,onTouchEnd:ee,onTouchMove:ne,onTouchStart:le,renderBottomNav:ae=(e,n)=>(0,i.jsx)(j,{disabled:n,onClick:e}),renderCustomControls:te,renderFullscreenButton:ie=(e,n)=>(0,i.jsx)(O,{isFullscreen:n,onClick:e}),renderItem:re,renderLeftNav:se=(e,n)=>(0,i.jsx)(E,{disabled:n,onClick:e}),renderPlayPauseButton:oe=(e,n)=>(0,i.jsx)(F,{isPlaying:n,onClick:e}),renderRightNav:ue=(e,n)=>(0,i.jsx)(M,{disabled:n,onClick:e}),renderThumbInner:ge,renderTopNav:ce=(e,n)=>(0,i.jsx)(P,{disabled:n,onClick:e}),showBullets:me=!1,showFullscreenButton:de=!0,showIndex:he=!1,showNav:be=!0,showPlayButton:pe=!0,showThumbnails:ye=!0,slideDuration:fe=450,slideInterval:ve=3e3,slideOnThumbnailOver:xe=!1,slideVertically:we=!1,startIndex:Se=0,stopPropagation:ke=!1,swipeThreshold:Te=30,swipingTransitionDuration:Ce=0,thumbnailPosition:je="bottom",useBrowserFullscreen:Re=!0,useTranslate3D:Oe=!0,useWindowKeyDown:Ie=!0}=e,Ee=(0,r.useRef)(null),Ne=(0,r.useRef)(null),Fe=(0,r.useRef)(null),ze=(0,r.useRef)({}),Me=(0,r.useRef)([]),Le=(0,r.useRef)(null),Pe=(0,r.useRef)(null),[We,$e]=(0,r.useState)(0),[Be,De]=(0,r.useState)(0),[Ue,He]=(0,r.useState)(0),[Ae,qe]=(0,r.useState)(!1),[Ge,Ke]=(0,r.useState)(!1),Ve=v.length,Ye=Ve>=2,{currentIndex:Xe,isTransitioning:_e,currentSlideOffset:Ze,canSlideLeft:Je,canSlideRight:Qe,slideToIndex:en,slideToIndexCore:nn,slideToIndexWithStyleReset:ln,slideLeft:an,slideRight:tn,getContainerStyle:rn,getExtendedSlides:sn,getAlignmentClass:on,setCurrentSlideOffset:un,setSlideStyle:gn}=function({items:e,startIndex:n=0,infinite:l=!0,isRTL:a=!1,slideDuration:t=450,onSlide:i,onBeforeSlide:s}){const[o,u]=(0,r.useState)(n),[g,c]=(0,r.useState)(n),[m,d]=(0,r.useState)(!1),[h,b]=(0,r.useState)(0),[p,y]=(0,r.useState)(l&&e.length>1?n+1:n),[f,v]=(0,r.useState)({transition:`all ${t}ms ease-out`}),x=(0,r.useRef)(null),w=(0,r.useRef)(null),S=(0,r.useRef)(!1),k=e.length,T=k>=2,C=l&&k>1?k+2:k;(0,r.useEffect)((()=>()=>{x.current&&window.clearTimeout(x.current),w.current&&window.clearTimeout(w.current)}),[]),(0,r.useEffect)((()=>{u(n),y(l&&e.length>1?n+1:n),v({transition:"none"})}),[e,n,l]);const j=(0,r.useCallback)((()=>o>0),[o]),R=(0,r.useCallback)((()=>o<k-1),[o,k]),O=(0,r.useCallback)((()=>l||(a?R():j())),[l,a,R,j]),I=(0,r.useCallback)((()=>l||(a?j():R())),[l,a,R,j]),E=(0,r.useCallback)((()=>{x.current=window.setTimeout((()=>{m&&(d(!1),i&&i(o))}),t+50)}),[m,o,t,i]),N=(0,r.useCallback)((e=>l&&k>1?e+1:e),[l,k]),F=(0,r.useCallback)(((e,n)=>{S.current=!0,v({transition:"none"}),y(n),w.current=window.setTimeout((()=>{v({transition:`all ${t}ms ease-out`}),S.current=!1}),50)}),[t]),z=(0,r.useCallback)(((e,n,a=!1)=>{if((m||S.current)&&!a)return;const r=k-1;let g,h=e,p=!1,f=null;e<0?(h=r,p=!0,f="start"):e>r&&(h=0,p=!0,f="end"),g=l&&k>1?p&&"start"===f?0:p&&"end"===f?C-1:h+1:h,s&&h!==o&&s(h),c(o),u(h),y(g),d(h!==o||p),b(0),v({transition:`all ${t}ms ease-out`}),l&&k>1&&p&&(x.current=window.setTimeout((()=>{d(!1),i&&i(h);const e=N(h);F(h,e)}),t+20))}),[o,k,C,t,s,i,m,l,N,F]),M=(0,r.useRef)(W(((e,n)=>{z(e,n,!1)}),t,{trailing:!1}));(0,r.useEffect)((()=>{M.current=W(((e,n)=>{z(e,n,!1)}),t,{trailing:!1})}),[t,z]);const L=(0,r.useCallback)(((e,n)=>{M.current(e,n)}),[]),P=(0,r.useCallback)(((e,n)=>{b((n=>n+(o>e?.001:-.001))),v({transition:"none"}),window.setTimeout((()=>{z(e,n)}),25)}),[o,z]),$=(0,r.useCallback)((e=>{const n=o+("left"==(a?"right":"left")?-1:1);m||S.current||(2===k?P(n,e):L(n,e))}),[a,o,m,k,P,L]),B=(0,r.useCallback)((e=>{const n=o+("left"==(a?"left":"right")?-1:1);m||S.current||(2===k?P(n,e):L(n,e))}),[a,o,m,k,P,L]),D=(0,r.useCallback)((({useTranslate3D:e=!0,slideVertically:n=!1}={})=>{const l=-(100*p-h*(a?-1:1)),t=n?e?`translate3d(0, ${l}%, 0)`:`translate(0, ${l}%)`:e?`translate3d(${l}%, 0, 0)`:`translate(${l}%, 0)`;return{transform:t,WebkitTransform:t,MozTransform:t,msTransform:t,OTransform:t,...f}}),[p,h,f,a]),U=(0,r.useCallback)((()=>{if(!l||k<=1)return{extendedItems:e,getSlideKey:e=>`slide-${e}`,getRealIndex:e=>e};const n=[e[k-1],...e,e[0]];return{extendedItems:n,getSlideKey:e=>0===e?"slide-clone-last":e===n.length-1?"slide-clone-first":"slide-"+(e-1),getRealIndex:e=>0===e?k-1:e===n.length-1?0:e-1}}),[e,k,l]),H=(0,r.useCallback)((e=>{const{getRealIndex:n}=U(),l=n(e);return l===o?"image-gallery-center":l===(o-1+k)%k?"image-gallery-left":l===(o+1)%k?"image-gallery-right":""}),[o,k,U]);return(0,r.useEffect)((()=>{m&&!S.current&&E()}),[m,E]),{currentIndex:o,previousIndex:g,displayIndex:p,isTransitioning:m,currentSlideOffset:h,slideStyle:f,canSlide:T,canSlideLeft:O,canSlideRight:I,canSlidePrevious:j,canSlideNext:R,slideToIndex:L,slideToIndexCore:z,slideToIndexWithStyleReset:P,slideLeft:$,slideRight:B,getContainerStyle:D,getExtendedSlides:U,getAlignmentClass:H,setCurrentSlideOffset:b,setSlideStyle:v,setIsTransitioning:d,totalDisplaySlides:C}}({items:v,startIndex:Se,infinite:y,isRTL:f,slideDuration:fe,onSlide:G,onBeforeSlide:k}),{thumbsTranslate:cn,setThumbsTranslate:mn,thumbsSwipedTranslate:dn,setThumbsSwipedTranslate:hn,setThumbsStyle:bn,thumbnailsWrapperWidth:pn,thumbnailsWrapperHeight:yn,isSwipingThumbnail:fn,setIsSwipingThumbnail:vn,thumbnailsWrapperRef:xn,thumbnailsRef:wn,isThumbnailVertical:Sn,getThumbnailStyle:kn,getThumbnailBarHeight:Tn,initResizeObserver:Cn,removeResizeObserver:jn}=function({currentIndex:e,items:n,thumbnailPosition:l="bottom",disableThumbnailScroll:a=!1,slideDuration:t=450,isRTL:i=!1,useTranslate3D:s=!0}){const[o,u]=(0,r.useState)(0),[g,c]=(0,r.useState)(0),[m,d]=(0,r.useState)({transition:`all ${t}ms ease-out`}),[h,b]=(0,r.useState)(0),[p,y]=(0,r.useState)(0),[f,v]=(0,r.useState)(!1),x=(0,r.useRef)(null),w=(0,r.useRef)(null),S=(0,r.useRef)(null),k=(0,r.useRef)(e),T=(0,r.useCallback)((()=>"left"===l||"right"===l),[l]),C=(0,r.useCallback)((e=>{if(a)return 0;const l=w.current;if(!l)return 0;let t;if(T()){if(l.scrollHeight<=p)return 0;t=l.scrollHeight-p}else{if(l.scrollWidth<=h||h<=0)return 0;t=l.scrollWidth-h}return e*(t/(n.length-1))}),[a,n.length,h,p,T]),j=(0,r.useCallback)((()=>{if(f)return;const n=-C(e);d({transition:`all ${t}ms ease-out`}),0===e?(u(0),c(0)):(u(n),c(n))}),[e,C,f,t]);(0,r.useEffect)((()=>{k.current!==e&&(k.current=e,j())}),[e,j]);const R=(0,r.useRef)(l);(0,r.useEffect)((()=>{if(R.current!==l){R.current=l,d({transition:"none"}),u(0),c(0);const a=()=>{if(!x.current||!w.current)return;const a=x.current.getBoundingClientRect(),i=a.width,r=a.height;b(i),y(r);const s="left"===l||"right"===l,o=w.current;let g;if(s){if(o.scrollHeight<=r)return void d({transition:`all ${t}ms ease-out`});g=o.scrollHeight-r}else{if(o.scrollWidth<=i)return void d({transition:`all ${t}ms ease-out`});g=o.scrollWidth-i}const m=g/(n.length-1),h=-e*m;u(h),c(h),requestAnimationFrame((()=>{d({transition:`all ${t}ms ease-out`})}))};requestAnimationFrame((()=>{requestAnimationFrame((()=>{setTimeout(a,100)}))}))}}),[l,e,n.length,t]);const O=(0,r.useCallback)((()=>{const e=i?-1*o:o;let n;return n=T()?s?`translate3d(0, ${o}px, 0)`:`translate(0, ${o}px)`:s?`translate3d(${e}px, 0, 0)`:`translate(${e}px, 0)`,{WebkitTransform:n,MozTransform:n,msTransform:n,OTransform:n,transform:n,...m}}),[o,m,i,s,T]),I=(0,r.useCallback)((e=>T()?{height:e}:{}),[T]),E=(0,r.useCallback)((e=>{e?.current&&(S.current=new ResizeObserver($((e=>{e&&e.forEach((e=>{b(e.contentRect.width),y(e.contentRect.height)}))}),50)),S.current.observe(e.current))}),[]),N=(0,r.useCallback)((()=>{S.current&&x.current&&(S.current.unobserve(x.current),S.current=null)}),[]);(0,r.useEffect)((()=>()=>{N()}),[N]);const F=(0,r.useCallback)((()=>{v(!0),c(o),d({transition:`all ${t}ms ease-out`})}),[o,t]),z=(0,r.useCallback)((()=>{v(!1)}),[]);return{thumbsTranslate:o,setThumbsTranslate:u,thumbsSwipedTranslate:g,setThumbsSwipedTranslate:c,thumbsStyle:m,setThumbsStyle:d,thumbnailsWrapperWidth:h,thumbnailsWrapperHeight:p,isSwipingThumbnail:f,setIsSwipingThumbnail:v,thumbnailsWrapperRef:x,thumbnailsRef:w,isThumbnailVertical:T,getThumbsTranslate:C,getThumbnailStyle:O,getThumbnailBarHeight:I,slideThumbnailBar:j,initResizeObserver:E,removeResizeObserver:N,handleThumbnailSwipeEnd:F,resetSwipingThumbnail:z}}({currentIndex:Xe,items:v,thumbnailPosition:je,disableThumbnailScroll:o,slideDuration:fe,isRTL:f,useTranslate3D:Oe}),{isFullscreen:Rn,modalFullscreen:On,fullScreen:In,exitFullScreen:En,toggleFullScreen:Nn,handleScreenChange:Fn}=function({useBrowserFullscreen:e=!0,onScreenChange:n,galleryRef:l}){const[a,t]=(0,r.useState)(!1),[i,s]=(0,r.useState)(!1),o=(0,r.useCallback)((()=>{const a=document,i=a.fullscreenElement||a.msFullscreenElement||a.mozFullScreenElement||a.webkitFullscreenElement,r=l?.current===i;n&&n(r),e&&t(r)}),[l,e,n]),u=(0,r.useCallback)((e=>{s(e),n&&n(e)}),[n]),g=(0,r.useCallback)((()=>{const n=l?.current;n&&(e?n.requestFullscreen?n.requestFullscreen():n.msRequestFullscreen?n.msRequestFullscreen():n.mozRequestFullScreen?n.mozRequestFullScreen():n.webkitRequestFullscreen?n.webkitRequestFullscreen():u(!0):u(!0),t(!0))}),[l,e,u]),c=(0,r.useCallback)((()=>{if(!a)return;const n=document;e?n.exitFullscreen?n.exitFullscreen():n.webkitExitFullscreen?n.webkitExitFullscreen():n.mozCancelFullScreen?n.mozCancelFullScreen():n.msExitFullscreen?n.msExitFullscreen():u(!1):u(!1),t(!1)}),[a,e,u]),m=(0,r.useCallback)((()=>{a?c():g()}),[a,c,g]);return{isFullscreen:a,modalFullscreen:i,fullScreen:g,exitFullScreen:c,toggleFullScreen:m,handleScreenChange:o}}({useBrowserFullscreen:Re,onScreenChange:q,galleryRef:Ee}),{isPlaying:zn,playPauseIntervalRef:Mn,play:Ln,pause:Pn,togglePlay:Wn}=function({autoPlay:e=!1,slideInterval:n=3e3,slideDuration:l=450,infinite:a=!0,totalSlides:t,currentIndex:i,canSlideRight:s,slideToIndexCore:o,slideToIndexWithStyleReset:u,onPlay:g,onPause:c}){const[m,d]=(0,r.useState)(!1),h=(0,r.useRef)(null),b=(0,r.useRef)(null),p=(0,r.useCallback)((()=>{if(a||s()){const e=i+1;2===t?u(e):o(e)}else h.current&&(clearInterval(h.current),h.current=null,d(!1),c&&c(i))}),[a,s,i,t,o,u,c]);b.current=p;const y=(0,r.useCallback)(((e=!0)=>{h.current||(d(!0),h.current=setInterval((()=>b.current?.()),Math.max(n,l)),g&&e&&g(i))}),[n,l,g,i]),f=(0,r.useCallback)(((e=!0)=>{h.current&&(clearInterval(h.current),h.current=null,d(!1),c&&e&&c(i))}),[c,i]),v=(0,r.useCallback)((()=>{h.current?f():y()}),[y,f]),x=(0,r.useRef)(y),w=(0,r.useRef)(f);return x.current=y,w.current=f,(0,r.useEffect)((()=>{m&&(w.current(!1),x.current(!1))}),[n,l,m]),(0,r.useEffect)((()=>{e&&!h.current&&x.current()}),[e]),(0,r.useEffect)((()=>()=>{h.current&&(clearInterval(h.current),h.current=null)}),[]),{isPlaying:m,playPauseIntervalRef:h,play:y,pause:f,togglePlay:v}}({autoPlay:a,slideInterval:ve,slideDuration:fe,infinite:y,totalSlides:Ve,currentIndex:Xe,canSlideRight:Qe,slideToIndexCore:nn,slideToIndexWithStyleReset:ln,onPlay:U,onPause:D}),$n=(0,r.useCallback)((()=>{Ae&&qe(!1),Ge&&Ke(!1)}),[Ae,Ge]),Bn=(0,r.useCallback)((()=>Math.abs(Ze)>Te),[Ze,Te]),Dn=(0,r.useCallback)((({event:e,absX:n,absY:l,dir:a})=>{const t=a;if((t!==m&&t!==d&&!Ae||Ge||(Ae||qe(!0),we))&&(t!==g&&t!==c||Ge||Ke(!0),!s))if(ke&&e.preventDefault(),_e)un(0);else{if((t===g||t===c)&&we)return;if((t===m||t===d)&&!we)return;const e={[g]:-1,[c]:1,[m]:-1,[d]:1}[t];let a=n/We*100;we&&(a=l/Be*100),Math.abs(a)>=100&&(a=100);const i={transition:`transform ${Ce}ms ease-out`};un(e*a),gn(i)}}),[s,ke,_e,We,Be,we,Ce,Ae,Ge,un,gn]),Un=(0,r.useCallback)(((e,n)=>{let l=Xe;!Bn()&&!n||_e||(l+=e),(-1===e&&!Je()||1===e&&!Qe())&&(l=Xe),nn(l)}),[Xe,_e,Bn,Je,Qe,nn]),Hn=(0,r.useCallback)((({event:e,dir:n,velocity:l})=>{if(s)return;ke&&e.stopPropagation(),$n();let a=(n===g?1:-1)*(f?-1:1);we&&(a=n===m?1:-1),Un(a,we?l>b&&!(n===g||n===c):l>b&&!(n===m||n===d))}),[s,ke,$n,f,we,b,Un]),An=(0,r.useCallback)((({event:e,absX:n,absY:l,dir:a})=>{const t=a,i=Sn();if(i){if((t===g||t===c||Ge)&&!Ae)return void(Ge||Ke(!0));t!==m&&t!==d||Ae||qe(!0)}else{if((t===m||t===d||Ae)&&!Ge)return void(Ae||qe(!0));t!==g&&t!==c||Ge||Ke(!0)}const r=wn.current;if(!r)return;let s,o,u,h,b;i?(s=dn+(t===d?l:-l),o=r.scrollHeight-yn+20,u=Math.abs(s)>o,h=s>20,b=r.scrollHeight<=yn):(s=dn+(t===c?n:-n),o=r.scrollWidth-pn+20,u=Math.abs(s)>o,h=s>20,b=r.scrollWidth<=pn),b||(t!==g&&t!==m||!u)&&(t!==c&&t!==d||!h)&&(ke&&e.stopPropagation(),mn(s),fn||(bn({transition:"none"}),vn(!0)))}),[Sn,yn,pn,dn,ke,fn,Ae,Ge,wn,mn,bn,vn]),qn=(0,r.useCallback)((()=>{$n(),hn(cn)}),[$n,cn,hn]),Gn=(0,r.useCallback)((e=>{if(Ee.current?.classList.remove("image-gallery-using-mouse"),!t)switch(parseInt(String(e.keyCode||e.which||0),10)){case 37:Je()&&!Mn?.current&&an(e);break;case 39:Qe()&&!Mn?.current&&tn(e);break;case 27:Rn&&!Re&&En()}}),[t,Je,Qe,an,tn,Rn,Re,En,Mn]);Pe.current=Gn;const Kn=(0,r.useCallback)((e=>{Pe.current?.(e)}),[]),Vn=(0,r.useCallback)((()=>{Ee.current?.classList.add("image-gallery-using-mouse")}),[]),Yn=(0,r.useCallback)((e=>{_(e)&&C&&C(e)}),[C]),Xn=(0,r.useCallback)(((e,n)=>{Fe.current&&(window.clearTimeout(Fe.current),Fe.current=null),Fe.current=window.setTimeout((()=>{en(n),Pn()}),300)}),[en,Pn]),_n=(0,r.useCallback)((()=>{Fe.current&&(window.clearTimeout(Fe.current),Fe.current=null,a&&Ln())}),[a,Ln]),Zn=(0,r.useCallback)(((e,n)=>{xe&&Xn(e,n)}),[xe,Xn]),Jn=(0,r.useCallback)(((e,n)=>{_(e)&&J?.(e,n)}),[J]),Qn=(0,r.useCallback)(((e,n)=>{const l=e.target.parentNode?.parentNode;l?.blur&&l.blur(),Xe!==n&&(2===Ve?ln(n,e):en(n,e)),J&&J(e,n)}),[Xe,Ve,en,ln,J]),el=(0,r.useCallback)(((e,n)=>{e.target.blur(),Xe!==n&&(2===Ve?ln(n,e):en(n,e)),T&&T(e,n)}),[Xe,Ve,en,ln,T]),nl=(0,r.useCallback)((e=>{R&&-1===e.currentTarget.src.indexOf(R)&&(e.currentTarget.src=R)}),[R]),ll=(0,r.useCallback)(((e,n)=>{!ze.current[n]&&N&&(ze.current[n]=!0,N(e))}),[N]),al=(0,r.useCallback)((()=>{Ee.current&&($e(Ee.current.offsetWidth),De(Ee.current.offsetHeight),Ne.current&&He(Ne.current.offsetHeight))}),[]),tl=(0,r.useCallback)((e=>{e?.current&&(Le.current=new ResizeObserver($((e=>{e&&e.forEach((()=>{al()}))}),50)),Le.current.observe(e.current))}),[al]),il=(0,r.useCallback)((()=>{Le.current&&Ne.current&&(Le.current.unobserve(Ne.current),Le.current=null)}),[]),rl=(0,r.useRef)(null),sl=(0,r.useRef)(null),ol=(0,r.useRef)(null),ul=(0,r.useRef)(null),gl=(0,r.useRef)(null),cl=(0,r.useRef)(null),ml=(0,r.useRef)(null);rl.current=Vn,sl.current=Fn,ol.current=tl,ul.current=Cn,gl.current=il,cl.current=jn,ml.current=al;const dl=(0,r.useCallback)((()=>{rl.current?.()}),[]),hl=(0,r.useCallback)((()=>{sl.current?.()}),[]),bl=(0,r.useCallback)((e=>{const n=I||nl;return(0,i.jsx)(H,{description:e.description,fullscreen:e.fullscreen,handleImageLoaded:ll,isFullscreen:Rn,loading:e.loading,original:e.original,originalAlt:e.originalAlt,originalHeight:e.originalHeight,originalTitle:e.originalTitle,originalWidth:e.originalWidth,sizes:e.sizes,srcSet:e.srcSet,onImageError:n})}),[Rn,I,nl,ll]),pl=(0,r.useCallback)((e=>{const n=Q||nl;return(0,i.jsxs)("span",{className:"image-gallery-thumbnail-inner",children:[(0,i.jsx)("img",{alt:e.thumbnailAlt,className:"image-gallery-thumbnail-image",height:e.thumbnailHeight,loading:e.thumbnailLoading,src:e.thumbnail,title:e.thumbnailTitle,width:e.thumbnailWidth,onError:n}),e.thumbnailLabel&&(0,i.jsx)("div",{className:"image-gallery-thumbnail-label",children:e.thumbnailLabel})]})}),[Q,nl]),yl=(0,r.useMemo)((()=>rn({useTranslate3D:Oe,slideVertically:we})),[rn,Oe,we]),fl=(0,r.useMemo)((()=>{const e=[],n=[],l=[],{extendedItems:a,getSlideKey:t,getRealIndex:r}=sn();return a.forEach(((n,l)=>{const a=r(l),s=on(l),o=n.originalClass?` ${n.originalClass}`:"",u=n.renderItem||re||bl,g=!S||s||Me.current[a];g&&S&&!Me.current[a]&&(Me.current[a]=!0),e.push((0,i.jsx)(A,{alignment:s,index:a,originalClass:o,onClick:C,onKeyUp:Yn,onMouseLeave:z,onMouseOver:L,onTouchEnd:ee,onTouchMove:ne,onTouchStart:le,children:g?u(n):(0,i.jsx)("div",{style:{height:"100%"}})},t(l)))})),v.forEach(((e,a)=>{const t=e.thumbnailClass?` ${e.thumbnailClass}`:"",r=e.renderThumbInner||ge||pl;ye&&e.thumbnail&&n.push((0,i.jsx)(V,{index:a,isActive:Xe===a,thumbnailClass:t,onClick:e=>Qn(e,a),onFocus:e=>Zn(e,a),onKeyUp:e=>Jn(e,a),onMouseLeave:xe?_n:null,onMouseOver:e=>Zn(e,a),children:r(e)},`thumbnail-${a}`)),me&&l.push((0,i.jsx)(x,{bulletClass:e.bulletClass,index:a,isActive:Xe===a,onClick:e=>el(e,a)},`bullet-${a}`))})),{slides:e,thumbnails:n,bullets:l}}),[v,Xe,sn,on,S,ye,me,xe,bl,pl,re,ge,C,Yn,ne,ee,le,L,z,_n,Zn,Jn,Qn,el]);(0,r.useEffect)((()=>{const e=Ee.current;return Ie?window.addEventListener("keydown",Kn):e?.addEventListener("keydown",Kn),window.addEventListener("mousedown",dl),ol.current?.(Ne),ul.current?.(xn),X.forEach((e=>{document.addEventListener(e,hl)})),()=>{window.removeEventListener("mousedown",dl),window.removeEventListener("keydown",Kn),e?.removeEventListener("keydown",Kn),X.forEach((e=>{document.removeEventListener(e,hl)})),gl.current?.(),cl.current?.()}}),[Ie,Kn,dl,hl,xn]),(0,r.useEffect)((()=>{gl.current?.(),cl.current?.(),ol.current?.(Ne),ul.current?.(xn)}),[je,xn]),(0,r.useEffect)((()=>{ye?ul.current?.(xn):cl.current?.(),ml.current?.()}),[ye,xn]),(0,r.useEffect)((()=>{S&&(Me.current=[]),ml.current?.()}),[v,S]),(0,r.useEffect)((()=>{!_e&&fn&&vn(!1)}),[_e,fn,vn]),(0,r.useImperativeHandle)(n,(()=>({play:Ln,pause:Pn,togglePlay:Wn,fullScreen:In,exitFullScreen:En,toggleFullScreen:Nn,slideToIndex:nn,getCurrentIndex:()=>Xe})));const{slides:vl,thumbnails:xl,bullets:wl}=fl,Sl=u("image-gallery-slide-wrapper",Z(je),{"image-gallery-rtl":f}),kl=(0,i.jsxs)("div",{ref:Ne,className:Sl,children:[te&&te(),Ye?(0,i.jsxs)(i.Fragment,{children:[be&&(0,i.jsxs)(i.Fragment,{children:[we?ce(an,!Je()):se(an,!Je()),we?ae(tn,!Qe()):ue(tn,!Qe())]}),(0,i.jsx)(K,{className:"image-gallery-swipe",delta:0,onSwiped:Hn,onSwiping:Dn,children:(0,i.jsx)("div",{className:"image-gallery-slides",style:we?{height:Ue}:void 0,children:(0,i.jsx)("div",{className:u("image-gallery-slides-container",{vertical:we}),style:yl,children:vl})})})]}):(0,i.jsx)("div",{className:"image-gallery-slides",style:we?{height:Ue}:void 0,children:(0,i.jsx)("div",{className:u("image-gallery-slides-container",{vertical:we}),style:yl,children:vl})}),pe&&oe(Wn,zn),me&&(0,i.jsx)(w,{bullets:wl,slideVertically:we}),de&&ie(Nn,Rn),he&&(0,i.jsx)(B,{currentIndex:Xe,indexSeparator:p,totalItems:Ve})]}),Tl=u("image-gallery",l,{"fullscreen-modal":On}),Cl=u("image-gallery-content",Z(je),{fullscreen:Rn});return(0,i.jsx)("div",{ref:Ee,"aria-live":"polite",className:Tl,children:(0,i.jsxs)("div",{className:Cl,children:[("bottom"===je||"right"===je)&&kl,ye&&xl.length>0&&(0,i.jsx)(Y,{disableThumbnailSwipe:h,isRTL:f,thumbnailBarHeight:Tn(Ue),thumbnailPosition:je,thumbnails:xl,thumbnailsRef:wn,thumbnailStyle:kn(),thumbnailsWrapperRef:xn,onSwiped:qn,onSwiping:An}),("top"===je||"left"===je)&&kl]})})}));return t})()));
|
|
1
|
+
!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("react")):"function"==typeof define&&define.amd?define(["react"],n):"object"==typeof exports?exports.ImageGallery=n(require("react")):e.ImageGallery=n(e.React)}(this,(e=>(()=>{"use strict";var n={698:(e,n)=>{var l=Symbol.for("react.transitional.element"),a=Symbol.for("react.fragment");function t(e,n,a){var t=null;if(void 0!==a&&(t=""+a),void 0!==n.key&&(t=""+n.key),"key"in n)for(var i in a={},n)"key"!==i&&(a[i]=n[i]);else a=n;return n=a.ref,{$$typeof:l,type:e,key:t,ref:void 0!==n?n:null,props:a}}n.Fragment=a,n.jsx=t,n.jsxs=t},848:(e,n,l)=>{e.exports=l(698)},12:n=>{n.exports=e}},l={};function a(e){var t=l[e];if(void 0!==t)return t.exports;var i=l[e]={exports:{}};return n[e](i,i.exports,a),i.exports}a.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return a.d(n,{a:n}),n},a.d=(e,n)=>{for(var l in n)a.o(n,l)&&!a.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:n[l]})},a.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var t={};a.r(t),a.d(t,{default:()=>J});var i=a(848),r=a(12),s=a.n(r);function o(e){var n,l,a="";if("string"==typeof e||"number"==typeof e)a+=e;else if("object"==typeof e)if(Array.isArray(e)){var t=e.length;for(n=0;n<t;n++)e[n]&&(l=o(e[n]))&&(a&&(a+=" "),a+=l)}else for(l in e)e[l]&&(a&&(a+=" "),a+=l);return a}const u=function(){for(var e,n,l=0,a="",t=arguments.length;l<t;l++)(e=arguments[l])&&(n=o(e))&&(a&&(a+=" "),a+=n);return a},g="Left",c="Right",m="Up",d="Down",h={delta:10,preventScrollOnSwipe:!1,rotationAngle:0,trackMouse:!1,trackTouch:!0,swipeDuration:1/0,touchEventOptions:{passive:!0}},b={first:!0,initial:[0,0],start:0,swiping:!1,xy:[0,0]},p="mousemove",y="mouseup";function f(e,n){if(0===n)return e;const l=Math.PI/180*n;return[e[0]*Math.cos(l)+e[1]*Math.sin(l),e[1]*Math.cos(l)-e[0]*Math.sin(l)]}function v(e){const{trackMouse:n}=e,l=r.useRef(Object.assign({},b)),a=r.useRef(Object.assign({},h)),t=r.useRef(Object.assign({},a.current));let i;for(i in t.current=Object.assign({},a.current),a.current=Object.assign(Object.assign({},h),e),h)void 0===a.current[i]&&(a.current[i]=h[i]);const[s,o]=r.useMemo((()=>function(e,n){const l=n=>{const l="touches"in n;l&&n.touches.length>1||e(((e,t)=>{t.trackMouse&&!l&&(document.addEventListener(p,a),document.addEventListener(y,i));const{clientX:r,clientY:s}=l?n.touches[0]:n,o=f([r,s],t.rotationAngle);return t.onTouchStartOrOnMouseDown&&t.onTouchStartOrOnMouseDown({event:n}),Object.assign(Object.assign(Object.assign({},e),b),{initial:o.slice(),xy:o,start:n.timeStamp||0})}))},a=n=>{e(((e,l)=>{const a="touches"in n;if(a&&n.touches.length>1)return e;if(n.timeStamp-e.start>l.swipeDuration)return e.swiping?Object.assign(Object.assign({},e),{swiping:!1}):e;const{clientX:t,clientY:i}=a?n.touches[0]:n,[r,s]=f([t,i],l.rotationAngle),o=r-e.xy[0],u=s-e.xy[1],b=Math.abs(o),p=Math.abs(u),y=(n.timeStamp||0)-e.start,v=Math.sqrt(b*b+p*p)/(y||1),x=[o/(y||1),u/(y||1)],w=function(e,n,l,a){return e>n?l>0?c:g:a>0?d:m}(b,p,o,u),S="number"==typeof l.delta?l.delta:l.delta[w.toLowerCase()]||h.delta;if(b<S&&p<S&&!e.swiping)return e;const k={absX:b,absY:p,deltaX:o,deltaY:u,dir:w,event:n,first:e.first,initial:e.initial,velocity:v,vxvy:x};k.first&&l.onSwipeStart&&l.onSwipeStart(k),l.onSwiping&&l.onSwiping(k);let T=!1;return(l.onSwiping||l.onSwiped||l[`onSwiped${w}`])&&(T=!0),T&&l.preventScrollOnSwipe&&l.trackTouch&&n.cancelable&&n.preventDefault(),Object.assign(Object.assign({},e),{first:!1,eventData:k,swiping:!0})}))},t=n=>{e(((e,l)=>{let a;if(e.swiping&&e.eventData){if(n.timeStamp-e.start<l.swipeDuration){a=Object.assign(Object.assign({},e.eventData),{event:n}),l.onSwiped&&l.onSwiped(a);const t=l[`onSwiped${a.dir}`];t&&t(a)}}else l.onTap&&l.onTap({event:n});return l.onTouchEndOrOnMouseUp&&l.onTouchEndOrOnMouseUp({event:n}),Object.assign(Object.assign(Object.assign({},e),b),{eventData:a})}))},i=e=>{document.removeEventListener(p,a),document.removeEventListener(y,i),t(e)},r=(e,n)=>{let i=()=>{};if(e&&e.addEventListener){const r=Object.assign(Object.assign({},h.touchEventOptions),n.touchEventOptions),s=[["touchstart",l,r],["touchmove",a,Object.assign(Object.assign({},r),n.preventScrollOnSwipe?{passive:!1}:{})],["touchend",t,r]];s.forEach((([n,l,a])=>e.addEventListener(n,l,a))),i=()=>s.forEach((([n,l])=>e.removeEventListener(n,l)))}return i},s={ref:n=>{null!==n&&e(((e,l)=>{if(e.el===n)return e;const a={};return e.el&&e.el!==n&&e.cleanUpTouch&&(e.cleanUpTouch(),a.cleanUpTouch=void 0),l.trackTouch&&n&&(a.cleanUpTouch=r(n,l)),Object.assign(Object.assign(Object.assign({},e),{el:n}),a)}))}};return n.trackMouse&&(s.onMouseDown=l),[s,r]}((e=>l.current=e(l.current,a.current)),{trackMouse:n})),[n]);return l.current=function(e,n,l,a){return n.trackTouch&&e.el?e.cleanUpTouch?n.preventScrollOnSwipe!==l.preventScrollOnSwipe||n.touchEventOptions.passive!==l.touchEventOptions.passive?(e.cleanUpTouch(),Object.assign(Object.assign({},e),{cleanUpTouch:a(e.el,n)})):e:Object.assign(Object.assign({},e),{cleanUpTouch:a(e.el,n)}):(e.cleanUpTouch&&e.cleanUpTouch(),Object.assign(Object.assign({},e),{cleanUpTouch:void 0}))}(l.current,a.current,t.current,o),s}const x=(0,r.memo)((function({index:e,isActive:n=!1,bulletClass:l="",onClick:a}){const t=u("image-gallery-bullet",l,{active:n});return(0,i.jsx)("button",{"aria-label":`Go to Slide ${e+1}`,"aria-pressed":n?"true":"false",className:t,type:"button",onClick:a},`bullet-${e}`)})),w=(0,r.memo)((function({bullets:e=[],slideVertically:n=!1,currentIndex:l=0,maxBullets:a}){const t=(0,r.useRef)(null),[s,o]=(0,r.useState)(0),g=void 0!==a&&a<3?3:a,c=u("image-gallery-bullets",{"image-gallery-bullets-vertical":n});(0,r.useEffect)((()=>{const l=()=>{if(t.current&&g&&e.length>0){const e=t.current.querySelector(".image-gallery-bullet");if(e){const l=window.getComputedStyle(e),a=e.offsetWidth,t=parseFloat(l.marginLeft)||0,i=parseFloat(l.marginRight)||0,r=e.offsetHeight,s=parseFloat(l.marginTop)||0,u=parseFloat(l.marginBottom)||0;o(n?r+s+u:a+t+i)}}};l();const a=new ResizeObserver((()=>{l()}));return t.current&&a.observe(t.current),()=>{a.disconnect()}}),[e.length,g,n]);const m=(0,r.useMemo)((()=>{if(!g||g>=e.length||0===s)return{};const a=e.length,t=Math.floor(g/2);let i;return i=l<=t?0:l>=a-t-1?-(a-g)*s:-(l-t)*s,{transform:n?`translateY(${i}px)`:`translateX(${i}px)`,transition:"transform 0.3s ease-out"}}),[e.length,l,g,s,n]),d=(0,r.useMemo)((()=>{if(!g||g>=e.length||0===s)return{};const l=g*s;return n?{height:`${l}px`,overflow:"hidden"}:{width:`${l}px`,overflow:"hidden"}}),[g,e.length,s,n]);return e&&0!==e.length?(0,i.jsx)("div",{className:c,children:(0,i.jsx)("div",{"aria-label":"Bullet Navigation",className:"image-gallery-bullets-container",role:"navigation",style:d,children:(0,i.jsx)("div",{ref:t,className:"image-gallery-bullets-inner",style:m,children:e})})}):null})),S={left:(0,i.jsx)("polyline",{points:"15 18 9 12 15 6"}),right:(0,i.jsx)("polyline",{points:"9 18 15 12 9 6"}),top:(0,i.jsx)("polyline",{points:"6 15 12 9 18 15"}),bottom:(0,i.jsx)("polyline",{points:"6 9 12 15 18 9"}),maximize:(0,i.jsx)("path",{d:"M8 3H3v5m18 0V3h-5m0 18h5v-5M3 16v5h5"}),minimize:(0,i.jsx)("path",{d:"M8 3v5H3m18 0h-5V3m0 18v-5h5M3 16h5v5"}),play:(0,i.jsx)("polygon",{points:"5 3 19 12 5 21 5 3"}),pause:(0,i.jsxs)(s().Fragment,{children:[(0,i.jsx)("rect",{height:"16",width:"4",x:"6",y:"4"}),(0,i.jsx)("rect",{height:"16",width:"4",x:"14",y:"4"})]})},k={strokeWidth:1,viewBox:"0 0 24 24"},T=e=>{const{strokeWidth:n,viewBox:l,icon:a}={...k,...e};return(0,i.jsx)("svg",{className:"image-gallery-svg",fill:"none",stroke:"currentColor",strokeLinecap:"square",strokeLinejoin:"miter",strokeWidth:n,viewBox:l,xmlns:"http://www.w3.org/2000/svg",children:S[a]})},C=s().memo((({disabled:e,onClick:n})=>(0,i.jsx)("button",{"aria-label":"Next Slide",className:"image-gallery-icon image-gallery-bottom-nav",disabled:e,type:"button",onClick:n,children:(0,i.jsx)(T,{icon:"bottom",viewBox:"6 0 12 24"})})));C.displayName="BottomNav";const j=C,R=s().memo((({isFullscreen:e,onClick:n})=>(0,i.jsx)("button",{"aria-label":"Open Fullscreen",className:"image-gallery-icon image-gallery-fullscreen-button",type:"button",onClick:n,children:(0,i.jsx)(T,{icon:e?"minimize":"maximize",strokeWidth:2})})));R.displayName="Fullscreen";const O=R,I=s().memo((({disabled:e,onClick:n})=>(0,i.jsx)("button",{"aria-label":"Previous Slide",className:"image-gallery-icon image-gallery-left-nav",disabled:e,type:"button",onClick:n,children:(0,i.jsx)(T,{icon:"left",viewBox:"6 0 12 24"})})));I.displayName="LeftNav";const E=I,F=s().memo((({isPlaying:e,onClick:n})=>(0,i.jsx)("button",{"aria-label":"Play or Pause Slideshow",className:"image-gallery-icon image-gallery-play-button",type:"button",onClick:n,children:(0,i.jsx)(T,{icon:e?"pause":"play",strokeWidth:2})})));F.displayName="PlayPause";const N=F,z=s().memo((({disabled:e,onClick:n})=>(0,i.jsx)("button",{"aria-label":"Next Slide",className:"image-gallery-icon image-gallery-right-nav",disabled:e,type:"button",onClick:n,children:(0,i.jsx)(T,{icon:"right",viewBox:"6 0 12 24"})})));z.displayName="RightNav";const M=z,L=s().memo((({disabled:e,onClick:n})=>(0,i.jsx)("button",{"aria-label":"Previous Slide",className:"image-gallery-icon image-gallery-top-nav",disabled:e,type:"button",onClick:n,children:(0,i.jsx)(T,{icon:"top",viewBox:"6 0 12 24"})})));L.displayName="TopNav";const P=L;function $(e,n,l={}){const{leading:a=!0,trailing:t=!0}=l;let i=0,r=null,s=null,o=null;function u(){null!==s&&(e.apply(o,s),i=Date.now(),s=null,o=null)}return function(...e){const l=Date.now(),g=l-i;s=e,o=this,g>=n?(r&&(clearTimeout(r),r=null),a?u():i=l):t&&!r&&(r=setTimeout((()=>{r=null,s&&u()}),n-g))}}function W(e,n){let l;return function(...a){clearTimeout(l),l=setTimeout((()=>{e.apply(this,a)}),n)}}const B=(0,r.memo)((function({currentIndex:e,totalItems:n,indexSeparator:l=" / "}){return(0,i.jsxs)("div",{className:"image-gallery-index",children:[(0,i.jsx)("span",{className:"image-gallery-index-current",children:e+1}),(0,i.jsx)("span",{className:"image-gallery-index-separator",children:l}),(0,i.jsx)("span",{className:"image-gallery-index-total",children:n})]})})),D={description:"",fullscreen:"",isFullscreen:!1,originalAlt:"",originalHeight:"",originalWidth:"",originalTitle:"",sizes:"",srcSet:"",loading:"eager"},H=s().memo((e=>{const{description:n,fullscreen:l,handleImageLoaded:a,isFullscreen:t,onImageError:r,original:o,originalAlt:u,originalHeight:g,originalWidth:c,originalTitle:m,sizes:d,srcSet:h,loading:b}={...D,...e},p=t&&l||o;return(0,i.jsxs)(s().Fragment,{children:[(0,i.jsx)("img",{alt:u,className:"image-gallery-image",height:g,loading:b,sizes:d,src:p,srcSet:h,title:m,width:c,onError:r,onLoad:e=>a(e,o)}),n&&(0,i.jsx)("span",{className:"image-gallery-description",children:n})]})}));H.displayName="Item";const U=H,A=(0,r.memo)((function({index:e,alignment:n="",originalClass:l="",style:a={},onClick:t,onKeyUp:r,onTouchMove:s,onTouchEnd:o,onTouchStart:u,onMouseOver:g,onMouseLeave:c,children:m=null}){return(0,i.jsx)("div",{"aria-label":`Go to Slide ${e+1}`,className:`image-gallery-slide ${n} ${l}`,role:"button",style:a,tabIndex:-1,onClick:t,onFocus:g,onKeyUp:r,onMouseLeave:c,onMouseOver:g,onTouchEnd:o,onTouchMove:s,onTouchStart:u,children:m},`slide-${e}`)}));let q=!1;const G={className:"",delta:0,onSwiping:()=>{},onSwiped:()=>{}},K=e=>{const{children:n,className:l,delta:a,onSwiping:t,onSwiped:r}={...G,...e},s=v({delta:a,onSwiping:t,onSwiped:r});return(0,i.jsx)("div",{...s,className:l,children:n})},V=(0,r.memo)((function({index:e,isActive:n=!1,thumbnailClass:l="",onMouseLeave:a,onMouseOver:t,onFocus:r,onKeyUp:s,onClick:o,children:g=null}){const c=u("image-gallery-thumbnail",l,{active:n});return(0,i.jsx)("button",{"aria-label":`Go to Slide ${e+1}`,"aria-pressed":n?"true":"false",className:c,tabIndex:0,type:"button",onClick:o??void 0,onFocus:r??void 0,onKeyUp:s??void 0,onMouseLeave:a??void 0,onMouseOver:t??void 0,children:g},`thumbnail-${e}`)})),Y=(0,r.memo)((function({thumbnails:e=[],thumbnailPosition:n="bottom",thumbnailStyle:l={},thumbnailBarHeight:a={},isRTL:t=!1,disableThumbnailSwipe:r=!1,onSwiping:s,onSwiped:o,thumbnailsWrapperRef:g,thumbnailsRef:c}){const m="left"===n||"right"===n,d=u("image-gallery-thumbnails-wrapper",(e=>{const n={left:"image-gallery-thumbnails-left",right:"image-gallery-thumbnails-right",bottom:"image-gallery-thumbnails-bottom",top:"image-gallery-thumbnails-top"};return n[e]?` ${n[e]}`:""})(n),{"thumbnails-wrapper-rtl":!m&&t},{"thumbnails-swipe-horizontal":!m&&!r},{"thumbnails-swipe-vertical":m&&!r});return e&&0!==e.length?(0,i.jsx)(K,{className:d,delta:0,onSwiped:r?void 0:o??void 0,onSwiping:r?void 0:s??void 0,children:(0,i.jsx)("div",{ref:g,className:"image-gallery-thumbnails",style:a,children:(0,i.jsx)("nav",{ref:c,"aria-label":"Thumbnail Navigation",className:"image-gallery-thumbnails-container",style:l,children:e})})}):null}));!function(){if(q||"undefined"==typeof document)return;if(document.querySelector("style[data-image-gallery]"))return void(q=!0);const e=document.createElement("style");e.setAttribute("data-image-gallery",""),e.textContent="/**\n * React Image Gallery - Styles\n * \n * Design System: Base-4 spacing scale\n * Spacing: 2, 4, 8, 12, 16, 20, 24, 32, 48, 64, 80, 96, 120px\n * \n * CSS Custom Properties for theming:\n * --ig-primary-color: Primary/accent color (default: #337ab7)\n * --ig-white: Icon and text color (default: #fff)\n * --ig-black: Background color in fullscreen (default: #000)\n * --ig-background-overlay: Overlay background (default: rgba(0, 0, 0, 0.4))\n * --ig-thumbnail-size: Thumbnail dimensions (default: 96px)\n * --ig-thumbnail-size-small: Thumbnail size on small screens (default: 80px)\n * --ig-thumbnail-border-width: Thumbnail border width (default: 4px)\n * --ig-thumbnail-border-width-small: Thumbnail border on small screens (default: 3px)\n * --ig-bullet-size: Bullet size (default: 4px)\n * --ig-bullet-size-small: Bullet size on small screens (default: 3px)\n */\n\n:root {\n --ig-primary-color: #337ab7;\n --ig-white: #fff;\n --ig-black: #000;\n --ig-background-overlay: rgba(0, 0, 0, 0.4);\n --ig-thumbnail-size: 96px;\n --ig-thumbnail-size-small: 80px;\n --ig-thumbnail-border-width: 4px;\n --ig-thumbnail-border-width-small: 3px;\n --ig-bullet-size: 4px;\n --ig-bullet-size-small: 3px;\n}\n\n/* ==========================================================================\n SVG Icon Styles\n ========================================================================== */\n\n.image-gallery-icon {\n color: var(--ig-white, #fff);\n transition: all 0.3s ease-out;\n appearance: none;\n background-color: transparent;\n border: 0;\n cursor: pointer;\n outline: none;\n position: absolute;\n z-index: 4;\n filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));\n}\n\n@media (hover: hover) and (pointer: fine) {\n .image-gallery-icon:hover {\n color: var(--ig-primary-color, #337ab7);\n }\n .image-gallery-icon:hover .image-gallery-svg {\n transform: scale(1.1);\n }\n}\n\n.image-gallery-icon:focus {\n outline: 2px solid var(--ig-primary-color, #337ab7);\n}\n\n.image-gallery-using-mouse .image-gallery-icon:focus {\n outline: none;\n}\n\n/* Fullscreen & Play buttons */\n.image-gallery-fullscreen-button,\n.image-gallery-play-button {\n bottom: 0;\n padding: 20px;\n}\n\n.image-gallery-fullscreen-button .image-gallery-svg,\n.image-gallery-play-button .image-gallery-svg {\n height: 32px;\n width: 32px;\n}\n\n@media (max-width: 768px) {\n .image-gallery-fullscreen-button,\n .image-gallery-play-button {\n padding: 16px;\n }\n .image-gallery-fullscreen-button .image-gallery-svg,\n .image-gallery-play-button .image-gallery-svg {\n height: 24px;\n width: 24px;\n }\n}\n\n@media (max-width: 480px) {\n .image-gallery-fullscreen-button,\n .image-gallery-play-button {\n padding: 12px;\n }\n .image-gallery-fullscreen-button .image-gallery-svg,\n .image-gallery-play-button .image-gallery-svg {\n height: 16px;\n width: 16px;\n }\n}\n\n.image-gallery-fullscreen-button {\n right: 0;\n}\n\n.image-gallery-play-button {\n left: 0;\n}\n\n/* Top & Bottom navigation */\n.image-gallery-top-nav,\n.image-gallery-bottom-nav {\n padding: 12px;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.image-gallery-top-nav .image-gallery-svg,\n.image-gallery-bottom-nav .image-gallery-svg {\n height: 120px;\n width: 96px;\n}\n\n@media (max-width: 768px) {\n .image-gallery-top-nav .image-gallery-svg,\n .image-gallery-bottom-nav .image-gallery-svg {\n height: 72px;\n width: 48px;\n }\n}\n\n@media (max-width: 480px) {\n .image-gallery-top-nav .image-gallery-svg,\n .image-gallery-bottom-nav .image-gallery-svg {\n height: 48px;\n width: 32px;\n }\n}\n\n.image-gallery-top-nav[disabled],\n.image-gallery-bottom-nav[disabled] {\n cursor: not-allowed;\n opacity: 0.6;\n pointer-events: none;\n}\n\n.image-gallery-top-nav {\n top: 0;\n}\n\n.image-gallery-bottom-nav {\n bottom: 0;\n}\n\n/* Left & Right navigation */\n.image-gallery-left-nav,\n.image-gallery-right-nav {\n padding: 48px 12px;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.image-gallery-left-nav .image-gallery-svg,\n.image-gallery-right-nav .image-gallery-svg {\n height: 120px;\n width: 64px;\n}\n\n@media (max-width: 768px) {\n .image-gallery-left-nav .image-gallery-svg,\n .image-gallery-right-nav .image-gallery-svg {\n height: 72px;\n width: 32px;\n }\n}\n\n@media (max-width: 480px) {\n .image-gallery-left-nav .image-gallery-svg,\n .image-gallery-right-nav .image-gallery-svg {\n height: 48px;\n width: 24px;\n }\n}\n\n.image-gallery-left-nav[disabled],\n.image-gallery-right-nav[disabled] {\n cursor: not-allowed;\n opacity: 0.6;\n pointer-events: none;\n}\n\n.image-gallery-left-nav {\n left: 0;\n}\n\n.image-gallery-right-nav {\n right: 0;\n}\n\n/* ==========================================================================\n Gallery Container\n ========================================================================== */\n\n.image-gallery {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n position: relative;\n /* Prevent mobile overscroll/pull-to-refresh */\n overscroll-behavior: none;\n -webkit-overflow-scrolling: touch;\n}\n\n.image-gallery.fullscreen-modal {\n background: var(--ig-black, #000);\n bottom: 0;\n height: 100%;\n left: 0;\n position: fixed;\n right: 0;\n top: 0;\n width: 100%;\n z-index: 5;\n}\n\n.image-gallery.fullscreen-modal .image-gallery-content {\n top: 50%;\n transform: translateY(-50%);\n}\n\n/* ==========================================================================\n Gallery Content\n ========================================================================== */\n\n.image-gallery-content {\n position: relative;\n line-height: 0;\n top: 0;\n}\n\n.image-gallery-content.fullscreen {\n background: var(--ig-black, #000);\n}\n\n.image-gallery-content .image-gallery-slide .image-gallery-image {\n max-height: calc(100vh - 80px);\n}\n\n.image-gallery-content.image-gallery-thumbnails-left\n .image-gallery-slide\n .image-gallery-image,\n.image-gallery-content.image-gallery-thumbnails-right\n .image-gallery-slide\n .image-gallery-image {\n max-height: 100vh;\n}\n\n/* ==========================================================================\n Slide Wrapper\n ========================================================================== */\n\n.image-gallery-slide-wrapper {\n position: relative;\n}\n\n.image-gallery-slide-wrapper.image-gallery-thumbnails-left,\n.image-gallery-slide-wrapper.image-gallery-thumbnails-right {\n display: inline-block;\n width: calc(100% - 112px);\n}\n\n@media (max-width: 768px) {\n .image-gallery-slide-wrapper.image-gallery-thumbnails-left,\n .image-gallery-slide-wrapper.image-gallery-thumbnails-right {\n width: calc(100% - 88px);\n }\n}\n\n.image-gallery-slide-wrapper.image-gallery-rtl {\n direction: rtl;\n}\n\n.image-gallery-swipe {\n overflow: hidden;\n /* GPU acceleration */\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n /* Prevent overscroll during swipe */\n overscroll-behavior: contain;\n touch-action: pan-y pinch-zoom;\n}\n\n/* ==========================================================================\n Slides\n ========================================================================== */\n\n.image-gallery-slides {\n overflow: hidden;\n position: relative;\n touch-action: none;\n /* GPU acceleration for smooth swiping */\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n contain: layout style paint;\n isolation: isolate;\n overscroll-behavior: none;\n}\n\n/* Flex container that holds all slides and gets transformed */\n.image-gallery-slides-container {\n display: flex;\n /* GPU acceleration for smooth swiping */\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n -webkit-transform-style: preserve-3d;\n transform-style: preserve-3d;\n will-change: transform;\n}\n\n.image-gallery-slides-container.vertical {\n flex-direction: column;\n height: 100%;\n}\n\n.image-gallery-slides-container.vertical .image-gallery-slide {\n flex: 0 0 100%;\n height: 100%;\n min-height: 0;\n}\n\n.image-gallery-slides-container.vertical\n .image-gallery-slide\n .image-gallery-image {\n height: 100%;\n width: auto;\n max-width: 100%;\n}\n\n.image-gallery-slide {\n flex: 0 0 100%;\n min-width: 0;\n /* GPU acceleration for smooth swiping */\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n}\n\n.image-gallery-slide .image-gallery-image {\n width: 100%;\n object-fit: contain;\n}\n\n.image-gallery-slide .image-gallery-description {\n background: var(--ig-background-overlay, rgba(0, 0, 0, 0.4));\n bottom: 72px;\n color: var(--ig-white, #fff);\n left: 0;\n line-height: 1;\n padding: 12px 20px;\n position: absolute;\n white-space: normal;\n}\n\n@media (max-width: 768px) {\n .image-gallery-slide .image-gallery-description {\n bottom: 48px;\n font-size: 0.8em;\n padding: 8px 16px;\n }\n}\n\n/* ==========================================================================\n Bullets\n ========================================================================== */\n\n.image-gallery-bullets {\n bottom: 20px;\n left: 0;\n margin: 0 auto;\n position: absolute;\n right: 0;\n width: 80%;\n z-index: 4;\n text-align: center;\n}\n\n.image-gallery-bullets .image-gallery-bullets-container {\n margin: 0 auto;\n padding: 0;\n display: inline-block;\n}\n\n.image-gallery-bullets .image-gallery-bullets-inner {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n white-space: nowrap;\n padding: 2px 0;\n}\n\n.image-gallery-bullets-vertical .image-gallery-bullets-inner {\n flex-direction: column;\n padding: 0 2px;\n}\n\n.image-gallery-bullets .image-gallery-bullet {\n appearance: none;\n background-color: transparent;\n border: 1px solid var(--ig-white, #fff);\n border-radius: 50%;\n box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);\n cursor: pointer;\n margin: 0 4px;\n outline: none;\n width: calc(var(--ig-bullet-size, 4px) * 2 + 2px);\n height: calc(var(--ig-bullet-size, 4px) * 2 + 2px);\n padding: 0;\n flex-shrink: 0;\n transition: all 0.2s ease-out;\n}\n\n@media (max-width: 768px) {\n .image-gallery-bullets .image-gallery-bullet {\n margin: 0 3px;\n width: calc(var(--ig-bullet-size-small, 3px) * 2 + 2px);\n height: calc(var(--ig-bullet-size-small, 3px) * 2 + 2px);\n }\n}\n\n@media (max-width: 480px) {\n .image-gallery-bullets .image-gallery-bullet {\n width: 8px;\n height: 8px;\n }\n}\n\n.image-gallery-bullets .image-gallery-bullet:focus {\n transform: scale(1.2);\n background: var(--ig-primary-color, #337ab7);\n border: 1px solid var(--ig-primary-color, #337ab7);\n}\n\n.image-gallery-bullets .image-gallery-bullet.active {\n transform: scale(1.2);\n border: 1px solid var(--ig-white, #fff);\n background: var(--ig-white, #fff);\n}\n\n@media (hover: hover) and (pointer: fine) {\n .image-gallery-bullets .image-gallery-bullet:hover {\n background: var(--ig-primary-color, #337ab7);\n border: 1px solid var(--ig-primary-color, #337ab7);\n }\n .image-gallery-bullets .image-gallery-bullet.active:hover {\n background: var(--ig-primary-color, #337ab7);\n }\n}\n\n/* Vertical bullets */\n.image-gallery-bullets.image-gallery-bullets-vertical {\n left: 20px;\n right: auto;\n bottom: auto;\n width: auto;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.image-gallery-bullets.image-gallery-bullets-vertical .image-gallery-bullet {\n display: block;\n margin: 12px 0;\n}\n\n@media (max-width: 768px) {\n .image-gallery-bullets.image-gallery-bullets-vertical .image-gallery-bullet {\n margin: 8px 0;\n padding: var(--ig-bullet-size-small, 3px);\n }\n}\n\n@media (max-width: 480px) {\n .image-gallery-bullets.image-gallery-bullets-vertical .image-gallery-bullet {\n padding: 3px;\n }\n}\n\n/* ==========================================================================\n Thumbnails Wrapper\n ========================================================================== */\n\n.image-gallery-thumbnails-wrapper {\n position: relative;\n}\n\n.image-gallery-thumbnails-wrapper.thumbnails-swipe-horizontal {\n touch-action: pan-y;\n}\n\n.image-gallery-thumbnails-wrapper.thumbnails-swipe-vertical {\n touch-action: pan-x;\n}\n\n.image-gallery-thumbnails-wrapper.thumbnails-wrapper-rtl {\n direction: rtl;\n}\n\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right {\n display: inline-block;\n vertical-align: top;\n width: var(--ig-thumbnail-size, 96px);\n}\n\n@media (max-width: 768px) {\n .image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,\n .image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right {\n width: var(--ig-thumbnail-size-small, 80px);\n }\n}\n\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left\n .image-gallery-thumbnails,\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right\n .image-gallery-thumbnails {\n height: 100%;\n width: 100%;\n left: 0;\n padding: 0;\n position: absolute;\n top: 0;\n}\n\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left\n .image-gallery-thumbnails\n .image-gallery-thumbnail,\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right\n .image-gallery-thumbnails\n .image-gallery-thumbnail {\n display: block;\n margin-right: 0;\n padding: 0;\n}\n\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left\n .image-gallery-thumbnails\n .image-gallery-thumbnail\n + .image-gallery-thumbnail,\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right\n .image-gallery-thumbnails\n .image-gallery-thumbnail\n + .image-gallery-thumbnail {\n margin-left: 0;\n margin-top: 2px;\n}\n\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right {\n margin: 0 4px;\n}\n\n@media (max-width: 768px) {\n .image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,\n .image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right {\n margin: 0 4px;\n }\n}\n\n/* ==========================================================================\n Thumbnails\n ========================================================================== */\n\n.image-gallery-thumbnails {\n overflow: hidden;\n padding: 4px 0;\n}\n\n@media (max-width: 768px) {\n .image-gallery-thumbnails {\n padding: 4px 0;\n }\n}\n\n.image-gallery-thumbnails .image-gallery-thumbnails-container {\n cursor: pointer;\n text-align: center;\n white-space: nowrap;\n}\n\n.image-gallery-thumbnail {\n display: inline-block;\n border: var(--ig-thumbnail-border-width, 4px) solid transparent;\n transition: border 0.3s ease-out;\n width: var(--ig-thumbnail-size, 96px);\n background: transparent;\n padding: 0;\n}\n\n@media (max-width: 768px) {\n .image-gallery-thumbnail {\n border: var(--ig-thumbnail-border-width-small, 3px) solid transparent;\n width: var(--ig-thumbnail-size-small, 80px);\n }\n}\n\n.image-gallery-thumbnail + .image-gallery-thumbnail {\n margin-left: 2px;\n}\n\n.image-gallery-thumbnail .image-gallery-thumbnail-inner {\n display: block;\n position: relative;\n}\n\n.image-gallery-thumbnail .image-gallery-thumbnail-image {\n vertical-align: middle;\n width: 100%;\n line-height: 0;\n}\n\n.image-gallery-thumbnail.active,\n.image-gallery-thumbnail:focus {\n outline: none;\n border: var(--ig-thumbnail-border-width, 4px) solid\n var(--ig-primary-color, #337ab7);\n}\n\n@media (max-width: 768px) {\n .image-gallery-thumbnail.active,\n .image-gallery-thumbnail:focus {\n border: var(--ig-thumbnail-border-width-small, 3px) solid\n var(--ig-primary-color, #337ab7);\n }\n}\n\n@media (hover: hover) and (pointer: fine) {\n .image-gallery-thumbnail:hover {\n outline: none;\n border: var(--ig-thumbnail-border-width, 4px) solid\n var(--ig-primary-color, #337ab7);\n }\n}\n\n@media (hover: hover) and (pointer: fine) and (max-width: 768px) {\n .image-gallery-thumbnail:hover {\n border: var(--ig-thumbnail-border-width-small, 3px) solid\n var(--ig-primary-color, #337ab7);\n }\n}\n\n/* ==========================================================================\n Thumbnail Label\n ========================================================================== */\n\n.image-gallery-thumbnail-label {\n box-sizing: border-box;\n color: var(--ig-white, #fff);\n font-size: 1em;\n left: 0;\n line-height: 1em;\n padding: 5%;\n position: absolute;\n top: 50%;\n text-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);\n transform: translateY(-50%);\n white-space: normal;\n width: 100%;\n}\n\n@media (max-width: 768px) {\n .image-gallery-thumbnail-label {\n font-size: 0.8em;\n line-height: 0.8em;\n }\n}\n\n/* ==========================================================================\n Index Display\n ========================================================================== */\n\n.image-gallery-index {\n background: var(--ig-background-overlay, rgba(0, 0, 0, 0.4));\n color: var(--ig-white, #fff);\n line-height: 1;\n padding: 10px 20px;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 4;\n}\n\n@media (max-width: 768px) {\n .image-gallery-index {\n font-size: 0.8em;\n padding: 5px 10px;\n }\n}\n",document.head.appendChild(e),q=!0}();const X=["fullscreenchange","MSFullscreenChange","mozfullscreenchange","webkitfullscreenchange"];function _(e){const n=parseInt(String(e.keyCode||e.which||0),10);return 13===n||32===n}function Z(e){return{left:" image-gallery-thumbnails-left",right:" image-gallery-thumbnails-right",bottom:" image-gallery-thumbnails-bottom",top:" image-gallery-thumbnails-top"}[e]||""}const J=(0,r.forwardRef)((function(e,n){const{additionalClass:l="",autoPlay:a=!1,disableKeyDown:t=!1,disableSwipe:s=!1,disableThumbnailScroll:o=!1,disableThumbnailSwipe:h=!1,flickThreshold:b=.4,indexSeparator:p=" / ",infinite:y=!0,isRTL:f=!1,items:v,lazyLoad:S=!1,onBeforeSlide:k,onBulletClick:T,onClick:C,onErrorImageURL:R="",onImageError:I,onImageLoad:F,onMouseLeave:z,onMouseOver:L,onPause:D,onPlay:H,onScreenChange:q,onSlide:G,onThumbnailClick:J,onThumbnailError:Q,onTouchEnd:ee,onTouchMove:ne,onTouchStart:le,renderBottomNav:ae=(e,n)=>(0,i.jsx)(j,{disabled:n,onClick:e}),renderCustomControls:te,renderFullscreenButton:ie=(e,n)=>(0,i.jsx)(O,{isFullscreen:n,onClick:e}),renderItem:re,renderLeftNav:se=(e,n)=>(0,i.jsx)(E,{disabled:n,onClick:e}),renderPlayPauseButton:oe=(e,n)=>(0,i.jsx)(N,{isPlaying:n,onClick:e}),renderRightNav:ue=(e,n)=>(0,i.jsx)(M,{disabled:n,onClick:e}),renderThumbInner:ge,renderTopNav:ce=(e,n)=>(0,i.jsx)(P,{disabled:n,onClick:e}),showBullets:me=!1,maxBullets:de,showFullscreenButton:he=!0,showIndex:be=!1,showNav:pe=!0,showPlayButton:ye=!0,showThumbnails:fe=!0,slideDuration:ve=450,slideInterval:xe=3e3,slideOnThumbnailOver:we=!1,slideVertically:Se=!1,startIndex:ke=0,stopPropagation:Te=!1,swipeThreshold:Ce=30,swipingTransitionDuration:je=0,thumbnailPosition:Re="bottom",useBrowserFullscreen:Oe=!0,useTranslate3D:Ie=!0,useWindowKeyDown:Ee=!0}=e,Fe=(0,r.useRef)(null),Ne=(0,r.useRef)(null),ze=(0,r.useRef)(null),Me=(0,r.useRef)({}),Le=(0,r.useRef)([]),Pe=(0,r.useRef)(null),$e=(0,r.useRef)(null),[We,Be]=(0,r.useState)(0),[De,He]=(0,r.useState)(0),[Ue,Ae]=(0,r.useState)(0),[qe,Ge]=(0,r.useState)(!1),[Ke,Ve]=(0,r.useState)(!1),Ye=v.length,Xe=Ye>=2,{currentIndex:_e,isTransitioning:Ze,currentSlideOffset:Je,canSlideLeft:Qe,canSlideRight:en,slideToIndex:nn,slideToIndexCore:ln,slideToIndexWithStyleReset:an,slideLeft:tn,slideRight:rn,getContainerStyle:sn,getExtendedSlides:on,getAlignmentClass:un,setCurrentSlideOffset:gn,setSlideStyle:cn}=function({items:e,startIndex:n=0,infinite:l=!0,isRTL:a=!1,slideDuration:t=450,onSlide:i,onBeforeSlide:s}){const[o,u]=(0,r.useState)(n),[g,c]=(0,r.useState)(n),[m,d]=(0,r.useState)(!1),[h,b]=(0,r.useState)(0),[p,y]=(0,r.useState)(l&&e.length>1?n+1:n),[f,v]=(0,r.useState)({transition:`all ${t}ms ease-out`}),x=(0,r.useRef)(null),w=(0,r.useRef)(null),S=(0,r.useRef)(!1),k=e.length,T=k>=2,C=l&&k>1?k+2:k;(0,r.useEffect)((()=>()=>{x.current&&window.clearTimeout(x.current),w.current&&window.clearTimeout(w.current)}),[]),(0,r.useEffect)((()=>{u(n),y(l&&e.length>1?n+1:n),v({transition:"none"})}),[e,n,l]);const j=(0,r.useCallback)((()=>o>0),[o]),R=(0,r.useCallback)((()=>o<k-1),[o,k]),O=(0,r.useCallback)((()=>l||(a?R():j())),[l,a,R,j]),I=(0,r.useCallback)((()=>l||(a?j():R())),[l,a,R,j]),E=(0,r.useCallback)((()=>{x.current=window.setTimeout((()=>{m&&(d(!1),i&&i(o))}),t+50)}),[m,o,t,i]),F=(0,r.useCallback)((e=>l&&k>1?e+1:e),[l,k]),N=(0,r.useCallback)(((e,n)=>{S.current=!0,v({transition:"none"}),y(n),w.current=window.setTimeout((()=>{v({transition:`all ${t}ms ease-out`}),S.current=!1}),50)}),[t]),z=(0,r.useCallback)(((e,n,a=!1)=>{if((m||S.current)&&!a)return;const r=k-1;let g,h=e,p=!1,f=null;e<0?(h=r,p=!0,f="start"):e>r&&(h=0,p=!0,f="end"),g=l&&k>1?p&&"start"===f?0:p&&"end"===f?C-1:h+1:h,s&&h!==o&&s(h),c(o),u(h),y(g),d(h!==o||p),b(0),v({transition:`all ${t}ms ease-out`}),l&&k>1&&p&&(x.current=window.setTimeout((()=>{d(!1),i&&i(h);const e=F(h);N(h,e)}),t+20))}),[o,k,C,t,s,i,m,l,F,N]),M=(0,r.useRef)($(((e,n)=>{z(e,n,!1)}),t,{trailing:!1}));(0,r.useEffect)((()=>{M.current=$(((e,n)=>{z(e,n,!1)}),t,{trailing:!1})}),[t,z]);const L=(0,r.useCallback)(((e,n)=>{M.current(e,n)}),[]),P=(0,r.useCallback)(((e,n)=>{b((n=>n+(o>e?.001:-.001))),v({transition:"none"}),window.setTimeout((()=>{z(e,n)}),25)}),[o,z]),W=(0,r.useCallback)((e=>{const n=o+("left"==(a?"right":"left")?-1:1);m||S.current||(2===k?P(n,e):L(n,e))}),[a,o,m,k,P,L]),B=(0,r.useCallback)((e=>{const n=o+("left"==(a?"left":"right")?-1:1);m||S.current||(2===k?P(n,e):L(n,e))}),[a,o,m,k,P,L]),D=(0,r.useCallback)((({useTranslate3D:e=!0,slideVertically:n=!1}={})=>{const l=-(100*p-h*(a?-1:1)),t=n?e?`translate3d(0, ${l}%, 0)`:`translate(0, ${l}%)`:e?`translate3d(${l}%, 0, 0)`:`translate(${l}%, 0)`;return{transform:t,WebkitTransform:t,MozTransform:t,msTransform:t,OTransform:t,...f}}),[p,h,f,a]),H=(0,r.useCallback)((()=>{if(!l||k<=1)return{extendedItems:e,getSlideKey:e=>`slide-${e}`,getRealIndex:e=>e};const n=[e[k-1],...e,e[0]];return{extendedItems:n,getSlideKey:e=>0===e?"slide-clone-last":e===n.length-1?"slide-clone-first":"slide-"+(e-1),getRealIndex:e=>0===e?k-1:e===n.length-1?0:e-1}}),[e,k,l]),U=(0,r.useCallback)((e=>{const{getRealIndex:n}=H(),l=n(e);return l===o?"image-gallery-center":l===(o-1+k)%k?"image-gallery-left":l===(o+1)%k?"image-gallery-right":""}),[o,k,H]);return(0,r.useEffect)((()=>{m&&!S.current&&E()}),[m,E]),{currentIndex:o,previousIndex:g,displayIndex:p,isTransitioning:m,currentSlideOffset:h,slideStyle:f,canSlide:T,canSlideLeft:O,canSlideRight:I,canSlidePrevious:j,canSlideNext:R,slideToIndex:L,slideToIndexCore:z,slideToIndexWithStyleReset:P,slideLeft:W,slideRight:B,getContainerStyle:D,getExtendedSlides:H,getAlignmentClass:U,setCurrentSlideOffset:b,setSlideStyle:v,setIsTransitioning:d,totalDisplaySlides:C}}({items:v,startIndex:ke,infinite:y,isRTL:f,slideDuration:ve,onSlide:G,onBeforeSlide:k}),{thumbsTranslate:mn,setThumbsTranslate:dn,thumbsSwipedTranslate:hn,setThumbsSwipedTranslate:bn,setThumbsStyle:pn,thumbnailsWrapperWidth:yn,thumbnailsWrapperHeight:fn,isSwipingThumbnail:vn,setIsSwipingThumbnail:xn,thumbnailsWrapperRef:wn,thumbnailsRef:Sn,isThumbnailVertical:kn,getThumbnailStyle:Tn,getThumbnailBarHeight:Cn,initResizeObserver:jn,removeResizeObserver:Rn}=function({currentIndex:e,items:n,thumbnailPosition:l="bottom",disableThumbnailScroll:a=!1,slideDuration:t=450,isRTL:i=!1,useTranslate3D:s=!0}){const[o,u]=(0,r.useState)(0),[g,c]=(0,r.useState)(0),[m,d]=(0,r.useState)({transition:`all ${t}ms ease-out`}),[h,b]=(0,r.useState)(0),[p,y]=(0,r.useState)(0),[f,v]=(0,r.useState)(!1),x=(0,r.useRef)(null),w=(0,r.useRef)(null),S=(0,r.useRef)(null),k=(0,r.useRef)(e),T=(0,r.useCallback)((()=>"left"===l||"right"===l),[l]),C=(0,r.useCallback)((e=>{if(a)return 0;const l=w.current;if(!l)return 0;let t;if(T()){if(l.scrollHeight<=p)return 0;t=l.scrollHeight-p}else{if(l.scrollWidth<=h||h<=0)return 0;t=l.scrollWidth-h}return e*(t/(n.length-1))}),[a,n.length,h,p,T]),j=(0,r.useCallback)((()=>{if(f)return;const n=-C(e);d({transition:`all ${t}ms ease-out`}),0===e?(u(0),c(0)):(u(n),c(n))}),[e,C,f,t]);(0,r.useEffect)((()=>{k.current!==e&&(k.current=e,j())}),[e,j]);const R=(0,r.useRef)(l);(0,r.useEffect)((()=>{if(R.current!==l){R.current=l,d({transition:"none"}),u(0),c(0);const a=()=>{if(!x.current||!w.current)return;const a=x.current.getBoundingClientRect(),i=a.width,r=a.height;b(i),y(r);const s="left"===l||"right"===l,o=w.current;let g;if(s){if(o.scrollHeight<=r)return void d({transition:`all ${t}ms ease-out`});g=o.scrollHeight-r}else{if(o.scrollWidth<=i)return void d({transition:`all ${t}ms ease-out`});g=o.scrollWidth-i}const m=g/(n.length-1),h=-e*m;u(h),c(h),requestAnimationFrame((()=>{d({transition:`all ${t}ms ease-out`})}))};requestAnimationFrame((()=>{requestAnimationFrame((()=>{setTimeout(a,100)}))}))}}),[l,e,n.length,t]);const O=(0,r.useCallback)((()=>{const e=i?-1*o:o;let n;return n=T()?s?`translate3d(0, ${o}px, 0)`:`translate(0, ${o}px)`:s?`translate3d(${e}px, 0, 0)`:`translate(${e}px, 0)`,{WebkitTransform:n,MozTransform:n,msTransform:n,OTransform:n,transform:n,...m}}),[o,m,i,s,T]),I=(0,r.useCallback)((e=>T()?{height:e}:{}),[T]),E=(0,r.useCallback)((e=>{e?.current&&(S.current=new ResizeObserver(W((e=>{e&&e.forEach((e=>{b(e.contentRect.width),y(e.contentRect.height)}))}),50)),S.current.observe(e.current))}),[]),F=(0,r.useCallback)((()=>{S.current&&x.current&&(S.current.unobserve(x.current),S.current=null)}),[]);(0,r.useEffect)((()=>{if(0===h&&0===p)return;if(f)return;const l=w.current;if(!l)return;let a;if(T()){if(l.scrollHeight<=p)return u(0),void c(0);a=l.scrollHeight-p}else{if(l.scrollWidth<=h)return u(0),void c(0);a=l.scrollWidth-h}const t=a/(n.length-1),i=-e*t;u(i),c(i)}),[h,p,e,n.length,f,T]),(0,r.useEffect)((()=>()=>{F()}),[F]);const N=(0,r.useCallback)((()=>{v(!0),c(o),d({transition:`all ${t}ms ease-out`})}),[o,t]),z=(0,r.useCallback)((()=>{v(!1)}),[]);return{thumbsTranslate:o,setThumbsTranslate:u,thumbsSwipedTranslate:g,setThumbsSwipedTranslate:c,thumbsStyle:m,setThumbsStyle:d,thumbnailsWrapperWidth:h,thumbnailsWrapperHeight:p,isSwipingThumbnail:f,setIsSwipingThumbnail:v,thumbnailsWrapperRef:x,thumbnailsRef:w,isThumbnailVertical:T,getThumbsTranslate:C,getThumbnailStyle:O,getThumbnailBarHeight:I,slideThumbnailBar:j,initResizeObserver:E,removeResizeObserver:F,handleThumbnailSwipeEnd:N,resetSwipingThumbnail:z}}({currentIndex:_e,items:v,thumbnailPosition:Re,disableThumbnailScroll:o,slideDuration:ve,isRTL:f,useTranslate3D:Ie}),{isFullscreen:On,modalFullscreen:In,fullScreen:En,exitFullScreen:Fn,toggleFullScreen:Nn,handleScreenChange:zn}=function({useBrowserFullscreen:e=!0,onScreenChange:n,galleryRef:l}){const[a,t]=(0,r.useState)(!1),[i,s]=(0,r.useState)(!1),o=(0,r.useCallback)((()=>{const a=document,i=a.fullscreenElement||a.msFullscreenElement||a.mozFullScreenElement||a.webkitFullscreenElement,r=l?.current===i;n&&n(r),e&&t(r)}),[l,e,n]),u=(0,r.useCallback)((e=>{s(e),n&&n(e)}),[n]),g=(0,r.useCallback)((()=>{const n=l?.current;n&&(e?n.requestFullscreen?n.requestFullscreen():n.msRequestFullscreen?n.msRequestFullscreen():n.mozRequestFullScreen?n.mozRequestFullScreen():n.webkitRequestFullscreen?n.webkitRequestFullscreen():u(!0):u(!0),t(!0))}),[l,e,u]),c=(0,r.useCallback)((()=>{if(!a)return;const n=document;e?n.exitFullscreen?n.exitFullscreen():n.webkitExitFullscreen?n.webkitExitFullscreen():n.mozCancelFullScreen?n.mozCancelFullScreen():n.msExitFullscreen?n.msExitFullscreen():u(!1):u(!1),t(!1)}),[a,e,u]),m=(0,r.useCallback)((()=>{a?c():g()}),[a,c,g]);return{isFullscreen:a,modalFullscreen:i,fullScreen:g,exitFullScreen:c,toggleFullScreen:m,handleScreenChange:o}}({useBrowserFullscreen:Oe,onScreenChange:q,galleryRef:Fe}),{isPlaying:Mn,playPauseIntervalRef:Ln,play:Pn,pause:$n,togglePlay:Wn}=function({autoPlay:e=!1,slideInterval:n=3e3,slideDuration:l=450,infinite:a=!0,totalSlides:t,currentIndex:i,canSlideRight:s,slideToIndexCore:o,slideToIndexWithStyleReset:u,onPlay:g,onPause:c}){const[m,d]=(0,r.useState)(!1),h=(0,r.useRef)(null),b=(0,r.useRef)(null),p=(0,r.useCallback)((()=>{if(a||s()){const e=i+1;2===t?u(e):o(e)}else h.current&&(clearInterval(h.current),h.current=null,d(!1),c&&c(i))}),[a,s,i,t,o,u,c]);b.current=p;const y=(0,r.useCallback)(((e=!0)=>{h.current||(d(!0),h.current=setInterval((()=>b.current?.()),Math.max(n,l)),g&&e&&g(i))}),[n,l,g,i]),f=(0,r.useCallback)(((e=!0)=>{h.current&&(clearInterval(h.current),h.current=null,d(!1),c&&e&&c(i))}),[c,i]),v=(0,r.useCallback)((()=>{h.current?f():y()}),[y,f]),x=(0,r.useRef)(y),w=(0,r.useRef)(f);return x.current=y,w.current=f,(0,r.useEffect)((()=>{m&&(w.current(!1),x.current(!1))}),[n,l,m]),(0,r.useEffect)((()=>{e&&!h.current&&x.current()}),[e]),(0,r.useEffect)((()=>()=>{h.current&&(clearInterval(h.current),h.current=null)}),[]),{isPlaying:m,playPauseIntervalRef:h,play:y,pause:f,togglePlay:v}}({autoPlay:a,slideInterval:xe,slideDuration:ve,infinite:y,totalSlides:Ye,currentIndex:_e,canSlideRight:en,slideToIndexCore:ln,slideToIndexWithStyleReset:an,onPlay:H,onPause:D}),Bn=(0,r.useCallback)((()=>{qe&&Ge(!1),Ke&&Ve(!1)}),[qe,Ke]),Dn=(0,r.useCallback)((()=>Math.abs(Je)>Ce),[Je,Ce]),Hn=(0,r.useCallback)((({event:e,absX:n,absY:l,dir:a})=>{const t=a;if((t!==m&&t!==d&&!qe||Ke||(qe||Ge(!0),Se))&&(t!==g&&t!==c||Ke||Ve(!0),!s))if(Te&&e.preventDefault(),Ze)gn(0);else{if((t===g||t===c)&&Se)return;if((t===m||t===d)&&!Se)return;const e={[g]:-1,[c]:1,[m]:-1,[d]:1}[t];let a=n/We*100;Se&&(a=l/De*100),Math.abs(a)>=100&&(a=100);const i={transition:`transform ${je}ms ease-out`};gn(e*a),cn(i)}}),[s,Te,Ze,We,De,Se,je,qe,Ke,gn,cn]),Un=(0,r.useCallback)(((e,n)=>{let l=_e;!Dn()&&!n||Ze||(l+=e),(-1===e&&!Qe()||1===e&&!en())&&(l=_e),ln(l)}),[_e,Ze,Dn,Qe,en,ln]),An=(0,r.useCallback)((({event:e,dir:n,velocity:l})=>{if(s)return;Te&&e.stopPropagation(),Bn();let a=(n===g?1:-1)*(f?-1:1);Se&&(a=n===m?1:-1),Un(a,Se?l>b&&!(n===g||n===c):l>b&&!(n===m||n===d))}),[s,Te,Bn,f,Se,b,Un]),qn=(0,r.useCallback)((({event:e,absX:n,absY:l,dir:a})=>{const t=a,i=kn();if(i){if((t===g||t===c||Ke)&&!qe)return void(Ke||Ve(!0));t!==m&&t!==d||qe||Ge(!0)}else{if((t===m||t===d||qe)&&!Ke)return void(qe||Ge(!0));t!==g&&t!==c||Ke||Ve(!0)}const r=Sn.current;if(!r)return;let s,o,u,h,b;i?(s=hn+(t===d?l:-l),o=r.scrollHeight-fn+20,u=Math.abs(s)>o,h=s>20,b=r.scrollHeight<=fn):(s=hn+(t===c?n:-n),o=r.scrollWidth-yn+20,u=Math.abs(s)>o,h=s>20,b=r.scrollWidth<=yn),b||(t!==g&&t!==m||!u)&&(t!==c&&t!==d||!h)&&(Te&&e.stopPropagation(),dn(s),vn||(pn({transition:"none"}),xn(!0)))}),[kn,fn,yn,hn,Te,vn,qe,Ke,Sn,dn,pn,xn]),Gn=(0,r.useCallback)((()=>{Bn(),bn(mn)}),[Bn,mn,bn]),Kn=(0,r.useCallback)((e=>{if(Fe.current?.classList.remove("image-gallery-using-mouse"),!t)switch(parseInt(String(e.keyCode||e.which||0),10)){case 37:Qe()&&!Ln?.current&&tn(e);break;case 39:en()&&!Ln?.current&&rn(e);break;case 27:On&&!Oe&&Fn()}}),[t,Qe,en,tn,rn,On,Oe,Fn,Ln]);$e.current=Kn;const Vn=(0,r.useCallback)((e=>{$e.current?.(e)}),[]),Yn=(0,r.useCallback)((()=>{Fe.current?.classList.add("image-gallery-using-mouse")}),[]),Xn=(0,r.useCallback)((e=>{_(e)&&C&&C(e)}),[C]),_n=(0,r.useCallback)(((e,n)=>{ze.current&&(window.clearTimeout(ze.current),ze.current=null),ze.current=window.setTimeout((()=>{nn(n),$n()}),300)}),[nn,$n]),Zn=(0,r.useCallback)((()=>{ze.current&&(window.clearTimeout(ze.current),ze.current=null,a&&Pn())}),[a,Pn]),Jn=(0,r.useCallback)(((e,n)=>{we&&_n(e,n)}),[we,_n]),Qn=(0,r.useCallback)(((e,n)=>{_(e)&&J?.(e,n)}),[J]),el=(0,r.useCallback)(((e,n)=>{const l=e.target.parentNode?.parentNode;l?.blur&&l.blur(),_e!==n&&(2===Ye?an(n,e):nn(n,e)),J&&J(e,n)}),[_e,Ye,nn,an,J]),nl=(0,r.useCallback)(((e,n)=>{e.target.blur(),_e!==n&&(2===Ye?an(n,e):nn(n,e)),T&&T(e,n)}),[_e,Ye,nn,an,T]),ll=(0,r.useCallback)((e=>{R&&-1===e.currentTarget.src.indexOf(R)&&(e.currentTarget.src=R)}),[R]),al=(0,r.useCallback)(((e,n)=>{!Me.current[n]&&F&&(Me.current[n]=!0,F(e))}),[F]),tl=(0,r.useCallback)((()=>{Fe.current&&(Be(Fe.current.offsetWidth),He(Fe.current.offsetHeight),Ne.current&&Ae(Ne.current.offsetHeight))}),[]),il=(0,r.useCallback)((e=>{e?.current&&(Pe.current=new ResizeObserver(W((e=>{e&&e.forEach((()=>{tl()}))}),50)),Pe.current.observe(e.current))}),[tl]),rl=(0,r.useCallback)((()=>{Pe.current&&Ne.current&&(Pe.current.unobserve(Ne.current),Pe.current=null)}),[]),sl=(0,r.useRef)(null),ol=(0,r.useRef)(null),ul=(0,r.useRef)(null),gl=(0,r.useRef)(null),cl=(0,r.useRef)(null),ml=(0,r.useRef)(null),dl=(0,r.useRef)(null);sl.current=Yn,ol.current=zn,ul.current=il,gl.current=jn,cl.current=rl,ml.current=Rn,dl.current=tl;const hl=(0,r.useCallback)((()=>{sl.current?.()}),[]),bl=(0,r.useCallback)((()=>{ol.current?.()}),[]),pl=(0,r.useCallback)((e=>{const n=I||ll;return(0,i.jsx)(U,{description:e.description,fullscreen:e.fullscreen,handleImageLoaded:al,isFullscreen:On,loading:e.loading,original:e.original,originalAlt:e.originalAlt,originalHeight:e.originalHeight,originalTitle:e.originalTitle,originalWidth:e.originalWidth,sizes:e.sizes,srcSet:e.srcSet,onImageError:n})}),[On,I,ll,al]),yl=(0,r.useCallback)((e=>{const n=Q||ll;return(0,i.jsxs)("span",{className:"image-gallery-thumbnail-inner",children:[(0,i.jsx)("img",{alt:e.thumbnailAlt,className:"image-gallery-thumbnail-image",height:e.thumbnailHeight,loading:e.thumbnailLoading,src:e.thumbnail,title:e.thumbnailTitle,width:e.thumbnailWidth,onError:n}),e.thumbnailLabel&&(0,i.jsx)("div",{className:"image-gallery-thumbnail-label",children:e.thumbnailLabel})]})}),[Q,ll]),fl=(0,r.useMemo)((()=>sn({useTranslate3D:Ie,slideVertically:Se})),[sn,Ie,Se]),vl=(0,r.useMemo)((()=>{const e=[],n=[],l=[],{extendedItems:a,getSlideKey:t,getRealIndex:r}=on();return a.forEach(((n,l)=>{const a=r(l),s=un(l),o=n.originalClass?` ${n.originalClass}`:"",u=n.renderItem||re||pl,g=!S||s||Le.current[a];g&&S&&!Le.current[a]&&(Le.current[a]=!0),e.push((0,i.jsx)(A,{alignment:s,index:a,originalClass:o,onClick:C,onKeyUp:Xn,onMouseLeave:z,onMouseOver:L,onTouchEnd:ee,onTouchMove:ne,onTouchStart:le,children:g?u(n):(0,i.jsx)("div",{style:{height:"100%"}})},t(l)))})),v.forEach(((e,a)=>{const t=e.thumbnailClass?` ${e.thumbnailClass}`:"",r=e.renderThumbInner||ge||yl;fe&&e.thumbnail&&n.push((0,i.jsx)(V,{index:a,isActive:_e===a,thumbnailClass:t,onClick:e=>el(e,a),onFocus:e=>Jn(e,a),onKeyUp:e=>Qn(e,a),onMouseLeave:we?Zn:null,onMouseOver:e=>Jn(e,a),children:r(e)},`thumbnail-${a}`)),me&&l.push((0,i.jsx)(x,{bulletClass:e.bulletClass,index:a,isActive:_e===a,onClick:e=>nl(e,a)},`bullet-${a}`))})),{slides:e,thumbnails:n,bullets:l}}),[v,_e,on,un,S,fe,me,we,pl,yl,re,ge,C,Xn,ne,ee,le,L,z,Zn,Jn,Qn,el,nl]);(0,r.useEffect)((()=>{const e=Fe.current;return Ee?window.addEventListener("keydown",Vn):e?.addEventListener("keydown",Vn),window.addEventListener("mousedown",hl),ul.current?.(Ne),gl.current?.(wn),X.forEach((e=>{document.addEventListener(e,bl)})),()=>{window.removeEventListener("mousedown",hl),window.removeEventListener("keydown",Vn),e?.removeEventListener("keydown",Vn),X.forEach((e=>{document.removeEventListener(e,bl)})),cl.current?.(),ml.current?.()}}),[Ee,Vn,hl,bl,wn]),(0,r.useEffect)((()=>{cl.current?.(),ml.current?.(),ul.current?.(Ne),gl.current?.(wn)}),[Re,wn]),(0,r.useEffect)((()=>{fe?gl.current?.(wn):ml.current?.(),dl.current?.()}),[fe,wn]),(0,r.useEffect)((()=>{S&&(Le.current=[]),dl.current?.()}),[v,S]),(0,r.useEffect)((()=>{!Ze&&vn&&xn(!1)}),[Ze,vn,xn]),(0,r.useImperativeHandle)(n,(()=>({play:Pn,pause:$n,togglePlay:Wn,fullScreen:En,exitFullScreen:Fn,toggleFullScreen:Nn,slideToIndex:ln,getCurrentIndex:()=>_e})));const{slides:xl,thumbnails:wl,bullets:Sl}=vl,kl=u("image-gallery-slide-wrapper",Z(Re),{"image-gallery-rtl":f}),Tl=(0,i.jsxs)("div",{ref:Ne,className:kl,children:[te&&te(),Xe?(0,i.jsxs)(i.Fragment,{children:[pe&&(0,i.jsxs)(i.Fragment,{children:[Se?ce(tn,!Qe()):se(tn,!Qe()),Se?ae(rn,!en()):ue(rn,!en())]}),(0,i.jsx)(K,{className:"image-gallery-swipe",delta:0,onSwiped:An,onSwiping:Hn,children:(0,i.jsx)("div",{className:"image-gallery-slides",style:Se?{height:Ue}:void 0,children:(0,i.jsx)("div",{className:u("image-gallery-slides-container",{vertical:Se}),style:fl,children:xl})})})]}):(0,i.jsx)("div",{className:"image-gallery-slides",style:Se?{height:Ue}:void 0,children:(0,i.jsx)("div",{className:u("image-gallery-slides-container",{vertical:Se}),style:fl,children:xl})}),ye&&oe(Wn,Mn),me&&(0,i.jsx)(w,{bullets:Sl,currentIndex:_e,maxBullets:de,slideVertically:Se}),he&&ie(Nn,On),be&&(0,i.jsx)(B,{currentIndex:_e,indexSeparator:p,totalItems:Ye})]}),Cl=u("image-gallery",l,{"fullscreen-modal":In}),jl=u("image-gallery-content",Z(Re),{fullscreen:On});return(0,i.jsx)("div",{ref:Fe,"aria-live":"polite",className:Cl,children:(0,i.jsxs)("div",{className:jl,children:[("bottom"===Re||"right"===Re)&&Tl,fe&&wl.length>0&&(0,i.jsx)(Y,{disableThumbnailSwipe:h,isRTL:f,thumbnailBarHeight:Cn(Ue),thumbnailPosition:Re,thumbnails:wl,thumbnailsRef:Sn,thumbnailStyle:Tn(),thumbnailsWrapperRef:wn,onSwiped:Gn,onSwiping:qn}),("top"===Re||"left"===Re)&&Tl]})})}));return t})()));
|
package/build/image-gallery.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--ig-primary-color:#337ab7;--ig-white:#fff;--ig-black:#000;--ig-background-overlay:rgba(0,0,0,.4);--ig-thumbnail-size:96px;--ig-thumbnail-size-small:80px;--ig-thumbnail-border-width:4px;--ig-thumbnail-border-width-small:3px;--ig-bullet-size:4px;--ig-bullet-size-small:3px}.image-gallery-icon{appearance:none;background-color:transparent;border:0;color:var(--ig-white,#fff);cursor:pointer;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5));outline:none;position:absolute;transition:all .3s ease-out;z-index:4}@media (hover:hover) and (pointer:fine){.image-gallery-icon:hover{color:var(--ig-primary-color,#337ab7)}.image-gallery-icon:hover .image-gallery-svg{transform:scale(1.1)}}.image-gallery-icon:focus{outline:2px solid var(--ig-primary-color,#337ab7)}.image-gallery-using-mouse .image-gallery-icon:focus{outline:none}.image-gallery-fullscreen-button,.image-gallery-play-button{bottom:0;padding:20px}.image-gallery-fullscreen-button .image-gallery-svg,.image-gallery-play-button .image-gallery-svg{height:32px;width:32px}@media (max-width:768px){.image-gallery-fullscreen-button,.image-gallery-play-button{padding:16px}.image-gallery-fullscreen-button .image-gallery-svg,.image-gallery-play-button .image-gallery-svg{height:24px;width:24px}}@media (max-width:480px){.image-gallery-fullscreen-button,.image-gallery-play-button{padding:12px}.image-gallery-fullscreen-button .image-gallery-svg,.image-gallery-play-button .image-gallery-svg{height:16px;width:16px}}.image-gallery-fullscreen-button{right:0}.image-gallery-play-button{left:0}.image-gallery-bottom-nav,.image-gallery-top-nav{left:50%;padding:12px;transform:translateX(-50%)}.image-gallery-bottom-nav .image-gallery-svg,.image-gallery-top-nav .image-gallery-svg{height:120px;width:96px}@media (max-width:768px){.image-gallery-bottom-nav .image-gallery-svg,.image-gallery-top-nav .image-gallery-svg{height:72px;width:48px}}@media (max-width:480px){.image-gallery-bottom-nav .image-gallery-svg,.image-gallery-top-nav .image-gallery-svg{height:48px;width:32px}}.image-gallery-bottom-nav[disabled],.image-gallery-top-nav[disabled]{cursor:not-allowed;opacity:.6;pointer-events:none}.image-gallery-top-nav{top:0}.image-gallery-bottom-nav{bottom:0}.image-gallery-left-nav,.image-gallery-right-nav{padding:48px 12px;top:50%;transform:translateY(-50%)}.image-gallery-left-nav .image-gallery-svg,.image-gallery-right-nav .image-gallery-svg{height:120px;width:64px}@media (max-width:768px){.image-gallery-left-nav .image-gallery-svg,.image-gallery-right-nav .image-gallery-svg{height:72px;width:32px}}@media (max-width:480px){.image-gallery-left-nav .image-gallery-svg,.image-gallery-right-nav .image-gallery-svg{height:48px;width:24px}}.image-gallery-left-nav[disabled],.image-gallery-right-nav[disabled]{cursor:not-allowed;opacity:.6;pointer-events:none}.image-gallery-left-nav{left:0}.image-gallery-right-nav{right:0}.image-gallery{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;position:relative;-webkit-overflow-scrolling:touch}.image-gallery.fullscreen-modal{background:var(--ig-black,#000);bottom:0;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:5}.image-gallery.fullscreen-modal .image-gallery-content{top:50%;transform:translateY(-50%)}.image-gallery-content{line-height:0;position:relative;top:0}.image-gallery-content.fullscreen{background:var(--ig-black,#000)}.image-gallery-content .image-gallery-slide .image-gallery-image{max-height:calc(100vh - 80px)}.image-gallery-content.image-gallery-thumbnails-left .image-gallery-slide .image-gallery-image,.image-gallery-content.image-gallery-thumbnails-right .image-gallery-slide .image-gallery-image{max-height:100vh}.image-gallery-slide-wrapper{position:relative}.image-gallery-slide-wrapper.image-gallery-thumbnails-left,.image-gallery-slide-wrapper.image-gallery-thumbnails-right{display:inline-block;width:calc(100% - 112px)}@media (max-width:768px){.image-gallery-slide-wrapper.image-gallery-thumbnails-left,.image-gallery-slide-wrapper.image-gallery-thumbnails-right{width:calc(100% - 88px)}}.image-gallery-slide-wrapper.image-gallery-rtl{direction:rtl}.image-gallery-swipe{overscroll-behavior:contain;touch-action:pan-y pinch-zoom;-webkit-transform:translateZ(0);transform:translateZ(0)}.image-gallery-slides,.image-gallery-swipe{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}.image-gallery-slides{contain:layout style paint;isolation:isolate;overscroll-behavior:none;position:relative;touch-action:none}.image-gallery-slides-container{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;will-change:transform}.image-gallery-slides-container.vertical{flex-direction:column;height:100%}.image-gallery-slides-container.vertical .image-gallery-slide{flex:0 0 100%;height:100%;min-height:0}.image-gallery-slides-container.vertical .image-gallery-slide .image-gallery-image{height:100%;max-width:100%;width:auto}.image-gallery-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;flex:0 0 100%;min-width:0}.image-gallery-slide .image-gallery-image{object-fit:contain;width:100%}.image-gallery-slide .image-gallery-description{background:var(--ig-background-overlay,rgba(0,0,0,.4));bottom:72px;color:var(--ig-white,#fff);left:0;line-height:1;padding:12px 20px;position:absolute;white-space:normal}@media (max-width:768px){.image-gallery-slide .image-gallery-description{bottom:48px;font-size:.8em;padding:8px 16px}}.image-gallery-bullets{bottom:20px;left:0;margin:0 auto;position:absolute;right:0;width:80%;z-index:4}.image-gallery-bullets .image-gallery-bullets-container{margin:0;padding:0;text-align:center}.image-gallery-bullets .image-gallery-bullet{appearance:none;background-color:transparent;border:1px solid var(--ig-white,#fff);border-radius:50%;box-shadow:0 2px 2px rgba(0,0,0,.6);cursor:pointer;display:inline-block;margin:0 4px;outline:none;padding:var(--ig-bullet-size,4px);transition:all .2s ease-out}@media (max-width:768px){.image-gallery-bullets .image-gallery-bullet{margin:0 3px;padding:var(--ig-bullet-size-small,3px)}}@media (max-width:480px){.image-gallery-bullets .image-gallery-bullet{padding:3px}}.image-gallery-bullets .image-gallery-bullet:focus{background:var(--ig-primary-color,#337ab7);border:1px solid var(--ig-primary-color,#337ab7);transform:scale(1.2)}.image-gallery-bullets .image-gallery-bullet.active{background:var(--ig-white,#fff);border:1px solid var(--ig-white,#fff);transform:scale(1.2)}@media (hover:hover) and (pointer:fine){.image-gallery-bullets .image-gallery-bullet:hover{background:var(--ig-primary-color,#337ab7);border:1px solid var(--ig-primary-color,#337ab7)}.image-gallery-bullets .image-gallery-bullet.active:hover{background:var(--ig-primary-color,#337ab7)}}.image-gallery-bullets.image-gallery-bullets-vertical{bottom:auto;left:20px;right:auto;top:50%;transform:translateY(-50%);width:auto}.image-gallery-bullets.image-gallery-bullets-vertical .image-gallery-bullet{display:block;margin:12px 0}@media (max-width:768px){.image-gallery-bullets.image-gallery-bullets-vertical .image-gallery-bullet{margin:8px 0;padding:var(--ig-bullet-size-small,3px)}}@media (max-width:480px){.image-gallery-bullets.image-gallery-bullets-vertical .image-gallery-bullet{padding:3px}}.image-gallery-thumbnails-wrapper{position:relative}.image-gallery-thumbnails-wrapper.thumbnails-swipe-horizontal{touch-action:pan-y}.image-gallery-thumbnails-wrapper.thumbnails-swipe-vertical{touch-action:pan-x}.image-gallery-thumbnails-wrapper.thumbnails-wrapper-rtl{direction:rtl}.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right{display:inline-block;vertical-align:top;width:var(--ig-thumbnail-size,96px)}@media (max-width:768px){.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right{width:var(--ig-thumbnail-size-small,80px)}}.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left .image-gallery-thumbnails,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right .image-gallery-thumbnails{height:100%;left:0;padding:0;position:absolute;top:0;width:100%}.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left .image-gallery-thumbnails .image-gallery-thumbnail,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right .image-gallery-thumbnails .image-gallery-thumbnail{display:block;margin-right:0;padding:0}.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left .image-gallery-thumbnails .image-gallery-thumbnail+.image-gallery-thumbnail,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right .image-gallery-thumbnails .image-gallery-thumbnail+.image-gallery-thumbnail{margin-left:0;margin-top:2px}.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right{margin:0 4px}@media (max-width:768px){.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right{margin:0 4px}}.image-gallery-thumbnails{overflow:hidden;padding:4px 0}@media (max-width:768px){.image-gallery-thumbnails{padding:4px 0}}.image-gallery-thumbnails .image-gallery-thumbnails-container{cursor:pointer;text-align:center;white-space:nowrap}.image-gallery-thumbnail{background:transparent;border:var(--ig-thumbnail-border-width,4px) solid transparent;display:inline-block;padding:0;transition:border .3s ease-out;width:var(--ig-thumbnail-size,96px)}@media (max-width:768px){.image-gallery-thumbnail{border:var(--ig-thumbnail-border-width-small,3px) solid transparent;width:var(--ig-thumbnail-size-small,80px)}}.image-gallery-thumbnail+.image-gallery-thumbnail{margin-left:2px}.image-gallery-thumbnail .image-gallery-thumbnail-inner{display:block;position:relative}.image-gallery-thumbnail .image-gallery-thumbnail-image{line-height:0;vertical-align:middle;width:100%}.image-gallery-thumbnail.active,.image-gallery-thumbnail:focus{border:var(--ig-thumbnail-border-width,4px) solid var(--ig-primary-color,#337ab7);outline:none}@media (max-width:768px){.image-gallery-thumbnail.active,.image-gallery-thumbnail:focus{border:var(--ig-thumbnail-border-width-small,3px) solid var(--ig-primary-color,#337ab7)}}@media (hover:hover) and (pointer:fine){.image-gallery-thumbnail:hover{border:var(--ig-thumbnail-border-width,4px) solid var(--ig-primary-color,#337ab7);outline:none}}@media (hover:hover) and (pointer:fine) and (max-width:768px){.image-gallery-thumbnail:hover{border:var(--ig-thumbnail-border-width-small,3px) solid var(--ig-primary-color,#337ab7)}}.image-gallery-thumbnail-label{box-sizing:border-box;color:var(--ig-white,#fff);font-size:1em;left:0;line-height:1em;padding:5%;position:absolute;text-shadow:0 2px 2px rgba(0,0,0,.6);top:50%;transform:translateY(-50%);white-space:normal;width:100%}@media (max-width:768px){.image-gallery-thumbnail-label{font-size:.8em;line-height:.8em}}.image-gallery-index{background:var(--ig-background-overlay,rgba(0,0,0,.4));color:var(--ig-white,#fff);line-height:1;padding:10px 20px;position:absolute;right:0;top:0;z-index:4}@media (max-width:768px){.image-gallery-index{font-size:.8em;padding:5px 10px}}
|
|
1
|
+
:root{--ig-primary-color:#337ab7;--ig-white:#fff;--ig-black:#000;--ig-background-overlay:rgba(0,0,0,.4);--ig-thumbnail-size:96px;--ig-thumbnail-size-small:80px;--ig-thumbnail-border-width:4px;--ig-thumbnail-border-width-small:3px;--ig-bullet-size:4px;--ig-bullet-size-small:3px}.image-gallery-icon{appearance:none;background-color:transparent;border:0;color:var(--ig-white,#fff);cursor:pointer;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5));outline:none;position:absolute;transition:all .3s ease-out;z-index:4}@media (hover:hover) and (pointer:fine){.image-gallery-icon:hover{color:var(--ig-primary-color,#337ab7)}.image-gallery-icon:hover .image-gallery-svg{transform:scale(1.1)}}.image-gallery-icon:focus{outline:2px solid var(--ig-primary-color,#337ab7)}.image-gallery-using-mouse .image-gallery-icon:focus{outline:none}.image-gallery-fullscreen-button,.image-gallery-play-button{bottom:0;padding:20px}.image-gallery-fullscreen-button .image-gallery-svg,.image-gallery-play-button .image-gallery-svg{height:32px;width:32px}@media (max-width:768px){.image-gallery-fullscreen-button,.image-gallery-play-button{padding:16px}.image-gallery-fullscreen-button .image-gallery-svg,.image-gallery-play-button .image-gallery-svg{height:24px;width:24px}}@media (max-width:480px){.image-gallery-fullscreen-button,.image-gallery-play-button{padding:12px}.image-gallery-fullscreen-button .image-gallery-svg,.image-gallery-play-button .image-gallery-svg{height:16px;width:16px}}.image-gallery-fullscreen-button{right:0}.image-gallery-play-button{left:0}.image-gallery-bottom-nav,.image-gallery-top-nav{left:50%;padding:12px;transform:translateX(-50%)}.image-gallery-bottom-nav .image-gallery-svg,.image-gallery-top-nav .image-gallery-svg{height:120px;width:96px}@media (max-width:768px){.image-gallery-bottom-nav .image-gallery-svg,.image-gallery-top-nav .image-gallery-svg{height:72px;width:48px}}@media (max-width:480px){.image-gallery-bottom-nav .image-gallery-svg,.image-gallery-top-nav .image-gallery-svg{height:48px;width:32px}}.image-gallery-bottom-nav[disabled],.image-gallery-top-nav[disabled]{cursor:not-allowed;opacity:.6;pointer-events:none}.image-gallery-top-nav{top:0}.image-gallery-bottom-nav{bottom:0}.image-gallery-left-nav,.image-gallery-right-nav{padding:48px 12px;top:50%;transform:translateY(-50%)}.image-gallery-left-nav .image-gallery-svg,.image-gallery-right-nav .image-gallery-svg{height:120px;width:64px}@media (max-width:768px){.image-gallery-left-nav .image-gallery-svg,.image-gallery-right-nav .image-gallery-svg{height:72px;width:32px}}@media (max-width:480px){.image-gallery-left-nav .image-gallery-svg,.image-gallery-right-nav .image-gallery-svg{height:48px;width:24px}}.image-gallery-left-nav[disabled],.image-gallery-right-nav[disabled]{cursor:not-allowed;opacity:.6;pointer-events:none}.image-gallery-left-nav{left:0}.image-gallery-right-nav{right:0}.image-gallery{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;position:relative;-webkit-overflow-scrolling:touch}.image-gallery.fullscreen-modal{background:var(--ig-black,#000);bottom:0;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:5}.image-gallery.fullscreen-modal .image-gallery-content{top:50%;transform:translateY(-50%)}.image-gallery-content{line-height:0;position:relative;top:0}.image-gallery-content.fullscreen{background:var(--ig-black,#000)}.image-gallery-content .image-gallery-slide .image-gallery-image{max-height:calc(100vh - 80px)}.image-gallery-content.image-gallery-thumbnails-left .image-gallery-slide .image-gallery-image,.image-gallery-content.image-gallery-thumbnails-right .image-gallery-slide .image-gallery-image{max-height:100vh}.image-gallery-slide-wrapper{position:relative}.image-gallery-slide-wrapper.image-gallery-thumbnails-left,.image-gallery-slide-wrapper.image-gallery-thumbnails-right{display:inline-block;width:calc(100% - 112px)}@media (max-width:768px){.image-gallery-slide-wrapper.image-gallery-thumbnails-left,.image-gallery-slide-wrapper.image-gallery-thumbnails-right{width:calc(100% - 88px)}}.image-gallery-slide-wrapper.image-gallery-rtl{direction:rtl}.image-gallery-swipe{overscroll-behavior:contain;touch-action:pan-y pinch-zoom;-webkit-transform:translateZ(0);transform:translateZ(0)}.image-gallery-slides,.image-gallery-swipe{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}.image-gallery-slides{contain:layout style paint;isolation:isolate;overscroll-behavior:none;position:relative;touch-action:none}.image-gallery-slides-container{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;will-change:transform}.image-gallery-slides-container.vertical{flex-direction:column;height:100%}.image-gallery-slides-container.vertical .image-gallery-slide{flex:0 0 100%;height:100%;min-height:0}.image-gallery-slides-container.vertical .image-gallery-slide .image-gallery-image{height:100%;max-width:100%;width:auto}.image-gallery-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;flex:0 0 100%;min-width:0}.image-gallery-slide .image-gallery-image{object-fit:contain;width:100%}.image-gallery-slide .image-gallery-description{background:var(--ig-background-overlay,rgba(0,0,0,.4));bottom:72px;color:var(--ig-white,#fff);left:0;line-height:1;padding:12px 20px;position:absolute;white-space:normal}@media (max-width:768px){.image-gallery-slide .image-gallery-description{bottom:48px;font-size:.8em;padding:8px 16px}}.image-gallery-bullets{bottom:20px;left:0;margin:0 auto;position:absolute;right:0;text-align:center;width:80%;z-index:4}.image-gallery-bullets .image-gallery-bullets-container{display:inline-block;margin:0 auto;padding:0}.image-gallery-bullets .image-gallery-bullets-inner{align-items:center;display:flex;justify-content:flex-start;padding:2px 0;white-space:nowrap}.image-gallery-bullets-vertical .image-gallery-bullets-inner{flex-direction:column;padding:0 2px}.image-gallery-bullets .image-gallery-bullet{appearance:none;background-color:transparent;border:1px solid var(--ig-white,#fff);border-radius:50%;box-shadow:0 2px 2px rgba(0,0,0,.6);cursor:pointer;flex-shrink:0;height:calc(var(--ig-bullet-size, 4px)*2 + 2px);margin:0 4px;outline:none;padding:0;transition:all .2s ease-out;width:calc(var(--ig-bullet-size, 4px)*2 + 2px)}@media (max-width:768px){.image-gallery-bullets .image-gallery-bullet{height:calc(var(--ig-bullet-size-small, 3px)*2 + 2px);margin:0 3px;width:calc(var(--ig-bullet-size-small, 3px)*2 + 2px)}}@media (max-width:480px){.image-gallery-bullets .image-gallery-bullet{height:8px;width:8px}}.image-gallery-bullets .image-gallery-bullet:focus{background:var(--ig-primary-color,#337ab7);border:1px solid var(--ig-primary-color,#337ab7);transform:scale(1.2)}.image-gallery-bullets .image-gallery-bullet.active{background:var(--ig-white,#fff);border:1px solid var(--ig-white,#fff);transform:scale(1.2)}@media (hover:hover) and (pointer:fine){.image-gallery-bullets .image-gallery-bullet:hover{background:var(--ig-primary-color,#337ab7);border:1px solid var(--ig-primary-color,#337ab7)}.image-gallery-bullets .image-gallery-bullet.active:hover{background:var(--ig-primary-color,#337ab7)}}.image-gallery-bullets.image-gallery-bullets-vertical{bottom:auto;left:20px;right:auto;top:50%;transform:translateY(-50%);width:auto}.image-gallery-bullets.image-gallery-bullets-vertical .image-gallery-bullet{display:block;margin:12px 0}@media (max-width:768px){.image-gallery-bullets.image-gallery-bullets-vertical .image-gallery-bullet{margin:8px 0;padding:var(--ig-bullet-size-small,3px)}}@media (max-width:480px){.image-gallery-bullets.image-gallery-bullets-vertical .image-gallery-bullet{padding:3px}}.image-gallery-thumbnails-wrapper{position:relative}.image-gallery-thumbnails-wrapper.thumbnails-swipe-horizontal{touch-action:pan-y}.image-gallery-thumbnails-wrapper.thumbnails-swipe-vertical{touch-action:pan-x}.image-gallery-thumbnails-wrapper.thumbnails-wrapper-rtl{direction:rtl}.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right{display:inline-block;vertical-align:top;width:var(--ig-thumbnail-size,96px)}@media (max-width:768px){.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right{width:var(--ig-thumbnail-size-small,80px)}}.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left .image-gallery-thumbnails,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right .image-gallery-thumbnails{height:100%;left:0;padding:0;position:absolute;top:0;width:100%}.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left .image-gallery-thumbnails .image-gallery-thumbnail,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right .image-gallery-thumbnails .image-gallery-thumbnail{display:block;margin-right:0;padding:0}.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left .image-gallery-thumbnails .image-gallery-thumbnail+.image-gallery-thumbnail,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right .image-gallery-thumbnails .image-gallery-thumbnail+.image-gallery-thumbnail{margin-left:0;margin-top:2px}.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right{margin:0 4px}@media (max-width:768px){.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right{margin:0 4px}}.image-gallery-thumbnails{overflow:hidden;padding:4px 0}@media (max-width:768px){.image-gallery-thumbnails{padding:4px 0}}.image-gallery-thumbnails .image-gallery-thumbnails-container{cursor:pointer;text-align:center;white-space:nowrap}.image-gallery-thumbnail{background:transparent;border:var(--ig-thumbnail-border-width,4px) solid transparent;display:inline-block;padding:0;transition:border .3s ease-out;width:var(--ig-thumbnail-size,96px)}@media (max-width:768px){.image-gallery-thumbnail{border:var(--ig-thumbnail-border-width-small,3px) solid transparent;width:var(--ig-thumbnail-size-small,80px)}}.image-gallery-thumbnail+.image-gallery-thumbnail{margin-left:2px}.image-gallery-thumbnail .image-gallery-thumbnail-inner{display:block;position:relative}.image-gallery-thumbnail .image-gallery-thumbnail-image{line-height:0;vertical-align:middle;width:100%}.image-gallery-thumbnail.active,.image-gallery-thumbnail:focus{border:var(--ig-thumbnail-border-width,4px) solid var(--ig-primary-color,#337ab7);outline:none}@media (max-width:768px){.image-gallery-thumbnail.active,.image-gallery-thumbnail:focus{border:var(--ig-thumbnail-border-width-small,3px) solid var(--ig-primary-color,#337ab7)}}@media (hover:hover) and (pointer:fine){.image-gallery-thumbnail:hover{border:var(--ig-thumbnail-border-width,4px) solid var(--ig-primary-color,#337ab7);outline:none}}@media (hover:hover) and (pointer:fine) and (max-width:768px){.image-gallery-thumbnail:hover{border:var(--ig-thumbnail-border-width-small,3px) solid var(--ig-primary-color,#337ab7)}}.image-gallery-thumbnail-label{box-sizing:border-box;color:var(--ig-white,#fff);font-size:1em;left:0;line-height:1em;padding:5%;position:absolute;text-shadow:0 2px 2px rgba(0,0,0,.6);top:50%;transform:translateY(-50%);white-space:normal;width:100%}@media (max-width:768px){.image-gallery-thumbnail-label{font-size:.8em;line-height:.8em}}.image-gallery-index{background:var(--ig-background-overlay,rgba(0,0,0,.4));color:var(--ig-white,#fff);line-height:1;padding:10px 20px;position:absolute;right:0;top:0;z-index:4}@media (max-width:768px){.image-gallery-index{font-size:.8em;padding:5px 10px}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import*as e from"react";var n={698:(e,n)=>{var l=Symbol.for("react.transitional.element"),a=Symbol.for("react.fragment");function t(e,n,a){var t=null;if(void 0!==a&&(t=""+a),void 0!==n.key&&(t=""+n.key),"key"in n)for(var i in a={},n)"key"!==i&&(a[i]=n[i]);else a=n;return n=a.ref,{$$typeof:l,type:e,key:t,ref:void 0!==n?n:null,props:a}}n.Fragment=a,n.jsx=t,n.jsxs=t},848:(e,n,l)=>{e.exports=l(698)}},l={};function a(e){var t=l[e];if(void 0!==t)return t.exports;var i=l[e]={exports:{}};return n[e](i,i.exports,a),i.exports}a.d=(e,n)=>{for(var l in n)a.o(n,l)&&!a.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:n[l]})},a.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n);var t={};a.d(t,{A:()=>_});var i=a(848);const r=(s={default:()=>e.default,forwardRef:()=>e.forwardRef,memo:()=>e.memo,useCallback:()=>e.useCallback,useEffect:()=>e.useEffect,useImperativeHandle:()=>e.useImperativeHandle,useMemo:()=>e.useMemo,useRef:()=>e.useRef,useState:()=>e.useState},o={},a.d(o,s),o);var s,o;function u(e){var n,l,a="";if("string"==typeof e||"number"==typeof e)a+=e;else if("object"==typeof e)if(Array.isArray(e)){var t=e.length;for(n=0;n<t;n++)e[n]&&(l=u(e[n]))&&(a&&(a+=" "),a+=l)}else for(l in e)e[l]&&(a&&(a+=" "),a+=l);return a}const g=function(){for(var e,n,l=0,a="",t=arguments.length;l<t;l++)(e=arguments[l])&&(n=u(e))&&(a&&(a+=" "),a+=n);return a},c="Left",m="Right",d="Up",h="Down",b={delta:10,preventScrollOnSwipe:!1,rotationAngle:0,trackMouse:!1,trackTouch:!0,swipeDuration:1/0,touchEventOptions:{passive:!0}},p={first:!0,initial:[0,0],start:0,swiping:!1,xy:[0,0]},y="mousemove",f="mouseup";function v(e,n){if(0===n)return e;const l=Math.PI/180*n;return[e[0]*Math.cos(l)+e[1]*Math.sin(l),e[1]*Math.cos(l)-e[0]*Math.sin(l)]}function x(e){const{trackMouse:n}=e,l=r.useRef(Object.assign({},p)),a=r.useRef(Object.assign({},b)),t=r.useRef(Object.assign({},a.current));let i;for(i in t.current=Object.assign({},a.current),a.current=Object.assign(Object.assign({},b),e),b)void 0===a.current[i]&&(a.current[i]=b[i]);const[s,o]=r.useMemo((()=>function(e,n){const l=n=>{const l="touches"in n;l&&n.touches.length>1||e(((e,t)=>{t.trackMouse&&!l&&(document.addEventListener(y,a),document.addEventListener(f,i));const{clientX:r,clientY:s}=l?n.touches[0]:n,o=v([r,s],t.rotationAngle);return t.onTouchStartOrOnMouseDown&&t.onTouchStartOrOnMouseDown({event:n}),Object.assign(Object.assign(Object.assign({},e),p),{initial:o.slice(),xy:o,start:n.timeStamp||0})}))},a=n=>{e(((e,l)=>{const a="touches"in n;if(a&&n.touches.length>1)return e;if(n.timeStamp-e.start>l.swipeDuration)return e.swiping?Object.assign(Object.assign({},e),{swiping:!1}):e;const{clientX:t,clientY:i}=a?n.touches[0]:n,[r,s]=v([t,i],l.rotationAngle),o=r-e.xy[0],u=s-e.xy[1],g=Math.abs(o),p=Math.abs(u),y=(n.timeStamp||0)-e.start,f=Math.sqrt(g*g+p*p)/(y||1),x=[o/(y||1),u/(y||1)],w=function(e,n,l,a){return e>n?l>0?m:c:a>0?h:d}(g,p,o,u),S="number"==typeof l.delta?l.delta:l.delta[w.toLowerCase()]||b.delta;if(g<S&&p<S&&!e.swiping)return e;const k={absX:g,absY:p,deltaX:o,deltaY:u,dir:w,event:n,first:e.first,initial:e.initial,velocity:f,vxvy:x};k.first&&l.onSwipeStart&&l.onSwipeStart(k),l.onSwiping&&l.onSwiping(k);let T=!1;return(l.onSwiping||l.onSwiped||l[`onSwiped${w}`])&&(T=!0),T&&l.preventScrollOnSwipe&&l.trackTouch&&n.cancelable&&n.preventDefault(),Object.assign(Object.assign({},e),{first:!1,eventData:k,swiping:!0})}))},t=n=>{e(((e,l)=>{let a;if(e.swiping&&e.eventData){if(n.timeStamp-e.start<l.swipeDuration){a=Object.assign(Object.assign({},e.eventData),{event:n}),l.onSwiped&&l.onSwiped(a);const t=l[`onSwiped${a.dir}`];t&&t(a)}}else l.onTap&&l.onTap({event:n});return l.onTouchEndOrOnMouseUp&&l.onTouchEndOrOnMouseUp({event:n}),Object.assign(Object.assign(Object.assign({},e),p),{eventData:a})}))},i=e=>{document.removeEventListener(y,a),document.removeEventListener(f,i),t(e)},r=(e,n)=>{let i=()=>{};if(e&&e.addEventListener){const r=Object.assign(Object.assign({},b.touchEventOptions),n.touchEventOptions),s=[["touchstart",l,r],["touchmove",a,Object.assign(Object.assign({},r),n.preventScrollOnSwipe?{passive:!1}:{})],["touchend",t,r]];s.forEach((([n,l,a])=>e.addEventListener(n,l,a))),i=()=>s.forEach((([n,l])=>e.removeEventListener(n,l)))}return i},s={ref:n=>{null!==n&&e(((e,l)=>{if(e.el===n)return e;const a={};return e.el&&e.el!==n&&e.cleanUpTouch&&(e.cleanUpTouch(),a.cleanUpTouch=void 0),l.trackTouch&&n&&(a.cleanUpTouch=r(n,l)),Object.assign(Object.assign(Object.assign({},e),{el:n}),a)}))}};return n.trackMouse&&(s.onMouseDown=l),[s,r]}((e=>l.current=e(l.current,a.current)),{trackMouse:n})),[n]);return l.current=function(e,n,l,a){return n.trackTouch&&e.el?e.cleanUpTouch?n.preventScrollOnSwipe!==l.preventScrollOnSwipe||n.touchEventOptions.passive!==l.touchEventOptions.passive?(e.cleanUpTouch(),Object.assign(Object.assign({},e),{cleanUpTouch:a(e.el,n)})):e:Object.assign(Object.assign({},e),{cleanUpTouch:a(e.el,n)}):(e.cleanUpTouch&&e.cleanUpTouch(),Object.assign(Object.assign({},e),{cleanUpTouch:void 0}))}(l.current,a.current,t.current,o),s}const w=(0,r.memo)((function({index:e,isActive:n=!1,bulletClass:l="",onClick:a}){const t=g("image-gallery-bullet",l,{active:n});return(0,i.jsx)("button",{"aria-label":`Go to Slide ${e+1}`,"aria-pressed":n?"true":"false",className:t,type:"button",onClick:a},`bullet-${e}`)})),S=(0,r.memo)((function({bullets:e=[],slideVertically:n=!1}){const l=g("image-gallery-bullets",{"image-gallery-bullets-vertical":n});return e&&0!==e.length?(0,i.jsx)("div",{className:l,children:(0,i.jsx)("div",{"aria-label":"Bullet Navigation",className:"image-gallery-bullets-container",role:"navigation",children:e})}):null})),k={left:(0,i.jsx)("polyline",{points:"15 18 9 12 15 6"}),right:(0,i.jsx)("polyline",{points:"9 18 15 12 9 6"}),top:(0,i.jsx)("polyline",{points:"6 15 12 9 18 15"}),bottom:(0,i.jsx)("polyline",{points:"6 9 12 15 18 9"}),maximize:(0,i.jsx)("path",{d:"M8 3H3v5m18 0V3h-5m0 18h5v-5M3 16v5h5"}),minimize:(0,i.jsx)("path",{d:"M8 3v5H3m18 0h-5V3m0 18v-5h5M3 16h5v5"}),play:(0,i.jsx)("polygon",{points:"5 3 19 12 5 21 5 3"}),pause:(0,i.jsxs)(r.default.Fragment,{children:[(0,i.jsx)("rect",{height:"16",width:"4",x:"6",y:"4"}),(0,i.jsx)("rect",{height:"16",width:"4",x:"14",y:"4"})]})},T={strokeWidth:1,viewBox:"0 0 24 24"},C=e=>{const{strokeWidth:n,viewBox:l,icon:a}={...T,...e};return(0,i.jsx)("svg",{className:"image-gallery-svg",fill:"none",stroke:"currentColor",strokeLinecap:"square",strokeLinejoin:"miter",strokeWidth:n,viewBox:l,xmlns:"http://www.w3.org/2000/svg",children:k[a]})},j=r.default.memo((({disabled:e,onClick:n})=>(0,i.jsx)("button",{"aria-label":"Next Slide",className:"image-gallery-icon image-gallery-bottom-nav",disabled:e,type:"button",onClick:n,children:(0,i.jsx)(C,{icon:"bottom",viewBox:"6 0 12 24"})})));j.displayName="BottomNav";const R=j,O=r.default.memo((({isFullscreen:e,onClick:n})=>(0,i.jsx)("button",{"aria-label":"Open Fullscreen",className:"image-gallery-icon image-gallery-fullscreen-button",type:"button",onClick:n,children:(0,i.jsx)(C,{icon:e?"minimize":"maximize",strokeWidth:2})})));O.displayName="Fullscreen";const I=O,E=r.default.memo((({disabled:e,onClick:n})=>(0,i.jsx)("button",{"aria-label":"Previous Slide",className:"image-gallery-icon image-gallery-left-nav",disabled:e,type:"button",onClick:n,children:(0,i.jsx)(C,{icon:"left",viewBox:"6 0 12 24"})})));E.displayName="LeftNav";const N=E,F=r.default.memo((({isPlaying:e,onClick:n})=>(0,i.jsx)("button",{"aria-label":"Play or Pause Slideshow",className:"image-gallery-icon image-gallery-play-button",type:"button",onClick:n,children:(0,i.jsx)(C,{icon:e?"pause":"play",strokeWidth:2})})));F.displayName="PlayPause";const z=F,M=r.default.memo((({disabled:e,onClick:n})=>(0,i.jsx)("button",{"aria-label":"Next Slide",className:"image-gallery-icon image-gallery-right-nav",disabled:e,type:"button",onClick:n,children:(0,i.jsx)(C,{icon:"right",viewBox:"6 0 12 24"})})));M.displayName="RightNav";const L=M,P=r.default.memo((({disabled:e,onClick:n})=>(0,i.jsx)("button",{"aria-label":"Previous Slide",className:"image-gallery-icon image-gallery-top-nav",disabled:e,type:"button",onClick:n,children:(0,i.jsx)(C,{icon:"top",viewBox:"6 0 12 24"})})));P.displayName="TopNav";const W=P;function $(e,n,l={}){const{leading:a=!0,trailing:t=!0}=l;let i=0,r=null,s=null,o=null;function u(){null!==s&&(e.apply(o,s),i=Date.now(),s=null,o=null)}return function(...e){const l=Date.now(),g=l-i;s=e,o=this,g>=n?(r&&(clearTimeout(r),r=null),a?u():i=l):t&&!r&&(r=setTimeout((()=>{r=null,s&&u()}),n-g))}}function B(e,n){let l;return function(...a){clearTimeout(l),l=setTimeout((()=>{e.apply(this,a)}),n)}}const D=(0,r.memo)((function({currentIndex:e,totalItems:n,indexSeparator:l=" / "}){return(0,i.jsxs)("div",{className:"image-gallery-index",children:[(0,i.jsx)("span",{className:"image-gallery-index-current",children:e+1}),(0,i.jsx)("span",{className:"image-gallery-index-separator",children:l}),(0,i.jsx)("span",{className:"image-gallery-index-total",children:n})]})})),U={description:"",fullscreen:"",isFullscreen:!1,originalAlt:"",originalHeight:"",originalWidth:"",originalTitle:"",sizes:"",srcSet:"",loading:"eager"},H=r.default.memo((e=>{const{description:n,fullscreen:l,handleImageLoaded:a,isFullscreen:t,onImageError:s,original:o,originalAlt:u,originalHeight:g,originalWidth:c,originalTitle:m,sizes:d,srcSet:h,loading:b}={...U,...e},p=t&&l||o;return(0,i.jsxs)(r.default.Fragment,{children:[(0,i.jsx)("img",{alt:u,className:"image-gallery-image",height:g,loading:b,sizes:d,src:p,srcSet:h,title:m,width:c,onError:s,onLoad:e=>a(e,o)}),n&&(0,i.jsx)("span",{className:"image-gallery-description",children:n})]})}));H.displayName="Item";const A=H,q=(0,r.memo)((function({index:e,alignment:n="",originalClass:l="",style:a={},onClick:t,onKeyUp:r,onTouchMove:s,onTouchEnd:o,onTouchStart:u,onMouseOver:g,onMouseLeave:c,children:m=null}){return(0,i.jsx)("div",{"aria-label":`Go to Slide ${e+1}`,className:`image-gallery-slide ${n} ${l}`,role:"button",style:a,tabIndex:-1,onClick:t,onFocus:g,onKeyUp:r,onMouseLeave:c,onMouseOver:g,onTouchEnd:o,onTouchMove:s,onTouchStart:u,children:m},`slide-${e}`)}));let G=!1;const K={className:"",delta:0,onSwiping:()=>{},onSwiped:()=>{}},V=e=>{const{children:n,className:l,delta:a,onSwiping:t,onSwiped:r}={...K,...e},s=x({delta:a,onSwiping:t,onSwiped:r});return(0,i.jsx)("div",{...s,className:l,children:n})},Y=(0,r.memo)((function({index:e,isActive:n=!1,thumbnailClass:l="",onMouseLeave:a,onMouseOver:t,onFocus:r,onKeyUp:s,onClick:o,children:u=null}){const c=g("image-gallery-thumbnail",l,{active:n});return(0,i.jsx)("button",{"aria-label":`Go to Slide ${e+1}`,"aria-pressed":n?"true":"false",className:c,tabIndex:0,type:"button",onClick:o??void 0,onFocus:r??void 0,onKeyUp:s??void 0,onMouseLeave:a??void 0,onMouseOver:t??void 0,children:u},`thumbnail-${e}`)})),X=(0,r.memo)((function({thumbnails:e=[],thumbnailPosition:n="bottom",thumbnailStyle:l={},thumbnailBarHeight:a={},isRTL:t=!1,disableThumbnailSwipe:r=!1,onSwiping:s,onSwiped:o,thumbnailsWrapperRef:u,thumbnailsRef:c}){const m="left"===n||"right"===n,d=g("image-gallery-thumbnails-wrapper",(e=>{const n={left:"image-gallery-thumbnails-left",right:"image-gallery-thumbnails-right",bottom:"image-gallery-thumbnails-bottom",top:"image-gallery-thumbnails-top"};return n[e]?` ${n[e]}`:""})(n),{"thumbnails-wrapper-rtl":!m&&t},{"thumbnails-swipe-horizontal":!m&&!r},{"thumbnails-swipe-vertical":m&&!r});return e&&0!==e.length?(0,i.jsx)(V,{className:d,delta:0,onSwiped:r?void 0:o??void 0,onSwiping:r?void 0:s??void 0,children:(0,i.jsx)("div",{ref:u,className:"image-gallery-thumbnails",style:a,children:(0,i.jsx)("nav",{ref:c,"aria-label":"Thumbnail Navigation",className:"image-gallery-thumbnails-container",style:l,children:e})})}):null}));!function(){if(G||"undefined"==typeof document)return;if(document.querySelector("style[data-image-gallery]"))return void(G=!0);const e=document.createElement("style");e.setAttribute("data-image-gallery",""),e.textContent="/**\n * React Image Gallery - Styles\n * \n * Design System: Base-4 spacing scale\n * Spacing: 2, 4, 8, 12, 16, 20, 24, 32, 48, 64, 80, 96, 120px\n * \n * CSS Custom Properties for theming:\n * --ig-primary-color: Primary/accent color (default: #337ab7)\n * --ig-white: Icon and text color (default: #fff)\n * --ig-black: Background color in fullscreen (default: #000)\n * --ig-background-overlay: Overlay background (default: rgba(0, 0, 0, 0.4))\n * --ig-thumbnail-size: Thumbnail dimensions (default: 96px)\n * --ig-thumbnail-size-small: Thumbnail size on small screens (default: 80px)\n * --ig-thumbnail-border-width: Thumbnail border width (default: 4px)\n * --ig-thumbnail-border-width-small: Thumbnail border on small screens (default: 3px)\n * --ig-bullet-size: Bullet size (default: 4px)\n * --ig-bullet-size-small: Bullet size on small screens (default: 3px)\n */\n\n:root {\n --ig-primary-color: #337ab7;\n --ig-white: #fff;\n --ig-black: #000;\n --ig-background-overlay: rgba(0, 0, 0, 0.4);\n --ig-thumbnail-size: 96px;\n --ig-thumbnail-size-small: 80px;\n --ig-thumbnail-border-width: 4px;\n --ig-thumbnail-border-width-small: 3px;\n --ig-bullet-size: 4px;\n --ig-bullet-size-small: 3px;\n}\n\n/* ==========================================================================\n SVG Icon Styles\n ========================================================================== */\n\n.image-gallery-icon {\n color: var(--ig-white, #fff);\n transition: all 0.3s ease-out;\n appearance: none;\n background-color: transparent;\n border: 0;\n cursor: pointer;\n outline: none;\n position: absolute;\n z-index: 4;\n filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));\n}\n\n@media (hover: hover) and (pointer: fine) {\n .image-gallery-icon:hover {\n color: var(--ig-primary-color, #337ab7);\n }\n .image-gallery-icon:hover .image-gallery-svg {\n transform: scale(1.1);\n }\n}\n\n.image-gallery-icon:focus {\n outline: 2px solid var(--ig-primary-color, #337ab7);\n}\n\n.image-gallery-using-mouse .image-gallery-icon:focus {\n outline: none;\n}\n\n/* Fullscreen & Play buttons */\n.image-gallery-fullscreen-button,\n.image-gallery-play-button {\n bottom: 0;\n padding: 20px;\n}\n\n.image-gallery-fullscreen-button .image-gallery-svg,\n.image-gallery-play-button .image-gallery-svg {\n height: 32px;\n width: 32px;\n}\n\n@media (max-width: 768px) {\n .image-gallery-fullscreen-button,\n .image-gallery-play-button {\n padding: 16px;\n }\n .image-gallery-fullscreen-button .image-gallery-svg,\n .image-gallery-play-button .image-gallery-svg {\n height: 24px;\n width: 24px;\n }\n}\n\n@media (max-width: 480px) {\n .image-gallery-fullscreen-button,\n .image-gallery-play-button {\n padding: 12px;\n }\n .image-gallery-fullscreen-button .image-gallery-svg,\n .image-gallery-play-button .image-gallery-svg {\n height: 16px;\n width: 16px;\n }\n}\n\n.image-gallery-fullscreen-button {\n right: 0;\n}\n\n.image-gallery-play-button {\n left: 0;\n}\n\n/* Top & Bottom navigation */\n.image-gallery-top-nav,\n.image-gallery-bottom-nav {\n padding: 12px;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.image-gallery-top-nav .image-gallery-svg,\n.image-gallery-bottom-nav .image-gallery-svg {\n height: 120px;\n width: 96px;\n}\n\n@media (max-width: 768px) {\n .image-gallery-top-nav .image-gallery-svg,\n .image-gallery-bottom-nav .image-gallery-svg {\n height: 72px;\n width: 48px;\n }\n}\n\n@media (max-width: 480px) {\n .image-gallery-top-nav .image-gallery-svg,\n .image-gallery-bottom-nav .image-gallery-svg {\n height: 48px;\n width: 32px;\n }\n}\n\n.image-gallery-top-nav[disabled],\n.image-gallery-bottom-nav[disabled] {\n cursor: not-allowed;\n opacity: 0.6;\n pointer-events: none;\n}\n\n.image-gallery-top-nav {\n top: 0;\n}\n\n.image-gallery-bottom-nav {\n bottom: 0;\n}\n\n/* Left & Right navigation */\n.image-gallery-left-nav,\n.image-gallery-right-nav {\n padding: 48px 12px;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.image-gallery-left-nav .image-gallery-svg,\n.image-gallery-right-nav .image-gallery-svg {\n height: 120px;\n width: 64px;\n}\n\n@media (max-width: 768px) {\n .image-gallery-left-nav .image-gallery-svg,\n .image-gallery-right-nav .image-gallery-svg {\n height: 72px;\n width: 32px;\n }\n}\n\n@media (max-width: 480px) {\n .image-gallery-left-nav .image-gallery-svg,\n .image-gallery-right-nav .image-gallery-svg {\n height: 48px;\n width: 24px;\n }\n}\n\n.image-gallery-left-nav[disabled],\n.image-gallery-right-nav[disabled] {\n cursor: not-allowed;\n opacity: 0.6;\n pointer-events: none;\n}\n\n.image-gallery-left-nav {\n left: 0;\n}\n\n.image-gallery-right-nav {\n right: 0;\n}\n\n/* ==========================================================================\n Gallery Container\n ========================================================================== */\n\n.image-gallery {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n position: relative;\n /* Prevent mobile overscroll/pull-to-refresh */\n overscroll-behavior: none;\n -webkit-overflow-scrolling: touch;\n}\n\n.image-gallery.fullscreen-modal {\n background: var(--ig-black, #000);\n bottom: 0;\n height: 100%;\n left: 0;\n position: fixed;\n right: 0;\n top: 0;\n width: 100%;\n z-index: 5;\n}\n\n.image-gallery.fullscreen-modal .image-gallery-content {\n top: 50%;\n transform: translateY(-50%);\n}\n\n/* ==========================================================================\n Gallery Content\n ========================================================================== */\n\n.image-gallery-content {\n position: relative;\n line-height: 0;\n top: 0;\n}\n\n.image-gallery-content.fullscreen {\n background: var(--ig-black, #000);\n}\n\n.image-gallery-content .image-gallery-slide .image-gallery-image {\n max-height: calc(100vh - 80px);\n}\n\n.image-gallery-content.image-gallery-thumbnails-left\n .image-gallery-slide\n .image-gallery-image,\n.image-gallery-content.image-gallery-thumbnails-right\n .image-gallery-slide\n .image-gallery-image {\n max-height: 100vh;\n}\n\n/* ==========================================================================\n Slide Wrapper\n ========================================================================== */\n\n.image-gallery-slide-wrapper {\n position: relative;\n}\n\n.image-gallery-slide-wrapper.image-gallery-thumbnails-left,\n.image-gallery-slide-wrapper.image-gallery-thumbnails-right {\n display: inline-block;\n width: calc(100% - 112px);\n}\n\n@media (max-width: 768px) {\n .image-gallery-slide-wrapper.image-gallery-thumbnails-left,\n .image-gallery-slide-wrapper.image-gallery-thumbnails-right {\n width: calc(100% - 88px);\n }\n}\n\n.image-gallery-slide-wrapper.image-gallery-rtl {\n direction: rtl;\n}\n\n.image-gallery-swipe {\n overflow: hidden;\n /* GPU acceleration */\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n /* Prevent overscroll during swipe */\n overscroll-behavior: contain;\n touch-action: pan-y pinch-zoom;\n}\n\n/* ==========================================================================\n Slides\n ========================================================================== */\n\n.image-gallery-slides {\n overflow: hidden;\n position: relative;\n touch-action: none;\n /* GPU acceleration for smooth swiping */\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n contain: layout style paint;\n isolation: isolate;\n overscroll-behavior: none;\n}\n\n/* Flex container that holds all slides and gets transformed */\n.image-gallery-slides-container {\n display: flex;\n /* GPU acceleration for smooth swiping */\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n -webkit-transform-style: preserve-3d;\n transform-style: preserve-3d;\n will-change: transform;\n}\n\n.image-gallery-slides-container.vertical {\n flex-direction: column;\n height: 100%;\n}\n\n.image-gallery-slides-container.vertical .image-gallery-slide {\n flex: 0 0 100%;\n height: 100%;\n min-height: 0;\n}\n\n.image-gallery-slides-container.vertical\n .image-gallery-slide\n .image-gallery-image {\n height: 100%;\n width: auto;\n max-width: 100%;\n}\n\n.image-gallery-slide {\n flex: 0 0 100%;\n min-width: 0;\n /* GPU acceleration for smooth swiping */\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n}\n\n.image-gallery-slide .image-gallery-image {\n width: 100%;\n object-fit: contain;\n}\n\n.image-gallery-slide .image-gallery-description {\n background: var(--ig-background-overlay, rgba(0, 0, 0, 0.4));\n bottom: 72px;\n color: var(--ig-white, #fff);\n left: 0;\n line-height: 1;\n padding: 12px 20px;\n position: absolute;\n white-space: normal;\n}\n\n@media (max-width: 768px) {\n .image-gallery-slide .image-gallery-description {\n bottom: 48px;\n font-size: 0.8em;\n padding: 8px 16px;\n }\n}\n\n/* ==========================================================================\n Bullets\n ========================================================================== */\n\n.image-gallery-bullets {\n bottom: 20px;\n left: 0;\n margin: 0 auto;\n position: absolute;\n right: 0;\n width: 80%;\n z-index: 4;\n}\n\n.image-gallery-bullets .image-gallery-bullets-container {\n margin: 0;\n padding: 0;\n text-align: center;\n}\n\n.image-gallery-bullets .image-gallery-bullet {\n appearance: none;\n background-color: transparent;\n border: 1px solid var(--ig-white, #fff);\n border-radius: 50%;\n box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);\n cursor: pointer;\n display: inline-block;\n margin: 0 4px;\n outline: none;\n padding: var(--ig-bullet-size, 4px);\n transition: all 0.2s ease-out;\n}\n\n@media (max-width: 768px) {\n .image-gallery-bullets .image-gallery-bullet {\n margin: 0 3px;\n padding: var(--ig-bullet-size-small, 3px);\n }\n}\n\n@media (max-width: 480px) {\n .image-gallery-bullets .image-gallery-bullet {\n padding: 3px;\n }\n}\n\n.image-gallery-bullets .image-gallery-bullet:focus {\n transform: scale(1.2);\n background: var(--ig-primary-color, #337ab7);\n border: 1px solid var(--ig-primary-color, #337ab7);\n}\n\n.image-gallery-bullets .image-gallery-bullet.active {\n transform: scale(1.2);\n border: 1px solid var(--ig-white, #fff);\n background: var(--ig-white, #fff);\n}\n\n@media (hover: hover) and (pointer: fine) {\n .image-gallery-bullets .image-gallery-bullet:hover {\n background: var(--ig-primary-color, #337ab7);\n border: 1px solid var(--ig-primary-color, #337ab7);\n }\n .image-gallery-bullets .image-gallery-bullet.active:hover {\n background: var(--ig-primary-color, #337ab7);\n }\n}\n\n/* Vertical bullets */\n.image-gallery-bullets.image-gallery-bullets-vertical {\n left: 20px;\n right: auto;\n bottom: auto;\n width: auto;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.image-gallery-bullets.image-gallery-bullets-vertical .image-gallery-bullet {\n display: block;\n margin: 12px 0;\n}\n\n@media (max-width: 768px) {\n .image-gallery-bullets.image-gallery-bullets-vertical .image-gallery-bullet {\n margin: 8px 0;\n padding: var(--ig-bullet-size-small, 3px);\n }\n}\n\n@media (max-width: 480px) {\n .image-gallery-bullets.image-gallery-bullets-vertical .image-gallery-bullet {\n padding: 3px;\n }\n}\n\n/* ==========================================================================\n Thumbnails Wrapper\n ========================================================================== */\n\n.image-gallery-thumbnails-wrapper {\n position: relative;\n}\n\n.image-gallery-thumbnails-wrapper.thumbnails-swipe-horizontal {\n touch-action: pan-y;\n}\n\n.image-gallery-thumbnails-wrapper.thumbnails-swipe-vertical {\n touch-action: pan-x;\n}\n\n.image-gallery-thumbnails-wrapper.thumbnails-wrapper-rtl {\n direction: rtl;\n}\n\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right {\n display: inline-block;\n vertical-align: top;\n width: var(--ig-thumbnail-size, 96px);\n}\n\n@media (max-width: 768px) {\n .image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,\n .image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right {\n width: var(--ig-thumbnail-size-small, 80px);\n }\n}\n\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left\n .image-gallery-thumbnails,\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right\n .image-gallery-thumbnails {\n height: 100%;\n width: 100%;\n left: 0;\n padding: 0;\n position: absolute;\n top: 0;\n}\n\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left\n .image-gallery-thumbnails\n .image-gallery-thumbnail,\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right\n .image-gallery-thumbnails\n .image-gallery-thumbnail {\n display: block;\n margin-right: 0;\n padding: 0;\n}\n\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left\n .image-gallery-thumbnails\n .image-gallery-thumbnail\n + .image-gallery-thumbnail,\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right\n .image-gallery-thumbnails\n .image-gallery-thumbnail\n + .image-gallery-thumbnail {\n margin-left: 0;\n margin-top: 2px;\n}\n\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right {\n margin: 0 4px;\n}\n\n@media (max-width: 768px) {\n .image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,\n .image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right {\n margin: 0 4px;\n }\n}\n\n/* ==========================================================================\n Thumbnails\n ========================================================================== */\n\n.image-gallery-thumbnails {\n overflow: hidden;\n padding: 4px 0;\n}\n\n@media (max-width: 768px) {\n .image-gallery-thumbnails {\n padding: 4px 0;\n }\n}\n\n.image-gallery-thumbnails .image-gallery-thumbnails-container {\n cursor: pointer;\n text-align: center;\n white-space: nowrap;\n}\n\n.image-gallery-thumbnail {\n display: inline-block;\n border: var(--ig-thumbnail-border-width, 4px) solid transparent;\n transition: border 0.3s ease-out;\n width: var(--ig-thumbnail-size, 96px);\n background: transparent;\n padding: 0;\n}\n\n@media (max-width: 768px) {\n .image-gallery-thumbnail {\n border: var(--ig-thumbnail-border-width-small, 3px) solid transparent;\n width: var(--ig-thumbnail-size-small, 80px);\n }\n}\n\n.image-gallery-thumbnail + .image-gallery-thumbnail {\n margin-left: 2px;\n}\n\n.image-gallery-thumbnail .image-gallery-thumbnail-inner {\n display: block;\n position: relative;\n}\n\n.image-gallery-thumbnail .image-gallery-thumbnail-image {\n vertical-align: middle;\n width: 100%;\n line-height: 0;\n}\n\n.image-gallery-thumbnail.active,\n.image-gallery-thumbnail:focus {\n outline: none;\n border: var(--ig-thumbnail-border-width, 4px) solid\n var(--ig-primary-color, #337ab7);\n}\n\n@media (max-width: 768px) {\n .image-gallery-thumbnail.active,\n .image-gallery-thumbnail:focus {\n border: var(--ig-thumbnail-border-width-small, 3px) solid\n var(--ig-primary-color, #337ab7);\n }\n}\n\n@media (hover: hover) and (pointer: fine) {\n .image-gallery-thumbnail:hover {\n outline: none;\n border: var(--ig-thumbnail-border-width, 4px) solid\n var(--ig-primary-color, #337ab7);\n }\n}\n\n@media (hover: hover) and (pointer: fine) and (max-width: 768px) {\n .image-gallery-thumbnail:hover {\n border: var(--ig-thumbnail-border-width-small, 3px) solid\n var(--ig-primary-color, #337ab7);\n }\n}\n\n/* ==========================================================================\n Thumbnail Label\n ========================================================================== */\n\n.image-gallery-thumbnail-label {\n box-sizing: border-box;\n color: var(--ig-white, #fff);\n font-size: 1em;\n left: 0;\n line-height: 1em;\n padding: 5%;\n position: absolute;\n top: 50%;\n text-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);\n transform: translateY(-50%);\n white-space: normal;\n width: 100%;\n}\n\n@media (max-width: 768px) {\n .image-gallery-thumbnail-label {\n font-size: 0.8em;\n line-height: 0.8em;\n }\n}\n\n/* ==========================================================================\n Index Display\n ========================================================================== */\n\n.image-gallery-index {\n background: var(--ig-background-overlay, rgba(0, 0, 0, 0.4));\n color: var(--ig-white, #fff);\n line-height: 1;\n padding: 10px 20px;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 4;\n}\n\n@media (max-width: 768px) {\n .image-gallery-index {\n font-size: 0.8em;\n padding: 5px 10px;\n }\n}\n",document.head.appendChild(e),G=!0}();const Z=["fullscreenchange","MSFullscreenChange","mozfullscreenchange","webkitfullscreenchange"];function J(e){const n=parseInt(String(e.keyCode||e.which||0),10);return 13===n||32===n}function Q(e){return{left:" image-gallery-thumbnails-left",right:" image-gallery-thumbnails-right",bottom:" image-gallery-thumbnails-bottom",top:" image-gallery-thumbnails-top"}[e]||""}const _=(0,r.forwardRef)((function(e,n){const{additionalClass:l="",autoPlay:a=!1,disableKeyDown:t=!1,disableSwipe:s=!1,disableThumbnailScroll:o=!1,disableThumbnailSwipe:u=!1,flickThreshold:b=.4,indexSeparator:p=" / ",infinite:y=!0,isRTL:f=!1,items:v,lazyLoad:x=!1,onBeforeSlide:k,onBulletClick:T,onClick:C,onErrorImageURL:j="",onImageError:O,onImageLoad:E,onMouseLeave:F,onMouseOver:M,onPause:P,onPlay:U,onScreenChange:H,onSlide:G,onThumbnailClick:K,onThumbnailError:_,onTouchEnd:ee,onTouchMove:ne,onTouchStart:le,renderBottomNav:ae=(e,n)=>(0,i.jsx)(R,{disabled:n,onClick:e}),renderCustomControls:te,renderFullscreenButton:ie=(e,n)=>(0,i.jsx)(I,{isFullscreen:n,onClick:e}),renderItem:re,renderLeftNav:se=(e,n)=>(0,i.jsx)(N,{disabled:n,onClick:e}),renderPlayPauseButton:oe=(e,n)=>(0,i.jsx)(z,{isPlaying:n,onClick:e}),renderRightNav:ue=(e,n)=>(0,i.jsx)(L,{disabled:n,onClick:e}),renderThumbInner:ge,renderTopNav:ce=(e,n)=>(0,i.jsx)(W,{disabled:n,onClick:e}),showBullets:me=!1,showFullscreenButton:de=!0,showIndex:he=!1,showNav:be=!0,showPlayButton:pe=!0,showThumbnails:ye=!0,slideDuration:fe=450,slideInterval:ve=3e3,slideOnThumbnailOver:xe=!1,slideVertically:we=!1,startIndex:Se=0,stopPropagation:ke=!1,swipeThreshold:Te=30,swipingTransitionDuration:Ce=0,thumbnailPosition:je="bottom",useBrowserFullscreen:Re=!0,useTranslate3D:Oe=!0,useWindowKeyDown:Ie=!0}=e,Ee=(0,r.useRef)(null),Ne=(0,r.useRef)(null),Fe=(0,r.useRef)(null),ze=(0,r.useRef)({}),Me=(0,r.useRef)([]),Le=(0,r.useRef)(null),Pe=(0,r.useRef)(null),[We,$e]=(0,r.useState)(0),[Be,De]=(0,r.useState)(0),[Ue,He]=(0,r.useState)(0),[Ae,qe]=(0,r.useState)(!1),[Ge,Ke]=(0,r.useState)(!1),Ve=v.length,Ye=Ve>=2,{currentIndex:Xe,isTransitioning:Ze,currentSlideOffset:Je,canSlideLeft:Qe,canSlideRight:_e,slideToIndex:en,slideToIndexCore:nn,slideToIndexWithStyleReset:ln,slideLeft:an,slideRight:tn,getContainerStyle:rn,getExtendedSlides:sn,getAlignmentClass:on,setCurrentSlideOffset:un,setSlideStyle:gn}=function({items:e,startIndex:n=0,infinite:l=!0,isRTL:a=!1,slideDuration:t=450,onSlide:i,onBeforeSlide:s}){const[o,u]=(0,r.useState)(n),[g,c]=(0,r.useState)(n),[m,d]=(0,r.useState)(!1),[h,b]=(0,r.useState)(0),[p,y]=(0,r.useState)(l&&e.length>1?n+1:n),[f,v]=(0,r.useState)({transition:`all ${t}ms ease-out`}),x=(0,r.useRef)(null),w=(0,r.useRef)(null),S=(0,r.useRef)(!1),k=e.length,T=k>=2,C=l&&k>1?k+2:k;(0,r.useEffect)((()=>()=>{x.current&&window.clearTimeout(x.current),w.current&&window.clearTimeout(w.current)}),[]),(0,r.useEffect)((()=>{u(n),y(l&&e.length>1?n+1:n),v({transition:"none"})}),[e,n,l]);const j=(0,r.useCallback)((()=>o>0),[o]),R=(0,r.useCallback)((()=>o<k-1),[o,k]),O=(0,r.useCallback)((()=>l||(a?R():j())),[l,a,R,j]),I=(0,r.useCallback)((()=>l||(a?j():R())),[l,a,R,j]),E=(0,r.useCallback)((()=>{x.current=window.setTimeout((()=>{m&&(d(!1),i&&i(o))}),t+50)}),[m,o,t,i]),N=(0,r.useCallback)((e=>l&&k>1?e+1:e),[l,k]),F=(0,r.useCallback)(((e,n)=>{S.current=!0,v({transition:"none"}),y(n),w.current=window.setTimeout((()=>{v({transition:`all ${t}ms ease-out`}),S.current=!1}),50)}),[t]),z=(0,r.useCallback)(((e,n,a=!1)=>{if((m||S.current)&&!a)return;const r=k-1;let g,h=e,p=!1,f=null;e<0?(h=r,p=!0,f="start"):e>r&&(h=0,p=!0,f="end"),g=l&&k>1?p&&"start"===f?0:p&&"end"===f?C-1:h+1:h,s&&h!==o&&s(h),c(o),u(h),y(g),d(h!==o||p),b(0),v({transition:`all ${t}ms ease-out`}),l&&k>1&&p&&(x.current=window.setTimeout((()=>{d(!1),i&&i(h);const e=N(h);F(h,e)}),t+20))}),[o,k,C,t,s,i,m,l,N,F]),M=(0,r.useRef)($(((e,n)=>{z(e,n,!1)}),t,{trailing:!1}));(0,r.useEffect)((()=>{M.current=$(((e,n)=>{z(e,n,!1)}),t,{trailing:!1})}),[t,z]);const L=(0,r.useCallback)(((e,n)=>{M.current(e,n)}),[]),P=(0,r.useCallback)(((e,n)=>{b((n=>n+(o>e?.001:-.001))),v({transition:"none"}),window.setTimeout((()=>{z(e,n)}),25)}),[o,z]),W=(0,r.useCallback)((e=>{const n=o+("left"==(a?"right":"left")?-1:1);m||S.current||(2===k?P(n,e):L(n,e))}),[a,o,m,k,P,L]),B=(0,r.useCallback)((e=>{const n=o+("left"==(a?"left":"right")?-1:1);m||S.current||(2===k?P(n,e):L(n,e))}),[a,o,m,k,P,L]),D=(0,r.useCallback)((({useTranslate3D:e=!0,slideVertically:n=!1}={})=>{const l=-(100*p-h*(a?-1:1)),t=n?e?`translate3d(0, ${l}%, 0)`:`translate(0, ${l}%)`:e?`translate3d(${l}%, 0, 0)`:`translate(${l}%, 0)`;return{transform:t,WebkitTransform:t,MozTransform:t,msTransform:t,OTransform:t,...f}}),[p,h,f,a]),U=(0,r.useCallback)((()=>{if(!l||k<=1)return{extendedItems:e,getSlideKey:e=>`slide-${e}`,getRealIndex:e=>e};const n=[e[k-1],...e,e[0]];return{extendedItems:n,getSlideKey:e=>0===e?"slide-clone-last":e===n.length-1?"slide-clone-first":"slide-"+(e-1),getRealIndex:e=>0===e?k-1:e===n.length-1?0:e-1}}),[e,k,l]),H=(0,r.useCallback)((e=>{const{getRealIndex:n}=U(),l=n(e);return l===o?"image-gallery-center":l===(o-1+k)%k?"image-gallery-left":l===(o+1)%k?"image-gallery-right":""}),[o,k,U]);return(0,r.useEffect)((()=>{m&&!S.current&&E()}),[m,E]),{currentIndex:o,previousIndex:g,displayIndex:p,isTransitioning:m,currentSlideOffset:h,slideStyle:f,canSlide:T,canSlideLeft:O,canSlideRight:I,canSlidePrevious:j,canSlideNext:R,slideToIndex:L,slideToIndexCore:z,slideToIndexWithStyleReset:P,slideLeft:W,slideRight:B,getContainerStyle:D,getExtendedSlides:U,getAlignmentClass:H,setCurrentSlideOffset:b,setSlideStyle:v,setIsTransitioning:d,totalDisplaySlides:C}}({items:v,startIndex:Se,infinite:y,isRTL:f,slideDuration:fe,onSlide:G,onBeforeSlide:k}),{thumbsTranslate:cn,setThumbsTranslate:mn,thumbsSwipedTranslate:dn,setThumbsSwipedTranslate:hn,setThumbsStyle:bn,thumbnailsWrapperWidth:pn,thumbnailsWrapperHeight:yn,isSwipingThumbnail:fn,setIsSwipingThumbnail:vn,thumbnailsWrapperRef:xn,thumbnailsRef:wn,isThumbnailVertical:Sn,getThumbnailStyle:kn,getThumbnailBarHeight:Tn,initResizeObserver:Cn,removeResizeObserver:jn}=function({currentIndex:e,items:n,thumbnailPosition:l="bottom",disableThumbnailScroll:a=!1,slideDuration:t=450,isRTL:i=!1,useTranslate3D:s=!0}){const[o,u]=(0,r.useState)(0),[g,c]=(0,r.useState)(0),[m,d]=(0,r.useState)({transition:`all ${t}ms ease-out`}),[h,b]=(0,r.useState)(0),[p,y]=(0,r.useState)(0),[f,v]=(0,r.useState)(!1),x=(0,r.useRef)(null),w=(0,r.useRef)(null),S=(0,r.useRef)(null),k=(0,r.useRef)(e),T=(0,r.useCallback)((()=>"left"===l||"right"===l),[l]),C=(0,r.useCallback)((e=>{if(a)return 0;const l=w.current;if(!l)return 0;let t;if(T()){if(l.scrollHeight<=p)return 0;t=l.scrollHeight-p}else{if(l.scrollWidth<=h||h<=0)return 0;t=l.scrollWidth-h}return e*(t/(n.length-1))}),[a,n.length,h,p,T]),j=(0,r.useCallback)((()=>{if(f)return;const n=-C(e);d({transition:`all ${t}ms ease-out`}),0===e?(u(0),c(0)):(u(n),c(n))}),[e,C,f,t]);(0,r.useEffect)((()=>{k.current!==e&&(k.current=e,j())}),[e,j]);const R=(0,r.useRef)(l);(0,r.useEffect)((()=>{if(R.current!==l){R.current=l,d({transition:"none"}),u(0),c(0);const a=()=>{if(!x.current||!w.current)return;const a=x.current.getBoundingClientRect(),i=a.width,r=a.height;b(i),y(r);const s="left"===l||"right"===l,o=w.current;let g;if(s){if(o.scrollHeight<=r)return void d({transition:`all ${t}ms ease-out`});g=o.scrollHeight-r}else{if(o.scrollWidth<=i)return void d({transition:`all ${t}ms ease-out`});g=o.scrollWidth-i}const m=g/(n.length-1),h=-e*m;u(h),c(h),requestAnimationFrame((()=>{d({transition:`all ${t}ms ease-out`})}))};requestAnimationFrame((()=>{requestAnimationFrame((()=>{setTimeout(a,100)}))}))}}),[l,e,n.length,t]);const O=(0,r.useCallback)((()=>{const e=i?-1*o:o;let n;return n=T()?s?`translate3d(0, ${o}px, 0)`:`translate(0, ${o}px)`:s?`translate3d(${e}px, 0, 0)`:`translate(${e}px, 0)`,{WebkitTransform:n,MozTransform:n,msTransform:n,OTransform:n,transform:n,...m}}),[o,m,i,s,T]),I=(0,r.useCallback)((e=>T()?{height:e}:{}),[T]),E=(0,r.useCallback)((e=>{e?.current&&(S.current=new ResizeObserver(B((e=>{e&&e.forEach((e=>{b(e.contentRect.width),y(e.contentRect.height)}))}),50)),S.current.observe(e.current))}),[]),N=(0,r.useCallback)((()=>{S.current&&x.current&&(S.current.unobserve(x.current),S.current=null)}),[]);(0,r.useEffect)((()=>()=>{N()}),[N]);const F=(0,r.useCallback)((()=>{v(!0),c(o),d({transition:`all ${t}ms ease-out`})}),[o,t]),z=(0,r.useCallback)((()=>{v(!1)}),[]);return{thumbsTranslate:o,setThumbsTranslate:u,thumbsSwipedTranslate:g,setThumbsSwipedTranslate:c,thumbsStyle:m,setThumbsStyle:d,thumbnailsWrapperWidth:h,thumbnailsWrapperHeight:p,isSwipingThumbnail:f,setIsSwipingThumbnail:v,thumbnailsWrapperRef:x,thumbnailsRef:w,isThumbnailVertical:T,getThumbsTranslate:C,getThumbnailStyle:O,getThumbnailBarHeight:I,slideThumbnailBar:j,initResizeObserver:E,removeResizeObserver:N,handleThumbnailSwipeEnd:F,resetSwipingThumbnail:z}}({currentIndex:Xe,items:v,thumbnailPosition:je,disableThumbnailScroll:o,slideDuration:fe,isRTL:f,useTranslate3D:Oe}),{isFullscreen:Rn,modalFullscreen:On,fullScreen:In,exitFullScreen:En,toggleFullScreen:Nn,handleScreenChange:Fn}=function({useBrowserFullscreen:e=!0,onScreenChange:n,galleryRef:l}){const[a,t]=(0,r.useState)(!1),[i,s]=(0,r.useState)(!1),o=(0,r.useCallback)((()=>{const a=document,i=a.fullscreenElement||a.msFullscreenElement||a.mozFullScreenElement||a.webkitFullscreenElement,r=l?.current===i;n&&n(r),e&&t(r)}),[l,e,n]),u=(0,r.useCallback)((e=>{s(e),n&&n(e)}),[n]),g=(0,r.useCallback)((()=>{const n=l?.current;n&&(e?n.requestFullscreen?n.requestFullscreen():n.msRequestFullscreen?n.msRequestFullscreen():n.mozRequestFullScreen?n.mozRequestFullScreen():n.webkitRequestFullscreen?n.webkitRequestFullscreen():u(!0):u(!0),t(!0))}),[l,e,u]),c=(0,r.useCallback)((()=>{if(!a)return;const n=document;e?n.exitFullscreen?n.exitFullscreen():n.webkitExitFullscreen?n.webkitExitFullscreen():n.mozCancelFullScreen?n.mozCancelFullScreen():n.msExitFullscreen?n.msExitFullscreen():u(!1):u(!1),t(!1)}),[a,e,u]),m=(0,r.useCallback)((()=>{a?c():g()}),[a,c,g]);return{isFullscreen:a,modalFullscreen:i,fullScreen:g,exitFullScreen:c,toggleFullScreen:m,handleScreenChange:o}}({useBrowserFullscreen:Re,onScreenChange:H,galleryRef:Ee}),{isPlaying:zn,playPauseIntervalRef:Mn,play:Ln,pause:Pn,togglePlay:Wn}=function({autoPlay:e=!1,slideInterval:n=3e3,slideDuration:l=450,infinite:a=!0,totalSlides:t,currentIndex:i,canSlideRight:s,slideToIndexCore:o,slideToIndexWithStyleReset:u,onPlay:g,onPause:c}){const[m,d]=(0,r.useState)(!1),h=(0,r.useRef)(null),b=(0,r.useRef)(null),p=(0,r.useCallback)((()=>{if(a||s()){const e=i+1;2===t?u(e):o(e)}else h.current&&(clearInterval(h.current),h.current=null,d(!1),c&&c(i))}),[a,s,i,t,o,u,c]);b.current=p;const y=(0,r.useCallback)(((e=!0)=>{h.current||(d(!0),h.current=setInterval((()=>b.current?.()),Math.max(n,l)),g&&e&&g(i))}),[n,l,g,i]),f=(0,r.useCallback)(((e=!0)=>{h.current&&(clearInterval(h.current),h.current=null,d(!1),c&&e&&c(i))}),[c,i]),v=(0,r.useCallback)((()=>{h.current?f():y()}),[y,f]),x=(0,r.useRef)(y),w=(0,r.useRef)(f);return x.current=y,w.current=f,(0,r.useEffect)((()=>{m&&(w.current(!1),x.current(!1))}),[n,l,m]),(0,r.useEffect)((()=>{e&&!h.current&&x.current()}),[e]),(0,r.useEffect)((()=>()=>{h.current&&(clearInterval(h.current),h.current=null)}),[]),{isPlaying:m,playPauseIntervalRef:h,play:y,pause:f,togglePlay:v}}({autoPlay:a,slideInterval:ve,slideDuration:fe,infinite:y,totalSlides:Ve,currentIndex:Xe,canSlideRight:_e,slideToIndexCore:nn,slideToIndexWithStyleReset:ln,onPlay:U,onPause:P}),$n=(0,r.useCallback)((()=>{Ae&&qe(!1),Ge&&Ke(!1)}),[Ae,Ge]),Bn=(0,r.useCallback)((()=>Math.abs(Je)>Te),[Je,Te]),Dn=(0,r.useCallback)((({event:e,absX:n,absY:l,dir:a})=>{const t=a;if((t!==d&&t!==h&&!Ae||Ge||(Ae||qe(!0),we))&&(t!==c&&t!==m||Ge||Ke(!0),!s))if(ke&&e.preventDefault(),Ze)un(0);else{if((t===c||t===m)&&we)return;if((t===d||t===h)&&!we)return;const e={[c]:-1,[m]:1,[d]:-1,[h]:1}[t];let a=n/We*100;we&&(a=l/Be*100),Math.abs(a)>=100&&(a=100);const i={transition:`transform ${Ce}ms ease-out`};un(e*a),gn(i)}}),[s,ke,Ze,We,Be,we,Ce,Ae,Ge,un,gn]),Un=(0,r.useCallback)(((e,n)=>{let l=Xe;!Bn()&&!n||Ze||(l+=e),(-1===e&&!Qe()||1===e&&!_e())&&(l=Xe),nn(l)}),[Xe,Ze,Bn,Qe,_e,nn]),Hn=(0,r.useCallback)((({event:e,dir:n,velocity:l})=>{if(s)return;ke&&e.stopPropagation(),$n();let a=(n===c?1:-1)*(f?-1:1);we&&(a=n===d?1:-1),Un(a,we?l>b&&!(n===c||n===m):l>b&&!(n===d||n===h))}),[s,ke,$n,f,we,b,Un]),An=(0,r.useCallback)((({event:e,absX:n,absY:l,dir:a})=>{const t=a,i=Sn();if(i){if((t===c||t===m||Ge)&&!Ae)return void(Ge||Ke(!0));t!==d&&t!==h||Ae||qe(!0)}else{if((t===d||t===h||Ae)&&!Ge)return void(Ae||qe(!0));t!==c&&t!==m||Ge||Ke(!0)}const r=wn.current;if(!r)return;let s,o,u,g,b;i?(s=dn+(t===h?l:-l),o=r.scrollHeight-yn+20,u=Math.abs(s)>o,g=s>20,b=r.scrollHeight<=yn):(s=dn+(t===m?n:-n),o=r.scrollWidth-pn+20,u=Math.abs(s)>o,g=s>20,b=r.scrollWidth<=pn),b||(t!==c&&t!==d||!u)&&(t!==m&&t!==h||!g)&&(ke&&e.stopPropagation(),mn(s),fn||(bn({transition:"none"}),vn(!0)))}),[Sn,yn,pn,dn,ke,fn,Ae,Ge,wn,mn,bn,vn]),qn=(0,r.useCallback)((()=>{$n(),hn(cn)}),[$n,cn,hn]),Gn=(0,r.useCallback)((e=>{if(Ee.current?.classList.remove("image-gallery-using-mouse"),!t)switch(parseInt(String(e.keyCode||e.which||0),10)){case 37:Qe()&&!Mn?.current&&an(e);break;case 39:_e()&&!Mn?.current&&tn(e);break;case 27:Rn&&!Re&&En()}}),[t,Qe,_e,an,tn,Rn,Re,En,Mn]);Pe.current=Gn;const Kn=(0,r.useCallback)((e=>{Pe.current?.(e)}),[]),Vn=(0,r.useCallback)((()=>{Ee.current?.classList.add("image-gallery-using-mouse")}),[]),Yn=(0,r.useCallback)((e=>{J(e)&&C&&C(e)}),[C]),Xn=(0,r.useCallback)(((e,n)=>{Fe.current&&(window.clearTimeout(Fe.current),Fe.current=null),Fe.current=window.setTimeout((()=>{en(n),Pn()}),300)}),[en,Pn]),Zn=(0,r.useCallback)((()=>{Fe.current&&(window.clearTimeout(Fe.current),Fe.current=null,a&&Ln())}),[a,Ln]),Jn=(0,r.useCallback)(((e,n)=>{xe&&Xn(e,n)}),[xe,Xn]),Qn=(0,r.useCallback)(((e,n)=>{J(e)&&K?.(e,n)}),[K]),_n=(0,r.useCallback)(((e,n)=>{const l=e.target.parentNode?.parentNode;l?.blur&&l.blur(),Xe!==n&&(2===Ve?ln(n,e):en(n,e)),K&&K(e,n)}),[Xe,Ve,en,ln,K]),el=(0,r.useCallback)(((e,n)=>{e.target.blur(),Xe!==n&&(2===Ve?ln(n,e):en(n,e)),T&&T(e,n)}),[Xe,Ve,en,ln,T]),nl=(0,r.useCallback)((e=>{j&&-1===e.currentTarget.src.indexOf(j)&&(e.currentTarget.src=j)}),[j]),ll=(0,r.useCallback)(((e,n)=>{!ze.current[n]&&E&&(ze.current[n]=!0,E(e))}),[E]),al=(0,r.useCallback)((()=>{Ee.current&&($e(Ee.current.offsetWidth),De(Ee.current.offsetHeight),Ne.current&&He(Ne.current.offsetHeight))}),[]),tl=(0,r.useCallback)((e=>{e?.current&&(Le.current=new ResizeObserver(B((e=>{e&&e.forEach((()=>{al()}))}),50)),Le.current.observe(e.current))}),[al]),il=(0,r.useCallback)((()=>{Le.current&&Ne.current&&(Le.current.unobserve(Ne.current),Le.current=null)}),[]),rl=(0,r.useRef)(null),sl=(0,r.useRef)(null),ol=(0,r.useRef)(null),ul=(0,r.useRef)(null),gl=(0,r.useRef)(null),cl=(0,r.useRef)(null),ml=(0,r.useRef)(null);rl.current=Vn,sl.current=Fn,ol.current=tl,ul.current=Cn,gl.current=il,cl.current=jn,ml.current=al;const dl=(0,r.useCallback)((()=>{rl.current?.()}),[]),hl=(0,r.useCallback)((()=>{sl.current?.()}),[]),bl=(0,r.useCallback)((e=>{const n=O||nl;return(0,i.jsx)(A,{description:e.description,fullscreen:e.fullscreen,handleImageLoaded:ll,isFullscreen:Rn,loading:e.loading,original:e.original,originalAlt:e.originalAlt,originalHeight:e.originalHeight,originalTitle:e.originalTitle,originalWidth:e.originalWidth,sizes:e.sizes,srcSet:e.srcSet,onImageError:n})}),[Rn,O,nl,ll]),pl=(0,r.useCallback)((e=>{const n=_||nl;return(0,i.jsxs)("span",{className:"image-gallery-thumbnail-inner",children:[(0,i.jsx)("img",{alt:e.thumbnailAlt,className:"image-gallery-thumbnail-image",height:e.thumbnailHeight,loading:e.thumbnailLoading,src:e.thumbnail,title:e.thumbnailTitle,width:e.thumbnailWidth,onError:n}),e.thumbnailLabel&&(0,i.jsx)("div",{className:"image-gallery-thumbnail-label",children:e.thumbnailLabel})]})}),[_,nl]),yl=(0,r.useMemo)((()=>rn({useTranslate3D:Oe,slideVertically:we})),[rn,Oe,we]),fl=(0,r.useMemo)((()=>{const e=[],n=[],l=[],{extendedItems:a,getSlideKey:t,getRealIndex:r}=sn();return a.forEach(((n,l)=>{const a=r(l),s=on(l),o=n.originalClass?` ${n.originalClass}`:"",u=n.renderItem||re||bl,g=!x||s||Me.current[a];g&&x&&!Me.current[a]&&(Me.current[a]=!0),e.push((0,i.jsx)(q,{alignment:s,index:a,originalClass:o,onClick:C,onKeyUp:Yn,onMouseLeave:F,onMouseOver:M,onTouchEnd:ee,onTouchMove:ne,onTouchStart:le,children:g?u(n):(0,i.jsx)("div",{style:{height:"100%"}})},t(l)))})),v.forEach(((e,a)=>{const t=e.thumbnailClass?` ${e.thumbnailClass}`:"",r=e.renderThumbInner||ge||pl;ye&&e.thumbnail&&n.push((0,i.jsx)(Y,{index:a,isActive:Xe===a,thumbnailClass:t,onClick:e=>_n(e,a),onFocus:e=>Jn(e,a),onKeyUp:e=>Qn(e,a),onMouseLeave:xe?Zn:null,onMouseOver:e=>Jn(e,a),children:r(e)},`thumbnail-${a}`)),me&&l.push((0,i.jsx)(w,{bulletClass:e.bulletClass,index:a,isActive:Xe===a,onClick:e=>el(e,a)},`bullet-${a}`))})),{slides:e,thumbnails:n,bullets:l}}),[v,Xe,sn,on,x,ye,me,xe,bl,pl,re,ge,C,Yn,ne,ee,le,M,F,Zn,Jn,Qn,_n,el]);(0,r.useEffect)((()=>{const e=Ee.current;return Ie?window.addEventListener("keydown",Kn):e?.addEventListener("keydown",Kn),window.addEventListener("mousedown",dl),ol.current?.(Ne),ul.current?.(xn),Z.forEach((e=>{document.addEventListener(e,hl)})),()=>{window.removeEventListener("mousedown",dl),window.removeEventListener("keydown",Kn),e?.removeEventListener("keydown",Kn),Z.forEach((e=>{document.removeEventListener(e,hl)})),gl.current?.(),cl.current?.()}}),[Ie,Kn,dl,hl,xn]),(0,r.useEffect)((()=>{gl.current?.(),cl.current?.(),ol.current?.(Ne),ul.current?.(xn)}),[je,xn]),(0,r.useEffect)((()=>{ye?ul.current?.(xn):cl.current?.(),ml.current?.()}),[ye,xn]),(0,r.useEffect)((()=>{x&&(Me.current=[]),ml.current?.()}),[v,x]),(0,r.useEffect)((()=>{!Ze&&fn&&vn(!1)}),[Ze,fn,vn]),(0,r.useImperativeHandle)(n,(()=>({play:Ln,pause:Pn,togglePlay:Wn,fullScreen:In,exitFullScreen:En,toggleFullScreen:Nn,slideToIndex:nn,getCurrentIndex:()=>Xe})));const{slides:vl,thumbnails:xl,bullets:wl}=fl,Sl=g("image-gallery-slide-wrapper",Q(je),{"image-gallery-rtl":f}),kl=(0,i.jsxs)("div",{ref:Ne,className:Sl,children:[te&&te(),Ye?(0,i.jsxs)(i.Fragment,{children:[be&&(0,i.jsxs)(i.Fragment,{children:[we?ce(an,!Qe()):se(an,!Qe()),we?ae(tn,!_e()):ue(tn,!_e())]}),(0,i.jsx)(V,{className:"image-gallery-swipe",delta:0,onSwiped:Hn,onSwiping:Dn,children:(0,i.jsx)("div",{className:"image-gallery-slides",style:we?{height:Ue}:void 0,children:(0,i.jsx)("div",{className:g("image-gallery-slides-container",{vertical:we}),style:yl,children:vl})})})]}):(0,i.jsx)("div",{className:"image-gallery-slides",style:we?{height:Ue}:void 0,children:(0,i.jsx)("div",{className:g("image-gallery-slides-container",{vertical:we}),style:yl,children:vl})}),pe&&oe(Wn,zn),me&&(0,i.jsx)(S,{bullets:wl,slideVertically:we}),de&&ie(Nn,Rn),he&&(0,i.jsx)(D,{currentIndex:Xe,indexSeparator:p,totalItems:Ve})]}),Tl=g("image-gallery",l,{"fullscreen-modal":On}),Cl=g("image-gallery-content",Q(je),{fullscreen:Rn});return(0,i.jsx)("div",{ref:Ee,"aria-live":"polite",className:Tl,children:(0,i.jsxs)("div",{className:Cl,children:[("bottom"===je||"right"===je)&&kl,ye&&xl.length>0&&(0,i.jsx)(X,{disableThumbnailSwipe:u,isRTL:f,thumbnailBarHeight:Tn(Ue),thumbnailPosition:je,thumbnails:xl,thumbnailsRef:wn,thumbnailStyle:kn(),thumbnailsWrapperRef:xn,onSwiped:qn,onSwiping:An}),("top"===je||"left"===je)&&kl]})})}));var ee=t.A;export{ee as default};
|
|
1
|
+
import*as e from"react";var n={698:(e,n)=>{var l=Symbol.for("react.transitional.element"),a=Symbol.for("react.fragment");function t(e,n,a){var t=null;if(void 0!==a&&(t=""+a),void 0!==n.key&&(t=""+n.key),"key"in n)for(var i in a={},n)"key"!==i&&(a[i]=n[i]);else a=n;return n=a.ref,{$$typeof:l,type:e,key:t,ref:void 0!==n?n:null,props:a}}n.Fragment=a,n.jsx=t,n.jsxs=t},848:(e,n,l)=>{e.exports=l(698)}},l={};function a(e){var t=l[e];if(void 0!==t)return t.exports;var i=l[e]={exports:{}};return n[e](i,i.exports,a),i.exports}a.d=(e,n)=>{for(var l in n)a.o(n,l)&&!a.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:n[l]})},a.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n);var t={};a.d(t,{A:()=>_});var i=a(848);const r=(s={default:()=>e.default,forwardRef:()=>e.forwardRef,memo:()=>e.memo,useCallback:()=>e.useCallback,useEffect:()=>e.useEffect,useImperativeHandle:()=>e.useImperativeHandle,useMemo:()=>e.useMemo,useRef:()=>e.useRef,useState:()=>e.useState},o={},a.d(o,s),o);var s,o;function u(e){var n,l,a="";if("string"==typeof e||"number"==typeof e)a+=e;else if("object"==typeof e)if(Array.isArray(e)){var t=e.length;for(n=0;n<t;n++)e[n]&&(l=u(e[n]))&&(a&&(a+=" "),a+=l)}else for(l in e)e[l]&&(a&&(a+=" "),a+=l);return a}const g=function(){for(var e,n,l=0,a="",t=arguments.length;l<t;l++)(e=arguments[l])&&(n=u(e))&&(a&&(a+=" "),a+=n);return a},c="Left",m="Right",d="Up",h="Down",b={delta:10,preventScrollOnSwipe:!1,rotationAngle:0,trackMouse:!1,trackTouch:!0,swipeDuration:1/0,touchEventOptions:{passive:!0}},p={first:!0,initial:[0,0],start:0,swiping:!1,xy:[0,0]},y="mousemove",f="mouseup";function v(e,n){if(0===n)return e;const l=Math.PI/180*n;return[e[0]*Math.cos(l)+e[1]*Math.sin(l),e[1]*Math.cos(l)-e[0]*Math.sin(l)]}function x(e){const{trackMouse:n}=e,l=r.useRef(Object.assign({},p)),a=r.useRef(Object.assign({},b)),t=r.useRef(Object.assign({},a.current));let i;for(i in t.current=Object.assign({},a.current),a.current=Object.assign(Object.assign({},b),e),b)void 0===a.current[i]&&(a.current[i]=b[i]);const[s,o]=r.useMemo((()=>function(e,n){const l=n=>{const l="touches"in n;l&&n.touches.length>1||e(((e,t)=>{t.trackMouse&&!l&&(document.addEventListener(y,a),document.addEventListener(f,i));const{clientX:r,clientY:s}=l?n.touches[0]:n,o=v([r,s],t.rotationAngle);return t.onTouchStartOrOnMouseDown&&t.onTouchStartOrOnMouseDown({event:n}),Object.assign(Object.assign(Object.assign({},e),p),{initial:o.slice(),xy:o,start:n.timeStamp||0})}))},a=n=>{e(((e,l)=>{const a="touches"in n;if(a&&n.touches.length>1)return e;if(n.timeStamp-e.start>l.swipeDuration)return e.swiping?Object.assign(Object.assign({},e),{swiping:!1}):e;const{clientX:t,clientY:i}=a?n.touches[0]:n,[r,s]=v([t,i],l.rotationAngle),o=r-e.xy[0],u=s-e.xy[1],g=Math.abs(o),p=Math.abs(u),y=(n.timeStamp||0)-e.start,f=Math.sqrt(g*g+p*p)/(y||1),x=[o/(y||1),u/(y||1)],w=function(e,n,l,a){return e>n?l>0?m:c:a>0?h:d}(g,p,o,u),S="number"==typeof l.delta?l.delta:l.delta[w.toLowerCase()]||b.delta;if(g<S&&p<S&&!e.swiping)return e;const k={absX:g,absY:p,deltaX:o,deltaY:u,dir:w,event:n,first:e.first,initial:e.initial,velocity:f,vxvy:x};k.first&&l.onSwipeStart&&l.onSwipeStart(k),l.onSwiping&&l.onSwiping(k);let T=!1;return(l.onSwiping||l.onSwiped||l[`onSwiped${w}`])&&(T=!0),T&&l.preventScrollOnSwipe&&l.trackTouch&&n.cancelable&&n.preventDefault(),Object.assign(Object.assign({},e),{first:!1,eventData:k,swiping:!0})}))},t=n=>{e(((e,l)=>{let a;if(e.swiping&&e.eventData){if(n.timeStamp-e.start<l.swipeDuration){a=Object.assign(Object.assign({},e.eventData),{event:n}),l.onSwiped&&l.onSwiped(a);const t=l[`onSwiped${a.dir}`];t&&t(a)}}else l.onTap&&l.onTap({event:n});return l.onTouchEndOrOnMouseUp&&l.onTouchEndOrOnMouseUp({event:n}),Object.assign(Object.assign(Object.assign({},e),p),{eventData:a})}))},i=e=>{document.removeEventListener(y,a),document.removeEventListener(f,i),t(e)},r=(e,n)=>{let i=()=>{};if(e&&e.addEventListener){const r=Object.assign(Object.assign({},b.touchEventOptions),n.touchEventOptions),s=[["touchstart",l,r],["touchmove",a,Object.assign(Object.assign({},r),n.preventScrollOnSwipe?{passive:!1}:{})],["touchend",t,r]];s.forEach((([n,l,a])=>e.addEventListener(n,l,a))),i=()=>s.forEach((([n,l])=>e.removeEventListener(n,l)))}return i},s={ref:n=>{null!==n&&e(((e,l)=>{if(e.el===n)return e;const a={};return e.el&&e.el!==n&&e.cleanUpTouch&&(e.cleanUpTouch(),a.cleanUpTouch=void 0),l.trackTouch&&n&&(a.cleanUpTouch=r(n,l)),Object.assign(Object.assign(Object.assign({},e),{el:n}),a)}))}};return n.trackMouse&&(s.onMouseDown=l),[s,r]}((e=>l.current=e(l.current,a.current)),{trackMouse:n})),[n]);return l.current=function(e,n,l,a){return n.trackTouch&&e.el?e.cleanUpTouch?n.preventScrollOnSwipe!==l.preventScrollOnSwipe||n.touchEventOptions.passive!==l.touchEventOptions.passive?(e.cleanUpTouch(),Object.assign(Object.assign({},e),{cleanUpTouch:a(e.el,n)})):e:Object.assign(Object.assign({},e),{cleanUpTouch:a(e.el,n)}):(e.cleanUpTouch&&e.cleanUpTouch(),Object.assign(Object.assign({},e),{cleanUpTouch:void 0}))}(l.current,a.current,t.current,o),s}const w=(0,r.memo)((function({index:e,isActive:n=!1,bulletClass:l="",onClick:a}){const t=g("image-gallery-bullet",l,{active:n});return(0,i.jsx)("button",{"aria-label":`Go to Slide ${e+1}`,"aria-pressed":n?"true":"false",className:t,type:"button",onClick:a},`bullet-${e}`)})),S=(0,r.memo)((function({bullets:e=[],slideVertically:n=!1,currentIndex:l=0,maxBullets:a}){const t=(0,r.useRef)(null),[s,o]=(0,r.useState)(0),u=void 0!==a&&a<3?3:a,c=g("image-gallery-bullets",{"image-gallery-bullets-vertical":n});(0,r.useEffect)((()=>{const l=()=>{if(t.current&&u&&e.length>0){const e=t.current.querySelector(".image-gallery-bullet");if(e){const l=window.getComputedStyle(e),a=e.offsetWidth,t=parseFloat(l.marginLeft)||0,i=parseFloat(l.marginRight)||0,r=e.offsetHeight,s=parseFloat(l.marginTop)||0,u=parseFloat(l.marginBottom)||0;o(n?r+s+u:a+t+i)}}};l();const a=new ResizeObserver((()=>{l()}));return t.current&&a.observe(t.current),()=>{a.disconnect()}}),[e.length,u,n]);const m=(0,r.useMemo)((()=>{if(!u||u>=e.length||0===s)return{};const a=e.length,t=Math.floor(u/2);let i;return i=l<=t?0:l>=a-t-1?-(a-u)*s:-(l-t)*s,{transform:n?`translateY(${i}px)`:`translateX(${i}px)`,transition:"transform 0.3s ease-out"}}),[e.length,l,u,s,n]),d=(0,r.useMemo)((()=>{if(!u||u>=e.length||0===s)return{};const l=u*s;return n?{height:`${l}px`,overflow:"hidden"}:{width:`${l}px`,overflow:"hidden"}}),[u,e.length,s,n]);return e&&0!==e.length?(0,i.jsx)("div",{className:c,children:(0,i.jsx)("div",{"aria-label":"Bullet Navigation",className:"image-gallery-bullets-container",role:"navigation",style:d,children:(0,i.jsx)("div",{ref:t,className:"image-gallery-bullets-inner",style:m,children:e})})}):null})),k={left:(0,i.jsx)("polyline",{points:"15 18 9 12 15 6"}),right:(0,i.jsx)("polyline",{points:"9 18 15 12 9 6"}),top:(0,i.jsx)("polyline",{points:"6 15 12 9 18 15"}),bottom:(0,i.jsx)("polyline",{points:"6 9 12 15 18 9"}),maximize:(0,i.jsx)("path",{d:"M8 3H3v5m18 0V3h-5m0 18h5v-5M3 16v5h5"}),minimize:(0,i.jsx)("path",{d:"M8 3v5H3m18 0h-5V3m0 18v-5h5M3 16h5v5"}),play:(0,i.jsx)("polygon",{points:"5 3 19 12 5 21 5 3"}),pause:(0,i.jsxs)(r.default.Fragment,{children:[(0,i.jsx)("rect",{height:"16",width:"4",x:"6",y:"4"}),(0,i.jsx)("rect",{height:"16",width:"4",x:"14",y:"4"})]})},T={strokeWidth:1,viewBox:"0 0 24 24"},C=e=>{const{strokeWidth:n,viewBox:l,icon:a}={...T,...e};return(0,i.jsx)("svg",{className:"image-gallery-svg",fill:"none",stroke:"currentColor",strokeLinecap:"square",strokeLinejoin:"miter",strokeWidth:n,viewBox:l,xmlns:"http://www.w3.org/2000/svg",children:k[a]})},j=r.default.memo((({disabled:e,onClick:n})=>(0,i.jsx)("button",{"aria-label":"Next Slide",className:"image-gallery-icon image-gallery-bottom-nav",disabled:e,type:"button",onClick:n,children:(0,i.jsx)(C,{icon:"bottom",viewBox:"6 0 12 24"})})));j.displayName="BottomNav";const R=j,O=r.default.memo((({isFullscreen:e,onClick:n})=>(0,i.jsx)("button",{"aria-label":"Open Fullscreen",className:"image-gallery-icon image-gallery-fullscreen-button",type:"button",onClick:n,children:(0,i.jsx)(C,{icon:e?"minimize":"maximize",strokeWidth:2})})));O.displayName="Fullscreen";const I=O,E=r.default.memo((({disabled:e,onClick:n})=>(0,i.jsx)("button",{"aria-label":"Previous Slide",className:"image-gallery-icon image-gallery-left-nav",disabled:e,type:"button",onClick:n,children:(0,i.jsx)(C,{icon:"left",viewBox:"6 0 12 24"})})));E.displayName="LeftNav";const F=E,N=r.default.memo((({isPlaying:e,onClick:n})=>(0,i.jsx)("button",{"aria-label":"Play or Pause Slideshow",className:"image-gallery-icon image-gallery-play-button",type:"button",onClick:n,children:(0,i.jsx)(C,{icon:e?"pause":"play",strokeWidth:2})})));N.displayName="PlayPause";const z=N,M=r.default.memo((({disabled:e,onClick:n})=>(0,i.jsx)("button",{"aria-label":"Next Slide",className:"image-gallery-icon image-gallery-right-nav",disabled:e,type:"button",onClick:n,children:(0,i.jsx)(C,{icon:"right",viewBox:"6 0 12 24"})})));M.displayName="RightNav";const L=M,P=r.default.memo((({disabled:e,onClick:n})=>(0,i.jsx)("button",{"aria-label":"Previous Slide",className:"image-gallery-icon image-gallery-top-nav",disabled:e,type:"button",onClick:n,children:(0,i.jsx)(C,{icon:"top",viewBox:"6 0 12 24"})})));P.displayName="TopNav";const $=P;function W(e,n,l={}){const{leading:a=!0,trailing:t=!0}=l;let i=0,r=null,s=null,o=null;function u(){null!==s&&(e.apply(o,s),i=Date.now(),s=null,o=null)}return function(...e){const l=Date.now(),g=l-i;s=e,o=this,g>=n?(r&&(clearTimeout(r),r=null),a?u():i=l):t&&!r&&(r=setTimeout((()=>{r=null,s&&u()}),n-g))}}function B(e,n){let l;return function(...a){clearTimeout(l),l=setTimeout((()=>{e.apply(this,a)}),n)}}const D=(0,r.memo)((function({currentIndex:e,totalItems:n,indexSeparator:l=" / "}){return(0,i.jsxs)("div",{className:"image-gallery-index",children:[(0,i.jsx)("span",{className:"image-gallery-index-current",children:e+1}),(0,i.jsx)("span",{className:"image-gallery-index-separator",children:l}),(0,i.jsx)("span",{className:"image-gallery-index-total",children:n})]})})),H={description:"",fullscreen:"",isFullscreen:!1,originalAlt:"",originalHeight:"",originalWidth:"",originalTitle:"",sizes:"",srcSet:"",loading:"eager"},U=r.default.memo((e=>{const{description:n,fullscreen:l,handleImageLoaded:a,isFullscreen:t,onImageError:s,original:o,originalAlt:u,originalHeight:g,originalWidth:c,originalTitle:m,sizes:d,srcSet:h,loading:b}={...H,...e},p=t&&l||o;return(0,i.jsxs)(r.default.Fragment,{children:[(0,i.jsx)("img",{alt:u,className:"image-gallery-image",height:g,loading:b,sizes:d,src:p,srcSet:h,title:m,width:c,onError:s,onLoad:e=>a(e,o)}),n&&(0,i.jsx)("span",{className:"image-gallery-description",children:n})]})}));U.displayName="Item";const A=U,q=(0,r.memo)((function({index:e,alignment:n="",originalClass:l="",style:a={},onClick:t,onKeyUp:r,onTouchMove:s,onTouchEnd:o,onTouchStart:u,onMouseOver:g,onMouseLeave:c,children:m=null}){return(0,i.jsx)("div",{"aria-label":`Go to Slide ${e+1}`,className:`image-gallery-slide ${n} ${l}`,role:"button",style:a,tabIndex:-1,onClick:t,onFocus:g,onKeyUp:r,onMouseLeave:c,onMouseOver:g,onTouchEnd:o,onTouchMove:s,onTouchStart:u,children:m},`slide-${e}`)}));let G=!1;const K={className:"",delta:0,onSwiping:()=>{},onSwiped:()=>{}},V=e=>{const{children:n,className:l,delta:a,onSwiping:t,onSwiped:r}={...K,...e},s=x({delta:a,onSwiping:t,onSwiped:r});return(0,i.jsx)("div",{...s,className:l,children:n})},Y=(0,r.memo)((function({index:e,isActive:n=!1,thumbnailClass:l="",onMouseLeave:a,onMouseOver:t,onFocus:r,onKeyUp:s,onClick:o,children:u=null}){const c=g("image-gallery-thumbnail",l,{active:n});return(0,i.jsx)("button",{"aria-label":`Go to Slide ${e+1}`,"aria-pressed":n?"true":"false",className:c,tabIndex:0,type:"button",onClick:o??void 0,onFocus:r??void 0,onKeyUp:s??void 0,onMouseLeave:a??void 0,onMouseOver:t??void 0,children:u},`thumbnail-${e}`)})),X=(0,r.memo)((function({thumbnails:e=[],thumbnailPosition:n="bottom",thumbnailStyle:l={},thumbnailBarHeight:a={},isRTL:t=!1,disableThumbnailSwipe:r=!1,onSwiping:s,onSwiped:o,thumbnailsWrapperRef:u,thumbnailsRef:c}){const m="left"===n||"right"===n,d=g("image-gallery-thumbnails-wrapper",(e=>{const n={left:"image-gallery-thumbnails-left",right:"image-gallery-thumbnails-right",bottom:"image-gallery-thumbnails-bottom",top:"image-gallery-thumbnails-top"};return n[e]?` ${n[e]}`:""})(n),{"thumbnails-wrapper-rtl":!m&&t},{"thumbnails-swipe-horizontal":!m&&!r},{"thumbnails-swipe-vertical":m&&!r});return e&&0!==e.length?(0,i.jsx)(V,{className:d,delta:0,onSwiped:r?void 0:o??void 0,onSwiping:r?void 0:s??void 0,children:(0,i.jsx)("div",{ref:u,className:"image-gallery-thumbnails",style:a,children:(0,i.jsx)("nav",{ref:c,"aria-label":"Thumbnail Navigation",className:"image-gallery-thumbnails-container",style:l,children:e})})}):null}));!function(){if(G||"undefined"==typeof document)return;if(document.querySelector("style[data-image-gallery]"))return void(G=!0);const e=document.createElement("style");e.setAttribute("data-image-gallery",""),e.textContent="/**\n * React Image Gallery - Styles\n * \n * Design System: Base-4 spacing scale\n * Spacing: 2, 4, 8, 12, 16, 20, 24, 32, 48, 64, 80, 96, 120px\n * \n * CSS Custom Properties for theming:\n * --ig-primary-color: Primary/accent color (default: #337ab7)\n * --ig-white: Icon and text color (default: #fff)\n * --ig-black: Background color in fullscreen (default: #000)\n * --ig-background-overlay: Overlay background (default: rgba(0, 0, 0, 0.4))\n * --ig-thumbnail-size: Thumbnail dimensions (default: 96px)\n * --ig-thumbnail-size-small: Thumbnail size on small screens (default: 80px)\n * --ig-thumbnail-border-width: Thumbnail border width (default: 4px)\n * --ig-thumbnail-border-width-small: Thumbnail border on small screens (default: 3px)\n * --ig-bullet-size: Bullet size (default: 4px)\n * --ig-bullet-size-small: Bullet size on small screens (default: 3px)\n */\n\n:root {\n --ig-primary-color: #337ab7;\n --ig-white: #fff;\n --ig-black: #000;\n --ig-background-overlay: rgba(0, 0, 0, 0.4);\n --ig-thumbnail-size: 96px;\n --ig-thumbnail-size-small: 80px;\n --ig-thumbnail-border-width: 4px;\n --ig-thumbnail-border-width-small: 3px;\n --ig-bullet-size: 4px;\n --ig-bullet-size-small: 3px;\n}\n\n/* ==========================================================================\n SVG Icon Styles\n ========================================================================== */\n\n.image-gallery-icon {\n color: var(--ig-white, #fff);\n transition: all 0.3s ease-out;\n appearance: none;\n background-color: transparent;\n border: 0;\n cursor: pointer;\n outline: none;\n position: absolute;\n z-index: 4;\n filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));\n}\n\n@media (hover: hover) and (pointer: fine) {\n .image-gallery-icon:hover {\n color: var(--ig-primary-color, #337ab7);\n }\n .image-gallery-icon:hover .image-gallery-svg {\n transform: scale(1.1);\n }\n}\n\n.image-gallery-icon:focus {\n outline: 2px solid var(--ig-primary-color, #337ab7);\n}\n\n.image-gallery-using-mouse .image-gallery-icon:focus {\n outline: none;\n}\n\n/* Fullscreen & Play buttons */\n.image-gallery-fullscreen-button,\n.image-gallery-play-button {\n bottom: 0;\n padding: 20px;\n}\n\n.image-gallery-fullscreen-button .image-gallery-svg,\n.image-gallery-play-button .image-gallery-svg {\n height: 32px;\n width: 32px;\n}\n\n@media (max-width: 768px) {\n .image-gallery-fullscreen-button,\n .image-gallery-play-button {\n padding: 16px;\n }\n .image-gallery-fullscreen-button .image-gallery-svg,\n .image-gallery-play-button .image-gallery-svg {\n height: 24px;\n width: 24px;\n }\n}\n\n@media (max-width: 480px) {\n .image-gallery-fullscreen-button,\n .image-gallery-play-button {\n padding: 12px;\n }\n .image-gallery-fullscreen-button .image-gallery-svg,\n .image-gallery-play-button .image-gallery-svg {\n height: 16px;\n width: 16px;\n }\n}\n\n.image-gallery-fullscreen-button {\n right: 0;\n}\n\n.image-gallery-play-button {\n left: 0;\n}\n\n/* Top & Bottom navigation */\n.image-gallery-top-nav,\n.image-gallery-bottom-nav {\n padding: 12px;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.image-gallery-top-nav .image-gallery-svg,\n.image-gallery-bottom-nav .image-gallery-svg {\n height: 120px;\n width: 96px;\n}\n\n@media (max-width: 768px) {\n .image-gallery-top-nav .image-gallery-svg,\n .image-gallery-bottom-nav .image-gallery-svg {\n height: 72px;\n width: 48px;\n }\n}\n\n@media (max-width: 480px) {\n .image-gallery-top-nav .image-gallery-svg,\n .image-gallery-bottom-nav .image-gallery-svg {\n height: 48px;\n width: 32px;\n }\n}\n\n.image-gallery-top-nav[disabled],\n.image-gallery-bottom-nav[disabled] {\n cursor: not-allowed;\n opacity: 0.6;\n pointer-events: none;\n}\n\n.image-gallery-top-nav {\n top: 0;\n}\n\n.image-gallery-bottom-nav {\n bottom: 0;\n}\n\n/* Left & Right navigation */\n.image-gallery-left-nav,\n.image-gallery-right-nav {\n padding: 48px 12px;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.image-gallery-left-nav .image-gallery-svg,\n.image-gallery-right-nav .image-gallery-svg {\n height: 120px;\n width: 64px;\n}\n\n@media (max-width: 768px) {\n .image-gallery-left-nav .image-gallery-svg,\n .image-gallery-right-nav .image-gallery-svg {\n height: 72px;\n width: 32px;\n }\n}\n\n@media (max-width: 480px) {\n .image-gallery-left-nav .image-gallery-svg,\n .image-gallery-right-nav .image-gallery-svg {\n height: 48px;\n width: 24px;\n }\n}\n\n.image-gallery-left-nav[disabled],\n.image-gallery-right-nav[disabled] {\n cursor: not-allowed;\n opacity: 0.6;\n pointer-events: none;\n}\n\n.image-gallery-left-nav {\n left: 0;\n}\n\n.image-gallery-right-nav {\n right: 0;\n}\n\n/* ==========================================================================\n Gallery Container\n ========================================================================== */\n\n.image-gallery {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n position: relative;\n /* Prevent mobile overscroll/pull-to-refresh */\n overscroll-behavior: none;\n -webkit-overflow-scrolling: touch;\n}\n\n.image-gallery.fullscreen-modal {\n background: var(--ig-black, #000);\n bottom: 0;\n height: 100%;\n left: 0;\n position: fixed;\n right: 0;\n top: 0;\n width: 100%;\n z-index: 5;\n}\n\n.image-gallery.fullscreen-modal .image-gallery-content {\n top: 50%;\n transform: translateY(-50%);\n}\n\n/* ==========================================================================\n Gallery Content\n ========================================================================== */\n\n.image-gallery-content {\n position: relative;\n line-height: 0;\n top: 0;\n}\n\n.image-gallery-content.fullscreen {\n background: var(--ig-black, #000);\n}\n\n.image-gallery-content .image-gallery-slide .image-gallery-image {\n max-height: calc(100vh - 80px);\n}\n\n.image-gallery-content.image-gallery-thumbnails-left\n .image-gallery-slide\n .image-gallery-image,\n.image-gallery-content.image-gallery-thumbnails-right\n .image-gallery-slide\n .image-gallery-image {\n max-height: 100vh;\n}\n\n/* ==========================================================================\n Slide Wrapper\n ========================================================================== */\n\n.image-gallery-slide-wrapper {\n position: relative;\n}\n\n.image-gallery-slide-wrapper.image-gallery-thumbnails-left,\n.image-gallery-slide-wrapper.image-gallery-thumbnails-right {\n display: inline-block;\n width: calc(100% - 112px);\n}\n\n@media (max-width: 768px) {\n .image-gallery-slide-wrapper.image-gallery-thumbnails-left,\n .image-gallery-slide-wrapper.image-gallery-thumbnails-right {\n width: calc(100% - 88px);\n }\n}\n\n.image-gallery-slide-wrapper.image-gallery-rtl {\n direction: rtl;\n}\n\n.image-gallery-swipe {\n overflow: hidden;\n /* GPU acceleration */\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n /* Prevent overscroll during swipe */\n overscroll-behavior: contain;\n touch-action: pan-y pinch-zoom;\n}\n\n/* ==========================================================================\n Slides\n ========================================================================== */\n\n.image-gallery-slides {\n overflow: hidden;\n position: relative;\n touch-action: none;\n /* GPU acceleration for smooth swiping */\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n contain: layout style paint;\n isolation: isolate;\n overscroll-behavior: none;\n}\n\n/* Flex container that holds all slides and gets transformed */\n.image-gallery-slides-container {\n display: flex;\n /* GPU acceleration for smooth swiping */\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n -webkit-transform-style: preserve-3d;\n transform-style: preserve-3d;\n will-change: transform;\n}\n\n.image-gallery-slides-container.vertical {\n flex-direction: column;\n height: 100%;\n}\n\n.image-gallery-slides-container.vertical .image-gallery-slide {\n flex: 0 0 100%;\n height: 100%;\n min-height: 0;\n}\n\n.image-gallery-slides-container.vertical\n .image-gallery-slide\n .image-gallery-image {\n height: 100%;\n width: auto;\n max-width: 100%;\n}\n\n.image-gallery-slide {\n flex: 0 0 100%;\n min-width: 0;\n /* GPU acceleration for smooth swiping */\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n}\n\n.image-gallery-slide .image-gallery-image {\n width: 100%;\n object-fit: contain;\n}\n\n.image-gallery-slide .image-gallery-description {\n background: var(--ig-background-overlay, rgba(0, 0, 0, 0.4));\n bottom: 72px;\n color: var(--ig-white, #fff);\n left: 0;\n line-height: 1;\n padding: 12px 20px;\n position: absolute;\n white-space: normal;\n}\n\n@media (max-width: 768px) {\n .image-gallery-slide .image-gallery-description {\n bottom: 48px;\n font-size: 0.8em;\n padding: 8px 16px;\n }\n}\n\n/* ==========================================================================\n Bullets\n ========================================================================== */\n\n.image-gallery-bullets {\n bottom: 20px;\n left: 0;\n margin: 0 auto;\n position: absolute;\n right: 0;\n width: 80%;\n z-index: 4;\n text-align: center;\n}\n\n.image-gallery-bullets .image-gallery-bullets-container {\n margin: 0 auto;\n padding: 0;\n display: inline-block;\n}\n\n.image-gallery-bullets .image-gallery-bullets-inner {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n white-space: nowrap;\n padding: 2px 0;\n}\n\n.image-gallery-bullets-vertical .image-gallery-bullets-inner {\n flex-direction: column;\n padding: 0 2px;\n}\n\n.image-gallery-bullets .image-gallery-bullet {\n appearance: none;\n background-color: transparent;\n border: 1px solid var(--ig-white, #fff);\n border-radius: 50%;\n box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);\n cursor: pointer;\n margin: 0 4px;\n outline: none;\n width: calc(var(--ig-bullet-size, 4px) * 2 + 2px);\n height: calc(var(--ig-bullet-size, 4px) * 2 + 2px);\n padding: 0;\n flex-shrink: 0;\n transition: all 0.2s ease-out;\n}\n\n@media (max-width: 768px) {\n .image-gallery-bullets .image-gallery-bullet {\n margin: 0 3px;\n width: calc(var(--ig-bullet-size-small, 3px) * 2 + 2px);\n height: calc(var(--ig-bullet-size-small, 3px) * 2 + 2px);\n }\n}\n\n@media (max-width: 480px) {\n .image-gallery-bullets .image-gallery-bullet {\n width: 8px;\n height: 8px;\n }\n}\n\n.image-gallery-bullets .image-gallery-bullet:focus {\n transform: scale(1.2);\n background: var(--ig-primary-color, #337ab7);\n border: 1px solid var(--ig-primary-color, #337ab7);\n}\n\n.image-gallery-bullets .image-gallery-bullet.active {\n transform: scale(1.2);\n border: 1px solid var(--ig-white, #fff);\n background: var(--ig-white, #fff);\n}\n\n@media (hover: hover) and (pointer: fine) {\n .image-gallery-bullets .image-gallery-bullet:hover {\n background: var(--ig-primary-color, #337ab7);\n border: 1px solid var(--ig-primary-color, #337ab7);\n }\n .image-gallery-bullets .image-gallery-bullet.active:hover {\n background: var(--ig-primary-color, #337ab7);\n }\n}\n\n/* Vertical bullets */\n.image-gallery-bullets.image-gallery-bullets-vertical {\n left: 20px;\n right: auto;\n bottom: auto;\n width: auto;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.image-gallery-bullets.image-gallery-bullets-vertical .image-gallery-bullet {\n display: block;\n margin: 12px 0;\n}\n\n@media (max-width: 768px) {\n .image-gallery-bullets.image-gallery-bullets-vertical .image-gallery-bullet {\n margin: 8px 0;\n padding: var(--ig-bullet-size-small, 3px);\n }\n}\n\n@media (max-width: 480px) {\n .image-gallery-bullets.image-gallery-bullets-vertical .image-gallery-bullet {\n padding: 3px;\n }\n}\n\n/* ==========================================================================\n Thumbnails Wrapper\n ========================================================================== */\n\n.image-gallery-thumbnails-wrapper {\n position: relative;\n}\n\n.image-gallery-thumbnails-wrapper.thumbnails-swipe-horizontal {\n touch-action: pan-y;\n}\n\n.image-gallery-thumbnails-wrapper.thumbnails-swipe-vertical {\n touch-action: pan-x;\n}\n\n.image-gallery-thumbnails-wrapper.thumbnails-wrapper-rtl {\n direction: rtl;\n}\n\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right {\n display: inline-block;\n vertical-align: top;\n width: var(--ig-thumbnail-size, 96px);\n}\n\n@media (max-width: 768px) {\n .image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,\n .image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right {\n width: var(--ig-thumbnail-size-small, 80px);\n }\n}\n\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left\n .image-gallery-thumbnails,\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right\n .image-gallery-thumbnails {\n height: 100%;\n width: 100%;\n left: 0;\n padding: 0;\n position: absolute;\n top: 0;\n}\n\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left\n .image-gallery-thumbnails\n .image-gallery-thumbnail,\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right\n .image-gallery-thumbnails\n .image-gallery-thumbnail {\n display: block;\n margin-right: 0;\n padding: 0;\n}\n\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left\n .image-gallery-thumbnails\n .image-gallery-thumbnail\n + .image-gallery-thumbnail,\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right\n .image-gallery-thumbnails\n .image-gallery-thumbnail\n + .image-gallery-thumbnail {\n margin-left: 0;\n margin-top: 2px;\n}\n\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,\n.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right {\n margin: 0 4px;\n}\n\n@media (max-width: 768px) {\n .image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,\n .image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right {\n margin: 0 4px;\n }\n}\n\n/* ==========================================================================\n Thumbnails\n ========================================================================== */\n\n.image-gallery-thumbnails {\n overflow: hidden;\n padding: 4px 0;\n}\n\n@media (max-width: 768px) {\n .image-gallery-thumbnails {\n padding: 4px 0;\n }\n}\n\n.image-gallery-thumbnails .image-gallery-thumbnails-container {\n cursor: pointer;\n text-align: center;\n white-space: nowrap;\n}\n\n.image-gallery-thumbnail {\n display: inline-block;\n border: var(--ig-thumbnail-border-width, 4px) solid transparent;\n transition: border 0.3s ease-out;\n width: var(--ig-thumbnail-size, 96px);\n background: transparent;\n padding: 0;\n}\n\n@media (max-width: 768px) {\n .image-gallery-thumbnail {\n border: var(--ig-thumbnail-border-width-small, 3px) solid transparent;\n width: var(--ig-thumbnail-size-small, 80px);\n }\n}\n\n.image-gallery-thumbnail + .image-gallery-thumbnail {\n margin-left: 2px;\n}\n\n.image-gallery-thumbnail .image-gallery-thumbnail-inner {\n display: block;\n position: relative;\n}\n\n.image-gallery-thumbnail .image-gallery-thumbnail-image {\n vertical-align: middle;\n width: 100%;\n line-height: 0;\n}\n\n.image-gallery-thumbnail.active,\n.image-gallery-thumbnail:focus {\n outline: none;\n border: var(--ig-thumbnail-border-width, 4px) solid\n var(--ig-primary-color, #337ab7);\n}\n\n@media (max-width: 768px) {\n .image-gallery-thumbnail.active,\n .image-gallery-thumbnail:focus {\n border: var(--ig-thumbnail-border-width-small, 3px) solid\n var(--ig-primary-color, #337ab7);\n }\n}\n\n@media (hover: hover) and (pointer: fine) {\n .image-gallery-thumbnail:hover {\n outline: none;\n border: var(--ig-thumbnail-border-width, 4px) solid\n var(--ig-primary-color, #337ab7);\n }\n}\n\n@media (hover: hover) and (pointer: fine) and (max-width: 768px) {\n .image-gallery-thumbnail:hover {\n border: var(--ig-thumbnail-border-width-small, 3px) solid\n var(--ig-primary-color, #337ab7);\n }\n}\n\n/* ==========================================================================\n Thumbnail Label\n ========================================================================== */\n\n.image-gallery-thumbnail-label {\n box-sizing: border-box;\n color: var(--ig-white, #fff);\n font-size: 1em;\n left: 0;\n line-height: 1em;\n padding: 5%;\n position: absolute;\n top: 50%;\n text-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);\n transform: translateY(-50%);\n white-space: normal;\n width: 100%;\n}\n\n@media (max-width: 768px) {\n .image-gallery-thumbnail-label {\n font-size: 0.8em;\n line-height: 0.8em;\n }\n}\n\n/* ==========================================================================\n Index Display\n ========================================================================== */\n\n.image-gallery-index {\n background: var(--ig-background-overlay, rgba(0, 0, 0, 0.4));\n color: var(--ig-white, #fff);\n line-height: 1;\n padding: 10px 20px;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 4;\n}\n\n@media (max-width: 768px) {\n .image-gallery-index {\n font-size: 0.8em;\n padding: 5px 10px;\n }\n}\n",document.head.appendChild(e),G=!0}();const Z=["fullscreenchange","MSFullscreenChange","mozfullscreenchange","webkitfullscreenchange"];function J(e){const n=parseInt(String(e.keyCode||e.which||0),10);return 13===n||32===n}function Q(e){return{left:" image-gallery-thumbnails-left",right:" image-gallery-thumbnails-right",bottom:" image-gallery-thumbnails-bottom",top:" image-gallery-thumbnails-top"}[e]||""}const _=(0,r.forwardRef)((function(e,n){const{additionalClass:l="",autoPlay:a=!1,disableKeyDown:t=!1,disableSwipe:s=!1,disableThumbnailScroll:o=!1,disableThumbnailSwipe:u=!1,flickThreshold:b=.4,indexSeparator:p=" / ",infinite:y=!0,isRTL:f=!1,items:v,lazyLoad:x=!1,onBeforeSlide:k,onBulletClick:T,onClick:C,onErrorImageURL:j="",onImageError:O,onImageLoad:E,onMouseLeave:N,onMouseOver:M,onPause:P,onPlay:H,onScreenChange:U,onSlide:G,onThumbnailClick:K,onThumbnailError:_,onTouchEnd:ee,onTouchMove:ne,onTouchStart:le,renderBottomNav:ae=(e,n)=>(0,i.jsx)(R,{disabled:n,onClick:e}),renderCustomControls:te,renderFullscreenButton:ie=(e,n)=>(0,i.jsx)(I,{isFullscreen:n,onClick:e}),renderItem:re,renderLeftNav:se=(e,n)=>(0,i.jsx)(F,{disabled:n,onClick:e}),renderPlayPauseButton:oe=(e,n)=>(0,i.jsx)(z,{isPlaying:n,onClick:e}),renderRightNav:ue=(e,n)=>(0,i.jsx)(L,{disabled:n,onClick:e}),renderThumbInner:ge,renderTopNav:ce=(e,n)=>(0,i.jsx)($,{disabled:n,onClick:e}),showBullets:me=!1,maxBullets:de,showFullscreenButton:he=!0,showIndex:be=!1,showNav:pe=!0,showPlayButton:ye=!0,showThumbnails:fe=!0,slideDuration:ve=450,slideInterval:xe=3e3,slideOnThumbnailOver:we=!1,slideVertically:Se=!1,startIndex:ke=0,stopPropagation:Te=!1,swipeThreshold:Ce=30,swipingTransitionDuration:je=0,thumbnailPosition:Re="bottom",useBrowserFullscreen:Oe=!0,useTranslate3D:Ie=!0,useWindowKeyDown:Ee=!0}=e,Fe=(0,r.useRef)(null),Ne=(0,r.useRef)(null),ze=(0,r.useRef)(null),Me=(0,r.useRef)({}),Le=(0,r.useRef)([]),Pe=(0,r.useRef)(null),$e=(0,r.useRef)(null),[We,Be]=(0,r.useState)(0),[De,He]=(0,r.useState)(0),[Ue,Ae]=(0,r.useState)(0),[qe,Ge]=(0,r.useState)(!1),[Ke,Ve]=(0,r.useState)(!1),Ye=v.length,Xe=Ye>=2,{currentIndex:Ze,isTransitioning:Je,currentSlideOffset:Qe,canSlideLeft:_e,canSlideRight:en,slideToIndex:nn,slideToIndexCore:ln,slideToIndexWithStyleReset:an,slideLeft:tn,slideRight:rn,getContainerStyle:sn,getExtendedSlides:on,getAlignmentClass:un,setCurrentSlideOffset:gn,setSlideStyle:cn}=function({items:e,startIndex:n=0,infinite:l=!0,isRTL:a=!1,slideDuration:t=450,onSlide:i,onBeforeSlide:s}){const[o,u]=(0,r.useState)(n),[g,c]=(0,r.useState)(n),[m,d]=(0,r.useState)(!1),[h,b]=(0,r.useState)(0),[p,y]=(0,r.useState)(l&&e.length>1?n+1:n),[f,v]=(0,r.useState)({transition:`all ${t}ms ease-out`}),x=(0,r.useRef)(null),w=(0,r.useRef)(null),S=(0,r.useRef)(!1),k=e.length,T=k>=2,C=l&&k>1?k+2:k;(0,r.useEffect)((()=>()=>{x.current&&window.clearTimeout(x.current),w.current&&window.clearTimeout(w.current)}),[]),(0,r.useEffect)((()=>{u(n),y(l&&e.length>1?n+1:n),v({transition:"none"})}),[e,n,l]);const j=(0,r.useCallback)((()=>o>0),[o]),R=(0,r.useCallback)((()=>o<k-1),[o,k]),O=(0,r.useCallback)((()=>l||(a?R():j())),[l,a,R,j]),I=(0,r.useCallback)((()=>l||(a?j():R())),[l,a,R,j]),E=(0,r.useCallback)((()=>{x.current=window.setTimeout((()=>{m&&(d(!1),i&&i(o))}),t+50)}),[m,o,t,i]),F=(0,r.useCallback)((e=>l&&k>1?e+1:e),[l,k]),N=(0,r.useCallback)(((e,n)=>{S.current=!0,v({transition:"none"}),y(n),w.current=window.setTimeout((()=>{v({transition:`all ${t}ms ease-out`}),S.current=!1}),50)}),[t]),z=(0,r.useCallback)(((e,n,a=!1)=>{if((m||S.current)&&!a)return;const r=k-1;let g,h=e,p=!1,f=null;e<0?(h=r,p=!0,f="start"):e>r&&(h=0,p=!0,f="end"),g=l&&k>1?p&&"start"===f?0:p&&"end"===f?C-1:h+1:h,s&&h!==o&&s(h),c(o),u(h),y(g),d(h!==o||p),b(0),v({transition:`all ${t}ms ease-out`}),l&&k>1&&p&&(x.current=window.setTimeout((()=>{d(!1),i&&i(h);const e=F(h);N(h,e)}),t+20))}),[o,k,C,t,s,i,m,l,F,N]),M=(0,r.useRef)(W(((e,n)=>{z(e,n,!1)}),t,{trailing:!1}));(0,r.useEffect)((()=>{M.current=W(((e,n)=>{z(e,n,!1)}),t,{trailing:!1})}),[t,z]);const L=(0,r.useCallback)(((e,n)=>{M.current(e,n)}),[]),P=(0,r.useCallback)(((e,n)=>{b((n=>n+(o>e?.001:-.001))),v({transition:"none"}),window.setTimeout((()=>{z(e,n)}),25)}),[o,z]),$=(0,r.useCallback)((e=>{const n=o+("left"==(a?"right":"left")?-1:1);m||S.current||(2===k?P(n,e):L(n,e))}),[a,o,m,k,P,L]),B=(0,r.useCallback)((e=>{const n=o+("left"==(a?"left":"right")?-1:1);m||S.current||(2===k?P(n,e):L(n,e))}),[a,o,m,k,P,L]),D=(0,r.useCallback)((({useTranslate3D:e=!0,slideVertically:n=!1}={})=>{const l=-(100*p-h*(a?-1:1)),t=n?e?`translate3d(0, ${l}%, 0)`:`translate(0, ${l}%)`:e?`translate3d(${l}%, 0, 0)`:`translate(${l}%, 0)`;return{transform:t,WebkitTransform:t,MozTransform:t,msTransform:t,OTransform:t,...f}}),[p,h,f,a]),H=(0,r.useCallback)((()=>{if(!l||k<=1)return{extendedItems:e,getSlideKey:e=>`slide-${e}`,getRealIndex:e=>e};const n=[e[k-1],...e,e[0]];return{extendedItems:n,getSlideKey:e=>0===e?"slide-clone-last":e===n.length-1?"slide-clone-first":"slide-"+(e-1),getRealIndex:e=>0===e?k-1:e===n.length-1?0:e-1}}),[e,k,l]),U=(0,r.useCallback)((e=>{const{getRealIndex:n}=H(),l=n(e);return l===o?"image-gallery-center":l===(o-1+k)%k?"image-gallery-left":l===(o+1)%k?"image-gallery-right":""}),[o,k,H]);return(0,r.useEffect)((()=>{m&&!S.current&&E()}),[m,E]),{currentIndex:o,previousIndex:g,displayIndex:p,isTransitioning:m,currentSlideOffset:h,slideStyle:f,canSlide:T,canSlideLeft:O,canSlideRight:I,canSlidePrevious:j,canSlideNext:R,slideToIndex:L,slideToIndexCore:z,slideToIndexWithStyleReset:P,slideLeft:$,slideRight:B,getContainerStyle:D,getExtendedSlides:H,getAlignmentClass:U,setCurrentSlideOffset:b,setSlideStyle:v,setIsTransitioning:d,totalDisplaySlides:C}}({items:v,startIndex:ke,infinite:y,isRTL:f,slideDuration:ve,onSlide:G,onBeforeSlide:k}),{thumbsTranslate:mn,setThumbsTranslate:dn,thumbsSwipedTranslate:hn,setThumbsSwipedTranslate:bn,setThumbsStyle:pn,thumbnailsWrapperWidth:yn,thumbnailsWrapperHeight:fn,isSwipingThumbnail:vn,setIsSwipingThumbnail:xn,thumbnailsWrapperRef:wn,thumbnailsRef:Sn,isThumbnailVertical:kn,getThumbnailStyle:Tn,getThumbnailBarHeight:Cn,initResizeObserver:jn,removeResizeObserver:Rn}=function({currentIndex:e,items:n,thumbnailPosition:l="bottom",disableThumbnailScroll:a=!1,slideDuration:t=450,isRTL:i=!1,useTranslate3D:s=!0}){const[o,u]=(0,r.useState)(0),[g,c]=(0,r.useState)(0),[m,d]=(0,r.useState)({transition:`all ${t}ms ease-out`}),[h,b]=(0,r.useState)(0),[p,y]=(0,r.useState)(0),[f,v]=(0,r.useState)(!1),x=(0,r.useRef)(null),w=(0,r.useRef)(null),S=(0,r.useRef)(null),k=(0,r.useRef)(e),T=(0,r.useCallback)((()=>"left"===l||"right"===l),[l]),C=(0,r.useCallback)((e=>{if(a)return 0;const l=w.current;if(!l)return 0;let t;if(T()){if(l.scrollHeight<=p)return 0;t=l.scrollHeight-p}else{if(l.scrollWidth<=h||h<=0)return 0;t=l.scrollWidth-h}return e*(t/(n.length-1))}),[a,n.length,h,p,T]),j=(0,r.useCallback)((()=>{if(f)return;const n=-C(e);d({transition:`all ${t}ms ease-out`}),0===e?(u(0),c(0)):(u(n),c(n))}),[e,C,f,t]);(0,r.useEffect)((()=>{k.current!==e&&(k.current=e,j())}),[e,j]);const R=(0,r.useRef)(l);(0,r.useEffect)((()=>{if(R.current!==l){R.current=l,d({transition:"none"}),u(0),c(0);const a=()=>{if(!x.current||!w.current)return;const a=x.current.getBoundingClientRect(),i=a.width,r=a.height;b(i),y(r);const s="left"===l||"right"===l,o=w.current;let g;if(s){if(o.scrollHeight<=r)return void d({transition:`all ${t}ms ease-out`});g=o.scrollHeight-r}else{if(o.scrollWidth<=i)return void d({transition:`all ${t}ms ease-out`});g=o.scrollWidth-i}const m=g/(n.length-1),h=-e*m;u(h),c(h),requestAnimationFrame((()=>{d({transition:`all ${t}ms ease-out`})}))};requestAnimationFrame((()=>{requestAnimationFrame((()=>{setTimeout(a,100)}))}))}}),[l,e,n.length,t]);const O=(0,r.useCallback)((()=>{const e=i?-1*o:o;let n;return n=T()?s?`translate3d(0, ${o}px, 0)`:`translate(0, ${o}px)`:s?`translate3d(${e}px, 0, 0)`:`translate(${e}px, 0)`,{WebkitTransform:n,MozTransform:n,msTransform:n,OTransform:n,transform:n,...m}}),[o,m,i,s,T]),I=(0,r.useCallback)((e=>T()?{height:e}:{}),[T]),E=(0,r.useCallback)((e=>{e?.current&&(S.current=new ResizeObserver(B((e=>{e&&e.forEach((e=>{b(e.contentRect.width),y(e.contentRect.height)}))}),50)),S.current.observe(e.current))}),[]),F=(0,r.useCallback)((()=>{S.current&&x.current&&(S.current.unobserve(x.current),S.current=null)}),[]);(0,r.useEffect)((()=>{if(0===h&&0===p)return;if(f)return;const l=w.current;if(!l)return;let a;if(T()){if(l.scrollHeight<=p)return u(0),void c(0);a=l.scrollHeight-p}else{if(l.scrollWidth<=h)return u(0),void c(0);a=l.scrollWidth-h}const t=a/(n.length-1),i=-e*t;u(i),c(i)}),[h,p,e,n.length,f,T]),(0,r.useEffect)((()=>()=>{F()}),[F]);const N=(0,r.useCallback)((()=>{v(!0),c(o),d({transition:`all ${t}ms ease-out`})}),[o,t]),z=(0,r.useCallback)((()=>{v(!1)}),[]);return{thumbsTranslate:o,setThumbsTranslate:u,thumbsSwipedTranslate:g,setThumbsSwipedTranslate:c,thumbsStyle:m,setThumbsStyle:d,thumbnailsWrapperWidth:h,thumbnailsWrapperHeight:p,isSwipingThumbnail:f,setIsSwipingThumbnail:v,thumbnailsWrapperRef:x,thumbnailsRef:w,isThumbnailVertical:T,getThumbsTranslate:C,getThumbnailStyle:O,getThumbnailBarHeight:I,slideThumbnailBar:j,initResizeObserver:E,removeResizeObserver:F,handleThumbnailSwipeEnd:N,resetSwipingThumbnail:z}}({currentIndex:Ze,items:v,thumbnailPosition:Re,disableThumbnailScroll:o,slideDuration:ve,isRTL:f,useTranslate3D:Ie}),{isFullscreen:On,modalFullscreen:In,fullScreen:En,exitFullScreen:Fn,toggleFullScreen:Nn,handleScreenChange:zn}=function({useBrowserFullscreen:e=!0,onScreenChange:n,galleryRef:l}){const[a,t]=(0,r.useState)(!1),[i,s]=(0,r.useState)(!1),o=(0,r.useCallback)((()=>{const a=document,i=a.fullscreenElement||a.msFullscreenElement||a.mozFullScreenElement||a.webkitFullscreenElement,r=l?.current===i;n&&n(r),e&&t(r)}),[l,e,n]),u=(0,r.useCallback)((e=>{s(e),n&&n(e)}),[n]),g=(0,r.useCallback)((()=>{const n=l?.current;n&&(e?n.requestFullscreen?n.requestFullscreen():n.msRequestFullscreen?n.msRequestFullscreen():n.mozRequestFullScreen?n.mozRequestFullScreen():n.webkitRequestFullscreen?n.webkitRequestFullscreen():u(!0):u(!0),t(!0))}),[l,e,u]),c=(0,r.useCallback)((()=>{if(!a)return;const n=document;e?n.exitFullscreen?n.exitFullscreen():n.webkitExitFullscreen?n.webkitExitFullscreen():n.mozCancelFullScreen?n.mozCancelFullScreen():n.msExitFullscreen?n.msExitFullscreen():u(!1):u(!1),t(!1)}),[a,e,u]),m=(0,r.useCallback)((()=>{a?c():g()}),[a,c,g]);return{isFullscreen:a,modalFullscreen:i,fullScreen:g,exitFullScreen:c,toggleFullScreen:m,handleScreenChange:o}}({useBrowserFullscreen:Oe,onScreenChange:U,galleryRef:Fe}),{isPlaying:Mn,playPauseIntervalRef:Ln,play:Pn,pause:$n,togglePlay:Wn}=function({autoPlay:e=!1,slideInterval:n=3e3,slideDuration:l=450,infinite:a=!0,totalSlides:t,currentIndex:i,canSlideRight:s,slideToIndexCore:o,slideToIndexWithStyleReset:u,onPlay:g,onPause:c}){const[m,d]=(0,r.useState)(!1),h=(0,r.useRef)(null),b=(0,r.useRef)(null),p=(0,r.useCallback)((()=>{if(a||s()){const e=i+1;2===t?u(e):o(e)}else h.current&&(clearInterval(h.current),h.current=null,d(!1),c&&c(i))}),[a,s,i,t,o,u,c]);b.current=p;const y=(0,r.useCallback)(((e=!0)=>{h.current||(d(!0),h.current=setInterval((()=>b.current?.()),Math.max(n,l)),g&&e&&g(i))}),[n,l,g,i]),f=(0,r.useCallback)(((e=!0)=>{h.current&&(clearInterval(h.current),h.current=null,d(!1),c&&e&&c(i))}),[c,i]),v=(0,r.useCallback)((()=>{h.current?f():y()}),[y,f]),x=(0,r.useRef)(y),w=(0,r.useRef)(f);return x.current=y,w.current=f,(0,r.useEffect)((()=>{m&&(w.current(!1),x.current(!1))}),[n,l,m]),(0,r.useEffect)((()=>{e&&!h.current&&x.current()}),[e]),(0,r.useEffect)((()=>()=>{h.current&&(clearInterval(h.current),h.current=null)}),[]),{isPlaying:m,playPauseIntervalRef:h,play:y,pause:f,togglePlay:v}}({autoPlay:a,slideInterval:xe,slideDuration:ve,infinite:y,totalSlides:Ye,currentIndex:Ze,canSlideRight:en,slideToIndexCore:ln,slideToIndexWithStyleReset:an,onPlay:H,onPause:P}),Bn=(0,r.useCallback)((()=>{qe&&Ge(!1),Ke&&Ve(!1)}),[qe,Ke]),Dn=(0,r.useCallback)((()=>Math.abs(Qe)>Ce),[Qe,Ce]),Hn=(0,r.useCallback)((({event:e,absX:n,absY:l,dir:a})=>{const t=a;if((t!==d&&t!==h&&!qe||Ke||(qe||Ge(!0),Se))&&(t!==c&&t!==m||Ke||Ve(!0),!s))if(Te&&e.preventDefault(),Je)gn(0);else{if((t===c||t===m)&&Se)return;if((t===d||t===h)&&!Se)return;const e={[c]:-1,[m]:1,[d]:-1,[h]:1}[t];let a=n/We*100;Se&&(a=l/De*100),Math.abs(a)>=100&&(a=100);const i={transition:`transform ${je}ms ease-out`};gn(e*a),cn(i)}}),[s,Te,Je,We,De,Se,je,qe,Ke,gn,cn]),Un=(0,r.useCallback)(((e,n)=>{let l=Ze;!Dn()&&!n||Je||(l+=e),(-1===e&&!_e()||1===e&&!en())&&(l=Ze),ln(l)}),[Ze,Je,Dn,_e,en,ln]),An=(0,r.useCallback)((({event:e,dir:n,velocity:l})=>{if(s)return;Te&&e.stopPropagation(),Bn();let a=(n===c?1:-1)*(f?-1:1);Se&&(a=n===d?1:-1),Un(a,Se?l>b&&!(n===c||n===m):l>b&&!(n===d||n===h))}),[s,Te,Bn,f,Se,b,Un]),qn=(0,r.useCallback)((({event:e,absX:n,absY:l,dir:a})=>{const t=a,i=kn();if(i){if((t===c||t===m||Ke)&&!qe)return void(Ke||Ve(!0));t!==d&&t!==h||qe||Ge(!0)}else{if((t===d||t===h||qe)&&!Ke)return void(qe||Ge(!0));t!==c&&t!==m||Ke||Ve(!0)}const r=Sn.current;if(!r)return;let s,o,u,g,b;i?(s=hn+(t===h?l:-l),o=r.scrollHeight-fn+20,u=Math.abs(s)>o,g=s>20,b=r.scrollHeight<=fn):(s=hn+(t===m?n:-n),o=r.scrollWidth-yn+20,u=Math.abs(s)>o,g=s>20,b=r.scrollWidth<=yn),b||(t!==c&&t!==d||!u)&&(t!==m&&t!==h||!g)&&(Te&&e.stopPropagation(),dn(s),vn||(pn({transition:"none"}),xn(!0)))}),[kn,fn,yn,hn,Te,vn,qe,Ke,Sn,dn,pn,xn]),Gn=(0,r.useCallback)((()=>{Bn(),bn(mn)}),[Bn,mn,bn]),Kn=(0,r.useCallback)((e=>{if(Fe.current?.classList.remove("image-gallery-using-mouse"),!t)switch(parseInt(String(e.keyCode||e.which||0),10)){case 37:_e()&&!Ln?.current&&tn(e);break;case 39:en()&&!Ln?.current&&rn(e);break;case 27:On&&!Oe&&Fn()}}),[t,_e,en,tn,rn,On,Oe,Fn,Ln]);$e.current=Kn;const Vn=(0,r.useCallback)((e=>{$e.current?.(e)}),[]),Yn=(0,r.useCallback)((()=>{Fe.current?.classList.add("image-gallery-using-mouse")}),[]),Xn=(0,r.useCallback)((e=>{J(e)&&C&&C(e)}),[C]),Zn=(0,r.useCallback)(((e,n)=>{ze.current&&(window.clearTimeout(ze.current),ze.current=null),ze.current=window.setTimeout((()=>{nn(n),$n()}),300)}),[nn,$n]),Jn=(0,r.useCallback)((()=>{ze.current&&(window.clearTimeout(ze.current),ze.current=null,a&&Pn())}),[a,Pn]),Qn=(0,r.useCallback)(((e,n)=>{we&&Zn(e,n)}),[we,Zn]),_n=(0,r.useCallback)(((e,n)=>{J(e)&&K?.(e,n)}),[K]),el=(0,r.useCallback)(((e,n)=>{const l=e.target.parentNode?.parentNode;l?.blur&&l.blur(),Ze!==n&&(2===Ye?an(n,e):nn(n,e)),K&&K(e,n)}),[Ze,Ye,nn,an,K]),nl=(0,r.useCallback)(((e,n)=>{e.target.blur(),Ze!==n&&(2===Ye?an(n,e):nn(n,e)),T&&T(e,n)}),[Ze,Ye,nn,an,T]),ll=(0,r.useCallback)((e=>{j&&-1===e.currentTarget.src.indexOf(j)&&(e.currentTarget.src=j)}),[j]),al=(0,r.useCallback)(((e,n)=>{!Me.current[n]&&E&&(Me.current[n]=!0,E(e))}),[E]),tl=(0,r.useCallback)((()=>{Fe.current&&(Be(Fe.current.offsetWidth),He(Fe.current.offsetHeight),Ne.current&&Ae(Ne.current.offsetHeight))}),[]),il=(0,r.useCallback)((e=>{e?.current&&(Pe.current=new ResizeObserver(B((e=>{e&&e.forEach((()=>{tl()}))}),50)),Pe.current.observe(e.current))}),[tl]),rl=(0,r.useCallback)((()=>{Pe.current&&Ne.current&&(Pe.current.unobserve(Ne.current),Pe.current=null)}),[]),sl=(0,r.useRef)(null),ol=(0,r.useRef)(null),ul=(0,r.useRef)(null),gl=(0,r.useRef)(null),cl=(0,r.useRef)(null),ml=(0,r.useRef)(null),dl=(0,r.useRef)(null);sl.current=Yn,ol.current=zn,ul.current=il,gl.current=jn,cl.current=rl,ml.current=Rn,dl.current=tl;const hl=(0,r.useCallback)((()=>{sl.current?.()}),[]),bl=(0,r.useCallback)((()=>{ol.current?.()}),[]),pl=(0,r.useCallback)((e=>{const n=O||ll;return(0,i.jsx)(A,{description:e.description,fullscreen:e.fullscreen,handleImageLoaded:al,isFullscreen:On,loading:e.loading,original:e.original,originalAlt:e.originalAlt,originalHeight:e.originalHeight,originalTitle:e.originalTitle,originalWidth:e.originalWidth,sizes:e.sizes,srcSet:e.srcSet,onImageError:n})}),[On,O,ll,al]),yl=(0,r.useCallback)((e=>{const n=_||ll;return(0,i.jsxs)("span",{className:"image-gallery-thumbnail-inner",children:[(0,i.jsx)("img",{alt:e.thumbnailAlt,className:"image-gallery-thumbnail-image",height:e.thumbnailHeight,loading:e.thumbnailLoading,src:e.thumbnail,title:e.thumbnailTitle,width:e.thumbnailWidth,onError:n}),e.thumbnailLabel&&(0,i.jsx)("div",{className:"image-gallery-thumbnail-label",children:e.thumbnailLabel})]})}),[_,ll]),fl=(0,r.useMemo)((()=>sn({useTranslate3D:Ie,slideVertically:Se})),[sn,Ie,Se]),vl=(0,r.useMemo)((()=>{const e=[],n=[],l=[],{extendedItems:a,getSlideKey:t,getRealIndex:r}=on();return a.forEach(((n,l)=>{const a=r(l),s=un(l),o=n.originalClass?` ${n.originalClass}`:"",u=n.renderItem||re||pl,g=!x||s||Le.current[a];g&&x&&!Le.current[a]&&(Le.current[a]=!0),e.push((0,i.jsx)(q,{alignment:s,index:a,originalClass:o,onClick:C,onKeyUp:Xn,onMouseLeave:N,onMouseOver:M,onTouchEnd:ee,onTouchMove:ne,onTouchStart:le,children:g?u(n):(0,i.jsx)("div",{style:{height:"100%"}})},t(l)))})),v.forEach(((e,a)=>{const t=e.thumbnailClass?` ${e.thumbnailClass}`:"",r=e.renderThumbInner||ge||yl;fe&&e.thumbnail&&n.push((0,i.jsx)(Y,{index:a,isActive:Ze===a,thumbnailClass:t,onClick:e=>el(e,a),onFocus:e=>Qn(e,a),onKeyUp:e=>_n(e,a),onMouseLeave:we?Jn:null,onMouseOver:e=>Qn(e,a),children:r(e)},`thumbnail-${a}`)),me&&l.push((0,i.jsx)(w,{bulletClass:e.bulletClass,index:a,isActive:Ze===a,onClick:e=>nl(e,a)},`bullet-${a}`))})),{slides:e,thumbnails:n,bullets:l}}),[v,Ze,on,un,x,fe,me,we,pl,yl,re,ge,C,Xn,ne,ee,le,M,N,Jn,Qn,_n,el,nl]);(0,r.useEffect)((()=>{const e=Fe.current;return Ee?window.addEventListener("keydown",Vn):e?.addEventListener("keydown",Vn),window.addEventListener("mousedown",hl),ul.current?.(Ne),gl.current?.(wn),Z.forEach((e=>{document.addEventListener(e,bl)})),()=>{window.removeEventListener("mousedown",hl),window.removeEventListener("keydown",Vn),e?.removeEventListener("keydown",Vn),Z.forEach((e=>{document.removeEventListener(e,bl)})),cl.current?.(),ml.current?.()}}),[Ee,Vn,hl,bl,wn]),(0,r.useEffect)((()=>{cl.current?.(),ml.current?.(),ul.current?.(Ne),gl.current?.(wn)}),[Re,wn]),(0,r.useEffect)((()=>{fe?gl.current?.(wn):ml.current?.(),dl.current?.()}),[fe,wn]),(0,r.useEffect)((()=>{x&&(Le.current=[]),dl.current?.()}),[v,x]),(0,r.useEffect)((()=>{!Je&&vn&&xn(!1)}),[Je,vn,xn]),(0,r.useImperativeHandle)(n,(()=>({play:Pn,pause:$n,togglePlay:Wn,fullScreen:En,exitFullScreen:Fn,toggleFullScreen:Nn,slideToIndex:ln,getCurrentIndex:()=>Ze})));const{slides:xl,thumbnails:wl,bullets:Sl}=vl,kl=g("image-gallery-slide-wrapper",Q(Re),{"image-gallery-rtl":f}),Tl=(0,i.jsxs)("div",{ref:Ne,className:kl,children:[te&&te(),Xe?(0,i.jsxs)(i.Fragment,{children:[pe&&(0,i.jsxs)(i.Fragment,{children:[Se?ce(tn,!_e()):se(tn,!_e()),Se?ae(rn,!en()):ue(rn,!en())]}),(0,i.jsx)(V,{className:"image-gallery-swipe",delta:0,onSwiped:An,onSwiping:Hn,children:(0,i.jsx)("div",{className:"image-gallery-slides",style:Se?{height:Ue}:void 0,children:(0,i.jsx)("div",{className:g("image-gallery-slides-container",{vertical:Se}),style:fl,children:xl})})})]}):(0,i.jsx)("div",{className:"image-gallery-slides",style:Se?{height:Ue}:void 0,children:(0,i.jsx)("div",{className:g("image-gallery-slides-container",{vertical:Se}),style:fl,children:xl})}),ye&&oe(Wn,Mn),me&&(0,i.jsx)(S,{bullets:Sl,currentIndex:Ze,maxBullets:de,slideVertically:Se}),he&&ie(Nn,On),be&&(0,i.jsx)(D,{currentIndex:Ze,indexSeparator:p,totalItems:Ye})]}),Cl=g("image-gallery",l,{"fullscreen-modal":In}),jl=g("image-gallery-content",Q(Re),{fullscreen:On});return(0,i.jsx)("div",{ref:Fe,"aria-live":"polite",className:Cl,children:(0,i.jsxs)("div",{className:jl,children:[("bottom"===Re||"right"===Re)&&Tl,fe&&wl.length>0&&(0,i.jsx)(X,{disableThumbnailSwipe:u,isRTL:f,thumbnailBarHeight:Cn(Ue),thumbnailPosition:Re,thumbnails:wl,thumbnailsRef:Sn,thumbnailStyle:Tn(),thumbnailsWrapperRef:wn,onSwiped:Gn,onSwiping:qn}),("top"===Re||"left"===Re)&&Tl]})})}));var ee=t.A;export{ee as default};
|
package/build/types/types.d.ts
CHANGED
|
@@ -109,6 +109,8 @@ export interface ImageGalleryProps {
|
|
|
109
109
|
onErrorImageURL?: string;
|
|
110
110
|
/** Show bullet navigation */
|
|
111
111
|
showBullets?: boolean;
|
|
112
|
+
/** Maximum number of bullets to show (minimum 3) */
|
|
113
|
+
maxBullets?: number;
|
|
112
114
|
/** Show fullscreen toggle button */
|
|
113
115
|
showFullscreenButton?: boolean;
|
|
114
116
|
/** Show current/total index indicator */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-image-gallery",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.1",
|
|
4
4
|
"description": "React carousel image gallery component with thumbnail and mobile support",
|
|
5
5
|
"main": "./build/image-gallery.cjs",
|
|
6
6
|
"module": "./build/image-gallery.es.js",
|
|
@@ -20,7 +20,8 @@
|
|
|
20
20
|
"start": "webpack serve --hot --mode development --static ./example",
|
|
21
21
|
"build": "webpack --config webpack.build.cjs && rm -rf build/types/components",
|
|
22
22
|
"publish:dry-run": "npm publish --dry-run",
|
|
23
|
-
"prepublish:check": "npm run lint && npm test && npm run build && npm run publish:dry-run"
|
|
23
|
+
"prepublish:check": "npm run lint && npm test && npm run build && npm run publish:dry-run",
|
|
24
|
+
"release": "npm login && npm publish"
|
|
24
25
|
},
|
|
25
26
|
"repository": {
|
|
26
27
|
"type": "git",
|
package/styles/image-gallery.css
CHANGED
|
@@ -386,12 +386,26 @@
|
|
|
386
386
|
right: 0;
|
|
387
387
|
width: 80%;
|
|
388
388
|
z-index: 4;
|
|
389
|
+
text-align: center;
|
|
389
390
|
}
|
|
390
391
|
|
|
391
392
|
.image-gallery-bullets .image-gallery-bullets-container {
|
|
392
|
-
margin: 0;
|
|
393
|
+
margin: 0 auto;
|
|
393
394
|
padding: 0;
|
|
394
|
-
|
|
395
|
+
display: inline-block;
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
.image-gallery-bullets .image-gallery-bullets-inner {
|
|
399
|
+
display: flex;
|
|
400
|
+
align-items: center;
|
|
401
|
+
justify-content: flex-start;
|
|
402
|
+
white-space: nowrap;
|
|
403
|
+
padding: 2px 0;
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
.image-gallery-bullets-vertical .image-gallery-bullets-inner {
|
|
407
|
+
flex-direction: column;
|
|
408
|
+
padding: 0 2px;
|
|
395
409
|
}
|
|
396
410
|
|
|
397
411
|
.image-gallery-bullets .image-gallery-bullet {
|
|
@@ -401,23 +415,27 @@
|
|
|
401
415
|
border-radius: 50%;
|
|
402
416
|
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
|
|
403
417
|
cursor: pointer;
|
|
404
|
-
display: inline-block;
|
|
405
418
|
margin: 0 4px;
|
|
406
419
|
outline: none;
|
|
407
|
-
|
|
420
|
+
width: calc(var(--ig-bullet-size, 4px) * 2 + 2px);
|
|
421
|
+
height: calc(var(--ig-bullet-size, 4px) * 2 + 2px);
|
|
422
|
+
padding: 0;
|
|
423
|
+
flex-shrink: 0;
|
|
408
424
|
transition: all 0.2s ease-out;
|
|
409
425
|
}
|
|
410
426
|
|
|
411
427
|
@media (max-width: 768px) {
|
|
412
428
|
.image-gallery-bullets .image-gallery-bullet {
|
|
413
429
|
margin: 0 3px;
|
|
414
|
-
|
|
430
|
+
width: calc(var(--ig-bullet-size-small, 3px) * 2 + 2px);
|
|
431
|
+
height: calc(var(--ig-bullet-size-small, 3px) * 2 + 2px);
|
|
415
432
|
}
|
|
416
433
|
}
|
|
417
434
|
|
|
418
435
|
@media (max-width: 480px) {
|
|
419
436
|
.image-gallery-bullets .image-gallery-bullet {
|
|
420
|
-
|
|
437
|
+
width: 8px;
|
|
438
|
+
height: 8px;
|
|
421
439
|
}
|
|
422
440
|
}
|
|
423
441
|
|