@hortiview/shared-components 0.0.6193 → 0.0.6320

package/dist/components/AlertBanner/AlertBanner.test.js

@@ -1,5 +1,5 @@
 import { jsx as e, Fragment as m } from "react/jsx-runtime";
-import { r as t, s } from "../../react.esm-C0LtovhP.js";
+import { r as t, s } from "../../react.esm-D9-uytwS.js";
 import { u as i } from "../../useBreakpoint-DROHPVxO.js";
 import { AlertBanner as n } from "./AlertBanner.js";
 import { d as c, b as u, t as r, g as l, v as a } from "../../vi.JYQecGiw-BbUbJcT8.js";

package/dist/components/BaseView/BaseView.test.js

@@ -1,7 +1,7 @@
 import { jsx as a, Fragment as s } from "react/jsx-runtime";
 import { u as l } from "../../useBreakpoint-DROHPVxO.js";
 import { BaseView as r } from "./BaseView.js";
-import { r as i, s as e, f as p } from "../../react.esm-C0LtovhP.js";
+import { r as i, s as e, f as p } from "../../react.esm-D9-uytwS.js";
 import { d as u, b as m, t as n, g as t, v as c } from "../../vi.JYQecGiw-BbUbJcT8.js";
 u("BaseView Test", () => {
   m(() => {

package/dist/components/BasicHeading/BasicHeading.test.js

@@ -1,7 +1,7 @@
 import { jsx as o, Fragment as c } from "react/jsx-runtime";
 import { Button as g } from "@element/react-components";
 import { BasicHeading as a } from "./BasicHeading.js";
-import { r as i, s as n } from "../../react.esm-C0LtovhP.js";
+import { r as i, s as n } from "../../react.esm-D9-uytwS.js";
 import { d as h, t as s, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
 h("BasicHeading-Test", () => {
   s("render small container without content", () => {

package/dist/components/BlockView/BlockView.test.js

@@ -1,5 +1,5 @@
 import { jsx as l } from "react/jsx-runtime";
-import { r as s, s as o, f as n } from "../../react.esm-C0LtovhP.js";
+import { r as s, s as o, f as n } from "../../react.esm-D9-uytwS.js";
 import { BlockView as r } from "./BlockView.js";
 import { d as B, v as a, t as i, g as t } from "../../vi.JYQecGiw-BbUbJcT8.js";
 B("BlockView Test", () => {

package/dist/components/ContextMenu/ContextMenu.test.js

@@ -1,5 +1,5 @@
 import { jsx as m } from "react/jsx-runtime";
-import { r as d, s as n, f as o, w as a } from "../../react.esm-C0LtovhP.js";
+import { r as d, s as n, f as o, w as a } from "../../react.esm-D9-uytwS.js";
 import { ContextMenu as u } from "./ContextMenu.js";
 import { v as r, d as g, t as B, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
 const T = r.fn(), l = r.fn(), i = r.fn(), p = [

package/dist/components/DeleteModal/DeleteModal.test.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { r as c, s as e } from "../../react.esm-C0LtovhP.js";
+import { r as c, s as e } from "../../react.esm-D9-uytwS.js";
 import { DeleteModal as b } from "./DeleteModal.js";
 import { d as B, t as a, v as o, g as t } from "../../vi.JYQecGiw-BbUbJcT8.js";
 B("DeleteModal Test", () => {

package/dist/components/Disclaimer/Disclaimer.test.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import { r, s as t } from "../../react.esm-C0LtovhP.js";
+import { r, s as t } from "../../react.esm-D9-uytwS.js";
 import { Disclaimer as s } from "./Disclaimer.js";
 import { d as i, t as m, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
 i("Disclaimer test", () => {

package/dist/components/EmptyView/EmptyView.test.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { r as s, s as o, w as r, f as l } from "../../react.esm-C0LtovhP.js";
+import { r as s, s as o, w as r, f as l } from "../../react.esm-D9-uytwS.js";
 import { EmptyView as c } from "./EmptyView.js";
 import { d as h, t as T, g as e, v as d } from "../../vi.JYQecGiw-BbUbJcT8.js";
 h("EmptyView", () => {

package/dist/components/FormComponents/FormCheckBox/FormCheckBox.test.js

@@ -1,5 +1,5 @@
 import { jsx as s } from "react/jsx-runtime";
-import { r as n, s as t, f as m } from "../../../react.esm-C0LtovhP.js";
+import { r as n, s as t, f as m } from "../../../react.esm-D9-uytwS.js";
 import { FormCheckBox as c } from "./FormCheckBox.js";
 import { v as e, d as h, t as l, g as r } from "../../../vi.JYQecGiw-BbUbJcT8.js";
 const a = e.fn();

package/dist/components/FormComponents/FormDatePicker/FormDatePicker.test.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { r as s, s as o, f as m } from "../../../react.esm-C0LtovhP.js";
+import { r as s, s as o, f as m } from "../../../react.esm-D9-uytwS.js";
 import { FormDatePicker as c } from "./FormDatePicker.js";
 import { v as e, d as f, t as l, g as r } from "../../../vi.JYQecGiw-BbUbJcT8.js";
 const i = e.fn();

package/dist/components/FormComponents/FormRadio/FormRadio.test.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { r as s, s as t, f as m } from "../../../react.esm-C0LtovhP.js";
+import { r as s, s as t, f as m } from "../../../react.esm-D9-uytwS.js";
 import { FormRadio as l } from "./FormRadio.js";
 import { v as e, d as c, t as i, g as o } from "../../../vi.JYQecGiw-BbUbJcT8.js";
 const a = e.fn();

package/dist/components/FormComponents/FormSelect/FormSelect.test.js

@@ -1,5 +1,5 @@
 import { jsx as u } from "react/jsx-runtime";
-import { r as l, s as t, f as i } from "../../../react.esm-C0LtovhP.js";
+import { r as l, s as t, f as i } from "../../../react.esm-D9-uytwS.js";
 import { FormSelect as m } from "./FormSelect.js";
 import { v as n, d as g, t as d, g as e } from "../../../vi.JYQecGiw-BbUbJcT8.js";
 const p = n.fn();

package/dist/components/FormComponents/FormSlider/FormSlider.test.js

@@ -1,5 +1,5 @@
 import { jsx as s } from "react/jsx-runtime";
-import { r as a, s as n } from "../../../react.esm-C0LtovhP.js";
+import { r as a, s as n } from "../../../react.esm-D9-uytwS.js";
 import { FormSlider as l } from "./FormSlider.js";
 import { v as e, d as m, t as i, g as r } from "../../../vi.JYQecGiw-BbUbJcT8.js";
 const o = e.fn();

package/dist/components/FormComponents/FormText/FormText.test.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { r as s, s as r, f as d } from "../../../react.esm-C0LtovhP.js";
+import { r as s, s as r, f as d } from "../../../react.esm-D9-uytwS.js";
 import { FormText as o } from "./FormText.js";
 import { v as a, d as i, t as l, g as e } from "../../../vi.JYQecGiw-BbUbJcT8.js";
 const m = a.fn();

package/dist/components/GenericTable/GenericTable.d.ts

@@ -50,4 +50,4 @@ import { TableLayoutProps } from '../../types/GenericTable';
  * @param headerTranslation function that will be called to translate the headers by its key
  * @returns a table based on a given type and data
  */
-export declare const GenericTable: <T>({ data, hiddenColumns, order, cellTemplates, tableActions, noContentText, headerTranslation, pagination, getRowActions, }: TableLayoutProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const GenericTable: <T>({ data, hiddenColumns, order, cellTemplates, tableActions, noContentText, headerTranslation, pagination, getRowActions, customColumnWidth, title, }: TableLayoutProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/GenericTable/GenericTable.js

@@ -1,89 +1,98 @@
 import "../../assets/GenericTable.css";
-import { jsx as n } from "react/jsx-runtime";
-import { Elevation as h, Table as v, TableTopBar as y, Group as d, TypoSubtitle as B } from "@element/react-components";
-import { useMemo as b, Fragment as g } from "react";
-import { ContextMenu as T } from "../ContextMenu/ContextMenu.js";
-const x = "_topBar_1msoo_1", N = "_filterBar_1msoo_5", C = "_emptyTable_1msoo_9", I = "_elevation_1msoo_17", M = "_table_1msoo_22", m = {
-  topBar: x,
-  filterBar: N,
-  emptyTable: C,
-  elevation: I,
-  table: M
-}, W = (e, l) => {
-  if (!e)
+import { jsx as e, jsxs as B } from "react/jsx-runtime";
+import { Elevation as T, Table as x, TableTopBar as b, Group as _, Padding as N, TypoDisplay as j, TypoSubtitle as C } from "@element/react-components";
+import { useMemo as v, Fragment as D } from "react";
+import { ContextMenu as I } from "../ContextMenu/ContextMenu.js";
+const M = "_topBar_1msoo_1", G = "_filterBar_1msoo_5", O = "_emptyTable_1msoo_9", P = "_elevation_1msoo_17", W = "_table_1msoo_22", d = {
+  topBar: M,
+  filterBar: G,
+  emptyTable: O,
+  elevation: P,
+  table: W
+}, z = (n, l) => {
+  if (!n)
     return [];
-  let o = Object.keys(e).map((r) => r);
-  return l.length > 0 && (o = o.sort((r, u) => {
-    const p = l.findIndex((s) => s === r), i = l.findIndex((s) => s === u);
-    return p === -1 ? 1 : i === -1 ? -1 : p - i;
+  let o = Object.keys(n).map((t) => t);
+  return l.length > 0 && (o = o.sort((t, i) => {
+    const m = l.findIndex((c) => c === t), s = l.findIndex((c) => c === i);
+    return m === -1 ? 1 : s === -1 ? -1 : m - s;
   })), o;
-}, E = ({
-  data: e = [],
+}, $ = ({
+  data: n = [],
   hiddenColumns: l = [],
   order: o = [],
-  cellTemplates: r = void 0,
-  tableActions: u = [],
-  noContentText: p = "No data available",
-  headerTranslation: i = (f) => f,
-  pagination: s = !1,
-  getRowActions: c = void 0
+  cellTemplates: t = void 0,
+  tableActions: i = [],
+  noContentText: m = "No data available",
+  headerTranslation: s = (f) => f,
+  pagination: c = !1,
+  getRowActions: p = void 0,
+  customColumnWidth: h,
+  title: u
 }) => {
-  const f = b(() => {
-    if (e.length === 0)
+  const f = v(() => {
+    if (n.length === 0)
       return [];
-    const a = W(e[0], o).map((t) => ({
-      id: t,
-      header: i(t),
-      accessor: t,
-      cellTemplate: r ? r[t] : void 0
-    }));
-    return c ? [...a, { id: "actions", header: "", accessor: "actions" }] : a;
-  }, [e, r, o, i, c]), _ = b(() => c ? e.map((a) => {
-    const t = /* @__PURE__ */ n(T, { actions: c(a), iconOrientation: "horizontal" });
-    return { ...a, actions: t };
-  }) : e, [e, c]);
-  return /* @__PURE__ */ n(h, { elevation: 1, className: m.elevation, children: /* @__PURE__ */ n(
-    v,
+    const a = z(n[0], o).map((r) => {
+      const y = h ? h[r] : void 0;
+      return {
+        id: r,
+        header: s(r),
+        accessor: r,
+        cellTemplate: t ? t[r] : void 0,
+        cellProps: { width: y }
+      };
+    });
+    return p ? [...a, { id: "actions", header: "", accessor: "actions" }] : a;
+  }, [n, t, o, s, p, h]), g = v(() => p ? n.map((a) => {
+    const r = /* @__PURE__ */ e(I, { actions: p(a), iconOrientation: "horizontal" });
+    return { ...a, actions: r };
+  }) : n, [n, p]);
+  return /* @__PURE__ */ e(T, { elevation: 1, className: d.elevation, children: /* @__PURE__ */ e(
+    x,
     {
-      className: m.table,
+      className: d.table,
       fullWidth: !0,
       alwaysUseDivTags: !0,
       layout: "standard",
       hiddenColumns: l,
-      data: _,
+      data: g,
       columns: f,
-      leadingContent: u.length > 0 && /* @__PURE__ */ n(
-        y,
+      leadingContent: u && i.length === 0 ? /* @__PURE__ */ e(b, { title: u }) : i.length > 0 && /* @__PURE__ */ e(
+        b,
         {
-          className: m.topBar,
-          filterBar: /* @__PURE__ */ n(
-            d,
-            {
-              className: m.filterBar,
-              fullWidth: !0,
-              primaryAlign: "center",
-              secondaryAlign: "center",
-              children: u.map((a, t) => /* @__PURE__ */ n(g, { children: a }, `action_${t}`))
-            }
-          )
+          className: d.topBar,
+          filterBar: /* @__PURE__ */ B(_, { fullWidth: !0, direction: "vertical", gap: "none", children: [
+            u && /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e(j, { level: 6, children: u }) }),
+            /* @__PURE__ */ e(
+              _,
+              {
+                className: d.filterBar,
+                fullWidth: !0,
+                primaryAlign: "center",
+                secondaryAlign: "center",
+                children: i.map((a, r) => /* @__PURE__ */ e(D, { children: a }, `action_${r}`))
+              }
+            )
+          ] })
         }
       ),
-      paginated: s,
+      paginated: c,
       sortable: !0,
       noContentIncludeTable: !!f,
-      noContentMessage: /* @__PURE__ */ n(
-        d,
+      noContentMessage: /* @__PURE__ */ e(
+        _,
         {
           fullWidth: !0,
           primaryAlign: "center",
           secondaryAlign: "center",
-          className: m.emptyTable,
-          children: /* @__PURE__ */ n(B, { children: p })
+          className: d.emptyTable,
+          children: /* @__PURE__ */ e(C, { children: m })
         }
       )
     }
   ) });
 };
 export {
-  E as GenericTable
+  $ as GenericTable
 };

package/dist/components/GenericTable/GenericTable.test.js

@@ -1,40 +1,71 @@
-import { jsx as o, jsxs as B } from "react/jsx-runtime";
-import { r as d, s as t } from "../../react.esm-C0LtovhP.js";
+import { jsx as a, jsxs as u } from "react/jsx-runtime";
+import { r as i, s as e } from "../../react.esm-D9-uytwS.js";
 import { GenericTable as c } from "./GenericTable.js";
-import { d as u, t as i, g as e, v as m } from "../../vi.JYQecGiw-BbUbJcT8.js";
-u("GenericTable Test", () => {
-  const T = [];
-  i("render GenericTable with custom no content text", () => {
-    d(/* @__PURE__ */ o(c, { data: T, noContentText: "noContent" })), e(t.getByText("noContent")).toBeInTheDocument();
-  }), i("render GenericTable with data should render headers", () => {
-    d(/* @__PURE__ */ o(c, { data: [{ id: 1, name: "test" }] })), e(t.getByText("id")).toBeInTheDocument(), e(t.getByText("name")).toBeInTheDocument();
-  }), i("render GenericTable with hidden headers", () => {
-    d(/* @__PURE__ */ o(c, { data: [{ id: 1, name: "test" }], hiddenColumns: ["name"] })), e(t.getByText("id")).toBeInTheDocument(), e(t.queryByText("name")).not.toBeInTheDocument();
-  }), i("render GenericTable with custom header translation", () => {
-    d(/* @__PURE__ */ o(c, { data: [{ id: 1, name: "test" }], headerTranslation: (a) => a + ".translated" })), e(t.getByText("id.translated")).toBeInTheDocument(), e(t.getByText("name.translated")).toBeInTheDocument();
-  }), i("render GenericTable with custom cell template", () => {
-    d(/* @__PURE__ */ o(c, { data: [{ id: 1, name: "test" }], cellTemplates: { id: (a) => /* @__PURE__ */ B("div", { children: [
-      "label: ",
-      a.row.original.id
-    ] }) } })), e(t.getByText("label: 1")).toBeInTheDocument();
-  }), i("render GenericTable with custom table actions", () => {
-    const n = m.fn();
-    d(/* @__PURE__ */ o(c, { data: [{ id: 1, name: "test" }], tableActions: [/* @__PURE__ */ o("button", { "data-testid": "testButton", onClick: n, children: "testbutton" }, "test")] })), e(t.getByText("testbutton")).toBeInTheDocument(), t.getByTestId("testButton").click(), e(n).toHaveBeenCalled();
-  }), i("render GenericTable with custom pagination", () => {
-    d(/* @__PURE__ */ o(c, { data: [{ id: 1, name: "test" }, { id: 2, name: "test2" }, { id: 3, name: "test3" }], pagination: !0 })), e(t.getByText("1 - 3 of 3")).toBeInTheDocument(), e(t.getByText("last_page")).toBeInTheDocument();
-  }), i("render GenericTable with custom getRowActions", () => {
-    const n = [{ id: 1, name: "test" }], a = m.fn();
-    d(/* @__PURE__ */ o(c, { data: n, getRowActions: (l) => [
+import { d as B, t as d, g as t, v as r } from "../../vi.JYQecGiw-BbUbJcT8.js";
+B("GenericTable Test", () => {
+  const m = [];
+  d("render GenericTable with custom no content text", () => {
+    i(/* @__PURE__ */ a(c, { data: m, noContentText: "noContent" })), t(e.getByText("noContent")).toBeInTheDocument();
+  }), d("render GenericTable with data should render headers", () => {
+    i(/* @__PURE__ */ a(c, { data: [{ id: 1, name: "test" }] })), t(e.getByText("id")).toBeInTheDocument(), t(e.getByText("name")).toBeInTheDocument();
+  }), d("render GenericTable with hidden headers", () => {
+    i(/* @__PURE__ */ a(c, { data: [{ id: 1, name: "test" }], hiddenColumns: ["name"] })), t(e.getByText("id")).toBeInTheDocument(), t(e.queryByText("name")).not.toBeInTheDocument();
+  }), d("render GenericTable with custom header translation", () => {
+    i(/* @__PURE__ */ a(c, { data: [{ id: 1, name: "test" }], headerTranslation: (o) => o + ".translated" })), t(e.getByText("id.translated")).toBeInTheDocument(), t(e.getByText("name.translated")).toBeInTheDocument();
+  }), d("render GenericTable with custom cell template", () => {
+    i(
+      /* @__PURE__ */ a(
+        c,
+        {
+          data: [{ id: 1, name: "test" }],
+          cellTemplates: { id: (o) => /* @__PURE__ */ u("div", { children: [
+            "label: ",
+            o.row.original.id
+          ] }) }
+        }
+      )
+    ), t(e.getByText("label: 1")).toBeInTheDocument();
+  }), d("render GenericTable with custom table actions", () => {
+    const n = r.fn();
+    i(/* @__PURE__ */ a(c, { data: [{ id: 1, name: "test" }], tableActions: [
+      /* @__PURE__ */ a("button", { "data-testid": "testButton", onClick: n, children: "testbutton" }, "test")
+    ] })), t(e.getByText("testbutton")).toBeInTheDocument(), e.getByTestId("testButton").click(), t(n).toHaveBeenCalled();
+  }), d("render GenericTable with custom pagination", () => {
+    i(/* @__PURE__ */ a(c, { data: [
+      { id: 1, name: "test" },
+      { id: 2, name: "test2" },
+      { id: 3, name: "test3" }
+    ], pagination: !0 })), t(e.getByText("1 - 3 of 3")).toBeInTheDocument(), t(e.getByText("last_page")).toBeInTheDocument();
+  }), d("render GenericTable with custom getRowActions", () => {
+    const n = [{ id: 1, name: "test" }], o = r.fn();
+    i(/* @__PURE__ */ a(c, { data: n, getRowActions: (T) => [
       {
         primaryText: "primText",
         secondaryText: "secText",
-        onClick: () => a(l.id),
+        onClick: () => o(T.id),
         leadingBlock: "edit"
       }
-    ] })), e(t.getByText("primText")).toBeInTheDocument(), t.getByText("primText").click(), e(a).toHaveBeenCalledWith(1);
-  }), i("render GenericTable with custom order", () => {
-    d(/* @__PURE__ */ o(c, { data: [{ id: 1, name: "test", age: 20 }], order: ["name", "age"] }));
-    const a = t.getByText("id"), r = t.getByText("name"), s = t.getByText("age");
-    e(r).toBeInTheDocument(), e(s).toBeInTheDocument(), e(a).toBeInTheDocument(), e(r.compareDocumentPosition(s)).toBe(4), e(s.compareDocumentPosition(a)).toBe(4);
+    ] })), t(e.getByText("primText")).toBeInTheDocument(), e.getByText("primText").click(), t(o).toHaveBeenCalledWith(1);
+  }), d("render GenericTable with custom order", () => {
+    i(/* @__PURE__ */ a(c, { data: [{ id: 1, name: "test", age: 20 }], order: ["name", "age"] }));
+    const o = e.getByText("id"), s = e.getByText("name"), l = e.getByText("age");
+    t(s).toBeInTheDocument(), t(l).toBeInTheDocument(), t(o).toBeInTheDocument(), t(s.compareDocumentPosition(l)).toBe(4), t(l.compareDocumentPosition(o)).toBe(4);
+  }), d("render GenericTable with custom columnWidth in pixel", () => {
+    i(
+      /* @__PURE__ */ a(c, { data: [{ id: 1, name: "test", age: 20 }], customColumnWidth: { id: 200, name: 200, age: 200 } })
+    );
+    const s = e.getAllByRole("cell")[0].getAttribute("width");
+    t(s).toBe("200");
+  }), d("render GenericTable with custom columnWidth in percent", () => {
+    i(/* @__PURE__ */ a(c, { data: [{ id: 1, name: "test" }], customColumnWidth: { id: "50%", name: "50%" } }));
+    const s = e.getAllByRole("cell")[0].getAttribute("width");
+    t(s).toBe("50%");
+  }), d("render GenericTable with title", () => {
+    i(/* @__PURE__ */ a(c, { data: [{ id: 1, name: "test" }], title: "test-title" })), t(e.getByText("test-title")).toBeInTheDocument();
+  }), d("render GenericTable with title and table actions", () => {
+    const n = r.fn();
+    i(/* @__PURE__ */ a(c, { data: [{ id: 1, name: "test" }], title: "test-title", tableActions: [
+      /* @__PURE__ */ a("button", { "data-testid": "testButton", onClick: n, children: "test-button" }, "test")
+    ] })), t(e.getByText("test-title")).toBeInTheDocument(), t(e.getByText("test-button")).toBeInTheDocument(), e.getByTestId("testButton").click(), t(n).toHaveBeenCalled();
   });
 });

package/dist/components/HashTabView/HashTabView.test.js

@@ -1,5 +1,5 @@
 import { jsx as n, Fragment as o } from "react/jsx-runtime";
-import { r as a, s as e, f as r } from "../../react.esm-C0LtovhP.js";
+import { r as a, s as e, f as r } from "../../react.esm-D9-uytwS.js";
 import { HashTabView as c } from "./HashTabView.js";
 import { d as h, t as l, g as t } from "../../vi.JYQecGiw-BbUbJcT8.js";
 const m = [

package/dist/components/HeaderFilter/HeaderFilter.test.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { r as i, s as t, f as T } from "../../react.esm-C0LtovhP.js";
+import { r as i, s as t, f as T } from "../../react.esm-D9-uytwS.js";
 import { HeaderFilter as s } from "./HeaderFilter.js";
 import { d as c, t as o, v as l, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
 c("HeaderFilter-Test", () => {

package/dist/components/Iconify/Iconify.d.ts

@@ -18,7 +18,7 @@ export type IconifyProps = {
  * @example <Iconify icon='farm' />
  * @returns
  */
-export declare const Iconify: React.FC<IconifyProps>;
+export declare const Iconify: ({ icon: iconName, pure, ...props }: IconifyProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * A component that renders an icon from the available custom icons.
  * @param icon The icon to display. The available icons are listed in the {@link AvailableCustomIcons} enum.