react-motion-gallery 2.0.6 → 2.0.7

package/dist/index.css

@@ -1 +1 @@
-.entryRow{position:relative;min-height:var(--rmg-entry-min-height, 260px)}.entryRow[data-rmg-entry-mounted="1"] .entrySkeletonWrap{position:absolute;inset:0;z-index:1;height:auto}.entrySkeletonWrap{position:relative;display:block;opacity:1;transition:opacity .15s linear;pointer-events:none;z-index:0;height:var(--rmg-entry-min-height, 260px);border-radius:12px;background-color:var(--rmg-entry-skeleton-bg, transparent);overflow:hidden}.entryInner{position:relative;opacity:0;pointer-events:none;min-height:var(--rmg-entry-min-height, 260px);transition:opacity var(--rmg-entry-intro-duration, .7s) var(--rmg-entry-intro-easing, cubic-bezier(.4,0,.22,1));transition-delay:0ms;z-index:0}.entryRow[data-rmg-entry-ready="1"] .entrySkeletonWrap{opacity:0}.entryRow[data-rmg-entry-ready="1"] .entryInner{opacity:1;pointer-events:auto;transition-delay:calc(var(--rmg-entry-intro-index, 0) * var(--rmg-entry-intro-stagger, .2s))}.entryList{display:flex;flex-direction:column;gap:1.5rem}.entrySkeletonTile{width:100%;height:100%;overflow:hidden}.entrySkeletonShimmer{position:relative;overflow:hidden;border-radius:inherit;--rmg-shimmer-c1: #f0f2f5;--rmg-shimmer-c2: #e6e9ef;--rmg-shimmer-c3: #f0f2f5;--rmg-shimmer-size: 400% 100%;--rmg-shimmer-duration: 1.2s;--rmg-shimmer-timing: linear;background:linear-gradient(90deg,var(--rmg-shimmer-c1) 25%,var(--rmg-shimmer-c2) 37%,var(--rmg-shimmer-c3) 63%);background-size:var(--rmg-shimmer-size);animation:rmgShimmer var(--rmg-shimmer-duration) infinite var(--rmg-shimmer-timing)}.entrySkelRoot{--rmg-skel-bg: rgba(0, 0, 0, .08);--rmg-skel-hi: rgba(0, 0, 0, .12);--rmg-skel-radius: 12px;--rmg-skel-shimmer-enabled: 1;--rmg-skel-shimmer-duration: 1.2s;--rmg-skel-shimmer-band: 40%;--rmg-skel-shimmer-angle: 25deg;width:100%}.entrySkelGroup{display:flex;min-width:0}.entrySkelStack{flex-direction:column;width:100%}.entrySkelRow{flex-direction:row;width:100%}.entrySkelCol{flex-direction:column;width:100%}.entrySkelTile{flex:0 0 auto;position:relative;display:block;background:var(--rmg-skel-bg, rgba(0, 0, 0, .08));border-radius:var(--rmg-skel-radius);overflow:hidden}.entrySkelTile:after{content:"";position:absolute;opacity:calc(var(--rmg-skel-shimmer-enabled) * 1);transform:rotate(var(--rmg-skel-shimmer-angle));background:linear-gradient(90deg,transparent 0%,var(--rmg-skel-hi, rgba(255, 255, 255, .18)) 50%,transparent 100%);width:var(--rmg-skel-shimmer-band);inset:-40% -40% -40% -60%;animation:rmg-skel-shimmer var(--rmg-skel-shimmer-duration) linear infinite}@keyframes rmg-skel-shimmer{0%{left:-60%}to{left:160%}}.entrySkelRect{flex:0 0 auto;width:100%;height:16px}.entrySkelSquare{width:48px;height:48px}.entrySkelCircle{width:44px;height:44px;border-radius:999px}[data-rmg-plyr-provider=mp4] :global(.plyr__video-wrapper),[data-rmg-plyr-provider=vimeo] :global(.plyr__video-wrapper){pointer-events:none!important}.thumb{position:relative;border:1px solid rgba(0,0,0,.12);border-radius:6px;overflow:hidden;box-sizing:border-box}.thumb:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 2px #111 inset;opacity:0;transition:opacity .12s ease;z-index:1}.thumb[data-active=true]:after{opacity:1}.thumb :global(img){display:block;width:100%;height:100%;object-fit:cover;position:relative;z-index:0}.fade_container [data-rmg-thumb-index]>*{opacity:0;transform:translateY(var(--rmg-intro-transform, 10px));transition:opacity var(--rmg-intro-duration, .3s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1)),transform var(--rmg-intro-duration, .3s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1));transition-delay:calc(var(--rmg-intro-index, 0) * var(--rmg-intro-stagger, 40ms));will-change:opacity,transform}.fade_container.fadeInActive [data-rmg-thumb-index]>*{opacity:1;transform:translateY(0)}.fullscreenOverlay{position:fixed;inset:0;opacity:0;pointer-events:none;background-color:#000c;transition:opacity .3s cubic-bezier(.4,0,.22,1);will-change:opacity;z-index:8999;transform:translateZ(0);backface-visibility:hidden;contain:paint}.open{opacity:1;pointer-events:auto}.duplicateImg{position:fixed;display:none;transform-origin:top left;transition:transform .3s cubic-bezier(.4,0,.22,1);z-index:9998;will-change:transform}.closeBtn,.leftChevron,.rightChevron,.counter{position:fixed;opacity:0;pointer-events:none;transition:opacity .3s cubic-bezier(.4,0,.22,1);z-index:2147483602}.closeBtn.open,.leftChevron.open,.rightChevron.open,.counter.open{opacity:1;pointer-events:auto}.closeBtn{top:12px;right:12px;background:transparent;border:none;padding:0;width:35px;height:35px;cursor:pointer}.leftChevron,.rightChevron{top:45.5%;width:50px;height:50px;cursor:pointer;background-color:transparent;border:none}.leftChevron{left:0;transform:rotate(180deg)}.rightChevron{right:0}.counter{top:15px;left:16px;color:#fff;font-size:14px;line-height:32px;user-select:none;text-shadow:1px 1px 3px #4f4f4f}.fsOverlayCaption{position:fixed;padding:1rem 1.5rem;color:#fff;font-size:.875rem;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .3s cubic-bezier(.4,0,.22,1),transform .3s cubic-bezier(.4,0,.22,1);z-index:9999}.fsOverlayCaption.open{opacity:1;transform:translateY(0)}.track{position:relative;left:0}.rtl .track{left:auto;right:0}.slider_container,.fade_container{height:100%;min-height:var(--rmg-slider-height, var(--rmg-slider-initial-height, 1px))}.viewport{overflow:hidden;height:100%;width:100%;position:relative}.track{position:relative;height:100%;width:100%;will-change:transform;transform:translateZ(0);backface-visibility:hidden}.fadeInStart{opacity:0}.fadeInActive{opacity:1;transition:opacity var(--rmg-intro-duration, .42s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1))}@media(prefers-reduced-motion:reduce){.fadeInActive{transition:none}}.pagination_dot{position:relative;width:14px;height:14px;overflow:hidden;border-radius:50%;margin:5px;cursor:pointer;transition:transform .2s ease,background-color .3s ease,box-shadow .3s ease}.pagination_dot:hover{transform:scale(1.2)}.pagination_dot.active{background-color:#50a3ff;box-shadow:0 0 8px #50a3ff99}.pagination_dot.inactive{background-color:#d3d3d3}.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple .6s linear;background-color:#0000004d;pointer-events:none}@keyframes ripple{to{transform:scale(4);opacity:0}}.fade_container [data-rmg-idx]>*{opacity:0;transform:translateY(var(--rmg-intro-offset, 10px));transition:opacity var(--rmg-intro-duration, 300) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1)),transform var(--rmg-intro-duration, 300) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1));transition-delay:calc(var(--rmg-intro-index, 0) * var(--rmg-intro-stagger, 40ms));will-change:opacity,transform}.fade_container.fadeInActive [data-rmg-idx]>*{opacity:1;transform:translateY(0)}.sliderSkeletonOverlay{position:absolute;inset:0;z-index:5;pointer-events:none;display:flex;justify-content:center}.sliderSkeletonRow{display:flex;width:100%;gap:.75rem;height:var(--rmg-slider-initial-height, var(--rmg-slider-height, 320px));align-items:stretch}.sliderShell{position:relative;width:100%;container-type:inline-size;height:var(--rmg-slider-height, var(--rmg-slider-initial-height, 1px));min-height:var(--rmg-slider-height, var(--rmg-slider-initial-height, 1px));max-height:var(--rmg-slider-height, var(--rmg-slider-initial-height, 1px))}.sliderSkeletonItem{flex:1 1 0;height:100%;min-width:0;display:flex}.sliderSkeletonGroup{display:flex;min-width:0;min-height:0;width:100%}.sliderSkeleton{width:100%;height:auto;border-radius:var(--rmg-shimmer-radius, 10px);overflow:hidden;position:relative;background:linear-gradient(90deg,var(--rmg-shimmer-c1, #f0f2f5) 25%,var(--rmg-shimmer-c2, #e6e9ef) 37%,var(--rmg-shimmer-c3, #f0f2f5) 63%);background-size:var(--rmg-shimmer-size, 400% 100%);animation:rmgShimmer var(--rmg-shimmer-duration, 1.2s) infinite var(--rmg-shimmer-timing, linear)}.thumbSkeletonOverlay{position:absolute;inset:0;z-index:5;pointer-events:none;display:flex;align-items:center;justify-content:center;padding:.5rem}.thumbSkeletonRow{display:flex;width:100%;height:100%}.thumbSkeleton{border-radius:6px;overflow:hidden;position:relative;background:linear-gradient(90deg,var(--rmg-shimmer-c1, #f0f2f5) 25%,var(--rmg-shimmer-c2, #e6e9ef) 37%,var(--rmg-shimmer-c3, #f0f2f5) 63%);background-size:var(--rmg-shimmer-size, 400% 100%);animation:rmgShimmer var(--rmg-shimmer-duration, 1.2s) infinite var(--rmg-shimmer-timing, linear)}.gridRoot,.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--rmg-grid-min, 160px),1fr));gap:var(--rmg-grid-gap, 8px)}.gridItem{position:relative;display:block;cursor:pointer}.gridItem img,.gridItem video{display:block;width:100%;height:auto;object-fit:cover}.gridSkeletonOverlay{position:relative;width:100%}.gridSkeletonGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--rmg-grid-min, 160px),1fr));gap:var(--rmg-grid-gap, 8px)}.gridSkeletonItem{position:relative;width:100%}@keyframes rmgShimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@media(prefers-reduced-motion:reduce){.gridSkeletonItem{animation:none}}.gridSkelTile{position:relative;display:block;width:100%;min-width:0;height:auto;background:var(--rmg-skel-bg, rgba(0, 0, 0, .08));border-radius:var(--rmg-skel-radius, 12px);overflow:hidden}.gridSkelSquare{aspect-ratio:1 / 1}.gridSkelCircle{aspect-ratio:1 / 1;border-radius:999px}.gridSkelGroup{display:flex;min-width:0}.gridSkelRow{flex-direction:row;align-items:center}.gridSkelCol,.gridSkelStack{flex-direction:column;align-items:stretch}.gridSkelShimmer:before{content:"";position:absolute;inset:0;opacity:calc(var(--rmg-skel-shimmer-enabled, 1) * 1);background:linear-gradient(var(--rmg-skel-shimmer-angle, 25deg),transparent 0%,var(--rmg-skel-hi, rgba(255, 255, 255, .16)) 50%,transparent 100%);transform:translate(-120%);animation:rmg_grid_skel_shimmer var(--rmg-skel-shimmer-duration, 1.2s) linear infinite;background-size:var(--rmg-skel-shimmer-band, 40%) 100%}@keyframes rmg_grid_skel_shimmer{0%{transform:translate(-120%)}to{transform:translate(120%)}}.masonryRoot{display:flex;align-items:flex-start;width:100%;column-gap:var(--rmg-masonry-gap, 8px)}.masonryCol{flex:1;min-width:0;display:flex;flex-direction:column}.masonryItem{position:relative;display:block;cursor:pointer}.masonryItem img,.masonryItem video{display:block;width:100%;object-fit:cover}.introContainer{opacity:0}.introActive{opacity:1;transition:opacity var(--rmg-intro-duration, .42s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1))}.introContainer [data-rmg-idx]{opacity:0;transform:var(--rmg-intro-transform, translateY(10px) scale(.99));transition:opacity .3s cubic-bezier(.4,0,.22,1),transform .3s cubic-bezier(.4,0,.22,1);transition-delay:calc(var(--rmg-intro-index, 0) * var(--rmg-intro-stagger, 40ms));will-change:opacity,transform}.introContainer.introActive [data-rmg-idx]{opacity:1;transform:none}
+.entryRow{position:relative;min-height:var(--rmg-entry-min-height, 260px)}.entryRow[data-rmg-entry-mounted="1"] .entrySkeletonWrap{position:absolute;inset:0;z-index:1;height:auto}.entrySkeletonWrap{position:relative;display:block;opacity:1;transition:opacity .15s linear;transition-delay:0ms;pointer-events:none;z-index:0;height:var(--rmg-entry-min-height, 260px);border-radius:12px;background-color:var(--rmg-entry-skeleton-bg, transparent);overflow:hidden}.entryInner{position:relative;opacity:0;pointer-events:none;min-height:var(--rmg-entry-min-height, 260px);transition:opacity var(--rmg-entry-intro-duration, .7s) var(--rmg-entry-intro-easing, cubic-bezier(.4,0,.22,1));transition-delay:0ms;z-index:0}.entryRow[data-rmg-entry-ready="1"] .entrySkeletonWrap{opacity:0;transition-delay:var(--rmg-entry-intro-delay, 0ms)}.entryRow[data-rmg-entry-ready="1"] .entryInner{opacity:1;pointer-events:auto;transition-delay:var(--rmg-entry-intro-delay, 0ms)}.entryList{display:flex;flex-direction:column;gap:1.5rem}.entrySkelRoot{--rmg-skel-radius: 12px;width:100%}.entrySkelGroup{display:flex;min-width:0}.entrySkelStack{flex-direction:column;width:100%}.entrySkelRow{flex-direction:row;width:100%}.entrySkelCol{flex-direction:column;width:100%}.entrySkelTile{flex:0 0 auto;width:100%;height:100%;position:relative;display:block;background:var(--rmg-skel-bg, #e5e5e5);border-radius:var(--rmg-skel-radius);overflow:hidden}.entrySkelTile:after{content:"";position:absolute;inset:0;opacity:calc(var(--rmg-skel-shimmer-enabled, 1) * var(--rmg-skel-shimmer-opacity, 1));filter:blur(var(--rmg-skel-shimmer-blur, .2px));background-image:linear-gradient(var(--rmg-skel-shimmer-angle, 90deg),transparent 0%,var(--rmg-skel-shimmer-c1, rgba(255, 255, 255, .25)) 22%,var(--rmg-skel-shimmer-c2, rgba(255, 255, 255, .45)) 50%,var(--rmg-skel-shimmer-c3, rgba(255, 255, 255, .25)) 78%,transparent 100%);animation:rmgShimmer var(--rmg-skel-shimmer-duration, 1.2s) var(--rmg-skel-shimmer-timing, linear) infinite;will-change:transform}.entrySkelRect{flex:0 0 auto;width:100%;height:16px}.entrySkelSquare{width:48px;height:48px}.entrySkelCircle{width:44px;height:44px;border-radius:999px}[data-rmg-plyr-provider=mp4] :global(.plyr__video-wrapper),[data-rmg-plyr-provider=vimeo] :global(.plyr__video-wrapper){pointer-events:none!important}.thumb{position:relative;border:1px solid rgba(0,0,0,.12);border-radius:6px;overflow:hidden;box-sizing:border-box}.thumb:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 2px #111 inset;opacity:0;transition:opacity .12s ease;z-index:1}.thumb[data-active=true]:after{opacity:1}.thumb :global(img){display:block;width:100%;height:100%;object-fit:cover;position:relative;z-index:0}.fade_container [data-rmg-thumb-index]>*{opacity:0;transform:translateY(var(--rmg-intro-transform, 10px));transition:opacity var(--rmg-intro-duration, .3s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1)),transform var(--rmg-intro-duration, .3s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1));transition-delay:calc(var(--rmg-intro-index, 0) * var(--rmg-intro-stagger, 40ms));will-change:opacity,transform}.fade_container.fadeInActive [data-rmg-thumb-index]>*{opacity:1;transform:translateY(0)}.fullscreenOverlay{position:fixed;inset:0;opacity:0;pointer-events:none;background-color:#000c;transition:opacity .3s cubic-bezier(.4,0,.22,1);will-change:opacity;z-index:8999;transform:translateZ(0);backface-visibility:hidden;contain:paint}.open{opacity:1;pointer-events:auto}.duplicateImg{position:fixed;display:none;transform-origin:top left;transition:transform .3s cubic-bezier(.4,0,.22,1);z-index:9998;will-change:transform}.closeBtn,.leftChevron,.rightChevron,.counter{position:fixed;opacity:0;pointer-events:none;transition:opacity .3s cubic-bezier(.4,0,.22,1);z-index:2147483602}.closeBtn.open,.leftChevron.open,.rightChevron.open,.counter.open{opacity:1;pointer-events:auto}.closeBtn{top:12px;right:12px;background:transparent;border:none;padding:0;width:35px;height:35px;cursor:pointer}.leftChevron,.rightChevron{top:45.5%;width:50px;height:50px;cursor:pointer;background-color:transparent;border:none}.leftChevron{left:0;transform:rotate(180deg)}.rightChevron{right:0}.counter{top:15px;left:16px;color:#fff;font-size:14px;line-height:32px;user-select:none;text-shadow:1px 1px 3px #4f4f4f}.fsOverlayCaption{position:fixed;padding:1rem 1.5rem;color:#fff;font-size:.875rem;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .3s cubic-bezier(.4,0,.22,1),transform .3s cubic-bezier(.4,0,.22,1);z-index:9999}.fsOverlayCaption.open{opacity:1;transform:translateY(0)}.track{position:relative;left:0}.rtl .track{left:auto;right:0}.slider_container,.fade_container{height:100%;min-height:var(--rmg-slider-height, var(--rmg-slider-initial-height, 1px))}.viewport{overflow:hidden;height:100%;width:100%;position:relative}.track{position:relative;height:100%;width:100%;will-change:transform;transform:translateZ(0);backface-visibility:hidden}.fadeInStart{opacity:0}.fadeInActive{opacity:1;transition:opacity var(--rmg-intro-duration, .42s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1))}@media(prefers-reduced-motion:reduce){.fadeInActive{transition:none}}.pagination_dot{position:relative;width:14px;height:14px;overflow:hidden;border-radius:50%;margin:5px;cursor:pointer;transition:transform .2s ease,background-color .3s ease,box-shadow .3s ease}.pagination_dot:hover{transform:scale(1.2)}.pagination_dot.active{background-color:#50a3ff;box-shadow:0 0 8px #50a3ff99}.pagination_dot.inactive{background-color:#d3d3d3}.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple .6s linear;background-color:#0000004d;pointer-events:none}@keyframes ripple{to{transform:scale(4);opacity:0}}.fade_container [data-rmg-idx]>*{opacity:0;transform:translateY(var(--rmg-intro-offset, 10px));transition:opacity var(--rmg-intro-duration, 600) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1)),transform var(--rmg-intro-duration, 600) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1));transition-delay:calc(var(--rmg-intro-index, 0) * var(--rmg-intro-stagger, 60ms));will-change:opacity,transform}.fade_container.fadeInActive [data-rmg-idx]>*{opacity:1;transform:translateY(0)}.sliderSkeletonOverlay{position:absolute;inset:0;z-index:5;pointer-events:none;display:flex;justify-content:center}.sliderSkeletonRow{display:flex;width:100%;gap:.75rem;height:var(--rmg-slider-initial-height, var(--rmg-slider-height, 320px));align-items:stretch}.sliderShell{position:relative;width:100%;container-type:inline-size;height:var(--rmg-slider-height, var(--rmg-slider-initial-height, 1px));min-height:var(--rmg-slider-height, var(--rmg-slider-initial-height, 1px));max-height:var(--rmg-slider-height, var(--rmg-slider-initial-height, 1px))}.sliderSkeletonItem{flex:1 1 0;height:100%;min-width:0;display:flex}.sliderSkeletonGroup{display:flex;min-width:0;min-height:0;width:100%}.sliderSkeleton{width:100%;height:auto;position:relative;overflow:hidden;border-radius:var(--rmg-skel-radius, 12px);background:var(--rmg-skel-bg, #e5e5e5)}.sliderSkeleton:after{content:"";position:absolute;inset:0;opacity:calc(var(--rmg-skel-shimmer-enabled, 1) * var(--rmg-skel-shimmer-opacity, 1));filter:blur(var(--rmg-skel-shimmer-blur, .2px));background-image:linear-gradient(var(--rmg-skel-shimmer-angle, 90deg),transparent 0%,var(--rmg-skel-shimmer-c1, rgba(255, 255, 255, .25)) 22%,var(--rmg-skel-shimmer-c2, rgba(255, 255, 255, .45)) 50%,var(--rmg-skel-shimmer-c3, rgba(255, 255, 255, .25)) 78%,transparent 100%);animation:rmgShimmer var(--rmg-skel-shimmer-duration, 1.2s) var(--rmg-skel-shimmer-timing, linear) infinite;will-change:transform}@media(prefers-reduced-motion:reduce){.sliderSkeleton:after{animation:none;opacity:0}}.thumbSkeletonOverlay{position:absolute;inset:0;z-index:5;pointer-events:none;display:flex;align-items:center;justify-content:center;padding:.5rem}.thumbSkeletonRow{display:flex;width:100%;height:100%}.thumbSkeleton{border-radius:6px;overflow:hidden;position:relative;background:linear-gradient(90deg,var(--rmg-shimmer-c1, #f0f2f5) 25%,var(--rmg-shimmer-c2, #e6e9ef) 37%,var(--rmg-shimmer-c3, #f0f2f5) 63%);background-size:var(--rmg-shimmer-size, 400% 100%);animation:rmgShimmer var(--rmg-shimmer-duration, 1.2s) infinite var(--rmg-shimmer-timing, linear)}.gridRoot,.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--rmg-grid-min, 160px),1fr));gap:var(--rmg-grid-gap, 8px)}.gridItem{position:relative;display:block;cursor:pointer}.gridItem img,.gridItem video{display:block;width:100%;height:auto;object-fit:cover}.gridSkeletonOverlay{position:relative;width:100%}.gridSkeletonGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--rmg-grid-min, 160px),1fr));gap:var(--rmg-grid-gap, 8px)}.gridSkeletonItem{position:relative;width:100%}@keyframes rmgShimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@media(prefers-reduced-motion:reduce){.gridSkeletonItem{animation:none}}.gridSkelSquare{aspect-ratio:1 / 1}.gridSkelCircle{aspect-ratio:1 / 1;border-radius:999px}.gridSkelGroup{display:flex;min-width:0}.gridSkelRow{flex-direction:row;align-items:center}.gridSkelCol,.gridSkelStack{flex-direction:column;align-items:stretch}.gridSkelTile{position:relative;display:block;width:100%;min-width:0;height:auto;background:var(--rmg-skel-bg, #e5e5e5);border-radius:var(--rmg-skel-radius, 12px);overflow:hidden}.gridSkelShimmer:before{content:"";position:absolute;inset:0;opacity:calc(var(--rmg-skel-shimmer-enabled, 1) * var(--rmg-skel-shimmer-opacity, 1));filter:blur(var(--rmg-skel-shimmer-blur, .2px));background-image:linear-gradient(var(--rmg-skel-shimmer-angle, 90deg),transparent 0%,var(--rmg-skel-shimmer-c1, rgba(255, 255, 255, .25)) 22%,var(--rmg-skel-shimmer-c2, rgba(255, 255, 255, .45)) 50%,var(--rmg-skel-shimmer-c3, rgba(255, 255, 255, .25)) 78%,transparent 100%);animation:rmgShimmer var(--rmg-skel-shimmer-duration, 1.2s) var(--rmg-skel-shimmer-timing, linear) infinite;will-change:transform}.masonryRoot{display:flex;align-items:flex-start;width:100%;column-gap:var(--rmg-masonry-gap, 8px)}.masonryCol{flex:1;min-width:0;display:flex;flex-direction:column}.masonryItem{position:relative;display:block;cursor:pointer}.masonryItem img,.masonryItem video{display:block;width:100%;object-fit:cover}.introContainer{opacity:0}.introActive{opacity:1;transition:opacity var(--rmg-intro-duration, .42s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1))}.introContainer [data-rmg-idx]{opacity:0;transform:var(--rmg-intro-transform, translateY(10px) scale(.99));transition:opacity .3s cubic-bezier(.4,0,.22,1),transform .3s cubic-bezier(.4,0,.22,1);transition-delay:calc(var(--rmg-intro-index, 0) * var(--rmg-intro-stagger, 40ms));will-change:opacity,transform}.introContainer.introActive [data-rmg-idx]{opacity:1;transform:none}.masonrySkelItem{display:block;width:100%;break-inside:avoid;page-break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:var(--rmg-mskel-gap)}.masonrySkeletonOverlay{position:relative;inset:0;z-index:5;pointer-events:none}.masonrySkeletonRoot{width:100%}.masonrySkeletonCol{flex:1;min-width:0;display:flex;flex-direction:column}.masonrySkeletonItem{display:block;width:100%;break-inside:avoid;page-break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:var(--rmg-mskel-gap);border-radius:var(--rmg-skel-radius, 12px);background:var(--rmg-skel-bg, #e5e5e5);overflow:hidden;position:relative}.masonrySkeletonItem:after{content:"";position:absolute;inset:0;opacity:calc(var(--rmg-skel-shimmer-enabled, 1) * var(--rmg-skel-shimmer-opacity, 1));filter:blur(var(--rmg-skel-shimmer-blur, .2px));background-image:linear-gradient(var(--rmg-skel-shimmer-angle, 90deg),transparent 0%,var(--rmg-skel-shimmer-c1, rgba(255, 255, 255, .25)) 22%,var(--rmg-skel-shimmer-c2, rgba(255, 255, 255, .45)) 50%,var(--rmg-skel-shimmer-c3, rgba(255, 255, 255, .25)) 78%,transparent 100%);animation:rmgShimmer var(--rmg-skel-shimmer-duration, 1.2s) var(--rmg-skel-shimmer-timing, linear) infinite;will-change:transform}@keyframes rmgShimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}

package/dist/index.d.mts

@@ -42,7 +42,8 @@ type ElementStyle = {
 type ThumbnailPosition = "top" | "right" | "bottom" | "left";
 type ResponsivePosition = ThumbnailPosition | Array<ThumbnailPosition> | Record<string, ThumbnailPosition>;
 type ThumbnailLoadingOptions = {
-    isLoading?: boolean;
+    enabled?: boolean;
+    force?: boolean;
     skeletonCount?: ResponsiveNumber;
     renderLoading?: () => React$1.ReactNode;
 };
@@ -168,35 +169,40 @@ interface GalleryApi {
     }) => void): () => void;
 }
 
-type SkeletonLength$2 = number | string;
-type SkeletonShimmer$2 = {
+type SkeletonLength$3 = number | string;
+type SkeletonShimmer$3 = {
     enabled?: boolean;
     durationMs?: number;
-    bandSizePct?: number;
     angleDeg?: number;
+    opacity?: number;
+    blurPx?: number;
+    timing?: string;
+    c1?: string;
+    c2?: string;
+    c3?: string;
 };
 type SkeletonBaseStyle$2 = {
-    width?: SkeletonLength$2;
-    maxWidth?: SkeletonLength$2;
-    height?: SkeletonLength$2;
-    maxHeight?: SkeletonLength$2;
+    width?: SkeletonLength$3;
+    maxWidth?: SkeletonLength$3;
+    height?: SkeletonLength$3;
+    maxHeight?: SkeletonLength$3;
     backgroundColor?: string;
-    borderRadius?: SkeletonLength$2;
-    marginTop?: SkeletonLength$2;
-    marginRight?: SkeletonLength$2;
-    marginBottom?: SkeletonLength$2;
-    marginLeft?: SkeletonLength$2;
+    borderRadius?: SkeletonLength$3;
+    marginTop?: SkeletonLength$3;
+    marginRight?: SkeletonLength$3;
+    marginBottom?: SkeletonLength$3;
+    marginLeft?: SkeletonLength$3;
     alignSelf?: React$1.CSSProperties["alignSelf"];
-    aspectRatio?: SkeletonLength$2;
+    aspectRatio?: SkeletonLength$3;
 };
 type SkeletonContainerStyle$2 = {
-    gap?: SkeletonLength$2;
-    padding?: SkeletonLength$2;
+    gap?: SkeletonLength$3;
+    padding?: SkeletonLength$3;
     align?: React$1.CSSProperties["alignItems"];
     justify?: React$1.CSSProperties["justifyContent"];
     wrap?: boolean;
-    width?: SkeletonLength$2;
-    maxWidth?: SkeletonLength$2;
+    width?: SkeletonLength$3;
+    maxWidth?: SkeletonLength$3;
 };
 type SkeletonContainerStyleResponsive$2 = SkeletonContainerStyle$2 | Record<string, SkeletonContainerStyle$2>;
 type SliderSkeletonNode = {
@@ -214,7 +220,7 @@ type SkeletonNode$2 = {
 } | {
     kind: "rect" | "square" | "circle";
     style?: SkeletonBaseStyle$2;
-    shimmer?: SkeletonShimmer$2;
+    shimmer?: SkeletonShimmer$3;
 } | {
     kind: "media";
     count: number;
@@ -223,7 +229,7 @@ type SkeletonNode$2 = {
     tile?: {
         shape?: "rect" | "square" | "circle";
         style?: SkeletonBaseStyle$2;
-        shimmer?: SkeletonShimmer$2;
+        shimmer?: SkeletonShimmer$3;
     };
 };
 type SliderSkeletonSpec = {
@@ -232,8 +238,8 @@ type SliderSkeletonSpec = {
     defaults?: {
         backgroundColor?: string;
         highlightColor?: string;
-        radius?: SkeletonLength$2;
-        shimmer?: SkeletonShimmer$2;
+        radius?: SkeletonLength$3;
+        shimmer?: SkeletonShimmer$3;
     };
 };
 
@@ -316,19 +322,13 @@ type SliderAuto = {
     scroll?: SliderAutoScroll;
 };
 type SliderLoadingOptions = {
-    isLoading?: boolean;
+    enabled?: boolean;
+    force?: boolean;
     skeletonCount?: ResponsiveNumber;
-    renderLoading?: () => React.ReactNode;
+    renderLoading?: (args: {
+        count: number;
+    }) => React.ReactNode;
     skeleton?: SliderSkeletonSpec;
-    shimmer?: {
-        radius?: number | string;
-        c1?: string;
-        c2?: string;
-        c3?: string;
-        size?: string;
-        duration?: string;
-        timing?: string;
-    };
 };
 type SliderIntroOptions = {
     renderIntro?: (args: {
@@ -417,35 +417,40 @@ interface SliderHandle {
     };
 }
 
-type SkeletonLength$1 = number | string;
-type SkeletonShimmer$1 = {
+type SkeletonLength$2 = number | string;
+type SkeletonShimmer$2 = {
     enabled?: boolean;
     durationMs?: number;
-    bandSizePct?: number;
     angleDeg?: number;
+    opacity?: number;
+    blurPx?: number;
+    timing?: string;
+    c1?: string;
+    c2?: string;
+    c3?: string;
 };
 type SkeletonBaseStyle$1 = {
-    width?: SkeletonLength$1;
-    maxWidth?: SkeletonLength$1;
-    height?: SkeletonLength$1;
-    maxHeight?: SkeletonLength$1;
+    width?: SkeletonLength$2;
+    maxWidth?: SkeletonLength$2;
+    height?: SkeletonLength$2;
+    maxHeight?: SkeletonLength$2;
     backgroundColor?: string;
-    borderRadius?: SkeletonLength$1;
-    marginTop?: SkeletonLength$1;
-    marginRight?: SkeletonLength$1;
-    marginBottom?: SkeletonLength$1;
-    marginLeft?: SkeletonLength$1;
+    borderRadius?: SkeletonLength$2;
+    marginTop?: SkeletonLength$2;
+    marginRight?: SkeletonLength$2;
+    marginBottom?: SkeletonLength$2;
+    marginLeft?: SkeletonLength$2;
     alignSelf?: React$1.CSSProperties["alignSelf"];
     aspectRatio?: number | string;
 };
 type SkeletonContainerStyle$1 = {
-    gap?: SkeletonLength$1;
-    padding?: SkeletonLength$1;
+    gap?: SkeletonLength$2;
+    padding?: SkeletonLength$2;
     align?: React$1.CSSProperties["alignItems"];
     justify?: React$1.CSSProperties["justifyContent"];
     wrap?: boolean;
-    width?: SkeletonLength$1;
-    maxWidth?: SkeletonLength$1;
+    width?: SkeletonLength$2;
+    maxWidth?: SkeletonLength$2;
 };
 type SkeletonContainerStyleResponsive$1 = SkeletonContainerStyle$1 | Record<string, SkeletonContainerStyle$1>;
 type SkeletonNode$1 = {
@@ -455,7 +460,7 @@ type SkeletonNode$1 = {
 } | {
     kind: "rect" | "square" | "circle";
     style?: SkeletonBaseStyle$1;
-    shimmer?: SkeletonShimmer$1;
+    shimmer?: SkeletonShimmer$2;
 } | {
     kind: "media";
     count: number;
@@ -464,18 +469,18 @@ type SkeletonNode$1 = {
     tile?: {
         shape?: "rect" | "square" | "circle";
         style?: SkeletonBaseStyle$1;
-        shimmer?: SkeletonShimmer$1;
+        shimmer?: SkeletonShimmer$2;
     };
 };
 type EntrySkeletonSpec = {
     layout?: SkeletonNode$1;
     variant?: "solid";
-    minHeight?: SkeletonLength$1;
+    minHeight?: SkeletonLength$2;
     defaults?: {
         backgroundColor?: string;
         highlightColor?: string;
-        radius?: SkeletonLength$1;
-        shimmer?: SkeletonShimmer$1;
+        radius?: SkeletonLength$2;
+        shimmer?: SkeletonShimmer$2;
     };
 };
 
@@ -514,9 +519,10 @@ type EntrySkeletonResolverArgs = {
     entryIndex: number;
 };
 type EntriesLoadingOptions = {
-    isLoading?: boolean;
+    enabled?: boolean;
+    force?: boolean;
     skeleton?: EntrySkeletonSpec | ((args: EntrySkeletonResolverArgs) => EntrySkeletonSpec | null | undefined);
-    minHeight?: SkeletonLength$1;
+    minHeight?: SkeletonLength$2;
     nearMargin?: string;
     viewMargin?: string;
     threshold?: number;
@@ -862,35 +868,40 @@ declare const Slider: React$1.ForwardRefExoticComponent<SliderOptions & {
     expandableImgRefs?: React$1.RefObject<Array<HTMLImageElement | null>>;
 } & React$1.RefAttributes<SliderHandle>>;
 
-type SkeletonLength = number | string;
-type SkeletonShimmer = {
+type SkeletonLength$1 = number | string;
+type SkeletonShimmer$1 = {
     enabled?: boolean;
     durationMs?: number;
-    bandSizePct?: number;
     angleDeg?: number;
+    opacity?: number;
+    blurPx?: number;
+    timing?: string;
+    c1?: string;
+    c2?: string;
+    c3?: string;
 };
 type SkeletonBaseStyle = {
-    width?: SkeletonLength;
-    maxWidth?: SkeletonLength;
-    height?: SkeletonLength;
-    maxHeight?: SkeletonLength;
+    width?: SkeletonLength$1;
+    maxWidth?: SkeletonLength$1;
+    height?: SkeletonLength$1;
+    maxHeight?: SkeletonLength$1;
     backgroundColor?: string;
-    borderRadius?: SkeletonLength;
-    marginTop?: SkeletonLength;
-    marginRight?: SkeletonLength;
-    marginBottom?: SkeletonLength;
-    marginLeft?: SkeletonLength;
+    borderRadius?: SkeletonLength$1;
+    marginTop?: SkeletonLength$1;
+    marginRight?: SkeletonLength$1;
+    marginBottom?: SkeletonLength$1;
+    marginLeft?: SkeletonLength$1;
     alignSelf?: React$1.CSSProperties["alignSelf"];
-    aspectRatio?: SkeletonLength;
+    aspectRatio?: SkeletonLength$1;
 };
 type SkeletonContainerStyle = {
-    gap?: SkeletonLength;
-    padding?: SkeletonLength;
+    gap?: SkeletonLength$1;
+    padding?: SkeletonLength$1;
     align?: React$1.CSSProperties["alignItems"];
     justify?: React$1.CSSProperties["justifyContent"];
     wrap?: boolean;
-    width?: SkeletonLength;
-    maxWidth?: SkeletonLength;
+    width?: SkeletonLength$1;
+    maxWidth?: SkeletonLength$1;
 };
 type SkeletonContainerStyleResponsive = SkeletonContainerStyle | Record<string, SkeletonContainerStyle>;
 type GridSkeletonNode = {
@@ -907,7 +918,7 @@ type SkeletonNode = {
 } | {
     kind: "rect" | "square" | "circle";
     style?: SkeletonBaseStyle;
-    shimmer?: SkeletonShimmer;
+    shimmer?: SkeletonShimmer$1;
 } | {
     kind: "media";
     count: number;
@@ -916,36 +927,24 @@ type SkeletonNode = {
     tile?: {
         shape?: "rect" | "square" | "circle";
         style?: SkeletonBaseStyle;
-        shimmer?: SkeletonShimmer;
+        shimmer?: SkeletonShimmer$1;
     };
 };
 type GridSkeletonSpec = {
     className?: string;
     layout?: GridSkeletonNode;
-    defaults?: {
-        backgroundColor?: string;
-        highlightColor?: string;
-        radius?: SkeletonLength;
-        shimmer?: SkeletonShimmer;
-    };
+    backgroundColor?: string;
+    radius?: SkeletonLength$1;
+    shimmer?: SkeletonShimmer$1;
 };
 
 type LoadingOptions$1 = {
-    isLoading?: boolean;
+    enabled?: boolean;
+    force?: boolean;
     renderLoading?: (args: {
         count: number;
     }) => React.ReactNode;
     skeleton?: GridSkeletonSpec;
-    shimmer?: {
-        paddingBottom?: string;
-        radius?: number | string;
-        c1?: string;
-        c2?: string;
-        c3?: string;
-        size?: string;
-        duration?: string;
-        timing?: string;
-    };
 };
 type IntroOptions$1 = {
     renderIntro?: (args: {
@@ -976,20 +975,35 @@ type Props$1 = GridOptions & {
 };
 declare function GridLayoutRuntime(props: Props$1): react_jsx_runtime.JSX.Element;
 
-type LoadingOptions = {
-    isLoading?: boolean;
-    renderLoading?: () => React.ReactNode;
-    shimmer?: {
-        paddingBottom?: string;
-        radius?: number | string;
-        c1?: string;
-        c2?: string;
-        c3?: string;
-        size?: string;
-        duration?: string;
-        timing?: string;
-    };
+type SkeletonLength = number | string;
+type SkeletonShimmer = {
+    enabled?: boolean;
+    durationMs?: number;
+    angleDeg?: number;
+    opacity?: number;
+    blurPx?: number;
+    timing?: string;
+    c1?: string;
+    c2?: string;
+    c3?: string;
+};
+type MasonrySkeletonSpec = {
+    className?: string;
     ratios?: number[];
+    heightsPx?: number[];
+    backgroundColor?: string;
+    highlightColor?: string;
+    radius?: SkeletonLength;
+    shimmer?: SkeletonShimmer;
+};
+
+type LoadingOptions = {
+    enabled?: boolean;
+    force?: boolean;
+    renderLoading?: (args: {
+        count: number;
+    }) => React.ReactNode;
+    skeleton?: MasonrySkeletonSpec;
 };
 type IntroOptions = {
     renderIntro?: (args: {