@plumile/backoffice-react 0.2.3 → 0.2.6

package/lib/esm/components/backoffice/detail/BackofficeDetailErrorList.js

@@ -1,6 +1,6 @@
 import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
 import { code as t, details as n, header as r, item as i, itemSurface as a, list as o, message as s } from "./backofficeDetailErrorList.css.js";
-import { cx as c } from "@plumile/ui/theme/tools.js";
+import { cx as c } from "@plumile/ui/theme";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import { BackofficeDetailSection as d } from "@plumile/ui/backoffice/molecules/backoffice_detail_section/BackofficeDetailSection.js";
 import { BackofficePayloadViewer as f } from "@plumile/ui/backoffice/molecules/backoffice_payload_viewer/BackofficePayloadViewer.js";

package/lib/esm/components/backoffice/detail/BackofficeDetailErrorList.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackofficeDetailErrorList.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeDetailErrorList.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { BackofficeDetailSection } from '@plumile/ui/backoffice/molecules/backoffice_detail_section/BackofficeDetailSection.js';\nimport { BackofficePayloadViewer } from '@plumile/ui/backoffice/molecules/backoffice_payload_viewer/BackofficePayloadViewer.js';\nimport { cx } from '@plumile/ui/theme/tools.js';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\n\nimport * as styles from './backofficeDetailErrorList.css.js';\n\nexport type BackofficeDetailErrorItem = {\n  code: string;\n  message: string;\n  details?: unknown;\n};\n\nexport type BackofficeDetailErrorListProps = {\n  title: string;\n  description?: string;\n  items: readonly BackofficeDetailErrorItem[];\n};\n\nexport const BackofficeDetailErrorList = ({\n  title,\n  description,\n  items,\n}: BackofficeDetailErrorListProps): JSX.Element | null => {\n  const { t } = useBackofficeReactTranslation();\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  return (\n    <BackofficeDetailSection title={title} description={description}>\n      <div className={styles.list}>\n        {items.map((error, index) => {\n          return (\n            <div\n              key={`${error.code}-${index}`}\n              className={cx(styles.item, styles.itemSurface)}\n            >\n              <div className={styles.header}>\n                <span className={styles.code}>{error.code}</span>\n                <span className={styles.message}>{error.message}</span>\n              </div>\n              <div className={styles.details}>\n                <BackofficePayloadViewer\n                  content={error.details}\n                  format=\"json\"\n                  mode=\"details\"\n                  initiallyExpanded\n                  emptyState={t('common.notAvailable')}\n                  labels={{\n                    details: t('detail.actions.viewDetails'),\n                  }}\n                />\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </BackofficeDetailSection>\n  );\n};\n\nexport default BackofficeDetailErrorList;\n"],"mappings":";;;;;;;AAsBA,IAAa,KAA6B,EACxC,UACA,gBACA,eACwD;CACxD,IAAM,EAAE,SAAM,EAA8B;CAM5C,OAJI,EAAM,WAAW,IACZ,OAIP,kBAAC,GAAD;EAAgC;EAAoB;EAClD,UAAA,kBAAC,OAAD;GAAK,WAAW;GACb,UAAA,EAAM,KAAK,GAAO,MAEf,kBAAC,OAAD;IAEE,WAAW,EAAG,GAAa,CAAkB;IAF/C,UAAA,CAIE,kBAAC,OAAD;KAAK,WAAW;KAAhB,UAAA,CACE,kBAAC,QAAD;MAAM,WAAW;MAAc,UAAA,EAAM;KAAW,CAAA,GAChD,kBAAC,QAAD;MAAM,WAAW;MAAiB,UAAA,EAAM;KAAc,CAAA,CACnD;IACL,CAAA,GAAA,kBAAC,OAAD;KAAK,WAAW;KACd,UAAA,kBAAC,GAAD;MACE,SAAS,EAAM;MACf,QAAO;MACP,MAAK;MACL,mBAAA;MACA,YAAY,EAAE,qBAAqB;MACnC,QAAQ,EACN,SAAS,EAAE,4BAA4B,EACzC;KACD,CAAA;IACE,CAAA,CACF;GAnBE,GAAA,GAAG,EAAM,KAAK,GAAG,GAmBnB,CAER;EACE,CAAA;CACkB,CAAA;AAE7B"}
+{"version":3,"file":"BackofficeDetailErrorList.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeDetailErrorList.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { BackofficeDetailSection } from '@plumile/ui/backoffice/molecules/backoffice_detail_section/BackofficeDetailSection.js';\nimport { BackofficePayloadViewer } from '@plumile/ui/backoffice/molecules/backoffice_payload_viewer/BackofficePayloadViewer.js';\nimport { cx } from '@plumile/ui/theme';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\n\nimport * as styles from './backofficeDetailErrorList.css.js';\n\nexport type BackofficeDetailErrorItem = {\n  code: string;\n  message: string;\n  details?: unknown;\n};\n\nexport type BackofficeDetailErrorListProps = {\n  title: string;\n  description?: string;\n  items: readonly BackofficeDetailErrorItem[];\n};\n\nexport const BackofficeDetailErrorList = ({\n  title,\n  description,\n  items,\n}: BackofficeDetailErrorListProps): JSX.Element | null => {\n  const { t } = useBackofficeReactTranslation();\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  return (\n    <BackofficeDetailSection title={title} description={description}>\n      <div className={styles.list}>\n        {items.map((error, index) => {\n          return (\n            <div\n              key={`${error.code}-${index}`}\n              className={cx(styles.item, styles.itemSurface)}\n            >\n              <div className={styles.header}>\n                <span className={styles.code}>{error.code}</span>\n                <span className={styles.message}>{error.message}</span>\n              </div>\n              <div className={styles.details}>\n                <BackofficePayloadViewer\n                  content={error.details}\n                  format=\"json\"\n                  mode=\"details\"\n                  initiallyExpanded\n                  emptyState={t('common.notAvailable')}\n                  labels={{\n                    details: t('detail.actions.viewDetails'),\n                  }}\n                />\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </BackofficeDetailSection>\n  );\n};\n\nexport default BackofficeDetailErrorList;\n"],"mappings":";;;;;;;AAsBA,IAAa,KAA6B,EACxC,UACA,gBACA,eACwD;CACxD,IAAM,EAAE,SAAM,EAA8B;CAM5C,OAJI,EAAM,WAAW,IACZ,OAIP,kBAAC,GAAD;EAAgC;EAAoB;EAClD,UAAA,kBAAC,OAAD;GAAK,WAAW;GACb,UAAA,EAAM,KAAK,GAAO,MAEf,kBAAC,OAAD;IAEE,WAAW,EAAG,GAAa,CAAkB;IAF/C,UAAA,CAIE,kBAAC,OAAD;KAAK,WAAW;KAAhB,UAAA,CACE,kBAAC,QAAD;MAAM,WAAW;MAAc,UAAA,EAAM;KAAW,CAAA,GAChD,kBAAC,QAAD;MAAM,WAAW;MAAiB,UAAA,EAAM;KAAc,CAAA,CACnD;IACL,CAAA,GAAA,kBAAC,OAAD;KAAK,WAAW;KACd,UAAA,kBAAC,GAAD;MACE,SAAS,EAAM;MACf,QAAO;MACP,MAAK;MACL,mBAAA;MACA,YAAY,EAAE,qBAAqB;MACnC,QAAQ,EACN,SAAS,EAAE,4BAA4B,EACzC;KACD,CAAA;IACE,CAAA,CACF;GAnBE,GAAA,GAAG,EAAM,KAAK,GAAG,GAmBnB,CAER;EACE,CAAA;CACkB,CAAA;AAE7B"}

package/lib/esm/components/backoffice/detail/BackofficeEntitySummaryHeader.js

@@ -1,21 +1,25 @@
 import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
 import { identity as t, root as n, title as r, titleRow as i, top as a } from "./backofficeEntitySummaryHeader.css.js";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { Button as c } from "@plumile/ui/atomic/atoms/button/Button.js";
+import { Button as c } from "@plumile/ui/button";
 import { Tag as l } from "@plumile/ui/backoffice/atoms/tag/Tag.js";
 import { CopyableText as u } from "@plumile/ui/backoffice/atoms/copyable_text/CopyableText.js";
 import { BackofficeStatusMetaBadge as d } from "@plumile/ui/backoffice/molecules/backoffice_status_meta_badge/BackofficeStatusMetaBadge.js";
 //#region src/components/backoffice/detail/BackofficeEntitySummaryHeader.tsx
-var f = (e) => e === "danger" ? "danger" : e === "neutral" ? "secondary" : "primary", p = (e) => /* @__PURE__ */ o(c, {
-	type: "button",
-	variant: f(e.tone),
-	size: "small",
-	leftIcon: e.icon,
-	disabled: e.disabled,
-	isLoading: e.loading,
-	onClick: e.onPress,
-	children: e.label
-}, e.id), m = ({ title: c, entityLabel: f, subtitle: m, status: h, meta: g, primaryActions: _, secondaryActions: v }) => {
+var f = (e) => {
+	let t = e.tone ?? "primary", n = "soft", r = "neutral";
+	return t === "primary" ? (n = "solid", r = "brand") : r = t, /* @__PURE__ */ o(c, {
+		type: "button",
+		variant: n,
+		tone: r,
+		size: "small",
+		startIcon: e.icon,
+		disabled: e.disabled,
+		loading: e.loading,
+		onClick: e.onPress,
+		children: e.label
+	}, e.id);
+}, p = ({ title: c, entityLabel: p, subtitle: m, status: h, meta: g, primaryActions: _, secondaryActions: v }) => {
 	let { t: y } = e(), b = [..._ ?? [], ...v ?? []];
 	return /* @__PURE__ */ s("header", {
 		className: n,
@@ -32,20 +36,20 @@ var f = (e) => e === "danger" ? "danger" : e === "neutral" ? "secondary" : "prim
 						}),
 						/* @__PURE__ */ o(l, {
 							tone: "neutral",
-							children: f
+							children: p
 						}),
 						h != null && /* @__PURE__ */ o(d, { status: h })
 					]
 				}), m != null && /* @__PURE__ */ o("div", {
-					className: "txvbqb6ct txvbqbe2 txvbqb1um",
+					className: "txvbqb6nj txvbqbe7 txvbqb206",
 					children: m
 				})]
 			}), b.length > 0 && /* @__PURE__ */ o("div", {
-				className: "txvbqb5b1 txvbqb2cx txvbqb8dl txvbqb6gz txvbqb1ch",
-				children: b.map(p)
+				className: "txvbqb5lr txvbqb2nn txvbqb8ob txvbqb6rp txvbqb1cu",
+				children: b.map(f)
 			})]
 		}), g != null && g.length > 0 && /* @__PURE__ */ o("div", {
-			className: "txvbqb5bb txvbqb6h9 txvbqb7f5",
+			className: "txvbqb5m1 txvbqb6rz txvbqb7pv",
 			children: g.map((e) => {
 				let t = e.value;
 				return e.copyValue != null && e.copyValue !== "" && (t = /* @__PURE__ */ o(u, {
@@ -55,12 +59,12 @@ var f = (e) => e === "danger" ? "danger" : e === "neutral" ? "secondary" : "prim
 					copyLabel: y("common.actions.copy"),
 					copiedLabel: y("common.actions.copied")
 				})), /* @__PURE__ */ s("div", {
-					className: "txvbqb5b1 txvbqb6bf txvbqb6gp txvbqbdqn",
+					className: "txvbqb5lr txvbqb6m5 txvbqb6rf txvbqbe1d",
 					children: [/* @__PURE__ */ o("span", {
-						className: "txvbqb6cj txvbqb6a txvbqb1l6 txvbqbe2",
+						className: "txvbqb6n9 txvbqb6a txvbqb1o5 txvbqbe7",
 						children: e.label
 					}), /* @__PURE__ */ o("span", {
-						className: "txvbqb6ct txvbqbe1 txvbqb1um",
+						className: "txvbqb6nj txvbqbe6 txvbqb206",
 						children: t
 					})]
 				}, e.id);
@@ -69,6 +73,6 @@ var f = (e) => e === "danger" ? "danger" : e === "neutral" ? "secondary" : "prim
 	});
 };
 //#endregion
-export { m as BackofficeEntitySummaryHeader, m as default };
+export { p as BackofficeEntitySummaryHeader, p as default };
 
 //# sourceMappingURL=BackofficeEntitySummaryHeader.js.map

package/lib/esm/components/backoffice/detail/BackofficeEntitySummaryHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackofficeEntitySummaryHeader.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeEntitySummaryHeader.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { CopyableText } from '@plumile/ui/backoffice/atoms/copyable_text/CopyableText.js';\nimport { Tag } from '@plumile/ui/backoffice/atoms/tag/Tag.js';\nimport {\n  BackofficeStatusMetaBadge,\n  type BackofficeStatusMetaTone,\n} from '@plumile/ui/backoffice/molecules/backoffice_status_meta_badge/BackofficeStatusMetaBadge.js';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport * as styles from './backofficeEntitySummaryHeader.css.js';\n\nexport type BackofficeEntitySummaryHeaderTone = BackofficeStatusMetaTone;\n\nexport type BackofficeEntitySummaryHeaderMetaItem = {\n  readonly id: string;\n  readonly label: string;\n  readonly value: ReactNode;\n  readonly copyValue?: string;\n  readonly tone?: BackofficeEntitySummaryHeaderTone;\n};\n\nexport type BackofficeEntitySummaryHeaderAction = {\n  readonly id: string;\n  readonly label: string;\n  readonly icon?: ReactNode;\n  readonly disabled?: boolean;\n  readonly loading?: boolean;\n  readonly tone?: 'neutral' | 'primary' | 'danger';\n  readonly onPress: () => void;\n};\n\nexport type BackofficeEntitySummaryHeaderProps = {\n  readonly title: ReactNode;\n  readonly entityLabel: string;\n  readonly subtitle?: ReactNode;\n  readonly status?: {\n    readonly label: string;\n    readonly tone: BackofficeEntitySummaryHeaderTone;\n  };\n  readonly meta?: readonly BackofficeEntitySummaryHeaderMetaItem[];\n  readonly primaryActions?: readonly BackofficeEntitySummaryHeaderAction[];\n  readonly secondaryActions?: readonly BackofficeEntitySummaryHeaderAction[];\n};\n\nconst resolveActionVariant = (\n  tone: BackofficeEntitySummaryHeaderAction['tone'],\n): 'primary' | 'secondary' | 'danger' => {\n  if (tone === 'danger') {\n    return 'danger';\n  }\n  if (tone === 'neutral') {\n    return 'secondary';\n  }\n  return 'primary';\n};\n\nconst renderAction = (\n  action: BackofficeEntitySummaryHeaderAction,\n): JSX.Element => {\n  return (\n    <Button\n      key={action.id}\n      type=\"button\"\n      variant={resolveActionVariant(action.tone)}\n      size=\"small\"\n      leftIcon={action.icon}\n      disabled={action.disabled}\n      isLoading={action.loading}\n      onClick={action.onPress}\n    >\n      {action.label}\n    </Button>\n  );\n};\n\nexport const BackofficeEntitySummaryHeader = ({\n  title,\n  entityLabel,\n  subtitle,\n  status,\n  meta,\n  primaryActions,\n  secondaryActions,\n}: BackofficeEntitySummaryHeaderProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const actions = [...(primaryActions ?? []), ...(secondaryActions ?? [])];\n\n  return (\n    <header className={styles.root}>\n      <div className={styles.top}>\n        <div className={styles.identity}>\n          <div className={styles.titleRow}>\n            <h1 className={styles.title}>{title}</h1>\n            <Tag tone=\"neutral\">{entityLabel}</Tag>\n            {status != null && <BackofficeStatusMetaBadge status={status} />}\n          </div>\n          {subtitle != null && (\n            <div className={styles.subtitle}>{subtitle}</div>\n          )}\n        </div>\n        {actions.length > 0 && (\n          <div className={styles.actions}>{actions.map(renderAction)}</div>\n        )}\n      </div>\n      {meta != null && meta.length > 0 && (\n        <div className={styles.meta}>\n          {meta.map((item) => {\n            let valueNode = item.value;\n            if (item.copyValue != null && item.copyValue !== '') {\n              valueNode = (\n                <CopyableText\n                  value={item.copyValue}\n                  copyValue={item.copyValue}\n                  truncate={false}\n                  copyLabel={t('common.actions.copy')}\n                  copiedLabel={t('common.actions.copied')}\n                />\n              );\n            }\n\n            return (\n              <div key={item.id} className={styles.metaItem}>\n                <span className={styles.metaLabel}>{item.label}</span>\n                <span className={styles.metaValue}>{valueNode}</span>\n              </div>\n            );\n          })}\n        </div>\n      )}\n    </header>\n  );\n};\n\nexport default BackofficeEntitySummaryHeader;\n"],"mappings":";;;;;;;;AA6CA,IAAM,KACJ,MAEI,MAAS,WACJ,WAEL,MAAS,YACJ,cAEF,WAGH,KACJ,MAGE,kBAAC,GAAD;CAEE,MAAK;CACL,SAAS,EAAqB,EAAO,IAAI;CACzC,MAAK;CACL,UAAU,EAAO;CACjB,UAAU,EAAO;CACjB,WAAW,EAAO;CAClB,SAAS,EAAO;CAEf,UAAA,EAAO;AACF,GAVD,EAAO,EAUN,GAIC,KAAiC,EAC5C,OAAA,GACA,gBACA,UAAA,GACA,WACA,MAAA,GACA,mBACA,0BACqD;CACrD,IAAM,EAAE,SAAM,EAA8B,GACtC,IAAU,CAAC,GAAI,KAAkB,CAAC,GAAI,GAAI,KAAoB,CAAC,CAAE;CAEvE,OACE,kBAAC,UAAD;EAAQ,WAAW;EAAnB,UAAA,CACE,kBAAC,OAAD;GAAK,WAAW;GAAhB,UAAA,CACE,kBAAC,OAAD;IAAK,WAAW;IAAhB,UAAA,CACE,kBAAC,OAAD;KAAK,WAAW;KAAhB,UAAA;MACE,kBAAC,MAAD;OAAI,WAAW;OAAe,UAAA;MAAU,CAAA;MACxC,kBAAC,GAAD;OAAK,MAAK;OAAW,UAAA;MAAiB,CAAA;MACrC,KAAU,QAAQ,kBAAC,GAAD,EAAmC,UAAS,CAAA;KAC5D;IACJ,CAAA,GAAA,KAAY,QACX,kBAAC,OAAD;KAAK,WAAW;KAAkB,UAAA;IAAc,CAAA,CAE/C;GACJ,CAAA,GAAA,EAAQ,SAAS,KAChB,kBAAC,OAAD;IAAK,WAAW;IAAiB,UAAA,EAAQ,IAAI,CAAY;GAAO,CAAA,CAE/D;EACJ,CAAA,GAAA,KAAQ,QAAQ,EAAK,SAAS,KAC7B,kBAAC,OAAD;GAAK,WAAW;GACb,UAAA,EAAK,KAAK,MAAS;IAClB,IAAI,IAAY,EAAK;IAarB,OAZI,EAAK,aAAa,QAAQ,EAAK,cAAc,OAC/C,IACE,kBAAC,GAAD;KACE,OAAO,EAAK;KACZ,WAAW,EAAK;KAChB,UAAU;KACV,WAAW,EAAE,qBAAqB;KAClC,aAAa,EAAE,uBAAuB;IACvC,CAAA,IAKH,kBAAC,OAAD;KAAmB,WAAW;KAA9B,UAAA,CACE,kBAAC,QAAD;MAAM,WAAW;MAAmB,UAAA,EAAK;KAAY,CAAA,GACrD,kBAAC,QAAD;MAAM,WAAW;MAAmB,UAAA;KAAgB,CAAA,CACjD;IAHK,GAAA,EAAK,EAGV;GAET,CAAC;EACE,CAAA,CAED;;AAEZ"}
+{"version":3,"file":"BackofficeEntitySummaryHeader.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeEntitySummaryHeader.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport {\n  Button,\n  type ButtonTone,\n  type ButtonVariant,\n} from '@plumile/ui/button';\nimport { CopyableText } from '@plumile/ui/backoffice/atoms/copyable_text/CopyableText.js';\nimport { Tag } from '@plumile/ui/backoffice/atoms/tag/Tag.js';\nimport {\n  BackofficeStatusMetaBadge,\n  type BackofficeStatusMetaTone,\n} from '@plumile/ui/backoffice/molecules/backoffice_status_meta_badge/BackofficeStatusMetaBadge.js';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport * as styles from './backofficeEntitySummaryHeader.css.js';\n\nexport type BackofficeEntitySummaryHeaderTone = BackofficeStatusMetaTone;\n\nexport type BackofficeEntitySummaryHeaderMetaItem = {\n  readonly id: string;\n  readonly label: string;\n  readonly value: ReactNode;\n  readonly copyValue?: string;\n  readonly tone?: BackofficeEntitySummaryHeaderTone;\n};\n\nexport type BackofficeEntitySummaryHeaderAction = {\n  readonly id: string;\n  readonly label: string;\n  readonly icon?: ReactNode;\n  readonly disabled?: boolean;\n  readonly loading?: boolean;\n  readonly tone?: 'neutral' | 'primary' | 'danger';\n  readonly onPress: () => void;\n};\n\nexport type BackofficeEntitySummaryHeaderProps = {\n  readonly title: ReactNode;\n  readonly entityLabel: string;\n  readonly subtitle?: ReactNode;\n  readonly status?: {\n    readonly label: string;\n    readonly tone: BackofficeEntitySummaryHeaderTone;\n  };\n  readonly meta?: readonly BackofficeEntitySummaryHeaderMetaItem[];\n  readonly primaryActions?: readonly BackofficeEntitySummaryHeaderAction[];\n  readonly secondaryActions?: readonly BackofficeEntitySummaryHeaderAction[];\n};\n\nconst renderAction = (\n  action: BackofficeEntitySummaryHeaderAction,\n): JSX.Element => {\n  const actionTone = action.tone ?? 'primary';\n  let variant: ButtonVariant = 'soft';\n  let tone: ButtonTone = 'neutral';\n  if (actionTone === 'primary') {\n    variant = 'solid';\n    tone = 'brand';\n  } else {\n    tone = actionTone;\n  }\n  return (\n    <Button\n      key={action.id}\n      type=\"button\"\n      variant={variant}\n      tone={tone}\n      size=\"small\"\n      startIcon={action.icon}\n      disabled={action.disabled}\n      loading={action.loading}\n      onClick={action.onPress}\n    >\n      {action.label}\n    </Button>\n  );\n};\n\nexport const BackofficeEntitySummaryHeader = ({\n  title,\n  entityLabel,\n  subtitle,\n  status,\n  meta,\n  primaryActions,\n  secondaryActions,\n}: BackofficeEntitySummaryHeaderProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const actions = [...(primaryActions ?? []), ...(secondaryActions ?? [])];\n\n  return (\n    <header className={styles.root}>\n      <div className={styles.top}>\n        <div className={styles.identity}>\n          <div className={styles.titleRow}>\n            <h1 className={styles.title}>{title}</h1>\n            <Tag tone=\"neutral\">{entityLabel}</Tag>\n            {status != null && <BackofficeStatusMetaBadge status={status} />}\n          </div>\n          {subtitle != null && (\n            <div className={styles.subtitle}>{subtitle}</div>\n          )}\n        </div>\n        {actions.length > 0 && (\n          <div className={styles.actions}>{actions.map(renderAction)}</div>\n        )}\n      </div>\n      {meta != null && meta.length > 0 && (\n        <div className={styles.meta}>\n          {meta.map((item) => {\n            let valueNode = item.value;\n            if (item.copyValue != null && item.copyValue !== '') {\n              valueNode = (\n                <CopyableText\n                  value={item.copyValue}\n                  copyValue={item.copyValue}\n                  truncate={false}\n                  copyLabel={t('common.actions.copy')}\n                  copiedLabel={t('common.actions.copied')}\n                />\n              );\n            }\n\n            return (\n              <div key={item.id} className={styles.metaItem}>\n                <span className={styles.metaLabel}>{item.label}</span>\n                <span className={styles.metaValue}>{valueNode}</span>\n              </div>\n            );\n          })}\n        </div>\n      )}\n    </header>\n  );\n};\n\nexport default BackofficeEntitySummaryHeader;\n"],"mappings":";;;;;;;;AAiDA,IAAM,KACJ,MACgB;CAChB,IAAM,IAAa,EAAO,QAAQ,WAC9B,IAAyB,QACzB,IAAmB;CAOvB,OANI,MAAe,aACjB,IAAU,SACV,IAAO,WAEP,IAAO,GAGP,kBAAC,GAAD;EAEE,MAAK;EACI;EACH;EACN,MAAK;EACL,WAAW,EAAO;EAClB,UAAU,EAAO;EACjB,SAAS,EAAO;EAChB,SAAS,EAAO;EAEf,UAAA,EAAO;CACF,GAXD,EAAO,EAWN;AAEZ,GAEa,KAAiC,EAC5C,OAAA,GACA,gBACA,UAAA,GACA,WACA,MAAA,GACA,mBACA,0BACqD;CACrD,IAAM,EAAE,SAAM,EAA8B,GACtC,IAAU,CAAC,GAAI,KAAkB,CAAC,GAAI,GAAI,KAAoB,CAAC,CAAE;CAEvE,OACE,kBAAC,UAAD;EAAQ,WAAW;EAAnB,UAAA,CACE,kBAAC,OAAD;GAAK,WAAW;GAAhB,UAAA,CACE,kBAAC,OAAD;IAAK,WAAW;IAAhB,UAAA,CACE,kBAAC,OAAD;KAAK,WAAW;KAAhB,UAAA;MACE,kBAAC,MAAD;OAAI,WAAW;OAAe,UAAA;MAAU,CAAA;MACxC,kBAAC,GAAD;OAAK,MAAK;OAAW,UAAA;MAAiB,CAAA;MACrC,KAAU,QAAQ,kBAAC,GAAD,EAAmC,UAAS,CAAA;KAC5D;IACJ,CAAA,GAAA,KAAY,QACX,kBAAC,OAAD;KAAK,WAAW;KAAkB,UAAA;IAAc,CAAA,CAE/C;GACJ,CAAA,GAAA,EAAQ,SAAS,KAChB,kBAAC,OAAD;IAAK,WAAW;IAAiB,UAAA,EAAQ,IAAI,CAAY;GAAO,CAAA,CAE/D;EACJ,CAAA,GAAA,KAAQ,QAAQ,EAAK,SAAS,KAC7B,kBAAC,OAAD;GAAK,WAAW;GACb,UAAA,EAAK,KAAK,MAAS;IAClB,IAAI,IAAY,EAAK;IAarB,OAZI,EAAK,aAAa,QAAQ,EAAK,cAAc,OAC/C,IACE,kBAAC,GAAD;KACE,OAAO,EAAK;KACZ,WAAW,EAAK;KAChB,UAAU;KACV,WAAW,EAAE,qBAAqB;KAClC,aAAa,EAAE,uBAAuB;IACvC,CAAA,IAKH,kBAAC,OAAD;KAAmB,WAAW;KAA9B,UAAA,CACE,kBAAC,QAAD;MAAM,WAAW;MAAmB,UAAA,EAAK;KAAY,CAAA,GACrD,kBAAC,QAAD;MAAM,WAAW;MAAmB,UAAA;KAAgB,CAAA,CACjD;IAHK,GAAA,EAAK,EAGV;GAET,CAAC;EACE,CAAA,CAED;;AAEZ"}

