@quoreadmin/ui 1.9.3 → 1.10.1

package/dist/index178.js

@@ -1,1310 +1,282 @@
-import st from "./index209.js";
-import { reactive as V, watch as h, ref as g, defineComponent as Z, useSlots as H, h as K, Fragment as at, inject as ct, computed as A, toRaw as lt, unref as x } from "vue";
-import { unrefElement as ut, useIntersectionObserver as ft, useEventListener as m } from "./index210.js";
-import { tryOnUnmounted as pt, isObject as yt } from "./index211.js";
-import D, { getFrameData as dt } from "./index212.js";
-import { complex as $ } from "./index213.js";
-import { inertia as mt } from "./index214.js";
-import { animate as bt } from "./index215.js";
-import { velocityPerSecond as ht } from "./index216.js";
-import { number as vt, alpha as C, scale as j } from "./index217.js";
-import { filter as P } from "./index218.js";
-import { px as c, progressPercentage as F, degrees as O } from "./index219.js";
-import { color as b } from "./index220.js";
-import { cubicBezier as gt } from "./index221.js";
-import { bounceOut as Ot, bounceInOut as Tt, bounceIn as At, anticipate as xt, backOut as jt, backInOut as Vt, backIn as St, circOut as Ct, circInOut as Et, circIn as Nt, easeOut as Pt, easeInOut as _t, easeIn as wt, linear as Rt } from "./index222.js";
-const R = {};
-class Mt {
-  subscriptions = /* @__PURE__ */ new Set();
-  add(e) {
-    return this.subscriptions.add(e), () => this.subscriptions.delete(e);
-  }
-  notify(e, i, r) {
-    if (this.subscriptions.size)
-      for (const n of this.subscriptions) n(e, i, r);
-  }
-  clear() {
-    this.subscriptions.clear();
-  }
-}
-function z(t) {
-  return !Number.isNaN(Number.parseFloat(t));
-}
-class Lt {
-  /**
-   * The current state of the `MotionValue`.
-   */
-  current;
-  /**
-   * The previous state of the `MotionValue`.
-   */
-  prev;
-  /**
-   * Duration, in milliseconds, since last updating frame.
-   */
-  timeDelta = 0;
-  /**
-   * Timestamp of the last time this `MotionValue` was updated.
-   */
-  lastUpdated = 0;
-  /**
-   * Functions to notify when the `MotionValue` updates.
-   */
-  updateSubscribers = new Mt();
-  /**
-   * A reference to the currently-controlling Popmotion animation
-   */
-  stopAnimation;
-  /**
-   * Tracks whether this value can output a velocity.
-   */
-  canTrackVelocity = !1;
-  /**
-   * init - The initiating value
-   * config - Optional configuration options
-   */
-  constructor(e) {
-    this.prev = this.current = e, this.canTrackVelocity = z(this.current);
-  }
-  /**
-   * Adds a function that will be notified when the `MotionValue` is updated.
-   *
-   * It returns a function that, when called, will cancel the subscription.
-   */
-  onChange(e) {
-    return this.updateSubscribers.add(e);
-  }
-  clearListeners() {
-    this.updateSubscribers.clear();
-  }
-  /**
-   * Sets the state of the `MotionValue`.
-   *
-   * @param v
-   * @param render
-   */
-  set(e) {
-    this.updateAndNotify(e);
-  }
-  /**
-   * Update and notify `MotionValue` subscribers.
-   *
-   * @param v
-   * @param render
-   */
-  updateAndNotify = (e) => {
-    this.prev = this.current, this.current = e;
-    const { delta: i, timestamp: r } = dt();
-    this.lastUpdated !== r && (this.timeDelta = i, this.lastUpdated = r), D.postRender(this.scheduleVelocityCheck), this.updateSubscribers.notify(this.current);
-  };
-  /**
-   * Returns the latest state of `MotionValue`
-   *
-   * @returns - The latest state of `MotionValue`
-   */
-  get() {
-    return this.current;
-  }
-  /**
-   * Get previous value.
-   *
-   * @returns - The previous latest state of `MotionValue`
-   */
-  getPrevious() {
-    return this.prev;
-  }
-  /**
-   * Returns the latest velocity of `MotionValue`
-   *
-   * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
-   */
-  getVelocity() {
-    return this.canTrackVelocity ? ht(Number.parseFloat(this.current) - Number.parseFloat(this.prev), this.timeDelta) : 0;
-  }
-  /**
-   * Schedule a velocity check for the next frame.
-   */
-  scheduleVelocityCheck = () => D.postRender(this.velocityCheck);
-  /**
-   * Updates `prev` with `current` if the value hasn't been updated this frame.
-   * This ensures velocity calculations return `0`.
-   */
-  velocityCheck = ({ timestamp: e }) => {
-    this.canTrackVelocity || (this.canTrackVelocity = z(this.current)), e !== this.lastUpdated && (this.prev = this.current);
-  };
-  /**
-   * Registers a new animation to control this `MotionValue`. Only one
-   * animation can drive a `MotionValue` at one time.
-   */
-  start(e) {
-    return this.stop(), new Promise((i) => {
-      const { stop: r } = e(i);
-      this.stopAnimation = r;
-    }).then(() => this.clearAnimation());
-  }
-  /**
-   * Stop the currently active animation.
-   */
-  stop() {
-    this.stopAnimation && this.stopAnimation(), this.clearAnimation();
-  }
-  /**
-   * Returns `true` if this value is currently animating.
-   */
-  isAnimating() {
-    return !!this.stopAnimation;
-  }
-  /**
-   * Clear the current animation reference.
-   */
-  clearAnimation() {
-    this.stopAnimation = null;
-  }
-  /**
-   * Destroy and clean up subscribers to this `MotionValue`.
-   */
-  destroy() {
-    this.updateSubscribers.clear(), this.stop();
-  }
-}
-function kt(t) {
-  return new Lt(t);
-}
-const { isArray: qt } = Array;
-function Bt() {
-  const t = g({}), e = (r) => {
-    const n = (o) => {
-      t.value[o] && (t.value[o].stop(), t.value[o].destroy(), delete t.value[o]);
-    };
-    r ? qt(r) ? r.forEach(n) : n(r) : Object.keys(t.value).forEach(n);
-  }, i = (r, n, o) => {
-    if (t.value[r])
-      return t.value[r];
-    const s = kt(n);
-    return s.onChange((a) => o[r] = a), t.value[r] = s, s;
-  };
-  return pt(e), {
-    motionValues: t,
-    get: i,
-    stop: e
-  };
-}
-function Dt(t) {
-  return Array.isArray(t);
-}
-function T() {
-  return {
-    type: "spring",
-    stiffness: 500,
-    damping: 25,
-    restDelta: 0.5,
-    restSpeed: 10
-  };
-}
-function E(t) {
-  return {
-    type: "spring",
-    stiffness: 550,
-    damping: t === 0 ? 2 * Math.sqrt(550) : 30,
-    restDelta: 0.01,
-    restSpeed: 10
-  };
-}
-function Ft(t) {
-  return {
-    type: "spring",
-    stiffness: 550,
-    damping: t === 0 ? 100 : 30,
-    restDelta: 0.01,
-    restSpeed: 10
-  };
-}
-function N() {
-  return {
-    type: "keyframes",
-    ease: "linear",
-    duration: 300
-  };
-}
-function zt(t) {
-  return {
-    type: "keyframes",
-    duration: 800,
-    values: t
-  };
-}
-const I = {
-  default: Ft,
-  x: T,
-  y: T,
-  z: T,
-  rotate: T,
-  rotateX: T,
-  rotateY: T,
-  rotateZ: T,
-  scaleX: E,
-  scaleY: E,
-  scale: E,
-  backgroundColor: N,
-  color: N,
-  opacity: N
-};
-function G(t, e) {
-  let i;
-  return Dt(e) ? i = zt : i = I[t] || I.default, { to: e, ...i(e) };
-}
-const U = {
-  ...vt,
-  transform: Math.round
-}, J = {
-  // Color props
-  color: b,
-  backgroundColor: b,
-  outlineColor: b,
-  fill: b,
-  stroke: b,
-  // Border props
-  borderColor: b,
-  borderTopColor: b,
-  borderRightColor: b,
-  borderBottomColor: b,
-  borderLeftColor: b,
-  borderWidth: c,
-  borderTopWidth: c,
-  borderRightWidth: c,
-  borderBottomWidth: c,
-  borderLeftWidth: c,
-  borderRadius: c,
-  radius: c,
-  borderTopLeftRadius: c,
-  borderTopRightRadius: c,
-  borderBottomRightRadius: c,
-  borderBottomLeftRadius: c,
-  // Positioning props
-  width: c,
-  maxWidth: c,
-  height: c,
-  maxHeight: c,
-  size: c,
-  top: c,
-  right: c,
-  bottom: c,
-  left: c,
-  // Spacing props
-  padding: c,
-  paddingTop: c,
-  paddingRight: c,
-  paddingBottom: c,
-  paddingLeft: c,
-  margin: c,
-  marginTop: c,
-  marginRight: c,
-  marginBottom: c,
-  marginLeft: c,
-  // Transform props
-  rotate: O,
-  rotateX: O,
-  rotateY: O,
-  rotateZ: O,
-  scale: j,
-  scaleX: j,
-  scaleY: j,
-  scaleZ: j,
-  skew: O,
-  skewX: O,
-  skewY: O,
-  distance: c,
-  translateX: c,
-  translateY: c,
-  translateZ: c,
-  x: c,
-  y: c,
-  z: c,
-  perspective: c,
-  transformPerspective: c,
-  opacity: C,
-  originX: F,
-  originY: F,
-  originZ: c,
-  // Misc
-  zIndex: U,
-  filter: P,
-  WebkitFilter: P,
-  // SVG
-  fillOpacity: C,
-  strokeOpacity: C,
-  numOctaves: U
-}, M = (t) => J[t];
-function _(t, e) {
-  return e && typeof t == "number" && e.transform ? e.transform(t) : t;
-}
-function It(t, e) {
-  let i = M(t);
-  return i !== P && (i = $), i.getAnimatableNone ? i.getAnimatableNone(e) : void 0;
-}
-const Ut = {
-  linear: Rt,
-  easeIn: wt,
-  easeInOut: _t,
-  easeOut: Pt,
-  circIn: Nt,
-  circInOut: Et,
-  circOut: Ct,
-  backIn: St,
-  backInOut: Vt,
-  backOut: jt,
-  anticipate: xt,
-  bounceIn: At,
-  bounceInOut: Tt,
-  bounceOut: Ot
-};
-function W(t) {
-  if (Array.isArray(t)) {
-    const [e, i, r, n] = t;
-    return gt(e, i, r, n);
-  } else if (typeof t == "string")
-    return Ut[t];
-  return t;
-}
-function Wt(t) {
-  return Array.isArray(t) && typeof t[0] != "number";
-}
-function X(t, e) {
-  return t === "zIndex" ? !1 : !!(typeof e == "number" || Array.isArray(e) || typeof e == "string" && $.test(e) && !e.startsWith("url("));
-}
-function Xt(t) {
-  return Array.isArray(t.to) && t.to[0] === null && (t.to = [...t.to], t.to[0] = t.from), t;
-}
-function Yt({ ease: t, times: e, delay: i, ...r }) {
-  const n = { ...r };
-  return e && (n.offset = e), t && (n.ease = Wt(t) ? t.map(W) : W(t)), i && (n.elapsed = -i), n;
-}
-function Zt(t, e, i) {
-  return Array.isArray(e.to) && (t.duration || (t.duration = 800)), Xt(e), Ht(t) || (t = {
-    ...t,
-    ...G(i, e.to)
-  }), {
-    ...e,
-    ...Yt(t)
-  };
-}
-function Ht({ delay: t, repeat: e, repeatType: i, repeatDelay: r, from: n, ...o }) {
-  return !!Object.keys(o).length;
-}
-function Kt(t, e) {
-  return t[e] || t.default || t;
-}
-function $t(t, e, i, r, n) {
-  const o = Kt(r, t);
-  let s = o.from === null || o.from === void 0 ? e.get() : o.from;
-  const a = X(t, i);
-  s === "none" && a && typeof i == "string" && (s = It(t, i));
-  const l = X(t, s);
-  function p(f) {
-    const y = {
-      from: s,
-      to: i,
-      velocity: r.velocity ? r.velocity : e.getVelocity(),
-      onUpdate: (d) => e.set(d)
-    };
-    return o.type === "inertia" || o.type === "decay" ? mt({ ...y, ...o }) : bt({
-      ...Zt(o, y, t),
-      onUpdate: (d) => {
-        y.onUpdate(d), o.onUpdate && o.onUpdate(d);
+const i = {
+  content: ({ parent: o, props: t }) => ({
+    class: [
+      "flex",
+      {
+        "flex-col": t.fullScreen
       },
-      onComplete: () => {
-        n && n(), f && f();
+      {
+        "flex-col": o.props.thumbnailsPosition === "top" || o.props.thumbnailsPosition === "bottom",
+        "flex-row": o.props.thumbnailsPosition === "right" || o.props.thumbnailsPosition === "left"
       }
-    });
-  }
-  function u(f) {
-    return e.set(i), n && n(), f && f(), { stop: () => {
-    } };
-  }
-  return !l || !a || o.type === !1 ? u : p;
-}
-function Gt() {
-  const { motionValues: t, stop: e, get: i } = Bt();
-  return { motionValues: t, stop: e, push: (n, o, s, a = {}, l) => {
-    const p = s[n], u = i(n, p, s);
-    if (a && a.immediate) {
-      u.set(o);
-      return;
-    }
-    const f = $t(n, u, o, a, l);
-    u.start(f);
-  } };
-}
-function Jt(t, e = {}, { motionValues: i, push: r, stop: n } = Gt()) {
-  const o = x(e), s = g(!1);
-  h(
-    i,
-    (f) => {
-      s.value = Object.values(f).filter((y) => y.isAnimating()).length > 0;
-    },
-    {
-      immediate: !0,
-      deep: !0
-    }
-  );
-  const a = (f) => {
-    if (!o || !o[f])
-      throw new Error(`The variant ${f} does not exist.`);
-    return o[f];
-  }, l = (f) => {
-    typeof f == "string" && (f = a(f));
-    const y = Object.entries(f).map(([v, S]) => {
-      if (v !== "transition")
-        return new Promise(
-          (ot) => (
-            // @ts-expect-error - Fix errors later for typescript 5
-            r(v, S, t, f.transition || G(v, f[v]), ot)
-          )
-        );
-    }).filter(Boolean);
-    async function d() {
-      await Promise.all(y), f.transition?.onComplete?.();
-    }
-    return Promise.all([d()]);
-  };
-  return {
-    isAnimating: s,
-    apply: l,
-    set: (f) => {
-      const y = yt(f) ? f : a(f);
-      Object.entries(y).forEach(([d, v]) => {
-        d !== "transition" && r(d, v, t, {
-          immediate: !0
-        });
-      });
-    },
-    leave: async (f) => {
-      let y;
-      if (o && (o.leave && (y = o.leave), !o.leave && o.initial && (y = o.initial)), !y) {
-        f();
-        return;
-      }
-      await l(y), f();
-    },
-    stop: n
-  };
-}
-const L = typeof window < "u", Qt = () => L && (window.onpointerdown === null || R?.TEST), te = () => L && (window.ontouchstart === null || R?.TEST), ee = () => L && (window.onmousedown === null || R?.TEST);
-function ie({ target: t, state: e, variants: i, apply: r }) {
-  const n = x(i), o = g(!1), s = g(!1), a = g(!1), l = A(() => {
-    let u = [...Object.keys(e.value || {})];
-    return n && (n.hovered && (u = [...u, ...Object.keys(n.hovered)]), n.tapped && (u = [...u, ...Object.keys(n.tapped)]), n.focused && (u = [...u, ...Object.keys(n.focused)])), u;
-  }), p = A(() => {
-    const u = {};
-    Object.assign(u, e.value), o.value && n.hovered && Object.assign(u, n.hovered), s.value && n.tapped && Object.assign(u, n.tapped), a.value && n.focused && Object.assign(u, n.focused);
-    for (const f in u)
-      l.value.includes(f) || delete u[f];
-    return u;
-  });
-  n.hovered && (m(t, "mouseenter", () => o.value = !0), m(t, "mouseleave", () => {
-    o.value = !1, s.value = !1;
-  })), n.tapped && (ee() && (m(t, "mousedown", () => s.value = !0), m(t, "mouseup", () => s.value = !1)), Qt() && (m(t, "pointerdown", () => s.value = !0), m(t, "pointerup", () => s.value = !1)), te() && (m(t, "touchstart", () => s.value = !0), m(t, "touchend", () => s.value = !1))), n.focused && (m(t, "focus", () => a.value = !0), m(t, "blur", () => a.value = !1)), h([o, s, a], () => {
-    r(p.value);
-  });
-}
-function re({ set: t, target: e, variants: i, variant: r }) {
-  const n = x(i);
-  h(
-    () => e,
-    () => {
-      n && (n.initial && (t("initial"), r.value = "initial"), n.enter && (r.value = "enter"));
-    },
-    {
-      immediate: !0,
-      flush: "pre"
-    }
-  );
-}
-function ne({ state: t, apply: e }) {
-  h(
-    t,
-    (i) => {
-      i && e(i);
-    },
-    {
-      immediate: !0
-    }
-  );
-}
-function oe({ target: t, variants: e, variant: i }) {
-  const r = x(e);
-  r && (r.visible || r.visibleOnce) && ft(t, ([{ isIntersecting: n }]) => {
-    r.visible ? n ? i.value = "visible" : i.value = "initial" : r.visibleOnce && (n && i.value !== "visibleOnce" ? i.value = "visibleOnce" : i.value || (i.value = "initial"));
-  });
-}
-function se(t, e = {
-  syncVariants: !0,
-  lifeCycleHooks: !0,
-  visibilityHooks: !0,
-  eventListeners: !0
-}) {
-  e.lifeCycleHooks && re(t), e.syncVariants && ne(t), e.visibilityHooks && oe(t), e.eventListeners && ie(t);
-}
-function Q(t = {}) {
-  const e = V({
-    ...t
-  }), i = g({});
-  return h(
-    e,
-    () => {
-      const r = {};
-      for (const [n, o] of Object.entries(e)) {
-        const s = M(n), a = _(o, s);
-        r[n] = a;
+    ]
+  }),
+  // 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"
       }
-      i.value = r;
-    },
-    {
-      immediate: !0,
-      deep: !0
-    }
-  ), {
-    state: e,
-    style: i
-  };
-}
-function k(t, e) {
-  h(
-    () => ut(t),
-    (i) => {
-      i && e(i);
-    },
-    {
-      immediate: !0
-    }
-  );
-}
-const ae = {
-  x: "translateX",
-  y: "translateY",
-  z: "translateZ"
-};
-function tt(t = {}, e = !0) {
-  const i = V({ ...t }), r = g("");
-  return h(
-    i,
-    (n) => {
-      let o = "", s = !1;
-      if (e && (n.x || n.y || n.z)) {
-        const a = [n.x || 0, n.y || 0, n.z || 0].map((l) => _(l, c)).join(",");
-        o += `translate3d(${a}) `, s = !0;
+    ]
+  }),
+  // 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"
       }
-      for (const [a, l] of Object.entries(n)) {
-        if (e && (a === "x" || a === "y" || a === "z"))
-          continue;
-        const p = M(a), u = _(l, p);
-        o += `${ae[a] || a}(${u}) `;
+    ]
+  }),
+  // 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"
+    ]
+  },
+  // 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"
       }
