@rafal.lemieszewski/tide-ui 0.85.1 → 0.87.0

package/dist/es/components/product/view-mode-menu.js

@@ -1,34 +1,35 @@
-import { jsxs as s, jsx as n, Fragment as v } from "react/jsx-runtime";
-import { forwardRef as ne, useState as V, useImperativeHandle as le, useEffect as T } from "react";
-import { Button as se } from "../fundamental/button.js";
-import { DropdownMenu as re, DropdownMenuTrigger as ie, DropdownMenuContent as te, DropdownMenuSeparator as F } from "../fundamental/dropdown-menu.js";
+import { jsxs as s, jsx as l, Fragment as v } from "react/jsx-runtime";
+import { forwardRef as se, useState as F, useImperativeHandle as ie, useEffect as L } from "react";
+import { Button as te } from "../fundamental/button.js";
+import { DropdownMenu as re, DropdownMenuTrigger as ae, DropdownMenuContent as oe, DropdownMenuSeparator as A } from "../fundamental/dropdown-menu.js";
 import { Select as d, SelectTrigger as h, SelectValue as u, SelectContent as m, SelectItem as a } from "../fundamental/select.js";
-import { Toggle as ae } from "../fundamental/toggle.js";
-import { Tabs as oe, TabsList as ce, TabsTrigger as y } from "../fundamental/tabs.js";
-import { Switch as de } from "../fundamental/switch.js";
-import { Label as he } from "../fundamental/label.js";
-import { Icon as w } from "../fundamental/icon.js";
-import { Input as ue } from "../fundamental/input.js";
-function me(i) {
-  if (!i) return null;
+import { Toggle as ce } from "../fundamental/toggle.js";
+import { Tabs as de, TabsList as he, TabsTrigger as D } from "../fundamental/tabs.js";
+import { Switch as ue } from "../fundamental/switch.js";
+import { Label as me } from "../fundamental/label.js";
+import { Icon as b } from "../fundamental/icon.js";
+import { ArrowDownNarrowWide as y, ArrowDownWideNarrow as M } from "lucide-react";
+import { Input as ge } from "../fundamental/input.js";
+function pe(t) {
+  if (!t) return null;
   try {
-    const c = localStorage.getItem(i);
+    const c = localStorage.getItem(t);
     return c ? JSON.parse(c) : null;
   } catch {
     return null;
   }
 }
-function ge(i, c) {
-  if (i)
+function fe(t, c) {
+  if (t)
     try {
-      localStorage.setItem(i, JSON.stringify(c));
+      localStorage.setItem(t, JSON.stringify(c));
     } catch (g) {
       console.warn("Failed to save settings to localStorage:", g);
     }
 }
-function L(i = "table", c = []) {
+function W(t = "table", c = []) {
   return {
-    viewMode: i,
+    viewMode: t,
     table: {
       sortDirection: "asc",
       visibleColumns: c.map((g) => g.id)
@@ -43,11 +44,11 @@ function L(i = "table", c = []) {
     }
   };
 }
-function M(i) {
-  if (i?.directionOptions)
-    return i.directionOptions;
-  if (i?.dataType)
-    switch (i.dataType) {
+function z(t) {
+  if (t?.directionOptions)
+    return t.directionOptions;
+  if (t?.dataType)
+    switch (t.dataType) {
       case "text":
         return { asc: "A to Z", desc: "Z to A" };
       case "number":
@@ -59,144 +60,144 @@ function M(i) {
     }
   return { asc: "Ascending", desc: "Descending" };
 }
-const pe = ne(
+const ve = se(
   function({
     persistenceKey: c,
     defaultViewMode: g = "table",
-    sortableColumns: C = [],
-    groupableColumns: D = [],
+    sortableColumns: w = [],
+    groupableColumns: V = [],
     columns: p = [],
     columnsSortableColumns: x,
     columnsGroupableColumns: f,
-    foldersSortableColumns: b,
+    foldersSortableColumns: C,
     align: O = "end",
     triggerClassName: R
   }, j) {
-    const [r, t] = V(() => {
-      const e = me(c);
-      return e || L(g, p);
-    }), [N, A] = V("");
-    le(j, () => ({
-      getSettings: () => r,
+    const [i, r] = F(() => {
+      const e = pe(c);
+      return e || W(g, p);
+    }), [N, I] = F("");
+    ie(j, () => ({
+      getSettings: () => i,
       reset: () => {
-        t(L(g, p));
+        r(W(g, p));
       }
-    })), T(() => {
-      ge(c, r);
-    }, [r, c]), T(() => {
-      r.viewMode === "columns" && !r.columns.groupColumn && f && f.length > 0 && t((e) => ({
+    })), L(() => {
+      fe(c, i);
+    }, [i, c]), L(() => {
+      i.viewMode === "columns" && !i.columns.groupColumn && f && f.length > 0 && r((e) => ({
         ...e,
         columns: {
           ...e.columns,
           groupColumn: f[0].id
         }
       }));
-    }, [r.viewMode, r.columns.groupColumn, f]);
-    const W = C.length > 0, I = D.length > 0, P = p.length > 0, J = (x?.length ?? 0) > 0, S = (f?.length ?? 0) > 0, z = (b?.length ?? 0) > 0, Z = 1 + (z ? 1 : 0) + (S ? 1 : 0) > 1, B = N ? p.filter(
+    }, [i.viewMode, i.columns.groupColumn, f]);
+    const P = w.length > 0, J = V.length > 0, Z = p.length > 0, B = (x?.length ?? 0) > 0, S = (f?.length ?? 0) > 0, T = (C?.length ?? 0) > 0, E = 1 + (T ? 1 : 0) + (S ? 1 : 0) > 1, G = N ? p.filter(
       (e) => e.label.toLowerCase().includes(N.toLowerCase())
-    ) : p, E = p.length >= 20, G = (e) => {
-      t((l) => ({ ...l, viewMode: e }));
-    }, H = (e) => {
-      t((l) => ({
-        ...l,
-        table: { ...l.table, sortColumn: e }
+    ) : p, H = p.length >= 20, k = (e) => {
+      r((n) => ({ ...n, viewMode: e }));
+    }, q = (e) => {
+      r((n) => ({
+        ...n,
+        table: { ...n.table, sortColumn: e }
       }));
-    }, k = (e) => {
-      t((l) => ({
-        ...l,
-        table: { ...l.table, sortDirection: e }
+    }, Q = (e) => {
+      r((n) => ({
+        ...n,
+        table: { ...n.table, sortDirection: e }
       }));
-    }, q = (e) => {
-      t((l) => ({
-        ...l,
-        table: { ...l.table, groupColumn: e === "none" ? void 0 : e }
+    }, U = (e) => {
+      r((n) => ({
+        ...n,
+        table: { ...n.table, groupColumn: e === "none" ? void 0 : e }
       }));
-    }, Q = (e, l) => {
-      t((o) => ({
+    }, X = (e, n) => {
+      r((o) => ({
         ...o,
         table: {
           ...o.table,
-          visibleColumns: l ? [...o.table.visibleColumns, e] : o.table.visibleColumns.filter((ee) => ee !== e)
+          visibleColumns: n ? [...o.table.visibleColumns, e] : o.table.visibleColumns.filter((ne) => ne !== e)
         }
       }));
-    }, U = (e) => {
-      t((l) => ({
-        ...l,
-        columns: { ...l.columns, sortColumn: e }
-      }));
-    }, X = (e) => {
-      t((l) => ({
-        ...l,
-        columns: { ...l.columns, sortDirection: e }
-      }));
     }, Y = (e) => {
-      t((l) => ({
-        ...l,
-        columns: { ...l.columns, groupColumn: e === "none" ? void 0 : e }
+      r((n) => ({
+        ...n,
+        columns: { ...n.columns, sortColumn: e }
       }));
     }, _ = (e) => {
-      t((l) => ({
-        ...l,
-        folders: { ...l.folders, sortColumn: e }
+      r((n) => ({
+        ...n,
+        columns: { ...n.columns, sortDirection: e }
       }));
     }, $ = (e) => {
-      t((l) => ({
-        ...l,
-        folders: { ...l.folders, sortDirection: e }
+      r((n) => ({
+        ...n,
+        columns: { ...n.columns, groupColumn: e === "none" ? void 0 : e }
       }));
     }, K = (e) => {
-      t((l) => ({
-        ...l,
-        folders: { ...l.folders, showFoldersFirst: e }
+      r((n) => ({
+        ...n,
+        folders: { ...n.folders, sortColumn: e }
+      }));
+    }, ee = (e) => {
+      r((n) => ({
+        ...n,
+        folders: { ...n.folders, sortDirection: e }
+      }));
+    }, le = (e) => {
+      r((n) => ({
+        ...n,
+        folders: { ...n.folders, showFoldersFirst: e }
       }));
     };
     return /* @__PURE__ */ s(re, { children: [
-      /* @__PURE__ */ n(ie, { asChild: !0, children: /* @__PURE__ */ n(
-        se,
+      /* @__PURE__ */ l(ae, { asChild: !0, children: /* @__PURE__ */ l(
+        te,
         {
           size: "m",
           icon: "settings",
           className: R
         }
       ) }),
-      /* @__PURE__ */ s(te, { align: O, className: "w-72 max-w-[90vw]", children: [
-        Z && /* @__PURE__ */ s(v, { children: [
+      /* @__PURE__ */ s(oe, { align: O, className: "w-72 max-w-[90vw]", children: [
+        E && /* @__PURE__ */ s(v, { children: [
           /* @__PURE__ */ s("div", { className: "px-3 pt-3 pb-2", children: [
-            /* @__PURE__ */ n("h3", { className: "text-label-sm text-[var(--color-text-tertiary)] mb-2", children: "View mode" }),
-            /* @__PURE__ */ n(oe, { value: r.viewMode, onValueChange: G, children: /* @__PURE__ */ s(ce, { variant: "pilled", size: "s", fullWidth: !0, children: [
-              /* @__PURE__ */ n(y, { variant: "pilled", size: "s", fullWidth: !0, value: "table", children: "Table" }),
-              z && /* @__PURE__ */ n(y, { variant: "pilled", size: "s", fullWidth: !0, value: "folders", children: "Folders" }),
-              S && /* @__PURE__ */ n(y, { variant: "pilled", size: "s", fullWidth: !0, value: "columns", children: "Columns" })
+            /* @__PURE__ */ l("h3", { className: "text-label-sm text-[var(--color-text-tertiary)] mb-2", children: "View mode" }),
+            /* @__PURE__ */ l(de, { value: i.viewMode, onValueChange: k, children: /* @__PURE__ */ s(he, { variant: "pilled", size: "s", fullWidth: !0, children: [
+              /* @__PURE__ */ l(D, { variant: "pilled", size: "s", fullWidth: !0, value: "table", children: "Table" }),
+              T && /* @__PURE__ */ l(D, { variant: "pilled", size: "s", fullWidth: !0, value: "folders", children: "Folders" }),
+              S && /* @__PURE__ */ l(D, { variant: "pilled", size: "s", fullWidth: !0, value: "columns", children: "Columns" })
             ] }) })
           ] }),
-          /* @__PURE__ */ n(F, {})
+          /* @__PURE__ */ l(A, {})
         ] }),
         /* @__PURE__ */ s("div", { className: "p-3", children: [
-          r.viewMode === "table" && /* @__PURE__ */ s("div", { className: "space-y-4", children: [
-            W && /* @__PURE__ */ s("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ n("h4", { className: "text-label-sm text-[var(--color-text-tertiary)]", children: "Sorting" }),
+          i.viewMode === "table" && /* @__PURE__ */ s("div", { className: "space-y-4", children: [
+            P && /* @__PURE__ */ s("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ l("h4", { className: "text-label-sm text-[var(--color-text-tertiary)]", children: "Sorting" }),
               /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: [
-                /* @__PURE__ */ s(d, { value: r.table.sortColumn, onValueChange: H, children: [
-                  /* @__PURE__ */ n(h, { size: "s", children: /* @__PURE__ */ n(u, { placeholder: "Select column to sort" }) }),
-                  /* @__PURE__ */ n(m, { children: C.map((e) => /* @__PURE__ */ n(a, { value: e.id, children: e.label }, e.id)) })
+                /* @__PURE__ */ s(d, { value: i.table.sortColumn, onValueChange: q, children: [
+                  /* @__PURE__ */ l(h, { size: "s", children: /* @__PURE__ */ l(u, { placeholder: "Select column to sort" }) }),
+                  /* @__PURE__ */ l(m, { children: w.map((e) => /* @__PURE__ */ l(a, { value: e.id, children: e.label }, e.id)) })
                 ] }),
-                r.table.sortColumn && /* @__PURE__ */ s(
+                i.table.sortColumn && /* @__PURE__ */ s(
                   d,
                   {
-                    value: r.table.sortDirection,
-                    onValueChange: (e) => k(e),
+                    value: i.table.sortDirection,
+                    onValueChange: (e) => Q(e),
                     children: [
-                      /* @__PURE__ */ n(h, { size: "s", children: /* @__PURE__ */ n(u, {}) }),
-                      /* @__PURE__ */ n(m, { children: (() => {
-                        const e = C.find((o) => o.id === r.table.sortColumn), l = M(e);
+                      /* @__PURE__ */ l(h, { size: "s", children: /* @__PURE__ */ l(u, {}) }),
+                      /* @__PURE__ */ l(m, { children: (() => {
+                        const e = w.find((o) => o.id === i.table.sortColumn), n = z(e);
                         return /* @__PURE__ */ s(v, { children: [
-                          /* @__PURE__ */ n(a, { value: "asc", children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
-                            /* @__PURE__ */ n(w, { name: "arrow-down-narrow-wide", size: "s" }),
-                            /* @__PURE__ */ n("span", { children: l.asc })
+                          /* @__PURE__ */ l(a, { value: "asc", children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+                            /* @__PURE__ */ l(b, { name: y, size: "s" }),
+                            /* @__PURE__ */ l("span", { children: n.asc })
                           ] }) }),
-                          /* @__PURE__ */ n(a, { value: "desc", children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
-                            /* @__PURE__ */ n(w, { name: "arrow-down-wide-narrow", size: "s" }),
-                            /* @__PURE__ */ n("span", { children: l.desc })
+                          /* @__PURE__ */ l(a, { value: "desc", children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+                            /* @__PURE__ */ l(b, { name: M, size: "s" }),
+                            /* @__PURE__ */ l("span", { children: n.desc })
                           ] }) })
                         ] });
                       })() })
@@ -205,38 +206,38 @@ const pe = ne(
                 )
               ] })
             ] }),
-            I && /* @__PURE__ */ s("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ n("h4", { className: "text-label-sm text-[var(--color-text-tertiary)]", children: "Grouping" }),
-              /* @__PURE__ */ s(d, { value: r.table.groupColumn || "none", onValueChange: q, children: [
-                /* @__PURE__ */ n(h, { size: "s", children: /* @__PURE__ */ n(u, { placeholder: "Select column to group by" }) }),
+            J && /* @__PURE__ */ s("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ l("h4", { className: "text-label-sm text-[var(--color-text-tertiary)]", children: "Grouping" }),
+              /* @__PURE__ */ s(d, { value: i.table.groupColumn || "none", onValueChange: U, children: [
+                /* @__PURE__ */ l(h, { size: "s", children: /* @__PURE__ */ l(u, { placeholder: "Select column to group by" }) }),
                 /* @__PURE__ */ s(m, { children: [
-                  /* @__PURE__ */ n(a, { value: "none", children: "None" }),
-                  D.map((e) => /* @__PURE__ */ n(a, { value: e.id, children: e.label }, e.id))
+                  /* @__PURE__ */ l(a, { value: "none", children: "None" }),
+                  V.map((e) => /* @__PURE__ */ l(a, { value: e.id, children: e.label }, e.id))
                 ] })
               ] })
             ] }),
-            P && /* @__PURE__ */ s("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ n("h4", { className: "text-label-sm text-[var(--color-text-tertiary)]", children: "Display columns" }),
-              E && /* @__PURE__ */ n(
-                ue,
+            Z && /* @__PURE__ */ s("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ l("h4", { className: "text-label-sm text-[var(--color-text-tertiary)]", children: "Display columns" }),
+              H && /* @__PURE__ */ l(
+                ge,
                 {
                   type: "search",
                   size: "s",
                   placeholder: "Search columns...",
                   value: N,
-                  onChange: (e) => A(e.target.value)
+                  onChange: (e) => I(e.target.value)
                 }
               ),
-              /* @__PURE__ */ n("div", { className: "flex flex-wrap items-start justify-start gap-1 max-h-[190px] overflow-y-auto", children: B.map((e) => {
-                const l = r.table.visibleColumns.includes(e.id);
-                return /* @__PURE__ */ n(
-                  ae,
+              /* @__PURE__ */ l("div", { className: "flex flex-wrap items-start justify-start gap-1 max-h-[190px] overflow-y-auto", children: G.map((e) => {
+                const n = i.table.visibleColumns.includes(e.id);
+                return /* @__PURE__ */ l(
+                  ce,
                   {
                     variant: "outline",
                     size: "s",
-                    pressed: l,
+                    pressed: n,
                     onPressedChange: (o) => {
-                      Q(e.id, o);
+                      X(e.id, o);
                     },
                     children: e.label
                   },
@@ -245,37 +246,37 @@ const pe = ne(
               }) })
             ] })
           ] }),
-          r.viewMode === "folders" && b && b.length > 0 && /* @__PURE__ */ n(v, { children: /* @__PURE__ */ s("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ n("h4", { className: "text-label-sm text-[var(--color-text-tertiary)]", children: "Sorting" }),
+          i.viewMode === "folders" && C && C.length > 0 && /* @__PURE__ */ l(v, { children: /* @__PURE__ */ s("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ l("h4", { className: "text-label-sm text-[var(--color-text-tertiary)]", children: "Sorting" }),
             /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: [
               /* @__PURE__ */ s(
                 d,
                 {
-                  value: r.folders.sortColumn,
-                  onValueChange: _,
+                  value: i.folders.sortColumn,
+                  onValueChange: K,
                   children: [
-                    /* @__PURE__ */ n(h, { size: "s", children: /* @__PURE__ */ n(u, { placeholder: "Select column" }) }),
-                    /* @__PURE__ */ n(m, { children: b.map((e) => /* @__PURE__ */ n(a, { value: e.id, children: e.label }, e.id)) })
+                    /* @__PURE__ */ l(h, { size: "s", children: /* @__PURE__ */ l(u, { placeholder: "Select column" }) }),
+                    /* @__PURE__ */ l(m, { children: C.map((e) => /* @__PURE__ */ l(a, { value: e.id, children: e.label }, e.id)) })
                   ]
                 }
               ),
-              r.folders.sortColumn && /* @__PURE__ */ s(
+              i.folders.sortColumn && /* @__PURE__ */ s(
                 d,
                 {
-                  value: r.folders.sortDirection,
-                  onValueChange: (e) => $(e),
+                  value: i.folders.sortDirection,
+                  onValueChange: (e) => ee(e),
                   children: [
-                    /* @__PURE__ */ n(h, { size: "s", children: /* @__PURE__ */ n(u, {}) }),
-                    /* @__PURE__ */ n(m, { children: (() => {
-                      const e = b.find((o) => o.id === r.folders.sortColumn), l = M(e);
+                    /* @__PURE__ */ l(h, { size: "s", children: /* @__PURE__ */ l(u, {}) }),
+                    /* @__PURE__ */ l(m, { children: (() => {
+                      const e = C.find((o) => o.id === i.folders.sortColumn), n = z(e);
                       return /* @__PURE__ */ s(v, { children: [
-                        /* @__PURE__ */ n(a, { value: "asc", children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
-                          /* @__PURE__ */ n(w, { name: "arrow-down-narrow-wide", size: "s" }),
-                          /* @__PURE__ */ n("span", { children: l.asc })
+                        /* @__PURE__ */ l(a, { value: "asc", children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+                          /* @__PURE__ */ l(b, { name: y, size: "s" }),
+                          /* @__PURE__ */ l("span", { children: n.asc })
                         ] }) }),
-                        /* @__PURE__ */ n(a, { value: "desc", children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
-                          /* @__PURE__ */ n(w, { name: "arrow-down-wide-narrow", size: "s" }),
-                          /* @__PURE__ */ n("span", { children: l.desc })
+                        /* @__PURE__ */ l(a, { value: "desc", children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+                          /* @__PURE__ */ l(b, { name: M, size: "s" }),
+                          /* @__PURE__ */ l("span", { children: n.desc })
                         ] }) })
                       ] });
                     })() })
@@ -284,41 +285,41 @@ const pe = ne(
               )
             ] })
           ] }) }),
-          r.viewMode === "columns" && /* @__PURE__ */ s("div", { className: "space-y-4", children: [
+          i.viewMode === "columns" && /* @__PURE__ */ s("div", { className: "space-y-4", children: [
             S && /* @__PURE__ */ s("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ n("h4", { className: "text-label-sm text-[var(--color-text-tertiary)]", children: "Grouping" }),
-              /* @__PURE__ */ s(d, { value: r.columns.groupColumn || "none", onValueChange: Y, children: [
-                /* @__PURE__ */ n(h, { size: "s", children: /* @__PURE__ */ n(u, { placeholder: "Select column to group by" }) }),
+              /* @__PURE__ */ l("h4", { className: "text-label-sm text-[var(--color-text-tertiary)]", children: "Grouping" }),
+              /* @__PURE__ */ s(d, { value: i.columns.groupColumn || "none", onValueChange: $, children: [
+                /* @__PURE__ */ l(h, { size: "s", children: /* @__PURE__ */ l(u, { placeholder: "Select column to group by" }) }),
                 /* @__PURE__ */ s(m, { children: [
-                  /* @__PURE__ */ n(a, { value: "none", children: "None" }),
-                  f?.map((e) => /* @__PURE__ */ n(a, { value: e.id, children: e.label }, e.id))
+                  /* @__PURE__ */ l(a, { value: "none", children: "None" }),
+                  f?.map((e) => /* @__PURE__ */ l(a, { value: e.id, children: e.label }, e.id))
                 ] })
               ] })
             ] }),
-            J && /* @__PURE__ */ s("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ n("h4", { className: "text-label-sm text-[var(--color-text-tertiary)]", children: "Sorting" }),
+            B && /* @__PURE__ */ s("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ l("h4", { className: "text-label-sm text-[var(--color-text-tertiary)]", children: "Sorting" }),
               /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: [
-                /* @__PURE__ */ s(d, { value: r.columns.sortColumn, onValueChange: U, children: [
-                  /* @__PURE__ */ n(h, { size: "s", children: /* @__PURE__ */ n(u, { placeholder: "Select column to sort" }) }),
-                  /* @__PURE__ */ n(m, { children: x?.map((e) => /* @__PURE__ */ n(a, { value: e.id, children: e.label }, e.id)) })
+                /* @__PURE__ */ s(d, { value: i.columns.sortColumn, onValueChange: Y, children: [
+                  /* @__PURE__ */ l(h, { size: "s", children: /* @__PURE__ */ l(u, { placeholder: "Select column to sort" }) }),
+                  /* @__PURE__ */ l(m, { children: x?.map((e) => /* @__PURE__ */ l(a, { value: e.id, children: e.label }, e.id)) })
                 ] }),
-                r.columns.sortColumn && /* @__PURE__ */ s(
+                i.columns.sortColumn && /* @__PURE__ */ s(
                   d,
                   {
-                    value: r.columns.sortDirection,
-                    onValueChange: (e) => X(e),
+                    value: i.columns.sortDirection,
+                    onValueChange: (e) => _(e),
                     children: [
-                      /* @__PURE__ */ n(h, { size: "s", children: /* @__PURE__ */ n(u, {}) }),
-                      /* @__PURE__ */ n(m, { children: (() => {
-                        const e = x?.find((o) => o.id === r.columns.sortColumn), l = M(e);
+                      /* @__PURE__ */ l(h, { size: "s", children: /* @__PURE__ */ l(u, {}) }),
+                      /* @__PURE__ */ l(m, { children: (() => {
+                        const e = x?.find((o) => o.id === i.columns.sortColumn), n = z(e);
                         return /* @__PURE__ */ s(v, { children: [
-                          /* @__PURE__ */ n(a, { value: "asc", children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
-                            /* @__PURE__ */ n(w, { name: "arrow-down-narrow-wide", size: "s" }),
-                            /* @__PURE__ */ n("span", { children: l.asc })
+                          /* @__PURE__ */ l(a, { value: "asc", children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+                            /* @__PURE__ */ l(b, { name: y, size: "s" }),
+                            /* @__PURE__ */ l("span", { children: n.asc })
                           ] }) }),
-                          /* @__PURE__ */ n(a, { value: "desc", children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
-                            /* @__PURE__ */ n(w, { name: "arrow-down-wide-narrow", size: "s" }),
-                            /* @__PURE__ */ n("span", { children: l.desc })
+                          /* @__PURE__ */ l(a, { value: "desc", children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+                            /* @__PURE__ */ l(b, { name: M, size: "s" }),
+                            /* @__PURE__ */ l("span", { children: n.desc })
                           ] }) })
                         ] });
                       })() })
@@ -329,16 +330,16 @@ const pe = ne(
             ] })
           ] })
         ] }),
-        r.viewMode === "folders" && /* @__PURE__ */ s(v, { children: [
-          /* @__PURE__ */ n(F, {}),
-          /* @__PURE__ */ n("div", { className: "p-3", children: /* @__PURE__ */ s("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ n(he, { htmlFor: "folders-first", children: "Show folders first" }),
-            /* @__PURE__ */ n(
-              de,
+        i.viewMode === "folders" && /* @__PURE__ */ s(v, { children: [
+          /* @__PURE__ */ l(A, {}),
+          /* @__PURE__ */ l("div", { className: "p-3", children: /* @__PURE__ */ s("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ l(me, { htmlFor: "folders-first", children: "Show folders first" }),
+            /* @__PURE__ */ l(
+              ue,
               {
                 id: "folders-first",
-                checked: r.folders.showFoldersFirst,
-                onCheckedChange: K
+                checked: i.folders.showFoldersFirst,
+                onCheckedChange: le
               }
             )
           ] }) })
@@ -347,7 +348,7 @@ const pe = ne(
     ] });
   }
 );
-pe.displayName = "ViewModeMenu";
+ve.displayName = "ViewModeMenu";
 export {
-  pe as ViewModeMenu
+  ve as ViewModeMenu
 };

package/dist/types/components/core-index.d.cts

@@ -66,7 +66,7 @@ export type { TagProps, TagGroupProps, TagDotColor, TagIntent, TagVariant } from
 export { Tree } from './fundamental/tree.js';
 export type { TreeProps, TreeDataItem } from './fundamental/tree.js';
 export { Icon } from './fundamental/icon.js';
-export type { IconColor, IconSize, CustomIconName } from './fundamental/icon.js';
+export type { IconColor, IconSize, IconComponent, IconType } from './fundamental/icon.js';
 export { Kbd, KbdGroup } from './fundamental/kbd.js';
 export type { KbdProps, KbdGroupProps } from './fundamental/kbd.js';
 export { MonthPicker } from './fundamental/month-picker.js';

package/dist/types/components/core-index.d.ts

@@ -66,7 +66,7 @@ export type { TagProps, TagGroupProps, TagDotColor, TagIntent, TagVariant } from
 export { Tree } from './fundamental/tree.js';
 export type { TreeProps, TreeDataItem } from './fundamental/tree.js';
 export { Icon } from './fundamental/icon.js';
-export type { IconColor, IconSize, CustomIconName } from './fundamental/icon.js';
+export type { IconColor, IconSize, IconComponent, IconType } from './fundamental/icon.js';
 export { Kbd, KbdGroup } from './fundamental/kbd.js';
 export type { KbdProps, KbdGroupProps } from './fundamental/kbd.js';
 export { MonthPicker } from './fundamental/month-picker.js';

package/dist/types/components/fundamental/custom-icons.d.ts

@@ -1,37 +1,33 @@
 import { default as React } from 'react';
-export declare const customIcons: {
-    readonly "chart-marker-bar": import("react/jsx-runtime").JSX.Element;
-    readonly "chart-marker-line": import("react/jsx-runtime").JSX.Element;
-    readonly "chart-marker-dashline": import("react/jsx-runtime").JSX.Element;
-    readonly "chart-marker-dashline2": import("react/jsx-runtime").JSX.Element;
-    readonly "chart-marker-dotline": import("react/jsx-runtime").JSX.Element;
-    readonly "chart-marker-dot": import("react/jsx-runtime").JSX.Element;
-    readonly dot: import("react/jsx-runtime").JSX.Element;
-    readonly "bubble-size": import("react/jsx-runtime").JSX.Element;
-    readonly "broken-scale": import("react/jsx-runtime").JSX.Element;
-    readonly "ship-unload": import("react/jsx-runtime").JSX.Element;
-    readonly "ship-load": import("react/jsx-runtime").JSX.Element;
-    readonly "star-full": import("react/jsx-runtime").JSX.Element;
-    readonly "user-created-by": import("react/jsx-runtime").JSX.Element;
-    readonly "user-owner": import("react/jsx-runtime").JSX.Element;
-    readonly "user-charterer": import("react/jsx-runtime").JSX.Element;
-    readonly "user-broker": import("react/jsx-runtime").JSX.Element;
-    readonly approved: import("react/jsx-runtime").JSX.Element;
-    readonly "pending-approval": import("react/jsx-runtime").JSX.Element;
-    readonly "info-filled": import("react/jsx-runtime").JSX.Element;
-    readonly "square-diamond": import("react/jsx-runtime").JSX.Element;
-    readonly "square-corner-check": import("react/jsx-runtime").JSX.Element;
-    readonly "square-corner-plus": import("react/jsx-runtime").JSX.Element;
-    readonly "square-dashed-corner-plus": import("react/jsx-runtime").JSX.Element;
-    readonly "square-dashed-chart-gantt": import("react/jsx-runtime").JSX.Element;
-    readonly "circle-dot-2": import("react/jsx-runtime").JSX.Element;
-    readonly "circle-diamond": import("react/jsx-runtime").JSX.Element;
-    readonly "circle-check-2": import("react/jsx-runtime").JSX.Element;
-    readonly "circle-dashed-arrow-up": import("react/jsx-runtime").JSX.Element;
-    readonly "circle-dashed-arrow-down": import("react/jsx-runtime").JSX.Element;
-    readonly "hexagon-minus": import("react/jsx-runtime").JSX.Element;
-    readonly "hexagon-asterisk": import("react/jsx-runtime").JSX.Element;
-    readonly "hexagon-dashed": import("react/jsx-runtime").JSX.Element;
-};
-export type CustomIconName = keyof typeof customIcons;
-export declare function addCustomIcon(name: string, iconElement: React.ReactNode): void;
+export declare const ChartMarkerBar: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export declare const ChartMarkerLine: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export declare const ChartMarkerDashline: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export declare const ChartMarkerDashline2: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export declare const ChartMarkerDotline: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export declare const ChartMarkerDot: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export declare const Dot: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export declare const BubbleSize: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export declare const BrokenScale: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export declare const ShipUnload: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export declare const ShipLoad: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export declare const StarFull: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export declare const UserCreatedBy: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export declare const UserOwner: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export declare const UserCharterer: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export declare const UserBroker: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export declare const Approved: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export declare const PendingApproval: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export declare const InfoFilled: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export declare const SquareDiamond: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export declare const SquareCornerCheck: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export declare const SquareCornerPlus: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export declare const SquareDashedCornerPlus: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export declare const SquareDashedChartGantt: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export declare const CircleDot2: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export declare const CircleDiamond: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export declare const CircleCheck2: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export declare const CircleDashedArrowUp: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export declare const CircleDashedArrowDown: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export declare const HexagonMinus: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export declare const HexagonAsterisk: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+export declare const HexagonDashed: React.ForwardRefExoticComponent<React.SVGAttributes<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;