@quoreadmin/ui 1.9.2 → 1.10.0

package/dist/index177.js

@@ -1,774 +1,282 @@
-import { ref as Z, getCurrentInstance as tt, onMounted as et, onUnmounted as st, unref as w, nextTick as nt } from "vue";
-function rt() {
-  try {
-    return "constructor" in GestureEvent;
-  } catch {
-    return !1;
-  }
-}
-function j() {
-  return typeof window < "u" && "ontouchstart" in window;
-}
-function V(e) {
-  return "pointerId" in e ? null : e.type === "touchend" ? e.changedTouches : e.targetTouches;
-}
-function Y(e) {
-  return Array.from(V(e)).map((t) => t.identifier);
-}
-function L(e) {
-  const t = "buttons" in e ? e.buttons : 0, { shiftKey: s, altKey: n, metaKey: r, ctrlKey: i } = e;
-  return { buttons: t, shiftKey: s, altKey: n, metaKey: r, ctrlKey: i };
-}
-const it = (e) => e;
-function G(e, t = it) {
-  const s = V(e), { clientX: n, clientY: r } = s ? s[0] : e;
-  return t([n, r]);
-}
-function $() {
-}
-function F(...e) {
-  return e.length === 0 ? $ : e.length === 1 ? e[0] : function() {
-    var t;
-    for (let s of e)
-      t = s.apply(this, arguments) || t;
-    return t;
-  };
-}
-function g(e, t) {
-  if (e === void 0) {
-    if (t === void 0)
-      throw new Error("Must define fallback value if undefined is expected");
-    e = t;
-  }
-  return Array.isArray(e) ? e : [e, e];
-}
-function K(e, ...t) {
-  return typeof e == "function" ? e(...t) : e;
-}
-function _(e) {
-  return {
-    _active: !1,
-    _blocked: !1,
-    _intentional: [!1, !1],
-    _movement: [0, 0],
-    _initial: [0, 0],
-    _bounds: [
-      [-1 / 0, 1 / 0],
-      [-1 / 0, 1 / 0]
-    ],
-    _lastEventType: void 0,
-    _dragStarted: !1,
-    _dragPreventScroll: !1,
-    _dragIsTap: !0,
-    _dragDelayed: !1,
-    event: void 0,
-    intentional: !1,
-    values: [0, 0],
-    velocities: [0, 0],
-    delta: [0, 0],
-    movement: [0, 0],
-    offset: [0, 0],
-    lastOffset: [0, 0],
-    direction: [0, 0],
-    initial: [0, 0],
-    previous: [0, 0],
-    first: !1,
-    last: !1,
-    active: !1,
-    timeStamp: 0,
-    startTime: 0,
-    elapsedTime: 0,
-    cancel: $,
-    canceled: !1,
-    memo: void 0,
-    args: void 0,
-    ...e
-  };
-}
-function P() {
-  const e = {
-    hovering: !1,
-    scrolling: !1,
-    wheeling: !1,
-    dragging: !1,
-    moving: !1,
-    pinching: !1,
-    touches: 0,
-    buttons: 0,
-    down: !1,
-    shiftKey: !1,
-    altKey: !1,
-    metaKey: !1,
-    ctrlKey: !1,
-    locked: !1
-  }, t = _({
-    _pointerId: void 0,
-    axis: void 0,
-    xy: [0, 0],
-    vxvy: [0, 0],
-    velocity: 0,
-    distance: 0,
-    tap: !1,
-    swipe: [0, 0]
-  }), s = _({
-    // @ts-expect-error when used _pointerIds we can assert its type will be [number, number]
-    _pointerIds: [],
-    da: [0, 0],
-    vdva: [0, 0],
-    // @ts-expect-error origin can never be passed as undefined in userland
-    origin: void 0,
-    turns: 0
-  }), n = _({
-    axis: void 0,
-    xy: [0, 0],
-    vxvy: [0, 0],
-    velocity: 0,
-    distance: 0
-  }), r = _({
-    axis: void 0,
-    xy: [0, 0],
-    vxvy: [0, 0],
-    velocity: 0,
-    distance: 0
-  }), i = _({
-    axis: void 0,
-    xy: [0, 0],
-    vxvy: [0, 0],
-    velocity: 0,
-    distance: 0
-  });
-  return { shared: e, drag: t, pinch: s, wheel: n, move: r, scroll: i };
-}
-var ot = Object.defineProperty, at = (e, t, s) => t in e ? ot(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s, h = (e, t, s) => (at(e, typeof t != "symbol" ? t + "" : t, s), s);
-class ct {
-  constructor(t) {
-    this.classes = t, h(this, "nativeRefs"), h(this, "config"), h(this, "handlers"), h(this, "state"), h(this, "timeouts"), h(this, "domListeners"), h(this, "windowListeners"), h(this, "pointerIds", /* @__PURE__ */ new Set()), h(this, "touchIds", /* @__PURE__ */ new Set()), h(this, "supportsTouchEvents", j()), h(this, "supportsGestureEvents", rt()), h(this, "bind", (...s) => {
-      const n = {};
-      for (let r of this.classes)
-        new r(this, s).addBindings(n);
-      for (let r in this.nativeRefs)
-        p(
-          n,
-          r,
-          (i) => this.nativeRefs[r]({ ...this.state.shared, event: i, args: s })
-        );
-      return this.config.domTarget ? pt(this, n) : gt(this, n);
-    }), h(this, "clean", () => {
-      const { eventOptions: s, domTarget: n } = this.config, r = w(n);
-      r && b(r, B(this.domListeners), s), Object.values(this.timeouts).forEach(clearTimeout), ft(this);
-    }), h(this, "reset", () => {
-      this.state = P();
-    }), this.classes = t, this.state = P(), this.timeouts = {}, this.domListeners = [], this.windowListeners = {};
-  }
-}
-function lt(e, t) {
-  "pointerId" in t ? e.pointerIds.add(t.pointerId) : e.touchIds = new Set(Y(t));
-}
-function ut(e, t) {
-  "pointerId" in t ? e.pointerIds.delete(t.pointerId) : Y(t).forEach((s) => e.touchIds.delete(s));
-}
-function ft(e) {
-  const {
-    config: { window: t, eventOptions: s },
-    windowListeners: n
-  } = e, r = w(t);
-  if (r) {
-    for (let i in n) {
-      const a = n[i];
-      b(r, a, s);
-    }
-    e.windowListeners = {};
-  }
-}
-function ht({ config: e, windowListeners: t }, s, n = e.eventOptions) {
-  const r = w(e.window);
-  r && (b(r, t[s], n), delete t[s]);
-}
-function dt({ config: e, windowListeners: t }, s, n = [], r = e.eventOptions) {
-  const i = w(e.window);
-  i && (b(i, t[s], r), X(i, t[s] = n, r));
-}
-function pt({ config: e, domListeners: t }, s) {
-  const { eventOptions: n, domTarget: r } = e, i = w(r);
-  if (!i)
-    throw new Error("domTarget must be defined");
-  b(i, B(t), n);
-  for (let [a, o] of Object.entries(s)) {
-    const u = a.slice(2).toLowerCase();
-    t.push([u, F(...o)]);
-  }
-  X(i, t, n);
-}
-function gt({ config: e }, t) {
-  const s = {}, n = e.eventOptions.capture ? "Capture" : "";
-  for (let [r, i] of Object.entries(t)) {
-    const a = Array.isArray(i) ? i : [i], o = r + n;
-    s[o] = F(...a);
-  }
-  return s;
-}
-function B(e = []) {
-  return e.splice(0, e.length);
-}
-function p(e, t, s) {
-  e[t] || (e[t] = []), e[t].push(s);
-}
-function X(e, t = [], s = {}) {
-  if (e)
-    for (let [n, r] of t)
-      e.addEventListener(n, r, s);
-}
-function b(e, t = [], s = {}) {
-  if (e)
-    for (let [n, r] of t)
-      e.removeEventListener(n, r, s);
-}
-function x(e, t) {
-  return e.map((s, n) => s + t[n]);
-}
-function H(e, t) {
-  return e.map((s, n) => s - t[n]);
-}
-function C(e) {
-  return Math.hypot(...e);
-}
-function mt(e, t, s) {
-  const n = C(t), r = n === 0 ? 0 : 1 / n, i = s === 0 ? 0 : 1 / s, a = i * n, o = t.map((c) => i * c), u = t.map((c) => r * c), f = C(e);
-  return { velocities: o, velocity: a, distance: f, direction: u };
-}
-function M(e) {
-  return Math.sign ? Math.sign(e) : +(e > 0) - +(e < 0) || +e;
-}
-function vt(e, t, s) {
-  return Math.max(t, Math.min(e, s));
-}
-function yt(e, t) {
-  return Math.pow(e, t * 5);
-}
-function z(e, t, s) {
-  return t === 0 || Math.abs(t) === 1 / 0 ? yt(e, s) : e * t * s / (t + s * e);
-}
-function R(e, t, s, n = 0.15) {
-  return n === 0 ? vt(e, t, s) : e < t ? -z(t - e, s - t, n) + t : e > s ? +z(e - s, s - t, n) + s : e;
-}
-var _t = Object.defineProperty, wt = (e, t, s) => t in e ? _t(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s, T = (e, t, s) => (wt(e, typeof t != "symbol" ? t + "" : t, s), s);
-const v = /* @__PURE__ */ new Map(), bt = (e) => e;
-class St {
-  /**
-   * Creates an instance of a gesture recognizer.
-   * @param stateKey drag, move, pinch, etc.
-   * @param controller the controller attached to the gesture
-   * @param [args] the args that should be passed to the gesture handler
-   */
-  constructor(t, s = []) {
-    this.controller = t, this.args = s, T(this, "debounced", !0), T(this, "setTimeout", (n, r = 140, ...i) => {
-      clearTimeout(this.controller.timeouts[this.stateKey]), this.controller.timeouts[this.stateKey] = window.setTimeout(
-        n,
-        r,
-        ...i
-      );
-    }), T(this, "clearTimeout", () => {
-      clearTimeout(this.controller.timeouts[this.stateKey]);
-    }), T(this, "fireGestureHandler", (n = !1) => {
-      if (this.state._blocked)
-        return this.debounced || (this.state._active = !1, this.clean()), null;
-      if (!n && !this.state.intentional && !this.config.triggerAllEvents)
-        return null;
-      if (this.state.intentional) {
-        const u = this.state.active, f = this.state._active;
-        this.state.active = f, this.state.first = f && !u, this.state.last = u && !f, this.controller.state.shared[this.ingKey] = f;
+const i = {
+  content: ({ parent: o, props: t }) => ({
+    class: [
+      "flex",
+      {
+        "flex-col": t.fullScreen
+      },
+      {
+        "flex-col": o.props.thumbnailsPosition === "top" || o.props.thumbnailsPosition === "bottom",
+        "flex-row": o.props.thumbnailsPosition === "right" || o.props.thumbnailsPosition === "left"
       }
-      const r = this.controller.pointerIds.size || this.controller.touchIds.size, i = this.controller.state.shared.buttons > 0 || r > 0, a = {
-        ...this.controller.state.shared,
-        ...this.state,
-        ...this.mapStateValues(this.state),
-        // Sets xy or da to the gesture state values
-        locked: !!document.pointerLockElement,
-        touches: r,
-        down: i
-      }, o = this.handler(a);
-      return this.state.memo = o !== void 0 ? o : this.state.memo, a;
-    }), this.controller = t, this.args = s;
-  }
-  // Returns the gesture config
-  get config() {
-    return this.controller.config[this.stateKey];
-  }
-  // Is the gesture enabled
-  get enabled() {
-    return this.controller.config.enabled && this.config.enabled;
-  }
-  // Returns the controller state for a given gesture
-  get state() {
-    return this.controller.state[this.stateKey];
-  }
-  // Returns the gesture handler
-  get handler() {
-    return this.controller.handlers[this.stateKey];
-  }
-  get transform() {
-    return this.config.transform || this.controller.config.transform || bt;
-  }
-  // Convenience method to update the shared state
-  updateSharedState(t) {
-    Object.assign(this.controller.state.shared, t);
-  }
-  // Convenience method to update the gesture state
-  updateGestureState(t) {
-    Object.assign(this.state, t);
-  }
-  /**
-   * Returns state properties depending on the movement and state.
-   *
-   * Should be overriden for custom behavior, doesn't do anything in the implementation
-   * below.
-   */
-  checkIntentionality(t, s) {
-    return { _intentional: t, _blocked: !1 };
-  }
-  /**
-   * Returns basic movement properties for the gesture based on the next values and current state.
-   */
-  getMovement(t) {
-    const { rubberband: s, threshold: n } = this.config, {
-      _bounds: r,
-      _initial: i,
-      _active: a,
-      _intentional: o,
-      lastOffset: u,
-      movement: f
-    } = this.state, c = this.getInternalMovement(t, this.state), S = this.transform(n).map(Math.abs), E = o[0] === !1 ? N(c[0], S[0]) : o[0], D = o[1] === !1 ? N(c[1], S[1]) : o[1], m = this.checkIntentionality([E, D], c);
-    if (m._blocked)
-      return { ...m, _movement: c, delta: [0, 0] };
-    const d = m._intentional, J = c;
-    let y = [
-      d[0] !== !1 ? c[0] - d[0] : 0,
-      d[1] !== !1 ? c[1] - d[1] : 0
-    ];
-    const Q = x(y, u), A = a ? s : [0, 0];
-    return y = W(r, x(y, i), A), {
-      ...m,
-      intentional: d[0] !== !1 || d[1] !== !1,
-      _initial: i,
-      _movement: J,
-      movement: y,
-      values: t,
-      offset: W(r, Q, A),
-      delta: H(y, f)
-    };
-  }
-  // Cleans the gesture. Can be overriden by gestures.
-  clean() {
-    this.clearTimeout();
-  }
-}
-function N(e, t) {
-  return Math.abs(e) >= t ? M(e) * t : !1;
-}
-function W(e, [t, s], [n, r]) {
-  const [[i, a], [o, u]] = e;
-  return [
-    R(t, i, a, n),
-    R(s, o, u, r)
-  ];
-}
-function O({ state: e }, t, s) {
-  const { timeStamp: n, type: r } = t, i = e.values, a = s ? 0 : n - e.startTime;
-  return { _lastEventType: r, event: t, timeStamp: n, elapsedTime: a, previous: i };
-}
-function Tt({ state: e, config: t, stateKey: s, args: n }, r, i) {
-  const a = e.offset, o = i.timeStamp, { initial: u, bounds: f } = t, c = {
-    ...P()[s],
-    _active: !0,
-    args: n,
-    values: r,
-    initial: r,
-    offset: a,
-    lastOffset: a,
-    startTime: o
-  };
-  return {
-    ...c,
-    _initial: K(u, c),
-    _bounds: K(f, c)
-  };
-}
-class It extends St {
-  /**
-   * Returns the real movement (without taking intentionality into account)
-   */
-  getInternalMovement(t, s) {
-    return H(t, s.initial);
-  }
-  /**
-   * In coordinates-based gesture, this function will detect the first intentional axis,
-   * lock the gesture axis if lockDirection is specified in the config, block the gesture
-   * if the first intentional axis doesn't match the specified axis in config.
-   */
-  checkIntentionality(t, s) {
-    if (t[0] === !1 && t[1] === !1)
-      return { _intentional: t, axis: this.state.axis };
-    const [n, r] = s.map(Math.abs), i = this.state.axis || (n > r ? "x" : n < r ? "y" : void 0);
-    return !this.config.axis && !this.config.lockDirection ? { _intentional: t, _blocked: !1, axis: i } : i ? this.config.axis && i !== this.config.axis ? { _intentional: t, _blocked: !0, axis: i } : (t[i === "x" ? 1 : 0] = !1, { _intentional: t, _blocked: !1, axis: i }) : { _intentional: [!1, !1], _blocked: !1, axis: i };
-  }
-  getKinematics(t, s) {
-    const n = this.getMovement(t);
-    if (!n._blocked) {
-      const r = s.timeStamp - this.state.timeStamp;
-      Object.assign(
-        n,
-        mt(n.movement, n.delta, r)
-      );
-    }
-    return n;
-  }
-  mapStateValues(t) {
-    return { xy: t.values, vxvy: t.velocities };
-  }
-}
-var Et = Object.defineProperty, Dt = (e, t, s) => t in e ? Et(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s, l = (e, t, s) => (Dt(e, typeof t != "symbol" ? t + "" : t, s), s);
-const Ot = 3;
-function U(e) {
-  "persist" in e && typeof e.persist == "function" && e.persist();
-}
-class Pt extends It {
-  constructor() {
-    super(...arguments), l(this, "ingKey", "dragging"), l(this, "stateKey", "drag"), l(this, "setPointerCapture", (t) => {
-      if (this.config.useTouch || document.pointerLockElement)
-        return;
-      const { target: s, pointerId: n } = t;
-      s && "setPointerCapture" in s && s.setPointerCapture(n), this.updateGestureState({
-        _dragTarget: s,
-        _dragPointerId: n
-      });
-    }), l(this, "releasePointerCapture", () => {
-      if (this.config.useTouch || document.pointerLockElement)
-        return;
-      const { _dragTarget: t, _dragPointerId: s } = this.state;
-      if (s && t && "releasePointerCapture" in t && (!("hasPointerCapture" in t) || t.hasPointerCapture(s)))
-        try {
-          t.releasePointerCapture(s);
-        } catch {
-        }
-    }), l(this, "preventScroll", (t) => {
-      this.state._dragPreventScroll && t.cancelable && t.preventDefault();
-    }), l(this, "getEventId", (t) => this.config.useTouch ? t.changedTouches[0].identifier : t.pointerId), l(this, "isValidEvent", (t) => this.state._pointerId === this.getEventId(t)), l(this, "shouldPreventWindowScrollY", this.config.preventWindowScrollY && this.controller.supportsTouchEvents), l(this, "setUpWindowScrollDetection", (t) => {
-      U(t), dt(
-        this.controller,
-        this.stateKey,
-        [
-          ["touchmove", this.preventScroll],
-          ["touchend", this.clean.bind(this)],
-          ["touchcancel", this.clean.bind(this)]
-        ],
-        { passive: !1 }
-      ), this.setTimeout(this.startDrag.bind(this), 250, t);
-    }), l(this, "setUpDelayedDragTrigger", (t) => {
-      this.state._dragDelayed = !0, U(t), this.setTimeout(this.startDrag.bind(this), this.config.delay, t);
-    }), l(this, "setStartState", (t) => {
-      const s = G(t, this.transform);
-      this.updateSharedState(L(t)), this.updateGestureState({
-        ...Tt(this, s, t),
-        ...O(this, t, !0),
-        _pointerId: this.getEventId(t)
-        // setting pointerId locks the gesture to this specific event
-      }), this.updateGestureState(this.getMovement(s));
-    }), l(this, "onDragStart", (t) => {
-      lt(this.controller, t), !(!this.enabled || this.state._active) && (this.setStartState(t), this.setPointerCapture(t), this.shouldPreventWindowScrollY ? this.setUpWindowScrollDetection(t) : this.config.delay > 0 ? this.setUpDelayedDragTrigger(t) : this.startDrag(t, !0));
-    }), l(this, "onDragChange", (t) => {
-      if (
-        // if the gesture was canceled or
-        this.state.canceled || // if onDragStart wasn't fired or
-        !this.state._active || // if the event pointerId doesn't match the one that initiated the drag
-        !this.isValidEvent(t) || // if the event has the same timestamp as the previous event
-        // note that checking type equality is ONLY for tests ¯\_(ツ)_/¯
-        this.state._lastEventType === t.type && t.timeStamp === this.state.timeStamp
-      )
-        return;
-      let s;
-      if (document.pointerLockElement) {
-        const { movementX: u, movementY: f } = t;
-        s = x(this.transform([u, f]), this.state.values);
-      } else
-        s = G(t, this.transform);
-      const n = this.getKinematics(s, t);
-      if (!this.state._dragStarted) {
-        if (this.state._dragDelayed) {
-          this.startDrag(t);
-          return;
-        }
-        if (this.shouldPreventWindowScrollY)
-          if (!this.state._dragPreventScroll && n.axis)
-            if (n.axis === "x")
-              this.startDrag(t);
-            else {
-              this.state._active = !1;
-              return;
-            }
-          else
-            return;
-        else
-          return;
+    ]
+  }),
+  // Contains main photo & previous/next button container "itemcontainer" below
+  itemwrapper: ({ parent: o, props: t }) => ({
+    class: [
+      "group",
+      "flex relative",
+      "mt-14 md:mt-20 min-h-[74vh]",
+      {
+        "grow shrink w-0 justify-center": t.fullScreen
+      },
+      {
+        "flex-col": o.props.indicatorsPosition === "bottom" || o.props.indicatorsPosition === "top",
+        "flex-row items-center": o.props.indicatorsPosition === "left" || o.props.indicatorsPosition === "right"
+      },
+      {
+        "order-2": o.props.thumbnailsPosition === "top" || o.props.thumbnailsPosition === "left",
+        "flex-row": o.props.thumbnailsPosition === "right"
       }
-      const r = L(t);
-      this.updateSharedState(r);
-      const i = O(this, t), a = C(n._movement);
-      let { _dragIsTap: o } = this.state;
-      o && a >= Ot && (o = !1), this.updateGestureState({ ...i, ...n, _dragIsTap: o }), this.fireGestureHandler();
-    }), l(this, "onDragEnd", (t) => {
-      if (ut(this.controller, t), !this.isValidEvent(t) || (this.clean(), !this.state._active))
-        return;
-      this.state._active = !1;
-      const s = this.state._dragIsTap, [n, r] = this.state.velocities, [i, a] = this.state.movement, [o, u] = this.state._intentional, [f, c] = this.config.swipeVelocity, [S, E] = this.config.swipeDistance, D = this.config.swipeDuration, m = {
-        ...O(this, t),
-        ...this.getMovement(this.state.values)
-      }, d = [0, 0];
-      m.elapsedTime < D && (o !== !1 && Math.abs(n) > f && Math.abs(i) > S && (d[0] = M(n)), u !== !1 && Math.abs(r) > c && Math.abs(a) > E && (d[1] = M(r))), this.updateSharedState({ buttons: 0 }), this.updateGestureState({ ...m, tap: s, swipe: d }), this.fireGestureHandler(this.config.filterTaps && s === !0);
-    }), l(this, "clean", () => {
-      super.clean(), this.state._dragStarted = !1, this.releasePointerCapture(), ht(this.controller, this.stateKey);
-    }), l(this, "onCancel", () => {
-      this.state.canceled || (this.updateGestureState({ canceled: !0, _active: !1 }), this.updateSharedState({ buttons: 0 }), nt(this.fireGestureHandler));
-    }), l(this, "onClick", (t) => {
-      this.state._dragIsTap || t.stopPropagation();
-    });
-  }
-  startDrag(t, s = !1) {
-    // if the gesture isn't active (probably means)
-    !this.state._active || // if the drag has already started we should ignore subsequent attempts
-    this.state._dragStarted || (s || this.setStartState(t), this.updateGestureState({
-      _dragStarted: !0,
-      _dragPreventScroll: !0,
-      cancel: this.onCancel
-    }), this.clearTimeout(), this.fireGestureHandler());
-  }
-  addBindings(t) {
-    if (this.config.useTouch ? (p(t, "onTouchStart", this.onDragStart), p(t, "onTouchMove", this.onDragChange), p(t, "onTouchEnd", this.onDragEnd), p(t, "onTouchCancel", this.onDragEnd)) : (p(t, "onPointerDown", this.onDragStart), p(t, "onPointerMove", this.onDragChange), p(t, "onPointerUp", this.onDragEnd), p(t, "onPointerCancel", this.onDragEnd)), this.config.filterTaps) {
-      const s = this.controller.config.eventOptions.capture ? "onClick" : "onClickCapture";
-      p(t, s, this.onClick);
-    }
-  }
-}
-function xt(e, t) {
-  let s, n = [], r, i = !1;
-  function a(...o) {
-    return i && s === this && t(o, n) || (r = e.apply(this, o), i = !0, s = this, n = o), r;
-  }
-  return a;
-}
-function I(e, t) {
-  if (e === t)
-    return !0;
-  if (e && t && typeof e == "object" && typeof t == "object") {
-    if (e.constructor !== t.constructor)
-      return !1;
-    let s, n, r;
-    if (Array.isArray(e)) {
-      if (s = e.length, s !== t.length)
-        return !1;
-      for (n = s; n-- !== 0; )
-        if (!I(e[n], t[n]))
-          return !1;
-      return !0;
-    }
-    let i;
-    if (typeof Map == "function" && e instanceof Map && t instanceof Map) {
-      if (e.size !== t.size)
-        return !1;
-      for (i = e.entries(); !(n = i.next()).done; )
-        if (!t.has(n.value[0]))
-          return !1;
-      for (i = e.entries(); !(n = i.next()).done; )
-        if (!I(n.value[1], t.get(n.value[0])))
-          return !1;
-      return !0;
-    }
-    if (typeof Set == "function" && e instanceof Set && t instanceof Set) {
-      if (e.size !== t.size)
-        return !1;
-      for (i = e.entries(); !(n = i.next()).done; )
-        if (!t.has(n.value[0]))
-          return !1;
-      return !0;
-    }
-    if (e.constructor === RegExp)
-      return e.source === t.source && e.flags === t.flags;
-    if (e.valueOf !== Object.prototype.valueOf)
-      return e.valueOf() === t.valueOf();
-    if (e.toString !== Object.prototype.toString)
-      return e.toString() === t.toString();
-    if (r = Object.keys(e), s = r.length, s !== Object.keys(t).length)
-      return !1;
-    for (n = s; n-- !== 0; )
-      if (!Object.prototype.hasOwnProperty.call(t, r[n]))
-        return !1;
-    if (typeof Element < "u" && e instanceof Element)
-      return !1;
-    for (n = s; n-- !== 0; )
-      if (!(r[n] === "_owner" && e.$$typeof) && !I(e[r[n]], t[r[n]]))
-        return !1;
-    return !0;
-  }
-  return e !== e && t !== t;
-}
-function Ct(e, t) {
-  try {
-    return I(e, t);
-  } catch (s) {
-    if ((s.message || "").match(/stack|recursion/i))
-      return console.warn("react-fast-compare cannot handle circular refs"), !1;
-    throw s;
-  }
-}
-function k(e = {}, t) {
-  const s = {};
-  for (const [n, r] of Object.entries(t))
-    switch (typeof r) {
-      case "function":
-        s[n] = r.call(s, e[n], n, e);
-        break;
-      case "object":
-        s[n] = k(e[n], r);
-        break;
-      case "boolean":
-        r && (s[n] = e[n]);
-        break;
-    }
-  return s;
-}
-const Mt = 180, kt = 0.15, At = 0.5, Lt = 50, Gt = 250, Kt = {
-  threshold(e = 0) {
-    return g(e);
-  },
-  rubberband(e = 0) {
-    switch (e) {
-      case !0:
-        return g(kt);
-      case !1:
-        return g(0);
-      default:
-        return g(e);
-    }
-  },
-  enabled(e = !0) {
-    return e;
-  },
-  triggerAllEvents(e = !1) {
-    return e;
-  },
-  initial(e = 0) {
-    return typeof e == "function" ? e : g(e);
-  },
-  transform: !0
-}, q = {
-  ...Kt,
-  axis: !0,
-  lockDirection(e = !1) {
-    return e;
-  },
-  bounds(e = {}) {
-    if (typeof e == "function")
-      return (i) => q.bounds(e(i));
-    const {
-      left: t = -1 / 0,
-      right: s = 1 / 0,
-      top: n = -1 / 0,
-      bottom: r = 1 / 0
-    } = e;
-    return [
-      [t, s],
-      [n, r]
-    ];
-  }
-}, zt = typeof window < "u" && window.document && window.document.createElement, Rt = {
-  enabled(e = !0) {
-    return e;
-  },
-  domTarget: !0,
-  window(e = zt ? window : void 0) {
-    return e;
+    ]
+  }),
+  // Contains main photo & previous/next buttons
+  itemcontainer: ({ parent: o }) => ({
+    class: [
+      "flex w-full md:w-screen h-full relative grow items-center",
+      {
+        "order-1": o.props.indicatorsPosition === "bottom" || o.props.indicatorsPosition === "right",
+        "order-2": o.props.indicatorsPosition === "top" || o.props.indicatorsPosition === "left"
+      }
+    ]
+  }),
+  // Div that contains main img element
+  item: {
+    class: [
+      // Flex
+      "flex justify-center items-center",
+      // Sizing
+      "h-full w-full",
+      "rounded-lg overflow-auto",
+      // Misc
+      "md:max-w-[592px] mx-auto"
+    ]
   },
-  eventOptions({ passive: e = !0, capture: t = !1 } = {}) {
-    return { passive: e, capture: t };
+  // Contains div that contains thumbnail container "thumbnailcontainer"
+  thumbnailwrapper: ({ parent: o }) => ({
+    class: [
+      // Flex
+      "flex flex-col shrink-0",
+      {
+        "order-1": o.props.thumbnailsPosition === "top" || o.props.thumbnailsPosition === "left"
+      },
+      // Misc
+      "overflow-auto"
+    ]
+  }),
+  thumbnailcontainer: ({ parent: o }) => ({
+    class: [
+      // Flex
+      "flex",
+      // Spacing
+      "p-4",
+      // Colors
+      "bg-transparent",
+      "md:max-w-[592px] mx-auto",
+      {
+        "flex-row": o.props.thumbnailsPosition === "top" || o.props.thumbnailsPosition === "bottom",
+        "flex-col grow": o.props.thumbnailsPosition === "right" || o.props.thumbnailsPosition === "left"
+      }
+    ]
+  }),
+  // Container for the previous thumbnail button
+  previousthumbnailbutton: {
+    class: [
+      // Positioning
+      "self-center relative",
+      // Display & Flexbox
+      "flex shrink-0 justify-center items-center overflow-hidden",
+      // Spacing
+      "m-2 ml-0",
+      // Appearance
+      "bg-transparent text-white w-8 h-8 rounded-full transition duration-200 ease-in-out",
+      // Hover Effects
+      "hover:bg-surface-0/10 hover:text-white",
+      // Focus Effects
+      "focus:outline-none focus:outline-offset-0"
+    ]
   },
-  transform: !0
-}, Nt = {
-  ...q,
-  useTouch(e = !0) {
-    return e && j();
+  // The container for just the thumbnails (not including the previous/next buttons) - contains another div "thumbnailitems"
+  thumbnailitemscontainer: {
+    class: "overflow-hidden w-full md:w-[30rem]"
   },
-  preventWindowScrollY(e = !1) {
-    return e;
+  // The div that contains just the thumbnails
+  thumbnailitems: ({ parent: o }) => ({
+    class: [
+      "flex",
+      {
+        "flex-col h-full": o.props.thumbnailsPosition === "right" || o.props.thumbnailsPosition === "left"
+      }
+    ]
+  }),
+  thumbnailitem: ({ parent: o }) => ({
+    class: [
+      // Flexbox
+      "flex items-center justify-center",
+      "grow shrink-0",
+      {
+        "w-full md:w-[25%]": o.props.thumbnailsPosition === "top" || o.props.thumbnailsPosition === "bottom"
+      },
+      // Misc
+      "overflow-auto",
+      "cursor-pointer",
+      // 'opacity-50',
+      // States
+      "hover:opacity-100",
+      "hover:transition-opacity",
+      "hover:duration-300"
+    ]
+  }),
+  nextthumbnailbutton: {
+    class: [
+      // Positioning
+      "self-center relative",
+      // Display & Flexbox
+      "flex shrink-0 justify-center items-center overflow-hidden",
+      // Spacing
+      "m-2 mr-0",
+      // Appearance
+      "bg-transparent text-white w-8 h-8 rounded-full transition duration-200 ease-in-out",
+      // Hover Effects
+      "hover:bg-surface-0/10 hover:text-white",
+      // Focus Effects
+      "focus:outline-none focus:outline-offset-0"
+    ]
   },
-  threshold(e, t, { filterTaps: s = !1, lockDirection: n = !1, axis: r = void 0 }) {
-    const i = g(
-      e,
-      s ? 3 : n || r ? 1 : 0
-    );
-    return this.filterTaps = s, i;
+  indicators: ({ parent: o }) => ({
+    class: [
+      // flex
+      "flex items-center justify-center",
+      // Spacing
+      "p-4",
+      // Indicators Position
+      {
+        "order-2": o.props.indicatorsPosition == "bottom",
+        "order-1": o.props.indicatorsPosition == "top",
+        "order-1 flex-col": o.props.indicatorsPosition == "left",
+        "flex-col order-2": o.props.indicatorsPosition == "right"
+      },
+      {
+        "absolute z-10 bg-black/50": o.props.showIndicatorsOnItem
+      },
+      {
+        "bottom-0 left-0 w-full items-start": o.props.indicatorsPosition == "bottom" && o.props.showIndicatorsOnItem,
+        "top-0 left-0 w-full items-start": o.props.indicatorsPosition == "top" && o.props.showIndicatorsOnItem,
+        "left-0 top-0 h-full items-start": o.props.indicatorsPosition == "left" && o.props.showIndicatorsOnItem,
+        "right-0 top-0 h-full items-start": o.props.indicatorsPosition == "right" && o.props.showIndicatorsOnItem
+      }
+    ]
+  }),
+  indicator: ({ parent: o }) => ({
+    class: [
+      {
+        "mr-2": o.props.indicatorsPosition == "bottom" || o.props.indicatorsPosition == "top",
+        "mb-2": o.props.indicatorsPosition == "left" || o.props.indicatorsPosition == "right"
+      }
+    ]
+  }),
+  indicatorbutton: ({ context: o }) => ({
+    class: [
+      // Size
+      "w-2 h-2",
+      // Appearance
+      "rounded-full transition duration-200",
+      // Focus Effects
+      "focus:outline-none focus:outline-offset-0",
+      // Conditional Appearance: Not Highlighted
+      {
+        "bg-inkwell-30 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600": !o.highlighted
+      },
+      // Conditional Appearance: Highlighted
+      { "bg-white hover:bg-primary-600": o.highlighted }
+    ]
+  }),
+  mask: {
+    class: [
+      "fixed top-0 left-0 w-full h-full",
+      "flex items-center justify-center",
+      "bg-inkwell-40/95",
+      "image-overlay"
+    ]
   },
-  swipeVelocity(e = At) {
-    return g(e);
+  closebutton: {
+    class: [
+      // Positioning
+      "!absolute top-0 right-0 z-[1001]",
+      // Display & Flexbox
+      "flex justify-center items-center overflow-hidden",
+      // Spacing
+      "m-2",
+      // Appearance
+      "text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out",
+      // Focus Effects
+      "focus:outline-none"
+    ]
   },
-  swipeDistance(e = Lt) {
-    return g(e);
+  closeicon: {
+    class: "w-6 h-6"
   },
-  swipeDuration(e = Gt) {
-    return e;
+  previousitembutton: ({ parent: o }) => ({
+    class: [
+      // Display & Flexbox
+      "inline-flex justify-center items-center overflow-hidden",
+      // Appearance
+      "bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md",
+      {
+        "opacity-0 group-hover:opacity-100": o.props.showItemNavigatorsOnHover
+      },
+      // Spacing
+      "mx-2",
+      // Positioning
+      "top-1/2 mt-[-0.5rem] left-0",
+      {
+        "!absolute": o.props.showItemNavigators,
+        "!fixed": !o.props.showItemNavigators
+      },
+      // Hover Effect
+      "hover:bg-surface-0/10 hover:text-white",
+      // Focus Effects
+      "focus:outline-none focus:outline-offset-0"
+    ]
+  }),
+  nextitembutton: ({ parent: o }) => ({
+    class: [
+      // Display & Flexbox
+      "inline-flex justify-center items-center overflow-hidden",
+      // Appearance
+      "bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md",
+      {
+        "opacity-0 group-hover:opacity-100": o.props.showItemNavigatorsOnHover
+      },
+      // Spacing
+      "mx-2",
+      // Positioning
+      "top-1/2 mt-[-0.5rem] right-0",
+      {
+        "!absolute": o.props.showItemNavigators,
+        "!fixed": !o.props.showItemNavigators
+      },
+      // Hover Effect
+      "hover:bg-surface-0/10 hover:text-white",
+      // Focus Effects
+      "focus:outline-none focus:outline-offset-0"
+    ]
+  }),
+  caption: {
+    class: [
+      // Positioning
+      "absolute bottom-0 left-0 w-full",
+      // Appearance
+      "bg-black/50 text-white p-4"
+    ]
   },
-  delay(e = 0) {
-    switch (e) {
-      case !0:
-        return Mt;
-      case !1:
-        return 0;
-      default:
-        return e;
-    }
+  transition: {
+    enterFromClass: "opacity-0 scale-75",
+    enterActiveClass: "transition-all duration-150 ease-in-out",
+    leaveActiveClass: "transition-all duration-150 ease-in",
+    leaveToClass: "opacity-0 scale-75"
   }
 };
-function Wt(e) {
-  return k(
-    e,
-    Rt
-  );
-}
-function Ut(e = {}) {
-  return k(
-    e,
-    Nt
-  );
-}
-function jt({
-  domTarget: e,
-  eventOptions: t,
-  window: s,
-  enabled: n,
-  ...r
-}) {
-  const i = Wt({
-    domTarget: e,
-    eventOptions: t,
-    window: s,
-    enabled: n
-  });
-  return i.drag = Ut(r), i;
-}
-function Vt(e, t, s = {}) {
-  const n = Yt(e), r = new ct(n);
-  return r.config = t, r.handlers = e, r.nativeRefs = s, tt() && !t.manual && (et(r.bind), st(r.clean)), r;
-}
-function Yt(e) {
-  const t = /* @__PURE__ */ new Set();
-  return e.drag && t.add(v.get("drag")), e.wheel && t.add(v.get("wheel")), e.scroll && t.add(v.get("scroll")), e.move && t.add(v.get("move")), e.pinch && t.add(v.get("pinch")), e.hover && t.add(v.get("hover")), t;
-}
-function Ft(e, t = {}) {
-  v.set("drag", Pt);
-  const s = Z();
-  return s.value || (s.value = xt(jt, Ct)), Vt({ drag: e }, s.value(t));
-}
 export {
-  x as addV,
-  R as rubberbandIfOutOfBounds,
-  H as subV,
-  Ft as useDrag
+  i as default
 };