@plumile/ui 0.1.115 → 0.1.117

package/lib/esm/admin/templates/admin_shell_layout/AdminShellLayout.js

@@ -3,28 +3,29 @@ import { AdminSidebar as t } from "../../organisms/admin_sidebar/AdminSidebar.js
 import { AdminTopbar as n } from "../../organisms/admin_topbar/AdminTopbar.js";
 import { jsx as r } from "react/jsx-runtime";
 //#region src/admin/templates/admin_shell_layout/AdminShellLayout.tsx
-var i = ({ children: i, sidebar: a, mobileSidebar: o, topbar: s, actions: c, tabs: l }) => {
-	let u = a.isCollapsed !== !0, d = null;
-	u && (d = /* @__PURE__ */ r(t, {
+var i = ({ children: i, sidebar: a, mobileSidebar: o, topbar: s, actions: c, tabs: l, contentScrollMode: u }) => {
+	let d = a.isCollapsed !== !0, f = null;
+	d && (f = /* @__PURE__ */ r(t, {
 		...a,
 		isCollapsed: !1
 	}));
-	let f;
-	o != null && (f = /* @__PURE__ */ r(t, { ...o }));
-	let p = null;
-	s != null && (p = /* @__PURE__ */ r(n, { ...s }));
-	let m;
-	return typeof a.expandToggleLabel == "string" && (m = a.expandToggleLabel), /* @__PURE__ */ r(e, {
-		sidebar: d,
-		mobileSidebar: f,
-		desktopSidebarOpen: u,
+	let p;
+	o != null && (p = /* @__PURE__ */ r(t, { ...o }));
+	let m = null;
+	s != null && (m = /* @__PURE__ */ r(n, { ...s }));
+	let h;
+	return typeof a.expandToggleLabel == "string" && (h = a.expandToggleLabel), /* @__PURE__ */ r(e, {
+		sidebar: f,
+		mobileSidebar: p,
+		desktopSidebarOpen: d,
 		onOpenDesktopSidebar: () => {
 			a.onCollapsedChange?.(!1);
 		},
-		openDesktopSidebarLabel: m,
-		breadcrumbSlot: p,
+		openDesktopSidebarLabel: h,
+		breadcrumbSlot: m,
 		actions: c,
 		tabs: l,
+		contentScrollMode: u,
 		children: i
 	});
 };

package/lib/esm/admin/templates/admin_shell_layout/AdminShellLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdminShellLayout.js","names":[],"sources":["../../../../../src/admin/templates/admin_shell_layout/AdminShellLayout.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { AppShell } from '../../../components/layout/AppShell.js';\nimport {\n  AdminSidebar,\n  type AdminSidebarProps,\n} from '../../organisms/admin_sidebar/AdminSidebar.js';\nimport {\n  AdminTopbar,\n  type AdminTopbarProps,\n} from '../../organisms/admin_topbar/AdminTopbar.js';\nimport type {\n  PageShellActions,\n  PageShellTab,\n} from '../../../components/layout/PageShell.js';\n\nexport type AdminShellLayoutProps = {\n  children: ReactNode;\n  sidebar: AdminSidebarProps;\n  mobileSidebar?: AdminSidebarProps;\n  topbar?: AdminTopbarProps;\n  actions?: PageShellActions;\n  tabs?: PageShellTab[];\n};\n\nexport const AdminShellLayout = ({\n  children,\n  sidebar,\n  mobileSidebar,\n  topbar,\n  actions,\n  tabs,\n}: AdminShellLayoutProps): JSX.Element => {\n  const isDesktopSidebarOpen = sidebar.isCollapsed !== true;\n  let sidebarNode: JSX.Element | null = null;\n  if (isDesktopSidebarOpen) {\n    sidebarNode = <AdminSidebar {...sidebar} isCollapsed={false} />;\n  }\n  let mobileSidebarNode: JSX.Element | undefined;\n  if (mobileSidebar != null) {\n    mobileSidebarNode = <AdminSidebar {...mobileSidebar} />;\n  }\n  let topbarNode: JSX.Element | null = null;\n  if (topbar != null) {\n    topbarNode = <AdminTopbar {...topbar} />;\n  }\n\n  let openDesktopSidebarLabel: string | undefined;\n  if (typeof sidebar.expandToggleLabel === 'string') {\n    openDesktopSidebarLabel = sidebar.expandToggleLabel;\n  }\n\n  return (\n    <AppShell\n      sidebar={sidebarNode}\n      mobileSidebar={mobileSidebarNode}\n      desktopSidebarOpen={isDesktopSidebarOpen}\n      onOpenDesktopSidebar={() => {\n        sidebar.onCollapsedChange?.(false);\n      }}\n      openDesktopSidebarLabel={openDesktopSidebarLabel}\n      breadcrumbSlot={topbarNode}\n      actions={actions}\n      tabs={tabs}\n    >\n      {children}\n    </AppShell>\n  );\n};\n\nexport default AdminShellLayout;\n"],"mappings":";;;;;AAyBA,IAAa,KAAoB,EAC/B,aACA,YACA,kBACA,WACA,YACA,cACwC;CACxC,IAAM,IAAuB,EAAQ,gBAAgB,IACjD,IAAkC;CACtC,AAAI,MACF,IAAc,kBAAC,GAAD;EAAc,GAAI;EAAS,aAAa;EAAS,CAAA;CAEjE,IAAI;CACJ,AAAI,KAAiB,SACnB,IAAoB,kBAAC,GAAD,EAAc,GAAI,GAAiB,CAAA;CAEzD,IAAI,IAAiC;CACrC,AAAI,KAAU,SACZ,IAAa,kBAAC,GAAD,EAAa,GAAI,GAAU,CAAA;CAG1C,IAAI;CAKJ,OAJI,OAAO,EAAQ,qBAAsB,aACvC,IAA0B,EAAQ,oBAIlC,kBAAC,GAAD;EACE,SAAS;EACT,eAAe;EACf,oBAAoB;EACpB,4BAA4B;GAC1B,EAAQ,oBAAoB,GAAM;;EAEX;EACzB,gBAAgB;EACP;EACH;EAEL;EACQ,CAAA"}
+{"version":3,"file":"AdminShellLayout.js","names":[],"sources":["../../../../../src/admin/templates/admin_shell_layout/AdminShellLayout.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { AppShell } from '../../../components/layout/AppShell.js';\nimport {\n  AdminSidebar,\n  type AdminSidebarProps,\n} from '../../organisms/admin_sidebar/AdminSidebar.js';\nimport {\n  AdminTopbar,\n  type AdminTopbarProps,\n} from '../../organisms/admin_topbar/AdminTopbar.js';\nimport type {\n  PageShellActions,\n  PageShellContentScrollMode,\n  PageShellTab,\n} from '../../../components/layout/PageShell.js';\n\nexport type AdminShellLayoutProps = {\n  children: ReactNode;\n  sidebar: AdminSidebarProps;\n  mobileSidebar?: AdminSidebarProps;\n  topbar?: AdminTopbarProps;\n  actions?: PageShellActions;\n  tabs?: PageShellTab[];\n  contentScrollMode?: PageShellContentScrollMode;\n};\n\nexport const AdminShellLayout = ({\n  children,\n  sidebar,\n  mobileSidebar,\n  topbar,\n  actions,\n  tabs,\n  contentScrollMode,\n}: AdminShellLayoutProps): JSX.Element => {\n  const isDesktopSidebarOpen = sidebar.isCollapsed !== true;\n  let sidebarNode: JSX.Element | null = null;\n  if (isDesktopSidebarOpen) {\n    sidebarNode = <AdminSidebar {...sidebar} isCollapsed={false} />;\n  }\n  let mobileSidebarNode: JSX.Element | undefined;\n  if (mobileSidebar != null) {\n    mobileSidebarNode = <AdminSidebar {...mobileSidebar} />;\n  }\n  let topbarNode: JSX.Element | null = null;\n  if (topbar != null) {\n    topbarNode = <AdminTopbar {...topbar} />;\n  }\n\n  let openDesktopSidebarLabel: string | undefined;\n  if (typeof sidebar.expandToggleLabel === 'string') {\n    openDesktopSidebarLabel = sidebar.expandToggleLabel;\n  }\n\n  return (\n    <AppShell\n      sidebar={sidebarNode}\n      mobileSidebar={mobileSidebarNode}\n      desktopSidebarOpen={isDesktopSidebarOpen}\n      onOpenDesktopSidebar={() => {\n        sidebar.onCollapsedChange?.(false);\n      }}\n      openDesktopSidebarLabel={openDesktopSidebarLabel}\n      breadcrumbSlot={topbarNode}\n      actions={actions}\n      tabs={tabs}\n      contentScrollMode={contentScrollMode}\n    >\n      {children}\n    </AppShell>\n  );\n};\n\nexport default AdminShellLayout;\n"],"mappings":";;;;;AA2BA,IAAa,KAAoB,EAC/B,aACA,YACA,kBACA,WACA,YACA,SACA,2BACwC;CACxC,IAAM,IAAuB,EAAQ,gBAAgB,IACjD,IAAkC;CACtC,AAAI,MACF,IAAc,kBAAC,GAAD;EAAc,GAAI;EAAS,aAAa;EAAS,CAAA;CAEjE,IAAI;CACJ,AAAI,KAAiB,SACnB,IAAoB,kBAAC,GAAD,EAAc,GAAI,GAAiB,CAAA;CAEzD,IAAI,IAAiC;CACrC,AAAI,KAAU,SACZ,IAAa,kBAAC,GAAD,EAAa,GAAI,GAAU,CAAA;CAG1C,IAAI;CAKJ,OAJI,OAAO,EAAQ,qBAAsB,aACvC,IAA0B,EAAQ,oBAIlC,kBAAC,GAAD;EACE,SAAS;EACT,eAAe;EACf,oBAAoB;EACpB,4BAA4B;GAC1B,EAAQ,oBAAoB,GAAM;;EAEX;EACzB,gBAAgB;EACP;EACH;EACa;EAElB;EACQ,CAAA"}

package/lib/esm/atomic/molecules/markdown/components/MarkdownArticleContainer.css.js

@@ -1,5 +1,4 @@
 /* empty css                                         */
-/* empty css                             */
 /* empty css                                        */
 //#region src/atomic/molecules/markdown/components/MarkdownArticleContainer.css.ts
 var e = "_7ez1431 _7ez1430 txvbqb9ip txvbqbai7 txvbqbaop";

package/lib/esm/atomic/molecules/markdown/components/MarkdownDelete.css.js

@@ -1,4 +1,5 @@
 /* empty css                                         */
+/* empty css                             */
 /* empty css                              */
 //#region src/atomic/molecules/markdown/components/MarkdownDelete.css.ts
 var e = "_1gyncxq1 _1gyncxq0 txvbqb3c txvbqb3g";

package/lib/esm/backoffice/organisms/backoffice_data_table/BackofficeDataTable.js

@@ -3,23 +3,23 @@ import { Checkbox as t } from "../../../atomic/atoms/checkbox/Checkbox.js";
 import { DataTable as n } from "../../../components/data-table/DataTable.js";
 import { BulkActionsBar as r } from "../../molecules/bulk_actions_bar/BulkActionsBar.js";
 import { TableToolbar as i } from "../../molecules/table_toolbar/TableToolbar.js";
-import { selectionCell as a, wrapper as o } from "./backofficeDataTable.css.js";
-import { useCallback as s, useMemo as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { useTranslation as d } from "react-i18next";
+import { selectionCell as a, wrapper as o, wrapperContained as s } from "./backofficeDataTable.css.js";
+import { useCallback as c, useMemo as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useTranslation as f } from "react-i18next";
 //#region src/backoffice/organisms/backoffice_data_table/BackofficeDataTable.tsx
-var f = (e, t) => e.mobileRole === "action" ? "3.75rem" : e.isPrimary === !0 || t === 0 ? "minmax(16rem, 1fr)" : e.align === "right" || e.align === "center" ? "minmax(5.5rem, 7rem)" : "minmax(10rem, 0.75fr)", p = (e, t) => {
+var p = (e, t) => e.mobileRole === "action" ? "3.75rem" : e.isPrimary === !0 || t === 0 ? "minmax(16rem, 1fr)" : e.align === "right" || e.align === "center" ? "minmax(5.5rem, 7rem)" : "minmax(10rem, 0.75fr)", m = (e, t) => {
 	if (e.length === 0) return;
-	let n = e.map((e, t) => f(e, t)).join(" ");
+	let n = e.map((e, t) => p(e, t)).join(" ");
 	return t ? `2.75rem ${n}` : n;
-}, m = (e) => {
+}, h = (e) => {
 	let { rows: n, selection: r, selectAllLabel: i, selectRowLabel: o } = e, s = [];
 	for (let e of n) e.selectable && s.push(e.id);
-	let c = s.filter((e) => r.selectedRowIds.has(e)).length, u = s.length > 0 && c === s.length, d = c > 0 && !u, f = u;
+	let c = s.filter((e) => r.selectedRowIds.has(e)).length, l = s.length > 0 && c === s.length, d = c > 0 && !l, f = l;
 	d && (f = "mixed");
 	let p = () => {
 		if (s.length !== 0) {
-			if (u) {
+			if (l) {
 				r.onSelectionChange(/* @__PURE__ */ new Set());
 				return;
 			}
@@ -28,10 +28,10 @@ var f = (e, t) => e.mobileRole === "action" ? "3.75rem" : e.isPrimary === !0 ||
 	};
 	return {
 		id: "__select",
-		header: /* @__PURE__ */ l("div", {
+		header: /* @__PURE__ */ u("div", {
 			className: a,
-			children: /* @__PURE__ */ l(t, {
-				checked: u,
+			children: /* @__PURE__ */ u(t, {
+				checked: l,
 				disabled: s.length === 0,
 				indeterminate: d,
 				onChange: () => {
@@ -43,9 +43,9 @@ var f = (e, t) => e.mobileRole === "action" ? "3.75rem" : e.isPrimary === !0 ||
 		}),
 		cell: (e) => {
 			let { id: n, selectable: i } = e, s = r.selectedRowIds.has(n), c = o(e.row, e.index);
-			return /* @__PURE__ */ l("div", {
+			return /* @__PURE__ */ u("div", {
 				className: a,
-				children: /* @__PURE__ */ l(t, {
+				children: /* @__PURE__ */ u(t, {
 					checked: s,
 					disabled: !i,
 					onChange: () => {
@@ -58,73 +58,76 @@ var f = (e, t) => e.mobileRole === "action" ? "3.75rem" : e.isPrimary === !0 ||
 		},
 		className: a
 	};
-}, h = ({ columns: t, rows: a, getRowId: f, toolbar: h, selection: g, bulkActions: _, emptyState: v, className: y, selectAllLabel: b, selectRowLabel: x, ariaLabel: S }) => {
-	let { t: C } = d("ui"), w = c(() => a.map((e, t) => ({
+}, g = ({ columns: t, rows: a, getRowId: p, toolbar: g, selection: _, bulkActions: v, emptyState: y, className: b, selectAllLabel: x, selectRowLabel: S, ariaLabel: C, bodyScrollMode: w = "page" }) => {
+	let { t: T } = f("ui"), E = l(() => a.map((e, t) => ({
 		row: e,
 		index: t,
-		id: f(e, t),
-		selectable: g?.isRowSelectable?.(e, t) ?? !0
+		id: p(e, t),
+		selectable: _?.isRowSelectable?.(e, t) ?? !0
 	})), [
-		f,
+		p,
 		a,
-		g
-	]), T = c(() => g == null ? null : m({
-		rows: w,
-		selection: g,
-		selectAllLabel: b ?? C("backoffice.dataTable.selectAll"),
-		selectRowLabel: x ?? ((e, t) => C("backoffice.dataTable.selectRow", { index: t + 1 }))
+		_
+	]), D = l(() => _ == null ? null : h({
+		rows: E,
+		selection: _,
+		selectAllLabel: x ?? T("backoffice.dataTable.selectAll"),
+		selectRowLabel: S ?? ((e, t) => T("backoffice.dataTable.selectRow", { index: t + 1 }))
 	}), [
-		b,
 		x,
-		g,
-		C,
-		w
-	]), E = c(() => {
+		S,
+		_,
+		T,
+		E
+	]), O = l(() => {
 		let e = t.map((e) => ({
 			...e,
 			cell: (t) => e.cell(t.row)
 		}));
-		return T == null ? e : [T, ...e];
-	}, [t, T]), D = c(() => {
-		if (E.some((e) => e.isPrimary === !0) || E.length === 0) return E;
+		return D == null ? e : [D, ...e];
+	}, [t, D]), k = l(() => {
+		if (O.some((e) => e.isPrimary === !0) || O.length === 0) return O;
 		let e = 0;
-		return T != null && E.length > 1 && (e = 1), E.map((t, n) => n === e ? {
+		return D != null && O.length > 1 && (e = 1), O.map((t, n) => n === e ? {
 			...t,
 			isPrimary: !0
 		} : t);
-	}, [E, T]), O = c(() => p(D, T != null), [D, T]), k = 0;
-	g != null && (k = g.selectedRowIds.size);
-	let A = s(() => {
-		g?.onSelectionChange(/* @__PURE__ */ new Set());
-	}, [g]), j = null;
-	h != null && (j = /* @__PURE__ */ l(i, { ...h }));
-	let M = null;
-	return g != null && (M = /* @__PURE__ */ l(r, {
-		selectedCount: k,
-		actions: _,
-		onClearSelection: A
-	})), /* @__PURE__ */ u("div", {
-		className: e(o, y),
+	}, [O, D]), A = l(() => m(k, D != null), [k, D]), j = 0;
+	_ != null && (j = _.selectedRowIds.size);
+	let M = c(() => {
+		_?.onSelectionChange(/* @__PURE__ */ new Set());
+	}, [_]), N = null;
+	g != null && (N = /* @__PURE__ */ u(i, { ...g }));
+	let P = null;
+	_ != null && (P = /* @__PURE__ */ u(r, {
+		selectedCount: j,
+		actions: v,
+		onClearSelection: M
+	}));
+	let F = null;
+	return w === "contained" && (F = s), /* @__PURE__ */ d("div", {
+		className: e(o, F, b),
 		children: [
-			j,
-			M,
-			/* @__PURE__ */ l(n, {
-				ariaLabel: S ?? C("backoffice.dataTable.label"),
-				columns: D,
-				rows: w,
+			N,
+			P,
+			/* @__PURE__ */ u(n, {
+				ariaLabel: C ?? T("backoffice.dataTable.label"),
+				columns: k,
+				rows: E,
 				getRowId: (e) => e.id,
-				emptyState: v,
+				emptyState: y,
 				className: void 0,
 				headerClassName: void 0,
 				bodyClassName: void 0,
 				rowClassName: void 0,
 				gridTemplateClassName: void 0,
-				gridTemplateColumns: O
+				gridTemplateColumns: A,
+				bodyScrollMode: w
 			})
 		]
 	});
 };
 //#endregion
-export { h as BackofficeDataTable, h as default };
+export { g as BackofficeDataTable, g as default };
 
 //# sourceMappingURL=BackofficeDataTable.js.map

package/lib/esm/backoffice/organisms/backoffice_data_table/BackofficeDataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackofficeDataTable.js","names":[],"sources":["../../../../../src/backoffice/organisms/backoffice_data_table/BackofficeDataTable.tsx"],"sourcesContent":["import { useCallback, useMemo, type JSX, type ReactNode } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { Checkbox } from '../../../atomic/atoms/checkbox/Checkbox.js';\nimport { cx } from '../../../theme/tools.js';\nimport {\n  DataTable,\n  type DataTableColumn,\n  type GetRowId,\n} from '../../../components/data-table/DataTable.js';\n\nimport { BulkActionsBar } from '../../molecules/bulk_actions_bar/BulkActionsBar.js';\nimport {\n  TableToolbar,\n  type TableToolbarProps,\n} from '../../molecules/table_toolbar/TableToolbar.js';\n\nimport * as styles from './backofficeDataTable.css.js';\n\nexport type BackofficeDataTableSelection<Row> = {\n  selectedRowIds: ReadonlySet<string>;\n  onSelectionChange: (next: ReadonlySet<string>) => void;\n  isRowSelectable?: (row: Row, index: number) => boolean;\n};\n\nexport type BackofficeDataTableProps<Row> = {\n  columns: readonly DataTableColumn<Row>[];\n  rows: readonly Row[];\n  getRowId: GetRowId<Row>;\n  toolbar?: TableToolbarProps;\n  selection?: BackofficeDataTableSelection<Row>;\n  bulkActions?: ReactNode;\n  emptyState?: JSX.Element;\n  className?: string;\n  selectAllLabel?: string;\n  selectRowLabel?: (row: Row, index: number) => string;\n  ariaLabel?: string;\n};\n\ntype WrappedRow<Row> = {\n  row: Row;\n  index: number;\n  id: string;\n  selectable: boolean;\n};\n\nconst resolveColumnTemplate = <Row,>(\n  column: DataTableColumn<Row>,\n  index: number,\n): string => {\n  if (column.mobileRole === 'action') {\n    return '3.75rem';\n  }\n  if (column.isPrimary === true || index === 0) {\n    return 'minmax(16rem, 1fr)';\n  }\n  if (column.align === 'right' || column.align === 'center') {\n    return 'minmax(5.5rem, 7rem)';\n  }\n  return 'minmax(10rem, 0.75fr)';\n};\n\nconst buildGridTemplateColumns = <Row,>(\n  columns: readonly DataTableColumn<Row>[],\n  hasSelection: boolean,\n): string | undefined => {\n  if (columns.length === 0) {\n    return undefined;\n  }\n  const template = columns\n    .map((column, index) => {\n      return resolveColumnTemplate(column, index);\n    })\n    .join(' ');\n  if (!hasSelection) {\n    return template;\n  }\n  return `2.75rem ${template}`;\n};\n\nconst buildSelectionColumn = <Row,>(options: {\n  rows: readonly WrappedRow<Row>[];\n  selection: BackofficeDataTableSelection<Row>;\n  selectAllLabel: string;\n  selectRowLabel: (row: Row, index: number) => string;\n}): DataTableColumn<WrappedRow<Row>> => {\n  const { rows, selection, selectAllLabel, selectRowLabel } = options;\n\n  const selectableRowIds: string[] = [];\n  for (const wrapped of rows) {\n    if (wrapped.selectable) {\n      selectableRowIds.push(wrapped.id);\n    }\n  }\n\n  const selectedCount = selectableRowIds.filter((id) => {\n    return selection.selectedRowIds.has(id);\n  }).length;\n\n  const isAllSelected =\n    selectableRowIds.length > 0 && selectedCount === selectableRowIds.length;\n  const isPartiallySelected = selectedCount > 0 && !isAllSelected;\n  let selectAllAriaChecked: boolean | 'mixed' = isAllSelected;\n  if (isPartiallySelected) {\n    selectAllAriaChecked = 'mixed';\n  }\n\n  const toggleAll = (): void => {\n    if (selectableRowIds.length === 0) {\n      return;\n    }\n    if (isAllSelected) {\n      selection.onSelectionChange(new Set());\n      return;\n    }\n    selection.onSelectionChange(new Set(selectableRowIds));\n  };\n\n  return {\n    id: '__select',\n    header: (\n      <div className={styles.selectionCell}>\n        <Checkbox\n          checked={isAllSelected}\n          disabled={selectableRowIds.length === 0}\n          indeterminate={isPartiallySelected}\n          onChange={() => {\n            toggleAll();\n          }}\n          aria-checked={selectAllAriaChecked}\n          aria-label={selectAllLabel}\n        />\n      </div>\n    ),\n    cell: (wrapped) => {\n      const { id: rowId, selectable } = wrapped;\n      const checked = selection.selectedRowIds.has(rowId);\n      const rowLabel = selectRowLabel(wrapped.row, wrapped.index);\n\n      return (\n        <div className={styles.selectionCell}>\n          <Checkbox\n            checked={checked}\n            disabled={!selectable}\n            onChange={() => {\n              const next = new Set(selection.selectedRowIds);\n              if (next.has(rowId)) {\n                next.delete(rowId);\n              } else if (selectable) {\n                next.add(rowId);\n              }\n              selection.onSelectionChange(next);\n            }}\n            aria-label={rowLabel}\n          />\n        </div>\n      );\n    },\n    className: styles.selectionCell,\n  };\n};\n\nexport const BackofficeDataTable = <Row,>({\n  columns,\n  rows,\n  getRowId,\n  toolbar,\n  selection,\n  bulkActions,\n  emptyState,\n  className,\n  selectAllLabel,\n  selectRowLabel,\n  ariaLabel,\n}: BackofficeDataTableProps<Row>): JSX.Element => {\n  const { t } = useTranslation('ui');\n  const wrappedRows = useMemo<readonly WrappedRow<Row>[]>(() => {\n    return rows.map((row, index) => {\n      const id = getRowId(row, index);\n      const selectable = selection?.isRowSelectable?.(row, index) ?? true;\n      return { row, index, id, selectable };\n    });\n  }, [getRowId, rows, selection]);\n\n  const selectionColumn = useMemo(() => {\n    if (selection == null) {\n      return null;\n    }\n    return buildSelectionColumn({\n      rows: wrappedRows,\n      selection,\n      selectAllLabel: selectAllLabel ?? t('backoffice.dataTable.selectAll'),\n      selectRowLabel:\n        selectRowLabel ??\n        ((_row, index) => {\n          return t('backoffice.dataTable.selectRow', {\n            index: index + 1,\n          });\n        }),\n    });\n  }, [selectAllLabel, selectRowLabel, selection, t, wrappedRows]);\n\n  const resolvedColumns = useMemo(() => {\n    const mapped = columns.map<DataTableColumn<WrappedRow<Row>>>((column) => {\n      return {\n        ...column,\n        cell: (wrapped: WrappedRow<Row>) => {\n          return column.cell(wrapped.row);\n        },\n      };\n    });\n    if (selectionColumn == null) {\n      return mapped;\n    }\n    return [selectionColumn, ...mapped];\n  }, [columns, selectionColumn]);\n\n  const columnsWithPrimary = useMemo(() => {\n    const hasPrimary = resolvedColumns.some((column) => {\n      return column.isPrimary === true;\n    });\n    if (hasPrimary) {\n      return resolvedColumns;\n    }\n    if (resolvedColumns.length === 0) {\n      return resolvedColumns;\n    }\n    let primaryIndex = 0;\n    if (selectionColumn != null && resolvedColumns.length > 1) {\n      primaryIndex = 1;\n    }\n    return resolvedColumns.map((column, index) => {\n      if (index === primaryIndex) {\n        return { ...column, isPrimary: true };\n      }\n      return column;\n    });\n  }, [resolvedColumns, selectionColumn]);\n\n  const gridTemplateColumns = useMemo(() => {\n    return buildGridTemplateColumns(\n      columnsWithPrimary,\n      selectionColumn != null,\n    );\n  }, [columnsWithPrimary, selectionColumn]);\n\n  let selectedCount = 0;\n  if (selection != null) {\n    selectedCount = selection.selectedRowIds.size;\n  }\n\n  const handleClearSelection = useCallback(() => {\n    if (selection != null) {\n      selection.onSelectionChange(new Set());\n    }\n  }, [selection]);\n\n  let toolbarNode: JSX.Element | null = null;\n  if (toolbar != null) {\n    toolbarNode = <TableToolbar {...toolbar} />;\n  }\n\n  let bulkActionsNode: JSX.Element | null = null;\n  if (selection != null) {\n    bulkActionsNode = (\n      <BulkActionsBar\n        selectedCount={selectedCount}\n        actions={bulkActions}\n        onClearSelection={handleClearSelection}\n      />\n    );\n  }\n\n  return (\n    <div className={cx(styles.wrapper, className)}>\n      {toolbarNode}\n      {bulkActionsNode}\n\n      <DataTable\n        ariaLabel={ariaLabel ?? t('backoffice.dataTable.label')}\n        columns={columnsWithPrimary}\n        rows={wrappedRows}\n        getRowId={(wrapped: WrappedRow<Row>) => {\n          return wrapped.id;\n        }}\n        emptyState={emptyState}\n        className={undefined}\n        headerClassName={undefined}\n        bodyClassName={undefined}\n        rowClassName={undefined}\n        gridTemplateClassName={undefined}\n        gridTemplateColumns={gridTemplateColumns}\n      />\n    </div>\n  );\n};\n\nexport default BackofficeDataTable;\n"],"mappings":"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"}
+{"version":3,"file":"BackofficeDataTable.js","names":[],"sources":["../../../../../src/backoffice/organisms/backoffice_data_table/BackofficeDataTable.tsx"],"sourcesContent":["import { useCallback, useMemo, type JSX, type ReactNode } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { Checkbox } from '../../../atomic/atoms/checkbox/Checkbox.js';\nimport { cx } from '../../../theme/tools.js';\nimport {\n  DataTable,\n  type DataTableBodyScrollMode,\n  type DataTableColumn,\n  type GetRowId,\n} from '../../../components/data-table/DataTable.js';\n\nimport { BulkActionsBar } from '../../molecules/bulk_actions_bar/BulkActionsBar.js';\nimport {\n  TableToolbar,\n  type TableToolbarProps,\n} from '../../molecules/table_toolbar/TableToolbar.js';\n\nimport * as styles from './backofficeDataTable.css.js';\n\nexport type BackofficeDataTableSelection<Row> = {\n  selectedRowIds: ReadonlySet<string>;\n  onSelectionChange: (next: ReadonlySet<string>) => void;\n  isRowSelectable?: (row: Row, index: number) => boolean;\n};\n\nexport type BackofficeDataTableProps<Row> = {\n  columns: readonly DataTableColumn<Row>[];\n  rows: readonly Row[];\n  getRowId: GetRowId<Row>;\n  toolbar?: TableToolbarProps;\n  selection?: BackofficeDataTableSelection<Row>;\n  bulkActions?: ReactNode;\n  emptyState?: JSX.Element;\n  className?: string;\n  selectAllLabel?: string;\n  selectRowLabel?: (row: Row, index: number) => string;\n  ariaLabel?: string;\n  bodyScrollMode?: DataTableBodyScrollMode;\n};\n\ntype WrappedRow<Row> = {\n  row: Row;\n  index: number;\n  id: string;\n  selectable: boolean;\n};\n\nconst resolveColumnTemplate = <Row,>(\n  column: DataTableColumn<Row>,\n  index: number,\n): string => {\n  if (column.mobileRole === 'action') {\n    return '3.75rem';\n  }\n  if (column.isPrimary === true || index === 0) {\n    return 'minmax(16rem, 1fr)';\n  }\n  if (column.align === 'right' || column.align === 'center') {\n    return 'minmax(5.5rem, 7rem)';\n  }\n  return 'minmax(10rem, 0.75fr)';\n};\n\nconst buildGridTemplateColumns = <Row,>(\n  columns: readonly DataTableColumn<Row>[],\n  hasSelection: boolean,\n): string | undefined => {\n  if (columns.length === 0) {\n    return undefined;\n  }\n  const template = columns\n    .map((column, index) => {\n      return resolveColumnTemplate(column, index);\n    })\n    .join(' ');\n  if (!hasSelection) {\n    return template;\n  }\n  return `2.75rem ${template}`;\n};\n\nconst buildSelectionColumn = <Row,>(options: {\n  rows: readonly WrappedRow<Row>[];\n  selection: BackofficeDataTableSelection<Row>;\n  selectAllLabel: string;\n  selectRowLabel: (row: Row, index: number) => string;\n}): DataTableColumn<WrappedRow<Row>> => {\n  const { rows, selection, selectAllLabel, selectRowLabel } = options;\n\n  const selectableRowIds: string[] = [];\n  for (const wrapped of rows) {\n    if (wrapped.selectable) {\n      selectableRowIds.push(wrapped.id);\n    }\n  }\n\n  const selectedCount = selectableRowIds.filter((id) => {\n    return selection.selectedRowIds.has(id);\n  }).length;\n\n  const isAllSelected =\n    selectableRowIds.length > 0 && selectedCount === selectableRowIds.length;\n  const isPartiallySelected = selectedCount > 0 && !isAllSelected;\n  let selectAllAriaChecked: boolean | 'mixed' = isAllSelected;\n  if (isPartiallySelected) {\n    selectAllAriaChecked = 'mixed';\n  }\n\n  const toggleAll = (): void => {\n    if (selectableRowIds.length === 0) {\n      return;\n    }\n    if (isAllSelected) {\n      selection.onSelectionChange(new Set());\n      return;\n    }\n    selection.onSelectionChange(new Set(selectableRowIds));\n  };\n\n  return {\n    id: '__select',\n    header: (\n      <div className={styles.selectionCell}>\n        <Checkbox\n          checked={isAllSelected}\n          disabled={selectableRowIds.length === 0}\n          indeterminate={isPartiallySelected}\n          onChange={() => {\n            toggleAll();\n          }}\n          aria-checked={selectAllAriaChecked}\n          aria-label={selectAllLabel}\n        />\n      </div>\n    ),\n    cell: (wrapped) => {\n      const { id: rowId, selectable } = wrapped;\n      const checked = selection.selectedRowIds.has(rowId);\n      const rowLabel = selectRowLabel(wrapped.row, wrapped.index);\n\n      return (\n        <div className={styles.selectionCell}>\n          <Checkbox\n            checked={checked}\n            disabled={!selectable}\n            onChange={() => {\n              const next = new Set(selection.selectedRowIds);\n              if (next.has(rowId)) {\n                next.delete(rowId);\n              } else if (selectable) {\n                next.add(rowId);\n              }\n              selection.onSelectionChange(next);\n            }}\n            aria-label={rowLabel}\n          />\n        </div>\n      );\n    },\n    className: styles.selectionCell,\n  };\n};\n\nexport const BackofficeDataTable = <Row,>({\n  columns,\n  rows,\n  getRowId,\n  toolbar,\n  selection,\n  bulkActions,\n  emptyState,\n  className,\n  selectAllLabel,\n  selectRowLabel,\n  ariaLabel,\n  bodyScrollMode = 'page',\n}: BackofficeDataTableProps<Row>): JSX.Element => {\n  const { t } = useTranslation('ui');\n  const wrappedRows = useMemo<readonly WrappedRow<Row>[]>(() => {\n    return rows.map((row, index) => {\n      const id = getRowId(row, index);\n      const selectable = selection?.isRowSelectable?.(row, index) ?? true;\n      return { row, index, id, selectable };\n    });\n  }, [getRowId, rows, selection]);\n\n  const selectionColumn = useMemo(() => {\n    if (selection == null) {\n      return null;\n    }\n    return buildSelectionColumn({\n      rows: wrappedRows,\n      selection,\n      selectAllLabel: selectAllLabel ?? t('backoffice.dataTable.selectAll'),\n      selectRowLabel:\n        selectRowLabel ??\n        ((_row, index) => {\n          return t('backoffice.dataTable.selectRow', {\n            index: index + 1,\n          });\n        }),\n    });\n  }, [selectAllLabel, selectRowLabel, selection, t, wrappedRows]);\n\n  const resolvedColumns = useMemo(() => {\n    const mapped = columns.map<DataTableColumn<WrappedRow<Row>>>((column) => {\n      return {\n        ...column,\n        cell: (wrapped: WrappedRow<Row>) => {\n          return column.cell(wrapped.row);\n        },\n      };\n    });\n    if (selectionColumn == null) {\n      return mapped;\n    }\n    return [selectionColumn, ...mapped];\n  }, [columns, selectionColumn]);\n\n  const columnsWithPrimary = useMemo(() => {\n    const hasPrimary = resolvedColumns.some((column) => {\n      return column.isPrimary === true;\n    });\n    if (hasPrimary) {\n      return resolvedColumns;\n    }\n    if (resolvedColumns.length === 0) {\n      return resolvedColumns;\n    }\n    let primaryIndex = 0;\n    if (selectionColumn != null && resolvedColumns.length > 1) {\n      primaryIndex = 1;\n    }\n    return resolvedColumns.map((column, index) => {\n      if (index === primaryIndex) {\n        return { ...column, isPrimary: true };\n      }\n      return column;\n    });\n  }, [resolvedColumns, selectionColumn]);\n\n  const gridTemplateColumns = useMemo(() => {\n    return buildGridTemplateColumns(\n      columnsWithPrimary,\n      selectionColumn != null,\n    );\n  }, [columnsWithPrimary, selectionColumn]);\n\n  let selectedCount = 0;\n  if (selection != null) {\n    selectedCount = selection.selectedRowIds.size;\n  }\n\n  const handleClearSelection = useCallback(() => {\n    if (selection != null) {\n      selection.onSelectionChange(new Set());\n    }\n  }, [selection]);\n\n  let toolbarNode: JSX.Element | null = null;\n  if (toolbar != null) {\n    toolbarNode = <TableToolbar {...toolbar} />;\n  }\n\n  let bulkActionsNode: JSX.Element | null = null;\n  if (selection != null) {\n    bulkActionsNode = (\n      <BulkActionsBar\n        selectedCount={selectedCount}\n        actions={bulkActions}\n        onClearSelection={handleClearSelection}\n      />\n    );\n  }\n\n  let containedWrapperClassName: string | null = null;\n  if (bodyScrollMode === 'contained') {\n    containedWrapperClassName = styles.wrapperContained;\n  }\n\n  return (\n    <div className={cx(styles.wrapper, containedWrapperClassName, className)}>\n      {toolbarNode}\n      {bulkActionsNode}\n\n      <DataTable\n        ariaLabel={ariaLabel ?? t('backoffice.dataTable.label')}\n        columns={columnsWithPrimary}\n        rows={wrappedRows}\n        getRowId={(wrapped: WrappedRow<Row>) => {\n          return wrapped.id;\n        }}\n        emptyState={emptyState}\n        className={undefined}\n        headerClassName={undefined}\n        bodyClassName={undefined}\n        rowClassName={undefined}\n        gridTemplateClassName={undefined}\n        gridTemplateColumns={gridTemplateColumns}\n        bodyScrollMode={bodyScrollMode}\n      />\n    </div>\n  );\n};\n\nexport default BackofficeDataTable;\n"],"mappings":"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"}

package/lib/esm/backoffice/organisms/backoffice_data_table/backofficeDataTable.css.js

@@ -1,8 +1,8 @@
 /* empty css                                      */
 /* empty css                                   */
 //#region src/backoffice/organisms/backoffice_data_table/backofficeDataTable.css.ts
-var e = "x4h99m0 txvbqb9ip txvbqbai7 txvbqbaog", t = "x4h99m1 txvbqbdoy";
+var e = "x4h99m0 txvbqb9ip txvbqbai7 txvbqbaog", t = "x4h99m1 txvbqbcgg txvbqbjh7", n = "x4h99m2 txvbqbdoy";
 //#endregion
-export { t as selectionCell, e as wrapper };
+export { n as selectionCell, e as wrapper, t as wrapperContained };
 
 //# sourceMappingURL=backofficeDataTable.css.js.map

package/lib/esm/backoffice/organisms/backoffice_data_table/backofficeDataTable.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeDataTable.css.js","names":[],"sources":["../../../../../src/backoffice/organisms/backoffice_data_table/backofficeDataTable.css.ts"],"sourcesContent":["import { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport const wrapper = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n});\n\nexport const selectionCell = sprinkles({\n  justifyContent: 'center',\n});\n"],"mappings":""}
+{"version":3,"file":"backofficeDataTable.css.js","names":[],"sources":["../../../../../src/backoffice/organisms/backoffice_data_table/backofficeDataTable.css.ts"],"sourcesContent":["import { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport const wrapper = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n});\n\nexport const wrapperContained = sprinkles({\n  height: 'full',\n  minHeight: 0,\n});\n\nexport const selectionCell = sprinkles({\n  justifyContent: 'center',\n});\n"],"mappings":""}

package/lib/esm/backoffice/organisms/backoffice_virtualized_connection_table/BackofficeVirtualizedConnectionTable.js

@@ -2,7 +2,7 @@ import { VirtualizedConnectionTable as e } from "../../../components/data-table/
 import { mapInfiniteScroll as t, mapVirtualization as n } from "./helpers.js";
 import { jsx as r } from "react/jsx-runtime";
 //#region src/backoffice/organisms/backoffice_virtualized_connection_table/BackofficeVirtualizedConnectionTable.tsx
-var i = ({ columns: i, rows: a, getRowId: o, emptyState: s, className: c, gridTemplateColumns: l, virtualization: u, infiniteScroll: d, hasNextPage: f, isLoadingMore: p, onLoadMore: m, ariaLabel: h, ariaLabelledBy: g }) => /* @__PURE__ */ r(e, {
+var i = ({ columns: i, rows: a, getRowId: o, emptyState: s, className: c, gridTemplateColumns: l, virtualization: u, infiniteScroll: d, hasNextPage: f, isLoadingMore: p, onLoadMore: m, ariaLabel: h, ariaLabelledBy: g, bodyScrollMode: _ }) => /* @__PURE__ */ r(e, {
 	columns: i,
 	rows: a,
 	getRowId: o,
@@ -17,7 +17,8 @@ var i = ({ columns: i, rows: a, getRowId: o, emptyState: s, className: c, gridTe
 	isLoadingMore: p,
 	onLoadMore: m,
 	ariaLabel: h,
-	ariaLabelledBy: g
+	ariaLabelledBy: g,
+	bodyScrollMode: _
 });
 //#endregion
 export { i as BackofficeVirtualizedConnectionTable, i as default };

package/lib/esm/backoffice/organisms/backoffice_virtualized_connection_table/BackofficeVirtualizedConnectionTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackofficeVirtualizedConnectionTable.js","names":[],"sources":["../../../../../src/backoffice/organisms/backoffice_virtualized_connection_table/BackofficeVirtualizedConnectionTable.tsx"],"sourcesContent":["import { type JSX } from 'react';\nimport { VirtualizedConnectionTable } from '../../../components/data-table/VirtualizedConnectionTable.js';\nimport type {\n  DataTableColumn,\n  GetRowId,\n} from '../../../components/data-table/DataTable.js';\nimport { mapInfiniteScroll, mapVirtualization } from './helpers.js';\n\nexport type BackofficeVirtualizationConfig = {\n  enabled: boolean;\n  rowHeightPx: number;\n  overscan: number;\n};\n\nexport type BackofficeInfiniteScrollConfig = {\n  enabled: boolean;\n  thresholdPx?: number;\n  autoLoad?: boolean;\n};\n\nexport type BackofficeVirtualizedConnectionTableProps<Row> = {\n  columns: readonly DataTableColumn<Row>[];\n  rows: readonly Row[];\n  getRowId: GetRowId<Row>;\n  emptyState?: JSX.Element;\n  className?: string;\n  gridTemplateColumns?: string;\n\n  virtualization?: BackofficeVirtualizationConfig;\n\n  infiniteScroll?: BackofficeInfiniteScrollConfig;\n  hasNextPage?: boolean;\n  isLoadingMore?: boolean;\n  onLoadMore?: () => void;\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\n};\n\nexport const BackofficeVirtualizedConnectionTable = <Row,>({\n  columns,\n  rows,\n  getRowId,\n  emptyState,\n  className,\n  gridTemplateColumns,\n  virtualization,\n  infiniteScroll,\n  hasNextPage,\n  isLoadingMore,\n  onLoadMore,\n  ariaLabel,\n  ariaLabelledBy,\n}: BackofficeVirtualizedConnectionTableProps<Row>): JSX.Element => {\n  return (\n    <VirtualizedConnectionTable\n      columns={columns}\n      rows={rows}\n      getRowId={getRowId}\n      emptyState={emptyState}\n      className={className}\n      gridTemplateColumns={gridTemplateColumns}\n      kind={undefined}\n      classes={undefined}\n      virtualization={mapVirtualization(virtualization)}\n      infiniteScroll={mapInfiniteScroll(infiniteScroll)}\n      hasNextPage={hasNextPage}\n      isLoadingMore={isLoadingMore}\n      onLoadMore={onLoadMore}\n      ariaLabel={ariaLabel}\n      ariaLabelledBy={ariaLabelledBy}\n    />\n  );\n};\n\nexport default BackofficeVirtualizedConnectionTable;\n"],"mappings":";;;;AAsCA,IAAa,KAA8C,EACzD,YACA,SACA,aACA,eACA,cACA,wBACA,mBACA,mBACA,gBACA,kBACA,eACA,cACA,wBAGE,kBAAC,GAAD;CACW;CACH;CACI;CACE;CACD;CACU;CACrB,MAAM,KAAA;CACN,SAAS,KAAA;CACT,gBAAgB,EAAkB,EAAe;CACjD,gBAAgB,EAAkB,EAAe;CACpC;CACE;CACH;CACD;CACK;CAChB,CAAA"}
+{"version":3,"file":"BackofficeVirtualizedConnectionTable.js","names":[],"sources":["../../../../../src/backoffice/organisms/backoffice_virtualized_connection_table/BackofficeVirtualizedConnectionTable.tsx"],"sourcesContent":["import { type JSX } from 'react';\nimport { VirtualizedConnectionTable } from '../../../components/data-table/VirtualizedConnectionTable.js';\nimport type {\n  DataTableBodyScrollMode,\n  DataTableColumn,\n  GetRowId,\n} from '../../../components/data-table/DataTable.js';\nimport { mapInfiniteScroll, mapVirtualization } from './helpers.js';\n\nexport type BackofficeVirtualizationConfig = {\n  enabled: boolean;\n  rowHeightPx: number;\n  overscan: number;\n};\n\nexport type BackofficeInfiniteScrollConfig = {\n  enabled: boolean;\n  thresholdPx?: number;\n  autoLoad?: boolean;\n};\n\nexport type BackofficeVirtualizedConnectionTableProps<Row> = {\n  columns: readonly DataTableColumn<Row>[];\n  rows: readonly Row[];\n  getRowId: GetRowId<Row>;\n  emptyState?: JSX.Element;\n  className?: string;\n  gridTemplateColumns?: string;\n\n  virtualization?: BackofficeVirtualizationConfig;\n\n  infiniteScroll?: BackofficeInfiniteScrollConfig;\n  hasNextPage?: boolean;\n  isLoadingMore?: boolean;\n  onLoadMore?: () => void;\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\n  bodyScrollMode?: DataTableBodyScrollMode;\n};\n\nexport const BackofficeVirtualizedConnectionTable = <Row,>({\n  columns,\n  rows,\n  getRowId,\n  emptyState,\n  className,\n  gridTemplateColumns,\n  virtualization,\n  infiniteScroll,\n  hasNextPage,\n  isLoadingMore,\n  onLoadMore,\n  ariaLabel,\n  ariaLabelledBy,\n  bodyScrollMode,\n}: BackofficeVirtualizedConnectionTableProps<Row>): JSX.Element => {\n  return (\n    <VirtualizedConnectionTable\n      columns={columns}\n      rows={rows}\n      getRowId={getRowId}\n      emptyState={emptyState}\n      className={className}\n      gridTemplateColumns={gridTemplateColumns}\n      kind={undefined}\n      classes={undefined}\n      virtualization={mapVirtualization(virtualization)}\n      infiniteScroll={mapInfiniteScroll(infiniteScroll)}\n      hasNextPage={hasNextPage}\n      isLoadingMore={isLoadingMore}\n      onLoadMore={onLoadMore}\n      ariaLabel={ariaLabel}\n      ariaLabelledBy={ariaLabelledBy}\n      bodyScrollMode={bodyScrollMode}\n    />\n  );\n};\n\nexport default BackofficeVirtualizedConnectionTable;\n"],"mappings":";;;;AAwCA,IAAa,KAA8C,EACzD,YACA,SACA,aACA,eACA,cACA,wBACA,mBACA,mBACA,gBACA,kBACA,eACA,cACA,mBACA,wBAGE,kBAAC,GAAD;CACW;CACH;CACI;CACE;CACD;CACU;CACrB,MAAM,KAAA;CACN,SAAS,KAAA;CACT,gBAAgB,EAAkB,EAAe;CACjD,gBAAgB,EAAkB,EAAe;CACpC;CACE;CACH;CACD;CACK;CACA;CAChB,CAAA"}

package/lib/esm/backoffice/templates/detail_page_template/DetailPageTemplate.js

@@ -1,54 +1,57 @@
 import { cx as e } from "../../../theme/tools.js";
 import { EntityHeader as t } from "../../organisms/entity_header/EntityHeader.js";
-import { body as n, container as r, headerCard as i, headerCardDensity as a, rowSingle as o, rowSplit as s, rowSplitBase as c, sidePanelBase as l, sidePanelCard as u, sidePanelPlain as d, sidePanelTopVar as f } from "./detailPageTemplate.css.js";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { body as n, bodyRow as r, bodyViewport as i, container as a, containerNoTabs as o, containerWithTabs as s, headerCard as c, headerCardDensity as l, rowSingle as u, rowSplit as d, rowSplitBase as f, sidePanelBase as p, sidePanelCard as m, sidePanelPlain as h, sidePanelTopVar as g, staticRow as _ } from "./detailPageTemplate.css.js";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
 //#region src/backoffice/templates/detail_page_template/DetailPageTemplate.tsx
-var h = (h) => {
-	let { children: g, aboveContent: _, className: v, tabsNode: y, sidePanel: b, sidePanelVariant: x = "card", sidePanelStickyTop: S, layoutVariant: C, headerDensity: w = "default" } = h, T = b != null, E = "single";
-	T && (E = "split");
-	let D = C ?? E;
-	T || (D = "single");
-	let O = D === "split", k = o;
-	O && (k = e(s, c));
-	let A;
-	A = "headerNode" in h ? h.headerNode : /* @__PURE__ */ p(t, { ...h.header });
-	let j = S?.trim(), M;
-	j != null && j !== "" && (M = { [f]: j });
-	let N = u;
-	x === "plain" && (N = d);
-	let P = e(l, N);
-	return /* @__PURE__ */ m("div", {
-		className: e(r, v),
-		style: M,
+var b = (b) => {
+	let { children: x, aboveContent: S, className: C, tabsNode: w, sidePanel: T, sidePanelVariant: E = "card", sidePanelStickyTop: D, layoutVariant: O, headerDensity: k = "default" } = b, A = T != null, j = "single";
+	A && (j = "split");
+	let M = O ?? j;
+	A || (M = "single");
+	let N = M === "split", P = u;
+	N && (P = e(d, f));
+	let F;
+	F = "headerNode" in b ? b.headerNode : /* @__PURE__ */ v(t, { ...b.header });
+	let I = D?.trim(), L;
+	I != null && I !== "" && (L = { [g]: I });
+	let R = m;
+	E === "plain" && (R = h);
+	let z = e(p, R), B = w != null, V = o;
+	return B && (V = s), /* @__PURE__ */ y("div", {
+		className: e(a, V, C),
+		style: L,
 		children: [
-			/* @__PURE__ */ p("div", {
-				className: k,
-				children: /* @__PURE__ */ p("div", {
-					className: e(i, a[w]),
-					children: A
+			/* @__PURE__ */ v("div", {
+				className: e(P, _),
+				children: /* @__PURE__ */ v("div", {
+					className: e(c, l[k]),
+					children: F
 				})
 			}),
-			y != null && /* @__PURE__ */ p("div", {
-				className: k,
-				children: /* @__PURE__ */ p("div", {
-					className: "eno74pd eno74pc txvbqbpty txvbqbv49 txvbqbly7 txvbqbuv7",
-					children: y
+			B && /* @__PURE__ */ v("div", {
+				className: e(P, "eno74p5 txvbqbjh7"),
+				children: /* @__PURE__ */ v("div", {
+					className: "eno74pj eno74pi txvbqbpty txvbqbv49 txvbqbly7 txvbqbuv7",
+					children: w
 				})
 			}),
-			/* @__PURE__ */ m("div", {
-				className: k,
-				children: [/* @__PURE__ */ m("div", {
-					className: n,
-					children: [_, g]
-				}), T && /* @__PURE__ */ p("aside", {
-					className: P,
-					children: b
-				})]
+			/* @__PURE__ */ v("div", {
+				className: i,
+				children: /* @__PURE__ */ y("div", {
+					className: e(P, r),
+					children: [/* @__PURE__ */ y("div", {
+						className: n,
+						children: [S, x]
+					}), A && /* @__PURE__ */ v("aside", {
+						className: z,
+						children: T
+					})]
+				})
 			})
 		]
 	});
 };
 //#endregion
-export { h as DetailPageTemplate, h as default };
+export { b as DetailPageTemplate, b as default };
 
 //# sourceMappingURL=DetailPageTemplate.js.map

package/lib/esm/backoffice/templates/detail_page_template/DetailPageTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"DetailPageTemplate.js","names":[],"sources":["../../../../../src/backoffice/templates/detail_page_template/DetailPageTemplate.tsx"],"sourcesContent":["import { type CSSProperties, type JSX, type ReactNode } from 'react';\n\nimport {\n  EntityHeader,\n  type EntityHeaderProps,\n} from '../../organisms/entity_header/EntityHeader.js';\nimport * as styles from './detailPageTemplate.css.js';\nimport { cx } from '../../../theme/tools.js';\n\ntype WithHeaderProps = {\n  header: EntityHeaderProps;\n  headerNode?: never;\n};\n\ntype WithHeaderNode = {\n  header?: never;\n  headerNode: ReactNode;\n};\n\nexport type DetailSidePanelVariant = 'card' | 'plain';\nexport type DetailLayoutVariant = 'single' | 'split';\nexport type DetailHeaderDensity = 'default' | 'compact';\n\nexport type DetailPageTemplateProps = (WithHeaderProps | WithHeaderNode) & {\n  children: ReactNode;\n  aboveContent?: ReactNode;\n  tabsNode?: ReactNode;\n  sidePanel?: ReactNode;\n  sidePanelVariant?: DetailSidePanelVariant;\n  sidePanelStickyTop?: string;\n  layoutVariant?: DetailLayoutVariant;\n  headerDensity?: DetailHeaderDensity;\n  className?: string;\n};\n\nexport const DetailPageTemplate = (\n  props: DetailPageTemplateProps,\n): JSX.Element => {\n  const {\n    children,\n    aboveContent,\n    className,\n    tabsNode,\n    sidePanel,\n    sidePanelVariant = 'card',\n    sidePanelStickyTop,\n    layoutVariant,\n    headerDensity = 'default',\n  } = props;\n\n  const hasSidePanel = sidePanel != null;\n  let autoLayoutVariant: DetailLayoutVariant = 'single';\n  if (hasSidePanel) {\n    autoLayoutVariant = 'split';\n  }\n  let resolvedLayoutVariant = layoutVariant ?? autoLayoutVariant;\n  if (!hasSidePanel) {\n    resolvedLayoutVariant = 'single';\n  }\n  const isSplitLayout = resolvedLayoutVariant === 'split';\n  let rowClassName = styles.rowSingle;\n  if (isSplitLayout) {\n    rowClassName = cx(styles.rowSplit, styles.rowSplitBase);\n  }\n\n  let resolvedHeader: ReactNode;\n  if ('headerNode' in props) {\n    resolvedHeader = props.headerNode;\n  } else {\n    resolvedHeader = <EntityHeader {...props.header} />;\n  }\n\n  const resolvedStickyTop = sidePanelStickyTop?.trim();\n  let containerStyle: CSSProperties | undefined;\n  if (resolvedStickyTop != null && resolvedStickyTop !== '') {\n    containerStyle = {\n      [styles.sidePanelTopVar]: resolvedStickyTop,\n    };\n  }\n\n  let sidePanelClassName = styles.sidePanelCard;\n  if (sidePanelVariant === 'plain') {\n    sidePanelClassName = styles.sidePanelPlain;\n  }\n  const resolvedSidePanelClassName = cx(\n    styles.sidePanelBase,\n    sidePanelClassName,\n  );\n\n  return (\n    <div className={cx(styles.container, className)} style={containerStyle}>\n      <div className={rowClassName}>\n        <div\n          className={cx(\n            styles.headerCard,\n            styles.headerCardDensity[headerDensity],\n          )}\n        >\n          {resolvedHeader}\n        </div>\n      </div>\n      {tabsNode != null && (\n        <div className={rowClassName}>\n          <div className={styles.tabsRow}>{tabsNode}</div>\n        </div>\n      )}\n      <div className={rowClassName}>\n        <div className={styles.body}>\n          {aboveContent}\n          {children}\n        </div>\n        {hasSidePanel && (\n          <aside className={resolvedSidePanelClassName}>{sidePanel}</aside>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default DetailPageTemplate;\n"],"mappings":";;;;;AAmCA,IAAa,KACX,MACgB;CAChB,IAAM,EACJ,aACA,iBACA,cACA,aACA,cACA,sBAAmB,QACnB,uBACA,kBACA,mBAAgB,cACd,GAEE,IAAe,KAAa,MAC9B,IAAyC;CAC7C,AAAI,MACF,IAAoB;CAEtB,IAAI,IAAwB,KAAiB;CAC7C,AAAK,MACH,IAAwB;CAE1B,IAAM,IAAgB,MAA0B,SAC5C,IAAe;CACnB,AAAI,MACF,IAAe,EAAG,GAAiB,EAAoB;CAGzD,IAAI;CACJ,AAGE,IAHE,gBAAgB,IACD,EAAM,aAEN,kBAAC,GAAD,EAAc,GAAI,EAAM,QAAU,CAAA;CAGrD,IAAM,IAAoB,GAAoB,MAAM,EAChD;CACJ,AAAI,KAAqB,QAAQ,MAAsB,OACrD,IAAiB,GACd,IAAyB,GAC3B;CAGH,IAAI,IAAqB;CACzB,AAAI,MAAqB,YACvB,IAAqB;CAEvB,IAAM,IAA6B,EACjC,GACA,EACD;CAED,OACE,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAkB,EAAU;EAAE,OAAO;YAAxD;GACE,kBAAC,OAAD;IAAK,WAAW;cACd,kBAAC,OAAD;KACE,WAAW,EACT,GACA,EAAyB,GAC1B;eAEA;KACG,CAAA;IACF,CAAA;GACL,KAAY,QACX,kBAAC,OAAD;IAAK,WAAW;cACd,kBAAC,OAAD;KAAK,WAAW;eAAiB;KAAe,CAAA;IAC5C,CAAA;GAER,kBAAC,OAAD;IAAK,WAAW;cAAhB,CACE,kBAAC,OAAD;KAAK,WAAW;eAAhB,CACG,GACA,EACG;QACL,KACC,kBAAC,SAAD;KAAO,WAAW;eAA6B;KAAkB,CAAA,CAE/D;;GACF"}
+{"version":3,"file":"DetailPageTemplate.js","names":[],"sources":["../../../../../src/backoffice/templates/detail_page_template/DetailPageTemplate.tsx"],"sourcesContent":["import { type CSSProperties, type JSX, type ReactNode } from 'react';\n\nimport {\n  EntityHeader,\n  type EntityHeaderProps,\n} from '../../organisms/entity_header/EntityHeader.js';\nimport * as styles from './detailPageTemplate.css.js';\nimport { cx } from '../../../theme/tools.js';\n\ntype WithHeaderProps = {\n  header: EntityHeaderProps;\n  headerNode?: never;\n};\n\ntype WithHeaderNode = {\n  header?: never;\n  headerNode: ReactNode;\n};\n\nexport type DetailSidePanelVariant = 'card' | 'plain';\nexport type DetailLayoutVariant = 'single' | 'split';\nexport type DetailHeaderDensity = 'default' | 'compact';\n\nexport type DetailPageTemplateProps = (WithHeaderProps | WithHeaderNode) & {\n  children: ReactNode;\n  aboveContent?: ReactNode;\n  tabsNode?: ReactNode;\n  sidePanel?: ReactNode;\n  sidePanelVariant?: DetailSidePanelVariant;\n  sidePanelStickyTop?: string;\n  layoutVariant?: DetailLayoutVariant;\n  headerDensity?: DetailHeaderDensity;\n  className?: string;\n};\n\nexport const DetailPageTemplate = (\n  props: DetailPageTemplateProps,\n): JSX.Element => {\n  const {\n    children,\n    aboveContent,\n    className,\n    tabsNode,\n    sidePanel,\n    sidePanelVariant = 'card',\n    sidePanelStickyTop,\n    layoutVariant,\n    headerDensity = 'default',\n  } = props;\n\n  const hasSidePanel = sidePanel != null;\n  let autoLayoutVariant: DetailLayoutVariant = 'single';\n  if (hasSidePanel) {\n    autoLayoutVariant = 'split';\n  }\n  let resolvedLayoutVariant = layoutVariant ?? autoLayoutVariant;\n  if (!hasSidePanel) {\n    resolvedLayoutVariant = 'single';\n  }\n  const isSplitLayout = resolvedLayoutVariant === 'split';\n  let rowClassName = styles.rowSingle;\n  if (isSplitLayout) {\n    rowClassName = cx(styles.rowSplit, styles.rowSplitBase);\n  }\n\n  let resolvedHeader: ReactNode;\n  if ('headerNode' in props) {\n    resolvedHeader = props.headerNode;\n  } else {\n    resolvedHeader = <EntityHeader {...props.header} />;\n  }\n\n  const resolvedStickyTop = sidePanelStickyTop?.trim();\n  let containerStyle: CSSProperties | undefined;\n  if (resolvedStickyTop != null && resolvedStickyTop !== '') {\n    containerStyle = {\n      [styles.sidePanelTopVar]: resolvedStickyTop,\n    };\n  }\n\n  let sidePanelClassName = styles.sidePanelCard;\n  if (sidePanelVariant === 'plain') {\n    sidePanelClassName = styles.sidePanelPlain;\n  }\n  const resolvedSidePanelClassName = cx(\n    styles.sidePanelBase,\n    sidePanelClassName,\n  );\n\n  const hasTabs = tabsNode != null;\n  let tabsContainerClassName = styles.containerNoTabs;\n  if (hasTabs) {\n    tabsContainerClassName = styles.containerWithTabs;\n  }\n\n  return (\n    <div\n      className={cx(styles.container, tabsContainerClassName, className)}\n      style={containerStyle}\n    >\n      <div className={cx(rowClassName, styles.staticRow)}>\n        <div\n          className={cx(\n            styles.headerCard,\n            styles.headerCardDensity[headerDensity],\n          )}\n        >\n          {resolvedHeader}\n        </div>\n      </div>\n      {hasTabs && (\n        <div className={cx(rowClassName, styles.staticRow)}>\n          <div className={styles.tabsRow}>{tabsNode}</div>\n        </div>\n      )}\n      <div className={styles.bodyViewport}>\n        <div className={cx(rowClassName, styles.bodyRow)}>\n          <div className={styles.body}>\n            {aboveContent}\n            {children}\n          </div>\n          {hasSidePanel && (\n            <aside className={resolvedSidePanelClassName}>{sidePanel}</aside>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default DetailPageTemplate;\n"],"mappings":";;;;;AAmCA,IAAa,KACX,MACgB;CAChB,IAAM,EACJ,aACA,iBACA,cACA,aACA,cACA,sBAAmB,QACnB,uBACA,kBACA,mBAAgB,cACd,GAEE,IAAe,KAAa,MAC9B,IAAyC;CAC7C,AAAI,MACF,IAAoB;CAEtB,IAAI,IAAwB,KAAiB;CAC7C,AAAK,MACH,IAAwB;CAE1B,IAAM,IAAgB,MAA0B,SAC5C,IAAe;CACnB,AAAI,MACF,IAAe,EAAG,GAAiB,EAAoB;CAGzD,IAAI;CACJ,AAGE,IAHE,gBAAgB,IACD,EAAM,aAEN,kBAAC,GAAD,EAAc,GAAI,EAAM,QAAU,CAAA;CAGrD,IAAM,IAAoB,GAAoB,MAAM,EAChD;CACJ,AAAI,KAAqB,QAAQ,MAAsB,OACrD,IAAiB,GACd,IAAyB,GAC3B;CAGH,IAAI,IAAqB;CACzB,AAAI,MAAqB,YACvB,IAAqB;CAEvB,IAAM,IAA6B,EACjC,GACA,EACD,EAEK,IAAU,KAAY,MACxB,IAAyB;CAK7B,OAJI,MACF,IAAyB,IAIzB,kBAAC,OAAD;EACE,WAAW,EAAG,GAAkB,GAAwB,EAAU;EAClE,OAAO;YAFT;GAIE,kBAAC,OAAD;IAAK,WAAW,EAAG,GAAc,EAAiB;cAChD,kBAAC,OAAD;KACE,WAAW,EACT,GACA,EAAyB,GAC1B;eAEA;KACG,CAAA;IACF,CAAA;GACL,KACC,kBAAC,OAAD;IAAK,WAAW,EAAG,GAAc,oBAAiB;cAChD,kBAAC,OAAD;KAAK,WAAW;eAAiB;KAAe,CAAA;IAC5C,CAAA;GAER,kBAAC,OAAD;IAAK,WAAW;cACd,kBAAC,OAAD;KAAK,WAAW,EAAG,GAAc,EAAe;eAAhD,CACE,kBAAC,OAAD;MAAK,WAAW;gBAAhB,CACG,GACA,EACG;SACL,KACC,kBAAC,SAAD;MAAO,WAAW;gBAA6B;MAAkB,CAAA,CAE/D;;IACF,CAAA;GACF"}

package/lib/esm/backoffice/templates/detail_page_template/detailPageTemplate.css.js

@@ -8,11 +8,11 @@
 /* empty css                                               */
 /* empty css                                  */
 //#region src/backoffice/templates/detail_page_template/detailPageTemplate.css.ts
-var e = "var(--eno74p0)", t = "eno74p2 eno74p1 txvbqb9ip txvbqbai7 txvbqbaop", n = "eno74p3 txvbqbu7g txvbqbk5y txvbqb9ip txvbqbai7 txvbqbaop", r = "eno74p4 txvbqb9iy txvbqbbwp txvbqbbxf txvbqbc7 txvbqbco", i = "eno74p5 txvbqbu7g txvbqbk5y txvbqbaop", a = "eno74p6", o = {
+var e = "var(--eno74p0)", t = "eno74p2 eno74p1 txvbqb9iy txvbqbaop txvbqbcgg txvbqbjh7", n = "eno74p3", r = "eno74p4", i = "eno74p5 txvbqbjh7", a = "eno74p6 txvbqbu7g txvbqbk5y txvbqb9ip txvbqbai7 txvbqbaop", o = "eno74p7 txvbqb9iy txvbqbbwp txvbqbbxf txvbqbc7 txvbqbco", s = "eno74p8 txvbqbjh7", c = "eno74p9 txvbqbu7g txvbqbk5y txvbqbaop", l = "eno74pa", u = {
 	default: "_1995g4r1 _1995g4r0 _1995g4r2 _1995g4rb _1995g4rd _1995g4rg _1995g4rm",
 	compact: "_1995g4r1 _1995g4r0 _1995g4r2 _1995g4ra _1995g4rd _1995g4rg _1995g4rl"
-}, s = "eno74p7 txvbqb9ip txvbqbai7 txvbqbaop txvbqbk5y", c = "eno74p9 eno74p8 txvbqbpu7 txvbqbpu6 txvbqb9ip txvbqbai7 txvbqbaog txvbqbk5y txvbqbdp", l = "eno74pa _1995g4r1 _1995g4r0 _1995g4r3 _1995g4ra _1995g4rd _1995g4rg _1995g4rl", u = "eno74pb txvbqb12g txvbqb1py txvbqbv0t txvbqblag txvbqb8ug", d = "eno74pd eno74pc txvbqbpty txvbqbv49 txvbqbly7 txvbqbuv7";
+}, d = "eno74pb txvbqb9ip txvbqbai7 txvbqbaop txvbqbk5y txvbqbjh7", f = "eno74pd eno74pc txvbqbjh7", p = "eno74pf eno74pe txvbqbpu7 txvbqbpu6 txvbqb9ip txvbqbai7 txvbqbaog txvbqbk5y txvbqbjh7 txvbqbdp", m = "eno74pg _1995g4r1 _1995g4r0 _1995g4r3 _1995g4ra _1995g4rd _1995g4rg _1995g4rl", h = "eno74ph txvbqb12g txvbqb1py txvbqbv0t txvbqblag txvbqb8ug", g = "eno74pj eno74pi txvbqbpty txvbqbv49 txvbqbly7 txvbqbuv7";
 //#endregion
-export { s as body, t as container, a as headerCard, o as headerCardDensity, n as rowSingle, r as rowSplit, i as rowSplitBase, c as sidePanelBase, l as sidePanelCard, u as sidePanelPlain, e as sidePanelTopVar, d as tabsRow };
+export { d as body, s as bodyRow, f as bodyViewport, t as container, n as containerNoTabs, r as containerWithTabs, l as headerCard, u as headerCardDensity, a as rowSingle, o as rowSplit, c as rowSplitBase, p as sidePanelBase, m as sidePanelCard, h as sidePanelPlain, e as sidePanelTopVar, i as staticRow, g as tabsRow };
 
 //# sourceMappingURL=detailPageTemplate.css.js.map

package/lib/esm/backoffice/templates/detail_page_template/detailPageTemplate.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"detailPageTemplate.css.js","names":[],"sources":["../../../../../src/backoffice/templates/detail_page_template/detailPageTemplate.css.ts"],"sourcesContent":["import { createVar, style } from '@vanilla-extract/css';\nimport { adminSurfaceRecipe } from '../../../admin/theme/adminSurface.css.js';\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\n\nimport { backofficeLayoutTokens } from '../../layout/backofficeLayoutTokens.js';\n\nconst detailTokens = backofficeLayoutTokens.detail;\n\nexport const sidePanelTopVar = createVar();\n\nexport const container = style([\n  sprinkles({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 4,\n  }),\n  {\n    vars: {\n      [sidePanelTopVar]: detailTokens.stickyTop,\n    },\n  },\n]);\n\nexport const rowSingle = sprinkles({\n  width: 'full',\n  minWidth: 0,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n});\n\nexport const rowSplit = sprinkles({\n  display: 'grid',\n  gridTemplateColumns: {\n    base: 'detailSingle',\n    min1200: 'detailAside320',\n  },\n  alignItems: {\n    base: 'stretch',\n    min1200: 'flex-start',\n  },\n});\n\nexport const rowSplitBase = sprinkles({\n  width: 'full',\n  minWidth: 0,\n  gap: 4,\n});\n\nexport const headerCard = style([\n  {\n    minWidth: 0,\n  },\n]);\n\nexport const headerCardDensity = {\n  default: adminSurfaceRecipe({\n    level: 'panel',\n    radius: 'lg',\n    border: 'subtle',\n    elevation: 'none',\n    padding: 'lg',\n  }),\n  compact: adminSurfaceRecipe({\n    level: 'panel',\n    radius: 'md',\n    border: 'subtle',\n    elevation: 'none',\n    padding: 'md',\n  }),\n};\n\nexport const body = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n  minWidth: 0,\n});\n\nexport const sidePanelBase = style([\n  sprinkles({\n    position: {\n      base: 'static',\n      min1200: 'sticky',\n    },\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 3,\n    minWidth: 0,\n    alignSelf: 'flex-start',\n  }),\n  {\n    top: sidePanelTopVar,\n  },\n]);\n\nexport const sidePanelCard = style([\n  adminSurfaceRecipe({\n    level: 'panelMuted',\n    radius: 'md',\n    border: 'subtle',\n    elevation: 'none',\n    padding: 'md',\n  }),\n]);\n\nexport const sidePanelPlain = sprinkles({\n  borderWidth: 0,\n  borderStyle: 'none',\n  backgroundColor: 'transparent',\n  padding: 0,\n  boxShadow: 'none',\n});\n\nexport const tabsRow = style([\n  sprinkles({\n    position: 'sticky',\n    backgroundColor: 'background',\n    paddingBottom: 2,\n    zIndex: 2,\n  }),\n  {\n    top: sidePanelTopVar,\n  },\n]);\n"],"mappings":""}
+{"version":3,"file":"detailPageTemplate.css.js","names":[],"sources":["../../../../../src/backoffice/templates/detail_page_template/detailPageTemplate.css.ts"],"sourcesContent":["import { createVar, style } from '@vanilla-extract/css';\nimport { adminSurfaceRecipe } from '../../../admin/theme/adminSurface.css.js';\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\n\nimport { backofficeLayoutTokens } from '../../layout/backofficeLayoutTokens.js';\n\nconst detailTokens = backofficeLayoutTokens.detail;\n\nexport const sidePanelTopVar = createVar();\n\nexport const container = style([\n  sprinkles({\n    display: 'grid',\n    gap: 4,\n    height: 'full',\n    minHeight: 0,\n  }),\n  {\n    vars: {\n      [sidePanelTopVar]: detailTokens.stickyTop,\n    },\n  },\n]);\n\nexport const containerNoTabs = style({\n  gridTemplateRows: 'auto minmax(0, 1fr)',\n});\n\nexport const containerWithTabs = style({\n  gridTemplateRows: 'auto auto minmax(0, 1fr)',\n});\n\nexport const staticRow = sprinkles({\n  minHeight: 0,\n});\n\nexport const rowSingle = sprinkles({\n  width: 'full',\n  minWidth: 0,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n});\n\nexport const rowSplit = sprinkles({\n  display: 'grid',\n  gridTemplateColumns: {\n    base: 'detailSingle',\n    min1200: 'detailAside320',\n  },\n  alignItems: {\n    base: 'stretch',\n    min1200: 'flex-start',\n  },\n});\n\nexport const bodyRow = sprinkles({\n  minHeight: 0,\n});\n\nexport const rowSplitBase = sprinkles({\n  width: 'full',\n  minWidth: 0,\n  gap: 4,\n});\n\nexport const headerCard = style([\n  {\n    minWidth: 0,\n  },\n]);\n\nexport const headerCardDensity = {\n  default: adminSurfaceRecipe({\n    level: 'panel',\n    radius: 'lg',\n    border: 'subtle',\n    elevation: 'none',\n    padding: 'lg',\n  }),\n  compact: adminSurfaceRecipe({\n    level: 'panel',\n    radius: 'md',\n    border: 'subtle',\n    elevation: 'none',\n    padding: 'md',\n  }),\n};\n\nexport const body = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n  minWidth: 0,\n  minHeight: 0,\n});\n\nexport const bodyViewport = style([\n  sprinkles({\n    minHeight: 0,\n  }),\n  {\n    overflowY: 'auto',\n    scrollbarWidth: 'thin',\n  },\n]);\n\nexport const sidePanelBase = style([\n  sprinkles({\n    position: {\n      base: 'static',\n      min1200: 'sticky',\n    },\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 3,\n    minWidth: 0,\n    minHeight: 0,\n    alignSelf: 'flex-start',\n  }),\n  {\n    top: sidePanelTopVar,\n  },\n]);\n\nexport const sidePanelCard = style([\n  adminSurfaceRecipe({\n    level: 'panelMuted',\n    radius: 'md',\n    border: 'subtle',\n    elevation: 'none',\n    padding: 'md',\n  }),\n]);\n\nexport const sidePanelPlain = sprinkles({\n  borderWidth: 0,\n  borderStyle: 'none',\n  backgroundColor: 'transparent',\n  padding: 0,\n  boxShadow: 'none',\n});\n\nexport const tabsRow = style([\n  sprinkles({\n    position: 'sticky',\n    backgroundColor: 'background',\n    paddingBottom: 2,\n    zIndex: 2,\n  }),\n  {\n    top: sidePanelTopVar,\n  },\n]);\n"],"mappings":""}