@olenbetong/appframe-ds 1.1.0 → 1.3.0

package/src/cutoff/utils.test.ts

@@ -0,0 +1,59 @@
+import { describe, expect, test } from "vitest";
+
+import {
+	cutOffToPlainDate,
+	getCutOffFromSearchParams,
+	getHistoryRangeStart,
+	getWeekRange,
+	isPeriodValidForCoType,
+	plainDateToCutOff,
+	subWeekString,
+} from "./utils.js";
+
+describe("cut-off periods", () => {
+	test("a date maps to every period type", () => {
+		expect(plainDateToCutOff("2026-09-21", "AllDates")).toBe("2026-09-21");
+		expect(plainDateToCutOff("2026-09-21", "WS")).toBe("2026-W39");
+		expect(plainDateToCutOff("2026-09-21", "MLD")).toBe("2026-09");
+		expect(plainDateToCutOff("2026-09-21", "QLS")).toBe("2026-Q3");
+		expect(plainDateToCutOff("2026-09-21", "YLD")).toBe("2026");
+	});
+
+	test("ISO weeks follow the ISO year, not the calendar year", () => {
+		expect(plainDateToCutOff("2026-01-01", "WS")).toBe("2026-W01");
+		expect(plainDateToCutOff("2027-01-01", "WS")).toBe("2026-W53");
+		expect(plainDateToCutOff("2024-12-30", "WS")).toBe("2025-W01");
+	});
+
+	test("a period maps back to its first day", () => {
+		expect(cutOffToPlainDate("WS", "2026-W39").toString()).toBe("2026-09-21");
+		expect(cutOffToPlainDate("WS", "2026-39").toString()).toBe("2026-09-21");
+		expect(cutOffToPlainDate("QLD", "2026-Q3").toString()).toBe("2026-07-01");
+		expect(cutOffToPlainDate("MLS", "2026-09").toString()).toBe("2026-09-01");
+		expect(cutOffToPlainDate("YLD", "2026").toString()).toBe("2026-01-01");
+	});
+
+	test("week arithmetic", () => {
+		expect(subWeekString("2026-W02", 3)).toBe("2025-W51");
+		expect(getWeekRange("2025-W52", "2026-W02")).toEqual(["2025-W52", "2026-W01", "2026-W02"]);
+	});
+
+	test("history ranges", () => {
+		expect(getHistoryRangeStart("YLD", "2026")).toBe("2021");
+		expect(getHistoryRangeStart("QLD", "2026-Q3")).toBe("2024-Q3");
+		expect(getHistoryRangeStart("MLD", "2026-09")).toBe("2025-09");
+		expect(getHistoryRangeStart("WS", "2026-W39")).toBe("2026-W13");
+		expect(getHistoryRangeStart("AllDates", "2026-09-21")).toBe("2026-08-21");
+	});
+
+	test("search parameters: defaults for missing or invalid values, weeks without the W", () => {
+		expect(getCutOffFromSearchParams(new URLSearchParams("co=WS&period=2026-W39"))).toEqual({
+			coType: "WS",
+			period: "2026-39",
+		});
+		expect(getCutOffFromSearchParams(new URLSearchParams("co=QLD&period=2026-Q7")).period).toMatch(/^\d{4}-Q[1-4]$/);
+		expect(getCutOffFromSearchParams(new URLSearchParams("co=nope")).coType).toBe("MLD");
+		expect(isPeriodValidForCoType("MLS", "2026-09")).toBe(true);
+		expect(isPeriodValidForCoType("QLS", "2026-Q2")).toBe(true);
+	});
+});

package/src/cutoff/utils.ts

