@plumile/backoffice-react 0.1.132 → 0.1.140

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

@@ -1,37 +1,29 @@
 import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
-import { BackofficeDetailSection as t } from "./BackofficeDetailSection.js";
-import { eventMeta as n } from "./backofficeLifecycleTimelineSection.css.js";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { AuditTimeline as a } from "@plumile/ui/backoffice/organisms/audit_timeline/AuditTimeline.js";
+import { jsx as t } from "react/jsx-runtime";
+import { BackofficeDetailSection as n } from "@plumile/ui/backoffice/molecules/backoffice_detail_section/BackofficeDetailSection.js";
+import { AuditTimeline as r } from "@plumile/ui/backoffice/organisms/audit_timeline/AuditTimeline.js";
 //#region src/components/backoffice/detail/BackofficeLifecycleTimelineSection.tsx
-var o = ({ title: o, description: s, events: c, emptyLabel: l }) => {
-	let { t: u } = e();
-	return c.length === 0 ? /* @__PURE__ */ r(t, {
-		title: o,
-		description: s,
-		children: l ?? u("common.notAvailable")
-	}) : /* @__PURE__ */ r(t, {
-		title: o,
-		description: s,
-		children: /* @__PURE__ */ r(a, { events: c.map((e) => {
-			let t = null;
-			return (e.actor != null || e.payload != null) && (t = /* @__PURE__ */ i("span", {
-				className: n,
-				children: [e.actor != null && /* @__PURE__ */ r("span", {
-					className: "txvbqb19cb",
-					children: e.actor
-				}), e.payload]
-			})), {
-				id: e.id,
-				title: e.label,
-				time: e.timestamp,
-				description: e.description,
-				meta: t
-			};
-		}) })
+var i = ({ title: i, description: a, events: o, emptyLabel: s }) => {
+	let { t: c } = e();
+	return o.length === 0 ? /* @__PURE__ */ t(n, {
+		title: i,
+		description: a,
+		children: s ?? c("common.notAvailable")
+	}) : /* @__PURE__ */ t(n, {
+		title: i,
+		description: a,
+		children: /* @__PURE__ */ t(r, { events: o.map((e) => ({
+			id: e.id,
+			title: e.label,
+			time: e.timestamp,
+			description: e.description,
+			actor: e.actor,
+			details: e.payload,
+			tone: e.tone
+		})) })
 	});
 };
 //#endregion
-export { o as BackofficeLifecycleTimelineSection, o as default };
+export { i as BackofficeLifecycleTimelineSection, i as default };
 
 //# sourceMappingURL=BackofficeLifecycleTimelineSection.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BackofficeLifecycleTimelineSection.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeLifecycleTimelineSection.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport { AuditTimeline } from '@plumile/ui/backoffice/organisms/audit_timeline/AuditTimeline.js';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport { BackofficeDetailSection } from './BackofficeDetailSection.js';\nimport * as styles from './backofficeLifecycleTimelineSection.css.js';\n\nexport type BackofficeLifecycleEventTone =\n  | 'neutral'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger';\n\nexport type BackofficeLifecycleEvent = {\n  readonly id: string;\n  readonly label: string;\n  readonly timestamp?: ReactNode;\n  readonly description?: ReactNode;\n  readonly actor?: ReactNode;\n  readonly tone?: BackofficeLifecycleEventTone;\n  readonly payload?: ReactNode;\n};\n\nexport type BackofficeLifecycleTimelineSectionProps = {\n  readonly title: string;\n  readonly description?: string;\n  readonly events: readonly BackofficeLifecycleEvent[];\n  readonly emptyLabel?: string;\n};\n\nexport const BackofficeLifecycleTimelineSection = ({\n  title,\n  description,\n  events,\n  emptyLabel,\n}: BackofficeLifecycleTimelineSectionProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n\n  if (events.length === 0) {\n    return (\n      <BackofficeDetailSection title={title} description={description}>\n        {emptyLabel ?? t('common.notAvailable')}\n      </BackofficeDetailSection>\n    );\n  }\n\n  return (\n    <BackofficeDetailSection title={title} description={description}>\n      <AuditTimeline\n        events={events.map((event) => {\n          let meta: ReactNode = null;\n          if (event.actor != null || event.payload != null) {\n            meta = (\n              <span className={styles.eventMeta}>\n                {event.actor != null && (\n                  <span className={styles.actor}>{event.actor}</span>\n                )}\n                {event.payload}\n              </span>\n            );\n          }\n\n          return {\n            id: event.id,\n            title: event.label,\n            time: event.timestamp,\n            description: event.description,\n            meta,\n          };\n        })}\n      />\n    </BackofficeDetailSection>\n  );\n};\n\nexport default BackofficeLifecycleTimelineSection;\n"],"mappings":";;;;;;AA+BA,IAAa,KAAsC,EACjD,UACA,gBACA,WACA,oBAC0D;CAC1D,IAAM,EAAE,SAAM,GAA+B;CAU7C,OARI,EAAO,WAAW,IAElB,kBAAC,GAAD;EAAgC;EAAoB;YACjD,KAAc,EAAE,sBAAsB;EACf,CAAA,GAK5B,kBAAC,GAAD;EAAgC;EAAoB;YAClD,kBAAC,GAAD,EACE,QAAQ,EAAO,KAAK,MAAU;GAC5B,IAAI,IAAkB;GAYtB,QAXI,EAAM,SAAS,QAAQ,EAAM,WAAW,UAC1C,IACE,kBAAC,QAAD;IAAM,WAAW;cAAjB,CACG,EAAM,SAAS,QACd,kBAAC,QAAD;KAAM,WAAW;eAAe,EAAM;KAAa,CAAA,EAEpD,EAAM,QACF;QAIJ;IACL,IAAI,EAAM;IACV,OAAO,EAAM;IACb,MAAM,EAAM;IACZ,aAAa,EAAM;IACnB;IACD;IACD,EACF,CAAA;EACsB,CAAA"}
+{"version":3,"file":"BackofficeLifecycleTimelineSection.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeLifecycleTimelineSection.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport { BackofficeDetailSection } from '@plumile/ui/backoffice/molecules/backoffice_detail_section/BackofficeDetailSection.js';\nimport { AuditTimeline } from '@plumile/ui/backoffice/organisms/audit_timeline/AuditTimeline.js';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\n\nexport type BackofficeLifecycleEventTone =\n  | 'neutral'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger';\n\nexport type BackofficeLifecycleEvent = {\n  readonly id: string;\n  readonly label: string;\n  readonly timestamp?: ReactNode;\n  readonly description?: ReactNode;\n  readonly actor?: ReactNode;\n  readonly tone?: BackofficeLifecycleEventTone;\n  readonly payload?: ReactNode;\n};\n\nexport type BackofficeLifecycleTimelineSectionProps = {\n  readonly title: string;\n  readonly description?: string;\n  readonly events: readonly BackofficeLifecycleEvent[];\n  readonly emptyLabel?: string;\n};\n\nexport const BackofficeLifecycleTimelineSection = ({\n  title,\n  description,\n  events,\n  emptyLabel,\n}: BackofficeLifecycleTimelineSectionProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n\n  if (events.length === 0) {\n    return (\n      <BackofficeDetailSection title={title} description={description}>\n        {emptyLabel ?? t('common.notAvailable')}\n      </BackofficeDetailSection>\n    );\n  }\n\n  return (\n    <BackofficeDetailSection title={title} description={description}>\n      <AuditTimeline\n        events={events.map((event) => {\n          return {\n            id: event.id,\n            title: event.label,\n            time: event.timestamp,\n            description: event.description,\n            actor: event.actor,\n            details: event.payload,\n            tone: event.tone,\n          };\n        })}\n      />\n    </BackofficeDetailSection>\n  );\n};\n\nexport default BackofficeLifecycleTimelineSection;\n"],"mappings":";;;;;AA8BA,IAAa,KAAsC,EACjD,UACA,gBACA,WACA,oBAC0D;CAC1D,IAAM,EAAE,SAAM,GAA+B;CAU7C,OARI,EAAO,WAAW,IAElB,kBAAC,GAAD;EAAgC;EAAoB;YACjD,KAAc,EAAE,sBAAsB;EACf,CAAA,GAK5B,kBAAC,GAAD;EAAgC;EAAoB;YAClD,kBAAC,GAAD,EACE,QAAQ,EAAO,KAAK,OACX;GACL,IAAI,EAAM;GACV,OAAO,EAAM;GACb,MAAM,EAAM;GACZ,aAAa,EAAM;GACnB,OAAO,EAAM;GACb,SAAS,EAAM;GACf,MAAM,EAAM;GACb,EACD,EACF,CAAA;EACsB,CAAA"}

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

@@ -1,22 +1,17 @@
 import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
-import { root as t, value as n } from "./backofficeReferenceValue.css.js";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Tag as a } from "@plumile/ui/backoffice/atoms/tag/Tag.js";
+import { jsx as t } from "react/jsx-runtime";
+import { BackofficeReferenceValue as n } from "@plumile/ui/backoffice/molecules/backoffice_reference_value/BackofficeReferenceValue.js";
 //#region src/components/backoffice/detail/BackofficeReferenceValue.tsx
-var o = ({ kind: o, value: s, emptyLabel: c }) => {
-	let { t: l } = e();
-	return /* @__PURE__ */ i("span", {
-		className: t,
-		children: [/* @__PURE__ */ r(a, {
-			tone: "neutral",
-			children: o
-		}), /* @__PURE__ */ r("span", {
-			className: n,
-			children: s ?? c ?? l("common.notAvailable")
-		})]
+var r = ({ kind: r, value: i, emptyLabel: a, className: o }) => {
+	let { t: s } = e();
+	return /* @__PURE__ */ t(n, {
+		kind: r,
+		value: i,
+		emptyLabel: a ?? s("common.notAvailable"),
+		className: o
 	});
 };
 //#endregion
-export { o as BackofficeReferenceValue, o as default };
+export { r as BackofficeReferenceValue, r as default };
 
 //# sourceMappingURL=BackofficeReferenceValue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BackofficeReferenceValue.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeReferenceValue.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport { Tag } from '@plumile/ui/backoffice/atoms/tag/Tag.js';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport * as styles from './backofficeReferenceValue.css.js';\n\nexport type BackofficeReferenceValueProps = {\n  readonly kind: string;\n  readonly value: ReactNode | null | undefined;\n  readonly emptyLabel?: string;\n};\n\nexport const BackofficeReferenceValue = ({\n  kind,\n  value,\n  emptyLabel,\n}: BackofficeReferenceValueProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n\n  return (\n    <span className={styles.root}>\n      <Tag tone=\"neutral\">{kind}</Tag>\n      <span className={styles.value}>\n        {value ?? emptyLabel ?? t('common.notAvailable')}\n      </span>\n    </span>\n  );\n};\n\nexport default BackofficeReferenceValue;\n"],"mappings":";;;;;AAYA,IAAa,KAA4B,EACvC,SACA,OAAA,GACA,oBACgD;CAChD,IAAM,EAAE,SAAM,GAA+B;CAE7C,OACE,kBAAC,QAAD;EAAM,WAAW;YAAjB,CACE,kBAAC,GAAD;GAAK,MAAK;aAAW;GAAW,CAAA,EAChC,kBAAC,QAAD;GAAM,WAAW;aACd,KAAS,KAAc,EAAE,sBAAsB;GAC3C,CAAA,CACF"}
+{"version":3,"file":"BackofficeReferenceValue.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeReferenceValue.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport { BackofficeReferenceValue as UiBackofficeReferenceValue } from '@plumile/ui/backoffice/molecules/backoffice_reference_value/BackofficeReferenceValue.js';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\n\nexport type BackofficeReferenceValueProps = {\n  readonly kind: string;\n  readonly value: ReactNode | null | undefined;\n  readonly emptyLabel?: string;\n  readonly className?: string;\n};\n\nexport const BackofficeReferenceValue = ({\n  kind,\n  value,\n  emptyLabel,\n  className,\n}: BackofficeReferenceValueProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n\n  return (\n    <UiBackofficeReferenceValue\n      kind={kind}\n      value={value}\n      emptyLabel={emptyLabel ?? t('common.notAvailable')}\n      className={className}\n    />\n  );\n};\n\nexport default BackofficeReferenceValue;\n"],"mappings":";;;;AAYA,IAAa,KAA4B,EACvC,SACA,UACA,eACA,mBACgD;CAChD,IAAM,EAAE,SAAM,GAA+B;CAE7C,OACE,kBAAC,GAAD;EACQ;EACC;EACP,YAAY,KAAc,EAAE,sBAAsB;EACvC;EACX,CAAA"}

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

@@ -1,37 +1,37 @@
 import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
-import { BackofficeDetailSection as t } from "./BackofficeDetailSection.js";
-import { count as n, grid as r, item as i, label as a } from "./backofficeRelationsSummaryGrid.css.js";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
-import l from "@plumile/router/routing/Link.js";
+import { count as t, grid as n, item as r, label as i } from "./backofficeRelationsSummaryGrid.css.js";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import c from "@plumile/router/routing/Link.js";
+import { BackofficeDetailSection as l } from "@plumile/ui/backoffice/molecules/backoffice_detail_section/BackofficeDetailSection.js";
 //#region src/components/backoffice/detail/BackofficeRelationsSummaryGrid.tsx
 var u = ({ title: u, items: d }) => {
 	let { t: f } = e();
-	return d.length === 0 ? null : /* @__PURE__ */ s(t, {
+	return d.length === 0 ? null : /* @__PURE__ */ o(l, {
 		title: u,
-		children: /* @__PURE__ */ s("div", {
-			className: r,
+		children: /* @__PURE__ */ o("div", {
+			className: n,
 			children: d.map((e) => {
-				let t = e.count ?? f("common.notAvailable"), r = /* @__PURE__ */ c(o, { children: [
-					/* @__PURE__ */ s("span", {
-						className: a,
+				let n = e.count ?? f("common.notAvailable"), l = /* @__PURE__ */ s(a, { children: [
+					/* @__PURE__ */ o("span", {
+						className: i,
 						children: e.label
 					}),
-					/* @__PURE__ */ s("span", {
-						className: n,
-						children: t
+					/* @__PURE__ */ o("span", {
+						className: t,
+						children: n
 					}),
-					e.description != null && /* @__PURE__ */ s("span", {
+					e.description != null && /* @__PURE__ */ o("span", {
 						className: "txvbqb9j txvbqb19cb txvbqbutu",
 						children: e.description
 					})
 				] });
-				return e.href == null ? /* @__PURE__ */ s("div", {
-					className: i,
-					children: r
-				}, e.id) : /* @__PURE__ */ s(l, {
-					className: i,
+				return e.href == null ? /* @__PURE__ */ o("div", {
+					className: r,
+					children: l
+				}, e.id) : /* @__PURE__ */ o(c, {
+					className: r,
 					to: e.href,
-					children: r
+					children: l
 				}, e.id);
 			})
 		})

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';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport { BackofficeDetailSection } from './BackofficeDetailSection.js';\nimport type { BackofficeKpiTone } from './BackofficeKpiStrip.js';\nimport * as styles from './backofficeRelationsSummaryGrid.css.js';\n\nexport type BackofficeRelationSummaryItem = {\n  readonly id: string;\n  readonly label: string;\n  readonly count?: number | null;\n  readonly href?: string;\n  readonly description?: ReactNode;\n  readonly tone?: BackofficeKpiTone;\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 className={styles.item} key={item.id} to={item.href}>\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,GAA+B;CAM7C,OAJI,EAAM,WAAW,IACZ,OAIP,kBAAC,GAAD;EAAgC;YAC9B,kBAAC,OAAD;GAAK,WAAW;aACb,EAAM,KAAK,MAAS;IACnB,IAAM,IAAY,EAAK,SAAS,EAAE,sBAAsB,EAClD,IACJ,kBAAA,GAAA,EAAA,UAAA;KACE,kBAAC,QAAD;MAAM,WAAW;gBAAe,EAAK;MAAa,CAAA;KAClD,kBAAC,QAAD;MAAM,WAAW;gBAAe;MAAiB,CAAA;KAChD,EAAK,eAAe,QACnB,kBAAC,QAAD;MAAM,WAAW;gBAAqB,EAAK;MAAmB,CAAA;KAE/D,EAAA,CAAA;IAWL,OARI,EAAK,QAAQ,OAEb,kBAAC,OAAD;KAAK,WAAW;eACb;KACG,EAF4B,EAAK,GAEjC,GAKR,kBAAC,GAAD;KAAM,WAAW;KAA2B,IAAI,EAAK;eAClD;KACI,EAF4B,EAAK,GAEjC;KAET;GACE,CAAA;EACkB,CAAA"}
+{"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?: number | null;\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 className={styles.item} key={item.id} to={item.href}>\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,GAA+B;CAM7C,OAJI,EAAM,WAAW,IACZ,OAIP,kBAAC,GAAD;EAAgC;YAC9B,kBAAC,OAAD;GAAK,WAAW;aACb,EAAM,KAAK,MAAS;IACnB,IAAM,IAAY,EAAK,SAAS,EAAE,sBAAsB,EAClD,IACJ,kBAAA,GAAA,EAAA,UAAA;KACE,kBAAC,QAAD;MAAM,WAAW;gBAAe,EAAK;MAAa,CAAA;KAClD,kBAAC,QAAD;MAAM,WAAW;gBAAe;MAAiB,CAAA;KAChD,EAAK,eAAe,QACnB,kBAAC,QAAD;MAAM,WAAW;gBAAqB,EAAK;MAAmB,CAAA;KAE/D,EAAA,CAAA;IAWL,OARI,EAAK,QAAQ,OAEb,kBAAC,OAAD;KAAK,WAAW;eACb;KACG,EAF4B,EAAK,GAEjC,GAKR,kBAAC,GAAD;KAAM,WAAW;KAA2B,IAAI,EAAK;eAClD;KACI,EAF4B,EAAK,GAEjC;KAET;GACE,CAAA;EACkB,CAAA"}

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

@@ -1,8 +1,8 @@
-import { BackofficeStatusMetaBadge as e } from "./BackofficeStatusMetaBadge.js";
-import { Fragment as t, jsx as n } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
+import { BackofficeStatusGroup as t } from "@plumile/ui/backoffice/molecules/backoffice_status_group/BackofficeStatusGroup.js";
 //#region src/components/backoffice/detail/BackofficeStatusGroup.tsx
-var r = ({ statuses: r }) => /* @__PURE__ */ n(t, { children: r.map((t) => /* @__PURE__ */ n(e, { status: t }, t.label)) });
+var n = ({ statuses: n }) => /* @__PURE__ */ e(t, { statuses: n });
 //#endregion
-export { r as BackofficeStatusGroup, r as default };
+export { n as BackofficeStatusGroup, n as default };
 
 //# sourceMappingURL=BackofficeStatusGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BackofficeStatusGroup.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeStatusGroup.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport {\n  BackofficeStatusMetaBadge,\n  type BackofficeStatusMeta,\n} from './BackofficeStatusMetaBadge.js';\n\nexport type BackofficeStatusGroupProps = {\n  readonly statuses: readonly BackofficeStatusMeta[];\n};\n\nexport const BackofficeStatusGroup = ({\n  statuses,\n}: BackofficeStatusGroupProps): JSX.Element => {\n  return (\n    <>\n      {statuses.map((status) => {\n        return <BackofficeStatusMetaBadge key={status.label} status={status} />;\n      })}\n    </>\n  );\n};\n\nexport default BackofficeStatusGroup;\n"],"mappings":";;;AAWA,IAAa,KAAyB,EACpC,kBAGE,kBAAA,GAAA,EAAA,UACG,EAAS,KAAK,MACN,kBAAC,GAAD,EAAsD,WAAU,EAAhC,EAAO,MAAyB,CACvE,EACD,CAAA"}
+{"version":3,"file":"BackofficeStatusGroup.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeStatusGroup.tsx"],"sourcesContent":["import { type JSX } from 'react';\nimport { BackofficeStatusGroup as UiBackofficeStatusGroup } from '@plumile/ui/backoffice/molecules/backoffice_status_group/BackofficeStatusGroup.js';\n\nimport { type BackofficeStatusMeta } from './BackofficeStatusMetaBadge.js';\n\nexport type BackofficeStatusGroupProps = {\n  readonly statuses: readonly BackofficeStatusMeta[];\n};\n\nexport const BackofficeStatusGroup = ({\n  statuses,\n}: BackofficeStatusGroupProps): JSX.Element => {\n  return <UiBackofficeStatusGroup statuses={statuses} />;\n};\n\nexport default BackofficeStatusGroup;\n"],"mappings":";;;AASA,IAAa,KAAyB,EACpC,kBAEO,kBAAC,GAAD,EAAmC,aAAY,CAAA"}

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

@@ -1,27 +1,16 @@
 import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
-import { badge as t } from "./backofficeStatusMetaBadge.css.js";
-import { jsx as n } from "react/jsx-runtime";
-import { StatusBadge as r } from "@plumile/ui/backoffice/atoms/status_badge/StatusBadge.js";
+import { jsx as t } from "react/jsx-runtime";
+import { BackofficeStatusMetaBadge as n } from "@plumile/ui/backoffice/molecules/backoffice_status_meta_badge/BackofficeStatusMetaBadge.js";
 //#region src/components/backoffice/detail/BackofficeStatusMetaBadge.tsx
-var i = {
-	neutral: "disabled",
-	info: "info",
-	success: "active",
-	warning: "warning",
-	danger: "error"
-}, a = ({ status: a, emptyLabel: o }) => {
-	let { t: s } = e();
-	return a == null ? /* @__PURE__ */ n(r, {
-		tone: "disabled",
-		className: t,
-		children: o ?? s("common.notAvailable")
-	}) : /* @__PURE__ */ n(r, {
-		tone: i[a.tone],
-		className: t,
-		children: a.label
+var r = ({ status: r, emptyLabel: i, className: a }) => {
+	let { t: o } = e();
+	return /* @__PURE__ */ t(n, {
+		status: r,
+		emptyLabel: i ?? o("common.notAvailable"),
+		className: a
 	});
 };
 //#endregion
-export { a as BackofficeStatusMetaBadge, a as default };
+export { r as BackofficeStatusMetaBadge, r as default };
 
 //# sourceMappingURL=BackofficeStatusMetaBadge.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BackofficeStatusMetaBadge.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeStatusMetaBadge.tsx"],"sourcesContent":["import { type JSX } from 'react';\nimport { StatusBadge } from '@plumile/ui/backoffice/atoms/status_badge/StatusBadge.js';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport * as styles from './backofficeStatusMetaBadge.css.js';\n\nexport type BackofficeStatusMetaTone =\n  | 'neutral'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger';\n\nexport type BackofficeStatusMeta = {\n  readonly label: string;\n  readonly tone: BackofficeStatusMetaTone;\n};\n\nexport type BackofficeStatusMetaBadgeProps = {\n  readonly status: BackofficeStatusMeta | null | undefined;\n  readonly emptyLabel?: string;\n};\n\nconst statusToneMap = {\n  neutral: 'disabled',\n  info: 'info',\n  success: 'active',\n  warning: 'warning',\n  danger: 'error',\n} as const satisfies Record<\n  BackofficeStatusMetaTone,\n  'active' | 'disabled' | 'pending' | 'error' | 'warning' | 'info'\n>;\n\nexport const BackofficeStatusMetaBadge = ({\n  status,\n  emptyLabel,\n}: BackofficeStatusMetaBadgeProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n\n  if (status == null) {\n    return (\n      <StatusBadge tone=\"disabled\" className={styles.badge}>\n        {emptyLabel ?? t('common.notAvailable')}\n      </StatusBadge>\n    );\n  }\n\n  return (\n    <StatusBadge tone={statusToneMap[status.tone]} className={styles.badge}>\n      {status.label}\n    </StatusBadge>\n  );\n};\n\nexport default BackofficeStatusMetaBadge;\n"],"mappings":";;;;;AAuBA,IAAM,IAAgB;CACpB,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,QAAQ;CACT,EAKY,KAA6B,EACxC,WACA,oBACiD;CACjD,IAAM,EAAE,SAAM,GAA+B;CAU7C,OARI,KAAU,OAEV,kBAAC,GAAD;EAAa,MAAK;EAAW,WAAW;YACrC,KAAc,EAAE,sBAAsB;EAC3B,CAAA,GAKhB,kBAAC,GAAD;EAAa,MAAM,EAAc,EAAO;EAAO,WAAW;YACvD,EAAO;EACI,CAAA"}
+{"version":3,"file":"BackofficeStatusMetaBadge.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeStatusMetaBadge.tsx"],"sourcesContent":["import { type JSX } from 'react';\nimport {\n  BackofficeStatusMetaBadge as UiBackofficeStatusMetaBadge,\n  type BackofficeStatusMeta,\n  type BackofficeStatusMetaTone,\n} from '@plumile/ui/backoffice/molecules/backoffice_status_meta_badge/BackofficeStatusMetaBadge.js';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\n\nexport type { BackofficeStatusMeta, BackofficeStatusMetaTone };\n\nexport type BackofficeStatusMetaBadgeProps = {\n  readonly status: BackofficeStatusMeta | null | undefined;\n  readonly emptyLabel?: string;\n  readonly className?: string;\n};\n\nexport const BackofficeStatusMetaBadge = ({\n  status,\n  emptyLabel,\n  className,\n}: BackofficeStatusMetaBadgeProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n\n  return (\n    <UiBackofficeStatusMetaBadge\n      status={status}\n      emptyLabel={emptyLabel ?? t('common.notAvailable')}\n      className={className}\n    />\n  );\n};\n\nexport default BackofficeStatusMetaBadge;\n"],"mappings":";;;;AAiBA,IAAa,KAA6B,EACxC,WACA,eACA,mBACiD;CACjD,IAAM,EAAE,SAAM,GAA+B;CAE7C,OACE,kBAAC,GAAD;EACU;EACR,YAAY,KAAc,EAAE,sBAAsB;EACvC;EACX,CAAA"}

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

@@ -1,37 +1,47 @@
-import { BackofficeKpiStrip as e } from "./BackofficeKpiStrip.js";
-import { jsx as t } from "react/jsx-runtime";
+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";
 //#region src/components/backoffice/detail/BackofficeTokenUsageBreakdown.tsx
-var n = ({ title: n, total: r, input: i, cachedInput: a, output: o, reasoning: s, labels: c }) => /* @__PURE__ */ t(e, {
-	items: [
+var i = ({ title: i, total: a, input: o, cachedInput: s, output: c, reasoning: l, labels: u }) => {
+	let d = [
 		{
 			id: "total",
-			label: n,
-			value: r
+			label: i,
+			value: a
 		},
 		{
 			id: "input",
-			label: c.input,
-			value: i
+			label: u.input,
+			value: o
 		},
 		{
 			id: "cached-input",
-			label: c.cachedInput,
-			value: a
+			label: u.cachedInput,
+			value: s
 		},
 		{
 			id: "output",
-			label: c.output,
-			value: o
+			label: u.output,
+			value: c
 		},
 		{
 			id: "reasoning",
-			label: c.reasoning,
-			value: s
+			label: u.reasoning,
+			value: l
 		}
-	].filter((e) => e.value != null),
-	density: "compact"
-});
+	].filter((e) => e.value != null);
+	return d.length === 0 ? /* @__PURE__ */ t(e, {}) : /* @__PURE__ */ t(r, {
+		density: "compact",
+		minColumn: "180",
+		children: d.map((e) => /* @__PURE__ */ t(n, {
+			label: e.label,
+			value: e.value,
+			density: "compact",
+			tone: "neutral"
+		}, e.id))
+	});
+};
 //#endregion
-export { n as BackofficeTokenUsageBreakdown, n as default };
+export { i as BackofficeTokenUsageBreakdown, i as default };
 
 //# sourceMappingURL=BackofficeTokenUsageBreakdown.js.map

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';\n\nimport { BackofficeKpiStrip } from './BackofficeKpiStrip.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  return <BackofficeKpiStrip items={items} density=\"compact\" />;\n};\n\nexport default BackofficeTokenUsageBreakdown;\n"],"mappings":";;;AAmBA,IAAa,KAAiC,EAC5C,UACA,UACA,UACA,gBACA,WACA,cACA,gBAYO,kBAAC,GAAD;CAA2B,OAVpB;EACZ;GAAE,IAAI;GAAS,OAAO;GAAO,OAAO;GAAO;EAC3C;GAAE,IAAI;GAAS,OAAO,EAAO;GAAO,OAAO;GAAO;EAClD;GAAE,IAAI;GAAgB,OAAO,EAAO;GAAa,OAAO;GAAa;EACrE;GAAE,IAAI;GAAU,OAAO,EAAO;GAAQ,OAAO;GAAQ;EACrD;GAAE,IAAI;GAAa,OAAO,EAAO;GAAW,OAAO;GAAW;EAC/D,CAAC,QAAQ,MACD,EAAK,SAAS,KAGW;CAAO,SAAQ;CAAY,CAAA"}
+{"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;GAAO;EAC3C;GAAE,IAAI;GAAS,OAAO,EAAO;GAAO,OAAO;GAAO;EAClD;GAAE,IAAI;GAAgB,OAAO,EAAO;GAAa,OAAO;GAAa;EACrE;GAAE,IAAI;GAAU,OAAO,EAAO;GAAQ,OAAO;GAAQ;EACrD;GAAE,IAAI;GAAa,OAAO,EAAO;GAAW,OAAO;GAAW;EAC/D,CAAC,QAAQ,MACD,EAAK,SAAS,KACrB;CAMF,OAJI,EAAM,WAAW,IACZ,kBAAA,GAAA,EAAK,CAAA,GAIZ,kBAAC,GAAD;EAAiB,SAAQ;EAAU,WAAU;YAC1C,EAAM,KAAK,MAER,kBAAC,GAAD;GAEE,OAAO,EAAK;GACZ,OAAO,EAAK;GACZ,SAAQ;GACR,MAAK;GACL,EALK,EAAK,GAKV,CAEJ;EACc,CAAA"}

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

@@ -1,76 +1,87 @@
 import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
-import { BackofficeDetailSection as t } from "./BackofficeDetailSection.js";
-import { BackofficeKpiStrip as n } from "./BackofficeKpiStrip.js";
-import { content as r } from "./backofficeUsageCostBreakdown.css.js";
-import { cx as i } from "@plumile/ui/theme/tools.js";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+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";
 //#region src/components/backoffice/detail/BackofficeUsageCostBreakdown.tsx
-var s = ({ title: s, rows: c, totals: l, emptyLabel: u, columnLabels: d }) => {
-	let { t: f } = e(), p = f("common.notAvailable"), m = d ?? {
-		name: f("detail.columns.name"),
-		rawCost: f("detail.columns.rawCost"),
-		markup: f("detail.columns.markup"),
-		charged: f("detail.columns.charged"),
-		events: f("detail.columns.events")
+var c = ({ title: c, rows: l, totals: u, emptyLabel: d, columnLabels: f }) => {
+	let { t: p } = e(), m = p("common.notAvailable"), h = f ?? {
+		name: p("detail.columns.name"),
+		rawCost: p("detail.columns.rawCost"),
+		markup: p("detail.columns.markup"),
+		charged: p("detail.columns.charged"),
+		events: p("detail.columns.events")
 	};
-	return c.length === 0 && (l == null || l.length === 0) ? /* @__PURE__ */ a(t, {
-		title: s,
-		children: u ?? p
-	}) : /* @__PURE__ */ a(t, {
-		title: s,
-		children: /* @__PURE__ */ o("div", {
-			className: r,
-			children: [l != null && l.length > 0 && /* @__PURE__ */ a(n, {
-				items: l,
-				density: "compact"
-			}), c.length > 0 && /* @__PURE__ */ o("div", {
+	return l.length === 0 && (u == null || u.length === 0) ? /* @__PURE__ */ r(a, {
+		title: c,
+		children: d ?? m
+	}) : /* @__PURE__ */ r(a, {
+		title: c,
+		children: /* @__PURE__ */ i("div", {
+			className: t,
+			children: [u != null && u.length > 0 && /* @__PURE__ */ r(s, {
+				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: "txvbqbdrl txvbqbff6",
-				children: [/* @__PURE__ */ o("div", {
+				children: [/* @__PURE__ */ i("div", {
 					className: "_13200uy0 txvbqbdrl txvbqbffj txvbqbey",
 					children: [
-						/* @__PURE__ */ a("span", {
+						/* @__PURE__ */ r("span", {
 							className: "txvbqb96 txvbqb6a txvbqbkxs txvbqb19cb",
-							children: m.name
+							children: h.name
 						}),
-						/* @__PURE__ */ a("span", {
+						/* @__PURE__ */ r("span", {
 							className: "txvbqb96 txvbqb6a txvbqbkxs txvbqb19cb",
-							children: m.rawCost
+							children: h.rawCost
 						}),
-						/* @__PURE__ */ a("span", {
+						/* @__PURE__ */ r("span", {
 							className: "txvbqb96 txvbqb6a txvbqbkxs txvbqb19cb",
-							children: m.markup
+							children: h.markup
 						}),
-						/* @__PURE__ */ a("span", {
+						/* @__PURE__ */ r("span", {
 							className: "txvbqb96 txvbqb6a txvbqbkxs txvbqb19cb",
-							children: m.charged
+							children: h.charged
 						}),
-						/* @__PURE__ */ a("span", {
+						/* @__PURE__ */ r("span", {
 							className: "txvbqb96 txvbqb6a txvbqbkxs txvbqb19cb",
-							children: m.events
+							children: h.events
 						})
 					]
-				}), c.map((e) => /* @__PURE__ */ o("div", {
+				}), l.map((e) => /* @__PURE__ */ i("div", {
 					className: "_13200uy0 txvbqbdrl txvbqbffj txvbqbey",
 					children: [
-						/* @__PURE__ */ a("span", {
-							className: i("txvbqb9j txvbqb19c9 txvbqbutu", "txvbqbfcn"),
+						/* @__PURE__ */ r("span", {
+							className: n("txvbqb9j txvbqb19c9 txvbqbutu", "txvbqbfcn"),
 							children: e.label
 						}),
-						/* @__PURE__ */ a("span", {
+						/* @__PURE__ */ r("span", {
 							className: "txvbqb9j txvbqb19c9 txvbqbutu",
-							children: e.rawCost ?? p
+							children: e.rawCost ?? m
 						}),
-						/* @__PURE__ */ a("span", {
+						/* @__PURE__ */ r("span", {
 							className: "txvbqb9j txvbqb19c9 txvbqbutu",
-							children: e.markup ?? p
+							children: e.markup ?? m
 						}),
-						/* @__PURE__ */ a("span", {
+						/* @__PURE__ */ r("span", {
 							className: "txvbqb9j txvbqb19c9 txvbqbutu",
-							children: e.charged ?? p
+							children: e.charged ?? m
 						}),
-						/* @__PURE__ */ a("span", {
+						/* @__PURE__ */ r("span", {
 							className: "txvbqb9j txvbqb19c9 txvbqbutu",
-							children: e.eventsCount ?? e.quantity ?? p
+							children: e.eventsCount ?? e.quantity ?? m
 						})
 					]
 				}, e.id))]
@@ -79,6 +90,6 @@ var s = ({ title: s, rows: c, totals: l, emptyLabel: u, columnLabels: d }) => {
 	});
 };
 //#endregion
-export { s as BackofficeUsageCostBreakdown, s as default };
+export { c as BackofficeUsageCostBreakdown, c as default };
 
 //# sourceMappingURL=BackofficeUsageCostBreakdown.js.map

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 { cx } from '@plumile/ui/theme/tools.js';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport { BackofficeDetailSection } from './BackofficeDetailSection.js';\nimport {\n  BackofficeKpiStrip,\n  type BackofficeKpiItem,\n} from './BackofficeKpiStrip.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 BackofficeUsageCostBreakdownProps = {\n  readonly title: string;\n  readonly rows: readonly BackofficeUsageCostBreakdownRow[];\n  readonly totals?: readonly BackofficeKpiItem[];\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          <BackofficeKpiStrip items={totals} density=\"compact\" />\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":";;;;;;;AAwCA,IAAa,KAAgC,EAC3C,UACA,SACA,WACA,eACA,sBACoD;CACpD,IAAM,EAAE,SAAM,GAA+B,EACvC,IAAU,EAAE,sBAAsB,EAClC,IAAS,KAAgB;EAC7B,MAAM,EAAE,sBAAsB;EAC9B,SAAS,EAAE,yBAAyB;EACpC,QAAQ,EAAE,wBAAwB;EAClC,SAAS,EAAE,yBAAyB;EACpC,QAAQ,EAAE,wBAAwB;EACnC;CAUD,OARI,EAAK,WAAW,MAAM,KAAU,QAAQ,EAAO,WAAW,KAE1D,kBAAC,GAAD;EAAgC;YAC7B,KAAc;EACS,CAAA,GAK5B,kBAAC,GAAD;EAAgC;YAC9B,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACG,KAAU,QAAQ,EAAO,SAAS,KACjC,kBAAC,GAAD;IAAoB,OAAO;IAAQ,SAAQ;IAAY,CAAA,EAExD,EAAK,SAAS,KACb,kBAAC,OAAD;IAAK,WAAW;cAAhB,CACE,kBAAC,OAAD;KAAK,WAAW;eAAhB;MACE,kBAAC,QAAD;OAAM,WAAW;iBAAgB,EAAO;OAAY,CAAA;MACpD,kBAAC,QAAD;OAAM,WAAW;iBAAgB,EAAO;OAAe,CAAA;MACvD,kBAAC,QAAD;OAAM,WAAW;iBAAgB,EAAO;OAAc,CAAA;MACtD,kBAAC,QAAD;OAAM,WAAW;iBAAgB,EAAO;OAAe,CAAA;MACvD,kBAAC,QAAD;OAAM,WAAW;iBAAgB,EAAO;OAAc,CAAA;MAClD;QACL,EAAK,KAAK,MAEP,kBAAC,OAAD;KAAK,WAAW;eAAhB;MACE,kBAAC,QAAD;OAAM,WAAW,EAAG,iCAAa,YAAa;iBAC3C,EAAI;OACA,CAAA;MACP,kBAAC,QAAD;OAAM,WAAW;iBAAc,EAAI,WAAW;OAAe,CAAA;MAC7D,kBAAC,QAAD;OAAM,WAAW;iBAAc,EAAI,UAAU;OAAe,CAAA;MAC5D,kBAAC,QAAD;OAAM,WAAW;iBAAc,EAAI,WAAW;OAAe,CAAA;MAC7D,kBAAC,QAAD;OAAM,WAAW;iBACd,EAAI,eAAe,EAAI,YAAY;OAC/B,CAAA;MACH;OAV2B,EAAI,GAU/B,CAER,CACE;MAEJ;;EACkB,CAAA"}
+{"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,GAA+B,EACvC,IAAU,EAAE,sBAAsB,EAClC,IAAS,KAAgB;EAC7B,MAAM,EAAE,sBAAsB;EAC9B,SAAS,EAAE,yBAAyB;EACpC,QAAQ,EAAE,wBAAwB;EAClC,SAAS,EAAE,yBAAyB;EACpC,QAAQ,EAAE,wBAAwB;EACnC;CAUD,OARI,EAAK,WAAW,MAAM,KAAU,QAAQ,EAAO,WAAW,KAE1D,kBAAC,GAAD;EAAgC;YAC7B,KAAc;EACS,CAAA,GAK5B,kBAAC,GAAD;EAAgC;YAC9B,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACG,KAAU,QAAQ,EAAO,SAAS,KACjC,kBAAC,GAAD;IAAiB,SAAQ;IAAU,WAAU;cAC1C,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,sBAAsB;KACnC,aAAa,EAAE,wBAAwB;KACvC,EATK,EAAM,GASX,CAEJ;IACc,CAAA,EAEnB,EAAK,SAAS,KACb,kBAAC,OAAD;IAAK,WAAW;cAAhB,CACE,kBAAC,OAAD;KAAK,WAAW;eAAhB;MACE,kBAAC,QAAD;OAAM,WAAW;iBAAgB,EAAO;OAAY,CAAA;MACpD,kBAAC,QAAD;OAAM,WAAW;iBAAgB,EAAO;OAAe,CAAA;MACvD,kBAAC,QAAD;OAAM,WAAW;iBAAgB,EAAO;OAAc,CAAA;MACtD,kBAAC,QAAD;OAAM,WAAW;iBAAgB,EAAO;OAAe,CAAA;MACvD,kBAAC,QAAD;OAAM,WAAW;iBAAgB,EAAO;OAAc,CAAA;MAClD;QACL,EAAK,KAAK,MAEP,kBAAC,OAAD;KAAK,WAAW;eAAhB;MACE,kBAAC,QAAD;OAAM,WAAW,EAAG,iCAAa,YAAa;iBAC3C,EAAI;OACA,CAAA;MACP,kBAAC,QAAD;OAAM,WAAW;iBAAc,EAAI,WAAW;OAAe,CAAA;MAC7D,kBAAC,QAAD;OAAM,WAAW;iBAAc,EAAI,UAAU;OAAe,CAAA;MAC5D,kBAAC,QAAD;OAAM,WAAW;iBAAc,EAAI,WAAW;OAAe,CAAA;MAC7D,kBAAC,QAAD;OAAM,WAAW;iBACd,EAAI,eAAe,EAAI,YAAY;OAC/B,CAAA;MACH;OAV2B,EAAI,GAU/B,CAER,CACE;MAEJ;;EACkB,CAAA"}

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

@@ -1,4 +1,3 @@
-/* empty css                                                             */
 /* empty css                                            */
 //#region src/components/backoffice/detail/backofficeDetailRelationLink.css.ts
 var e = "_93gupm0 qbwcueg qbwcuee txvbqb2g9 txvbqb19c9 txvbqb3f txvbqb7g txvbqb76 txvbqb7t qbwcuef txvbqb1aep txvbqb1b29 qbwcue0 txvbqb1cb0 txvbqb1cws txvbqbyoi txvbqbzm3 txvbqb10jb txvbqbvve txvbqb7h txvbqb75 txvbqbdr8 txvbqbjus txvbqbffj txvbqb1uy txvbqb2et txvbqbik txvbqb1933 txvbqbey txvbqbem txvbqbf65 txvbqbf6j txvbqb1aes txvbqb1b2c", t = "txvbqb9j txvbqbfcn txvbqbt9i txvbqbutu", n = "txvbqbdsb txvbqbey txvbqbfet txvbqbf7y txvbqbt9i", r = "txvbqb96 txvbqb19cb txvbqbutu txvbqb16fn", i = "txvbqbdsb txvbqbey txvbqbjtp txvbqb19cd txvbqb9j txvbqbl11";

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

@@ -1,17 +1,8 @@
 //#region src/components/backoffice/detail/detailPayloadUtils.ts
 function e(e) {
-	if (e == null) return "";
-	try {
-		return `\`\`\`json\n${JSON.stringify(e, null, 2)}\n\`\`\``;
-	} catch {
-		let t = "[unserializable]";
-		return typeof e == "string" ? t = e : (typeof e == "number" || typeof e == "boolean") && (t = String(e)), `\`\`\`\n${t}\n\`\`\``;
-	}
-}
-function t(e) {
 	return e.length === 0 ? "" : e.map((e) => `- ${e}`).join("\n");
 }
 //#endregion
-export { e as formatJsonPayload, t as formatListAsMarkdown };
+export { e as formatListAsMarkdown };
 
 //# sourceMappingURL=detailPayloadUtils.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"detailPayloadUtils.js","names":[],"sources":["../../../../../src/components/backoffice/detail/detailPayloadUtils.ts"],"sourcesContent":["/**\n * Formats a JSON payload into a fenced Markdown code block.\n */\nexport function formatJsonPayload(value: unknown): string {\n  if (value == null) {\n    return '';\n  }\n  try {\n    return `\\`\\`\\`json\\n${JSON.stringify(value, null, 2)}\\n\\`\\`\\``;\n  } catch {\n    let fallback = '[unserializable]';\n    if (typeof value === 'string') {\n      fallback = value;\n    } else if (typeof value === 'number' || typeof value === 'boolean') {\n      fallback = String(value);\n    }\n    return `\\`\\`\\`\\n${fallback}\\n\\`\\`\\``;\n  }\n}\n\n/**\n * Formats a list of strings as a Markdown bullet list.\n */\nexport function formatListAsMarkdown(items: readonly string[]): string {\n  if (items.length === 0) {\n    return '';\n  }\n  return items\n    .map((item) => {\n      return `- ${item}`;\n    })\n    .join('\\n');\n}\n"],"mappings":";AAGA,SAAgB,EAAkB,GAAwB;CACxD,IAAI,KAAS,MACX,OAAO;CAET,IAAI;EACF,OAAO,eAAe,KAAK,UAAU,GAAO,MAAM,EAAE,CAAC;SAC/C;EACN,IAAI,IAAW;EAMf,OALI,OAAO,KAAU,WACnB,IAAW,KACF,OAAO,KAAU,YAAY,OAAO,KAAU,eACvD,IAAW,OAAO,EAAM,GAEnB,WAAW,EAAS;;;AAO/B,SAAgB,EAAqB,GAAkC;CAIrE,OAHI,EAAM,WAAW,IACZ,KAEF,EACJ,KAAK,MACG,KAAK,IACZ,CACD,KAAK,KAAK"}
+{"version":3,"file":"detailPayloadUtils.js","names":[],"sources":["../../../../../src/components/backoffice/detail/detailPayloadUtils.ts"],"sourcesContent":["/**\n * Formats a list of strings as a Markdown bullet list.\n */\nexport function formatListAsMarkdown(items: readonly string[]): string {\n  if (items.length === 0) {\n    return '';\n  }\n  return items\n    .map((item) => {\n      return `- ${item}`;\n    })\n    .join('\\n');\n}\n"],"mappings":";AAGA,SAAgB,EAAqB,GAAkC;CAIrE,OAHI,EAAM,WAAW,IACZ,KAEF,EACJ,KAAK,MACG,KAAK,IACZ,CACD,KAAK,KAAK"}

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 qbwcuej qbwcueh txvbqbdsb txvbqbey txvbqbjtp txvbqb1g5 txvbqb2e3 txvbqb2g9 txvbqb1933 txvbqb19cb txvbqbv txvbqbux3 txvbqb7h txvbqb76 txvbqb7t qbwcuei txvbqb1aey txvbqb1bsa qbwcue4 txvbqb1c2w txvbqb1c9c qbwcue0 txvbqb1cb0 txvbqb1cws txvbqb17hx txvbqbhnc";
+var e = "_1xws1b00 txvbqbdsb txvbqbey txvbqbjtp txvbqb17hx txvbqbhnc txvbqb1g5 txvbqb2e3 txvbqb2g9 txvbqb1933 txvbqbv txvbqbux3 txvbqb7h txvbqb76 txvbqb7t";
 //#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 { ghostIconButton } from '@plumile/ui/theme/styleRecipes.css.js';\n\nexport const actionButton = style([\n  ghostIconButton,\n  sprinkles({\n    width: 6,\n    height: 6,\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 } 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":""}