@orchidui/dashboard 0.4.0 → 0.7.0

package/dist/OcFilterForm-7ehuJUMp-D7aE0HSM.js

@@ -0,0 +1,83 @@
+import { ref as t, computed as u, onMounted as O, openBlock as k, createElementBlock as w, renderSlot as B, createElementVNode as m, createVNode as s, unref as i } from "vue";
+import { I as C, G as f } from "./index-DyVteXE3-BhWmKQss.js";
+const E = { class: "flex w-[326px] flex-col gap-y-5" }, A = { class: "max-h-[500px] overflow-y-auto p-5" }, I = { class: "flex gap-x-5 px-5 pb-5" }, S = {
+  __name: "OcFilterForm",
+  props: {
+    id: {
+      type: String,
+      required: !0
+    },
+    jsonForm: {
+      type: Array
+    },
+    values: {
+      type: Object
+    },
+    actions: {
+      type: Object
+    },
+    grid: {
+      type: Object,
+      default: null
+    }
+  },
+  emits: ["applyFilter", "cancel", "filter-fields-changed"],
+  setup(r, { emit: b }) {
+    const n = r, d = b, a = t({}), c = t({}), o = t([]), y = (e) => {
+      o.value.findIndex((l) => l === e) >= 0 || o.value.push(e);
+    }, p = (e, l = null) => {
+      typeof e.name == "object" ? e.name.forEach((v, h) => {
+        a.value[v.key] = l[h];
+      }) : a.value[e.name] = l, y(e.name);
+    }, g = u(() => Object.values(a.value).length > 0), j = u(() => {
+      var e, l;
+      return ((l = (e = n.actions) == null ? void 0 : e.applyButton) == null ? void 0 : l.label) || "Apply";
+    }), x = u(() => {
+      var e, l;
+      return ((l = (e = n.actions) == null ? void 0 : e.cancelButton) == null ? void 0 : l.label) || "Cancel";
+    });
+    O(() => {
+      a.value = { ...n.values };
+    });
+    const F = () => {
+      d("applyFilter", a.value), d("filter-fields-changed", o.value), o.value = [];
+    };
+    return (e, l) => (k(), w("div", E, [
+      B(e.$slots, "default", {
+        errors: c.value,
+        values: a.value,
+        jsonForm: r.jsonForm,
+        updateForm: p
+      }, () => [
+        m("div", A, [
+          s(i(C), {
+            id: `filter-form-${r.id}`,
+            class: "grid gap-5",
+            errors: c.value,
+            values: a.value,
+            "json-form": r.jsonForm,
+            grid: r.grid ?? null,
+            onOnUpdate: p
+          }, null, 8, ["id", "errors", "values", "json-form", "grid"])
+        ])
+      ]),
+      m("div", I, [
+        s(i(f), {
+          class: "w-full",
+          variant: "secondary",
+          label: x.value,
+          onClick: l[0] || (l[0] = (v) => e.$emit("cancel"))
+        }, null, 8, ["label"]),
+        s(i(f), {
+          class: "w-full",
+          "is-disabled": !g.value,
+          label: j.value,
+          onClick: F
+        }, null, 8, ["is-disabled", "label"])
+      ])
+    ]));
+  }
+};
+export {
+  S as default
+};

package/dist/OcFilterSearch-B4AZsLBn-C9rTBQa6.js

