meta-mosaic 1.0.12 → 1.1.0

package/dist/index.es.js

@@ -1,5 +1,5 @@
-import oe, { useState as _, useEffect as O, useRef as se } from "react";
-var X = { exports: {} }, P = {};
+import ne, { useState as O, useEffect as y, useRef as se } from "react";
+var X = { exports: {} }, C = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -11,27 +11,27 @@ var X = { exports: {} }, P = {};
  */
 var K;
 function ae() {
-  if (K) return P;
+  if (K) return C;
   K = 1;
-  var t = Symbol.for("react.transitional.element"), c = Symbol.for("react.fragment");
-  function o(u, s, a) {
-    var d = null;
-    if (a !== void 0 && (d = "" + a), s.key !== void 0 && (d = "" + s.key), "key" in s) {
+  var t = Symbol.for("react.transitional.element"), u = Symbol.for("react.fragment");
+  function n(l, s, a) {
+    var m = null;
+    if (a !== void 0 && (m = "" + a), s.key !== void 0 && (m = "" + s.key), "key" in s) {
       a = {};
-      for (var m in s)
-        m !== "key" && (a[m] = s[m]);
+      for (var p in s)
+        p !== "key" && (a[p] = s[p]);
     } else a = s;
     return s = a.ref, {
       $$typeof: t,
-      type: u,
-      key: d,
+      type: l,
+      key: m,
       ref: s !== void 0 ? s : null,
       props: a
     };
   }
-  return P.Fragment = c, P.jsx = o, P.jsxs = o, P;
+  return C.Fragment = u, C.jsx = n, C.jsxs = n, C;
 }
-var y = {};
+var N = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -50,33 +50,33 @@ function le() {
         return e.$$typeof === re ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case S:
+        case x:
           return "Fragment";
-        case I:
+        case Y:
           return "Profiler";
-        case $:
+        case M:
           return "StrictMode";
-        case R:
+        case _:
           return "Suspense";
-        case z:
+        case $:
           return "SuspenseList";
-        case A:
+        case j:
           return "Activity";
       }
       if (typeof e == "object")
         switch (typeof e.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), e.$$typeof) {
-          case N:
+          case A:
             return "Portal";
-          case Y:
+          case D:
             return (e.displayName || "Context") + ".Provider";
-          case M:
+          case z:
             return (e._context.displayName || "Context") + ".Consumer";
-          case x:
+          case h:
             var r = e.render;
             return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case D:
+          case S:
             return r = e.displayName || null, r !== null ? r : t(e.type) || "Memo";
           case g:
             r = e._payload, e = e._init;
@@ -87,28 +87,28 @@ function le() {
         }
       return null;
     }
-    function c(e) {
+    function u(e) {
       return "" + e;
     }
-    function o(e) {
+    function n(e) {
       try {
-        c(e);
+        u(e);
         var r = !1;
       } catch {
         r = !0;
       }
       if (r) {
         r = console;
-        var n = r.error, l = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return n.call(
+        var o = r.error, i = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return o.call(
           r,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          l
-        ), c(e);
+          i
+        ), u(e);
       }
     }
-    function u(e) {
-      if (e === S) return "<>";
+    function l(e) {
+      if (e === x) return "<>";
       if (typeof e == "object" && e !== null && e.$$typeof === g)
         return "<...>";
       try {
@@ -119,47 +119,47 @@ function le() {
       }
     }
     function s() {
-      var e = L.A;
+      var e = F.A;
       return e === null ? null : e.getOwner();
     }
     function a() {
       return Error("react-stack-top-frame");
     }
-    function d(e) {
+    function m(e) {
       if (q.call(e, "key")) {
         var r = Object.getOwnPropertyDescriptor(e, "key").get;
         if (r && r.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function m(e, r) {
-      function n() {
+    function p(e, r) {
+      function o() {
         G || (G = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
           r
         ));
       }
-      n.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: n,
+      o.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: o,
         configurable: !0
       });
     }
-    function E() {
+    function T() {
       var e = t(this.type);
       return J[e] || (J[e] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), e = this.props.ref, e !== void 0 ? e : null;
     }
-    function b(e, r, n, l, k, v, W, U) {
-      return n = v.ref, e = {
-        $$typeof: T,
+    function f(e, r, o, i, w, E, W, U) {
+      return o = E.ref, e = {
+        $$typeof: k,
         type: e,
         key: r,
-        props: v,
-        _owner: k
-      }, (n !== void 0 ? n : null) !== null ? Object.defineProperty(e, "ref", {
+        props: E,
+        _owner: w
+      }, (o !== void 0 ? o : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: E
+        get: T
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -182,112 +182,112 @@ function le() {
         value: U
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function h(e, r, n, l, k, v, W, U) {
-      var i = r.children;
-      if (i !== void 0)
-        if (l)
-          if (te(i)) {
-            for (l = 0; l < i.length; l++)
-              w(i[l]);
-            Object.freeze && Object.freeze(i);
+    function v(e, r, o, i, w, E, W, U) {
+      var c = r.children;
+      if (c !== void 0)
+        if (i)
+          if (te(c)) {
+            for (i = 0; i < c.length; i++)
+              R(c[i]);
+            Object.freeze && Object.freeze(c);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else w(i);
+        else R(c);
       if (q.call(r, "key")) {
-        i = t(e);
-        var j = Object.keys(r).filter(function(ne) {
-          return ne !== "key";
+        c = t(e);
+        var P = Object.keys(r).filter(function(oe) {
+          return oe !== "key";
         });
-        l = 0 < j.length ? "{key: someKey, " + j.join(": ..., ") + ": ...}" : "{key: someKey}", Z[i + l] || (j = 0 < j.length ? "{" + j.join(": ..., ") + ": ...}" : "{}", console.error(
+        i = 0 < P.length ? "{key: someKey, " + P.join(": ..., ") + ": ...}" : "{key: someKey}", Z[c + i] || (P = 0 < P.length ? "{" + P.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
-          l,
           i,
-          j,
-          i
-        ), Z[i + l] = !0);
+          c,
+          P,
+          c
+        ), Z[c + i] = !0);
       }
-      if (i = null, n !== void 0 && (o(n), i = "" + n), d(r) && (o(r.key), i = "" + r.key), "key" in r) {
-        n = {};
+      if (c = null, o !== void 0 && (n(o), c = "" + o), m(r) && (n(r.key), c = "" + r.key), "key" in r) {
+        o = {};
         for (var V in r)
-          V !== "key" && (n[V] = r[V]);
-      } else n = r;
-      return i && m(
-        n,
+          V !== "key" && (o[V] = r[V]);
+      } else o = r;
+      return c && p(
+        o,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), b(
+      ), f(
         e,
-        i,
-        v,
-        k,
+        c,
+        E,
+        w,
         s(),
-        n,
+        o,
         W,
         U
       );
     }
-    function w(e) {
-      typeof e == "object" && e !== null && e.$$typeof === T && e._store && (e._store.validated = 1);
+    function R(e) {
+      typeof e == "object" && e !== null && e.$$typeof === k && e._store && (e._store.validated = 1);
     }
-    var p = oe, T = Symbol.for("react.transitional.element"), N = Symbol.for("react.portal"), S = Symbol.for("react.fragment"), $ = Symbol.for("react.strict_mode"), I = Symbol.for("react.profiler"), M = Symbol.for("react.consumer"), Y = Symbol.for("react.context"), x = Symbol.for("react.forward_ref"), R = Symbol.for("react.suspense"), z = Symbol.for("react.suspense_list"), D = Symbol.for("react.memo"), g = Symbol.for("react.lazy"), A = Symbol.for("react.activity"), re = Symbol.for("react.client.reference"), L = p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, q = Object.prototype.hasOwnProperty, te = Array.isArray, F = console.createTask ? console.createTask : function() {
+    var b = ne, k = Symbol.for("react.transitional.element"), A = Symbol.for("react.portal"), x = Symbol.for("react.fragment"), M = Symbol.for("react.strict_mode"), Y = Symbol.for("react.profiler"), z = Symbol.for("react.consumer"), D = Symbol.for("react.context"), h = Symbol.for("react.forward_ref"), _ = Symbol.for("react.suspense"), $ = Symbol.for("react.suspense_list"), S = Symbol.for("react.memo"), g = Symbol.for("react.lazy"), j = Symbol.for("react.activity"), re = Symbol.for("react.client.reference"), F = b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, q = Object.prototype.hasOwnProperty, te = Array.isArray, L = console.createTask ? console.createTask : function() {
       return null;
     };
-    p = {
+    b = {
       "react-stack-bottom-frame": function(e) {
         return e();
       }
     };
-    var G, J = {}, B = p["react-stack-bottom-frame"].bind(
-      p,
+    var G, J = {}, H = b["react-stack-bottom-frame"].bind(
+      b,
       a
-    )(), H = F(u(a)), Z = {};
-    y.Fragment = S, y.jsx = function(e, r, n, l, k) {
-      var v = 1e4 > L.recentlyCreatedOwnerStacks++;
-      return h(
+    )(), B = L(l(a)), Z = {};
+    N.Fragment = x, N.jsx = function(e, r, o, i, w) {
+      var E = 1e4 > F.recentlyCreatedOwnerStacks++;
+      return v(
         e,
         r,
-        n,
+        o,
         !1,
-        l,
-        k,
-        v ? Error("react-stack-top-frame") : B,
-        v ? F(u(e)) : H
+        i,
+        w,
+        E ? Error("react-stack-top-frame") : H,
+        E ? L(l(e)) : B
       );
-    }, y.jsxs = function(e, r, n, l, k) {
-      var v = 1e4 > L.recentlyCreatedOwnerStacks++;
-      return h(
+    }, N.jsxs = function(e, r, o, i, w) {
+      var E = 1e4 > F.recentlyCreatedOwnerStacks++;
+      return v(
         e,
         r,
-        n,
+        o,
         !0,
-        l,
-        k,
-        v ? Error("react-stack-top-frame") : B,
-        v ? F(u(e)) : H
+        i,
+        w,
+        E ? Error("react-stack-top-frame") : H,
+        E ? L(l(e)) : B
       );
     };
-  }()), y;
+  }()), N;
 }
 process.env.NODE_ENV === "production" ? X.exports = ae() : X.exports = le();
-var f = X.exports;
-const C = {
+var d = X.exports;
+const I = {
   sm: 600,
   md: 960,
   lg: 1280,
   xl: 1920
-}, ee = (t) => t >= C.xl ? "xl" : t >= C.lg ? "lg" : t >= C.md ? "md" : t >= C.sm ? "sm" : "xs", ie = () => {
-  const [t, c] = _(() => ee(window.innerWidth));
-  return O(() => {
-    const o = () => {
-      c(ee(window.innerWidth));
+}, ee = (t) => t >= I.xl ? "xl" : t >= I.lg ? "lg" : t >= I.md ? "md" : t >= I.sm ? "sm" : "xs", ie = () => {
+  const [t, u] = O(() => ee(window.innerWidth));
+  return y(() => {
+    const n = () => {
+      u(ee(window.innerWidth));
     };
-    return window.addEventListener("resize", o), () => window.removeEventListener("resize", o);
+    return window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
   }, []), {
     isXs: t === "xs",
     isSm: t === "sm",
@@ -298,28 +298,33 @@ const C = {
   };
 }, ce = ({
   image: t,
-  bgImageUrl: c,
-  width: o,
-  height: u,
-  bgPosition: s,
-  onClickCard: a
+  bgImageUrl: u,
+  width: n,
+  height: l,
+  row: s,
+  col: a,
+  totalRows: m,
+  totalCols: p,
+  onClickCard: T
 }) => {
-  const [d, m] = _(!1);
-  return O(() => {
+  const [f, v] = O(!1);
+  y(() => {
     if (!(t != null && t.link)) return;
-    const E = new Image();
-    E.src = t.link, E.onload = () => m(!0), E.onerror = () => m(!1);
-  }, [t]), /* @__PURE__ */ f.jsx("div", { className: "mosaic-cell-wrapper", children: d ? /* @__PURE__ */ f.jsx(
+    const x = new Image();
+    x.src = t.link, x.onload = () => v(!0), x.onerror = () => v(!1);
+  }, [t]);
+  const R = n / p, b = l / m, k = Number((-(a * R)).toFixed(5)), A = Number((-(s * b)).toFixed(5));
+  return /* @__PURE__ */ d.jsx("div", { className: "mosaic-cell-wrapper", children: f ? /* @__PURE__ */ d.jsx(
     "div",
     {
       className: "mosaic-cell",
       style: {
-        backgroundImage: `url(${c})`,
-        backgroundSize: `${o}px ${u}px`,
-        backgroundPosition: s
+        backgroundImage: `url(${u})`,
+        backgroundSize: `${n}px ${l}px`,
+        backgroundPosition: `${k}px ${A}px`
       },
-      onClick: () => a(t),
-      children: /* @__PURE__ */ f.jsx(
+      onClick: () => T(t),
+      children: /* @__PURE__ */ d.jsx(
         "div",
         {
           className: "mosaic-cell-img",
@@ -330,38 +335,38 @@ const C = {
         }
       )
     }
-  ) : null }, t.id);
+  ) : null });
 }, ue = ({
   image: t,
-  onClose: c,
-  animationType: o = "bottom",
-  position: u,
+  onClose: u,
+  animationType: n = "bottom",
+  position: l,
   setDialog: s
   // 🆕 New prop
 }) => {
-  const [a, d] = _(!0), [m, E] = _({}), b = se();
-  O(() => (document.body.style.overflow = "hidden", () => {
+  const [a, m] = O(!0), [p, T] = O({}), f = se();
+  y(() => (document.body.style.overflow = "hidden", () => {
     document.body.style.overflow = "";
-  }), []), O(() => {
-    if (o === "position" && b.current && u) {
-      const { offsetWidth: p, offsetHeight: T } = b.current;
-      E({
+  }), []), y(() => {
+    if (n === "position" && f.current && l) {
+      const { offsetWidth: b, offsetHeight: k } = f.current;
+      T({
         position: "absolute",
-        left: u.x - p / 2,
-        top: u.y - T / 2
+        left: l.x - b / 2,
+        top: l.y - k / 2
       });
     }
-  }, [o, u]);
-  const h = () => {
-    d(!1), setTimeout(() => {
-      c();
+  }, [n, l]);
+  const v = () => {
+    m(!1), setTimeout(() => {
+      u();
     }, 300);
-  }, w = a ? o === "position" ? "zoom-in" : `slide-in-${o}` : o === "position" ? "zoom-out" : `slide-out-${o}`;
-  return /* @__PURE__ */ f.jsx(
+  }, R = a ? n === "position" ? "zoom-in" : `slide-in-${n}` : n === "position" ? "zoom-out" : `slide-out-${n}`;
+  return /* @__PURE__ */ d.jsx(
     "div",
     {
       className: "dialog-overlay",
-      onClick: h,
+      onClick: v,
       style: {
         position: "fixed",
         top: 0,
@@ -374,12 +379,12 @@ const C = {
         alignItems: "center",
         zIndex: 1e3
       },
-      children: /* @__PURE__ */ f.jsx(
+      children: /* @__PURE__ */ d.jsx(
         "div",
         {
-          ref: b,
-          className: `dialog-content ${w}`,
-          onClick: (p) => p.stopPropagation(),
+          ref: f,
+          className: `dialog-content ${R}`,
+          onClick: (b) => b.stopPropagation(),
           style: {
             backgroundColor: "#fff",
             padding: "20px",
@@ -387,11 +392,11 @@ const C = {
             maxWidth: "90%",
             maxHeight: "90%",
             overflow: "auto",
-            ...o === "position" ? m : {}
+            ...n === "position" ? p : {}
           },
-          children: typeof s == "function" ? s(t) : /* @__PURE__ */ f.jsxs(f.Fragment, { children: [
-            /* @__PURE__ */ f.jsx("h3", { children: "Image Info" }),
-            /* @__PURE__ */ f.jsx(
+          children: typeof s == "function" ? s(t) : /* @__PURE__ */ d.jsxs(d.Fragment, { children: [
+            /* @__PURE__ */ d.jsx("h3", { children: "Image Info" }),
+            /* @__PURE__ */ d.jsx(
               "img",
               {
                 src: t.link,
@@ -399,7 +404,7 @@ const C = {
                 style: { width: "100%", height: "auto", borderRadius: "4px" }
               }
             ),
-            /* @__PURE__ */ f.jsxs("p", { children: [
+            /* @__PURE__ */ d.jsxs("p", { children: [
               "ID: ",
               t.id
             ] })
@@ -410,63 +415,67 @@ const C = {
   );
 }, de = ({
   images: t = [],
-  size: c = 14,
-  bgImageUrl: o = null,
-  gridWrapperClassName: u = null,
+  size: u = 14,
+  bgImageUrl: n = null,
+  gridWrapperClassName: l = null,
   gridWrapperStyle: s = {},
   width: a = { xs: 350, md: 500, lg: 700 },
-  height: d = { xs: 350, md: 500, lg: 700 },
-  bgPosition: m = "center",
-  setDialog: E = null
+  height: m = { xs: 350, md: 500, lg: 700 },
+  bgPosition: p = "center",
+  setDialog: T = null
 }) => {
-  const [b, h] = _(c), [w, p] = _(!1), [T, N] = _({}), S = (g = null) => {
-    g && N(g), p(!0);
-  }, $ = () => p(!1), { isXs: I, isMd: M, isLg: Y } = ie();
-  let x = 350, R = 350;
-  I && (x = a.xs, R = d.xs), M && (x = a.md || 350, R = d.md || 350), Y && (x = a.lg || 350, R = d.lg || 350), O(() => {
-    c > 0 && h(c);
-  }, [c]), O(() => {
-    if (b * b < t.length) {
-      const A = Math.ceil(Math.sqrt(t.length));
-      A !== b && h(A);
+  const [f, v] = O(u), [R, b] = O(!1), [k, A] = O({}), x = (g = null) => {
+    g && A(g), b(!0);
+  }, M = () => b(!1), { isXs: Y, isMd: z, isLg: D } = ie();
+  let h = 350, _ = 350;
+  Y && (h = a.xs, _ = m.xs), z && (h = a.md || 350, _ = m.md || 350), D && (h = a.lg || 350, _ = m.lg || 350), y(() => {
+    u > 0 && v(u);
+  }, [u]), y(() => {
+    if (f * f < t.length) {
+      const j = Math.ceil(Math.sqrt(t.length));
+      j !== f && v(j);
     }
-  }, [t.length, b]);
-  let z = b, D = b;
-  return /* @__PURE__ */ f.jsxs(
+  }, [t.length, f]);
+  let $ = f, S = f;
+  return /* @__PURE__ */ d.jsxs(
     "div",
     {
-      className: `mosaic-grid-wrapper ${u || ""}`,
+      className: `mosaic-grid-wrapper ${l || ""}`,
       style: {
-        gridTemplateColumns: `repeat(${D}, 1fr)`,
-        gridTemplateRows: `repeat(${z}, 1fr)`,
-        backgroundImage: `url(${o})`,
-        backgroundSize: `${x}px ${R}px`,
-        backgroundPosition: m,
-        width: `${x}px`,
-        height: `${R}px`,
+        gridTemplateColumns: `repeat(${S}, 1fr)`,
+        gridTemplateRows: `repeat(${$}, 1fr)`,
+        backgroundImage: `url(${n})`,
+        backgroundSize: `${h}px ${_}px`,
+        backgroundPosition: "0px 0px",
+        width: `${h}px`,
+        height: `${_}px`,
         ...s
       },
       children: [
-        /* @__PURE__ */ f.jsx("div", { className: "mosaic-grid-wrapper-overlay" }),
-        t.map((g) => /* @__PURE__ */ f.jsx(
+        /* @__PURE__ */ d.jsx("div", { className: "mosaic-grid-wrapper-overlay" }),
+        t.map((g, j) => /* @__PURE__ */ d.jsx(
           ce,
           {
             image: g,
-            bgImageUrl: o,
-            width: x,
-            height: R,
-            bgPosition: m,
-            onClickCard: S
-          }
+            bgImageUrl: n,
+            width: h,
+            height: _,
+            row: Math.floor(j / S),
+            col: j % S,
+            totalRows: $,
+            totalCols: S,
+            onClickCard: x
+          },
+          g.id
         )),
-        w && /* @__PURE__ */ f.jsx(
+        R && /* @__PURE__ */ d.jsx(
           ue,
           {
-            image: T,
-            onClose: $,
+            image: k,
+            onClose: M,
             animationType: "top",
             position: "top",
-            setDialog: E
+            setDialog: T
           }
         )
       ]

package/dist/index.umd.js

@@ -1,4 +1,4 @@
-(function(_,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],s):(_=typeof globalThis<"u"?globalThis:_||self,s(_.MetaMosaic={},_.React))})(this,function(_,s){"use strict";var N={exports:{}},O={};/**
+(function(S,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],s):(S=typeof globalThis<"u"?globalThis:S||self,s(S.MetaMosaic={},S.React))})(this,function(S,s){"use strict";var Y={exports:{}},A={};/**
  * @license React
  * react-jsx-runtime.production.js
  *
@@ -6,7 +6,7 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var J;function re(){if(J)return O;J=1;var t=Symbol.for("react.transitional.element"),u=Symbol.for("react.fragment");function o(f,a,l){var m=null;if(l!==void 0&&(m=""+l),a.key!==void 0&&(m=""+a.key),"key"in a){l={};for(var b in a)b!=="key"&&(l[b]=a[b])}else l=a;return a=l.ref,{$$typeof:t,type:f,key:m,ref:a!==void 0?a:null,props:l}}return O.Fragment=u,O.jsx=o,O.jsxs=o,O}var y={};/**
+ */var J;function re(){if(J)return A;J=1;var t=Symbol.for("react.transitional.element"),f=Symbol.for("react.fragment");function o(c,a,l){var b=null;if(l!==void 0&&(b=""+l),a.key!==void 0&&(b=""+a.key),"key"in a){l={};for(var E in a)E!=="key"&&(l[E]=a[E])}else l=a;return a=l.ref,{$$typeof:t,type:c,key:b,ref:a!==void 0?a:null,props:l}}return A.Fragment=f,A.jsx=o,A.jsxs=o,A}var C={};/**
  * @license React
  * react-jsx-runtime.development.js
  *
@@ -14,9 +14,9 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var B;function te(){return B||(B=1,process.env.NODE_ENV!=="production"&&function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===le?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case P:return"Fragment";case Y:return"Profiler";case M:return"StrictMode";case g:return"Suspense";case L:return"SuspenseList";case C:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case I:return"Portal";case D:return(e.displayName||"Context")+".Provider";case z:return(e._context.displayName||"Context")+".Consumer";case R:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case F:return r=e.displayName||null,r!==null?r:t(e.type)||"Memo";case k:r=e._payload,e=e._init;try{return t(e(r))}catch{}}return null}function u(e){return""+e}function o(e){try{u(e);var r=!1}catch{r=!0}if(r){r=console;var n=r.error,c=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",c),u(e)}}function f(e){if(e===P)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===k)return"<...>";try{var r=t(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function a(){var e=W.A;return e===null?null:e.getOwner()}function l(){return Error("react-stack-top-frame")}function m(e){if(Z.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function b(e,r){function n(){$||($=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function x(){var e=t(this.type);return K[e]||(K[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function p(e,r,n,c,h,v,V,X){return n=v.ref,e={$$typeof:S,type:e,key:r,props:v,_owner:h},(n!==void 0?n:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:x}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:V}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:X}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function T(e,r,n,c,h,v,V,X){var i=r.children;if(i!==void 0)if(c)if(ce(i)){for(c=0;c<i.length;c++)w(i[c]);Object.freeze&&Object.freeze(i)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else w(i);if(Z.call(r,"key")){i=t(e);var j=Object.keys(r).filter(function(ie){return ie!=="key"});c=0<j.length?"{key: someKey, "+j.join(": ..., ")+": ...}":"{key: someKey}",ee[i+c]||(j=0<j.length?"{"+j.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+ */var H;function te(){return H||(H=1,process.env.NODE_ENV!=="production"&&function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===le?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case g:return"Fragment";case D:return"Profiler";case z:return"StrictMode";case w:return"Suspense";case M:return"SuspenseList";case O:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case N:return"Portal";case L:return(e.displayName||"Context")+".Provider";case F:return(e._context.displayName||"Context")+".Consumer";case _:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case P:return r=e.displayName||null,r!==null?r:t(e.type)||"Memo";case R:r=e._payload,e=e._init;try{return t(e(r))}catch{}}return null}function f(e){return""+e}function o(e){try{f(e);var r=!1}catch{r=!0}if(r){r=console;var n=r.error,i=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",i),f(e)}}function c(e){if(e===g)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===R)return"<...>";try{var r=t(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function a(){var e=W.A;return e===null?null:e.getOwner()}function l(){return Error("react-stack-top-frame")}function b(e){if(Z.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function E(e,r){function n(){$||($=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function j(){var e=t(this.type);return K[e]||(K[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function m(e,r,n,i,T,x,V,X){return n=x.ref,e={$$typeof:h,type:e,key:r,props:x,_owner:T},(n!==void 0?n:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:j}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:V}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:X}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function v(e,r,n,i,T,x,V,X){var u=r.children;if(u!==void 0)if(i)if(ce(u)){for(i=0;i<u.length;i++)k(u[i]);Object.freeze&&Object.freeze(u)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else k(u);if(Z.call(r,"key")){u=t(e);var y=Object.keys(r).filter(function(ie){return ie!=="key"});i=0<y.length?"{key: someKey, "+y.join(": ..., ")+": ...}":"{key: someKey}",ee[u+i]||(y=0<y.length?"{"+y.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,c,i,j,i),ee[i+c]=!0)}if(i=null,n!==void 0&&(o(n),i=""+n),m(r)&&(o(r.key),i=""+r.key),"key"in r){n={};for(var G in r)G!=="key"&&(n[G]=r[G])}else n=r;return i&&b(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),p(e,i,v,h,a(),n,V,X)}function w(e){typeof e=="object"&&e!==null&&e.$$typeof===S&&e._store&&(e._store.validated=1)}var E=s,S=Symbol.for("react.transitional.element"),I=Symbol.for("react.portal"),P=Symbol.for("react.fragment"),M=Symbol.for("react.strict_mode"),Y=Symbol.for("react.profiler"),z=Symbol.for("react.consumer"),D=Symbol.for("react.context"),R=Symbol.for("react.forward_ref"),g=Symbol.for("react.suspense"),L=Symbol.for("react.suspense_list"),F=Symbol.for("react.memo"),k=Symbol.for("react.lazy"),C=Symbol.for("react.activity"),le=Symbol.for("react.client.reference"),W=E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Z=Object.prototype.hasOwnProperty,ce=Array.isArray,U=console.createTask?console.createTask:function(){return null};E={"react-stack-bottom-frame":function(e){return e()}};var $,K={},Q=E["react-stack-bottom-frame"].bind(E,l)(),q=U(f(l)),ee={};y.Fragment=P,y.jsx=function(e,r,n,c,h){var v=1e4>W.recentlyCreatedOwnerStacks++;return T(e,r,n,!1,c,h,v?Error("react-stack-top-frame"):Q,v?U(f(e)):q)},y.jsxs=function(e,r,n,c,h){var v=1e4>W.recentlyCreatedOwnerStacks++;return T(e,r,n,!0,c,h,v?Error("react-stack-top-frame"):Q,v?U(f(e)):q)}}()),y}process.env.NODE_ENV==="production"?N.exports=re():N.exports=te();var d=N.exports;const A={sm:600,md:960,lg:1280,xl:1920},H=t=>t>=A.xl?"xl":t>=A.lg?"lg":t>=A.md?"md":t>=A.sm?"sm":"xs",ne=()=>{const[t,u]=s.useState(()=>H(window.innerWidth));return s.useEffect(()=>{const o=()=>{u(H(window.innerWidth))};return window.addEventListener("resize",o),()=>window.removeEventListener("resize",o)},[]),{isXs:t==="xs",isSm:t==="sm",isMd:t==="md",isLg:t==="lg",isXl:t==="xl",current:t}},oe=({image:t,bgImageUrl:u,width:o,height:f,bgPosition:a,onClickCard:l})=>{const[m,b]=s.useState(!1);return s.useEffect(()=>{if(!(t!=null&&t.link))return;const x=new Image;x.src=t.link,x.onload=()=>b(!0),x.onerror=()=>b(!1)},[t]),d.jsx("div",{className:"mosaic-cell-wrapper",children:m?d.jsx("div",{className:"mosaic-cell",style:{backgroundImage:`url(${u})`,backgroundSize:`${o}px ${f}px`,backgroundPosition:a},onClick:()=>l(t),children:d.jsx("div",{className:"mosaic-cell-img",style:{backgroundImage:`url(${t.link})`,backgroundSize:"cover"}})}):null},t.id)},se=({image:t,onClose:u,animationType:o="bottom",position:f,setDialog:a})=>{const[l,m]=s.useState(!0),[b,x]=s.useState({}),p=s.useRef();s.useEffect(()=>(document.body.style.overflow="hidden",()=>{document.body.style.overflow=""}),[]),s.useEffect(()=>{if(o==="position"&&p.current&&f){const{offsetWidth:E,offsetHeight:S}=p.current;x({position:"absolute",left:f.x-E/2,top:f.y-S/2})}},[o,f]);const T=()=>{m(!1),setTimeout(()=>{u()},300)},w=l?o==="position"?"zoom-in":`slide-in-${o}`:o==="position"?"zoom-out":`slide-out-${o}`;return d.jsx("div",{className:"dialog-overlay",onClick:T,style:{position:"fixed",top:0,left:0,width:"100vw",height:"100vh",backgroundColor:"rgba(0,0,0,0.6)",display:"flex",justifyContent:"center",alignItems:"center",zIndex:1e3},children:d.jsx("div",{ref:p,className:`dialog-content ${w}`,onClick:E=>E.stopPropagation(),style:{backgroundColor:"#fff",padding:"20px",borderRadius:"8px",maxWidth:"90%",maxHeight:"90%",overflow:"auto",...o==="position"?b:{}},children:typeof a=="function"?a(t):d.jsxs(d.Fragment,{children:[d.jsx("h3",{children:"Image Info"}),d.jsx("img",{src:t.link,alt:"Preview",style:{width:"100%",height:"auto",borderRadius:"4px"}}),d.jsxs("p",{children:["ID: ",t.id]})]})})})},ae=({images:t=[],size:u=14,bgImageUrl:o=null,gridWrapperClassName:f=null,gridWrapperStyle:a={},width:l={xs:350,md:500,lg:700},height:m={xs:350,md:500,lg:700},bgPosition:b="center",setDialog:x=null})=>{const[p,T]=s.useState(u),[w,E]=s.useState(!1),[S,I]=s.useState({}),P=(k=null)=>{k&&I(k),E(!0)},M=()=>E(!1),{isXs:Y,isMd:z,isLg:D}=ne();let R=350,g=350;Y&&(R=l.xs,g=m.xs),z&&(R=l.md||350,g=m.md||350),D&&(R=l.lg||350,g=m.lg||350),s.useEffect(()=>{u>0&&T(u)},[u]),s.useEffect(()=>{if(p*p<t.length){const C=Math.ceil(Math.sqrt(t.length));C!==p&&T(C)}},[t.length,p]);let L=p,F=p;return d.jsxs("div",{className:`mosaic-grid-wrapper ${f||""}`,style:{gridTemplateColumns:`repeat(${F}, 1fr)`,gridTemplateRows:`repeat(${L}, 1fr)`,backgroundImage:`url(${o})`,backgroundSize:`${R}px ${g}px`,backgroundPosition:b,width:`${R}px`,height:`${g}px`,...a},children:[d.jsx("div",{className:"mosaic-grid-wrapper-overlay"}),t.map(k=>d.jsx(oe,{image:k,bgImageUrl:o,width:R,height:g,bgPosition:b,onClickCard:P})),w&&d.jsx(se,{image:S,onClose:M,animationType:"top",position:"top",setDialog:x})]})};_.MetaMosaic=ae,Object.defineProperty(_,Symbol.toStringTag,{value:"Module"})});
+  <%s key={someKey} {...props} />`,i,u,y,u),ee[u+i]=!0)}if(u=null,n!==void 0&&(o(n),u=""+n),b(r)&&(o(r.key),u=""+r.key),"key"in r){n={};for(var G in r)G!=="key"&&(n[G]=r[G])}else n=r;return u&&E(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),m(e,u,x,T,a(),n,V,X)}function k(e){typeof e=="object"&&e!==null&&e.$$typeof===h&&e._store&&(e._store.validated=1)}var p=s,h=Symbol.for("react.transitional.element"),N=Symbol.for("react.portal"),g=Symbol.for("react.fragment"),z=Symbol.for("react.strict_mode"),D=Symbol.for("react.profiler"),F=Symbol.for("react.consumer"),L=Symbol.for("react.context"),_=Symbol.for("react.forward_ref"),w=Symbol.for("react.suspense"),M=Symbol.for("react.suspense_list"),P=Symbol.for("react.memo"),R=Symbol.for("react.lazy"),O=Symbol.for("react.activity"),le=Symbol.for("react.client.reference"),W=p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Z=Object.prototype.hasOwnProperty,ce=Array.isArray,U=console.createTask?console.createTask:function(){return null};p={"react-stack-bottom-frame":function(e){return e()}};var $,K={},Q=p["react-stack-bottom-frame"].bind(p,l)(),q=U(c(l)),ee={};C.Fragment=g,C.jsx=function(e,r,n,i,T){var x=1e4>W.recentlyCreatedOwnerStacks++;return v(e,r,n,!1,i,T,x?Error("react-stack-top-frame"):Q,x?U(c(e)):q)},C.jsxs=function(e,r,n,i,T){var x=1e4>W.recentlyCreatedOwnerStacks++;return v(e,r,n,!0,i,T,x?Error("react-stack-top-frame"):Q,x?U(c(e)):q)}}()),C}process.env.NODE_ENV==="production"?Y.exports=re():Y.exports=te();var d=Y.exports;const I={sm:600,md:960,lg:1280,xl:1920},B=t=>t>=I.xl?"xl":t>=I.lg?"lg":t>=I.md?"md":t>=I.sm?"sm":"xs",ne=()=>{const[t,f]=s.useState(()=>B(window.innerWidth));return s.useEffect(()=>{const o=()=>{f(B(window.innerWidth))};return window.addEventListener("resize",o),()=>window.removeEventListener("resize",o)},[]),{isXs:t==="xs",isSm:t==="sm",isMd:t==="md",isLg:t==="lg",isXl:t==="xl",current:t}},oe=({image:t,bgImageUrl:f,width:o,height:c,row:a,col:l,totalRows:b,totalCols:E,onClickCard:j})=>{const[m,v]=s.useState(!1);s.useEffect(()=>{if(!(t!=null&&t.link))return;const g=new Image;g.src=t.link,g.onload=()=>v(!0),g.onerror=()=>v(!1)},[t]);const k=o/E,p=c/b,h=Number((-(l*k)).toFixed(5)),N=Number((-(a*p)).toFixed(5));return d.jsx("div",{className:"mosaic-cell-wrapper",children:m?d.jsx("div",{className:"mosaic-cell",style:{backgroundImage:`url(${f})`,backgroundSize:`${o}px ${c}px`,backgroundPosition:`${h}px ${N}px`},onClick:()=>j(t),children:d.jsx("div",{className:"mosaic-cell-img",style:{backgroundImage:`url(${t.link})`,backgroundSize:"cover"}})}):null})},se=({image:t,onClose:f,animationType:o="bottom",position:c,setDialog:a})=>{const[l,b]=s.useState(!0),[E,j]=s.useState({}),m=s.useRef();s.useEffect(()=>(document.body.style.overflow="hidden",()=>{document.body.style.overflow=""}),[]),s.useEffect(()=>{if(o==="position"&&m.current&&c){const{offsetWidth:p,offsetHeight:h}=m.current;j({position:"absolute",left:c.x-p/2,top:c.y-h/2})}},[o,c]);const v=()=>{b(!1),setTimeout(()=>{f()},300)},k=l?o==="position"?"zoom-in":`slide-in-${o}`:o==="position"?"zoom-out":`slide-out-${o}`;return d.jsx("div",{className:"dialog-overlay",onClick:v,style:{position:"fixed",top:0,left:0,width:"100vw",height:"100vh",backgroundColor:"rgba(0,0,0,0.6)",display:"flex",justifyContent:"center",alignItems:"center",zIndex:1e3},children:d.jsx("div",{ref:m,className:`dialog-content ${k}`,onClick:p=>p.stopPropagation(),style:{backgroundColor:"#fff",padding:"20px",borderRadius:"8px",maxWidth:"90%",maxHeight:"90%",overflow:"auto",...o==="position"?E:{}},children:typeof a=="function"?a(t):d.jsxs(d.Fragment,{children:[d.jsx("h3",{children:"Image Info"}),d.jsx("img",{src:t.link,alt:"Preview",style:{width:"100%",height:"auto",borderRadius:"4px"}}),d.jsxs("p",{children:["ID: ",t.id]})]})})})},ae=({images:t=[],size:f=14,bgImageUrl:o=null,gridWrapperClassName:c=null,gridWrapperStyle:a={},width:l={xs:350,md:500,lg:700},height:b={xs:350,md:500,lg:700},bgPosition:E="center",setDialog:j=null})=>{const[m,v]=s.useState(f),[k,p]=s.useState(!1),[h,N]=s.useState({}),g=(R=null)=>{R&&N(R),p(!0)},z=()=>p(!1),{isXs:D,isMd:F,isLg:L}=ne();let _=350,w=350;D&&(_=l.xs,w=b.xs),F&&(_=l.md||350,w=b.md||350),L&&(_=l.lg||350,w=b.lg||350),s.useEffect(()=>{f>0&&v(f)},[f]),s.useEffect(()=>{if(m*m<t.length){const O=Math.ceil(Math.sqrt(t.length));O!==m&&v(O)}},[t.length,m]);let M=m,P=m;return d.jsxs("div",{className:`mosaic-grid-wrapper ${c||""}`,style:{gridTemplateColumns:`repeat(${P}, 1fr)`,gridTemplateRows:`repeat(${M}, 1fr)`,backgroundImage:`url(${o})`,backgroundSize:`${_}px ${w}px`,backgroundPosition:"0px 0px",width:`${_}px`,height:`${w}px`,...a},children:[d.jsx("div",{className:"mosaic-grid-wrapper-overlay"}),t.map((R,O)=>d.jsx(oe,{image:R,bgImageUrl:o,width:_,height:w,row:Math.floor(O/P),col:O%P,totalRows:M,totalCols:P,onClickCard:g},R.id)),k&&d.jsx(se,{image:h,onClose:z,animationType:"top",position:"top",setDialog:j})]})};S.MetaMosaic=ae,Object.defineProperty(S,Symbol.toStringTag,{value:"Module"})});

package/dist/meta-mosaic.css

@@ -1 +1 @@
-.mosaic-grid-wrapper{display:grid;aspect-ratio:1;margin:0 auto;background-color:"#f9f9f9";background-attachment:fixed;background-repeat:no-repeat;position:relative}.mosaic-grid-wrapper-overlay{position:absolute;top:0;right:0;bottom:0;left:0;backdrop-filter:grayscale(1);-webkit-backdrop-filter:grayscale(1);background-color:#fff3}.mosaic-cell-wrapper{position:relative;z-index:2;cursor:pointer}.mosaic-cell{background-attachment:fixed;background-repeat:no-repeat;height:100%;width:100%}.mosaic-cell-img{width:100%;opacity:.4;height:100%;mix-blend-mode:multiply;position:relative;z-index:1}@keyframes slide-in-top{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-out-top{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:0}}@keyframes slide-in-right{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slide-out-right{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}@keyframes slide-in-bottom{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-out-bottom{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}@keyframes slide-in-left{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slide-out-left{0%{transform:translate(0);opacity:1}to{transform:translate(-100%);opacity:0}}@keyframes zoom-in{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes zoom-out{0%{transform:scale(1);opacity:1}to{transform:scale(.5);opacity:0}}.slide-in-top{animation:slide-in-top .3s forwards}.slide-out-top{animation:slide-out-top .3s forwards}.slide-in-right{animation:slide-in-right .3s forwards}.slide-out-right{animation:slide-out-right .3s forwards}.slide-in-bottom{animation:slide-in-bottom .3s forwards}.slide-out-bottom{animation:slide-out-bottom .3s forwards}.slide-in-left{animation:slide-in-left .3s forwards}.slide-out-left{animation:slide-out-left .3s forwards}.zoom-in{animation:zoom-in .3s forwards}.zoom-out{animation:zoom-out .3s forwards}.custom-mosaic-grid-wrapper{border-radius:.2em;overflow:hidden}.mosaic-cell-wrapper{transition:transform .4s}.mosaic-cell-wrapper:hover{transform:scale(1.1);z-index:3}.mosaic-cell-img{transition:.3s;transition-delay:.5s}.mosaic-cell-wrapper:hover .mosaic-cell-img{opacity:1;mix-blend-mode:normal;transition-delay:0s;border-radius:.1em;z-index:4}
+.mosaic-grid-wrapper{display:grid;aspect-ratio:1;margin:0 auto;background-color:"#f9f9f9";background-attachment:scroll;background-repeat:no-repeat;position:relative}.mosaic-grid-wrapper-overlay{position:absolute;top:0;right:0;bottom:0;left:0;backdrop-filter:grayscale(1);-webkit-backdrop-filter:grayscale(1);background-color:#fff3}.mosaic-cell-wrapper{position:relative;z-index:2;cursor:pointer}.mosaic-cell{background-attachment:scroll;background-repeat:no-repeat;height:100%;width:100%}.mosaic-cell-img{width:100%;opacity:.4;height:100%;mix-blend-mode:multiply;position:relative;z-index:1}@keyframes slide-in-top{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-out-top{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:0}}@keyframes slide-in-right{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slide-out-right{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}@keyframes slide-in-bottom{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-out-bottom{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}@keyframes slide-in-left{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slide-out-left{0%{transform:translate(0);opacity:1}to{transform:translate(-100%);opacity:0}}@keyframes zoom-in{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes zoom-out{0%{transform:scale(1);opacity:1}to{transform:scale(.5);opacity:0}}.slide-in-top{animation:slide-in-top .3s forwards}.slide-out-top{animation:slide-out-top .3s forwards}.slide-in-right{animation:slide-in-right .3s forwards}.slide-out-right{animation:slide-out-right .3s forwards}.slide-in-bottom{animation:slide-in-bottom .3s forwards}.slide-out-bottom{animation:slide-out-bottom .3s forwards}.slide-in-left{animation:slide-in-left .3s forwards}.slide-out-left{animation:slide-out-left .3s forwards}.zoom-in{animation:zoom-in .3s forwards}.zoom-out{animation:zoom-out .3s forwards}.custom-mosaic-grid-wrapper{border-radius:.2em;overflow:hidden}.mosaic-cell-wrapper{transition:transform .4s}.mosaic-cell-wrapper:hover{transform:scale(1.1);z-index:3}.mosaic-cell-img{transition:.3s;transition-delay:.5s}.mosaic-cell-wrapper:hover .mosaic-cell-img{opacity:1;mix-blend-mode:normal;transition-delay:0s;border-radius:.1em;z-index:4}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meta-mosaic",
-  "version": "1.0.12",
+  "version": "1.1.0",
   "description": "A simple and responsive React component to create interactive image mosaics with metadata popups, background images, and click-to-enlarge dialogs.",
   "homepage": "https://meta-mosaic-showcase.onrender.com",
   "main": "dist/index.umd.js",