@plumile/ui 0.1.68 → 0.1.69

package/lib/esm/atomic/molecules/toast/ToastViewport.js

@@ -4,20 +4,20 @@ import { Button as n } from "../../atoms/button/Button.js";
 import { ModalCloseSvg as r } from "../../../icons/ModalCloseSvg.js";
 import { actions as i, closeButton as a, header as o, kindRecipe as s, message as c, progressBar as l, progressTrack as u, title as d, toast as f, viewport as p } from "./toast.css.js";
 import { INFO_TOAST_DURATION_MS as m } from "./constants.js";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
-import { useMemo as _ } from "react";
+import { useMemo as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/atomic/molecules/toast/ToastViewport.tsx
 var v = ({ toasts: v, onDismiss: y, dismissLabel: b, className: x }) => {
-	let { t: S } = t(), C = b ?? S("toast.dismissAriaLabel"), w = _(() => v.map((t) => {
-		let p = t.kind ?? "info", _ = t.actions ?? [], v = null;
-		t.message != null && (v = /* @__PURE__ */ h("div", {
+	let { t: S } = t(), C = b ?? S("toast.dismissAriaLabel"), w = h(() => v.map((t) => {
+		let p = t.kind ?? "info", h = t.actions ?? [], v = null;
+		t.message != null && (v = /* @__PURE__ */ g("div", {
 			className: c,
 			children: t.message
 		}));
 		let b = null;
-		_.length > 0 && (b = /* @__PURE__ */ h("div", {
+		h.length > 0 && (b = /* @__PURE__ */ g("div", {
 			className: i,
-			children: _.map((e) => /* @__PURE__ */ h(n, {
+			children: h.map((e) => /* @__PURE__ */ g(n, {
 				type: "button",
 				size: "small",
 				variant: "secondary",
@@ -26,29 +26,29 @@ var v = ({ toasts: v, onDismiss: y, dismissLabel: b, className: x }) => {
 			}, e.id))
 		}));
 		let x = null;
-		return p === "info" && (x = /* @__PURE__ */ h("div", {
+		return p === "info" && (x = /* @__PURE__ */ g("div", {
 			className: u,
 			"aria-hidden": "true",
-			children: /* @__PURE__ */ h("div", {
+			children: /* @__PURE__ */ g("div", {
 				className: l,
 				style: { animationDuration: `${m}ms` }
 			})
-		})), /* @__PURE__ */ g("div", {
+		})), /* @__PURE__ */ _("div", {
 			className: e(f, s({ kind: p })),
 			children: [
-				/* @__PURE__ */ g("div", {
+				/* @__PURE__ */ _("div", {
 					className: o,
-					children: [/* @__PURE__ */ h("div", {
+					children: [/* @__PURE__ */ g("div", {
 						className: d,
 						children: t.title
-					}), /* @__PURE__ */ h("button", {
+					}), /* @__PURE__ */ g("button", {
 						type: "button",
 						className: a,
 						"aria-label": C,
 						onClick: () => {
 							y(t.id);
 						},
-						children: /* @__PURE__ */ h(r, {
+						children: /* @__PURE__ */ g(r, {
 							width: 18,
 							height: 18,
 							"aria-hidden": "true"
@@ -65,7 +65,7 @@ var v = ({ toasts: v, onDismiss: y, dismissLabel: b, className: x }) => {
 		C,
 		v
 	]);
-	return v.length === 0 ? null : /* @__PURE__ */ h("div", {
+	return v.length === 0 ? null : /* @__PURE__ */ g("div", {
 		className: e(p, x),
 		children: w
 	});

package/lib/esm/atomic/organisms/login_form/LoginForm.js

@@ -4,8 +4,8 @@ import { Button as n } from "../../atoms/button/Button.js";
 import { FormError as r } from "../../molecules/form_error/FormError.js";
 import { FormField as i } from "../../molecules/form_field/FormField.js";
 import { useLoginForm as a } from "./useLoginForm.js";
-import "../../../index.js";
 import { form as o } from "./loginForm.css.js";
+import "../../../index.js";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/atomic/organisms/login_form/LoginForm.tsx
 var l = (l) => {

package/lib/esm/atomic/organisms/sidebar/NavigationSidebar.js

@@ -3,28 +3,28 @@ import { useUiTranslation as t } from "../../../i18n/useUiTranslation.js";
 import { SidebarContainer as n } from "./SidebarContainer.js";
 import { ChevronLeftIcon as r, ChevronRightIcon as i } from "./icons.js";
 import { childIcon as a, childLabel as o, childLinkRecipe as s, collapseButton as c, collapseButtonLabel as l, collapseButtonStateRecipe as u, collapsibleContent as d, collapsibleItem as f, collapsibleSection as p, collapsibleStateRecipe as m, iconBaseLayer as h, iconHiddenOnHover as g, iconVisibleOnHover as _, iconWrapper as v, itemWrapper as y, label as b, navButton as x, navGapRecipe as ee, navLinkRecipe as S, navWithTrailingAction as C, trailingActionButton as w, trailingActionIconHidden as T, trailingActionIconVisible as E, trailingActionIconWrapper as D, trailingIconWrapper as te } from "./navigationSidebar.css.js";
-import { Fragment as O, jsx as k, jsxs as A } from "react/jsx-runtime";
-import { useCallback as j, useMemo as M, useState as N } from "react";
+import { useCallback as O, useMemo as k, useState as A } from "react";
+import { Fragment as j, jsx as M, jsxs as N } from "react/jsx-runtime";
 import { Link as P, useLocation as F } from "@plumile/router";
 //#region src/atomic/organisms/sidebar/NavigationSidebar.tsx
 var I = ({ id: t, isExpanded: n, children: r }) => {
 	let i = "collapsed";
-	return n && (i = "expanded"), /* @__PURE__ */ k("div", {
+	return n && (i = "expanded"), /* @__PURE__ */ M("div", {
 		id: t,
 		"aria-hidden": !n,
 		className: e(p, m({ state: i })),
-		children: /* @__PURE__ */ k("div", {
+		children: /* @__PURE__ */ M("div", {
 			className: d,
 			children: r
 		})
 	});
 }, L = ({ items: d, headerSlot: p, isCollapsed: m, onCollapsedChange: L, showCollapseToggle: R = !0 }) => {
-	let { t: z } = t(), [B, V] = N(!1), [H, U] = N({}), W = m != null, G = m ?? B, { pathname: K } = F(), q = (e, t) => t === !0 ? K === e : K === e ? !0 : K.startsWith(`${e}/`), J = j((e, t) => {
+	let { t: z } = t(), [B, V] = A(!1), [H, U] = A({}), W = m != null, G = m ?? B, { pathname: K } = F(), q = (e, t) => t === !0 ? K === e : K === e ? !0 : K.startsWith(`${e}/`), J = O((e, t) => {
 		U((n) => ({
 			...n,
 			[e]: t
 		}));
-	}, []), Y = j(() => {
+	}, []), Y = O(() => {
 		let e = !G;
 		W || V(e), L?.(e);
 	}, [
@@ -33,22 +33,22 @@ var I = ({ id: t, isExpanded: n, children: r }) => {
 		L
 	]), X;
 	G || (X = p ?? void 0);
-	let Z = M(() => {
+	let Z = k(() => {
 		if (!R) return null;
 		let t = r, n = z("navigation.sidebar.actions.collapseAriaLabel");
 		G && (t = i, n = z("navigation.sidebar.actions.expandAriaLabel"));
 		let a = "expanded";
 		G && (a = "collapsed");
 		let o = null;
-		return G || (o = /* @__PURE__ */ k("span", {
+		return G || (o = /* @__PURE__ */ M("span", {
 			className: l,
 			children: z("navigation.sidebar.actions.collapse")
-		})), /* @__PURE__ */ A("button", {
+		})), /* @__PURE__ */ N("button", {
 			type: "button",
 			onClick: Y,
 			className: e(c, u({ state: a })),
 			"aria-label": n,
-			children: [/* @__PURE__ */ k(t, { size: 20 }), o]
+			children: [/* @__PURE__ */ M(t, { size: 20 }), o]
 		});
 	}, [
 		Y,
@@ -56,7 +56,7 @@ var I = ({ id: t, isExpanded: n, children: r }) => {
 		R,
 		z
 	]);
-	return /* @__PURE__ */ k(n, {
+	return /* @__PURE__ */ M(n, {
 		headerSlot: X,
 		footerSlot: Z,
 		isCollapsed: G,
@@ -66,45 +66,45 @@ var I = ({ id: t, isExpanded: n, children: r }) => {
 			u && (l = `navigation-sidebar-${t.key}-children`), r && n.some((e) => q(e.to)) && (i = !0);
 			let d = null;
 			!G && t.trailingAction != null && (d = t.trailingAction);
-			let p = d != null, m = t.hoverIcon !== void 0 && t.hoverIcon !== null, j = t.trailingIcon !== void 0 && t.trailingIcon !== null, M = t.trailingHoverIcon !== void 0 && t.trailingHoverIcon !== null, N = !G && !p && (j || M), F;
+			let p = d != null, m = t.hoverIcon !== void 0 && t.hoverIcon !== null, O = t.trailingIcon !== void 0 && t.trailingIcon !== null, k = t.trailingHoverIcon !== void 0 && t.trailingHoverIcon !== null, A = !G && !p && (O || k), F;
 			G && (F = t.label);
 			let L = "expanded";
 			G && (L = "collapsed");
 			let R = ee({ state: L }), z;
 			p && (z = C);
 			let B = null;
-			G || (B = /* @__PURE__ */ k("span", {
+			G || (B = /* @__PURE__ */ M("span", {
 				className: b,
 				children: t.label
 			}));
 			let V = null;
-			m && (V = /* @__PURE__ */ k("span", {
+			m && (V = /* @__PURE__ */ M("span", {
 				className: _,
 				children: t.hoverIcon
 			}));
-			let U = /* @__PURE__ */ A("span", {
+			let U = /* @__PURE__ */ N("span", {
 				className: v,
-				children: [/* @__PURE__ */ k("span", {
+				children: [/* @__PURE__ */ M("span", {
 					className: e(h, { [g]: m }),
 					children: t.icon
 				}), V]
 			}), W = null;
-			if (N) {
+			if (A) {
 				let n = null;
-				j && (n = /* @__PURE__ */ k("span", {
-					className: e(h, { [g]: M }),
+				O && (n = /* @__PURE__ */ M("span", {
+					className: e(h, { [g]: k }),
 					children: t.trailingIcon
 				}));
 				let r = null;
-				M && (r = /* @__PURE__ */ k("span", {
+				k && (r = /* @__PURE__ */ M("span", {
 					className: _,
 					children: t.trailingHoverIcon
-				})), W = /* @__PURE__ */ A("span", {
+				})), W = /* @__PURE__ */ N("span", {
 					className: te,
 					children: [n, r]
 				});
 			}
-			let K = /* @__PURE__ */ A(O, { children: [
+			let K = /* @__PURE__ */ N(j, { children: [
 				U,
 				B,
 				W
@@ -117,7 +117,7 @@ var I = ({ id: t, isExpanded: n, children: r }) => {
 				q(t.to, t.exact) && (n = "active"), X = e(S({ state: n }), R, z);
 			}
 			let Z;
-			Z = r ? /* @__PURE__ */ k("button", {
+			Z = r ? /* @__PURE__ */ M("button", {
 				type: "button",
 				className: X,
 				"aria-expanded": i,
@@ -125,7 +125,7 @@ var I = ({ id: t, isExpanded: n, children: r }) => {
 				"aria-label": F,
 				onClick: Y,
 				children: K
-			}) : /* @__PURE__ */ k(P, {
+			}) : /* @__PURE__ */ M(P, {
 				to: t.to,
 				className: X,
 				exact: t.exact,
@@ -137,17 +137,17 @@ var I = ({ id: t, isExpanded: n, children: r }) => {
 				let e = (e) => {
 					e.preventDefault(), e.stopPropagation(), d.onClick();
 				}, t = d.hoverIcon, n = t != null, r = null;
-				n && (r = /* @__PURE__ */ k("span", {
+				n && (r = /* @__PURE__ */ M("span", {
 					className: E,
 					children: t
-				})), Q = /* @__PURE__ */ k("button", {
+				})), Q = /* @__PURE__ */ M("button", {
 					type: "button",
 					"aria-label": d.label,
 					onClick: e,
 					className: w,
-					children: /* @__PURE__ */ A("span", {
+					children: /* @__PURE__ */ N("span", {
 						className: D,
-						children: [/* @__PURE__ */ k("span", {
+						children: [/* @__PURE__ */ M("span", {
 							className: T,
 							children: d.icon
 						}), r]
@@ -155,30 +155,30 @@ var I = ({ id: t, isExpanded: n, children: r }) => {
 				});
 			}
 			let $ = null;
-			return u && l != null && ($ = /* @__PURE__ */ k(I, {
+			return u && l != null && ($ = /* @__PURE__ */ M(I, {
 				id: l,
 				isExpanded: i,
 				children: n.map((e) => {
 					let t = null;
-					e.icon != null && (t = /* @__PURE__ */ k("span", {
+					e.icon != null && (t = /* @__PURE__ */ M("span", {
 						className: a,
 						children: e.icon
 					}));
 					let n = "default";
-					return q(e.to) && (n = "active"), /* @__PURE__ */ k("div", {
+					return q(e.to) && (n = "active"), /* @__PURE__ */ M("div", {
 						className: f,
-						children: /* @__PURE__ */ A(P, {
+						children: /* @__PURE__ */ N(P, {
 							to: e.to,
 							className: s({ state: n }),
 							"aria-label": e.label,
-							children: [t, /* @__PURE__ */ k("span", {
+							children: [t, /* @__PURE__ */ M("span", {
 								className: o,
 								children: e.label
 							})]
 						})
 					}, e.key);
 				})
-			})), /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ A("div", {
+			})), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ N("div", {
 				className: y,
 				children: [Z, Q]
 			}), $] }, t.key);

package/lib/esm/atomic/organisms/sidebar/icons.js

@@ -1,7 +1,7 @@
-import { ChevronDownSvg as e } from "../../../icons/ChevronDownSvg.js";
-import { SidebarHomeSvg as t } from "../../../icons/SidebarHomeSvg.js";
-import { ChevronLeftSvg as n } from "../../../icons/ChevronLeftSvg.js";
-import { ChevronRightSvg as r } from "../../../icons/ChevronRightSvg.js";
+import { ChevronLeftSvg as e } from "../../../icons/ChevronLeftSvg.js";
+import { ChevronRightSvg as t } from "../../../icons/ChevronRightSvg.js";
+import { SidebarHomeSvg as n } from "../../../icons/SidebarHomeSvg.js";
+import { ChevronDownSvg as r } from "../../../icons/ChevronDownSvg.js";
 import { GlobeSvg as i } from "../../../icons/GlobeSvg.js";
 import { ProjectsFolderSvg as a } from "../../../icons/ProjectsFolderSvg.js";
 import { SidebarInitiativesSvg as o } from "../../../icons/SidebarInitiativesSvg.js";
@@ -12,10 +12,10 @@ import { SidebarTasksSvg as u } from "../../../icons/SidebarTasksSvg.js";
 import { SidebarTeamSvg as d } from "../../../icons/SidebarTeamSvg.js";
 import { jsx as f } from "react/jsx-runtime";
 //#region src/atomic/organisms/sidebar/icons.tsx
-var p = ({ size: e = 24, className: n }) => /* @__PURE__ */ f(t, {
+var p = ({ size: e = 24, className: t }) => /* @__PURE__ */ f(n, {
 	width: e,
 	height: e,
-	className: n
+	className: t
 }), m = ({ size: e = 24, className: t }) => /* @__PURE__ */ f(u, {
 	width: e,
 	height: e,
@@ -40,18 +40,18 @@ var p = ({ size: e = 24, className: n }) => /* @__PURE__ */ f(t, {
 	width: e,
 	height: e,
 	className: t
-}), b = ({ size: t = 24, className: n }) => /* @__PURE__ */ f(e, {
-	width: t,
-	height: t,
-	className: n
-}), x = ({ size: e = 24, className: t }) => /* @__PURE__ */ f(r, {
+}), b = ({ size: e = 24, className: t }) => /* @__PURE__ */ f(r, {
 	width: e,
 	height: e,
 	className: t
-}), S = ({ size: e = 24, className: t }) => /* @__PURE__ */ f(n, {
+}), x = ({ size: e = 24, className: n }) => /* @__PURE__ */ f(t, {
 	width: e,
 	height: e,
-	className: t
+	className: n
+}), S = ({ size: t = 24, className: n }) => /* @__PURE__ */ f(e, {
+	width: t,
+	height: t,
+	className: n
 }), C = ({ size: e = 24, className: t }) => /* @__PURE__ */ f(c, {
 	width: e,
 	height: e,

package/lib/esm/atomic/templates/auth_layout/AuthLayout.js

@@ -1,6 +1,6 @@
 import { formCardStyle as e, headerStyle as t, mainStyle as n, subtitleStyle as r, titleStyle as i } from "./authLayout.css.js";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/atomic/templates/auth_layout/AuthLayout.tsx
 var s = (s) => {
 	let { title: c, subtitle: l, children: u } = s, d = null;

package/lib/esm/backoffice/atoms/copyable_text/CopyableText.js

@@ -2,8 +2,8 @@ import { cx as e } from "../../../theme/tools.js";
 import { Button as t } from "../../../atomic/atoms/button/Button.js";
 import { feedback as n, root as r, value as i, valueNoTruncate as a } from "./copyableText.css.js";
 import "../../../index.js";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { useCallback as c, useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
+import { useCallback as o, useEffect as s, useMemo as c, useRef as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/backoffice/atoms/copyable_text/CopyableText.tsx
 var p = (e) => {
 	try {
@@ -15,16 +15,16 @@ var p = (e) => {
 		return !1;
 	}
 }, m = ({ value: m, copyValue: h, className: g, truncate: _ = !0, copyLabel: v = "Copy", copiedLabel: y = "Copied" }) => {
-	let [b, x] = f(!1), S = d(null), C = h ?? m, w = u(() => {
+	let [b, x] = u(!1), S = l(null), C = h ?? m, w = c(() => {
 		let t = null;
 		return _ || (t = a), e(i, t, g);
-	}, [g, _]), T = c(() => {
+	}, [g, _]), T = o(() => {
 		S.current != null && (window.clearTimeout(S.current), S.current = null);
 	}, []);
-	l(() => () => {
+	s(() => () => {
 		T();
 	}, [T]);
-	let E = c(async () => {
+	let E = o(async () => {
 		T();
 		let e = !1;
 		try {
@@ -41,20 +41,20 @@ var p = (e) => {
 	}, [T, C]), D = () => {
 		E().catch(() => {});
 	}, O = null;
-	return b && (O = /* @__PURE__ */ o("span", {
+	return b && (O = /* @__PURE__ */ d("span", {
 		className: n,
 		role: "status",
 		"aria-live": "polite",
 		children: y
-	})), /* @__PURE__ */ s("span", {
+	})), /* @__PURE__ */ f("span", {
 		className: r,
 		children: [
-			/* @__PURE__ */ o("span", {
+			/* @__PURE__ */ d("span", {
 				className: w,
 				title: m,
 				children: m
 			}),
-			/* @__PURE__ */ o(t, {
+			/* @__PURE__ */ d(t, {
 				type: "button",
 				variant: "secondary",
 				size: "small",

package/lib/esm/backoffice/atoms/shortcut_hint/ShortcutHint.js

@@ -1,17 +1,17 @@
-import { cx as e } from "../../../theme/tools.js";
-import { container as t, key as n } from "./shortcutHint.css.js";
+import { container as e, key as t } from "./shortcutHint.css.js";
+import { cx as n } from "../../../theme/tools.js";
 import "../../../index.js";
 import { jsx as r } from "react/jsx-runtime";
 //#region src/backoffice/atoms/shortcut_hint/ShortcutHint.tsx
 var i = ({ keys: i, className: a }) => {
 	let o = [];
 	return o = typeof i == "string" ? i.split(" ") : [...i], /* @__PURE__ */ r("span", {
-		className: e(t, a),
+		className: n(e, a),
 		"aria-hidden": "true",
-		children: o.map((e, t) => /* @__PURE__ */ r("kbd", {
-			className: n,
+		children: o.map((e, n) => /* @__PURE__ */ r("kbd", {
+			className: t,
 			children: e
-		}, `${e}-${t}`))
+		}, `${e}-${n}`))
 	});
 };
 //#endregion

package/lib/esm/backoffice/atoms/tag/Tag.js

@@ -2,25 +2,25 @@ import { cx as e } from "../../../theme/tools.js";
 import { ModalCloseSvg as t } from "../../../icons/ModalCloseSvg.js";
 import { removeButton as n, rootRecipe as r } from "./tag.css.js";
 import "../../../index.js";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { useId as o } from "react";
+import { useId as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/backoffice/atoms/tag/Tag.tsx
 var s = ({ children: s, tone: c = "neutral", className: l, onRemove: u, removeLabel: d = "Remove" }) => {
-	let f = o(), p = typeof u == "function", m = null;
-	return p && (m = /* @__PURE__ */ i("button", {
+	let f = i(), p = typeof u == "function", m = null;
+	return p && (m = /* @__PURE__ */ a("button", {
 		type: "button",
 		className: n,
 		onClick: u,
 		"aria-label": d,
 		"aria-describedby": f,
-		children: /* @__PURE__ */ i(t, {
+		children: /* @__PURE__ */ a(t, {
 			width: 14,
 			height: 14,
 			"aria-hidden": "true"
 		})
-	})), /* @__PURE__ */ a("span", {
+	})), /* @__PURE__ */ o("span", {
 		className: e(r({ tone: c }), l),
-		children: [/* @__PURE__ */ i("span", {
+		children: [/* @__PURE__ */ a("span", {
 			id: f,
 			children: s
 		}), m]

package/lib/esm/backoffice/molecules/backoffice_filter_drawer/BackofficeFilterDrawer.js

@@ -3,14 +3,14 @@ import { Input as t } from "../../../atomic/atoms/input/Input.js";
 import { ModalCloseSvg as n } from "../../../icons/ModalCloseSvg.js";
 import { backdrop as r, closeButton as i, drawer as a, drawerContainer as o, header as s, searchRow as c, section as l, sectionDescription as u, sectionHeader as d, sectionItem as f, sectionItems as p, sectionTitle as m, sections as h, subtitle as g, title as _, titleBlock as v } from "./backofficeFilterDrawer.css.js";
 import "../../../index.js";
-import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
-import { useEffect as S } from "react";
+import { useEffect as y } from "react";
+import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
 import { useTranslation as C } from "react-i18next";
 import { createPortal as w } from "react-dom";
 //#region src/backoffice/molecules/backoffice_filter_drawer/BackofficeFilterDrawer.tsx
 var T = ({ isOpen: T, title: E, sections: D, searchValue: O, onSearchChange: k, onClose: A, onReset: j }) => {
 	let { t: M } = C("ui"), N = E ?? M("backoffice.filterDrawer.title");
-	if (S(() => {
+	if (y(() => {
 		let e = (e) => {
 			e.key === "Escape" && T && A();
 		};
@@ -19,7 +19,7 @@ var T = ({ isOpen: T, title: E, sections: D, searchValue: O, onSearchChange: k,
 		};
 	}, [T, A]), !T) return null;
 	let P = D.reduce((e, t) => e + t.items.length, 0), F = null;
-	k != null && (F = /* @__PURE__ */ b(t, {
+	k != null && (F = /* @__PURE__ */ x(t, {
 		value: O ?? "",
 		onChange: (e) => {
 			k(e.target.value);
@@ -29,7 +29,7 @@ var T = ({ isOpen: T, title: E, sections: D, searchValue: O, onSearchChange: k,
 		fullWidth: !0
 	}));
 	let I = null;
-	j != null && (I = /* @__PURE__ */ b(e, {
+	j != null && (I = /* @__PURE__ */ x(e, {
 		type: "button",
 		variant: "secondary",
 		size: "small",
@@ -38,13 +38,13 @@ var T = ({ isOpen: T, title: E, sections: D, searchValue: O, onSearchChange: k,
 	}));
 	let L = M("backoffice.filterDrawer.ariaLabel");
 	typeof N == "string" && (L = N);
-	let R = /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("div", {
+	let R = /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x("div", {
 		className: r,
 		onClick: A
-	}), /* @__PURE__ */ b("div", {
+	}), /* @__PURE__ */ x("div", {
 		className: o,
 		onClick: A,
-		children: /* @__PURE__ */ x("aside", {
+		children: /* @__PURE__ */ S("aside", {
 			className: a,
 			role: "dialog",
 			"aria-modal": "true",
@@ -53,51 +53,51 @@ var T = ({ isOpen: T, title: E, sections: D, searchValue: O, onSearchChange: k,
 				e.stopPropagation();
 			},
 			children: [
-				/* @__PURE__ */ x("div", {
+				/* @__PURE__ */ S("div", {
 					className: s,
-					children: [/* @__PURE__ */ x("div", {
+					children: [/* @__PURE__ */ S("div", {
 						className: v,
-						children: [/* @__PURE__ */ b("div", {
+						children: [/* @__PURE__ */ x("div", {
 							className: _,
 							children: N
-						}), /* @__PURE__ */ b("div", {
+						}), /* @__PURE__ */ x("div", {
 							className: g,
 							children: M("backoffice.filterDrawer.subtitle", { count: P })
 						})]
-					}), /* @__PURE__ */ b("button", {
+					}), /* @__PURE__ */ x("button", {
 						type: "button",
 						className: i,
 						onClick: A,
 						"aria-label": M("backoffice.filterDrawer.closeAriaLabel"),
-						children: /* @__PURE__ */ b(n, {
+						children: /* @__PURE__ */ x(n, {
 							width: 18,
 							height: 18,
 							"aria-hidden": "true"
 						})
 					})]
 				}),
-				/* @__PURE__ */ x("div", {
+				/* @__PURE__ */ S("div", {
 					className: c,
 					children: [F, I]
 				}),
-				/* @__PURE__ */ b("div", {
+				/* @__PURE__ */ x("div", {
 					className: h,
 					children: D.map((e) => {
 						let t = null;
-						return e.description != null && (t = /* @__PURE__ */ b("div", {
+						return e.description != null && (t = /* @__PURE__ */ x("div", {
 							className: u,
 							children: e.description
-						})), /* @__PURE__ */ x("section", {
+						})), /* @__PURE__ */ S("section", {
 							className: l,
-							children: [/* @__PURE__ */ x("div", {
+							children: [/* @__PURE__ */ S("div", {
 								className: d,
-								children: [/* @__PURE__ */ b("div", {
+								children: [/* @__PURE__ */ x("div", {
 									className: m,
 									children: e.title
 								}), t]
-							}), /* @__PURE__ */ b("div", {
+							}), /* @__PURE__ */ x("div", {
 								className: p,
-								children: e.items.map((e) => /* @__PURE__ */ b("div", {
+								children: e.items.map((e) => /* @__PURE__ */ x("div", {
 									className: f,
 									children: e.node
 								}, e.id))

package/lib/esm/backoffice/molecules/backoffice_json_viewer/BackofficeJsonViewer.js

@@ -2,8 +2,8 @@ import { cx as e } from "../../../theme/tools.js";
 import { Button as t } from "../../../atomic/atoms/button/Button.js";
 import { actions as n, container as r, header as i, pre as a, title as o, truncated as s } from "./backofficeJsonViewer.css.js";
 import "../../../index.js";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { useCallback as u, useMemo as d, useState as f } from "react";
+import { useCallback as c, useMemo as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/backoffice/molecules/backoffice_json_viewer/BackofficeJsonViewer.tsx
 var p = (e) => {
 	try {
@@ -15,7 +15,7 @@ var p = (e) => {
 		return !1;
 	}
 }, m = ({ value: m, title: h = "Raw JSON", className: g, maxHeight: _, truncate: v = !1, truncateLabel: y = "Collapse", expandLabel: b = "Expand", copyLabel: x = "Copy", copiedLabel: S = "Copied" }) => {
-	let [C, w] = f(v), [T, E] = f(!1), D = d(() => {
+	let [C, w] = u(v), [T, E] = u(!1), D = l(() => {
 		try {
 			return JSON.stringify(m, null, 2);
 		} catch (e) {
@@ -25,7 +25,7 @@ var p = (e) => {
 				message: t
 			});
 		}
-	}, [m]), O = u(async () => {
+	}, [m]), O = c(async () => {
 		let e = !1;
 		try {
 			typeof navigator < "u" && (await navigator.clipboard.writeText(D), e = !0);
@@ -35,21 +35,21 @@ var p = (e) => {
 		e ||= p(D), e && (E(!0), window.setTimeout(() => {
 			E(!1);
 		}, 1400));
-	}, [D]), k = d(() => {
+	}, [D]), k = l(() => {
 		if (_ != null) return { maxHeight: _ };
 	}, [_]), A = x;
 	T && (A = S);
 	let j = y;
-	return C && (j = b), /* @__PURE__ */ l("div", {
+	return C && (j = b), /* @__PURE__ */ f("div", {
 		className: e(r, g),
-		children: [/* @__PURE__ */ l("div", {
+		children: [/* @__PURE__ */ f("div", {
 			className: i,
-			children: [/* @__PURE__ */ c("span", {
+			children: [/* @__PURE__ */ d("span", {
 				className: o,
 				children: h
-			}), /* @__PURE__ */ l("div", {
+			}), /* @__PURE__ */ f("div", {
 				className: n,
-				children: [/* @__PURE__ */ c(t, {
+				children: [/* @__PURE__ */ d(t, {
 					type: "button",
 					variant: "secondary",
 					size: "small",
@@ -57,7 +57,7 @@ var p = (e) => {
 						O().catch(() => {});
 					},
 					children: A
-				}), /* @__PURE__ */ c(t, {
+				}), /* @__PURE__ */ d(t, {
 					type: "button",
 					variant: "secondary",
 					size: "small",
@@ -67,7 +67,7 @@ var p = (e) => {
 					children: j
 				})]
 			})]
-		}), /* @__PURE__ */ c("pre", {
+		}), /* @__PURE__ */ d("pre", {
 			className: e(a, { [s]: C }),
 			style: k,
 			children: D