@plumile/ui 0.1.134 → 0.1.142

package/lib/esm/backoffice/molecules/sidebar_profile_menu/sidebarProfileMenu.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebarProfileMenu.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_profile_menu/sidebarProfileMenu.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nexport const container = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n  width: 'full',\n});\n\nexport const title = sprinkles({\n  fontSize: 'xs',\n  fontWeight: 'semibold',\n  color: 'textSecondary',\n  paddingX: 1,\n});\n\nexport const hidden = sprinkles({\n  display: 'none',\n});\n\nexport const trigger = recipe({\n  base: [\n    sprinkles({\n      display: 'flex',\n      alignItems: 'center',\n      width: 'full',\n      borderWidth: 'default',\n      borderStyle: 'solid',\n      borderColor: 'borderSubtle',\n      borderRadius: 'lg',\n      backgroundColor: 'surfaceSecondary',\n      transitionProperty: 'colors',\n      transitionDuration: 120,\n      transitionTimingFunction: 'ease',\n      cursor: 'pointer',\n    }),\n    {\n      selectors: {\n        '&:hover': {\n          backgroundColor: vars.colors.surfaceElevated,\n          borderColor: vars.colors.borderStrong,\n        },\n        '&:focus-visible': {\n          outline: `2px solid ${vars.colors.primary}`,\n          outlineOffset: '2px',\n        },\n      },\n    },\n  ],\n  variants: {\n    collapsed: {\n      true: sprinkles({\n        justifyContent: 'center',\n        padding: 2,\n      }),\n      false: sprinkles({\n        justifyContent: 'space-between',\n        gap: 2,\n        paddingY: 2,\n        paddingX: 3,\n      }),\n    },\n  },\n  defaultVariants: {\n    collapsed: false,\n  },\n});\n\nexport const triggerMain = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  minWidth: 0,\n  flex: 1,\n});\n\nexport const avatar = sprinkles({\n  width: 8,\n  height: 8,\n  minWidth: 8,\n  minHeight: 8,\n  borderRadius: 'full',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  fontSize: 'xs',\n  fontWeight: 'semibold',\n  color: 'brandWhite',\n  backgroundImage: 'brandDiagonal',\n  textTransform: 'uppercase',\n});\n\nexport const identity = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  minWidth: 0,\n});\n\nexport const displayName = sprinkles({\n  fontSize: 'sm',\n  fontWeight: 'semibold',\n  color: 'text',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n\nexport const email = sprinkles({\n  fontSize: 'xs',\n  color: 'textSecondary',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n\nexport const chevron = sprinkles({\n  color: 'textSecondary',\n  transitionProperty: 'transform',\n  transitionDuration: 120,\n  transitionTimingFunction: 'ease',\n});\n\nexport const chevronOpen = sprinkles({\n  rotate: 180,\n});\n\nexport const menu = sprinkles({\n  minWidth: 56,\n  padding: 2,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n});\n\nexport const menuIdentity = style([\n  sprinkles({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 0.5,\n    paddingX: 3,\n    paddingY: 2,\n    borderBottomWidth: 'px',\n    borderBottomColor: 'borderSubtle',\n    marginBottom: 1,\n  }),\n  {\n    borderBottomStyle: 'solid',\n  },\n]);\n\nexport const menuDisplayName = sprinkles({\n  fontSize: 'sm',\n  fontWeight: 'semibold',\n  color: 'text',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n\nexport const menuEmail = sprinkles({\n  fontSize: 'xs',\n  color: 'textSecondary',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n\nexport const menuItem = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 2,\n    width: 'full',\n    borderWidth: 0,\n    borderStyle: 'none',\n    borderRadius: 'md',\n    backgroundColor: 'transparent',\n    color: 'text',\n    fontSize: 'sm',\n    fontWeight: 'medium',\n    textAlign: 'left',\n    cursor: 'pointer',\n    paddingY: 2,\n    paddingX: 3,\n    transitionProperty: 'colors',\n    transitionDuration: 120,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover:not(:disabled)': {\n        backgroundColor: vars.colors.surfaceSecondary,\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n      '&:disabled': {\n        opacity: 0.6,\n        cursor: 'not-allowed',\n      },\n    },\n  },\n]);\n\nexport const menuIcon = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  color: 'textSecondary',\n});\n"],"mappings":""}
+{"version":3,"file":"sidebarProfileMenu.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_profile_menu/sidebarProfileMenu.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nexport const container = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n  width: 'full',\n});\n\nexport const title = sprinkles({\n  fontSize: 'xs',\n  fontWeight: 'semibold',\n  paddingX: 1,\n});\n\nexport const titleTheme = style({\n  color: vars.sidebar.profileTitleColor,\n});\n\nexport const hidden = sprinkles({\n  display: 'none',\n});\n\nexport const trigger = recipe({\n  base: [\n    sprinkles({\n      display: 'flex',\n      alignItems: 'center',\n      width: 'full',\n      borderWidth: 'default',\n      borderStyle: 'solid',\n      borderRadius: 'lg',\n      transitionProperty: 'colors',\n      transitionDuration: 120,\n      transitionTimingFunction: 'ease',\n      cursor: 'pointer',\n    }),\n    {\n      backgroundColor: vars.sidebar.profileTriggerBackground,\n      borderColor: vars.sidebar.profileTriggerBorderColor,\n      selectors: {\n        '&:hover': {\n          backgroundColor: vars.sidebar.profileTriggerHoverBackground,\n          borderColor: vars.sidebar.profileTriggerHoverBorderColor,\n        },\n        '&:focus-visible': {\n          boxShadow: vars.sidebar.profileTriggerFocusRing,\n          outline: 'none',\n        },\n      },\n    },\n  ],\n  variants: {\n    collapsed: {\n      true: sprinkles({\n        justifyContent: 'center',\n        padding: 2,\n      }),\n      false: sprinkles({\n        justifyContent: 'space-between',\n        gap: 2,\n        paddingY: 2,\n        paddingX: 3,\n      }),\n    },\n  },\n  defaultVariants: {\n    collapsed: false,\n  },\n});\n\nexport const triggerMain = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  minWidth: 0,\n  flex: 1,\n});\n\nexport const avatar = sprinkles({\n  width: 8,\n  height: 8,\n  minWidth: 8,\n  minHeight: 8,\n  borderRadius: 'full',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  fontSize: 'xs',\n  fontWeight: 'semibold',\n  textTransform: 'uppercase',\n});\n\nexport const avatarTheme = style({\n  backgroundImage: vars.sidebar.profileAvatarBackgroundImage,\n  color: vars.sidebar.profileAvatarColor,\n});\n\nexport const identity = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  minWidth: 0,\n});\n\nexport const displayName = sprinkles({\n  fontSize: 'sm',\n  fontWeight: 'semibold',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n\nexport const displayNameTheme = style({\n  color: vars.sidebar.profileTextColor,\n});\n\nexport const email = sprinkles({\n  fontSize: 'xs',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n\nexport const emailTheme = style({\n  color: vars.sidebar.profileSubtextColor,\n});\n\nexport const chevron = sprinkles({\n  transitionProperty: 'transform',\n  transitionDuration: 120,\n  transitionTimingFunction: 'ease',\n});\n\nexport const chevronTheme = style({\n  color: vars.sidebar.profileSubtextColor,\n});\n\nexport const chevronOpen = sprinkles({\n  rotate: 180,\n});\n\nexport const menu = sprinkles({\n  minWidth: 56,\n  padding: 2,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n});\n\nexport const menuIdentity = style([\n  sprinkles({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 0.5,\n    paddingX: 3,\n    paddingY: 2,\n    borderBottomWidth: 'px',\n    marginBottom: 1,\n  }),\n  {\n    borderBottomColor: vars.sidebar.profileMenuBorderColor,\n    borderBottomStyle: 'solid',\n  },\n]);\n\nexport const menuDisplayName = sprinkles({\n  fontSize: 'sm',\n  fontWeight: 'semibold',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n\nexport const menuDisplayNameTheme = style({\n  color: vars.sidebar.profileTextColor,\n});\n\nexport const menuEmail = sprinkles({\n  fontSize: 'xs',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n\nexport const menuEmailTheme = style({\n  color: vars.sidebar.profileSubtextColor,\n});\n\nexport const menuItem = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 2,\n    width: 'full',\n    borderWidth: 0,\n    borderStyle: 'none',\n    borderRadius: 'md',\n    backgroundColor: 'transparent',\n    fontSize: 'sm',\n    fontWeight: 'medium',\n    textAlign: 'left',\n    cursor: 'pointer',\n    paddingY: 2,\n    paddingX: 3,\n    transitionProperty: 'colors',\n    transitionDuration: 120,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    color: vars.sidebar.profileTextColor,\n    selectors: {\n      '&:hover:not(:disabled)': {\n        backgroundColor: vars.sidebar.profileMenuHoverBackground,\n      },\n      '&:focus-visible': {\n        boxShadow: vars.sidebar.profileTriggerFocusRing,\n        outline: 'none',\n      },\n      '&:disabled': {\n        opacity: 0.6,\n        cursor: 'not-allowed',\n      },\n    },\n  },\n]);\n\nexport const menuIcon = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n});\n\nexport const menuIconTheme = style({\n  color: vars.sidebar.profileSubtextColor,\n});\n"],"mappings":""}

package/lib/esm/backoffice/organisms/audit_timeline/AuditTimeline.js

@@ -1,52 +1,87 @@
 import { cx as e } from "../../../theme/tools.js";
-import { body as t, description as n, dot as r, gutter as i, header as a, item as o, line as s, list as c, meta as l, time as u, title as d } from "./auditTimeline.css.js";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { actor as t, body as n, description as r, details as i, dot as a, gutter as o, header as s, item as c, line as l, list as u, meta as d, metric as f, metricLabel as p, metricValue as m, metrics as h, source as g, time as _, title as v } from "./auditTimeline.css.js";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
 //#region src/backoffice/organisms/audit_timeline/AuditTimeline.tsx
-var m = ({ events: m, className: h, renderEvent: g }) => m.length === 0 ? null : /* @__PURE__ */ f("ol", {
-	className: e(c, h),
-	children: m.map((e, c) => {
-		let h = c === m.length - 1, _ = g?.(e);
-		if (_ != null) return /* @__PURE__ */ f("li", { children: _ }, e.id);
-		let v = null;
-		h || (v = /* @__PURE__ */ f("div", { className: s }));
-		let y = null;
-		e.time != null && (y = /* @__PURE__ */ f("div", {
-			className: u,
+var S = ({ events: S, emptyState: C = null, density: w = "comfortable", className: T, renderEvent: E }) => S.length === 0 ? /* @__PURE__ */ b(y, { children: C }) : /* @__PURE__ */ b("ol", {
+	className: e(u({ density: w }), T),
+	children: S.map((e, u) => {
+		let y = u === S.length - 1, C = E?.(e, {
+			index: u,
+			isLast: y
+		});
+		if (C != null) return /* @__PURE__ */ b("li", {
+			className: c,
+			children: C
+		}, e.id);
+		let w = null;
+		y || (w = /* @__PURE__ */ b("div", { className: l }));
+		let T = null;
+		e.time != null && (T = /* @__PURE__ */ b("div", {
+			className: _,
 			children: e.time
 		}));
-		let b = null;
-		e.description != null && (b = /* @__PURE__ */ f("div", {
-			className: n,
+		let D = null;
+		e.description != null && (D = /* @__PURE__ */ b("div", {
+			className: r,
 			children: e.description
 		}));
-		let x = null;
-		return e.meta != null && (x = /* @__PURE__ */ f("div", {
-			className: l,
-			children: e.meta
-		})), /* @__PURE__ */ p("li", {
-			className: o,
-			children: [/* @__PURE__ */ p("div", {
-				className: i,
+		let O = [];
+		e.actor != null && O.push(/* @__PURE__ */ b("span", {
+			className: t,
+			children: e.actor
+		}, "actor")), e.source != null && O.push(/* @__PURE__ */ b("span", {
+			className: g,
+			children: e.source
+		}, "source")), e.meta != null && O.push(/* @__PURE__ */ b("span", { children: e.meta }, "meta"));
+		let k = null;
+		O.length > 0 && (k = /* @__PURE__ */ b("div", {
+			className: d,
+			children: O
+		}));
+		let A = null;
+		e.metrics != null && e.metrics.length > 0 && (A = /* @__PURE__ */ b("div", {
+			className: h,
+			children: e.metrics.map((e) => /* @__PURE__ */ x("span", {
+				className: f,
+				children: [/* @__PURE__ */ b("span", {
+					className: p,
+					children: e.label
+				}), /* @__PURE__ */ b("span", {
+					className: m,
+					children: e.value
+				})]
+			}, e.id))
+		}));
+		let j = null;
+		return e.details != null && (j = /* @__PURE__ */ b("div", {
+			className: i,
+			children: e.details
+		})), /* @__PURE__ */ x("li", {
+			className: c,
+			children: [/* @__PURE__ */ x("div", {
+				className: o,
 				"aria-hidden": "true",
-				children: [/* @__PURE__ */ f("div", { className: r }), v]
-			}), /* @__PURE__ */ p("div", {
-				className: t,
+				children: [/* @__PURE__ */ b("div", { className: a({ tone: e.tone ?? "neutral" }) }), w]
+			}), /* @__PURE__ */ x("div", {
+				className: n,
 				children: [
-					/* @__PURE__ */ p("div", {
-						className: a,
-						children: [/* @__PURE__ */ f("div", {
-							className: d,
+					/* @__PURE__ */ x("div", {
+						className: s,
+						children: [/* @__PURE__ */ b("div", {
+							className: v,
 							children: e.title
-						}), y]
+						}), T]
 					}),
-					b,
-					x
+					D,
+					k,
+					A,
+					j
 				]
 			})]
 		}, e.id);
 	})
 });
 //#endregion
-export { m as AuditTimeline, m as default };
+export { S as AuditTimeline, S as default };
 
 //# sourceMappingURL=AuditTimeline.js.map

package/lib/esm/backoffice/organisms/audit_timeline/AuditTimeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"AuditTimeline.js","names":[],"sources":["../../../../../src/backoffice/organisms/audit_timeline/AuditTimeline.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { cx } from '../../../theme/tools.js';\nimport * as styles from './auditTimeline.css.js';\n\nexport type AuditTimelineEvent<T = unknown> = {\n  id: string;\n  title: ReactNode;\n  time?: ReactNode;\n  description?: ReactNode;\n  meta?: ReactNode;\n  raw?: T;\n};\n\nexport type AuditTimelineProps<T = unknown> = {\n  events: readonly AuditTimelineEvent<T>[];\n  className?: string;\n  renderEvent?: (event: AuditTimelineEvent<T>) => ReactNode;\n};\n\nexport const AuditTimeline = <T,>({\n  events,\n  className,\n  renderEvent,\n}: AuditTimelineProps<T>): JSX.Element | null => {\n  if (events.length === 0) {\n    return null;\n  }\n\n  return (\n    <ol className={cx(styles.list, className)}>\n      {events.map((event, index) => {\n        const isLast = index === events.length - 1;\n        const custom = renderEvent?.(event);\n        if (custom != null) {\n          return <li key={event.id}>{custom}</li>;\n        }\n\n        let lineNode: JSX.Element | null = null;\n        if (!isLast) {\n          lineNode = <div className={styles.line} />;\n        }\n\n        let timeNode: JSX.Element | null = null;\n        if (event.time != null) {\n          timeNode = <div className={styles.time}>{event.time}</div>;\n        }\n\n        let descriptionNode: JSX.Element | null = null;\n        if (event.description != null) {\n          descriptionNode = (\n            <div className={styles.description}>{event.description}</div>\n          );\n        }\n\n        let metaNode: JSX.Element | null = null;\n        if (event.meta != null) {\n          metaNode = <div className={styles.meta}>{event.meta}</div>;\n        }\n\n        return (\n          <li key={event.id} className={styles.item}>\n            <div className={styles.gutter} aria-hidden=\"true\">\n              <div className={styles.dot} />\n              {lineNode}\n            </div>\n            <div className={styles.body}>\n              <div className={styles.header}>\n                <div className={styles.title}>{event.title}</div>\n                {timeNode}\n              </div>\n              {descriptionNode}\n              {metaNode}\n            </div>\n          </li>\n        );\n      })}\n    </ol>\n  );\n};\n\nexport default AuditTimeline;\n"],"mappings":";;;;AAoBA,IAAa,KAAqB,EAChC,WACA,cACA,qBAEI,EAAO,WAAW,IACb,OAIP,kBAAC,MAAD;CAAI,WAAW,EAAG,GAAa,EAAU;WACtC,EAAO,KAAK,GAAO,MAAU;EAC5B,IAAM,IAAS,MAAU,EAAO,SAAS,GACnC,IAAS,IAAc,EAAM;EACnC,IAAI,KAAU,MACZ,OAAO,kBAAC,MAAD,EAAA,UAAoB,GAAY,EAAvB,EAAM,GAAiB;EAGzC,IAAI,IAA+B;EACnC,AAAK,MACH,IAAW,kBAAC,OAAD,EAAK,WAAW,GAAe,CAAA;EAG5C,IAAI,IAA+B;EACnC,AAAI,EAAM,QAAQ,SAChB,IAAW,kBAAC,OAAD;GAAK,WAAW;aAAc,EAAM;GAAW,CAAA;EAG5D,IAAI,IAAsC;EAC1C,AAAI,EAAM,eAAe,SACvB,IACE,kBAAC,OAAD;GAAK,WAAW;aAAqB,EAAM;GAAkB,CAAA;EAIjE,IAAI,IAA+B;EAKnC,OAJI,EAAM,QAAQ,SAChB,IAAW,kBAAC,OAAD;GAAK,WAAW;aAAc,EAAM;GAAW,CAAA,GAI1D,kBAAC,MAAD;GAAmB,WAAW;aAA9B,CACE,kBAAC,OAAD;IAAK,WAAW;IAAe,eAAY;cAA3C,CACE,kBAAC,OAAD,EAAK,WAAW,GAAc,CAAA,EAC7B,EACG;OACN,kBAAC,OAAD;IAAK,WAAW;cAAhB;KACE,kBAAC,OAAD;MAAK,WAAW;gBAAhB,CACE,kBAAC,OAAD;OAAK,WAAW;iBAAe,EAAM;OAAY,CAAA,EAChD,EACG;;KACL;KACA;KACG;MACH;KAbI,EAAM,GAaV;GAEP;CACC,CAAA"}
+{"version":3,"file":"AuditTimeline.js","names":[],"sources":["../../../../../src/backoffice/organisms/audit_timeline/AuditTimeline.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { cx } from '../../../theme/tools.js';\nimport * as styles from './auditTimeline.css.js';\n\nexport type AuditTimelineTone =\n  | 'neutral'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger';\n\nexport type AuditTimelineDensity = 'compact' | 'comfortable';\n\nexport type AuditTimelineMetric = {\n  id: string;\n  label: ReactNode;\n  value: ReactNode;\n};\n\nexport type AuditTimelineEvent<T = unknown> = {\n  id: string;\n  title: ReactNode;\n  time?: ReactNode;\n  description?: ReactNode;\n  actor?: ReactNode;\n  source?: ReactNode;\n  meta?: ReactNode;\n  metrics?: readonly AuditTimelineMetric[];\n  details?: ReactNode;\n  tone?: AuditTimelineTone;\n  raw?: T;\n};\n\nexport type AuditTimelineRenderContext = {\n  index: number;\n  isLast: boolean;\n};\n\nexport type AuditTimelineProps<T = unknown> = {\n  events: readonly AuditTimelineEvent<T>[];\n  emptyState?: ReactNode;\n  density?: AuditTimelineDensity;\n  className?: string;\n  renderEvent?: (\n    event: AuditTimelineEvent<T>,\n    context: AuditTimelineRenderContext,\n  ) => ReactNode;\n};\n\nexport const AuditTimeline = <T,>({\n  events,\n  emptyState = null,\n  density = 'comfortable',\n  className,\n  renderEvent,\n}: AuditTimelineProps<T>): JSX.Element | null => {\n  if (events.length === 0) {\n    return <>{emptyState}</>;\n  }\n\n  return (\n    <ol className={cx(styles.list({ density }), className)}>\n      {events.map((event, index) => {\n        const isLast = index === events.length - 1;\n        const custom = renderEvent?.(event, { index, isLast });\n        if (custom != null) {\n          return (\n            <li key={event.id} className={styles.item}>\n              {custom}\n            </li>\n          );\n        }\n\n        let lineNode: JSX.Element | null = null;\n        if (!isLast) {\n          lineNode = <div className={styles.line} />;\n        }\n\n        let timeNode: JSX.Element | null = null;\n        if (event.time != null) {\n          timeNode = <div className={styles.time}>{event.time}</div>;\n        }\n\n        let descriptionNode: JSX.Element | null = null;\n        if (event.description != null) {\n          descriptionNode = (\n            <div className={styles.description}>{event.description}</div>\n          );\n        }\n\n        const metaItems: ReactNode[] = [];\n        if (event.actor != null) {\n          metaItems.push(\n            <span key=\"actor\" className={styles.actor}>\n              {event.actor}\n            </span>,\n          );\n        }\n        if (event.source != null) {\n          metaItems.push(\n            <span key=\"source\" className={styles.source}>\n              {event.source}\n            </span>,\n          );\n        }\n        if (event.meta != null) {\n          metaItems.push(<span key=\"meta\">{event.meta}</span>);\n        }\n\n        let metaNode: JSX.Element | null = null;\n        if (metaItems.length > 0) {\n          metaNode = <div className={styles.meta}>{metaItems}</div>;\n        }\n\n        let metricsNode: JSX.Element | null = null;\n        if (event.metrics != null && event.metrics.length > 0) {\n          metricsNode = (\n            <div className={styles.metrics}>\n              {event.metrics.map((metric) => {\n                return (\n                  <span key={metric.id} className={styles.metric}>\n                    <span className={styles.metricLabel}>{metric.label}</span>\n                    <span className={styles.metricValue}>{metric.value}</span>\n                  </span>\n                );\n              })}\n            </div>\n          );\n        }\n\n        let detailsNode: JSX.Element | null = null;\n        if (event.details != null) {\n          detailsNode = <div className={styles.details}>{event.details}</div>;\n        }\n\n        return (\n          <li key={event.id} className={styles.item}>\n            <div className={styles.gutter} aria-hidden=\"true\">\n              <div className={styles.dot({ tone: event.tone ?? 'neutral' })} />\n              {lineNode}\n            </div>\n            <div className={styles.body}>\n              <div className={styles.header}>\n                <div className={styles.title}>{event.title}</div>\n                {timeNode}\n              </div>\n              {descriptionNode}\n              {metaNode}\n              {metricsNode}\n              {detailsNode}\n            </div>\n          </li>\n        );\n      })}\n    </ol>\n  );\n};\n\nexport default AuditTimeline;\n"],"mappings":";;;;AAkDA,IAAa,KAAqB,EAChC,WACA,gBAAa,MACb,aAAU,eACV,cACA,qBAEI,EAAO,WAAW,IACb,kBAAA,GAAA,EAAA,UAAG,GAAc,CAAA,GAIxB,kBAAC,MAAD;CAAI,WAAW,EAAG,EAAY,EAAE,YAAS,CAAC,EAAE,EAAU;WACnD,EAAO,KAAK,GAAO,MAAU;EAC5B,IAAM,IAAS,MAAU,EAAO,SAAS,GACnC,IAAS,IAAc,GAAO;GAAE;GAAO;GAAQ,CAAC;EACtD,IAAI,KAAU,MACZ,OACE,kBAAC,MAAD;GAAmB,WAAW;aAC3B;GACE,EAFI,EAAM,GAEV;EAIT,IAAI,IAA+B;EACnC,AAAK,MACH,IAAW,kBAAC,OAAD,EAAK,WAAW,GAAe,CAAA;EAG5C,IAAI,IAA+B;EACnC,AAAI,EAAM,QAAQ,SAChB,IAAW,kBAAC,OAAD;GAAK,WAAW;aAAc,EAAM;GAAW,CAAA;EAG5D,IAAI,IAAsC;EAC1C,AAAI,EAAM,eAAe,SACvB,IACE,kBAAC,OAAD;GAAK,WAAW;aAAqB,EAAM;GAAkB,CAAA;EAIjE,IAAM,IAAyB,EAAE;EAejC,AAdI,EAAM,SAAS,QACjB,EAAU,KACR,kBAAC,QAAD;GAAkB,WAAW;aAC1B,EAAM;GACF,EAFG,QAEH,CACR,EAEC,EAAM,UAAU,QAClB,EAAU,KACR,kBAAC,QAAD;GAAmB,WAAW;aAC3B,EAAM;GACF,EAFG,SAEH,CACR,EAEC,EAAM,QAAQ,QAChB,EAAU,KAAK,kBAAC,QAAD,EAAA,UAAkB,EAAM,MAAY,EAA1B,OAA0B,CAAC;EAGtD,IAAI,IAA+B;EACnC,AAAI,EAAU,SAAS,MACrB,IAAW,kBAAC,OAAD;GAAK,WAAW;aAAc;GAAgB,CAAA;EAG3D,IAAI,IAAkC;EACtC,AAAI,EAAM,WAAW,QAAQ,EAAM,QAAQ,SAAS,MAClD,IACE,kBAAC,OAAD;GAAK,WAAW;aACb,EAAM,QAAQ,KAAK,MAEhB,kBAAC,QAAD;IAAsB,WAAW;cAAjC,CACE,kBAAC,QAAD;KAAM,WAAW;eAAqB,EAAO;KAAa,CAAA,EAC1D,kBAAC,QAAD;KAAM,WAAW;eAAqB,EAAO;KAAa,CAAA,CACrD;MAHI,EAAO,GAGX,CAET;GACE,CAAA;EAIV,IAAI,IAAkC;EAKtC,OAJI,EAAM,WAAW,SACnB,IAAc,kBAAC,OAAD;GAAK,WAAW;aAAiB,EAAM;GAAc,CAAA,GAInE,kBAAC,MAAD;GAAmB,WAAW;aAA9B,CACE,kBAAC,OAAD;IAAK,WAAW;IAAe,eAAY;cAA3C,CACE,kBAAC,OAAD,EAAK,WAAW,EAAW,EAAE,MAAM,EAAM,QAAQ,WAAW,CAAC,EAAI,CAAA,EAChE,EACG;OACN,kBAAC,OAAD;IAAK,WAAW;cAAhB;KACE,kBAAC,OAAD;MAAK,WAAW;gBAAhB,CACE,kBAAC,OAAD;OAAK,WAAW;iBAAe,EAAM;OAAY,CAAA,EAChD,EACG;;KACL;KACA;KACA;KACA;KACG;MACH;KAfI,EAAM,GAeV;GAEP;CACC,CAAA"}

package/lib/esm/backoffice/organisms/audit_timeline/auditTimeline.css.js

@@ -1,8 +1,28 @@
 /* empty css                                      */
 /* empty css                             */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/backoffice/organisms/audit_timeline/auditTimeline.css.ts
-var e = "_4pt2rx0 txvbqbdr8 txvbqbf6i txvbqbffj", t = "_4pt2rx1 txvbqbdr8 txvbqbffj", n = "_4pt2rx2 txvbqbdr8 txvbqbf6i txvbqbey txvbqbfet txvbqbf7y", r = "_4pt2rx3 txvbqb17gh txvbqbhlw txvbqb2is txvbqbq05", i = "_4pt2rx4 txvbqb17gh txvbqbdxd", a = "_4pt2rx5 txvbqbdr8 txvbqbf6i txvbqbfet txvbqbvve", o = "_4pt2rx6 txvbqbdr8 txvbqbjus txvbqbfo txvbqbff6 txvbqbf91", s = "_4pt2rx7 txvbqb9j txvbqbfd0", c = "_4pt2rx8 txvbqb96", l = "_4pt2rx9 txvbqb9j", u = "_4pt2rxa txvbqb96";
+var t = e({
+	defaultClassName: "_4pt2rx3 _4pt2rx0 txvbqbdr8 txvbqbf6i txvbqbm8d txvbqbm9g txvbqbux3",
+	variantClassNames: { density: {
+		comfortable: "_4pt2rx4 _4pt2rx1 txvbqbffj",
+		compact: "_4pt2rx5 _4pt2rx2 txvbqbff6"
+	} },
+	defaultVariants: { density: "comfortable" },
+	compoundVariants: []
+}), n = "_4pt2rx6 txvbqbdr8 txvbqbt9i txvbqbffj", r = "_4pt2rx7 txvbqbdr8 txvbqbf6i txvbqbey txvbqbfet txvbqbf7y", i = e({
+	defaultClassName: "_4pt2rx9 _4pt2rx8 txvbqb17gh txvbqbhlw txvbqb2is txvbqbq05 txvbqbf7y",
+	variantClassNames: { tone: {
+		neutral: "_4pt2rxa",
+		info: "_4pt2rxb",
+		success: "_4pt2rxc",
+		warning: "_4pt2rxd",
+		danger: "_4pt2rxe"
+	} },
+	defaultVariants: { tone: "neutral" },
+	compoundVariants: []
+}), a = "_4pt2rxg _4pt2rxf txvbqb17fr txvbqbdxd txvbqb9mg txvbqb65i", o = "_4pt2rxh txvbqbdr8 txvbqbf6i txvbqbfet txvbqbvve txvbqbt9i txvbqbdxd", s = "_4pt2rxi txvbqbdr8 txvbqbjus txvbqbfo txvbqbff6 txvbqbf91", c = "_4pt2rxj txvbqb9j txvbqbfd0 txvbqb19c9", l = "_4pt2rxk txvbqb96 txvbqb19cb txvbqbf9r", u = "_4pt2rxl txvbqb9j txvbqb19cb", d = "_4pt2rxm txvbqbdr8 txvbqbf91 txvbqbff6 txvbqb96 txvbqb19cb", f = "_4pt2rxn txvbqb19c9 txvbqbfcn", p = "_4pt2rxo txvbqb19cb", m = "_4pt2rxp txvbqbdr8 txvbqbf91 txvbqbff6", h = "_4pt2rxq txvbqbyo5 txvbqbzlq txvbqb10iy txvbqbvv1 txvbqbdsb txvbqbfet txvbqbfo txvbqb1uy txvbqb2et txvbqb17u txvbqb2g9 txvbqb96 txvbqb196l", g = "_4pt2rxr txvbqb19cb", _ = "_4pt2rxs txvbqb19c9 txvbqbfd0", v = "_4pt2rxu _4pt2rxt txvbqb1uy txvbqb2et txvbqb17u txvbqb2g9 txvbqbuxt txvbqb196l txvbqb96 txvbqb19cb txvbqbuvn";
 //#endregion
-export { a as body, l as description, r as dot, n as gutter, o as header, t as item, i as line, e as list, u as meta, c as time, s as title };
+export { f as actor, o as body, u as description, v as details, i as dot, r as gutter, s as header, n as item, a as line, t as list, d as meta, h as metric, g as metricLabel, _ as metricValue, m as metrics, p as source, l as time, c as title };
 
 //# sourceMappingURL=auditTimeline.css.js.map

package/lib/esm/backoffice/organisms/audit_timeline/auditTimeline.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"auditTimeline.css.js","names":[],"sources":["../../../../../src/backoffice/organisms/audit_timeline/auditTimeline.css.ts"],"sourcesContent":["import { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport const list = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n});\n\nexport const item = sprinkles({\n  display: 'flex',\n  gap: 3,\n});\n\nexport const gutter = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  gap: 1,\n  flexShrink: 0,\n});\n\nexport const dot = sprinkles({\n  width: 2,\n  height: 2,\n  borderRadius: 'full',\n  marginTop: 1,\n});\n\nexport const line = sprinkles({\n  width: 2,\n  flex: 1,\n});\n\nexport const body = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n  paddingBottom: 2,\n});\n\nexport const header = sprinkles({\n  display: 'flex',\n  justifyContent: 'space-between',\n  alignItems: 'baseline',\n  gap: 2,\n  flexWrap: 'wrap',\n});\n\nexport const title = sprinkles({\n  fontSize: 'sm',\n  fontWeight: 'semibold',\n});\n\nexport const time = sprinkles({\n  fontSize: 'xs',\n});\n\nexport const description = sprinkles({\n  fontSize: 'sm',\n});\n\nexport const meta = sprinkles({\n  fontSize: 'xs',\n});\n"],"mappings":""}
+{"version":3,"file":"auditTimeline.css.js","names":[],"sources":["../../../../../src/backoffice/organisms/audit_timeline/auditTimeline.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nconst listBase = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  listStyleType: 'none',\n  margin: 0,\n  padding: 0,\n});\n\nexport const list = recipe({\n  base: listBase,\n  variants: {\n    density: {\n      comfortable: sprinkles({ gap: 3 }),\n      compact: sprinkles({ gap: 2 }),\n    },\n  },\n  defaultVariants: {\n    density: 'comfortable',\n  },\n});\n\nexport const item = sprinkles({\n  display: 'flex',\n  minWidth: 0,\n  gap: 3,\n});\n\nexport const gutter = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  gap: 1,\n  flexShrink: 0,\n});\n\nexport const dot = recipe({\n  base: sprinkles({\n    width: 2,\n    height: 2,\n    borderRadius: 'full',\n    marginTop: 1,\n    flexShrink: 0,\n  }),\n  variants: {\n    tone: {\n      neutral: { backgroundColor: vars.colors.border },\n      info: { backgroundColor: vars.colors.info },\n      success: { backgroundColor: vars.colors.success },\n      warning: { backgroundColor: vars.colors.warning },\n      danger: { backgroundColor: vars.colors.error },\n    },\n  },\n  defaultVariants: {\n    tone: 'neutral',\n  },\n});\n\nexport const line = style([\n  sprinkles({\n    width: 0,\n    flex: 1,\n    borderLeftWidth: 'default',\n    borderLeftColor: 'borderSubtle',\n  }),\n  {\n    borderLeftStyle: 'solid',\n  },\n]);\n\nexport const body = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n  paddingBottom: 2,\n  minWidth: 0,\n  flex: 1,\n});\n\nexport const header = sprinkles({\n  display: 'flex',\n  justifyContent: 'space-between',\n  alignItems: 'baseline',\n  gap: 2,\n  flexWrap: 'wrap',\n});\n\nexport const title = sprinkles({\n  fontSize: 'sm',\n  fontWeight: 'semibold',\n  color: 'text',\n});\n\nexport const time = sprinkles({\n  fontSize: 'xs',\n  color: 'textSecondary',\n  fontVariantNumeric: 'tabular-nums',\n});\n\nexport const description = sprinkles({\n  fontSize: 'sm',\n  color: 'textSecondary',\n});\n\nexport const meta = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 2,\n  fontSize: 'xs',\n  color: 'textSecondary',\n});\n\nexport const actor = sprinkles({\n  color: 'text',\n  fontWeight: 'medium',\n});\n\nexport const source = sprinkles({\n  color: 'textSecondary',\n});\n\nexport const metrics = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 2,\n});\n\nexport const metric = sprinkles({\n  display: 'inline-flex',\n  gap: 1,\n  alignItems: 'baseline',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'borderSubtle',\n  borderRadius: 'md',\n  paddingY: 1,\n  paddingX: 2,\n  fontSize: 'xs',\n  backgroundColor: 'backgroundSecondary',\n});\n\nexport const metricLabel = sprinkles({\n  color: 'textSecondary',\n});\n\nexport const metricValue = sprinkles({\n  color: 'text',\n  fontWeight: 'semibold',\n});\n\nexport const details = style([\n  sprinkles({\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'borderSubtle',\n    borderRadius: 'md',\n    padding: 2,\n    backgroundColor: 'backgroundSecondary',\n    fontSize: 'xs',\n    color: 'textSecondary',\n    overflowX: 'auto',\n  }),\n  {\n    overflowWrap: 'anywhere',\n  },\n]);\n"],"mappings":""}

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

@@ -1,8 +1,8 @@
 import { cx as e } from "../../../theme/tools.js";
 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 { BackofficeToolbar as r } from "../../molecules/backoffice_toolbar/BackofficeToolbar.js";
+import { BulkActionsBar as i } from "../../molecules/bulk_actions_bar/BulkActionsBar.js";
 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";
@@ -97,9 +97,9 @@ var p = (e, t) => e.mobileRole === "action" ? "3.75rem" : e.isPrimary === !0 ||
 	let M = c(() => {
 		_?.onSelectionChange(/* @__PURE__ */ new Set());
 	}, [_]), N = null;
-	g != null && (N = /* @__PURE__ */ u(i, { ...g }));
+	g != null && (N = /* @__PURE__ */ u(r, { ...g }));
 	let P = null;
-	_ != null && (P = /* @__PURE__ */ u(r, {
+	_ != null && (P = /* @__PURE__ */ u(i, {
 		selectedCount: j,
 		actions: v,
 		onClearSelection: M

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 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":";;;;;;;;;;AAgDA,IAAM,KACJ,GACA,MAEI,EAAO,eAAe,WACjB,YAEL,EAAO,cAAc,MAAQ,MAAU,IAClC,uBAEL,EAAO,UAAU,WAAW,EAAO,UAAU,WACxC,yBAEF,yBAGH,KACJ,GACA,MACuB;CACvB,IAAI,EAAQ,WAAW,GACrB;CAEF,IAAM,IAAW,EACd,KAAK,GAAQ,MACL,EAAsB,GAAQ,EAAM,CAC3C,CACD,KAAK,IAAI;CAIZ,OAHK,IAGE,WAAW,MAFT;GAKL,KAA8B,MAKI;CACtC,IAAM,EAAE,SAAM,cAAW,mBAAgB,sBAAmB,GAEtD,IAA6B,EAAE;CACrC,KAAK,IAAM,KAAW,GACpB,AAAI,EAAQ,cACV,EAAiB,KAAK,EAAQ,GAAG;CAIrC,IAAM,IAAgB,EAAiB,QAAQ,MACtC,EAAU,eAAe,IAAI,EAAG,CACvC,CAAC,QAEG,IACJ,EAAiB,SAAS,KAAK,MAAkB,EAAiB,QAC9D,IAAsB,IAAgB,KAAK,CAAC,GAC9C,IAA0C;CAC9C,AAAI,MACF,IAAuB;CAGzB,IAAM,UAAwB;EACxB,MAAiB,WAAW,GAGhC;OAAI,GAAe;IACjB,EAAU,kCAAkB,IAAI,KAAK,CAAC;IACtC;;GAEF,EAAU,kBAAkB,IAAI,IAAI,EAAiB,CAAC;;;CAGxD,OAAO;EACL,IAAI;EACJ,QACE,kBAAC,OAAD;GAAK,WAAW;aACd,kBAAC,GAAD;IACE,SAAS;IACT,UAAU,EAAiB,WAAW;IACtC,eAAe;IACf,gBAAgB;KACd,GAAW;;IAEb,gBAAc;IACd,cAAY;IACZ,CAAA;GACE,CAAA;EAER,OAAO,MAAY;GACjB,IAAM,EAAE,IAAI,GAAO,kBAAe,GAC5B,IAAU,EAAU,eAAe,IAAI,EAAM,EAC7C,IAAW,EAAe,EAAQ,KAAK,EAAQ,MAAM;GAE3D,OACE,kBAAC,OAAD;IAAK,WAAW;cACd,kBAAC,GAAD;KACW;KACT,UAAU,CAAC;KACX,gBAAgB;MACd,IAAM,IAAO,IAAI,IAAI,EAAU,eAAe;MAM9C,AALI,EAAK,IAAI,EAAM,GACjB,EAAK,OAAO,EAAM,GACT,KACT,EAAK,IAAI,EAAM,EAEjB,EAAU,kBAAkB,EAAK;;KAEnC,cAAY;KACZ,CAAA;IACE,CAAA;;EAGV,WAAW;EACZ;GAGU,KAA6B,EACxC,YACA,SACA,aACA,YACA,cACA,gBACA,eACA,cACA,mBACA,mBACA,cACA,oBAAiB,aAC+B;CAChD,IAAM,EAAE,SAAM,EAAe,KAAK,EAC5B,IAAc,QACX,EAAK,KAAK,GAAK,OAGb;EAAE;EAAK;EAAO,IAFV,EAAS,GAAK,EAEJ;EAAI,YADN,GAAW,kBAAkB,GAAK,EAAM,IAAI;EAC1B,EACrC,EACD;EAAC;EAAU;EAAM;EAAU,CAAC,EAEzB,IAAkB,QAClB,KAAa,OACR,OAEF,EAAqB;EAC1B,MAAM;EACN;EACA,gBAAgB,KAAkB,EAAE,iCAAiC;EACrE,gBACE,OACE,GAAM,MACC,EAAE,kCAAkC,EACzC,OAAO,IAAQ,GAChB,CAAC;EAEP,CAAC,EACD;EAAC;EAAgB;EAAgB;EAAW;EAAG;EAAY,CAAC,EAEzD,IAAkB,QAAc;EACpC,IAAM,IAAS,EAAQ,KAAuC,OACrD;GACL,GAAG;GACH,OAAO,MACE,EAAO,KAAK,EAAQ,IAAI;GAElC,EACD;EAIF,OAHI,KAAmB,OACd,IAEF,CAAC,GAAiB,GAAG,EAAO;IAClC,CAAC,GAAS,EAAgB,CAAC,EAExB,IAAqB,QAAc;EAOvC,IANmB,EAAgB,MAAM,MAChC,EAAO,cAAc,GAE1B,IAGA,EAAgB,WAAW,GAC7B,OAAO;EAET,IAAI,IAAe;EAInB,OAHI,KAAmB,QAAQ,EAAgB,SAAS,MACtD,IAAe,IAEV,EAAgB,KAAK,GAAQ,MAC9B,MAAU,IACL;GAAE,GAAG;GAAQ,WAAW;GAAM,GAEhC,EACP;IACD,CAAC,GAAiB,EAAgB,CAAC,EAEhC,IAAsB,QACnB,EACL,GACA,KAAmB,KACpB,EACA,CAAC,GAAoB,EAAgB,CAAC,EAErC,IAAgB;CACpB,AAAI,KAAa,SACf,IAAgB,EAAU,eAAe;CAG3C,IAAM,IAAuB,QAAkB;EAC7C,AAAI,GACQ,kCAAkB,IAAI,KAAK,CAAC;IAEvC,CAAC,EAAU,CAAC,EAEX,IAAkC;CACtC,AAAI,KAAW,SACb,IAAc,kBAAC,GAAD,EAAc,GAAI,GAAW,CAAA;CAG7C,IAAI,IAAsC;CAC1C,AAAI,KAAa,SACf,IACE,kBAAC,GAAD;EACiB;EACf,SAAS;EACT,kBAAkB;EAClB,CAAA;CAIN,IAAI,IAA2C;CAK/C,OAJI,MAAmB,gBACrB,IAA4B,IAI5B,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAgB,GAA2B,EAAU;YAAxE;GACG;GACA;GAED,kBAAC,GAAD;IACE,WAAW,KAAa,EAAE,6BAA6B;IACvD,SAAS;IACT,MAAM;IACN,WAAW,MACF,EAAQ;IAEL;IACZ,WAAW,KAAA;IACX,iBAAiB,KAAA;IACjB,eAAe,KAAA;IACf,cAAc,KAAA;IACd,uBAAuB,KAAA;IACF;IACL;IAChB,CAAA;GACE"}
+{"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  BackofficeToolbar,\n  type BackofficeToolbarProps,\n} from '../../molecules/backoffice_toolbar/BackofficeToolbar.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?: BackofficeToolbarProps;\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 = <BackofficeToolbar {...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/templates/detail_page_template/DetailPageTemplate.js

@@ -1,57 +1,87 @@
 import { cx as e } from "../../../theme/tools.js";
 import { EntityHeader as t } from "../../organisms/entity_header/EntityHeader.js";
-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";
+import { body as n, bodyRow as r, bodyViewportBase as i, bodyViewportContained as a, bodyViewportPage as o, container as s, containerContained as c, containerRows as l, contentSection as u, headerCard as d, headerCardFlatDensity as f, headerCardFramedDensity as p, rowSingle as m, rowSplit as h, rowSplitBase as g, sidePanelBase as _, sidePanelCard as v, sidePanelPlain as y, sidePanelTopVar as b, staticRow as x } from "./detailPageTemplate.css.js";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
 //#region src/backoffice/templates/detail_page_template/DetailPageTemplate.tsx
-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,
+var w = (u) => {
+	let { children: w, aboveContent: T, className: E, tabsNode: D, sidePanel: O, sidePanelVariant: k = "card", sidePanelStickyTop: A, layoutVariant: j, headerDensity: M = "default", presentation: N = "framed", bodyScrollMode: P = "contained", contentClassName: F, headerSupplementNode: I } = u, L = P === "contained", R = O != null, z = "single";
+	R && (z = "split");
+	let B = j ?? z;
+	R || (B = "single");
+	let V = B === "split", H = m;
+	V && (H = e(h, g));
+	let U;
+	U = "headerNode" in u ? u.headerNode : /* @__PURE__ */ S(t, { ...u.header });
+	let W = A?.trim(), G;
+	W != null && W !== "" && (G = { [b]: W });
+	let K = v;
+	k === "plain" && (K = y);
+	let q = e(_, K), J = D != null, Y = I != null, X = l({
+		scrollMode: P,
+		tabs: J,
+		supplement: Y
+	}), Z = null, Q = o;
+	L && (Z = c, Q = a);
+	let $ = f[M];
+	return N === "framed" && ($ = p[M]), /* @__PURE__ */ C("div", {
+		className: e(s, X, Z, E),
+		"data-scroll-mode": P,
+		"data-presentation": N,
+		"data-layout-variant": B,
+		style: G,
 		children: [
-			/* @__PURE__ */ v("div", {
-				className: e(P, _),
-				children: /* @__PURE__ */ v("div", {
-					className: e(c, l[k]),
-					children: F
+			/* @__PURE__ */ S("div", {
+				className: e(H, x),
+				children: /* @__PURE__ */ S("div", {
+					className: e(d, $),
+					"data-detail-template-slot": "header",
+					children: U
 				})
 			}),
-			B && /* @__PURE__ */ v("div", {
-				className: e(P, "eno74p5 txvbqbs9r"),
-				children: /* @__PURE__ */ v("div", {
-					className: "eno74pi eno74ph txvbqb11ki txvbqb196j txvbqbvve txvbqb18ub",
-					children: w
+			Y && /* @__PURE__ */ S("div", {
+				className: e(H, "eno74pj txvbqbs9r"),
+				children: /* @__PURE__ */ S("div", {
+					className: "eno74pr txvbqbdr8 txvbqbf6i txvbqbffw txvbqbt9i",
+					"data-detail-template-slot": "header-supplement",
+					children: I
 				})
 			}),
-			/* @__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
+			J && /* @__PURE__ */ S("div", {
+				className: e(H, "eno74pj txvbqbs9r"),
+				children: /* @__PURE__ */ S("div", {
+					className: "eno74p12 eno74p11 txvbqb11ki txvbqb196j txvbqbvve txvbqb18ub",
+					"data-detail-template-slot": "tabs",
+					children: D
+				})
+			}),
+			/* @__PURE__ */ S("div", {
+				className: e(i, Q),
+				"data-detail-template-slot": "body-viewport",
+				children: /* @__PURE__ */ C("div", {
+					className: e(H, r),
+					children: [/* @__PURE__ */ C("div", {
+						className: e(n, F),
+						"data-detail-template-slot": "content",
+						children: [T, w]
+					}), R && /* @__PURE__ */ S("aside", {
+						className: q,
+						"data-detail-template-slot": "side-panel",
+						"data-side-panel-variant": k,
+						children: O
 					})]
 				})
 			})
 		]
 	});
+}, T = ({ children: t, className: n, withBaseStyles: r = !0, ...i }) => {
+	let a;
+	return r ? a = e(u, n) : n != null && (a = n), /* @__PURE__ */ S("div", {
+		...i,
+		className: a,
+		children: t
+	});
 };
 //#endregion
-export { b as DetailPageTemplate, b as default };
+export { w as DetailPageTemplate, w as default, T as DetailPageTemplateContent };
 
 //# 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  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"}
+{"version":3,"file":"DetailPageTemplate.js","names":[],"sources":["../../../../../src/backoffice/templates/detail_page_template/DetailPageTemplate.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type JSX,\n  type ReactNode,\n} 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';\nexport type DetailPresentation = 'framed' | 'flat';\nexport type DetailBodyScrollMode = 'contained' | 'page';\n\nexport type DetailPageTemplateProps = (WithHeaderProps | WithHeaderNode) & {\n  children: ReactNode;\n  aboveContent?: ReactNode;\n  headerSupplementNode?: ReactNode;\n  tabsNode?: ReactNode;\n  sidePanel?: ReactNode;\n  sidePanelVariant?: DetailSidePanelVariant;\n  sidePanelStickyTop?: string;\n  layoutVariant?: DetailLayoutVariant;\n  headerDensity?: DetailHeaderDensity;\n  presentation?: DetailPresentation;\n  bodyScrollMode?: DetailBodyScrollMode;\n  className?: string;\n  contentClassName?: 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    presentation = 'framed',\n    bodyScrollMode = 'contained',\n    contentClassName,\n    headerSupplementNode,\n  } = props;\n\n  const hasContainedBodyScroll = bodyScrollMode === 'contained';\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  const hasHeaderSupplement = headerSupplementNode != null;\n  const containerVariant = styles.containerRows({\n    scrollMode: bodyScrollMode,\n    tabs: hasTabs,\n    supplement: hasHeaderSupplement,\n  });\n  let containedContainerClassName: string | null = null;\n  let bodyViewportClassName = styles.bodyViewportPage;\n  if (hasContainedBodyScroll) {\n    containedContainerClassName = styles.containerContained;\n    bodyViewportClassName = styles.bodyViewportContained;\n  }\n\n  let headerPresentationClassName = styles.headerCardFlatDensity[headerDensity];\n  if (presentation === 'framed') {\n    headerPresentationClassName = styles.headerCardFramedDensity[headerDensity];\n  }\n\n  return (\n    <div\n      className={cx(\n        styles.container,\n        containerVariant,\n        containedContainerClassName,\n        className,\n      )}\n      data-scroll-mode={bodyScrollMode}\n      data-presentation={presentation}\n      data-layout-variant={resolvedLayoutVariant}\n      style={containerStyle}\n    >\n      <div className={cx(rowClassName, styles.staticRow)}>\n        <div\n          className={cx(styles.headerCard, headerPresentationClassName)}\n          data-detail-template-slot=\"header\"\n        >\n          {resolvedHeader}\n        </div>\n      </div>\n      {hasHeaderSupplement && (\n        <div className={cx(rowClassName, styles.staticRow)}>\n          <div\n            className={styles.headerSupplement}\n            data-detail-template-slot=\"header-supplement\"\n          >\n            {headerSupplementNode}\n          </div>\n        </div>\n      )}\n      {hasTabs && (\n        <div className={cx(rowClassName, styles.staticRow)}>\n          <div className={styles.tabsRow} data-detail-template-slot=\"tabs\">\n            {tabsNode}\n          </div>\n        </div>\n      )}\n      <div\n        className={cx(styles.bodyViewportBase, bodyViewportClassName)}\n        data-detail-template-slot=\"body-viewport\"\n      >\n        <div className={cx(rowClassName, styles.bodyRow)}>\n          <div\n            className={cx(styles.body, contentClassName)}\n            data-detail-template-slot=\"content\"\n          >\n            {aboveContent}\n            {children}\n          </div>\n          {hasSidePanel && (\n            <aside\n              className={resolvedSidePanelClassName}\n              data-detail-template-slot=\"side-panel\"\n              data-side-panel-variant={sidePanelVariant}\n            >\n              {sidePanel}\n            </aside>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport type DetailPageTemplateContentProps = ComponentPropsWithoutRef<'div'> & {\n  children: ReactNode;\n  withBaseStyles?: boolean;\n};\n\nexport const DetailPageTemplateContent = ({\n  children,\n  className,\n  withBaseStyles = true,\n  ...rest\n}: DetailPageTemplateContentProps): JSX.Element => {\n  let contentClassName: string | undefined;\n  if (withBaseStyles) {\n    contentClassName = cx(styles.contentSection, className);\n  } else if (className != null) {\n    contentClassName = className;\n  }\n\n  return (\n    <div {...rest} className={contentClassName}>\n      {children}\n    </div>\n  );\n};\n\nexport default DetailPageTemplate;\n"],"mappings":";;;;;AA8CA,IAAa,KACX,MACgB;CAChB,IAAM,EACJ,aACA,iBACA,cACA,aACA,cACA,sBAAmB,QACnB,uBACA,kBACA,mBAAgB,WAChB,kBAAe,UACf,oBAAiB,aACjB,qBACA,4BACE,GAEE,IAAyB,MAAmB,aAC5C,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,MACtB,IAAsB,KAAwB,MAC9C,IAAmB,EAAqB;EAC5C,YAAY;EACZ,MAAM;EACN,YAAY;EACb,CAAC,EACE,IAA6C,MAC7C,IAAwB;CAC5B,AAAI,MACF,IAA8B,GAC9B,IAAwB;CAG1B,IAAI,IAA8B,EAA6B;CAK/D,OAJI,MAAiB,aACnB,IAA8B,EAA+B,KAI7D,kBAAC,OAAD;EACE,WAAW,EACT,GACA,GACA,GACA,EACD;EACD,oBAAkB;EAClB,qBAAmB;EACnB,uBAAqB;EACrB,OAAO;YAVT;GAYE,kBAAC,OAAD;IAAK,WAAW,EAAG,GAAc,EAAiB;cAChD,kBAAC,OAAD;KACE,WAAW,EAAG,GAAmB,EAA4B;KAC7D,6BAA0B;eAEzB;KACG,CAAA;IACF,CAAA;GACL,KACC,kBAAC,OAAD;IAAK,WAAW,EAAG,GAAc,oBAAiB;cAChD,kBAAC,OAAD;KACE,WAAW;KACX,6BAA0B;eAEzB;KACG,CAAA;IACF,CAAA;GAEP,KACC,kBAAC,OAAD;IAAK,WAAW,EAAG,GAAc,oBAAiB;cAChD,kBAAC,OAAD;KAAK,WAAW;KAAgB,6BAA0B;eACvD;KACG,CAAA;IACF,CAAA;GAER,kBAAC,OAAD;IACE,WAAW,EAAG,GAAyB,EAAsB;IAC7D,6BAA0B;cAE1B,kBAAC,OAAD;KAAK,WAAW,EAAG,GAAc,EAAe;eAAhD,CACE,kBAAC,OAAD;MACE,WAAW,EAAG,GAAa,EAAiB;MAC5C,6BAA0B;gBAF5B,CAIG,GACA,EACG;SACL,KACC,kBAAC,SAAD;MACE,WAAW;MACX,6BAA0B;MAC1B,2BAAyB;gBAExB;MACK,CAAA,CAEN;;IACF,CAAA;GACF;;GASG,KAA6B,EACxC,aACA,cACA,oBAAiB,IACjB,GAAG,QAC8C;CACjD,IAAI;CAOJ,OANI,IACF,IAAmB,EAAG,GAAuB,EAAU,GAC9C,KAAa,SACtB,IAAmB,IAInB,kBAAC,OAAD;EAAK,GAAI;EAAM,WAAW;EACvB;EACG,CAAA"}

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

@@ -7,12 +7,75 @@
 /* empty css                                               */
 /* empty css                                               */
 /* empty css                                  */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/backoffice/templates/detail_page_template/detailPageTemplate.css.ts
-var e = "var(--eno74p0)", t = "eno74p2 eno74p1 txvbqbdrl txvbqbffw txvbqbi1f txvbqbs9r", n = "eno74p3", r = "eno74p4", i = "eno74p5 txvbqbs9r", a = "eno74p6 txvbqb17w0 txvbqbt9i txvbqbdr8 txvbqbf6i txvbqbffw", o = "eno74p7 txvbqbdrl txvbqbh7g txvbqbh8i txvbqbe8 txvbqbex", s = "eno74p8 txvbqbs9r", c = "eno74p9 txvbqb17w0 txvbqbt9i txvbqbffw", l = "eno74pa txvbqbt9i", u = {
+var t = "var(--eno74p0)", n = "eno74p2 eno74p1 txvbqbdrl txvbqbffw", r = "eno74p3 txvbqbi1f txvbqbs9r", i = e({
+	defaultClassName: "eno74p4",
+	variantClassNames: {
+		scrollMode: {
+			page: "eno74p5",
+			contained: "eno74p6"
+		},
+		tabs: {
+			true: "eno74p7",
+			false: "eno74p8"
+		},
+		supplement: {
+			true: "eno74p9",
+			false: "eno74pa"
+		}
+	},
+	defaultVariants: {},
+	compoundVariants: [
+		[{
+			scrollMode: "page",
+			tabs: !0,
+			supplement: !0
+		}, "eno74pb"],
+		[{
+			scrollMode: "page",
+			tabs: !0,
+			supplement: !1
+		}, "eno74pc"],
+		[{
+			scrollMode: "page",
+			tabs: !1,
+			supplement: !0
+		}, "eno74pd"],
+		[{
+			scrollMode: "page",
+			tabs: !1,
+			supplement: !1
+		}, "eno74pe"],
+		[{
+			scrollMode: "contained",
+			tabs: !0,
+			supplement: !0
+		}, "eno74pf"],
+		[{
+			scrollMode: "contained",
+			tabs: !0,
+			supplement: !1
+		}, "eno74pg"],
+		[{
+			scrollMode: "contained",
+			tabs: !1,
+			supplement: !0
+		}, "eno74ph"],
+		[{
+			scrollMode: "contained",
+			tabs: !1,
+			supplement: !1
+		}, "eno74pi"]
+	]
+}), a = "eno74pj txvbqbs9r", o = "eno74pk txvbqb17w0 txvbqbt9i txvbqbdr8 txvbqbf6i txvbqbffw", s = "eno74pl txvbqbdrl txvbqbh7g txvbqbh8i txvbqbe8 txvbqbex", c = "eno74pm txvbqbs9r", l = "eno74pn txvbqb17w0 txvbqbt9i txvbqbffw", u = "eno74po txvbqbt9i", d = {
 	default: "_1995g4r1 _1995g4r0 _1995g4r2 _1995g4rb _1995g4rd _1995g4rg _1995g4rm",
 	compact: "_1995g4r1 _1995g4r0 _1995g4r2 _1995g4ra _1995g4rd _1995g4rg _1995g4rl"
-}, d = "eno74pb txvbqbdr8 txvbqbf6i txvbqbffw txvbqbt9i txvbqbs9r", f = "eno74pd eno74pc txvbqbs9r", p = "eno74pf eno74pe txvbqb11kv txvbqb11ku txvbqbdr8 txvbqbf6i txvbqbffj txvbqbt9i txvbqbs9r txvbqbge", m = "_1995g4r1 _1995g4r0 _1995g4r3 _1995g4ra _1995g4rd _1995g4rg _1995g4rl", h = "eno74pg txvbqb1g5 txvbqb2e3 txvbqb1933 txvbqbux3 txvbqbcs7", g = "eno74pi eno74ph txvbqb11ki txvbqb196j txvbqbvve txvbqb18ub";
+}, f = {
+	default: "eno74pp txvbqbyns txvbqbzld txvbqb10iy txvbqbvv1",
+	compact: "eno74pq txvbqbyns txvbqbzld txvbqb10iy txvbqbvv1"
+}, p = "eno74pr txvbqbdr8 txvbqbf6i txvbqbffw txvbqbt9i", m = "eno74ps txvbqbdr8 txvbqbf6i txvbqbffw txvbqbt9i txvbqbs9r", h = "eno74pt txvbqbdr8 txvbqbf6i txvbqbffw", g = "eno74pu txvbqbs9r", _ = "eno74pw eno74pv txvbqbs9r", v = "eno74px", y = "eno74pz eno74py txvbqb11kv txvbqb11ku txvbqbdr8 txvbqbf6i txvbqbffj txvbqbt9i txvbqbs9r txvbqbge", b = "_1995g4r1 _1995g4r0 _1995g4r3 _1995g4ra _1995g4rd _1995g4rg _1995g4rl", x = "eno74p10 txvbqb1g5 txvbqb2e3 txvbqb1933 txvbqbux3 txvbqbcs7", S = "eno74p12 eno74p11 txvbqb11ki txvbqb196j txvbqbvve txvbqb18ub";
 //#endregion
-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 };
+export { m as body, c as bodyRow, g as bodyViewportBase, _ as bodyViewportContained, v as bodyViewportPage, n as container, r as containerContained, i as containerRows, h as contentSection, u as headerCard, f as headerCardFlatDensity, d as headerCardFramedDensity, p as headerSupplement, o as rowSingle, s as rowSplit, l as rowSplitBase, y as sidePanelBase, b as sidePanelCard, x as sidePanelPlain, t as sidePanelTopVar, a as staticRow, S 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 { style, createVar } 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 = sprinkles({\n  minWidth: 0,\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 = adminSurfaceRecipe({\n  level: 'panelMuted',\n  radius: 'md',\n  border: 'subtle',\n  elevation: 'none',\n  padding: 'md',\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 { style, createVar } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\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  }),\n  {\n    vars: {\n      [sidePanelTopVar]: detailTokens.stickyTop,\n    },\n  },\n]);\n\nexport const containerContained = sprinkles({\n  height: 'full',\n  minHeight: 0,\n});\n\nexport const containerRows = recipe({\n  variants: {\n    scrollMode: {\n      page: {},\n      contained: {},\n    },\n    tabs: {\n      true: {},\n      false: {},\n    },\n    supplement: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundVariants: [\n    {\n      variants: { scrollMode: 'page', tabs: true, supplement: true },\n      style: { gridTemplateRows: 'auto auto auto minmax(0, auto)' },\n    },\n    {\n      variants: { scrollMode: 'page', tabs: true, supplement: false },\n      style: { gridTemplateRows: 'auto auto minmax(0, auto)' },\n    },\n    {\n      variants: { scrollMode: 'page', tabs: false, supplement: true },\n      style: { gridTemplateRows: 'auto auto minmax(0, auto)' },\n    },\n    {\n      variants: { scrollMode: 'page', tabs: false, supplement: false },\n      style: { gridTemplateRows: 'auto minmax(0, auto)' },\n    },\n    {\n      variants: { scrollMode: 'contained', tabs: true, supplement: true },\n      style: { gridTemplateRows: 'auto auto auto minmax(0, 1fr)' },\n    },\n    {\n      variants: { scrollMode: 'contained', tabs: true, supplement: false },\n      style: { gridTemplateRows: 'auto auto minmax(0, 1fr)' },\n    },\n    {\n      variants: { scrollMode: 'contained', tabs: false, supplement: true },\n      style: { gridTemplateRows: 'auto auto minmax(0, 1fr)' },\n    },\n    {\n      variants: { scrollMode: 'contained', tabs: false, supplement: false },\n      style: { gridTemplateRows: 'auto minmax(0, 1fr)' },\n    },\n  ],\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 = sprinkles({\n  minWidth: 0,\n});\n\nexport const headerCardFramedDensity = {\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 headerCardFlatDensity = {\n  default: sprinkles({\n    paddingX: 1,\n    paddingY: 1,\n  }),\n  compact: sprinkles({\n    paddingX: 1,\n    paddingY: 1,\n  }),\n};\n\nexport const headerSupplement = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n  minWidth: 0,\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 contentSection = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n});\n\nexport const bodyViewportBase = sprinkles({\n  minHeight: 0,\n});\n\nexport const bodyViewportContained = style([\n  sprinkles({\n    minHeight: 0,\n  }),\n  {\n    overflowY: 'auto',\n    scrollbarWidth: 'thin',\n  },\n]);\n\nexport const bodyViewportPage = style({\n  overflowY: 'visible',\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 = adminSurfaceRecipe({\n  level: 'panelMuted',\n  radius: 'md',\n  border: 'subtle',\n  elevation: 'none',\n  padding: 'md',\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":""}