@plumile/ui 0.1.68 → 0.1.70

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

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

@@ -1,8 +1,8 @@
 import "./LazyBackofficeJsonViewer.css.js";
-import { jsx as e } from "react/jsx-runtime";
-import { Suspense as t, lazy as n } from "react";
+import { Suspense as e, lazy as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
 //#region src/backoffice/molecules/backoffice_json_viewer/LazyBackofficeJsonViewer.tsx
-var r = n(async () => ({ default: (await import("./BackofficeJsonViewer.js")).BackofficeJsonViewer })), i = (e) => {
+var r = t(async () => ({ default: (await import("./BackofficeJsonViewer.js")).BackofficeJsonViewer })), i = (e) => {
 	try {
 		return JSON.stringify(e, null, 2);
 	} catch (e) {
@@ -12,15 +12,15 @@ var r = n(async () => ({ default: (await import("./BackofficeJsonViewer.js")).Ba
 			message: t
 		});
 	}
-}, a = ({ value: t, className: n }) => /* @__PURE__ */ e("pre", {
-	className: n ?? "_13lprza0",
-	children: i(t)
-}), o = (n) => /* @__PURE__ */ e(t, {
-	fallback: /* @__PURE__ */ e(a, {
-		value: n.value,
-		className: n.className
+}, a = ({ value: e, className: t }) => /* @__PURE__ */ n("pre", {
+	className: t ?? "_13lprza0",
+	children: i(e)
+}), o = (t) => /* @__PURE__ */ n(e, {
+	fallback: /* @__PURE__ */ n(a, {
+		value: t.value,
+		className: t.className
 	}),
-	children: /* @__PURE__ */ e(r, { ...n })
+	children: /* @__PURE__ */ n(r, { ...t })
 });
 //#endregion
 export { o as LazyBackofficeJsonViewer, o as default };

package/lib/esm/backoffice/molecules/backoffice_page_header/BackofficePageHeader.js

@@ -1,31 +1,37 @@
 import { cx as e } from "../../../theme/tools.js";
-import { container as t, left as n, title as r, titleRow as i } from "./backofficePageHeader.css.js";
+import { container as t, headerRow as n, left as r, title as i, titleRow as a } from "./backofficePageHeader.css.js";
 import "../../../index.js";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/backoffice/molecules/backoffice_page_header/BackofficePageHeader.tsx
-var s = ({ title: s, subtitle: c, actions: l, meta: u, className: d }) => /* @__PURE__ */ o("div", {
-	className: e(t, d),
-	children: [/* @__PURE__ */ o("div", {
-		className: n,
-		children: [/* @__PURE__ */ o("div", {
-			className: i,
-			children: [/* @__PURE__ */ a("h1", {
-				className: r,
-				children: s
-			}), u != null && /* @__PURE__ */ a("div", {
-				className: "_1puq2a85",
-				children: u
+var c = ({ title: c, subtitle: l, actions: u, meta: d, leftActions: f, className: p }) => /* @__PURE__ */ s("div", {
+	className: e(t, p),
+	children: [/* @__PURE__ */ s("div", {
+		className: r,
+		children: [/* @__PURE__ */ s("div", {
+			className: n,
+			children: [f != null && /* @__PURE__ */ o("div", {
+				className: "_1puq2a83",
+				children: f
+			}), /* @__PURE__ */ s("div", {
+				className: a,
+				children: [/* @__PURE__ */ o("h1", {
+					className: i,
+					children: c
+				}), d != null && /* @__PURE__ */ o("div", {
+					className: "_1puq2a87",
+					children: d
+				})]
 			})]
-		}), c != null && (typeof c != "string" || c.trim() !== "") && /* @__PURE__ */ a("p", {
-			className: "_1puq2a84",
-			children: c
+		}), l != null && (typeof l != "string" || l.trim() !== "") && /* @__PURE__ */ o("p", {
+			className: "_1puq2a86",
+			children: l
 		})]
-	}), l != null && /* @__PURE__ */ a("div", {
-		className: "_1puq2a86",
-		children: l
+	}), u != null && /* @__PURE__ */ o("div", {
+		className: "_1puq2a88",
+		children: u
 	})]
 });
 //#endregion
-export { s as BackofficePageHeader, s as default };
+export { c as BackofficePageHeader, c as default };
 
 //# sourceMappingURL=BackofficePageHeader.js.map

package/lib/esm/backoffice/molecules/backoffice_page_header/BackofficePageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackofficePageHeader.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_page_header/BackofficePageHeader.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { cx } from '@plumile/ui';\n\nimport * as styles from './backofficePageHeader.css.js';\n\nexport type BackofficePageHeaderProps = {\n  title: string;\n  subtitle?: ReactNode;\n  actions?: ReactNode;\n  meta?: ReactNode;\n  className?: string;\n};\n\nexport const BackofficePageHeader = ({\n  title,\n  subtitle,\n  actions,\n  meta,\n  className,\n}: BackofficePageHeaderProps): JSX.Element => {\n  return (\n    <div className={cx(styles.container, className)}>\n      <div className={styles.left}>\n        <div className={styles.titleRow}>\n          <h1 className={styles.title}>{title}</h1>\n          {meta != null && <div className={styles.metaRow}>{meta}</div>}\n        </div>\n        {subtitle != null &&\n          (typeof subtitle !== 'string' || subtitle.trim() !== '') && (\n            <p className={styles.subtitle}>{subtitle}</p>\n          )}\n      </div>\n      {actions != null && <div className={styles.actions}>{actions}</div>}\n    </div>\n  );\n};\n\nexport default BackofficePageHeader;\n"],"mappings":";;;;;AAcA,IAAa,KAAwB,EACnC,OAAA,GACA,UAAA,GACA,SAAA,GACA,SACA,mBAGE,kBAAC,OAAD;CAAK,WAAW,EAAG,GAAkB,EAAU;WAA/C,CACE,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACE,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,kBAAC,MAAD;IAAI,WAAW;cAAe;IAAW,CAAA,EACxC,KAAQ,QAAQ,kBAAC,OAAD;IAAK,WAAW;cAAiB;IAAW,CAAA,CACzD;MACL,KAAY,SACV,OAAO,KAAa,YAAY,EAAS,MAAM,KAAK,OACnD,kBAAC,KAAD;GAAG,WAAW;aAAkB;GAAa,CAAA,CAE7C;KACL,KAAW,QAAQ,kBAAC,OAAD;EAAK,WAAW;YAAiB;EAAc,CAAA,CAC/D"}
+{"version":3,"file":"BackofficePageHeader.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_page_header/BackofficePageHeader.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { cx } from '@plumile/ui';\n\nimport * as styles from './backofficePageHeader.css.js';\n\nexport type BackofficePageHeaderProps = {\n  title: string;\n  subtitle?: ReactNode;\n  actions?: ReactNode;\n  meta?: ReactNode;\n  leftActions?: ReactNode;\n  className?: string;\n};\n\nexport const BackofficePageHeader = ({\n  title,\n  subtitle,\n  actions,\n  meta,\n  leftActions,\n  className,\n}: BackofficePageHeaderProps): JSX.Element => {\n  return (\n    <div className={cx(styles.container, className)}>\n      <div className={styles.left}>\n        <div className={styles.headerRow}>\n          {leftActions != null && (\n            <div className={styles.leftActions}>{leftActions}</div>\n          )}\n          <div className={styles.titleRow}>\n            <h1 className={styles.title}>{title}</h1>\n            {meta != null && <div className={styles.metaRow}>{meta}</div>}\n          </div>\n        </div>\n        {subtitle != null &&\n          (typeof subtitle !== 'string' || subtitle.trim() !== '') && (\n            <p className={styles.subtitle}>{subtitle}</p>\n          )}\n      </div>\n      {actions != null && <div className={styles.actions}>{actions}</div>}\n    </div>\n  );\n};\n\nexport default BackofficePageHeader;\n"],"mappings":";;;;;AAeA,IAAa,KAAwB,EACnC,OAAA,GACA,UAAA,GACA,SAAA,GACA,SACA,aAAA,GACA,mBAGE,kBAAC,OAAD;CAAK,WAAW,EAAG,GAAkB,EAAU;WAA/C,CACE,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACE,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACG,KAAe,QACd,kBAAC,OAAD;IAAK,WAAW;cAAqB;IAAkB,CAAA,EAEzD,kBAAC,OAAD;IAAK,WAAW;cAAhB,CACE,kBAAC,MAAD;KAAI,WAAW;eAAe;KAAW,CAAA,EACxC,KAAQ,QAAQ,kBAAC,OAAD;KAAK,WAAW;eAAiB;KAAW,CAAA,CACzD;MACF;MACL,KAAY,SACV,OAAO,KAAa,YAAY,EAAS,MAAM,KAAK,OACnD,kBAAC,KAAD;GAAG,WAAW;aAAkB;GAAa,CAAA,CAE7C;KACL,KAAW,QAAQ,kBAAC,OAAD;EAAK,WAAW;YAAiB;EAAc,CAAA,CAC/D"}

package/lib/esm/backoffice/molecules/backoffice_page_header/backofficePageHeader.css.js

@@ -1,7 +1,7 @@
 /* empty css                                    */
 //#region src/backoffice/molecules/backoffice_page_header/backofficePageHeader.css.ts
-var e = "_1puq2a80", t = "_1puq2a81", n = "_1puq2a82", r = "_1puq2a83", i = "_1puq2a84", a = "_1puq2a85", o = "_1puq2a86";
+var e = "_1puq2a80", t = "_1puq2a81", n = "_1puq2a82", r = "_1puq2a83", i = "_1puq2a84", a = "_1puq2a85", o = "_1puq2a86", s = "_1puq2a87", c = "_1puq2a88";
 //#endregion
-export { o as actions, e as container, t as left, a as metaRow, i as subtitle, r as title, n as titleRow };
+export { c as actions, e as container, n as headerRow, t as left, r as leftActions, s as metaRow, o as subtitle, a as title, i as titleRow };
 
 //# sourceMappingURL=backofficePageHeader.css.js.map

package/lib/esm/backoffice/molecules/backoffice_page_header/backofficePageHeader.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficePageHeader.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_page_header/backofficePageHeader.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { vars } from '@plumile/ui/theme/themeContract.js';\n\nexport const container = style({\n  display: 'flex',\n  alignItems: 'flex-start',\n  justifyContent: 'space-between',\n  gap: vars.spacing[4],\n  flexWrap: 'wrap',\n});\n\nexport const left = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: vars.spacing[2],\n  minWidth: 0,\n  flex: 1,\n});\n\nexport const titleRow = style({\n  display: 'flex',\n  alignItems: 'center',\n  gap: vars.spacing[2],\n  flexWrap: 'wrap',\n});\n\nexport const title = style({\n  fontSize: vars.fontSize['2xl'],\n  lineHeight: vars.lineHeight['2xl'],\n  fontWeight: vars.fontWeight.semibold,\n  color: vars.colors.text,\n  margin: 0,\n});\n\nexport const subtitle = style({\n  margin: 0,\n  fontSize: vars.fontSize.base,\n  lineHeight: vars.lineHeight.base,\n  color: vars.colors.textSecondary,\n});\n\nexport const metaRow = style({\n  display: 'flex',\n  alignItems: 'center',\n  gap: vars.spacing[2],\n  flexWrap: 'wrap',\n});\n\nexport const actions = style({\n  display: 'flex',\n  alignItems: 'center',\n  gap: vars.spacing[2],\n  flexWrap: 'wrap',\n});\n"],"mappings":""}
+{"version":3,"file":"backofficePageHeader.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_page_header/backofficePageHeader.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { vars } from '@plumile/ui/theme/themeContract.js';\n\nexport const container = style({\n  display: 'flex',\n  alignItems: 'flex-start',\n  justifyContent: 'space-between',\n  gap: vars.spacing[4],\n  flexWrap: 'wrap',\n});\n\nexport const left = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: vars.spacing[2],\n  minWidth: 0,\n  flex: 1,\n});\n\nexport const headerRow = style({\n  display: 'flex',\n  alignItems: 'center',\n  gap: vars.spacing[3],\n  flexWrap: 'wrap',\n  minWidth: 0,\n});\n\nexport const leftActions = style({\n  display: 'flex',\n  alignItems: 'center',\n  gap: vars.spacing[2],\n  flexWrap: 'wrap',\n  flexShrink: 0,\n});\n\nexport const titleRow = style({\n  display: 'flex',\n  alignItems: 'center',\n  gap: vars.spacing[2],\n  flexWrap: 'wrap',\n  minWidth: 0,\n});\n\nexport const title = style({\n  fontSize: vars.fontSize['2xl'],\n  lineHeight: vars.lineHeight['2xl'],\n  fontWeight: vars.fontWeight.semibold,\n  color: vars.colors.text,\n  margin: 0,\n});\n\nexport const subtitle = style({\n  margin: 0,\n  fontSize: vars.fontSize.base,\n  lineHeight: vars.lineHeight.base,\n  color: vars.colors.textSecondary,\n});\n\nexport const metaRow = style({\n  display: 'flex',\n  alignItems: 'center',\n  gap: vars.spacing[2],\n  flexWrap: 'wrap',\n});\n\nexport const actions = style({\n  display: 'flex',\n  alignItems: 'center',\n  gap: vars.spacing[2],\n  flexWrap: 'wrap',\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/backoffice_relations_menu/BackofficeRelationsMenu.js

@@ -3,13 +3,13 @@ import { Button as t } from "../../../atomic/atoms/button/Button.js";
 import { container as n, triggerIcon as r, triggerIconOpen as i } from "./backofficeRelationsMenu.css.js";
 import { ChevronDownIcon as a } from "../../../svg/ChevronDownIcon.js";
 import "../../../index.js";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { useEffect as c, useRef as l, useState as u } from "react";
+import { useEffect as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import { Link as d } from "@plumile/router";
 //#region src/backoffice/molecules/backoffice_relations_menu/BackofficeRelationsMenu.tsx
 var f = ({ label: f = "Relations", items: p }) => {
-	let [m, h] = u(!1), g = l(null);
-	return c(() => {
+	let [m, h] = c(!1), g = s(null);
+	return o(() => {
 		if (!m) return;
 		let e = (e) => {
 			e.target instanceof Node && (g.current?.contains(e.target) || h(!1));
@@ -17,16 +17,16 @@ var f = ({ label: f = "Relations", items: p }) => {
 		return document.addEventListener("pointerdown", e), () => {
 			document.removeEventListener("pointerdown", e);
 		};
-	}, [m]), p.length === 0 ? /* @__PURE__ */ o(t, {
+	}, [m]), p.length === 0 ? /* @__PURE__ */ l(t, {
 		type: "button",
 		variant: "secondary",
 		size: "small",
 		disabled: !0,
 		children: f
-	}) : /* @__PURE__ */ s("div", {
+	}) : /* @__PURE__ */ u("div", {
 		className: n,
 		ref: g,
-		children: [/* @__PURE__ */ s(t, {
+		children: [/* @__PURE__ */ u(t, {
 			type: "button",
 			variant: "secondary",
 			size: "small",
@@ -35,25 +35,25 @@ var f = ({ label: f = "Relations", items: p }) => {
 			},
 			"aria-expanded": m,
 			"aria-haspopup": "menu",
-			children: [f, /* @__PURE__ */ o(a, {
+			children: [f, /* @__PURE__ */ l(a, {
 				size: 14,
 				className: e(r, { [i]: m })
 			})]
-		}), m && /* @__PURE__ */ o("div", {
+		}), m && /* @__PURE__ */ l("div", {
 			className: "_16f61fj3",
 			role: "menu",
 			children: p.map((e) => {
 				let t = null;
-				return typeof e.count == "number" && (t = e.count), /* @__PURE__ */ s(d, {
+				return typeof e.count == "number" && (t = e.count), /* @__PURE__ */ u(d, {
 					to: e.href,
 					className: "_16f61fj4",
 					onClick: (t) => {
 						h(!1), (e.onClick?.(t))?.catch(() => {});
 					},
-					children: [/* @__PURE__ */ o("span", {
+					children: [/* @__PURE__ */ l("span", {
 						className: "_16f61fj5",
 						children: e.label
-					}), t != null && /* @__PURE__ */ o("span", {
+					}), t != null && /* @__PURE__ */ l("span", {
 						className: "_16f61fj6",
 						children: t
 					})]

package/lib/esm/backoffice/molecules/confirm_dialog/ConfirmDialog.js

@@ -2,13 +2,13 @@ import { Button as e } from "../../../atomic/atoms/button/Button.js";
 import { ErrorMessage as t } from "../../../atomic/atoms/error_message/ErrorMessage.js";
 import { Modal as n } from "../../../atomic/atoms/modal/Modal.js";
 import { body as r, footer as i } from "./confirmDialog.css.js";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { useCallback as s, useState as c } from "react";
+import { useCallback as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/backoffice/molecules/confirm_dialog/ConfirmDialog.tsx
 var l = ({ isOpen: l, title: u, children: d, confirmLabel: f = "Confirm", cancelLabel: p = "Cancel", confirmTone: m = "default", onClose: h, onConfirm: g, closeOnConfirm: _ = !0 }) => {
-	let [v, y] = c(!1), [b, x] = c(null), S = s(() => {
+	let [v, y] = o(!1), [b, x] = o(null), S = a(() => {
 		v || (x(null), h());
-	}, [v, h]), C = s(async () => {
+	}, [v, h]), C = a(async () => {
 		if (!v) {
 			x(null), y(!0);
 			try {
@@ -27,15 +27,15 @@ var l = ({ isOpen: l, title: u, children: d, confirmLabel: f = "Confirm", cancel
 		g
 	]), w = "primary";
 	m === "danger" && (w = "danger");
-	let T = /* @__PURE__ */ o("div", {
+	let T = /* @__PURE__ */ c("div", {
 		className: i,
-		children: [/* @__PURE__ */ a(e, {
+		children: [/* @__PURE__ */ s(e, {
 			type: "button",
 			variant: "secondary",
 			onClick: S,
 			disabled: v,
 			children: p
-		}), /* @__PURE__ */ a(e, {
+		}), /* @__PURE__ */ s(e, {
 			type: "button",
 			variant: w,
 			onClick: () => {
@@ -45,12 +45,12 @@ var l = ({ isOpen: l, title: u, children: d, confirmLabel: f = "Confirm", cancel
 			children: f
 		})]
 	}), E = null;
-	return b != null && (E = /* @__PURE__ */ a(t, { children: b })), /* @__PURE__ */ a(n, {
+	return b != null && (E = /* @__PURE__ */ s(t, { children: b })), /* @__PURE__ */ s(n, {
 		isOpen: l,
 		onClose: S,
 		title: u,
 		footer: T,
-		children: /* @__PURE__ */ o("div", {
+		children: /* @__PURE__ */ c("div", {
 			className: r,
 			children: [E, d]
 		})

package/lib/esm/backoffice/molecules/global_search_input/GlobalSearchInput.js

@@ -1,9 +1,9 @@
 import { Input as e } from "../../../atomic/atoms/input/Input.js";
 import { ModalCloseSvg as t } from "../../../icons/ModalCloseSvg.js";
 import { SidebarSearchSvg as n } from "../../../icons/SidebarSearchSvg.js";
-import { ShortcutHint as r } from "../../atoms/shortcut_hint/ShortcutHint.js";
-import { clearButton as i, container as a } from "./globalSearchInput.css.js";
+import { clearButton as r, container as i } from "./globalSearchInput.css.js";
 import "../../../index.js";
+import { ShortcutHint as a } from "../../atoms/shortcut_hint/ShortcutHint.js";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/backoffice/molecules/global_search_input/GlobalSearchInput.tsx
 var c = ({ value: c, onChange: l, placeholder: u = "Search…", ariaLabel: d, className: f, shortcut: p, rightSlot: m, clearLabel: h = "Clear search" }) => {
@@ -14,7 +14,7 @@ var c = ({ value: c, onChange: l, placeholder: u = "Search…", ariaLabel: d, cl
 		onClick: () => {
 			l("");
 		},
-		className: i,
+		className: r,
 		children: /* @__PURE__ */ o(t, {
 			width: 16,
 			height: 16,
@@ -22,9 +22,9 @@ var c = ({ value: c, onChange: l, placeholder: u = "Search…", ariaLabel: d, cl
 		})
 	}));
 	let y = null;
-	p != null && (y = /* @__PURE__ */ o(r, { keys: p }));
+	p != null && (y = /* @__PURE__ */ o(a, { keys: p }));
 	let b = /* @__PURE__ */ s("span", {
-		className: a,
+		className: i,
 		children: [
 			v,
 			y,

package/lib/esm/backoffice/molecules/sidebar_collapse_toggle/SidebarCollapseToggle.js

@@ -1,18 +1,18 @@
-import { cx as e } from "../../../theme/tools.js";
-import { ChevronLeftSvg as t } from "../../../icons/ChevronLeftSvg.js";
-import { ChevronRightSvg as n } from "../../../icons/ChevronRightSvg.js";
+import { ChevronLeftSvg as e } from "../../../icons/ChevronLeftSvg.js";
+import { ChevronRightSvg as t } from "../../../icons/ChevronRightSvg.js";
+import { cx as n } from "../../../theme/tools.js";
+import "../../../index.js";
 import { ShortcutHint as r } from "../../atoms/shortcut_hint/ShortcutHint.js";
 import { button as i, icon as a, label as o } from "./sidebarCollapseToggle.css.js";
-import "../../../index.js";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/backoffice/molecules/sidebar_collapse_toggle/SidebarCollapseToggle.tsx
 var l = ({ isCollapsed: l, onToggle: u, label: d = "Collapse", shortcut: f, className: p }) => {
-	let m = t, h = d;
-	l && (m = n, h = "Expand");
+	let m = e, h = d;
+	l && (m = t, h = "Expand");
 	let g = null;
 	return f != null && (g = /* @__PURE__ */ s(r, { keys: f })), /* @__PURE__ */ c("button", {
 		type: "button",
-		className: e(i, p),
+		className: n(i, p),
 		onClick: u,
 		"aria-pressed": l,
 		children: [

package/lib/esm/backoffice/molecules/sidebar_nav_item/SidebarNavItem.js

@@ -1,13 +1,13 @@
 import { cx as e } from "../../../theme/tools.js";
-import { actionSlot as t, actions as ee, actionsVisible as te, badge as ne, badgeCollapsed as n, dragHandle as r, icon as i, item as a, itemActive as o, itemCollapsed as s, itemDisabled as c, label as l, labelCollapsed as re, link as u } from "./sidebarNavItem.css.js";
+import { actionSlot as t, actions as ee, actionsVisible as te, badge as n, badgeCollapsed as r, dragHandle as i, icon as a, item as o, itemActive as s, itemCollapsed as c, itemDisabled as l, label as u, labelCollapsed as ne, link as d } from "./sidebarNavItem.css.js";
 import "../../../index.js";
-import { Fragment as ie, jsx as d, jsxs as f } from "react/jsx-runtime";
-import { useCallback as p, useEffect as m, useRef as h, useState as g } from "react";
+import { useCallback as re, useEffect as ie, useRef as f, useState as p } from "react";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 import { Link as _ } from "@plumile/router";
 //#region src/backoffice/molecules/sidebar_nav_item/SidebarNavItem.tsx
 var v = _, y = ({ label: _, href: y, icon: b, badge: x, isActive: S = !1, disabled: C = !1, onClick: ae, onDragStart: oe, onDragOver: se, onDrop: ce, onDragEnd: le, collapsed: w = !1, ariaLabel: ue, className: T, actionSlot: E, dragHandleSlot: D, dragHandleLabel: O, draggable: k = !1 }) => {
-	let A = h(null), j = h(null), [M, N] = g(!1), [P, F] = g(!1), I = [a];
-	w && I.push(s), S && I.push(o), C && I.push(c), T != null && I.push(T);
+	let A = f(null), j = f(null), [M, N] = p(!1), [P, F] = p(!1), I = [o];
+	w && I.push(c), S && I.push(s), C && I.push(l), T != null && I.push(T);
 	let L = e(...I), R = ue;
 	R == null && typeof _ == "string" && (R = _);
 	let z, B;
@@ -15,33 +15,33 @@ var v = _, y = ({ label: _, href: y, icon: b, badge: x, isActive: S = !1, disabl
 	let V;
 	S && (V = "page");
 	let H = null;
-	b != null && (H = /* @__PURE__ */ d("span", {
-		className: i,
+	b != null && (H = /* @__PURE__ */ h("span", {
+		className: a,
 		children: b
 	}));
 	let U = null;
-	w && (U = re);
-	let de = e(l, U), W = null;
+	w && (U = ne);
+	let de = e(u, U), W = null;
 	if (x != null) {
 		let t = null;
-		w && (t = n), W = /* @__PURE__ */ d("span", {
-			className: e(ne, t),
+		w && (t = r), W = /* @__PURE__ */ h("span", {
+			className: e(n, t),
 			children: x
 		});
 	}
-	let G = /* @__PURE__ */ f(ie, { children: [
+	let G = /* @__PURE__ */ g(m, { children: [
 		H,
-		/* @__PURE__ */ d("span", {
+		/* @__PURE__ */ h("span", {
 			className: de,
 			children: _
 		}),
 		W
 	] }), K = () => {
 		ae?.();
-	}, q = !w && !C && (E != null || D != null), J = p(() => {
+	}, q = !w && !C && (E != null || D != null), J = re(() => {
 		j.current != null && (clearTimeout(j.current), j.current = null);
 	}, []);
-	m(() => (q || (N(!1), F(!1), J()), () => {
+	ie(() => (q || (N(!1), F(!1), J()), () => {
 		J();
 	}), [J, q]);
 	let fe = () => {
@@ -60,23 +60,23 @@ var v = _, y = ({ label: _, href: y, icon: b, badge: x, isActive: S = !1, disabl
 		let t = e.relatedTarget;
 		t != null && A.current?.contains(t) || F(!1);
 	}, Y;
-	Y = C ? /* @__PURE__ */ d("span", {
-		className: u,
+	Y = C ? /* @__PURE__ */ h("span", {
+		className: d,
 		"aria-disabled": "true",
 		"aria-label": z,
 		title: B,
 		children: G
-	}) : y == null ? /* @__PURE__ */ d("button", {
+	}) : y == null ? /* @__PURE__ */ h("button", {
 		type: "button",
-		className: u,
+		className: d,
 		onClick: K,
 		"aria-current": V,
 		"aria-label": z,
 		title: B,
 		children: G
-	}) : /* @__PURE__ */ d(v, {
+	}) : /* @__PURE__ */ h(v, {
 		to: y,
-		className: u,
+		className: d,
 		"aria-current": V,
 		"aria-label": z,
 		title: B,
@@ -86,9 +86,9 @@ var v = _, y = ({ label: _, href: y, icon: b, badge: x, isActive: S = !1, disabl
 	let ge = q && (M || P), X;
 	ge && (X = te);
 	let _e = e(ee, X), Z = null;
-	D != null && !w && (Z = /* @__PURE__ */ d("button", {
+	D != null && !w && (Z = /* @__PURE__ */ h("button", {
 		type: "button",
-		className: r,
+		className: i,
 		draggable: k,
 		onDragStart: oe,
 		onDragEnd: le,
@@ -97,15 +97,15 @@ var v = _, y = ({ label: _, href: y, icon: b, badge: x, isActive: S = !1, disabl
 		children: D
 	}));
 	let Q = null;
-	E != null && !w && (Q = /* @__PURE__ */ d("span", {
+	E != null && !w && (Q = /* @__PURE__ */ h("span", {
 		className: t,
 		children: E
 	}));
 	let $ = null;
-	return q && ($ = /* @__PURE__ */ f("span", {
+	return q && ($ = /* @__PURE__ */ g("span", {
 		className: _e,
 		children: [Z, Q]
-	})), /* @__PURE__ */ f("div", {
+	})), /* @__PURE__ */ g("div", {
 		className: L,
 		onDragOver: se,
 		onDrop: ce,