@plumile/backoffice-react 0.1.109 → 0.1.112

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

@@ -1 +1 @@
-{"version":3,"file":"BackofficeDetailRelationListBlock.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeDetailRelationListBlock.tsx"],"sourcesContent":["import { Suspense, useCallback, useMemo, useState, type JSX } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport * as ReactRelay from 'react-relay';\nimport type { OperationType } from 'relay-runtime';\n\nimport {\n  BACKOFFICE_LIST_REFETCH_POLICY,\n  BACKOFFICE_RELATED_TAB_PAGE_SIZE,\n} from '@plumile/backoffice-core/constants.js';\nimport { setWhereValue } from '@plumile/backoffice-core/filters/where.js';\nimport type {\n  BackofficeListState,\n  BackofficeRuntimeRelationFilterSpec,\n  BackofficeRuntimeResolvedListFacetConfig,\n} from '@plumile/backoffice-core/types.js';\nimport { BackofficeTableSkeleton, InlineBanner } from '@plumile/ui';\n\nimport { buildDataTableColumns } from '../columns/buildDataTableColumns.js';\nimport { useBackofficeLoadMore } from '../../../hooks/useBackofficeLoadMore.js';\nimport { useBackofficeListRefetch } from '../../../hooks/useBackofficeListRefetch.js';\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport { useBackofficeListEntitiesLoader } from '../../../provider/useBackofficeEntityLoader.js';\nimport { BackofficeEntityListScaffold } from '../scaffolds/BackofficeEntityListScaffold.js';\nimport { BackofficeErrorBoundary } from '../errors/BackofficeErrorBoundary.js';\n\nconst { useLazyLoadQuery, usePaginationFragment } = ReactRelay;\n\nexport type BackofficeDetailRelationListBlockProps = {\n  title: string;\n  relation: BackofficeRuntimeRelationFilterSpec;\n  value: string | null;\n};\n\ntype RelationListContentProps = {\n  title: string;\n  config: BackofficeRuntimeResolvedListFacetConfig & {\n    list: Exclude<\n      BackofficeRuntimeResolvedListFacetConfig['list'],\n      { kind: 'records' }\n    >;\n  };\n  relation: BackofficeRuntimeRelationFilterSpec;\n  value: string | null;\n};\n\ntype RelationListBlockBodyProps = {\n  title: string;\n  relation: BackofficeRuntimeRelationFilterSpec;\n  value: string | null;\n};\n\nconst RelationListSkeleton = (): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n\n  return <BackofficeTableSkeleton rows={6} ariaLabel={t('common.loading')} />;\n};\n\nconst RelationListContent = ({\n  title,\n  config,\n  relation,\n  value,\n}: RelationListContentProps): JSX.Element | null => {\n  const { t: tApp } = useTranslation();\n  const { t } = useBackofficeReactTranslation();\n  const listConfig = config.list;\n  const listDefaults = config.listDefaults ??\n    listConfig.defaultState ?? { where: null, sort: null };\n\n  const [state, setState] = useState<BackofficeListState<unknown, string>>({\n    where: listDefaults.where as never,\n    sort: listDefaults.sort ?? null,\n  });\n\n  const relationWhere = useMemo(() => {\n    if (value == null || value.trim() === '') {\n      return null;\n    }\n    return setWhereValue(\n      state.where as Record<string, unknown> | null,\n      relation.whereKey as never,\n      value,\n      relation.path,\n    );\n  }, [relation.path, relation.whereKey, state.where, value]);\n\n  const effectiveWhere = relationWhere ?? (state.where as never);\n  const resolvedSort = state.sort ?? listDefaults.sort;\n  const variablesBase = useMemo(() => {\n    return {\n      where: effectiveWhere as never,\n      sort: resolvedSort as never,\n      count: BACKOFFICE_RELATED_TAB_PAGE_SIZE,\n      cursor: null,\n    };\n  }, [effectiveWhere, resolvedSort]);\n\n  const variables = useMemo(() => {\n    return listConfig.buildQueryVariables(variablesBase);\n  }, [listConfig, variablesBase]);\n\n  const queryData = useLazyLoadQuery<OperationType>(\n    listConfig.query,\n    variables,\n    { fetchPolicy: 'store-or-network' },\n  );\n\n  const {\n    data: fragmentData,\n    loadNext,\n    hasNext,\n    isLoadingNext,\n    refetch,\n  } = usePaginationFragment(listConfig.fragment, queryData as never);\n\n  const connection = listConfig.getConnection(fragmentData);\n  const rows = useMemo(() => {\n    return connection.edges.map((edge) => {\n      return listConfig.toRow(edge.node);\n    });\n  }, [connection.edges, listConfig]);\n\n  const columns = useMemo(() => {\n    return buildDataTableColumns(listConfig.columns, {\n      tApp,\n      t,\n    });\n  }, [listConfig.columns, t, tApp]);\n\n  const getRowId = useCallback(\n    (row: unknown) => {\n      return listConfig.getRowId(row);\n    },\n    [listConfig],\n  );\n\n  const defaults = useMemo(() => {\n    const baseWhere = relationWhere ?? listDefaults.where;\n    return {\n      where: baseWhere,\n      sort: listDefaults.sort,\n      count: BACKOFFICE_RELATED_TAB_PAGE_SIZE,\n      cursor: null,\n    };\n  }, [listDefaults.sort, listDefaults.where, relationWhere]);\n\n  const { onRefresh } = useBackofficeListRefetch({\n    refetch,\n    variables: variablesBase,\n    defaults,\n    fetchPolicy: BACKOFFICE_LIST_REFETCH_POLICY,\n    buildQueryVariables: listConfig.buildQueryVariables,\n  });\n\n  const handleLoadMore = useBackofficeLoadMore({\n    hasNext,\n    isLoadingNext,\n    loadNext,\n    count: BACKOFFICE_RELATED_TAB_PAGE_SIZE,\n  });\n\n  return (\n    <BackofficeEntityListScaffold\n      config={config as never}\n      state={state as never}\n      pushState={(next) => {\n        setState(next);\n      }}\n      header={{ title }}\n      rows={rows}\n      columns={columns as never}\n      getRowId={getRowId}\n      hasNextPage={hasNext}\n      isLoadingMore={isLoadingNext}\n      onLoadMore={handleLoadMore}\n      onRefresh={onRefresh}\n      totalCount={connection.totalCount ?? null}\n      variant=\"embedded\"\n    />\n  );\n};\n\nconst RelationListBlockBody = ({\n  title,\n  relation,\n  value,\n}: RelationListBlockBodyProps): JSX.Element | null => {\n  const { t } = useBackofficeReactTranslation();\n  const relatedEntityIds = useMemo(() => {\n    return [relation.target];\n  }, [relation.target]);\n  const relatedEntitiesState =\n    useBackofficeListEntitiesLoader(relatedEntityIds);\n\n  if (relatedEntitiesState.status === 'loading') {\n    return <BackofficeTableSkeleton rows={6} ariaLabel={t('common.loading')} />;\n  }\n\n  if (relatedEntitiesState.status === 'error') {\n    return (\n      <InlineBanner tone=\"warning\" title={t('relations.unavailable.title')}>\n        {t('relations.unavailable.description')}\n      </InlineBanner>\n    );\n  }\n\n  const config = relatedEntitiesState.modules[relation.target]?.config;\n  if (config == null) {\n    return null;\n  }\n  if (config.list.kind === 'records') {\n    return null;\n  }\n  const connectionConfig = config as RelationListContentProps['config'];\n\n  return (\n    <RelationListContent\n      title={title}\n      config={connectionConfig}\n      relation={relation}\n      value={value}\n    />\n  );\n};\n\nexport const BackofficeDetailRelationListBlock = ({\n  title,\n  relation,\n  value,\n}: BackofficeDetailRelationListBlockProps): JSX.Element => {\n  return (\n    <BackofficeErrorBoundary\n      fallback={() => {\n        return <RelationListSkeleton />;\n      }}\n    >\n      <Suspense fallback={<RelationListSkeleton />}>\n        <RelationListBlockBody\n          title={title}\n          relation={relation}\n          value={value}\n        />\n      </Suspense>\n    </BackofficeErrorBoundary>\n  );\n};\n\nexport default BackofficeDetailRelationListBlock;\n"],"mappings":"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"}
+{"version":3,"file":"BackofficeDetailRelationListBlock.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeDetailRelationListBlock.tsx"],"sourcesContent":["import { Suspense, useCallback, useMemo, useState, type JSX } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport * as ReactRelay from 'react-relay';\nimport type { OperationType } from 'relay-runtime';\n\nimport {\n  BACKOFFICE_LIST_REFETCH_POLICY,\n  BACKOFFICE_RELATED_TAB_PAGE_SIZE,\n} from '@plumile/backoffice-core/constants.js';\nimport { setWhereValue } from '@plumile/backoffice-core/filters/where.js';\nimport type {\n  BackofficeListState,\n  BackofficeRuntimeRelationFilterSpec,\n  BackofficeRuntimeResolvedListFacetConfig,\n} from '@plumile/backoffice-core/types.js';\nimport { BackofficeTableSkeleton } from '@plumile/ui/backoffice/molecules/backoffice_table_skeleton/BackofficeTableSkeleton.js';\nimport { InlineBanner } from '@plumile/ui/backoffice/molecules/inline_banner/InlineBanner.js';\n\nimport { buildDataTableColumns } from '../columns/buildDataTableColumns.js';\nimport { useBackofficeLoadMore } from '../../../hooks/useBackofficeLoadMore.js';\nimport { useBackofficeListRefetch } from '../../../hooks/useBackofficeListRefetch.js';\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport { useBackofficeListEntitiesLoader } from '../../../provider/useBackofficeEntityLoader.js';\nimport { BackofficeEntityListScaffold } from '../scaffolds/BackofficeEntityListScaffold.js';\nimport { BackofficeErrorBoundary } from '../errors/BackofficeErrorBoundary.js';\n\nconst { useLazyLoadQuery, usePaginationFragment } = ReactRelay;\n\nexport type BackofficeDetailRelationListBlockProps = {\n  title: string;\n  relation: BackofficeRuntimeRelationFilterSpec;\n  value: string | null;\n};\n\ntype RelationListContentProps = {\n  title: string;\n  config: BackofficeRuntimeResolvedListFacetConfig & {\n    list: Exclude<\n      BackofficeRuntimeResolvedListFacetConfig['list'],\n      { kind: 'records' }\n    >;\n  };\n  relation: BackofficeRuntimeRelationFilterSpec;\n  value: string | null;\n};\n\ntype RelationListBlockBodyProps = {\n  title: string;\n  relation: BackofficeRuntimeRelationFilterSpec;\n  value: string | null;\n};\n\nconst RelationListSkeleton = (): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n\n  return <BackofficeTableSkeleton rows={6} ariaLabel={t('common.loading')} />;\n};\n\nconst RelationListContent = ({\n  title,\n  config,\n  relation,\n  value,\n}: RelationListContentProps): JSX.Element | null => {\n  const { t: tApp } = useTranslation();\n  const { t } = useBackofficeReactTranslation();\n  const listConfig = config.list;\n  const listDefaults = config.listDefaults ??\n    listConfig.defaultState ?? { where: null, sort: null };\n\n  const [state, setState] = useState<BackofficeListState<unknown, string>>({\n    where: listDefaults.where as never,\n    sort: listDefaults.sort ?? null,\n  });\n\n  const relationWhere = useMemo(() => {\n    if (value == null || value.trim() === '') {\n      return null;\n    }\n    return setWhereValue(\n      state.where as Record<string, unknown> | null,\n      relation.whereKey as never,\n      value,\n      relation.path,\n    );\n  }, [relation.path, relation.whereKey, state.where, value]);\n\n  const effectiveWhere = relationWhere ?? (state.where as never);\n  const resolvedSort = state.sort ?? listDefaults.sort;\n  const variablesBase = useMemo(() => {\n    return {\n      where: effectiveWhere as never,\n      sort: resolvedSort as never,\n      count: BACKOFFICE_RELATED_TAB_PAGE_SIZE,\n      cursor: null,\n    };\n  }, [effectiveWhere, resolvedSort]);\n\n  const variables = useMemo(() => {\n    return listConfig.buildQueryVariables(variablesBase);\n  }, [listConfig, variablesBase]);\n\n  const queryData = useLazyLoadQuery<OperationType>(\n    listConfig.query,\n    variables,\n    { fetchPolicy: 'store-or-network' },\n  );\n\n  const {\n    data: fragmentData,\n    loadNext,\n    hasNext,\n    isLoadingNext,\n    refetch,\n  } = usePaginationFragment(listConfig.fragment, queryData as never);\n\n  const connection = listConfig.getConnection(fragmentData);\n  const rows = useMemo(() => {\n    return connection.edges.map((edge) => {\n      return listConfig.toRow(edge.node);\n    });\n  }, [connection.edges, listConfig]);\n\n  const columns = useMemo(() => {\n    return buildDataTableColumns(listConfig.columns, {\n      tApp,\n      t,\n    });\n  }, [listConfig.columns, t, tApp]);\n\n  const getRowId = useCallback(\n    (row: unknown) => {\n      return listConfig.getRowId(row);\n    },\n    [listConfig],\n  );\n\n  const defaults = useMemo(() => {\n    const baseWhere = relationWhere ?? listDefaults.where;\n    return {\n      where: baseWhere,\n      sort: listDefaults.sort,\n      count: BACKOFFICE_RELATED_TAB_PAGE_SIZE,\n      cursor: null,\n    };\n  }, [listDefaults.sort, listDefaults.where, relationWhere]);\n\n  const { onRefresh } = useBackofficeListRefetch({\n    refetch,\n    variables: variablesBase,\n    defaults,\n    fetchPolicy: BACKOFFICE_LIST_REFETCH_POLICY,\n    buildQueryVariables: listConfig.buildQueryVariables,\n  });\n\n  const handleLoadMore = useBackofficeLoadMore({\n    hasNext,\n    isLoadingNext,\n    loadNext,\n    count: BACKOFFICE_RELATED_TAB_PAGE_SIZE,\n  });\n\n  return (\n    <BackofficeEntityListScaffold\n      config={config as never}\n      state={state as never}\n      pushState={(next) => {\n        setState(next);\n      }}\n      header={{ title }}\n      rows={rows}\n      columns={columns as never}\n      getRowId={getRowId}\n      hasNextPage={hasNext}\n      isLoadingMore={isLoadingNext}\n      onLoadMore={handleLoadMore}\n      onRefresh={onRefresh}\n      totalCount={connection.totalCount ?? null}\n      variant=\"embedded\"\n    />\n  );\n};\n\nconst RelationListBlockBody = ({\n  title,\n  relation,\n  value,\n}: RelationListBlockBodyProps): JSX.Element | null => {\n  const { t } = useBackofficeReactTranslation();\n  const relatedEntityIds = useMemo(() => {\n    return [relation.target];\n  }, [relation.target]);\n  const relatedEntitiesState =\n    useBackofficeListEntitiesLoader(relatedEntityIds);\n\n  if (relatedEntitiesState.status === 'loading') {\n    return <BackofficeTableSkeleton rows={6} ariaLabel={t('common.loading')} />;\n  }\n\n  if (relatedEntitiesState.status === 'error') {\n    return (\n      <InlineBanner tone=\"warning\" title={t('relations.unavailable.title')}>\n        {t('relations.unavailable.description')}\n      </InlineBanner>\n    );\n  }\n\n  const config = relatedEntitiesState.modules[relation.target]?.config;\n  if (config == null) {\n    return null;\n  }\n  if (config.list.kind === 'records') {\n    return null;\n  }\n  const connectionConfig = config as RelationListContentProps['config'];\n\n  return (\n    <RelationListContent\n      title={title}\n      config={connectionConfig}\n      relation={relation}\n      value={value}\n    />\n  );\n};\n\nexport const BackofficeDetailRelationListBlock = ({\n  title,\n  relation,\n  value,\n}: BackofficeDetailRelationListBlockProps): JSX.Element => {\n  return (\n    <BackofficeErrorBoundary\n      fallback={() => {\n        return <RelationListSkeleton />;\n      }}\n    >\n      <Suspense fallback={<RelationListSkeleton />}>\n        <RelationListBlockBody\n          title={title}\n          relation={relation}\n          value={value}\n        />\n      </Suspense>\n    </BackofficeErrorBoundary>\n  );\n};\n\nexport default BackofficeDetailRelationListBlock;\n"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
-import { DataTable as e } from "@plumile/ui";
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
+import { DataTable as t } from "@plumile/ui/components/data-table/DataTable.js";
 //#region src/components/backoffice/detail/BackofficeDetailTable.tsx
-var n = (n) => /* @__PURE__ */ t(e, { ...n });
+var n = (n) => /* @__PURE__ */ e(t, { ...n });
 //#endregion
 export { n as BackofficeDetailTable, n as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"BackofficeDetailTable.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeDetailTable.tsx"],"sourcesContent":["import { type JSX } from 'react';\nimport { DataTable, type DataTableProps } from '@plumile/ui';\n\nexport type BackofficeDetailTableProps<Row> = DataTableProps<Row>;\n\nexport const BackofficeDetailTable = <Row,>(\n  props: BackofficeDetailTableProps<Row>,\n): JSX.Element => {\n  return <DataTable {...props} />;\n};\n\nexport default BackofficeDetailTable;\n"],"mappings":";;;AAKA,IAAa,KACX,MAEO,kBAAC,GAAD,EAAW,GAAI,GAAS,CAAA"}