@@ -0,0 +1,69 @@
+import { ref as c, openBlock as o, createElementBlock as n, Fragment as x, createElementVNode as u, normalizeClass as m, createVNode as g, unref as s, withKeys as w, createBlock as d, createCommentVNode as v, nextTick as S } from "vue";
+import { y as C, G as y } from "./index-DyVteXE3-BhWmKQss.js";
+const V = { class: "flex gap-x-4" }, $ = {
+  __name: "OcFilterSearch",
+  props: {
+    isSearchOnly: Boolean
+  },
+  emits: {
+    addQuery: [],
+    toggle: []
+  },
+  setup(r, { emit: h }) {
+    const p = h, a = c(!1), l = c(""), i = c(), f = async () => {
+      a.value = !0, p("toggle", a), await S(), i.value.focus();
+    };
+    return (t, e) => (o(), n(x, null, [
+      u("div", {
+        class: m(["w-full", a.value || r.isSearchOnly ? "" : "absolute max-w-0 overflow-hidden"])
+      }, [
+        u("div", V, [
+          g(s(C), {
+            ref_key: "searchInput",
+            ref: i,
+            modelValue: l.value,
+            "onUpdate:modelValue": e[0] || (e[0] = (k) => l.value = k),
+            placeholder: "Search something here",
+            class: "md:min-w-[310px]",
+            icon: "search",
+            onKeyup: e[1] || (e[1] = w(
+              () => {
+                t.$emit("addQuery", l.value), l.value = "";
+              },
+              ["enter"]
+            ))
+          }, null, 8, ["modelValue"]),
+          r.isSearchOnly ? (o(), d(s(y), {
+            key: 0,
+            label: "Search",
+            variant: "secondary",
+            class: "shrink-0",
+            onClick: e[2] || (e[2] = () => {
+              t.$emit("addQuery", l.value), l.value = "";
+            })
+          })) : (o(), n("span", {
+            key: 1,
+            class: "py-3 text-base cursor-pointer flex normal-case items-center font-medium text-oc-text-400",
+            onClick: e[3] || (e[3] = () => {
+              a.value = !1, t.$emit("toggle", a.value), l.value = "";
+            })
+          }, " Clear "))
+        ])
+      ], 2),
+      r.isSearchOnly ? v("", !0) : (o(), n("div", {
+        key: 0,
+        class: m(a.value ? "max-w-0 overflow-hidden" : "")
+      }, [
+        a.value ? v("", !0) : (o(), d(s(y), {
+          key: 0,
+          variant: "secondary",
+          "left-icon": "search",
+          onClick: f
+        }))
+      ], 2))
+    ], 64));
+  }
+};
+export {
+  $ as default
+};

package/dist/OcFilterSearchFor-DfwJG-5N-BzJe6fhu.js

@@ -0,0 +1,67 @@
+import { computed as k, openBlock as a, createBlock as s, unref as m, withCtx as x, createElementVNode as v, createElementBlock as f, Fragment as b, renderList as p, createVNode as y, createCommentVNode as N } from "vue";
+import { s as F, t as c } from "./index-DyVteXE3-BhWmKQss.js";
+const R = { class: "flex gap-1 items-center normal-case flex-wrap" }, j = {
+  __name: "OcFilterSearchFor",
+  props: {
+    filters: Object,
+    queries: Object
+  },
+  emits: {
+    removeQuery: [],
+    removeFilter: [],
+    removeAll: []
+  },
+  setup(n, { emit: h }) {
+    const d = n, i = h, u = k(() => {
+      var t;
+      let l = [];
+      return (t = d.filters) == null || t.forEach((e) => {
+        if (e.multiNames) {
+          const r = l.find((o) => o.name === e.multiNames[0]);
+          r ? r.label = r.label + e.label : l.push(e);
+        } else
+          l.push(e);
+      }), l;
+    }), g = (t, l) => {
+      let e = {};
+      e[t] = "", l ? l.forEach((r) => {
+        let o = {};
+        o[r] = "", i("removeFilter", o, r);
+      }) : i("removeFilter", e, t);
+    };
+    return (t, l) => u.value.length > 0 || n.queries.length > 0 ? (a(), s(m(F), {
+      key: 0,
+      class: "!w-full !justify-start !bg-oc-bg-light"
+    }, {
+      default: x(() => [
+        v("div", R, [
+          l[1] || (l[1] = v("span", { class: "pr-2 text-sm font-medium text-oc-text" }, "Search for:", -1)),
+          (a(!0), f(b, null, p(n.queries, (e) => (a(), s(m(c), {
+            key: e,
+            variant: "accent-1",
+            closable: "",
+            label: e,
+            onRemove: (r) => t.$emit("removeQuery", e)
+          }, null, 8, ["label", "onRemove"]))), 128)),
+          (a(!0), f(b, null, p(u.value, (e) => (a(), s(m(c), {
+            key: e.name,
+            variant: "accent-1",
+            closable: "",
+            label: e.label,
+            onRemove: (r) => g(e.name, e.multiNames)
+          }, null, 8, ["label", "onRemove"]))), 128)),
+          y(m(c), {
+            variant: "gray",
+            class: "cursor-pointer",
+            label: "Clear all",
+            onClick: l[0] || (l[0] = (e) => t.$emit("removeAll"))
+          })
+        ])
+      ]),
+      _: 1
+    })) : N("", !0);
+  }
+};
+export {
+  j as default
+};

