@apicurio/common-ui-components 1.0.6 → 1.0.8

package/README.md

@@ -1,27 +1,24 @@
-# React + TypeScript + Vite
+# Apicurio Common UI Components
+This library contains some React + Patternfly UI components that are used across multiple Apicurio
+UI projects.
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Building
+Use standard Node/NPM tooling to build the code in this library.
 
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+```
+npm install
+npm run lint
+npm run build
+```
 
-- Configure the top-level `parserOptions` property like this:
+## Developing
+This library includes a demo application that showcases the components it provides, and allows easy
+iterative development.
 
-```js
-   parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-   },
+```
+npm install
+npm run dev
 ```
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+Once running, open your browser to the URL indicated by the output of `npm run dev`.  You will
+see the showcase application.

package/dist/common/DateTime.d.ts

@@ -0,0 +1,10 @@
+import { FunctionComponent } from "react";
+/**
+ * Properties
+ */
+export type DateTimeProps = {
+    date: Date | string | undefined;
+    format?: string;
+    locale?: string;
+};
+export declare const DateTime: FunctionComponent<DateTimeProps>;

package/dist/common/FromNow.d.ts

@@ -0,0 +1,5 @@
+import { FunctionComponent } from "react";
+export type FromNowProps = {
+    date: Date | string | undefined;
+};
+export declare const FromNow: FunctionComponent<FromNowProps>;

package/dist/common/ObjectDropdown.d.ts

@@ -9,6 +9,8 @@ export type ObjectDropdownProps = {
     onSelect: (value: any | undefined) => void;
     itemToString: (value: any) => string;
     itemIsDivider?: (value: any) => boolean;
+    itemIsVisible?: (value: any) => boolean;
+    itemIsDisabled?: (value: any) => boolean;
     itemToTestId?: (value: any) => string;
     noSelectionLabel?: string;
     menuAppendTo?: HTMLElement | (() => HTMLElement) | "inline";

package/dist/common/ToggleIcon.d.ts

@@ -0,0 +1,9 @@
+import { FunctionComponent } from "react";
+/**
+ * Properties
+ */
+export type ToggleIconProps = {
+    expanded: boolean;
+    onClick: () => void;
+};
+export declare const ToggleIcon: FunctionComponent<ToggleIconProps>;

package/dist/common/index.d.ts

@@ -1,7 +1,10 @@
+export * from "./DateTime";
+export * from "./FromNow";
 export * from "./If";
 export * from "./IfNotEmpty";
 export * from "./IfNotLoading";
 export * from "./ListWithToolbar";
 export * from "./ObjectDropdown";
 export * from "./ObjectSelect";
+export * from "./ToggleIcon";
 export * from "./UrlUpload";

package/dist/main.js

@@ -1,179 +1,194 @@
-import { jsx as t, jsxs as g, Fragment as ie } from "react/jsx-runtime";
-import y, { useState as v, useEffect as D, useRef as w, useCallback as L, useMemo as j, memo as V, forwardRef as E } from "react";
-import { EmptyState as re, EmptyStateVariant as be, EmptyStateHeader as oe, EmptyStateBody as pe, Spinner as A, Alert as Te, Dropdown as Se, MenuToggle as H, DropdownList as Ie, Divider as le, DropdownItem as ye, Select as G, SelectOption as K, TextInput as Ce, Button as X, TextArea as we, AboutModal as xe, TextContent as Ne, Text as Y, TextVariants as Z, TextList as ee, TextListItem as f, Modal as ae, Progress as Oe, EmptyStateIcon as Re, Pagination as _e, PaginationVariant as ke, Skeleton as Fe, SearchInput as Le, SelectList as $e, ToolbarItem as De, InputGroup as Ee, ToolbarToggleGroup as ze, ToolbarGroup as Pe, ToolbarFilter as Ae } from "@patternfly/react-core";
-import { EllipsisVIcon as He, FilterIcon as ce } from "@patternfly/react-icons";
-import { Tr as z, Td as q, Th as We, Table as Be, Thead as Me, Tbody as je, ActionsColumn as Ue } from "@patternfly/react-table";
-const C = ({ condition: e, children: n }) => (typeof e == "boolean" ? e : e()) ? /* @__PURE__ */ t(y.Fragment, { children: n }) : /* @__PURE__ */ t(y.Fragment, {}), nt = ({ collection: e, emptyState: n, emptyStateTitle: i, emptyStateMessage: r, children: c }) => {
-  const d = () => !e || e.length === 0, l = n || /* @__PURE__ */ g(re, { variant: be.xs, children: [
-    /* @__PURE__ */ t(oe, { titleText: i || "None found", headingLevel: "h4" }),
-    /* @__PURE__ */ t(pe, { children: r || "No items found." })
+import { jsx as t, jsxs as u, Fragment as W } from "react/jsx-runtime";
+import p, { useState as v, useEffect as te, memo as V, forwardRef as F, useCallback as q, useMemo as J } from "react";
+import { DateTime as j } from "luxon";
+import { EmptyState as ne, EmptyStateVariant as ve, EmptyStateHeader as ie, EmptyStateBody as be, Spinner as x, Alert as pe, Dropdown as Te, MenuToggle as $, DropdownList as Ie, Divider as oe, DropdownItem as ye, Select as B, SelectOption as U, TextInput as Se, Button as Q, TextArea as Ce, AboutModal as Ne, TextContent as we, Text as X, TextVariants as Y, TextList as Z, TextListItem as f, Modal as le, Progress as De, EmptyStateIcon as Oe, Pagination as Fe, PaginationVariant as Le, Skeleton as _e, SearchInput as xe, SelectList as $e, ToolbarItem as ke, InputGroup as Re, ToolbarToggleGroup as Pe, ToolbarGroup as Ae, ToolbarFilter as Ee } from "@patternfly/react-core";
+import { EllipsisVIcon as Me, ChevronDownIcon as je, ChevronRightIcon as He, FilterIcon as ae } from "@patternfly/react-icons";
+import { Tr as L, Td as G, Th as We, Table as Ve, Thead as Be, Tbody as Ue, ActionsColumn as Ge } from "@patternfly/react-table";
+import ze from "use-resize-observer";
+const Ke = (e) => {
+  const [n, i] = v(null), o = e.format || "locale";
+  return te(() => {
+    let a;
+    if (e.date && typeof e.date == "string" ? a = j.fromISO(e.date) : e.date && typeof e.date == "object" && (a = j.fromJSDate(e.date)), a) {
+      const r = {
+        locale: e.locale
+      };
+      i(o === "fromNow" ? a.toRelative() : o === "locale" ? a.toLocaleString(j.DATETIME_FULL, r) : a.toFormat(o, r));
+    } else
+      i(null);
+  }, [e.date]), /* @__PURE__ */ t("span", { children: n || "" });
+}, lt = (e) => /* @__PURE__ */ t(Ke, { date: e.date, format: "fromNow" }), y = ({ condition: e, children: n }) => (typeof e == "boolean" ? e : e()) ? /* @__PURE__ */ t(p.Fragment, { children: n }) : /* @__PURE__ */ t(p.Fragment, {}), at = ({ collection: e, emptyState: n, emptyStateTitle: i, emptyStateMessage: o, children: a }) => {
+  const r = () => !e || e.length === 0, c = n || /* @__PURE__ */ u(ne, { variant: ve.xs, children: [
+    /* @__PURE__ */ t(ie, { titleText: i || "None found", headingLevel: "h4" }),
+    /* @__PURE__ */ t(be, { children: o || "No items found." })
   ] });
-  return d() ? /* @__PURE__ */ t(y.Fragment, { children: l }) : /* @__PURE__ */ t(y.Fragment, { children: c });
-}, P = ({ isLoading: e, loadingComponent: n, children: i }) => {
-  const r = () => typeof e == "boolean" ? e : e(), c = n || /* @__PURE__ */ t(A, {});
-  return r() ? /* @__PURE__ */ t(y.Fragment, { children: c }) : /* @__PURE__ */ t(y.Fragment, { children: i });
-}, it = ({ toolbar: e, alwaysShowToolbar: n, emptyState: i, filteredEmptyState: r, isLoading: c, isError: d, loadingComponent: l, errorComponent: o, isEmpty: a, isFiltered: s, children: h }) => {
-  const b = n || !a || s || d;
-  return o || (o = /* @__PURE__ */ t("div", { style: { padding: "15px", backgroundColor: "white" }, children: /* @__PURE__ */ t(Te, { isInline: !0, variant: "danger", title: "Error: Something went wrong!", children: /* @__PURE__ */ t("p", { children: "Something went wrong with the action you attempted, but we're not sure what it was. Try reloading the page and hopef for a better result, or contact your admin to report the error." }) }) })), /* @__PURE__ */ g(y.Fragment, { children: [
-    /* @__PURE__ */ t(C, { condition: b, children: e }),
-    /* @__PURE__ */ g(P, { isLoading: c, loadingComponent: l, children: [
-      /* @__PURE__ */ t(C, { condition: !a && !d, children: h }),
-      /* @__PURE__ */ t(C, { condition: a && s && !d, children: r }),
-      /* @__PURE__ */ t(C, { condition: a && !s && !d, children: i }),
-      /* @__PURE__ */ t(C, { condition: d, children: o })
+  return r() ? /* @__PURE__ */ t(p.Fragment, { children: c }) : /* @__PURE__ */ t(p.Fragment, { children: a });
+}, _ = ({ isLoading: e, loadingComponent: n, children: i }) => {
+  const o = () => typeof e == "boolean" ? e : e(), a = n || /* @__PURE__ */ t(x, {});
+  return o() ? /* @__PURE__ */ t(p.Fragment, { children: a }) : /* @__PURE__ */ t(p.Fragment, { children: i });
+}, rt = ({ toolbar: e, alwaysShowToolbar: n, emptyState: i, filteredEmptyState: o, isLoading: a, isError: r, loadingComponent: c, errorComponent: l, isEmpty: s, isFiltered: d, children: g }) => {
+  const T = n || !s || d || r;
+  return l || (l = /* @__PURE__ */ t("div", { style: { padding: "15px", backgroundColor: "white" }, children: /* @__PURE__ */ t(pe, { isInline: !0, variant: "danger", title: "Error: Something went wrong!", children: /* @__PURE__ */ t("p", { children: "Something went wrong with the action you attempted, but we're not sure what it was. Try reloading the page and hopef for a better result, or contact your admin to report the error." }) }) })), /* @__PURE__ */ u(p.Fragment, { children: [
+    /* @__PURE__ */ t(y, { condition: T, children: e }),
+    /* @__PURE__ */ u(_, { isLoading: a, loadingComponent: c, children: [
+      /* @__PURE__ */ t(y, { condition: !s && !r, children: g }),
+      /* @__PURE__ */ t(y, { condition: s && d && !r, children: o }),
+      /* @__PURE__ */ t(y, { condition: s && !d && !r, children: i }),
+      /* @__PURE__ */ t(y, { condition: r, children: l })
     ] })
   ] });
-}, rt = (e) => {
-  const [n, i] = v(!1), r = (a, s) => {
+}, ct = (e) => {
+  const [n, i] = v(!1), o = (s, d) => {
     i(!1);
-    const h = s;
-    h !== void 0 && h >= 0 ? e.onSelect(e.items[h]) : e.onSelect(void 0);
-  }, c = () => {
+    const g = d;
+    g !== void 0 && g >= 0 ? e.onSelect(e.items[g]) : e.onSelect(void 0);
+  }, a = () => {
     i(!n);
-  }, d = (a) => {
-    let s;
-    return e.itemToTestId !== void 0 && (s = e.itemToTestId(a)), s;
-  }, l = e.popperProps || {
+  }, r = (s) => {
+    let d;
+    return e.itemToTestId !== void 0 && (d = e.itemToTestId(s)), d;
+  }, c = e.popperProps || {
     appendTo: e.menuAppendTo
   };
-  let o = /* @__PURE__ */ t(He, { title: e.label });
-  return e.isKebab || (o = /* @__PURE__ */ t(y.Fragment, { children: e.label })), /* @__PURE__ */ t(
-    Se,
+  let l = /* @__PURE__ */ t(Me, { title: e.label });
+  return e.isKebab || (l = /* @__PURE__ */ t(p.Fragment, { children: e.label })), /* @__PURE__ */ t(
+    Te,
     {
       isOpen: n,
-      onSelect: r,
-      onOpenChange: (a) => i(a),
-      toggle: (a) => /* @__PURE__ */ t(
-        H,
+      onSelect: o,
+      onOpenChange: (s) => i(s),
+      toggle: (s) => /* @__PURE__ */ t(
+        $,
         {
           "data-testid": e.testId,
-          ref: a,
-          onClick: c,
+          ref: s,
+          onClick: a,
           isExpanded: n,
           variant: e.isKebab ? "plain" : "default",
-          children: o
+          children: l
         }
       ),
       ouiaId: "ObjectDropdown",
-      popperProps: l,
+      popperProps: c,
       shouldFocusToggleOnSelect: !0,
-      children: /* @__PURE__ */ t(Ie, { children: e.items.map((a, s) => e.itemIsDivider && e.itemIsDivider(a) ? /* @__PURE__ */ t(le, { component: "li" }, `divider-${s}`) : /* @__PURE__ */ t(
+      children: /* @__PURE__ */ t(Ie, { children: e.items.map((s, d) => e.itemIsVisible !== void 0 && !e.itemIsVisible(s) ? /* @__PURE__ */ t(W, {}) : e.itemIsDivider && e.itemIsDivider(s) ? /* @__PURE__ */ t(oe, { component: "li" }, `divider-${d}`) : /* @__PURE__ */ t(
         ye,
         {
-          value: s,
-          component: (h) => /* @__PURE__ */ t("button", { ...h, "data-testid": d(a) }),
-          children: e.itemToString(a)
+          value: d,
+          isDisabled: e.itemIsDisabled === void 0 ? !1 : e.itemIsDisabled(s),
+          component: (g) => /* @__PURE__ */ t("button", { ...g, "data-testid": r(s) }),
+          children: e.itemToString(s)
         },
-        `action-${s}`
+        `action-${d}`
       )) })
     }
   );
-}, ot = (e) => {
-  var o;
-  const [n, i] = v(!1), r = (a, s) => {
-    i(!1), e.onSelect(e.items[s]);
-  }, c = () => {
+}, st = (e) => {
+  var l;
+  const [n, i] = v(!1), o = (s, d) => {
+    i(!1), e.onSelect(e.items[d]);
+  }, a = () => {
     i(!n);
-  }, d = (a) => {
-    let s;
-    return e.itemToTestId !== void 0 && (s = e.itemToTestId(a)), s;
+  }, r = (s) => {
+    let d;
+    return e.itemToTestId !== void 0 && (d = e.itemToTestId(s)), d;
   };
   return /* @__PURE__ */ t(
-    G,
+    B,
     {
-      toggle: (a) => /* @__PURE__ */ t(
-        H,
+      toggle: (s) => /* @__PURE__ */ t(
+        $,
         {
-          ref: a,
+          ref: s,
           className: e.toggleClassname || "menu-toggle",
-          onClick: c,
+          onClick: a,
           "data-testid": e.testId,
           isExpanded: n,
           children: e.value ? e.itemToString(e.value) : e.noSelectionLabel
         }
       ),
       id: e.toggleId,
-      onSelect: r,
+      onSelect: o,
       onOpenChange: i,
       isOpen: n,
-      children: (o = e.items) == null ? void 0 : o.map((a, s) => e.itemIsDivider && e.itemIsDivider(a) ? /* @__PURE__ */ t(le, {}, s) : /* @__PURE__ */ t(
-        K,
+      children: (l = e.items) == null ? void 0 : l.map((s, d) => e.itemIsDivider && e.itemIsDivider(s) ? /* @__PURE__ */ t(oe, {}, d) : /* @__PURE__ */ t(
+        U,
         {
-          isSelected: a === e.value,
-          component: (h) => /* @__PURE__ */ t("button", { ...h, "data-testid": d(a) }),
-          value: s,
-          children: e.itemToString(a)
+          isSelected: s === e.value,
+          component: (g) => /* @__PURE__ */ t("button", { ...g, "data-testid": r(s) }),
+          value: d,
+          children: e.itemToString(s)
         },
-        s
+        d
       ))
     }
   );
-}, de = {
+}, dt = ({ expanded: e, onClick: n }) => e ? /* @__PURE__ */ t(je, { onClick: n, style: { cursor: "pointer" } }) : /* @__PURE__ */ t(He, { onClick: n, style: { cursor: "pointer" } }), re = {
   padding: "5px",
   minHeight: "128px",
   borderRight: 0,
   borderLeft: 0,
   borderBottom: "1px solid #666",
   backgroundColor: "rgb(240, 240, 240)"
-}, Ve = {
-  ...de,
+}, qe = {
+  ...re,
   color: "red",
   overflow: "auto"
-}, lt = (e) => {
-  const [n, i] = v(""), [r, c] = v(""), [d, l] = v(!1), [o, a] = v(), s = (p, O) => {
-    i(O);
-  }, h = () => n != null && n.trim().length > 0, b = () => o != null && o.trim().length > 0, x = () => {
-    l(!0), e.onUrlFetch(n).then((p) => {
-      a(void 0), c(p), l(!1), e.onChange(p, n);
-    }).catch((p) => {
-      a(p.message), l(!1);
+}, ht = (e) => {
+  const [n, i] = v(""), [o, a] = v(""), [r, c] = v(!1), [l, s] = v(), d = (I, R) => {
+    i(R);
+  }, g = () => n != null && n.trim().length > 0, T = () => l != null && l.trim().length > 0, D = () => {
+    c(!0), e.onUrlFetch(n).then((I) => {
+      s(void 0), a(I), c(!1), e.onChange(I, n);
+    }).catch((I) => {
+      s(I.message), c(!1);
     });
-  }, S = () => {
-    i(""), c(""), e.onChange(void 0, void 0);
-  }, N = /* @__PURE__ */ g("div", { className: "url-upload-loading", style: de, children: [
-    /* @__PURE__ */ t(A, { size: "md", className: "spinner", style: { marginRight: "5px" } }),
+  }, C = () => {
+    i(""), a(""), e.onChange(void 0, void 0);
+  }, k = /* @__PURE__ */ u("div", { className: "url-upload-loading", style: re, children: [
+    /* @__PURE__ */ t(x, { size: "md", className: "spinner", style: { marginRight: "5px" } }),
     /* @__PURE__ */ t("span", { className: "spinner-message", children: "Loading URL content" })
   ] });
-  return /* @__PURE__ */ g("div", { className: "url-upload", "data-testid": e.testId, children: [
-    /* @__PURE__ */ g("div", { className: "url-upload-flex", style: { display: "flex" }, children: [
+  return /* @__PURE__ */ u("div", { className: "url-upload", "data-testid": e.testId, children: [
+    /* @__PURE__ */ u("div", { className: "url-upload-flex", style: { display: "flex" }, children: [
       /* @__PURE__ */ t("div", { className: "url-upload-url", style: { flexGrow: 1 }, children: /* @__PURE__ */ t(
-        Ce,
+        Se,
         {
           "data-testid": `${e.testId}-input`,
           value: n,
           type: "text",
           placeholder: e.urlPlaceholder,
           id: e.id,
-          onChange: s,
+          onChange: d,
           "aria-label": "url input"
         }
       ) }),
-      /* @__PURE__ */ t("div", { className: "url-fetch-button", children: /* @__PURE__ */ t(X, { "data-testid": `${e.testId}-fetch`, variant: "control", isDisabled: !h(), onClick: x, children: "Fetch" }) }),
-      /* @__PURE__ */ t("div", { className: "url-clear-button", children: /* @__PURE__ */ t(X, { "data-testid": `${e.testId}-clear`, variant: "control", isDisabled: !h(), onClick: S, children: "Clear" }) })
+      /* @__PURE__ */ t("div", { className: "url-fetch-button", children: /* @__PURE__ */ t(Q, { "data-testid": `${e.testId}-fetch`, variant: "control", isDisabled: !g(), onClick: D, children: "Fetch" }) }),
+      /* @__PURE__ */ t("div", { className: "url-clear-button", children: /* @__PURE__ */ t(Q, { "data-testid": `${e.testId}-clear`, variant: "control", isDisabled: !g(), onClick: C, children: "Clear" }) })
     ] }),
-    /* @__PURE__ */ t("div", { className: "url-upload-preview", children: /* @__PURE__ */ g(P, { isLoading: d, loadingComponent: N, children: [
-      /* @__PURE__ */ t(C, { condition: b, children: /* @__PURE__ */ g("div", { className: "url-upload-error", style: Ve, children: [
+    /* @__PURE__ */ t("div", { className: "url-upload-preview", children: /* @__PURE__ */ u(_, { isLoading: r, loadingComponent: k, children: [
+      /* @__PURE__ */ t(y, { condition: T, children: /* @__PURE__ */ u("div", { className: "url-upload-error", style: qe, children: [
         /* @__PURE__ */ t("div", { children: "Error getting content from URL." }),
-        /* @__PURE__ */ t("div", { children: o })
+        /* @__PURE__ */ t("div", { children: l })
       ] }) }),
-      /* @__PURE__ */ t(C, { condition: !b(), children: /* @__PURE__ */ t(
-        we,
+      /* @__PURE__ */ t(y, { condition: !T(), children: /* @__PURE__ */ t(
+        Ce,
         {
           "data-testid": `${e.testId}-preview`,
           "aria-label": "url-content",
-          value: r,
+          value: o,
           readOnly: !0,
           style: { minHeight: "128px" }
         }
       ) })
     ] }) })
   ] });
-}, at = (e) => {
-  const [n, i] = v(), [r, c] = v(), d = (l) => typeof l == "string" ? l : l === void 0 ? "" : l.toDateString();
-  return D(() => {
-    e.isOpen && (typeof e.frontendInfo == "function" ? e.frontendInfo().then(i) : i(e.frontendInfo), typeof e.backendInfo == "function" ? e.backendInfo().then(c) : c(e.backendInfo));
+}, mt = (e) => {
+  const [n, i] = v(), [o, a] = v(), r = (c) => typeof c == "string" ? c : c === void 0 ? "" : c.toDateString();
+  return te(() => {
+    e.isOpen && (typeof e.frontendInfo == "function" ? e.frontendInfo().then(i) : i(e.frontendInfo), typeof e.backendInfo == "function" ? e.backendInfo().then(a) : a(e.backendInfo));
   }, [e.isOpen]), /* @__PURE__ */ t(
-    xe,
+    Ne,
     {
       className: "app-about-modal",
       isOpen: e.isOpen,
@@ -182,34 +197,34 @@ const C = ({ condition: e, children: n }) => (typeof e == "boolean" ? e : e()) ?
       brandImageSrc: e.brandImageSrc,
       brandImageAlt: e.brandImageAlt,
       "aria-label": e.brandImageAlt,
-      children: /* @__PURE__ */ g(Ne, { className: "app-about-modal-content", style: { marginTop: "-25px" }, children: [
-        /* @__PURE__ */ t(Y, { component: Z.h2, children: "Web console info" }),
-        /* @__PURE__ */ t(P, { isLoading: n === void 0, children: /* @__PURE__ */ g(ee, { component: "dl", children: [
+      children: /* @__PURE__ */ u(we, { className: "app-about-modal-content", style: { marginTop: "-25px" }, children: [
+        /* @__PURE__ */ t(X, { component: Y.h2, children: "Web console info" }),
+        /* @__PURE__ */ t(_, { isLoading: n === void 0, children: /* @__PURE__ */ u(Z, { component: "dl", children: [
           /* @__PURE__ */ t(f, { component: "dt", children: "Project" }),
           /* @__PURE__ */ t(f, { component: "dd", children: /* @__PURE__ */ t("a", { href: n == null ? void 0 : n.url, target: "_blank", children: n == null ? void 0 : n.name }) }),
           /* @__PURE__ */ t(f, { component: "dt", children: "Version" }),
           /* @__PURE__ */ t(f, { component: "dd", children: n == null ? void 0 : n.version }),
           /* @__PURE__ */ t(f, { component: "dt", children: "Built on" }),
-          /* @__PURE__ */ t(f, { component: "dd", children: d(n == null ? void 0 : n.builtOn) }),
+          /* @__PURE__ */ t(f, { component: "dd", children: r(n == null ? void 0 : n.builtOn) }),
           /* @__PURE__ */ t(f, { component: "dt", children: "Digest" }),
           /* @__PURE__ */ t(f, { component: "dd", children: n == null ? void 0 : n.digest })
         ] }) }),
-        /* @__PURE__ */ t(Y, { style: { marginTop: "40px" }, component: Z.h2, children: e.backendLabel }),
-        /* @__PURE__ */ t(P, { isLoading: r === void 0, children: /* @__PURE__ */ g(ee, { component: "dl", children: [
+        /* @__PURE__ */ t(X, { style: { marginTop: "40px" }, component: Y.h2, children: e.backendLabel }),
+        /* @__PURE__ */ t(_, { isLoading: o === void 0, children: /* @__PURE__ */ u(Z, { component: "dl", children: [
           /* @__PURE__ */ t(f, { component: "dt", children: "Name" }),
-          /* @__PURE__ */ t(f, { component: "dd", children: (r == null ? void 0 : r.name) || "" }),
+          /* @__PURE__ */ t(f, { component: "dd", children: (o == null ? void 0 : o.name) || "" }),
           /* @__PURE__ */ t(f, { component: "dt", children: "Description" }),
-          /* @__PURE__ */ t(f, { component: "dd", children: (r == null ? void 0 : r.description) || "" }),
+          /* @__PURE__ */ t(f, { component: "dd", children: (o == null ? void 0 : o.description) || "" }),
           /* @__PURE__ */ t(f, { component: "dt", children: "Version" }),
-          /* @__PURE__ */ t(f, { component: "dd", children: (r == null ? void 0 : r.version) || "" }),
+          /* @__PURE__ */ t(f, { component: "dd", children: (o == null ? void 0 : o.version) || "" }),
           /* @__PURE__ */ t(f, { component: "dt", children: "Built on" }),
-          /* @__PURE__ */ t(f, { component: "dd", children: d(r == null ? void 0 : r.builtOn) })
+          /* @__PURE__ */ t(f, { component: "dd", children: r(o == null ? void 0 : o.builtOn) })
         ] }) })
       ] })
     }
   );
-}, ct = (e) => /* @__PURE__ */ g(
-  ae,
+}, gt = (e) => /* @__PURE__ */ u(
+  le,
   {
     title: "Please Wait",
     variant: "small",
@@ -220,12 +235,12 @@ const C = ({ condition: e, children: n }) => (typeof e == "boolean" ? e : e()) ?
     "aria-label": "please-wait-modal",
     style: { marginTop: "-15px" },
     children: [
-      /* @__PURE__ */ t(A, { size: "md", className: "spinner" }),
+      /* @__PURE__ */ t(x, { size: "md", className: "spinner" }),
       /* @__PURE__ */ t("span", { className: "message", style: { fontSize: "15px", color: "#333", marginLeft: "10px" }, children: e.message })
     ]
   }
-), dt = (e) => /* @__PURE__ */ t(
-  ae,
+), ut = (e) => /* @__PURE__ */ t(
+  le,
   {
     title: e.title,
     variant: "small",
@@ -234,480 +249,403 @@ const C = ({ condition: e, children: n }) => (typeof e == "boolean" ? e : e()) ?
     onClose: e.onClose,
     className: "progress pf-m-redhat-font",
     "aria-label": "progress-modal",
-    children: /* @__PURE__ */ t(Oe, { title: e.message, value: e.progress })
+    children: /* @__PURE__ */ t(De, { title: e.message, value: e.progress })
   }
 );
-function st() {
-  return /* @__PURE__ */ t(re, { children: /* @__PURE__ */ t(
-    oe,
+function ft() {
+  return /* @__PURE__ */ t(ne, { children: /* @__PURE__ */ t(
+    ie,
     {
       titleText: "Loading",
       headingLevel: "h4",
-      icon: /* @__PURE__ */ t(Re, { icon: A })
+      icon: /* @__PURE__ */ t(Oe, { icon: x })
     }
   ) });
 }
-function ht({
+function vt({
   itemCount: e,
   page: n,
   perPage: i,
-  isCompact: r = !1,
-  onChange: c,
-  variant: d = ke.top
+  isCompact: o = !1,
+  onChange: a,
+  variant: r = Le.top
 }) {
   return /* @__PURE__ */ t(
-    _e,
+    Fe,
     {
       itemCount: e,
       page: n,
       perPage: i,
-      onSetPage: (l, o) => c(o, i),
-      onPerPageSelect: (l, o) => c(1, o),
-      variant: d,
-      isCompact: r
+      onSetPage: (c, l) => a(l, i),
+      onPerPageSelect: (c, l) => a(1, l),
+      variant: r,
+      isCompact: o
     }
   );
 }
-function Ge(e, n) {
-  var i = w(null), r = w(null);
-  r.current = n;
-  var c = w(null);
-  D(function() {
-    d();
-  });
-  var d = L(function() {
-    var l = c.current, o = r.current, a = l || (o ? o instanceof Element ? o : o.current : null);
-    i.current && i.current.element === a && i.current.subscriber === e || (i.current && i.current.cleanup && i.current.cleanup(), i.current = {
-      element: a,
-      subscriber: e,
-      // Only calling the subscriber, if there's an actual element to report.
-      // Setting cleanup to undefined unless a subscriber returns one, as an existing cleanup function would've been just called.
-      cleanup: a ? e(a) : void 0
-    });
-  }, [e]);
-  return D(function() {
-    return function() {
-      i.current && i.current.cleanup && (i.current.cleanup(), i.current = null);
-    };
-  }, []), L(function(l) {
-    c.current = l, d();
-  }, [d]);
-}
-function te(e, n, i) {
-  return e[n] ? e[n][0] ? e[n][0][i] : (
-    // TS complains about this, because the RO entry type follows the spec and does not reflect Firefox's current
-    // behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.
-    // @ts-ignore
-    e[n][i]
-  ) : n === "contentBoxSize" ? e.contentRect[i === "inlineSize" ? "width" : "height"] : void 0;
-}
-function Ke(e) {
-  e === void 0 && (e = {});
-  var n = e.onResize, i = w(void 0);
-  i.current = n;
-  var r = e.round || Math.round, c = w(), d = v({
-    width: void 0,
-    height: void 0
-  }), l = d[0], o = d[1], a = w(!1);
-  D(function() {
-    return a.current = !1, function() {
-      a.current = !0;
-    };
-  }, []);
-  var s = w({
-    width: void 0,
-    height: void 0
-  }), h = Ge(L(function(b) {
-    return (!c.current || c.current.box !== e.box || c.current.round !== r) && (c.current = {
-      box: e.box,
-      round: r,
-      instance: new ResizeObserver(function(x) {
-        var S = x[0], N = e.box === "border-box" ? "borderBoxSize" : e.box === "device-pixel-content-box" ? "devicePixelContentBoxSize" : "contentBoxSize", p = te(S, N, "inlineSize"), O = te(S, N, "blockSize"), T = p ? r(p) : void 0, _ = O ? r(O) : void 0;
-        if (s.current.width !== T || s.current.height !== _) {
-          var R = {
-            width: T,
-            height: _
-          };
-          s.current.width = T, s.current.height = _, i.current ? i.current(R) : a.current || o(R);
-        }
-      })
-    }), c.current.instance.observe(b, {
-      box: e.box
-    }), function() {
-      c.current && c.current.instance.unobserve(b);
-    };
-  }, [e.box, r]), e.ref);
-  return j(function() {
-    return {
-      ref: h,
-      width: l.width,
-      height: l.height
-    };
-  }, [h, l.width, l.height]);
-}
-function qe({ columns: e, rows: n, getTd: i = () => q }) {
-  const r = new Array(e).fill(0).map((d, l) => {
-    const o = i(l);
-    return /* @__PURE__ */ t(o, { children: /* @__PURE__ */ t(
-      Fe,
+function Je({ columns: e, rows: n, getTd: i = () => G }) {
+  const o = new Array(e).fill(0).map((r, c) => {
+    const l = i(c);
+    return /* @__PURE__ */ t(l, { children: /* @__PURE__ */ t(
+      _e,
       {
-        screenreaderText: l === 0 ? "Loading data" : void 0
+        screenreaderText: c === 0 ? "Loading data" : void 0
       }
-    ) }, `cell_${l}`);
-  }), c = new Array(n).fill(0).map((d, l) => /* @__PURE__ */ t(z, { children: r }, `row_${l}`));
-  return /* @__PURE__ */ t(ie, { children: c });
+    ) }, `cell_${c}`);
+  }), a = new Array(n).fill(0).map((r, c) => /* @__PURE__ */ t(L, { children: o }, `row_${c}`));
+  return /* @__PURE__ */ t(W, { children: a });
 }
-const ut = ({
+const bt = ({
   ariaLabel: e,
   minimumColumnWidth: n = 250,
   columns: i,
-  data: r,
-  renderHeader: c,
-  renderCell: d,
-  renderActions: l,
-  isColumnSortable: o,
-  isRowDeleted: a,
-  isRowSelected: s,
-  expectedLength: h = 3,
-  onRowClick: b,
-  setActionCellOuiaId: x,
-  setRowOuiaId: S,
-  tableOuiaId: N,
-  children: p,
-  variant: O
+  data: o,
+  renderHeader: a,
+  renderCell: r,
+  renderActions: c,
+  isColumnSortable: l,
+  isRowDeleted: s,
+  isRowSelected: d,
+  expectedLength: g = 3,
+  onRowClick: T,
+  setActionCellOuiaId: D,
+  setRowOuiaId: C,
+  tableOuiaId: k,
+  children: I,
+  variant: R
 }) => {
-  const [T, _] = v(1e3);
-  let R;
-  const ue = ({ width: u }) => {
-    R && cancelAnimationFrame(R), u && (R = requestAnimationFrame(() => {
-      _(u);
+  const [S, de] = v(1e3);
+  let P;
+  const he = ({ width: h }) => {
+    P && cancelAnimationFrame(P), h && (P = requestAnimationFrame(() => {
+      de(h);
     }));
-  }, { ref: me } = Ke({ onResize: ue }), W = T >= 576, $ = L(
-    (u) => W && u !== 0 && u !== i.length - 1,
-    [i, W]
-  ), ge = j(() => i.map((u, m) => {
-    const I = E(
-      ({ children: k, ...F }, M) => /* @__PURE__ */ t(
-        se,
+  }, { ref: me } = ze({ onResize: he }), A = S >= 576, O = q(
+    (h) => A && h !== 0 && h !== i.length - 1,
+    [i, A]
+  ), ge = J(() => i.map((h, m) => {
+    const b = F(
+      ({ children: N, ...w }, M) => /* @__PURE__ */ t(
+        ce,
         {
           position: m,
-          tableWidth: T,
+          tableWidth: S,
           columnWidth: n,
-          canHide: $(m),
-          sort: o ? o(u) : void 0,
-          ...F,
+          canHide: O(m),
+          sort: l ? l(h) : void 0,
+          ...w,
           ref: M,
-          children: k
+          children: N
         }
       )
     );
-    return I.displayName = "ResponsiveThCurried", c({
-      Th: I,
-      key: `header_${u}`,
-      column: u,
+    return b.displayName = "ResponsiveThCurried", a({
+      Th: b,
+      key: `header_${h}`,
+      column: h,
       colIndex: m
     });
   }), [
-    $,
+    O,
     i,
-    o,
+    l,
     n,
-    c,
-    T
-  ]), B = L(
-    (u) => {
-      const m = E(
-        ({ children: I, ...k }, F) => /* @__PURE__ */ t(
-          U,
+    a,
+    S
+  ]), E = q(
+    (h) => {
+      const m = F(
+        ({ children: b, ...N }, w) => /* @__PURE__ */ t(
+          H,
           {
-            position: u,
-            tableWidth: T,
+            position: h,
+            tableWidth: S,
             columnWidth: n,
-            canHide: $(u),
-            ...k,
-            ref: F,
-            children: I
+            canHide: O(h),
+            ...N,
+            ref: w,
+            children: b
           }
         )
       );
       return m.displayName = "ResponsiveTdCurried", m;
     },
-    [$, n, T]
-  ), fe = j(
-    () => i.map((u, m) => B(m)),
-    [i, B]
+    [O, n, S]
+  ), ue = J(
+    () => i.map((h, m) => E(m)),
+    [i, E]
   );
-  return /* @__PURE__ */ g(
-    Be,
+  return /* @__PURE__ */ u(
+    Ve,
     {
       "aria-label": e,
       gridBreakPoint: "",
       ref: me,
-      className: W ? "" : "pf-m-grid",
-      ouiaId: N,
-      variant: O,
+      className: A ? "" : "pf-m-grid",
+      ouiaId: k,
+      variant: R,
       children: [
-        /* @__PURE__ */ t(Me, { children: /* @__PURE__ */ t(z, { children: ge }) }),
-        /* @__PURE__ */ g(je, { children: [
-          r === void 0 && /* @__PURE__ */ t(
-            qe,
+        /* @__PURE__ */ t(Be, { children: /* @__PURE__ */ t(L, { children: ge }) }),
+        /* @__PURE__ */ u(Ue, { children: [
+          o === void 0 && /* @__PURE__ */ t(
+            Je,
             {
               columns: i.length,
-              rows: h,
-              getTd: B
+              rows: g,
+              getTd: E
             }
           ),
-          r == null ? void 0 : r.map((u, m) => {
-            const I = a !== void 0 && a({ row: u, rowIndex: m }), k = s !== void 0 && s({ row: u, rowIndex: m }), F = !I && b ? () => b({ row: u, rowIndex: m }) : void 0, M = i.map((J, Q) => d({
-              Td: fe[Q],
-              key: `row_${m}_cell_${J}`,
-              column: J,
-              colIndex: Q,
+          o == null ? void 0 : o.map((h, m) => {
+            const b = s !== void 0 && s({ row: h, rowIndex: m }), N = d !== void 0 && d({ row: h, rowIndex: m }), w = !b && T ? () => T({ row: h, rowIndex: m }) : void 0, M = i.map((z, K) => r({
+              Td: ue[K],
+              key: `row_${m}_cell_${z}`,
+              column: z,
+              colIndex: K,
               rowIndex: m,
-              row: u
-            })), ve = !I && l && /* @__PURE__ */ t(
-              U,
+              row: h
+            })), fe = !b && c && /* @__PURE__ */ t(
+              H,
               {
                 position: i.length,
-                tableWidth: T,
+                tableWidth: S,
                 columnWidth: n,
                 canHide: !1,
                 isActionCell: !0,
-                "data-testid": x ? x({ row: u, rowIndex: m }) : `actions-for-row-${m}`,
-                children: l({ rowIndex: m, row: u, ActionsColumn: Ue })
+                "data-testid": D ? D({ row: h, rowIndex: m }) : `actions-for-row-${m}`,
+                children: c({ rowIndex: m, row: h, ActionsColumn: Ge })
               }
             );
-            return /* @__PURE__ */ g(
-              he,
+            return /* @__PURE__ */ u(
+              se,
               {
-                isDeleted: I,
-                isSelected: k,
-                onClick: F,
-                rowOuiaId: S == null ? void 0 : S({ row: u, rowIndex: m }),
+                isDeleted: b,
+                isSelected: N,
+                onClick: w,
+                rowOuiaId: C == null ? void 0 : C({ row: h, rowIndex: m }),
                 children: [
                   M,
-                  ve
+                  fe
                 ]
               },
               `row_${m}`
             );
           }),
-          (r == null ? void 0 : r.length) === 0 && /* @__PURE__ */ t(z, { children: /* @__PURE__ */ t(q, { colSpan: i.length, children: p }) })
+          (o == null ? void 0 : o.length) === 0 && /* @__PURE__ */ t(L, { children: /* @__PURE__ */ t(G, { colSpan: i.length, children: I }) })
         ] })
       ]
     }
   );
-}, se = V(
-  E((e, n) => {
+}, ce = V(
+  F((e, n) => {
     const {
       tableWidth: i,
-      columnWidth: r,
-      position: c,
-      canHide: d,
-      className: l = "",
-      children: o,
-      ...a
-    } = e, s = d && i < r * (c + 1) ? "pf-m-hidden" : "pf-m-visible";
+      columnWidth: o,
+      position: a,
+      canHide: r,
+      className: c = "",
+      children: l,
+      ...s
+    } = e, d = r && i < o * (a + 1) ? "pf-m-hidden" : "pf-m-visible";
     return /* @__PURE__ */ t(
       We,
       {
         ref: n,
-        className: `${s} ${l}`,
-        ...a,
-        children: o
+        className: `${d} ${c}`,
+        ...s,
+        children: l
       }
     );
   })
 );
-se.displayName = "ResponsiveTh";
-const U = V(
-  E((e, n) => {
+ce.displayName = "ResponsiveTh";
+const H = V(
+  F((e, n) => {
     const {
       tableWidth: i,
-      columnWidth: r,
-      position: c,
-      canHide: d,
-      className: l = "",
-      children: o,
-      ...a
-    } = e, s = d && i < r * (c + 1) ? "pf-m-hidden" : "pf-m-visible";
+      columnWidth: o,
+      position: a,
+      canHide: r,
+      className: c = "",
+      children: l,
+      ...s
+    } = e, d = r && i < o * (a + 1) ? "pf-m-hidden" : "pf-m-visible";
     return /* @__PURE__ */ t(
-      q,
+      G,
       {
         ref: n,
-        className: `${s} ${l}`,
-        ...a,
-        children: o
+        className: `${d} ${c}`,
+        ...s,
+        children: l
       }
     );
   })
 );
-U.displayName = "ResponsiveTd";
-const he = V(
-  ({ isDeleted: e, isSelected: n, onClick: i, children: r, rowOuiaId: c }) => /* @__PURE__ */ t(
-    z,
+H.displayName = "ResponsiveTd";
+const se = V(
+  ({ isDeleted: e, isSelected: n, onClick: i, children: o, rowOuiaId: a }) => /* @__PURE__ */ t(
+    L,
     {
-      onRowClick: (d) => {
-        (d == null ? void 0 : d.target) instanceof HTMLElement && (["a", "button"].includes(d.target.tagName.toLowerCase()) || i && i());
+      onRowClick: (r) => {
+        (r == null ? void 0 : r.target) instanceof HTMLElement && (["a", "button"].includes(r.target.tagName.toLowerCase()) || i && i());
       },
-      ouiaId: c,
+      ouiaId: a,
       isRowSelected: n,
       className: e ? "mas--ResponsiveTable__Tr--deleted" : void 0,
-      "data-testid": [n && "row-selected", e && "row-deleted"].filter((d) => !!d).join(" "),
+      "data-testid": [n && "row-selected", e && "row-deleted"].filter((r) => !!r).join(" "),
       role: "row",
-      children: r
+      children: o
     }
   )
 );
-he.displayName = "DeletableRow";
-const Je = ({ label: e, onSearch: n }) => {
-  const i = (r, c, d) => {
-    n(c);
+se.displayName = "DeletableRow";
+const Qe = ({ label: e, onSearch: n }) => {
+  const i = (o, a, r) => {
+    n(a);
   };
   return /* @__PURE__ */ t(
-    Le,
+    xe,
     {
       placeholder: `Filter by ${e}`,
       onSearch: i
     }
   );
 };
-function ne({
+function ee({
   options: e,
   value: n,
   onChange: i,
-  ouiaId: r
+  ouiaId: o
 }) {
-  const [c, d] = v(!1);
+  const [a, r] = v(!1);
   return /* @__PURE__ */ t(
-    G,
+    B,
     {
-      toggle: (o) => /* @__PURE__ */ t(
-        H,
+      toggle: (l) => /* @__PURE__ */ t(
+        $,
         {
-          ref: o,
-          onClick: () => d((a) => !a),
-          isExpanded: c,
+          ref: l,
+          onClick: () => r((s) => !s),
+          isExpanded: a,
           variant: "plain",
-          children: /* @__PURE__ */ t(ce, {})
+          children: /* @__PURE__ */ t(ae, {})
         }
       ),
       "aria-label": "table:select_filter",
       selected: n,
-      isOpen: c,
-      onSelect: (o, a) => {
-        i(a), d(!1);
+      isOpen: a,
+      onSelect: (l, s) => {
+        i(s), r(!1);
       },
-      ouiaId: r,
-      children: /* @__PURE__ */ t($e, { children: e.map((o, a) => /* @__PURE__ */ t(K, { value: o, children: o }, a)) })
+      ouiaId: o,
+      children: /* @__PURE__ */ t($e, { children: e.map((l, s) => /* @__PURE__ */ t(U, { value: l, children: l }, s)) })
     }
   );
 }
-function Qe({
+function Xe({
   label: e,
   chips: n,
   options: i,
-  onToggle: r
+  onToggle: o
 }) {
-  const [c, d] = v(!1);
+  const [a, r] = v(!1);
   return /* @__PURE__ */ t(
-    G,
+    B,
     {
       "aria-label": e,
-      onSelect: (l, o) => {
-        r(o);
+      onSelect: (c, l) => {
+        o(l);
       },
       selected: n,
-      isOpen: c,
-      toggle: (l) => /* @__PURE__ */ t(
-        H,
+      isOpen: a,
+      toggle: (c) => /* @__PURE__ */ t(
+        $,
         {
-          ref: l,
-          onClick: () => d((o) => !o),
-          isExpanded: c,
+          ref: c,
+          onClick: () => r((l) => !l),
+          isExpanded: a,
           style: {
             width: "200px"
           },
           children: `Filter by ${e}`
         }
       ),
-      children: Object.entries(i).map(([l, o]) => /* @__PURE__ */ t(K, { value: l, hasCheckbox: !0, children: o }, l))
+      children: Object.entries(i).map(([c, l]) => /* @__PURE__ */ t(U, { value: c, hasCheckbox: !0, children: l }, c))
     }
   );
 }
-function mt({ filters: e, breakpoint: n = "md" }) {
-  const i = Object.keys(e), [r, c] = v(i[0]), d = (l, o) => {
-    switch (o.type) {
+function pt({ filters: e, breakpoint: n = "md" }) {
+  const i = Object.keys(e), [o, a] = v(i[0]), r = (c, l) => {
+    switch (l.type) {
       case "search":
         return /* @__PURE__ */ t(
-          Je,
+          Qe,
           {
-            onSearch: o.onSearch,
-            label: l,
-            validate: o.validate,
-            errorMessage: o.errorMessage
+            onSearch: l.onSearch,
+            label: c,
+            validate: l.validate,
+            errorMessage: l.errorMessage
           }
         );
       case "checkbox":
         return /* @__PURE__ */ t(
-          Qe,
+          Xe,
           {
-            chips: o.chips,
-            options: o.options,
-            onToggle: o.onToggle,
-            label: l
+            chips: l.chips,
+            options: l.options,
+            onToggle: l.onToggle,
+            label: c
           }
         );
     }
   };
-  return /* @__PURE__ */ g(ie, { children: [
+  return /* @__PURE__ */ u(W, { children: [
     /* @__PURE__ */ t(
-      De,
+      ke,
       {
         variant: "search-filter",
         visibility: { default: "hidden", [n]: "visible" },
         "data-testid": "large-viewport-toolbar",
-        children: /* @__PURE__ */ g(Ee, { children: [
+        children: /* @__PURE__ */ u(Re, { children: [
           i.length > 1 && /* @__PURE__ */ t(
-            ne,
+            ee,
             {
               options: i,
-              value: r,
-              onChange: c,
+              value: o,
+              onChange: a,
               ouiaId: "chip-filter-selector-large-viewport"
             }
           ),
-          d(r, e[r])
+          r(o, e[o])
         ] })
       }
     ),
     /* @__PURE__ */ t(
-      ze,
+      Pe,
       {
-        toggleIcon: /* @__PURE__ */ t(ce, {}),
+        toggleIcon: /* @__PURE__ */ t(ae, {}),
         breakpoint: n,
         visibility: { default: "visible", [n]: "hidden" },
-        children: /* @__PURE__ */ g(Pe, { variant: "filter-group", children: [
+        children: /* @__PURE__ */ u(Ae, { variant: "filter-group", children: [
           i.length > 1 && /* @__PURE__ */ t(
-            ne,
+            ee,
             {
               options: i,
-              value: r,
-              onChange: c,
+              value: o,
+              onChange: a,
               ouiaId: "chip-filter-selector-small-viewport"
             }
           ),
-          Object.entries(e).map(([l, o], a) => /* @__PURE__ */ t(
-            Ae,
+          Object.entries(e).map(([c, l], s) => /* @__PURE__ */ t(
+            Ee,
             {
-              chips: o.type === "checkbox" ? o.chips.map((s) => ({ key: s, node: o.options[s] })) : o.chips,
-              deleteChip: (s, h) => o.onRemoveChip(typeof h == "string" ? h : h.key),
-              deleteChipGroup: o.onRemoveGroup,
-              categoryName: l,
-              showToolbarItem: l === r,
-              children: l === r && d(l, o)
+              chips: l.type === "checkbox" ? l.chips.map((d) => ({ key: d, node: l.options[d] })) : l.chips,
+              deleteChip: (d, g) => l.onRemoveChip(typeof g == "string" ? g : g.key),
+              deleteChipGroup: l.onRemoveGroup,
+              categoryName: c,
+              showToolbarItem: c === o,
+              children: c === o && r(c, l)
             },
-            a
+            s
           ))
         ] })
       }
@@ -715,25 +653,28 @@ function mt({ filters: e, breakpoint: n = "md" }) {
   ] });
 }
 export {
-  at as AppAboutModal,
-  mt as ChipFilter,
-  he as DeletableRow,
-  Qe as FilterCheckbox,
-  Je as FilterSearch,
-  ne as FilterSelector,
-  C as If,
-  nt as IfNotEmpty,
-  P as IfNotLoading,
-  it as ListWithToolbar,
-  st as Loading,
-  rt as ObjectDropdown,
-  ot as ObjectSelect,
-  ht as Pagination,
-  ct as PleaseWaitModal,
-  dt as ProgressModal,
-  ut as ResponsiveTable,
-  U as ResponsiveTd,
-  se as ResponsiveTh,
-  qe as TableSkeleton,
-  lt as UrlUpload
+  mt as AppAboutModal,
+  pt as ChipFilter,
+  Ke as DateTime,
+  se as DeletableRow,
+  Xe as FilterCheckbox,
+  Qe as FilterSearch,
+  ee as FilterSelector,
+  lt as FromNow,
+  y as If,
+  at as IfNotEmpty,
+  _ as IfNotLoading,
+  rt as ListWithToolbar,
+  ft as Loading,
+  ct as ObjectDropdown,
+  st as ObjectSelect,
+  vt as Pagination,
+  gt as PleaseWaitModal,
+  ut as ProgressModal,
+  bt as ResponsiveTable,
+  H as ResponsiveTd,
+  ce as ResponsiveTh,
+  Je as TableSkeleton,
+  dt as ToggleIcon,
+  ht as UrlUpload
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@apicurio/common-ui-components",
   "private": false,
-  "version": "1.0.6",
+  "version": "1.0.8",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",