@@ -0,0 +1,276 @@
+/*
+ * Cut-off periods: the period types Synergi reports on (day, ISO week, month, quarter, year,
+ * with "last sunday" variants for month and quarter) and the string form each is stored in
+ * (`2026-09-21`, `2026-W38`, `2026-09`, `2026-Q3`, `2026`). Ported from
+ * @olenbetong/appframe-mui, with Temporal in place of date-fns for the ISO week arithmetic.
+ */
+
+import { Temporal } from "temporal-polyfill";
+
+import { getLocalizedString } from "../i18n.js";
+
+export type PeriodType = "AllDates" | "WS" | "MLD" | "MLS" | "QLD" | "QLS" | "YLD";
+export type PeriodTypeValueMap = { [K in PeriodType]: string };
+
+/** ISO week string, `2026-W38`, of a date. */
+function toISOWeek(date: Temporal.PlainDate) {
+	return `${date.yearOfWeek}-W${String(date.weekOfYear).padStart(2, "0")}`;
+}
+
+/** The Monday of an ISO week given as `2026-W38` or `2026-38`. */
+function isoWeekToDate(week: string) {
+	let [year, weekNo] = week.replace("W", "").split("-");
+	let firstOfYear = Temporal.PlainDate.from(`${year}-01-01`);
+	let daysToAdd = (Number(weekNo) - 1) * 7;
+	let firstOfWeekOne: Temporal.PlainDate;
+	if (firstOfYear.dayOfWeek <= 4) {
+		firstOfWeekOne = firstOfYear.add({ days: -firstOfYear.dayOfWeek + 1 });
+	} else {
+		firstOfWeekOne = firstOfYear.add({ days: 8 - firstOfYear.dayOfWeek });
+	}
+
+	return firstOfWeekOne.add({ days: daysToAdd });
+}
+
+/** A date from the app's own Temporal copy or a string, as this module's `PlainDate`. */
+function toPlainDate(date: Temporal.PlainDate | string) {
+	return Temporal.PlainDate.from(typeof date === "string" ? date : date.toString());
+}
+
+const now = Temporal.Now.plainDateISO();
+const nowDate = now.toString();
+const nowWeek = toISOWeek(now);
+const nowMonth = Temporal.PlainYearMonth.from(now).toString();
+const nowQuarter = `${now.year}-Q${Math.ceil(now.month / 3)}`;
+const nowYear = String(now.year);
+
+export const defaultCutOffType: PeriodType = "MLD";
+export const defaultPeriod = nowMonth;
+
+export const defaultPeriods: PeriodTypeValueMap = {
+	AllDates: nowDate,
+	WS: nowWeek,
+	MLD: nowMonth,
+	MLS: nowMonth,
+	QLD: nowQuarter,
+	QLS: nowQuarter,
+	YLD: nowYear,
+};
+
+export function getYearRange(start: number, end: number) {
+	let years: string[] = [];
+	for (let i = Math.min(start, end); i < Math.max(start, end); i++) {
+		years.push(String(i));
+	}
+
+	return years;
+}
+
+export function subMonthString(month: string, amount: number) {
+	return Temporal.PlainYearMonth.from(month).subtract({ months: amount }).toString();
+}
+
+export function getMonthRange(start: string, end: string) {
+	let startDate = Temporal.PlainYearMonth.from(start);
+	let endDate = Temporal.PlainYearMonth.from(end);
+
+	if (Temporal.PlainYearMonth.compare(startDate, endDate) > 0) {
+		throw new Error("Start month must be lower than end month");
+	}
+
+	let months: string[] = [];
+
+	while (Temporal.PlainYearMonth.compare(startDate, endDate) <= 0) {
+		months.push(startDate.toString());
+		startDate = startDate.add({ months: 1 });
+	}
+
+	return months;
+}
+
+export function subWeekString(week: string, amount: number) {
+	return toISOWeek(isoWeekToDate(week).subtract({ weeks: amount }));
+}
+
+export function getWeekRange(start: string, end: string) {
+	let startDate = isoWeekToDate(start);
+	let endDate = isoWeekToDate(end);
+
+	if (Temporal.PlainDate.compare(startDate, endDate) > 0) {
+		throw new Error("Start week must be lower than end week");
+	}
+
+	let weeks: string[] = [];
+
+	while (Temporal.PlainDate.compare(startDate, endDate) <= 0) {
+		weeks.push(toISOWeek(startDate));
+		startDate = startDate.add({ weeks: 1 });
+	}
+
+	return weeks;
+}
+
+export function subDateString(date: string, amount: number) {
+	return Temporal.PlainDate.from(date).subtract({ days: amount }).toString();
+}
+
+export function getDateRange(start: string, end: string) {
+	let startDate = Temporal.PlainDate.from(start);
+	let endDate = Temporal.PlainDate.from(end);
+
+	if (Temporal.PlainDate.compare(startDate, endDate) > 0) {
+		throw new Error("Start date must be lower than end date");
+	}
+
+	let dates: string[] = [];
+
+	while (Temporal.PlainDate.compare(startDate, endDate) <= 0) {
+		dates.push(startDate.toString());
+		startDate = startDate.add({ days: 1 });
+	}
+
+	return dates;
+}
+
+/** The period of `periodType` a date falls in, in its stored string form. */
+export function plainDateToCutOff(date: Temporal.PlainDate | string, periodType: PeriodType) {
+	let plain = toPlainDate(date);
+
+	switch (periodType) {
+		case "AllDates":
+			return plain.toString();
+		case "YLD":
+			return String(plain.year);
+		case "QLD":
+		case "QLS":
+			return `${plain.year}-Q${String(Math.ceil(plain.month / 3))}`;
+		case "MLD":
+		case "MLS":
+			return Temporal.PlainYearMonth.from(plain).toString();
+		case "WS":
+			return toISOWeek(plain);
+		default:
+			return "";
+	}
+}
+
+/** The first day of a period. */
+export function cutOffToPlainDate(cutOffType: PeriodType, period: string) {
+	switch (cutOffType) {
+		case "YLD":
+			return Temporal.PlainDate.from({ year: Number(period), month: 1, day: 1 });
+		case "QLD":
+		case "QLS": {
+			let [year, quarter] = period.split("-");
+			quarter = quarter.replace("Q", "");
+			return Temporal.PlainDate.from({ year: Number(year), month: (Number(quarter) - 1) * 3 + 1, day: 1 });
+		}
+		case "MLD":
+		case "MLS":
+			return Temporal.PlainDate.from(`${period}-01`);
+		case "WS":
+			return isoWeekToDate(period);
+		case "AllDates":
+			return Temporal.PlainDate.from(period);
+		default:
+			return Temporal.Now.plainDateISO();
+	}
+}
+
+const culture = (globalThis as { af?: { userSession?: { culture?: string } } }).af?.userSession?.culture ?? "en-GB";
+
+/** A label for a period in the user's culture: "september 2026", "Week 38", "Q3 2026". */
+export function getPeriodLabel(periodType: PeriodType, period: string | null | undefined) {
+	if (!period) return "";
+
+	switch (periodType) {
+		case "YLD":
+			return String(period);
+		case "QLD":
+		case "QLS": {
+			let [year, quarter] = period.split("-");
+			return `${quarter} ${year}`;
+		}
+		case "MLD":
+		case "MLS": {
+			let month = Temporal.PlainDate.from(`${period}-01`);
+			return month.toLocaleString(culture, { month: "long", year: "numeric" });
+		}
+		case "WS": {
+			const [, week] = period.replace("-W", "-").split("-");
+			return `${getLocalizedString("Week")} ${Number(week)}`;
+		}
+		case "AllDates": {
+			let date = Temporal.PlainDate.from(period);
+			return date.toLocaleString(culture, { weekday: "long", day: "numeric", month: "short" });
+		}
+		default:
+			return "";
+	}
+}
+
+export function isPeriodValidForCoType(coType: PeriodType, period: string) {
+	switch (coType) {
+		case "AllDates":
+			return /^\d{4}-\d{2}-\d{2}$/.test(period);
+		case "WS":
+			return /^\d{4}-W\d{2}$/.test(period);
+		case "MLD":
+		case "MLS":
+			return /^\d{4}-\d{2}$/.test(period);
+		case "QLD":
+		case "QLS":
+			return /^\d{4}-Q[1234]$/.test(period);
+		case "YLD":
+			return /^\d{4}$/.test(period);
+		default:
+			return false;
+	}
+}
+
+/** Where a history range for a period starts: five years, two years, twelve months, 26 weeks or 31 days back. */
+export function getHistoryRangeStart(cutOffType: PeriodType, period: string) {
+	switch (cutOffType) {
+		case "YLD":
+			return String(Number(period) - 5);
+		case "QLD":
+		case "QLS": {
+			// Two years back, same quarter: "2026-Q3" -> "2024-Q3". (The appframe-mui original
+			// produced "2024-QQ3" here.)
+			let year = Number(period.substring(0, 4)) - 2;
+			return `${year}-${period.substring(5)}`;
+		}
+		case "MLD":
+		case "MLS":
+			return subMonthString(period, 12);
+		case "WS":
+			return subWeekString(period, 26);
+		case "AllDates":
+			return subDateString(period, 31);
+		default:
+			return "";
+	}
+}
+
+export function stringToCutOffType(coType: string | null): PeriodType {
+	if (!coType || !["AllDates", "WS", "MLS", "MLD", "QLS", "QLD", "YLD"].includes(coType)) {
+		return defaultCutOffType;
+	}
+
+	return coType as PeriodType;
+}
+
+/** The cut-off in the `co` and `period` search parameters, defaults for what is missing or invalid. */
+export function getCutOffFromSearchParams(searchParams: URLSearchParams) {
+	let coType = stringToCutOffType(searchParams.get("co"));
+	let period = searchParams.get("period") ?? defaultPeriods[coType];
+
+	if (!isPeriodValidForCoType(coType, period)) {
+		period = defaultPeriods[coType];
+	}
+
+	return {
+		coType,
+		period: period.replace("W", ""), // Appframe stores weeks without the W
+	};
+}