package/lib/esm/components/backoffice/detail/BackofficeRelationsSummaryGrid.js

@@ -21,7 +21,7 @@ var u = ({ title: u, items: d }) => {
 						children: n
 					}),
 					e.description != null && /* @__PURE__ */ o("span", {
-						className: "txvbqb6ct txvbqbe2 txvbqb1um",
+						className: "txvbqb6nj txvbqbe7 txvbqb206",
 						children: e.description
 					})
 				] });

package/lib/esm/components/backoffice/detail/BackofficeRelationsSummaryGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackofficeRelationsSummaryGrid.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeRelationsSummaryGrid.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport Link from '@plumile/router/routing/Link.js';\nimport { BackofficeDetailSection } from '@plumile/ui/backoffice/molecules/backoffice_detail_section/BackofficeDetailSection.js';\nimport type { MetricTone } from '@plumile/ui/components/dashboard/metric_card/MetricCard.js';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport * as styles from './backofficeRelationsSummaryGrid.css.js';\n\nexport type BackofficeRelationSummaryItem = {\n  readonly id: string;\n  readonly label: string;\n  readonly count?: ReactNode;\n  readonly href?: string;\n  readonly description?: ReactNode;\n  readonly tone?: MetricTone;\n};\n\nexport type BackofficeRelationsSummaryGridProps = {\n  readonly title: string;\n  readonly items: readonly BackofficeRelationSummaryItem[];\n};\n\nexport const BackofficeRelationsSummaryGrid = ({\n  title,\n  items,\n}: BackofficeRelationsSummaryGridProps): JSX.Element | null => {\n  const { t } = useBackofficeReactTranslation();\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  return (\n    <BackofficeDetailSection title={title}>\n      <div className={styles.grid}>\n        {items.map((item) => {\n          const countNode = item.count ?? t('common.notAvailable');\n          const content = (\n            <>\n              <span className={styles.label}>{item.label}</span>\n              <span className={styles.count}>{countNode}</span>\n              {item.description != null && (\n                <span className={styles.description}>{item.description}</span>\n              )}\n            </>\n          );\n\n          if (item.href == null) {\n            return (\n              <div className={styles.item} key={item.id}>\n                {content}\n              </div>\n            );\n          }\n\n          return (\n            <Link\n              className={styles.item}\n              key={item.id}\n              to={item.href}\n              preloadOnHover=\"code-and-data\"\n            >\n              {content}\n            </Link>\n          );\n        })}\n      </div>\n    </BackofficeDetailSection>\n  );\n};\n\nexport default BackofficeRelationsSummaryGrid;\n"],"mappings":";;;;;;AAsBA,IAAa,KAAkC,EAC7C,UACA,eAC6D;CAC7D,IAAM,EAAE,SAAM,EAA8B;CAM5C,OAJI,EAAM,WAAW,IACZ,OAIP,kBAAC,GAAD;EAAgC;EAC9B,UAAA,kBAAC,OAAD;GAAK,WAAW;GACb,UAAA,EAAM,KAAK,MAAS;IACnB,IAAM,IAAY,EAAK,SAAS,EAAE,qBAAqB,GACjD,IACJ,kBAAA,GAAA,EAAA,UAAA;KACE,kBAAC,QAAD;MAAM,WAAW;MAAe,UAAA,EAAK;KAAY,CAAA;KACjD,kBAAC,QAAD;MAAM,WAAW;MAAe,UAAA;KAAgB,CAAA;KAC/C,EAAK,eAAe,QACnB,kBAAC,QAAD;MAAM,WAAW;MAAqB,UAAA,EAAK;KAAkB,CAAA;IAE/D,EAAA,CAAA;IAWJ,OARI,EAAK,QAAQ,OAEb,kBAAC,OAAD;KAAK,WAAW;KACb,UAAA;IACE,GAF6B,EAAK,EAElC,IAKP,kBAAC,GAAD;KACE,WAAW;KAEX,IAAI,EAAK;KACT,gBAAe;KAEd,UAAA;IACG,GALC,EAAK,EAKN;GAEV,CAAC;EACE,CAAA;CACkB,CAAA;AAE7B"}
+{"version":3,"file":"BackofficeRelationsSummaryGrid.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeRelationsSummaryGrid.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport Link from '@plumile/router/routing/Link.js';\nimport { BackofficeDetailSection } from '@plumile/ui/backoffice/molecules/backoffice_detail_section/BackofficeDetailSection.js';\nimport type { MetricTone } from '@plumile/ui';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport * as styles from './backofficeRelationsSummaryGrid.css.js';\n\nexport type BackofficeRelationSummaryItem = {\n  readonly id: string;\n  readonly label: string;\n  readonly count?: ReactNode;\n  readonly href?: string;\n  readonly description?: ReactNode;\n  readonly tone?: MetricTone;\n};\n\nexport type BackofficeRelationsSummaryGridProps = {\n  readonly title: string;\n  readonly items: readonly BackofficeRelationSummaryItem[];\n};\n\nexport const BackofficeRelationsSummaryGrid = ({\n  title,\n  items,\n}: BackofficeRelationsSummaryGridProps): JSX.Element | null => {\n  const { t } = useBackofficeReactTranslation();\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  return (\n    <BackofficeDetailSection title={title}>\n      <div className={styles.grid}>\n        {items.map((item) => {\n          const countNode = item.count ?? t('common.notAvailable');\n          const content = (\n            <>\n              <span className={styles.label}>{item.label}</span>\n              <span className={styles.count}>{countNode}</span>\n              {item.description != null && (\n                <span className={styles.description}>{item.description}</span>\n              )}\n            </>\n          );\n\n          if (item.href == null) {\n            return (\n              <div className={styles.item} key={item.id}>\n                {content}\n              </div>\n            );\n          }\n\n          return (\n            <Link\n              className={styles.item}\n              key={item.id}\n              to={item.href}\n              preloadOnHover=\"code-and-data\"\n            >\n              {content}\n            </Link>\n          );\n        })}\n      </div>\n    </BackofficeDetailSection>\n  );\n};\n\nexport default BackofficeRelationsSummaryGrid;\n"],"mappings":";;;;;;AAsBA,IAAa,KAAkC,EAC7C,UACA,eAC6D;CAC7D,IAAM,EAAE,SAAM,EAA8B;CAM5C,OAJI,EAAM,WAAW,IACZ,OAIP,kBAAC,GAAD;EAAgC;EAC9B,UAAA,kBAAC,OAAD;GAAK,WAAW;GACb,UAAA,EAAM,KAAK,MAAS;IACnB,IAAM,IAAY,EAAK,SAAS,EAAE,qBAAqB,GACjD,IACJ,kBAAA,GAAA,EAAA,UAAA;KACE,kBAAC,QAAD;MAAM,WAAW;MAAe,UAAA,EAAK;KAAY,CAAA;KACjD,kBAAC,QAAD;MAAM,WAAW;MAAe,UAAA;KAAgB,CAAA;KAC/C,EAAK,eAAe,QACnB,kBAAC,QAAD;MAAM,WAAW;MAAqB,UAAA,EAAK;KAAkB,CAAA;IAE/D,EAAA,CAAA;IAWJ,OARI,EAAK,QAAQ,OAEb,kBAAC,OAAD;KAAK,WAAW;KACb,UAAA;IACE,GAF6B,EAAK,EAElC,IAKP,kBAAC,GAAD;KACE,WAAW;KAEX,IAAI,EAAK;KACT,gBAAe;KAEd,UAAA;IACG,GALC,EAAK,EAKN;GAEV,CAAC;EACE,CAAA;CACkB,CAAA;AAE7B"}

package/lib/esm/components/backoffice/detail/BackofficeTokenUsageBreakdown.js

@@ -1,6 +1,5 @@
-import { Fragment as e, jsx as t } from "react/jsx-runtime";
-import { MetricCard as n } from "@plumile/ui/components/dashboard/metric_card/MetricCard.js";
-import { MetricTileGroup as r } from "@plumile/ui/components/dashboard/metric_tile_group/MetricTileGroup.js";
+import { MetricCard as e, MetricTileGroup as t } from "@plumile/ui";
+import { Fragment as n, jsx as r } from "react/jsx-runtime";
 //#region src/components/backoffice/detail/BackofficeTokenUsageBreakdown.tsx
 var i = ({ title: i, total: a, input: o, cachedInput: s, output: c, reasoning: l, labels: u }) => {
 	let d = [
@@ -30,15 +29,15 @@ var i = ({ title: i, total: a, input: o, cachedInput: s, output: c, reasoning: l
 			value: l
 		}
 	].filter((e) => e.value != null);
-	return d.length === 0 ? /* @__PURE__ */ t(e, {}) : /* @__PURE__ */ t(r, {
+	return d.length === 0 ? /* @__PURE__ */ r(n, {}) : /* @__PURE__ */ r(t, {
 		density: "compact",
 		minColumn: "180",
-		children: d.map((e) => /* @__PURE__ */ t(n, {
-			label: e.label,
-			value: e.value,
+		children: d.map((t) => /* @__PURE__ */ r(e, {
+			label: t.label,
+			value: t.value,
 			density: "compact",
 			tone: "neutral"
-		}, e.id))
+		}, t.id))
 	});
 };
 //#endregion

package/lib/esm/components/backoffice/detail/BackofficeTokenUsageBreakdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackofficeTokenUsageBreakdown.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeTokenUsageBreakdown.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport { MetricCard } from '@plumile/ui/components/dashboard/metric_card/MetricCard.js';\nimport { MetricTileGroup } from '@plumile/ui/components/dashboard/metric_tile_group/MetricTileGroup.js';\n\nexport type BackofficeTokenUsageBreakdownProps = {\n  readonly title: string;\n  readonly total?: ReactNode;\n  readonly input?: ReactNode;\n  readonly cachedInput?: ReactNode;\n  readonly output?: ReactNode;\n  readonly reasoning?: ReactNode;\n  readonly labels: {\n    readonly input: string;\n    readonly cachedInput: string;\n    readonly output: string;\n    readonly reasoning: string;\n  };\n};\n\nexport const BackofficeTokenUsageBreakdown = ({\n  title,\n  total,\n  input,\n  cachedInput,\n  output,\n  reasoning,\n  labels,\n}: BackofficeTokenUsageBreakdownProps): JSX.Element => {\n  const items = [\n    { id: 'total', label: title, value: total },\n    { id: 'input', label: labels.input, value: input },\n    { id: 'cached-input', label: labels.cachedInput, value: cachedInput },\n    { id: 'output', label: labels.output, value: output },\n    { id: 'reasoning', label: labels.reasoning, value: reasoning },\n  ].filter((item) => {\n    return item.value != null;\n  });\n\n  if (items.length === 0) {\n    return <></>;\n  }\n\n  return (\n    <MetricTileGroup density=\"compact\" minColumn=\"180\">\n      {items.map((item) => {\n        return (\n          <MetricCard\n            key={item.id}\n            label={item.label}\n            value={item.value}\n            density=\"compact\"\n            tone=\"neutral\"\n          />\n        );\n      })}\n    </MetricTileGroup>\n  );\n};\n\nexport default BackofficeTokenUsageBreakdown;\n"],"mappings":";;;;AAmBA,IAAa,KAAiC,EAC5C,UACA,UACA,UACA,gBACA,WACA,cACA,gBACqD;CACrD,IAAM,IAAQ;EACZ;GAAE,IAAI;GAAS,OAAO;GAAO,OAAO;EAAM;EAC1C;GAAE,IAAI;GAAS,OAAO,EAAO;GAAO,OAAO;EAAM;EACjD;GAAE,IAAI;GAAgB,OAAO,EAAO;GAAa,OAAO;EAAY;EACpE;GAAE,IAAI;GAAU,OAAO,EAAO;GAAQ,OAAO;EAAO;EACpD;GAAE,IAAI;GAAa,OAAO,EAAO;GAAW,OAAO;EAAU;CAC/D,CAAC,CAAC,QAAQ,MACD,EAAK,SAAS,IACtB;CAMD,OAJI,EAAM,WAAW,IACZ,kBAAA,GAAA,CAAI,CAAA,IAIX,kBAAC,GAAD;EAAiB,SAAQ;EAAU,WAAU;EAC1C,UAAA,EAAM,KAAK,MAER,kBAAC,GAAD;GAEE,OAAO,EAAK;GACZ,OAAO,EAAK;GACZ,SAAQ;GACR,MAAK;EACN,GALM,EAAK,EAKX,CAEJ;CACc,CAAA;AAErB"}
+{"version":3,"file":"BackofficeTokenUsageBreakdown.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeTokenUsageBreakdown.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport { MetricCard, MetricTileGroup } from '@plumile/ui';\n\nexport type BackofficeTokenUsageBreakdownProps = {\n  readonly title: string;\n  readonly total?: ReactNode;\n  readonly input?: ReactNode;\n  readonly cachedInput?: ReactNode;\n  readonly output?: ReactNode;\n  readonly reasoning?: ReactNode;\n  readonly labels: {\n    readonly input: string;\n    readonly cachedInput: string;\n    readonly output: string;\n    readonly reasoning: string;\n  };\n};\n\nexport const BackofficeTokenUsageBreakdown = ({\n  title,\n  total,\n  input,\n  cachedInput,\n  output,\n  reasoning,\n  labels,\n}: BackofficeTokenUsageBreakdownProps): JSX.Element => {\n  const items = [\n    { id: 'total', label: title, value: total },\n    { id: 'input', label: labels.input, value: input },\n    { id: 'cached-input', label: labels.cachedInput, value: cachedInput },\n    { id: 'output', label: labels.output, value: output },\n    { id: 'reasoning', label: labels.reasoning, value: reasoning },\n  ].filter((item) => {\n    return item.value != null;\n  });\n\n  if (items.length === 0) {\n    return <></>;\n  }\n\n  return (\n    <MetricTileGroup density=\"compact\" minColumn=\"180\">\n      {items.map((item) => {\n        return (\n          <MetricCard\n            key={item.id}\n            label={item.label}\n            value={item.value}\n            density=\"compact\"\n            tone=\"neutral\"\n          />\n        );\n      })}\n    </MetricTileGroup>\n  );\n};\n\nexport default BackofficeTokenUsageBreakdown;\n"],"mappings":";;;AAkBA,IAAa,KAAiC,EAC5C,UACA,UACA,UACA,gBACA,WACA,cACA,gBACqD;CACrD,IAAM,IAAQ;EACZ;GAAE,IAAI;GAAS,OAAO;GAAO,OAAO;EAAM;EAC1C;GAAE,IAAI;GAAS,OAAO,EAAO;GAAO,OAAO;EAAM;EACjD;GAAE,IAAI;GAAgB,OAAO,EAAO;GAAa,OAAO;EAAY;EACpE;GAAE,IAAI;GAAU,OAAO,EAAO;GAAQ,OAAO;EAAO;EACpD;GAAE,IAAI;GAAa,OAAO,EAAO;GAAW,OAAO;EAAU;CAC/D,CAAC,CAAC,QAAQ,MACD,EAAK,SAAS,IACtB;CAMD,OAJI,EAAM,WAAW,IACZ,kBAAA,GAAA,CAAI,CAAA,IAIX,kBAAC,GAAD;EAAiB,SAAQ;EAAU,WAAU;EAC1C,UAAA,EAAM,KAAK,MAER,kBAAC,GAAD;GAEE,OAAO,EAAK;GACZ,OAAO,EAAK;GACZ,SAAQ;GACR,MAAK;EACN,GALM,EAAK,EAKX,CAEJ;CACc,CAAA;AAErB"}

package/lib/esm/components/backoffice/detail/BackofficeUsageCostBreakdown.js

@@ -1,10 +1,9 @@
 import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
 import { content as t } from "./backofficeUsageCostBreakdown.css.js";
-import { cx as n } from "@plumile/ui/theme/tools.js";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { BackofficeDetailSection as a } from "@plumile/ui/backoffice/molecules/backoffice_detail_section/BackofficeDetailSection.js";
-import { MetricCard as o } from "@plumile/ui/components/dashboard/metric_card/MetricCard.js";
-import { MetricTileGroup as s } from "@plumile/ui/components/dashboard/metric_tile_group/MetricTileGroup.js";
+import { MetricCard as n, MetricTileGroup as r } from "@plumile/ui";
+import { cx as i } from "@plumile/ui/theme";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { BackofficeDetailSection as s } from "@plumile/ui/backoffice/molecules/backoffice_detail_section/BackofficeDetailSection.js";
 //#region src/components/backoffice/detail/BackofficeUsageCostBreakdown.tsx
 var c = ({ title: c, rows: l, totals: u, emptyLabel: d, columnLabels: f }) => {
 	let { t: p } = e(), m = p("common.notAvailable"), h = f ?? {
@@ -14,73 +13,78 @@ var c = ({ title: c, rows: l, totals: u, emptyLabel: d, columnLabels: f }) => {
 		charged: p("detail.columns.charged"),
 		events: p("detail.columns.events")
 	};
-	return l.length === 0 && (u == null || u.length === 0) ? /* @__PURE__ */ r(a, {
+	return l.length === 0 && (u == null || u.length === 0) ? /* @__PURE__ */ a(s, {
 		title: c,
 		children: d ?? m
-	}) : /* @__PURE__ */ r(a, {
+	}) : /* @__PURE__ */ a(s, {
 		title: c,
-		children: /* @__PURE__ */ i("div", {
+		children: /* @__PURE__ */ o("div", {
 			className: t,
-			children: [u != null && u.length > 0 && /* @__PURE__ */ r(s, {
+			children: [u != null && u.length > 0 && /* @__PURE__ */ a(r, {
 				density: "compact",
 				minColumn: "180",
-				children: u.map((e) => /* @__PURE__ */ r(o, {
-					label: e.label,
-					value: e.value,
-					hint: e.hint,
-					tone: e.tone ?? "neutral",
-					density: "compact",
-					copyValue: e.copyValue,
-					copyLabel: p("common.actions.copy"),
-					copiedLabel: p("common.actions.copied")
-				}, e.id))
-			}), l.length > 0 && /* @__PURE__ */ i("div", {
-				className: "txvbqb5bb txvbqb6gz",
-				children: [/* @__PURE__ */ i("div", {
-					className: "_13200uy0 txvbqb5bb txvbqb6h9 txvbqb2cx",
+				children: u.map((e) => {
+					let t = e.copyValue?.trim(), r = {
+						...t == null || t === "" ? { copyValue: void 0 } : {
+							copyValue: t,
+							copyLabel: p("common.actions.copy"),
+							copiedLabel: p("common.actions.copied")
+						},
+						label: e.label,
+						value: e.value,
+						hint: e.hint,
+						tone: e.tone ?? "neutral",
+						density: "compact"
+					};
+					return /* @__PURE__ */ a(n, { ...r }, e.id);
+				})
+			}), l.length > 0 && /* @__PURE__ */ o("div", {
+				className: "txvbqb5m1 txvbqb6rp",
+				children: [/* @__PURE__ */ o("div", {
+					className: "_13200uy0 txvbqb5m1 txvbqb6rz txvbqb2nn",
 					children: [
-						/* @__PURE__ */ r("span", {
-							className: "txvbqb6cj txvbqb6a txvbqb1l6 txvbqbe2",
+						/* @__PURE__ */ a("span", {
+							className: "txvbqb6n9 txvbqb6a txvbqb1o5 txvbqbe7",
 							children: h.name
 						}),
-						/* @__PURE__ */ r("span", {
-							className: "txvbqb6cj txvbqb6a txvbqb1l6 txvbqbe2",
+						/* @__PURE__ */ a("span", {
+							className: "txvbqb6n9 txvbqb6a txvbqb1o5 txvbqbe7",
 							children: h.rawCost
 						}),
-						/* @__PURE__ */ r("span", {
-							className: "txvbqb6cj txvbqb6a txvbqb1l6 txvbqbe2",
+						/* @__PURE__ */ a("span", {
+							className: "txvbqb6n9 txvbqb6a txvbqb1o5 txvbqbe7",
 							children: h.markup
 						}),
-						/* @__PURE__ */ r("span", {
-							className: "txvbqb6cj txvbqb6a txvbqb1l6 txvbqbe2",
+						/* @__PURE__ */ a("span", {
+							className: "txvbqb6n9 txvbqb6a txvbqb1o5 txvbqbe7",
 							children: h.charged
 						}),
-						/* @__PURE__ */ r("span", {
-							className: "txvbqb6cj txvbqb6a txvbqb1l6 txvbqbe2",
+						/* @__PURE__ */ a("span", {
+							className: "txvbqb6n9 txvbqb6a txvbqb1o5 txvbqbe7",
 							children: h.events
 						})
 					]
-				}), l.map((e) => /* @__PURE__ */ i("div", {
-					className: "_13200uy0 txvbqb5bb txvbqb6h9 txvbqb2cx",
+				}), l.map((e) => /* @__PURE__ */ o("div", {
+					className: "_13200uy0 txvbqb5m1 txvbqb6rz txvbqb2nn",
 					children: [
-						/* @__PURE__ */ r("span", {
-							className: n("txvbqb6ct txvbqbe1 txvbqb1um", "txvbqb1cr"),
+						/* @__PURE__ */ a("span", {
+							className: i("txvbqb6nj txvbqbe6 txvbqb206", "txvbqb1d4"),
 							children: e.label
 						}),
-						/* @__PURE__ */ r("span", {
-							className: "txvbqb6ct txvbqbe1 txvbqb1um",
+						/* @__PURE__ */ a("span", {
+							className: "txvbqb6nj txvbqbe6 txvbqb206",
 							children: e.rawCost ?? m
 						}),
-						/* @__PURE__ */ r("span", {
-							className: "txvbqb6ct txvbqbe1 txvbqb1um",
+						/* @__PURE__ */ a("span", {
+							className: "txvbqb6nj txvbqbe6 txvbqb206",
 							children: e.markup ?? m
 						}),
-						/* @__PURE__ */ r("span", {
-							className: "txvbqb6ct txvbqbe1 txvbqb1um",
+						/* @__PURE__ */ a("span", {
+							className: "txvbqb6nj txvbqbe6 txvbqb206",
 							children: e.charged ?? m
 						}),
-						/* @__PURE__ */ r("span", {
-							className: "txvbqb6ct txvbqbe1 txvbqb1um",
+						/* @__PURE__ */ a("span", {
+							className: "txvbqb6nj txvbqbe6 txvbqb206",
 							children: e.eventsCount ?? e.quantity ?? m
 						})
 					]

package/lib/esm/components/backoffice/detail/BackofficeUsageCostBreakdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackofficeUsageCostBreakdown.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeUsageCostBreakdown.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport { BackofficeDetailSection } from '@plumile/ui/backoffice/molecules/backoffice_detail_section/BackofficeDetailSection.js';\nimport {\n  MetricCard,\n  type MetricTone,\n} from '@plumile/ui/components/dashboard/metric_card/MetricCard.js';\nimport { MetricTileGroup } from '@plumile/ui/components/dashboard/metric_tile_group/MetricTileGroup.js';\nimport { cx } from '@plumile/ui/theme/tools.js';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport * as styles from './backofficeUsageCostBreakdown.css.js';\n\nexport type BackofficeMoneyValue = {\n  readonly amount: string | number;\n  readonly currency: string;\n};\n\nexport type BackofficeUsageCostBreakdownRow = {\n  readonly id: string;\n  readonly label: string;\n  readonly rawCost?: ReactNode;\n  readonly markup?: ReactNode;\n  readonly charged?: ReactNode;\n  readonly eventsCount?: ReactNode;\n  readonly quantity?: ReactNode;\n};\n\nexport type BackofficeUsageCostBreakdownTotal = {\n  readonly id: string;\n  readonly label: string;\n  readonly value: ReactNode;\n  readonly hint?: ReactNode;\n  readonly tone?: MetricTone;\n  readonly copyValue?: string;\n};\n\nexport type BackofficeUsageCostBreakdownProps = {\n  readonly title: string;\n  readonly rows: readonly BackofficeUsageCostBreakdownRow[];\n  readonly totals?: readonly BackofficeUsageCostBreakdownTotal[];\n  readonly emptyLabel?: string;\n  readonly columnLabels?: {\n    readonly name: string;\n    readonly rawCost: string;\n    readonly markup: string;\n    readonly charged: string;\n    readonly events: string;\n  };\n};\n\nexport const BackofficeUsageCostBreakdown = ({\n  title,\n  rows,\n  totals,\n  emptyLabel,\n  columnLabels,\n}: BackofficeUsageCostBreakdownProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const missing = t('common.notAvailable');\n  const labels = columnLabels ?? {\n    name: t('detail.columns.name'),\n    rawCost: t('detail.columns.rawCost'),\n    markup: t('detail.columns.markup'),\n    charged: t('detail.columns.charged'),\n    events: t('detail.columns.events'),\n  };\n\n  if (rows.length === 0 && (totals == null || totals.length === 0)) {\n    return (\n      <BackofficeDetailSection title={title}>\n        {emptyLabel ?? missing}\n      </BackofficeDetailSection>\n    );\n  }\n\n  return (\n    <BackofficeDetailSection title={title}>\n      <div className={styles.content}>\n        {totals != null && totals.length > 0 && (\n          <MetricTileGroup density=\"compact\" minColumn=\"180\">\n            {totals.map((total) => {\n              return (\n                <MetricCard\n                  key={total.id}\n                  label={total.label}\n                  value={total.value}\n                  hint={total.hint}\n                  tone={total.tone ?? 'neutral'}\n                  density=\"compact\"\n                  copyValue={total.copyValue}\n                  copyLabel={t('common.actions.copy')}\n                  copiedLabel={t('common.actions.copied')}\n                />\n              );\n            })}\n          </MetricTileGroup>\n        )}\n        {rows.length > 0 && (\n          <div className={styles.table}>\n            <div className={styles.row}>\n              <span className={styles.header}>{labels.name}</span>\n              <span className={styles.header}>{labels.rawCost}</span>\n              <span className={styles.header}>{labels.markup}</span>\n              <span className={styles.header}>{labels.charged}</span>\n              <span className={styles.header}>{labels.events}</span>\n            </div>\n            {rows.map((row) => {\n              return (\n                <div className={styles.row} key={row.id}>\n                  <span className={cx(styles.cell, styles.label)}>\n                    {row.label}\n                  </span>\n                  <span className={styles.cell}>{row.rawCost ?? missing}</span>\n                  <span className={styles.cell}>{row.markup ?? missing}</span>\n                  <span className={styles.cell}>{row.charged ?? missing}</span>\n                  <span className={styles.cell}>\n                    {row.eventsCount ?? row.quantity ?? missing}\n                  </span>\n                </div>\n              );\n            })}\n          </div>\n        )}\n      </div>\n    </BackofficeDetailSection>\n  );\n};\n\nexport default BackofficeUsageCostBreakdown;\n"],"mappings":";;;;;;;;AAkDA,IAAa,KAAgC,EAC3C,UACA,SACA,WACA,eACA,sBACoD;CACpD,IAAM,EAAE,SAAM,EAA8B,GACtC,IAAU,EAAE,qBAAqB,GACjC,IAAS,KAAgB;EAC7B,MAAM,EAAE,qBAAqB;EAC7B,SAAS,EAAE,wBAAwB;EACnC,QAAQ,EAAE,uBAAuB;EACjC,SAAS,EAAE,wBAAwB;EACnC,QAAQ,EAAE,uBAAuB;CACnC;CAUA,OARI,EAAK,WAAW,MAAM,KAAU,QAAQ,EAAO,WAAW,KAE1D,kBAAC,GAAD;EAAgC;EAC7B,UAAA,KAAc;CACQ,CAAA,IAK3B,kBAAC,GAAD;EAAgC;EAC9B,UAAA,kBAAC,OAAD;GAAK,WAAW;GAAhB,UAAA,CACG,KAAU,QAAQ,EAAO,SAAS,KACjC,kBAAC,GAAD;IAAiB,SAAQ;IAAU,WAAU;IAC1C,UAAA,EAAO,KAAK,MAET,kBAAC,GAAD;KAEE,OAAO,EAAM;KACb,OAAO,EAAM;KACb,MAAM,EAAM;KACZ,MAAM,EAAM,QAAQ;KACpB,SAAQ;KACR,WAAW,EAAM;KACjB,WAAW,EAAE,qBAAqB;KAClC,aAAa,EAAE,uBAAuB;IACvC,GATM,EAAM,EASZ,CAEJ;GACc,CAAA,GAElB,EAAK,SAAS,KACb,kBAAC,OAAD;IAAK,WAAW;IAAhB,UAAA,CACE,kBAAC,OAAD;KAAK,WAAW;KAAhB,UAAA;MACE,kBAAC,QAAD;OAAM,WAAW;OAAgB,UAAA,EAAO;MAAW,CAAA;MACnD,kBAAC,QAAD;OAAM,WAAW;OAAgB,UAAA,EAAO;MAAc,CAAA;MACtD,kBAAC,QAAD;OAAM,WAAW;OAAgB,UAAA,EAAO;MAAa,CAAA;MACrD,kBAAC,QAAD;OAAM,WAAW;OAAgB,UAAA,EAAO;MAAc,CAAA;MACtD,kBAAC,QAAD;OAAM,WAAW;OAAgB,UAAA,EAAO;MAAa,CAAA;KAClD;IACJ,CAAA,GAAA,EAAK,KAAK,MAEP,kBAAC,OAAD;KAAK,WAAW;KAAhB,UAAA;MACE,kBAAC,QAAD;OAAM,WAAW,EAAG,gCAAa,WAAY;OAC1C,UAAA,EAAI;MACD,CAAA;MACN,kBAAC,QAAD;OAAM,WAAW;OAAc,UAAA,EAAI,WAAW;MAAc,CAAA;MAC5D,kBAAC,QAAD;OAAM,WAAW;OAAc,UAAA,EAAI,UAAU;MAAc,CAAA;MAC3D,kBAAC,QAAD;OAAM,WAAW;OAAc,UAAA,EAAI,WAAW;MAAc,CAAA;MAC5D,kBAAC,QAAD;OAAM,WAAW;OACd,UAAA,EAAI,eAAe,EAAI,YAAY;MAChC,CAAA;KACH;IAV4B,GAAA,EAAI,EAUhC,CAER,CACE;GAEJ,CAAA,CAAA;;CACkB,CAAA;AAE7B"}
+{"version":3,"file":"BackofficeUsageCostBreakdown.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeUsageCostBreakdown.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport { BackofficeDetailSection } from '@plumile/ui/backoffice/molecules/backoffice_detail_section/BackofficeDetailSection.js';\nimport {\n  MetricCard,\n  type MetricCardProps,\n  type MetricTone,\n  MetricTileGroup,\n} from '@plumile/ui';\nimport { cx } from '@plumile/ui/theme';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport * as styles from './backofficeUsageCostBreakdown.css.js';\n\nexport type BackofficeMoneyValue = {\n  readonly amount: string | number;\n  readonly currency: string;\n};\n\nexport type BackofficeUsageCostBreakdownRow = {\n  readonly id: string;\n  readonly label: string;\n  readonly rawCost?: ReactNode;\n  readonly markup?: ReactNode;\n  readonly charged?: ReactNode;\n  readonly eventsCount?: ReactNode;\n  readonly quantity?: ReactNode;\n};\n\nexport type BackofficeUsageCostBreakdownTotal = {\n  readonly id: string;\n  readonly label: string;\n  readonly value: ReactNode;\n  readonly hint?: ReactNode;\n  readonly tone?: MetricTone;\n  readonly copyValue?: string;\n};\n\nexport type BackofficeUsageCostBreakdownProps = {\n  readonly title: string;\n  readonly rows: readonly BackofficeUsageCostBreakdownRow[];\n  readonly totals?: readonly BackofficeUsageCostBreakdownTotal[];\n  readonly emptyLabel?: string;\n  readonly columnLabels?: {\n    readonly name: string;\n    readonly rawCost: string;\n    readonly markup: string;\n    readonly charged: string;\n    readonly events: string;\n  };\n};\n\nexport const BackofficeUsageCostBreakdown = ({\n  title,\n  rows,\n  totals,\n  emptyLabel,\n  columnLabels,\n}: BackofficeUsageCostBreakdownProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const missing = t('common.notAvailable');\n  const labels = columnLabels ?? {\n    name: t('detail.columns.name'),\n    rawCost: t('detail.columns.rawCost'),\n    markup: t('detail.columns.markup'),\n    charged: t('detail.columns.charged'),\n    events: t('detail.columns.events'),\n  };\n\n  if (rows.length === 0 && (totals == null || totals.length === 0)) {\n    return (\n      <BackofficeDetailSection title={title}>\n        {emptyLabel ?? missing}\n      </BackofficeDetailSection>\n    );\n  }\n\n  return (\n    <BackofficeDetailSection title={title}>\n      <div className={styles.content}>\n        {totals != null && totals.length > 0 && (\n          <MetricTileGroup density=\"compact\" minColumn=\"180\">\n            {totals.map((total) => {\n              const normalizedCopyValue = total.copyValue?.trim();\n              const copyProps =\n                normalizedCopyValue == null || normalizedCopyValue === ''\n                  ? { copyValue: undefined }\n                  : {\n                      copyValue: normalizedCopyValue,\n                      copyLabel: t('common.actions.copy'),\n                      copiedLabel: t('common.actions.copied'),\n                    };\n              const metricProps = {\n                ...copyProps,\n                label: total.label,\n                value: total.value,\n                hint: total.hint,\n                tone: total.tone ?? 'neutral',\n                density: 'compact',\n              } satisfies MetricCardProps;\n              return <MetricCard key={total.id} {...metricProps} />;\n            })}\n          </MetricTileGroup>\n        )}\n        {rows.length > 0 && (\n          <div className={styles.table}>\n            <div className={styles.row}>\n              <span className={styles.header}>{labels.name}</span>\n              <span className={styles.header}>{labels.rawCost}</span>\n              <span className={styles.header}>{labels.markup}</span>\n              <span className={styles.header}>{labels.charged}</span>\n              <span className={styles.header}>{labels.events}</span>\n            </div>\n            {rows.map((row) => {\n              return (\n                <div className={styles.row} key={row.id}>\n                  <span className={cx(styles.cell, styles.label)}>\n                    {row.label}\n                  </span>\n                  <span className={styles.cell}>{row.rawCost ?? missing}</span>\n                  <span className={styles.cell}>{row.markup ?? missing}</span>\n                  <span className={styles.cell}>{row.charged ?? missing}</span>\n                  <span className={styles.cell}>\n                    {row.eventsCount ?? row.quantity ?? missing}\n                  </span>\n                </div>\n              );\n            })}\n          </div>\n        )}\n      </div>\n    </BackofficeDetailSection>\n  );\n};\n\nexport default BackofficeUsageCostBreakdown;\n"],"mappings":";;;;;;;AAmDA,IAAa,KAAgC,EAC3C,UACA,SACA,WACA,eACA,sBACoD;CACpD,IAAM,EAAE,SAAM,EAA8B,GACtC,IAAU,EAAE,qBAAqB,GACjC,IAAS,KAAgB;EAC7B,MAAM,EAAE,qBAAqB;EAC7B,SAAS,EAAE,wBAAwB;EACnC,QAAQ,EAAE,uBAAuB;EACjC,SAAS,EAAE,wBAAwB;EACnC,QAAQ,EAAE,uBAAuB;CACnC;CAUA,OARI,EAAK,WAAW,MAAM,KAAU,QAAQ,EAAO,WAAW,KAE1D,kBAAC,GAAD;EAAgC;EAC7B,UAAA,KAAc;CACQ,CAAA,IAK3B,kBAAC,GAAD;EAAgC;EAC9B,UAAA,kBAAC,OAAD;GAAK,WAAW;GAAhB,UAAA,CACG,KAAU,QAAQ,EAAO,SAAS,KACjC,kBAAC,GAAD;IAAiB,SAAQ;IAAU,WAAU;IAC1C,UAAA,EAAO,KAAK,MAAU;KACrB,IAAM,IAAsB,EAAM,WAAW,KAAK,GAS5C,IAAc;MAClB,GARA,KAAuB,QAAQ,MAAwB,KACnD,EAAE,WAAW,KAAA,EAAU,IACvB;OACE,WAAW;OACX,WAAW,EAAE,qBAAqB;OAClC,aAAa,EAAE,uBAAuB;MACxC;MAGJ,OAAO,EAAM;MACb,OAAO,EAAM;MACb,MAAM,EAAM;MACZ,MAAM,EAAM,QAAQ;MACpB,SAAS;KACX;KACA,OAAO,kBAAC,GAAD,EAA2B,GAAI,EAAc,GAA5B,EAAM,EAAsB;IACtD,CAAC;GACc,CAAA,GAElB,EAAK,SAAS,KACb,kBAAC,OAAD;IAAK,WAAW;IAAhB,UAAA,CACE,kBAAC,OAAD;KAAK,WAAW;KAAhB,UAAA;MACE,kBAAC,QAAD;OAAM,WAAW;OAAgB,UAAA,EAAO;MAAW,CAAA;MACnD,kBAAC,QAAD;OAAM,WAAW;OAAgB,UAAA,EAAO;MAAc,CAAA;MACtD,kBAAC,QAAD;OAAM,WAAW;OAAgB,UAAA,EAAO;MAAa,CAAA;MACrD,kBAAC,QAAD;OAAM,WAAW;OAAgB,UAAA,EAAO;MAAc,CAAA;MACtD,kBAAC,QAAD;OAAM,WAAW;OAAgB,UAAA,EAAO;MAAa,CAAA;KAClD;IACJ,CAAA,GAAA,EAAK,KAAK,MAEP,kBAAC,OAAD;KAAK,WAAW;KAAhB,UAAA;MACE,kBAAC,QAAD;OAAM,WAAW,EAAG,gCAAa,WAAY;OAC1C,UAAA,EAAI;MACD,CAAA;MACN,kBAAC,QAAD;OAAM,WAAW;OAAc,UAAA,EAAI,WAAW;MAAc,CAAA;MAC5D,kBAAC,QAAD;OAAM,WAAW;OAAc,UAAA,EAAI,UAAU;MAAc,CAAA;MAC3D,kBAAC,QAAD;OAAM,WAAW;OAAc,UAAA,EAAI,WAAW;MAAc,CAAA;MAC5D,kBAAC,QAAD;OAAM,WAAW;OACd,UAAA,EAAI,eAAe,EAAI,YAAY;MAChC,CAAA;KACH;IAV4B,GAAA,EAAI,EAUhC,CAER,CACE;GAEJ,CAAA,CAAA;;CACkB,CAAA;AAE7B"}

package/lib/esm/components/backoffice/detail/backofficeDetailBadgeRow.css.js

@@ -1,5 +1,5 @@
 //#region src/components/backoffice/detail/backofficeDetailBadgeRow.css.ts
-var e = "txvbqb5b1 txvbqb1ch txvbqb6gz txvbqb2cx";
+var e = "txvbqb5lr txvbqb1cu txvbqb6rp txvbqb2nn";
 //#endregion
 export { e as row };
 

package/lib/esm/components/backoffice/detail/backofficeDetailBadgeRow.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeDetailBadgeRow.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeDetailBadgeRow.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const row = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 2,\n  alignItems: 'center',\n});\n"],"mappings":""}
+{"version":3,"file":"backofficeDetailBadgeRow.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeDetailBadgeRow.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme';\n\nexport const row = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 2,\n  alignItems: 'center',\n});\n"],"mappings":""}

package/lib/esm/components/backoffice/detail/backofficeDetailErrorList.css.js

@@ -1,5 +1,5 @@
 //#region src/components/backoffice/detail/backofficeDetailErrorList.css.ts
-var e = "txvbqb5b1 txvbqb6bf txvbqb6hj", t = "txvbqb5b1 txvbqb6bf txvbqb6gz txvbqbeux txvbqbmy", n = "txvbqbl9 txvbqbms txvbqbiu txvbqba6", r = "txvbqb5b1 txvbqb6bf txvbqb6gp", i = "txvbqb1cm txvbqb6ct txvbqbe3", a = "txvbqb1cs", o = "txvbqb6ct";
+var e = "txvbqb5lr txvbqb6m5 txvbqb6s9", t = "txvbqb5lr txvbqb6m5 txvbqb6rp txvbqbf5n txvbqbn3", n = "txvbqble txvbqbmx txvbqbiz txvbqbab", r = "txvbqb5lr txvbqb6m5 txvbqb6rf", i = "txvbqb1cz txvbqb6nj txvbqbe8", a = "txvbqb1d5", o = "txvbqb6nj";
 //#endregion
 export { i as code, o as details, r as header, t as item, n as itemSurface, e as list, a as message };
 

package/lib/esm/components/backoffice/detail/backofficeDetailErrorList.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeDetailErrorList.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeDetailErrorList.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const list = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n});\n\nexport const item = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n  padding: 3,\n  borderRadius: 'xl',\n});\n\nexport const itemSurface = sprinkles({\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'borderSubtle',\n  backgroundColor: 'surfaceMuted',\n});\n\nexport const header = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n});\n\nexport const code = sprinkles({\n  fontFamily: 'mono',\n  fontSize: 'sm',\n  color: 'textMuted',\n});\n\nexport const message = sprinkles({\n  fontWeight: 'semibold',\n});\n\nexport const details = sprinkles({\n  fontSize: 'sm',\n});\n"],"mappings":""}
+{"version":3,"file":"backofficeDetailErrorList.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeDetailErrorList.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme';\n\nexport const list = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n});\n\nexport const item = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n  padding: 3,\n  borderRadius: 'xl',\n});\n\nexport const itemSurface = sprinkles({\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'borderSubtle',\n  backgroundColor: 'surfaceMuted',\n});\n\nexport const header = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n});\n\nexport const code = sprinkles({\n  fontFamily: 'mono',\n  fontSize: 'sm',\n  color: 'textMuted',\n});\n\nexport const message = sprinkles({\n  fontWeight: 'semibold',\n});\n\nexport const details = sprinkles({\n  fontSize: 'sm',\n});\n"],"mappings":""}

package/lib/esm/components/backoffice/detail/backofficeDetailLayout.css.js

@@ -1,5 +1,5 @@
 //#region src/components/backoffice/detail/backofficeDetailLayout.css.ts
-var e = "txvbqb5bb txvbqb7a5 txvbqb79y txvbqb6hj txvbqb2cn txvbqbdqn", t = "txvbqb5b1 txvbqb6bf txvbqb6hj txvbqbdqn", n = "txvbqb5b1 txvbqb6bf txvbqb6hj txvbqbdqn", r = "txvbqb5b1 txvbqb6bf txvbqb6hj";
+var e = "txvbqb5m1 txvbqb7kl txvbqb7ky txvbqb6s9 txvbqb2nd txvbqbe1d", t = "txvbqb5lr txvbqb6m5 txvbqb6s9 txvbqbe1d", n = "txvbqb5lr txvbqb6m5 txvbqb6s9 txvbqbe1d", r = "txvbqb5lr txvbqb6m5 txvbqb6s9";
 //#endregion
 export { e as layout, t as primary, n as secondary, r as stacked };
 

package/lib/esm/components/backoffice/detail/backofficeDetailLayout.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeDetailLayout.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeDetailLayout.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const layout = sprinkles({\n  display: 'grid',\n  gridTemplateColumns: {\n    base: 'twoFrOneFr',\n    lg: 'detailSingle',\n  },\n  gap: 4,\n  alignItems: 'flex-start',\n  minWidth: 0,\n});\n\nexport const primary = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n  minWidth: 0,\n});\n\nexport const secondary = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n  minWidth: 0,\n});\n\nexport const stacked = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n});\n"],"mappings":""}
+{"version":3,"file":"backofficeDetailLayout.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeDetailLayout.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme';\n\nexport const layout = sprinkles({\n  display: 'grid',\n  gridTemplateColumns: {\n    base: 'detailSingle',\n    lg: 'twoFrOneFr',\n  },\n  gap: 4,\n  alignItems: 'flex-start',\n  minWidth: 0,\n});\n\nexport const primary = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n  minWidth: 0,\n});\n\nexport const secondary = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n  minWidth: 0,\n});\n\nexport const stacked = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n});\n"],"mappings":""}

package/lib/esm/components/backoffice/detail/backofficeDetailRelationList.css.js

@@ -1,5 +1,5 @@
 //#region src/components/backoffice/detail/backofficeDetailRelationList.css.ts
-var e = "txvbqb5b1 txvbqb6bf txvbqb6h9";
+var e = "txvbqb5lr txvbqb6m5 txvbqb6rz";
 //#endregion
 export { e as list };
 

package/lib/esm/components/backoffice/detail/backofficeDetailRelationList.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeDetailRelationList.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeDetailRelationList.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const list = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n});\n"],"mappings":""}
+{"version":3,"file":"backofficeDetailRelationList.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeDetailRelationList.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme';\n\nexport const list = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n});\n"],"mappings":""}

package/lib/esm/components/backoffice/detail/backofficeEntitySummaryHeader.css.js

@@ -1,5 +1,5 @@
 //#region src/components/backoffice/detail/backofficeEntitySummaryHeader.css.ts
-var e = "txvbqb5b1 txvbqb6bf txvbqb6hj txvbqbev7 txvbqbmx txvbqba4 txvbqbl9 txvbqbms txvbqbiw", t = "txvbqb5b1 txvbqb8e5 txvbqb2cn txvbqb6hj txvbqb1ch", n = "txvbqb5b1 txvbqb6bf txvbqb6gz txvbqbdqn", r = "txvbqb5b1 txvbqb2cx txvbqb6gz txvbqb1ch", i = "txvbqb6dx txvbqb1om txvbqb1cs txvbqbe1 txvbqb1um", a = "txvbqb6ct txvbqbe2 txvbqb1um", o = "txvbqb5b1 txvbqb2cx txvbqb8dl txvbqb6gz txvbqb1ch", s = "txvbqb5bb txvbqb6h9 txvbqb7f5", c = "txvbqb5b1 txvbqb6bf txvbqb6gp txvbqbdqn", l = "txvbqb6cj txvbqb6a txvbqb1l6 txvbqbe2", u = "txvbqb6ct txvbqbe1 txvbqb1um";
+var e = "txvbqb5lr txvbqb6m5 txvbqb6s9 txvbqbf5x txvbqbn2 txvbqba9 txvbqble txvbqbmx txvbqbj1", t = "txvbqb5lr txvbqb8ov txvbqb2nd txvbqb6s9 txvbqb1cu", n = "txvbqb5lr txvbqb6m5 txvbqb6rp txvbqbe1d", r = "txvbqb5lr txvbqb2nn txvbqb6rp txvbqb1cu", i = "txvbqb6on txvbqb1rl txvbqb1d5 txvbqbe6 txvbqb206", a = "txvbqb6nj txvbqbe7 txvbqb206", o = "txvbqb5lr txvbqb2nn txvbqb8ob txvbqb6rp txvbqb1cu", s = "txvbqb5m1 txvbqb6rz txvbqb7pv", c = "txvbqb5lr txvbqb6m5 txvbqb6rf txvbqbe1d", l = "txvbqb6n9 txvbqb6a txvbqb1o5 txvbqbe7", u = "txvbqb6nj txvbqbe6 txvbqb206";
 //#endregion
 export { o as actions, n as identity, s as meta, c as metaItem, l as metaLabel, u as metaValue, e as root, a as subtitle, i as title, r as titleRow, t as top };
 

package/lib/esm/components/backoffice/detail/backofficeEntitySummaryHeader.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeEntitySummaryHeader.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeEntitySummaryHeader.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const root = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n  padding: 4,\n  borderRadius: 'lg',\n  backgroundColor: 'surface',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'borderLight',\n});\n\nexport const top = sprinkles({\n  display: 'flex',\n  justifyContent: 'space-between',\n  alignItems: 'flex-start',\n  gap: 4,\n  flexWrap: 'wrap',\n});\n\nexport const identity = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n  minWidth: 0,\n});\n\nexport const titleRow = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  flexWrap: 'wrap',\n});\n\nexport const title = sprinkles({\n  fontSize: '2xl',\n  lineHeight: 'tight',\n  fontWeight: 'semibold',\n  color: 'text',\n  overflowWrap: 'anywhere',\n});\n\nexport const subtitle = sprinkles({\n  fontSize: 'sm',\n  color: 'textSecondary',\n  overflowWrap: 'anywhere',\n});\n\nexport const actions = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'flex-end',\n  gap: 2,\n  flexWrap: 'wrap',\n});\n\nexport const meta = sprinkles({\n  display: 'grid',\n  gap: 3,\n  gridTemplateColumns: 'autoFitMinmax180',\n});\n\nexport const metaItem = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n  minWidth: 0,\n});\n\nexport const metaLabel = sprinkles({\n  fontSize: 'xs',\n  textTransform: 'uppercase',\n  letterSpacing: 'capsTight',\n  color: 'textSecondary',\n});\n\nexport const metaValue = sprinkles({\n  fontSize: 'sm',\n  color: 'text',\n  overflowWrap: 'anywhere',\n});\n"],"mappings":""}
+{"version":3,"file":"backofficeEntitySummaryHeader.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeEntitySummaryHeader.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme';\n\nexport const root = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n  padding: 4,\n  borderRadius: 'lg',\n  backgroundColor: 'surface',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'borderLight',\n});\n\nexport const top = sprinkles({\n  display: 'flex',\n  justifyContent: 'space-between',\n  alignItems: 'flex-start',\n  gap: 4,\n  flexWrap: 'wrap',\n});\n\nexport const identity = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n  minWidth: 0,\n});\n\nexport const titleRow = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  flexWrap: 'wrap',\n});\n\nexport const title = sprinkles({\n  fontSize: '2xl',\n  lineHeight: 'tight',\n  fontWeight: 'semibold',\n  color: 'text',\n  overflowWrap: 'anywhere',\n});\n\nexport const subtitle = sprinkles({\n  fontSize: 'sm',\n  color: 'textSecondary',\n  overflowWrap: 'anywhere',\n});\n\nexport const actions = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'flex-end',\n  gap: 2,\n  flexWrap: 'wrap',\n});\n\nexport const meta = sprinkles({\n  display: 'grid',\n  gap: 3,\n  gridTemplateColumns: 'autoFitMinmax180',\n});\n\nexport const metaItem = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n  minWidth: 0,\n});\n\nexport const metaLabel = sprinkles({\n  fontSize: 'xs',\n  textTransform: 'uppercase',\n  letterSpacing: 'capsTight',\n  color: 'textSecondary',\n});\n\nexport const metaValue = sprinkles({\n  fontSize: 'sm',\n  color: 'text',\n  overflowWrap: 'anywhere',\n});\n"],"mappings":""}

package/lib/esm/components/backoffice/detail/backofficeRelationsSummaryGrid.css.js

@@ -1,5 +1,5 @@
 //#region src/components/backoffice/detail/backofficeRelationsSummaryGrid.css.ts
-var e = "txvbqb5bb txvbqb6h9 txvbqb7f5", t = "txvbqb5b1 txvbqb6bf txvbqb6gp txvbqbeux txvbqbmw txvbqba4 txvbqbl9 txvbqbms txvbqbiw txvbqbdqn", n = "txvbqb6cj txvbqb6a txvbqb1l6 txvbqbe2", r = "txvbqb6dn txvbqb1cs txvbqbe1", i = "txvbqb6ct txvbqbe2 txvbqb1um";
+var e = "txvbqb5m1 txvbqb6rz txvbqb7pv", t = "txvbqb5lr txvbqb6m5 txvbqb6rf txvbqbf5n txvbqbn1 txvbqba9 txvbqble txvbqbmx txvbqbj1 txvbqbe1d", n = "txvbqb6n9 txvbqb6a txvbqb1o5 txvbqbe7", r = "txvbqb6od txvbqb1d5 txvbqbe6", i = "txvbqb6nj txvbqbe7 txvbqb206";
 //#endregion
 export { r as count, i as description, e as grid, t as item, n as label };
 

package/lib/esm/components/backoffice/detail/backofficeRelationsSummaryGrid.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeRelationsSummaryGrid.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeRelationsSummaryGrid.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const grid = sprinkles({\n  display: 'grid',\n  gap: 3,\n  gridTemplateColumns: 'autoFitMinmax180',\n});\n\nexport const item = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n  padding: 3,\n  borderRadius: 'md',\n  backgroundColor: 'surface',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'borderLight',\n  minWidth: 0,\n});\n\nexport const label = sprinkles({\n  fontSize: 'xs',\n  textTransform: 'uppercase',\n  letterSpacing: 'capsTight',\n  color: 'textSecondary',\n});\n\nexport const count = sprinkles({\n  fontSize: 'xl',\n  fontWeight: 'semibold',\n  color: 'text',\n});\n\nexport const description = sprinkles({\n  fontSize: 'sm',\n  color: 'textSecondary',\n  overflowWrap: 'anywhere',\n});\n"],"mappings":""}
+{"version":3,"file":"backofficeRelationsSummaryGrid.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeRelationsSummaryGrid.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme';\n\nexport const grid = sprinkles({\n  display: 'grid',\n  gap: 3,\n  gridTemplateColumns: 'autoFitMinmax180',\n});\n\nexport const item = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n  padding: 3,\n  borderRadius: 'md',\n  backgroundColor: 'surface',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'borderLight',\n  minWidth: 0,\n});\n\nexport const label = sprinkles({\n  fontSize: 'xs',\n  textTransform: 'uppercase',\n  letterSpacing: 'capsTight',\n  color: 'textSecondary',\n});\n\nexport const count = sprinkles({\n  fontSize: 'xl',\n  fontWeight: 'semibold',\n  color: 'text',\n});\n\nexport const description = sprinkles({\n  fontSize: 'sm',\n  color: 'textSecondary',\n  overflowWrap: 'anywhere',\n});\n"],"mappings":""}

package/lib/esm/components/backoffice/detail/backofficeUsageCostBreakdown.css.js

@@ -1,6 +1,6 @@
 /* empty css                                            */
 //#region src/components/backoffice/detail/backofficeUsageCostBreakdown.css.ts
-var e = "txvbqb5b1 txvbqb6bf txvbqb6h9", t = "txvbqb5bb txvbqb6gz", n = "_13200uy0 txvbqb5bb txvbqb6h9 txvbqb2cx", r = "txvbqb6cj txvbqb6a txvbqb1l6 txvbqbe2", i = "txvbqb6ct txvbqbe1 txvbqb1um", a = "txvbqb1cr";
+var e = "txvbqb5lr txvbqb6m5 txvbqb6rz", t = "txvbqb5m1 txvbqb6rp", n = "_13200uy0 txvbqb5m1 txvbqb6rz txvbqb2nn", r = "txvbqb6n9 txvbqb6a txvbqb1o5 txvbqbe7", i = "txvbqb6nj txvbqbe6 txvbqb206", a = "txvbqb1d4";
 //#endregion
 export { i as cell, e as content, r as header, a as label, n as row, t as table };
 

package/lib/esm/components/backoffice/detail/backofficeUsageCostBreakdown.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeUsageCostBreakdown.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeUsageCostBreakdown.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const content = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n});\n\nexport const table = sprinkles({\n  display: 'grid',\n  gap: 2,\n});\n\nexport const row = style([\n  sprinkles({\n    display: 'grid',\n    gap: 3,\n    alignItems: 'center',\n  }),\n  {\n    gridTemplateColumns: 'minmax(0, 1fr) repeat(4, minmax(0, auto))',\n  },\n]);\n\nexport const header = sprinkles({\n  fontSize: 'xs',\n  textTransform: 'uppercase',\n  letterSpacing: 'capsTight',\n  color: 'textSecondary',\n});\n\nexport const cell = sprinkles({\n  fontSize: 'sm',\n  color: 'text',\n  overflowWrap: 'anywhere',\n});\n\nexport const label = sprinkles({\n  fontWeight: 'medium',\n});\n"],"mappings":""}
+{"version":3,"file":"backofficeUsageCostBreakdown.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeUsageCostBreakdown.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles } from '@plumile/ui/theme';\n\nexport const content = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n});\n\nexport const table = sprinkles({\n  display: 'grid',\n  gap: 2,\n});\n\nexport const row = style([\n  sprinkles({\n    display: 'grid',\n    gap: 3,\n    alignItems: 'center',\n  }),\n  {\n    gridTemplateColumns: 'minmax(0, 1fr) repeat(4, minmax(0, auto))',\n  },\n]);\n\nexport const header = sprinkles({\n  fontSize: 'xs',\n  textTransform: 'uppercase',\n  letterSpacing: 'capsTight',\n  color: 'textSecondary',\n});\n\nexport const cell = sprinkles({\n  fontSize: 'sm',\n  color: 'text',\n  overflowWrap: 'anywhere',\n});\n\nexport const label = sprinkles({\n  fontWeight: 'medium',\n});\n"],"mappings":""}

package/lib/esm/components/backoffice/errors/BackofficeErrorBoundary.js

@@ -1,4 +1,4 @@
-import { ErrorBoundary as e } from "@plumile/ui/components/feedback/ErrorBoundary.js";
+import { ErrorBoundary as e } from "@plumile/ui";
 //#region src/components/backoffice/errors/BackofficeErrorBoundary.tsx
 var t = e;
 //#endregion

package/lib/esm/components/backoffice/errors/BackofficeErrorBoundary.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackofficeErrorBoundary.js","names":[],"sources":["../../../../../src/components/backoffice/errors/BackofficeErrorBoundary.tsx"],"sourcesContent":["import {\n  ErrorBoundary,\n  type ErrorBoundaryProps,\n} from '@plumile/ui/components/feedback/ErrorBoundary.js';\n\nexport type BackofficeErrorBoundaryProps = ErrorBoundaryProps;\n\nexport const BackofficeErrorBoundary = ErrorBoundary;\n\nexport default BackofficeErrorBoundary;\n"],"mappings":";;AAOA,IAAa,IAA0B"}
+{"version":3,"file":"BackofficeErrorBoundary.js","names":[],"sources":["../../../../../src/components/backoffice/errors/BackofficeErrorBoundary.tsx"],"sourcesContent":["import { ErrorBoundary, type ErrorBoundaryProps } from '@plumile/ui';\n\nexport type BackofficeErrorBoundaryProps = ErrorBoundaryProps;\n\nexport const BackofficeErrorBoundary = ErrorBoundary;\n\nexport default BackofficeErrorBoundary;\n"],"mappings":";;AAIA,IAAa,IAA0B"}

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

@@ -6,7 +6,7 @@ import { action as o, icon as s } from "./backofficeFilterAction.css.js";
 import { jsx as c } from "react/jsx-runtime";
 import { useTranslation as l } from "react-i18next";
 import u from "@plumile/router/routing/Link.js";
-import { SidebarSearchSvg as d } from "@plumile/ui/icons/SidebarSearchSvg.js";
+import { SidebarSearchSvg as d } from "@plumile/ui/icons/SidebarSearchSvg";
 import { setWhereValue as f } from "@plumile/backoffice-core/filters/where.js";
 //#region src/components/backoffice/filters/BackofficeFilterAction.tsx
 var p = (e, t) => e(t), m = (m) => {

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

@@ -1 +1 @@
-{"version":3,"file":"BackofficeFilterAction.js","names":[],"sources":["../../../../../src/components/backoffice/filters/BackofficeFilterAction.tsx"],"sourcesContent":["import { type JSX } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport Link from '@plumile/router/routing/Link.js';\nimport { SidebarSearchSvg } from '@plumile/ui/icons/SidebarSearchSvg.js';\n\nimport type {\n  BackofficeRuntimeResolvedListFacetConfig,\n  I18nLabel,\n} from '@plumile/backoffice-core/types.js';\nimport type { TFunction } from 'i18next';\nimport { setWhereValue } from '@plumile/backoffice-core/filters/where.js';\n\nimport {\n  canFilterValue,\n  resolveFilterForColumn,\n  resolveFilterForWhereKey,\n} from '../../../filters/filterHelpers.js';\nimport { useBackofficeConfig } from '../../../provider/BackofficeConfigContext.js';\nimport { useBackofficeListFilterContext } from '../scaffolds/BackofficeListFilterContext.js';\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\n\nimport * as styles from './backofficeFilterAction.css.js';\n\nexport type BackofficeFilterActionProps = {\n  whereKey: string;\n  value: unknown;\n  path?: readonly string[];\n  label?: string;\n  listConfig?: BackofficeRuntimeResolvedListFacetConfig;\n};\n\ntype ListFilterContext = {\n  config: BackofficeRuntimeResolvedListFacetConfig;\n  applyFilter: (\n    whereKey: string,\n    value: unknown,\n    path?: readonly string[],\n  ) => void;\n};\n\nconst resolveLabel = (label: I18nLabel, tApp: TFunction): string => {\n  return label(tApp);\n};\n\nexport const BackofficeFilterAction = (\n  props: BackofficeFilterActionProps,\n): JSX.Element | null => {\n  const { t: tApp } = useTranslation();\n  const { t } = useBackofficeReactTranslation();\n  const { filterColumnAliases } = useBackofficeConfig();\n  const { whereKey, value, path, label, listConfig } = props;\n\n  const getContext =\n    useBackofficeListFilterContext as () => ListFilterContext | null;\n  const context = getContext();\n  let config: BackofficeRuntimeResolvedListFacetConfig | null = null;\n\n  if (listConfig != null) {\n    config = listConfig;\n  } else if (context != null) {\n    config = context.config;\n  }\n\n  if (config == null) {\n    return null;\n  }\n\n  let filter = resolveFilterForWhereKey(config, whereKey, path);\n  if (filter == null && path == null) {\n    filter = resolveFilterForColumn(config, whereKey, filterColumnAliases);\n  }\n  if (filter == null || !canFilterValue(filter, value)) {\n    return null;\n  }\n\n  const filterLabel = resolveLabel(filter.label, tApp);\n  const actionLabel =\n    label ??\n    t('filters.actions.filterBy', {\n      label: filterLabel,\n    });\n  const icon = (\n    <SidebarSearchSvg\n      width={14}\n      height={14}\n      className={styles.icon}\n      aria-hidden=\"true\"\n    />\n  );\n\n  if (context != null) {\n    return (\n      <button\n        type=\"button\"\n        className={styles.action}\n        title={actionLabel}\n        aria-label={actionLabel}\n        onClick={() => {\n          context.applyFilter(whereKey, value, path);\n        }}\n      >\n        {icon}\n      </button>\n    );\n  }\n\n  const baseWhere = config.listNavigation.defaults.where;\n  const nextWhere = setWhereValue(baseWhere, whereKey, value, path);\n  const destination = config.listNavigation.encode({ where: nextWhere });\n\n  return (\n    <Link\n      to={{\n        pathname: config.routes.list,\n        filters: destination.filters,\n        query: destination.query,\n      }}\n      className={styles.action}\n      title={actionLabel}\n      aria-label={actionLabel}\n      preloadOnHover=\"code\"\n    >\n      {icon}\n    </Link>\n  );\n};\n\nexport default BackofficeFilterAction;\n"],"mappings":";;;;;;;;;;;AAwCA,IAAM,KAAgB,GAAkB,MAC/B,EAAM,CAAI,GAGN,KACX,MACuB;CACvB,IAAM,EAAE,GAAG,MAAS,EAAe,GAC7B,EAAE,SAAM,EAA8B,GACtC,EAAE,2BAAwB,EAAoB,GAC9C,EAAE,aAAU,UAAO,SAAM,UAAO,kBAAe,GAI/C,IAAU,EAAW,GACvB,IAA0D;CAQ9D,IANI,KAAc,OAEP,KAAW,SACpB,IAAS,EAAQ,UAFjB,IAAS,GAKP,KAAU,MACZ,OAAO;CAGT,IAAI,IAAS,EAAyB,GAAQ,GAAU,CAAI;CAI5D,IAHI,KAAU,QAAQ,KAAQ,SAC5B,IAAS,EAAuB,GAAQ,GAAU,CAAmB,IAEnE,KAAU,QAAQ,CAAC,EAAe,GAAQ,CAAK,GACjD,OAAO;CAGT,IAAM,IAAc,EAAa,EAAO,OAAO,CAAI,GAC7C,IACJ,KACA,EAAE,4BAA4B,EAC5B,OAAO,EACT,CAAC,GACG,IACJ,kBAAC,GAAD;EACE,OAAO;EACP,QAAQ;EACR,WAAW;EACX,eAAY;CACb,CAAA;CAGH,IAAI,KAAW,MACb,OACE,kBAAC,UAAD;EACE,MAAK;EACL,WAAW;EACX,OAAO;EACP,cAAY;EACZ,eAAe;GACb,EAAQ,YAAY,GAAU,GAAO,CAAI;EAC3C;EAEC,UAAA;CACK,CAAA;CAIZ,IAAM,IAAY,EAAO,eAAe,SAAS,OAC3C,IAAY,EAAc,GAAW,GAAU,GAAO,CAAI,GAC1D,IAAc,EAAO,eAAe,OAAO,EAAE,OAAO,EAAU,CAAC;CAErE,OACE,kBAAC,GAAD;EACE,IAAI;GACF,UAAU,EAAO,OAAO;GACxB,SAAS,EAAY;GACrB,OAAO,EAAY;EACrB;EACA,WAAW;EACX,OAAO;EACP,cAAY;EACZ,gBAAe;EAEd,UAAA;CACG,CAAA;AAEV"}
+{"version":3,"file":"BackofficeFilterAction.js","names":[],"sources":["../../../../../src/components/backoffice/filters/BackofficeFilterAction.tsx"],"sourcesContent":["import { type JSX } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport Link from '@plumile/router/routing/Link.js';\nimport { SidebarSearchSvg } from '@plumile/ui/icons/SidebarSearchSvg';\n\nimport type {\n  BackofficeRuntimeResolvedListFacetConfig,\n  I18nLabel,\n} from '@plumile/backoffice-core/types.js';\nimport type { TFunction } from 'i18next';\nimport { setWhereValue } from '@plumile/backoffice-core/filters/where.js';\n\nimport {\n  canFilterValue,\n  resolveFilterForColumn,\n  resolveFilterForWhereKey,\n} from '../../../filters/filterHelpers.js';\nimport { useBackofficeConfig } from '../../../provider/BackofficeConfigContext.js';\nimport { useBackofficeListFilterContext } from '../scaffolds/BackofficeListFilterContext.js';\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\n\nimport * as styles from './backofficeFilterAction.css.js';\n\nexport type BackofficeFilterActionProps = {\n  whereKey: string;\n  value: unknown;\n  path?: readonly string[];\n  label?: string;\n  listConfig?: BackofficeRuntimeResolvedListFacetConfig;\n};\n\ntype ListFilterContext = {\n  config: BackofficeRuntimeResolvedListFacetConfig;\n  applyFilter: (\n    whereKey: string,\n    value: unknown,\n    path?: readonly string[],\n  ) => void;\n};\n\nconst resolveLabel = (label: I18nLabel, tApp: TFunction): string => {\n  return label(tApp);\n};\n\nexport const BackofficeFilterAction = (\n  props: BackofficeFilterActionProps,\n): JSX.Element | null => {\n  const { t: tApp } = useTranslation();\n  const { t } = useBackofficeReactTranslation();\n  const { filterColumnAliases } = useBackofficeConfig();\n  const { whereKey, value, path, label, listConfig } = props;\n\n  const getContext =\n    useBackofficeListFilterContext as () => ListFilterContext | null;\n  const context = getContext();\n  let config: BackofficeRuntimeResolvedListFacetConfig | null = null;\n\n  if (listConfig != null) {\n    config = listConfig;\n  } else if (context != null) {\n    config = context.config;\n  }\n\n  if (config == null) {\n    return null;\n  }\n\n  let filter = resolveFilterForWhereKey(config, whereKey, path);\n  if (filter == null && path == null) {\n    filter = resolveFilterForColumn(config, whereKey, filterColumnAliases);\n  }\n  if (filter == null || !canFilterValue(filter, value)) {\n    return null;\n  }\n\n  const filterLabel = resolveLabel(filter.label, tApp);\n  const actionLabel =\n    label ??\n    t('filters.actions.filterBy', {\n      label: filterLabel,\n    });\n  const icon = (\n    <SidebarSearchSvg\n      width={14}\n      height={14}\n      className={styles.icon}\n      aria-hidden=\"true\"\n    />\n  );\n\n  if (context != null) {\n    return (\n      <button\n        type=\"button\"\n        className={styles.action}\n        title={actionLabel}\n        aria-label={actionLabel}\n        onClick={() => {\n          context.applyFilter(whereKey, value, path);\n        }}\n      >\n        {icon}\n      </button>\n    );\n  }\n\n  const baseWhere = config.listNavigation.defaults.where;\n  const nextWhere = setWhereValue(baseWhere, whereKey, value, path);\n  const destination = config.listNavigation.encode({ where: nextWhere });\n\n  return (\n    <Link\n      to={{\n        pathname: config.routes.list,\n        filters: destination.filters,\n        query: destination.query,\n      }}\n      className={styles.action}\n      title={actionLabel}\n      aria-label={actionLabel}\n      preloadOnHover=\"code\"\n    >\n      {icon}\n    </Link>\n  );\n};\n\nexport default BackofficeFilterAction;\n"],"mappings":";;;;;;;;;;;AAwCA,IAAM,KAAgB,GAAkB,MAC/B,EAAM,CAAI,GAGN,KACX,MACuB;CACvB,IAAM,EAAE,GAAG,MAAS,EAAe,GAC7B,EAAE,SAAM,EAA8B,GACtC,EAAE,2BAAwB,EAAoB,GAC9C,EAAE,aAAU,UAAO,SAAM,UAAO,kBAAe,GAI/C,IAAU,EAAW,GACvB,IAA0D;CAQ9D,IANI,KAAc,OAEP,KAAW,SACpB,IAAS,EAAQ,UAFjB,IAAS,GAKP,KAAU,MACZ,OAAO;CAGT,IAAI,IAAS,EAAyB,GAAQ,GAAU,CAAI;CAI5D,IAHI,KAAU,QAAQ,KAAQ,SAC5B,IAAS,EAAuB,GAAQ,GAAU,CAAmB,IAEnE,KAAU,QAAQ,CAAC,EAAe,GAAQ,CAAK,GACjD,OAAO;CAGT,IAAM,IAAc,EAAa,EAAO,OAAO,CAAI,GAC7C,IACJ,KACA,EAAE,4BAA4B,EAC5B,OAAO,EACT,CAAC,GACG,IACJ,kBAAC,GAAD;EACE,OAAO;EACP,QAAQ;EACR,WAAW;EACX,eAAY;CACb,CAAA;CAGH,IAAI,KAAW,MACb,OACE,kBAAC,UAAD;EACE,MAAK;EACL,WAAW;EACX,OAAO;EACP,cAAY;EACZ,eAAe;GACb,EAAQ,YAAY,GAAU,GAAO,CAAI;EAC3C;EAEC,UAAA;CACK,CAAA;CAIZ,IAAM,IAAY,EAAO,eAAe,SAAS,OAC3C,IAAY,EAAc,GAAW,GAAU,GAAO,CAAI,GAC1D,IAAc,EAAO,eAAe,OAAO,EAAE,OAAO,EAAU,CAAC;CAErE,OACE,kBAAC,GAAD;EACE,IAAI;GACF,UAAU,EAAO,OAAO;GACxB,SAAS,EAAY;GACrB,OAAO,EAAY;EACrB;EACA,WAAW;EACX,OAAO;EACP,cAAY;EACZ,gBAAe;EAEd,UAAA;CACG,CAAA;AAEV"}