chordia-ui 3.9.5 → 3.9.7

package/dist/components/policies.es.js

@@ -0,0 +1,1046 @@
+import { jsxs as r, jsx as e, Fragment as E } from "react/jsx-runtime";
+import { useState as W, useRef as ue, useEffect as P, useMemo as G } from "react";
+import { MoreHorizontal as xe, CloudOff as ve, CloudCheck as ke, Check as we, ScrollText as fe, X as Fe, Pencil as Se, Plus as ze, Filter as De, Search as Be } from "lucide-react";
+import { u as Ie } from "../useMediaQuery.es.js";
+const u = {
+  ink: "var(--Grey-Strong, #2E3236)",
+  muted: "var(--Grey-Muted, #808183)",
+  cardBorder: "var(--neutral-300, #B2B2B0)",
+  white: "var(--Grey-White, #FFFFFF)",
+  btnBorder: "var(--Grey-absent, #D9D9D9)",
+  dark: "var(--neutral-850, #272727)",
+  onDark: "var(--neutral-50, #F2F2F0)",
+  menuHover: "var(--neutral-100, #E6E6E6)"
+}, T = "var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)", We = (t) => ({
+  display: "-webkit-box",
+  WebkitLineClamp: t,
+  WebkitBoxOrient: "vertical",
+  overflow: "hidden"
+}), Ee = (t) => /disabled|inactive|off|available/i.test(String(t || ""));
+function re({ children: t, onClick: l }) {
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      onClick: l,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: 28,
+        padding: "0 10px",
+        borderRadius: 10,
+        border: `1px solid ${u.btnBorder}`,
+        background: u.white,
+        color: u.ink,
+        fontFamily: T,
+        fontSize: 14,
+        fontWeight: 600,
+        cursor: "pointer",
+        whiteSpace: "nowrap"
+      },
+      children: t
+    }
+  );
+}
+function le({ children: t, onClick: l }) {
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      onClick: l,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: 28,
+        padding: "0 16px",
+        borderRadius: 10,
+        border: "none",
+        background: u.dark,
+        color: u.onDark,
+        fontFamily: T,
+        fontSize: 14,
+        fontWeight: 500,
+        cursor: "pointer",
+        whiteSpace: "nowrap"
+      },
+      children: t
+    }
+  );
+}
+function He({ items: t, onClose: l }) {
+  const d = ue(null);
+  return P(() => {
+    const a = (c) => {
+      d.current && !d.current.contains(c.target) && (l == null || l());
+    }, s = (c) => {
+      c.key === "Escape" && (l == null || l());
+    };
+    return document.addEventListener("mousedown", a), document.addEventListener("keydown", s), () => {
+      document.removeEventListener("mousedown", a), document.removeEventListener("keydown", s);
+    };
+  }, [l]), /* @__PURE__ */ e(
+    "div",
+    {
+      ref: d,
+      role: "menu",
+      style: {
+        position: "absolute",
+        top: "calc(100% + 4px)",
+        right: 0,
+        zIndex: 50,
+        minWidth: 168,
+        display: "flex",
+        flexDirection: "column",
+        background: u.white,
+        border: `1px solid ${u.btnBorder}`,
+        borderRadius: 8,
+        boxShadow: "var(--shadow-popover, 0 12px 32px rgba(11,11,11,0.12))",
+        overflow: "hidden"
+      },
+      children: t.map((a, s) => /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          role: "menuitem",
+          onClick: a.onClick,
+          style: {
+            display: "flex",
+            alignItems: "center",
+            width: "100%",
+            padding: "10px 12px",
+            border: "none",
+            borderTop: s === 0 ? "none" : "1px solid var(--color-divider, #E5E7EB)",
+            background: "transparent",
+            cursor: "pointer",
+            textAlign: "left",
+            fontFamily: T,
+            fontSize: 13,
+            color: u.ink,
+            lineHeight: 1.2,
+            whiteSpace: "nowrap"
+          },
+          onMouseEnter: (c) => {
+            c.currentTarget.style.background = u.menuHover;
+          },
+          onMouseLeave: (c) => {
+            c.currentTarget.style.background = "transparent";
+          },
+          children: a.label
+        },
+        a.label
+      ))
+    }
+  );
+}
+function oe({
+  policy: t = {},
+  variant: l = "active",
+  onTest: d,
+  onViewDetails: a,
+  onApply: s,
+  onToggleStatus: c,
+  onEdit: p
+}) {
+  const f = l === "browse", g = t.status || (f ? "Disabled" : "Active"), y = Ee(g), z = y ? ve : ke, [F, w] = W(!1), m = [];
+  c && m.push({
+    label: y ? "Enable Policy" : "Disable Policy",
+    onClick: () => {
+      w(!1), c(t);
+    }
+  }), p && m.push({
+    label: "Edit definition",
+    onClick: () => {
+      w(!1), p(t);
+    }
+  });
+  const H = m.length > 0;
+  return /* @__PURE__ */ r(
+    "article",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 12,
+        alignItems: "flex-start",
+        minHeight: 82,
+        padding: 16,
+        borderRadius: 8,
+        border: `1px solid ${u.cardBorder}`,
+        background: u.white,
+        boxSizing: "border-box",
+        width: "100%",
+        fontFamily: T
+      },
+      children: [
+        /* @__PURE__ */ r("div", { style: { display: "flex", flexDirection: "column", gap: 8, width: "100%" }, children: [
+          /* @__PURE__ */ r("div", { style: { display: "flex", gap: 8, alignItems: "center", width: "100%" }, children: [
+            /* @__PURE__ */ e(
+              "p",
+              {
+                style: {
+                  flex: 1,
+                  minWidth: 0,
+                  margin: 0,
+                  fontSize: 14,
+                  fontWeight: 600,
+                  color: u.ink,
+                  lineHeight: "normal"
+                },
+                children: t.name || "Untitled policy"
+              }
+            ),
+            H && /* @__PURE__ */ r("div", { style: { position: "relative", display: "inline-flex", flexShrink: 0 }, children: [
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "More actions",
+                  "aria-haspopup": "menu",
+                  "aria-expanded": F,
+                  onClick: () => w((v) => !v),
+                  style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: 16,
+                    height: 16,
+                    padding: 0,
+                    border: "none",
+                    background: "transparent",
+                    color: u.ink,
+                    cursor: "pointer"
+                  },
+                  children: /* @__PURE__ */ e(xe, { size: 16, strokeWidth: 2 })
+                }
+              ),
+              F && /* @__PURE__ */ e(He, { items: m, onClose: () => w(!1) })
+            ] })
+          ] }),
+          /* @__PURE__ */ r("div", { style: { display: "flex", flexDirection: "column", gap: 5, width: "100%" }, children: [
+            !f && /* @__PURE__ */ e(
+              "p",
+              {
+                style: {
+                  margin: 0,
+                  fontSize: 13,
+                  color: u.ink,
+                  lineHeight: "normal",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                  width: "100%"
+                },
+                children: t.paradigms || "All paradigms"
+              }
+            ),
+            /* @__PURE__ */ e(
+              "p",
+              {
+                style: {
+                  margin: 0,
+                  fontSize: 13,
+                  color: u.muted,
+                  lineHeight: "normal",
+                  minHeight: 32,
+                  width: "100%",
+                  ...We(2)
+                },
+                children: t.description || ""
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", width: "100%" }, children: f ? /* @__PURE__ */ e(N, { label: "Policy Count", value: t.policyCount ?? "—" }) : /* @__PURE__ */ r(E, { children: [
+          /* @__PURE__ */ e(N, { label: "Updated", value: t.updatedLabel || "—" }),
+          /* @__PURE__ */ e(N, { label: "Updated By", value: t.updatedBy || "—" })
+        ] }) }),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 12,
+              width: "100%"
+            },
+            children: [
+              /* @__PURE__ */ r(
+                "span",
+                {
+                  style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: 4,
+                    fontSize: 12,
+                    color: u.ink,
+                    lineHeight: "16px"
+                  },
+                  children: [
+                    /* @__PURE__ */ e(z, { size: 20, strokeWidth: 1.5, style: { color: u.ink } }),
+                    g
+                  ]
+                }
+              ),
+              /* @__PURE__ */ e("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: f ? /* @__PURE__ */ r(E, { children: [
+                a && /* @__PURE__ */ e(re, { onClick: () => a(t), children: "View Details" }),
+                s && /* @__PURE__ */ e(le, { onClick: () => s(t), children: "Apply" })
+              ] }) : /* @__PURE__ */ r(E, { children: [
+                d && /* @__PURE__ */ e(re, { onClick: () => d(t), children: "Test" }),
+                a && /* @__PURE__ */ e(le, { onClick: () => a(t), children: "View Details" })
+              ] }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function N({ label: t, value: l }) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexWrap: "wrap",
+        alignItems: "center",
+        gap: 24,
+        padding: "8px 8px 12px 0",
+        fontSize: 13,
+        lineHeight: 1.2
+      },
+      children: [
+        /* @__PURE__ */ e("span", { style: { width: 80, color: u.ink }, children: t }),
+        /* @__PURE__ */ e("span", { style: { color: u.muted }, children: l })
+      ]
+    }
+  );
+}
+const I = {
+  ink: "var(--Grey-Strong, #2E3236)",
+  border: "var(--Grey-absent, #D9D9D9)",
+  white: "var(--Grey-White, #FFFFFF)"
+}, ae = "var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)";
+function Ce({ options: t = [], value: l = "all", onChange: d, onClose: a }) {
+  const s = ue(null);
+  P(() => {
+    const p = (g) => {
+      s.current && !s.current.contains(g.target) && (a == null || a());
+    }, f = (g) => {
+      g.key === "Escape" && (a == null || a());
+    };
+    return document.addEventListener("mousedown", p), document.addEventListener("keydown", f), () => {
+      document.removeEventListener("mousedown", p), document.removeEventListener("keydown", f);
+    };
+  }, [a]);
+  const c = [{ id: "all", label: "All" }, ...t];
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ref: s,
+      role: "listbox",
+      style: {
+        position: "absolute",
+        top: "calc(100% + 6px)",
+        left: 0,
+        zIndex: 50,
+        minWidth: 200,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "stretch",
+        background: I.white,
+        border: `1px solid ${I.border}`,
+        borderRadius: 4,
+        boxShadow: "var(--shadow-dropdown, -2px 2px 1px rgba(0,0,0,0.25))",
+        fontFamily: ae,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ e("div", { style: { padding: 12 }, children: /* @__PURE__ */ e("p", { style: { margin: 0, fontSize: 13, fontWeight: 700, color: I.ink, lineHeight: 1.2 }, children: "Filter by" }) }),
+        c.map((p) => {
+          const f = p.id === l;
+          return /* @__PURE__ */ r(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": f,
+              onClick: () => d == null ? void 0 : d(p.id),
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                width: "100%",
+                // Selected row shows the check at pl-12; unselected rows indent to
+                // pl-40 (12 + 20 check + 8 gap) so their labels line up.
+                padding: f ? "12px" : "12px 12px 12px 40px",
+                borderTop: `1px solid ${I.border}`,
+                background: "transparent",
+                cursor: "pointer",
+                textAlign: "left",
+                fontFamily: ae,
+                fontSize: 13,
+                color: I.ink,
+                lineHeight: 1.2
+              },
+              children: [
+                f && /* @__PURE__ */ e(we, { size: 20, strokeWidth: 2, style: { color: I.ink, flexShrink: 0 } }),
+                p.label
+              ]
+            },
+            p.id
+          );
+        })
+      ]
+    }
+  );
+}
+const o = {
+  ink: "var(--Grey-Strong, #2E3236)",
+  muted: "var(--Grey-Muted, #808183)",
+  cardBorder: "var(--neutral-300, #B2B2B0)",
+  white: "var(--Grey-White, #FFFFFF)",
+  btnBorder: "var(--Grey-absent, #D9D9D9)",
+  editBorder: "var(--neutral-250, #BFBFBF)",
+  editText: "var(--neutral-800, #323232)",
+  dark: "var(--neutral-850, #272727)",
+  onDark: "var(--neutral-50, #F2F2F0)",
+  iconBg: "var(--surface-hover, #F3F7F7)",
+  line: "var(--color-divider, #E5E7EB)"
+}, j = "var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)", M = () => /* @__PURE__ */ e("div", { style: { width: "100%", height: 1, background: o.line, flexShrink: 0 } });
+function de({ label: t, value: l }) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexWrap: "wrap",
+        alignItems: "center",
+        gap: 24,
+        padding: "8px 8px 12px 0",
+        fontSize: 13,
+        lineHeight: 1.2
+      },
+      children: [
+        /* @__PURE__ */ e("span", { style: { width: 80, color: o.ink }, children: t }),
+        /* @__PURE__ */ e("span", { style: { color: o.muted }, children: l })
+      ]
+    }
+  );
+}
+function $e({
+  open: t,
+  onClose: l,
+  mode: d = "browse",
+  title: a,
+  paradigms: s,
+  description: c,
+  definition: p,
+  updatedLabel: f,
+  updatedBy: g,
+  onEdit: y,
+  items: z = [],
+  primaryLabel: F,
+  onPrimary: w,
+  primaryDisabled: m = !1,
+  secondaryLabel: H = "Cancel",
+  topOffset: v
+}) {
+  const D = Ie("(max-width: 640px)"), k = v != null, C = typeof v == "number" ? `${v}px` : v, $ = d === "active";
+  return P(() => {
+    if (!t)
+      return;
+    const b = (i) => {
+      i.key === "Escape" && (l == null || l());
+    };
+    return document.addEventListener("keydown", b), () => document.removeEventListener("keydown", b);
+  }, [t, l]), t ? /* @__PURE__ */ r(E, { children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        onClick: l,
+        style: { position: "fixed", inset: 0, zIndex: 1200, background: "rgba(0,0,0,0.20)" }
+      }
+    ),
+    /* @__PURE__ */ r(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: D ? 0 : k ? C : 0,
+          right: 0,
+          zIndex: 1201,
+          display: "flex",
+          flexDirection: "column",
+          gap: 16,
+          width: D ? "100vw" : 490,
+          maxWidth: "100vw",
+          height: D ? "100dvh" : k ? `calc(100vh - ${C})` : "100vh",
+          padding: 20,
+          boxSizing: "border-box",
+          background: o.white,
+          borderRadius: D ? 0 : "12px 0 0 12px",
+          boxShadow: "-8px 0 40px rgba(0,0,0,0.18)",
+          fontFamily: j
+        },
+        children: [
+          /* @__PURE__ */ r("div", { style: { display: "flex", alignItems: "center", gap: 8, width: "100%", flexShrink: 0 }, children: [
+            /* @__PURE__ */ r("div", { style: { display: "flex", flex: 1, minWidth: 0, gap: 8, alignItems: "center" }, children: [
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: 34,
+                    height: 34,
+                    borderRadius: 9999,
+                    background: o.iconBg,
+                    flexShrink: 0
+                  },
+                  children: /* @__PURE__ */ e(fe, { size: 20, strokeWidth: 1.75, style: { color: o.ink } })
+                }
+              ),
+              /* @__PURE__ */ e(
+                "p",
+                {
+                  style: {
+                    margin: 0,
+                    fontSize: 16,
+                    fontWeight: 550,
+                    color: o.ink,
+                    lineHeight: 1.2,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  },
+                  children: a
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Close",
+                onClick: l,
+                style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: 20,
+                  height: 20,
+                  padding: 0,
+                  border: "none",
+                  background: "transparent",
+                  color: o.ink,
+                  cursor: "pointer",
+                  flexShrink: 0
+                },
+                children: /* @__PURE__ */ e(Fe, { size: 20, strokeWidth: 2 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e(M, {}),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "custom-thin-scrollbar",
+              style: {
+                flex: 1,
+                minHeight: 0,
+                width: "100%",
+                overflowY: "auto",
+                display: "flex",
+                flexDirection: "column",
+                gap: 16
+              },
+              children: $ ? /* @__PURE__ */ r(E, { children: [
+                /* @__PURE__ */ e("p", { style: { margin: 0, fontSize: 14, fontWeight: 600, color: o.ink, lineHeight: "normal" }, children: s || "All Paradigms" }),
+                c && /* @__PURE__ */ e("p", { style: { margin: 0, fontSize: 13, color: o.muted, lineHeight: "normal" }, children: c }),
+                /* @__PURE__ */ e(M, {}),
+                /* @__PURE__ */ r(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      gap: 24,
+                      width: "100%"
+                    },
+                    children: [
+                      /* @__PURE__ */ e("span", { style: { fontSize: 13, color: o.ink, lineHeight: 1.5 }, children: "Definition" }),
+                      y && /* @__PURE__ */ r(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: y,
+                          style: {
+                            display: "inline-flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            gap: 8,
+                            height: 28,
+                            padding: "0 10px",
+                            borderRadius: 10,
+                            border: `1px solid ${o.editBorder}`,
+                            background: o.white,
+                            color: o.editText,
+                            fontFamily: j,
+                            fontSize: 14,
+                            cursor: "pointer"
+                          },
+                          children: [
+                            /* @__PURE__ */ e(Se, { size: 16, strokeWidth: 1.75, style: { color: o.editText } }),
+                            "Edit"
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                ),
+                p && /* @__PURE__ */ e(
+                  "p",
+                  {
+                    style: {
+                      margin: 0,
+                      fontSize: 13,
+                      color: o.muted,
+                      lineHeight: "normal",
+                      whiteSpace: "pre-wrap"
+                    },
+                    children: p
+                  }
+                ),
+                /* @__PURE__ */ r("div", { style: { display: "flex", flexDirection: "column", width: "100%" }, children: [
+                  /* @__PURE__ */ e(de, { label: "Updated", value: f || "—" }),
+                  /* @__PURE__ */ e(de, { label: "Updated By", value: g || "—" })
+                ] })
+              ] }) : /* @__PURE__ */ r(E, { children: [
+                c && /* @__PURE__ */ e("p", { style: { margin: 0, fontSize: 13, color: o.muted, lineHeight: "normal" }, children: c }),
+                /* @__PURE__ */ e(M, {}),
+                z.length === 0 && /* @__PURE__ */ e("p", { style: { margin: 0, fontSize: 13, color: o.muted }, children: "No details available." }),
+                z.map((b, i) => /* @__PURE__ */ e(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      padding: 16,
+                      borderRadius: 8,
+                      border: `1px solid ${o.cardBorder}`,
+                      background: o.white,
+                      width: "100%",
+                      boxSizing: "border-box"
+                    },
+                    children: /* @__PURE__ */ r("div", { style: { display: "flex", flexDirection: "column", gap: 8, width: "100%" }, children: [
+                      /* @__PURE__ */ e("p", { style: { margin: 0, fontSize: 14, fontWeight: 600, color: o.ink, lineHeight: "normal" }, children: b.title }),
+                      b.description && /* @__PURE__ */ e("p", { style: { margin: 0, fontSize: 13, color: o.muted, lineHeight: "normal" }, children: b.description })
+                    ] })
+                  },
+                  b.id || `${b.title}-${i}`
+                ))
+              ] })
+            }
+          ),
+          /* @__PURE__ */ e(M, {}),
+          /* @__PURE__ */ r(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "flex-end",
+                gap: 12,
+                width: "100%",
+                flexShrink: 0
+              },
+              children: [
+                /* @__PURE__ */ e(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: l,
+                    style: {
+                      display: "inline-flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      height: 32,
+                      padding: "0 16px",
+                      borderRadius: 10,
+                      border: `1px solid ${o.btnBorder}`,
+                      background: o.white,
+                      color: o.ink,
+                      fontFamily: j,
+                      fontSize: 14,
+                      fontWeight: 600,
+                      cursor: "pointer"
+                    },
+                    children: H
+                  }
+                ),
+                F && /* @__PURE__ */ e(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: w,
+                    disabled: m,
+                    style: {
+                      display: "inline-flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      height: 32,
+                      padding: "0 16px",
+                      borderRadius: 10,
+                      border: "none",
+                      background: o.dark,
+                      color: o.onDark,
+                      fontFamily: j,
+                      fontSize: 14,
+                      fontWeight: 550,
+                      cursor: m ? "default" : "pointer",
+                      opacity: m ? 0.5 : 1
+                    },
+                    children: F
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] }) : null;
+}
+const h = {
+  ink: "var(--Grey-Strong, #2E3236)",
+  muted: "var(--Grey-Muted, #808183)",
+  white: "var(--Grey-White, #FFFFFF)",
+  border: "var(--Grey-absent, #D9D9D9)",
+  tabBorder: "var(--color-divider, #F2F1EF)",
+  tabActive: "var(--neutral-900, #0B0B0B)",
+  pillActive: "var(--neutral-900, #0B0B0B)",
+  pillIdle: "var(--rail-surface-2, #E3E1D7)",
+  searchTrack: "var(--neutral-150, #D8D8D8)",
+  searchText: "var(--neutral-400, #989898)",
+  accent: "var(--rail-orange, #C98A5A)",
+  dark: "var(--neutral-850, #272727)",
+  onDark: "var(--neutral-50, #F2F2F0)"
+}, S = "var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)", Re = (t) => String(t).padStart(2, "0"), se = (t, l) => l ? `${(t == null ? void 0 : t.name) || ""} ${(t == null ? void 0 : t.description) || ""} ${(t == null ? void 0 : t.paradigms) || ""}`.toLowerCase().includes(l) : !0;
+function Te({
+  activePolicies: t = [],
+  activeSectionLabel: l = "Custom Policies",
+  browseCategories: d = [],
+  defaultTab: a = "active",
+  isAdmin: s = !1,
+  onTest: c,
+  onApplyPolicy: p,
+  onAddPolicy: f,
+  onEditPolicy: g,
+  onToggleStatus: y,
+  topOffset: z,
+  emptyActiveMessage: F = "No active policies yet.",
+  emptyBrowseMessage: w = "No policies available to browse."
+}) {
+  var X, Y, q, J, Z, _, ee, te, ie, ne;
+  const [m, H] = W(a === "browse" ? "browse" : "active"), [v, D] = W(""), [k, C] = W("all"), [$, b] = W(!1), [i, A] = W(null), B = v.trim().toLowerCase(), ge = G(
+    () => d.reduce((n, x) => {
+      var R;
+      return n + (((R = x.policies) == null ? void 0 : R.length) || 0);
+    }, 0),
+    [d]
+  ), U = G(
+    () => d.map((n) => ({ id: n.id, label: n.name })),
+    [d]
+  ), ye = k === "all" ? "All" : ((X = U.find((n) => n.id === k)) == null ? void 0 : X.label) || "All", K = G(
+    () => t.filter((n) => se(n, B)),
+    [t, B]
+  ), Q = G(
+    () => d.filter((n) => k === "all" || n.id === k).map((n) => ({
+      ...n,
+      policies: (n.policies || []).filter((x) => se(x, B))
+    })).filter((n) => n.policies.length > 0),
+    [d, B, k]
+  ), me = (n) => A({ policy: n, mode: "active" }), be = (n) => A({ policy: n, mode: "browse" }), O = () => A(null), V = ({ id: n, label: x, count: R }) => {
+    const L = m === n;
+    return /* @__PURE__ */ r(
+      "button",
+      {
+        type: "button",
+        onClick: () => H(n),
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 4,
+          padding: "4px 4px 12px",
+          border: "none",
+          borderBottom: L ? `2px solid ${h.tabActive}` : "2px solid transparent",
+          borderRadius: "4px 4px 0 0",
+          background: "transparent",
+          cursor: "pointer",
+          fontFamily: S
+        },
+        children: [
+          /* @__PURE__ */ e("span", { style: { fontSize: 14, color: L ? "#1E1E1E" : "#313131", lineHeight: 1.2 }, children: x }),
+          /* @__PURE__ */ e(
+            "span",
+            {
+              style: {
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                minWidth: 18,
+                height: 18,
+                padding: "2px 6px",
+                borderRadius: 9,
+                background: L ? h.pillActive : h.pillIdle,
+                color: L ? "#FFFFFF" : "#313131",
+                fontSize: 12,
+                lineHeight: 1.2
+              },
+              children: R
+            }
+          )
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ r("div", { style: { display: "flex", flexDirection: "column", gap: 16, fontFamily: S }, children: [
+    /* @__PURE__ */ r("div", { style: { display: "flex", flexWrap: "wrap", alignItems: "center", gap: 12, width: "100%" }, children: [
+      /* @__PURE__ */ e("h1", { style: { flex: 1, minWidth: 160, margin: 0, fontSize: 24, fontWeight: 400, color: h.ink }, children: "Policies" }),
+      /* @__PURE__ */ r("div", { style: { display: "flex", alignItems: "center", gap: 16 }, children: [
+        m === "active" ? f && /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            onClick: () => f(),
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 8,
+              height: 32,
+              padding: "0 16px 0 12px",
+              borderRadius: 10,
+              border: "none",
+              background: h.dark,
+              color: h.onDark,
+              fontFamily: S,
+              fontSize: 14,
+              fontWeight: 500,
+              cursor: "pointer"
+            },
+            children: [
+              /* @__PURE__ */ e(ze, { size: 20, strokeWidth: 2, style: { color: h.onDark } }),
+              "Policy"
+            ]
+          }
+        ) : /* @__PURE__ */ r("div", { style: { position: "relative", display: "inline-flex" }, children: [
+          /* @__PURE__ */ r(
+            "button",
+            {
+              type: "button",
+              onClick: () => b((n) => !n),
+              "aria-haspopup": "listbox",
+              "aria-expanded": $,
+              style: {
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 10,
+                height: 32,
+                padding: "0 16px",
+                borderRadius: 10,
+                border: `1px solid ${h.border}`,
+                background: h.white,
+                color: h.ink,
+                fontFamily: S,
+                fontSize: 14,
+                fontWeight: 600,
+                cursor: "pointer"
+              },
+              children: [
+                /* @__PURE__ */ e(De, { size: 20, strokeWidth: 1.75, style: { color: h.ink } }),
+                ye
+              ]
+            }
+          ),
+          $ && /* @__PURE__ */ e(
+            Ce,
+            {
+              options: U,
+              value: k,
+              onChange: (n) => {
+                C(n), b(!1);
+              },
+              onClose: () => b(!1)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              height: 32,
+              width: 260,
+              padding: 2,
+              borderRadius: 11,
+              background: h.searchTrack,
+              boxSizing: "border-box"
+            },
+            children: /* @__PURE__ */ r(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  flex: 1,
+                  minWidth: 0,
+                  alignItems: "center",
+                  gap: 8,
+                  height: 28,
+                  padding: "0 8px",
+                  borderRadius: 10,
+                  background: h.white
+                },
+                children: [
+                  /* @__PURE__ */ e(Be, { size: 18, strokeWidth: 2, style: { color: h.searchText, flexShrink: 0 } }),
+                  /* @__PURE__ */ e(
+                    "input",
+                    {
+                      value: v,
+                      onChange: (n) => D(n.target.value),
+                      placeholder: "Search",
+                      style: {
+                        flex: 1,
+                        minWidth: 0,
+                        border: "none",
+                        outline: "none",
+                        background: "transparent",
+                        fontFamily: S,
+                        fontSize: 14,
+                        color: h.ink
+                      }
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ r(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 12,
+          width: "100%",
+          borderBottom: `1px solid ${h.tabBorder}`
+        },
+        children: [
+          /* @__PURE__ */ e(V, { id: "active", label: "Active Policies", count: Re(t.length) }),
+          /* @__PURE__ */ e(V, { id: "browse", label: "Browse Policies", count: ge })
+        ]
+      }
+    ),
+    m === "active" ? /* @__PURE__ */ e(ce, { icon: !0, label: l, children: K.length === 0 ? /* @__PURE__ */ e(he, { text: B ? "No policies match your search." : F }) : /* @__PURE__ */ e(pe, { children: K.map((n) => /* @__PURE__ */ e(
+      oe,
+      {
+        policy: n,
+        variant: "active",
+        onTest: c ? () => c(n) : void 0,
+        onViewDetails: () => me(n),
+        onToggleStatus: s && y ? y : void 0,
+        onEdit: s && g ? g : void 0
+      },
+      n.id
+    )) }) }) : Q.length === 0 ? /* @__PURE__ */ e(he, { text: B || k !== "all" ? "No policies match your search." : w }) : /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: 24 }, children: Q.map((n) => /* @__PURE__ */ e(ce, { icon: !0, label: n.name, children: /* @__PURE__ */ e(pe, { children: n.policies.map((x) => /* @__PURE__ */ e(
+      oe,
+      {
+        policy: x,
+        variant: "browse",
+        onViewDetails: () => be(x),
+        onApply: s && !x.alreadyApplied ? () => p == null ? void 0 : p(x) : void 0
+      },
+      x.id
+    )) }) }, n.id)) }),
+    /* @__PURE__ */ e(
+      $e,
+      {
+        open: !!i,
+        onClose: O,
+        mode: i == null ? void 0 : i.mode,
+        title: (Y = i == null ? void 0 : i.policy) == null ? void 0 : Y.name,
+        paradigms: (q = i == null ? void 0 : i.policy) == null ? void 0 : q.paradigms,
+        description: (J = i == null ? void 0 : i.policy) == null ? void 0 : J.description,
+        definition: (Z = i == null ? void 0 : i.policy) == null ? void 0 : Z.definition,
+        updatedLabel: (_ = i == null ? void 0 : i.policy) == null ? void 0 : _.updatedLabel,
+        updatedBy: (ee = i == null ? void 0 : i.policy) == null ? void 0 : ee.updatedBy,
+        items: ((te = i == null ? void 0 : i.policy) == null ? void 0 : te.items) || [],
+        topOffset: z,
+        onEdit: (i == null ? void 0 : i.mode) === "active" && s && g ? () => {
+          const n = i.policy;
+          O(), g(n);
+        } : void 0,
+        primaryLabel: (i == null ? void 0 : i.mode) === "browse" ? s && !((ie = i == null ? void 0 : i.policy) != null && ie.alreadyApplied) ? "Apply Policy" : void 0 : s && y ? ((ne = i == null ? void 0 : i.policy) == null ? void 0 : ne.status) === "Active" ? "Disable Policy" : "Enable Policy" : void 0,
+        onPrimary: () => {
+          const n = i == null ? void 0 : i.policy;
+          n && (O(), i.mode === "browse" ? p == null || p(n) : y == null || y(n));
+        }
+      }
+    )
+  ] });
+}
+function ce({ label: t, icon: l, children: d }) {
+  return /* @__PURE__ */ r("section", { style: { display: "flex", flexDirection: "column", gap: 16, width: "100%" }, children: [
+    /* @__PURE__ */ r("div", { style: { display: "flex", alignItems: "center", gap: 8, height: 40 }, children: [
+      l && /* @__PURE__ */ e(fe, { size: 24, strokeWidth: 1.75, style: { color: h.accent } }),
+      /* @__PURE__ */ e(
+        "span",
+        {
+          style: {
+            fontFamily: S,
+            fontSize: 16,
+            fontWeight: 600,
+            color: h.ink,
+            textTransform: "uppercase",
+            lineHeight: 1.2
+          },
+          children: t
+        }
+      )
+    ] }),
+    d
+  ] });
+}
+function pe({ children: t }) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(320px, 360px))",
+        gap: 24,
+        width: "100%"
+      },
+      children: t
+    }
+  );
+}
+function he({ text: t }) {
+  return /* @__PURE__ */ e("p", { style: { margin: 0, fontSize: 14, color: h.muted, fontFamily: S }, children: t });
+}
+export {
+  Ce as FilterDropdown,
+  Te as PoliciesPage,
+  oe as PolicyCard,
+  $e as PolicyDetailsDrawer
+};
+//# sourceMappingURL=policies.es.js.map