package/src/grid/GridEditLookup.css

@@ -0,0 +1,12 @@
+@layer ds {
+	.ObGridEditLookup-root {
+		display: flex;
+		width: 100%;
+		height: 100%;
+	}
+
+	.ObGridEditLookup-actions {
+		display: inline-flex;
+		align-items: center;
+	}
+}

package/src/grid/GridEditLookup.tsx

@@ -0,0 +1,121 @@
+import "./GridEditLookup.css";
+
+import { Button } from "@digdir/designsystemet-react";
+import { GridEditInputCell, type GridRenderEditCellParams } from "@mui/x-data-grid-premium";
+import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
+import type { DataObject } from "@olenbetong/appframe-data";
+import type { DistributiveOmit } from "@olenbetong/appframe-react";
+import { useCallback, useEffect, useRef } from "react";
+
+import { type AfLookupProps, useLookup } from "../AfLookup/Lookup.js";
+import { getLocalizedString } from "../i18n.js";
+
+export type GridEditLookupProps<
+	TBoundData extends Record<string, unknown>,
+	TLookupData extends Record<string, unknown>,
+> = DistributiveOmit<AfLookupProps<TLookupData>, "value" | "onChange"> & {
+	dataObject: DataObject<TLookupData>;
+	/** The fields of the edited row that a picked item sets; non-editable columns are updated directly. */
+	getChanges: (selectedItem: TLookupData | null) => Partial<TBoundData>;
+	params: GridRenderEditCellParams;
+};
+
+/**
+ * A lookup as a grid cell editor: a read-only input with a search button that opens the
+ * lookup dialog anchored to the cell, and a clear button when the field is nullable. Give it
+ * to a column's `renderEditCell`. Equivalent of `GridEditLookup` in `@olenbetong/appframe-mui`.
+ */
+export function GridEditLookup<
+	TBoundData extends Record<string, unknown>,
+	TLookupData extends Record<string, unknown>,
+>({ dataObject, getChanges, params, ...props }: GridEditLookupProps<TBoundData, TLookupData>) {
+	let getChangesRef = useRef(getChanges);
+	useEffect(() => {
+		getChangesRef.current = getChanges;
+	});
+
+	let handleChange = useCallback(
+		(item: TLookupData | null) => {
+			let changes = getChangesRef.current(item);
+			let { id, api } = params;
+			let nonEditableFields: Record<string, unknown> = {};
+
+			for (let key of Object.keys(changes)) {
+				let column = api.getColumn(key);
+				if (column) {
+					if (column.editable) {
+						api.setEditCellValue({ id, field: key, value: changes[key] });
+					} else {
+						nonEditableFields[key] = changes[key];
+					}
+				}
+			}
+
+			if (Object.keys(nonEditableFields).length > 0) {
+				api.updateRows([{ [af.data.uid]: id, id, ...nonEditableFields }]);
+			}
+		},
+		[params],
+	);
+
+	let getAnchorElement = useCallback(
+		() => params.api.getCellElement(params.id, params.field) ?? null,
+		[params.api, params.field, params.id],
+	);
+
+	let { inputId, dialog, anchorName, openDialog, onKeyDown } = useLookup<TLookupData>({
+		dataObject,
+		onChange: handleChange,
+		getAnchorElement,
+		...props,
+	});
+
+	return (
+		<div className="ObGridEditLookup-root" style={{ anchorName } as React.CSSProperties}>
+			<GridEditInputCell
+				fullWidth
+				slotProps={{
+					root: {
+						// @ts-expect-error: typed as HTMLElement, but it is the input
+						readOnly: true,
+					},
+				}}
+				onKeyDown={onKeyDown}
+				className="MuiDataGrid-editInputCell"
+				endAdornment={
+					<span className="ObGridEditLookup-actions">
+						{props.nullable && params.value && (
+							<Button
+								type="button"
+								variant="tertiary"
+								data-size="sm"
+								icon
+								title={getLocalizedString("Clear")}
+								onKeyDown={(evt) => evt.stopPropagation()}
+								onClick={(evt) => {
+									evt.stopPropagation();
+									handleChange(null);
+									document.getElementById(inputId)?.focus();
+								}}
+							>
+								<XMarkIcon aria-hidden />
+							</Button>
+						)}
+						<Button
+							type="button"
+							variant="tertiary"
+							data-size="sm"
+							icon
+							title={getLocalizedString("Search")}
+							onClick={() => openDialog()}
+						>
+							<MagnifyingGlassIcon aria-hidden />
+						</Button>
+					</span>
+				}
+				{...params}
+			/>
+			{dialog}
+		</div>
+	);
+}

