@grasp-labs/ds-microfrontends-integration 1.0.2 → 1.1.0

package/dist/{index.esm-fQDYRCEr-Bu5aF9wZ.js → index.esm-nnN6KjKn-Bmc4Yh9P.js}

@@ -1,9 +1,9 @@
-import { O as o } from "./index-BoXm28ra.js";
-import { useState as J, useEffect as De, createContext as Zt, useRef as ce, useContext as Gt, useMemo as le, useCallback as Re } from "react";
-const $e = (e, t, n, r, a) => {
+import { C as o } from "./index-BL3nv8aS.js";
+import { useState as J, useEffect as De, useRef as ce, useMemo as le, useCallback as Re, createContext as Zt, useContext as Gt } from "react";
+const Be = (e, t, n, r, a) => {
   if (!r) throw new Error(a ?? `Invalid property path: ${t}
 Couldn't access "${n}" in ${JSON.stringify(e)}`);
-}, Bt = (e) => typeof e == "object" && e !== null && !Array.isArray(e), gt = (e) => Array.isArray(e), Qt = (e, t) => e.filter(((n, r) => r !== t)), wn = (e, t, n, r = {}) => {
+}, $t = (e) => typeof e == "object" && e !== null && !Array.isArray(e), gt = (e) => Array.isArray(e), Qt = (e, t) => e.filter(((n, r) => r !== t)), wn = (e, t, n, r = {}) => {
   const { remove: a = !1, createNew: i = !0, noError: s = !1 } = r, p = e, d = typeof (l = t) == "string" ? l : typeof l == "number" ? String(l) : l.reduce(((h, f) => typeof f == "number" ? `${h}[${f}]` : h === "" ? f : `${h}.${f}`), "");
   var l;
   const u = Object.assign(Object.assign({}, r), { remove: a, createNew: i, noError: s, fullData: p, fullPath: d }), c = Array.isArray(t) ? t : ((h) => Array.isArray(h) ? h : h.split(/(\.|\[\d+\])/).filter(((f) => f !== "." && f !== "")).map(((f) => {
@@ -12,22 +12,22 @@ Couldn't access "${n}" in ${JSON.stringify(e)}`);
   })).flat())(t).filter(((h) => h !== ""));
   return gt(e) && a && c.length === 1 ? Qt(e, c[0]) : lt(e, c, n, u);
 }, lt = (e, t, n, r) => {
-  const a = Bt(e) ? Object.assign({}, e) : null, i = gt(e) ? [...e] : null;
+  const a = $t(e) ? Object.assign({}, e) : null, i = gt(e) ? [...e] : null;
   if (t.length === 0) return e;
   if (!a && !i) throw new Error("Can't assign property -- invalid input object");
   const { createNew: s, remove: p, noError: d, fullData: l, fullPath: u } = r, c = t[0];
   if (i && typeof c == "string") return i.map(((b) => lt(b, t, n, r)));
   if (t.length === 1)
-    return a && typeof c == "string" ? Dn(a, c, n, r) ?? a : i && typeof c == "number" ? (On(i, c, n, r), i) : ($e(l, u, c, d), e);
+    return a && typeof c == "string" ? Dn(a, c, n, r) ?? a : i && typeof c == "number" ? (On(i, c, n, r), i) : (Be(l, u, c, d), e);
   const h = a || i || [];
   if (p && t.length === 2 && typeof t[1] == "number") {
     const b = h[c], D = t[1];
-    return gt(b) ? h[c] = Qt(b, D) : $e(l, u, c, d, "Trying to remove an indexed item from an object that is not an array"), h;
+    return gt(b) ? h[c] = Qt(b, D) : Be(l, u, c, d, "Trying to remove an indexed item from an object that is not an array"), h;
   }
   const f = t.slice(1);
   if (c in e) {
-    if (m = h[c], !gt(m) && !Bt(m)) {
-      if (!s) return $e(l, u, c, d), h;
+    if (m = h[c], !gt(m) && !$t(m)) {
+      if (!s) return Be(l, u, c, d), h;
       h[c] = {};
     }
     return h[c] = lt(h[c], f, n, r), h;
@@ -42,7 +42,7 @@ Couldn't access "${n}" in ${JSON.stringify(e)}`);
       return h[D] = lt(h[D], f, n, r), h;
     }
   }
-  return $e(l, u, c, d), h;
+  return Be(l, u, c, d), h;
 }, Dn = (e, t, n, r) => {
   const { remove: a, createNew: i, noError: s, insertAfter: p, insertBefore: d, fullData: l, fullPath: u } = r;
   if (d !== void 0 || p !== void 0) {
@@ -51,15 +51,15 @@ Couldn't access "${n}" in ${JSON.stringify(e)}`);
     return f = typeof d == "number" ? d : typeof p == "number" ? p : h.findIndex((([m, b]) => m === (d ?? p))), p && f++, h.splice(f, 0, [t, n]), Object.fromEntries(h);
   }
   const c = t in e;
-  a ? c ? delete e[t] : $e(l, u, t, s) : i || c ? e[t] = n : $e(l, u, t, s);
+  a ? c ? delete e[t] : Be(l, u, t, s) : i || c ? e[t] = n : Be(l, u, t, s);
 }, On = (e, t, n, r) => {
   const { noError: a, fullData: i, fullPath: s, createNew: p, insert: d } = r;
-  d && e.splice(t, 0, n), t in e ? e[t] = n : p ? e.push(n) : $e(i, s, t, a);
+  d && e.splice(t, 0, n), t in e ? e[t] = n : p ? e.push(n) : Be(i, s, t, a);
 }, qe = (e, t, n) => {
   const r = Array.isArray(t) ? t : Cn(t);
   if (r.length === 0) return e;
   const a = r[0];
-  if (Array.isArray(e) && typeof a != "number") return e.map(((s) => qe(s, r)));
+  if (Array.isArray(e) && typeof a != "number" && e.length > 0) return e.map(((s) => qe(s, r)));
   if (typeof e != "object" || e === null || !(a in e)) return kn(e, a);
   const i = e[a];
   return r.length === 1 ? i : qe(i, r.slice(1));
@@ -150,13 +150,13 @@ const en = ({ className: e, name: t, value: n, setValue: r, handleKeyPress: a, s
   if (Array.isArray(t)) return !!a && t.includes(a);
   const { key: i, modifier: s } = t;
   return (n !== "stringLineBreak" || r !== "Enter" || a !== "Shift" || i !== "Enter" || !s?.includes("Shift")) && r === i && (s === a || Array.isArray(s) && s.includes(a));
-}, Fe = { key: "Enter" }, Ht = { confirm: Fe, cancel: { key: "Escape" }, objectConfirm: Object.assign(Object.assign({}, Fe), { modifier: ["Meta", "Shift", "Control"] }), objectLineBreak: Fe, stringConfirm: Fe, stringLineBreak: Object.assign(Object.assign({}, Fe), { modifier: ["Shift"] }), numberConfirm: Fe, numberUp: { key: "ArrowUp" }, numberDown: { key: "ArrowDown" }, tabForward: { key: "Tab" }, tabBack: { key: "Tab", modifier: "Shift" }, booleanConfirm: Fe, booleanToggle: { key: " " }, clipboardModifier: ["Meta", "Control"], collapseModifier: ["Alt"] }, Be = (e, t, n = "next", r) => {
+}, Fe = { key: "Enter" }, Ht = { confirm: Fe, cancel: { key: "Escape" }, objectConfirm: Object.assign(Object.assign({}, Fe), { modifier: ["Meta", "Shift", "Control"] }), objectLineBreak: Fe, stringConfirm: Fe, stringLineBreak: Object.assign(Object.assign({}, Fe), { modifier: ["Shift"] }), numberConfirm: Fe, numberUp: { key: "ArrowUp" }, numberDown: { key: "ArrowDown" }, tabForward: { key: "Tab" }, tabBack: { key: "Tab", modifier: "Shift" }, booleanConfirm: Fe, booleanToggle: { key: " " }, clipboardModifier: ["Meta", "Control"], collapseModifier: ["Alt"] }, $e = (e, t, n = "next", r) => {
   const a = t.slice(0, t.length - 1), i = t.slice(-1)[0];
   if (i === void 0) return null;
   const s = qe(e, a), p = Nn(s);
   Array.isArray(s) || r(p, (({ key: u, value: c }) => [u, c]));
   const d = p.findIndex(((u) => u.key === i)), l = p[d + (n === "next" ? 1 : -1)];
-  return l ? et(l.value) ? Object.keys(l.value).length === 0 ? Be(e, [...a, l.key], n, r) : nn(e, [...a, l.key], n, r) : [...a, l.key] : a.length === 0 ? null : Be(e, a, n, r);
+  return l ? et(l.value) ? Object.keys(l.value).length === 0 ? $e(e, [...a, l.key], n, r) : nn(e, [...a, l.key], n, r) : [...a, l.key] : a.length === 0 ? null : $e(e, a, n, r);
 }, nn = (e, t, n = "next", r) => {
   const a = qe(e, t);
   if (!et(a)) return t;
@@ -283,7 +283,7 @@ const en = ({ className: e, name: t, value: n, setValue: r, handleKeyPress: a, s
 }, Fn = ({ value: e, isEditing: t, setIsEditing: n, handleEdit: r, nodeData: a, handleKeyboard: i, keyboardCommon: s }) => {
   const { getStyles: p } = Oe();
   return Mn(t, ((d) => i(d, Object.assign({ confirm: r }, s)))), o.jsx("div", { onDoubleClick: () => n(!0), className: "jer-value-null", style: p("null", a), children: String(e) });
-}, $n = ({ value: e }) => {
+}, Bn = ({ value: e }) => {
   let t = "Error!";
   switch (typeof e) {
     case "string":
@@ -296,12 +296,12 @@ const en = ({ className: e, name: t, value: n, setValue: r, handleKeyPress: a, s
       t = "Symbol";
   }
   return o.jsx("span", { className: "jer-value-invalid", children: t });
-}, Bn = ({ size: e, style: t, className: n }) => o.jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: e, height: e, className: n, style: t, children: [o.jsx("path", { d: "M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4z" }), o.jsx("path", { d: "M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z" })] }), Wn = ({ size: e, style: t, className: n }) => o.jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: e, height: e, className: n, style: t, transform: "translate(0, 0.5)", children: [o.jsx("path", { d: "M7 17.013l4.413-.015 9.632-9.54c.378-.378.586-.88.586-1.414s-.208-1.036-.586-1.414l-1.586-1.586c-.756-.756-2.075-.752-2.825-.003L7 12.583v4.43zM18.045 4.458l1.589 1.583-1.597 1.582-1.586-1.585 1.594-1.58zM9 13.417l6.03-5.973 1.586 1.586-6.029 5.971L9 15.006v-1.589z" }), o.jsx("path", { d: "M5 21h14c1.103 0 2-.897 2-2v-8.668l-2 2V19H8.158c-.026 0-.053.01-.079.01-.033 0-.066-.009-.1-.01H5V5h6.847l2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2z" })] }), Hn = ({ size: e, style: t, className: n }) => o.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: e, height: e, className: n, style: t, children: o.jsx("path", { d: "M6 19a2 2 0 002 2h8a2 2 0 002-2V7H6v12m2.46-7.12l1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.13-2.12M15.5 4l-1-1h-5l-1 1H5v2h14V4h-3.5z" }) }), Un = ({ size: e, style: t, className: n }) => o.jsxs("svg", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, viewBox: "0 0 24 24", width: e, height: e, className: n, style: t, children: [o.jsx("path", { d: "M9 2 H15 A1 1 0 0 1 16 3 V5 A1 1 0 0 1 15 6 H9 A1 1 0 0 1 8 5 V3 A1 1 0 0 1 9 2 z" }), o.jsx("path", { d: "M8 4H6a2 2 0 00-2 2v14a2 2 0 002 2h12a2 2 0 002-2v-2M16 4h2a2 2 0 012 2v4M21 14H11" }), o.jsx("path", { d: "M15 10l-4 4 4 4" })] }), Yn = ({ size: e, style: t, className: n }) => o.jsxs("svg", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, viewBox: "0 0 24 24", width: e, height: e, className: n, style: t, children: [o.jsx("path", { d: "M22 11.08V12a10 10 0 11-5.93-9.14" }), o.jsx("path", { d: "M22 4L12 14.01l-3-3" })] }), Jn = ({ size: e, style: t, className: n }) => o.jsx("svg", { baseProfile: "tiny", viewBox: "0 0 24 24", fill: "currentColor", width: e, height: e, className: n, style: t, children: o.jsx("path", { d: "M12 4c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8zm-5 8c0-.832.224-1.604.584-2.295l6.711 6.711A4.943 4.943 0 0112 17c-2.757 0-5-2.243-5-5zm9.416 2.295L9.705 7.584A4.943 4.943 0 0112 7c2.757 0 5 2.243 5 5 0 .832-.224 1.604-.584 2.295z" }) }), Xn = ({ size: e, style: t, className: n }) => o.jsx("svg", { viewBox: "0 0 512 512", fill: "currentColor", width: e, height: e, className: n, style: t, children: o.jsx("path", { d: "M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" }) }), We = ({ name: e, nodeData: t }) => {
+}, $n = ({ size: e, style: t, className: n }) => o.jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: e, height: e, className: n, style: t, children: [o.jsx("path", { d: "M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4z" }), o.jsx("path", { d: "M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z" })] }), Wn = ({ size: e, style: t, className: n }) => o.jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: e, height: e, className: n, style: t, transform: "translate(0, 0.5)", children: [o.jsx("path", { d: "M7 17.013l4.413-.015 9.632-9.54c.378-.378.586-.88.586-1.414s-.208-1.036-.586-1.414l-1.586-1.586c-.756-.756-2.075-.752-2.825-.003L7 12.583v4.43zM18.045 4.458l1.589 1.583-1.597 1.582-1.586-1.585 1.594-1.58zM9 13.417l6.03-5.973 1.586 1.586-6.029 5.971L9 15.006v-1.589z" }), o.jsx("path", { d: "M5 21h14c1.103 0 2-.897 2-2v-8.668l-2 2V19H8.158c-.026 0-.053.01-.079.01-.033 0-.066-.009-.1-.01H5V5h6.847l2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2z" })] }), Hn = ({ size: e, style: t, className: n }) => o.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: e, height: e, className: n, style: t, children: o.jsx("path", { d: "M6 19a2 2 0 002 2h8a2 2 0 002-2V7H6v12m2.46-7.12l1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.13-2.12M15.5 4l-1-1h-5l-1 1H5v2h14V4h-3.5z" }) }), Un = ({ size: e, style: t, className: n }) => o.jsxs("svg", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, viewBox: "0 0 24 24", width: e, height: e, className: n, style: t, children: [o.jsx("path", { d: "M9 2 H15 A1 1 0 0 1 16 3 V5 A1 1 0 0 1 15 6 H9 A1 1 0 0 1 8 5 V3 A1 1 0 0 1 9 2 z" }), o.jsx("path", { d: "M8 4H6a2 2 0 00-2 2v14a2 2 0 002 2h12a2 2 0 002-2v-2M16 4h2a2 2 0 012 2v4M21 14H11" }), o.jsx("path", { d: "M15 10l-4 4 4 4" })] }), Yn = ({ size: e, style: t, className: n }) => o.jsxs("svg", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, viewBox: "0 0 24 24", width: e, height: e, className: n, style: t, children: [o.jsx("path", { d: "M22 11.08V12a10 10 0 11-5.93-9.14" }), o.jsx("path", { d: "M22 4L12 14.01l-3-3" })] }), Jn = ({ size: e, style: t, className: n }) => o.jsx("svg", { baseProfile: "tiny", viewBox: "0 0 24 24", fill: "currentColor", width: e, height: e, className: n, style: t, children: o.jsx("path", { d: "M12 4c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8zm-5 8c0-.832.224-1.604.584-2.295l6.711 6.711A4.943 4.943 0 0112 17c-2.757 0-5-2.243-5-5zm9.416 2.295L9.705 7.584A4.943 4.943 0 0112 7c2.757 0 5 2.243 5 5 0 .832-.224 1.604-.584 2.295z" }) }), Xn = ({ size: e, style: t, className: n }) => o.jsx("svg", { viewBox: "0 0 512 512", fill: "currentColor", width: e, height: e, className: n, style: t, children: o.jsx("path", { d: "M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" }) }), We = ({ name: e, nodeData: t }) => {
   var n, r, a, i, s, p, d;
   const { getStyles: l, icons: u } = Oe(), c = { size: "1.4em", className: "jer-icon" };
   switch (e) {
     case "add":
-      return (n = u?.add) !== null && n !== void 0 ? n : o.jsx(Bn, Object.assign({}, c, { style: l("iconAdd", t) }));
+      return (n = u?.add) !== null && n !== void 0 ? n : o.jsx($n, Object.assign({}, c, { style: l("iconAdd", t) }));
     case "edit":
       return (r = u?.edit) !== null && r !== void 0 ? r : o.jsx(Wn, Object.assign({}, c, { style: l("iconEdit", t) }));
     case "delete":
@@ -318,7 +318,7 @@ const en = ({ className: e, name: t, value: n, setValue: r, handleKeyPress: a, s
       return o.jsx(o.Fragment, {});
   }
 }, ln = ({ startEdit: e, handleDelete: t, handleAdd: n, enableClipboard: r, type: a, customButtons: i, nodeData: s, translate: p, keyboardControls: d, handleKeyboard: l, editConfirmRef: u, getNewKeyOptions: c, jsonStringify: h, onEditEvent: f, showIconTooltips: m }) => {
-  const { getStyles: b } = Oe(), D = p("KEY_NEW", s), [O, w] = J(D), [N, _] = J(!1), { key: W, path: z, value: H } = s, X = Array.isArray(N), $ = (C) => {
+  const { getStyles: b } = Oe(), D = p("KEY_NEW", s), [O, w] = J(D), [N, _] = J(!1), { key: W, path: z, value: H } = s, X = Array.isArray(N), B = (C) => {
     var k;
     if (f && f(C ? [...z, null] : null, C), !C) return void _(!1);
     const L = Object.keys(qe(s.fullData, z)), Y = c ? (k = c(s)) === null || k === void 0 ? void 0 : k.filter(((ae) => !L.includes(ae))) : null;
@@ -338,35 +338,35 @@ const en = ({ className: e, name: t, value: n, setValue: r, handleKeyPress: a, s
       }));
     }
   }, className: "jer-copy-pulse", title: m ? p("TOOLTIP_COPY", s) : "", children: o.jsx(We, { name: "copy", nodeData: s }) }), e && o.jsx("div", { onClick: e, title: m ? p("TOOLTIP_EDIT", s) : "", children: o.jsx(We, { name: "edit", nodeData: s }) }), t && o.jsx("div", { onClick: t, title: m ? p("TOOLTIP_DELETE", s) : "", children: o.jsx(We, { name: "delete", nodeData: s }) }), n && o.jsx("div", { onClick: () => {
-    a === "object" ? $(!0) : n("");
+    a === "object" ? B(!0) : n("");
   }, title: m ? p("TOOLTIP_ADD", s) : "", children: o.jsx(We, { name: "add", nodeData: s }) }), i?.map((({ Element: C, onClick: k }, L) => o.jsx("div", { onClick: (Y) => k && k(s, Y), children: o.jsx(C, { nodeData: s }) }, L))), N && n && a === "object" && o.jsxs(o.Fragment, { children: [X ? o.jsxs("div", { className: "jer-select jer-select-keys", children: [o.jsxs("select", { name: "new-key-select", className: "jer-select-inner", onChange: (C) => {
-    n(C.target.value), $(!1);
+    n(C.target.value), B(!1);
   }, defaultValue: "", autoFocus: !0, onKeyDown: (C) => {
-    l(C, { cancel: () => $(!1) });
+    l(C, { cancel: () => B(!1) });
   }, children: [o.jsx("option", { value: "", disabled: !0, children: N.length > 0 ? p("KEY_SELECT", s) : p("NO_KEY_OPTIONS", s) }), N.map(((C) => o.jsx("option", { value: C, children: C }, C)))] }), o.jsx("span", { className: "focus" })] }) : o.jsx("input", { className: "jer-input-new-key", type: "text", name: "new-object-key", value: O, onChange: (C) => w(C.target.value), autoFocus: !0, onFocus: (C) => C.target.select(), onKeyDown: (C) => {
     l(C, { stringConfirm: () => {
-      n && ($(!1), n(O), w(D));
+      n && (B(!1), n(O), w(D));
     }, cancel: () => {
-      $(!1), w(D);
+      B(!1), w(D);
     } });
   }, style: b("input", s) }), o.jsx(Pt, { onOk: () => {
-    X && !O || ($(!1), n(O));
+    X && !O || (B(!1), n(O));
   }, onCancel: () => {
-    $(!1);
+    B(!1);
   }, nodeData: s, editConfirmRef: u, hideOk: X })] })] });
 }, Pt = ({ onOk: e, onCancel: t, nodeData: n, editConfirmRef: r, hideOk: a = !1 }) => o.jsxs("div", { className: "jer-confirm-buttons", children: [!a && o.jsx("div", { onClick: e, ref: r, children: o.jsx(We, { name: "ok", nodeData: n }) }), o.jsx("div", { onClick: t, children: o.jsx(We, { name: "cancel", nodeData: n }) })] }), Zn = (e) => e.reduce(((t, n) => typeof n == "number" ? `${t}[${n}]` : t === "" ? n : `${t}.${n}`), ""), Gn = ["string", "number", "boolean", "null", "object", "array"], cn = ({ props: e, collapsed: t }) => {
-  const { data: n, nodeData: r, parentData: a, onEdit: i, onError: s, showErrorMessages: p, restrictEditFilter: d, restrictDeleteFilter: l, restrictAddFilter: u, restrictDragFilter: c, translate: h, errorMessageTimeout: f } = e, { currentlyEditingElement: m, setCurrentlyEditingElement: b } = He(), [D, O] = J(null), w = Object.assign(Object.assign({}, r), { collapsed: t }), { path: N, key: _, size: W } = w, z = Ue(N), H = !d(w), X = !l(w), $ = !u(w), C = !c(w) && X && m === null, k = (M) => {
+  const { data: n, nodeData: r, parentData: a, onEdit: i, onError: s, showErrorMessages: p, restrictEditFilter: d, restrictDeleteFilter: l, restrictAddFilter: u, restrictDragFilter: c, translate: h, errorMessageTimeout: f } = e, { currentlyEditingElement: m, setCurrentlyEditingElement: b } = He(), [D, O] = J(null), w = Object.assign(Object.assign({}, r), { collapsed: t }), { path: N, key: _, size: W } = w, z = Ue(N), H = !d(w), X = !l(w), B = !u(w), C = !c(w) && X && m === null, k = (M) => {
     p && (O(M), setTimeout((() => O(null)), f)), console.warn("Error", M);
   }, L = Re(((M, F) => {
     k(M.message), s && s({ currentData: w.fullData, errorValue: F, currentValue: n, name: _, path: N, error: M });
-  }), [s, p]), Y = m === z, ae = m === `key_${z}`, Z = typeof N.slice(-1)[0] == "number", ne = { isEditing: Y, isEditingKey: ae, isArray: Z, canEditKey: a !== null && H && $ && X && !Z }, G = _ === "" && N.length > 0 ? h("EMPTY_STRING", w) : null;
-  return { pathString: z, nodeData: w, path: N, name: _, size: W, canEdit: H, canDelete: X, canAdd: $, canDrag: C, error: D, showError: k, onError: L, setError: O, handleEditKey: (M) => {
+  }), [s, p]), Y = m === z, ae = m === `key_${z}`, Z = typeof N.slice(-1)[0] == "number", ne = { isEditing: Y, isEditingKey: ae, isArray: Z, canEditKey: a !== null && H && B && X && !Z }, G = _ === "" && N.length > 0 ? h("EMPTY_STRING", w) : null;
+  return { pathString: z, nodeData: w, path: N, name: _, size: W, canEdit: H, canDelete: X, canAdd: B, canDrag: C, error: D, showError: k, onError: L, setError: O, handleEditKey: (M) => {
     if (b(null), _ === M || !a) return;
     const F = N.slice(0, -1);
     if (Object.keys(a).includes(M)) return void L({ code: "KEY_EXISTS", message: h("ERROR_KEY_EXISTS", w) }, M);
-    const ge = Object.fromEntries(Object.entries(a).map((([B, R]) => B === _ ? [M, R] : [B, R])));
-    i(ge, F).then(((B) => {
-      B && L({ code: "UPDATE_ERROR", message: B }, M);
+    const ge = Object.fromEntries(Object.entries(a).map((([$, R]) => $ === _ ? [M, R] : [$, R])));
+    i(ge, F).then((($) => {
+      $ && L({ code: "UPDATE_ERROR", message: $ }, M);
     }));
   }, derivedValues: ne, emptyStringKey: G };
 }, dn = ({ canDrag: e, canDragOnto: t, path: n, nodeData: r, onMove: a, onError: i, translate: s }) => {
@@ -409,7 +409,7 @@ const en = ({ className: e, name: t, value: n, setValue: r, handleKeyPress: a, s
     p(D.target.value), m(h("prev"));
   } }), style: { width: b.length / 1.5 + 0.5 + "em" } }) : o.jsxs("span", { className: "jer-key-text", style: Object.assign(Object.assign({}, c), { minWidth: `${Math.min(b.length + 1, 5)}ch`, flexShrink: b.length > 10 ? 1 : 0 }), onDoubleClick: () => t && m(r, "key"), onClick: l, children: [f ? o.jsx("span", { className: "jer-empty-string", children: f }) : b, b !== "" || f ? o.jsx("span", { className: "jer-key-colon", children: ":" }) : null] });
 }, un = (e) => {
-  const { data: t, parentData: n, onEdit: r, onDelete: a, onChange: i, onMove: s, enableClipboard: p, canDragOnto: d, restrictTypeSelection: l, searchFilter: u, searchText: c, showLabel: h, stringTruncate: f, showStringQuotes: m, arrayIndexFromOne: b, indent: D, translate: O, customNodeDefinitions: w, customNodeData: N, handleKeyboard: _, keyboardControls: W, sort: z, editConfirmRef: H, jsonStringify: X, showIconTooltips: $ } = e, { getStyles: C } = Oe(), { setCurrentlyEditingElement: k, setCollapseState: L, previouslyEditedElement: Y, setPreviouslyEditedElement: ae, tabDirection: Z, setTabDirection: ne, previousValue: G, setPreviousValue: M } = He(), [F, ge] = J(typeof t == "function" ? St : t), { pathString: B, nodeData: R, path: V, name: q, canEdit: me, canDelete: Ie, canDrag: Ne, error: je, onError: de, handleEditKey: be, emptyStringKey: Ye, derivedValues: Ce } = cn({ props: e }), { dragSourceProps: nt, getDropTargetProps: rt, BottomDropTarget: re, DropTargetPadding: ue } = dn({ canDrag: Ne, canDragOnto: d, path: V, nodeData: R, onMove: s, onError: de, translate: O }), [ve, xe] = J(Nt(t, N)), S = Re(((g) => {
+  const { data: t, parentData: n, onEdit: r, onDelete: a, onChange: i, onMove: s, enableClipboard: p, canDragOnto: d, restrictTypeSelection: l, searchFilter: u, searchText: c, showLabel: h, stringTruncate: f, showStringQuotes: m, arrayIndexFromOne: b, indent: D, translate: O, customNodeDefinitions: w, customNodeData: N, handleKeyboard: _, keyboardControls: W, sort: z, editConfirmRef: H, jsonStringify: X, showIconTooltips: B } = e, { getStyles: C } = Oe(), { setCurrentlyEditingElement: k, setCollapseState: L, previouslyEditedElement: Y, setPreviouslyEditedElement: ae, tabDirection: Z, setTabDirection: ne, previousValue: G, setPreviousValue: M } = He(), [F, ge] = J(typeof t == "function" ? St : t), { pathString: $, nodeData: R, path: V, name: q, canEdit: me, canDelete: Ie, canDrag: Ne, error: je, onError: de, handleEditKey: be, emptyStringKey: Ye, derivedValues: Ce } = cn({ props: e }), { dragSourceProps: nt, getDropTargetProps: rt, BottomDropTarget: re, DropTargetPadding: ue } = dn({ canDrag: Ne, canDragOnto: d, path: V, nodeData: R, onMove: s, onError: de, translate: O }), [ve, xe] = J(Nt(t, N)), S = Re(((g) => {
     if (!i) return void ge(g);
     const x = i({ currentData: R.fullData, newValue: g, currentValue: F, name: q, path: V });
     ge(x);
@@ -432,7 +432,7 @@ const en = ({ className: e, name: t, value: n, setValue: r, handleKeyPress: a, s
     })), (P = oe[0]) !== null && P !== void 0 ? P : null;
   })(F, ke)), { isEditing: ie } = Ce, Je = tn("value", R, u, c);
   if (ie && (!Je || !me)) {
-    const g = Be(R.fullData, V, Z, z);
+    const g = $e(R.fullData, V, Z, z);
     k(g || Y);
   }
   if (!Je) return null;
@@ -461,21 +461,21 @@ const en = ({ className: e, name: t, value: n, setValue: r, handleKeyPress: a, s
     k(null), G === null ? (ge(t), M(null)) : r(G, V);
   }, { isEditingKey: Xe, canEditKey: Ze } = Ce, pe = !ie && je, ee = ie && ke.length > 1, Le = (ve !== "invalid" || K) && !je && Ee, v = h && !Te, j = K && (ie && Ae || !ie && Pe), E = { value: F, parentData: n, setValue: S, isEditing: ie, canEdit: me, setIsEditing: me ? () => k(V) : () => {
   }, handleEdit: we, handleCancel: fe, path: V, stringTruncate: f, showStringQuotes: m, nodeData: R, enumType: se, translate: O, handleKeyboard: _, keyboardCommon: { cancel: fe, tabForward: () => {
-    ne("next"), ae(B);
-    const g = Be(R.fullData, V, "next", z);
+    ne("next"), ae($);
+    const g = $e(R.fullData, V, "next", z);
     g && (we(), k(g));
   }, tabBack: () => {
-    ne("prev"), ae(B);
-    const g = Be(R.fullData, V, "prev", z);
+    ne("prev"), ae($);
+    const g = $e(R.fullData, V, "prev", z);
     g && (we(), k(g));
-  } } }, A = { canEditKey: Ze, isEditingKey: Xe, pathString: B, path: V, name: q, arrayIndexFromOne: b, handleKeyboard: _, handleEditKey: be, handleCancel: fe, styles: C("property", R), getNextOrPrevious: (g) => Be(R.fullData, V, g, z), emptyStringKey: Ye }, T = j ? o.jsx(K, Object.assign({}, e, { value: F, customNodeProps: Q, setValue: S, handleEdit: we, handleCancel: fe, handleKeyPress: (g) => _(g, { stringConfirm: we, cancel: fe }), isEditing: ie, setIsEditing: () => k(V), getStyles: C, originalNode: Ve ? Yt(t, E) : void 0, originalNodeKey: Ve ? o.jsx(mt, Object.assign({}, A)) : void 0, canEdit: me, keyboardCommon: E.keyboardCommon, onError: de })) : Yt(t, E);
+  } } }, A = { canEditKey: Ze, isEditingKey: Xe, pathString: $, path: V, name: q, arrayIndexFromOne: b, handleKeyboard: _, handleEditKey: be, handleCancel: fe, styles: C("property", R), getNextOrPrevious: (g) => $e(R.fullData, V, g, z), emptyStringKey: Ye }, T = j ? o.jsx(K, Object.assign({}, e, { value: F, customNodeProps: Q, setValue: S, handleEdit: we, handleCancel: fe, handleKeyPress: (g) => _(g, { stringConfirm: we, cancel: fe }), isEditing: ie, setIsEditing: () => k(V), getStyles: C, originalNode: Ve ? Yt(t, E) : void 0, originalNodeKey: Ve ? o.jsx(mt, Object.assign({}, A)) : void 0, canEdit: me, keyboardCommon: E.keyboardCommon, onError: de })) : Yt(t, E);
   return o.jsxs("div", Object.assign({ className: "jer-component jer-value-component", style: { marginLeft: n !== null ? D / 2 + "em" : 0, position: "relative" }, draggable: Ne }, nt, rt("above"), { children: [re, o.jsx(ue, { position: "above", nodeData: R }), o.jsxs("div", { className: "jer-value-main-row", style: { flexWrap: q.length > 10 ? "wrap" : "nowrap" }, children: [v && o.jsx(mt, Object.assign({}, A)), o.jsxs("div", { className: "jer-value-and-buttons", children: [o.jsx("div", { className: "jer-input-component", children: T }), ie ? o.jsx(Pt, { onOk: we, onCancel: fe, nodeData: R, editConfirmRef: H }) : Le && o.jsx(ln, { startEdit: me ? () => {
     M(G), k(V, fe);
   } : void 0, handleDelete: Ie ? () => {
     a(F, V).then(((g) => {
       g && de({ code: "DELETE_ERROR", message: g }, F);
     }));
-  } : void 0, enableClipboard: p, translate: O, customButtons: e.customButtons, nodeData: R, handleKeyboard: _, keyboardControls: W, editConfirmRef: H, jsonStringify: X, showIconTooltips: $ }), ee && o.jsxs("div", { className: "jer-select jer-select-types", children: [o.jsx("select", { name: `${q}-type-select`, className: "jer-select-inner", onChange: (g) => ((x) => {
+  } : void 0, enableClipboard: p, translate: O, customButtons: e.customButtons, nodeData: R, handleKeyboard: _, keyboardControls: W, editConfirmRef: H, jsonStringify: X, showIconTooltips: B }), ee && o.jsxs("div", { className: "jer-select jer-select-types", children: [o.jsx("select", { name: `${q}-type-select`, className: "jer-select-inner", onChange: (g) => ((x) => {
     const P = w.find(((te) => te.name === x));
     if (P) return r(P.defaultValue, V), xe(x), _e(null), k(null), void L({ path: V, collapsed: !1, includeChildren: !1 });
     const oe = ke.find(((te) => te instanceof Object && te.enum === x));
@@ -499,7 +499,7 @@ const en = ({ className: e, name: t, value: n, setValue: r, handleKeyPress: a, s
     case "null":
       return o.jsx(Fn, Object.assign({}, t));
     default:
-      return o.jsx($n, Object.assign({}, t));
+      return o.jsx(Bn, Object.assign({}, t));
   }
 }, qn = (e, t, n, r) => {
   switch (t) {
@@ -526,14 +526,14 @@ const en = ({ className: e, name: t, value: n, setValue: r, handleKeyPress: a, s
   const r = n[0], { element: a, wrapperElement: i, customNodeProps: s, wrapperProps: p, hideKey: d = !1, showEditTools: l = !0, showOnEdit: u = !1, showOnView: c = !0, showCollectionWrapper: h = !0 } = r, f = qt(r, ["element", "wrapperElement", "customNodeProps", "wrapperProps", "hideKey", "showEditTools", "showOnEdit", "showOnView", "showCollectionWrapper"]);
   return Object.assign({ CustomNode: a, CustomWrapper: i, customNodeProps: s, wrapperProps: p, hideKey: d, showEditTools: l, showOnEdit: u, showOnView: c, showCollectionWrapper: h }, f);
 }, hn = (e) => {
-  const { getStyles: t } = Oe(), { collapseState: n, setCollapseState: r, getMatchingCollapseState: a, currentlyEditingElement: i, setCurrentlyEditingElement: s, areChildrenBeingEdited: p, previousValue: d, setPreviousValue: l } = He(), { mainContainerRef: u, data: c, nodeData: h, parentData: f, showCollectionCount: m, onEdit: b, onAdd: D, onDelete: O, canDragOnto: w, collapseFilter: N, collapseAnimationTime: _, onMove: W, enableClipboard: z, onEditEvent: H, showIconTooltips: X, searchFilter: $, searchText: C, indent: k, sort: L, showArrayIndices: Y, arrayIndexFromOne: ae, defaultValue: Z, newKeyOptions: ne, translate: G, customNodeDefinitions: M, customNodeData: F, jsonParse: ge, jsonStringify: B, TextEditor: R, keyboardControls: V, handleKeyboard: q, insertAtTop: me, onCollapse: Ie, editConfirmRef: Ne, collapseClickZones: je } = e, [de, be] = J(B(c)), Ye = N(h), { contentRef: Ce, isAnimating: nt, maxHeight: rt, collapsed: re, animateCollapse: ue, cssTransitionValue: ve } = ((y, I, ye, he, Se) => {
+  const { getStyles: t } = Oe(), { collapseState: n, setCollapseState: r, getMatchingCollapseState: a, currentlyEditingElement: i, setCurrentlyEditingElement: s, areChildrenBeingEdited: p, previousValue: d, setPreviousValue: l } = He(), { mainContainerRef: u, data: c, nodeData: h, parentData: f, showCollectionCount: m, onEdit: b, onAdd: D, onDelete: O, canDragOnto: w, collapseFilter: N, collapseAnimationTime: _, onMove: W, enableClipboard: z, onEditEvent: H, showIconTooltips: X, searchFilter: B, searchText: C, indent: k, sort: L, showArrayIndices: Y, arrayIndexFromOne: ae, defaultValue: Z, newKeyOptions: ne, translate: G, customNodeDefinitions: M, customNodeData: F, jsonParse: ge, jsonStringify: $, TextEditor: R, keyboardControls: V, handleKeyboard: q, insertAtTop: me, onCollapse: Ie, editConfirmRef: Ne, collapseClickZones: je } = e, [de, be] = J($(c)), Ye = N(h), { contentRef: Ce, isAnimating: nt, maxHeight: rt, collapsed: re, animateCollapse: ue, cssTransitionValue: ve } = ((y, I, ye, he, Se) => {
     const [bn, pt] = J(ye ? 0 : void 0), [ht, vn] = J(ye), vt = ce(!1), xt = ce(null), Mt = ce(0), Ft = ce(0), xn = I / 1e3 + "s", En = Re(((Et) => {
       var wt, Dt;
       if (ht !== Et) {
         switch (window.clearTimeout(Ft.current), vt.current = !0, Et) {
           case !0: {
-            const $t = (Dt = (wt = xt.current) === null || wt === void 0 ? void 0 : wt.offsetHeight) !== null && Dt !== void 0 ? Dt : 0;
-            Mt.current = $t, pt($t), setTimeout((() => {
+            const Bt = (Dt = (wt = xt.current) === null || wt === void 0 ? void 0 : wt.offsetHeight) !== null && Dt !== void 0 ? Dt : 0;
+            Mt.current = Bt, pt(Bt), setTimeout((() => {
               pt(0);
             }), 5);
             break;
@@ -547,10 +547,10 @@ const en = ({ className: e, name: t, value: n, setValue: r, handleKeyPress: a, s
       }
     }), [I, ht, y, he, Se]);
     return { contentRef: xt, isAnimating: vt.current, animateCollapse: En, maxHeight: bn, collapsed: ht, cssTransitionValue: xn };
-  })(c, _, Ye, u, B), { pathString: xe, nodeData: S, path: K, name: Q, size: Te, canEdit: Ee, canDelete: Ae, canAdd: Pe, canDrag: Ve, error: Ke, setError: ke, onError: se, handleEditKey: _e, emptyStringKey: ie, derivedValues: Je } = cn({ props: e, collapsed: re }), { dragSourceProps: we, getDropTargetProps: fe, BottomDropTarget: Xe, DropTargetPadding: Ze } = dn({ canDrag: Ve, canDragOnto: w, path: K, nodeData: S, onMove: W, onError: se, translate: G }), pe = ce(!Ye), { isEditing: ee, isEditingKey: Le, isArray: v, canEditKey: j } = Je;
+  })(c, _, Ye, u, $), { pathString: xe, nodeData: S, path: K, name: Q, size: Te, canEdit: Ee, canDelete: Ae, canAdd: Pe, canDrag: Ve, error: Ke, setError: ke, onError: se, handleEditKey: _e, emptyStringKey: ie, derivedValues: Je } = cn({ props: e, collapsed: re }), { dragSourceProps: we, getDropTargetProps: fe, BottomDropTarget: Xe, DropTargetPadding: Ze } = dn({ canDrag: Ve, canDragOnto: w, path: K, nodeData: S, onMove: W, onError: se, translate: G }), pe = ce(!Ye), { isEditing: ee, isEditingKey: Le, isArray: v, canEditKey: j } = Je;
   De((() => {
-    be(B(c));
-  }), [c, B]), De((() => {
+    be($(c));
+  }), [c, $]), De((() => {
     const y = N(S) && !ee;
     pe.current = !y, ue(y);
   }), [N]), De((() => {
@@ -564,7 +564,7 @@ const en = ({ className: e, name: t, value: n, setValue: r, handleKeyPress: a, s
     const ye = Z(y, I);
     return ye !== void 0 ? ye : null;
   }), [Z]), T = Re(((y) => ne ? typeof ne != "function" ? ne : ne(y) : null), [ne]), { CustomNode: g, customNodeProps: x, CustomWrapper: P, wrapperProps: oe = {}, hideKey: U, showEditTools: te = !0, showOnEdit: ze, showOnView: Me, showCollectionWrapper: ft = !0 } = F, ct = p(xe);
-  if (ct && re && ue(!1), !(tn("collection", S, $, C) || S.level === 0) && !ct) return null;
+  if (ct && re && ue(!1), !(tn("collection", S, B, C) || S.level === 0) && !ct) return null;
   const Ge = Array.isArray(c) ? "array" : "object", yt = Ge === "array" ? { open: "[", close: "]" } : { open: "{", close: "}" }, Rt = (y) => {
     if (y.key !== "Tab" || y.getModifierState("Shift")) q(y, { objectConfirm: ut, cancel: ot });
     else {
@@ -580,7 +580,7 @@ const en = ({ className: e, name: t, value: n, setValue: r, handleKeyPress: a, s
   }, ut = () => {
     try {
       const y = ge(de);
-      if (s(null), l(null), ke(null), B(y) === B(c)) return;
+      if (s(null), l(null), ke(null), $(y) === $(c)) return;
       b(y, K).then(((I) => {
         I && se({ code: "UPDATE_ERROR", message: I }, y);
       }));
@@ -592,7 +592,7 @@ const en = ({ className: e, name: t, value: n, setValue: r, handleKeyPress: a, s
       y && se({ code: "DELETE_ERROR", message: y }, c);
     }));
   } : void 0, ot = () => {
-    s(null), d === null ? (ke(null), be(B(c)), l(null)) : b(d, K);
+    s(null), d === null ? (ke(null), be($(c)), l(null)) : b(d, K);
   }, It = m === "when-closed" ? re : m, mn = !ee && te, fn = (Y || !v) && !U && Q !== void 0, yn = g && (ee && ze || !ee && Me), jt = Object.entries(c).map((([y, I]) => [Ge === "array" ? Number(y) : y, I]));
   Ge === "object" && L(jt, ((y) => y));
   const Vt = pe.current ? ee ? o.jsxs("div", { className: "jer-collection-text-edit", children: [R ? o.jsx(R, { value: de, onChange: be, onKeyDown: (y) => q(y, { objectConfirm: ut, cancel: ot }) }) : o.jsx(en, { textAreaRef: E, className: "jer-collection-text-area", name: xe, value: de, setValue: be, handleKeyPress: Rt, styles: t("input", S) }), o.jsx("div", { className: "jer-collection-input-button-row", children: o.jsx(Pt, { onOk: ut, onCancel: ot, nodeData: S, editConfirmRef: Ne }) })] }) : jt.map((([y, I], ye) => {
@@ -619,7 +619,7 @@ const en = ({ className: e, name: t, value: n, setValue: r, handleKeyPress: a, s
         he && se({ code: "ADD_ERROR", message: he }, I);
       }));
     }
-  } : void 0, handleDelete: Ae ? gn : void 0, enableClipboard: z, type: Ge, nodeData: S, translate: G, customButtons: e.customButtons, keyboardControls: V, handleKeyboard: q, getNewKeyOptions: T, editConfirmRef: Ne, jsonStringify: B, onEditEvent: H, showIconTooltips: X }), Lt = { canEditKey: j, isEditingKey: Le, pathString: xe, path: K, name: Q, arrayIndexFromOne: ae, handleKeyboard: q, handleEditKey: _e, handleCancel: ot, keyValueArray: jt, styles: t("property", S), getNextOrPrevious: (y) => Be(S.fullData, K, y, L), handleClick: je.includes("property") ? dt : (y) => y.stopPropagation(), emptyStringKey: ie }, zt = o.jsxs("div", Object.assign({ className: "jer-component jer-collection-component", style: Object.assign(Object.assign({ marginLeft: (K.length === 0 ? 0 : k / 2) + "em" }, t("collection", S)), { position: "relative" }), draggable: Ve }, we, fe("above"), { children: [o.jsx("div", { className: "jer-clickzone", style: { width: k / 2 + 1 + "em", zIndex: 10 + 2 * S.level }, onClick: je.includes("left") ? dt : void 0 }), !ee && Xe, o.jsx(Ze, { position: "above", nodeData: S }), ft ? o.jsxs("div", { className: "jer-collection-header-row", style: { position: "relative" }, onClick: je.includes("header") ? dt : void 0, children: [o.jsxs("div", { className: "jer-collection-name", children: [o.jsx("div", { className: "jer-collapse-icon jer-accordion-icon" + (re ? " jer-rotate-90" : ""), style: { zIndex: 11 + 2 * S.level, transition: ve }, onClick: dt, children: o.jsx(We, { name: "chevron", rotate: re, nodeData: S }) }), fn && o.jsx(mt, Object.assign({}, Lt)), !ee && o.jsx("span", { className: "jer-brackets jer-bracket-open", style: t("bracket", S), children: yt.open })] }), !ee && It && o.jsx("div", { className: "jer-collection-item-count" + (It ? " jer-visible" : " jer-hidden"), style: Object.assign(Object.assign({}, t("itemCount", S)), { transition: ve }), children: Te === 1 ? G("ITEM_SINGLE", Object.assign(Object.assign({}, S), { size: 1 }), 1) : G("ITEMS_MULTIPLE", S, Te) }), o.jsx("div", { className: "jer-brackets" + (bt ? " jer-visible" : " jer-hidden"), style: Object.assign(Object.assign({}, t("bracket", S)), { transition: ve }), children: yt.close }), _t] }) : U ? o.jsx(o.Fragment, {}) : o.jsxs("div", { className: "jer-collection-header-row", style: { position: "relative" }, children: [o.jsx(mt, Object.assign({}, Lt)), _t] }), o.jsxs("div", { className: "jer-collection-inner", style: Object.assign(Object.assign({ overflowY: bt || nt ? "clip" : "visible", maxHeight: ct ? void 0 : rt }, t("collectionInner", S)), { transition: ve }), ref: Ce, children: [jn, o.jsx("div", { className: ee ? "jer-collection-error-row" : "jer-collection-error-row-edit", children: Ke && o.jsx("span", { className: "jer-error-slug", style: t("error", S), children: Ke }) }), !ee && ft && o.jsx("div", { className: "jer-brackets jer-bracket-outside", style: Object.assign(Object.assign({}, t("bracket", S)), { marginLeft: (k < 3 ? -1 : k < 6 ? -0.5 : 0) + "em" }), children: yt.close })] }), o.jsx(Ze, { position: "below", nodeData: S })] }));
+  } : void 0, handleDelete: Ae ? gn : void 0, enableClipboard: z, type: Ge, nodeData: S, translate: G, customButtons: e.customButtons, keyboardControls: V, handleKeyboard: q, getNewKeyOptions: T, editConfirmRef: Ne, jsonStringify: $, onEditEvent: H, showIconTooltips: X }), Lt = { canEditKey: j, isEditingKey: Le, pathString: xe, path: K, name: Q, arrayIndexFromOne: ae, handleKeyboard: q, handleEditKey: _e, handleCancel: ot, keyValueArray: jt, styles: t("property", S), getNextOrPrevious: (y) => $e(S.fullData, K, y, L), handleClick: je.includes("property") ? dt : (y) => y.stopPropagation(), emptyStringKey: ie }, zt = o.jsxs("div", Object.assign({ className: "jer-component jer-collection-component", style: Object.assign(Object.assign({ marginLeft: (K.length === 0 ? 0 : k / 2) + "em" }, t("collection", S)), { position: "relative" }), draggable: Ve }, we, fe("above"), { children: [o.jsx("div", { className: "jer-clickzone", style: { width: k / 2 + 1 + "em", zIndex: 10 + 2 * S.level }, onClick: je.includes("left") ? dt : void 0 }), !ee && Xe, o.jsx(Ze, { position: "above", nodeData: S }), ft ? o.jsxs("div", { className: "jer-collection-header-row", style: { position: "relative" }, onClick: je.includes("header") ? dt : void 0, children: [o.jsxs("div", { className: "jer-collection-name", children: [o.jsx("div", { className: "jer-collapse-icon jer-accordion-icon" + (re ? " jer-rotate-90" : ""), style: { zIndex: 11 + 2 * S.level, transition: ve }, onClick: dt, children: o.jsx(We, { name: "chevron", rotate: re, nodeData: S }) }), fn && o.jsx(mt, Object.assign({}, Lt)), !ee && o.jsx("span", { className: "jer-brackets jer-bracket-open", style: t("bracket", S), children: yt.open })] }), !ee && It && o.jsx("div", { className: "jer-collection-item-count" + (It ? " jer-visible" : " jer-hidden"), style: Object.assign(Object.assign({}, t("itemCount", S)), { transition: ve }), children: Te === 1 ? G("ITEM_SINGLE", Object.assign(Object.assign({}, S), { size: 1 }), 1) : G("ITEMS_MULTIPLE", S, Te) }), o.jsx("div", { className: "jer-brackets" + (bt ? " jer-visible" : " jer-hidden"), style: Object.assign(Object.assign({}, t("bracket", S)), { transition: ve }), children: yt.close }), _t] }) : U ? o.jsx(o.Fragment, {}) : o.jsxs("div", { className: "jer-collection-header-row", style: { position: "relative" }, children: [o.jsx(mt, Object.assign({}, Lt)), _t] }), o.jsxs("div", { className: "jer-collection-inner", style: Object.assign(Object.assign({ overflowY: bt || nt ? "clip" : "visible", maxHeight: ct ? void 0 : rt }, t("collectionInner", S)), { transition: ve }), ref: Ce, children: [jn, o.jsx("div", { className: ee ? "jer-collection-error-row" : "jer-collection-error-row-edit", children: Ke && o.jsx("span", { className: "jer-error-slug", style: t("error", S), children: Ke }) }), !ee && ft && o.jsx("div", { className: "jer-brackets jer-bracket-outside", style: Object.assign(Object.assign({}, t("bracket", S)), { marginLeft: (k < 3 ? -1 : k < 6 ? -0.5 : 0) + "em" }), children: yt.close })] }), o.jsx(Ze, { position: "below", nodeData: S })] }));
   return P ? o.jsx(P, Object.assign({ customNodeProps: oe }, Kt, { children: zt })) : zt;
 }, er = { ITEM_SINGLE: "{{count}} item", ITEMS_MULTIPLE: "{{count}} items", KEY_NEW: "Enter new key", KEY_SELECT: "Select key", NO_KEY_OPTIONS: "No key options", ERROR_KEY_EXISTS: "Key already exists", ERROR_INVALID_JSON: "Invalid JSON", ERROR_UPDATE: "Update unsuccessful", ERROR_DELETE: "Delete unsuccessful", ERROR_ADD: "Adding node unsuccessful", DEFAULT_STRING: "New data!", DEFAULT_NEW_KEY: "key", SHOW_LESS: "(Show less)", EMPTY_STRING: "<empty string>", TOOLTIP_COPY: "Copy to clipboard", TOOLTIP_EDIT: "Edit", TOOLTIP_DELETE: "Delete", TOOLTIP_ADD: "Add" }, tr = (e, t) => (n, r, a) => ((i, s, p, d, l) => {
   if (s[d]) {
@@ -647,7 +647,7 @@ var Jt = [], at = [];
   }
 })(':root{--jer-select-border:#b6b6b6;--jer-select-focus:#777;--jer-select-arrow:#777;--jer-form-border:1px solid #ededf0;--jer-form-border-focus:1px solid #e2e2e2;--jer-highlight-color:#b3d8ff}.jer-visible{opacity:1}.jer-hidden{opacity:0}.jer-select select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;color:#000;cursor:inherit;font-family:inherit;font-size:.8em;line-height:inherit;margin:0;outline:none;padding:0 1em 0 0;z-index:1}select::-ms-expand{display:none}.jer-select{align-items:center;background-color:#fff;background-image:linear-gradient(0deg,#f9f9f9,#fff 33%);border:1px solid var(--jer-select-border);border-radius:.25em;cursor:pointer;display:grid;grid-template-areas:"select";line-height:1.1;max-width:15ch;min-width:12ch;padding:.25em .5em;position:relative}.jer-select select,.jer-select:after{grid-area:select}.jer-select:not(.jer-select--multiple):after{background-color:var(--jer-select-arrow);clip-path:polygon(100% 0,0 0,50% 100%);content:"";height:.5em;justify-self:end;width:.8em}select:focus+.focus{border:1px solid var(--jer-select-focus);border-radius:inherit;bottom:-1px;left:-1px;position:absolute;right:-1px;top:-1px}.jer-select-inner{text-overflow:ellipsis;width:100%}.jer-editor-container{border-radius:.5em;font-size:16px;line-height:1;padding:1em 1em 1em 2em;position:relative;text-align:left}.jer-editor-container textarea{border:var(--jer-form-border);border-radius:.3em;color:var(--jer-input-color);outline:none}.jer-editor-container textarea:focus{border:var(--jer-form-border-focus)}.jer-editor-container input{border:var(--jer-form-border);border-radius:.3em;font-family:inherit;outline:none}.jer-editor-container input:focus{border:var(--jer-form-border-focus)}.jer-editor-container ::selection{background-color:var(--jer-highlight-color)}.jer-collection-header-row,.jer-value-main-row{align-items:center;display:flex;gap:.3em;min-height:1.7em}.jer-collection-header-row{display:flex;flex-wrap:wrap}.jer-collapse-icon{left:-1.2em;position:absolute;top:.35em}.jer-collection-inner{position:relative}.jer-collection-text-edit{align-items:flex-start;display:flex;flex-direction:column;gap:.3em;line-height:1.1em}.jer-collection-text-area{font-family:inherit;font-size:.85em;max-height:40em;overflow:hidden;padding:.2em .5em 0;resize:both}.jer-collection-input-button-row{display:flex;font-size:150%;justify-content:flex-end;margin-top:.4em;width:100%}.jer-collection-error-row{bottom:.5em;position:absolute}.jer-error-slug{margin-left:1em}.jer-value-component{position:relative}.jer-value-main-row{display:flex;gap:0}.jer-value-and-buttons{align-items:center;display:flex;justify-content:flex-start;padding-left:.5em}.jer-value-error-row{position:absolute}.jer-value-string{line-height:1.3em;overflow-wrap:anywhere;white-space:pre-wrap;word-break:break-word}.jer-string-expansion{cursor:pointer;filter:saturate(50%);opacity:.6}.jer-show-less{font-size:80%}.jer-hyperlink{text-decoration:underline}.jer-input-text{font-family:inherit;font-size:.9em;height:1.4em;line-height:1.2em;margin:0;min-width:6em;overflow:hidden;padding:.25em .5em .2em;resize:none}.jer-input-boolean{margin-left:.3em;margin-right:.3em;transform:scale(1.5)}.jer-key-text{line-height:1.1em;white-space:pre-wrap;word-break:break-word}.jer-key-edit{font-size:inherit;font-size:.9em;padding:0 .3em}.jer-value-invalid{font-style:italic;opacity:.5}.jer-input-number{font-size:90%;min-width:3em}.jer-confirm-buttons,.jer-edit-buttons{align-items:center;cursor:pointer;display:flex;height:1em}.jer-input-buttons{gap:.4em}.jer-edit-buttons{gap:.4em;margin-left:.5em;opacity:0}.jer-confirm-buttons{gap:.2em;margin-left:.4em}.jer-edit-buttons:hover{opacity:1;position:relative}.jer-collection-header-row:hover>.jer-edit-buttons,.jer-value-and-buttons:hover>.jer-edit-buttons,.jer-value-main-row:hover>.jer-edit-buttons{opacity:1}.jer-copy-pulse{position:relative;transition:.3s}.jer-copy-pulse:hover{opacity:.85;transform:scale(1.2);transition:.3s}.jer-copy-pulse:after{border-radius:50%;box-shadow:0 0 15px 5px var(--jer-icon-copy-color);content:"";display:block;height:100%;left:0;opacity:0;position:absolute;top:0;transition:all .5s;width:100%}.jer-copy-pulse:active:after{border-radius:4em;box-shadow:0 0 0 0 var(--jer-icon-copy-color);left:0;opacity:1;position:absolute;top:0;transition:0s}.jer-copy-pulse:active{top:.07em}.jer-rotate-90{transform:rotate(-90deg)}.jer-icon:hover{opacity:.85;transform:scale(1.2);transition:.3s}.jer-empty-string{font-size:90%;font-style:italic}.jer-drag-n-drop-padding{border:1px dashed #e0e0e0;border-radius:.3em;height:.5em}.jer-clickzone{height:calc(100% - .8em);left:-1em;position:absolute;top:1.2em}', {});
 const nr = ({ data: e, setData: t, rootName: n = "root", onUpdate: r = () => {
-}, onEdit: a = r, onDelete: i = r, onAdd: s = r, onChange: p, onError: d, onEditEvent: l, showErrorMessages: u = !0, enableClipboard: c = !0, indent: h = 2, collapse: f = !1, collapseAnimationTime: m = 300, showCollectionCount: b = !0, restrictEdit: D = !1, restrictDelete: O = !1, restrictAdd: w = !1, restrictTypeSelection: N = !1, restrictDrag: _ = !0, viewOnly: W, searchFilter: z, searchText: H, searchDebounceTime: X = 350, keySort: $ = !1, showArrayIndices: C = !0, arrayIndexFromOne: k = !1, showStringQuotes: L = !0, showIconTooltips: Y = !1, defaultValue: ae = null, newKeyOptions: Z, minWidth: ne = 250, maxWidth: G = "min(600px, 90vw)", rootFontSize: M, stringTruncate: F = 250, translations: ge = {}, className: B, id: R, customText: V = {}, customNodeDefinitions: q = [], customButtons: me = [], jsonParse: Ie = JSON.parse, jsonStringify: Ne = (re, ue) => JSON.stringify(re, ue, 2), TextEditor: je, errorMessageTimeout: de = 2500, keyboardControls: be = {}, externalTriggers: Ye, insertAtTop: Ce = !1, onCollapse: nt, collapseClickZones: rt = ["header", "left"] }) => {
+}, onEdit: a = r, onDelete: i = r, onAdd: s = r, onChange: p, onError: d, onEditEvent: l, showErrorMessages: u = !0, enableClipboard: c = !0, indent: h = 2, collapse: f = !1, collapseAnimationTime: m = 300, showCollectionCount: b = !0, restrictEdit: D = !1, restrictDelete: O = !1, restrictAdd: w = !1, restrictTypeSelection: N = !1, restrictDrag: _ = !0, viewOnly: W, searchFilter: z, searchText: H, searchDebounceTime: X = 350, keySort: B = !1, showArrayIndices: C = !0, arrayIndexFromOne: k = !1, showStringQuotes: L = !0, showIconTooltips: Y = !1, defaultValue: ae = null, newKeyOptions: Z, minWidth: ne = 250, maxWidth: G = "min(600px, 90vw)", rootFontSize: M, stringTruncate: F = 250, translations: ge = {}, className: $, id: R, customText: V = {}, customNodeDefinitions: q = [], customButtons: me = [], jsonParse: Ie = JSON.parse, jsonStringify: Ne = (re, ue) => JSON.stringify(re, ue, 2), TextEditor: je, errorMessageTimeout: de = 2500, keyboardControls: be = {}, externalTriggers: Ye, insertAtTop: Ce = !1, onCollapse: nt, collapseClickZones: rt = ["header", "left"] }) => {
   const { getStyles: re } = Oe(), { setCurrentlyEditingElement: ue } = He(), ve = le((() => it(f)), [f]), xe = le((() => tr(ge, V)), [ge, V]), [S, K] = J(H), [Q, Te] = (({ setData: v, data: j }) => {
     const [E, A] = J(v ? void 0 : j), T = Re(((g) => {
       v ? v(g) : A(g);
@@ -715,11 +715,11 @@ const nr = ({ data: e, setData: t, rootName: n = "root", onUpdate: r = () => {
     }), [v]);
   })(Ye, Xe);
   const Ze = Re(((v, j) => {
-    $ !== !1 && (typeof $ != "function" ? v.sort(((E, A) => {
+    B !== !1 && (typeof B != "function" ? v.sort(((E, A) => {
       const T = j(E)[0], g = j(A)[0];
       return T < g ? -1 : T > g ? 1 : 0;
-    })) : v.sort(((E, A) => $(j(E), j(A)))));
-  }), [$]), pe = pn(q, Ae), ee = { mainContainerRef: Ee, name: n, nodeData: Ae, onEdit: (v, j) => Qe(void 0, void 0, void 0, (function* () {
+    })) : v.sort(((E, A) => B(j(E), j(A)))));
+  }), [B]), pe = pn(q, Ae), ee = { mainContainerRef: Ee, name: n, nodeData: Ae, onEdit: (v, j) => Qe(void 0, void 0, void 0, (function* () {
     const { currentData: E, newData: A, currentValue: T, newValue: g } = st(Q, j, v, "update");
     if (T !== g) return yield Pe(a, { currentData: E, newData: A, currentValue: T, newValue: g, name: j.slice(-1)[0], path: j });
   })), onDelete: (v, j) => Qe(void 0, void 0, void 0, (function* () {
@@ -735,8 +735,8 @@ const nr = ({ data: e, setData: t, rootName: n = "root", onUpdate: r = () => {
     v.slice(0, -1).join(".") === j.slice(0, -1).join(".") && typeof x == "number" && typeof U == "number" && x < U && (U -= 1);
     const te = typeof U == "number" ? { insert: !0 } : E === "above" ? { insertBefore: oe } : { insertAfter: oe }, { newData: ze, newValue: Me } = st(T, [...P, U], g, "add", te);
     return yield Pe(a, { currentData: A, newData: ze, currentValue: g, newValue: Me, name: j.slice(-1)[0], path: j });
-  })), showCollectionCount: b, collapseFilter: ve, collapseAnimationTime: m, restrictEditFilter: Ve, restrictDeleteFilter: Ke, restrictAddFilter: ke, restrictTypeSelection: N, restrictDragFilter: se, canDragOnto: !1, searchFilter: _e, searchText: S, enableClipboard: c, keySort: $, sort: Ze, showArrayIndices: C, arrayIndexFromOne: k, showStringQuotes: L, showIconTooltips: Y, indent: h, defaultValue: ae, newKeyOptions: Z, stringTruncate: F, translate: xe, customNodeDefinitions: q, customNodeData: pe, customButtons: me, parentData: null, jsonParse: fe, jsonStringify: we, TextEditor: je, errorMessageTimeout: de, handleKeyboard: Je, keyboardControls: ie, insertAtTop: { object: Ce === !0 || Ce === "object", array: Ce === !0 || Ce === "array" }, onCollapse: nt, editConfirmRef: Xe, collapseClickZones: rt }, Le = Object.assign(Object.assign({}, re("container", Ae)), { minWidth: ne, maxWidth: G });
-  return Le.fontSize = M ?? Le.fontSize, o.jsx("div", { id: R, ref: Ee, className: `jer-editor-container ${B ?? ""}`, style: Le, children: et(Q) && !pe.renderCollectionAsValue ? o.jsx(hn, Object.assign({ data: Q }, ee)) : o.jsx(un, Object.assign({ data: Q, showLabel: !0 }, ee)) });
+  })), showCollectionCount: b, collapseFilter: ve, collapseAnimationTime: m, restrictEditFilter: Ve, restrictDeleteFilter: Ke, restrictAddFilter: ke, restrictTypeSelection: N, restrictDragFilter: se, canDragOnto: !1, searchFilter: _e, searchText: S, enableClipboard: c, keySort: B, sort: Ze, showArrayIndices: C, arrayIndexFromOne: k, showStringQuotes: L, showIconTooltips: Y, indent: h, defaultValue: ae, newKeyOptions: Z, stringTruncate: F, translate: xe, customNodeDefinitions: q, customNodeData: pe, customButtons: me, parentData: null, jsonParse: fe, jsonStringify: we, TextEditor: je, errorMessageTimeout: de, handleKeyboard: Je, keyboardControls: ie, insertAtTop: { object: Ce === !0 || Ce === "object", array: Ce === !0 || Ce === "array" }, onCollapse: nt, editConfirmRef: Xe, collapseClickZones: rt }, Le = Object.assign(Object.assign({}, re("container", Ae)), { minWidth: ne, maxWidth: G });
+  return Le.fontSize = M ?? Le.fontSize, o.jsx("div", { id: R, ref: Ee, className: `jer-editor-container ${$ ?? ""}`, style: Le, children: et(Q) && !pe.renderCollectionAsValue ? o.jsx(hn, Object.assign({ data: Q }, ee)) : o.jsx(un, Object.assign({ data: Q, showLabel: !0 }, ee)) });
 }, ir = (e) => {
   var t;
   const [n, r] = J();
@@ -759,7 +759,7 @@ const nr = ({ data: e, setData: t, rootName: n = "root", onUpdate: r = () => {
   };
 };
 export {
-  Bn as IconAdd,
+  $n as IconAdd,
   Jn as IconCancel,
   Xn as IconChevron,
   Un as IconCopy,

package/dist/index.js

@@ -1,4 +1,4 @@
-import { A as s, B as t, D as r, c as i, d as l, E as o, F as d, a as u, G as n, J as c, L as F, N as g, S as m, T as p, e as P, U as h, V as D, k as v, l as S, i as f, m as y, W as V, Z as x, a0 as b, o as T, Y as A, p as G, q as L, n as O, s as R, M as E, t as I, v as N, X as C, w as U, g as j, x as B, $ as H, y as J, P as W, z as k, C as q, H as w, I as z, Q as K, K as M, R as Q, _ as X, r as Y, u as Z, b as _, f as $, h as aa, j as ea } from "./index-BoXm28ra.js";
+import { A as s, B as t, D as r, a as i, b as l, E as o, F as d, G as u, c as n, J as c, L as F, N as g, S as m, T as p, d as P, U as h, V as D, e as v, f as S, g as f, h as y, i as V, j as x, k as b, l as O, m as T, n as A, o as G, p as L, q as R, r as E, s as I, t as N, u as U, v as j, w as B, x as C, y as H, z as J, H as W, I as k, K as q, M as w, O as z, P as K, Q as M, R as Q, W as X, X as Y, Y as Z, Z as _, _ as $, $ as aa, a0 as ea } from "./index-BL3nv8aS.js";
 export {
   s as ArrayField,
   t as BooleanField,
@@ -24,19 +24,19 @@ export {
   V as buildDefaultValues,
   x as createFieldDescriptor,
   b as createRuleHandler,
-  T as defineNavigation,
-  A as evaluateCondition,
-  G as extractConstraints,
-  L as extractDescription,
-  O as extractPaths,
+  O as defineNavigation,
+  T as evaluateCondition,
+  A as extractConstraints,
+  G as extractDescription,
+  L as extractPaths,
   R as extractPlaceholder,
   E as formatLabel,
   I as getAdditionalPropertiesSchema,
   N as getArrayItemsSchema,
-  C as getDefaultValue,
-  U as getFieldType,
-  j as getLanguage,
-  B as getPatternPropertiesSchemas,
+  U as getDefaultValue,
+  j as getFieldType,
+  B as getLanguage,
+  C as getPatternPropertiesSchemas,
   H as getSchemaResolver,
   J as getTupleSchemas,
   W as isAnyOfField,

package/dist/mf-common.js

@@ -16,7 +16,7 @@ const i = { react: "19.2.3", "react-dom": "19.2.3", "react-router": "7.12.0" },
   },
   "@grasp-labs/ds-microfrontends-integration": {
     singleton: !0,
-    requiredVersion: ">=0.17.0 <1.0.0"
+    requiredVersion: ">=1.0.0 <2.0.0"
   }
 }, c = (e) => `microfrontends/${e}/`, a = (e, r = {}) => {
   const t = c(e);

package/dist/types/Navigation.d.ts

@@ -1,5 +1,5 @@
 import { IconName } from '@grasp-labs/ds-react-components';
-export type BaseItem = {
+export type BaseItem<TLocaleCode extends string = string> = {
     /**
      * Display label used as fallback when translation is not available
      */
@@ -7,8 +7,14 @@ export type BaseItem = {
     /**
      * Translation key for internationalization.
      * Must be placed in 'navigation' translation namespace in the host application for it to work.
+     * Kept for backward compatibility with hosts that resolve labels by key.
      */
-    labelKey: string;
+    labelKey?: string;
+    /**
+     * Optional inline translation dictionary for navigation labels.
+     * Use `ComposableNavigationConfig<LocaleCode>` (or `defineNavigation`) to enforce a consistent locale set.
+     */
+    translations?: Record<TLocaleCode, string>;
     icon: IconName;
     /**
      * Groups required to access this navigation item.
@@ -18,37 +24,39 @@ export type BaseItem = {
      */
     requiredGroups?: string[];
 };
-export type RouteConfig = BaseItem & {
-    path: string;
+export type RouteConfig<TLocaleCode extends string = string, TPath extends string = string> = BaseItem<TLocaleCode> & {
+    path: TPath;
     type?: "hidden" | "visible";
 };
-export type CategoryConfig = BaseItem & {
+export type CategoryConfig<TLocaleCode extends string = string, TPath extends string = string> = BaseItem<TLocaleCode> & {
     type: "category";
-    children: Record<string, NavigationItem>;
+    children: Record<string, NavigationItem<TLocaleCode, TPath>>;
 };
-export type NavigationItem = RouteConfig | CategoryConfig;
+export type NavigationItem<TLocaleCode extends string = string, TPath extends string = string> = RouteConfig<TLocaleCode, TPath> | CategoryConfig<TLocaleCode, TPath>;
 /**
  * INDEX is a mandatory route representing the root of the microfrontend, used as the parent navigation item in the sidebar
  * @deprecated Use ComposableNavigationConfig for new microfrontends
  */
-export type IndexNavigationConfig = {
-    INDEX: RouteConfig;
+export type IndexNavigationConfig<TLocaleCode extends string = string, TPath extends string = string> = {
+    INDEX: RouteConfig<TLocaleCode, TPath>;
 };
 /**
  * @deprecated Use ComposableNavigationConfig for new microfrontends
  */
-export type NavigationConfig<TKeys extends string = string> = IndexNavigationConfig & Record<TKeys, NavigationItem>;
+export type NavigationConfig<TKeys extends string = string, TLocaleCode extends string = string, TPath extends string = string> = IndexNavigationConfig<TLocaleCode, TPath> & Record<TKeys, NavigationItem<TLocaleCode, TPath>>;
 /**
  * Composable navigation configuration where each entry is a standalone NavigationItem.
  */
-export type ComposableNavigationConfig = Record<string, NavigationItem>;
+export type ComposableNavigationConfig<TLocaleCode extends string = string, TPath extends string = string> = Record<string, NavigationItem<TLocaleCode, TPath>>;
+type InferLocaleCode<T> = T extends Record<string, NavigationItem<infer TLocaleCode, string>> ? TLocaleCode : string;
 export type UnionToIntersection<U> = (U extends unknown ? (x: U) => void : never) extends (x: infer I) => void ? I : never;
 /**
  * Recursively extracts a flat path map from a navigation config.
  * For route items, extracts `{ KEY: path }`. For categories, recurses into children.
  */
-export type ExtractPaths<T extends Record<string, NavigationItem>> = {
-    [K in keyof T as T[K] extends CategoryConfig ? never : K]: T[K] extends RouteConfig ? T[K]["path"] : never;
+export type ExtractPaths<T extends Record<string, NavigationItem<TLocaleCode, string>>, TLocaleCode extends string = InferLocaleCode<T>> = {
+    [K in keyof T as T[K] extends CategoryConfig<TLocaleCode, string> ? never : K]: T[K] extends RouteConfig<TLocaleCode, string> ? T[K]["path"] : never;
 } & UnionToIntersection<{
-    [K in keyof T]: T[K] extends CategoryConfig ? ExtractPaths<T[K]["children"]> : never;
+    [K in keyof T]: T[K] extends CategoryConfig<TLocaleCode, string> ? ExtractPaths<T[K]["children"], TLocaleCode> : never;
 }[keyof T]>;
+export {};

package/dist/utils/navigation.d.ts

@@ -6,18 +6,18 @@ import { ComposableNavigationConfig, ExtractPaths } from '../types/Navigation';
  * const PageRoutes = extractPaths(navigationConfig);
  * // PageRoutes.DASHBOARD === "/dashboard"
  */
-export declare const extractPaths: <const T extends ComposableNavigationConfig>(config: T) => ExtractPaths<T>;
+export declare const extractPaths: <const TLocaleCode extends string, const T extends ComposableNavigationConfig<TLocaleCode>>(config: T) => ExtractPaths<T, TLocaleCode>;
 /**
  * Defines a navigation config and extracts its page routes in one step.
  *
  * @example
  * const { navigationConfig, pageRoutes } = defineNavigation({
- *   INDEX: { label: "Home", labelKey: "home", path: "/", icon: "home" },
+ *   INDEX: { label: "Home", path: "/", icon: "home" },
  * });
  * export const PageRoutes = pageRoutes;
  * export default navigationConfig;
  */
-export declare const defineNavigation: <const T extends ComposableNavigationConfig>(config: T) => {
+export declare const defineNavigation: <const TLocaleCode extends string, const T extends ComposableNavigationConfig<TLocaleCode>>(config: T) => {
     navigationConfig: T;
-    pageRoutes: ExtractPaths<T>;
+    pageRoutes: ExtractPaths<T, TLocaleCode>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grasp-labs/ds-microfrontends-integration",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "private": false,
   "license": "Apache-2.0",
   "type": "module",
@@ -42,7 +42,9 @@
     "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
     "test": "vitest run",
     "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage"
+    "test:coverage": "vitest run --coverage",
+    "tsc": "tsc --noEmit",
+    "check": "npm run tsc && npm run lint && npm run format:check && npm run test"
   },
   "peerDependencies": {
     "@module-federation/vite": "^1.0.0",
@@ -61,9 +63,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.32.0",
-    "ajv": "^8.17.1",
-    "ajv-formats": "^3.0.1",
-    "@grasp-labs/ds-react-components": "^0.23.0",
+    "@grasp-labs/ds-react-components": "^1.6.0",
     "@hookform/resolvers": "^5.2.2",
     "@module-federation/vite": "1.9.4",
     "@storybook/addon-a11y": "^10.1.11",
@@ -79,6 +79,8 @@
     "@types/react-dom": "^19.1.7",
     "@vitejs/plugin-react": "^5.1.2",
     "@vitest/coverage-v8": "^4.0.16",
+    "ajv": "^8.17.1",
+    "ajv-formats": "^3.0.1",
     "babel-plugin-react-compiler": "^1.0.0",
     "eslint": "^9.32.0",
     "eslint-config-prettier": "^10.1.8",