@igne-agency/react-web-ui 0.3.0 → 0.4.0

package/dist/components/pagination/pagination.js

@@ -1,18 +1,16 @@
-import SvgChevronLeft from "../../vendor/@material-design-icons/svg/outlined/chevron_left.js";
-import SvgChevronRight from "../../vendor/@material-design-icons/svg/outlined/chevron_right.js";
-import SvgFirstPage from "../../vendor/@material-design-icons/svg/outlined/first_page.js";
-import SvgLastPage from "../../vendor/@material-design-icons/svg/outlined/last_page.js";
 import { Button } from "../button/button.js";
 import { useLocale } from "../locale-provider/locale-provider.js";
 import { Select } from "../select-field/select.js";
 import { PaginationContext, usePagination } from "./pagination-context.js";
 import pagination_module_default from "./pagination.module.js";
 import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 // src/components/pagination/pagination.tsx
+/** Where the list stands, for the parts inside it, laid out in a row. */
 var PaginationRoot = (t0) => {
-	const $ = c(24);
+	const $ = c(30);
 	let className;
 	let onPageIndexChange;
 	let onPageSizeChange;
@@ -21,8 +19,10 @@ var PaginationRoot = (t0) => {
 	let pageSize;
 	let pageSizes;
 	let props;
+	let ref;
+	let render;
 	if ($[0] !== t0) {
-		({pageIndex, pageCount, pageSize, pageSizes, onPageIndexChange, onPageSizeChange, className, ...props} = t0);
+		({pageIndex, pageCount, pageSize, pageSizes, onPageIndexChange, onPageSizeChange, render, className, ref, ...props} = t0);
 		$[0] = t0;
 		$[1] = className;
 		$[2] = onPageIndexChange;
@@ -32,6 +32,8 @@ var PaginationRoot = (t0) => {
 		$[6] = pageSize;
 		$[7] = pageSizes;
 		$[8] = props;
+		$[9] = ref;
+		$[10] = render;
 	} else {
 		className = $[1];
 		onPageIndexChange = $[2];
@@ -41,10 +43,42 @@ var PaginationRoot = (t0) => {
 		pageSize = $[6];
 		pageSizes = $[7];
 		props = $[8];
+		ref = $[9];
+		render = $[10];
 	}
 	let t1;
-	if ($[9] !== onPageIndexChange || $[10] !== onPageSizeChange || $[11] !== pageCount || $[12] !== pageIndex || $[13] !== pageSize || $[14] !== pageSizes) {
-		t1 = {
+	if ($[11] !== className) {
+		t1 = clsx(pagination_module_default.root, className);
+		$[11] = className;
+		$[12] = t1;
+	} else t1 = $[12];
+	let t2;
+	if ($[13] !== props || $[14] !== t1) {
+		t2 = {
+			...props,
+			className: t1
+		};
+		$[13] = props;
+		$[14] = t1;
+		$[15] = t2;
+	} else t2 = $[15];
+	let t3;
+	if ($[16] !== ref || $[17] !== render || $[18] !== t2) {
+		t3 = {
+			defaultTagName: "div",
+			render,
+			ref,
+			props: t2
+		};
+		$[16] = ref;
+		$[17] = render;
+		$[18] = t2;
+		$[19] = t3;
+	} else t3 = $[19];
+	const element = useRender(t3);
+	let t4;
+	if ($[20] !== onPageIndexChange || $[21] !== onPageSizeChange || $[22] !== pageCount || $[23] !== pageIndex || $[24] !== pageSize || $[25] !== pageSizes) {
+		t4 = {
 			pageIndex,
 			pageCount,
 			pageSize,
@@ -52,289 +86,682 @@ var PaginationRoot = (t0) => {
 			onPageIndexChange,
 			onPageSizeChange
 		};
-		$[9] = onPageIndexChange;
-		$[10] = onPageSizeChange;
-		$[11] = pageCount;
-		$[12] = pageIndex;
-		$[13] = pageSize;
-		$[14] = pageSizes;
-		$[15] = t1;
-	} else t1 = $[15];
-	let t2;
-	if ($[16] !== className) {
-		t2 = clsx(pagination_module_default.root, className);
-		$[16] = className;
-		$[17] = t2;
-	} else t2 = $[17];
-	let t3;
-	if ($[18] !== props || $[19] !== t2) {
-		t3 = /* @__PURE__ */ jsx("div", {
-			className: t2,
-			...props
-		});
-		$[18] = props;
-		$[19] = t2;
-		$[20] = t3;
-	} else t3 = $[20];
-	let t4;
-	if ($[21] !== t1 || $[22] !== t3) {
-		t4 = /* @__PURE__ */ jsx(PaginationContext, {
-			value: t1,
-			children: t3
+		$[20] = onPageIndexChange;
+		$[21] = onPageSizeChange;
+		$[22] = pageCount;
+		$[23] = pageIndex;
+		$[24] = pageSize;
+		$[25] = pageSizes;
+		$[26] = t4;
+	} else t4 = $[26];
+	let t5;
+	if ($[27] !== element || $[28] !== t4) {
+		t5 = /* @__PURE__ */ jsx(PaginationContext, {
+			value: t4,
+			children: element
 		});
-		$[21] = t1;
-		$[22] = t3;
-		$[23] = t4;
-	} else t4 = $[23];
-	return t4;
+		$[27] = element;
+		$[28] = t4;
+		$[29] = t5;
+	} else t5 = $[29];
+	return t5;
 };
+/**
+* A `Select.Root` over the page sizes, holding the `Select` parts it is given
+* in a row. The size in effect is always on offer.
+*/
 var PaginationPageSize = (t0) => {
-	const $ = c(18);
-	const { label } = t0;
+	const $ = c(26);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
 	const { pageSize, pageSizes, onPageSizeChange } = usePagination();
 	const format = new Intl.NumberFormat(useLocale());
 	let t1;
-	if ($[0] !== pageSize || $[1] !== pageSizes) {
+	if ($[5] !== pageSize || $[6] !== pageSizes) {
 		t1 = pageSizes.includes(pageSize) ? pageSizes : [...pageSizes, pageSize].toSorted(_temp);
-		$[0] = pageSize;
-		$[1] = pageSizes;
-		$[2] = t1;
-	} else t1 = $[2];
+		$[5] = pageSize;
+		$[6] = pageSizes;
+		$[7] = t1;
+	} else t1 = $[7];
 	const sizes = t1;
-	const t2 = Select;
-	const t3 = sizes.map((size) => ({
+	let t2;
+	if ($[8] !== className) {
+		t2 = clsx(pagination_module_default.pageSize, className);
+		$[8] = className;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== props || $[11] !== t2) {
+		t3 = {
+			...props,
+			className: t2
+		};
+		$[10] = props;
+		$[11] = t2;
+		$[12] = t3;
+	} else t3 = $[12];
+	let t4;
+	if ($[13] !== ref || $[14] !== render || $[15] !== t3) {
+		t4 = {
+			defaultTagName: "div",
+			render,
+			ref,
+			props: t3
+		};
+		$[13] = ref;
+		$[14] = render;
+		$[15] = t3;
+		$[16] = t4;
+	} else t4 = $[16];
+	const element = useRender(t4);
+	const t5 = Select;
+	const t6 = sizes.map((size) => ({
 		value: String(size),
 		label: format.format(size)
 	}));
-	const t4 = String(pageSize);
-	let t5;
-	if ($[3] !== onPageSizeChange || $[4] !== sizes) {
-		t5 = (value) => {
+	const t7 = String(pageSize);
+	let t8;
+	if ($[17] !== onPageSizeChange || $[18] !== sizes) {
+		t8 = (value) => {
 			const size_0 = sizes.find((candidate) => String(candidate) === value);
 			if (size_0 !== void 0) onPageSizeChange(size_0);
 		};
-		$[3] = onPageSizeChange;
-		$[4] = sizes;
-		$[5] = t5;
-	} else t5 = $[5];
-	let t6;
-	if ($[6] !== label) {
-		t6 = /* @__PURE__ */ jsx(Select.Label, { children: label });
-		$[6] = label;
-		$[7] = t6;
-	} else t6 = $[7];
-	let t7;
-	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = /* @__PURE__ */ jsx(Select.Trigger, {});
-		$[8] = t7;
-	} else t7 = $[8];
-	let t8;
-	if ($[9] !== t6) {
-		t8 = /* @__PURE__ */ jsxs("div", {
-			className: pagination_module_default.pageSize,
-			children: [t6, t7]
-		});
-		$[9] = t6;
-		$[10] = t8;
-	} else t8 = $[10];
+		$[17] = onPageSizeChange;
+		$[18] = sizes;
+		$[19] = t8;
+	} else t8 = $[19];
 	let t9;
-	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(Select.Popup, { children: /* @__PURE__ */ jsx(Select.List, { children: /* @__PURE__ */ jsx(Select.Items, {}) }) }) }) });
-		$[11] = t9;
-	} else t9 = $[11];
-	let t10;
-	if ($[12] !== t2.Root || $[13] !== t3 || $[14] !== t4 || $[15] !== t5 || $[16] !== t8) {
-		t10 = /* @__PURE__ */ jsxs(t2.Root, {
-			options: t3,
-			value: t4,
-			onValueChange: t5,
-			children: [t8, t9]
+	if ($[20] !== element || $[21] !== t5.Root || $[22] !== t6 || $[23] !== t7 || $[24] !== t8) {
+		t9 = /* @__PURE__ */ jsx(t5.Root, {
+			options: t6,
+			value: t7,
+			onValueChange: t8,
+			children: element
 		});
-		$[12] = t2.Root;
-		$[13] = t3;
-		$[14] = t4;
-		$[15] = t5;
-		$[16] = t8;
-		$[17] = t10;
-	} else t10 = $[17];
-	return t10;
+		$[20] = element;
+		$[21] = t5.Root;
+		$[22] = t6;
+		$[23] = t7;
+		$[24] = t8;
+		$[25] = t9;
+	} else t9 = $[25];
+	return t9;
 };
+/** Which page is on screen, as a polite live region. */
 var PaginationIndex = (t0) => {
-	const $ = c(7);
-	const { label } = t0;
+	const $ = c(21);
+	let className;
+	let label;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({label, render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = label;
+		$[3] = props;
+		$[4] = ref;
+		$[5] = render;
+	} else {
+		className = $[1];
+		label = $[2];
+		props = $[3];
+		ref = $[4];
+		render = $[5];
+	}
 	const { pageIndex, pageCount, pageSize } = usePagination();
 	let t1;
-	if ($[0] !== label || $[1] !== pageCount || $[2] !== pageIndex || $[3] !== pageSize) {
-		t1 = label({
+	if ($[6] !== className) {
+		t1 = clsx(pagination_module_default.index, className);
+		$[6] = className;
+		$[7] = t1;
+	} else t1 = $[7];
+	let t2;
+	if ($[8] !== label || $[9] !== pageCount || $[10] !== pageIndex || $[11] !== pageSize) {
+		t2 = label({
 			pageIndex,
 			pageCount,
 			pageSize
 		});
-		$[0] = label;
-		$[1] = pageCount;
-		$[2] = pageIndex;
-		$[3] = pageSize;
-		$[4] = t1;
-	} else t1 = $[4];
-	let t2;
-	if ($[5] !== t1) {
-		t2 = /* @__PURE__ */ jsx("span", {
+		$[8] = label;
+		$[9] = pageCount;
+		$[10] = pageIndex;
+		$[11] = pageSize;
+		$[12] = t2;
+	} else t2 = $[12];
+	let t3;
+	if ($[13] !== props || $[14] !== t1 || $[15] !== t2) {
+		t3 = {
 			role: "status",
-			className: pagination_module_default.index,
-			children: t1
-		});
-		$[5] = t1;
-		$[6] = t2;
-	} else t2 = $[6];
-	return t2;
+			...props,
+			className: t1,
+			children: t2
+		};
+		$[13] = props;
+		$[14] = t1;
+		$[15] = t2;
+		$[16] = t3;
+	} else t3 = $[16];
+	let t4;
+	if ($[17] !== ref || $[18] !== render || $[19] !== t3) {
+		t4 = {
+			defaultTagName: "span",
+			render,
+			ref,
+			props: t3
+		};
+		$[17] = ref;
+		$[18] = render;
+		$[19] = t3;
+		$[20] = t4;
+	} else t4 = $[20];
+	return useRender(t4);
+};
+/**
+* The page a step goes to, and whether it goes nowhere from where the list stands.
+*
+* @example
+* stepTo("next", 11, 12); // -> { target: 12, unavailable: true }
+*/
+var stepTo = (step, pageIndex, pageCount) => {
+	const lastIndex = Math.max(pageCount - 1, 0);
+	const atStart = pageIndex <= 0;
+	const atEnd = pageIndex >= lastIndex;
+	return {
+		first: {
+			target: 0,
+			unavailable: atStart
+		},
+		previous: {
+			target: pageIndex - 1,
+			unavailable: atStart
+		},
+		next: {
+			target: pageIndex + 1,
+			unavailable: atEnd
+		},
+		last: {
+			target: lastIndex,
+			unavailable: atEnd
+		}
+	}[step];
 };
-var PageButton = (t0) => {
-	const $ = c(10);
-	const { icon, label, target, unavailable, onPageIndexChange } = t0;
-	const t1 = unavailable || void 0;
+var PageStep = (t0) => {
+	const $ = c(22);
+	let children;
+	let label;
+	let onClick;
+	let props;
+	let step;
+	if ($[0] !== t0) {
+		({step, label, children, onClick, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = label;
+		$[3] = onClick;
+		$[4] = props;
+		$[5] = step;
+	} else {
+		children = $[1];
+		label = $[2];
+		onClick = $[3];
+		props = $[4];
+		step = $[5];
+	}
+	const { pageIndex, pageCount, onPageIndexChange } = usePagination();
+	let t1;
+	if ($[6] !== pageCount || $[7] !== pageIndex || $[8] !== step) {
+		t1 = stepTo(step, pageIndex, pageCount);
+		$[6] = pageCount;
+		$[7] = pageIndex;
+		$[8] = step;
+		$[9] = t1;
+	} else t1 = $[9];
+	const { target, unavailable } = t1;
 	const t2 = unavailable || void 0;
-	let t3;
-	if ($[0] !== onPageIndexChange || $[1] !== target || $[2] !== unavailable) {
-		t3 = () => {
+	const t3 = unavailable || void 0;
+	let t4;
+	if ($[10] !== onClick || $[11] !== onPageIndexChange || $[12] !== target || $[13] !== unavailable) {
+		t4 = (event) => {
+			onClick?.(event);
 			if (!unavailable) onPageIndexChange(target);
 		};
-		$[0] = onPageIndexChange;
-		$[1] = target;
-		$[2] = unavailable;
-		$[3] = t3;
-	} else t3 = $[3];
-	let t4;
-	if ($[4] !== icon || $[5] !== label || $[6] !== t1 || $[7] !== t2 || $[8] !== t3) {
-		t4 = /* @__PURE__ */ jsx(Button, {
-			iconOnly: true,
+		$[10] = onClick;
+		$[11] = onPageIndexChange;
+		$[12] = target;
+		$[13] = unavailable;
+		$[14] = t4;
+	} else t4 = $[14];
+	let t5;
+	if ($[15] !== children || $[16] !== label || $[17] !== props || $[18] !== t2 || $[19] !== t3 || $[20] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Button, {
 			variant: "tertiary",
-			icon,
+			...props,
+			iconOnly: true,
+			icon: children,
 			label,
-			"aria-disabled": t1,
-			"data-disabled": t2,
-			onClick: t3
+			"aria-disabled": t2,
+			"data-disabled": t3,
+			onClick: t4
+		});
+		$[15] = children;
+		$[16] = label;
+		$[17] = props;
+		$[18] = t2;
+		$[19] = t3;
+		$[20] = t4;
+		$[21] = t5;
+	} else t5 = $[21];
+	return t5;
+};
+/** Goes to the first page; marked `aria-disabled`, and kept in the tab order, on the first page. */
+var PaginationFirst = (props) => {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(PageStep, {
+			step: "first",
+			...props
+		});
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+};
+/** Goes back a page; marked `aria-disabled`, and kept in the tab order, on the first page. */
+var PaginationPrevious = (props) => {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(PageStep, {
+			step: "previous",
+			...props
+		});
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+};
+/** Goes on a page; marked `aria-disabled`, and kept in the tab order, on the last page. */
+var PaginationNext = (props) => {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(PageStep, {
+			step: "next",
+			...props
+		});
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+};
+/** Goes to the last page; marked `aria-disabled`, and kept in the tab order, on the last page. */
+var PaginationLast = (props) => {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(PageStep, {
+			step: "last",
+			...props
 		});
-		$[4] = icon;
-		$[5] = label;
-		$[6] = t1;
-		$[7] = t2;
-		$[8] = t3;
-		$[9] = t4;
-	} else t4 = $[9];
-	return t4;
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
 };
+/** `First`, `Previous`, `Next` and `Last` in a row. */
 var PaginationControls = (t0) => {
-	const $ = c(24);
-	const { firstLabel, previousLabel, nextLabel, lastLabel } = t0;
-	const { pageIndex, pageCount, onPageIndexChange } = usePagination();
-	const lastIndex = Math.max(pageCount - 1, 0);
-	const atStart = pageIndex <= 0;
-	const atEnd = pageIndex >= lastIndex;
+	const $ = c(40);
+	let className;
+	let firstIcon;
+	let firstLabel;
+	let lastIcon;
+	let lastLabel;
+	let nextIcon;
+	let nextLabel;
+	let previousIcon;
+	let previousLabel;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({firstLabel, previousLabel, nextLabel, lastLabel, firstIcon, previousIcon, nextIcon, lastIcon, render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = firstIcon;
+		$[3] = firstLabel;
+		$[4] = lastIcon;
+		$[5] = lastLabel;
+		$[6] = nextIcon;
+		$[7] = nextLabel;
+		$[8] = previousIcon;
+		$[9] = previousLabel;
+		$[10] = props;
+		$[11] = ref;
+		$[12] = render;
+	} else {
+		className = $[1];
+		firstIcon = $[2];
+		firstLabel = $[3];
+		lastIcon = $[4];
+		lastLabel = $[5];
+		nextIcon = $[6];
+		nextLabel = $[7];
+		previousIcon = $[8];
+		previousLabel = $[9];
+		props = $[10];
+		ref = $[11];
+		render = $[12];
+	}
 	let t1;
-	if ($[0] !== atStart || $[1] !== firstLabel || $[2] !== onPageIndexChange) {
-		t1 = /* @__PURE__ */ jsx(PageButton, {
-			icon: SvgFirstPage,
+	if ($[13] !== className) {
+		t1 = clsx(pagination_module_default.controls, className);
+		$[13] = className;
+		$[14] = t1;
+	} else t1 = $[14];
+	let t2;
+	if ($[15] !== firstIcon || $[16] !== firstLabel) {
+		t2 = /* @__PURE__ */ jsx(PaginationFirst, {
 			label: firstLabel,
-			target: 0,
-			unavailable: atStart,
-			onPageIndexChange
+			children: firstIcon
 		});
-		$[0] = atStart;
-		$[1] = firstLabel;
-		$[2] = onPageIndexChange;
-		$[3] = t1;
-	} else t1 = $[3];
-	const t2 = pageIndex - 1;
+		$[15] = firstIcon;
+		$[16] = firstLabel;
+		$[17] = t2;
+	} else t2 = $[17];
 	let t3;
-	if ($[4] !== atStart || $[5] !== onPageIndexChange || $[6] !== previousLabel || $[7] !== t2) {
-		t3 = /* @__PURE__ */ jsx(PageButton, {
-			icon: SvgChevronLeft,
+	if ($[18] !== previousIcon || $[19] !== previousLabel) {
+		t3 = /* @__PURE__ */ jsx(PaginationPrevious, {
 			label: previousLabel,
-			target: t2,
-			unavailable: atStart,
-			onPageIndexChange
+			children: previousIcon
 		});
-		$[4] = atStart;
-		$[5] = onPageIndexChange;
-		$[6] = previousLabel;
-		$[7] = t2;
-		$[8] = t3;
-	} else t3 = $[8];
-	const t4 = pageIndex + 1;
-	let t5;
-	if ($[9] !== atEnd || $[10] !== nextLabel || $[11] !== onPageIndexChange || $[12] !== t4) {
-		t5 = /* @__PURE__ */ jsx(PageButton, {
-			icon: SvgChevronRight,
+		$[18] = previousIcon;
+		$[19] = previousLabel;
+		$[20] = t3;
+	} else t3 = $[20];
+	let t4;
+	if ($[21] !== nextIcon || $[22] !== nextLabel) {
+		t4 = /* @__PURE__ */ jsx(PaginationNext, {
 			label: nextLabel,
-			target: t4,
-			unavailable: atEnd,
-			onPageIndexChange
+			children: nextIcon
 		});
-		$[9] = atEnd;
-		$[10] = nextLabel;
-		$[11] = onPageIndexChange;
-		$[12] = t4;
-		$[13] = t5;
-	} else t5 = $[13];
-	let t6;
-	if ($[14] !== atEnd || $[15] !== lastIndex || $[16] !== lastLabel || $[17] !== onPageIndexChange) {
-		t6 = /* @__PURE__ */ jsx(PageButton, {
-			icon: SvgLastPage,
+		$[21] = nextIcon;
+		$[22] = nextLabel;
+		$[23] = t4;
+	} else t4 = $[23];
+	let t5;
+	if ($[24] !== lastIcon || $[25] !== lastLabel) {
+		t5 = /* @__PURE__ */ jsx(PaginationLast, {
 			label: lastLabel,
-			target: lastIndex,
-			unavailable: atEnd,
-			onPageIndexChange
+			children: lastIcon
 		});
-		$[14] = atEnd;
-		$[15] = lastIndex;
-		$[16] = lastLabel;
-		$[17] = onPageIndexChange;
-		$[18] = t6;
-	} else t6 = $[18];
+		$[24] = lastIcon;
+		$[25] = lastLabel;
+		$[26] = t5;
+	} else t5 = $[26];
+	let t6;
+	if ($[27] !== t2 || $[28] !== t3 || $[29] !== t4 || $[30] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t2,
+			t3,
+			t4,
+			t5
+		] });
+		$[27] = t2;
+		$[28] = t3;
+		$[29] = t4;
+		$[30] = t5;
+		$[31] = t6;
+	} else t6 = $[31];
 	let t7;
-	if ($[19] !== t1 || $[20] !== t3 || $[21] !== t5 || $[22] !== t6) {
-		t7 = /* @__PURE__ */ jsxs("div", {
-			className: pagination_module_default.controls,
-			children: [
-				t1,
-				t3,
-				t5,
-				t6
-			]
-		});
-		$[19] = t1;
-		$[20] = t3;
+	if ($[32] !== props || $[33] !== t1 || $[34] !== t6) {
+		t7 = {
+			...props,
+			className: t1,
+			children: t6
+		};
+		$[32] = props;
+		$[33] = t1;
+		$[34] = t6;
+		$[35] = t7;
+	} else t7 = $[35];
+	let t8;
+	if ($[36] !== ref || $[37] !== render || $[38] !== t7) {
+		t8 = {
+			defaultTagName: "div",
+			render,
+			ref,
+			props: t7
+		};
+		$[36] = ref;
+		$[37] = render;
+		$[38] = t7;
+		$[39] = t8;
+	} else t8 = $[39];
+	return useRender(t8);
+};
+var PaginationContent = (t0) => {
+	const $ = c(24);
+	let checkIcon;
+	let controls;
+	let expandIcon;
+	let indexLabel;
+	let pageSizeLabel;
+	if ($[0] !== t0) {
+		({pageSizeLabel, indexLabel, checkIcon, expandIcon, ...controls} = t0);
+		$[0] = t0;
+		$[1] = checkIcon;
+		$[2] = controls;
+		$[3] = expandIcon;
+		$[4] = indexLabel;
+		$[5] = pageSizeLabel;
+	} else {
+		checkIcon = $[1];
+		controls = $[2];
+		expandIcon = $[3];
+		indexLabel = $[4];
+		pageSizeLabel = $[5];
+	}
+	let t1;
+	if ($[6] !== pageSizeLabel) {
+		t1 = /* @__PURE__ */ jsx(Select.Label, { children: pageSizeLabel });
+		$[6] = pageSizeLabel;
+		$[7] = t1;
+	} else t1 = $[7];
+	let t2;
+	if ($[8] !== expandIcon) {
+		t2 = /* @__PURE__ */ jsx(Select.Trigger, { icon: expandIcon });
+		$[8] = expandIcon;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== checkIcon) {
+		t3 = /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(Select.Popup, { children: /* @__PURE__ */ jsx(Select.List, { children: /* @__PURE__ */ jsx(Select.Items, { checkIcon }) }) }) }) });
+		$[10] = checkIcon;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== t1 || $[13] !== t2 || $[14] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(PaginationPageSize, { children: [
+			t1,
+			t2,
+			t3
+		] });
+		$[12] = t1;
+		$[13] = t2;
+		$[14] = t3;
+		$[15] = t4;
+	} else t4 = $[15];
+	let t5;
+	if ($[16] !== indexLabel) {
+		t5 = /* @__PURE__ */ jsx(PaginationIndex, { label: indexLabel });
+		$[16] = indexLabel;
+		$[17] = t5;
+	} else t5 = $[17];
+	let t6;
+	if ($[18] !== controls) {
+		t6 = /* @__PURE__ */ jsx(PaginationControls, { ...controls });
+		$[18] = controls;
+		$[19] = t6;
+	} else t6 = $[19];
+	let t7;
+	if ($[20] !== t4 || $[21] !== t5 || $[22] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t4,
+			t5,
+			t6
+		] });
+		$[20] = t4;
 		$[21] = t5;
 		$[22] = t6;
 		$[23] = t7;
 	} else t7 = $[23];
 	return t7;
 };
+/** The page size, the index and the four step buttons, in a `Root`. */
+var Prefab = (t0) => {
+	const $ = c(30);
+	let checkIcon;
+	let expandIcon;
+	let firstIcon;
+	let firstLabel;
+	let indexLabel;
+	let lastIcon;
+	let lastLabel;
+	let nextIcon;
+	let nextLabel;
+	let pageSizeLabel;
+	let previousIcon;
+	let previousLabel;
+	let props;
+	if ($[0] !== t0) {
+		({pageSizeLabel, indexLabel, checkIcon, expandIcon, firstLabel, previousLabel, nextLabel, lastLabel, firstIcon, previousIcon, nextIcon, lastIcon, ...props} = t0);
+		$[0] = t0;
+		$[1] = checkIcon;
+		$[2] = expandIcon;
+		$[3] = firstIcon;
+		$[4] = firstLabel;
+		$[5] = indexLabel;
+		$[6] = lastIcon;
+		$[7] = lastLabel;
+		$[8] = nextIcon;
+		$[9] = nextLabel;
+		$[10] = pageSizeLabel;
+		$[11] = previousIcon;
+		$[12] = previousLabel;
+		$[13] = props;
+	} else {
+		checkIcon = $[1];
+		expandIcon = $[2];
+		firstIcon = $[3];
+		firstLabel = $[4];
+		indexLabel = $[5];
+		lastIcon = $[6];
+		lastLabel = $[7];
+		nextIcon = $[8];
+		nextLabel = $[9];
+		pageSizeLabel = $[10];
+		previousIcon = $[11];
+		previousLabel = $[12];
+		props = $[13];
+	}
+	let t1;
+	if ($[14] !== checkIcon || $[15] !== expandIcon || $[16] !== firstIcon || $[17] !== firstLabel || $[18] !== indexLabel || $[19] !== lastIcon || $[20] !== lastLabel || $[21] !== nextIcon || $[22] !== nextLabel || $[23] !== pageSizeLabel || $[24] !== previousIcon || $[25] !== previousLabel) {
+		t1 = /* @__PURE__ */ jsx(PaginationContent, {
+			pageSizeLabel,
+			indexLabel,
+			checkIcon,
+			expandIcon,
+			firstLabel,
+			previousLabel,
+			nextLabel,
+			lastLabel,
+			firstIcon,
+			previousIcon,
+			nextIcon,
+			lastIcon
+		});
+		$[14] = checkIcon;
+		$[15] = expandIcon;
+		$[16] = firstIcon;
+		$[17] = firstLabel;
+		$[18] = indexLabel;
+		$[19] = lastIcon;
+		$[20] = lastLabel;
+		$[21] = nextIcon;
+		$[22] = nextLabel;
+		$[23] = pageSizeLabel;
+		$[24] = previousIcon;
+		$[25] = previousLabel;
+		$[26] = t1;
+	} else t1 = $[26];
+	let t2;
+	if ($[27] !== props || $[28] !== t1) {
+		t2 = /* @__PURE__ */ jsx(PaginationRoot, {
+			...props,
+			children: t1
+		});
+		$[27] = props;
+		$[28] = t1;
+		$[29] = t2;
+	} else t2 = $[29];
+	return t2;
+};
 /**
-* The pager for a paged list, over any source: `Root` holds where the list
-* stands, `PageSize` picks rows per page, `Index` says which page is on screen
-* and `Controls` go to the first, previous, next and last page. Leave out the
-* parts a list has no room for.
+* The pager for a paged list, over any source: the page size, which page is on
+* screen, and buttons to the first, previous, next and last page. Its parts
+* compose another pager: `Root` holds where the list stands, `PageSize` picks
+* rows per page, `Index` says which page is on screen, and `Controls`, or
+* `First`, `Previous`, `Next` and `Last` on their own, step through the pages.
 *
 * @example
-* <Pagination.Root
+* <Pagination
 * 	pageIndex={pageIndex}
 * 	pageCount={pageCount}
 * 	pageSize={pageSize}
 * 	pageSizes={[10, 20, 50]}
 * 	onPageIndexChange={setPageIndex}
-* 	onPageSizeChange={setPageSize}>
-* 	<Pagination.PageSize label="Rows per page" />
-* 	<Pagination.Index label={page => `Page ${page.pageIndex + 1} of ${page.pageCount}`} />
-* 	<Pagination.Controls firstLabel="First page" previousLabel="Previous page" nextLabel="Next page" lastLabel="Last page" />
-* </Pagination.Root>
+* 	onPageSizeChange={setPageSize}
+* 	pageSizeLabel="Rows per page"
+* 	indexLabel={page => `Page ${page.pageIndex + 1} of ${page.pageCount}`}
+* 	firstLabel="First page"
+* 	previousLabel="Previous page"
+* 	nextLabel="Next page"
+* 	lastLabel="Last page"
+* 	firstIcon={<FirstPageIcon />}
+* 	previousIcon={<ChevronLeftIcon />}
+* 	nextIcon={<ChevronRightIcon />}
+* 	lastIcon={<LastPageIcon />}
+* 	checkIcon={<CheckIcon />}
+* />
 */
-var Pagination = {
+var Pagination = Object.assign(Prefab, {
 	Root: PaginationRoot,
 	PageSize: PaginationPageSize,
 	Index: PaginationIndex,
-	Controls: PaginationControls
-};
+	Controls: PaginationControls,
+	First: PaginationFirst,
+	Previous: PaginationPrevious,
+	Next: PaginationNext,
+	Last: PaginationLast
+});
 function _temp(a, b) {
 	return a - b;
 }