@quoreadmin/ui 1.4.1 → 1.4.3

package/dist/index159.js

@@ -0,0 +1,40 @@
+const t = {
+  root: ({ props: e }) => ({
+    class: [
+      {
+        "opacity-60 select-none pointer-events-none cursor-default": e.disabled
+      }
+    ]
+  }),
+  button: ({ context: e }) => ({
+    class: [
+      "relative",
+      // Font
+      "leading-normal text-base",
+      // Flex Alignment
+      "inline-flex items-center align-bottom text-center",
+      // Spacing
+      "px-4 py-2",
+      // Shape
+      "rounded-lg",
+      // Color
+      {
+        "bg-gray-0 text-gray-40": !e.active,
+        "button-active bg-white text-inkwell-30": e.active
+      },
+      {
+        "opacity-60 select-none pointer-events-none cursor-default": e.disabled
+      },
+      // Transition
+      "transition duration-200",
+      // Misc
+      "cursor-pointer select-none overflow-hidden"
+    ]
+  }),
+  label: {
+    class: "font-bold"
+  }
+};
+export {
+  t as default
+};

package/dist/index16.js

@@ -0,0 +1,318 @@
+import N from "./index85.js";
+import { resolveComponent as m, createElementBlock as r, openBlock as o, mergeProps as v, toHandlerKey as F, createCommentVNode as d, createElementVNode as n, normalizeStyle as p, normalizeClass as t, renderSlot as b, createVNode as u, createSlots as H, renderList as y, withCtx as w, withModifiers as S, normalizeProps as V, guardReactiveProps as B, createTextVNode as $, toDisplayString as g, Fragment as k, createBlock as R } from "vue";
+/* empty css        */
+import T from "./index60.js";
+const M = ["id"], q = ["id"], D = {
+  class: /* @__PURE__ */ t([
+    "fixed-scrollable overflow-x-auto overflow-y-hidden z-20"
+  ]),
+  ref: "fixedScrollableContainer"
+}, X = { class: "min-w-full" }, L = { class: "flex items-center" }, O = { key: 0 }, j = ["id"], E = { class: "min-w-full" }, W = { class: "flex items-center" }, A = { key: 0 }, I = ["id"], K = ["id", "onClick"], Q = {
+  key: 1,
+  id: "no-results",
+  class: /* @__PURE__ */ t([
+    "flex flex-col items-center justify-center",
+    "bg-white rounded-b-lg p-12"
+  ])
+}, G = ["src"], J = { class: "font-bold text-inkwell-0 text-base" };
+function Y(e, i, Z, x, _, ee) {
+  const C = m("q-checkbox"), c = m("q-data-table-head"), P = m("q-data-table-cell"), z = m("q-icon");
+  return o(), r("div", v({
+    id: e.id,
+    class: [
+      "table-container relative border border-gray-20 rounded-lg",
+      {
+        "has-data-filter": !!e.$slots.dataFilter,
+        "has-no-results": !e.modelValue.length,
+        "has-pinned-headers": e.pinHeaders,
+        "is-device": !e.isDesktop,
+        "is-fixed": e.isFixed,
+        "is-loading": e.loading,
+        scrollable: e.scrollable
+      }
+    ],
+    style: `
+            padding-top: ${e.isFixed && e.pinHeaders && e.dataFilterContainer?.clientHeight || 0}px;
+        `,
+    ref: "tableContainer"
+  }, {
+    [F(e.isDesktop && "mouseenter")]: i[7] || (i[7] = (l) => {
+      e.hovered = !0, e.getScrollButtonTop();
+    })
+  }, {
+    [F(e.isDesktop && "mouseleave")]: i[8] || (i[8] = (l) => e.hovered = !1)
+  }), [
+    e.$slots.dataFilter ? (o(), r("div", {
+      key: 0,
+      class: t([
+        "data-filter-container rounded-t-lg z-30",
+        { "fixed z-20 border border-b-0 border-gray-20 -ml-px -mt-px": e.isFixed && e.pinHeaders }
+      ]),
+      style: p(`
+                top: ${e.isFixed && e.pinHeaders ? e.fixedTopOffset : 0}px;
+                width: ${e.isFixed && e.pinHeaders ? e.scrollableContainerWidth + 2 + "px" : "auto"};
+            `),
+      ref: "dataFilterContainer"
+    }, [
+      b(e.$slots, "dataFilter", {}, void 0, !0)
+    ], 6)) : d("", !0),
+    n("div", {
+      id: `${e.id ? e.id + "-" : ""}fixed-scrollable-container`,
+      class: t([
+        "fixed-scrollable-container",
+        "fixed z-20 -ml-px",
+        "border border-b-0 border-gray-20",
+        e.$slots.dataFilter ? "border-t-0" : "rounded-t-lg",
+        { invisible: !(e.isFixed && e.pinHeaders) }
+      ]),
+      style: p(`
+                top: ${e.fixedTopOffset + (e.dataFilterContainer?.clientHeight || 0)}px;
+                width: ${e.scrollableContainerWidth + 2}px;
+            `)
+    }, [
+      n("div", D, [
+        n("table", X, [
+          u(c, {
+            id: `${e.id ? e.id + "-" : ""}fixed`,
+            columns: e.columns,
+            "row-count": e.modelValue.length,
+            scrollable: e.scrollable,
+            "scrollable-container-x": e.fixedScrollableContainerX,
+            "scroll-max": e.scrollMax,
+            "th-classes": e.thClasses,
+            "onClick:th": e.onClickColumnHeader
+          }, H({ _: 2 }, [
+            y(e.columns, (l, a) => ({
+              name: `head(${l.key})`,
+              fn: w(() => [
+                n("div", L, [
+                  e.isMultiSelect && a === 0 ? (o(), r("div", O, [
+                    u(C, {
+                      modelValue: e.allCheckboxSelected,
+                      "onUpdate:modelValue": i[0] || (i[0] = (h) => e.allCheckboxSelected = h),
+                      icon: e.selectedRows.length < e.modelValue.length ? "minus" : "check",
+                      class: "mr-3",
+                      "onUpdate:checked": e.onUpdateAllCheckboxes,
+                      onClick: i[1] || (i[1] = S(() => {
+                      }, ["stop"]))
+                    }, null, 8, ["modelValue", "icon", "onUpdate:checked"])
+                  ])) : d("", !0),
+                  b(e.$slots, `head(${l.key})`, V(B(l)), () => [
+                    $(g(typeof l == "string" ? l : l.name), 1)
+                  ], !0),
+                  l.sortable ? (o(), r("div", {
+                    key: 1,
+                    class: t([
+                      "sort relative h-4 w-4 shrink-0",
+                      e.sortBy === (l.key || l) && e.orderBy ? `order-by-${e.orderBy}` : ""
+                    ])
+                  }, null, 2)) : d("", !0)
+                ])
+              ])
+            }))
+          ]), 1032, ["id", "columns", "row-count", "scrollable", "scrollable-container-x", "scroll-max", "th-classes", "onClick:th"])
+        ])
+      ], 512)
+    ], 14, q),
+    n("div", {
+      id: `${e.id ? e.id + "-" : ""}scrollable-container`,
+      class: t([
+        "scrollable-container",
+        "overflow-x-auto overflow-y-hidden rounded-b-lg",
+        { "rounded-t-lg": !e.$slots.dataFilter }
+      ]),
+      ref: "scrollableContainer"
+    }, [
+      n("table", E, [
+        u(c, {
+          id: e.id,
+          class: t({ invisible: e.isFixed && e.pinHeaders }),
+          columns: e.columns,
+          "row-count": e.modelValue.length,
+          scrollable: e.scrollable,
+          "scrollable-container-x": e.scrollableContainerX,
+          "scroll-max": e.scrollMax,
+          "th-classes": e.thClasses,
+          "onClick:th": e.onClickColumnHeader
+        }, H({ _: 2 }, [
+          y(e.columns, (l, a) => ({
+            name: `head(${l.key})`,
+            fn: w(() => [
+              n("div", W, [
+                e.isMultiSelect && a === 0 ? (o(), r("div", A, [
+                  u(C, {
+                    modelValue: e.allCheckboxSelected,
+                    "onUpdate:modelValue": i[2] || (i[2] = (h) => e.allCheckboxSelected = h),
+                    icon: e.selectedRows.length < e.modelValue.length ? "minus" : "check",
+                    class: "mr-3",
+                    "onUpdate:checked": e.onUpdateAllCheckboxes,
+                    onClick: i[3] || (i[3] = S(() => {
+                    }, ["stop"]))
+                  }, null, 8, ["modelValue", "icon", "onUpdate:checked"])
+                ])) : d("", !0),
+                b(e.$slots, `head(${l.key})`, V(B(l)), () => [
+                  $(g(typeof l == "string" ? l : l.name), 1)
+                ], !0),
+                l.sortable ? (o(), r("div", {
+                  key: 1,
+                  class: t([
+                    "sort relative h-4 w-4 shrink-0",
+                    e.sortBy === (l.key || l) && e.orderBy ? `order-by-${e.orderBy}` : ""
+                  ])
+                }, null, 2)) : d("", !0)
+              ])
+            ])
+          }))
+        ]), 1032, ["id", "class", "columns", "row-count", "scrollable", "scrollable-container-x", "scroll-max", "th-classes", "onClick:th"]),
+        n("tbody", {
+          id: `${e.id ? e.id + "-" : ""}tbody`,
+          ref: "tbodyContainer"
+        }, [
+          (o(!0), r(k, null, y(e.totalPages, (l) => (o(), r(k, { key: l }, [
+            l <= e.page ? (o(!0), r(k, { key: 0 }, y(e.loading ? e.skeletonData : e.modelValue.slice(
+              (l - 1) * e.itemsPerPage,
+              (l - 1) * e.itemsPerPage + e.itemsPerPage
+            ), (a, h) => (o(), r("tr", {
+              key: `${e.id ? e.id + "-" : ""}tr-${(l - 1) * e.itemsPerPage + Number(h)}`,
+              id: `${e.id ? e.id + "-" : ""}tr-${(l - 1) * e.itemsPerPage + Number(h)}`,
+              class: t([
+                Number(h) % 2 ? "bg-gray-0" : "bg-white",
+                { "cursor-pointer": e.canClickRow }
+              ]),
+              onClick: (s) => e.$emit("click:row", a)
+            }, [
+              (o(!0), r(k, null, y(e.columns, (s, f) => (o(), R(P, {
+                id: `${e.id ? e.id + "-" : ""}tr-${(l - 1) * e.itemsPerPage + Number(h)}-${s.key ? s.key : s || f}`,
+                key: f,
+                class: t([
+                  s.key,
+                  e.tdClasses,
+                  `cell-${s.size || "md"}`,
+                  s.frozen ? Number(h) % 2 ? "bg-gray-0" : "bg-white" : "",
+                  {
+                    "sticky left-0 z-10": s.frozen,
+                    "text-right": s.key === "actions",
+                    "left-auto right-0": s.key === "actions" && s.frozen,
+                    "shadow-right": s.frozen && f === 0 && e.scrollable && e.scrollableContainerX > 0,
+                    "shadow-left": s.frozen && f === e.columns.length - 1 && e.scrollable && e.scrollableContainerX < e.scrollMax
+                  }
+                ])
+              }, {
+                default: w(() => [
+                  e.loading ? e.loading ? (o(), r("div", {
+                    key: 1,
+                    class: t(["animate-shimmer", a.shimmer])
+                  }, "   ", 2)) : d("", !0) : (o(), r("div", {
+                    key: 0,
+                    class: t({ "flex items-center": e.isMultiSelect && f === 0 })
+                  }, [
+                    e.isMultiSelect && f === 0 ? (o(), r("div", {
+                      key: 0,
+                      onClick: i[4] || (i[4] = S(() => {
+                      }, ["stop"]))
+                    }, [
+                      u(C, {
+                        "model-value": e.selectedRows.includes(a),
+                        class: "mr-3",
+                        "onUpdate:checked": (U) => e.onUpdateCheckbox(U, a)
+                      }, null, 8, ["model-value", "onUpdate:checked"])
+                    ])) : d("", !0),
+                    e.$slots[`cell(${s.key ? s.key : s})`] ? b(e.$slots, `cell(${s.key ? s.key : s})`, v({
+                      key: 1,
+                      ref_for: !0
+                    }, { row: a, column: s }), void 0, !0) : b(e.$slots, "cell(default)", v({
+                      key: 2,
+                      ref_for: !0
+                    }, { row: a, column: s }), () => [
+                      s.key && !s.key.match(/\./) || typeof s == "string" ? (o(), r(k, { key: 0 }, [
+                        $(g(a[s.key ? s.key : s.toString().toLowerCase()]), 1)
+                      ], 64)) : (o(), r(k, { key: 1 }, [
+                        $(g(a[s.key.split(".")[0]][s.key.split(".")[1]]), 1)
+                      ], 64))
+                    ], !0)
+                  ], 2))
+                ]),
+                _: 2
+              }, 1032, ["id", "class"]))), 128))
+            ], 10, K))), 128)) : d("", !0)
+          ], 64))), 128))
+        ], 8, I)
+      ])
+    ], 10, j),
+    !e.loading && !e.modelValue.length ? (o(), r("div", Q, [
+      b(e.$slots, "no-results-illustration", {}, () => [
+        n("img", {
+          class: "mb-5",
+          src: e.noResults
+        }, null, 8, G)
+      ], !0),
+      b(e.$slots, "no-results-text", {}, () => [
+        n("div", J, g(e.$t("HC_NO_RESULTS_FOUND")), 1)
+      ], !0)
+    ])) : d("", !0),
+    e.scrollable && e.scrollableContainerX < e.scrollMax && !e.columns[e.columns.length - 1].frozen ? (o(), r("div", {
+      key: 2,
+      class: t([
+        "scroll-shadow",
+        { "has-data-filter-offset": !!e.$slots.dataFilter }
+      ])
+    }, null, 2)) : d("", !0),
+    n("div", {
+      id: "fixed-scroll-buttons",
+      class: t([
+        "h-0 z-20 -ml-px",
+        e.pinHeaders ? "fixed" : "absolute"
+      ]),
+      style: p(`
+                top: ${(e.dataFilterContainer?.clientHeight || 0) + e.thHeight + (e.pinHeaders ? e.fixedTopOffset : 0)}px;
+                width: ${e.scrollableContainerWidth + 2}px;
+            `)
+    }, [
+      e.showLeftScrollButton ? (o(), r("div", {
+        key: 0,
+        class: t([
+          "absolute z-20 rounded-full w-10 h-10",
+          "bg-white border border-gray-20 shadow -mt-5 -ml-5",
+          "flex items-center justify-center cursor-pointer"
+        ]),
+        style: p(`
+                    top: ${e.scrollButtonTop}px;
+                    left: ${e.leftScrollButtonX}px;
+                `),
+        onClick: i[5] || (i[5] = (...l) => e.triggerScrollLeft && e.triggerScrollLeft(...l))
+      }, [
+        u(z, {
+          class: "p-[0.1875rem] -ml-0.5",
+          icon: "chevron-left",
+          size: "md",
+          type: ""
+        })
+      ], 4)) : d("", !0),
+      e.showRightScrollButton ? (o(), r("div", {
+        key: 1,
+        class: t([
+          "absolute z-20 rounded-full w-10 h-10",
+          "bg-white border border-gray-20 shadow -mt-5 -mr-5",
+          "flex items-center justify-center cursor-pointer",
+          { "!right-8": !e.columns[e.columns.length - 1].frozen }
+        ]),
+        style: p(`
+                    top: ${e.scrollButtonTop}px;
+                    right: ${e.rightScrollButtonX}px;
+                `),
+        onClick: i[6] || (i[6] = (...l) => e.triggerScrollRight && e.triggerScrollRight(...l))
+      }, [
+        u(z, {
+          class: "p-[0.1875rem] -mr-0.5",
+          icon: "chevron-right",
+          size: "md",
+          type: ""
+        })
+      ], 6)) : d("", !0)
+    ], 6)
+  ], 16, M);
+}
+const ie = /* @__PURE__ */ T(N, [["render", Y], ["__scopeId", "data-v-e16789e1"]]);
+export {
+  ie as default
+};

package/dist/index160.js

@@ -0,0 +1,282 @@
+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"
+      }
+    ]
+  }),
+  // 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"
+      }
+    ]
+  }),
+  // 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"
+    ]
+  },
+  // 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"
+    ]
+  },
+  // 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"
+      }
+    ]
+  }),
+  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
+      }
+    ]
+  }),
+  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"
+    ]
+  },
+  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"
+  }
+};
+export {
+  i as default
+};