-      e && !s && (o += "translateZ(0px) "), r.value = o.trim();
-    },
-    {
-      immediate: !0,
-      deep: !0
-    }
-  ), {
-    state: i,
-    transform: r
-  };
-}
-const ce = ["", "X", "Y", "Z"], le = ["perspective", "translate", "scale", "rotate", "skew"], et = ["transformPerspective", "x", "y", "z"];
-le.forEach((t) => {
-  ce.forEach((e) => {
-    const i = t + e;
-    et.push(i);
-  });
-});
-const ue = new Set(et);
-function q(t) {
-  return ue.has(t);
-}
-const fe = /* @__PURE__ */ new Set(["originX", "originY", "originZ"]);
-function it(t) {
-  return fe.has(t);
-}
-function pe(t) {
-  const e = {}, i = {};
-  return Object.entries(t).forEach(([r, n]) => {
-    q(r) || it(r) ? e[r] = n : i[r] = n;
-  }), { transform: e, style: i };
-}
-function B(t) {
-  const { transform: e, style: i } = pe(t), { transform: r } = tt(e), { style: n } = Q(i);
-  return r.value && (n.value.transform = r.value), n.value;
-}
-function ye(t, e) {
-  let i, r;
-  const { state: n, style: o } = Q();
-  return k(t, (s) => {
-    r = s;
-    for (const a of Object.keys(J))
-      s.style[a] === null || s.style[a] === "" || q(a) || it(a) || (n[a] = s.style[a]);
-    i && Object.entries(i).forEach(([a, l]) => s.style[a] = l), e && e(n);
-  }), h(
-    o,
-    (s) => {
-      if (!r) {
-        i = s;
-        return;
+    ]
+  }),
+  // 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"
+    ]
+  },
+  // 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]"
+  },
+  // The div that contains just the thumbnails
+  thumbnailitems: ({ parent: o }) => ({
+    class: [
+      "flex",
+      {
+        "flex-col h-full": o.props.thumbnailsPosition === "right" || o.props.thumbnailsPosition === "left"
       }
-      for (const a in s) r.style[a] = s[a];
-    },
-    {
-      immediate: !0
-    }
-  ), {
-    style: n
-  };
-}
-function de(t) {
-  const e = t.trim().split(/\) |\)/);
-  if (e.length === 1)
-    return {};
-  const i = (r) => r.endsWith("px") || r.endsWith("deg") ? Number.parseFloat(r) : Number.isNaN(Number(r)) ? Number(r) : r;
-  return e.reduce((r, n) => {
-    if (!n)
-      return r;
-    const [o, s] = n.split("("), l = s.split(",").map((u) => i(u.endsWith(")") ? u.replace(")", "") : u.trim())), p = l.length === 1 ? l[0] : l;
-    return {
-      ...r,
-      [o]: p
-    };
-  }, {});
-}
-function me(t, e) {
-  Object.entries(de(e)).forEach(([i, r]) => {
-    const n = ["x", "y", "z"];
-    if (i === "translate3d") {
-      if (r === 0) {
-        n.forEach((o) => t[o] = 0);
-        return;
+    ]
+  }),
+  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"
+    ]
+  },
+  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
       }
