@plumile/ui 0.1.115 → 0.1.116

package/lib/esm/backoffice/templates/list_page_template/ListPageTemplate.js

@@ -1,43 +1,59 @@
 import { cx as e } from "../../../theme/tools.js";
 import { BackofficeDataTable as t } from "../../organisms/backoffice_data_table/BackofficeDataTable.js";
 import { EntityHeader as n } from "../../organisms/entity_header/EntityHeader.js";
-import { container as r, containerNoToolbar as i, containerPresentation as a, containerWithToolbar as o, headerCard as s, headerPresentation as c, tableCard as l, tableFooter as u, tablePresentation as d, tableScroll as f, toolbarPresentation as p } from "./listPageTemplate.css.js";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { container as r, containerContained as i, containerPresentation as a, containerRows as o, headerCard as s, headerPresentation as c, tableCard as l, tableCardContained as u, tableFooter as d, tablePresentation as f, tableScroll as p, tableScrollContained as m, toolbarPresentation as h } from "./listPageTemplate.css.js";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/backoffice/templates/list_page_template/ListPageTemplate.tsx
-var g = (g) => {
-	let { presentation: _ = "framed", className: v, toolbarNode: y, statusNode: b, tableFooterNode: x } = g, S = i;
-	y != null && (S = o);
-	let C = e(r, S, a[_], v), w;
-	w = "headerNode" in g ? g.headerNode : /* @__PURE__ */ m(n, { ...g.header });
-	let T;
-	T = "tableNode" in g ? g.tableNode : /* @__PURE__ */ m(t, { ...g.table });
-	let E = null;
-	return x != null && (E = /* @__PURE__ */ m("div", {
-		className: u,
-		children: x
-	})), /* @__PURE__ */ h("div", {
-		className: C,
+var v = (v) => {
+	let { presentation: y = "framed", className: b, toolbarNode: x, statusNode: S, tableFooterNode: C, bodyScrollMode: w = "page" } = v, T = w === "contained", E = x != null, D = S != null, O = o({
+		scrollMode: w,
+		toolbar: E,
+		status: D
+	}), k = null, A = null, j = null;
+	T && (k = i, A = u, j = m);
+	let M = e(r, O, k, a[y], b), N;
+	N = "headerNode" in v ? v.headerNode : /* @__PURE__ */ g(n, { ...v.header });
+	let P;
+	P = "tableNode" in v ? v.tableNode : /* @__PURE__ */ g(t, {
+		...v.table,
+		bodyScrollMode: w
+	});
+	let F = null;
+	return C != null && (F = /* @__PURE__ */ g("div", {
+		className: d,
+		"data-list-template-slot": "table-footer",
+		children: C
+	})), /* @__PURE__ */ _("div", {
+		className: M,
+		"data-scroll-mode": w,
 		children: [
-			/* @__PURE__ */ m("div", {
-				className: e(s, c[_]),
-				children: w
+			/* @__PURE__ */ g("div", {
+				className: e(s, c[y]),
+				"data-list-template-slot": "header",
+				children: N
+			}),
+			E && /* @__PURE__ */ g("div", {
+				className: e("dlvvnqm", h[y]),
+				"data-list-template-slot": "toolbar",
+				children: x
 			}),
-			y != null && /* @__PURE__ */ m("div", {
-				className: e("dlvvnq8", p[_]),
-				children: y
+			D && /* @__PURE__ */ g("div", {
+				"data-list-template-slot": "status",
+				children: S
 			}),
-			b != null && /* @__PURE__ */ m("div", { children: b }),
-			/* @__PURE__ */ h("div", {
-				className: e(l, d[_]),
-				children: [/* @__PURE__ */ m("div", {
-					className: f,
-					children: T
-				}), E]
+			/* @__PURE__ */ _("div", {
+				className: e(l, A, f[y]),
+				"data-list-template-slot": "table",
+				children: [/* @__PURE__ */ g("div", {
+					className: e(p, j),
+					"data-list-template-slot": "table-scroll",
+					children: P
+				}), F]
 			})
 		]
 	});
 };
 //#endregion
-export { g as ListPageTemplate, g as default };
+export { v as ListPageTemplate, v as default };
 
 //# sourceMappingURL=ListPageTemplate.js.map

package/lib/esm/backoffice/templates/list_page_template/ListPageTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListPageTemplate.js","names":[],"sources":["../../../../../src/backoffice/templates/list_page_template/ListPageTemplate.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport {\n  BackofficeDataTable,\n  type BackofficeDataTableProps,\n} from '../../organisms/backoffice_data_table/BackofficeDataTable.js';\nimport {\n  EntityHeader,\n  type EntityHeaderProps,\n} from '../../organisms/entity_header/EntityHeader.js';\n\nimport * as styles from './listPageTemplate.css.js';\nimport { cx } from '../../../theme/tools.js';\n\ntype ListBaseProps = {\n  toolbarNode?: ReactNode;\n  statusNode?: ReactNode;\n  tableFooterNode?: ReactNode;\n  presentation?: 'framed' | 'flat';\n  className?: string;\n};\n\ntype ListWithHeaderProps<Row> = ListBaseProps & {\n  header: EntityHeaderProps;\n  headerNode?: never;\n  table: BackofficeDataTableProps<Row>;\n  tableNode?: never;\n};\n\ntype ListWithHeaderNode<Row> = ListBaseProps & {\n  header?: never;\n  headerNode: ReactNode;\n  table: BackofficeDataTableProps<Row>;\n  tableNode?: never;\n};\n\ntype ListWithCustomTable =\n  | (ListBaseProps & {\n      header: EntityHeaderProps;\n      headerNode?: never;\n      table?: never;\n      tableNode: ReactNode;\n    })\n  | (ListBaseProps & {\n      header?: never;\n      headerNode: ReactNode;\n      table?: never;\n      tableNode: ReactNode;\n    });\n\nexport type ListPageTemplateProps<Row> =\n  | ListWithHeaderProps<Row>\n  | ListWithHeaderNode<Row>\n  | ListWithCustomTable;\n\nexport const ListPageTemplate = <Row,>(\n  props: ListPageTemplateProps<Row>,\n): JSX.Element => {\n  const {\n    presentation = 'framed',\n    className,\n    toolbarNode,\n    statusNode,\n    tableFooterNode,\n  } = props;\n\n  let containerVariant = styles.containerNoToolbar;\n  if (toolbarNode != null) {\n    containerVariant = styles.containerWithToolbar;\n  }\n\n  const containerClasses = cx(\n    styles.container,\n    containerVariant,\n    styles.containerPresentation[presentation],\n    className,\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  let resolvedTable: ReactNode;\n  if ('tableNode' in props) {\n    resolvedTable = props.tableNode;\n  } else {\n    resolvedTable = <BackofficeDataTable {...props.table} />;\n  }\n\n  let footerSection: ReactNode | null = null;\n  if (tableFooterNode != null) {\n    footerSection = <div className={styles.tableFooter}>{tableFooterNode}</div>;\n  }\n\n  return (\n    <div className={containerClasses}>\n      <div\n        className={cx(\n          styles.headerCard,\n          styles.headerPresentation[presentation],\n        )}\n      >\n        {resolvedHeader}\n      </div>\n      {toolbarNode != null && (\n        <div\n          className={cx(\n            styles.toolbarCard,\n            styles.toolbarPresentation[presentation],\n          )}\n        >\n          {toolbarNode}\n        </div>\n      )}\n      {statusNode != null && <div>{statusNode}</div>}\n      <div\n        className={cx(styles.tableCard, styles.tablePresentation[presentation])}\n      >\n        <div className={styles.tableScroll}>{resolvedTable}</div>\n        {footerSection}\n      </div>\n    </div>\n  );\n};\n\nexport default ListPageTemplate;\n"],"mappings":";;;;;;AAuDA,IAAa,KACX,MACgB;CAChB,IAAM,EACJ,kBAAe,UACf,cACA,gBACA,eACA,uBACE,GAEA,IAAmB;CACvB,AAAI,KAAe,SACjB,IAAmB;CAGrB,IAAM,IAAmB,EACvB,GACA,GACA,EAA6B,IAC7B,EACD,EAEG;CACJ,AAGE,IAHE,gBAAgB,IACD,EAAM,aAEN,kBAAC,GAAD,EAAc,GAAI,EAAM,QAAU,CAAA;CAGrD,IAAI;CACJ,AAGE,IAHE,eAAe,IACD,EAAM,YAEN,kBAAC,GAAD,EAAqB,GAAI,EAAM,OAAS,CAAA;CAG1D,IAAI,IAAkC;CAKtC,OAJI,KAAmB,SACrB,IAAgB,kBAAC,OAAD;EAAK,WAAW;YAAqB;EAAsB,CAAA,GAI3E,kBAAC,OAAD;EAAK,WAAW;YAAhB;GACE,kBAAC,OAAD;IACE,WAAW,EACT,GACA,EAA0B,GAC3B;cAEA;IACG,CAAA;GACL,KAAe,QACd,kBAAC,OAAD;IACE,WAAW,EACT,WACA,EAA2B,GAC5B;cAEA;IACG,CAAA;GAEP,KAAc,QAAQ,kBAAC,OAAD,EAAA,UAAM,GAAiB,CAAA;GAC9C,kBAAC,OAAD;IACE,WAAW,EAAG,GAAkB,EAAyB,GAAc;cADzE,CAGE,kBAAC,OAAD;KAAK,WAAW;eAAqB;KAAoB,CAAA,EACxD,EACG;;GACF"}
+{"version":3,"file":"ListPageTemplate.js","names":[],"sources":["../../../../../src/backoffice/templates/list_page_template/ListPageTemplate.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport {\n  BackofficeDataTable,\n  type BackofficeDataTableProps,\n} from '../../organisms/backoffice_data_table/BackofficeDataTable.js';\nimport {\n  EntityHeader,\n  type EntityHeaderProps,\n} from '../../organisms/entity_header/EntityHeader.js';\n\nimport * as styles from './listPageTemplate.css.js';\nimport { cx } from '../../../theme/tools.js';\n\ntype ListBaseProps = {\n  toolbarNode?: ReactNode;\n  statusNode?: ReactNode;\n  tableFooterNode?: ReactNode;\n  presentation?: 'framed' | 'flat';\n  className?: string;\n  bodyScrollMode?: 'page' | 'contained';\n};\n\ntype ListWithHeaderProps<Row> = ListBaseProps & {\n  header: EntityHeaderProps;\n  headerNode?: never;\n  table: BackofficeDataTableProps<Row>;\n  tableNode?: never;\n};\n\ntype ListWithHeaderNode<Row> = ListBaseProps & {\n  header?: never;\n  headerNode: ReactNode;\n  table: BackofficeDataTableProps<Row>;\n  tableNode?: never;\n};\n\ntype ListWithCustomTable =\n  | (ListBaseProps & {\n      header: EntityHeaderProps;\n      headerNode?: never;\n      table?: never;\n      tableNode: ReactNode;\n    })\n  | (ListBaseProps & {\n      header?: never;\n      headerNode: ReactNode;\n      table?: never;\n      tableNode: ReactNode;\n    });\n\nexport type ListPageTemplateProps<Row> =\n  | ListWithHeaderProps<Row>\n  | ListWithHeaderNode<Row>\n  | ListWithCustomTable;\n\nexport const ListPageTemplate = <Row,>(\n  props: ListPageTemplateProps<Row>,\n): JSX.Element => {\n  const {\n    presentation = 'framed',\n    className,\n    toolbarNode,\n    statusNode,\n    tableFooterNode,\n    bodyScrollMode = 'page',\n  } = props;\n  const hasContainedBodyScroll = bodyScrollMode === 'contained';\n\n  const hasToolbar = toolbarNode != null;\n  const hasStatus = statusNode != null;\n  const containerVariant = styles.containerRows({\n    scrollMode: bodyScrollMode,\n    toolbar: hasToolbar,\n    status: hasStatus,\n  });\n  let containedContainerClassName: string | null = null;\n  let containedTableCardClassName: string | null = null;\n  let containedTableScrollClassName: string | null = null;\n  if (hasContainedBodyScroll) {\n    containedContainerClassName = styles.containerContained;\n    containedTableCardClassName = styles.tableCardContained;\n    containedTableScrollClassName = styles.tableScrollContained;\n  }\n\n  const containerClasses = cx(\n    styles.container,\n    containerVariant,\n    containedContainerClassName,\n    styles.containerPresentation[presentation],\n    className,\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  let resolvedTable: ReactNode;\n  if ('tableNode' in props) {\n    resolvedTable = props.tableNode;\n  } else {\n    resolvedTable = (\n      <BackofficeDataTable {...props.table} bodyScrollMode={bodyScrollMode} />\n    );\n  }\n\n  let footerSection: ReactNode | null = null;\n  if (tableFooterNode != null) {\n    footerSection = (\n      <div\n        className={styles.tableFooter}\n        data-list-template-slot=\"table-footer\"\n      >\n        {tableFooterNode}\n      </div>\n    );\n  }\n\n  return (\n    <div className={containerClasses} data-scroll-mode={bodyScrollMode}>\n      <div\n        className={cx(\n          styles.headerCard,\n          styles.headerPresentation[presentation],\n        )}\n        data-list-template-slot=\"header\"\n      >\n        {resolvedHeader}\n      </div>\n      {hasToolbar && (\n        <div\n          className={cx(\n            styles.toolbarCard,\n            styles.toolbarPresentation[presentation],\n          )}\n          data-list-template-slot=\"toolbar\"\n        >\n          {toolbarNode}\n        </div>\n      )}\n      {hasStatus && <div data-list-template-slot=\"status\">{statusNode}</div>}\n      <div\n        className={cx(\n          styles.tableCard,\n          containedTableCardClassName,\n          styles.tablePresentation[presentation],\n        )}\n        data-list-template-slot=\"table\"\n      >\n        <div\n          className={cx(styles.tableScroll, containedTableScrollClassName)}\n          data-list-template-slot=\"table-scroll\"\n        >\n          {resolvedTable}\n        </div>\n        {footerSection}\n      </div>\n    </div>\n  );\n};\n\nexport default ListPageTemplate;\n"],"mappings":";;;;;;AAwDA,IAAa,KACX,MACgB;CAChB,IAAM,EACJ,kBAAe,UACf,cACA,gBACA,eACA,oBACA,oBAAiB,WACf,GACE,IAAyB,MAAmB,aAE5C,IAAa,KAAe,MAC5B,IAAY,KAAc,MAC1B,IAAmB,EAAqB;EAC5C,YAAY;EACZ,SAAS;EACT,QAAQ;EACT,CAAC,EACE,IAA6C,MAC7C,IAA6C,MAC7C,IAA+C;CACnD,AAAI,MACF,IAA8B,GAC9B,IAA8B,GAC9B,IAAgC;CAGlC,IAAM,IAAmB,EACvB,GACA,GACA,GACA,EAA6B,IAC7B,EACD,EAEG;CACJ,AAGE,IAHE,gBAAgB,IACD,EAAM,aAEN,kBAAC,GAAD,EAAc,GAAI,EAAM,QAAU,CAAA;CAGrD,IAAI;CACJ,AAGE,IAHE,eAAe,IACD,EAAM,YAGpB,kBAAC,GAAD;EAAqB,GAAI,EAAM;EAAuB;EAAkB,CAAA;CAI5E,IAAI,IAAkC;CAYtC,OAXI,KAAmB,SACrB,IACE,kBAAC,OAAD;EACE,WAAW;EACX,2BAAwB;YAEvB;EACG,CAAA,GAKR,kBAAC,OAAD;EAAK,WAAW;EAAkB,oBAAkB;YAApD;GACE,kBAAC,OAAD;IACE,WAAW,EACT,GACA,EAA0B,GAC3B;IACD,2BAAwB;cAEvB;IACG,CAAA;GACL,KACC,kBAAC,OAAD;IACE,WAAW,EACT,WACA,EAA2B,GAC5B;IACD,2BAAwB;cAEvB;IACG,CAAA;GAEP,KAAa,kBAAC,OAAD;IAAK,2BAAwB;cAAU;IAAiB,CAAA;GACtE,kBAAC,OAAD;IACE,WAAW,EACT,GACA,GACA,EAAyB,GAC1B;IACD,2BAAwB;cAN1B,CAQE,kBAAC,OAAD;KACE,WAAW,EAAG,GAAoB,EAA8B;KAChE,2BAAwB;eAEvB;KACG,CAAA,EACL,EACG;;GACF"}

package/lib/esm/backoffice/templates/list_page_template/listPageTemplate.css.js

@@ -7,21 +7,81 @@
 /* empty css                                               */
 /* empty css                                               */
 /* empty css                                */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/backoffice/templates/list_page_template/listPageTemplate.css.ts
-var e = "dlvvnq0 txvbqb9iy", t = {
-	framed: "dlvvnq1 txvbqbaog",
-	flat: "dlvvnq2 txvbqbao7"
-}, n = "dlvvnq3", r = "dlvvnq4", i = "dlvvnq5", a = {
-	framed: "dlvvnq6 _1995g4r1 _1995g4r0 _1995g4r2 _1995g4rb _1995g4rd _1995g4rg _1995g4rm",
-	flat: "dlvvnq7 txvbqbnvp txvbqboiy txvbqbp67 txvbqblxy"
-}, o = "dlvvnq8", s = {
+var t = "dlvvnq0 txvbqb9iy", n = "dlvvnq1 txvbqbcgg txvbqbjh7", r = {
+	framed: "dlvvnq2 txvbqbaog",
+	flat: "dlvvnq3 txvbqbao7"
+}, i = e({
+	defaultClassName: "dlvvnq4",
+	variantClassNames: {
+		scrollMode: {
+			page: "dlvvnq5",
+			contained: "dlvvnq6"
+		},
+		toolbar: {
+			true: "dlvvnq7",
+			false: "dlvvnq8"
+		},
+		status: {
+			true: "dlvvnq9",
+			false: "dlvvnqa"
+		}
+	},
+	defaultVariants: {},
+	compoundVariants: [
+		[{
+			scrollMode: "page",
+			toolbar: !0,
+			status: !0
+		}, "dlvvnqb"],
+		[{
+			scrollMode: "page",
+			toolbar: !0,
+			status: !1
+		}, "dlvvnqc"],
+		[{
+			scrollMode: "page",
+			toolbar: !1,
+			status: !0
+		}, "dlvvnqd"],
+		[{
+			scrollMode: "page",
+			toolbar: !1,
+			status: !1
+		}, "dlvvnqe"],
+		[{
+			scrollMode: "contained",
+			toolbar: !0,
+			status: !0
+		}, "dlvvnqf"],
+		[{
+			scrollMode: "contained",
+			toolbar: !0,
+			status: !1
+		}, "dlvvnqg"],
+		[{
+			scrollMode: "contained",
+			toolbar: !1,
+			status: !0
+		}, "dlvvnqh"],
+		[{
+			scrollMode: "contained",
+			toolbar: !1,
+			status: !1
+		}, "dlvvnqi"]
+	]
+}), a = "dlvvnqj", o = {
+	framed: "dlvvnqk _1995g4r1 _1995g4r0 _1995g4r2 _1995g4rb _1995g4rd _1995g4rg _1995g4rm",
+	flat: "dlvvnql txvbqbnvp txvbqboiy txvbqbp67 txvbqblxy"
+}, s = "dlvvnqm", c = {
 	framed: "_1995g4r1 _1995g4r0 _1995g4r4 _1995g4ra _1995g4rd _1995g4rg _1995g4rk",
-	flat: "dlvvnq9 _1995g4r1 _1995g4r0 _1995g4r4 _1995g4ra _1995g4rd _1995g4rg _1995g4rk"
-}, c = "dlvvnqb dlvvnqa txvbqb9ip txvbqbai7 txvbqbaog", l = {
-	framed: "dlvvnqc _1995g4r1 _1995g4r0 _1995g4r5 _1995g4rb _1995g4rd _1995g4rg _1995g4rk",
-	flat: "dlvvnqd _1995g4r1 _1995g4r0 _1995g4r5 _1995g4ra _1995g4rd _1995g4rg _1995g4rk"
-}, u = "dlvvnqe", d = "dlvvnqf txvbqbhxp";
+	flat: "dlvvnqn _1995g4r1 _1995g4r0 _1995g4r4 _1995g4ra _1995g4rd _1995g4rg _1995g4rk"
+}, l = "dlvvnqp dlvvnqo txvbqb9ip txvbqbai7 txvbqbaog", u = "dlvvnqq txvbqbcgg txvbqbjh7", d = {
+	framed: "dlvvnqr _1995g4r1 _1995g4r0 _1995g4r5 _1995g4rb _1995g4rd _1995g4rg _1995g4rk",
+	flat: "dlvvnqs _1995g4r1 _1995g4r0 _1995g4r5 _1995g4ra _1995g4rd _1995g4rg _1995g4rk"
+}, f = "dlvvnqt", p = "dlvvnqu txvbqb9my txvbqbjh7", m = "dlvvnqv txvbqbhxp";
 //#endregion
-export { e as container, r as containerNoToolbar, t as containerPresentation, n as containerWithToolbar, i as headerCard, a as headerPresentation, c as tableCard, d as tableFooter, l as tablePresentation, u as tableScroll, o as toolbarCard, s as toolbarPresentation };
+export { t as container, n as containerContained, r as containerPresentation, i as containerRows, a as headerCard, o as headerPresentation, l as tableCard, u as tableCardContained, m as tableFooter, d as tablePresentation, f as tableScroll, p as tableScrollContained, s as toolbarCard, c as toolbarPresentation };
 
 //# sourceMappingURL=listPageTemplate.css.js.map

package/lib/esm/backoffice/templates/list_page_template/listPageTemplate.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"listPageTemplate.css.js","names":[],"sources":["../../../../../src/backoffice/templates/list_page_template/listPageTemplate.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { adminSurfaceRecipe } from '../../../admin/theme/adminSurface.css.js';\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nexport const container = sprinkles({\n  display: 'grid',\n});\n\nexport const containerPresentation = {\n  framed: sprinkles({\n    gap: 3,\n  }),\n  flat: sprinkles({\n    gap: 2,\n  }),\n};\n\nexport const containerWithToolbar = style({\n  gridTemplateRows: 'auto auto auto minmax(0, auto)',\n});\n\nexport const containerNoToolbar = style({\n  gridTemplateRows: 'auto auto minmax(0, auto)',\n});\n\nexport const headerCard = style([\n  {\n    minWidth: 0,\n  },\n]);\n\nexport const headerPresentation = {\n  framed: style([\n    adminSurfaceRecipe({\n      level: 'panel',\n      radius: 'lg',\n      border: 'subtle',\n      elevation: 'none',\n      padding: 'lg',\n    }),\n    {\n      backgroundImage: `linear-gradient(135deg, color-mix(in srgb, ${vars.colors.surface} 88%, ${vars.colors['blue-50']}) 0%, ${vars.colors.surface} 58%)`,\n    },\n  ]),\n  flat: sprinkles({\n    paddingX: 1,\n    paddingY: 1,\n  }),\n};\n\nexport const toolbarCard = style([\n  {\n    minWidth: 0,\n  },\n]);\n\nexport const toolbarPresentation = {\n  framed: adminSurfaceRecipe({\n    level: 'toolbar',\n    radius: 'md',\n    border: 'subtle',\n    elevation: 'none',\n    padding: 'sm',\n  }),\n  flat: style([\n    adminSurfaceRecipe({\n      level: 'toolbar',\n      radius: 'md',\n      border: 'subtle',\n      elevation: 'none',\n      padding: 'sm',\n    }),\n    {\n      boxShadow: `0 1px 0 ${vars.colors.borderLight}`,\n    },\n  ]),\n};\n\nexport const tableCard = style([\n  sprinkles({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 3,\n  }),\n  {\n    minHeight: 0,\n    minWidth: 0,\n  },\n]);\n\nexport const tablePresentation = {\n  framed: style([\n    adminSurfaceRecipe({\n      level: 'table',\n      radius: 'lg',\n      border: 'subtle',\n      elevation: 'none',\n      padding: 'sm',\n    }),\n    {\n      boxShadow: `0 1px 0 ${vars.colors.borderSubtle}`,\n    },\n  ]),\n  flat: style([\n    adminSurfaceRecipe({\n      level: 'table',\n      radius: 'md',\n      border: 'subtle',\n      elevation: 'none',\n      padding: 'sm',\n    }),\n    {\n      boxShadow: `0 1px 0 ${vars.colors.borderLight}`,\n    },\n  ]),\n};\n\nexport const tableScroll = style({\n  overflowX: 'auto',\n  overflowY: 'visible',\n  scrollbarWidth: 'thin',\n  scrollbarColor: `${vars.colors.border} transparent`,\n});\n\nexport const tableFooter = sprinkles({\n  marginTop: 0,\n});\n"],"mappings":""}
+{"version":3,"file":"listPageTemplate.css.js","names":[],"sources":["../../../../../src/backoffice/templates/list_page_template/listPageTemplate.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { adminSurfaceRecipe } from '../../../admin/theme/adminSurface.css.js';\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nexport const container = sprinkles({\n  display: 'grid',\n});\n\nexport const containerContained = sprinkles({\n  height: 'full',\n  minHeight: 0,\n});\n\nexport const containerPresentation = {\n  framed: sprinkles({\n    gap: 3,\n  }),\n  flat: sprinkles({\n    gap: 2,\n  }),\n};\n\nexport const containerRows = recipe({\n  variants: {\n    scrollMode: {\n      page: {},\n      contained: {},\n    },\n    toolbar: {\n      true: {},\n      false: {},\n    },\n    status: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundVariants: [\n    {\n      variants: { scrollMode: 'page', toolbar: true, status: true },\n      style: { gridTemplateRows: 'auto auto auto minmax(0, auto)' },\n    },\n    {\n      variants: { scrollMode: 'page', toolbar: true, status: false },\n      style: { gridTemplateRows: 'auto auto minmax(0, auto)' },\n    },\n    {\n      variants: { scrollMode: 'page', toolbar: false, status: true },\n      style: { gridTemplateRows: 'auto auto minmax(0, auto)' },\n    },\n    {\n      variants: { scrollMode: 'page', toolbar: false, status: false },\n      style: { gridTemplateRows: 'auto minmax(0, auto)' },\n    },\n    {\n      variants: { scrollMode: 'contained', toolbar: true, status: true },\n      style: { gridTemplateRows: 'auto auto auto minmax(0, 1fr)' },\n    },\n    {\n      variants: { scrollMode: 'contained', toolbar: true, status: false },\n      style: { gridTemplateRows: 'auto auto minmax(0, 1fr)' },\n    },\n    {\n      variants: { scrollMode: 'contained', toolbar: false, status: true },\n      style: { gridTemplateRows: 'auto auto minmax(0, 1fr)' },\n    },\n    {\n      variants: { scrollMode: 'contained', toolbar: false, status: false },\n      style: { gridTemplateRows: 'auto minmax(0, 1fr)' },\n    },\n  ],\n});\n\nexport const headerCard = style([\n  {\n    minWidth: 0,\n  },\n]);\n\nexport const headerPresentation = {\n  framed: style([\n    adminSurfaceRecipe({\n      level: 'panel',\n      radius: 'lg',\n      border: 'subtle',\n      elevation: 'none',\n      padding: 'lg',\n    }),\n    {\n      backgroundImage: `linear-gradient(135deg, color-mix(in srgb, ${vars.colors.surface} 88%, ${vars.colors['blue-50']}) 0%, ${vars.colors.surface} 58%)`,\n    },\n  ]),\n  flat: sprinkles({\n    paddingX: 1,\n    paddingY: 1,\n  }),\n};\n\nexport const toolbarCard = style([\n  {\n    minWidth: 0,\n  },\n]);\n\nexport const toolbarPresentation = {\n  framed: adminSurfaceRecipe({\n    level: 'toolbar',\n    radius: 'md',\n    border: 'subtle',\n    elevation: 'none',\n    padding: 'sm',\n  }),\n  flat: style([\n    adminSurfaceRecipe({\n      level: 'toolbar',\n      radius: 'md',\n      border: 'subtle',\n      elevation: 'none',\n      padding: 'sm',\n    }),\n    {\n      boxShadow: `0 1px 0 ${vars.colors.borderLight}`,\n    },\n  ]),\n};\n\nexport const tableCard = style([\n  sprinkles({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 3,\n  }),\n  {\n    minHeight: 0,\n    minWidth: 0,\n  },\n]);\n\nexport const tableCardContained = sprinkles({\n  height: 'full',\n  minHeight: 0,\n});\n\nexport const tablePresentation = {\n  framed: style([\n    adminSurfaceRecipe({\n      level: 'table',\n      radius: 'lg',\n      border: 'subtle',\n      elevation: 'none',\n      padding: 'sm',\n    }),\n    {\n      boxShadow: `0 1px 0 ${vars.colors.borderSubtle}`,\n    },\n  ]),\n  flat: style([\n    adminSurfaceRecipe({\n      level: 'table',\n      radius: 'md',\n      border: 'subtle',\n      elevation: 'none',\n      padding: 'sm',\n    }),\n    {\n      boxShadow: `0 1px 0 ${vars.colors.borderLight}`,\n    },\n  ]),\n};\n\nexport const tableScroll = style({\n  overflowX: 'auto',\n  overflowY: 'visible',\n  scrollbarWidth: 'thin',\n  scrollbarColor: `${vars.colors.border} transparent`,\n});\n\nexport const tableScrollContained = sprinkles({\n  flex: 1,\n  minHeight: 0,\n});\n\nexport const tableFooter = sprinkles({\n  marginTop: 0,\n});\n"],"mappings":""}

package/lib/esm/components/data-table/DataTable.css.js

@@ -10,103 +10,103 @@ var t = e({
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
-}), n = e({
-	defaultClassName: "ysn8468",
+}), n = "ysn8466 txvbqbcgg txvbqbjh7 txvbqbl7g", r = e({
+	defaultClassName: "ysn8469",
 	variantClassNames: { kind: {
-		default: "ysn8469 ysn8466 txvbqb12g txvbqb1qg txvbqb62p txvbqb3ny txvbqbv45",
-		brandTable: "ysn846a ysn8467 txvbqbv0t txvbqb12g txvbqb1qg txvbqb62p txvbqb3s7"
+		default: "ysn846a ysn8467 txvbqb12g txvbqb1qg txvbqb62p txvbqb3ny txvbqbv45",
+		brandTable: "ysn846b ysn8468 txvbqbv0t txvbqb12g txvbqb1qg txvbqb62p txvbqb3s7"
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
-}), r = "ysn846b txvbqb9iy txvbqbu7g txvbqbc7", i = "var(--ysn846c)", a = "var(--ysn846d)", o = "var(--ysn846e)", s = "var(--ysn846f)", c = e({
-	defaultClassName: "ysn846g",
+}), i = "ysn846c txvbqb9iy txvbqbu7g txvbqbc7", a = "var(--ysn846d)", o = "var(--ysn846e)", s = "var(--ysn846f)", c = "var(--ysn846g)", l = e({
+	defaultClassName: "ysn846h",
 	variantClassNames: { density: {
-		compact: "ysn846h",
-		default: "ysn846i",
-		comfortable: "ysn846j"
+		compact: "ysn846i",
+		default: "ysn846j",
+		comfortable: "ysn846k"
 	} },
 	defaultVariants: { density: "default" },
 	compoundVariants: []
-}), l = e({
-	defaultClassName: "ysn846o ysn846k txvbqbcp txvbqb9ip txvbqbaj7 txvbqbao7 txvbqbl7g txvbqbt7g txvbqbuxg",
+}), u = e({
+	defaultClassName: "ysn846p ysn846l txvbqbcp txvbqb9ip txvbqbaj7 txvbqbao7 txvbqbl7g txvbqbt7g txvbqbuxg",
 	variantClassNames: { kind: {
-		default: "ysn846p ysn846m ysn846l txvbqbva1 txvbqbamp txvbqbefy txvbqb66",
-		brandTable: "ysn846q ysn846n txvbqbnvg txvbqboip txvbqbp6y txvbqblyp txvbqbv8z txvbqbamy txvbqb8p txvbqbefg txvbqb66 txvbqb54y"
+		default: "ysn846q ysn846n ysn846m txvbqbva1 txvbqbamp txvbqbefy txvbqb66",
+		brandTable: "ysn846r ysn846o txvbqbnvg txvbqboip txvbqbp6y txvbqblyp txvbqbv8z txvbqbamy txvbqb8p txvbqbefg txvbqb66 txvbqb54y"
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
-}), u = e({
-	defaultClassName: "ysn846t ysn846r txvbqb9ip txvbqbai7",
+}), d = e({
+	defaultClassName: "ysn846u ysn846s txvbqb9ip txvbqbai7",
 	variantClassNames: { kind: {
-		default: "ysn846u",
-		brandTable: "ysn846v ysn846s txvbqbv0t"
+		default: "ysn846v",
+		brandTable: "ysn846w ysn846t txvbqbv0t"
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
-}), d = e({
-	defaultClassName: "ysn84611 ysn846w txvbqbc7 txvbqb1qg txvbqb12g txvbqb9iy txvbqb78 txvbqb6x txvbqb7k",
+}), f = "ysn846y ysn846x txvbqb9my txvbqbjh7", p = e({
+	defaultClassName: "ysn84614 ysn846z txvbqbc7 txvbqb1qg txvbqb12g txvbqb9iy txvbqb78 txvbqb6x txvbqb7k",
 	variantClassNames: { kind: {
-		default: "ysn84612 ysn846y ysn846x txvbqbv41 txvbqb3og txvbqb62p",
-		brandTable: "ysn84613 ysn84610 ysn846z txvbqbv0t txvbqb3s7 txvbqb62p"
+		default: "ysn84615 ysn84611 ysn84610 txvbqbv41 txvbqb3og txvbqb62p",
+		brandTable: "ysn84616 ysn84613 ysn84612 txvbqbv0t txvbqb3s7 txvbqb62p"
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
-}), f = e({
-	defaultClassName: "ysn84616",
+}), m = e({
+	defaultClassName: "ysn84619",
 	variantClassNames: { kind: {
-		default: "ysn84617 ysn84614 txvbqbv43",
-		brandTable: "ysn84618 ysn84615 txvbqbv0t"
+		default: "ysn8461a ysn84617 txvbqbv43",
+		brandTable: "ysn8461b ysn84618 txvbqbv0t"
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
-}), p = e({
-	defaultClassName: "ysn8461b",
+}), h = e({
+	defaultClassName: "ysn8461e",
 	variantClassNames: { kind: {
-		default: "ysn8461c ysn84619 txvbqbv41",
-		brandTable: "ysn8461d ysn8461a txvbqbv0t"
+		default: "ysn8461f ysn8461c txvbqbv41",
+		brandTable: "ysn8461g ysn8461d txvbqbv0t"
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
-}), m = e({
-	defaultClassName: "ysn8461i ysn8461e txvbqbcp txvbqb9ip txvbqbao7 txvbqbk5y txvbqbl7g",
+}), g = e({
+	defaultClassName: "ysn8461l ysn8461h txvbqbcp txvbqb9ip txvbqbao7 txvbqbk5y txvbqbl7g",
 	variantClassNames: { kind: {
-		default: "ysn8461j ysn8461g ysn8461f txvbqbva1",
-		brandTable: "ysn8461k ysn8461h txvbqbnvg txvbqboip txvbqbp6y txvbqblyp txvbqbv9z txvbqbamp txvbqb8y txvbqb54y"
+		default: "ysn8461m ysn8461j ysn8461i txvbqbva1",
+		brandTable: "ysn8461n ysn8461k txvbqbnvg txvbqboip txvbqbp6y txvbqblyp txvbqbv9z txvbqbamp txvbqb8y txvbqb54y"
 	} },
 	defaultVariants: { kind: "default" },
 	compoundVariants: []
-}), h = "ysn8461l txvbqbamp txvbqbv9z", g = "ysn8461m txvbqbv9z", _ = "ysn8461n", v = e({
-	defaultClassName: "ysn8461r",
+}), _ = "ysn8461o txvbqbamp txvbqbv9z", v = "ysn8461p txvbqbv9z", y = "ysn8461q", b = e({
+	defaultClassName: "ysn8461u",
 	variantClassNames: { align: {
-		left: "ysn8461s ysn8461o txvbqbdpg txvbqbt6p",
-		center: "ysn8461t ysn8461p txvbqbdoy txvbqbt6y",
-		right: "ysn8461u ysn8461q txvbqbdp7 txvbqbt77"
+		left: "ysn8461v ysn8461r txvbqbdpg txvbqbt6p",
+		center: "ysn8461w ysn8461s txvbqbdoy txvbqbt6y",
+		right: "ysn8461x ysn8461t txvbqbdp7 txvbqbt77"
 	} },
 	defaultVariants: {},
 	compoundVariants: []
-}), y = e({
-	defaultClassName: "ysn8461v",
+}), x = e({
+	defaultClassName: "ysn8461y",
 	variantClassNames: { state: {
-		default: "ysn8461w",
-		selected: "ysn8461x",
-		muted: "ysn8461y",
-		danger: "ysn8461z"
+		default: "ysn8461z",
+		selected: "ysn84620",
+		muted: "ysn84621",
+		danger: "ysn84622"
 	} },
 	defaultVariants: {},
 	compoundVariants: []
-}), b = "ysn84620", x = "ysn84621 txvbqb97 txvbqbva1 txvbqbt6y", S = e({
-	defaultClassName: "ysn84622",
+}), S = "ysn84623", C = "ysn84624 txvbqb97 txvbqbva1 txvbqbt6y", w = e({
+	defaultClassName: "ysn84625",
 	variantClassNames: { minVisibleAt: {
-		sm: "ysn84623",
-		md: "ysn84624",
-		lg: "ysn84625",
-		xl: "ysn84626",
-		xxl: "ysn84627"
+		sm: "ysn84626",
+		md: "ysn84627",
+		lg: "ysn84628",
+		xl: "ysn84629",
+		xxl: "ysn8462a"
 	} },
 	defaultVariants: {},
 	compoundVariants: []
 });
 //#endregion
-export { v as alignRecipe, u as body, m as cell, t as container, c as densityRecipe, x as emptyCell, b as emptyRow, n as header, l as headerCell, r as headerRow, S as hideBelowRecipe, h as primaryCell, g as primaryHeaderCell, d as row, f as rowEven, p as rowOdd, y as rowStateRecipe, _ as stickyHeader, a as tableCellFontSizeVar, i as tableCellPaddingVar, o as tableEmptyRowPaddingVar, s as tableRowMinHeightVar };
+export { b as alignRecipe, d as body, f as bodyContained, g as cell, t as container, n as containerWithContainedBody, l as densityRecipe, C as emptyCell, S as emptyRow, r as header, u as headerCell, i as headerRow, w as hideBelowRecipe, _ as primaryCell, v as primaryHeaderCell, p as row, m as rowEven, h as rowOdd, x as rowStateRecipe, y as stickyHeader, o as tableCellFontSizeVar, a as tableCellPaddingVar, s as tableEmptyRowPaddingVar, c as tableRowMinHeightVar };
 
 //# sourceMappingURL=DataTable.css.js.map

package/lib/esm/components/data-table/DataTable.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.css.js","names":[],"sources":["../../../../src/components/data-table/DataTable.css.ts"],"sourcesContent":["import {\n  createVar,\n  fallbackVar,\n  style,\n  type StyleRule,\n} from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { vars } from '../../theme/themeContract.js';\n\nimport {\n  DATA_TABLE_BREAKPOINT_ENTRIES,\n  type DataTableBreakpoint,\n} from './tableBreakpoints.js';\nimport { sprinkles } from '../../theme/sprinkles.css.js';\n\nexport const container = recipe({\n  base: sprinkles({\n    display: 'flex',\n    flexDirection: 'column',\n    width: 'full',\n    containerType: 'inline-size',\n  }),\n  variants: {\n    kind: {\n      default: sprinkles({\n        backgroundColor: 'surface',\n        borderColor: 'border',\n        borderRadius: 'lg',\n        borderStyle: 'solid',\n        borderWidth: 'default',\n        overflowX: 'auto',\n        overflowY: 'hidden',\n      }),\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n        borderRadius: 'none',\n        borderStyle: 'none',\n        borderWidth: 0,\n        overflow: 'visible',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const header = recipe({\n  variants: {\n    kind: {\n      default: sprinkles({\n        borderWidth: 0,\n        borderStyle: 'solid',\n        borderBottomWidth: 'default',\n        borderBottomColor: 'borderSubtle',\n        backgroundColor: 'surfaceMuted',\n      }),\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n        borderWidth: 0,\n        borderStyle: 'solid',\n        borderBottomWidth: 'default',\n        borderBottomColor: 'brandSecondaryOrange-20',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const headerRow = sprinkles({\n  display: 'grid',\n  width: 'full',\n  alignItems: 'stretch',\n});\n\nexport const tableCellPaddingVar = createVar();\nexport const tableCellFontSizeVar = createVar();\nexport const tableEmptyRowPaddingVar = createVar();\nexport const tableRowMinHeightVar = createVar();\n\nexport const densityRecipe = recipe({\n  variants: {\n    density: {\n      compact: {\n        vars: {\n          [tableCellPaddingVar]: `${vars.spacing[2]} ${vars.spacing[3]}`,\n          [tableCellFontSizeVar]: vars.fontSize.sm,\n          [tableEmptyRowPaddingVar]: `${vars.spacing[4]} ${vars.spacing[3]}`,\n          [tableRowMinHeightVar]: vars.spacing[9],\n        },\n      },\n      default: {\n        vars: {\n          [tableCellPaddingVar]: `${vars.spacing[3]} ${vars.spacing[4]}`,\n          [tableCellFontSizeVar]: vars.fontSize.sm,\n          [tableEmptyRowPaddingVar]: `${vars.spacing[6]} ${vars.spacing[4]}`,\n          [tableRowMinHeightVar]: vars.spacing[10],\n        },\n      },\n      comfortable: {\n        vars: {\n          [tableCellPaddingVar]: `${vars.spacing[3]} ${vars.spacing[5]}`,\n          [tableCellFontSizeVar]: vars.fontSize.base,\n          [tableEmptyRowPaddingVar]: `${vars.spacing[7]} ${vars.spacing[5]}`,\n          [tableRowMinHeightVar]: vars.spacing[12],\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    density: 'default',\n  },\n});\n\nexport const headerCell = recipe({\n  base: sprinkles({\n    alignItems: 'center',\n    display: 'flex',\n    flexShrink: 0,\n    gap: 2,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  }),\n  variants: {\n    kind: {\n      default: style([\n        sprinkles({\n          color: 'textSecondary',\n          fontWeight: 'semibold',\n          letterSpacing: 'capsNarrow',\n          textTransform: 'uppercase',\n        }),\n        {\n          padding: fallbackVar(\n            tableCellPaddingVar,\n            `${vars.spacing[3]} ${vars.spacing[4]}`,\n          ),\n          fontSize: fallbackVar(tableCellFontSizeVar, vars.fontSize.sm),\n          minHeight: fallbackVar(tableRowMinHeightVar, vars.spacing[10]),\n          selectors: {\n            '&:last-child': {\n              borderRight: 'none',\n            },\n          },\n        },\n      ]),\n      brandTable: sprinkles({\n        color: 'black-300',\n        fontWeight: 'bold',\n        fontSize: 'xs',\n        letterSpacing: 'caps',\n        textTransform: 'uppercase',\n        paddingY: 4,\n        paddingX: 0,\n        borderRightWidth: 0,\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const body = recipe({\n  base: sprinkles({\n    display: 'flex',\n    flexDirection: 'column',\n  }),\n  variants: {\n    kind: {\n      default: {},\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const row = recipe({\n  base: sprinkles({\n    alignItems: 'stretch',\n    borderStyle: 'solid',\n    borderWidth: 0,\n    display: 'grid',\n    transitionProperty: 'colors',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  variants: {\n    kind: {\n      default: style([\n        sprinkles({\n          backgroundColor: 'surface',\n          borderBottomColor: 'borderLight',\n          borderBottomWidth: 'default',\n        }),\n        {\n          selectors: {\n            '&:last-child': {\n              borderBottomWidth: 0,\n            },\n            '&:hover': {\n              backgroundColor: vars.colors.surfaceMuted,\n            },\n          },\n        },\n      ]),\n      brandTable: style([\n        sprinkles({\n          backgroundColor: 'transparent',\n          borderBottomColor: 'brandSecondaryOrange-20',\n          borderBottomWidth: 'default',\n        }),\n        {\n          selectors: {\n            '&:last-child': {\n              borderBottomWidth: 0,\n            },\n            '&:hover': {\n              backgroundColor: 'transparent',\n            },\n          },\n        },\n      ]),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const rowEven = recipe({\n  variants: {\n    kind: {\n      default: sprinkles({\n        backgroundColor: 'surfaceSecondary',\n      }),\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const rowOdd = recipe({\n  variants: {\n    kind: {\n      default: sprinkles({\n        backgroundColor: 'surface',\n      }),\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const cell = recipe({\n  base: sprinkles({\n    alignItems: 'center',\n    display: 'flex',\n    gap: 2,\n    minWidth: 0,\n    overflow: 'hidden',\n  }),\n  variants: {\n    kind: {\n      default: style([\n        sprinkles({\n          color: 'textSecondary',\n        }),\n        {\n          padding: fallbackVar(\n            tableCellPaddingVar,\n            `${vars.spacing[3]} ${vars.spacing[4]}`,\n          ),\n          fontSize: fallbackVar(tableCellFontSizeVar, vars.fontSize.sm),\n          minHeight: fallbackVar(tableRowMinHeightVar, vars.spacing[10]),\n          selectors: {\n            '&:last-child': {\n              borderRight: 'none',\n            },\n          },\n        },\n      ]),\n      brandTable: sprinkles({\n        color: 'text',\n        fontWeight: 'semibold',\n        fontSize: 'sm',\n        paddingY: 4,\n        paddingX: 0,\n        borderRightWidth: 0,\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const primaryCell = sprinkles({\n  fontWeight: 'semibold',\n  color: 'text',\n});\n\nexport const primaryHeaderCell = sprinkles({\n  color: 'text',\n});\n\nexport const stickyHeader = style({\n  position: 'sticky',\n  top: 0,\n  zIndex: vars.zIndex[10],\n});\n\nexport const alignRecipe = recipe({\n  variants: {\n    align: {\n      left: sprinkles({\n        justifyContent: 'flex-start',\n        textAlign: 'left',\n      }),\n      center: sprinkles({\n        justifyContent: 'center',\n        textAlign: 'center',\n      }),\n      right: sprinkles({\n        justifyContent: 'flex-end',\n        textAlign: 'end',\n      }),\n    },\n  },\n});\n\nexport const rowStateRecipe = recipe({\n  variants: {\n    state: {\n      default: {},\n      selected: {\n        backgroundColor: vars.colors.primaryLight,\n      },\n      muted: {\n        opacity: 0.72,\n      },\n      danger: {\n        backgroundColor: vars.colors['red-50'],\n      },\n    },\n  },\n});\n\nexport const emptyRow = style({\n  padding: fallbackVar(\n    tableEmptyRowPaddingVar,\n    `${vars.spacing[6]} ${vars.spacing[4]}`,\n  ),\n});\n\nexport const emptyCell = sprinkles({\n  fontSize: 'base',\n  color: 'textSecondary',\n  textAlign: 'center',\n});\n\nconst hideBelowMap: Record<DataTableBreakpoint, StyleRule> = {} as Record<\n  DataTableBreakpoint,\n  StyleRule\n>;\n\nDATA_TABLE_BREAKPOINT_ENTRIES.forEach(([breakpoint, width]) => {\n  hideBelowMap[breakpoint] = {\n    '@container': {\n      [`(max-width: ${width - 0.5}px)`]: {\n        visibility: 'hidden',\n        opacity: 0,\n        pointerEvents: 'none',\n        paddingInline: 0,\n        paddingBlock: 0,\n        borderRight: 'none',\n        overflow: 'hidden',\n      },\n    },\n  };\n});\n\nexport const hideBelowRecipe = recipe({\n  variants: {\n    minVisibleAt: hideBelowMap,\n  },\n});\n"],"mappings":""}
+{"version":3,"file":"DataTable.css.js","names":[],"sources":["../../../../src/components/data-table/DataTable.css.ts"],"sourcesContent":["import {\n  createVar,\n  fallbackVar,\n  style,\n  type StyleRule,\n} from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { vars } from '../../theme/themeContract.js';\n\nimport {\n  DATA_TABLE_BREAKPOINT_ENTRIES,\n  type DataTableBreakpoint,\n} from './tableBreakpoints.js';\nimport { sprinkles } from '../../theme/sprinkles.css.js';\n\nexport const container = recipe({\n  base: sprinkles({\n    display: 'flex',\n    flexDirection: 'column',\n    width: 'full',\n    containerType: 'inline-size',\n  }),\n  variants: {\n    kind: {\n      default: sprinkles({\n        backgroundColor: 'surface',\n        borderColor: 'border',\n        borderRadius: 'lg',\n        borderStyle: 'solid',\n        borderWidth: 'default',\n        overflowX: 'auto',\n        overflowY: 'hidden',\n      }),\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n        borderRadius: 'none',\n        borderStyle: 'none',\n        borderWidth: 0,\n        overflow: 'visible',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const containerWithContainedBody = sprinkles({\n  height: 'full',\n  minHeight: 0,\n  overflow: 'hidden',\n});\n\nexport const header = recipe({\n  variants: {\n    kind: {\n      default: sprinkles({\n        borderWidth: 0,\n        borderStyle: 'solid',\n        borderBottomWidth: 'default',\n        borderBottomColor: 'borderSubtle',\n        backgroundColor: 'surfaceMuted',\n      }),\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n        borderWidth: 0,\n        borderStyle: 'solid',\n        borderBottomWidth: 'default',\n        borderBottomColor: 'brandSecondaryOrange-20',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const headerRow = sprinkles({\n  display: 'grid',\n  width: 'full',\n  alignItems: 'stretch',\n});\n\nexport const tableCellPaddingVar = createVar();\nexport const tableCellFontSizeVar = createVar();\nexport const tableEmptyRowPaddingVar = createVar();\nexport const tableRowMinHeightVar = createVar();\n\nexport const densityRecipe = recipe({\n  variants: {\n    density: {\n      compact: {\n        vars: {\n          [tableCellPaddingVar]: `${vars.spacing[2]} ${vars.spacing[3]}`,\n          [tableCellFontSizeVar]: vars.fontSize.sm,\n          [tableEmptyRowPaddingVar]: `${vars.spacing[4]} ${vars.spacing[3]}`,\n          [tableRowMinHeightVar]: vars.spacing[9],\n        },\n      },\n      default: {\n        vars: {\n          [tableCellPaddingVar]: `${vars.spacing[3]} ${vars.spacing[4]}`,\n          [tableCellFontSizeVar]: vars.fontSize.sm,\n          [tableEmptyRowPaddingVar]: `${vars.spacing[6]} ${vars.spacing[4]}`,\n          [tableRowMinHeightVar]: vars.spacing[10],\n        },\n      },\n      comfortable: {\n        vars: {\n          [tableCellPaddingVar]: `${vars.spacing[3]} ${vars.spacing[5]}`,\n          [tableCellFontSizeVar]: vars.fontSize.base,\n          [tableEmptyRowPaddingVar]: `${vars.spacing[7]} ${vars.spacing[5]}`,\n          [tableRowMinHeightVar]: vars.spacing[12],\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    density: 'default',\n  },\n});\n\nexport const headerCell = recipe({\n  base: sprinkles({\n    alignItems: 'center',\n    display: 'flex',\n    flexShrink: 0,\n    gap: 2,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  }),\n  variants: {\n    kind: {\n      default: style([\n        sprinkles({\n          color: 'textSecondary',\n          fontWeight: 'semibold',\n          letterSpacing: 'capsNarrow',\n          textTransform: 'uppercase',\n        }),\n        {\n          padding: fallbackVar(\n            tableCellPaddingVar,\n            `${vars.spacing[3]} ${vars.spacing[4]}`,\n          ),\n          fontSize: fallbackVar(tableCellFontSizeVar, vars.fontSize.sm),\n          minHeight: fallbackVar(tableRowMinHeightVar, vars.spacing[10]),\n          selectors: {\n            '&:last-child': {\n              borderRight: 'none',\n            },\n          },\n        },\n      ]),\n      brandTable: sprinkles({\n        color: 'black-300',\n        fontWeight: 'bold',\n        fontSize: 'xs',\n        letterSpacing: 'caps',\n        textTransform: 'uppercase',\n        paddingY: 4,\n        paddingX: 0,\n        borderRightWidth: 0,\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const body = recipe({\n  base: sprinkles({\n    display: 'flex',\n    flexDirection: 'column',\n  }),\n  variants: {\n    kind: {\n      default: {},\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const bodyContained = style([\n  sprinkles({\n    flex: 1,\n    minHeight: 0,\n  }),\n  {\n    overflowY: 'auto',\n    scrollbarWidth: 'thin',\n    scrollbarColor: `${vars.colors.border} transparent`,\n  },\n]);\n\nexport const row = recipe({\n  base: sprinkles({\n    alignItems: 'stretch',\n    borderStyle: 'solid',\n    borderWidth: 0,\n    display: 'grid',\n    transitionProperty: 'colors',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  variants: {\n    kind: {\n      default: style([\n        sprinkles({\n          backgroundColor: 'surface',\n          borderBottomColor: 'borderLight',\n          borderBottomWidth: 'default',\n        }),\n        {\n          selectors: {\n            '&:last-child': {\n              borderBottomWidth: 0,\n            },\n            '&:hover': {\n              backgroundColor: vars.colors.surfaceMuted,\n            },\n          },\n        },\n      ]),\n      brandTable: style([\n        sprinkles({\n          backgroundColor: 'transparent',\n          borderBottomColor: 'brandSecondaryOrange-20',\n          borderBottomWidth: 'default',\n        }),\n        {\n          selectors: {\n            '&:last-child': {\n              borderBottomWidth: 0,\n            },\n            '&:hover': {\n              backgroundColor: 'transparent',\n            },\n          },\n        },\n      ]),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const rowEven = recipe({\n  variants: {\n    kind: {\n      default: sprinkles({\n        backgroundColor: 'surfaceSecondary',\n      }),\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const rowOdd = recipe({\n  variants: {\n    kind: {\n      default: sprinkles({\n        backgroundColor: 'surface',\n      }),\n      brandTable: sprinkles({\n        backgroundColor: 'transparent',\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const cell = recipe({\n  base: sprinkles({\n    alignItems: 'center',\n    display: 'flex',\n    gap: 2,\n    minWidth: 0,\n    overflow: 'hidden',\n  }),\n  variants: {\n    kind: {\n      default: style([\n        sprinkles({\n          color: 'textSecondary',\n        }),\n        {\n          padding: fallbackVar(\n            tableCellPaddingVar,\n            `${vars.spacing[3]} ${vars.spacing[4]}`,\n          ),\n          fontSize: fallbackVar(tableCellFontSizeVar, vars.fontSize.sm),\n          minHeight: fallbackVar(tableRowMinHeightVar, vars.spacing[10]),\n          selectors: {\n            '&:last-child': {\n              borderRight: 'none',\n            },\n          },\n        },\n      ]),\n      brandTable: sprinkles({\n        color: 'text',\n        fontWeight: 'semibold',\n        fontSize: 'sm',\n        paddingY: 4,\n        paddingX: 0,\n        borderRightWidth: 0,\n      }),\n    },\n  },\n  defaultVariants: {\n    kind: 'default',\n  },\n});\n\nexport const primaryCell = sprinkles({\n  fontWeight: 'semibold',\n  color: 'text',\n});\n\nexport const primaryHeaderCell = sprinkles({\n  color: 'text',\n});\n\nexport const stickyHeader = style({\n  position: 'sticky',\n  top: 0,\n  zIndex: vars.zIndex[10],\n});\n\nexport const alignRecipe = recipe({\n  variants: {\n    align: {\n      left: sprinkles({\n        justifyContent: 'flex-start',\n        textAlign: 'left',\n      }),\n      center: sprinkles({\n        justifyContent: 'center',\n        textAlign: 'center',\n      }),\n      right: sprinkles({\n        justifyContent: 'flex-end',\n        textAlign: 'end',\n      }),\n    },\n  },\n});\n\nexport const rowStateRecipe = recipe({\n  variants: {\n    state: {\n      default: {},\n      selected: {\n        backgroundColor: vars.colors.primaryLight,\n      },\n      muted: {\n        opacity: 0.72,\n      },\n      danger: {\n        backgroundColor: vars.colors['red-50'],\n      },\n    },\n  },\n});\n\nexport const emptyRow = style({\n  padding: fallbackVar(\n    tableEmptyRowPaddingVar,\n    `${vars.spacing[6]} ${vars.spacing[4]}`,\n  ),\n});\n\nexport const emptyCell = sprinkles({\n  fontSize: 'base',\n  color: 'textSecondary',\n  textAlign: 'center',\n});\n\nconst hideBelowMap: Record<DataTableBreakpoint, StyleRule> = {} as Record<\n  DataTableBreakpoint,\n  StyleRule\n>;\n\nDATA_TABLE_BREAKPOINT_ENTRIES.forEach(([breakpoint, width]) => {\n  hideBelowMap[breakpoint] = {\n    '@container': {\n      [`(max-width: ${width - 0.5}px)`]: {\n        visibility: 'hidden',\n        opacity: 0,\n        pointerEvents: 'none',\n        paddingInline: 0,\n        paddingBlock: 0,\n        borderRight: 'none',\n        overflow: 'hidden',\n      },\n    },\n  };\n});\n\nexport const hideBelowRecipe = recipe({\n  variants: {\n    minVisibleAt: hideBelowMap,\n  },\n});\n"],"mappings":""}

package/lib/esm/components/data-table/DataTable.js

@@ -1,79 +1,83 @@
 import { cx as e } from "../../theme/tools.js";
 import { useUiTranslation as t } from "../../i18n/useUiTranslation.js";
-import { alignRecipe as n, body as r, cell as i, container as a, densityRecipe as o, emptyCell as s, emptyRow as c, header as l, headerCell as u, headerRow as d, hideBelowRecipe as f, primaryCell as p, primaryHeaderCell as m, row as h, rowEven as g, rowOdd as _, rowStateRecipe as v, stickyHeader as y } from "./DataTable.css.js";
-import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
+import { alignRecipe as n, body as r, bodyContained as i, cell as a, container as o, containerWithContainedBody as s, densityRecipe as c, emptyCell as l, emptyRow as u, header as d, headerCell as f, headerRow as p, hideBelowRecipe as m, primaryCell as h, primaryHeaderCell as g, row as ee, rowEven as _, rowOdd as v, rowStateRecipe as y, stickyHeader as b } from "./DataTable.css.js";
+import { Fragment as te, jsx as x, jsxs as S } from "react/jsx-runtime";
 //#region src/components/data-table/DataTable.tsx
-var C = "minmax(0, 1fr)", w = (e) => e == null ? null : f({ minVisibleAt: e }), T = (e, t) => typeof t == "string" && t !== "" ? { gridTemplateColumns: t } : { gridTemplateColumns: `repeat(${e}, ${C})` }, E = ({ columns: f, rows: C, getRowId: E, emptyState: D, className: O, headerClassName: k, bodyClassName: A, rowClassName: j, gridTemplateClassName: M, gridTemplateColumns: N, kind: P, density: F, headerBehavior: I, rowState: L, classes: R, ariaLabel: z, ariaLabelledBy: B }) => {
-	let { t: V } = t(), H = P ?? "default", U = z ?? V("common.table.label");
-	B != null && (U = void 0);
-	let W = /* @__PURE__ */ x("div", {
-		className: e(s, R?.emptyCell),
-		children: V("common.table.empty")
-	}), G = D ?? W, K = C.length === 0, q;
-	M ?? (q = T(f.length, N));
+var C = "minmax(0, 1fr)", w = (e) => e == null ? null : m({ minVisibleAt: e }), T = (e, t) => typeof t == "string" && t !== "" ? { gridTemplateColumns: t } : { gridTemplateColumns: `repeat(${e}, ${C})` }, E = ({ columns: m, rows: C, getRowId: E, emptyState: D, className: ne, headerClassName: re, bodyClassName: ie, rowClassName: O, gridTemplateClassName: k, gridTemplateColumns: A, kind: j, density: M, headerBehavior: N, bodyScrollMode: P = "page", rowState: F, classes: I, ariaLabel: L, ariaLabelledBy: R, bodyFooterNode: z }) => {
+	let { t: B } = t(), V = j ?? "default", H = L ?? B("common.table.label");
+	R != null && (H = void 0);
+	let U = /* @__PURE__ */ x("div", {
+		className: e(l, I?.emptyCell),
+		children: B("common.table.empty")
+	}), W = D ?? U, G = C.length === 0, K = P === "contained", q;
+	k ?? (q = T(m.length, A));
 	let J = null;
-	I?.sticky === !0 && (J = y);
+	N?.sticky === !0 && (J = b);
 	let Y;
-	I?.offsetTop != null && (Y = { top: I.offsetTop });
-	let X = [o({ density: F ?? "default" })];
-	M != null && X.push(M);
+	N?.offsetTop != null && (Y = { top: N.offsetTop });
+	let X = [c({ density: M ?? "default" })];
+	k != null && X.push(k);
 	let Z;
-	return Z = K ? /* @__PURE__ */ x("div", {
-		className: e(c, R?.emptyRow),
+	Z = G ? /* @__PURE__ */ x("div", {
+		className: e(u, I?.emptyRow),
 		role: "row",
 		children: /* @__PURE__ */ x("div", {
 			role: "cell",
-			children: G
+			children: W
 		})
-	}) : /* @__PURE__ */ x(b, { children: C.map((t, r) => {
-		let a = E(t, r), o = [h({ kind: H }), R?.row], s = L?.(t, r);
-		s != null && o.push(v({ state: s })), r % 2 == 0 ? o.push(g({ kind: H }), R?.rowEven) : o.push(_({ kind: H }), R?.rowOdd);
+	}) : /* @__PURE__ */ x(te, { children: C.map((t, r) => {
+		let i = E(t, r), o = [ee({ kind: V }), I?.row], s = F?.(t, r);
+		s != null && o.push(y({ state: s })), r % 2 == 0 ? o.push(_({ kind: V }), I?.rowEven) : o.push(v({ kind: V }), I?.rowOdd);
 		for (let e of X) o.push(e);
-		if (j != null) {
-			let e = j(t, r);
+		if (O != null) {
+			let e = O(t, r);
 			e != null && o.push(e);
 		}
 		return /* @__PURE__ */ x("div", {
 			role: "row",
 			className: e(...o),
 			style: q,
-			children: f.map((r) => {
-				let a = [i({ kind: H }), R?.cell], o = w(r.minVisibleAt);
-				o != null && a.push(o), r.className != null && a.push(r.className), r.isPrimary && a.push(p, R?.primaryCell), r.align != null && a.push(n({ align: r.align }));
+			children: m.map((r) => {
+				let i = [a({ kind: V }), I?.cell], o = w(r.minVisibleAt);
+				o != null && i.push(o), r.className != null && i.push(r.className), r.isPrimary && i.push(h, I?.primaryCell), r.align != null && i.push(n({ align: r.align }));
 				let s = r.cell(t);
 				return /* @__PURE__ */ x("div", {
 					role: "cell",
-					className: e(...a),
+					className: e(...i),
 					children: s
 				}, r.id);
 			})
-		}, a);
-	}) }), /* @__PURE__ */ S("div", {
-		className: e(a({ kind: H }), R?.container, O),
+		}, i);
+	}) });
+	let Q = null, $ = null;
+	return K && (Q = s, $ = i), /* @__PURE__ */ S("div", {
+		className: e(o({ kind: V }), Q, I?.container, ne),
 		role: "table",
-		"aria-label": U,
-		"aria-labelledby": B,
+		"aria-label": H,
+		"aria-labelledby": R,
+		"data-scroll-mode": P,
 		children: [/* @__PURE__ */ x("div", {
-			className: e(l({ kind: H }), J, R?.header, k),
+			className: e(d({ kind: V }), J, I?.header, re),
 			style: Y,
 			role: "rowgroup",
 			children: /* @__PURE__ */ x("div", {
-				className: e(d, R?.headerRow, ...X),
+				className: e(p, I?.headerRow, ...X),
 				role: "row",
 				style: q,
-				children: f.map((t) => {
-					let r = [u({ kind: H }), R?.headerCell], i = w(t.minVisibleAt);
-					return i != null && r.push(i), t.className != null && r.push(t.className), t.isPrimary && r.push(m, R?.primaryHeaderCell), t.align != null && r.push(n({ align: t.align })), /* @__PURE__ */ x("div", {
+				children: m.map((t) => {
+					let r = [f({ kind: V }), I?.headerCell], i = w(t.minVisibleAt);
+					return i != null && r.push(i), t.className != null && r.push(t.className), t.isPrimary && r.push(g, I?.primaryHeaderCell), t.align != null && r.push(n({ align: t.align })), /* @__PURE__ */ x("div", {
 						role: "columnheader",
 						className: e(...r),
 						children: t.header
 					}, t.id);
 				})
 			})
-		}), /* @__PURE__ */ x("div", {
-			className: e(r({ kind: H }), R?.body, A),
+		}), /* @__PURE__ */ S("div", {
+			className: e(r({ kind: V }), $, I?.body, ie),
 			role: "rowgroup",
-			children: Z
+			"data-scroll-mode": P,
+			children: [Z, z]
 		})]
 	});
 }, D = {