@ravileal/ui 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,3253 @@
+"use client";
+import { jsx as n, jsxs as g, Fragment as ce } from "react/jsx-runtime";
+import { useRef as B, useEffect as j, useLayoutEffect as Se, useState as L, useCallback as O, useId as J, useMemo as ue, forwardRef as ae, isValidElement as Me, cloneElement as Ee, useContext as Ie, createContext as Be } from "react";
+import { createPortal as re } from "react-dom";
+function it({
+  name: t,
+  color: r,
+  size: i = 32,
+  className: o,
+  style: e,
+  ariaLabel: s
+}) {
+  const d = t.trim().charAt(0).toUpperCase() || "?", u = s ?? t;
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: o,
+      role: u ? "img" : void 0,
+      "aria-label": u || void 0,
+      "aria-hidden": u ? void 0 : !0,
+      style: {
+        width: i,
+        height: i,
+        borderRadius: "50%",
+        background: r,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: i * 0.38,
+        fontWeight: 700,
+        color: "var(--ui-on-accent)",
+        flexShrink: 0,
+        ...e
+      },
+      children: d
+    }
+  );
+}
+function ot({
+  size: t = "md",
+  className: r,
+  indeterminate: i = !1,
+  ...o
+}) {
+  const e = B(null);
+  return j(() => {
+    e.current && (e.current.indeterminate = i);
+  }, [i]), /* @__PURE__ */ n(
+    "input",
+    {
+      ref: e,
+      type: "checkbox",
+      className: `ui-checkbox${t === "sm" ? " is-sm" : ""}${r ? ` ${r}` : ""}`,
+      ...o
+    }
+  );
+}
+const ye = typeof window < "u" ? Se : j;
+function se({
+  maxHeight: t,
+  minWidth: r = 160,
+  fitContent: i = !1,
+  onEscape: o,
+  onDismiss: e
+}) {
+  const [s, d] = L(!1), [u, a] = L({
+    left: 0,
+    top: 0,
+    width: i ? void 0 : r,
+    maxHeight: t
+  }), l = B(null), f = B(null), h = B(e);
+  h.current = e;
+  const p = O(() => {
+    var F;
+    const m = l.current;
+    if (!m) return;
+    const b = m.getBoundingClientRect(), D = window.innerHeight || 0, k = window.innerWidth || 0, N = D - b.bottom, S = N < t + 8 && b.top > N, I = Math.max(i ? ((F = f.current) == null ? void 0 : F.offsetWidth) ?? r : b.width, r);
+    let R = i && b.width > I ? b.right - I : b.left;
+    R = Math.min(Math.max(R, 8), Math.max(k - I - 8, 8)), a({
+      left: R,
+      top: S ? void 0 : b.bottom + 4,
+      bottom: S ? Math.max(D - b.top + 4, 4) : void 0,
+      width: i ? void 0 : I,
+      maxHeight: t
+    });
+  }, [i, t, r]), y = O(() => d(!0), []), c = O((m = !1) => {
+    var b;
+    d(!1), m && ((b = l.current) == null || b.focus());
+  }, []);
+  return ye(() => {
+    s && p();
+  }, [s, p]), j(() => {
+    if (!s) return;
+    const m = (D) => {
+      var N, S, I;
+      const k = D.target;
+      (N = l.current) != null && N.contains(k) || (S = f.current) != null && S.contains(k) || ((I = h.current) == null || I.call(h), c());
+    }, b = (D) => {
+      var k;
+      D.key === "Escape" && (o != null && o() || ((k = h.current) == null || k.call(h), c(!0)));
+    };
+    return document.addEventListener("mousedown", m), document.addEventListener("keydown", b), window.addEventListener("resize", p), window.addEventListener("scroll", p, !0), () => {
+      document.removeEventListener("mousedown", m), document.removeEventListener("keydown", b), window.removeEventListener("resize", p), window.removeEventListener("scroll", p, !0);
+    };
+  }, [s, c, p, o]), { open: s, pos: u, triggerRef: l, menuRef: f, openMenu: y, closeMenu: c };
+}
+const Te = /^#?([0-9a-f]{6})$/i;
+function ne(t) {
+  const r = Te.exec((t ?? "").trim());
+  return r ? `#${r[1].toLowerCase()}` : null;
+}
+function $e(t) {
+  const r = ne(t);
+  return r ? {
+    r: parseInt(r.slice(1, 3), 16),
+    g: parseInt(r.slice(3, 5), 16),
+    b: parseInt(r.slice(5, 7), 16)
+  } : null;
+}
+function de(t) {
+  return Math.max(0, Math.min(255, Math.round(t))).toString(16).padStart(2, "0");
+}
+function be(t) {
+  return `#${de(t.r)}${de(t.g)}${de(t.b)}`;
+}
+function we(t) {
+  const r = t.r / 255, i = t.g / 255, o = t.b / 255, e = Math.max(r, i, o), s = Math.min(r, i, o), d = e - s;
+  let u = 0;
+  return d !== 0 && (e === r ? u = (i - o) / d % 6 : e === i ? u = (o - r) / d + 2 : u = (r - i) / d + 4, u *= 60, u < 0 && (u += 360)), { h: u, s: e === 0 ? 0 : d / e, v: e };
+}
+function xe(t) {
+  const r = (t.h % 360 + 360) % 360, i = Math.max(0, Math.min(1, t.s)), o = Math.max(0, Math.min(1, t.v)), e = o * i, s = e * (1 - Math.abs(r / 60 % 2 - 1)), d = o - e;
+  let u = 0, a = 0, l = 0;
+  return r < 60 ? [u, a, l] = [e, s, 0] : r < 120 ? [u, a, l] = [s, e, 0] : r < 180 ? [u, a, l] = [0, e, s] : r < 240 ? [u, a, l] = [0, s, e] : r < 300 ? [u, a, l] = [s, 0, e] : [u, a, l] = [e, 0, s], {
+    r: Math.round((u + d) * 255),
+    g: Math.round((a + d) * 255),
+    b: Math.round((l + d) * 255)
+  };
+}
+function ie(t) {
+  return be(xe(t));
+}
+function Q(t) {
+  const r = $e(t);
+  return r ? we(r) : null;
+}
+function te(t, r, i) {
+  return Math.max(r, Math.min(i, t));
+}
+const fe = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 22,
+  flex: 1,
+  border: "none",
+  background: "none",
+  color: "var(--ui-text-3)",
+  cursor: "pointer",
+  fontSize: 8,
+  lineHeight: 1,
+  padding: 0
+};
+function Re({
+  value: t,
+  onChange: r,
+  ariaLabel: i,
+  min: o = 0,
+  max: e = 255,
+  step: s = 1,
+  className: d,
+  style: u
+}) {
+  const [a, l] = L(String(t)), f = B(null);
+  j(() => {
+    l(String(t));
+  }, [t]);
+  const h = (c) => Math.min(e, Math.max(o, Math.round(c))), p = (c) => {
+    const m = h(c);
+    l(String(m)), r(m);
+  }, y = (c) => {
+    p((Number(a) || 0) + c * s);
+  };
+  return j(() => {
+    const c = f.current;
+    if (!c) return;
+    const m = (b) => {
+      b.preventDefault(), p((Number(a) || 0) + (b.deltaY < 0 ? s : -s));
+    };
+    return c.addEventListener("wheel", m, { passive: !1 }), () => c.removeEventListener("wheel", m);
+  }, [a, s, o, e]), /* @__PURE__ */ g(
+    "div",
+    {
+      className: d,
+      style: {
+        display: "flex",
+        height: 30,
+        borderRadius: 8,
+        border: "1px solid var(--ui-border)",
+        background: "var(--ui-surface)",
+        overflow: "hidden",
+        ...u
+      },
+      children: [
+        /* @__PURE__ */ n(
+          "input",
+          {
+            ref: f,
+            "aria-label": i,
+            inputMode: "numeric",
+            value: a,
+            onChange: (c) => {
+              const m = c.target.value.replace(/[^\d]/g, "");
+              l(m), m !== "" && r(h(Number(m)));
+            },
+            onBlur: () => {
+              const c = Number(a);
+              p(Number.isFinite(c) && a !== "" ? c : t);
+            },
+            onKeyDown: (c) => {
+              var m;
+              c.key === "ArrowUp" ? (c.preventDefault(), y(1)) : c.key === "ArrowDown" ? (c.preventDefault(), y(-1)) : c.key === "Enter" && (c.preventDefault(), (m = f.current) == null || m.blur());
+            },
+            style: {
+              width: "100%",
+              minWidth: 0,
+              border: "none",
+              outline: "none",
+              background: "transparent",
+              color: "var(--ui-text)",
+              textAlign: "center",
+              fontSize: 12
+            }
+          }
+        ),
+        /* @__PURE__ */ g(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              borderLeft: "1px solid var(--ui-border)",
+              flexShrink: 0
+            },
+            children: [
+              /* @__PURE__ */ n(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `Increase ${i}`,
+                  onClick: () => y(1),
+                  style: fe,
+                  onMouseEnter: (c) => c.currentTarget.style.background = "var(--ui-surface-2)",
+                  onMouseLeave: (c) => c.currentTarget.style.background = "none",
+                  children: "▲"
+                }
+              ),
+              /* @__PURE__ */ n(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `Decrease ${i}`,
+                  onClick: () => y(-1),
+                  style: { ...fe, borderTop: "1px solid var(--ui-border)" },
+                  onMouseEnter: (c) => c.currentTarget.style.background = "var(--ui-surface-2)",
+                  onMouseLeave: (c) => c.currentTarget.style.background = "none",
+                  children: "▼"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function Le(t, r, i, o, e, s) {
+  const d = Math.max(1, i), u = Math.max(1, o);
+  return {
+    x: Math.min(e - 1, Math.max(0, Math.floor(t / d * e))),
+    y: Math.min(s - 1, Math.max(0, Math.floor(r / u * s)))
+  };
+}
+function he() {
+  return typeof navigator < "u" && !!navigator.mediaDevices && typeof navigator.mediaDevices.getDisplayMedia == "function";
+}
+function Ae({
+  capture: t,
+  labels: r,
+  onPick: i,
+  onCancel: o
+}) {
+  const [e, s] = L(null);
+  return j(() => {
+    const d = (u) => {
+      u.key === "Escape" && o();
+    };
+    return document.addEventListener("keydown", d), () => document.removeEventListener("keydown", d);
+  }, [o]), typeof document > "u" ? null : re(
+    /* @__PURE__ */ g(
+      "div",
+      {
+        role: "dialog",
+        "aria-label": (r == null ? void 0 : r.pickFromScreen) ?? "Pick colour from screen",
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 5e3,
+          cursor: "crosshair",
+          background: "#000"
+        },
+        onPointerMove: (d) => {
+          const u = Le(
+            d.clientX,
+            d.clientY,
+            window.innerWidth,
+            window.innerHeight,
+            t.width,
+            t.height
+          ), a = t.context.getImageData(u.x, u.y, 1, 1).data;
+          s({
+            hex: be({ r: a[0], g: a[1], b: a[2] }),
+            x: d.clientX,
+            y: d.clientY
+          });
+        },
+        onPointerLeave: () => s(null),
+        onClick: () => {
+          e ? i(e.hex) : o();
+        },
+        children: [
+          /* @__PURE__ */ n(
+            "img",
+            {
+              src: t.dataUrl,
+              alt: "",
+              draggable: !1,
+              style: {
+                width: "100vw",
+                height: "100vh",
+                objectFit: "fill",
+                display: "block",
+                userSelect: "none"
+              }
+            }
+          ),
+          /* @__PURE__ */ n(
+            "div",
+            {
+              style: {
+                position: "fixed",
+                top: 16,
+                left: "50%",
+                transform: "translateX(-50%)",
+                background: "var(--ui-surface)",
+                border: "1px solid var(--ui-border)",
+                borderRadius: 8,
+                padding: "6px 12px",
+                color: "var(--ui-text-2)",
+                fontSize: 12
+              },
+              children: (r == null ? void 0 : r.clickToPick) ?? "Click to pick · Esc to cancel"
+            }
+          ),
+          e && /* @__PURE__ */ g(
+            "div",
+            {
+              style: {
+                position: "fixed",
+                left: e.x + 16,
+                top: e.y + 16,
+                display: "flex",
+                alignItems: "center",
+                gap: 6,
+                background: "var(--ui-surface)",
+                border: "1px solid var(--ui-border)",
+                borderRadius: 8,
+                padding: "6px 8px",
+                boxShadow: "var(--ui-shadow)",
+                pointerEvents: "none"
+              },
+              children: [
+                /* @__PURE__ */ n(
+                  "span",
+                  {
+                    style: {
+                      width: 18,
+                      height: 18,
+                      borderRadius: 4,
+                      background: e.hex,
+                      border: "1px solid var(--ui-border)"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ n("span", { style: { fontFamily: "monospace", fontSize: 12, color: "var(--ui-text)" }, children: e.hex.toUpperCase() })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+}
+const je = {
+  padding: "7px 10px",
+  borderRadius: 8,
+  border: "1px solid var(--ui-border)",
+  background: "var(--ui-surface)",
+  color: "var(--ui-text)",
+  fontSize: 12,
+  fontFamily: "monospace",
+  outline: "none",
+  width: "100%"
+}, Pe = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 32,
+  height: 32,
+  flexShrink: 0,
+  borderRadius: 8,
+  border: "1px solid var(--ui-border)",
+  background: "none",
+  color: "var(--ui-text-2)",
+  cursor: "pointer"
+}, pe = {
+  position: "absolute",
+  width: 14,
+  height: 14,
+  borderRadius: "50%",
+  border: "2px solid var(--ui-on-accent)",
+  boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.45)",
+  transform: "translate(-50%, -50%)",
+  pointerEvents: "none"
+}, We = "#8098b5";
+function at({
+  value: t,
+  onChange: r,
+  presets: i,
+  ariaLabel: o = "Color",
+  labels: e,
+  className: s,
+  style: d
+}) {
+  var P;
+  const u = ne(t) ?? We, [a, l] = L(() => Q(u) ?? { h: 0, s: 0, v: 1 }), [f, h] = L(u.toUpperCase()), p = B(u), y = B(u), c = B(null), m = B(null), b = B(!1), D = B(!1), k = () => {
+    const v = y.current;
+    p.current !== v && (p.current = v, l(Q(v) ?? { h: 0, s: 0, v: 1 }), h(v.toUpperCase()), r(v));
+  }, { open: N, pos: S, triggerRef: I, menuRef: R, openMenu: F, closeMenu: w } = se({
+    maxHeight: 520,
+    minWidth: 272,
+    onDismiss: k
+  });
+  j(() => {
+    const v = ne(t);
+    v && v !== p.current && (p.current = v, l(Q(v) ?? { h: 0, s: 0, v: 1 }), h(v.toUpperCase()));
+  }, [t]);
+  const C = (v) => {
+    const M = ie(v);
+    p.current = M, l(v), h(M.toUpperCase()), r(M);
+  }, T = () => {
+    if (N) {
+      w();
+      return;
+    }
+    y.current = u, p.current = u, l(Q(u) ?? { h: 0, s: 0, v: 1 }), h(u.toUpperCase()), F();
+  }, Y = () => {
+    k(), w(!0);
+  }, H = xe(a), G = ie({ h: a.h, s: 1, v: 1 }), z = (v, M) => {
+    const A = c.current;
+    if (!A) return;
+    const V = A.getBoundingClientRect();
+    !V.width || !V.height || C({
+      ...a,
+      s: te((v - V.left) / V.width, 0, 1),
+      v: 1 - te((M - V.top) / V.height, 0, 1)
+    });
+  }, W = (v) => {
+    const M = m.current;
+    if (!M) return;
+    const A = M.getBoundingClientRect();
+    A.width && C({ ...a, h: te((v - A.left) / A.width, 0, 1) * 360 });
+  }, [U, X] = L(null), [_, Z] = L(!1), [x, $] = L(null);
+  j(() => {
+    const v = window.EyeDropper ?? null;
+    X(() => v), Z(he());
+  }, []);
+  const q = async () => {
+    if (U)
+      try {
+        const v = await new U().open(), M = ne(v.sRGBHex);
+        M && C(Q(M) ?? a);
+      } catch {
+      }
+  }, E = async () => {
+    if (U) {
+      await q();
+      return;
+    }
+    if (!he()) return;
+    let v = null;
+    try {
+      v = await navigator.mediaDevices.getDisplayMedia({ video: !0 });
+      const M = document.createElement("video");
+      M.srcObject = v, M.muted = !0, await M.play(), M.videoWidth || await new Promise((De) => {
+        M.addEventListener("loadedmetadata", () => De(), { once: !0 });
+      });
+      const A = document.createElement("canvas");
+      A.width = M.videoWidth, A.height = M.videoHeight;
+      const V = A.getContext("2d", { willReadFrequently: !0 });
+      if (!V) throw new Error("canvas unavailable");
+      V.drawImage(M, 0, 0), $({
+        dataUrl: A.toDataURL("image/png"),
+        width: A.width,
+        height: A.height,
+        context: V
+      });
+    } catch {
+    } finally {
+      v == null || v.getTracks().forEach((M) => M.stop());
+    }
+  };
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      className: s,
+      style: { display: "inline-flex", flexShrink: 0, width: 148, ...d },
+      children: [
+        /* @__PURE__ */ g(
+          "button",
+          {
+            ref: I,
+            type: "button",
+            className: "ui-dropdown-trigger is-md",
+            "aria-label": o,
+            "aria-haspopup": "dialog",
+            "aria-expanded": N,
+            onClick: T,
+            children: [
+              /* @__PURE__ */ n("span", { className: "ui-dropdown-dot", style: { background: u } }),
+              /* @__PURE__ */ n("span", { className: "ui-dropdown-value", style: { fontSize: 12, fontFamily: "monospace" }, children: u.toUpperCase() }),
+              /* @__PURE__ */ n("span", { className: "ui-dropdown-caret", "aria-hidden": "true", children: "▾" })
+            ]
+          }
+        ),
+        N && typeof document < "u" && re(
+          /* @__PURE__ */ n(
+            "div",
+            {
+              ref: R,
+              className: "ui-dropdown-menu",
+              role: "dialog",
+              "aria-label": (e == null ? void 0 : e.picker) ?? `${o} picker`,
+              style: {
+                left: S.left,
+                top: S.top,
+                bottom: S.bottom,
+                width: S.width,
+                maxHeight: S.maxHeight
+              },
+              children: /* @__PURE__ */ g(
+                "div",
+                {
+                  style: {
+                    padding: 10,
+                    width: "100%",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 10
+                  },
+                  children: [
+                    /* @__PURE__ */ n(
+                      "div",
+                      {
+                        ref: c,
+                        role: "slider",
+                        "aria-label": (e == null ? void 0 : e.saturationAndBrightness) ?? "Saturation and brightness",
+                        "aria-valuetext": ((P = e == null ? void 0 : e.saturationValueText) == null ? void 0 : P.call(e, Math.round(a.s * 100), Math.round(a.v * 100))) ?? `Saturation ${Math.round(a.s * 100)}%, brightness ${Math.round(a.v * 100)}%`,
+                        tabIndex: 0,
+                        onKeyDown: (v) => {
+                          v.key === "ArrowLeft" ? (v.preventDefault(), C({ ...a, s: te(a.s - 0.02, 0, 1) })) : v.key === "ArrowRight" ? (v.preventDefault(), C({ ...a, s: te(a.s + 0.02, 0, 1) })) : v.key === "ArrowUp" ? (v.preventDefault(), C({ ...a, v: te(a.v + 0.02, 0, 1) })) : v.key === "ArrowDown" && (v.preventDefault(), C({ ...a, v: te(a.v - 0.02, 0, 1) }));
+                        },
+                        onPointerDown: (v) => {
+                          b.current = !0, z(v.clientX, v.clientY);
+                        },
+                        onPointerMove: (v) => {
+                          b.current && z(v.clientX, v.clientY);
+                        },
+                        onPointerUp: () => {
+                          b.current = !1;
+                        },
+                        onPointerLeave: () => {
+                          b.current = !1;
+                        },
+                        style: {
+                          position: "relative",
+                          height: 150,
+                          borderRadius: 8,
+                          cursor: "crosshair",
+                          touchAction: "none",
+                          background: `linear-gradient(to top, #000, rgba(0,0,0,0)), linear-gradient(to right, #fff, ${G})`
+                        },
+                        children: /* @__PURE__ */ n(
+                          "span",
+                          {
+                            style: {
+                              ...pe,
+                              left: `${a.s * 100}%`,
+                              top: `${(1 - a.v) * 100}%`,
+                              background: ie(a)
+                            }
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ n(
+                      "div",
+                      {
+                        ref: m,
+                        role: "slider",
+                        "aria-label": (e == null ? void 0 : e.hue) ?? "Hue",
+                        "aria-valuemin": 0,
+                        "aria-valuemax": 360,
+                        "aria-valuenow": Math.round(a.h),
+                        tabIndex: 0,
+                        onKeyDown: (v) => {
+                          v.key === "ArrowLeft" ? (v.preventDefault(), C({ ...a, h: (a.h - 2 + 360) % 360 })) : v.key === "ArrowRight" ? (v.preventDefault(), C({ ...a, h: (a.h + 2) % 360 })) : v.key === "Home" ? (v.preventDefault(), C({ ...a, h: 0 })) : v.key === "End" && (v.preventDefault(), C({ ...a, h: 359 }));
+                        },
+                        onPointerDown: (v) => {
+                          D.current = !0, W(v.clientX);
+                        },
+                        onPointerMove: (v) => {
+                          D.current && W(v.clientX);
+                        },
+                        onPointerUp: () => {
+                          D.current = !1;
+                        },
+                        onPointerLeave: () => {
+                          D.current = !1;
+                        },
+                        style: {
+                          position: "relative",
+                          height: 12,
+                          borderRadius: 6,
+                          cursor: "pointer",
+                          touchAction: "none",
+                          background: "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)"
+                        },
+                        children: /* @__PURE__ */ n(
+                          "span",
+                          {
+                            style: {
+                              ...pe,
+                              left: `${a.h / 360 * 100}%`,
+                              top: "50%",
+                              width: 16,
+                              height: 16,
+                              background: G
+                            }
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ g("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+                      /* @__PURE__ */ n(
+                        "span",
+                        {
+                          "aria-hidden": "true",
+                          style: {
+                            width: 32,
+                            height: 32,
+                            flexShrink: 0,
+                            borderRadius: 8,
+                            background: ie(a),
+                            border: "1px solid var(--ui-border)"
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ n(
+                        "input",
+                        {
+                          "aria-label": (e == null ? void 0 : e.hexColor) ?? "Hex colour",
+                          value: f,
+                          onChange: (v) => {
+                            const M = v.target.value;
+                            h(M);
+                            const A = ne(M);
+                            A && (p.current = A, l(Q(A) ?? a), r(A));
+                          },
+                          onBlur: () => {
+                            ne(f) || h(ie(a).toUpperCase());
+                          },
+                          onKeyDown: (v) => {
+                            if (v.key !== "Enter") return;
+                            const M = ne(f);
+                            M && (v.preventDefault(), C(Q(M) ?? a), w(!0));
+                          },
+                          style: je
+                        }
+                      ),
+                      (_ || U) && /* @__PURE__ */ n(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": (e == null ? void 0 : e.pickFromScreen) ?? "Pick colour from screen",
+                          title: (e == null ? void 0 : e.pickFromScreen) ?? "Pick colour from screen",
+                          onClick: () => void E(),
+                          style: Pe,
+                          children: /* @__PURE__ */ g(
+                            "svg",
+                            {
+                              width: "15",
+                              height: "15",
+                              viewBox: "0 0 24 24",
+                              fill: "none",
+                              stroke: "currentColor",
+                              strokeWidth: "1.7",
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round",
+                              "aria-hidden": "true",
+                              children: [
+                                /* @__PURE__ */ n("path", { d: "m19 3-4 4" }),
+                                /* @__PURE__ */ n("path", { d: "M14.5 4.5 19.5 9.5" }),
+                                /* @__PURE__ */ n("path", { d: "M12.5 6.5 17.5 11.5 8 21H3v-5z" })
+                              ]
+                            }
+                          )
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ n("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8 }, children: ["r", "g", "b"].map((v, M) => /* @__PURE__ */ g(
+                      "label",
+                      {
+                        style: {
+                          display: "flex",
+                          flexDirection: "column",
+                          gap: 4,
+                          fontSize: 11,
+                          color: "var(--ui-text-2)"
+                        },
+                        children: [
+                          ["R", "G", "B"][M],
+                          /* @__PURE__ */ n(
+                            Re,
+                            {
+                              ariaLabel: [(e == null ? void 0 : e.red) ?? "Red", (e == null ? void 0 : e.green) ?? "Green", (e == null ? void 0 : e.blue) ?? "Blue"][M],
+                              value: H[v],
+                              min: 0,
+                              max: 255,
+                              onChange: (A) => C(we({ ...H, [v]: A }))
+                            }
+                          )
+                        ]
+                      },
+                      v
+                    )) }),
+                    /* @__PURE__ */ n(
+                      "div",
+                      {
+                        role: "group",
+                        "aria-label": (e == null ? void 0 : e.presetColors) ?? "Preset colours",
+                        style: {
+                          display: "grid",
+                          gridTemplateColumns: "repeat(6, 24px)",
+                          justifyContent: "space-between",
+                          gap: 8,
+                          width: "100%"
+                        },
+                        children: i.map((v) => {
+                          var M;
+                          return /* @__PURE__ */ n(
+                            "button",
+                            {
+                              type: "button",
+                              "aria-label": ((M = e == null ? void 0 : e.presetColor) == null ? void 0 : M.call(e, v)) ?? `Colour ${v}`,
+                              title: v,
+                              onClick: () => C(Q(v) ?? a),
+                              style: {
+                                width: 24,
+                                height: 24,
+                                borderRadius: "50%",
+                                background: v,
+                                border: u.toLowerCase() === v.toLowerCase() ? "2px solid var(--ui-text)" : "2px solid transparent",
+                                cursor: "pointer"
+                              }
+                            },
+                            v
+                          );
+                        })
+                      }
+                    ),
+                    /* @__PURE__ */ g("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8 }, children: [
+                      /* @__PURE__ */ n(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": (e == null ? void 0 : e.cancel) ?? "Cancel",
+                          onClick: Y,
+                          style: {
+                            padding: "7px 14px",
+                            borderRadius: 8,
+                            background: "none",
+                            color: "var(--ui-text-2)",
+                            fontWeight: 600,
+                            fontSize: 12,
+                            border: "1px solid var(--ui-border)",
+                            cursor: "pointer"
+                          },
+                          children: (e == null ? void 0 : e.cancel) ?? "Cancel"
+                        }
+                      ),
+                      /* @__PURE__ */ n(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": (e == null ? void 0 : e.done) ?? "Done",
+                          onClick: () => w(!0),
+                          style: {
+                            padding: "7px 14px",
+                            borderRadius: 8,
+                            background: "var(--ui-accent)",
+                            color: "var(--ui-on-accent)",
+                            fontWeight: 600,
+                            fontSize: 12,
+                            border: "none",
+                            cursor: "pointer"
+                          },
+                          children: (e == null ? void 0 : e.done) ?? "Done"
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
+            }
+          ),
+          document.body
+        ),
+        x && /* @__PURE__ */ n(
+          Ae,
+          {
+            capture: x,
+            labels: e,
+            onPick: (v) => {
+              C(Q(v) ?? a), w(!0), $(null);
+            },
+            onCancel: () => $(null)
+          }
+        )
+      ]
+    }
+  );
+}
+const me = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function ke({
+  active: t,
+  containerRef: r,
+  initialFocusRef: i,
+  onEscape: o
+}) {
+  const e = B(o);
+  e.current = o, j(() => {
+    if (!t || typeof document > "u") return;
+    const s = document.activeElement, d = r.current, u = (i == null ? void 0 : i.current) ?? (d == null ? void 0 : d.querySelector(me)) ?? d ?? null;
+    u == null || u.focus();
+    const a = (l) => {
+      if (l.key === "Escape") {
+        e.current();
+        return;
+      }
+      if (l.key !== "Tab" || !d) return;
+      const f = Array.from(d.querySelectorAll(me)).filter(
+        (y) => y.getAttribute("aria-hidden") !== "true"
+      );
+      if (f.length === 0) {
+        l.preventDefault(), d.focus();
+        return;
+      }
+      const h = f[0], p = f[f.length - 1];
+      l.shiftKey && document.activeElement === h ? (l.preventDefault(), p.focus()) : !l.shiftKey && document.activeElement === p && (l.preventDefault(), h.focus());
+    };
+    return document.addEventListener("keydown", a), () => {
+      var l;
+      document.removeEventListener("keydown", a), (l = s == null ? void 0 : s.focus) == null || l.call(s);
+    };
+  }, [t, r, i]);
+}
+const He = {
+  position: "fixed",
+  inset: 0,
+  background: "var(--ui-overlay)",
+  zIndex: 1500,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+}, ze = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: 12,
+  marginBottom: 16
+};
+function Ue({
+  open: t,
+  title: r,
+  onClose: i,
+  children: o,
+  maxWidth: e = 440,
+  panelStyle: s,
+  panelClassName: d,
+  closeLabel: u = "Close",
+  initialFocusRef: a,
+  closeOnBackdrop: l = !0,
+  closeOnEscape: f = !0
+}) {
+  const h = J(), p = B(null);
+  return ke({
+    active: t,
+    containerRef: p,
+    initialFocusRef: a,
+    onEscape: f ? i : () => {
+    }
+  }), t ? /* @__PURE__ */ n("div", { style: He, onClick: l ? i : void 0, children: /* @__PURE__ */ g(
+    "div",
+    {
+      ref: p,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": h,
+      tabIndex: -1,
+      onClick: (y) => y.stopPropagation(),
+      style: {
+        background: "var(--ui-surface)",
+        border: "1px solid var(--ui-border)",
+        borderRadius: 14,
+        padding: 24,
+        maxWidth: e,
+        width: "92%",
+        maxHeight: "85vh",
+        overflowY: "auto",
+        boxShadow: "var(--ui-shadow-lg)",
+        outline: "none",
+        ...s
+      },
+      className: `ui-scroll-y${d ? ` ${d}` : ""}`,
+      children: [
+        /* @__PURE__ */ g("div", { style: ze, children: [
+          /* @__PURE__ */ n("div", { id: h, style: { fontSize: 16, fontWeight: 700, color: "var(--ui-text)" }, children: r }),
+          /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              "aria-label": u,
+              onClick: i,
+              style: {
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                border: "1px solid var(--ui-border)",
+                background: "var(--ui-surface-2)",
+                color: "var(--ui-text-2)",
+                borderRadius: 7,
+                fontSize: 13,
+                lineHeight: 1,
+                padding: "5px 8px",
+                cursor: "pointer"
+              },
+              children: "✕"
+            }
+          )
+        ] }),
+        o
+      ]
+    }
+  ) }) : null;
+}
+function dt({
+  open: t,
+  title: r,
+  message: i,
+  onConfirm: o,
+  onCancel: e,
+  danger: s = !1,
+  confirmLabel: d,
+  cancelLabel: u = "Cancel",
+  panelStyle: a,
+  panelClassName: l
+}) {
+  return /* @__PURE__ */ g(
+    Ue,
+    {
+      open: t,
+      title: r,
+      onClose: e,
+      maxWidth: 380,
+      panelStyle: a,
+      panelClassName: l,
+      children: [
+        /* @__PURE__ */ n(
+          "div",
+          {
+            style: {
+              fontSize: 13,
+              color: "var(--ui-text-2)",
+              lineHeight: 1.6,
+              marginBottom: 22
+            },
+            children: i
+          }
+        ),
+        /* @__PURE__ */ g("div", { style: { display: "flex", gap: 10, justifyContent: "flex-end" }, children: [
+          /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              onClick: e,
+              style: {
+                padding: "9px 18px",
+                borderRadius: 8,
+                border: "1px solid var(--ui-border)",
+                background: "none",
+                color: "var(--ui-text-2)",
+                fontSize: 13,
+                cursor: "pointer",
+                fontWeight: 500
+              },
+              children: u
+            }
+          ),
+          /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              onClick: o,
+              style: {
+                padding: "9px 22px",
+                borderRadius: 8,
+                border: "none",
+                background: s ? "var(--ui-red)" : "var(--ui-accent)",
+                color: "var(--ui-on-accent)",
+                fontSize: 13,
+                fontWeight: 700,
+                cursor: "pointer"
+              },
+              children: d ?? (s ? "Delete" : "Confirm")
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+async function Ke(t) {
+  var r, i;
+  try {
+    if ((r = navigator.clipboard) != null && r.writeText)
+      return await navigator.clipboard.writeText(t), !0;
+  } catch {
+  }
+  try {
+    const o = document.activeElement, e = document.createElement("textarea");
+    e.value = t, e.setAttribute("readonly", ""), e.style.position = "fixed", e.style.top = "-1000px", e.style.opacity = "0", document.body.appendChild(e), e.select(), e.setSelectionRange(0, t.length);
+    const s = document.execCommand("copy");
+    return document.body.removeChild(e), o && o !== document.body && ((i = o.focus) == null || i.call(o)), s;
+  } catch {
+    return !1;
+  }
+}
+const ee = 8;
+function Ne({
+  content: t,
+  children: r,
+  maxWidth: i = 260,
+  delay: o = 120,
+  style: e,
+  className: s,
+  disabled: d = !1,
+  as: u = "span"
+}) {
+  const [a, l] = L(!1), [f, h] = L(null), [p, y] = L({
+    left: 0,
+    top: 0,
+    below: !1
+  }), c = B(null), m = B(null), b = B(null), D = B(!1), k = J();
+  j(() => {
+    const T = () => h(window.innerWidth);
+    return T(), window.addEventListener("resize", T), () => window.removeEventListener("resize", T);
+  }, []);
+  const N = Math.min(
+    i,
+    Math.max(0, (f ?? i + ee * 2) - ee * 2)
+  ), S = O(() => {
+    const T = c.current, Y = m.current;
+    if (!T || !Y) return;
+    const H = T.getBoundingClientRect(), G = Y.offsetWidth, z = Y.offsetHeight, W = G / 2, U = Math.min(
+      Math.max(H.left + H.width / 2, W + ee),
+      window.innerWidth - W - ee
+    ), X = H.top - ee, _ = window.innerHeight - H.bottom - ee, Z = X >= z, x = _ >= z, $ = !Z && (x || _ >= X);
+    y({ left: U, top: $ ? H.bottom + ee : H.top - ee, below: $ });
+  }, []), I = O(() => {
+    if (!d) {
+      if (b.current && clearTimeout(b.current), o <= 0) {
+        l(!0);
+        return;
+      }
+      b.current = setTimeout(() => l(!0), o);
+    }
+  }, [o, d]), R = O(() => {
+    b.current && clearTimeout(b.current), l(!1);
+  }, []);
+  j(() => {
+    d && R();
+  }, [d, R]), j(
+    () => () => {
+      b.current && clearTimeout(b.current);
+    },
+    []
+  ), j(() => {
+    if (!a) return;
+    const T = (Y) => {
+      Y.key === "Escape" && R();
+    };
+    return document.addEventListener("keydown", T), () => document.removeEventListener("keydown", T);
+  }, [a, R]), ye(() => {
+    a && S();
+  }, [a, S]), j(() => {
+    if (!a) return;
+    const T = () => S();
+    return window.addEventListener("resize", T), window.addEventListener("scroll", T, !0), () => {
+      window.removeEventListener("resize", T), window.removeEventListener("scroll", T, !0);
+    };
+  }, [a, S]);
+  const F = {
+    display: u === "div" ? "block" : "inline-flex",
+    minWidth: 0,
+    maxWidth: "100%",
+    ...e
+  }, w = {
+    onMouseEnter: () => {
+      D.current = !0, I();
+    },
+    onMouseLeave: () => {
+      D.current = !1, R();
+    },
+    onFocus: I,
+    onBlur: () => {
+      D.current || R();
+    }
+  }, C = a && typeof document < "u" ? re(
+    /* @__PURE__ */ n(
+      "div",
+      {
+        ref: m,
+        id: k,
+        role: "tooltip",
+        className: "ui-tooltip",
+        style: {
+          left: p.left,
+          top: p.top,
+          width: "max-content",
+          maxWidth: N,
+          overflowWrap: "break-word",
+          transform: p.below ? "translate(-50%, 0)" : "translate(-50%, -100%)"
+        },
+        children: t
+      }
+    ),
+    document.body
+  ) : null;
+  return u === "div" ? /* @__PURE__ */ g(
+    "div",
+    {
+      ref: c,
+      className: s,
+      style: F,
+      "aria-describedby": a ? k : void 0,
+      ...w,
+      children: [
+        r,
+        C
+      ]
+    }
+  ) : /* @__PURE__ */ g(
+    "span",
+    {
+      ref: c,
+      className: s,
+      style: F,
+      "aria-describedby": a ? k : void 0,
+      ...w,
+      children: [
+        r,
+        C
+      ]
+    }
+  );
+}
+function lt({
+  value: t,
+  children: r,
+  ariaLabel: i,
+  formatValue: o = (f) => String(f),
+  copyValue: e = (f) => String(f),
+  tooltipLabel: s,
+  labels: d,
+  className: u,
+  style: a,
+  wrapperStyle: l
+}) {
+  const [f, h] = L(!1), p = B(null);
+  j(
+    () => () => {
+      p.current && clearTimeout(p.current);
+    },
+    []
+  );
+  const y = () => {
+    Ke(e(t)).then((c) => {
+      c && (h(!0), p.current && clearTimeout(p.current), p.current = setTimeout(() => h(!1), 2e3));
+    });
+  };
+  return /* @__PURE__ */ n(
+    Ne,
+    {
+      content: f ? /* @__PURE__ */ n("span", { style: { color: "var(--ui-green)", fontWeight: 600 }, children: (d == null ? void 0 : d.copied) ?? "✓ Copied" }) : /* @__PURE__ */ g(ce, { children: [
+        /* @__PURE__ */ n("span", { className: "ui-tooltip-label", children: s ?? (d == null ? void 0 : d.tooltip) ?? "Amount" }),
+        (d == null ? void 0 : d.clickToCopy) ?? "Click to copy"
+      ] }),
+      delay: 0,
+      style: l,
+      children: /* @__PURE__ */ n(
+        "span",
+        {
+          role: "button",
+          tabIndex: 0,
+          "aria-label": i,
+          className: "ui-copy-value" + (u ? " " + u : ""),
+          onClick: y,
+          onKeyDown: (c) => {
+            (c.key === "Enter" || c.key === " ") && (c.preventDefault(), y());
+          },
+          style: {
+            ...a,
+            cursor: f ? "default" : "pointer",
+            color: f ? "var(--ui-green)" : a == null ? void 0 : a.color
+          },
+          children: r ?? o(t)
+        }
+      )
+    }
+  );
+}
+function ve(t) {
+  const r = /^(\d{4})-(\d{2})-(\d{2})/.exec(t ?? "");
+  if (!r) return null;
+  const i = new Date(Number(r[1]), Number(r[2]) - 1, Number(r[3]));
+  return Number.isNaN(i.getTime()) ? null : i;
+}
+function le(t) {
+  const r = t.getFullYear(), i = String(t.getMonth() + 1).padStart(2, "0"), o = String(t.getDate()).padStart(2, "0");
+  return `${r}-${i}-${o}`;
+}
+function ct({
+  value: t,
+  onChange: r,
+  ariaLabel: i = "Date",
+  placeholder: o = "Select date",
+  disabled: e = !1,
+  invalid: s = !1,
+  format: d = "friendly",
+  size: u = "sm",
+  fontSize: a = 13,
+  triggerStyle: l,
+  locale: f = "en-US",
+  weekdayLabels: h,
+  previousMonthLabel: p = "Previous month",
+  nextMonthLabel: y = "Next month",
+  clearLabel: c = "Clear",
+  todayLabel: m = "Today",
+  className: b,
+  style: D
+}) {
+  const k = ve(t), [N, S] = L(() => {
+    const E = k ?? /* @__PURE__ */ new Date();
+    return { year: E.getFullYear(), month: E.getMonth() };
+  }), { open: I, pos: R, triggerRef: F, menuRef: w, openMenu: C, closeMenu: T } = se({
+    maxHeight: 360,
+    minWidth: 264,
+    fitContent: !0
+  }), Y = ue(() => {
+    const E = new Intl.DateTimeFormat(f, { weekday: "narrow" });
+    return Array.from({ length: 7 }, (P, v) => E.format(new Date(2024, 0, 7 + v)));
+  }, [f]), H = h ?? Y, G = ue(
+    () => new Intl.DateTimeFormat(f, { month: "long", year: "numeric" }).format(
+      new Date(N.year, N.month, 1)
+    ),
+    [f, N.month, N.year]
+  ), z = () => {
+    if (e) return;
+    const E = ve(t) ?? /* @__PURE__ */ new Date();
+    S({ year: E.getFullYear(), month: E.getMonth() }), C();
+  }, W = (E) => S((P) => {
+    const v = new Date(P.year, P.month + E, 1);
+    return { year: v.getFullYear(), month: v.getMonth() };
+  }), U = new Date(N.year, N.month, 1), X = new Date(N.year, N.month, 1 - U.getDay()), _ = Array.from(
+    { length: 42 },
+    (E, P) => new Date(X.getFullYear(), X.getMonth(), X.getDate() + P)
+  ), Z = le(/* @__PURE__ */ new Date()), x = k ? d === "short" ? k.toLocaleDateString(f, {
+    month: "2-digit",
+    day: "2-digit",
+    year: "numeric"
+  }) : k.toLocaleDateString(f, {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  }) : "", $ = (E) => {
+    e || (E.key === "ArrowDown" || E.key === "Enter" || E.key === " ") && (E.preventDefault(), I ? T(!0) : z());
+  }, q = (E) => {
+    r(E), T(!0);
+  };
+  return /* @__PURE__ */ g("div", { className: `ui-dropdown${b ? ` ${b}` : ""}`, style: D, children: [
+    /* @__PURE__ */ g(
+      "button",
+      {
+        ref: F,
+        type: "button",
+        className: "ui-dropdown-trigger" + (u === "md" ? " is-md" : "") + (s ? " is-invalid" : ""),
+        style: l,
+        "aria-label": i,
+        "aria-haspopup": "dialog",
+        "aria-expanded": I,
+        disabled: e,
+        onClick: () => I ? T() : z(),
+        onKeyDown: $,
+        children: [
+          /* @__PURE__ */ n(
+            "span",
+            {
+              className: "ui-dropdown-value",
+              style: { fontSize: a, color: x ? "var(--ui-text)" : "var(--ui-text-3)" },
+              children: x || o
+            }
+          ),
+          /* @__PURE__ */ g(
+            "svg",
+            {
+              className: "ui-datepicker-icon",
+              width: "13",
+              height: "13",
+              viewBox: "0 0 13 13",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "1.3",
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ n("rect", { x: "1.5", y: "2.5", width: "10", height: "9", rx: "1.5" }),
+                /* @__PURE__ */ n("line", { x1: "1.5", y1: "5.5", x2: "11.5", y2: "5.5" }),
+                /* @__PURE__ */ n("line", { x1: "4.5", y1: "1", x2: "4.5", y2: "3.5" }),
+                /* @__PURE__ */ n("line", { x1: "8.5", y1: "1", x2: "8.5", y2: "3.5" })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    I && typeof document < "u" && re(
+      /* @__PURE__ */ g(
+        "div",
+        {
+          ref: w,
+          className: "ui-datepicker-menu",
+          role: "dialog",
+          "aria-label": i,
+          style: { left: R.left, top: R.top, bottom: R.bottom, width: R.width },
+          children: [
+            /* @__PURE__ */ g("div", { className: "ui-datepicker-head", children: [
+              /* @__PURE__ */ n("span", { className: "ui-datepicker-title", children: G }),
+              /* @__PURE__ */ g("span", { className: "ui-datepicker-nav", children: [
+                /* @__PURE__ */ n(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": p,
+                    onClick: () => W(-1),
+                    children: "‹"
+                  }
+                ),
+                /* @__PURE__ */ n("button", { type: "button", "aria-label": y, onClick: () => W(1), children: "›" })
+              ] })
+            ] }),
+            /* @__PURE__ */ g("div", { className: "ui-datepicker-grid", children: [
+              H.map((E, P) => /* @__PURE__ */ n("span", { className: "ui-datepicker-wd", children: E }, `${E}-${P}`)),
+              _.map((E) => {
+                const P = le(E), v = E.getMonth() !== N.month, M = !!k && le(k) === P, A = Z === P;
+                return /* @__PURE__ */ n(
+                  "button",
+                  {
+                    type: "button",
+                    className: "ui-datepicker-day" + (v ? " is-out" : "") + (A ? " is-today" : "") + (M ? " is-selected" : ""),
+                    "aria-current": A ? "date" : void 0,
+                    onClick: () => q(P),
+                    children: E.getDate()
+                  },
+                  P
+                );
+              })
+            ] }),
+            /* @__PURE__ */ g("div", { className: "ui-datepicker-foot", children: [
+              /* @__PURE__ */ n("button", { type: "button", onClick: () => q(""), children: c }),
+              /* @__PURE__ */ n("button", { type: "button", onClick: () => q(Z), children: m })
+            ] })
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+function Fe({
+  value: t,
+  onChange: r,
+  options: i,
+  ariaLabel: o,
+  placeholder: e = "—",
+  title: s,
+  color: d,
+  dot: u = !1,
+  fontSize: a = 13,
+  fontWeight: l,
+  size: f = "sm",
+  fullWidth: h = !0,
+  disabled: p = !1,
+  maxHeight: y = 260,
+  onOpenChange: c,
+  className: m,
+  style: b
+}) {
+  const [D, k] = L(0), [N, S] = L(null), I = J(), R = O(() => {
+    if (!N) return;
+    const x = i.findIndex(
+      ($) => $.value === N.value && $.label === N.label
+    );
+    S(null), k(x >= 0 ? x : 0);
+  }, [N, i]), F = O(() => N ? (R(), !0) : !1, [N, R]), { open: w, pos: C, triggerRef: T, menuRef: Y, openMenu: H, closeMenu: G } = se({
+    maxHeight: y,
+    onEscape: F
+  }), z = i.findIndex((x) => x.value === t), W = z >= 0 ? i[z] : void 0, U = (N == null ? void 0 : N.children) ?? i, X = O(() => {
+    p || i.length === 0 || (S(null), k(z >= 0 ? z : 0), H());
+  }, [p, H, i.length, z]);
+  j(() => {
+    w || S(null);
+  }, [w]), j(() => {
+    c == null || c(w);
+  }, [w, c]);
+  const _ = O(
+    (x) => {
+      var q;
+      const $ = U[x];
+      if ($) {
+        if ((q = $.children) != null && q.length) {
+          const E = $.children.findIndex((P) => P.value === t);
+          S($), k(E >= 0 ? E : 0);
+          return;
+        }
+        r($.value), G(!0);
+      }
+    },
+    [G, U, r, t]
+  ), Z = (x) => {
+    if (!p) {
+      if (!w) {
+        (x.key === "ArrowDown" || x.key === "Enter" || x.key === " ") && (x.preventDefault(), X());
+        return;
+      }
+      x.key === "ArrowLeft" && N ? (x.preventDefault(), R()) : x.key === "ArrowDown" ? (x.preventDefault(), k(($) => Math.min($ + 1, U.length - 1))) : x.key === "ArrowUp" ? (x.preventDefault(), k(($) => Math.max($ - 1, 0))) : x.key === "Home" ? (x.preventDefault(), k(0)) : x.key === "End" ? (x.preventDefault(), k(U.length - 1)) : (x.key === "Enter" || x.key === " ") && (x.preventDefault(), _(D));
+    }
+  };
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      className: "ui-dropdown" + (h ? "" : " is-inline") + (m ? " " + m : ""),
+      style: b,
+      children: [
+        /* @__PURE__ */ g(
+          "button",
+          {
+            ref: T,
+            type: "button",
+            className: "ui-dropdown-trigger" + (f === "md" ? " is-md" : ""),
+            "aria-label": o,
+            "aria-haspopup": "listbox",
+            "aria-expanded": w,
+            "aria-controls": w ? I : void 0,
+            title: s,
+            disabled: p,
+            onClick: () => w ? G() : X(),
+            onKeyDown: Z,
+            children: [
+              (W == null ? void 0 : W.icon) && /* @__PURE__ */ n("span", { className: "ui-dropdown-icon", children: W.icon }),
+              u && d && /* @__PURE__ */ n("span", { className: "ui-dropdown-dot", style: { background: d } }),
+              /* @__PURE__ */ n("span", { className: "ui-dropdown-value", style: { fontSize: a, fontWeight: l, color: d }, children: (W == null ? void 0 : W.label) ?? (t || e) }),
+              /* @__PURE__ */ n("span", { className: "ui-dropdown-caret", "aria-hidden": "true", children: "▾" })
+            ]
+          }
+        ),
+        w && typeof document < "u" && re(
+          /* @__PURE__ */ g(
+            "div",
+            {
+              ref: Y,
+              className: "ui-dropdown-menu",
+              style: {
+                left: C.left,
+                top: C.top,
+                bottom: C.bottom,
+                width: C.width,
+                maxHeight: C.maxHeight
+              },
+              children: [
+                N && /* @__PURE__ */ g(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Back to ${o}`,
+                    onClick: R,
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 6,
+                      width: "100%",
+                      padding: "6px 10px",
+                      marginBottom: 4,
+                      border: "none",
+                      borderRadius: 7,
+                      background: "var(--ui-surface-2)",
+                      color: "var(--ui-text-2)",
+                      fontSize: 11,
+                      fontWeight: 600,
+                      cursor: "pointer",
+                      textAlign: "left"
+                    },
+                    children: [
+                      /* @__PURE__ */ n("span", { "aria-hidden": "true", children: "‹" }),
+                      /* @__PURE__ */ n(
+                        "span",
+                        {
+                          style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+                          children: N.label
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ n("div", { id: I, role: "listbox", "aria-label": o, children: U.map((x, $) => {
+                  var P;
+                  const q = `${x.value}-${$}`, E = /* @__PURE__ */ g(
+                    "div",
+                    {
+                      role: "option",
+                      "aria-selected": x.value === t,
+                      className: "ui-dropdown-option" + ($ === D ? " is-active" : "") + (x.value === t ? " is-selected" : ""),
+                      onMouseEnter: () => k($),
+                      onClick: () => _($),
+                      children: [
+                        x.icon && /* @__PURE__ */ n("span", { className: "ui-dropdown-icon", children: x.icon }),
+                        x.color && /* @__PURE__ */ n("span", { className: "ui-dropdown-dot", style: { background: x.color } }),
+                        /* @__PURE__ */ n("span", { className: "ui-dropdown-option-label", children: x.label }),
+                        (P = x.children) != null && P.length ? /* @__PURE__ */ n("span", { className: "ui-dropdown-caret", "aria-hidden": "true", children: "›" }) : x.value === t && /* @__PURE__ */ n("span", { className: "ui-dropdown-check", "aria-hidden": "true", children: "✓" })
+                      ]
+                    },
+                    q
+                  );
+                  return x.hint ? /* @__PURE__ */ n(
+                    Ne,
+                    {
+                      as: "div",
+                      delay: 0,
+                      content: /* @__PURE__ */ g(ce, { children: [
+                        x.hintLabel && /* @__PURE__ */ n("span", { className: "ui-tooltip-label", children: x.hintLabel }),
+                        x.hint
+                      ] }),
+                      children: E
+                    },
+                    q
+                  ) : E;
+                }) })
+              ]
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+}
+function st({
+  title: t,
+  onSave: r,
+  onCancel: i,
+  saveDisabled: o,
+  saveLabel: e = "Save",
+  cancelLabel: s = "Cancel",
+  embedded: d = !1,
+  className: u,
+  style: a,
+  children: l
+}) {
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      className: u,
+      style: {
+        ...d ? {
+          background: "var(--ui-surface-2)",
+          borderTop: "1px solid var(--ui-border)",
+          padding: "16px 20px"
+        } : {
+          background: "var(--ui-surface)",
+          border: "1px solid var(--ui-border)",
+          borderRadius: 12,
+          padding: 20
+        },
+        ...a
+      },
+      children: [
+        /* @__PURE__ */ n("div", { style: { fontSize: 13, fontWeight: 600, color: "var(--ui-text)", marginBottom: 14 }, children: t }),
+        l,
+        /* @__PURE__ */ g("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 14 }, children: [
+          /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              onClick: i,
+              style: {
+                padding: "8px 16px",
+                borderRadius: 8,
+                border: "1px solid var(--ui-border)",
+                background: "none",
+                color: "var(--ui-text-2)",
+                fontSize: 13,
+                cursor: "pointer"
+              },
+              children: s
+            }
+          ),
+          /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              onClick: r,
+              disabled: o,
+              style: {
+                padding: "8px 20px",
+                borderRadius: 8,
+                background: "var(--ui-accent)",
+                color: "var(--ui-on-accent)",
+                fontWeight: 600,
+                fontSize: 13,
+                cursor: o ? "not-allowed" : "pointer",
+                border: "none",
+                opacity: o ? 0.6 : 1
+              },
+              children: e
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function ut({
+  title: t,
+  subtitle: r,
+  action: i,
+  children: o,
+  testId: e,
+  maxWidth: s = 700,
+  className: d,
+  style: u
+}) {
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      style: { height: "100%", overflowY: "auto", padding: "28px 32px", ...u },
+      className: `ui-scroll-y${d ? ` ${d}` : ""}`,
+      children: /* @__PURE__ */ g("div", { style: { maxWidth: s, margin: "0 auto" }, "data-testid": e, children: [
+        /* @__PURE__ */ g(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "flex-start",
+              marginBottom: 24
+            },
+            children: [
+              /* @__PURE__ */ g("div", { children: [
+                /* @__PURE__ */ n(
+                  "h1",
+                  {
+                    style: {
+                      fontSize: 22,
+                      fontWeight: 700,
+                      color: "var(--ui-text)",
+                      letterSpacing: "-0.5px"
+                    },
+                    children: t
+                  }
+                ),
+                /* @__PURE__ */ n("p", { style: { color: "var(--ui-text-2)", fontSize: 13, marginTop: 2 }, children: r })
+              ] }),
+              i && /* @__PURE__ */ n(
+                "button",
+                {
+                  type: "button",
+                  onClick: i.onClick,
+                  style: {
+                    padding: "9px 16px",
+                    borderRadius: 8,
+                    background: "var(--ui-accent)",
+                    color: "var(--ui-on-accent)",
+                    fontWeight: 600,
+                    fontSize: 13,
+                    cursor: "pointer",
+                    border: "none",
+                    flexShrink: 0
+                  },
+                  children: i.label
+                }
+              )
+            ]
+          }
+        ),
+        o
+      ] })
+    }
+  );
+}
+function ft({
+  children: t,
+  testId: r,
+  className: i,
+  style: o
+}) {
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      "data-testid": r,
+      className: i,
+      style: {
+        background: "var(--ui-surface)",
+        border: "1px solid var(--ui-border)",
+        borderRadius: 12,
+        overflow: "hidden",
+        ...o
+      },
+      children: t
+    }
+  );
+}
+function ht({
+  children: t,
+  style: r,
+  className: i,
+  borderBottom: o = !0
+}) {
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: i,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        padding: "13px 20px",
+        gap: 12,
+        borderBottom: o ? "1px solid var(--ui-border)" : "none",
+        ...r
+      },
+      onMouseEnter: (e) => e.currentTarget.style.background = "var(--ui-surface-2)",
+      onMouseLeave: (e) => e.currentTarget.style.background = "transparent",
+      children: t
+    }
+  );
+}
+function pt({
+  ariaLabel: t,
+  placeholder: r,
+  value: i,
+  onChange: o,
+  className: e,
+  style: s
+}) {
+  return /* @__PURE__ */ n(
+    "input",
+    {
+      "aria-label": t,
+      placeholder: r,
+      value: i,
+      onChange: (d) => o(d.target.value),
+      className: e,
+      style: {
+        padding: "9px 12px",
+        borderRadius: 8,
+        border: "1px solid var(--ui-border)",
+        background: "var(--ui-surface)",
+        color: "var(--ui-text)",
+        fontSize: 13,
+        outline: "none",
+        width: "100%",
+        marginBottom: 16,
+        ...s
+      }
+    }
+  );
+}
+function mt({
+  children: t,
+  className: r,
+  style: i
+}) {
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: r,
+      style: {
+        padding: 32,
+        textAlign: "center",
+        color: "var(--ui-text-3)",
+        fontSize: 13,
+        ...i
+      },
+      children: t
+    }
+  );
+}
+function vt({
+  selectedMonth: t,
+  setSelectedMonth: r,
+  options: i,
+  allOption: o,
+  ariaLabel: e = "Select month",
+  previousLabel: s = "Previous month",
+  nextLabel: d = "Next month",
+  className: u,
+  style: a
+}) {
+  const l = i, f = l.findIndex((y) => y.value === t), h = f >= 0 && f < l.length - 1, p = f > 0;
+  return /* @__PURE__ */ g("div", { className: `ui-month-selector${u ? ` ${u}` : ""}`, style: a, children: [
+    /* @__PURE__ */ n(
+      "button",
+      {
+        type: "button",
+        className: "ui-month-selector-arrow",
+        "aria-label": s,
+        disabled: !h,
+        onClick: () => {
+          h && r(l[f + 1].value);
+        },
+        children: "‹"
+      }
+    ),
+    /* @__PURE__ */ n("div", { className: "ui-month-selector-middle", children: /* @__PURE__ */ n(
+      Fe,
+      {
+        ariaLabel: e,
+        value: t,
+        onChange: r,
+        options: o ? [o, ...l] : l,
+        fullWidth: !1
+      }
+    ) }),
+    /* @__PURE__ */ n(
+      "button",
+      {
+        type: "button",
+        className: "ui-month-selector-arrow",
+        "aria-label": d,
+        disabled: !p,
+        onClick: () => {
+          p && r(l[f - 1].value);
+        },
+        children: "›"
+      }
+    )
+  ] });
+}
+function gt({ size: t = "md", className: r, ...i }) {
+  return /* @__PURE__ */ n(
+    "input",
+    {
+      type: "radio",
+      className: `ui-radio${t === "sm" ? " is-sm" : ""}${r ? ` ${r}` : ""}`,
+      ...i
+    }
+  );
+}
+const oe = {
+  padding: "5px 10px",
+  borderRadius: 6,
+  fontSize: 11,
+  cursor: "pointer"
+};
+function yt({
+  onEdit: t,
+  onDelete: r,
+  confirmDelete: i = !0,
+  editLabel: o = "Edit",
+  deleteLabel: e = "Delete",
+  cancelLabel: s = "Cancel",
+  className: d,
+  style: u
+}) {
+  const [a, l] = L(!1), f = { display: "flex", gap: 6, ...u };
+  return a ? /* @__PURE__ */ g("div", { className: d, style: f, children: [
+    /* @__PURE__ */ n(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          r(), l(!1);
+        },
+        style: {
+          ...oe,
+          background: "var(--ui-red)",
+          color: "var(--ui-on-accent)",
+          fontWeight: 600,
+          border: "none"
+        },
+        children: e
+      }
+    ),
+    /* @__PURE__ */ n(
+      "button",
+      {
+        type: "button",
+        onClick: () => l(!1),
+        style: {
+          ...oe,
+          background: "var(--ui-surface-2)",
+          color: "var(--ui-text-2)",
+          border: "1px solid var(--ui-border)"
+        },
+        children: s
+      }
+    )
+  ] }) : /* @__PURE__ */ g("div", { className: d, style: f, children: [
+    /* @__PURE__ */ n(
+      "button",
+      {
+        type: "button",
+        onClick: t,
+        style: {
+          ...oe,
+          background: "none",
+          border: "1px solid var(--ui-border)",
+          color: "var(--ui-text-2)"
+        },
+        children: o
+      }
+    ),
+    /* @__PURE__ */ n(
+      "button",
+      {
+        type: "button",
+        onClick: () => i ? l(!0) : r(),
+        style: {
+          ...oe,
+          background: "none",
+          border: "1px solid var(--ui-border)",
+          color: "var(--ui-red)"
+        },
+        children: e
+      }
+    )
+  ] });
+}
+function K({
+  width: t = "100%",
+  height: r = 12,
+  radius: i = 6,
+  circle: o = !1,
+  className: e,
+  style: s
+}) {
+  return /* @__PURE__ */ n(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: e ? `ui-skeleton ${e}` : "ui-skeleton",
+      style: {
+        display: "inline-block",
+        width: t,
+        height: r,
+        borderRadius: o ? "50%" : i,
+        ...s
+      }
+    }
+  );
+}
+function Oe({
+  label: t,
+  children: r,
+  className: i
+}) {
+  return /* @__PURE__ */ n("div", { role: "status", "aria-live": "polite", "aria-busy": "true", "aria-label": t, className: i, children: r });
+}
+function bt({
+  label: t,
+  children: r,
+  maxWidth: i = 700,
+  padding: o = "28px 32px",
+  className: e
+}) {
+  return /* @__PURE__ */ n(Oe, { label: t, children: /* @__PURE__ */ n(
+    "div",
+    {
+      style: { height: "100%", overflowY: "auto", padding: o },
+      className: `ui-scroll-y${e ? ` ${e}` : ""}`,
+      children: /* @__PURE__ */ n("div", { style: { maxWidth: i, margin: "0 auto" }, children: r })
+    }
+  ) });
+}
+function wt({
+  actionWidth: t = 120,
+  marginBottom: r = 24
+}) {
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+        gap: 16,
+        marginBottom: r
+      },
+      children: [
+        /* @__PURE__ */ g("div", { children: [
+          /* @__PURE__ */ n(K, { width: 190, height: 22, radius: 7 }),
+          /* @__PURE__ */ n("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ n(K, { width: 300, height: 12 }) })
+        ] }),
+        t !== null && /* @__PURE__ */ n(K, { width: t, height: 36, radius: 8 })
+      ]
+    }
+  );
+}
+function xt() {
+  return /* @__PURE__ */ n("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ n(K, { height: 38, radius: 8 }) });
+}
+function kt({
+  rows: t = 5,
+  leading: r = "dot",
+  trailing: i = "actions"
+}) {
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      "aria-hidden": "true",
+      style: {
+        background: "var(--ui-surface)",
+        border: "1px solid var(--ui-border)",
+        borderRadius: 12,
+        overflow: "hidden"
+      },
+      children: Array.from({ length: t }, (o, e) => /* @__PURE__ */ g(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 12,
+            padding: "13px 20px",
+            borderTop: e === 0 ? "none" : "1px solid var(--ui-border)"
+          },
+          children: [
+            r === "dot" && /* @__PURE__ */ n(K, { width: 12, height: 12, circle: !0 }),
+            r === "avatar" && /* @__PURE__ */ n(K, { width: 44, height: 28, radius: 5 }),
+            /* @__PURE__ */ g("div", { style: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ n(K, { width: `${55 - e % 3 * 8}%`, height: 14 }),
+              /* @__PURE__ */ n("div", { style: { marginTop: 6 }, children: /* @__PURE__ */ n(K, { width: `${34 - e % 2 * 6}%`, height: 11 }) })
+            ] }),
+            i === "amount" && /* @__PURE__ */ n(K, { width: 78, height: 14 }),
+            i === "actions" && /* @__PURE__ */ g("div", { style: { display: "flex", gap: 6 }, children: [
+              /* @__PURE__ */ n(K, { width: 24, height: 24, radius: 6 }),
+              /* @__PURE__ */ n(K, { width: 24, height: 24, radius: 6 })
+            ] })
+          ]
+        },
+        e
+      ))
+    }
+  );
+}
+function Nt({ rows: t = 3 }) {
+  return /* @__PURE__ */ n("div", { "aria-hidden": "true", style: { display: "flex", flexDirection: "column", gap: 10 }, children: Array.from({ length: t }, (r, i) => /* @__PURE__ */ g(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "76px 1fr 84px",
+        gap: 10,
+        alignItems: "center"
+      },
+      children: [
+        /* @__PURE__ */ n(K, { width: 60, height: 11 }),
+        /* @__PURE__ */ n(K, { width: `${72 - i * 9}%`, height: 12 }),
+        /* @__PURE__ */ n("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ n(K, { width: 58, height: 12 }) })
+      ]
+    },
+    i
+  )) });
+}
+function Ct({
+  children: t,
+  tone: r = "info",
+  title: i,
+  action: o,
+  onDismiss: e,
+  dismissLabel: s = "Dismiss",
+  role: d,
+  className: u,
+  style: a
+}) {
+  const l = d ?? (r === "danger" || r === "warning" ? "alert" : "status");
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      role: l,
+      "aria-live": l === "alert" ? "assertive" : "polite",
+      className: ["ui-alert", `ui-alert--${r}`, u ?? ""].filter(Boolean).join(" "),
+      style: a,
+      children: [
+        /* @__PURE__ */ g("div", { className: "ui-alert-content", children: [
+          i && /* @__PURE__ */ n("div", { className: "ui-alert-title", children: i }),
+          /* @__PURE__ */ n("div", { className: "ui-alert-body", children: t })
+        ] }),
+        (o || e) && /* @__PURE__ */ g("div", { className: "ui-alert-actions", children: [
+          o,
+          e && /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              className: "ui-alert-dismiss",
+              "aria-label": s,
+              onClick: e,
+              children: "×"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function Dt({
+  children: t,
+  tone: r = "neutral",
+  variant: i = "soft",
+  dot: o = !1,
+  className: e,
+  style: s
+}) {
+  return /* @__PURE__ */ g(
+    "span",
+    {
+      className: ["ui-badge", `ui-badge--${i}`, `ui-badge--${r}`, e ?? ""].filter(Boolean).join(" "),
+      style: s,
+      children: [
+        o && /* @__PURE__ */ n("span", { className: "ui-badge-dot", "aria-hidden": "true" }),
+        t
+      ]
+    }
+  );
+}
+function St({
+  children: t,
+  tone: r = "neutral",
+  variant: i = "soft",
+  leadingIcon: o,
+  onRemove: e,
+  removeLabel: s = "Remove",
+  className: d,
+  style: u
+}) {
+  return /* @__PURE__ */ g(
+    "span",
+    {
+      className: [
+        "ui-badge",
+        "ui-chip",
+        `ui-badge--${i}`,
+        `ui-badge--${r}`,
+        d ?? ""
+      ].filter(Boolean).join(" "),
+      style: u,
+      children: [
+        o && /* @__PURE__ */ n("span", { className: "ui-chip-icon", "aria-hidden": "true", children: o }),
+        /* @__PURE__ */ n("span", { className: "ui-chip-label", children: t }),
+        e && /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            className: "ui-chip-remove",
+            "aria-label": s,
+            onClick: e,
+            children: "×"
+          }
+        )
+      ]
+    }
+  );
+}
+function Ye({ size: t = 16, label: r = "Loading", className: i, style: o }) {
+  return /* @__PURE__ */ n(
+    "span",
+    {
+      role: "status",
+      "aria-label": r,
+      className: i,
+      style: { display: "inline-flex", flexShrink: 0, ...o },
+      children: /* @__PURE__ */ n(
+        "span",
+        {
+          className: "ui-spinner",
+          "aria-hidden": "true",
+          style: { width: t, height: t, borderWidth: Math.max(1.5, t / 8) }
+        }
+      )
+    }
+  );
+}
+const Xe = ae(function({
+  variant: r = "primary",
+  size: i = "md",
+  loading: o = !1,
+  loadingLabel: e = "Loading",
+  leadingIcon: s,
+  trailingIcon: d,
+  fullWidth: u = !1,
+  className: a,
+  children: l,
+  disabled: f,
+  type: h = "button",
+  ...p
+}, y) {
+  return /* @__PURE__ */ g(
+    "button",
+    {
+      ref: y,
+      type: h,
+      disabled: f || o,
+      "aria-busy": o || void 0,
+      className: [
+        "ui-button",
+        `ui-button--${r}`,
+        `ui-button--${i}`,
+        u ? "is-full" : "",
+        o ? "is-loading" : "",
+        a ?? ""
+      ].filter(Boolean).join(" "),
+      ...p,
+      children: [
+        o ? /* @__PURE__ */ n(Ye, { size: i === "sm" ? 12 : 14, label: e }) : s,
+        l != null && /* @__PURE__ */ n("span", { className: "ui-button-label", children: l }),
+        d
+      ]
+    }
+  );
+}), Mt = ae(function({ className: r, children: i, ...o }, e) {
+  return /* @__PURE__ */ n(
+    Xe,
+    {
+      ref: e,
+      ...o,
+      className: ["ui-button--icon", r ?? ""].filter(Boolean).join(" "),
+      children: i
+    }
+  );
+});
+function qe({ children: t, padding: r = "md", className: i, style: o }) {
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: ["ui-card", `ui-card--pad-${r}`, i ?? ""].filter(Boolean).join(" "),
+      style: o,
+      children: t
+    }
+  );
+}
+function Ge({ title: t, subtitle: r, actions: i, className: o }) {
+  return /* @__PURE__ */ g("div", { className: ["ui-card-header", o ?? ""].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ g("div", { children: [
+      /* @__PURE__ */ n("div", { className: "ui-card-title", children: t }),
+      r && /* @__PURE__ */ n("div", { className: "ui-card-subtitle", children: r })
+    ] }),
+    i && /* @__PURE__ */ n("div", { className: "ui-card-actions", children: i })
+  ] });
+}
+function Ve({
+  children: t,
+  className: r,
+  style: i
+}) {
+  return /* @__PURE__ */ n("div", { className: ["ui-card-body", r ?? ""].filter(Boolean).join(" "), style: i, children: t });
+}
+function Et({
+  children: t,
+  className: r,
+  style: i
+}) {
+  return /* @__PURE__ */ n("div", { className: ["ui-card-footer", r ?? ""].filter(Boolean).join(" "), style: i, children: t });
+}
+function It({
+  title: t,
+  subtitle: r,
+  actions: i,
+  children: o,
+  className: e,
+  contentClassName: s,
+  style: d
+}) {
+  return /* @__PURE__ */ g(qe, { padding: "none", className: e, style: d, children: [
+    /* @__PURE__ */ n(Ge, { title: t, subtitle: r, actions: i }),
+    /* @__PURE__ */ n(Ve, { className: s, children: o })
+  ] });
+}
+function Bt({
+  value: t,
+  onChange: r,
+  options: i,
+  ariaLabel: o,
+  placeholder: e = "Select…",
+  noResultsLabel: s = "No results",
+  disabled: d = !1,
+  className: u,
+  style: a
+}) {
+  const [l, f] = L(!1), [h, p] = L(""), [y, c] = L(0), m = B(null), b = B(null), D = J(), k = i.find((w) => w.value === t), N = h.trim().toLowerCase(), S = N ? i.filter((w) => w.label.toLowerCase().includes(N)) : i;
+  j(() => {
+    if (!l) return;
+    const w = (C) => {
+      var T;
+      (T = m.current) != null && T.contains(C.target) || f(!1);
+    };
+    return document.addEventListener("mousedown", w), () => document.removeEventListener("mousedown", w);
+  }, [l]);
+  const I = () => {
+    d || (f(!0), p(""), c(0));
+  }, R = (w) => {
+    var C;
+    w.disabled || (r(w.value), f(!1), p(""), (C = b.current) == null || C.focus());
+  }, F = (w) => {
+    if (!d)
+      if (w.key === "ArrowDown")
+        w.preventDefault(), l ? c((C) => Math.min(S.length - 1, C + 1)) : I();
+      else if (w.key === "ArrowUp")
+        w.preventDefault(), c((C) => Math.max(0, C - 1));
+      else if (w.key === "Enter") {
+        w.preventDefault();
+        const C = S[y];
+        C && R(C);
+      } else w.key === "Escape" && f(!1);
+  };
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      ref: m,
+      className: ["ui-combobox", u ?? ""].filter(Boolean).join(" "),
+      style: a,
+      children: [
+        /* @__PURE__ */ n(
+          "input",
+          {
+            ref: b,
+            role: "combobox",
+            "aria-label": o,
+            "aria-expanded": l,
+            "aria-controls": D,
+            "aria-autocomplete": "list",
+            "aria-activedescendant": l && S[y] ? `${D}-${y}` : void 0,
+            className: "ui-input ui-combobox-input",
+            value: l ? h : (k == null ? void 0 : k.label) ?? "",
+            placeholder: (k == null ? void 0 : k.label) ?? e,
+            disabled: d,
+            onFocus: I,
+            onClick: I,
+            onChange: (w) => {
+              p(w.target.value), f(!0), c(0);
+            },
+            onKeyDown: F
+          }
+        ),
+        l && /* @__PURE__ */ n("div", { id: D, role: "listbox", "aria-label": o, className: "ui-combobox-menu", children: S.length === 0 ? /* @__PURE__ */ n("div", { className: "ui-combobox-empty", children: s }) : S.map((w, C) => /* @__PURE__ */ g(
+          "div",
+          {
+            id: `${D}-${C}`,
+            role: "option",
+            "aria-selected": w.value === t,
+            "aria-disabled": w.disabled || void 0,
+            className: [
+              "ui-combobox-option",
+              C === y ? "is-active" : "",
+              w.value === t ? "is-selected" : "",
+              w.disabled ? "is-disabled" : ""
+            ].filter(Boolean).join(" "),
+            onMouseDown: (T) => T.preventDefault(),
+            onMouseEnter: () => c(C),
+            onClick: () => R(w),
+            children: [
+              /* @__PURE__ */ n("span", { className: "ui-combobox-label", children: w.label }),
+              w.description && /* @__PURE__ */ n("span", { className: "ui-combobox-description", children: w.description })
+            ]
+          },
+          w.value
+        )) })
+      ]
+    }
+  );
+}
+function Tt({
+  columns: t,
+  rows: r,
+  rowKey: i,
+  ariaLabel: o,
+  caption: e,
+  sort: s,
+  onSortChange: d,
+  emptyState: u = "No data",
+  onRowClick: a,
+  className: l,
+  style: f
+}) {
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: ["ui-data-table-wrap", l ?? ""].filter(Boolean).join(" "),
+      style: f,
+      children: /* @__PURE__ */ g("table", { className: "ui-data-table", "aria-label": o, children: [
+        e && /* @__PURE__ */ n("caption", { children: e }),
+        /* @__PURE__ */ n("thead", { children: /* @__PURE__ */ n("tr", { children: t.map((h) => {
+          const p = (s == null ? void 0 : s.key) === h.key ? s.direction : void 0;
+          return /* @__PURE__ */ n(
+            "th",
+            {
+              scope: "col",
+              "aria-sort": p === "asc" ? "ascending" : p === "desc" ? "descending" : h.sortable ? "none" : void 0,
+              style: { width: h.width, textAlign: h.align ?? "left" },
+              children: h.sortable && d ? /* @__PURE__ */ g(
+                "button",
+                {
+                  type: "button",
+                  className: "ui-data-table-sort",
+                  onClick: () => d({
+                    key: h.key,
+                    direction: p === "asc" ? "desc" : "asc"
+                  }),
+                  children: [
+                    h.header,
+                    /* @__PURE__ */ n("span", { className: "ui-data-table-sort-icon", "aria-hidden": "true", children: p === "asc" ? "▲" : p === "desc" ? "▼" : "↕" })
+                  ]
+                }
+              ) : h.header
+            },
+            h.key
+          );
+        }) }) }),
+        /* @__PURE__ */ n("tbody", { children: r.length === 0 ? /* @__PURE__ */ n("tr", { children: /* @__PURE__ */ n("td", { className: "ui-data-table-empty", colSpan: t.length, children: u }) }) : r.map((h, p) => /* @__PURE__ */ n(
+          "tr",
+          {
+            className: a ? "is-clickable" : void 0,
+            tabIndex: a ? 0 : void 0,
+            onClick: () => a == null ? void 0 : a(h),
+            onKeyDown: (y) => {
+              a && (y.key === "Enter" || y.key === " ") && (y.preventDefault(), a(h));
+            },
+            children: t.map((y) => /* @__PURE__ */ n("td", { style: { textAlign: y.align ?? "left" }, children: y.render ? y.render(h, p) : String(h[y.key] ?? "") }, y.key))
+          },
+          i(h, p)
+        )) })
+      ] })
+    }
+  );
+}
+function $t({
+  open: t,
+  onClose: r,
+  title: i,
+  children: o,
+  footer: e,
+  side: s = "right",
+  width: d = 420,
+  closeLabel: u = "Close",
+  className: a,
+  style: l,
+  bodyClassName: f
+}) {
+  const [h, p] = L(!1), y = J(), c = B(null);
+  return j(() => {
+    p(!0);
+  }, []), ke({
+    active: t && h,
+    containerRef: c,
+    onEscape: r
+  }), j(() => {
+    if (!t) return;
+    const m = document.body.style.overflow;
+    return document.body.style.overflow = "hidden", () => {
+      document.body.style.overflow = m;
+    };
+  }, [t]), !t || !h ? null : re(
+    /* @__PURE__ */ n("div", { className: "ui-drawer-overlay", onClick: r, children: /* @__PURE__ */ g(
+      "div",
+      {
+        ref: c,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": y,
+        tabIndex: -1,
+        className: ["ui-drawer", `ui-drawer--${s}`, a ?? ""].filter(Boolean).join(" "),
+        style: { width: d, maxWidth: "100vw", ...l },
+        onClick: (m) => m.stopPropagation(),
+        children: [
+          /* @__PURE__ */ g("div", { className: "ui-drawer-header", children: [
+            /* @__PURE__ */ n("div", { id: y, className: "ui-drawer-title", children: i }),
+            /* @__PURE__ */ n(
+              "button",
+              {
+                type: "button",
+                className: "ui-drawer-close",
+                "aria-label": u,
+                onClick: r,
+                children: "×"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ n("div", { className: ["ui-drawer-body", f ?? ""].filter(Boolean).join(" "), children: o }),
+          e && /* @__PURE__ */ n("div", { className: "ui-drawer-footer", children: e })
+        ]
+      }
+    ) }),
+    document.body
+  );
+}
+function _e(t) {
+  return t.type !== "separator";
+}
+function Rt({
+  trigger: t,
+  items: r,
+  ariaLabel: i,
+  align: o = "start",
+  className: e,
+  style: s
+}) {
+  const [d, u] = L(!1), a = B(null), l = B(null), f = J(), h = O((c = !0) => {
+    var m;
+    u(!1), c && ((m = a.current) == null || m.focus());
+  }, []);
+  j(() => {
+    var D;
+    if (!d) return;
+    const c = (D = l.current) == null ? void 0 : D.querySelector('[role="menuitem"]:not(:disabled)');
+    c == null || c.focus();
+    const m = (k) => {
+      var S, I;
+      const N = k.target;
+      (S = a.current) != null && S.contains(N) || (I = l.current) != null && I.contains(N) || h(!1);
+    }, b = (k) => {
+      k.key === "Escape" && h();
+    };
+    return document.addEventListener("mousedown", m), document.addEventListener("keydown", b), () => {
+      document.removeEventListener("mousedown", m), document.removeEventListener("keydown", b);
+    };
+  }, [d, h]);
+  const p = (c) => {
+    d || (c.key === "ArrowDown" || c.key === "Enter" || c.key === " ") && (c.preventDefault(), u(!0));
+  }, y = (c) => {
+    var D, k, N, S, I;
+    const m = Array.from(
+      ((D = l.current) == null ? void 0 : D.querySelectorAll('[role="menuitem"]:not(:disabled)')) ?? []
+    );
+    if (!m.length) return;
+    const b = m.indexOf(document.activeElement);
+    c.key === "ArrowDown" ? (c.preventDefault(), (k = m[(b + 1) % m.length]) == null || k.focus()) : c.key === "ArrowUp" ? (c.preventDefault(), (N = m[(b - 1 + m.length) % m.length]) == null || N.focus()) : c.key === "Home" ? (c.preventDefault(), (S = m[0]) == null || S.focus()) : c.key === "End" ? (c.preventDefault(), (I = m[m.length - 1]) == null || I.focus()) : c.key === "Tab" && h(!1);
+  };
+  return /* @__PURE__ */ g("div", { className: ["ui-menu", e ?? ""].filter(Boolean).join(" "), style: s, children: [
+    /* @__PURE__ */ g(
+      "button",
+      {
+        ref: a,
+        type: "button",
+        className: "ui-menu-trigger",
+        "aria-label": i,
+        "aria-haspopup": "menu",
+        "aria-expanded": d,
+        "aria-controls": d ? f : void 0,
+        onClick: () => d ? h() : u(!0),
+        onKeyDown: p,
+        children: [
+          t,
+          /* @__PURE__ */ n("span", { className: "ui-menu-caret", "aria-hidden": "true", children: "▾" })
+        ]
+      }
+    ),
+    d && /* @__PURE__ */ n(
+      "div",
+      {
+        ref: l,
+        id: f,
+        role: "menu",
+        "aria-label": i,
+        className: `ui-menu-list${o === "end" ? " is-end" : ""}`,
+        onKeyDown: y,
+        children: r.map((c, m) => _e(c) ? /* @__PURE__ */ g(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            disabled: c.disabled,
+            className: ["ui-menu-item", c.danger ? "is-danger" : ""].filter(Boolean).join(" "),
+            onClick: () => {
+              var b;
+              c.disabled || ((b = c.onSelect) == null || b.call(c), h());
+            },
+            children: [
+              c.icon && /* @__PURE__ */ n("span", { className: "ui-menu-item-icon", "aria-hidden": "true", children: c.icon }),
+              /* @__PURE__ */ n("span", { children: c.label })
+            ]
+          },
+          c.id
+        ) : /* @__PURE__ */ n(
+          "div",
+          {
+            role: "separator",
+            className: "ui-menu-separator"
+          },
+          c.id ?? `separator-${m}`
+        ))
+      }
+    )
+  ] });
+}
+function Lt({
+  title: t,
+  description: r,
+  icon: i,
+  action: o,
+  className: e,
+  style: s
+}) {
+  return /* @__PURE__ */ g("div", { className: ["ui-empty-state", e ?? ""].filter(Boolean).join(" "), style: s, children: [
+    i && /* @__PURE__ */ n("div", { className: "ui-empty-state-icon", "aria-hidden": "true", children: i }),
+    /* @__PURE__ */ n("div", { className: "ui-empty-state-title", children: t }),
+    r && /* @__PURE__ */ n("div", { className: "ui-empty-state-description", children: r }),
+    o && /* @__PURE__ */ n("div", { className: "ui-empty-state-action", children: o })
+  ] });
+}
+function At({
+  onFiles: t,
+  accept: r,
+  multiple: i = !1,
+  disabled: o = !1,
+  label: e = "Drop files here or click to browse",
+  hint: s,
+  className: d,
+  style: u,
+  inputId: a
+}) {
+  const l = B(null), [f, h] = L(!1), p = (m) => {
+    m != null && m.length && t(Array.from(m));
+  }, y = () => {
+    var m;
+    o || (m = l.current) == null || m.click();
+  }, c = (m) => {
+    m.preventDefault(), h(!1), !o && p(m.dataTransfer.files);
+  };
+  return /* @__PURE__ */ g(ce, { children: [
+    /* @__PURE__ */ n(
+      "input",
+      {
+        ref: l,
+        id: a,
+        type: "file",
+        accept: r,
+        multiple: i,
+        disabled: o,
+        "aria-label": typeof e == "string" ? e : "Upload files",
+        className: "ui-file-upload-input",
+        onChange: (m) => {
+          p(m.target.files), m.target.value = "";
+        }
+      }
+    ),
+    /* @__PURE__ */ g(
+      "div",
+      {
+        className: [
+          "ui-file-upload",
+          f ? "is-dragging" : "",
+          o ? "is-disabled" : "",
+          d ?? ""
+        ].filter(Boolean).join(" "),
+        style: u,
+        role: "button",
+        tabIndex: o ? -1 : 0,
+        "aria-disabled": o || void 0,
+        onClick: y,
+        onKeyDown: (m) => {
+          (m.key === "Enter" || m.key === " ") && (m.preventDefault(), y());
+        },
+        onDragOver: (m) => {
+          m.preventDefault(), o || h(!0);
+        },
+        onDragLeave: () => h(!1),
+        onDrop: c,
+        children: [
+          /* @__PURE__ */ n("div", { className: "ui-file-upload-icon", "aria-hidden": "true", children: "↑" }),
+          /* @__PURE__ */ n("div", { className: "ui-file-upload-label", children: e }),
+          s && /* @__PURE__ */ n("div", { className: "ui-file-upload-hint", children: s })
+        ]
+      }
+    )
+  ] });
+}
+function ge(t) {
+  return typeof t == "function";
+}
+function jt({
+  label: t,
+  htmlFor: r,
+  id: i,
+  hint: o,
+  error: e,
+  required: s = !1,
+  children: d,
+  className: u,
+  style: a
+}) {
+  const l = J(), f = !ge(d) && Me(d) ? d : null, h = typeof (f == null ? void 0 : f.props.id) == "string" ? f.props.id : void 0, p = r ?? i ?? h ?? l, y = o ? `${p}-hint` : void 0, c = e ? `${p}-error` : void 0, m = [y, c].filter(Boolean).join(" ") || void 0, b = !!e;
+  let D;
+  if (ge(d))
+    D = d({ id: p, describedBy: m, invalid: b });
+  else if (f) {
+    const k = [f.props["aria-describedby"], m].filter(Boolean).join(" ") || void 0;
+    D = Ee(f, {
+      id: h ?? p,
+      "aria-describedby": k,
+      "aria-invalid": b ? !0 : f.props["aria-invalid"],
+      ...s ? { required: !0 } : {}
+    });
+  } else
+    D = d;
+  return /* @__PURE__ */ g("div", { className: ["ui-form-field", u ?? ""].filter(Boolean).join(" "), style: a, children: [
+    t && /* @__PURE__ */ g("label", { className: "ui-form-label", htmlFor: p, children: [
+      t,
+      s && /* @__PURE__ */ g("span", { className: "ui-form-required", "aria-hidden": "true", children: [
+        " ",
+        "*"
+      ] })
+    ] }),
+    o && /* @__PURE__ */ n("div", { id: y, className: "ui-form-hint", children: o }),
+    D,
+    e && /* @__PURE__ */ n("div", { id: c, className: "ui-form-error", role: "alert", children: e })
+  ] });
+}
+function Pt({
+  title: t,
+  subtitle: r,
+  actions: i,
+  onBack: o,
+  backLabel: e = "Back",
+  className: s,
+  style: d
+}) {
+  return /* @__PURE__ */ g("div", { className: ["ui-page-header", s ?? ""].filter(Boolean).join(" "), style: d, children: [
+    /* @__PURE__ */ g("div", { className: "ui-page-header-main", children: [
+      o && /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          className: "ui-page-header-back",
+          "aria-label": e,
+          onClick: o,
+          children: "‹"
+        }
+      ),
+      /* @__PURE__ */ g("div", { children: [
+        /* @__PURE__ */ n("h1", { className: "ui-page-header-title", children: t }),
+        r && /* @__PURE__ */ n("p", { className: "ui-page-header-subtitle", children: r })
+      ] })
+    ] }),
+    i && /* @__PURE__ */ n("div", { className: "ui-page-header-actions", children: i })
+  ] });
+}
+function Qe({ children: t, container: r }) {
+  const [i, o] = L(!1);
+  return j(() => {
+    o(!0);
+  }, []), !i || typeof document > "u" ? null : re(t, r ?? document.body);
+}
+function Wt({
+  value: t,
+  max: r = 100,
+  label: i = "Progress",
+  valueText: o,
+  size: e = "md",
+  className: s,
+  style: d
+}) {
+  const u = t == null, a = r > 0 ? r : 100, l = u ? 0 : Math.min(a, Math.max(0, t)), f = u ? 0 : l / a * 100;
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      role: "progressbar",
+      "aria-label": i,
+      "aria-valuemin": u ? void 0 : 0,
+      "aria-valuemax": u ? void 0 : a,
+      "aria-valuenow": u ? void 0 : l,
+      "aria-valuetext": o,
+      className: [
+        "ui-progress",
+        `ui-progress--${e}`,
+        u ? "is-indeterminate" : "",
+        s ?? ""
+      ].filter(Boolean).join(" "),
+      style: d,
+      children: /* @__PURE__ */ n(
+        "span",
+        {
+          className: "ui-progress-bar",
+          style: u ? void 0 : { width: `${f}%` }
+        }
+      )
+    }
+  );
+}
+const Je = ae(function({
+  size: r = "md",
+  invalid: i = !1,
+  leadingIcon: o,
+  trailingIcon: e,
+  onClear: s,
+  clearLabel: d = "Clear",
+  className: u,
+  wrapperClassName: a,
+  style: l,
+  wrapperStyle: f,
+  disabled: h,
+  value: p,
+  ...y
+}, c) {
+  const m = !!s && p != null && p !== "";
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      className: [
+        "ui-input-wrap",
+        `ui-input-wrap--${r}`,
+        i ? "is-invalid" : "",
+        h ? "is-disabled" : "",
+        a ?? ""
+      ].filter(Boolean).join(" "),
+      style: f,
+      children: [
+        o && /* @__PURE__ */ n("span", { className: "ui-input-icon", "aria-hidden": "true", children: o }),
+        /* @__PURE__ */ n(
+          "input",
+          {
+            ref: c,
+            className: ["ui-input", u ?? ""].filter(Boolean).join(" "),
+            style: l,
+            value: p,
+            disabled: h,
+            "aria-invalid": i || void 0,
+            ...y
+          }
+        ),
+        e && /* @__PURE__ */ n("span", { className: "ui-input-icon", "aria-hidden": "true", children: e }),
+        m && /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            className: "ui-input-clear",
+            "aria-label": d,
+            onClick: s,
+            disabled: h,
+            children: "×"
+          }
+        )
+      ]
+    }
+  );
+});
+function Ze() {
+  return /* @__PURE__ */ g(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ n("circle", { cx: "6", cy: "6", r: "4.25" }),
+        /* @__PURE__ */ n("path", { d: "m9.2 9.2 3 3" })
+      ]
+    }
+  );
+}
+function Ht({
+  value: t,
+  onChange: r,
+  ariaLabel: i,
+  placeholder: o = "Search",
+  onClear: e,
+  clearLabel: s = "Clear search",
+  disabled: d = !1,
+  className: u,
+  style: a
+}) {
+  return /* @__PURE__ */ n(
+    Je,
+    {
+      type: "text",
+      value: t,
+      onChange: (l) => r(l.target.value),
+      "aria-label": i,
+      placeholder: o,
+      leadingIcon: /* @__PURE__ */ n(Ze, {}),
+      onClear: t ? e ?? (() => r("")) : void 0,
+      clearLabel: s,
+      disabled: d,
+      className: u,
+      style: a
+    }
+  );
+}
+function zt({
+  items: t,
+  value: r,
+  onChange: i,
+  ariaLabel: o,
+  size: e = "md",
+  className: s,
+  style: d
+}) {
+  const u = B([]), a = (l) => {
+    var c;
+    const f = t.map((m, b) => ({ item: m, index: b })).filter(({ item: m }) => !m.disabled);
+    if (!f.length) return;
+    const h = f.findIndex(({ item: m }) => m.value === r);
+    let p = null;
+    if ((l.key === "ArrowRight" || l.key === "ArrowDown") && (p = (h + 1) % f.length), (l.key === "ArrowLeft" || l.key === "ArrowUp") && (p = (h - 1 + f.length) % f.length), l.key === "Home" && (p = 0), l.key === "End" && (p = f.length - 1), p == null) return;
+    l.preventDefault();
+    const y = f[p];
+    i(y.item.value), (c = u.current[y.index]) == null || c.focus();
+  };
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": o,
+      className: ["ui-segmented", `ui-segmented--${e}`, s ?? ""].filter(Boolean).join(" "),
+      style: d,
+      onKeyDown: a,
+      children: t.map((l, f) => {
+        const h = l.value === r;
+        return /* @__PURE__ */ n(
+          "button",
+          {
+            ref: (p) => {
+              u.current[f] = p;
+            },
+            type: "button",
+            role: "radio",
+            "aria-checked": h,
+            tabIndex: h ? 0 : -1,
+            disabled: l.disabled,
+            className: ["ui-segmented-item", h ? "is-active" : ""].filter(Boolean).join(" "),
+            onClick: () => i(l.value),
+            children: l.label
+          },
+          l.value
+        );
+      })
+    }
+  );
+}
+function Ut({
+  value: t,
+  onChange: r,
+  min: i = 0,
+  max: o = 100,
+  step: e = 1,
+  label: s,
+  ariaLabel: d,
+  showValue: u = !0,
+  formatValue: a = (y) => String(y),
+  disabled: l = !1,
+  id: f,
+  className: h,
+  style: p
+}) {
+  const y = J(), c = f ?? y;
+  return /* @__PURE__ */ g("div", { className: ["ui-slider", h ?? ""].filter(Boolean).join(" "), style: p, children: [
+    (s || u) && /* @__PURE__ */ g("div", { className: "ui-slider-head", children: [
+      s && /* @__PURE__ */ n("label", { htmlFor: c, className: "ui-slider-label", children: s }),
+      u && /* @__PURE__ */ n("span", { className: "ui-slider-value", children: a(t) })
+    ] }),
+    /* @__PURE__ */ n(
+      "input",
+      {
+        id: c,
+        type: "range",
+        className: "ui-slider-input",
+        min: i,
+        max: o,
+        step: e,
+        value: t,
+        disabled: l,
+        "aria-label": d ?? (s ? void 0 : "Slider"),
+        onChange: (m) => r(Number(m.target.value))
+      }
+    )
+  ] });
+}
+function Kt({
+  checked: t,
+  onChange: r,
+  label: i,
+  description: o,
+  ariaLabel: e,
+  disabled: s = !1,
+  size: d = "md",
+  id: u,
+  name: a,
+  className: l,
+  style: f
+}) {
+  const h = J(), p = `${u ?? h}-label`, y = `${u ?? h}-description`, c = !e && i ? p : void 0, m = e ?? "Toggle";
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      className: ["ui-switch-row", s ? "is-disabled" : "", l ?? ""].filter(Boolean).join(" "),
+      style: f,
+      children: [
+        (i || o) && /* @__PURE__ */ g("div", { className: "ui-switch-copy", children: [
+          i && /* @__PURE__ */ n("span", { id: p, className: "ui-switch-label", children: i }),
+          o && /* @__PURE__ */ n("span", { id: y, className: "ui-switch-description", children: o })
+        ] }),
+        /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            role: "switch",
+            "aria-checked": t,
+            "aria-label": c ? void 0 : m,
+            "aria-labelledby": c,
+            "aria-describedby": o ? y : void 0,
+            disabled: s,
+            name: a,
+            className: ["ui-switch", `ui-switch--${d}`, t ? "is-checked" : ""].filter(Boolean).join(" "),
+            onClick: () => r(!t),
+            children: /* @__PURE__ */ n("span", { className: "ui-switch-thumb", "aria-hidden": "true" })
+          }
+        )
+      ]
+    }
+  );
+}
+function Ft({ items: t, value: r, onChange: i, ariaLabel: o, className: e, style: s }) {
+  const d = B([]), u = (a) => {
+    var y;
+    const l = t.map((c, m) => ({ item: c, index: m })).filter(({ item: c }) => !c.disabled);
+    if (!l.length) return;
+    const f = l.findIndex(({ item: c }) => c.id === r);
+    let h = null;
+    if (a.key === "ArrowRight" && (h = (f + 1) % l.length), a.key === "ArrowLeft" && (h = (f - 1 + l.length) % l.length), a.key === "Home" && (h = 0), a.key === "End" && (h = l.length - 1), h == null) return;
+    a.preventDefault();
+    const p = l[h];
+    i(p.item.id), (y = d.current[p.index]) == null || y.focus();
+  };
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": o,
+      className: ["ui-tabs", e ?? ""].filter(Boolean).join(" "),
+      style: s,
+      onKeyDown: u,
+      children: t.map((a, l) => {
+        const f = a.id === r;
+        return /* @__PURE__ */ n(
+          "button",
+          {
+            ref: (h) => {
+              d.current[l] = h;
+            },
+            type: "button",
+            role: "tab",
+            "aria-selected": f,
+            tabIndex: f ? 0 : -1,
+            disabled: a.disabled,
+            className: ["ui-tab", f ? "is-active" : ""].filter(Boolean).join(" "),
+            onClick: () => i(a.id),
+            children: a.label
+          },
+          a.id
+        );
+      })
+    }
+  );
+}
+const Ot = ae(function({ invalid: r = !1, className: i, ...o }, e) {
+  return /* @__PURE__ */ n(
+    "textarea",
+    {
+      ref: e,
+      className: ["ui-textarea", i ?? ""].filter(Boolean).join(" "),
+      "aria-invalid": r || void 0,
+      ...o
+    }
+  );
+}), Ce = Be(null);
+function Yt() {
+  const t = Ie(Ce);
+  if (!t) throw new Error("useToast must be used inside a ToastProvider");
+  return t;
+}
+function et({ toast: t, onDismiss: r }) {
+  const i = B(r);
+  return i.current = r, j(() => {
+    const o = t.duration ?? 4e3;
+    if (o <= 0) return;
+    const e = setTimeout(() => i.current(), o);
+    return () => clearTimeout(e);
+  }, [t.duration]), /* @__PURE__ */ g("div", { className: `ui-toast ui-toast--${t.tone ?? "info"}`, role: "status", children: [
+    /* @__PURE__ */ g("div", { className: "ui-toast-content", children: [
+      t.title && /* @__PURE__ */ n("div", { className: "ui-toast-title", children: t.title }),
+      t.description && /* @__PURE__ */ n("div", { className: "ui-toast-description", children: t.description })
+    ] }),
+    /* @__PURE__ */ n("button", { type: "button", className: "ui-toast-close", "aria-label": "Dismiss", onClick: r, children: "×" })
+  ] });
+}
+function Xt({
+  children: t,
+  position: r = "bottom-right",
+  maxToasts: i = 4
+}) {
+  const [o, e] = L([]), s = B(0), d = O((a) => {
+    e((l) => l.filter((f) => f.id !== a));
+  }, []), u = O(
+    (a) => {
+      const l = `toast-${++s.current}`, f = Math.max(1, i);
+      return e((h) => [...h, { ...a, id: l }].slice(-f)), l;
+    },
+    [i]
+  );
+  return /* @__PURE__ */ g(Ce.Provider, { value: { showToast: u, dismissToast: d }, children: [
+    t,
+    /* @__PURE__ */ n(Qe, { children: /* @__PURE__ */ n(
+      "div",
+      {
+        className: `ui-toast-viewport ui-toast-viewport--${r}`,
+        "aria-live": "polite",
+        "aria-label": "Notifications",
+        children: o.map((a) => /* @__PURE__ */ n(et, { toast: a, onDismiss: () => d(a.id) }, a.id))
+      }
+    ) })
+  ] });
+}
+function qt({
+  children: t,
+  className: r,
+  style: i,
+  ...o
+}) {
+  return /* @__PURE__ */ n(
+    "span",
+    {
+      className: ["ui-visually-hidden", r ?? ""].filter(Boolean).join(" "),
+      style: i,
+      ...o,
+      children: t
+    }
+  );
+}
+export {
+  Ct as Alert,
+  it as Avatar,
+  Dt as Badge,
+  Xe as Button,
+  qe as Card,
+  Ve as CardBody,
+  Et as CardFooter,
+  Ge as CardHeader,
+  ot as Checkbox,
+  St as Chip,
+  at as ColorPicker,
+  Bt as Combobox,
+  dt as ConfirmModal,
+  lt as CopyValue,
+  Tt as DataTable,
+  ct as DatePicker,
+  Nt as DetailRowsSkeleton,
+  $t as Drawer,
+  Fe as Dropdown,
+  Rt as DropdownMenu,
+  At as Dropzone,
+  Lt as EmptyState,
+  At as FileUpload,
+  jt as FormField,
+  Mt as IconButton,
+  st as InlineEditorCard,
+  ft as ListCard,
+  kt as ListCardSkeleton,
+  mt as ListEmptyState,
+  ht as ListRow,
+  ut as ListScreen,
+  pt as ListSearch,
+  Rt as Menu,
+  Ue as Modal,
+  vt as MonthSelector,
+  Re as NumberStepper,
+  Pt as PageHeader,
+  wt as PageHeaderSkeleton,
+  bt as PageSkeleton,
+  Qe as Portal,
+  Wt as ProgressBar,
+  gt as Radio,
+  yt as RowActions,
+  Ht as SearchInput,
+  xt as SearchSkeleton,
+  It as Section,
+  zt as SegmentedControl,
+  $t as Sheet,
+  K as Skeleton,
+  Oe as SkeletonStatus,
+  Ut as Slider,
+  Ye as Spinner,
+  Kt as Switch,
+  Ft as Tabs,
+  Je as TextInput,
+  Ot as Textarea,
+  Xt as ToastProvider,
+  Ne as Tooltip,
+  qt as VisuallyHidden,
+  Yt as useToast
+};
+//# sourceMappingURL=index.js.map