@plumile/backoffice-react 0.2.3 → 0.2.5

package/lib/esm/components/backoffice/filters/DeferredFilterSearchInput.js

@@ -1,11 +1,11 @@
 import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
 import { actionButton as t, actionButtonSpacer as n, actions as r, container as i } from "./deferredFilterSearchInput.css.js";
 import { useEffect as a, useState as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Input as l } from "@plumile/ui/atomic/atoms/input/Input.js";
-import { ModalCloseSvg as u } from "@plumile/ui/icons/ModalCloseSvg.js";
-import { SidebarSearchSvg as d } from "@plumile/ui/icons/SidebarSearchSvg.js";
-import { CheckSvg as f } from "@plumile/ui/icons/CheckSvg.js";
+import { Input as s } from "@plumile/ui";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { ModalCloseSvg as u } from "@plumile/ui/icons/ModalCloseSvg";
+import { SidebarSearchSvg as d } from "@plumile/ui/icons/SidebarSearchSvg";
+import { CheckSvg as f } from "@plumile/ui/icons/CheckSvg";
 //#region src/components/backoffice/filters/DeferredFilterSearchInput.tsx
 var p = ({ value: p, placeholder: m, ariaLabel: h, className: g, inputMode: _ = "search", type: v = "text", onApply: y }) => {
 	let { t: b } = e(), [x, S] = o(p);
@@ -16,29 +16,29 @@ var p = ({ value: p, placeholder: m, ariaLabel: h, className: g, inputMode: _ =
 		E && y(C);
 	}, M = () => {
 		S(""), w !== "" && y("");
-	}, N = /* @__PURE__ */ s("span", {
+	}, N = /* @__PURE__ */ c("span", {
 		className: n,
 		"aria-hidden": "true"
 	});
-	return D && (N = /* @__PURE__ */ s("button", {
+	return D && (N = /* @__PURE__ */ c("button", {
 		type: "button",
 		className: t,
 		"aria-label": k,
 		title: k,
 		onClick: M,
-		children: /* @__PURE__ */ s(u, {
+		children: /* @__PURE__ */ c(u, {
 			width: 16,
 			height: 16,
 			"aria-hidden": "true"
 		})
-	})), /* @__PURE__ */ s("form", {
+	})), /* @__PURE__ */ c("form", {
 		className: g,
 		onSubmit: (e) => {
 			e.preventDefault(), j();
 		},
-		children: /* @__PURE__ */ s("div", {
+		children: /* @__PURE__ */ c("div", {
 			className: i,
-			children: /* @__PURE__ */ s(l, {
+			children: /* @__PURE__ */ c(s, {
 				type: v,
 				inputMode: _,
 				value: x,
@@ -52,21 +52,21 @@ var p = ({ value: p, placeholder: m, ariaLabel: h, className: g, inputMode: _ =
 				"aria-label": O,
 				size: "small",
 				fullWidth: !0,
-				leftIcon: /* @__PURE__ */ s(d, {
+				leftIcon: /* @__PURE__ */ c(d, {
 					width: 18,
 					height: 18,
 					"aria-hidden": "true"
 				}),
 				rightIconIsInteractive: !0,
-				rightIcon: /* @__PURE__ */ c("span", {
+				rightIcon: /* @__PURE__ */ l("span", {
 					className: r,
-					children: [N, /* @__PURE__ */ s("button", {
+					children: [N, /* @__PURE__ */ c("button", {
 						type: "submit",
 						className: t,
 						"aria-label": A,
 						title: A,
 						disabled: !E,
-						children: /* @__PURE__ */ s(f, {
+						children: /* @__PURE__ */ c(f, {
 							width: 16,
 							height: 16,
 							"aria-hidden": "true"

package/lib/esm/components/backoffice/filters/DeferredFilterSearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeferredFilterSearchInput.js","names":[],"sources":["../../../../../src/components/backoffice/filters/DeferredFilterSearchInput.tsx"],"sourcesContent":["import {\n  useEffect,\n  useState,\n  type FormEvent,\n  type JSX,\n  type KeyboardEvent,\n} from 'react';\n\nimport { Input } from '@plumile/ui/atomic/atoms/input/Input.js';\nimport { CheckSvg } from '@plumile/ui/icons/CheckSvg.js';\nimport { ModalCloseSvg } from '@plumile/ui/icons/ModalCloseSvg.js';\nimport { SidebarSearchSvg } from '@plumile/ui/icons/SidebarSearchSvg.js';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\n\nimport * as styles from './deferredFilterSearchInput.css.js';\n\nexport type DeferredFilterSearchInputProps = {\n  value: string;\n  placeholder: string;\n  ariaLabel?: string;\n  className?: string;\n  inputMode?: 'search' | 'numeric' | 'decimal';\n  type?: 'search' | 'text' | 'number' | 'datetime-local';\n  onApply: (value: string) => void;\n};\n\nexport const DeferredFilterSearchInput = ({\n  value,\n  placeholder,\n  ariaLabel,\n  className,\n  inputMode = 'search',\n  type = 'text',\n  onApply,\n}: DeferredFilterSearchInputProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const [draftValue, setDraftValue] = useState(value);\n\n  useEffect(() => {\n    setDraftValue(value);\n  }, [value]);\n\n  const normalizedDraft = draftValue.trim();\n  const normalizedValue = value.trim();\n  const hasDraft = normalizedDraft !== '';\n  const hasPendingValue = normalizedDraft !== normalizedValue;\n  const canClear = hasDraft || normalizedValue !== '';\n  const inputLabel = ariaLabel ?? placeholder;\n  const clearLabel = t('filters.actions.clearFilter', { label: inputLabel });\n  const applyLabel = t('filters.actions.applyFilter', { label: inputLabel });\n\n  const applyDraft = () => {\n    if (!hasPendingValue) {\n      return;\n    }\n    onApply(normalizedDraft);\n  };\n\n  const clearValue = () => {\n    setDraftValue('');\n    if (normalizedValue !== '') {\n      onApply('');\n    }\n  };\n\n  let clearActionNode: JSX.Element = (\n    <span className={styles.actionButtonSpacer} aria-hidden=\"true\" />\n  );\n  if (canClear) {\n    clearActionNode = (\n      <button\n        type=\"button\"\n        className={styles.actionButton}\n        aria-label={clearLabel}\n        title={clearLabel}\n        onClick={clearValue}\n      >\n        <ModalCloseSvg width={16} height={16} aria-hidden=\"true\" />\n      </button>\n    );\n  }\n\n  return (\n    <form\n      className={className}\n      onSubmit={(event: FormEvent<HTMLFormElement>) => {\n        event.preventDefault();\n        applyDraft();\n      }}\n    >\n      <div className={styles.container}>\n        <Input\n          type={type}\n          inputMode={inputMode}\n          value={draftValue}\n          onInput={(event: FormEvent<HTMLInputElement>) => {\n            setDraftValue(event.currentTarget.value);\n          }}\n          onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => {\n            if (event.key === 'Enter') {\n              event.preventDefault();\n              applyDraft();\n            }\n            if (event.key === 'Escape') {\n              event.preventDefault();\n              setDraftValue(value);\n            }\n          }}\n          placeholder={placeholder}\n          aria-label={inputLabel}\n          size=\"small\"\n          fullWidth\n          leftIcon={\n            <SidebarSearchSvg width={18} height={18} aria-hidden=\"true\" />\n          }\n          rightIconIsInteractive\n          rightIcon={\n            <span className={styles.actions}>\n              {clearActionNode}\n              <button\n                type=\"submit\"\n                className={styles.actionButton}\n                aria-label={applyLabel}\n                title={applyLabel}\n                disabled={!hasPendingValue}\n              >\n                <CheckSvg width={16} height={16} aria-hidden=\"true\" />\n              </button>\n            </span>\n          }\n        />\n      </div>\n    </form>\n  );\n};\n\nexport default DeferredFilterSearchInput;\n"],"mappings":";;;;;;;;;AA2BA,IAAa,KAA6B,EACxC,UACA,gBACA,cACA,cACA,eAAY,UACZ,UAAO,QACP,iBACiD;CACjD,IAAM,EAAE,SAAM,EAA8B,GACtC,CAAC,GAAY,KAAiB,EAAS,CAAK;CAElD,QAAgB;EACd,EAAc,CAAK;CACrB,GAAG,CAAC,CAAK,CAAC;CAEV,IAAM,IAAkB,EAAW,KAAK,GAClC,IAAkB,EAAM,KAAK,GAC7B,IAAW,MAAoB,IAC/B,IAAkB,MAAoB,GACtC,IAAW,KAAY,MAAoB,IAC3C,IAAa,KAAa,GAC1B,IAAa,EAAE,+BAA+B,EAAE,OAAO,EAAW,CAAC,GACnE,IAAa,EAAE,+BAA+B,EAAE,OAAO,EAAW,CAAC,GAEnE,UAAmB;EAClB,KAGL,EAAQ,CAAe;CACzB,GAEM,UAAmB;EAEvB,AADA,EAAc,EAAE,GACZ,MAAoB,MACtB,EAAQ,EAAE;CAEd,GAEI,IACF,kBAAC,QAAD;EAAM,WAAW;EAA2B,eAAY;CAAQ,CAAA;CAgBlE,OAdI,MACF,IACE,kBAAC,UAAD;EACE,MAAK;EACL,WAAW;EACX,cAAY;EACZ,OAAO;EACP,SAAS;EAET,UAAA,kBAAC,GAAD;GAAe,OAAO;GAAI,QAAQ;GAAI,eAAY;EAAQ,CAAA;CACpD,CAAA,IAKV,kBAAC,QAAD;EACa;EACX,WAAW,MAAsC;GAE/C,AADA,EAAM,eAAe,GACrB,EAAW;EACb;EAEA,UAAA,kBAAC,OAAD;GAAK,WAAW;GACd,UAAA,kBAAC,GAAD;IACQ;IACK;IACX,OAAO;IACP,UAAU,MAAuC;KAC/C,EAAc,EAAM,cAAc,KAAK;IACzC;IACA,YAAY,MAA2C;KAKrD,AAJI,EAAM,QAAQ,YAChB,EAAM,eAAe,GACrB,EAAW,IAET,EAAM,QAAQ,aAChB,EAAM,eAAe,GACrB,EAAc,CAAK;IAEvB;IACa;IACb,cAAY;IACZ,MAAK;IACL,WAAA;IACA,UACE,kBAAC,GAAD;KAAkB,OAAO;KAAI,QAAQ;KAAI,eAAY;IAAQ,CAAA;IAE/D,wBAAA;IACA,WACE,kBAAC,QAAD;KAAM,WAAW;KAAjB,UAAA,CACG,GACD,kBAAC,UAAD;MACE,MAAK;MACL,WAAW;MACX,cAAY;MACZ,OAAO;MACP,UAAU,CAAC;MAEX,UAAA,kBAAC,GAAD;OAAU,OAAO;OAAI,QAAQ;OAAI,eAAY;MAAQ,CAAA;KAC/C,CAAA,CACJ;;GAET,CAAA;EACE,CAAA;CACD,CAAA;AAEV"}
+{"version":3,"file":"DeferredFilterSearchInput.js","names":[],"sources":["../../../../../src/components/backoffice/filters/DeferredFilterSearchInput.tsx"],"sourcesContent":["import {\n  useEffect,\n  useState,\n  type FormEvent,\n  type JSX,\n  type KeyboardEvent,\n} from 'react';\n\nimport { Input } from '@plumile/ui';\nimport { CheckSvg } from '@plumile/ui/icons/CheckSvg';\nimport { ModalCloseSvg } from '@plumile/ui/icons/ModalCloseSvg';\nimport { SidebarSearchSvg } from '@plumile/ui/icons/SidebarSearchSvg';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\n\nimport * as styles from './deferredFilterSearchInput.css.js';\n\nexport type DeferredFilterSearchInputProps = {\n  value: string;\n  placeholder: string;\n  ariaLabel?: string;\n  className?: string;\n  inputMode?: 'search' | 'numeric' | 'decimal';\n  type?: 'search' | 'text' | 'number' | 'datetime-local';\n  onApply: (value: string) => void;\n};\n\nexport const DeferredFilterSearchInput = ({\n  value,\n  placeholder,\n  ariaLabel,\n  className,\n  inputMode = 'search',\n  type = 'text',\n  onApply,\n}: DeferredFilterSearchInputProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const [draftValue, setDraftValue] = useState(value);\n\n  useEffect(() => {\n    setDraftValue(value);\n  }, [value]);\n\n  const normalizedDraft = draftValue.trim();\n  const normalizedValue = value.trim();\n  const hasDraft = normalizedDraft !== '';\n  const hasPendingValue = normalizedDraft !== normalizedValue;\n  const canClear = hasDraft || normalizedValue !== '';\n  const inputLabel = ariaLabel ?? placeholder;\n  const clearLabel = t('filters.actions.clearFilter', { label: inputLabel });\n  const applyLabel = t('filters.actions.applyFilter', { label: inputLabel });\n\n  const applyDraft = () => {\n    if (!hasPendingValue) {\n      return;\n    }\n    onApply(normalizedDraft);\n  };\n\n  const clearValue = () => {\n    setDraftValue('');\n    if (normalizedValue !== '') {\n      onApply('');\n    }\n  };\n\n  let clearActionNode: JSX.Element = (\n    <span className={styles.actionButtonSpacer} aria-hidden=\"true\" />\n  );\n  if (canClear) {\n    clearActionNode = (\n      <button\n        type=\"button\"\n        className={styles.actionButton}\n        aria-label={clearLabel}\n        title={clearLabel}\n        onClick={clearValue}\n      >\n        <ModalCloseSvg width={16} height={16} aria-hidden=\"true\" />\n      </button>\n    );\n  }\n\n  return (\n    <form\n      className={className}\n      onSubmit={(event: FormEvent<HTMLFormElement>) => {\n        event.preventDefault();\n        applyDraft();\n      }}\n    >\n      <div className={styles.container}>\n        <Input\n          type={type}\n          inputMode={inputMode}\n          value={draftValue}\n          onInput={(event: FormEvent<HTMLInputElement>) => {\n            setDraftValue(event.currentTarget.value);\n          }}\n          onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => {\n            if (event.key === 'Enter') {\n              event.preventDefault();\n              applyDraft();\n            }\n            if (event.key === 'Escape') {\n              event.preventDefault();\n              setDraftValue(value);\n            }\n          }}\n          placeholder={placeholder}\n          aria-label={inputLabel}\n          size=\"small\"\n          fullWidth\n          leftIcon={\n            <SidebarSearchSvg width={18} height={18} aria-hidden=\"true\" />\n          }\n          rightIconIsInteractive\n          rightIcon={\n            <span className={styles.actions}>\n              {clearActionNode}\n              <button\n                type=\"submit\"\n                className={styles.actionButton}\n                aria-label={applyLabel}\n                title={applyLabel}\n                disabled={!hasPendingValue}\n              >\n                <CheckSvg width={16} height={16} aria-hidden=\"true\" />\n              </button>\n            </span>\n          }\n        />\n      </div>\n    </form>\n  );\n};\n\nexport default DeferredFilterSearchInput;\n"],"mappings":";;;;;;;;;AA2BA,IAAa,KAA6B,EACxC,UACA,gBACA,cACA,cACA,eAAY,UACZ,UAAO,QACP,iBACiD;CACjD,IAAM,EAAE,SAAM,EAA8B,GACtC,CAAC,GAAY,KAAiB,EAAS,CAAK;CAElD,QAAgB;EACd,EAAc,CAAK;CACrB,GAAG,CAAC,CAAK,CAAC;CAEV,IAAM,IAAkB,EAAW,KAAK,GAClC,IAAkB,EAAM,KAAK,GAC7B,IAAW,MAAoB,IAC/B,IAAkB,MAAoB,GACtC,IAAW,KAAY,MAAoB,IAC3C,IAAa,KAAa,GAC1B,IAAa,EAAE,+BAA+B,EAAE,OAAO,EAAW,CAAC,GACnE,IAAa,EAAE,+BAA+B,EAAE,OAAO,EAAW,CAAC,GAEnE,UAAmB;EAClB,KAGL,EAAQ,CAAe;CACzB,GAEM,UAAmB;EAEvB,AADA,EAAc,EAAE,GACZ,MAAoB,MACtB,EAAQ,EAAE;CAEd,GAEI,IACF,kBAAC,QAAD;EAAM,WAAW;EAA2B,eAAY;CAAQ,CAAA;CAgBlE,OAdI,MACF,IACE,kBAAC,UAAD;EACE,MAAK;EACL,WAAW;EACX,cAAY;EACZ,OAAO;EACP,SAAS;EAET,UAAA,kBAAC,GAAD;GAAe,OAAO;GAAI,QAAQ;GAAI,eAAY;EAAQ,CAAA;CACpD,CAAA,IAKV,kBAAC,QAAD;EACa;EACX,WAAW,MAAsC;GAE/C,AADA,EAAM,eAAe,GACrB,EAAW;EACb;EAEA,UAAA,kBAAC,OAAD;GAAK,WAAW;GACd,UAAA,kBAAC,GAAD;IACQ;IACK;IACX,OAAO;IACP,UAAU,MAAuC;KAC/C,EAAc,EAAM,cAAc,KAAK;IACzC;IACA,YAAY,MAA2C;KAKrD,AAJI,EAAM,QAAQ,YAChB,EAAM,eAAe,GACrB,EAAW,IAET,EAAM,QAAQ,aAChB,EAAM,eAAe,GACrB,EAAc,CAAK;IAEvB;IACa;IACb,cAAY;IACZ,MAAK;IACL,WAAA;IACA,UACE,kBAAC,GAAD;KAAkB,OAAO;KAAI,QAAQ;KAAI,eAAY;IAAQ,CAAA;IAE/D,wBAAA;IACA,WACE,kBAAC,QAAD;KAAM,WAAW;KAAjB,UAAA,CACG,GACD,kBAAC,UAAD;MACE,MAAK;MACL,WAAW;MACX,cAAY;MACZ,OAAO;MACP,UAAU,CAAC;MAEX,UAAA,kBAAC,GAAD;OAAU,OAAO;OAAI,QAAQ;OAAI,eAAY;MAAQ,CAAA;KAC/C,CAAA,CACJ;;GAET,CAAA;EACE,CAAA;CACD,CAAA;AAEV"}

package/lib/esm/components/backoffice/filters/EntityIdFilterField.js

@@ -1,93 +1,81 @@
 import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
-import { actionIcon as t, clearButton as n, container as r, content as i, labelText as a, pickActionButton as o, pickerButton as s, pickerControl as c, placeholder as l, valueText as u } from "./entityIdFilterField.css.js";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { ModalCloseSvg as p } from "@plumile/ui/icons/ModalCloseSvg.js";
-import { BackofficeSidebarPenToolSvg as m } from "@plumile/ui/icons/backoffice/BackofficeSidebarPenToolSvg.js";
-import { BackofficeSidebarSearchSvg as h } from "@plumile/ui/icons/backoffice/BackofficeSidebarSearchSvg.js";
+import { actionIcon as t, clearButton as n, container as r, content as i, labelText as a, pickerButton as o, pickerControl as s, placeholder as c, valueText as l } from "./entityIdFilterField.css.js";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { ModalCloseSvg as f } from "@plumile/ui/icons/ModalCloseSvg";
+import { BackofficeSidebarPenToolSvg as p } from "@plumile/ui/icons/BackofficeSidebarPenToolSvg";
+import { BackofficeSidebarSearchSvg as m } from "@plumile/ui/icons/BackofficeSidebarSearchSvg";
 //#region src/components/backoffice/filters/EntityIdFilterField.tsx
-var g = (g) => {
-	let { disabled: _ = !1, id: v, label: y, value: b, displayValue: x, placeholder: S, ariaDescribedBy: C, ariaInvalid: w, isResolving: T = !1, onPick: E, onClear: D } = g, { t: O } = e(), k = b?.trim() ?? "", A = x?.trim() ?? "", j = k !== "", M = A !== "", N = S ?? O("filters.placeholders.anyEntity", { label: y }), P = O("filters.placeholders.unresolved"), F;
-	F = M ? /* @__PURE__ */ d("span", {
-		className: u,
-		children: A
-	}) : j ? /* @__PURE__ */ d("span", {
-		className: l,
-		children: P
-	}) : /* @__PURE__ */ d("span", {
+var h = (h) => {
+	let { disabled: g = !1, id: _, label: v, value: y, displayValue: b, placeholder: x, ariaDescribedBy: S, ariaInvalid: C, isResolving: w = !1, onPick: T, onClear: E } = h, { t: D } = e(), O = y?.trim() ?? "", k = b?.trim() ?? "", A = O !== "", j = k !== "", M = x ?? D("filters.placeholders.anyEntity", { label: v }), N = D("filters.placeholders.unresolved"), P;
+	P = j ? /* @__PURE__ */ u("span", {
 		className: l,
+		children: k
+	}) : A ? /* @__PURE__ */ u("span", {
+		className: c,
 		children: N
+	}) : /* @__PURE__ */ u("span", {
+		className: c,
+		children: M
 	});
-	let I = O("common.actions.pick");
-	j && (I = O("filters.actions.changeFilterValue", { label: y }));
-	let L = O("filters.actions.filterBy", { label: y });
-	j && (L = I);
-	let R = O("filters.actions.clearFilter", { label: y }), z = null;
-	j && D != null && (z = /* @__PURE__ */ d("button", {
+	let F = D("common.actions.pick");
+	A && (F = D("filters.actions.changeFilterValue", { label: v }));
+	let I = D("filters.actions.filterBy", { label: v });
+	A && (I = F);
+	let L = D("filters.actions.clearFilter", { label: v }), R = null;
+	A && E != null && (R = /* @__PURE__ */ u("button", {
 		type: "button",
 		className: n,
-		"aria-label": R,
-		disabled: _,
+		"aria-label": L,
+		disabled: g,
 		onClick: (e) => {
-			e.stopPropagation(), D();
+			e.stopPropagation(), E();
 		},
-		children: /* @__PURE__ */ d(p, {
+		children: /* @__PURE__ */ u(f, {
 			width: 16,
 			height: 16,
 			"aria-hidden": "true"
 		})
 	}));
-	let B = null;
-	if (E != null) {
-		let e = /* @__PURE__ */ d(h, {
+	let z = null;
+	if (T != null) {
+		let e = /* @__PURE__ */ u(m, {
 			className: t,
 			"aria-hidden": "true"
 		});
-		j && (e = /* @__PURE__ */ d(m, {
+		A && (e = /* @__PURE__ */ u(p, {
 			className: t,
 			"aria-hidden": "true"
-		})), B = /* @__PURE__ */ f("div", {
-			className: c,
-			children: [
-				/* @__PURE__ */ d("button", {
-					id: v,
-					type: "button",
-					className: s,
-					"aria-label": L,
-					"aria-describedby": C,
-					"aria-invalid": w,
-					"aria-busy": T || void 0,
-					disabled: _,
-					onClick: E,
-					children: /* @__PURE__ */ f("span", {
-						className: i,
-						children: [/* @__PURE__ */ d("span", {
-							className: a,
-							children: y
-						}), F]
-					})
-				}),
-				/* @__PURE__ */ d("button", {
-					type: "button",
-					className: o,
-					"aria-label": L,
-					title: L,
-					disabled: _,
-					onClick: E,
-					children: e
-				}),
-				z
-			]
+		})), z = /* @__PURE__ */ d("div", {
+			className: s,
+			children: [/* @__PURE__ */ d("button", {
+				id: _,
+				type: "button",
+				className: o,
+				"aria-label": I,
+				"aria-describedby": S,
+				"aria-invalid": C,
+				"aria-busy": w || void 0,
+				disabled: g,
+				onClick: T,
+				children: [/* @__PURE__ */ d("span", {
+					className: i,
+					children: [/* @__PURE__ */ u("span", {
+						className: a,
+						children: v
+					}), P]
+				}), e]
+			}), R]
 		});
 	}
-	return /* @__PURE__ */ d("div", {
+	return /* @__PURE__ */ u("div", {
 		className: r,
-		children: B ?? /* @__PURE__ */ d("div", {
-			className: "txvbqb1c8 txvbqbdqn txvbqb5b1 txvbqb2cx txvbqbet9",
-			children: F
+		children: z ?? /* @__PURE__ */ u("div", {
+			className: "txvbqb1cl txvbqbe1d txvbqb5lr txvbqb2nn txvbqbf3z",
+			children: P
 		})
 	});
 };
 //#endregion
-export { g as EntityIdFilterField, g as default };
+export { h as EntityIdFilterField, h as default };
 
 //# sourceMappingURL=EntityIdFilterField.js.map

package/lib/esm/components/backoffice/filters/EntityIdFilterField.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntityIdFilterField.js","names":[],"sources":["../../../../../src/components/backoffice/filters/EntityIdFilterField.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { ModalCloseSvg } from '@plumile/ui/icons/ModalCloseSvg.js';\nimport { BackofficeSidebarPenToolSvg } from '@plumile/ui/icons/backoffice/BackofficeSidebarPenToolSvg.js';\nimport { BackofficeSidebarSearchSvg } from '@plumile/ui/icons/backoffice/BackofficeSidebarSearchSvg.js';\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\n\nimport * as styles from './entityIdFilterField.css.js';\n\nexport type EntityIdFilterFieldProps = {\n  id?: string;\n  label: string;\n  value: string | null;\n  displayValue?: string | null;\n  placeholder?: string;\n  ariaDescribedBy?: string;\n  ariaInvalid?: boolean;\n  isResolving?: boolean;\n  onPick?: () => void;\n  onClear?: () => void;\n  disabled?: boolean;\n};\n\nexport const EntityIdFilterField = (\n  props: EntityIdFilterFieldProps,\n): JSX.Element => {\n  const {\n    disabled = false,\n    id,\n    label,\n    value,\n    displayValue,\n    placeholder,\n    ariaDescribedBy,\n    ariaInvalid,\n    isResolving = false,\n    onPick,\n    onClear,\n  } = props;\n  const { t } = useBackofficeReactTranslation();\n  const normalizedValue = value?.trim() ?? '';\n  const normalizedDisplayValue = displayValue?.trim() ?? '';\n  const hasValue = normalizedValue !== '';\n  const hasDisplayValue = normalizedDisplayValue !== '';\n\n  const resolvedPlaceholder =\n    placeholder ?? t('filters.placeholders.anyEntity', { label });\n  const unresolvedPlaceholder = t('filters.placeholders.unresolved');\n\n  let displayNode: JSX.Element;\n  if (hasDisplayValue) {\n    displayNode = (\n      <span className={styles.valueText}>{normalizedDisplayValue}</span>\n    );\n  } else if (hasValue) {\n    displayNode = (\n      <span className={styles.placeholder}>{unresolvedPlaceholder}</span>\n    );\n  } else {\n    displayNode = (\n      <span className={styles.placeholder}>{resolvedPlaceholder}</span>\n    );\n  }\n\n  let pickLabel = t('common.actions.pick');\n  if (hasValue) {\n    pickLabel = t('filters.actions.changeFilterValue', { label });\n  }\n  let pickAriaLabel = t('filters.actions.filterBy', { label });\n  if (hasValue) {\n    pickAriaLabel = pickLabel;\n  }\n  const clearAriaLabel = t('filters.actions.clearFilter', { label });\n\n  let clearNode: JSX.Element | null = null;\n  if (hasValue && onClear != null) {\n    clearNode = (\n      <button\n        type=\"button\"\n        className={styles.clearButton}\n        aria-label={clearAriaLabel}\n        disabled={disabled}\n        onClick={(event) => {\n          event.stopPropagation();\n          onClear();\n        }}\n      >\n        <ModalCloseSvg width={16} height={16} aria-hidden=\"true\" />\n      </button>\n    );\n  }\n\n  let pickerNode: JSX.Element | null = null;\n  if (onPick != null) {\n    let actionIcon = (\n      <BackofficeSidebarSearchSvg\n        className={styles.actionIcon}\n        aria-hidden=\"true\"\n      />\n    );\n    if (hasValue) {\n      actionIcon = (\n        <BackofficeSidebarPenToolSvg\n          className={styles.actionIcon}\n          aria-hidden=\"true\"\n        />\n      );\n    }\n\n    pickerNode = (\n      <div className={styles.pickerControl}>\n        <button\n          id={id}\n          type=\"button\"\n          className={styles.pickerButton}\n          aria-label={pickAriaLabel}\n          aria-describedby={ariaDescribedBy}\n          aria-invalid={ariaInvalid}\n          aria-busy={isResolving || undefined}\n          disabled={disabled}\n          onClick={onPick}\n        >\n          <span className={styles.content}>\n            <span className={styles.labelText}>{label}</span>\n            {displayNode}\n          </span>\n        </button>\n        <button\n          type=\"button\"\n          className={styles.pickActionButton}\n          aria-label={pickAriaLabel}\n          title={pickAriaLabel}\n          disabled={disabled}\n          onClick={onPick}\n        >\n          {actionIcon}\n        </button>\n        {clearNode}\n      </div>\n    );\n  }\n\n  return (\n    <div className={styles.container}>\n      {pickerNode ?? <div className={styles.valueBox}>{displayNode}</div>}\n    </div>\n  );\n};\n\nexport default EntityIdFilterField;\n"],"mappings":";;;;;;;AAuBA,IAAa,KACX,MACgB;CAChB,IAAM,EACJ,cAAW,IACX,OACA,UACA,UACA,iBACA,aAAA,GACA,oBACA,gBACA,iBAAc,IACd,WACA,eACE,GACE,EAAE,SAAM,EAA8B,GACtC,IAAkB,GAAO,KAAK,KAAK,IACnC,IAAyB,GAAc,KAAK,KAAK,IACjD,IAAW,MAAoB,IAC/B,IAAkB,MAA2B,IAE7C,IACJ,KAAe,EAAE,kCAAkC,EAAE,SAAM,CAAC,GACxD,IAAwB,EAAE,iCAAiC,GAE7D;CACJ,AASE,IATE,IAEA,kBAAC,QAAD;EAAM,WAAW;EAAmB,UAAA;CAA6B,CAAA,IAE1D,IAEP,kBAAC,QAAD;EAAM,WAAW;EAAqB,UAAA;CAA4B,CAAA,IAIlE,kBAAC,QAAD;EAAM,WAAW;EAAqB,UAAA;CAA0B,CAAA;CAIpE,IAAI,IAAY,EAAE,qBAAqB;CACvC,AAAI,MACF,IAAY,EAAE,qCAAqC,EAAE,SAAM,CAAC;CAE9D,IAAI,IAAgB,EAAE,4BAA4B,EAAE,SAAM,CAAC;CAC3D,AAAI,MACF,IAAgB;CAElB,IAAM,IAAiB,EAAE,+BAA+B,EAAE,SAAM,CAAC,GAE7D,IAAgC;CACpC,AAAI,KAAY,KAAW,SACzB,IACE,kBAAC,UAAD;EACE,MAAK;EACL,WAAW;EACX,cAAY;EACF;EACV,UAAU,MAAU;GAElB,AADA,EAAM,gBAAgB,GACtB,EAAQ;EACV;EAEA,UAAA,kBAAC,GAAD;GAAe,OAAO;GAAI,QAAQ;GAAI,eAAY;EAAQ,CAAA;CACpD,CAAA;CAIZ,IAAI,IAAiC;CACrC,IAAI,KAAU,MAAM;EAClB,IAAI,IACF,kBAAC,GAAD;GACE,WAAW;GACX,eAAY;EACb,CAAA;EAWH,AATI,MACF,IACE,kBAAC,GAAD;GACE,WAAW;GACX,eAAY;EACb,CAAA,IAIL,IACE,kBAAC,OAAD;GAAK,WAAW;GAAhB,UAAA;IACE,kBAAC,UAAD;KACM;KACJ,MAAK;KACL,WAAW;KACX,cAAY;KACZ,oBAAkB;KAClB,gBAAc;KACd,aAAW,KAAe,KAAA;KAChB;KACV,SAAS;KAET,UAAA,kBAAC,QAAD;MAAM,WAAW;MAAjB,UAAA,CACE,kBAAC,QAAD;OAAM,WAAW;OAAmB,UAAA;MAAY,CAAA,GAC/C,CACG;;IACA,CAAA;IACR,kBAAC,UAAD;KACE,MAAK;KACL,WAAW;KACX,cAAY;KACZ,OAAO;KACG;KACV,SAAS;KAER,UAAA;IACK,CAAA;IACP;GACE;;CAET;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW;EACb,UAAA,KAAc,kBAAC,OAAD;GAAK,WAAW;GAAkB,UAAA;EAAiB,CAAA;CAC/D,CAAA;AAET"}
+{"version":3,"file":"EntityIdFilterField.js","names":[],"sources":["../../../../../src/components/backoffice/filters/EntityIdFilterField.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { ModalCloseSvg } from '@plumile/ui/icons/ModalCloseSvg';\nimport { BackofficeSidebarPenToolSvg } from '@plumile/ui/icons/BackofficeSidebarPenToolSvg';\nimport { BackofficeSidebarSearchSvg } from '@plumile/ui/icons/BackofficeSidebarSearchSvg';\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\n\nimport * as styles from './entityIdFilterField.css.js';\n\nexport type EntityIdFilterFieldProps = {\n  id?: string;\n  label: string;\n  value: string | null;\n  displayValue?: string | null;\n  placeholder?: string;\n  ariaDescribedBy?: string;\n  ariaInvalid?: boolean;\n  isResolving?: boolean;\n  onPick?: () => void;\n  onClear?: () => void;\n  disabled?: boolean;\n};\n\nexport const EntityIdFilterField = (\n  props: EntityIdFilterFieldProps,\n): JSX.Element => {\n  const {\n    disabled = false,\n    id,\n    label,\n    value,\n    displayValue,\n    placeholder,\n    ariaDescribedBy,\n    ariaInvalid,\n    isResolving = false,\n    onPick,\n    onClear,\n  } = props;\n  const { t } = useBackofficeReactTranslation();\n  const normalizedValue = value?.trim() ?? '';\n  const normalizedDisplayValue = displayValue?.trim() ?? '';\n  const hasValue = normalizedValue !== '';\n  const hasDisplayValue = normalizedDisplayValue !== '';\n\n  const resolvedPlaceholder =\n    placeholder ?? t('filters.placeholders.anyEntity', { label });\n  const unresolvedPlaceholder = t('filters.placeholders.unresolved');\n\n  let displayNode: JSX.Element;\n  if (hasDisplayValue) {\n    displayNode = (\n      <span className={styles.valueText}>{normalizedDisplayValue}</span>\n    );\n  } else if (hasValue) {\n    displayNode = (\n      <span className={styles.placeholder}>{unresolvedPlaceholder}</span>\n    );\n  } else {\n    displayNode = (\n      <span className={styles.placeholder}>{resolvedPlaceholder}</span>\n    );\n  }\n\n  let pickLabel = t('common.actions.pick');\n  if (hasValue) {\n    pickLabel = t('filters.actions.changeFilterValue', { label });\n  }\n  let pickAriaLabel = t('filters.actions.filterBy', { label });\n  if (hasValue) {\n    pickAriaLabel = pickLabel;\n  }\n  const clearAriaLabel = t('filters.actions.clearFilter', { label });\n\n  let clearNode: JSX.Element | null = null;\n  if (hasValue && onClear != null) {\n    clearNode = (\n      <button\n        type=\"button\"\n        className={styles.clearButton}\n        aria-label={clearAriaLabel}\n        disabled={disabled}\n        onClick={(event) => {\n          event.stopPropagation();\n          onClear();\n        }}\n      >\n        <ModalCloseSvg width={16} height={16} aria-hidden=\"true\" />\n      </button>\n    );\n  }\n\n  let pickerNode: JSX.Element | null = null;\n  if (onPick != null) {\n    let actionIcon = (\n      <BackofficeSidebarSearchSvg\n        className={styles.actionIcon}\n        aria-hidden=\"true\"\n      />\n    );\n    if (hasValue) {\n      actionIcon = (\n        <BackofficeSidebarPenToolSvg\n          className={styles.actionIcon}\n          aria-hidden=\"true\"\n        />\n      );\n    }\n\n    pickerNode = (\n      <div className={styles.pickerControl}>\n        <button\n          id={id}\n          type=\"button\"\n          className={styles.pickerButton}\n          aria-label={pickAriaLabel}\n          aria-describedby={ariaDescribedBy}\n          aria-invalid={ariaInvalid}\n          aria-busy={isResolving || undefined}\n          disabled={disabled}\n          onClick={onPick}\n        >\n          <span className={styles.content}>\n            <span className={styles.labelText}>{label}</span>\n            {displayNode}\n          </span>\n          {actionIcon}\n        </button>\n        {clearNode}\n      </div>\n    );\n  }\n\n  return (\n    <div className={styles.container}>\n      {pickerNode ?? <div className={styles.valueBox}>{displayNode}</div>}\n    </div>\n  );\n};\n\nexport default EntityIdFilterField;\n"],"mappings":";;;;;;;AAuBA,IAAa,KACX,MACgB;CAChB,IAAM,EACJ,cAAW,IACX,OACA,UACA,UACA,iBACA,aAAA,GACA,oBACA,gBACA,iBAAc,IACd,WACA,eACE,GACE,EAAE,SAAM,EAA8B,GACtC,IAAkB,GAAO,KAAK,KAAK,IACnC,IAAyB,GAAc,KAAK,KAAK,IACjD,IAAW,MAAoB,IAC/B,IAAkB,MAA2B,IAE7C,IACJ,KAAe,EAAE,kCAAkC,EAAE,SAAM,CAAC,GACxD,IAAwB,EAAE,iCAAiC,GAE7D;CACJ,AASE,IATE,IAEA,kBAAC,QAAD;EAAM,WAAW;EAAmB,UAAA;CAA6B,CAAA,IAE1D,IAEP,kBAAC,QAAD;EAAM,WAAW;EAAqB,UAAA;CAA4B,CAAA,IAIlE,kBAAC,QAAD;EAAM,WAAW;EAAqB,UAAA;CAA0B,CAAA;CAIpE,IAAI,IAAY,EAAE,qBAAqB;CACvC,AAAI,MACF,IAAY,EAAE,qCAAqC,EAAE,SAAM,CAAC;CAE9D,IAAI,IAAgB,EAAE,4BAA4B,EAAE,SAAM,CAAC;CAC3D,AAAI,MACF,IAAgB;CAElB,IAAM,IAAiB,EAAE,+BAA+B,EAAE,SAAM,CAAC,GAE7D,IAAgC;CACpC,AAAI,KAAY,KAAW,SACzB,IACE,kBAAC,UAAD;EACE,MAAK;EACL,WAAW;EACX,cAAY;EACF;EACV,UAAU,MAAU;GAElB,AADA,EAAM,gBAAgB,GACtB,EAAQ;EACV;EAEA,UAAA,kBAAC,GAAD;GAAe,OAAO;GAAI,QAAQ;GAAI,eAAY;EAAQ,CAAA;CACpD,CAAA;CAIZ,IAAI,IAAiC;CACrC,IAAI,KAAU,MAAM;EAClB,IAAI,IACF,kBAAC,GAAD;GACE,WAAW;GACX,eAAY;EACb,CAAA;EAWH,AATI,MACF,IACE,kBAAC,GAAD;GACE,WAAW;GACX,eAAY;EACb,CAAA,IAIL,IACE,kBAAC,OAAD;GAAK,WAAW;GAAhB,UAAA,CACE,kBAAC,UAAD;IACM;IACJ,MAAK;IACL,WAAW;IACX,cAAY;IACZ,oBAAkB;IAClB,gBAAc;IACd,aAAW,KAAe,KAAA;IAChB;IACV,SAAS;IATX,UAAA,CAWE,kBAAC,QAAD;KAAM,WAAW;KAAjB,UAAA,CACE,kBAAC,QAAD;MAAM,WAAW;MAAmB,UAAA;KAAY,CAAA,GAC/C,CACG;IACL,CAAA,GAAA,CACK;GACP,CAAA,GAAA,CACE;;CAET;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW;EACb,UAAA,KAAc,kBAAC,OAAD;GAAK,WAAW;GAAkB,UAAA;EAAiB,CAAA;CAC/D,CAAA;AAET"}

package/lib/esm/components/backoffice/filters/backofficeFilterAction.css.js

@@ -1,5 +1,5 @@
 //#region src/components/backoffice/filters/backofficeFilterAction.css.ts
-var e = "hwnq700 txvbqb5bv txvbqb2cx txvbqb8db txvbqb1ce txvbqble7 txvbqb7j1 txvbqbeu3 txvbqbmw txvbqbl9 txvbqbms txvbqbiu txvbqba6 txvbqbeo txvbqbv txvbqb3f txvbqb7h txvbqb75 txvbqb7t txvbqbon5 txvbqbmy1 txvbqbns1 qbwcue0 txvbqbpec txvbqbq8k", t = "txvbqbldd txvbqb7i7";
+var e = "hwnq700 txvbqb5ml txvbqb2nn txvbqb8o1 txvbqb1cr txvbqbkz3 txvbqb7tr txvbqbf4t txvbqbn1 txvbqble txvbqbmx txvbqbiz txvbqbab txvbqbet txvbqbv txvbqb3f txvbqb7n txvbqb76 txvbqb7y txvbqbo81 txvbqbmix txvbqbncx qbwcue5 qbwcue4 txvbqboz8 txvbqbptg qbwcue3", t = "txvbqbky9 txvbqb7sx";
 //#endregion
 export { e as action, t as icon };
 

package/lib/esm/components/backoffice/filters/backofficeFilterAction.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeFilterAction.css.js","names":[],"sources":["../../../../../src/components/backoffice/filters/backofficeFilterAction.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, stateSprinkles } from '@plumile/ui/theme/sprinkles.css.js';\nimport { focusRing } from '@plumile/ui/theme/styleRecipes.css.js';\n\nexport const action = style([\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n    width: 7,\n    height: 7,\n    padding: 0,\n    borderRadius: 'md',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'borderSubtle',\n    backgroundColor: 'surfaceMuted',\n    color: 'tonePrimaryText',\n    cursor: 'pointer',\n    textDecoration: 'none',\n    transitionProperty: 'colors',\n    transitionDuration: 120,\n    transitionTimingFunction: 'ease',\n  }),\n  stateSprinkles({\n    color: { hover: 'text' },\n    backgroundColor: { hover: 'tonePrimarySurface' },\n    borderColor: { hover: 'tonePrimaryBorder' },\n  }),\n  focusRing,\n]);\n\nexport const icon = sprinkles({\n  width: 4,\n  height: 4,\n});\n"],"mappings":""}
+{"version":3,"file":"backofficeFilterAction.css.js","names":[],"sources":["../../../../../src/components/backoffice/filters/backofficeFilterAction.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, stateSprinkles, focusRing } from '@plumile/ui/theme';\n\nexport const action = style([\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n    width: 7,\n    height: 7,\n    padding: 0,\n    borderRadius: 'md',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'borderSubtle',\n    backgroundColor: 'surfaceMuted',\n    color: 'tonePrimaryText',\n    cursor: 'pointer',\n    textDecoration: 'none',\n    transitionProperty: 'colors',\n    transitionDuration: 120,\n    transitionTimingFunction: 'ease',\n  }),\n  stateSprinkles({\n    color: { hover: 'text' },\n    backgroundColor: { hover: 'tonePrimarySurface' },\n    borderColor: { hover: 'tonePrimaryBorder' },\n  }),\n  focusRing,\n]);\n\nexport const icon = sprinkles({\n  width: 4,\n  height: 4,\n});\n"],"mappings":""}

package/lib/esm/components/backoffice/filters/deferredFilterSearchInput.css.js

@@ -1,6 +1,6 @@
 /* empty css                                         */
 //#region src/components/backoffice/filters/deferredFilterSearchInput.css.ts
-var e = "txvbqblor", t = "ds2thc0 txvbqb5bv txvbqb2cx txvbqb74l", n = "ds2thc1 txvbqb6 txvbqb5bv txvbqb2cx txvbqb8db txvbqble7 txvbqb7j1 txvbqbeu3 txvbqbmw txvbqbk4 txvbqb8i txvbqbe3 txvbqbv txvbqb7h txvbqb75 txvbqb7t", r = "txvbqb5bv txvbqble7 txvbqb7j1 txvbqb1ce";
+var e = "txvbqbl9n", t = "ds2thc0 txvbqb5ml txvbqb2nn txvbqb7fb", n = "ds2thc1 txvbqb6 txvbqb5ml txvbqb2nn txvbqb8o1 txvbqbkz3 txvbqb7tr txvbqbf4t txvbqbn1 txvbqbk9 txvbqb8n txvbqbe8 txvbqbv txvbqb7n txvbqb76 txvbqb7y", r = "txvbqb5ml txvbqbkz3 txvbqb7tr txvbqb1cr";
 //#endregion
 export { n as actionButton, r as actionButtonSpacer, t as actions, e as container };
 

package/lib/esm/components/backoffice/filters/deferredFilterSearchInput.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"deferredFilterSearchInput.css.js","names":[],"sources":["../../../../../src/components/backoffice/filters/deferredFilterSearchInput.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\nimport { vars } from '@plumile/ui/theme/themeContract.css.js';\n\nexport const container = sprinkles({\n  width: 'full',\n});\n\nexport const actions = style([\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: 0.5,\n  }),\n  {\n    minWidth: '3.75rem',\n  },\n]);\n\nexport const actionButton = style([\n  sprinkles({\n    appearance: 'none',\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 7,\n    height: 7,\n    padding: 0,\n    borderRadius: 'md',\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    color: 'textMuted',\n    cursor: 'pointer',\n    transitionProperty: 'colors',\n    transitionDuration: 120,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover:not(:disabled)': {\n        color: vars.colors.text,\n        backgroundColor: vars.colors.surfaceMuted,\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n      '&:disabled': {\n        cursor: 'not-allowed',\n        opacity: 0.45,\n      },\n    },\n  },\n]);\n\nexport const actionButtonSpacer = sprinkles({\n  display: 'inline-flex',\n  width: 7,\n  height: 7,\n  flexShrink: 0,\n});\n"],"mappings":""}
+{"version":3,"file":"deferredFilterSearchInput.css.js","names":[],"sources":["../../../../../src/components/backoffice/filters/deferredFilterSearchInput.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, vars } from '@plumile/ui/theme';\n\nexport const container = sprinkles({\n  width: 'full',\n});\n\nexport const actions = style([\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: 0.5,\n  }),\n  {\n    minWidth: '3.75rem',\n  },\n]);\n\nexport const actionButton = style([\n  sprinkles({\n    appearance: 'none',\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 7,\n    height: 7,\n    padding: 0,\n    borderRadius: 'md',\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    color: 'textMuted',\n    cursor: 'pointer',\n    transitionProperty: 'colors',\n    transitionDuration: 120,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover:not(:disabled)': {\n        color: vars.colors.text,\n        backgroundColor: vars.colors.surfaceMuted,\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n      '&:disabled': {\n        cursor: 'not-allowed',\n        opacity: 0.45,\n      },\n    },\n  },\n]);\n\nexport const actionButtonSpacer = sprinkles({\n  display: 'inline-flex',\n  width: 7,\n  height: 7,\n  flexShrink: 0,\n});\n"],"mappings":""}

package/lib/esm/components/backoffice/filters/entityIdFilterField.css.js

@@ -1,7 +1,7 @@
 /* empty css                                   */
 //#region src/components/backoffice/filters/entityIdFilterField.css.ts
-var e = "txvbqb5b1 txvbqb2cx txvbqbllf txvbqbcwd txvbqbdqn", t = "oa1uye0 txvbqb5bb txvbqb2cx txvbqb1c8 txvbqbdqn txvbqbmy txvbqbl9 txvbqbms txvbqbit txvbqba4 txvbqbe1 txvbqbig3 txvbqbjtj txvbqb7g txvbqb76 txvbqb7t", n = "oa1uye1 txvbqb6 txvbqb5b1 txvbqb6bf txvbqb8db txvbqbdqn txvbqblor txvbqb2b3 txvbqbv txvbqbk4 txvbqb8i txvbqbe1 txvbqbeu3", r = "txvbqb5b1 txvbqb6bf txvbqb8db txvbqb74l txvbqbdqn txvbqblor txvbqbcwd", i = "txvbqb1c8 txvbqbdqn txvbqb5b1 txvbqb2cx txvbqbet9", a = "txvbqb5ah txvbqbe3 txvbqb6cj txvbqb1cr txvbqbdqn txvbqbet9 txvbqb2b6 txvbqb2bp", o = "txvbqb5ah txvbqbdqn txvbqbet9 txvbqb2b6 txvbqb2bp txvbqb6ct txvbqb1cs", s = "txvbqb5ah txvbqbdqn txvbqbet9 txvbqb2b6 txvbqb2bp txvbqbe3 txvbqb6ct", c = "oa1uye3 oa1uye2 txvbqb6 txvbqb5bv txvbqb2cx txvbqbgc txvbqb8db txvbqble7 txvbqb7j1 txvbqbeu3 txvbqbmw txvbqbk4 txvbqb8i txvbqbe3 txvbqbv txvbqb7h txvbqb75 txvbqb7t", l = "oa1uye4 oa1uye2 txvbqb6 txvbqb5bv txvbqb2cx txvbqbgc txvbqb8db txvbqble7 txvbqb7j1 txvbqbeu3 txvbqbmw txvbqbk4 txvbqb8i txvbqbe3 txvbqbv txvbqb7h txvbqb75 txvbqb7t", u = "txvbqbldd txvbqb7i7";
+var e = "txvbqb5lr txvbqb2nn txvbqbl6b txvbqbd73 txvbqbe1d", t = "oa1uye0 txvbqb5m1 txvbqb2nn txvbqb1cl txvbqbe1d txvbqbn3 txvbqble txvbqbmx txvbqbiy txvbqba9 txvbqbe6 txvbqbiqt txvbqbk49 txvbqb7m txvbqb78 txvbqb7y", n = "oa1uye1 txvbqb6 txvbqb5m1 txvbqb8o1 txvbqbe1d txvbqbl9n txvbqb2lt txvbqbv txvbqbk9 txvbqb8n txvbqbe6 txvbqbf4t", r = "txvbqb5lr txvbqb6m5 txvbqb8o1 txvbqb7fb txvbqbe1d txvbqbl9n txvbqbd73", i = "txvbqb1cl txvbqbe1d txvbqb5lr txvbqb2nn txvbqbf3z", a = "txvbqb5l7 txvbqbe8 txvbqb6n9 txvbqb1d4 txvbqbe1d txvbqbf3z txvbqb2lw txvbqb2mf", o = "txvbqb5l7 txvbqbe1d txvbqbf3z txvbqb2lw txvbqb2mf txvbqb6nj txvbqb1d5", s = "txvbqb5l7 txvbqbe1d txvbqbf3z txvbqb2lw txvbqb2mf txvbqbe8 txvbqb6nj", c = "oa1uye3 oa1uye2 txvbqb6 txvbqb5ml txvbqb2nn txvbqbgh txvbqb8o1 txvbqbkz3 txvbqb7tr txvbqbf4t txvbqbn1 txvbqbk9 txvbqb8n txvbqbe8 txvbqbv txvbqb7n txvbqb76 txvbqb7y", l = "txvbqbky9 txvbqb7sx";
 //#endregion
-export { u as actionIcon, l as clearButton, e as container, r as content, a as labelText, c as pickActionButton, n as pickerButton, t as pickerControl, s as placeholder, i as valueBox, o as valueText };
+export { l as actionIcon, c as clearButton, e as container, r as content, a as labelText, n as pickerButton, t as pickerControl, s as placeholder, i as valueBox, o as valueText };
 
 //# sourceMappingURL=entityIdFilterField.css.js.map

package/lib/esm/components/backoffice/filters/entityIdFilterField.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"entityIdFilterField.css.js","names":[],"sources":["../../../../../src/components/backoffice/filters/entityIdFilterField.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\nimport { vars } from '@plumile/ui/theme/themeContract.css.js';\n\nexport const container = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  width: 72,\n  maxWidth: 'full',\n  minWidth: 0,\n});\n\nexport const pickerControl = style([\n  sprinkles({\n    display: 'grid',\n    alignItems: 'center',\n    flex: 1,\n    minWidth: 0,\n    borderRadius: 'xl',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'border',\n    backgroundColor: 'surface',\n    color: 'text',\n    paddingX: 3,\n    paddingY: 1.5,\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    gridTemplateColumns: 'minmax(0, 1fr) auto auto',\n    gridTemplateAreas: '\"content pickAction clearAction\"',\n    columnGap: vars.spacing[0.5],\n    minHeight: '2.5rem',\n    width: '100%',\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.colors.surfaceMuted,\n      },\n    },\n  },\n]);\n\nexport const pickerButton = style([\n  sprinkles({\n    appearance: 'none',\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n    minWidth: 0,\n    width: 'full',\n    textAlign: 'left',\n    cursor: 'pointer',\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    color: 'text',\n    padding: 0,\n  }),\n  {\n    gridArea: 'content',\n    minHeight: '100%',\n    selectors: {\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n      '&:disabled': {\n        cursor: 'not-allowed',\n        opacity: 0.65,\n      },\n    },\n  },\n]);\n\nexport const content = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'center',\n  gap: 0.5,\n  minWidth: 0,\n  width: 'full',\n  maxWidth: 'full',\n});\n\nexport const valueBox = sprinkles({\n  flex: 1,\n  minWidth: 0,\n  display: 'flex',\n  alignItems: 'center',\n  overflow: 'hidden',\n});\n\nexport const labelText = sprinkles({\n  display: 'block',\n  color: 'textMuted',\n  fontSize: 'xs',\n  fontWeight: 'medium',\n  minWidth: 0,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n});\n\nexport const valueText = sprinkles({\n  display: 'block',\n  minWidth: 0,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  fontSize: 'sm',\n  fontWeight: 'semibold',\n});\n\nexport const placeholder = sprinkles({\n  display: 'block',\n  minWidth: 0,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  color: 'textMuted',\n  fontSize: 'sm',\n});\n\nconst actionButtonBase = style([\n  sprinkles({\n    appearance: 'none',\n    display: 'inline-flex',\n    alignItems: 'center',\n    alignSelf: 'center',\n    justifyContent: 'center',\n    width: 7,\n    height: 7,\n    padding: 0,\n    borderRadius: 'md',\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    color: 'textMuted',\n    cursor: 'pointer',\n    transitionProperty: 'colors',\n    transitionDuration: 120,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover:not(:disabled)': {\n        color: vars.colors.text,\n        backgroundColor: vars.colors.surfaceMuted,\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n      '&:disabled': {\n        cursor: 'not-allowed',\n        opacity: 0.65,\n      },\n    },\n  },\n]);\n\nexport const pickActionButton = style([\n  actionButtonBase,\n  {\n    gridArea: 'pickAction',\n  },\n]);\n\nexport const clearButton = style([\n  actionButtonBase,\n  {\n    gridArea: 'clearAction',\n  },\n]);\n\nexport const actionIcon = sprinkles({\n  width: 4,\n  height: 4,\n});\n"],"mappings":""}
+{"version":3,"file":"entityIdFilterField.css.js","names":[],"sources":["../../../../../src/components/backoffice/filters/entityIdFilterField.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, vars } from '@plumile/ui/theme';\n\nexport const container = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  width: 72,\n  maxWidth: 'full',\n  minWidth: 0,\n});\n\nexport const pickerControl = style([\n  sprinkles({\n    display: 'grid',\n    alignItems: 'center',\n    flex: 1,\n    minWidth: 0,\n    borderRadius: 'xl',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'border',\n    backgroundColor: 'surface',\n    color: 'text',\n    paddingX: 3,\n    paddingY: 1.5,\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    gridTemplateColumns: 'minmax(0, 1fr) auto',\n    gridTemplateAreas: '\"picker clearAction\"',\n    columnGap: vars.spacing[0.5],\n    minHeight: '2.5rem',\n    width: '100%',\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.colors.surfaceMuted,\n      },\n    },\n  },\n]);\n\nexport const pickerButton = style([\n  sprinkles({\n    appearance: 'none',\n    display: 'grid',\n    justifyContent: 'center',\n    minWidth: 0,\n    width: 'full',\n    textAlign: 'start',\n    cursor: 'pointer',\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    color: 'text',\n    padding: 0,\n  }),\n  {\n    gridArea: 'picker',\n    gridTemplateColumns: 'minmax(0, 1fr) auto',\n    columnGap: vars.spacing[0.5],\n    alignItems: 'center',\n    minHeight: '100%',\n    selectors: {\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n      '&:disabled': {\n        cursor: 'not-allowed',\n        opacity: 0.65,\n      },\n    },\n  },\n]);\n\nexport const content = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'center',\n  gap: 0.5,\n  minWidth: 0,\n  width: 'full',\n  maxWidth: 'full',\n});\n\nexport const valueBox = sprinkles({\n  flex: 1,\n  minWidth: 0,\n  display: 'flex',\n  alignItems: 'center',\n  overflow: 'hidden',\n});\n\nexport const labelText = sprinkles({\n  display: 'block',\n  color: 'textMuted',\n  fontSize: 'xs',\n  fontWeight: 'medium',\n  minWidth: 0,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n});\n\nexport const valueText = sprinkles({\n  display: 'block',\n  minWidth: 0,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  fontSize: 'sm',\n  fontWeight: 'semibold',\n});\n\nexport const placeholder = sprinkles({\n  display: 'block',\n  minWidth: 0,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  color: 'textMuted',\n  fontSize: 'sm',\n});\n\nconst actionButtonBase = style([\n  sprinkles({\n    appearance: 'none',\n    display: 'inline-flex',\n    alignItems: 'center',\n    alignSelf: 'center',\n    justifyContent: 'center',\n    width: 7,\n    height: 7,\n    padding: 0,\n    borderRadius: 'md',\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    color: 'textMuted',\n    cursor: 'pointer',\n    transitionProperty: 'colors',\n    transitionDuration: 120,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover:not(:disabled)': {\n        color: vars.colors.text,\n        backgroundColor: vars.colors.surfaceMuted,\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n      '&:disabled': {\n        cursor: 'not-allowed',\n        opacity: 0.65,\n      },\n    },\n  },\n]);\n\nexport const clearButton = style([\n  actionButtonBase,\n  {\n    gridArea: 'clearAction',\n  },\n]);\n\nexport const actionIcon = sprinkles({\n  width: 4,\n  height: 4,\n});\n"],"mappings":""}

package/lib/esm/components/backoffice/hub/BackofficeHubTemplate.js

@@ -3,7 +3,7 @@ import { jsx as d, jsxs as f } from "react/jsx-runtime";
 import { BackofficeEmptyState as p } from "@plumile/ui/backoffice/molecules/backoffice_empty_state/BackofficeEmptyState.js";
 import m from "@plumile/router/routing/Link.js";
 import { GlobalSearchInput as h } from "@plumile/ui/backoffice/molecules/global_search_input/GlobalSearchInput.js";
-import { SidebarTasksSvg as g } from "@plumile/ui/icons/SidebarTasksSvg.js";
+import { SidebarTasksSvg as g } from "@plumile/ui/icons/SidebarTasksSvg";
 //#region src/components/backoffice/hub/BackofficeHubTemplate.tsx
 var _ = /* @__PURE__ */ d(g, {
 	width: 20,
@@ -22,7 +22,7 @@ var _ = /* @__PURE__ */ d(g, {
 			children: [/* @__PURE__ */ f("div", {
 				className: r,
 				children: [e.icon != null && /* @__PURE__ */ d("span", {
-					className: "txvbqb5bv txvbqb2cx txvbqb8db txvbqbleh txvbqb7jb txvbqbmw txvbqba6 txvbqbl9 txvbqbms txvbqbiu txvbqbe2 txvbqb1ce txvbqbawf",
+					className: "txvbqb5ml txvbqb2nn txvbqb8o1 txvbqbkzd txvbqb7u1 txvbqbn1 txvbqbab txvbqble txvbqbmx txvbqbiz txvbqbe7 txvbqb1cr txvbqbb75",
 					"aria-hidden": "true",
 					children: e.icon
 				}), /* @__PURE__ */ f("span", {
@@ -31,7 +31,7 @@ var _ = /* @__PURE__ */ d(g, {
 						className: a,
 						children: e.title
 					}), e.description != null && /* @__PURE__ */ d("span", {
-						className: "txvbqbe3 txvbqb6ct",
+						className: "txvbqbe8 txvbqb6nj",
 						children: e.description
 					})]
 				})]
@@ -55,11 +55,11 @@ var _ = /* @__PURE__ */ d(g, {
 									children: e.label
 								}),
 								n && /* @__PURE__ */ d("span", {
-									className: "txvbqbe3 txvbqb6ct txvbqb1oo txvbqb1um",
+									className: "txvbqbe8 txvbqb6nj txvbqb1rn txvbqb206",
 									children: e.description
 								}),
 								r && /* @__PURE__ */ d("span", {
-									className: "txvbqbe3 txvbqb6cj txvbqb1cr txvbqb6a txvbqb1l2",
+									className: "txvbqbe8 txvbqb6n9 txvbqb1d4 txvbqb6a txvbqb1o1",
 									children: e.metaLabel
 								})
 							]
@@ -71,7 +71,7 @@ var _ = /* @__PURE__ */ d(g, {
 	}), /* @__PURE__ */ f("div", {
 		className: e,
 		children: [v != null && /* @__PURE__ */ d("div", {
-			className: "txvbqbcrn",
+			className: "txvbqbd2d",
 			children: /* @__PURE__ */ d(h, {
 				value: v.value,
 				onChange: v.onChange,

package/lib/esm/components/backoffice/hub/BackofficeHubTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackofficeHubTemplate.js","names":[],"sources":["../../../../../src/components/backoffice/hub/BackofficeHubTemplate.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport Link from '@plumile/router/routing/Link.js';\nimport { BackofficeEmptyState } from '@plumile/ui/backoffice/molecules/backoffice_empty_state/BackofficeEmptyState.js';\nimport { GlobalSearchInput } from '@plumile/ui/backoffice/molecules/global_search_input/GlobalSearchInput.js';\nimport { SidebarTasksSvg } from '@plumile/ui/icons/SidebarTasksSvg.js';\n\nimport * as styles from './backofficeHubTemplate.css.js';\n\nexport type BackofficeHubTemplateItemKind = 'entity' | 'tool';\n\nexport type BackofficeHubTemplateItem = {\n  id: string;\n  kind: BackofficeHubTemplateItemKind;\n  label: string;\n  href: string;\n  icon?: ReactNode;\n  description?: string | null;\n  metaLabel?: string | null;\n};\n\nexport type BackofficeHubTemplateGroup = {\n  id: string;\n  title: string;\n  description?: string | null;\n  icon?: ReactNode;\n  items: readonly BackofficeHubTemplateItem[];\n};\n\nexport type BackofficeHubTemplateEmptyState = {\n  title: string;\n  description: string;\n  icon?: ReactNode;\n};\n\nexport type BackofficeHubTemplateSearch = {\n  value: string;\n  onChange: (value: string) => void;\n  placeholder: string;\n};\n\nexport type BackofficeHubTemplateProps = {\n  groups: readonly BackofficeHubTemplateGroup[];\n  search?: BackofficeHubTemplateSearch;\n  emptyState: BackofficeHubTemplateEmptyState;\n};\n\nconst fallbackIcon = (\n  <SidebarTasksSvg width={20} height={20} aria-hidden=\"true\" />\n);\n\nexport const BackofficeHubTemplate = ({\n  groups,\n  search,\n  emptyState,\n}: BackofficeHubTemplateProps): JSX.Element => {\n  let body: JSX.Element;\n\n  if (groups.length === 0) {\n    body = (\n      <BackofficeEmptyState\n        title={emptyState.title}\n        description={emptyState.description}\n        icon={emptyState.icon ?? fallbackIcon}\n      />\n    );\n  } else {\n    body = (\n      <div className={styles.groups}>\n        {groups.map((group) => {\n          return (\n            <section key={group.id} className={styles.group}>\n              <div className={styles.groupHeader}>\n                {group.icon != null && (\n                  <span className={styles.groupIcon} aria-hidden=\"true\">\n                    {group.icon}\n                  </span>\n                )}\n                <span className={styles.groupHeading}>\n                  <h2 className={styles.groupTitle}>{group.title}</h2>\n                  {group.description != null && (\n                    <span className={styles.groupDescription}>\n                      {group.description}\n                    </span>\n                  )}\n                </span>\n              </div>\n              <div className={styles.grid}>\n                {group.items.map((item) => {\n                  const icon = item.icon ?? fallbackIcon;\n                  const hasDescription =\n                    item.description != null && item.description !== '';\n                  const hasMetaLabel =\n                    item.metaLabel != null && item.metaLabel !== '';\n\n                  return (\n                    <Link\n                      key={`${item.kind}-${item.id}`}\n                      to={item.href}\n                      className={styles.item}\n                      preloadOnHover=\"code-and-data\"\n                    >\n                      <span className={styles.itemIcon} aria-hidden=\"true\">\n                        {icon}\n                      </span>\n                      <span className={styles.itemContent}>\n                        <span className={styles.itemTitle}>{item.label}</span>\n                        {hasDescription && (\n                          <span className={styles.itemDescription}>\n                            {item.description}\n                          </span>\n                        )}\n                        {hasMetaLabel && (\n                          <span className={styles.itemMeta}>\n                            {item.metaLabel}\n                          </span>\n                        )}\n                      </span>\n                    </Link>\n                  );\n                })}\n              </div>\n            </section>\n          );\n        })}\n      </div>\n    );\n  }\n\n  return (\n    <div className={styles.content}>\n      {search != null && (\n        <div className={styles.search}>\n          <GlobalSearchInput\n            value={search.value}\n            onChange={search.onChange}\n            placeholder={search.placeholder}\n          />\n        </div>\n      )}\n      {body}\n    </div>\n  );\n};\n\nexport default BackofficeHubTemplate;\n"],"mappings":";;;;;;;AA8CA,IAAM,IACJ,kBAAC,GAAD;CAAiB,OAAO;CAAI,QAAQ;CAAI,eAAY;AAAQ,CAAA,GAGjD,KAAyB,EACpC,QAAA,GACA,QAAA,GACA,oBAC6C;CAC7C,IAAI;CAyEJ,OAvEA,AASE,IATE,EAAO,WAAW,IAElB,kBAAC,GAAD;EACE,OAAO,EAAW;EAClB,aAAa,EAAW;EACxB,MAAM,EAAW,QAAQ;CAC1B,CAAA,IAID,kBAAC,OAAD;EAAK,WAAW;EACb,UAAA,EAAO,KAAK,MAET,kBAAC,WAAD;GAAwB,WAAW;GAAnC,UAAA,CACE,kBAAC,OAAD;IAAK,WAAW;IAAhB,UAAA,CACG,EAAM,QAAQ,QACb,kBAAC,QAAD;KAAM,WAAW;KAAkB,eAAY;KAC5C,UAAA,EAAM;IACH,CAAA,GAER,kBAAC,QAAD;KAAM,WAAW;KAAjB,UAAA,CACE,kBAAC,MAAD;MAAI,WAAW;MAAoB,UAAA,EAAM;KAAU,CAAA,GAClD,EAAM,eAAe,QACpB,kBAAC,QAAD;MAAM,WAAW;MACd,UAAA,EAAM;KACH,CAAA,CAEJ;IACH,CAAA,CAAA;GACL,CAAA,GAAA,kBAAC,OAAD;IAAK,WAAW;IACb,UAAA,EAAM,MAAM,KAAK,MAAS;KACzB,IAAM,IAAO,EAAK,QAAQ,GACpB,IACJ,EAAK,eAAe,QAAQ,EAAK,gBAAgB,IAC7C,IACJ,EAAK,aAAa,QAAQ,EAAK,cAAc;KAE/C,OACE,kBAAC,GAAD;MAEE,IAAI,EAAK;MACT,WAAW;MACX,gBAAe;MAJjB,UAAA,CAME,kBAAC,QAAD;OAAM,WAAW;OAAiB,eAAY;OAC3C,UAAA;MACG,CAAA,GACN,kBAAC,QAAD;OAAM,WAAW;OAAjB,UAAA;QACE,kBAAC,QAAD;SAAM,WAAW;SAAmB,UAAA,EAAK;QAAY,CAAA;QACpD,KACC,kBAAC,QAAD;SAAM,WAAW;SACd,UAAA,EAAK;QACF,CAAA;QAEP,KACC,kBAAC,QAAD;SAAM,WAAW;SACd,UAAA,EAAK;QACF,CAAA;OAEJ;MACF,CAAA,CAAA;KArBC,GAAA,GAAG,EAAK,KAAK,GAAG,EAAK,IAqBtB;IAEV,CAAC;GACE,CAAA,CACE;EAnDK,GAAA,EAAM,EAmDX,CAEZ;CACE,CAAA,GAKP,kBAAC,OAAD;EAAK,WAAW;EAAhB,UAAA,CACG,KAAU,QACT,kBAAC,OAAD;GAAK,WAAW;GACd,UAAA,kBAAC,GAAD;IACE,OAAO,EAAO;IACd,UAAU,EAAO;IACjB,aAAa,EAAO;GACrB,CAAA;EACE,CAAA,GAEN,CACE;;AAET"}
+{"version":3,"file":"BackofficeHubTemplate.js","names":[],"sources":["../../../../../src/components/backoffice/hub/BackofficeHubTemplate.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport Link from '@plumile/router/routing/Link.js';\nimport { BackofficeEmptyState } from '@plumile/ui/backoffice/molecules/backoffice_empty_state/BackofficeEmptyState.js';\nimport { GlobalSearchInput } from '@plumile/ui/backoffice/molecules/global_search_input/GlobalSearchInput.js';\nimport { SidebarTasksSvg } from '@plumile/ui/icons/SidebarTasksSvg';\n\nimport * as styles from './backofficeHubTemplate.css.js';\n\nexport type BackofficeHubTemplateItemKind = 'entity' | 'tool';\n\nexport type BackofficeHubTemplateItem = {\n  id: string;\n  kind: BackofficeHubTemplateItemKind;\n  label: string;\n  href: string;\n  icon?: ReactNode;\n  description?: string | null;\n  metaLabel?: string | null;\n};\n\nexport type BackofficeHubTemplateGroup = {\n  id: string;\n  title: string;\n  description?: string | null;\n  icon?: ReactNode;\n  items: readonly BackofficeHubTemplateItem[];\n};\n\nexport type BackofficeHubTemplateEmptyState = {\n  title: string;\n  description: string;\n  icon?: ReactNode;\n};\n\nexport type BackofficeHubTemplateSearch = {\n  value: string;\n  onChange: (value: string) => void;\n  placeholder: string;\n};\n\nexport type BackofficeHubTemplateProps = {\n  groups: readonly BackofficeHubTemplateGroup[];\n  search?: BackofficeHubTemplateSearch;\n  emptyState: BackofficeHubTemplateEmptyState;\n};\n\nconst fallbackIcon = (\n  <SidebarTasksSvg width={20} height={20} aria-hidden=\"true\" />\n);\n\nexport const BackofficeHubTemplate = ({\n  groups,\n  search,\n  emptyState,\n}: BackofficeHubTemplateProps): JSX.Element => {\n  let body: JSX.Element;\n\n  if (groups.length === 0) {\n    body = (\n      <BackofficeEmptyState\n        title={emptyState.title}\n        description={emptyState.description}\n        icon={emptyState.icon ?? fallbackIcon}\n      />\n    );\n  } else {\n    body = (\n      <div className={styles.groups}>\n        {groups.map((group) => {\n          return (\n            <section key={group.id} className={styles.group}>\n              <div className={styles.groupHeader}>\n                {group.icon != null && (\n                  <span className={styles.groupIcon} aria-hidden=\"true\">\n                    {group.icon}\n                  </span>\n                )}\n                <span className={styles.groupHeading}>\n                  <h2 className={styles.groupTitle}>{group.title}</h2>\n                  {group.description != null && (\n                    <span className={styles.groupDescription}>\n                      {group.description}\n                    </span>\n                  )}\n                </span>\n              </div>\n              <div className={styles.grid}>\n                {group.items.map((item) => {\n                  const icon = item.icon ?? fallbackIcon;\n                  const hasDescription =\n                    item.description != null && item.description !== '';\n                  const hasMetaLabel =\n                    item.metaLabel != null && item.metaLabel !== '';\n\n                  return (\n                    <Link\n                      key={`${item.kind}-${item.id}`}\n                      to={item.href}\n                      className={styles.item}\n                      preloadOnHover=\"code-and-data\"\n                    >\n                      <span className={styles.itemIcon} aria-hidden=\"true\">\n                        {icon}\n                      </span>\n                      <span className={styles.itemContent}>\n                        <span className={styles.itemTitle}>{item.label}</span>\n                        {hasDescription && (\n                          <span className={styles.itemDescription}>\n                            {item.description}\n                          </span>\n                        )}\n                        {hasMetaLabel && (\n                          <span className={styles.itemMeta}>\n                            {item.metaLabel}\n                          </span>\n                        )}\n                      </span>\n                    </Link>\n                  );\n                })}\n              </div>\n            </section>\n          );\n        })}\n      </div>\n    );\n  }\n\n  return (\n    <div className={styles.content}>\n      {search != null && (\n        <div className={styles.search}>\n          <GlobalSearchInput\n            value={search.value}\n            onChange={search.onChange}\n            placeholder={search.placeholder}\n          />\n        </div>\n      )}\n      {body}\n    </div>\n  );\n};\n\nexport default BackofficeHubTemplate;\n"],"mappings":";;;;;;;AA8CA,IAAM,IACJ,kBAAC,GAAD;CAAiB,OAAO;CAAI,QAAQ;CAAI,eAAY;AAAQ,CAAA,GAGjD,KAAyB,EACpC,QAAA,GACA,QAAA,GACA,oBAC6C;CAC7C,IAAI;CAyEJ,OAvEA,AASE,IATE,EAAO,WAAW,IAElB,kBAAC,GAAD;EACE,OAAO,EAAW;EAClB,aAAa,EAAW;EACxB,MAAM,EAAW,QAAQ;CAC1B,CAAA,IAID,kBAAC,OAAD;EAAK,WAAW;EACb,UAAA,EAAO,KAAK,MAET,kBAAC,WAAD;GAAwB,WAAW;GAAnC,UAAA,CACE,kBAAC,OAAD;IAAK,WAAW;IAAhB,UAAA,CACG,EAAM,QAAQ,QACb,kBAAC,QAAD;KAAM,WAAW;KAAkB,eAAY;KAC5C,UAAA,EAAM;IACH,CAAA,GAER,kBAAC,QAAD;KAAM,WAAW;KAAjB,UAAA,CACE,kBAAC,MAAD;MAAI,WAAW;MAAoB,UAAA,EAAM;KAAU,CAAA,GAClD,EAAM,eAAe,QACpB,kBAAC,QAAD;MAAM,WAAW;MACd,UAAA,EAAM;KACH,CAAA,CAEJ;IACH,CAAA,CAAA;GACL,CAAA,GAAA,kBAAC,OAAD;IAAK,WAAW;IACb,UAAA,EAAM,MAAM,KAAK,MAAS;KACzB,IAAM,IAAO,EAAK,QAAQ,GACpB,IACJ,EAAK,eAAe,QAAQ,EAAK,gBAAgB,IAC7C,IACJ,EAAK,aAAa,QAAQ,EAAK,cAAc;KAE/C,OACE,kBAAC,GAAD;MAEE,IAAI,EAAK;MACT,WAAW;MACX,gBAAe;MAJjB,UAAA,CAME,kBAAC,QAAD;OAAM,WAAW;OAAiB,eAAY;OAC3C,UAAA;MACG,CAAA,GACN,kBAAC,QAAD;OAAM,WAAW;OAAjB,UAAA;QACE,kBAAC,QAAD;SAAM,WAAW;SAAmB,UAAA,EAAK;QAAY,CAAA;QACpD,KACC,kBAAC,QAAD;SAAM,WAAW;SACd,UAAA,EAAK;QACF,CAAA;QAEP,KACC,kBAAC,QAAD;SAAM,WAAW;SACd,UAAA,EAAK;QACF,CAAA;OAEJ;MACF,CAAA,CAAA;KArBC,GAAA,GAAG,EAAK,KAAK,GAAG,EAAK,IAqBtB;IAEV,CAAC;GACE,CAAA,CACE;EAnDK,GAAA,EAAM,EAmDX,CAEZ;CACE,CAAA,GAKP,kBAAC,OAAD;EAAK,WAAW;EAAhB,UAAA,CACG,KAAU,QACT,kBAAC,OAAD;GAAK,WAAW;GACd,UAAA,kBAAC,GAAD;IACE,OAAO,EAAO;IACd,UAAU,EAAO;IACjB,aAAa,EAAO;GACrB,CAAA;EACE,CAAA,GAEN,CACE;;AAET"}

package/lib/esm/components/backoffice/hub/backofficeHubTemplate.css.js

@@ -1,6 +1,6 @@
 /* empty css                                     */
 //#region src/components/backoffice/hub/backofficeHubTemplate.css.ts
-var e = "txvbqb5b1 txvbqb6bf txvbqb6ht", t = "txvbqbcrn", n = "txvbqb5b1 txvbqb6bf txvbqb6i3", r = "txvbqb5b1 txvbqb6bf txvbqb6h9", i = "txvbqb5b1 txvbqb2cn txvbqb6h9", a = "txvbqb5bv txvbqb2cx txvbqb8db txvbqbleh txvbqb7jb txvbqbmw txvbqba6 txvbqbl9 txvbqbms txvbqbiu txvbqbe2 txvbqb1ce txvbqbawf", o = "txvbqb5b1 txvbqb6bf txvbqb6gp txvbqbdqn", s = "txvbqb6dd txvbqb1cs txvbqbe1 txvbqb1ou", c = "txvbqbe3 txvbqb6ct", l = "txvbqb5bb txvbqb7g9 txvbqb6h9", u = "u4nszr0 txvbqb5b1 txvbqb2cn txvbqb6h9 txvbqbeux txvbqbmw txvbqbl9 txvbqbms txvbqbiu txvbqba4 txvbqbe1 txvbqb3f txvbqbdqn txvbqb7g txvbqb76 txvbqb7t", d = "txvbqb5bv txvbqb2cx txvbqb8db txvbqbler txvbqb7jl txvbqbmw txvbqba6 txvbqbe2 txvbqb1ce", f = "txvbqb5b1 txvbqb6bf txvbqb6gp txvbqbdqn", p = "txvbqb1cs txvbqbe1 txvbqb1um", m = "txvbqbe3 txvbqb6ct txvbqb1oo txvbqb1um", h = "txvbqbe3 txvbqb6cj txvbqb1cr txvbqb6a txvbqb1l2";
+var e = "txvbqb5lr txvbqb6m5 txvbqb6sj", t = "txvbqbd2d", n = "txvbqb5lr txvbqb6m5 txvbqb6st", r = "txvbqb5lr txvbqb6m5 txvbqb6rz", i = "txvbqb5lr txvbqb2nd txvbqb6rz", a = "txvbqb5ml txvbqb2nn txvbqb8o1 txvbqbkzd txvbqb7u1 txvbqbn1 txvbqbab txvbqble txvbqbmx txvbqbiz txvbqbe7 txvbqb1cr txvbqbb75", o = "txvbqb5lr txvbqb6m5 txvbqb6rf txvbqbe1d", s = "txvbqb6o3 txvbqb1d5 txvbqbe6 txvbqb1rt", c = "txvbqbe8 txvbqb6nj", l = "txvbqb5m1 txvbqb7qz txvbqb6rz", u = "u4nszr0 txvbqb5lr txvbqb2nd txvbqb6rz txvbqbf5n txvbqbn1 txvbqble txvbqbmx txvbqbiz txvbqba9 txvbqbe6 txvbqb3f txvbqbe1d txvbqb7m txvbqb78 txvbqb7y qbwcue2", d = "txvbqb5ml txvbqb2nn txvbqb8o1 txvbqbkzn txvbqb7ub txvbqbn1 txvbqbab txvbqbe7 txvbqb1cr", f = "txvbqb5lr txvbqb6m5 txvbqb6rf txvbqbe1d", p = "txvbqb1d5 txvbqbe6 txvbqb206", m = "txvbqbe8 txvbqb6nj txvbqb1rn txvbqb206", h = "txvbqbe8 txvbqb6n9 txvbqb1d4 txvbqb6a txvbqb1o1";
 //#endregion
 export { e as content, l as grid, r as group, c as groupDescription, i as groupHeader, o as groupHeading, a as groupIcon, s as groupTitle, n as groups, u as item, f as itemContent, m as itemDescription, d as itemIcon, h as itemMeta, p as itemTitle, t as search };
 

package/lib/esm/components/backoffice/hub/backofficeHubTemplate.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeHubTemplate.css.js","names":[],"sources":["../../../../../src/components/backoffice/hub/backofficeHubTemplate.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\nimport { vars } from '@plumile/ui/theme/themeContract.css.js';\n\nexport const content = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 5,\n});\n\nexport const search = sprinkles({\n  maxWidth: '2xl',\n});\n\nexport const groups = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 6,\n});\n\nexport const group = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n});\n\nexport const groupHeader = sprinkles({\n  display: 'flex',\n  alignItems: 'flex-start',\n  gap: 3,\n});\n\nexport const groupIcon = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 8,\n  height: 8,\n  borderRadius: 'md',\n  backgroundColor: 'surfaceMuted',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'borderSubtle',\n  color: 'textSecondary',\n  flexShrink: 0,\n  marginTop: 'px',\n});\n\nexport const groupHeading = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n  minWidth: 0,\n});\n\nexport const groupTitle = sprinkles({\n  fontSize: 'lg',\n  fontWeight: 'semibold',\n  color: 'text',\n  margin: 0,\n});\n\nexport const groupDescription = sprinkles({\n  color: 'textMuted',\n  fontSize: 'sm',\n});\n\nexport const grid = sprinkles({\n  display: 'grid',\n  gridTemplateColumns: 'autoFitMinmax260',\n  gap: 3,\n});\n\nexport const item = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'flex-start',\n    gap: 3,\n    padding: 3,\n    borderRadius: 'md',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'borderSubtle',\n    backgroundColor: 'surface',\n    color: 'text',\n    textDecoration: 'none',\n    minWidth: 0,\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    minHeight: '92px',\n    selectors: {\n      '&:hover': {\n        borderColor: vars.colors.border,\n        backgroundColor: vars.colors.surfaceMuted,\n        transform: 'translateY(-1px)',\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const itemIcon = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 9,\n  height: 9,\n  borderRadius: 'md',\n  backgroundColor: 'surfaceMuted',\n  color: 'textSecondary',\n  flexShrink: 0,\n});\n\nexport const itemContent = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n  minWidth: 0,\n});\n\nexport const itemTitle = sprinkles({\n  fontWeight: 'semibold',\n  color: 'text',\n  overflowWrap: 'anywhere',\n});\n\nexport const itemDescription = sprinkles({\n  color: 'textMuted',\n  fontSize: 'sm',\n  lineHeight: 'normal',\n  overflowWrap: 'anywhere',\n});\n\nexport const itemMeta = sprinkles({\n  color: 'textMuted',\n  fontSize: 'xs',\n  fontWeight: 'medium',\n  textTransform: 'uppercase',\n  letterSpacing: 'wide',\n});\n"],"mappings":""}
+{"version":3,"file":"backofficeHubTemplate.css.js","names":[],"sources":["../../../../../src/components/backoffice/hub/backofficeHubTemplate.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport {\n  sprinkles,\n  reducedMotionDecorativeTransform,\n  vars,\n} from '@plumile/ui/theme';\n\nexport const content = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 5,\n});\n\nexport const search = sprinkles({\n  maxWidth: '2xl',\n});\n\nexport const groups = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 6,\n});\n\nexport const group = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n});\n\nexport const groupHeader = sprinkles({\n  display: 'flex',\n  alignItems: 'flex-start',\n  gap: 3,\n});\n\nexport const groupIcon = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 8,\n  height: 8,\n  borderRadius: 'md',\n  backgroundColor: 'surfaceMuted',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'borderSubtle',\n  color: 'textSecondary',\n  flexShrink: 0,\n  marginTop: 'px',\n});\n\nexport const groupHeading = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n  minWidth: 0,\n});\n\nexport const groupTitle = sprinkles({\n  fontSize: 'lg',\n  fontWeight: 'semibold',\n  color: 'text',\n  margin: 0,\n});\n\nexport const groupDescription = sprinkles({\n  color: 'textMuted',\n  fontSize: 'sm',\n});\n\nexport const grid = sprinkles({\n  display: 'grid',\n  gridTemplateColumns: 'autoFitMinmax260',\n  gap: 3,\n});\n\nexport const item = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'flex-start',\n    gap: 3,\n    padding: 3,\n    borderRadius: 'md',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'borderSubtle',\n    backgroundColor: 'surface',\n    color: 'text',\n    textDecoration: 'none',\n    minWidth: 0,\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  reducedMotionDecorativeTransform,\n  {\n    minHeight: '92px',\n    selectors: {\n      '&:hover': {\n        borderColor: vars.colors.border,\n        backgroundColor: vars.colors.surfaceMuted,\n        transform: 'translateY(-1px)',\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const itemIcon = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 9,\n  height: 9,\n  borderRadius: 'md',\n  backgroundColor: 'surfaceMuted',\n  color: 'textSecondary',\n  flexShrink: 0,\n});\n\nexport const itemContent = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n  minWidth: 0,\n});\n\nexport const itemTitle = sprinkles({\n  fontWeight: 'semibold',\n  color: 'text',\n  overflowWrap: 'anywhere',\n});\n\nexport const itemDescription = sprinkles({\n  color: 'textMuted',\n  fontSize: 'sm',\n  lineHeight: 'normal',\n  overflowWrap: 'anywhere',\n});\n\nexport const itemMeta = sprinkles({\n  color: 'textMuted',\n  fontSize: 'xs',\n  fontWeight: 'medium',\n  textTransform: 'uppercase',\n  letterSpacing: 'wide',\n});\n"],"mappings":""}

package/lib/esm/components/backoffice/layout/backofficeSidebarActions.css.js

@@ -1,6 +1,6 @@
 /* empty css                                        */
 //#region src/components/backoffice/layout/backofficeSidebarActions.css.ts
-var e = "_1xws1b00 txvbqb5bv txvbqb2cx txvbqb8db txvbqbldx txvbqb7ir txvbqbk4 txvbqbmq txvbqbmw txvbqb8i txvbqbv txvbqbeu3 txvbqb7h txvbqb76 txvbqb7t";
+var e = "_1xws1b00 txvbqb5ml txvbqb2nn txvbqb8o1 txvbqbkyt txvbqb7th txvbqbk9 txvbqbmv txvbqbn1 txvbqb8n txvbqbv txvbqbf4t txvbqb7n txvbqb78 txvbqb7y";
 //#endregion
 export { e as actionButton };
 

package/lib/esm/components/backoffice/layout/backofficeSidebarActions.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeSidebarActions.css.js","names":[],"sources":["../../../../../src/components/backoffice/layout/backofficeSidebarActions.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\nimport { vars } from '@plumile/ui/theme/themeContract.css.js';\n\nexport const actionButton = style([\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 6,\n    height: 6,\n    borderWidth: 0,\n    borderStyle: 'none',\n    borderRadius: 'md',\n    backgroundColor: 'transparent',\n    cursor: 'pointer',\n    padding: 0,\n    transitionProperty: 'colors',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    color: vars.sidebar.actionColor,\n    selectors: {\n      '&:hover:not(:disabled)': {\n        backgroundColor: vars.sidebar.actionHoverBackground,\n        color: vars.sidebar.actionHoverColor,\n      },\n      '&:focus-visible': {\n        boxShadow: vars.sidebar.actionFocusRing,\n        outline: 'none',\n      },\n      '&:disabled': {\n        cursor: 'not-allowed',\n        opacity: 0.6,\n      },\n    },\n  },\n]);\n"],"mappings":""}
+{"version":3,"file":"backofficeSidebarActions.css.js","names":[],"sources":["../../../../../src/components/backoffice/layout/backofficeSidebarActions.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, vars } from '@plumile/ui/theme';\n\nexport const actionButton = style([\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 6,\n    height: 6,\n    borderWidth: 0,\n    borderStyle: 'none',\n    borderRadius: 'md',\n    backgroundColor: 'transparent',\n    cursor: 'pointer',\n    padding: 0,\n    transitionProperty: 'colors',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    '@media': {\n      '(forced-colors: active)': {\n        selectors: {\n          '&:focus-visible': {\n            boxShadow: 'none',\n            outline: '2px solid Highlight',\n            outlineOffset: 2,\n          },\n        },\n      },\n    },\n    color: vars.sidebar.actionColor,\n    selectors: {\n      '&:hover:not(:disabled)': {\n        backgroundColor: vars.sidebar.actionHoverBackground,\n        color: vars.sidebar.actionHoverColor,\n      },\n      '&:focus-visible': {\n        boxShadow: vars.sidebar.actionFocusRing,\n        outline: 'none',\n      },\n      '&:disabled': {\n        cursor: 'not-allowed',\n        opacity: 0.6,\n      },\n    },\n  },\n]);\n"],"mappings":""}

package/lib/esm/components/backoffice/layout/breadcrumb/BackofficeTopbarBreadcrumb.js

@@ -5,7 +5,7 @@ import { BackofficeLinkLabel as r } from "../../links/BackofficeLinkLabel.js";
 import { current as i, homeLabel as a, item as o, link as s, list as c, nav as l, separator as u } from "./backofficeTopbarBreadcrumb.css.js";
 import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
 import m from "@plumile/router/routing/Link.js";
-import { SidebarHomeSvg as h } from "@plumile/ui/icons/SidebarHomeSvg.js";
+import { SidebarHomeSvg as h } from "@plumile/ui/icons/SidebarHomeSvg";
 //#region src/components/backoffice/layout/breadcrumb/BackofficeTopbarBreadcrumb.tsx
 var g = (e) => {
 	let { target: t } = e;
@@ -31,13 +31,13 @@ var g = (e) => {
 			children: [/* @__PURE__ */ p("li", {
 				className: o,
 				children: [x && /* @__PURE__ */ f("span", {
-					className: "_80s44h2 _80s44h1 qbwcuej qbwcueh txvbqb5bv txvbqb2cx txvbqb8db txvbqbk4 txvbqbmq txvbqbmw txvbqb8i txvbqbe2 txvbqbv txvbqbeu3 txvbqb7h txvbqb76 txvbqb7t qbwcuei txvbqbmru txvbqbon6 qbwcue4 txvbqbp68 txvbqbpco qbwcue0 txvbqbpec txvbqbq8k qbwcuex qbwcuer txvbqb1ce txvbqb1ol qbwcue11 qbwcuev txvbqbleh txvbqb7jb txvbqbdsv txvbqbd1d txvbqb3f txvbqba6 txvbqbe1",
+					className: "_80s44h2 _80s44h1 qbwcueu qbwcues txvbqb5ml txvbqb2nn txvbqb8o1 txvbqbk9 txvbqbmv txvbqbn1 txvbqb8n txvbqbe7 txvbqbv txvbqbf4t txvbqb7n txvbqb78 txvbqb7y qbwcuet txvbqbmcq txvbqbo82 qbwcuec txvbqbor4 txvbqboxk qbwcue5 qbwcue4 txvbqboz8 txvbqbptg qbwcue3 qbwcue18 qbwcue12 txvbqb1cr txvbqb1rk qbwcue1c qbwcue16 txvbqbkzd txvbqb7u1 txvbqbe3l txvbqbdc3 txvbqb3f txvbqbab txvbqbe6",
 					"aria-current": "page",
 					title: b,
 					children: w
 				}), !x && /* @__PURE__ */ f(m, {
 					to: y,
-					className: "_80s44h1 qbwcuej qbwcueh txvbqb5bv txvbqb2cx txvbqb8db txvbqbk4 txvbqbmq txvbqbmw txvbqb8i txvbqbe2 txvbqbv txvbqbeu3 txvbqb7h txvbqb76 txvbqb7t qbwcuei txvbqbmru txvbqbon6 qbwcue4 txvbqbp68 txvbqbpco qbwcue0 txvbqbpec txvbqbq8k qbwcuex qbwcuer txvbqb1ce txvbqb1ol qbwcue11 qbwcuev txvbqbleh txvbqb7jb txvbqbdsv txvbqbd1d txvbqb3f",
+					className: "_80s44h1 qbwcueu qbwcues txvbqb5ml txvbqb2nn txvbqb8o1 txvbqbk9 txvbqbmv txvbqbn1 txvbqb8n txvbqbe7 txvbqbv txvbqbf4t txvbqb7n txvbqb78 txvbqb7y qbwcuet txvbqbmcq txvbqbo82 qbwcuec txvbqbor4 txvbqboxk qbwcue5 qbwcue4 txvbqboz8 txvbqbptg qbwcue3 qbwcue18 qbwcue12 txvbqb1cr txvbqb1rk qbwcue1c qbwcue16 txvbqbkzd txvbqb7u1 txvbqbe3l txvbqbdc3 txvbqb3f",
 					"aria-label": b,
 					title: b,
 					preloadOnHover: "code-and-data",

package/lib/esm/components/backoffice/layout/breadcrumb/BackofficeTopbarBreadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackofficeTopbarBreadcrumb.js","names":[],"sources":["../../../../../../src/components/backoffice/layout/breadcrumb/BackofficeTopbarBreadcrumb.tsx"],"sourcesContent":["import { type JSX } from 'react';\nimport Link from '@plumile/router/routing/Link.js';\nimport { SidebarHomeSvg } from '@plumile/ui/icons/SidebarHomeSvg.js';\n\nimport { BackofficeLink } from '../../links/BackofficeLink.js';\nimport { BackofficeLinkLabel } from '../../links/BackofficeLinkLabel.js';\nimport { useBackofficeReactTranslation } from '../../../../i18n/useBackofficeReactTranslation.js';\nimport type { BackofficeTopbarBreadcrumbItem } from './types.js';\nimport { useBackofficeTopbarPortalContext } from './BackofficeTopbarPortalContext.js';\nimport * as styles from './backofficeTopbarBreadcrumb.css.js';\n\nexport type BackofficeTopbarBreadcrumbProps = {\n  items: readonly BackofficeTopbarBreadcrumbItem[];\n};\n\nconst getBreadcrumbItemKey = (item: BackofficeTopbarBreadcrumbItem): string => {\n  const { target } = item;\n  if (target.kind === 'dashboard') {\n    return `${item.kind}-dashboard`;\n  }\n  if (target.kind === 'entity-list') {\n    return `${item.kind}-entity-list-${target.entityId}`;\n  }\n  if (target.kind === 'entity-detail') {\n    return `${item.kind}-entity-detail-${target.entityId}-${target.id}`;\n  }\n  if (target.kind === 'entity-detail-page') {\n    return `${item.kind}-entity-detail-page-${target.entityId}-${target.id}-${target.pageId}`;\n  }\n  if (target.kind === 'tool') {\n    return `${item.kind}-tool-${target.toolId}`;\n  }\n  if (target.kind === 'hub') {\n    return `${item.kind}-hub-${target.hubId}`;\n  }\n  return `${item.kind}-href-${target.href}`;\n};\n\nexport const BackofficeTopbarBreadcrumb = ({\n  items,\n}: BackofficeTopbarBreadcrumbProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const { dashboardHref, dashboardLabel } = useBackofficeTopbarPortalContext();\n  let isDashboardCurrent = false;\n  const [firstItem] = items;\n  if (items.length === 1 && firstItem != null) {\n    isDashboardCurrent =\n      firstItem.target.kind === 'dashboard' && firstItem.kind === 'current';\n  }\n  let visibleItems: readonly BackofficeTopbarBreadcrumbItem[] = items;\n  if (isDashboardCurrent) {\n    visibleItems = [];\n  }\n\n  const homeContent = (\n    <>\n      <SidebarHomeSvg width={16} height={16} aria-hidden=\"true\" />\n      <span className={styles.homeLabel}>{dashboardLabel}</span>\n    </>\n  );\n\n  return (\n    <nav className={styles.nav} aria-label={t('common.breadcrumb')}>\n      <ol className={styles.list}>\n        <li className={styles.item}>\n          {isDashboardCurrent && (\n            <span\n              className={styles.homeCurrent}\n              aria-current=\"page\"\n              title={dashboardLabel}\n            >\n              {homeContent}\n            </span>\n          )}\n          {!isDashboardCurrent && (\n            <Link\n              to={dashboardHref}\n              className={styles.homeLink}\n              aria-label={dashboardLabel}\n              title={dashboardLabel}\n              preloadOnHover=\"code-and-data\"\n            >\n              {homeContent}\n            </Link>\n          )}\n        </li>\n        {visibleItems.map((item, index) => {\n          const isCurrent = item.kind === 'current';\n          const key = getBreadcrumbItemKey(item);\n          let icon: 'auto' | 'none' = 'none';\n          if (index === 0) {\n            icon = 'auto';\n          }\n          let content: JSX.Element;\n\n          if (!isCurrent) {\n            content = (\n              <BackofficeLink\n                target={item.target}\n                label={item.label}\n                className={styles.link}\n                icon={icon}\n              />\n            );\n          } else {\n            content = (\n              <BackofficeLinkLabel\n                target={item.target}\n                label={item.label}\n                className={styles.current}\n                icon={icon}\n              />\n            );\n          }\n\n          return (\n            <li key={key} className={styles.item}>\n              <span className={styles.separator} aria-hidden=\"true\">\n                /\n              </span>\n              {content}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n\nexport default BackofficeTopbarBreadcrumb;\n"],"mappings":";;;;;;;;;AAeA,IAAM,KAAwB,MAAiD;CAC7E,IAAM,EAAE,cAAW;CAmBnB,OAlBI,EAAO,SAAS,cACX,GAAG,EAAK,KAAK,cAElB,EAAO,SAAS,gBACX,GAAG,EAAK,KAAK,eAAe,EAAO,aAExC,EAAO,SAAS,kBACX,GAAG,EAAK,KAAK,iBAAiB,EAAO,SAAS,GAAG,EAAO,OAE7D,EAAO,SAAS,uBACX,GAAG,EAAK,KAAK,sBAAsB,EAAO,SAAS,GAAG,EAAO,GAAG,GAAG,EAAO,WAE/E,EAAO,SAAS,SACX,GAAG,EAAK,KAAK,QAAQ,EAAO,WAEjC,EAAO,SAAS,QACX,GAAG,EAAK,KAAK,OAAO,EAAO,UAE7B,GAAG,EAAK,KAAK,QAAQ,EAAO;AACrC,GAEa,KAA8B,EACzC,eACkD;CAClD,IAAM,EAAE,SAAM,EAA8B,GACtC,EAAE,kBAAe,sBAAmB,EAAiC,GACvE,IAAqB,IACnB,CAAC,KAAa;CACpB,AAAI,EAAM,WAAW,KAAK,KAAa,SACrC,IACE,EAAU,OAAO,SAAS,eAAe,EAAU,SAAS;CAEhE,IAAI,IAA0D;CAC9D,AAAI,MACF,IAAe,CAAC;CAGlB,IAAM,IACJ,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EAAgB,OAAO;EAAI,QAAQ;EAAI,eAAY;CAAQ,CAAA,GAC3D,kBAAC,QAAD;EAAM,WAAW;EAAmB,UAAA;CAAqB,CAAA,CACzD,EAAA,CAAA;CAGJ,OACE,kBAAC,OAAD;EAAK,WAAW;EAAY,cAAY,EAAE,mBAAmB;EAC3D,UAAA,kBAAC,MAAD;GAAI,WAAW;GAAf,UAAA,CACE,kBAAC,MAAD;IAAI,WAAW;IAAf,UAAA,CACG,KACC,kBAAC,QAAD;KACE,WAAW;KACX,gBAAa;KACb,OAAO;KAEN,UAAA;IACG,CAAA,GAEP,CAAC,KACA,kBAAC,GAAD;KACE,IAAI;KACJ,WAAW;KACX,cAAY;KACZ,OAAO;KACP,gBAAe;KAEd,UAAA;IACG,CAAA,CAEN;GACH,CAAA,GAAA,EAAa,KAAK,GAAM,MAAU;IACjC,IAAM,IAAY,EAAK,SAAS,WAC1B,IAAM,EAAqB,CAAI,GACjC,IAAwB;IAC5B,AAAI,MAAU,MACZ,IAAO;IAET,IAAI;IAsBJ,OApBA,AACE,IADG,IAWD,kBAAC,GAAD;KACE,QAAQ,EAAK;KACb,OAAO,EAAK;KACZ,WAAW;KACL;IACP,CAAA,IAdD,kBAAC,GAAD;KACE,QAAQ,EAAK;KACb,OAAO,EAAK;KACZ,WAAW;KACL;IACP,CAAA,GAcH,kBAAC,MAAD;KAAc,WAAW;KAAzB,UAAA,CACE,kBAAC,QAAD;MAAM,WAAW;MAAkB,eAAY;MAAO,UAAA;KAEhD,CAAA,GACL,CACC;IALK,GAAA,CAKL;GAER,CAAC,CACC;;CACD,CAAA;AAET"}
+{"version":3,"file":"BackofficeTopbarBreadcrumb.js","names":[],"sources":["../../../../../../src/components/backoffice/layout/breadcrumb/BackofficeTopbarBreadcrumb.tsx"],"sourcesContent":["import { type JSX } from 'react';\nimport Link from '@plumile/router/routing/Link.js';\nimport { SidebarHomeSvg } from '@plumile/ui/icons/SidebarHomeSvg';\n\nimport { BackofficeLink } from '../../links/BackofficeLink.js';\nimport { BackofficeLinkLabel } from '../../links/BackofficeLinkLabel.js';\nimport { useBackofficeReactTranslation } from '../../../../i18n/useBackofficeReactTranslation.js';\nimport type { BackofficeTopbarBreadcrumbItem } from './types.js';\nimport { useBackofficeTopbarPortalContext } from './BackofficeTopbarPortalContext.js';\nimport * as styles from './backofficeTopbarBreadcrumb.css.js';\n\nexport type BackofficeTopbarBreadcrumbProps = {\n  items: readonly BackofficeTopbarBreadcrumbItem[];\n};\n\nconst getBreadcrumbItemKey = (item: BackofficeTopbarBreadcrumbItem): string => {\n  const { target } = item;\n  if (target.kind === 'dashboard') {\n    return `${item.kind}-dashboard`;\n  }\n  if (target.kind === 'entity-list') {\n    return `${item.kind}-entity-list-${target.entityId}`;\n  }\n  if (target.kind === 'entity-detail') {\n    return `${item.kind}-entity-detail-${target.entityId}-${target.id}`;\n  }\n  if (target.kind === 'entity-detail-page') {\n    return `${item.kind}-entity-detail-page-${target.entityId}-${target.id}-${target.pageId}`;\n  }\n  if (target.kind === 'tool') {\n    return `${item.kind}-tool-${target.toolId}`;\n  }\n  if (target.kind === 'hub') {\n    return `${item.kind}-hub-${target.hubId}`;\n  }\n  return `${item.kind}-href-${target.href}`;\n};\n\nexport const BackofficeTopbarBreadcrumb = ({\n  items,\n}: BackofficeTopbarBreadcrumbProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const { dashboardHref, dashboardLabel } = useBackofficeTopbarPortalContext();\n  let isDashboardCurrent = false;\n  const [firstItem] = items;\n  if (items.length === 1 && firstItem != null) {\n    isDashboardCurrent =\n      firstItem.target.kind === 'dashboard' && firstItem.kind === 'current';\n  }\n  let visibleItems: readonly BackofficeTopbarBreadcrumbItem[] = items;\n  if (isDashboardCurrent) {\n    visibleItems = [];\n  }\n\n  const homeContent = (\n    <>\n      <SidebarHomeSvg width={16} height={16} aria-hidden=\"true\" />\n      <span className={styles.homeLabel}>{dashboardLabel}</span>\n    </>\n  );\n\n  return (\n    <nav className={styles.nav} aria-label={t('common.breadcrumb')}>\n      <ol className={styles.list}>\n        <li className={styles.item}>\n          {isDashboardCurrent && (\n            <span\n              className={styles.homeCurrent}\n              aria-current=\"page\"\n              title={dashboardLabel}\n            >\n              {homeContent}\n            </span>\n          )}\n          {!isDashboardCurrent && (\n            <Link\n              to={dashboardHref}\n              className={styles.homeLink}\n              aria-label={dashboardLabel}\n              title={dashboardLabel}\n              preloadOnHover=\"code-and-data\"\n            >\n              {homeContent}\n            </Link>\n          )}\n        </li>\n        {visibleItems.map((item, index) => {\n          const isCurrent = item.kind === 'current';\n          const key = getBreadcrumbItemKey(item);\n          let icon: 'auto' | 'none' = 'none';\n          if (index === 0) {\n            icon = 'auto';\n          }\n          let content: JSX.Element;\n\n          if (!isCurrent) {\n            content = (\n              <BackofficeLink\n                target={item.target}\n                label={item.label}\n                className={styles.link}\n                icon={icon}\n              />\n            );\n          } else {\n            content = (\n              <BackofficeLinkLabel\n                target={item.target}\n                label={item.label}\n                className={styles.current}\n                icon={icon}\n              />\n            );\n          }\n\n          return (\n            <li key={key} className={styles.item}>\n              <span className={styles.separator} aria-hidden=\"true\">\n                /\n              </span>\n              {content}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n\nexport default BackofficeTopbarBreadcrumb;\n"],"mappings":";;;;;;;;;AAeA,IAAM,KAAwB,MAAiD;CAC7E,IAAM,EAAE,cAAW;CAmBnB,OAlBI,EAAO,SAAS,cACX,GAAG,EAAK,KAAK,cAElB,EAAO,SAAS,gBACX,GAAG,EAAK,KAAK,eAAe,EAAO,aAExC,EAAO,SAAS,kBACX,GAAG,EAAK,KAAK,iBAAiB,EAAO,SAAS,GAAG,EAAO,OAE7D,EAAO,SAAS,uBACX,GAAG,EAAK,KAAK,sBAAsB,EAAO,SAAS,GAAG,EAAO,GAAG,GAAG,EAAO,WAE/E,EAAO,SAAS,SACX,GAAG,EAAK,KAAK,QAAQ,EAAO,WAEjC,EAAO,SAAS,QACX,GAAG,EAAK,KAAK,OAAO,EAAO,UAE7B,GAAG,EAAK,KAAK,QAAQ,EAAO;AACrC,GAEa,KAA8B,EACzC,eACkD;CAClD,IAAM,EAAE,SAAM,EAA8B,GACtC,EAAE,kBAAe,sBAAmB,EAAiC,GACvE,IAAqB,IACnB,CAAC,KAAa;CACpB,AAAI,EAAM,WAAW,KAAK,KAAa,SACrC,IACE,EAAU,OAAO,SAAS,eAAe,EAAU,SAAS;CAEhE,IAAI,IAA0D;CAC9D,AAAI,MACF,IAAe,CAAC;CAGlB,IAAM,IACJ,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EAAgB,OAAO;EAAI,QAAQ;EAAI,eAAY;CAAQ,CAAA,GAC3D,kBAAC,QAAD;EAAM,WAAW;EAAmB,UAAA;CAAqB,CAAA,CACzD,EAAA,CAAA;CAGJ,OACE,kBAAC,OAAD;EAAK,WAAW;EAAY,cAAY,EAAE,mBAAmB;EAC3D,UAAA,kBAAC,MAAD;GAAI,WAAW;GAAf,UAAA,CACE,kBAAC,MAAD;IAAI,WAAW;IAAf,UAAA,CACG,KACC,kBAAC,QAAD;KACE,WAAW;KACX,gBAAa;KACb,OAAO;KAEN,UAAA;IACG,CAAA,GAEP,CAAC,KACA,kBAAC,GAAD;KACE,IAAI;KACJ,WAAW;KACX,cAAY;KACZ,OAAO;KACP,gBAAe;KAEd,UAAA;IACG,CAAA,CAEN;GACH,CAAA,GAAA,EAAa,KAAK,GAAM,MAAU;IACjC,IAAM,IAAY,EAAK,SAAS,WAC1B,IAAM,EAAqB,CAAI,GACjC,IAAwB;IAC5B,AAAI,MAAU,MACZ,IAAO;IAET,IAAI;IAsBJ,OApBA,AACE,IADG,IAWD,kBAAC,GAAD;KACE,QAAQ,EAAK;KACb,OAAO,EAAK;KACZ,WAAW;KACL;IACP,CAAA,IAdD,kBAAC,GAAD;KACE,QAAQ,EAAK;KACb,OAAO,EAAK;KACZ,WAAW;KACL;IACP,CAAA,GAcH,kBAAC,MAAD;KAAc,WAAW;KAAzB,UAAA,CACE,kBAAC,QAAD;MAAM,WAAW;MAAkB,eAAY;MAAO,UAAA;KAEhD,CAAA,GACL,CACC;IALK,GAAA,CAKL;GAER,CAAC,CACC;;CACD,CAAA;AAET"}