package/src/grid/index.tsx

@@ -9,6 +9,7 @@ import {
 	type GridAggregationFunction,
 	type GridApi,
 	type GridFilterModel,
+	type GridGroupNode,
 	useGridApiRef,
 } from "@mui/x-data-grid-premium";
 import { type DataObject, uid } from "@olenbetong/appframe-data";
@@ -62,6 +63,11 @@ import { useAfSortModel } from "./useAfSortModel.js";
 import { getLocalizedString } from "../i18n.js";
 
 export * from "./formatters.js";
+export * from "./GridEditLookup.js";
+// MUI X as a namespace (`DataGrid.DataGridPremium`, `DataGrid.GridColDef`, `DataGrid.useGridApiRef`,
+// ...), for grids that are not bound to a data object - from here rather than the app, so a
+// platform app does not bundle a second MUI X. Same shape as appframe-mui exported it.
+export * as DataGrid from "@mui/x-data-grid-premium";
 export * as MuiDataGrid from "@mui/x-data-grid-premium";
 
 registerLicense();
@@ -131,6 +137,11 @@ export {
 	useAfSortModel,
 };
 
+/** MUI's own default: the grand total in the footer, group subtotals inline. */
+function getDefaultAggregationPosition(groupNode: GridGroupNode) {
+	return groupNode.depth === -1 ? "footer" : "inline";
+}
+
 export type AfGridProps = {
 	apiRef?: React.RefObject<GridApi>;
 	/**
@@ -430,6 +441,14 @@ function AfGrid_(props: AfGridProps) {
 						 * the first render.
 						 */
 						{...(aggregationFunctions ? { aggregationFunctions } : {})}
+						/*
+						 * The server totals arrive after the rows, as new aggregation functions, and the
+						 * grid only re-aggregates on row, column and model changes: without a nudge the
+						 * footer kept the totals of the previous load. Its one effect that re-aggregates
+						 * when the functions change is keyed on this prop and skipped while it is unset,
+						 * so the default position is passed explicitly.
+						 */
+						getAggregationPosition={other.getAggregationPosition ?? getDefaultAggregationPosition}
 						localeText={{ ...other.localeText, ...AF_GRID_LOCALE_TEXT }}
 						slots={{
 							...dsBaseSlots,

package/src/grid/useAfServerAggregation.test.ts

@@ -0,0 +1,68 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+
+import { useAfServerAggregation } from "./useAfServerAggregation.js";
+
+/**
+ * Just enough of a data object for the hook: fields to aggregate, parameters to copy, a data
+ * handler to count retrieves, and events fired the way the real one fires them.
+ */
+function createDataObject() {
+	let target = new EventTarget();
+	let retrieve = vi.fn(async () => [{ Amount: 100 }]);
+
+	let dataObject = {
+		getFields: (name: string) => (name === "Amount" ? { name } : undefined),
+		getParameter: () => undefined,
+		dataHandler: { retrieve },
+		attachEvent: (name: string, handler: (event: Event) => void, options?: AddEventListenerOptions) =>
+			target.addEventListener(name, handler, options),
+		fire: (name: string, detail?: unknown) => target.dispatchEvent(new CustomEvent(name, { detail })),
+	};
+
+	return { dataObject, retrieve };
+}
+
+const model = { Amount: "sum" };
+
+describe("useAfServerAggregation", () => {
+	test("reloads the totals when a paged load starts over", async () => {
+		let { dataObject, retrieve } = createDataObject();
+		renderHook(() => useAfServerAggregation(dataObject as any, model, true));
+
+		await waitFor(() => expect(retrieve).toHaveBeenCalledTimes(1));
+
+		act(() => {
+			dataObject.fire("onPartialDataLoaded", { skip: 0, count: 50, total: 120 });
+		});
+
+		await waitFor(() => expect(retrieve).toHaveBeenCalledTimes(2));
+	});
+
+	test("leaves the totals alone while later pages of the same load arrive", async () => {
+		let { dataObject, retrieve } = createDataObject();
+		renderHook(() => useAfServerAggregation(dataObject as any, model, true));
+
+		await waitFor(() => expect(retrieve).toHaveBeenCalledTimes(1));
+
+		act(() => {
+			dataObject.fire("onPartialDataLoaded", { skip: 50, count: 50, total: 120 });
+		});
+
+		await new Promise((resolve) => setTimeout(resolve, 20));
+		expect(retrieve).toHaveBeenCalledTimes(1);
+	});
+
+	test("reloads the totals after a full load", async () => {
+		let { dataObject, retrieve } = createDataObject();
+		renderHook(() => useAfServerAggregation(dataObject as any, model, true));
+
+		await waitFor(() => expect(retrieve).toHaveBeenCalledTimes(1));
+
+		act(() => {
+			dataObject.fire("onDataLoaded", 10);
+		});
+
+		await waitFor(() => expect(retrieve).toHaveBeenCalledTimes(2));
+	});
+});

package/src/grid/useAfServerAggregation.ts

@@ -85,6 +85,19 @@ export function useAfServerAggregation(
 		}
 
 		dataObject.attachEvent("onDataLoaded", reload, { signal: controller.signal });
+		/*
+		 * A dynamically loading data object reports every load page by page and never fires
+		 * onDataLoaded, so listening for that alone left the totals on whatever the first load
+		 * saw. The first page of a load is the one that follows a new filter; later pages only
+		 * scroll further into the same result, which the totals already cover.
+		 */
+		dataObject.attachEvent(
+			"onPartialDataLoaded",
+			(event) => {
+				if (event.detail.skip === 0) reload();
+			},
+			{ signal: controller.signal },
+		);
 		dataObject.attachEvent("onAfterSave", reload, { signal: controller.signal });
 		dataObject.attachEvent("onRecordDeleted", reload, { signal: controller.signal });
 

package/src/index.ts

@@ -2,9 +2,11 @@ export * from "./AfLookup/index.js";
 export * from "./autocomplete/index.js";
 export * from "./binding/index.js";
 export * from "./container/index.js";
+export * from "./cutoff/index.js";
 export * from "./filter/index.js";
 export * from "./input/index.js";
 export * from "./layout/index.js";
+export * from "./link/index.js";
 export * from "./list/index.js";
 export * from "./page/index.js";
 export * from "./paper/index.js";

package/src/layout/PageContainer.css

@@ -10,9 +10,11 @@
 	}
 
 	.ObPageContainer-inner {
+		--ob-page-container-gutter: 1rem;
+
 		margin-left: 0;
 		height: auto;
-		padding: 1rem;
+		padding: 1rem var(--ob-page-container-gutter);
 		box-sizing: border-box;
 		max-width: 100%;
 	}
@@ -20,10 +22,27 @@
 	.ObPageContainer-fullHeight .ObPageContainer-inner {
 		height: 100%;
 	}
+
+	/* The content width on the MUI Container scale; the gutters come on top. */
+	.ObPageContainer-inner.ObPageContainer-text {
+		max-width: calc(36rem + 2 * var(--ob-page-container-gutter));
+	}
+
+	.ObPageContainer-inner.ObPageContainer-md {
+		max-width: calc(48rem + 2 * var(--ob-page-container-gutter));
+	}
+
+	.ObPageContainer-inner.ObPageContainer-lg {
+		max-width: calc(64rem + 2 * var(--ob-page-container-gutter));
+	}
+
+	.ObPageContainer-inner.ObPageContainer-xl {
+		max-width: calc(80rem + 2 * var(--ob-page-container-gutter));
+	}
 }
 
 @media screen and (min-width: 600px) {
 	.ObPageContainer-inner {
-		padding: 1rem 1.5rem;
+		--ob-page-container-gutter: 1.5rem;
 	}
 }