+{"version":3,"file":"BackofficeDetailTable.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeDetailTable.tsx"],"sourcesContent":["import { type JSX } from 'react';\nimport {\n  DataTable,\n  type DataTableProps,\n} from '@plumile/ui/components/data-table/DataTable.js';\n\nexport type BackofficeDetailTableProps<Row> = DataTableProps<Row>;\n\nexport const BackofficeDetailTable = <Row,>(\n  props: BackofficeDetailTableProps<Row>,\n): JSX.Element => {\n  return <DataTable {...props} />;\n};\n\nexport default BackofficeDetailTable;\n"],"mappings":";;;AAQA,IAAa,KACX,MAEO,kBAAC,GAAD,EAAW,GAAI,GAAS,CAAA"}

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

@@ -1,13 +1,13 @@
 import { container as e, value as t } from "./backofficeDetailTaggedValue.css.js";
-import { Tag as n } from "@plumile/ui";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Tag as i } from "@plumile/ui/backoffice/atoms/tag/Tag.js";
 //#region src/components/backoffice/detail/BackofficeDetailTaggedValue.tsx
-var a = ({ tag: a, value: o }) => /* @__PURE__ */ i("span", {
+var a = ({ tag: a, value: o }) => /* @__PURE__ */ r("span", {
 	className: e,
-	children: [a != null && /* @__PURE__ */ r(n, {
+	children: [a != null && /* @__PURE__ */ n(i, {
 		tone: a.tone,
 		children: a.label
-	}), /* @__PURE__ */ r("span", {
+	}), /* @__PURE__ */ n("span", {
 		className: t,
 		children: o
 	})]

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

@@ -1 +1 @@
-{"version":3,"file":"BackofficeDetailTaggedValue.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeDetailTaggedValue.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport type { BackofficeBadgeTone } from '@plumile/backoffice-core/types.js';\nimport { Tag } from '@plumile/ui';\n\nimport * as styles from './backofficeDetailTaggedValue.css.js';\n\nexport type BackofficeDetailTaggedValueProps = {\n  tag: { label: string; tone?: BackofficeBadgeTone } | null;\n  value: ReactNode;\n};\n\nexport const BackofficeDetailTaggedValue = ({\n  tag,\n  value,\n}: BackofficeDetailTaggedValueProps): JSX.Element => {\n  return (\n    <span className={styles.container}>\n      {tag != null && <Tag tone={tag.tone}>{tag.label}</Tag>}\n      <span className={styles.value}>{value}</span>\n    </span>\n  );\n};\n\nexport default BackofficeDetailTaggedValue;\n"],"mappings":";;;;AAYA,IAAa,KAA+B,EAC1C,QACA,OAAA,QAGE,kBAAC,QAAD;CAAM,WAAW;WAAjB,CACG,KAAO,QAAQ,kBAAC,GAAD;EAAK,MAAM,EAAI;YAAO,EAAI;EAAY,CAAA,EACtD,kBAAC,QAAD;EAAM,WAAW;YAAe;EAAa,CAAA,CACxC"}
+{"version":3,"file":"BackofficeDetailTaggedValue.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeDetailTaggedValue.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport type { BackofficeBadgeTone } from '@plumile/backoffice-core/types.js';\nimport { Tag } from '@plumile/ui/backoffice/atoms/tag/Tag.js';\n\nimport * as styles from './backofficeDetailTaggedValue.css.js';\n\nexport type BackofficeDetailTaggedValueProps = {\n  tag: { label: string; tone?: BackofficeBadgeTone } | null;\n  value: ReactNode;\n};\n\nexport const BackofficeDetailTaggedValue = ({\n  tag,\n  value,\n}: BackofficeDetailTaggedValueProps): JSX.Element => {\n  return (\n    <span className={styles.container}>\n      {tag != null && <Tag tone={tag.tone}>{tag.label}</Tag>}\n      <span className={styles.value}>{value}</span>\n    </span>\n  );\n};\n\nexport default BackofficeDetailTaggedValue;\n"],"mappings":";;;;AAYA,IAAa,KAA+B,EAC1C,QACA,OAAA,QAGE,kBAAC,QAAD;CAAM,WAAW;WAAjB,CACG,KAAO,QAAQ,kBAAC,GAAD;EAAK,MAAM,EAAI;YAAO,EAAI;EAAY,CAAA,EACtD,kBAAC,QAAD;EAAM,WAAW;YAAe;EAAa,CAAA,CACxC"}

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

@@ -1,10 +1,12 @@
 import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
 import { BackofficeStatusMetaBadge as t } from "./BackofficeStatusMetaBadge.js";
 import { identity as n, root as r, title as i, titleRow as a, top as o } from "./backofficeEntitySummaryHeader.css.js";
-import { Button as s, CopyableText as c, Tag as l } from "@plumile/ui";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Button as l } from "@plumile/ui/atomic/atoms/button/Button.js";
+import { Tag as u } from "@plumile/ui/backoffice/atoms/tag/Tag.js";
+import { CopyableText as d } from "@plumile/ui/backoffice/atoms/copyable_text/CopyableText.js";
 //#region src/components/backoffice/detail/BackofficeEntitySummaryHeader.tsx
-var f = (e) => e === "danger" ? "danger" : e === "neutral" ? "secondary" : "primary", p = (e) => /* @__PURE__ */ u(s, {
+var f = (e) => e === "danger" ? "danger" : e === "neutral" ? "secondary" : "primary", p = (e) => /* @__PURE__ */ s(l, {
 	type: "button",
 	variant: f(e.tone),
 	size: "small",
@@ -13,51 +15,51 @@ var f = (e) => e === "danger" ? "danger" : e === "neutral" ? "secondary" : "prim
 	isLoading: e.loading,
 	onClick: e.onPress,
 	children: e.label
-}, e.id), m = ({ title: s, entityLabel: f, subtitle: m, status: h, meta: g, primaryActions: _, secondaryActions: v }) => {
+}, e.id), m = ({ title: l, entityLabel: f, subtitle: m, status: h, meta: g, primaryActions: _, secondaryActions: v }) => {
 	let { t: y } = e(), b = [..._ ?? [], ...v ?? []];
-	return /* @__PURE__ */ d("header", {
+	return /* @__PURE__ */ c("header", {
 		className: r,
-		children: [/* @__PURE__ */ d("div", {
+		children: [/* @__PURE__ */ c("div", {
 			className: o,
-			children: [/* @__PURE__ */ d("div", {
+			children: [/* @__PURE__ */ c("div", {
 				className: n,
-				children: [/* @__PURE__ */ d("div", {
+				children: [/* @__PURE__ */ c("div", {
 					className: a,
 					children: [
-						/* @__PURE__ */ u("h1", {
+						/* @__PURE__ */ s("h1", {
 							className: i,
-							children: s
+							children: l
 						}),
-						/* @__PURE__ */ u(l, {
+						/* @__PURE__ */ s(u, {
 							tone: "neutral",
 							children: f
 						}),
-						h != null && /* @__PURE__ */ u(t, { status: h })
+						h != null && /* @__PURE__ */ s(t, { status: h })
 					]
-				}), m != null && /* @__PURE__ */ u("div", {
+				}), m != null && /* @__PURE__ */ s("div", {
 					className: "txvbqb8y txvbqbva1 txvbqbl87",
 					children: m
 				})]
-			}), b.length > 0 && /* @__PURE__ */ u("div", {
+			}), b.length > 0 && /* @__PURE__ */ s("div", {
 				className: "txvbqb9ip txvbqbcp txvbqbdp7 txvbqbao7 txvbqbajy",
 				children: b.map(p)
 			})]
-		}), g != null && g.length > 0 && /* @__PURE__ */ u("div", {
+		}), g != null && g.length > 0 && /* @__PURE__ */ s("div", {
 			className: "txvbqb9iy txvbqbaog txvbqbc0g",
 			children: g.map((e) => {
 				let t = e.value;
-				return e.copyValue != null && e.copyValue !== "" && (t = /* @__PURE__ */ u(c, {
+				return e.copyValue != null && e.copyValue !== "" && (t = /* @__PURE__ */ s(d, {
 					value: e.copyValue,
 					copyValue: e.copyValue,
 					truncate: !1,
 					copyLabel: y("common.actions.copy"),
 					copiedLabel: y("common.actions.copied")
-				})), /* @__PURE__ */ d("div", {
+				})), /* @__PURE__ */ c("div", {
 					className: "txvbqb9ip txvbqbai7 txvbqbany txvbqbk5y",
-					children: [/* @__PURE__ */ u("span", {
+					children: [/* @__PURE__ */ s("span", {
 						className: "txvbqb8p txvbqb66 txvbqbefp txvbqbva1",
 						children: e.label
-					}), /* @__PURE__ */ u("span", {
+					}), /* @__PURE__ */ s("span", {
 						className: "txvbqb8y txvbqbv9z txvbqbl87",
 						children: t
 					})]

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, CopyableText, Tag } from '@plumile/ui';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport {\n  BackofficeStatusMetaBadge,\n  type BackofficeStatusMetaTone,\n} from './BackofficeStatusMetaBadge.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":";;;;;;AA2CA,IAAM,KACJ,MAEI,MAAS,WACJ,WAEL,MAAS,YACJ,cAEF,WAGH,KACJ,MAGE,kBAAC,GAAD;CAEE,MAAK;CACL,SAAS,EAAqB,EAAO,KAAK;CAC1C,MAAK;CACL,UAAU,EAAO;CACjB,UAAU,EAAO;CACjB,WAAW,EAAO;CAClB,SAAS,EAAO;WAEf,EAAO;CACD,EAVF,EAAO,GAUL,EAIA,KAAiC,EAC5C,OAAA,GACA,gBACA,UAAA,GACA,WACA,MAAA,GACA,mBACA,0BACqD;CACrD,IAAM,EAAE,SAAM,GAA+B,EACvC,IAAU,CAAC,GAAI,KAAkB,EAAE,EAAG,GAAI,KAAoB,EAAE,CAAE;CAExE,OACE,kBAAC,UAAD;EAAQ,WAAW;YAAnB,CACE,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,kBAAC,OAAD;IAAK,WAAW;cAAhB,CACE,kBAAC,OAAD;KAAK,WAAW;eAAhB;MACE,kBAAC,MAAD;OAAI,WAAW;iBAAe;OAAW,CAAA;MACzC,kBAAC,GAAD;OAAK,MAAK;iBAAW;OAAkB,CAAA;MACtC,KAAU,QAAQ,kBAAC,GAAD,EAAmC,WAAU,CAAA;MAC5D;QACL,KAAY,QACX,kBAAC,OAAD;KAAK,WAAW;eAAkB;KAAe,CAAA,CAE/C;OACL,EAAQ,SAAS,KAChB,kBAAC,OAAD;IAAK,WAAW;cAAiB,EAAQ,IAAI,EAAa;IAAO,CAAA,CAE/D;MACL,KAAQ,QAAQ,EAAK,SAAS,KAC7B,kBAAC,OAAD;GAAK,WAAW;aACb,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,sBAAsB;KACnC,aAAa,EAAE,wBAAwB;KACvC,CAAA,GAKJ,kBAAC,OAAD;KAAmB,WAAW;eAA9B,CACE,kBAAC,QAAD;MAAM,WAAW;gBAAmB,EAAK;MAAa,CAAA,EACtD,kBAAC,QAAD;MAAM,WAAW;gBAAmB;MAAiB,CAAA,CACjD;OAHI,EAAK,GAGT;KAER;GACE,CAAA,CAED"}
+{"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';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport {\n  BackofficeStatusMetaBadge,\n  type BackofficeStatusMetaTone,\n} from './BackofficeStatusMetaBadge.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,KAAK;CAC1C,MAAK;CACL,UAAU,EAAO;CACjB,UAAU,EAAO;CACjB,WAAW,EAAO;CAClB,SAAS,EAAO;WAEf,EAAO;CACD,EAVF,EAAO,GAUL,EAIA,KAAiC,EAC5C,OAAA,GACA,gBACA,UAAA,GACA,WACA,MAAA,GACA,mBACA,0BACqD;CACrD,IAAM,EAAE,SAAM,GAA+B,EACvC,IAAU,CAAC,GAAI,KAAkB,EAAE,EAAG,GAAI,KAAoB,EAAE,CAAE;CAExE,OACE,kBAAC,UAAD;EAAQ,WAAW;YAAnB,CACE,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,kBAAC,OAAD;IAAK,WAAW;cAAhB,CACE,kBAAC,OAAD;KAAK,WAAW;eAAhB;MACE,kBAAC,MAAD;OAAI,WAAW;iBAAe;OAAW,CAAA;MACzC,kBAAC,GAAD;OAAK,MAAK;iBAAW;OAAkB,CAAA;MACtC,KAAU,QAAQ,kBAAC,GAAD,EAAmC,WAAU,CAAA;MAC5D;QACL,KAAY,QACX,kBAAC,OAAD;KAAK,WAAW;eAAkB;KAAe,CAAA,CAE/C;OACL,EAAQ,SAAS,KAChB,kBAAC,OAAD;IAAK,WAAW;cAAiB,EAAQ,IAAI,EAAa;IAAO,CAAA,CAE/D;MACL,KAAQ,QAAQ,EAAK,SAAS,KAC7B,kBAAC,OAAD;GAAK,WAAW;aACb,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,sBAAsB;KACnC,aAAa,EAAE,wBAAwB;KACvC,CAAA,GAKJ,kBAAC,OAAD;KAAmB,WAAW;eAA9B,CACE,kBAAC,QAAD;MAAM,WAAW;gBAAmB,EAAK;MAAa,CAAA,EACtD,kBAAC,QAAD;MAAM,WAAW;gBAAmB;MAAiB,CAAA,CACjD;OAHI,EAAK,GAGT;KAER;GACE,CAAA,CAED"}

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

@@ -1,26 +1,29 @@
 import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
 import { card as t, compactGroup as n, group as r, value as i } from "./backofficeKpiStrip.css.js";
-import { CopyableText as a, MetricCard as o, MetricTileGroup as s, cx as c } from "@plumile/ui";
-import { jsx as l } from "react/jsx-runtime";
+import { cx as a } from "@plumile/ui/theme/tools.js";
+import { jsx as o } from "react/jsx-runtime";
+import { CopyableText as s } from "@plumile/ui/backoffice/atoms/copyable_text/CopyableText.js";
+import { MetricCard as c } from "@plumile/ui/components/dashboard/metric_card/MetricCard.js";
+import { MetricTileGroup as l } from "@plumile/ui/components/dashboard/metric_tile_group/MetricTileGroup.js";
 //#region src/components/backoffice/detail/BackofficeKpiStrip.tsx
 var u = ({ items: u, density: d = "comfortable" }) => {
 	let { t: f } = e();
 	if (u.length === 0) return null;
 	let p = r;
-	return d === "compact" && (p = c(r, n)), /* @__PURE__ */ l(s, {
+	return d === "compact" && (p = a(r, n)), /* @__PURE__ */ o(l, {
 		className: p,
 		children: u.map((e) => {
 			let n = e.value;
-			return e.copyValue != null && e.copyValue !== "" && (n = /* @__PURE__ */ l(a, {
+			return e.copyValue != null && e.copyValue !== "" && (n = /* @__PURE__ */ o(s, {
 				value: e.copyValue,
 				copyValue: e.copyValue,
 				truncate: !1,
 				copyLabel: f("common.actions.copy"),
 				copiedLabel: f("common.actions.copied")
-			})), /* @__PURE__ */ l(o, {
+			})), /* @__PURE__ */ o(c, {
 				className: t,
 				label: e.label,
-				value: /* @__PURE__ */ l("span", {
+				value: /* @__PURE__ */ o("span", {
 					className: i,
 					children: n
 				}),

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

@@ -1 +1 @@
-{"version":3,"file":"BackofficeKpiStrip.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeKpiStrip.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport { CopyableText, cx, MetricCard, MetricTileGroup } from '@plumile/ui';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport * as styles from './backofficeKpiStrip.css.js';\n\nexport type BackofficeKpiTone =\n  | 'neutral'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger';\n\nexport type BackofficeKpiItem = {\n  readonly id: string;\n  readonly label: string;\n  readonly value: ReactNode;\n  readonly hint?: ReactNode;\n  readonly tone?: BackofficeKpiTone;\n  readonly copyValue?: string;\n};\n\nexport type BackofficeKpiStripProps = {\n  readonly items: readonly BackofficeKpiItem[];\n  readonly density?: 'compact' | 'comfortable';\n};\n\nexport const BackofficeKpiStrip = ({\n  items,\n  density = 'comfortable',\n}: BackofficeKpiStripProps): JSX.Element | null => {\n  const { t } = useBackofficeReactTranslation();\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  let groupClassName: string | undefined = styles.group;\n  if (density === 'compact') {\n    groupClassName = cx(styles.group, styles.compactGroup);\n  }\n\n  return (\n    <MetricTileGroup className={groupClassName}>\n      {items.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          <MetricCard\n            key={item.id}\n            className={styles.card}\n            label={item.label}\n            value={<span className={styles.value}>{valueNode}</span>}\n            hint={item.hint}\n          />\n        );\n      })}\n    </MetricTileGroup>\n  );\n};\n\nexport default BackofficeKpiStrip;\n"],"mappings":";;;;;AA2BA,IAAa,KAAsB,EACjC,UACA,aAAU,oBACuC;CACjD,IAAM,EAAE,SAAM,GAA+B;CAE7C,IAAI,EAAM,WAAW,GACnB,OAAO;CAGT,IAAI,IAAqC;CAKzC,OAJI,MAAY,cACd,IAAiB,EAAG,GAAc,EAAoB,GAItD,kBAAC,GAAD;EAAiB,WAAW;YACzB,EAAM,KAAK,MAAS;GACnB,IAAI,IAAY,EAAK;GAarB,OAZI,EAAK,aAAa,QAAQ,EAAK,cAAc,OAC/C,IACE,kBAAC,GAAD;IACE,OAAO,EAAK;IACZ,WAAW,EAAK;IAChB,UAAU;IACV,WAAW,EAAE,sBAAsB;IACnC,aAAa,EAAE,wBAAwB;IACvC,CAAA,GAKJ,kBAAC,GAAD;IAEE,WAAW;IACX,OAAO,EAAK;IACZ,OAAO,kBAAC,QAAD;KAAM,WAAW;eAAe;KAAiB,CAAA;IACxD,MAAM,EAAK;IACX,EALK,EAAK,GAKV;IAEJ;EACc,CAAA"}
+{"version":3,"file":"BackofficeKpiStrip.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeKpiStrip.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport { CopyableText } from '@plumile/ui/backoffice/atoms/copyable_text/CopyableText.js';\nimport { MetricCard } 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 './backofficeKpiStrip.css.js';\n\nexport type BackofficeKpiTone =\n  | 'neutral'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger';\n\nexport type BackofficeKpiItem = {\n  readonly id: string;\n  readonly label: string;\n  readonly value: ReactNode;\n  readonly hint?: ReactNode;\n  readonly tone?: BackofficeKpiTone;\n  readonly copyValue?: string;\n};\n\nexport type BackofficeKpiStripProps = {\n  readonly items: readonly BackofficeKpiItem[];\n  readonly density?: 'compact' | 'comfortable';\n};\n\nexport const BackofficeKpiStrip = ({\n  items,\n  density = 'comfortable',\n}: BackofficeKpiStripProps): JSX.Element | null => {\n  const { t } = useBackofficeReactTranslation();\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  let groupClassName: string | undefined = styles.group;\n  if (density === 'compact') {\n    groupClassName = cx(styles.group, styles.compactGroup);\n  }\n\n  return (\n    <MetricTileGroup className={groupClassName}>\n      {items.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          <MetricCard\n            key={item.id}\n            className={styles.card}\n            label={item.label}\n            value={<span className={styles.value}>{valueNode}</span>}\n            hint={item.hint}\n          />\n        );\n      })}\n    </MetricTileGroup>\n  );\n};\n\nexport default BackofficeKpiStrip;\n"],"mappings":";;;;;;;;AA8BA,IAAa,KAAsB,EACjC,UACA,aAAU,oBACuC;CACjD,IAAM,EAAE,SAAM,GAA+B;CAE7C,IAAI,EAAM,WAAW,GACnB,OAAO;CAGT,IAAI,IAAqC;CAKzC,OAJI,MAAY,cACd,IAAiB,EAAG,GAAc,EAAoB,GAItD,kBAAC,GAAD;EAAiB,WAAW;YACzB,EAAM,KAAK,MAAS;GACnB,IAAI,IAAY,EAAK;GAarB,OAZI,EAAK,aAAa,QAAQ,EAAK,cAAc,OAC/C,IACE,kBAAC,GAAD;IACE,OAAO,EAAK;IACZ,WAAW,EAAK;IAChB,UAAU;IACV,WAAW,EAAE,sBAAsB;IACnC,aAAa,EAAE,wBAAwB;IACvC,CAAA,GAKJ,kBAAC,GAAD;IAEE,WAAW;IACX,OAAO,EAAK;IACZ,OAAO,kBAAC,QAAD;KAAM,WAAW;eAAe;KAAiB,CAAA;IACxD,MAAM,EAAK;IACX,EALK,EAAK,GAKV;IAEJ;EACc,CAAA"}

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

@@ -1,23 +1,23 @@
 import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
 import { BackofficeDetailSection as t } from "./BackofficeDetailSection.js";
 import { eventMeta as n } from "./backofficeLifecycleTimelineSection.css.js";
-import { AuditTimeline as r } from "@plumile/ui";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { AuditTimeline as a } 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__ */ i(t, {
+	return c.length === 0 ? /* @__PURE__ */ r(t, {
 		title: o,
 		description: s,
 		children: l ?? u("common.notAvailable")
-	}) : /* @__PURE__ */ i(t, {
+	}) : /* @__PURE__ */ r(t, {
 		title: o,
 		description: s,
-		children: /* @__PURE__ */ i(r, { events: c.map((e) => {
+		children: /* @__PURE__ */ r(a, { events: c.map((e) => {
 			let t = null;
-			return (e.actor != null || e.payload != null) && (t = /* @__PURE__ */ a("span", {
+			return (e.actor != null || e.payload != null) && (t = /* @__PURE__ */ i("span", {
 				className: n,
-				children: [e.actor != null && /* @__PURE__ */ i("span", {
+				children: [e.actor != null && /* @__PURE__ */ r("span", {
 					className: "txvbqbva1",
 					children: e.actor
 				}), e.payload]

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';\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 { 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"}

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

@@ -2,31 +2,31 @@ import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeR
 import { BackofficeDetailSection as t } from "./BackofficeDetailSection.js";
 import { formatJsonPayload as n } from "./detailPayloadUtils.js";
 import { details as r, summary as i } from "./backofficePayloadInspectorSection.css.js";
-import { LazyMarkdownRenderer as a } from "@plumile/ui";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { LazyMarkdownRenderer as s } from "@plumile/ui/atomic/molecules/markdown/LazyMarkdownRenderer.js";
 //#region src/components/backoffice/detail/BackofficePayloadInspectorSection.tsx
 var c = (e, t) => e == null ? "" : t === "json" ? n(e) : typeof e == "string" ? t === "code" ? `\`\`\`\n${e}\n\`\`\`` : e : typeof e == "number" || typeof e == "boolean" ? String(e) : n(e), l = ({ title: n, description: l, summary: u, content: d, format: f, initiallyExpanded: p = !1, emptyLabel: m, detailsLabel: h }) => {
 	let { t: g } = e(), _ = c(d, f), v = m ?? g("common.notAvailable");
-	if (_.trim() === "" && u == null) return /* @__PURE__ */ o(t, {
+	if (_.trim() === "" && u == null) return /* @__PURE__ */ a(t, {
 		title: n,
 		children: v
 	});
 	let y = _;
 	y.trim() === "" && (y = v);
 	let b = h;
-	return b ??= g("detail.actions.viewDetails"), /* @__PURE__ */ s(t, {
+	return b ??= g("detail.actions.viewDetails"), /* @__PURE__ */ o(t, {
 		title: n,
 		description: l,
-		children: [u != null && /* @__PURE__ */ o("div", {
+		children: [u != null && /* @__PURE__ */ a("div", {
 			className: "txvbqb8y txvbqbva1 txvbqbl87",
 			children: u
-		}), /* @__PURE__ */ s("details", {
+		}), /* @__PURE__ */ o("details", {
 			className: r,
 			open: p,
-			children: [/* @__PURE__ */ o("summary", {
+			children: [/* @__PURE__ */ a("summary", {
 				className: i,
 				children: b
-			}), /* @__PURE__ */ o(a, { content: y })]
+			}), /* @__PURE__ */ a(s, { content: y })]
 		})]
 	});
 };

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

@@ -1 +1 @@
-{"version":3,"file":"BackofficePayloadInspectorSection.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficePayloadInspectorSection.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport { LazyMarkdownRenderer } from '@plumile/ui';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport { BackofficeDetailSection } from './BackofficeDetailSection.js';\nimport { formatJsonPayload } from './detailPayloadUtils.js';\nimport * as styles from './backofficePayloadInspectorSection.css.js';\n\nexport type BackofficePayloadInspectorFormat =\n  | 'json'\n  | 'markdown'\n  | 'text'\n  | 'code';\n\nexport type BackofficePayloadInspectorSectionProps = {\n  readonly title: string;\n  readonly description?: string;\n  readonly summary?: ReactNode;\n  readonly content: unknown;\n  readonly format: BackofficePayloadInspectorFormat;\n  readonly initiallyExpanded?: boolean;\n  readonly emptyLabel?: string;\n  readonly detailsLabel?: string;\n};\n\nconst formatContent = (\n  content: unknown,\n  format: BackofficePayloadInspectorFormat,\n): string => {\n  if (content == null) {\n    return '';\n  }\n  if (format === 'json') {\n    return formatJsonPayload(content);\n  }\n  if (typeof content === 'string') {\n    if (format === 'code') {\n      return `\\`\\`\\`\\n${content}\\n\\`\\`\\``;\n    }\n    return content;\n  }\n  if (typeof content === 'number' || typeof content === 'boolean') {\n    return String(content);\n  }\n  return formatJsonPayload(content);\n};\n\nexport const BackofficePayloadInspectorSection = ({\n  title,\n  description,\n  summary,\n  content,\n  format,\n  initiallyExpanded = false,\n  emptyLabel,\n  detailsLabel,\n}: BackofficePayloadInspectorSectionProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const resolved = formatContent(content, format);\n  const empty = emptyLabel ?? t('common.notAvailable');\n\n  if (resolved.trim() === '' && summary == null) {\n    return (\n      <BackofficeDetailSection title={title}>{empty}</BackofficeDetailSection>\n    );\n  }\n\n  let detailsContent = resolved;\n  if (detailsContent.trim() === '') {\n    detailsContent = empty;\n  }\n\n  let resolvedDetailsLabel = detailsLabel;\n  resolvedDetailsLabel ??= t('detail.actions.viewDetails');\n\n  return (\n    <BackofficeDetailSection title={title} description={description}>\n      {summary != null && <div className={styles.preview}>{summary}</div>}\n      <details className={styles.details} open={initiallyExpanded}>\n        <summary className={styles.summary}>{resolvedDetailsLabel}</summary>\n        <LazyMarkdownRenderer content={detailsContent} />\n      </details>\n    </BackofficeDetailSection>\n  );\n};\n\nexport default BackofficePayloadInspectorSection;\n"],"mappings":";;;;;;;AAyBA,IAAM,KACJ,GACA,MAEI,KAAW,OACN,KAEL,MAAW,SACN,EAAkB,EAAQ,GAE/B,OAAO,KAAY,WACjB,MAAW,SACN,WAAW,EAAQ,YAErB,IAEL,OAAO,KAAY,YAAY,OAAO,KAAY,YAC7C,OAAO,EAAQ,GAEjB,EAAkB,EAAQ,EAGtB,KAAqC,EAChD,UACA,gBACA,SAAA,GACA,YACA,WACA,uBAAoB,IACpB,eACA,sBACyD;CACzD,IAAM,EAAE,SAAM,GAA+B,EACvC,IAAW,EAAc,GAAS,EAAO,EACzC,IAAQ,KAAc,EAAE,sBAAsB;CAEpD,IAAI,EAAS,MAAM,KAAK,MAAM,KAAW,MACvC,OACE,kBAAC,GAAD;EAAgC;YAAQ;EAAgC,CAAA;CAI5E,IAAI,IAAiB;CACrB,AAAI,EAAe,MAAM,KAAK,OAC5B,IAAiB;CAGnB,IAAI,IAAuB;CAG3B,OAFA,MAAyB,EAAE,6BAA6B,EAGtD,kBAAC,GAAD;EAAgC;EAAoB;YAApD,CACG,KAAW,QAAQ,kBAAC,OAAD;GAAK,WAAW;aAAiB;GAAc,CAAA,EACnE,kBAAC,WAAD;GAAS,WAAW;GAAgB,MAAM;aAA1C,CACE,kBAAC,WAAD;IAAS,WAAW;cAAiB;IAA+B,CAAA,EACpE,kBAAC,GAAD,EAAsB,SAAS,GAAkB,CAAA,CACzC;KACc"}
+{"version":3,"file":"BackofficePayloadInspectorSection.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficePayloadInspectorSection.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport { LazyMarkdownRenderer } from '@plumile/ui/atomic/molecules/markdown/LazyMarkdownRenderer.js';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport { BackofficeDetailSection } from './BackofficeDetailSection.js';\nimport { formatJsonPayload } from './detailPayloadUtils.js';\nimport * as styles from './backofficePayloadInspectorSection.css.js';\n\nexport type BackofficePayloadInspectorFormat =\n  | 'json'\n  | 'markdown'\n  | 'text'\n  | 'code';\n\nexport type BackofficePayloadInspectorSectionProps = {\n  readonly title: string;\n  readonly description?: string;\n  readonly summary?: ReactNode;\n  readonly content: unknown;\n  readonly format: BackofficePayloadInspectorFormat;\n  readonly initiallyExpanded?: boolean;\n  readonly emptyLabel?: string;\n  readonly detailsLabel?: string;\n};\n\nconst formatContent = (\n  content: unknown,\n  format: BackofficePayloadInspectorFormat,\n): string => {\n  if (content == null) {\n    return '';\n  }\n  if (format === 'json') {\n    return formatJsonPayload(content);\n  }\n  if (typeof content === 'string') {\n    if (format === 'code') {\n      return `\\`\\`\\`\\n${content}\\n\\`\\`\\``;\n    }\n    return content;\n  }\n  if (typeof content === 'number' || typeof content === 'boolean') {\n    return String(content);\n  }\n  return formatJsonPayload(content);\n};\n\nexport const BackofficePayloadInspectorSection = ({\n  title,\n  description,\n  summary,\n  content,\n  format,\n  initiallyExpanded = false,\n  emptyLabel,\n  detailsLabel,\n}: BackofficePayloadInspectorSectionProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const resolved = formatContent(content, format);\n  const empty = emptyLabel ?? t('common.notAvailable');\n\n  if (resolved.trim() === '' && summary == null) {\n    return (\n      <BackofficeDetailSection title={title}>{empty}</BackofficeDetailSection>\n    );\n  }\n\n  let detailsContent = resolved;\n  if (detailsContent.trim() === '') {\n    detailsContent = empty;\n  }\n\n  let resolvedDetailsLabel = detailsLabel;\n  resolvedDetailsLabel ??= t('detail.actions.viewDetails');\n\n  return (\n    <BackofficeDetailSection title={title} description={description}>\n      {summary != null && <div className={styles.preview}>{summary}</div>}\n      <details className={styles.details} open={initiallyExpanded}>\n        <summary className={styles.summary}>{resolvedDetailsLabel}</summary>\n        <LazyMarkdownRenderer content={detailsContent} />\n      </details>\n    </BackofficeDetailSection>\n  );\n};\n\nexport default BackofficePayloadInspectorSection;\n"],"mappings":";;;;;;;AAyBA,IAAM,KACJ,GACA,MAEI,KAAW,OACN,KAEL,MAAW,SACN,EAAkB,EAAQ,GAE/B,OAAO,KAAY,WACjB,MAAW,SACN,WAAW,EAAQ,YAErB,IAEL,OAAO,KAAY,YAAY,OAAO,KAAY,YAC7C,OAAO,EAAQ,GAEjB,EAAkB,EAAQ,EAGtB,KAAqC,EAChD,UACA,gBACA,SAAA,GACA,YACA,WACA,uBAAoB,IACpB,eACA,sBACyD;CACzD,IAAM,EAAE,SAAM,GAA+B,EACvC,IAAW,EAAc,GAAS,EAAO,EACzC,IAAQ,KAAc,EAAE,sBAAsB;CAEpD,IAAI,EAAS,MAAM,KAAK,MAAM,KAAW,MACvC,OACE,kBAAC,GAAD;EAAgC;YAAQ;EAAgC,CAAA;CAI5E,IAAI,IAAiB;CACrB,AAAI,EAAe,MAAM,KAAK,OAC5B,IAAiB;CAGnB,IAAI,IAAuB;CAG3B,OAFA,MAAyB,EAAE,6BAA6B,EAGtD,kBAAC,GAAD;EAAgC;EAAoB;YAApD,CACG,KAAW,QAAQ,kBAAC,OAAD;GAAK,WAAW;aAAiB;GAAc,CAAA,EACnE,kBAAC,WAAD;GAAS,WAAW;GAAgB,MAAM;aAA1C,CACE,kBAAC,WAAD;IAAS,WAAW;cAAiB;IAA+B,CAAA,EACpE,kBAAC,GAAD,EAAsB,SAAS,GAAkB,CAAA,CACzC;KACc"}

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

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

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';\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 { 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"}

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

@@ -2,7 +2,7 @@ import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeR
 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 { Link as l } from "@plumile/router";
+import l from "@plumile/router/routing/Link.js";
 //#region src/components/backoffice/detail/BackofficeRelationsSummaryGrid.tsx
 var u = ({ title: u, items: d }) => {
 	let { t: f } = e();

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';\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';\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"}

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

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

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';\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 { 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"}

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

@@ -2,7 +2,7 @@ import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeR
 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";
+import { cx as i } from "@plumile/ui/theme/tools.js";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/backoffice/detail/BackofficeUsageCostBreakdown.tsx
 var s = ({ title: s, rows: c, totals: l, emptyLabel: u, columnLabels: d }) => {

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';\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,gCAAa,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 { 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,gCAAa,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/backofficeAuditMetadataPanel.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeAuditMetadataPanel.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeAuditMetadataPanel.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui';\n\nexport const list = sprinkles({\n  display: 'grid',\n  gap: 3,\n  gridTemplateColumns: 'autoFitMinmax220',\n});\n\nexport const item = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\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 value = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  flexWrap: 'wrap',\n  fontSize: 'sm',\n  color: 'text',\n});\n"],"mappings":""}
+{"version":3,"file":"backofficeAuditMetadataPanel.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeAuditMetadataPanel.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const list = sprinkles({\n  display: 'grid',\n  gap: 3,\n  gridTemplateColumns: 'autoFitMinmax220',\n});\n\nexport const item = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\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 value = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  flexWrap: 'wrap',\n  fontSize: 'sm',\n  color: 'text',\n});\n"],"mappings":""}

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';\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/sprinkles.css.js';\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.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeDetailErrorList.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeDetailErrorList.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui';\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/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":""}

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

@@ -1 +1 @@
-{"version":3,"file":"backofficeDetailField.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeDetailField.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles } from '@plumile/ui';\n\nexport const field = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\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 value = sprinkles({\n  fontSize: 'sm',\n  color: 'text',\n  overflowWrap: 'anywhere',\n  wordBreak: 'break-word',\n});\n\nexport const fullWidth = sprinkles({\n  gridColumn: 'span-full',\n});\n\nexport const size = {\n  xs: style({ maxWidth: '10ch' }),\n  s: style({ maxWidth: '18ch' }),\n  statusAction: style({ maxWidth: '28ch' }),\n  m: style({ maxWidth: '28ch' }),\n  l: style({ maxWidth: '44ch' }),\n  xl: style({ maxWidth: '64ch' }),\n  fluid: style({ maxWidth: '100%' }),\n};\n"],"mappings":""}
+{"version":3,"file":"backofficeDetailField.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeDetailField.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const field = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\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 value = sprinkles({\n  fontSize: 'sm',\n  color: 'text',\n  overflowWrap: 'anywhere',\n  wordBreak: 'break-word',\n});\n\nexport const fullWidth = sprinkles({\n  gridColumn: 'span-full',\n});\n\nexport const size = {\n  xs: style({ maxWidth: '10ch' }),\n  s: style({ maxWidth: '18ch' }),\n  statusAction: style({ maxWidth: '28ch' }),\n  m: style({ maxWidth: '28ch' }),\n  l: style({ maxWidth: '44ch' }),\n  xl: style({ maxWidth: '64ch' }),\n  fluid: style({ maxWidth: '100%' }),\n};\n"],"mappings":""}

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';\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/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":""}

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

@@ -1 +1 @@
-{"version":3,"file":"backofficeDetailRelationLink.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeDetailRelationLink.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { sprinkles, vars } from '@plumile/ui';\n\nexport const link = style([\n  sprinkles({\n    transitionProperty: 'colors',\n    transitionDuration: 120,\n    transitionTimingFunction: 'ease',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: 3,\n    paddingY: 2,\n    paddingX: 3,\n    borderRadius: 'md',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'transparent',\n    backgroundColor: 'transparent',\n    color: 'text',\n    textDecoration: 'none',\n  }),\n  {\n    '@media': {\n      'screen and (max-width: 640px)': {\n        alignItems: 'flex-start',\n        flexDirection: 'column',\n      },\n    },\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.colors.surfaceSecondary,\n        borderColor: vars.colors.borderSubtle,\n      },\n      '&:focus-visible': {\n        backgroundColor: vars.colors.surfaceSecondary,\n        borderColor: vars.colors.borderSubtle,\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const label = sprinkles({\n  fontSize: 'sm',\n  fontWeight: 'medium',\n  minWidth: 0,\n  overflowWrap: 'anywhere',\n});\n\nexport const action = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: 1,\n  flexShrink: 0,\n  minWidth: 0,\n});\n\nexport const meta = sprinkles({\n  fontSize: 'xs',\n  color: 'textSecondary',\n  overflowWrap: 'anywhere',\n  textAlign: 'end',\n});\n\nexport const chevron = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  color: 'textMuted',\n  fontSize: 'sm',\n  lineHeight: 1,\n});\n"],"mappings":""}
+{"version":3,"file":"backofficeDetailRelationLink.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/backofficeDetailRelationLink.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\nimport { vars } from '@plumile/ui/theme/themeContract.js';\n\nexport const link = style([\n  sprinkles({\n    transitionProperty: 'colors',\n    transitionDuration: 120,\n    transitionTimingFunction: 'ease',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: 3,\n    paddingY: 2,\n    paddingX: 3,\n    borderRadius: 'md',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'transparent',\n    backgroundColor: 'transparent',\n    color: 'text',\n    textDecoration: 'none',\n  }),\n  {\n    '@media': {\n      'screen and (max-width: 640px)': {\n        alignItems: 'flex-start',\n        flexDirection: 'column',\n      },\n    },\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.colors.surfaceSecondary,\n        borderColor: vars.colors.borderSubtle,\n      },\n      '&:focus-visible': {\n        backgroundColor: vars.colors.surfaceSecondary,\n        borderColor: vars.colors.borderSubtle,\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const label = sprinkles({\n  fontSize: 'sm',\n  fontWeight: 'medium',\n  minWidth: 0,\n  overflowWrap: 'anywhere',\n});\n\nexport const action = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: 1,\n  flexShrink: 0,\n  minWidth: 0,\n});\n\nexport const meta = sprinkles({\n  fontSize: 'xs',\n  color: 'textSecondary',\n  overflowWrap: 'anywhere',\n  textAlign: 'end',\n});\n\nexport const chevron = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  color: 'textMuted',\n  fontSize: 'sm',\n  lineHeight: 1,\n});\n"],"mappings":""}

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';\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/sprinkles.css.js';\n\nexport const list = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n});\n"],"mappings":""}