-      r.forEach((o, s) => t[n[s]] = o);
-      return;
-    }
-    if (r = Number.parseFloat(`${r}`), i === "translateX") {
-      t.x = r;
-      return;
-    }
-    if (i === "translateY") {
-      t.y = r;
-      return;
-    }
-    if (i === "translateZ") {
-      t.z = r;
-      return;
-    }
-    t[i] = r;
-  });
-}
-function be(t, e) {
-  let i, r;
-  const { state: n, transform: o } = tt();
-  return k(t, (s) => {
-    r = s, s.style.transform && me(n, s.style.transform), i && (s.style.transform = i), e && e(n);
-  }), h(
-    o,
-    (s) => {
-      if (!r) {
-        i = s;
-        return;
+    ]
+  }),
+  indicator: ({ parent: o }) => ({
+    class: [
+      {
+        "mr-2": o.props.indicatorsPosition == "bottom" || o.props.indicatorsPosition == "top",
+        "mb-2": o.props.indicatorsPosition == "left" || o.props.indicatorsPosition == "right"
       }
-      r.style.transform = s;
-    },
-    {
-      immediate: !0
-    }
-  ), {
-    transform: n
-  };
-}
-function he(t) {
-  return Object.entries(t);
-}
-function ve(t, e) {
-  const i = V({}), r = (s) => Object.entries(s).forEach(([a, l]) => i[a] = l), { style: n } = ye(t, r), { transform: o } = be(t, r);
-  return h(
-    i,
-    (s) => {
-      he(s).forEach(([a, l]) => {
-        const p = q(a) ? o : n;
-        p[a] && p[a] === l || (p[a] = l);
-      });
-    },
-    {
-      immediate: !0,
-      deep: !0
-    }
-  ), k(t, () => e), {
-    motionProperties: i,
-    style: n,
-    transform: o
-  };
-}
-function ge(t = {}) {
-  const e = x(t), i = g();
-  return {
-    state: A(() => {
-      if (i.value)
-        return e[i.value];
-    }),
-    variant: i
-  };
-}
-function Oe(t, e = {}, i) {
-  const { motionProperties: r } = ve(t), { variant: n, state: o } = ge(e), s = Jt(r, e), a = {
-    target: t,
-    variant: n,
-    variants: e,
-    state: o,
-    motionProperties: r,
-    ...s
-  };
-  return se(a, i), a;
-}
-const Te = {
-  initial: {
-    opacity: 0
-  },
-  enter: {
-    opacity: 1
-  }
-}, Ae = {
-  initial: {
-    opacity: 0
-  },
-  visible: {
-    opacity: 1
-  }
-}, xe = {
-  initial: {
-    opacity: 0
-  },
-  visibleOnce: {
-    opacity: 1
-  }
-}, je = {
-  initial: {
-    scale: 0,
-    opacity: 0
-  },
-  enter: {
-    scale: 1,
-    opacity: 1
-  }
-}, Ve = {
-  initial: {
-    scale: 0,
-    opacity: 0
-  },
-  visible: {
-    scale: 1,
-    opacity: 1
-  }
-}, Se = {
-  initial: {
-    scale: 0,
-    opacity: 0
-  },
-  visibleOnce: {
-    scale: 1,
-    opacity: 1
-  }
-}, Ce = {
-  initial: {
-    x: -100,
-    rotate: 90,
-    opacity: 0
-  },
-  enter: {
-    x: 0,
-    rotate: 0,
-    opacity: 1
-  }
-}, Ee = {
-  initial: {
-    x: -100,
-    rotate: 90,
-    opacity: 0
-  },
-  visible: {
-    x: 0,
-    rotate: 0,
-    opacity: 1
-  }
-}, Ne = {
-  initial: {
-    x: -100,
-    rotate: 90,
-    opacity: 0
-  },
-  visibleOnce: {
-    x: 0,
-    rotate: 0,
-    opacity: 1
-  }
-}, Pe = {
-  initial: {
-    x: 100,
-    rotate: -90,
-    opacity: 0
-  },
-  enter: {
-    x: 0,
-    rotate: 0,
-    opacity: 1
-  }
-}, _e = {
-  initial: {
-    x: 100,
-    rotate: -90,
-    opacity: 0
-  },
-  visible: {
-    x: 0,
-    rotate: 0,
-    opacity: 1
-  }
-}, we = {
-  initial: {
-    x: 100,
-    rotate: -90,
-    opacity: 0
-  },
-  visibleOnce: {
-    x: 0,
-    rotate: 0,
-    opacity: 1
-  }
-}, Re = {
-  initial: {
-    y: -100,
-    rotate: -90,
-    opacity: 0
-  },
-  enter: {
-    y: 0,
-    rotate: 0,
-    opacity: 1
-  }
-}, Me = {
-  initial: {
-    y: -100,
-    rotate: -90,
-    opacity: 0
-  },
-  visible: {
-    y: 0,
-    rotate: 0,
-    opacity: 1
-  }
-}, Le = {
-  initial: {
-    y: -100,
-    rotate: -90,
-    opacity: 0
-  },
-  visibleOnce: {
-    y: 0,
-    rotate: 0,
-    opacity: 1
-  }
-}, ke = {
-  initial: {
-    y: 100,
-    rotate: 90,
-    opacity: 0
-  },
-  enter: {
-    y: 0,
-    rotate: 0,
-    opacity: 1
-  }
-}, qe = {
-  initial: {
-    y: 100,
-    rotate: 90,
-    opacity: 0
-  },
-  visible: {
-    y: 0,
-    rotate: 0,
-    opacity: 1
-  }
-}, Be = {
-  initial: {
-    y: 100,
-    rotate: 90,
-    opacity: 0
-  },
-  visibleOnce: {
-    y: 0,
-    rotate: 0,
-    opacity: 1
-  }
-}, De = {
-  initial: {
-    x: -100,
-    opacity: 0
-  },
-  enter: {
-    x: 0,
-    opacity: 1
-  }
-}, Fe = {
-  initial: {
-    x: -100,
-    opacity: 0
-  },
-  visible: {
-    x: 0,
-    opacity: 1
-  }
-}, ze = {
-  initial: {
-    x: -100,
-    opacity: 0
-  },
-  visibleOnce: {
-    x: 0,
-    opacity: 1
-  }
-}, Ie = {
-  initial: {
-    x: 100,
-    opacity: 0
-  },
-  enter: {
-    x: 0,
-    opacity: 1
-  }
-}, Ue = {
-  initial: {
-    x: 100,
-    opacity: 0
-  },
-  visible: {
-    x: 0,
-    opacity: 1
-  }
-}, We = {
-  initial: {
-    x: 100,
-    opacity: 0
-  },
-  visibleOnce: {
-    x: 0,
-    opacity: 1
-  }
-}, Xe = {
-  initial: {
-    y: -100,
-    opacity: 0
-  },
-  enter: {
-    y: 0,
-    opacity: 1
-  }
-}, Ye = {
-  initial: {
-    y: -100,
-    opacity: 0
-  },
-  visible: {
-    y: 0,
-    opacity: 1
-  }
-}, Ze = {
-  initial: {
-    y: -100,
-    opacity: 0
-  },
-  visibleOnce: {
-    y: 0,
-    opacity: 1
-  }
-}, He = {
-  initial: {
-    y: 100,
-    opacity: 0
-  },
-  enter: {
-    y: 0,
-    opacity: 1
-  }
-}, Ke = {
-  initial: {
-    y: 100,
-    opacity: 0
-  },
-  visible: {
-    y: 0,
-    opacity: 1
-  }
-}, $e = {
-  initial: {
-    y: 100,
-    opacity: 0
-  },
-  visibleOnce: {
-    y: 0,
-    opacity: 1
-  }
-}, Y = {
-  __proto__: null,
-  fade: Te,
-  fadeVisible: Ae,
-  fadeVisibleOnce: xe,
-  pop: je,
-  popVisible: Ve,
-  popVisibleOnce: Se,
-  rollBottom: ke,
-  rollLeft: Ce,
-  rollRight: Pe,
-  rollTop: Re,
-  rollVisibleBottom: qe,
-  rollVisibleLeft: Ee,
-  rollVisibleOnceBottom: Be,
-  rollVisibleOnceLeft: Ne,
-  rollVisibleOnceRight: we,
-  rollVisibleOnceTop: Le,
-  rollVisibleRight: _e,
-  rollVisibleTop: Me,
-  slideBottom: He,
-  slideLeft: De,
-  slideRight: Ie,
-  slideTop: Xe,
-  slideVisibleBottom: Ke,
-  slideVisibleLeft: Fe,
-  slideVisibleOnceBottom: $e,
-  slideVisibleOnceLeft: ze,
-  slideVisibleOnceRight: We,
-  slideVisibleOnceTop: Ze,
-  slideVisibleRight: Ue,
-  slideVisibleTop: Ye
-}, Ge = /* @__PURE__ */ Symbol(
-  ""
-), rt = {
-  // Preset to be loaded
-  preset: {
-    type: String,
-    required: !1
-  },
-  // Instance
-  instance: {
-    type: Object,
-    required: !1
-  },
-  // Variants
-  variants: {
-    type: Object,
-    required: !1
-  },
-  // Initial variant
-  initial: {
-    type: Object,
-    required: !1
-  },
-  // Lifecycle hooks variants
-  enter: {
-    type: Object,
-    required: !1
-  },
-  leave: {
-    type: Object,
-    required: !1
-  },
-  // Intersection observer variants
-  visible: {
-    type: Object,
-    required: !1
-  },
-  visibleOnce: {
-    type: Object,
-    required: !1
-  },
-  // Event listeners variants
-  hovered: {
-    type: Object,
-    required: !1
-  },
-  tapped: {
-    type: Object,
-    required: !1
-  },
-  focused: {
-    type: Object,
-    required: !1
-  },
-  // Helpers
-  delay: {
-    type: [Number, String],
-    required: !1
-  },
-  duration: {
-    type: [Number, String],
-    required: !1
+    ]
+  }),
+  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"
+    ]
+  },
+  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"
+    ]
+  },
+  closeicon: {
+    class: "w-6 h-6"
+  },
+  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"
+    ]
+  },
+  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 Je(t) {
-  return Object.prototype.toString.call(t) === "[object Object]";
-}
-function w(t) {
-  if (Array.isArray(t))
-    return t.map(w);
-  if (Je(t)) {
-    const e = {};
-    for (const i in t)
-      e[i] = w(t[i]);
-    return e;
-  }
-  return t;
-}
-function nt(t) {
-  const e = V({}), i = ct(Ge, {}), r = A(() => t.preset == null ? {} : i != null && t.preset in i ? structuredClone(lt(i)[t.preset]) : t.preset in Y ? structuredClone(Y[t.preset]) : {}), n = A(() => ({
-    initial: t.initial,
-    enter: t.enter,
-    leave: t.leave,
-    visible: t.visible,
-    visibleOnce: t.visibleOnce,
-    hovered: t.hovered,
-    tapped: t.tapped,
-    focused: t.focused
-  }));
-  function o(l, p) {
-    for (const u of ["delay", "duration"]) {
-      if (p[u] == null)
-        continue;
-      const f = Number.parseInt(
-        p[u]
-      );
-      for (const y of ["enter", "visible", "visibleOnce"]) {
-        const d = l[y];
-        d != null && (d.transition ??= {}, d.transition[u] = f);
-      }
-    }
-    return l;
-  }
-  const s = A(() => {
-    const l = st(
-      {},
-      n.value,
-      r.value,
-      t.variants || {}
-    );
-    return o({ ...l }, t);
-  });
-  function a(l, p, u) {
-    l.props ??= {}, l.props.style ??= {}, l.props.style = { ...l.props.style, ...u };
-    const f = o(
-      w(s.value),
-      l.props
-    );
-    return l.props.onVnodeMounted = ({ el: y }) => {
-      e[p] = Oe(
-        y,
-        f
-      );
-    }, l.props.onVnodeUpdated = ({ el: y }) => {
-      const d = B(e[p].state);
-      for (const [v, S] of Object.entries(d))
-        y.style[v] = S;
-    }, l;
-  }
-  return {
-    motionConfig: s,
-    setNodeInstance: a
-  };
-}
-Z({
-  name: "Motion",
-  props: {
-    ...rt,
-    is: {
-      type: [String, Object],
-      default: "div"
-    }
-  },
-  setup(t) {
-    const e = H(), { motionConfig: i, setNodeInstance: r } = nt(t);
-    return () => {
-      const n = B(i.value.initial || {}), o = K(t.is, void 0, e);
-      return r(o, 0, n), o;
-    };
-  }
-});
-Z({
-  name: "MotionGroup",
-  props: {
-    ...rt,
-    is: {
-      type: [String, Object],
-      required: !1
-    }
-  },
-  setup(t) {
-    const e = H(), { motionConfig: i, setNodeInstance: r } = nt(t);
-    return () => {
-      const n = B(i.value.initial || {}), o = e.default?.() || [];
-      for (let s = 0; s < o.length; s++) {
-        const a = o[s];
-        a.type === at && Array.isArray(a.children) ? a.children.forEach(function l(p, u) {
-          if (p != null) {
-            if (Array.isArray(p)) {
-              l(p, u);
-              return;
-            }
-            typeof p == "object" && r(p, u, n);
-          }
-        }) : r(a, s, n);
-      }
-      return t.is ? K(t.is, void 0, o) : o;
-    };
-  }
-});
 export {
-  Te as fade,
-  Ae as fadeVisible,
-  xe as fadeVisibleOnce,
-  je as pop,
-  Ve as popVisible,
-  Se as popVisibleOnce,
-  Q as reactiveStyle,
-  tt as reactiveTransform,
-  ke as rollBottom,
-  Ce as rollLeft,
-  Pe as rollRight,
-  Re as rollTop,
-  qe as rollVisibleBottom,
-  Ee as rollVisibleLeft,
-  Be as rollVisibleOnceBottom,
-  Ne as rollVisibleOnceLeft,
-  we as rollVisibleOnceRight,
-  Le as rollVisibleOnceTop,
-  _e as rollVisibleRight,
-  Me as rollVisibleTop,
-  He as slideBottom,
-  De as slideLeft,
-  Ie as slideRight,
-  Xe as slideTop,
-  Ke as slideVisibleBottom,
-  Fe as slideVisibleLeft,
-  $e as slideVisibleOnceBottom,
-  ze as slideVisibleOnceLeft,
-  We as slideVisibleOnceRight,
-  Ze as slideVisibleOnceTop,
-  Ue as slideVisibleRight,
-  Ye as slideVisibleTop,
-  ye as useElementStyle,
-  be as useElementTransform,
-  Oe as useMotion,
-  Jt as useMotionControls,
-  se as useMotionFeatures,
-  ve as useMotionProperties,
-  Gt as useMotionTransitions,
-  ge as useMotionVariants
+  i as default
 };