@canonical/maas-react-components 2.5.0 → 2.7.0

package/dist/QueryInput-D7uXzKgr.mjs

@@ -0,0 +1,1648 @@
+import { jsxs as b, jsx as t, Fragment as A } from "react/jsx-runtime";
+import * as y from "react";
+import { useRef as M, useState as P, useEffect as I, useCallback as F, createContext as J, useId as Ke, useContext as V, Children as ze, Suspense as Be, cloneElement as Oe, useLayoutEffect as Q, useMemo as z, Fragment as je } from "react";
+import { useListener as Ge, Row as Ve, Col as qe, AppAside as Ue, useOnEscapePressed as We, Application as Xe, AppMain as Ye, Tooltip as Z, Button as O, Icon as E, Input as Je, Select as Qe, ICONS as X, Spinner as Ze } from "@canonical/react-components";
+import k from "classnames";
+import { useLocation as et } from "react-router";
+import "react-dropzone";
+import { flexRender as ce, useReactTable as tt, getGroupedRowModel as nt, getCoreRowModel as ot, getExpandedRowModel as rt } from "@tanstack/react-table";
+const $ = {
+  caution: "#F99B11",
+  light: "#F7F7F7",
+  linkFaded: "#D3E4ED",
+  link: "#0066CC",
+  negative: "#C7162B",
+  positiveFaded: "#B7CCB9",
+  positiveMid: "#4DAB4D",
+  positive: "#0E8420"
+}, yn = [
+  $.link,
+  $.positive,
+  $.negative,
+  $.caution
+], at = $.linkFaded, de = $.caution, Y = $.light, ae = 2, le = 1, ie = (e, n) => {
+  var i, l;
+  const o = ((l = (i = e == null ? void 0 : e.current) == null ? void 0 : i.getBoundingClientRect()) == null ? void 0 : l.width) || 0;
+  return o > n * ae ? o / n : ae;
+}, K = {
+  bar: "meter-bar",
+  container: "meter-container",
+  filled: "meter-filled",
+  label: "meter-label",
+  meteroverflow: "meter-overflow",
+  segments: "meter-segments"
+}, lt = ({
+  className: e,
+  children: n,
+  data: o,
+  max: a,
+  variant: i = "regular",
+  size: l = "regular",
+  ...d
+}) => {
+  const r = M(null), s = o == null ? void 0 : o.reduce((h, m) => h + m.value, 0), c = a || s, u = o.map((h) => h.value / c * 100), [v, g] = P(0);
+  I(() => {
+    g(i === "segmented" ? ie(r, c) : 0);
+  }, [c, i]);
+  const f = F(() => {
+    g(ie(r, c));
+  }, [r, c, g]);
+  return Ge(window, f, "resize", !0, i === "segmented"), /* @__PURE__ */ b(
+    "div",
+    {
+      className: k("p-meter", e, {
+        "p-meter--small": l === "small"
+      }),
+      "aria-label": d == null ? void 0 : d["aria-label"],
+      "data-testid": K.container,
+      ref: r,
+      children: [
+        /* @__PURE__ */ t(it, { children: /* @__PURE__ */ t(
+          st,
+          {
+            data: o,
+            datumWidths: u,
+            maximum: c,
+            overColor: de,
+            segmentWidth: v,
+            separatorColor: Y
+          }
+        ) }),
+        n
+      ]
+    }
+  );
+}, it = ({ children: e }) => /* @__PURE__ */ t(
+  "div",
+  {
+    className: "p-meter__bar",
+    "data-testid": K.bar,
+    style: { backgroundColor: at },
+    children: e
+  }
+), st = ({
+  data: e,
+  datumWidths: n,
+  maximum: o,
+  segmentWidth: a
+}) => {
+  const i = () => (e == null ? void 0 : e.reduce((r, s) => r + s.value, 0)) > o, l = (r, s) => ({
+    backgroundColor: r.color,
+    left: `${n == null ? void 0 : n.reduce(
+      (c, u, v) => s > v ? c + u : c,
+      0
+    )}%`,
+    width: `${n[s]}%`
+  }), d = () => ({
+    background: `repeating-linear-gradient(
+      to right,
+      transparent 0,
+      transparent ${a - le}px,
+      ${Y} ${a - le}px,
+      ${Y} ${a}px
+    )`
+  });
+  return /* @__PURE__ */ b(A, { children: [
+    i() ? /* @__PURE__ */ t(
+      "div",
+      {
+        className: "p-meter__filled",
+        "data-testid": K.meteroverflow,
+        style: { backgroundColor: de, width: "100%" }
+      }
+    ) : e == null ? void 0 : e.map((r, s) => /* @__PURE__ */ t(
+      "div",
+      {
+        className: "p-meter__filled",
+        "data-testid": K.filled,
+        style: l(r, s)
+      },
+      `meter-${s}`
+    )),
+    a > 0 && /* @__PURE__ */ t(
+      "div",
+      {
+        className: "p-meter__separators",
+        "data-testid": K.segments,
+        style: d()
+      }
+    )
+  ] });
+}, ct = ({
+  className: e,
+  children: n
+}) => /* @__PURE__ */ t(
+  "div",
+  {
+    className: k("p-meter__label", e),
+    "data-testid": K.label,
+    children: n
+  }
+);
+lt.Label = ct;
+const w = ({
+  className: e,
+  width: n,
+  height: o,
+  isPending: a,
+  text: i,
+  children: l,
+  variant: d = "text",
+  style: r,
+  ...s
+}) => {
+  if (I(() => {
+    a !== void 0 && console.warn(
+      "[Placeholder] The `isPending` prop is deprecated and will be removed in a future major version. Control skeleton visibility with conditional rendering at the call-site instead."
+    );
+  }, [a]), I(() => {
+    i !== void 0 && console.warn(
+      "[Placeholder] The `text` prop is deprecated and will be removed in a future major version. Use the `width` prop to set the skeleton width."
+    );
+  }, [i]), I(() => {
+    l !== void 0 && console.warn(
+      "[Placeholder] Passing `children` to Placeholder is deprecated and will be removed in a future major version. Render children outside the Placeholder and control visibility at the call-site."
+    );
+  }, [l]), d === "text") {
+    if (!a)
+      return /* @__PURE__ */ t(A, { children: l });
+    const u = Math.floor(Math.random() * 750), v = n ?? "fit-content";
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        "aria-label": "loading",
+        className: k("p-placeholder", e),
+        role: "progressbar",
+        style: { animationDelay: `${u}ms`, width: v, height: o, ...r },
+        ...s,
+        children: /* @__PURE__ */ t("span", { "aria-hidden": "true", className: "p-placeholder__sizer", children: i || l || "Loading" })
+      }
+    );
+  }
+  const c = i && !n ? "fit-content" : n;
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "aria-label": "loading",
+      className: k("p-placeholder", e),
+      role: "progressbar",
+      style: { width: c, height: o, ...r },
+      ...s
+    }
+  );
+}, C = ({
+  children: e,
+  className: n,
+  as: o,
+  variant: a = "wide",
+  ...i
+}) => {
+  const l = o || "section", d = k("content-section", n);
+  return /* @__PURE__ */ t(l, { ...i, className: d, children: /* @__PURE__ */ t(Ve, { children: /* @__PURE__ */ t(qe, { size: a === "narrow" ? 6 : 12, children: /* @__PURE__ */ t(A, { children: e }) }) }) });
+}, dt = ({ children: e, className: n, as: o, ...a }) => /* @__PURE__ */ t(
+  o || "h1",
+  {
+    ...a,
+    className: k("content-section__title p-heading--4", n),
+    children: e
+  }
+), ut = ({ children: e, className: n }) => /* @__PURE__ */ t("header", { className: k("content-section__header", n), children: e }), ht = ({ children: e, className: n }) => /* @__PURE__ */ t("div", { className: k("content-section__body", n), children: e }), gt = ({ children: e, className: n }) => /* @__PURE__ */ t("footer", { className: k("content-section__footer", n), children: e });
+C.Title = dt;
+C.Header = ut;
+C.Content = ht;
+C.Footer = gt;
+const ee = ({ children: e }) => /* @__PURE__ */ t("div", { className: "p-form-section", children: e }), mt = ({ children: e }) => /* @__PURE__ */ t("h5", { className: "p-form-section__title u-no-padding--top", children: e }), pt = ({ children: e }) => /* @__PURE__ */ t("p", { className: "p-form-help-text", children: e }), bt = ({ children: e }) => /* @__PURE__ */ t("div", { className: "p-form-section__content", children: e });
+ee.Title = mt;
+ee.Description = pt;
+ee.Content = bt;
+const te = J(null), ue = ({ children: e }) => {
+  const n = Ke();
+  return /* @__PURE__ */ t(te.Provider, { value: n, children: /* @__PURE__ */ t(
+    "div",
+    {
+      role: "group",
+      "aria-labelledby": `${n}_label`,
+      "aria-describedby": `${n}_description`,
+      className: "p-input-group",
+      children: e
+    }
+  ) });
+}, ft = ({ children: e }) => {
+  const n = V(te);
+  return /* @__PURE__ */ t("label", { id: `${n}_label`, children: e });
+}, vt = ({ children: e }) => {
+  const n = V(te);
+  return /* @__PURE__ */ t("p", { className: "p-form-help-text", id: `${n}_description`, children: e });
+};
+ue.Label = ft;
+ue.Description = vt;
+const _t = ({ children: e }) => (I(() => {
+  document.title = ze.toArray(e).join("");
+}, [e]), null), he = J(null), q = () => {
+  const e = V(he);
+  if (!e)
+    throw new Error("useSidePanel must be used within a SidePanelProvider");
+  return e;
+}, In = ({
+  children: e
+}) => {
+  const [n, o] = P({
+    isOpen: !1,
+    title: "",
+    size: "regular",
+    component: null,
+    props: {}
+  }), a = ({
+    component: d,
+    title: r,
+    props: s = {},
+    size: c = "regular"
+  }) => {
+    o({
+      isOpen: !0,
+      title: r,
+      size: c,
+      component: d,
+      props: s || {}
+    });
+  }, i = () => {
+    o({
+      isOpen: !1,
+      title: "",
+      size: "regular",
+      component: null,
+      props: {}
+    });
+  }, l = F((d) => {
+    o((r) => ({ ...r, size: d }));
+  }, []);
+  return /* @__PURE__ */ t(
+    he.Provider,
+    {
+      value: {
+        ...n,
+        openSidePanel: a,
+        closeSidePanel: i,
+        setSidePanelSize: l
+      },
+      children: e
+    }
+  );
+}, kt = () => {
+  const e = et(), { closeSidePanel: n } = q();
+  I(
+    () => {
+      n();
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [e.pathname, e.search, e.hash]
+  );
+}, wt = () => {
+  const { setSidePanelSize: e } = q();
+  I(
+    () => () => {
+      e("regular");
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+}, Nt = () => {
+  const { closeSidePanel: e } = q();
+  We(() => {
+    e();
+  });
+}, ge = () => {
+  Nt(), kt(), wt();
+  const { isOpen: e, title: n, component: o, props: a, size: i } = q();
+  return /* @__PURE__ */ t(
+    Ue,
+    {
+      "aria-label": n ?? void 0,
+      className: k({
+        "is-narrow": i === "narrow",
+        "is-large": i === "large",
+        "is-wide": i === "wide"
+      }),
+      collapsed: !e,
+      id: "aside-panel",
+      children: /* @__PURE__ */ b(C, { children: [
+        n ? /* @__PURE__ */ t("div", { className: "row section-header section-header--side-panel", children: /* @__PURE__ */ t("div", { className: "col-12", children: /* @__PURE__ */ t("h3", { className: "section-header__title u-flex--no-shrink p-heading--4", children: n }) }) }) : null,
+        e && o && /* @__PURE__ */ t(o, { ...a })
+      ] })
+    }
+  );
+}, xt = ({ hasTitle: e }) => /* @__PURE__ */ b(C, { "aria-hidden": "true", className: "aside-skeleton", children: [
+  e && /* @__PURE__ */ t(C.Title, { children: /* @__PURE__ */ t(w, { height: "2rem", variant: "block", width: "16ch" }) }),
+  /* @__PURE__ */ b(C.Content, { className: "aside-skeleton__form", children: [
+    /* @__PURE__ */ b("div", { className: "layout-skeleton__form-description", children: [
+      /* @__PURE__ */ t(w, { height: "1.5rem", variant: "block", width: "100%" }),
+      /* @__PURE__ */ t(w, { height: "1.5rem", variant: "block", width: "70%" })
+    ] }),
+    Array.from({ length: 2 }).map((n, o) => /* @__PURE__ */ b(
+      "div",
+      {
+        className: "layout-skeleton__form-field",
+        children: [
+          /* @__PURE__ */ t(w, { height: "1.5rem", variant: "block", width: "14ch" }),
+          /* @__PURE__ */ t(w, { height: "2.5rem", variant: "block", width: "100%" })
+        ]
+      },
+      `aside-skeleton-field-${o}`
+    ))
+  ] }),
+  /* @__PURE__ */ b(C.Footer, { className: "aside-skeleton__footer", children: [
+    /* @__PURE__ */ t(w, { height: "2rem", variant: "block", width: "8ch" }),
+    /* @__PURE__ */ t(w, { height: "2rem", variant: "block", width: "10ch" })
+  ] })
+] });
+ge.Skeleton = xt;
+const Ct = ({
+  className: e,
+  children: n,
+  pageTitle: o,
+  view: a,
+  isSecondaryNavVisible: i,
+  navigation: l,
+  secondaryNavigation: d,
+  statusBar: r
+}) => /* @__PURE__ */ b(A, { children: [
+  /* @__PURE__ */ t(_t, { children: o }),
+  /* @__PURE__ */ b(Xe, { children: [
+    l,
+    /* @__PURE__ */ b(Ye, { className: e, children: [
+      /* @__PURE__ */ t("h1", { className: "u-visually-hidden", children: o }),
+      /* @__PURE__ */ t(
+        "div",
+        {
+          className: k("l-main__nav", {
+            "is-open": i
+          }),
+          children: d
+        }
+      ),
+      /* @__PURE__ */ t("div", { className: "l-main__content", children: /* @__PURE__ */ t("div", { className: "row", children: /* @__PURE__ */ t("div", { className: "col-12", children: /* @__PURE__ */ t(Be, { fallback: /* @__PURE__ */ t(me, { view: a }), children: n }) }) }) })
+    ] }),
+    /* @__PURE__ */ t(ge, {}),
+    r
+  ] })
+] }), me = ({
+  view: e
+}) => e === "settings" ? /* @__PURE__ */ b(
+  C,
+  {
+    "aria-hidden": "true",
+    className: "layout-skeleton",
+    variant: "narrow",
+    children: [
+      /* @__PURE__ */ t(C.Title, { children: /* @__PURE__ */ t(w, { height: "2rem", variant: "block", width: "16ch" }) }),
+      /* @__PURE__ */ t("div", { className: "layout-skeleton__form", children: Array.from({ length: 3 }).map((n, o) => /* @__PURE__ */ b(
+        "div",
+        {
+          className: "layout-skeleton__form-field",
+          children: [
+            /* @__PURE__ */ t(w, { height: "1.5rem", variant: "block", width: "14ch" }),
+            /* @__PURE__ */ t(w, { height: "2.5rem", variant: "block", width: "100%" })
+          ]
+        },
+        `layout-skeleton-field-${o}`
+      )) }),
+      /* @__PURE__ */ t(C.Footer, { children: /* @__PURE__ */ t(w, { height: "2rem", variant: "block", width: "8ch" }) })
+    ]
+  }
+) : /* @__PURE__ */ b(C, { "aria-hidden": "true", className: "layout-skeleton", children: [
+  /* @__PURE__ */ t(C.Header, { children: /* @__PURE__ */ b("div", { className: "layout-skeleton__header", children: [
+    /* @__PURE__ */ t(w, { height: "2rem", variant: "block", width: "24ch" }),
+    /* @__PURE__ */ t(w, { height: "2rem", variant: "block", width: "100%" }),
+    /* @__PURE__ */ t(w, { height: "2rem", variant: "block", width: "18ch" }),
+    /* @__PURE__ */ t(w, { height: "2rem", variant: "block", width: "18ch" })
+  ] }) }),
+  /* @__PURE__ */ b(C.Content, { children: [
+    /* @__PURE__ */ b("div", { className: "layout-skeleton__pagination", children: [
+      /* @__PURE__ */ t(w, { height: "2rem", variant: "block", width: "24ch" }),
+      /* @__PURE__ */ b("div", { className: "layout-skeleton__pagination-controls", children: [
+        /* @__PURE__ */ t(w, { height: "2rem", variant: "block", width: "16ch" }),
+        /* @__PURE__ */ t(w, { height: "2rem", variant: "block", width: "16ch" })
+      ] })
+    ] }),
+    /* @__PURE__ */ t(
+      vn,
+      {
+        className: "layout-skeleton__table",
+        columns: [
+          {
+            accessorKey: "name",
+            header: () => /* @__PURE__ */ t(w, { variant: "block", width: "8ch" }),
+            meta: {
+              skeleton: () => /* @__PURE__ */ b("div", { children: [
+                /* @__PURE__ */ t(w, { variant: "block", width: "18ch" }),
+                /* @__PURE__ */ t(w, { variant: "block", width: "24ch" })
+              ] })
+            }
+          },
+          {
+            accessorKey: "details",
+            header: () => /* @__PURE__ */ t(w, { variant: "block", width: "12ch" }),
+            meta: {
+              skeleton: () => /* @__PURE__ */ b("div", { children: [
+                /* @__PURE__ */ t(w, { variant: "block", width: "18ch" }),
+                /* @__PURE__ */ t(w, { variant: "block", width: "14ch" })
+              ] })
+            }
+          },
+          {
+            accessorKey: "status",
+            header: () => /* @__PURE__ */ t(w, { variant: "block", width: "10ch" }),
+            meta: {
+              skeleton: () => /* @__PURE__ */ t(w, { variant: "block", width: "12ch" })
+            }
+          },
+          {
+            accessorKey: "updated",
+            header: () => /* @__PURE__ */ t(w, { variant: "block", width: "16ch" }),
+            meta: {
+              skeleton: () => /* @__PURE__ */ t(w, { variant: "block", width: "10ch" })
+            }
+          },
+          {
+            accessorKey: "actions",
+            header: () => /* @__PURE__ */ t(w, { variant: "block", width: "10ch" }),
+            meta: {
+              skeleton: () => /* @__PURE__ */ b("div", { children: [
+                /* @__PURE__ */ t(w, { variant: "block", width: "2ch" }),
+                /* @__PURE__ */ t(w, { variant: "block", width: "2ch" })
+              ] })
+            }
+          }
+        ],
+        data: [],
+        isLoading: !0,
+        loadingVariant: "skeleton"
+      }
+    )
+  ] })
+] });
+Ct.Skeleton = me;
+function St(e) {
+  const [n, o] = y.useState(null), a = y.useRef(null), i = y.useCallback(() => {
+    if (e.current) {
+      const l = e.current.getBoundingClientRect();
+      o(l);
+    }
+  }, [e]);
+  return y.useEffect(() => {
+    const l = new ResizeObserver(() => {
+      a.current && cancelAnimationFrame(a.current), a.current = requestAnimationFrame(i);
+    });
+    return e.current && l.observe(e.current), () => {
+      a.current && cancelAnimationFrame(a.current), l.disconnect();
+    };
+  }, [e, i]), n;
+}
+const pe = y.createContext(null), be = y.createContext([!1, () => {
+}]), fe = ({ children: e }) => {
+  const n = y.useRef(null), o = St(n), [a, i] = y.useState(!1);
+  return /* @__PURE__ */ t(
+    "header",
+    {
+      className: k("main-toolbar", {
+        "main-toolbar--stacked": a
+      }),
+      ref: n,
+      children: /* @__PURE__ */ t(pe.Provider, { value: o, children: /* @__PURE__ */ t(be.Provider, { value: [a, i], children: e }) })
+    }
+  );
+}, yt = ({
+  as: e,
+  children: n,
+  className: o,
+  ...a
+}) => /* @__PURE__ */ t(
+  e || "h1",
+  {
+    className: k("main-toolbar__title p-heading--4", o),
+    "data-testid": "main-toolbar-heading",
+    ...a,
+    children: n
+  }
+), It = ({ children: e }) => {
+  const n = y.useContext(pe), [o, a] = y.useContext(be), i = y.useRef(null);
+  return y.useEffect(() => {
+    !i.current || !n || a(i.current.getBoundingClientRect().width > n.width);
+  }, [a, n, i]), /* @__PURE__ */ b(A, { children: [
+    /* @__PURE__ */ t(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "main-toolbar__controls main-toolbar__controls--observer",
+        ref: i,
+        style: { visibility: "hidden", position: "absolute" },
+        children: e
+      }
+    ),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: k("main-toolbar__controls", {
+          "main-toolbar__controls--stacked": o
+        }),
+        children: e
+      }
+    )
+  ] });
+};
+fe.Title = yt;
+fe.Controls = It;
+const Rt = ({ children: e }) => /* @__PURE__ */ t(A, { children: e }), Tt = ({
+  isCollapsed: e,
+  setIsCollapsed: n,
+  className: o
+}) => /* @__PURE__ */ t(
+  Z,
+  {
+    className: "p-side-navigation__tooltip-wrapper",
+    message: /* @__PURE__ */ b(A, { children: [
+      e ? "expand" : "collapse",
+      "( ",
+      /* @__PURE__ */ t("code", { children: "[" }),
+      " )"
+    ] }),
+    position: "right",
+    tooltipClassName: "p-side-navigation__tooltip",
+    children: /* @__PURE__ */ t(
+      O,
+      {
+        appearance: "base",
+        "aria-label": `${e ? "expand" : "collapse"} main navigation`,
+        className: k(
+          "is-dense has-icon is-dark u-no-margin l-navigation-collapse-toggle",
+          o
+        ),
+        onClick: (a) => {
+          n(!e), a.stopPropagation(), a.currentTarget.blur();
+        },
+        children: /* @__PURE__ */ t(E, { light: !0, name: "sidebar-toggle" })
+      }
+    )
+  }
+), Pt = ({ children: e }) => /* @__PURE__ */ t("div", { className: "p-panel__content", children: /* @__PURE__ */ t("nav", { className: "p-side-navigation--icons is-dark", children: e }) }), At = ({ children: e }) => /* @__PURE__ */ t("div", { className: "p-panel__controls u-no-margin--top", children: e }), Lt = ({ children: e }) => /* @__PURE__ */ t("div", { className: "l-navigation__drawer", children: /* @__PURE__ */ t("div", { className: "p-panel is-dark", children: e }) }), Dt = ({ children: e }) => /* @__PURE__ */ t("div", { className: "p-panel__footer", children: e }), Et = ({ children: e }) => /* @__PURE__ */ t("div", { className: "p-panel__header", children: e }), $t = ({ light: e = !0, name: n }) => /* @__PURE__ */ t(E, { className: "p-side-navigation__icon", light: e, name: n }), Mt = ({ children: e, className: n, hasActiveChild: o }) => /* @__PURE__ */ t("li", { className: k("p-side-navigation__item", n, { "has-active-child": o }), children: e }), Ft = ({ children: e, id: n, variant: o = "base" }) => /* @__PURE__ */ t("span", { className: k("p-side-navigation__label", { "p-side-navigation__label--group": o === "group" }), id: n, children: e }), Ht = ({
+  as: e,
+  ...n
+}) => /* @__PURE__ */ t(
+  e || "a",
+  {
+    className: k("p-side-navigation__link", n.className),
+    ...n
+  }
+), Kt = ({ children: e, className: n }) => /* @__PURE__ */ t("ul", { className: k("p-side-navigation__list", n), children: e }), zt = ({
+  as: e,
+  children: n,
+  className: o,
+  ...a
+}) => /* @__PURE__ */ t(e || "a", { className: k("p-panel__logo", o), ...a, children: /* @__PURE__ */ t("div", { className: "p-navigation__tagged-logo", children: n }) }), Bt = ({ children: e }) => Oe(e, { className: "p-panel__logo-icon p-navigation__logo-icon" }), Ot = ({ children: e, variant: n = "base" }) => /* @__PURE__ */ t(
+  "div",
+  {
+    className: k("p-panel__logo-name is-fading-when-collapsed", {
+      "p-panel__logo-name--small": n === "small"
+    }),
+    children: e
+  }
+), jt = ({ children: e }) => /* @__PURE__ */ t("div", { className: "p-navigation__logo-tag", children: e }), Gt = ({ children: e }) => /* @__PURE__ */ t("span", { className: "p-panel__logo-text", children: e }), Vt = ({
+  children: e,
+  className: n,
+  onClick: o
+}) => /* @__PURE__ */ t(
+  O,
+  {
+    appearance: "base",
+    className: k(
+      "p-side-navigation__button--menu has-icon is-dark",
+      n
+    ),
+    onClick: (a) => {
+      o && o(a), a.stopPropagation(), a.currentTarget.blur();
+    },
+    children: /* @__PURE__ */ t(A, { children: e })
+  }
+), qt = ({ children: e }) => /* @__PURE__ */ t("span", { className: "p-side-navigation__text", children: e }), N = ({ children: e, className: n, isCollapsed: o }) => /* @__PURE__ */ t("header", { "aria-label": "main navigation", className: k("l-navigation is-maas", n, { "is-collapsed": o, "is-pinned": !o }), children: e }), Ut = ({ children: e, className: n }) => /* @__PURE__ */ t("header", { "aria-label": "navigation", className: "l-navigation-bar", children: /* @__PURE__ */ t("div", { className: k("p-panel is-dark", n), children: e }) });
+N.Header = Et;
+N.Banner = Rt;
+N.Drawer = Lt;
+N.Controls = At;
+N.CollapseToggle = Tt;
+N.Content = Pt;
+N.Footer = Dt;
+N.List = Kt;
+N.Item = Mt;
+N.Link = Ht;
+N.Text = qt;
+N.Icon = $t;
+N.Label = Ft;
+N.Logo = zt;
+N.LogoTag = jt;
+N.LogoIcon = Bt;
+N.LogoName = Ot;
+N.LogoText = Gt;
+Ut.MenuButton = Vt;
+const Wt = ({
+  className: e,
+  currentPage: n,
+  error: o,
+  disabled: a,
+  onInputBlur: i,
+  onInputChange: l,
+  onNextClick: d,
+  onPreviousClick: r,
+  totalPages: s,
+  ...c
+}) => /* @__PURE__ */ t(
+  "nav",
+  {
+    "aria-label": (c == null ? void 0 : c["aria-label"]) || "pagination",
+    className: k("p-pagination", e),
+    children: /* @__PURE__ */ b("span", { className: "p-pagination--items", children: [
+      /* @__PURE__ */ t(
+        O,
+        {
+          "aria-label": "Previous page",
+          className: "p-pagination__link--previous",
+          disabled: n === 1 || a,
+          onClick: r,
+          type: "button",
+          children: /* @__PURE__ */ t(E, { name: "chevron-left" })
+        }
+      ),
+      /* @__PURE__ */ t("strong", { children: "Page " }),
+      " ",
+      /* @__PURE__ */ t(
+        Je,
+        {
+          "aria-label": "page number",
+          className: "p-pagination__input",
+          disabled: a,
+          error: o,
+          max: s,
+          min: 1,
+          onBlur: i,
+          onChange: l,
+          required: !0,
+          type: "number",
+          value: n
+        }
+      ),
+      " ",
+      /* @__PURE__ */ b("strong", { className: "u-no-wrap", children: [
+        " of ",
+        s
+      ] }),
+      /* @__PURE__ */ t(
+        O,
+        {
+          "aria-label": "Next page",
+          className: "p-pagination__link--next",
+          disabled: n === s || a,
+          onClick: d,
+          type: "button",
+          children: /* @__PURE__ */ t(E, { name: "chevron-right" })
+        }
+      )
+    ] })
+  }
+), Xt = ({
+  currentPage: e,
+  disabled: n,
+  paginate: o,
+  totalPages: a
+}) => {
+  const [i, l] = P(e), [d, r] = P("");
+  return /* @__PURE__ */ t(
+    Wt,
+    {
+      currentPage: i,
+      error: d,
+      disabled: n,
+      onInputBlur: () => {
+        l(e), r("");
+      },
+      onInputChange: (g) => {
+        const { value: f, valueAsNumber: h } = g.target;
+        f ? (l(h), h > a || h < 1 ? r(`${h} is not a valid page number.`) : (r(""), o(h))) : r("Enter a page number.");
+      },
+      onNextClick: () => {
+        l((g) => Number(g) + 1), o(Number(e) + 1);
+      },
+      onPreviousClick: () => {
+        l((g) => Number(g) - 1), o(Number(e) - 1);
+      },
+      totalPages: a
+    }
+  );
+}, Yt = {
+  // Mobile or tablet
+  small: 620
+}, ve = J({ variant: "regular" }), _e = ({
+  className: e,
+  children: n,
+  variant: o,
+  ...a
+}) => /* @__PURE__ */ t(ve.Provider, { value: { variant: o }, children: /* @__PURE__ */ t(
+  "table",
+  {
+    ...a,
+    className: k("p-table-dynamic", e, {
+      "is-full-height": o === "full-height"
+    }),
+    children: n
+  }
+) }), Jt = ({ columns: e }) => /* @__PURE__ */ t(A, { children: Array.from({ length: 10 }, (n, o) => /* @__PURE__ */ t("tr", { "aria-hidden": "true", children: e.map((a, i) => /* @__PURE__ */ t(
+  "td",
+  {
+    className: k(a.id, "u-text-overflow-clip"),
+    children: /* @__PURE__ */ t(w, { isPending: !0, text: "XXXxxxx.xxxxxxxxx" })
+  },
+  i
+)) }, o)) }), Qt = ({
+  className: e,
+  table: n
+}) => {
+  const o = n ? n.getAllColumns() : Array.from({ length: 10 }).fill({ id: "" });
+  return /* @__PURE__ */ b(A, { children: [
+    /* @__PURE__ */ t("caption", { className: "u-visually-hidden", children: "Loading..." }),
+    /* @__PURE__ */ t(ke, { "aria-busy": "true", className: e, children: /* @__PURE__ */ t(Jt, { columns: o }) })
+  ] });
+}, ke = ({
+  className: e,
+  children: n,
+  style: o,
+  ...a
+}) => {
+  const { variant: i } = V(ve), l = M(null), [d, r] = P(null), s = F(() => {
+    var u, v;
+    if (window.innerWidth > Yt.small) {
+      const g = (v = (u = l.current) == null ? void 0 : u.getBoundingClientRect) == null ? void 0 : v.call(u).top;
+      g && r(g + 1);
+    } else
+      r(null);
+  }, []);
+  Q(() => {
+    s();
+  }, [s]), I(() => (window.addEventListener("resize", s), () => window.removeEventListener("resize", s)), [s]);
+  const c = z(() => i === "full-height" && d ? {
+    height: `calc(100vh - ${d}px)`,
+    minHeight: `calc(100vh - ${d}px)`,
+    ...o
+  } : o, [i, d, o]);
+  return /* @__PURE__ */ t(
+    "tbody",
+    {
+      className: e,
+      ref: l,
+      style: c,
+      ...a,
+      children: n
+    }
+  );
+};
+_e.Body = ke;
+_e.Loading = Qt;
+const we = ({ children: e }) => /* @__PURE__ */ t("caption", { children: /* @__PURE__ */ t("div", { className: "p-strip", children: e }) }), Zt = ({ children: e }) => /* @__PURE__ */ t("div", { className: "row", children: /* @__PURE__ */ t("div", { className: "col-start-large-4 u-align--left col-8 col-medium-4", children: /* @__PURE__ */ t("p", { className: "p-heading--4 u-no-margin--bottom", children: e }) }) }), en = ({ children: e }) => /* @__PURE__ */ t("div", { className: "row", children: /* @__PURE__ */ t("div", { className: "u-align--left col-start-large-4 col-8 col-medium-4", children: /* @__PURE__ */ t("p", { children: e }) }) });
+we.Title = Zt;
+we.Description = en;
+const se = ({
+  header: e
+}) => {
+  var n;
+  return {
+    asc: /* @__PURE__ */ t(E, { name: "chevron-up", children: "ascending" }),
+    desc: /* @__PURE__ */ t(E, { name: "chevron-down", children: "descending" })
+  }[(n = e == null ? void 0 : e.column) == null ? void 0 : n.getIsSorted()] ?? null;
+}, tn = ({ header: e }) => {
+  const n = e.column.getCanSort(), o = e.column.columnDef.meta, a = o == null ? void 0 : o.isInteractiveHeader, i = ce(e.column.columnDef.header, e.getContext());
+  return /* @__PURE__ */ t(
+    "th",
+    {
+      "aria-hidden": (o == null ? void 0 : o.headerAriaHidden) || void 0,
+      "aria-label": o == null ? void 0 : o.headerAriaLabel,
+      className: k("p-column-header", e.column.id),
+      children: n && !a ? /* @__PURE__ */ t(
+        O,
+        {
+          appearance: "link",
+          className: "p-button--column-header",
+          onClick: e.column.getToggleSortingHandler(),
+          type: "button",
+          children: /* @__PURE__ */ b(A, { children: [
+            i,
+            /* @__PURE__ */ t(se, { header: e })
+          ] })
+        }
+      ) : /* @__PURE__ */ b("span", { className: "p-container--column-header", children: [
+        i,
+        n && !a && /* @__PURE__ */ t(se, { header: e })
+      ] })
+    },
+    e.id
+  );
+}, B = ({
+  children: e,
+  "aria-label": n = "Table controls"
+}) => /* @__PURE__ */ t(
+  "section",
+  {
+    "aria-label": n,
+    className: "controls-bar u-flex u-flex--justify-between u-flex--wrap",
+    children: /* @__PURE__ */ t("div", { className: "p-form p-form--inline", children: e })
+  }
+), nn = ({ children: e }) => /* @__PURE__ */ t("strong", { className: "controls-bar__description", children: e }), on = ({ children: e }) => /* @__PURE__ */ t("div", { className: "u-flex u-flex--wrap u-flex--column-x-small controls-bar__right", children: e });
+B.Left = nn;
+B.Right = on;
+const rn = ({
+  currentPage: e,
+  itemsPerPage: n,
+  totalItems: o,
+  handlePageSizeChange: a,
+  dataContext: i,
+  setCurrentPage: l,
+  isPending: d,
+  pageSizes: r = [20, 30, 50, 100]
+}) => {
+  const s = z(() => r, []), c = z(
+    () => s.map((f) => ({
+      label: `${f}/page`,
+      value: f
+    })),
+    [s]
+  ), u = Math.ceil(o / n), v = (f) => {
+    const { value: h } = f.target;
+    a(Number(h));
+  }, g = () => e === u ? n - (u * n - o) : e < u ? n : 0;
+  return /* @__PURE__ */ b(B, { children: [
+    /* @__PURE__ */ b(B.Left, { children: [
+      "Showing ",
+      g(),
+      " out of ",
+      o,
+      " ",
+      i
+    ] }),
+    /* @__PURE__ */ b(B.Right, { children: [
+      /* @__PURE__ */ t(
+        Xt,
+        {
+          currentPage: e,
+          disabled: d,
+          paginate: l,
+          totalPages: u
+        }
+      ),
+      /* @__PURE__ */ t(
+        Qe,
+        {
+          "aria-label": "Items per page",
+          className: "u-no-margin--bottom",
+          name: "Items per page",
+          onChange: v,
+          options: c,
+          value: n
+        }
+      )
+    ] })
+  ] });
+}, an = ({
+  grouping: e,
+  initialData: n
+}) => {
+  const [o, a] = P(!0), i = F(
+    (l) => {
+      a((d) => {
+        const r = typeof l == "function" ? l(d) : l;
+        if (r === !0) return !0;
+        const s = { ...r };
+        if (d !== !0)
+          for (const c of Object.keys(d))
+            c in s || (s[c] = !1);
+        return s;
+      });
+    },
+    []
+  );
+  return I(() => {
+    e.length && i((l) => {
+      const r = { ...l === !0 ? {} : { ...l } };
+      for (const s of n) {
+        const c = e.map((u) => `${u}:${s[u]}`).join(">");
+        c in r || (r[c] = !0);
+      }
+      return r;
+    });
+  }, [n, e]), { expanded: o, setExpanded: i };
+}, ln = ({
+  groupBy: e,
+  initialData: n
+}) => {
+  const [o, a] = P(e ?? []), i = z(() => o.length ? [...n].sort((l, d) => {
+    for (const r of o) {
+      const s = l[r] ?? null, c = d[r] ?? null;
+      if (s === null) return 1;
+      if (c === null || s < c) return -1;
+      if (s > c) return 1;
+    }
+    return 0;
+  }) : n, [n, o]);
+  return { grouping: o, setGrouping: a, groupedData: i };
+}, sn = ({
+  isLoading: e
+}) => {
+  const n = M(null), o = M(null);
+  I(() => {
+    const l = n.current;
+    if (!l || e) return;
+    const d = [
+      "button:not([disabled])",
+      "input:not([disabled])",
+      "select:not([disabled])",
+      "textarea:not([disabled])",
+      "a[href]"
+    ].join(", ");
+    l.querySelectorAll(d).forEach((r) => {
+      r.getAttribute("tabindex") !== "-1" && (r.tabIndex = 0);
+    });
+  }), Q(() => {
+    const l = n.current;
+    if (!l || e) {
+      o.current = null;
+      return;
+    }
+    const d = Array.from(
+      l.querySelectorAll('tbody tr[role="row"]')
+    ).filter((r) => r.hasAttribute("tabindex"));
+    d.length !== 0 && (o.current && d.includes(o.current) ? o.current.tabIndex = 0 : (d[0].tabIndex = 0, o.current = d[0]));
+  });
+  const a = F((l) => {
+    if (!n.current) return;
+    const s = l.target.closest(
+      'tbody tr[role="row"][tabindex]'
+    );
+    s && (o.current && o.current !== s && (o.current.tabIndex = -1), s.tabIndex = 0, o.current = s);
+  }, []), i = F(
+    (l) => {
+      var x, p, _, S, R;
+      if (l.key !== "ArrowUp" && l.key !== "ArrowDown" && l.key !== "ArrowLeft" && l.key !== "ArrowRight" && l.key !== "Home" && l.key !== "End")
+        return;
+      const d = n.current;
+      if (!d) return;
+      const r = document.activeElement;
+      if (!r) return;
+      const s = r.matches('tr[role="row"]'), c = r.matches('td[role="gridcell"][tabindex="-1"]');
+      if (!s && !c) return;
+      l.preventDefault();
+      const u = Array.from(
+        d.querySelectorAll('tbody tr[role="row"]')
+      ), v = s ? r : r.closest("tr");
+      if (!v) return;
+      const g = u.indexOf(v);
+      if (g === -1) return;
+      const f = (T) => Array.from(
+        T.querySelectorAll(
+          'td[role="gridcell"][tabindex="-1"]:not(.p-generic-table__group-chevron)'
+        )
+      ), h = f(v), m = c ? h.indexOf(r) : -1;
+      switch (l.key) {
+        case "ArrowUp": {
+          if (g <= 0) break;
+          const T = u[g - 1];
+          if (c && m >= 0) {
+            const L = f(T);
+            if (L.length > 0) {
+              L[Math.min(m, L.length - 1)].focus();
+              break;
+            }
+          }
+          T.focus();
+          break;
+        }
+        case "ArrowDown": {
+          if (g >= u.length - 1) break;
+          const T = u[g + 1];
+          if (c && m >= 0) {
+            const L = f(T);
+            if (L.length > 0) {
+              L[Math.min(m, L.length - 1)].focus();
+              break;
+            }
+          }
+          T.focus();
+          break;
+        }
+        case "ArrowRight":
+          s ? (x = h[0]) == null || x.focus() : m < h.length - 1 && h[m + 1].focus();
+          break;
+        case "ArrowLeft":
+          if (s) break;
+          m > 0 ? h[m - 1].focus() : v.focus();
+          break;
+        case "Home":
+          c ? (p = h[0]) == null || p.focus() : l.ctrlKey && ((_ = u[0]) == null || _.focus());
+          break;
+        case "End":
+          c ? (S = h[h.length - 1]) == null || S.focus() : l.ctrlKey && ((R = u[u.length - 1]) == null || R.focus());
+          break;
+      }
+    },
+    []
+  );
+  return { tableRef: n, handleTableFocus: a, handleTableKeyDown: i };
+}, cn = ({
+  containerRef: e,
+  variant: n,
+  length: o,
+  isLoading: a
+}) => {
+  const i = M(null), [l, d] = P("auto"), [r, s] = P(!1);
+  return Q(() => {
+    const u = () => {
+      const f = i.current;
+      if (!f) return;
+      const h = (e == null ? void 0 : e.current) || document.querySelector("main");
+      if (!h) return;
+      const m = h.getBoundingClientRect(), x = f.getBoundingClientRect(), p = m.bottom - x.top, S = f.scrollHeight > p;
+      s(S), d(
+        n === "full-height" && S ? `${p}px` : "auto"
+      );
+    };
+    u();
+    const v = new ResizeObserver(u), g = i.current;
+    return g && v.observe(g), window.addEventListener("resize", u), () => {
+      window.removeEventListener("resize", u), g && v.unobserve(g);
+    };
+  }, [e, o, a]), { tableBodyRef: i, maxHeight: l, effectiveVariant: n === "full-height" && r ? "full-height" : "regular" };
+}, dn = ({
+  externalSorting: e,
+  setExternalSorting: n,
+  grouping: o,
+  groupedData: a,
+  pinGroup: i
+}) => {
+  const [l, d] = P(e ?? []), r = F(
+    (c) => {
+      d(c), n && n(c);
+    },
+    [n]
+  ), s = z(() => a.length ? [...a].sort((c, u) => {
+    if (i != null && i.length && o.length)
+      for (const { value: v, isTop: g } of i) {
+        const f = o[0], h = c[f] ?? null, m = u[f] ?? null;
+        if (h === v && m !== v)
+          return g ? -1 : 1;
+        if (m === v && h !== v)
+          return g ? 1 : -1;
+      }
+    for (const { id: v, desc: g } of l) {
+      const f = c[v] ?? null, h = u[v] ?? null;
+      if (f === null && h === null) return 0;
+      if (f === null) return g ? -1 : 1;
+      if (h === null || f < h) return g ? 1 : -1;
+      if (f > h) return g ? -1 : 1;
+    }
+    return 0;
+  }) : [], [a, l, i, o]);
+  return { sorting: l, setSorting: r, sortedData: s };
+}, un = ({ table: e, ...n }) => {
+  const o = M(null);
+  if (!e)
+    return null;
+  const a = e.getCoreRowModel().rows.filter((r) => r.getCanSelect()), i = e.getSelectedRowModel().rows.filter((r) => r.getCanSelect()), l = a.length > 0 && i.length === a.length, d = i.length > 0 && !l;
+  return I(() => {
+    o.current && (o.current.indeterminate = d);
+  }, [d]), // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+  /* @__PURE__ */ b(
+    "label",
+    {
+      className: "p-checkbox--inline p-table-checkbox--all",
+      onClick: (r) => r.stopPropagation(),
+      onKeyDown: (r) => r.stopPropagation(),
+      children: [
+        /* @__PURE__ */ t(
+          "input",
+          {
+            ref: o,
+            "aria-label": "select all",
+            className: "p-checkbox__input",
+            disabled: a.length === 0,
+            type: "checkbox",
+            checked: l,
+            onChange: () => {
+              const r = e.getCoreRowModel().rows.filter((c) => c.getCanSelect()), s = r.every((c) => c.getIsSelected());
+              r.forEach((c) => c.toggleSelected(!s));
+            },
+            ...n
+          }
+        ),
+        /* @__PURE__ */ t("span", { className: "p-checkbox__label" })
+      ]
+    }
+  );
+}, hn = ({ row: e, ...n }) => {
+  const o = M(null);
+  if (!e)
+    return (
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+      /* @__PURE__ */ b(
+        "label",
+        {
+          className: "p-checkbox--inline p-table-checkbox--group",
+          onClick: (r) => r.stopPropagation(),
+          onKeyDown: (r) => r.stopPropagation(),
+          children: [
+            /* @__PURE__ */ t(
+              "input",
+              {
+                className: "p-checkbox__input",
+                disabled: !0,
+                type: "checkbox",
+                ...n
+              }
+            ),
+            /* @__PURE__ */ t("span", { className: "p-checkbox__label" })
+          ]
+        }
+      )
+    );
+  const a = e.subRows.filter(
+    (r) => r.getCanSelect()
+  ), i = a.filter(
+    (r) => r.getIsSelected()
+  ).length, l = a.length > 0 && i === a.length, d = i > 0 && !l;
+  return I(() => {
+    o.current && (o.current.indeterminate = d);
+  }, [d]), // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+  /* @__PURE__ */ b(
+    "label",
+    {
+      className: "p-checkbox--inline p-table-checkbox--group",
+      onClick: (r) => r.stopPropagation(),
+      onKeyDown: (r) => r.stopPropagation(),
+      children: [
+        /* @__PURE__ */ t(
+          "input",
+          {
+            ref: o,
+            className: "p-checkbox__input",
+            type: "checkbox",
+            checked: l,
+            disabled: !e.getCanSelect() && a.length === 0,
+            onChange: () => {
+              const r = !l;
+              a.forEach(
+                (s) => s.toggleSelected(r)
+              );
+            },
+            ...n
+          }
+        ),
+        /* @__PURE__ */ t("span", { className: "p-checkbox__label" })
+      ]
+    }
+  );
+}, D = ({
+  row: e,
+  disabledTooltip: n = "",
+  isNested: o = !1,
+  ...a
+}) => {
+  if (!e)
+    return (
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+      /* @__PURE__ */ b(
+        "label",
+        {
+          className: "p-checkbox--inline p-table-checkbox",
+          onClick: (r) => r.stopPropagation(),
+          onKeyDown: (r) => r.stopPropagation(),
+          children: [
+            /* @__PURE__ */ t(
+              "input",
+              {
+                className: "p-checkbox__input",
+                disabled: !0,
+                type: "checkbox",
+                ...a
+              }
+            ),
+            /* @__PURE__ */ t("span", { className: "p-checkbox__label" })
+          ]
+        }
+      )
+    );
+  const i = e.getCanSelect(), l = typeof n == "string" ? n : n(e);
+  return /* @__PURE__ */ t(Z, { message: o ? "Selection is managed by the parent row" : i ? !1 : l, position: "btm-right", children: /* @__PURE__ */ b(
+    "label",
+    {
+      className: "p-checkbox--inline p-table-checkbox",
+      onClick: (r) => r.stopPropagation(),
+      onKeyDown: (r) => r.stopPropagation(),
+      children: [
+        /* @__PURE__ */ t(
+          "input",
+          {
+            className: "p-checkbox__input",
+            type: "checkbox",
+            checked: e.getIsSelected(),
+            disabled: !i || o,
+            onChange: e.getToggleSelectedHandler(),
+            ...a
+          }
+        ),
+        /* @__PURE__ */ t("span", { className: "p-checkbox__label" })
+      ]
+    }
+  ) });
+};
+D.All = un;
+D.Group = hn;
+const gn = ({
+  canSelect: e,
+  initialColumns: n,
+  groupBy: o,
+  getSubRows: a,
+  selection: i,
+  showChevron: l
+}) => {
+  let d = [...n];
+  if (e && i) {
+    const r = [
+      {
+        id: "p-generic-table__select",
+        accessorKey: "id",
+        enableSorting: !1,
+        meta: { headerAriaLabel: "Row selection" },
+        header: ({ table: s }) => o ? "" : /* @__PURE__ */ t(D.All, { table: s }),
+        cell: ({ row: s }) => {
+          const c = i.rowSelectionLabelKey && i.rowSelectionLabelKey in s.original ? `select ${s.original[i.rowSelectionLabelKey]}` : "select row";
+          return s.getIsGrouped() ? null : /* @__PURE__ */ t(
+            D,
+            {
+              "aria-label": c,
+              disabledTooltip: i.disabledSelectionTooltip ?? "",
+              isNested: a !== void 0 && !!s.parentId,
+              row: s
+            }
+          );
+        }
+      },
+      ...d
+    ];
+    if (o) {
+      const s = (c) => o[0] in c.original ? `select ${c.original[o[0]]}` : "select group";
+      d = [
+        {
+          id: "p-generic-table__group-select",
+          accessorKey: "id",
+          enableSorting: !1,
+          meta: { headerAriaLabel: "Row selection" },
+          header: ({ table: c }) => /* @__PURE__ */ t(D.All, { table: c }),
+          cell: ({ row: c }) => c.getIsGrouped() ? /* @__PURE__ */ t(D.Group, { "aria-label": s(c), row: c }) : null
+        },
+        ...r
+      ];
+    } else
+      d = r;
+  }
+  return o && l && (d = [{
+    id: "p-generic-table__group-chevron",
+    accessorKey: "id",
+    enableSorting: !1,
+    meta: { headerAriaHidden: !0 },
+    header: "",
+    cell: ({ row: s }) => {
+      const c = s.getIsExpanded();
+      return s.getIsGrouped() ? /* @__PURE__ */ t(
+        Z,
+        {
+          message: c ? "Collapse" : "Expand",
+          position: "btm-right",
+          children: /* @__PURE__ */ t(E, { name: c ? X.chevronUp : X.chevronDown })
+        }
+      ) : null;
+    }
+  }, ...d]), d;
+}, mn = ({
+  table: e,
+  columns: n,
+  filterCells: o,
+  getSubRows: a,
+  noData: i,
+  selection: l
+}) => {
+  if (e.getRowModel().rows.length < 1)
+    return /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t(
+      "td",
+      {
+        className: "p-generic-table__no-data",
+        colSpan: n.length,
+        role: "gridcell",
+        children: /* @__PURE__ */ t("div", { "aria-live": "polite", role: "status", children: i })
+      }
+    ) });
+  let d = 1;
+  return e.getRowModel().rows.map((r) => {
+    d++;
+    const s = d, { getIsGrouped: c, id: u, getVisibleCells: v, parentId: g } = r, f = !c(), h = (l == null ? void 0 : l.rowSelection) !== void 0 && Object.keys(l.rowSelection).includes(u), m = (p) => {
+      p.target === p.currentTarget && (p.key === "Enter" || p.key === " ") && (p.preventDefault(), r.toggleExpanded());
+    }, x = (p) => {
+      if (p.target !== p.currentTarget || p.key !== "Enter" && p.key !== " ") return;
+      p.preventDefault();
+      const _ = p.currentTarget.querySelector(
+        "button:not([disabled]), input:not([disabled]), a[href], select:not([disabled]), textarea:not([disabled])"
+      );
+      _ == null || _.focus();
+    };
+    return /* @__PURE__ */ t(
+      "tr",
+      {
+        "aria-expanded": f ? void 0 : r.getIsExpanded(),
+        "aria-rowindex": s,
+        "aria-selected": h,
+        className: k({
+          "p-generic-table__individual-row": f,
+          "p-generic-table__group-row": !f,
+          "p-generic-table__nested-row": a !== void 0 && !!g
+        }),
+        onClick: f ? void 0 : () => r.toggleExpanded(),
+        onKeyDown: f ? x : m,
+        tabIndex: -1,
+        role: "row",
+        children: v().filter((p) => !f && (p.column.id === "p-generic-table__group-select" || p.column.id === "p-generic-table__group-chevron") ? !0 : o(r, p.column)).map((p) => {
+          var _, S;
+          return /* @__PURE__ */ t(
+            "td",
+            {
+              "aria-hidden": p.column.id === "p-generic-table__select" && a !== void 0 && g ? !0 : void 0,
+              "aria-label": ((S = (_ = p.column.columnDef.meta) == null ? void 0 : _.cellAriaLabel) == null ? void 0 : S.call(_, r)) ?? void 0,
+              className: k(`${p.column.id}`),
+              role: "gridcell",
+              tabIndex: -1,
+              children: ce(p.column.columnDef.cell, p.getContext())
+            },
+            p.id
+          );
+        })
+      },
+      u
+    );
+  });
+}, pn = (e, n) => {
+  const o = e.column.id;
+  return o === "p-generic-table__group-chevron" ? n ? /* @__PURE__ */ t(E, { name: X.chevronDown }) : null : o === "p-generic-table__group-select" ? n ? /* @__PURE__ */ t(D.Group, { "aria-label": "select group" }) : null : o === "p-generic-table__select" ? n ? null : /* @__PURE__ */ t(D, { "aria-label": "select row" }) : null;
+}, bn = (e, n, o) => e({ getIsGrouped: () => o }, n), fn = ({
+  table: e,
+  columns: n,
+  filterHeaders: o,
+  filterCells: a,
+  loadingVariant: i,
+  skeletonRowCount: l,
+  skeletonGroupCount: d
+}) => {
+  var f;
+  const r = ((f = e.getHeaderGroups()[0]) == null ? void 0 : f.headers) ?? [], s = r.filter(o);
+  if (i !== "skeleton")
+    return /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t(
+      "td",
+      {
+        className: "p-generic-table__loading",
+        colSpan: s.length || n.length,
+        role: "gridcell",
+        children: /* @__PURE__ */ t(Ze, { text: "Loading..." })
+      }
+    ) });
+  const c = r.some(
+    (h) => h.column.id === "p-generic-table__group-select" || h.column.id === "p-generic-table__group-chevron"
+  ), u = (h, m, x) => /* @__PURE__ */ t(
+    "tr",
+    {
+      "aria-expanded": x ? !0 : void 0,
+      "aria-rowindex": m,
+      className: k({
+        "p-generic-table__group-row": x,
+        "p-generic-table__individual-row": !x,
+        "p-generic-table__skeleton-row": !0
+      }),
+      role: "row",
+      children: r.filter((p) => {
+        const _ = p.column.id;
+        return x && (_ === "p-generic-table__group-select" || _ === "p-generic-table__group-chevron") ? !0 : bn(
+          a,
+          p.column,
+          x
+        );
+      }).map((p) => {
+        const _ = p.column.id, S = _.startsWith("p-generic-table__"), R = p.column.columnDef.meta, T = S ? pn(p, x) : R != null && R.skeleton ? R.skeleton() : /* @__PURE__ */ t(w, { variant: "block", width: "70%", height: "1.5rem" });
+        return /* @__PURE__ */ t(
+          "td",
+          {
+            className: k("p-generic-table__skeleton-cell", _),
+            role: "gridcell",
+            children: T
+          },
+          `${h}-${p.id}`
+        );
+      })
+    },
+    h
+  );
+  if (!c)
+    return Array.from({ length: l }).map(
+      (h, m) => u(`skel-${m}`, m + 2, !1)
+    );
+  const v = [];
+  let g = 1;
+  for (let h = 0; h < d; h++) {
+    v.push(u(`skel-group-${h}`, ++g, !0));
+    for (let m = 0; m < l; m++)
+      v.push(u(`skel-${h}-${m}`, ++g, !1));
+  }
+  return v;
+}, vn = ({
+  "aria-label": e,
+  className: n,
+  columns: o,
+  columnVisibility: a,
+  containerRef: i,
+  data: l,
+  filterCells: d = () => !0,
+  filterHeaders: r = () => !0,
+  getSubRows: s,
+  groupBy: c,
+  isLoading: u,
+  loadingVariant: v = "spinner",
+  skeletonRowCount: g = 10,
+  skeletonGroupCount: f = 2,
+  noData: h,
+  pagination: m,
+  pinGroup: x,
+  sorting: p = [],
+  selection: _,
+  setSorting: S,
+  showChevron: R = !1,
+  variant: T = "full-height",
+  debug: L = !1,
+  ...Ne
+}) => {
+  const { grouping: U, setGrouping: xe, groupedData: Ce } = ln({
+    groupBy: c,
+    initialData: l
+  }), { sortedData: ne, sorting: Se, setSorting: ye } = dn({
+    externalSorting: p,
+    setExternalSorting: S,
+    grouping: U,
+    groupedData: Ce,
+    pinGroup: x
+  }), { expanded: Ie, setExpanded: Re } = an({
+    grouping: U,
+    initialData: l
+  }), { tableBodyRef: Te, maxHeight: Pe, effectiveVariant: Ae } = cn({
+    containerRef: i,
+    variant: T,
+    length: ne.length,
+    isLoading: u
+  }), [Le, De] = P({}), Ee = (a == null ? void 0 : a.columnVisibility) ?? Le, $e = (a == null ? void 0 : a.setColumnVisibility) ?? De, H = !!_, W = z(
+    () => gn({
+      canSelect: H,
+      initialColumns: o,
+      groupBy: c,
+      getSubRows: s,
+      selection: _,
+      showChevron: R
+    }),
+    [H, o, c, s]
+  ), j = tt({
+    data: ne,
+    columns: W,
+    state: {
+      grouping: U,
+      expanded: Ie,
+      sorting: Se,
+      columnVisibility: Ee,
+      rowSelection: _ == null ? void 0 : _.rowSelection
+    },
+    manualPagination: !0,
+    autoResetExpanded: !1,
+    onExpandedChange: Re,
+    onSortingChange: ye,
+    onGroupingChange: xe,
+    onColumnVisibilityChange: $e,
+    onRowSelectionChange: _ == null ? void 0 : _.setRowSelection,
+    manualSorting: !0,
+    enableSorting: !0,
+    enableExpanding: !0,
+    getSubRows: s,
+    getExpandedRowModel: rt(),
+    getCoreRowModel: ot(),
+    getGroupedRowModel: nt(),
+    groupedColumnMode: !1,
+    enableRowSelection: (_ == null ? void 0 : _.filterSelectable) ?? H,
+    enableMultiRowSelection: (_ == null ? void 0 : _.filterSelectable) ?? H,
+    getRowId: (G) => G.id.toString(),
+    debugAll: L
+  }), { tableRef: Me, handleTableFocus: Fe, handleTableKeyDown: He } = sn({ isLoading: u });
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      className: k("p-generic-table", n),
+      "data-testid": "p-generic-table",
+      ...Ne,
+      children: [
+        m && /* @__PURE__ */ t(
+          rn,
+          {
+            currentPage: m.currentPage,
+            dataContext: m.dataContext,
+            handlePageSizeChange: m.handlePageSizeChange,
+            isPending: m.isPending,
+            itemsPerPage: m.itemsPerPage,
+            setCurrentPage: m.setCurrentPage,
+            totalItems: m.totalItems,
+            pageSizes: m.pageSizes
+          }
+        ),
+        /* @__PURE__ */ b(
+          "table",
+          {
+            ref: Me,
+            "aria-busy": u,
+            "aria-label": e,
+            "aria-rowcount": ((m == null ? void 0 : m.totalItems) ?? j.getRowModel().rows.length) + 1,
+            className: k("p-generic-table__table", {
+              "p-generic-table__is-full-height": Ae === "full-height",
+              "p-generic-table__is-selectable": H,
+              "p-generic-table__is-grouped": c !== void 0
+            }),
+            onFocus: Fe,
+            onKeyDown: He,
+            role: "treegrid",
+            children: [
+              /* @__PURE__ */ t("thead", { children: j.getHeaderGroups().map((G) => /* @__PURE__ */ t("tr", { "aria-rowindex": 1, role: "row", children: G.headers.filter(r).map((oe, re) => /* @__PURE__ */ b(je, { children: [
+                /* @__PURE__ */ t(tn, { header: oe }),
+                H && c && (!R && re === 2 || R && re === 3) ? /* @__PURE__ */ t(
+                  "th",
+                  {
+                    "aria-hidden": "true",
+                    className: "p-generic-table__select-alignment",
+                    role: "columnheader"
+                  }
+                ) : null
+              ] }, oe.id)) }, G.id)) }),
+              /* @__PURE__ */ t(
+                "tbody",
+                {
+                  ref: Te,
+                  style: {
+                    overflowY: "auto",
+                    maxHeight: Pe
+                  },
+                  children: u ? fn({
+                    table: j,
+                    columns: W,
+                    filterHeaders: r,
+                    filterCells: d,
+                    loadingVariant: v,
+                    skeletonRowCount: g,
+                    skeletonGroupCount: f
+                  }) : mn({
+                    table: j,
+                    columns: W,
+                    filterCells: d,
+                    getSubRows: s,
+                    noData: h,
+                    selection: _
+                  })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  C,
+  _e as D,
+  ee as F,
+  vn as G,
+  ue as I,
+  Ct as L,
+  lt as M,
+  N,
+  w as P,
+  ge as S,
+  we as T,
+  fe as a,
+  Ut as b,
+  In as c,
+  yn as d,
+  Wt as e,
+  Xt as f,
+  $ as m,
+  K as t,
+  q as u
+};