@pixelium/web-vue 0.0.1-beta

package/dist/pixelium-vue.js

@@ -0,0 +1,1673 @@
+var Ye = Object.defineProperty;
+var Ze = (t, e, r) => e in t ? Ye(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
+var ge = (t, e, r) => Ze(t, typeof e != "symbol" ? e + "" : e, r);
+import { defineComponent as C, createElementBlock as H, openBlock as M, normalizeStyle as I, createElementVNode as Y, provide as de, ref as b, onMounted as F, nextTick as Be, onBeforeUnmount as J, renderSlot as q, computed as x, getCurrentInstance as se, inject as ve, useSlots as Me, watch as he, normalizeClass as N, createCommentVNode as Pe, unref as T, createBlock as pe, createVNode as P, Transition as Fe, useModel as ze, Fragment as Oe, renderList as Se, useAttrs as et, Teleport as tt, mergeProps as nt, render as rt, onUpdated as st, useId as ot, onScopeDispose as at } from "vue";
+const ke = /* @__PURE__ */ C({
+  props: {
+    size: {},
+    color: {}
+  },
+  setup(t) {
+    const e = t;
+    return (r, n) => (M(), H("svg", {
+      class: "px-icon-hn",
+      style: I({ color: e.color, fontSize: e.size + "px" }),
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24"
+    }, [...n[0] || (n[0] = [
+      Y("path", { d: "M23 9v6h-1v2h-3v-2h1V9h-1V7h-1V6h-1V5h-2V4h-2V3h-1V1h3v1h2v1h2v1h1v1h1v2h1v2z" }, null, -1)
+    ])], 4));
+  }
+});
+function ut(t, e, r, n) {
+  let s = Math.atan2(e, t);
+  return s < 0 && (s += Math.PI * 2), s >= r && s <= n;
+}
+function lt(t, e, r, n, s, o, a, u) {
+  const l = [
+    [e, r],
+    [-e, r],
+    [e, -r],
+    [-e, -r],
+    [r, e],
+    [-r, e],
+    [r, -e],
+    [-r, -e]
+  ];
+  for (const [i, h] of l)
+    ut(i, h, o, a) && t.fillRect(n + i, s + h, u, u);
+}
+function le(t, e, r, n, s = 0, o = Math.PI * 2, a) {
+  let u = 0, l = n, i = 3 - 2 * n;
+  for (; u <= l + a; )
+    lt(t, u, l, e, r, s, o, a), u += a, i > 0 ? (l -= a, i += 4 * (u - l) + 10) : i += 4 * u + 6;
+}
+function it(t, e, r, n) {
+  const s = t.getImageData(0, 0, t.canvas.width, t.canvas.height), o = s.data, a = (r * t.canvas.width + e) * 4, u = o[a], l = o[a + 1], i = o[a + 2], h = o[a + 3];
+  if (!(u === 0 && l === 0 && i === 0 && h === 0) || n.r === 0 && n.g === 0 && n.b === 0 && n.a === 0)
+    return;
+  const d = [[e, r]];
+  for (; d.length; ) {
+    const c = d.pop();
+    if (!c)
+      continue;
+    const [f, g] = c, p = (g * t.canvas.width + f) * 4;
+    f < 0 || f >= t.canvas.width || g < 0 || g >= t.canvas.height || o[p] !== u || o[p + 1] !== l || o[p + 2] !== i || o[p + 3] !== h || (o[p] = n.r, o[p + 1] = n.g, o[p + 2] = n.b, o[p + 3] = n.a, d.push([f + 1, g]), d.push([f - 1, g]), d.push([f, g + 1]), d.push([f, g - 1]));
+  }
+  t.putImageData(s, 0, 0);
+}
+const D = {
+  r: 0,
+  g: 0,
+  b: 0,
+  a: 0
+}, He = 3e3;
+var z = /* @__PURE__ */ ((t) => (t.XS = "xs", t.SM = "sm", t.MD = "md", t.LG = "lg", t.XL = "xl", t.XXL = "xxl", t))(z || {});
+const U = () => typeof window < "u";
+function De(t) {
+  if (!Number.isInteger(t) || t <= 0)
+    throw new RangeError("max must be a positive integer");
+  const e = /* @__PURE__ */ new Map();
+  return {
+    get(r) {
+      const n = e.get(r);
+      if (n !== void 0)
+        return e.delete(r), e.set(r, n), n;
+    },
+    set(r, n) {
+      e.has(r) ? e.delete(r) : e.size >= t && e.delete(e.keys().next().value), e.set(r, n);
+    },
+    delete(r) {
+      return e.delete(r);
+    },
+    clear() {
+      e.clear();
+    },
+    has(r) {
+      return e.has(r);
+    },
+    get size() {
+      return e.size;
+    }
+  };
+}
+const Le = De(120);
+function oe(t) {
+  const e = Le.get(t);
+  if (e) return { ...e };
+  let r = { r: 0, g: 0, b: 0, a: 255 };
+  if (t.startsWith("rgb(") || t.startsWith("rgba(")) {
+    const n = t.match(/rgba?\(\s*(\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)/i);
+    n && (r.r = parseInt(n[1], 10), r.g = parseInt(n[2], 10), r.b = parseInt(n[3], 10), n[4] && (r.a = Math.round(parseFloat(n[4]) * 255)));
+  } else t.startsWith("#") && (t = t.slice(1), t.length === 3 ? (r.r = parseInt(t[0] + t[0], 16), r.g = parseInt(t[1] + t[1], 16), r.b = parseInt(t[2] + t[2], 16)) : t.length === 4 ? (r.r = parseInt(t[0] + t[0], 16), r.g = parseInt(t[1] + t[1], 16), r.b = parseInt(t[2] + t[2], 16), r.a = parseInt(t[3] + t[3], 16)) : t.length === 6 ? (r.r = parseInt(t.slice(0, 2), 16), r.g = parseInt(t.slice(2, 4), 16), r.b = parseInt(t.slice(4, 6), 16)) : t.length === 8 && (r.r = parseInt(t.slice(0, 2), 16), r.g = parseInt(t.slice(2, 4), 16), r.b = parseInt(t.slice(4, 6), 16), r.a = parseInt(t.slice(6, 8), 16)));
+  return Le.set(t, r), { ...r };
+}
+const v = (t, e) => U() ? oe(getComputedStyle(document.documentElement).getPropertyValue(`--px-${t}-${e}`)) : D;
+function _e(t) {
+  return t <= 0.04045 ? t / 12.92 : Math.pow((t + 0.055) / 1.055, 2.4);
+}
+function ct(t, e, r, n = 255) {
+  const s = t / 255, o = e / 255, a = r / 255, u = _e(s), l = _e(o), i = _e(a);
+  let h = u * 0.41239079926595934 + l * 0.357584339383878 + i * 0.1804807884018343, d = u * 0.21263900587151027 + l * 0.715168678767756 + i * 0.07219231536073371, c = u * 0.01933081871559182 + l * 0.11919477979462598 + i * 0.9505321522496607, f = 0.819022437996703 * h + 0.3619062600528904 * d - 0.1288737815209879 * c, g = 0.0329836539323885 * h + 0.9292868615863434 * d + 0.0361446663506424 * c, p = 0.0481771893596242 * h + 0.2642395317527308 * d + 0.6335478284694309 * c;
+  f = Math.cbrt(f), g = Math.cbrt(g), p = Math.cbrt(p);
+  const R = 0.210454268309314 * f + 0.7936177747023054 * g - 0.0040720430116193 * p, G = 1.9779985324311684 * f - 2.42859224204858 * g + 0.450593709617411 * p, k = 0.0259040424655478 * f + 0.7827717124575296 * g - 0.8086757549230774 * p, _ = Math.sqrt(G * G + k * k);
+  let $ = Math.atan2(k, G) * 180 / Math.PI;
+  return $ < 0 && ($ += 360), {
+    l: R,
+    c: _,
+    h: $,
+    a: n
+  };
+}
+function ye(t) {
+  return t <= 31308e-7 ? 12.92 * t : 1.055 * Math.pow(t, 1 / 2.4) - 0.055;
+}
+function ie(t, e, r, n = 255) {
+  const s = r * Math.PI / 180, o = e * Math.cos(s), a = e * Math.sin(s);
+  let u = t + 0.3963377773761749 * o + 0.2158037573099136 * a, l = t - 0.1055613458156586 * o - 0.0638541728258133 * a, i = t - 0.0894841775298119 * o - 1.2914855480194092 * a;
+  u = u * u * u, l = l * l * l, i = i * i * i;
+  const h = 1.2268798758459243 * u - 0.5578149944602171 * l + 0.2813910456659647 * i, d = -0.0405757452148008 * u + 1.112286803280317 * l - 0.0717110580655164 * i, c = -0.0763729366746601 * u - 0.4214933324022432 * l + 1.5869240198367816 * i, f = 3.2409699419045226 * h - 1.537383177570094 * d - 0.4986107602930034 * c, g = -0.9692436362808796 * h + 1.8759675015077202 * d + 0.04155505740717559 * c, p = 0.05563007969699366 * h - 0.20397695888897652 * d + 1.0569715142428786 * c, R = ye(f), G = ye(g), k = ye(p);
+  return {
+    r: Math.round(R * 255),
+    g: Math.round(G * 255),
+    b: Math.round(k * 255),
+    a: n
+  };
+}
+function ft(t, e, r) {
+  const { r: n, g: s, b: o } = ie(e, t, r);
+  return n >= 0 && n <= 255 && s >= 0 && s <= 255 && o >= 0 && o <= 255;
+}
+function xe(t, e) {
+  let n = 0, s = 2;
+  for (; s - n > 1e-6; ) {
+    const o = (n + s) / 2;
+    ft(o, t, e) ? n = o : s = o;
+  }
+  return n;
+}
+const Ie = De(60);
+function re(t, e, r, n = 255, s = !1) {
+  const o = `${t},${e},${r},${n},${s}`, a = Ie.get(o);
+  if (a) return a;
+  const u = ct(t, e, r, n);
+  let l = [];
+  const i = u.c < 0.049 ? 0 : 0.049, h = s ? Math.min(Math.max(u.l, 0.05), 0.85) : Math.min(Math.max(u.l, 0.15), 0.95), d = Math.min(Math.max(u.c, i), xe(h, u.h)), c = Math.min(h + 0.35, s ? 0.85 : 0.9), f = Math.max(h - 0.35, s ? 0.1 : 0.15), g = s ? (h - f) / 4 : (c - h) / 4, p = (d - i) / 4, R = s ? (c - h) / 3 : (h - f) / 3, G = (d - i) / 3;
+  for (let k = 0; k < 5; k++) {
+    const _ = h + (s ? -1 : 1) * g * (5 - k), $ = Math.min(d - p * (5 - k), xe(_, u.h)), j = u.h, B = ie(_, $, j, n);
+    l.push(B);
+  }
+  l.push(ie(h, d, u.h, n));
+  for (let k = 0; k < 4; k++) {
+    const _ = h - (s ? -1 : 1) * R * (k + 1), $ = Math.min(d - G * (k + 1), xe(_, u.h)), j = u.h, B = ie(_, $, j, n);
+    l.push(B);
+  }
+  return Ie.set(o, l), l;
+}
+const E = (t) => `rgba(${t.r}, ${t.g}, ${t.b}, ${+(t.a / 255)})`, Ge = /* @__PURE__ */ C({
+  name: "ButtonGroup",
+  __name: "index",
+  props: {
+    borderRadius: null,
+    shape: { default: "default" },
+    size: { default: "medium" },
+    disabled: { type: Boolean, default: !1 },
+    loading: { type: Boolean },
+    variant: { default: "primary" }
+  },
+  setup(t) {
+    de("px-button-group-props", t);
+    const r = b(null), n = () => {
+      Be(() => {
+        r.value && r.value.querySelectorAll("[data-px-button]").forEach((s) => s.dispatchEvent(new CustomEvent("slot-changed")));
+      });
+    };
+    if (U()) {
+      const s = new MutationObserver(n);
+      F(() => {
+        Be(() => {
+          r.value && s.observe(r.value, { childList: !0 });
+        }), n();
+      }), J(() => {
+        s.disconnect();
+      });
+    }
+    return (s, o) => (M(), H("div", {
+      class: "pixelium px-button-group",
+      ref_key: "slotWrapper",
+      ref: r
+    }, [
+      q(s.$slots, "default")
+    ], 512));
+  }
+}), dt = new RegExp("[-_\\s]|(?<=[a-z])(?=[A-Z])|(?<=[A-Z])(?=[A-Z][a-z])|(\\d+)");
+function vt(t) {
+  return t.split(dt).filter(Boolean);
+}
+function ht(t) {
+  const e = vt(t);
+  let r = "";
+  const n = e.length;
+  for (let s = 0; s < n; s++)
+    r += e[s].toLowerCase() + (s < n - 1 ? "-" : "");
+  return r;
+}
+function We(t) {
+  return typeof t == "function";
+}
+function ae(t) {
+  return typeof t == "string" || t instanceof String;
+}
+function A(t) {
+  return typeof t == "number" || t instanceof Number;
+}
+function Ce(t) {
+  return Array.isArray(t);
+}
+function Z(t) {
+  return t == null;
+}
+function Ne(...t) {
+  return t.reduce((e, r) => {
+    if (Z(r))
+      return e;
+    const n = Object.keys(r);
+    for (const s of n) {
+      const o = e[s], a = r[s];
+      (Z(o) || !Z(a)) && (e[s] = a);
+    }
+    return e;
+  }, {});
+}
+// @ts-ignore
+typeof process < "u" && process.env.NODE_ENV;
+function pt(t, e, r, n = "primary", s, o, a) {
+  if (s)
+    switch (r) {
+      case "text":
+        return t ? D : a ? s[1] : o && !e ? s[0] : D;
+      case "outline":
+        return D;
+      case "plain":
+        return t ? s[0] : a ? s[2] : o && !e ? s[1] : s[0];
+      default:
+        return t ? s[1] : a ? s[5] : o && !e ? s[4] : s[5];
+    }
+  else if (n !== "info")
+    switch (r) {
+      case "text":
+        return t ? D : a ? v(n, 2) : o && !e ? v(n, 1) : D;
+      case "outline":
+        return D;
+      case "plain":
+        return t ? v(n, 1) : a ? v(n, 3) : o && !e ? v(n, 2) : v(n, 1);
+      default:
+        return t ? v(n, 2) : a ? v(n, 6) : o && !e ? v(n, 5) : v(n, 6);
+    }
+  else
+    switch (r) {
+      case "outline":
+        return D;
+      case "text":
+        return t ? D : a ? v("neutral", 3) : o && !e ? v("neutral", 2) : D;
+      case "plain":
+        return t ? v("neutral", 1) : a ? v("neutral", 4) : o && !e ? v("neutral", 3) : v("neutral", 1);
+      default:
+        return t ? v("neutral", 1) : a ? v("neutral", 3) : o && !e ? v("neutral", 2) : v("neutral", 1);
+    }
+}
+function mt(t, e, r, n = "primary", s, o, a) {
+  if (s)
+    switch (r) {
+      case "text":
+        return t ? D : a ? s[1] : o && !e ? s[0] : D;
+      case "plain":
+        return t ? s[1] : a ? s[3] : o && !e ? s[2] : s[1];
+      case "outline":
+        return t ? s[1] : a ? s[6] : o && !e ? s[4] : s[5];
+      default:
+        return t ? v("neutral", 8) : v("neutral", 10);
+    }
+  else if (n !== "info")
+    switch (r) {
+      case "text":
+        return t ? D : a ? v(n, 2) : o && !e ? v(n, 1) : D;
+      case "plain":
+        return t ? v(n, 2) : a ? v(n, 4) : o && !e ? v(n, 3) : v(n, 2);
+      case "outline":
+        return t ? v(n, 1) : a ? v(n, 7) : o && !e ? v(n, 5) : v(n, 6);
+      default:
+        return t ? v("neutral", 8) : v("neutral", 10);
+    }
+  else {
+    switch (r) {
+      case "text":
+        return t ? D : a ? v("neutral", 3) : o && !e ? v("neutral", 2) : D;
+      case "plain":
+        return t ? v("neutral", 5) : a ? v("neutral", 9) : o && !e ? v("neutral", 8) : v("neutral", 7);
+      case "outline":
+        return t ? v("neutral", 6) : a ? v("neutral", 8) : o && !e ? v("neutral", 9) : v("neutral", 10);
+    }
+    return t ? v("neutral", 8) : v("neutral", 10);
+  }
+}
+const gt = (t, e, r, n, s, o, a, u, l, i, h, d) => {
+  t.fillStyle = `rgba(${a.r}, ${a.g}, ${a.b}, ${a.a / 255})`;
+  for (let f = 0; f < 4; f++)
+    s[f] > u && (!(f === 1 || f === 2) || i && (d || l === "text") || !i) && le(t, n[f][0], n[f][1], s[f], o[f][0], o[f][1], u);
+  n[1][0] + u > n[0][0] && t.fillRect(n[0][0], 0, n[1][0] - n[0][0] + u, u), n[2][1] + u > n[1][1] && (i && (d || l === "text") || !i) && t.fillRect(e - u, n[1][1], u, n[2][1] - n[1][1] + u), n[3][0] < n[2][0] + u && t.fillRect(n[3][0], r - u, n[2][0] - n[3][0] + u, u), !(i && !h && l !== "text") && n[3][1] + u > n[0][1] && t.fillRect(0, n[0][1], u, n[3][1] - n[0][1] + u), i && !h && l !== "text" && t.fillRect(u / 2, 0, u / 2, r), i && !d && l !== "text" && t.fillRect(e - 2 * u - 1, 0, u, r);
+};
+function Re(t, e, r = "primary", n, s, o) {
+  return n ? t ? n[0] : o ? n[6] : s && !e ? n[3] : n[4] : r !== "info" ? t ? v(r, 1) : o ? v(r, 7) : s && !e ? v(r, 4) : v(r, 5) : t ? v("neutral", 2) : o ? v("neutral", 5) : s && !e ? v("neutral", 4) : v("neutral", 3);
+}
+function ue(t, e) {
+  return Math.ceil((-6 + Math.sqrt(36 - 48 * t + 32 * t * e)) / (8 * t)) * t;
+}
+const _t = (t, e, r, n, s, o, a, u, l, i, h = "primary", d, c, f, g, p, R) => {
+  const G = ue(a, s[2]), k = ue(a, s[3]), _ = ue(a, s[1]), $ = ue(a, s[0]), j = +!(c && !f && i !== "text");
+  if (!R || u) {
+    const B = Re(u, l, h, d, p, R);
+    t.fillStyle = `rgba(${B.r}, ${B.g}, ${B.b}, ${B.a / 255})`;
+    for (let m = 1; m < 3; m++)
+      s[m] > a && le(t, n[m][0] - a, n[m][1], s[m], o[m][0], o[m][1], a);
+    const K = n[2][0] + a - n[3][0] + k * j + G;
+    K > 0 && t.fillRect(n[3][0] - k * j, r - a * 2, K, a);
+    const Q = n[2][1] + a - n[1][1] + _ + G;
+    Q > 0 && t.fillRect(e - a * 2 - (g ? 0 : +c * a * 1), n[1][1] - _, a, Q);
+  } else {
+    const B = Re(u, l, h, d, p, R);
+    t.fillStyle = `rgba(${B.r}, ${B.g}, ${B.b}, ${B.a / 255})`, s[0] > a && le(t, n[0][0] + a, n[0][1], s[0], o[0][0], o[0][1], a), s[3] > a && le(t, n[3][0] + a, n[3][1], s[3], o[3][0], o[3][1], a);
+    const K = n[1][0] + a - n[0][0] + _ + $ * j;
+    K > 0 && t.fillRect(n[0][0] - $ * j, a, K, a);
+    const Q = a + n[3][1] - n[0][1] + k + $;
+    Q > 0 && t.fillRect(a, n[0][1] - $, a, Q);
+  }
+}, L = (t, e, r) => A(e) ? Math.max(e, r) : Math.max(t.height * parseFloat(e) / 100, r), X = (t) => Array(4).fill(t), yt = (t, e, r) => {
+  if (!e) return X(r);
+  if (!Ce(e))
+    return X(L(t, e, r));
+  switch (e.length) {
+    case 1:
+      return X(L(t, e[0], r));
+    case 2: {
+      const n = L(t, e[0], r), s = L(t, e[1], r);
+      return [n, s, n, s];
+    }
+    case 3: {
+      const n = L(t, e[0], r), s = L(t, e[2], r), o = L(t, e[1], r);
+      return [n, o, s, o];
+    }
+    default:
+      return e.map((n) => L(t, n, r));
+  }
+}, xt = (t, e, r, n, s) => {
+  if (!e) return X(r);
+  if (!Ce(e)) {
+    const o = L(t, e, r);
+    return s ? [r, o, o, r] : n ? [o, r, r, o] : X(r);
+  }
+  switch (e.length) {
+    case 1:
+      const o = L(t, e[0], r);
+      return s ? [r, o, o, r] : n ? [o, r, r, o] : X(r);
+    case 2: {
+      const a = L(t, e[0], r), u = L(t, e[1], r);
+      return s ? [r, u, u, r] : n ? [a, r, r, a] : X(r);
+    }
+    case 3: {
+      const a = L(t, e[0], r), u = L(t, e[2], r), l = L(t, e[1], r);
+      return s ? [r, l, u, r] : n ? [a, r, r, l] : X(r);
+    }
+    default:
+      return s ? [r, L(t, e[1], r), L(t, e[2], r), r] : n ? [L(t, e[0], r), r, r, L(t, e[3], r)] : X(r);
+  }
+}, bt = (t, e, r, n, s, o, a) => {
+  if (s) {
+    if (r)
+      return xt(t, r, e, o, a);
+    switch (n) {
+      case "round":
+        const u = X(L(t, "50%", e));
+        return a ? u.map((l, i) => i < 1 || i > 2 ? e : l) : o ? u.map((l, i) => i > 0 && i < 3 ? e : l) : X(e);
+      default:
+        return X(e);
+    }
+  } else {
+    if (r)
+      return yt(t, r, e);
+    switch (n) {
+      case "round":
+      case "circle":
+        return X(L(t, "50%", e));
+      default:
+        return X(e);
+    }
+  }
+}, wt = (t, e, r, n, s, o) => {
+  if (!(!t || e === "primary")) {
+    if (r)
+      return E(e === "plain" ? t[2] : t[1]);
+    if (n) return E(t[5]);
+    if (o && e !== "plain") return E(t[6]);
+    switch (e) {
+      case "text":
+        return E(t[5]);
+      case "outline":
+        return E(s ? t[4] : t[5]);
+      case "plain":
+        return E(t[5]);
+      default:
+        return;
+    }
+  }
+}, Te = /* @__PURE__ */ new WeakMap(), te = /* @__PURE__ */ new WeakMap(), $t = (t) => () => {
+  const e = te.get(t);
+  e == null || e.forEach((r) => r());
+}, ee = () => {
+  const t = b(!1), e = b(void 0);
+  function r(s) {
+    t.value = s.matches;
+  }
+  if (U()) {
+    const s = window.matchMedia("(prefers-color-scheme: dark)");
+    r(s), s.addEventListener("change", r), J(() => {
+      s.removeEventListener("change", r);
+    });
+  }
+  const n = () => {
+    if (U()) {
+      let s = !1, o = !1;
+      document.documentElement.className.split(" ").forEach((a) => {
+        a === "dark" && (s = !0), a === "light" && (o = !0);
+      }), e.value = s ? !0 : o ? !1 : void 0;
+    }
+  };
+  return U() && (F(() => {
+    const s = Te.get(document.documentElement) || new MutationObserver($t(document.documentElement));
+    Te.set(document.documentElement, s), s.observe(document.documentElement, { attributes: !0, attributeFilter: ["class"] }), te.set(document.documentElement, [...te.get(document.documentElement) || [], n]), n();
+  }), J(() => {
+    te.set(
+      document.documentElement,
+      (te.get(document.documentElement) || []).filter((s) => s !== n)
+    );
+  })), x(() => e.value ?? t.value);
+}, qe = (t, e, r = !0) => {
+  if (!U())
+    return null;
+  const n = new ResizeObserver(e);
+  return F(() => {
+    setTimeout(() => {
+      r && e(), t.value && n.observe(t.value);
+    });
+  }), J(() => {
+    n.disconnect();
+  }), n;
+}, Mt = ["disabled", "type", "autofocus"], kt = /* @__PURE__ */ C({
+  name: "Button",
+  __name: "index",
+  props: {
+    borderRadius: null,
+    shape: { default: "default" },
+    size: { default: "medium" },
+    disabled: { type: Boolean, default: !1 },
+    loading: { type: Boolean, default: !1 },
+    variant: { default: "primary" },
+    theme: { default: "primary" },
+    color: null,
+    block: { type: Boolean, default: !1 },
+    nativeType: { default: "button" },
+    autofocus: { type: Boolean, default: !1 }
+  },
+  setup(t) {
+    var m;
+    const e = t, r = se(), n = b(((m = r == null ? void 0 : r.parent) == null ? void 0 : m.type) === Ge), s = b(!1), o = b(!1), a = ve("px-button-group-props"), u = x(() => n.value && a ? a.borderRadius : e.borderRadius), l = x(() => n.value && a ? a.variant : e.variant), i = x(() => n.value && a ? a.size : e.size), h = x(() => n.value && a ? a.shape : e.shape), d = x(() => n.value && a && a.disabled || e.disabled), c = () => {
+      if (r && r.vnode.el instanceof HTMLElement) {
+        const w = r.vnode.el.parentElement;
+        if (w && w.children.length) {
+          const y = [...w.children];
+          s.value = y.indexOf(r.vnode.el) === w.children.length - 1, o.value = y.indexOf(r.vnode.el) === 0;
+        } else
+          s.value = !1, o.value = !1;
+      }
+    }, f = Me(), g = b(!1), p = b(!1), R = (w) => {
+      g.value = w;
+    }, G = (w) => {
+      p.value = w;
+    }, k = ee(), _ = b(null), $ = b(null);
+    F(() => {
+      setTimeout(() => {
+        $.value && $.value.addEventListener("slot-changed", j), c();
+      });
+    });
+    const j = () => {
+      setTimeout(() => {
+        c(), Q();
+      });
+    };
+    J(() => {
+      $.value && $.value.removeEventListener("slot-changed", j);
+    });
+    const B = x(() => {
+      if (!e.color) return null;
+      const w = oe(e.color);
+      return re(w.r, w.g, w.b, w.a, k.value);
+    }), K = x(() => wt(B.value, l.value, d.value, e.loading, g.value, p.value));
+    he(
+      [
+        u,
+        h,
+        d,
+        () => e.loading,
+        l,
+        () => e.theme,
+        B,
+        g,
+        p,
+        k
+      ],
+      () => {
+        setTimeout(() => {
+          c(), Q();
+        });
+      }
+    );
+    const Q = () => {
+      const w = getComputedStyle(document.documentElement), y = parseInt(w.getPropertyValue("--px-bit"));
+      if (!_.value || !$.value) return;
+      const O = _.value.getContext("2d", { willReadFrequently: !0 }), V = $.value.getBoundingClientRect();
+      if (_.value.width = V.width, _.value.height = V.height, !O) return;
+      const W = bt(
+        _.value,
+        y,
+        u.value,
+        h.value,
+        n.value,
+        o.value,
+        s.value
+      ), Je = mt(
+        d.value,
+        e.loading,
+        l.value,
+        e.theme,
+        B.value,
+        g.value,
+        p.value
+      ), S = [
+        [W[0], W[0]],
+        [_.value.width - W[1] - y, W[1]],
+        [_.value.width - W[2] - y, _.value.height - W[2] - y],
+        [W[3], _.value.height - W[3] - y]
+      ], Ve = [
+        [Math.PI, Math.PI * 3 / 2],
+        [Math.PI * 3 / 2, Math.PI * 2],
+        [0, Math.PI / 2],
+        [Math.PI / 2, Math.PI]
+      ];
+      l.value === "primary" && _t(
+        O,
+        _.value.width,
+        _.value.height,
+        S,
+        W,
+        Ve,
+        y,
+        d.value,
+        e.loading,
+        l.value,
+        e.theme,
+        B.value,
+        n.value,
+        o.value,
+        s.value,
+        g.value,
+        p.value
+      ), gt(
+        O,
+        _.value.width,
+        _.value.height,
+        S,
+        W,
+        Ve,
+        Je,
+        y,
+        l.value,
+        n.value,
+        o.value,
+        s.value
+      );
+      const Ke = pt(
+        d.value,
+        e.loading,
+        l.value,
+        e.theme,
+        B.value,
+        g.value,
+        p.value
+      );
+      it(O, Math.round((S[0][0] + S[1][0]) / 2), Math.round((S[0][1] + S[2][1]) / 2), Ke);
+    };
+    return qe($, Q), (w, y) => (M(), H("button", {
+      disabled: d.value || e.loading,
+      class: N(["pixelium px-button", {
+        "px-button__block": !n.value && !!e.block,
+        "px-button__circle": h.value === "circle",
+        "px-button__square": h.value === "square",
+        "px-button__loading": e.loading,
+        "px-button__large": i.value === "large",
+        "px-button__small": i.value === "small",
+        "px-button__outline": l.value === "outline",
+        "px-button__plain": l.value === "plain",
+        "px-button__text": l.value === "text",
+        "px-button__disabled": d.value,
+        "px-button__custom": B.value,
+        "px-button__inner": n.value,
+        [`px-button__${e.theme || "primary"}`]: !0
+      }]),
+      style: I({
+        color: K.value
+      }),
+      ref_key: "buttonRef",
+      ref: $,
+      "data-px-button": "",
+      onMouseenter: y[0] || (y[0] = (O) => R(!0)),
+      onMouseleave: y[1] || (y[1] = (O) => R(!1)),
+      onMousedown: y[2] || (y[2] = (O) => G(!0)),
+      onMouseup: y[3] || (y[3] = (O) => G(!1)),
+      type: e.nativeType,
+      autofocus: e.autofocus
+    }, [
+      Y("canvas", {
+        ref_key: "canvasRef",
+        ref: _,
+        class: "px-button-canvas"
+      }, null, 512),
+      T(f).icon || e.loading ? (M(), H("div", {
+        key: 0,
+        class: N(["px-button-icon-wrapper", {
+          "px-button-icon-wrapper__last": !T(f).default
+        }])
+      }, [
+        e.loading ? (M(), pe(T(ke), {
+          key: 0,
+          class: N(["px-button-icon", {
+            "px-button-icon__loading": e.loading
+          }]),
+          style: I({
+            fill: K.value
+          })
+        }, null, 8, ["class", "style"])) : q(w.$slots, "icon", { key: 1 })
+      ], 2)) : Pe("", !0),
+      q(w.$slots, "default")
+    ], 46, Mt));
+  }
+}), Ht = ["href", "target"], Ct = /* @__PURE__ */ C({
+  name: "Link",
+  __name: "index",
+  props: {
+    disabled: { type: Boolean },
+    loading: { type: Boolean },
+    theme: null,
+    color: null,
+    href: null,
+    target: null
+  },
+  setup(t) {
+    const e = t, r = Me(), n = ee(), s = x(() => {
+      if (!e.color) return null;
+      const c = oe(e.color);
+      return re(c.r, c.g, c.b, c.a, n.value);
+    }), o = b(!1), a = b(!1), u = (c) => {
+      o.value = c;
+    }, l = (c) => {
+      a.value = c;
+    }, i = (c, f, g, p, R) => {
+      if (c)
+        return E(f ? c[1] : g ? c[5] : R ? c[6] : p ? c[4] : c[5]);
+    }, h = x(() => i(s.value, e.disabled, e.loading, o.value, a.value)), d = (c) => {
+      (e.disabled || e.loading) && c.preventDefault();
+    };
+    return (c, f) => (M(), H("a", {
+      class: N(["pixelium px-link", {
+        "px-link__loading": e.loading,
+        "px-link__disabled": e.disabled,
+        "px-link__custom": s.value,
+        [`px-link__${e.theme || "primary"}`]: !0
+      }]),
+      style: I({
+        color: h.value
+      }),
+      onMouseenter: f[0] || (f[0] = (g) => u(!0)),
+      onMouseleave: f[1] || (f[1] = (g) => u(!1)),
+      onMousedown: f[2] || (f[2] = (g) => l(!0)),
+      onMouseup: f[3] || (f[3] = (g) => l(!1)),
+      href: e.href,
+      target: e.target,
+      onClick: d
+    }, [
+      T(r).icon || e.loading ? (M(), H("div", {
+        key: 0,
+        class: N(["px-link-icon-wrapper", {
+          "px-link-icon-wrapper__last": !T(r).default
+        }])
+      }, [
+        e.loading ? (M(), pe(T(ke), {
+          key: 0,
+          class: N(["px-link-icon", {
+            "px-link-icon__loading": e.loading
+          }]),
+          style: I({
+            fill: h.value
+          })
+        }, null, 8, ["class", "style"])) : q(c.$slots, "icon", { key: 1 })
+      ], 2)) : Pe("", !0),
+      q(c.$slots, "default")
+    ], 46, Ht));
+  }
+}), Vt = /* @__PURE__ */ C({
+  props: {
+    size: {},
+    color: {}
+  },
+  setup(t) {
+    const e = t;
+    return (r, n) => (M(), H("svg", {
+      class: "px-icon-hn",
+      style: I({ color: e.color, fontSize: e.size + "px" }),
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24"
+    }, [...n[0] || (n[0] = [
+      Y("path", { d: "M22 9V7h-1V5h-1V4h-1V3h-2V2h-2V1H9v1H7v1H5v1H4v1H3v2H2v2H1v6h1v2h1v2h1v1h1v1h2v1h2v1h6v-1h2v-1h2v-1h1v-1h1v-2h1v-2h1V9zM11 6h2v2h-2zm-1 9h1v-5h-1V9h3v6h1v2h-4z" }, null, -1),
+      Y("path", {
+        fill: "none",
+        d: "M0 0h24v24H0z"
+      }, null, -1)
+    ])], 4));
+  }
+}), Bt = /* @__PURE__ */ C({
+  props: {
+    size: {},
+    color: {}
+  },
+  setup(t) {
+    const e = t;
+    return (r, n) => (M(), H("svg", {
+      class: "px-icon-hn",
+      style: I({ color: e.color, fontSize: e.size + "px" }),
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24"
+    }, [...n[0] || (n[0] = [
+      Y("path", { d: "M22 20v-2h-1v-2h-1v-2h-1v-2h-1v-2h-1V8h-1V6h-1V4h-1V2h-1V1h-2v1h-1v2H9v2H8v2H7v2H6v2H5v2H4v2H3v2H2v2H1v2h1v1h20v-1h1v-2zm-12-9h4v3h-1v3h-2v-3h-1zm1 7h2v2h-2z" }, null, -1)
+    ])], 4));
+  }
+}), Lt = /* @__PURE__ */ C({
+  props: {
+    size: {},
+    color: {}
+  },
+  setup(t) {
+    const e = t;
+    return (r, n) => (M(), H("svg", {
+      class: "px-icon-hn",
+      style: I({ color: e.color, fontSize: e.size + "px" }),
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24"
+    }, [...n[0] || (n[0] = [
+      Y("path", { d: "M22 8V7h-1V6h-1V5h-1V4h-1V3h-1V2h-1V1H8v1H7v1H6v1H5v1H4v1H3v1H2v1H1v8h1v1h1v1h1v1h1v1h1v1h1v1h1v1h8v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1V8zm-6 9h-2v-1h-1v-1h-2v1h-1v1H8v-1H7v-2h1v-1h1v-2H8v-1H7V8h1V7h2v1h1v1h2V8h1V7h2v1h1v2h-1v1h-1v2h1v1h1v2h-1z" }, null, -1)
+    ])], 4));
+  }
+}), It = /* @__PURE__ */ C({
+  props: {
+    size: {},
+    color: {}
+  },
+  setup(t) {
+    const e = t;
+    return (r, n) => (M(), H("svg", {
+      class: "px-icon-hn",
+      style: I({ color: e.color, fontSize: e.size + "px" }),
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24"
+    }, [...n[0] || (n[0] = [
+      Y("path", { d: "M22 9V7h-1V5h-1V4h-1V3h-2V2h-2V1H9v1H7v1H5v1H4v1H3v2H2v2H1v6h1v2h1v2h1v1h1v1h2v1h2v1h6v-1h2v-1h2v-1h1v-1h1v-2h1v-2h1V9zm-4 3h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-2v-1H9v-1H8v-1H7v-1H6v-2h1v-1h2v1h1v1h2v-1h1v-1h1v-1h1V9h1V8h2v1h1v2h-1z" }, null, -1)
+    ])], 4));
+  }
+}), Rt = /* @__PURE__ */ C({
+  props: {
+    size: {},
+    color: {}
+  },
+  setup(t) {
+    const e = t;
+    return (r, n) => (M(), H("svg", {
+      class: "px-icon-hn",
+      style: I({ color: e.color, fontSize: e.size + "px" }),
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24"
+    }, [...n[0] || (n[0] = [
+      Y("path", { d: "M14 13h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h-1v1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-2v1h-1v1H9v1H8v1H7v1H6v1H5v1H4v1H3v-1H2v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-2H9v-1H8V9H7V8H6V7H5V6H4V5H3V4H2V3h1V2h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h2V9h1V8h1V7h1V6h1V5h1V4h1V3h1V2h1v1h1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1z" }, null, -1)
+    ])], 4));
+  }
+}), Tt = /* @__PURE__ */ C({
+  __name: "index",
+  props: {
+    content: {
+      default: ""
+    },
+    icon: null,
+    duration: {
+      default: 3e3
+    },
+    id: null,
+    type: {
+      default: "normal"
+    },
+    color: null,
+    closable: {
+      type: Boolean
+    }
+  },
+  emits: ["close"],
+  setup(t, {
+    expose: e,
+    emit: r
+  }) {
+    const n = t, s = b(!1), o = b(!1), a = (m) => {
+      o.value = m;
+    }, u = (m) => {
+      s.value = m;
+    }, l = b(!1);
+    let i;
+    F(() => {
+      l.value = !0, h();
+    }), J(() => {
+      clearTimeout(i);
+    });
+    function h() {
+      i = setTimeout(() => c(), n.duration);
+    }
+    function d() {
+      clearTimeout(i), i = void 0;
+    }
+    function c() {
+      l.value = !1;
+    }
+    const f = r, g = () => {
+      f("close", n.id), d();
+    }, p = b(), R = b(), G = (m) => {
+      if (!m)
+        return "normal";
+      switch (m) {
+        case "info":
+          return "primary";
+        case "error":
+          return "danger";
+        default:
+          return m;
+      }
+    }, k = ee(), _ = x(() => {
+      if (!n.color) return null;
+      const m = oe(n.color);
+      return re(m.r, m.g, m.b, m.a, k.value);
+    }), $ = x(() => _.value ? E(_.value[5]) : void 0), j = x(() => {
+      if (_.value)
+        return o.value ? E(_.value[6]) : s.value ? E(_.value[4]) : E(_.value[5]);
+    });
+    function B(m = "normal", w) {
+      if (w)
+        return w[5];
+      {
+        const y = G(m);
+        return y === "normal" ? v("neutral", 10) : y === "loading" ? v("neutral", 8) : v(y, 6);
+      }
+    }
+    const K = (m, w, y, O, V) => {
+      m.fillStyle = `rgba(${O.r}, ${O.g}, ${O.b}, ${O.a / 255})`, m.fillRect(V, 0, w - 2 * V, V), m.fillRect(w - V, V, V, y - 2 * V), m.fillRect(V, y - V, w - 2 * V, V), m.fillRect(0, V, V, y - 2 * V);
+      const W = v("neutral", 1);
+      m.fillStyle = `rgba(${W.r}, ${W.g}, ${W.b}, ${W.a / 255})`, m.fillRect(V, V, w - 2 * V, y - 2 * V);
+    }, Q = () => {
+      const m = getComputedStyle(document.documentElement), w = parseInt(m.getPropertyValue("--px-bit"));
+      if (!p.value || !R.value) return;
+      const y = p.value.getContext("2d", {
+        willReadFrequently: !0
+      }), O = R.value.getBoundingClientRect();
+      if (p.value.width = O.width, p.value.height = O.height, !y) return;
+      const V = B(n.type, _.value);
+      K(y, p.value.width, p.value.height, V, w);
+    };
+    return qe(R, Q), he([() => n.type, _, k], () => {
+      setTimeout(() => {
+        Q();
+      });
+    }), e({
+      close: c
+    }), () => P(Fe, {
+      name: "px-message-fade",
+      onAfterLeave: g
+    }, {
+      default: () => [l.value && P("div", {
+        ref: (m) => R.value = m,
+        onMouseenter: d,
+        onMouseleave: h,
+        class: {
+          "px-message": !0,
+          pixelium: !0,
+          [`px-message__${n.type || "primary"}`]: !0
+        }
+      }, [(!!n.icon || n.type && n.type !== "normal" && n.type !== "sakura") && P("div", {
+        class: "px-message-icon-wrapper"
+      }, [n.icon ? n.icon() : n.type === "info" ? P(Vt, {
+        class: "px-message-icon",
+        style: {
+          fill: $.value
+        }
+      }, null) : n.type === "success" ? P(It, {
+        class: "px-message-icon",
+        style: {
+          fill: $.value
+        }
+      }, null) : n.type === "warning" ? P(Bt, {
+        class: "px-message-icon",
+        style: {
+          fill: $.value
+        }
+      }, null) : n.type === "error" ? P(Lt, {
+        class: "px-message-icon",
+        style: {
+          fill: $.value
+        }
+      }, null) : n.type === "loading" && P(ke, {
+        class: "px-message-icon px-message-icon__loading",
+        style: {
+          fill: $.value
+        }
+      }, null)]), P("span", {
+        class: "px-message-content",
+        style: {
+          color: $.value
+        }
+      }, [ae(n.content) ? n.content : n.content()]), n.closable && P("div", {
+        class: "px-message-close-wrapper"
+      }, [P(Rt, {
+        class: "px-message-icon",
+        style: {
+          fill: j.value
+        },
+        onMouseenter: u(!0),
+        onMouseleave: u(!1),
+        onMousedown: a(!0),
+        onMouseup: a(!1),
+        onClick: c
+      }, null)]), P("canvas", {
+        ref: (m) => p.value = m,
+        class: "px-message-canvas"
+      }, null)])]
+    });
+  }
+}), Et = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
+let $e = (t = 21) => {
+  let e = "", r = crypto.getRandomValues(new Uint8Array(t |= 0));
+  for (; t--; )
+    e += Et[r[t] & 63];
+  return e;
+};
+const Xe = /* @__PURE__ */ C({
+  name: "MessageBoxInner",
+  __name: "message-box",
+  props: {
+    messages: {},
+    position: {},
+    zIndex: { default: He },
+    root: {},
+    "onUpdate:messages": {}
+  },
+  emits: ["close"],
+  setup(t, { expose: e, emit: r }) {
+    const n = t, s = ze(n, "messages"), o = r, a = x(() => s.value.map((i) => ({
+      ...i,
+      id: i.id ?? $e()
+    }))), u = (i) => {
+      if (!Z(i)) {
+        if (n["onUpdate:messages"]) {
+          const h = a.value.findIndex((d) => d.id === i);
+          if (h >= 0) {
+            const d = [...a.value];
+            d.splice(h, 1), s.value = d;
+          }
+        }
+        o("close", i);
+      }
+    }, l = b([]);
+    return e({
+      close: (i) => {
+        var d;
+        const h = a.value.findIndex((c) => c.id === i);
+        h !== -1 && ((d = l.value[h]) == null || d.close());
+      }
+    }), (i, h) => (M(), H("div", {
+      class: "px-message-box",
+      style: I({
+        zIndex: n.zIndex
+      })
+    }, [
+      Y("div", {
+        class: N(["px-message-box-container", {
+          [`px-message-box-container__${T(ht)(n.position || "top")}`]: !0
+        }])
+      }, [
+        (M(!0), H(Oe, null, Se(a.value, (d) => (M(), pe(Tt, {
+          key: d.id,
+          duration: d.duration,
+          content: d.content,
+          id: d.id,
+          onClose: u,
+          type: d.type,
+          color: d.color,
+          icon: d.icon,
+          closable: d.closable,
+          ref_for: !0,
+          ref_key: "messageRef",
+          ref: l
+        }, null, 8, ["duration", "content", "id", "type", "color", "icon", "closable"]))), 128))
+      ], 2)
+    ], 4));
+  }
+}), At = /* @__PURE__ */ C({
+  name: "MessageBox",
+  __name: "message-box-wrapped",
+  props: {
+    messages: null,
+    position: null,
+    zIndex: { default: He },
+    root: { default: "body" },
+    "onUpdate:messages": { type: Function },
+    onClose: { type: Function }
+  },
+  setup(t, { expose: e }) {
+    const r = t, n = et(), s = b(null);
+    return e({
+      close: (o) => {
+        var a;
+        (a = s.value) == null || a.close(o);
+      }
+    }), (o, a) => (M(), pe(tt, {
+      to: r.root
+    }, [
+      P(Xe, nt({ ...r, ...T(n) }, {
+        ref_key: "messageBoxRef",
+        ref: s
+      }), null, 16)
+    ], 8, ["to"]));
+  }
+});
+class Pt {
+  constructor(e) {
+    ge(this, "messages");
+    ge(this, "messageBox");
+    this.messages = b([]), this.messageBox = P(Xe, {
+      messages: this.messages.value,
+      zIndex: e.zIndex,
+      position: e.position,
+      onClose: (o) => {
+        const a = this.messages.value.findIndex((u) => u.id === o);
+        a >= 0 && this.messages.value.splice(a, 1);
+      }
+    });
+    const r = (ae(e.root) ? document.querySelector(e.root) : e.root) || document.body, n = $e(), s = document.createElement("div");
+    s.id = n, s.className = "px-message-box-wrapper", r.appendChild(s), rt(this.messageBox, s);
+  }
+  push(e) {
+    const r = e.id ?? $e();
+    return this.messages.value.push({
+      ...e,
+      id: r
+    }), r;
+  }
+  close(e) {
+    var r, n;
+    (n = (r = this.messageBox.component) == null ? void 0 : r.exposed) == null || n.close(e);
+  }
+  clear() {
+    this.messages.value.length = 0;
+  }
+}
+const be = {
+  top: void 0,
+  bottom: void 0,
+  topLeft: void 0,
+  topRight: void 0,
+  bottomLeft: void 0,
+  bottomRight: void 0
+}, Ot = (t) => {
+  (ae(t) || We(t)) && (t = {
+    content: t
+  });
+  const e = t.position || "top", r = be[e] ? be[e] : be[e] = new Pt({
+    position: e,
+    zIndex: He,
+    root: t.root || "body"
+  }), n = r.push({
+    content: t.content,
+    icon: t.icon,
+    duration: t.duration || 3e3,
+    type: t.type || "normal",
+    color: t.color,
+    closable: t.closable
+  });
+  return {
+    close: () => r.close(n),
+    clear: () => r.clear()
+  };
+}, fe = Ot;
+["info", "success", "warning", "error", "loading", "sakura", "normal"].forEach((t) => {
+  fe[t] = (e) => ((ae(e) || We(e)) && (e = {
+    content: e
+  }), fe({
+    ...e,
+    type: t
+  }));
+});
+const me = () => {
+  const t = b(0);
+  function e() {
+    U() && (t.value = window.innerWidth);
+  }
+  e();
+  const r = x(() => {
+    let n;
+    return t.value <= 576 ? n = z.XS : t.value <= 768 ? n = z.SM : t.value <= 992 ? n = z.MD : t.value <= 1200 ? n = z.LG : t.value <= 1600 ? n = z.XL : n = z.XXL, n;
+  });
+  return U() && (window.addEventListener("resize", e), J(() => {
+    window.removeEventListener("resize", e);
+  })), [r, t];
+}, Dt = { class: "pixelium px-row" }, je = /* @__PURE__ */ C({
+  name: "Row",
+  __name: "index",
+  props: {
+    gutter: { default: 0 },
+    justify: { default: "start" },
+    align: { default: "start" },
+    wrap: { type: Boolean, default: !0 }
+  },
+  setup(t) {
+    const e = t, [r] = me(), n = x(() => {
+      if (A(e.gutter))
+        return {
+          x: e.gutter,
+          y: e.gutter
+        };
+      if ("x" in e.gutter || "y" in e.gutter)
+        return {
+          x: e.gutter.x || 0,
+          y: e.gutter.y || 0
+        };
+      const s = e.gutter[r.value];
+      return A(s) ? {
+        x: s,
+        y: s
+      } : Ne({ x: 0, y: 0 }, s);
+    });
+    return de("px-row-provide", n), (s, o) => (M(), H("div", Dt, [
+      Y("div", {
+        class: N(["px-row-inner", {
+          [`px-row__justify-${e.justify}`]: !0,
+          [`px-row__align-${e.align}`]: !0,
+          "px-row__wrap": !!e.wrap
+        }]),
+        style: I({
+          marginLeft: n.value ? -n.value.x / 2 + "px" : void 0,
+          marginRight: n.value ? -n.value.x / 2 + "px" : void 0,
+          marginTop: n.value ? -n.value.y / 2 + "px" : void 0,
+          marginBottom: n.value ? -n.value.y / 2 + "px" : void 0
+        })
+      }, [
+        q(s.$slots, "default")
+      ], 6)
+    ]));
+  }
+}), Gt = /* @__PURE__ */ C({
+  name: "Col",
+  __name: "index",
+  props: {
+    offset: { default: 0 },
+    span: { default: 24 }
+  },
+  setup(t) {
+    var l;
+    const e = t, [r] = me(), n = x(() => A(e.offset) ? e.offset : e.offset[r.value] || 0), s = x(() => A(e.span) ? e.span : e.span[r.value] || 24), o = se(), u = b(((l = o == null ? void 0 : o.parent) == null ? void 0 : l.type) === je).value && ve("px-row-provide") || b({ x: 0, y: 0 });
+    return (i, h) => (M(), H("div", {
+      class: N(["pixelium px-col", {
+        [`px-col__span-${s.value}`]: !0,
+        [`px-col__offset-${n.value}`]: !0
+      }]),
+      style: I({
+        paddingLeft: T(u) ? T(u).x / 2 + "px" : void 0,
+        paddingRight: T(u) ? T(u).x / 2 + "px" : void 0,
+        paddingTop: T(u) ? T(u).y / 2 + "px" : void 0,
+        paddingBottom: T(u) ? T(u).y / 2 + "px" : void 0
+      })
+    }, [
+      q(i.$slots, "default")
+    ], 6));
+  }
+}), Wt = /* @__PURE__ */ C({
+  name: "Divider",
+  __name: "index",
+  props: {
+    direction: { default: "horizontal" },
+    variant: { default: "solid" },
+    margin: null,
+    size: null
+  },
+  setup(t) {
+    const e = t, r = x(() => {
+      if (!Z(e.margin))
+        return A(e.margin) ? `${e.margin}px` : e.margin;
+    }), n = x(() => {
+      if (!Z(e.size))
+        return A(e.size) ? `${e.size}px` : e.size;
+    });
+    return (s, o) => (M(), H("div", {
+      class: N(["pixelium px-divider", {
+        [`px-divider__${e.direction}`]: !0,
+        [`px-divider__${e.variant}`]: !0
+      }]),
+      style: I({
+        marginLeft: e.direction === "vertical" ? r.value : void 0,
+        marginRight: e.direction === "vertical" ? r.value : void 0,
+        marginTop: e.direction === "horizontal" ? r.value : void 0,
+        marginBottom: e.direction === "horizontal" ? r.value : void 0,
+        borderBottomWidth: e.direction === "horizontal" ? n.value : void 0,
+        borderRightWidth: e.direction === "vertical" ? n.value : void 0
+      })
+    }, null, 6));
+  }
+}), Nt = (t, e) => !!(t && t.shapeFlag & 1), qt = (t, e) => !!(t && t.shapeFlag & 6), Xt = (t, e) => !!(t && t.shapeFlag & 8), jt = (t, e) => !!(t && t.shapeFlag & 16), Ut = (t, e) => !!(t && t.shapeFlag & 32), ce = (t) => {
+  var r, n;
+  const e = [];
+  for (const s of t ?? [])
+    Nt(s) || qt(s) || Xt(s) ? e.push(s) : jt(s, s.children) ? e.push(...ce(s.children)) : Ut(s, s.children) ? e.push(...ce((n = (r = s.children).default) == null ? void 0 : n.call(r))) : Ce(s) && e.push(...ce(s));
+  return e;
+}, Qt = /* @__PURE__ */ C({
+  name: "Space",
+  __name: "index",
+  props: {
+    margin: {
+      default: "medium"
+    },
+    direction: {
+      default: "horizontal"
+    },
+    justify: {
+      default: "start"
+    },
+    align: null,
+    wrap: {
+      type: Boolean,
+      default: !0
+    },
+    inline: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(t) {
+    var a;
+    const e = t, r = x(() => e.align ? e.align : e.direction === "horizontal" ? "center" : "stretch"), n = Me(), s = ce(((a = n.default) == null ? void 0 : a.call(n)) || []), o = x(() => {
+      if (!(!e.margin || e.margin === "small" || e.margin === "medium" || e.margin === "large")) {
+        if (A(e.margin))
+          return {
+            x: e.margin,
+            y: e.margin
+          };
+        if ("x" in e.margin || "y" in e.margin) {
+          const u = A(e.margin.x) ? e.margin.x : 0, l = A(e.margin.y) ? e.margin.y : 0;
+          return {
+            x: u,
+            y: l
+          };
+        }
+      }
+    });
+    return () => P("div", {
+      class: {
+        pixelium: !0,
+        "px-space": !0,
+        "px-space__inline": !!e.inline
+      }
+    }, [P("div", {
+      class: {
+        "px-space-inner": !0,
+        "px-space__small": e.margin === "small",
+        "px-space__large": e.margin === "large",
+        [`px-space__justify-${e.justify}`]: !0,
+        [`px-space__align-${r.value}`]: !0,
+        [`px-space__${e.direction}`]: !0,
+        "px-space__wrap": !!e.wrap
+      },
+      style: {
+        marginTop: o.value ? -o.value.y / 2 + "px" : void 0,
+        marginBottom: o.value ? -o.value.y / 2 + "px" : void 0,
+        marginLeft: o.value ? -o.value.x / 2 + "px" : void 0,
+        marginRight: o.value ? -o.value.x / 2 + "px" : void 0
+      }
+    }, [s.map((u, l) => P(Oe, {
+      key: u.key || `px-space-item-${l}`
+    }, [P("div", {
+      class: "px-space-item",
+      style: {
+        marginTop: o.value ? o.value.y / 2 + "px" : void 0,
+        marginBottom: o.value ? o.value.y / 2 + "px" : void 0,
+        marginLeft: o.value ? o.value.x / 2 + "px" : void 0,
+        marginRight: o.value ? o.value.x / 2 + "px" : void 0
+      }
+    }, [u])]))])]);
+  }
+}), Ue = /* @__PURE__ */ C({
+  name: "Grid",
+  __name: "index",
+  props: {
+    column: { default: 24 },
+    gutter: { default: 0 }
+  },
+  setup(t) {
+    const e = t, [r] = me(), n = x(() => {
+      if (A(e.gutter))
+        return {
+          x: e.gutter,
+          y: e.gutter
+        };
+      if ("x" in e.gutter || "y" in e.gutter)
+        return {
+          x: e.gutter.x || 0,
+          y: e.gutter.y || 0
+        };
+      const a = e.gutter[r.value];
+      return A(a) ? {
+        x: a,
+        y: a
+      } : Ne({ x: 0, y: 0 }, a);
+    }), s = x(() => A(e.column) ? e.column : e.column[r.value] || 24), o = b([]);
+    return de("px-grid-provide", {
+      column: s,
+      gutter: n,
+      itemsStat: o
+    }), (a, u) => (M(), H("div", {
+      class: "pixelium px-grid",
+      style: I({
+        gridTemplateColumns: `repeat(${s.value}, minmax(0, 1fr))`,
+        gap: n.value ? `${n.value.y}px ${n.value.x}px` : void 0
+      })
+    }, [
+      q(a.$slots, "default")
+    ], 4));
+  }
+}), we = /* @__PURE__ */ new WeakMap(), ne = /* @__PURE__ */ new WeakMap(), Jt = (t) => () => {
+  const e = ne.get(t);
+  e == null || e.forEach((r) => r());
+}, Kt = () => {
+  const t = b(-1), e = se(), r = () => {
+    if (e && e.vnode.el instanceof HTMLElement) {
+      const s = e.vnode.el.parentElement;
+      if (s && s.children.length) {
+        const o = [...s.children];
+        t.value = o.indexOf(e.vnode.el);
+      }
+    }
+  };
+  let n = null;
+  return U() && (F(() => {
+    setTimeout(() => {
+      var s;
+      if (n = ((s = e == null ? void 0 : e.vnode) == null ? void 0 : s.el) instanceof HTMLElement ? e.vnode.el.parentElement : null, n) {
+        const o = we.get(n) || new MutationObserver(Jt(n));
+        we.set(n, o), ne.set(n, [...ne.get(n) || [], r]), o.observe(n, { childList: !0 });
+      }
+      r();
+    });
+  }), st(() => {
+    setTimeout(() => {
+      r();
+    });
+  }), J(() => {
+    var s;
+    n && ((s = we.get(n)) == null || s.disconnect(), ne.set(
+      n,
+      (ne.get(n) || []).filter((o) => o !== r)
+    ));
+  })), t;
+}, Yt = /* @__PURE__ */ C({
+  name: "GridItem",
+  __name: "index",
+  props: {
+    offset: { default: 0 },
+    span: null
+  },
+  setup(t) {
+    var d;
+    const e = se(), n = b(((d = e == null ? void 0 : e.parent) == null ? void 0 : d.type) === Ue).value ? ve("px-grid-provide") : void 0, s = t, o = ot(), a = Kt(), [u] = me(), l = x(() => A(s.offset) ? s.offset : s.offset[u.value] || 0), i = x(() => s.span === void 0 ? (n == null ? void 0 : n.column.value) || 24 : A(s.span) ? s.span : s.span[u.value] || 24);
+    F(() => {
+      n == null || n.itemsStat.value.push({
+        id: o,
+        index: a.value,
+        offset: l.value,
+        span: i.value
+      });
+    }), he([a, l, i], () => {
+      const c = n == null ? void 0 : n.itemsStat.value.find((f) => f.id === o);
+      c ? (c.index = a.value, c.offset = l.value, c.span = i.value) : n == null || n.itemsStat.value.push({
+        id: o,
+        index: a.value,
+        offset: l.value,
+        span: i.value
+      });
+    }), J(() => {
+      const c = n == null ? void 0 : n.itemsStat.value.findIndex((f) => f.id === o);
+      c !== void 0 && c > -1 && (n == null || n.itemsStat.value.splice(c, 1));
+    });
+    const h = x(() => {
+      if (!n)
+        return;
+      if (l.value + i.value > n.column.value)
+        return `${l.value + 1} / span ${i.value}`;
+      const c = n.itemsStat.value.filter((p) => p.index !== -1 && p.index < a.value);
+      if (c.length === 0)
+        return `${l.value + 1} / span ${i.value}`;
+      let f = 0;
+      return c.forEach((p) => {
+        if (p.span + p.offset >= n.column.value) {
+          f = 0;
+          return;
+        }
+        f += p.span + p.offset, f > n.column.value ? f = p.span + p.offset : f === n.column.value && (f = 0);
+      }), f + l.value + i.value > n.column.value ? `${l.value + 1} / span ${i.value}` : `${f + l.value + 1} / span ${i.value}`;
+    });
+    return (c, f) => (M(), H("div", {
+      class: "pixelium px-grid-item",
+      style: I({
+        gridColumn: h.value
+      })
+    }, [
+      q(c.$slots, "default")
+    ], 4));
+  }
+}), Qe = /* @__PURE__ */ C({
+  name: "Container",
+  __name: "index",
+  props: {
+    direction: null
+  },
+  setup(t) {
+    const e = b(0);
+    de("px-container-provide", e);
+    const r = t;
+    return (n, s) => (M(), H("section", {
+      class: N(["pixelium px-container", {
+        "px-container__has-aside": !!e.value,
+        [`px-container__${r.direction}`]: !!r.direction
+      }])
+    }, [
+      q(n.$slots, "default")
+    ], 2));
+  }
+}), Zt = { class: "pixelium px-main" }, Ft = /* @__PURE__ */ C({
+  name: "Main",
+  __name: "index",
+  setup(t) {
+    return (e, r) => (M(), H("main", Zt, [
+      q(e.$slots, "default")
+    ]));
+  }
+}), zt = /* @__PURE__ */ C({
+  name: "Aside",
+  __name: "index",
+  props: {
+    width: null,
+    bordered: { type: Boolean, default: !1 },
+    side: { default: "left" },
+    dark: { type: Boolean, default: !1 }
+  },
+  setup(t) {
+    var u;
+    const e = se(), n = b(((u = e == null ? void 0 : e.parent) == null ? void 0 : u.type) === Qe).value ? ve("px-container-provide") : void 0;
+    F(() => {
+      n && (n.value += 1);
+    }), J(() => {
+      n && (n.value -= 1);
+    });
+    const s = t, o = ee(), a = x(() => Z(s.width) ? void 0 : A(s.width) ? `${s.width}px` : s.width);
+    return (l, i) => (M(), H("aside", {
+      class: N(["pixelium px-aside", {
+        "px-aside__dark": !T(o) && !!s.dark,
+        "px-aside__bordered": !!s.bordered,
+        [`px-aside__${s.side}`]: !0
+      }]),
+      style: I({
+        width: a.value
+      })
+    }, [
+      q(l.$slots, "default")
+    ], 6));
+  }
+}), St = /* @__PURE__ */ C({
+  name: "Header",
+  __name: "index",
+  props: {
+    minHeight: null,
+    bordered: { type: Boolean },
+    dark: { type: Boolean, default: !1 }
+  },
+  setup(t) {
+    const e = t, r = ee(), n = x(() => Z(e.minHeight) ? void 0 : A(e.minHeight) ? `${e.minHeight}px` : e.minHeight);
+    return (s, o) => (M(), H("header", {
+      class: N(["pixelium px-header", {
+        "px-header__dark": !T(r) && !!e.dark,
+        "px-header__bordered": !!e.bordered
+      }]),
+      style: I({
+        minHeight: n.value
+      })
+    }, [
+      q(s.$slots, "default")
+    ], 6));
+  }
+}), en = /* @__PURE__ */ C({
+  name: "Footer",
+  __name: "index",
+  props: {
+    minHeight: null,
+    bordered: { type: Boolean },
+    dark: { type: Boolean, default: !1 }
+  },
+  setup(t) {
+    const e = t, r = ee(), n = x(() => Z(e.minHeight) ? void 0 : A(e.minHeight) ? `${e.minHeight}px` : e.minHeight);
+    return (s, o) => (M(), H("footer", {
+      class: N(["pixelium px-footer", {
+        "px-footer__dark": !T(r) && !!e.dark,
+        "px-footer__bordered": !!e.bordered
+      }]),
+      style: I({
+        minHeight: n.value
+      })
+    }, [
+      q(s.$slots, "default")
+    ], 6));
+  }
+});
+// @ts-ignore
+typeof process < "u" && process.env.NODE_ENV;
+const tn = "Pixelium";
+function Ee(t) {
+  throw new Error(`[${tn}] ${t}`);
+}
+const cn = (t, e) => {
+  var n, s;
+  if (!U())
+    return;
+  const r = {
+    light: [],
+    dark: []
+  };
+  if (ae(e)) {
+    const o = oe(e);
+    r.light = re(o.r, o.g, o.b, o.a, !1).map((a) => E(a)), r.dark = re(o.r, o.g, o.b, o.a, !0).map((a) => E(a));
+  } else
+    (n = e.light) != null && n.length && e.light.length !== 10 && Ee("The length of color.light does not match the required number of CSS color palette (10)."), (s = e.dark) != null && s.length && e.dark.length !== 10 && Ee("The length of color.dark does not match the required number of CSS color palette (10)."), r.light = e.light || [], r.dark = e.dark || [];
+  r.light.forEach((o, a) => {
+    document.documentElement.style.setProperty(`--px-${t}-light-custom-${a + 1}`, o);
+  }), r.dark.forEach((o, a) => {
+    document.documentElement.style.setProperty(`--px-${t}-dark-custom-${a + 1}`, o);
+  });
+}, Ae = (t) => {
+  if (!U())
+    return;
+  const e = document.documentElement;
+  e.classList.remove("light", "dark"), t !== "unset" && e.classList.add(t);
+};
+function nn(t) {
+  const e = b(!1);
+  if (U()) {
+    let u = function(i) {
+      e.value = i.matches;
+    };
+    const l = window.matchMedia("(prefers-color-scheme: dark)");
+    u(l), l.addEventListener("change", u), J(() => {
+      l.removeEventListener("change", u);
+    });
+  }
+  const r = b(t || e.value ? "dark" : "light");
+  t && Ae(r.value);
+  const n = () => {
+    r.value = r.value === "unset" ? e.value ? "light" : "dark" : r.value === "light" ? "dark" : "light";
+  }, s = () => {
+    r.value = "unset";
+  }, o = () => {
+    r.value = e.value ? "dark" : "light";
+  }, a = he(r, Ae, { flush: "post" });
+  return at(() => {
+    a();
+  }), [r, n, s, o];
+}
+const rn = /* @__PURE__ */ C({
+  name: "Icon",
+  __name: "index",
+  props: {
+    size: { default: "1em" },
+    color: { default: "currentColor" },
+    rotate: { default: 0 },
+    spin: { type: Boolean, default: !1 },
+    flip: { default: "none" }
+  },
+  setup(t) {
+    const e = t, r = x(() => {
+      let s = 1, o = 1;
+      return (e.flip === "horizontal" || e.flip === "both") && (s = -1), (e.flip === "vertical" || e.flip === "both") && (o = -1), `scale(${s}, ${o}) rotate(${e.rotate}deg)`;
+    }), n = x(() => A(e.size) ? `${e.size}px` : e.size);
+    return (s, o) => (M(), H("div", {
+      class: N({
+        "pixelium px-icon": !0,
+        "px-icon__spin": !!e.spin
+      }),
+      style: I({
+        height: n.value,
+        width: n.value,
+        fontSize: n.value,
+        color: e.color,
+        transform: r.value
+      })
+    }, [
+      q(s.$slots, "default")
+    ], 6));
+  }
+}), sn = [kt, Ge, Ct, At, je, Gt, Wt, Qt, Ue, Yt, Qe, Ft, zt, St, en, rn], on = "Px", an = (t, e = { prefix: on }) => {
+  sn.forEach((r) => {
+    r.name && t.component(e.prefix + r.name, r);
+  }), e.attachToApp !== !1 && (t.config.globalProperties.PixeliumVue = {
+    message: fe,
+    useThemeMode: nn
+  }), e.attachToWindow !== !1 && U() && (window.$message = fe);
+}, fn = {
+  install: an
+};
+export {
+  zt as Aside,
+  kt as Button,
+  Ge as ButtonGroup,
+  Gt as Col,
+  Qe as Container,
+  Wt as Divider,
+  en as Footer,
+  Ue as Grid,
+  Yt as GridItem,
+  St as Header,
+  rn as Icon,
+  Ct as Link,
+  Ft as Main,
+  fe as Message,
+  At as MessageBox,
+  je as Row,
+  Qt as Space,
+  fn as default,
+  an as install,
+  cn as setThemeColor,
+  nn as useThemeMode
+};