package/dist/OcModalCropper-Z4jlnFc5-CtKIW0ED.js

@@ -0,0 +1,46 @@
+import { ref as e, openBlock as c, createBlock as g, unref as u, withCtx as v, createVNode as f } from "vue";
+import { K as d } from "./index-DyVteXE3-BhWmKQss.js";
+import O from "./OcCropper-7E2i6ayU-D2MlvrOQ.js";
+const C = {
+  __name: "OcModalCropper",
+  props: {
+    inputOptions: Array,
+    inputOptionValues: Object,
+    img: String,
+    maxSize: [String, Number]
+  },
+  emits: ["changeImage", "close", "update:input-options"],
+  setup(o, { emit: l }) {
+    const s = o, t = l;
+    e(), e();
+    const r = {
+      onClick: () => t("close")
+    }, n = e(), p = e(s.link), m = e({
+      label: "Save",
+      onClick: () => {
+        p.value && t("update:input-options", p.value), n.value ? t("changeImage", n.value) : t("close");
+      }
+    });
+    return (b, i) => (c(), g(u(d), {
+      title: "Edit Image",
+      "is-close-icon": "",
+      "cancel-button-props": r,
+      "confirm-button-props": m.value
+    }, {
+      default: v(() => [
+        f(u(O), {
+          "input-options": o.inputOptions,
+          "input-option-values": o.inputOptionValues,
+          img: o.img,
+          "max-size": o.maxSize,
+          onChangeImage: i[0] || (i[0] = (a) => n.value = a),
+          "onUpdate:inputOptions": i[1] || (i[1] = (a) => p.value = a)
+        }, null, 8, ["input-options", "input-option-values", "img", "max-size"])
+      ]),
+      _: 1
+    }, 8, ["confirm-button-props"]));
+  }
+};
+export {
+  C as default
+};

package/dist/{OcPieChart-Kn-CkXip.js → OcPieChart-B6eV6nlg.js}

@@ -1,5 +1,5 @@
 import { computed as _, ref as C, openBlock as t, createElementBlock as a, createElementVNode as r, Fragment as n, renderList as h, createBlock as f, unref as x, withCtx as y, normalizeClass as b, normalizeStyle as F, toDisplayString as i, createTextVNode as g, createCommentVNode as T } from "vue";
-import { Tooltip as B, Icon as V } from "@orchidui/core";
+import { l as B, g as V } from "./index-DyVteXE3-BhWmKQss.js";
 import { useChart as L } from "./Dashboard/composables/useChart.js";
 const O = { class: "flex flex-col items-center" }, S = {
   key: 0,

package/dist/OcTimePicker-D9fPU8_m-DXvgZvEY.js

@@ -0,0 +1,98 @@
+import { ref as d, watch as v, openBlock as s, createBlock as p, unref as i, withCtx as m, createCommentVNode as g, createVNode as h } from "vue";
+import { c, b as y, F as S, y as x } from "./index-DyVteXE3-BhWmKQss.js";
+const T = {
+  __name: "OcTimePicker",
+  props: {
+    modelValue: [String, Date],
+    label: String,
+    hint: String,
+    icon: {
+      type: String,
+      default: "time"
+    },
+    preFill: String,
+    placeholder: String,
+    errorMessage: String,
+    isRequired: {
+      type: Boolean,
+      default: !1
+    },
+    isDisabled: {
+      type: Boolean,
+      default: !1
+    },
+    labelIcon: {
+      type: String,
+      default: ""
+    },
+    tooltipText: {
+      type: String,
+      default: ""
+    },
+    tooltipOptions: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: {
+    "update:modelValue": []
+  },
+  setup(e, { emit: b }) {
+    const f = b, u = d(), r = d(!1), n = e, a = d(n.modelValue), V = () => {
+      f("update:modelValue", a.value), setTimeout(() => {
+        var l;
+        return (l = u.value) == null ? void 0 : l.updateActiveTime();
+      }, 300);
+    };
+    return v(
+      () => n.modelValue,
+      (l) => {
+        a.value = l != "" ? l : c().toDate();
+      },
+      { immediate: !0 }
+    ), (l, t) => (s(), p(i(y), {
+      modelValue: r.value,
+      "onUpdate:modelValue": [
+        t[2] || (t[2] = (o) => r.value = o),
+        V
+      ],
+      "menu-classes": "min-w-fit",
+      distance: 10,
+      "is-disabled": e.isDisabled
+    }, {
+      menu: m(() => [
+        r.value ? (s(), p(i(S), {
+          key: 0,
+          ref_key: "popup",
+          ref: u,
+          modelValue: a.value,
+          "onUpdate:modelValue": [
+            t[0] || (t[0] = (o) => a.value = o),
+            t[1] || (t[1] = (o) => l.$emit("update:modelValue", o))
+          ]
+        }, null, 8, ["modelValue"])) : g("", !0)
+      ]),
+      default: m(() => [
+        h(i(x), {
+          icon: e.icon,
+          "error-message": e.errorMessage,
+          label: e.label,
+          hint: e.hint,
+          "pre-fill": e.preFill,
+          placeholder: e.placeholder,
+          "model-value": i(c)(a.value).format("hh:mm A"),
+          "is-required": e.isRequired,
+          "label-icon": e.labelIcon,
+          "tooltip-text": e.tooltipText,
+          "tooltip-options": e.tooltipOptions,
+          "is-readonly": !0,
+          disabled: e.isDisabled
+        }, null, 8, ["icon", "error-message", "label", "hint", "pre-fill", "placeholder", "model-value", "is-required", "label-icon", "tooltip-text", "tooltip-options", "disabled"])
+      ]),
+      _: 1
+    }, 8, ["modelValue", "is-disabled"]));
+  }
+};
+export {
+  T as default
+};

package/dist/OcTimePopup-CXGhaOev-Bh4cnZdX.js

@@ -0,0 +1,130 @@
+import { ref as a, onMounted as R, openBlock as d, createElementBlock as p, createElementVNode as t, Fragment as w, renderList as m, normalizeClass as y, toDisplayString as x } from "vue";
+import { d as L } from "./index-DyVteXE3-BhWmKQss.js";
+const $ = { class: "overflow-hidden flex items-center relative rounded shadow-normal w-fit px-3" }, F = { class: "before:block after:block before:w-full before:h-[67px] after:w-full after:h-[67px]" }, z = ["onClick"], N = { class: "before:block after:block before:w-full before:h-[67px] after:w-full after:h-[67px]" }, O = ["onClick"], Y = { class: "before:block after:block before:w-full before:h-[67px] after:w-full after:h-[67px]" }, j = ["onClick"], G = {
+  __name: "OcTimePopup",
+  props: {
+    modelValue: {
+      type: [String, Date],
+      default: () => /* @__PURE__ */ new Date()
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(D, { expose: A, emit: P }) {
+    const u = D, T = P, r = a(
+      u.modelValue.getHours() <= 12 ? u.modelValue.getHours() : u.modelValue.getHours() - 12
+    ), c = a(u.modelValue.getMinutes()), i = a(u.modelValue.getHours() >= 12 ? "PM" : "AM"), v = a(null), g = a(null), h = a(null), n = () => {
+      const l = (b, k) => {
+        b && k && b.scrollTo({
+          top: k.offsetTop - b.clientHeight / 2 + k.clientHeight / 2,
+          behavior: "smooth"
+        });
+      }, o = v.value.querySelector(`.w-7:nth-child(${r.value})`), e = g.value.querySelector(
+        `.w-7:nth-child(${c.value + 1})`
+      ), f = h.value.querySelector(
+        `.w-7:nth-child(${i.value === "AM" ? 1 : 2})`
+      );
+      l(v.value, o), l(g.value, e), l(h.value, f), T(
+        "update:modelValue",
+        new Date(
+          (/* @__PURE__ */ new Date()).getFullYear(),
+          (/* @__PURE__ */ new Date()).getMonth(),
+          (/* @__PURE__ */ new Date()).getDate(),
+          i.value === "AM" ? r.value === 12 ? 0 : r.value : r.value === 12 ? 12 : r.value + 12,
+          c.value,
+          0,
+          0
+        )
+      );
+    };
+    R(n);
+    const H = (l) => {
+      r.value = l, n();
+    }, q = (l) => {
+      c.value = l, n();
+    }, E = (l) => {
+      i.value = l, n();
+    }, s = a(null), M = a(null), C = a(null), S = a(null), _ = () => {
+      const l = s.value;
+      M.value.forEach((o, e) => {
+        Math.abs(o.getBoundingClientRect().top - l.getBoundingClientRect().top) < 12 && (r.value = e + 1, n());
+      });
+    }, V = () => {
+      const l = s.value;
+      C.value.forEach((o, e) => {
+        Math.abs(o.getBoundingClientRect().top - l.getBoundingClientRect().top) < 12 && (c.value = e, n());
+      });
+    }, B = () => {
+      const l = s.value;
+      S.value.forEach((o, e) => {
+        Math.abs(o.getBoundingClientRect().top - l.getBoundingClientRect().top) < 12 && (i.value = e === 0 ? "AM" : "PM", n());
+      });
+    };
+    return A({
+      updateActiveTime: n
+    }), (l, o) => (d(), p("div", $, [
+      t("div", {
+        ref_key: "triggerBox",
+        ref: s,
+        class: "bg-oc-accent-1-50-tr border-y absolute h-7 left-0 right-0"
+      }, null, 512),
+      t("div", {
+        ref_key: "hourList",
+        ref: v,
+        class: "w-7 inline-block max-h-[157px] overflow-y-auto hidden-scrollbar",
+        onScrollend: _,
+        onTouchend: _
+      }, [
+        t("ul", F, [
+          (d(), p(w, null, m(12, (e) => t("li", {
+            key: e,
+            ref_for: !0,
+            ref_key: "targetHour",
+            ref: M,
+            class: y(["w-7 cursor-pointer aspect-square leading-[24px] text-center", r.value === e ? "opacity-100" : "opacity-50"]),
+            onClick: (f) => H(e)
+          }, x(e.toString().padStart(2, "0")), 11, z)), 64))
+        ])
+      ], 544),
+      o[0] || (o[0] = t("span", null, ":", -1)),
+      t("div", {
+        ref_key: "minutesList",
+        ref: g,
+        class: "w-7 inline-block max-h-[157px] overflow-y-auto hidden-scrollbar",
+        onScrollend: V,
+        onTouchend: V
+      }, [
+        t("ul", N, [
+          (d(), p(w, null, m(60, (e) => t("li", {
+            key: e,
+            ref_for: !0,
+            ref_key: "targetMinute",
+            ref: C,
+            class: y(["w-7 cursor-pointer aspect-square leading-[24px] text-center", c.value === e - 1 ? "opacity-100" : "opacity-50"]),
+            onClick: (f) => q(e - 1)
+          }, x((e - 1).toString().padStart(2, "0")), 11, O)), 64))
+        ])
+      ], 544),
+      t("div", {
+        ref_key: "periodList",
+        ref: h,
+        class: "w-7 inline-block max-h-[157px] overflow-y-auto hidden-scrollbar",
+        onScrollend: B,
+        onTouchend: B
+      }, [
+        t("ul", Y, [
+          (d(), p(w, null, m(2, (e) => t("li", {
+            key: e,
+            ref_for: !0,
+            ref_key: "targetPeriod",
+            ref: S,
+            class: y(["w-7 aspect-square cursor-pointer leading-[24px] text-center", i.value === (e === 1 ? "AM" : "PM") ? "opacity-100" : "opacity-50"]),
+            onClick: (f) => E(e === 1 ? "AM" : "PM")
+          }, x(e === 1 ? "AM" : "PM"), 11, j)), 64))
+        ])
+      ], 544)
+    ]));
+  }
+}, J = /* @__PURE__ */ L(G, [["__scopeId", "data-v-434f8eef"]]);
+export {
+  J as default
+};

package/dist/{QuillEditor-CEkhRyf0.js → QuillEditor-CTgEQ0_O.js}

@@ -1,11 +1,8 @@
 var la = Object.defineProperty;
 var oa = (n, t, e) => t in n ? la(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
 var S = (n, t, e) => oa(n, typeof t != "symbol" ? t + "" : t, e);
+import { c as ee, g as Gl } from "./_commonjsHelpers-DaMA6jEr.js";
 import { defineComponent as aa, onMounted as ca, onBeforeUnmount as ua, ref as Fi, watch as Os, nextTick as Hi, h as ha } from "vue";
-var ee = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
-function Gl(n) {
-  return n && n.__esModule && Object.prototype.hasOwnProperty.call(n, "default") ? n.default : n;
-}
 var Kl = typeof global == "object" && global && global.Object === Object && global, fa = typeof self == "object" && self && self.Object === Object && self, Dt = Kl || fa || Function("return this")(), ie = Dt.Symbol, Vl = Object.prototype, da = Vl.hasOwnProperty, ga = Vl.toString, yn = ie ? ie.toStringTag : void 0;
 function pa(n) {
   var t = da.call(n, yn), e = n[yn];
@@ -7522,7 +7519,7 @@ N.register({
   "ui/color-picker": Qo,
   "ui/tooltip": ta
 }, !0);
-const cp = N.import("delta"), bp = aa({
+const cp = N.import("delta"), yp = aa({
   name: "QuillEditor",
   inheritAttrs: !1,
   props: {
@@ -7723,7 +7720,5 @@ const cp = N.import("delta"), bp = aa({
 });
 export {
   N as Q,
-  bp as a,
-  ee as c,
-  Gl as g
+  yp as a
 };

package/dist/SubPlanCard-DHj4RHJZ-BXLF6lxf.js

@@ -0,0 +1,79 @@
+import { computed as n, openBlock as t, createElementBlock as o, normalizeClass as p, createElementVNode as e, toDisplayString as r, createBlock as x, unref as d, createCommentVNode as m, createTextVNode as v, Fragment as k, renderList as T, createVNode as w } from "vue";
+import { d as P, t as C, G as F, g as E } from "./index-DyVteXE3-BhWmKQss.js";
+const _ = { class: "z-10 flex flex-col gap-4 p-9 relative" }, A = { class: "flex items-center gap-4" }, B = { class: "font-medium text-xl" }, N = { class: "flex gap-3 items-center mb-5" }, V = { class: "flex items-start gap-2" }, z = { class: "text-[24px] font-medium tracking-tighter" }, S = { class: "text-[40px] leading-none font-medium" }, j = { key: 0 }, q = {
+  __name: "SubPlanCard",
+  props: {
+    planTier: {
+      type: Object,
+      required: !0
+    },
+    isPlanActive: Boolean
+  },
+  emits: ["select"],
+  setup(a, { emit: g }) {
+    const l = a, b = g, i = n(() => l.planTier.name === "Free"), y = n(() => l.planTier.name === "Pro"), c = n(() => l.planTier.name === "Plus"), f = n(() => l.planTier.billing_frequency === "monthly") ? "/month" : "/year", h = n(() => l.planTier.name === "free" ? "For individual who just starting their business" : l.planTier.name === "pro" ? "For business who needs more features to increase their sales" : "For business who want in-depth analytics to win business and work");
+    return (L, s) => (t(), o("div", {
+      class: p(["tier-card rounded relative shadow-sm max-w-[300px]", {
+        "!bg-oc-bg-dark border border-oc-gray-200": i.value,
+        "tier-card--pro border border-oc-gray-200": y.value,
+        "tier-card--plus bg-oc-gray-900 text-white": c.value,
+        "border-2 border-oc-primary-500": a.isPlanActive
+      }])
+    }, [
+      e("div", _, [
+        e("div", A, [
+          e("span", B, r(a.planTier.name), 1),
+          a.isPlanActive ? (t(), x(d(C), {
+            key: 0,
+            label: "Current Plan"
+          })) : m("", !0)
+        ]),
+        e("div", {
+          class: p(["text-oc-text-400 text-sm mb-5", { "!text-oc-text-200": c.value }])
+        }, r(h.value), 3),
+        e("div", N, [
+          e("div", V, [
+            e("span", z, r(a.planTier.currency.toUpperCase()), 1),
+            e("span", S, r(a.planTier.price), 1)
+          ]),
+          i.value ? m("", !0) : (t(), o("span", {
+            key: 0,
+            class: p(["text-oc-text-400 text-base", { "!text-oc-text-200": c.value }])
+          }, r(d(f)), 3))
+        ]),
+        a.isPlanActive ? m("", !0) : (t(), x(d(F), {
+          key: 0,
+          label: i.value ? "Change to Free" : "Start 14 day trial",
+          variant: i.value ? "secondary" : "primary",
+          size: "big",
+          class: "mb-5",
+          onClick: s[0] || (s[0] = (u) => b("select"))
+        }, null, 8, ["label", "variant"])),
+        e("div", {
+          class: p(["flex flex-col gap-3", { "text-oc-text-200": c.value }])
+        }, [
+          i.value ? m("", !0) : (t(), o("span", j, [
+            s[1] || (s[1] = v(" Everything on ")),
+            e("strong", null, r(a.planTier.code === "tier_s" ? "FREE" : "PRO"), 1),
+            s[2] || (s[2] = v(" includes: "))
+          ])),
+          (t(!0), o(k, null, T(a.planTier.features, (u) => (t(), o("span", {
+            key: u.id,
+            class: "flex gap-3 items-center"
+          }, [
+            w(d(E), {
+              name: "check-fill",
+              class: "text-oc-primary-500",
+              height: "16",
+              width: "16"
+            }),
+            e("span", null, r(u.name), 1)
+          ]))), 128))
+        ], 2)
+      ])
+    ], 2));
+  }
+}, $ = /* @__PURE__ */ P(q, [["__scopeId", "data-v-1c173638"]]);
+export {
+  $ as default
+};

package/dist/ThumbnailSection-CJBS0QXp-CzVwtuYN.js

@@ -0,0 +1,41 @@
+import { openBlock as n, createElementBlock as r, createElementVNode as l, createVNode as c, unref as i, toDisplayString as m } from "vue";
+import { G as o } from "./index-DyVteXE3-BhWmKQss.js";
+const d = { class: "flex flex-col" }, u = { class: "w-full relative group" }, f = { class: "w-full h-full bg-black/25 absolute top-0 left-0 hidden group-hover:flex rounded-lg" }, p = { class: "w-full px-6 gap-3 m-auto flex" }, v = ["src", "alt"], x = { class: "mt-4 text-md text-center" }, w = {
+  __name: "ThumbnailSection",
+  props: {
+    section: Object
+  },
+  emits: ["add", "customize"],
+  setup(e) {
+    return (s, t) => (n(), r("div", d, [
+      l("div", u, [
+        l("div", f, [
+          l("div", p, [
+            c(i(o), {
+              class: "w-1/2",
+              variant: "secondary",
+              label: "Customize",
+              size: "small",
+              onClick: t[0] || (t[0] = (a) => s.$emit("customize", e.section))
+            }),
+            c(i(o), {
+              class: "w-1/2",
+              label: "Add",
+              size: "small",
+              onClick: t[1] || (t[1] = (a) => s.$emit("add", e.section))
+            })
+          ])
+        ]),
+        l("img", {
+          class: "w-full",
+          src: e.section.preview,
+          alt: e.section.title
+        }, null, 8, v)
+      ]),
+      l("div", x, m(e.section.title), 1)
+    ]));
+  }
+};
+export {
+  w as default
+};