@ultraviolet/ui 3.11.0 → 3.12.0

package/dist/components/NumberInput/styles.css.js

@@ -1,76 +1,89 @@
-/* empty css                      */
+import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
+import { init_styles_css_ts_vanilla } from "./styles.css.ts.vanilla.js";
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 
 //#region src/components/NumberInput/styles.css.ts
-var numberinputSideContainer = {
-	large: "uv_1ce7gb60",
-	medium: "uv_1ce7gb61",
-	small: "uv_1ce7gb62"
-};
-var inputContainer = createRuntimeFn({
-	defaultClassName: "uv_1ce7gb63",
-	variantClassNames: { controls: { false: "uv_1ce7gb64" } },
-	defaultVariants: { controls: true },
-	compoundVariants: []
-});
-var unit = createRuntimeFn({
-	defaultClassName: "uv_1ce7gb65",
-	variantClassNames: {
-		disabled: { true: "uv_1ce7gb66" },
-		readOnly: { true: "uv_1ce7gb67" },
-		size: {
-			large: "uv_1ce7gb68",
-			medium: "uv_1ce7gb69",
-			small: "uv_1ce7gb6a"
-		}
-	},
-	defaultVariants: {
-		disabled: false,
-		readOnly: false,
-		size: "large"
-	},
-	compoundVariants: []
-});
-var numberinput = createRuntimeFn({
-	defaultClassName: "uv_1ce7gb6b",
-	variantClassNames: {
-		controls: { false: "uv_1ce7gb6c" },
-		hasUnit: { true: "uv_1ce7gb6d" },
-		size: {
-			large: "uv_1ce7gb6e",
-			medium: "uv_1ce7gb6f",
-			small: "uv_1ce7gb6g"
-		}
-	},
-	defaultVariants: {
-		controls: true,
-		hasUnit: false,
-		size: "large"
-	},
-	compoundVariants: []
-});
-var numberinputContainer = createRuntimeFn({
-	defaultClassName: "uv_1ce7gb6h",
-	variantClassNames: {
-		size: {
-			large: "uv_1ce7gb6i",
-			medium: "uv_1ce7gb6j",
-			small: "uv_1ce7gb6k"
+var numberInputStyle;
+var init_styles_css = __esmMin(() => {
+	init_styles_css_ts_vanilla();
+	numberInputStyle = {
+		sideContainer: {
+			large: "uv_1ce7gb60",
+			medium: "uv_1ce7gb61",
+			small: "uv_1ce7gb62"
 		},
-		state: {
-			"default": "uv_1ce7gb6l",
-			disabled: "uv_1ce7gb6m",
-			error: "uv_1ce7gb6n",
-			readOnly: "uv_1ce7gb6o",
-			success: "uv_1ce7gb6p"
-		}
-	},
-	defaultVariants: {
-		size: "large",
-		state: "default"
-	},
-	compoundVariants: []
+		inputContainer: createRuntimeFn({
+			defaultClassName: "uv_1ce7gb63",
+			variantClassNames: { controls: { false: "uv_1ce7gb64" } },
+			defaultVariants: { controls: true },
+			compoundVariants: []
+		}),
+		unit: createRuntimeFn({
+			defaultClassName: "uv_1ce7gb65",
+			variantClassNames: {
+				disabled: { true: "uv_1ce7gb66" },
+				readOnly: { true: "uv_1ce7gb67" },
+				size: {
+					large: "uv_1ce7gb68",
+					medium: "uv_1ce7gb69",
+					small: "uv_1ce7gb6a"
+				},
+				controls: { false: "uv_1ce7gb6b" }
+			},
+			defaultVariants: {
+				disabled: false,
+				readOnly: false,
+				size: "large",
+				controls: true
+			},
+			compoundVariants: []
+		}),
+		numberinput: createRuntimeFn({
+			defaultClassName: "uv_1ce7gb6c",
+			variantClassNames: {
+				controls: { false: "uv_1ce7gb6d" },
+				hasUnit: { true: "uv_1ce7gb6e" },
+				size: {
+					large: "uv_1ce7gb6f",
+					medium: "uv_1ce7gb6g",
+					small: "uv_1ce7gb6h"
+				}
+			},
+			defaultVariants: {
+				controls: true,
+				hasUnit: false,
+				size: "large"
+			},
+			compoundVariants: [[{
+				controls: false,
+				hasUnit: false
+			}, "uv_1ce7gb6i"]]
+		}),
+		container: createRuntimeFn({
+			defaultClassName: "uv_1ce7gb6j",
+			variantClassNames: {
+				size: {
+					large: "uv_1ce7gb6k",
+					medium: "uv_1ce7gb6l",
+					small: "uv_1ce7gb6m"
+				},
+				state: {
+					"default": "uv_1ce7gb6n",
+					disabled: "uv_1ce7gb6o",
+					error: "uv_1ce7gb6p",
+					readOnly: "uv_1ce7gb6q",
+					success: "uv_1ce7gb6r"
+				}
+			},
+			defaultVariants: {
+				size: "large",
+				state: "default"
+			},
+			compoundVariants: []
+		})
+	};
 });
 
 //#endregion
-export { inputContainer, numberinput, numberinputContainer, numberinputSideContainer, unit };
+init_styles_css();
+export { init_styles_css, numberInputStyle };

package/dist/components/NumberInput/styles.css.ts.vanilla.js

@@ -0,0 +1,8 @@
+import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
+
+//#region src/components/NumberInput/styles.css.ts.vanilla.css
+var init_styles_css_ts_vanilla = __esmMin(() => {});
+
+//#endregion
+init_styles_css_ts_vanilla();
+export { init_styles_css_ts_vanilla };

package/dist/components/Pagination/PaginationButtons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationButtons.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/PaginationButtons.tsx"],"names":[],"mappings":"AAWA,KAAK,sBAAsB,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,EAAE,OAAO,CAAA;CACjB,CAAA;AAgDD,eAAO,MAAM,iBAAiB,4KA4E7B,CAAA"}
+{"version":3,"file":"PaginationButtons.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/PaginationButtons.tsx"],"names":[],"mappings":"AAWA,KAAK,sBAAsB,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,EAAE,OAAO,CAAA;CACjB,CAAA;AAgDD,eAAO,MAAM,iBAAiB,4KAgF7B,CAAA"}

package/dist/components/Pagination/PaginationButtons.js

@@ -1,97 +1,106 @@
 'use client';
-import { __name } from "../../_virtual/_rolldown/runtime.js";
-import { Stack } from "../Stack/index.js";
-import { Text } from "../Text/index.js";
-import { Button } from "../Button/index.js";
-import { getPageNumbers } from "./getPageNumbers.js";
-import { ellipsisClass, pageButton, pageNumbersContainer } from "./styles.css.js";
+import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../Stack/index.js";
+import { Text, init_Text } from "../Text/index.js";
+import { Button, init_Button } from "../Button/index.js";
+import { getPageNumbers, init_getPageNumbers } from "./getPageNumbers.js";
+import { init_styles_css, paginationStyle } from "./styles.css.js";
 import { useCallback, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowRightIcon } from "@ultraviolet/icons/ArrowRightIcon";
 import { ArrowLeftIcon } from "@ultraviolet/icons/ArrowLeftIcon";
 
 //#region src/components/Pagination/PaginationButtons.tsx
-const MakeButton = ({ hasEllipsisBefore, pageNumber, disabled, page, handlePageClick, perPage }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [hasEllipsisBefore ? /* @__PURE__ */ jsx(Text, {
-	"aria-label": "ellipsis",
-	as: "span",
-	className: ellipsisClass[perPage ? "small" : "medium"],
-	disabled,
-	placement: "center",
-	prominence: "default",
-	sentiment: "neutral",
-	variant: "body",
-	children: "..."
-}) : null, /* @__PURE__ */ jsx(Button, {
-	"aria-current": pageNumber === page,
-	className: pageButton[perPage ? "small" : "medium"],
-	disabled,
-	onClick: handlePageClick(pageNumber),
-	sentiment: pageNumber === page ? "primary" : "neutral",
-	size: perPage ? "small" : "medium",
-	type: "button",
-	variant: pageNumber === page ? "filled" : "outlined",
-	children: pageNumber
-})] });
-const PaginationButtons = ({ page, disabled, onChange, pageCount, pageTabCount, "data-testid": dataTestId, className, perPage }) => {
-	const goToNextPage = useCallback(() => {
-		onChange(page + 1);
-	}, [onChange, page]);
-	const goToPreviousPage = useCallback(() => {
-		onChange(page - 1);
-	}, [onChange, page]);
-	const pageNumbersToDisplay = useMemo(() => pageCount > 1 ? getPageNumbers(page, pageCount, pageTabCount) : [1], [
-		page,
-		pageCount,
-		pageTabCount
-	]);
-	const handlePageClick = useCallback((pageNumber) => () => {
-		onChange(pageNumber);
-	}, [onChange]);
-	return /* @__PURE__ */ jsxs(Stack, {
-		className,
-		"data-testid": dataTestId,
-		direction: "row",
-		children: [
-			/* @__PURE__ */ jsx(Stack, {
-				gap: 1,
-				children: /* @__PURE__ */ jsx(Button, {
-					"aria-label": "Back",
-					disabled: page <= 1 || disabled,
-					onClick: goToPreviousPage,
-					sentiment: "primary",
-					size: perPage ? "small" : "medium",
-					variant: "outlined",
-					children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
+var MakeButton, PaginationButtons;
+var init_PaginationButtons = __esmMin(() => {
+	init_Button();
+	init_Stack();
+	init_Text();
+	init_getPageNumbers();
+	init_styles_css();
+	MakeButton = ({ hasEllipsisBefore, pageNumber, disabled, page, handlePageClick, perPage }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [hasEllipsisBefore ? /* @__PURE__ */ jsx(Text, {
+		"aria-label": "ellipsis",
+		as: "span",
+		className: paginationStyle.ellipsisClass[perPage ? "small" : "medium"],
+		disabled,
+		placement: "center",
+		prominence: "default",
+		sentiment: "neutral",
+		variant: "body",
+		children: "..."
+	}) : null, /* @__PURE__ */ jsx(Button, {
+		"aria-current": pageNumber === page,
+		className: paginationStyle.pageButton[perPage ? "small" : "medium"],
+		disabled,
+		onClick: handlePageClick(pageNumber),
+		sentiment: pageNumber === page ? "primary" : "neutral",
+		size: perPage ? "small" : "medium",
+		type: "button",
+		variant: pageNumber === page ? "filled" : "outlined",
+		children: pageNumber
+	})] });
+	PaginationButtons = ({ page, disabled, onChange, pageCount, pageTabCount, "data-testid": dataTestId, className, perPage }) => {
+		const goToNextPage = useCallback(() => {
+			onChange(page + 1);
+		}, [onChange, page]);
+		const goToPreviousPage = useCallback(() => {
+			onChange(page - 1);
+		}, [onChange, page]);
+		const pageNumbersToDisplay = useMemo(() => pageCount > 1 ? getPageNumbers(page, pageCount, pageTabCount) : [1], [
+			page,
+			pageCount,
+			pageTabCount
+		]);
+		const handlePageClick = useCallback((pageNumber) => () => {
+			onChange(pageNumber);
+		}, [onChange]);
+		return /* @__PURE__ */ jsxs(Stack, {
+			className,
+			"data-testid": dataTestId,
+			direction: "row",
+			children: [
+				/* @__PURE__ */ jsx(Stack, {
+					gap: 1,
+					children: /* @__PURE__ */ jsx(Button, {
+						"aria-label": "Back",
+						disabled: page <= 1 || disabled,
+						onClick: goToPreviousPage,
+						sentiment: "primary",
+						size: perPage ? "small" : "medium",
+						variant: "outlined",
+						children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
+					})
+				}),
+				/* @__PURE__ */ jsx(Stack, {
+					className: paginationStyle.pageNumbersContainer,
+					direction: "row",
+					gap: 1,
+					children: pageNumbersToDisplay.map((pageNumber, index) => /* @__PURE__ */ jsx(MakeButton, {
+						disabled,
+						handlePageClick,
+						hasEllipsisBefore: !(index === 0 || pageNumbersToDisplay[index - 1] === pageNumber - 1),
+						page,
+						pageNumber,
+						perPage
+					}, pageNumber))
+				}),
+				/* @__PURE__ */ jsx(Stack, {
+					gap: 1,
+					children: /* @__PURE__ */ jsx(Button, {
+						"aria-label": "Next",
+						disabled: page >= pageCount || disabled,
+						onClick: goToNextPage,
+						sentiment: "primary",
+						size: perPage ? "small" : "medium",
+						variant: "outlined",
+						children: /* @__PURE__ */ jsx(ArrowRightIcon, {})
+					})
 				})
-			}),
-			/* @__PURE__ */ jsx(Stack, {
-				className: pageNumbersContainer,
-				direction: "row",
-				gap: 1,
-				children: pageNumbersToDisplay.map((pageNumber, index) => /* @__PURE__ */ jsx(MakeButton, {
-					disabled,
-					handlePageClick,
-					hasEllipsisBefore: !(index === 0 || pageNumbersToDisplay[index - 1] === pageNumber - 1),
-					page,
-					pageNumber,
-					perPage
-				}, pageNumber))
-			}),
-			/* @__PURE__ */ jsx(Stack, {
-				gap: 1,
-				children: /* @__PURE__ */ jsx(Button, {
-					"aria-label": "Next",
-					disabled: page >= pageCount || disabled,
-					onClick: goToNextPage,
-					sentiment: "primary",
-					size: perPage ? "small" : "medium",
-					variant: "outlined",
-					children: /* @__PURE__ */ jsx(ArrowRightIcon, {})
-				})
-			})
-		]
-	});
-};
+			]
+		});
+	};
+});
 
 //#endregion
-export { PaginationButtons };
+init_PaginationButtons();
+export { PaginationButtons, init_PaginationButtons };

package/dist/components/Pagination/PerPage.js

@@ -1,72 +1,79 @@
 'use client';
-import { __name } from "../../_virtual/_rolldown/runtime.js";
-import { Stack } from "../Stack/index.js";
-import { Text } from "../Text/index.js";
-import { SelectInput } from "../SelectInput/index.js";
+import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../Stack/index.js";
+import { Text, init_Text } from "../Text/index.js";
+import { SelectInput, init_SelectInput } from "../SelectInput/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Pagination/PerPage.tsx
-const optionsItemsPerPage = [
-	{
-		label: "10",
-		value: "10"
-	},
-	{
-		label: "25",
-		value: "25"
-	},
-	{
-		label: "50",
-		value: "50"
-	},
-	{
-		label: "100",
-		value: "100"
-	}
-];
-const PerPage = ({ perPage, onChangePerPage, perPageText, setPerPage, numberOfItemsText, page, numberOfItems, portalTarget }) => {
-	const handleChange = (value) => {
-		const intValue = Number.parseInt(value, 10);
-		onChangePerPage === null || onChangePerPage === void 0 || onChangePerPage(intValue);
-		setPerPage(intValue);
+var optionsItemsPerPage, PerPage;
+var init_PerPage = __esmMin(() => {
+	init_SelectInput();
+	init_Stack();
+	init_Text();
+	optionsItemsPerPage = [
+		{
+			label: "10",
+			value: "10"
+		},
+		{
+			label: "25",
+			value: "25"
+		},
+		{
+			label: "50",
+			value: "50"
+		},
+		{
+			label: "100",
+			value: "100"
+		}
+	];
+	PerPage = ({ perPage, onChangePerPage, perPageText, setPerPage, numberOfItemsText, page, numberOfItems, portalTarget }) => {
+		const handleChange = (value) => {
+			const intValue = Number.parseInt(value, 10);
+			onChangePerPage === null || onChangePerPage === void 0 || onChangePerPage(intValue);
+			setPerPage(intValue);
+		};
+		return /* @__PURE__ */ jsxs(Stack, {
+			alignItems: "center",
+			direction: "row",
+			gap: "2",
+			children: [
+				/* @__PURE__ */ jsx(Text, {
+					as: "span",
+					prominence: "weak",
+					sentiment: "neutral",
+					variant: "body",
+					children: perPageText !== null && perPageText !== void 0 ? perPageText : "Items per page"
+				}),
+				/* @__PURE__ */ jsx(SelectInput, {
+					name: "select-items-per-page",
+					onChange: handleChange,
+					options: optionsItemsPerPage,
+					portalTarget,
+					size: "small",
+					style: { width: "fit-content" },
+					value: perPage.toString()
+				}),
+				/* @__PURE__ */ jsxs(Text, {
+					as: "span",
+					prominence: "weak",
+					sentiment: "neutral",
+					variant: "body",
+					children: [
+						(page - 1) * perPage + 1,
+						"-",
+						Math.min(page * perPage, numberOfItems),
+						" ",
+						numberOfItemsText !== null && numberOfItemsText !== void 0 ? numberOfItemsText : `of ${numberOfItems} items"`
+					]
+				})
+			]
+		});
 	};
-	return /* @__PURE__ */ jsxs(Stack, {
-		alignItems: "center",
-		direction: "row",
-		gap: "2",
-		children: [
-			/* @__PURE__ */ jsx(Text, {
-				as: "span",
-				prominence: "weak",
-				sentiment: "neutral",
-				variant: "body",
-				children: perPageText !== null && perPageText !== void 0 ? perPageText : "Items per page"
-			}),
-			/* @__PURE__ */ jsx(SelectInput, {
-				name: "select-items-per-page",
-				onChange: handleChange,
-				options: optionsItemsPerPage,
-				portalTarget,
-				size: "small",
-				style: { width: "fit-content" },
-				value: perPage.toString()
-			}),
-			/* @__PURE__ */ jsxs(Text, {
-				as: "span",
-				prominence: "weak",
-				sentiment: "neutral",
-				variant: "body",
-				children: [
-					(page - 1) * perPage + 1,
-					"-",
-					Math.min(page * perPage, numberOfItems),
-					" ",
-					numberOfItemsText !== null && numberOfItemsText !== void 0 ? numberOfItemsText : `of ${numberOfItems} items"`
-				]
-			})
-		]
-	});
-};
+});
 
 //#endregion
-export { PerPage };
+init_PerPage();
+export { PerPage, init_PerPage };

package/dist/components/Pagination/getPageNumbers.js

@@ -1,27 +1,24 @@
-import { __name } from "../../_virtual/_rolldown/runtime.js";
+import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
 
 //#region src/components/Pagination/getPageNumbers.ts
-const NUMBER_OF_BUTTONS_IN_BETWEEN = 3;
-/**
-* Return a list of page numbers around the currentPage
-* @param currentPage The current page
-* @param pageCount The last page number
-* @param range The number of pages wanted
-* @returns List of page numbers to display
-*/
-const getPageNumbers = (currentPage, pageCount, range = 5) => {
-	const truncationBefore = currentPage >= range;
-	const truncationAfter = currentPage <= pageCount - range + 1 || currentPage < range;
-	if (pageCount <= range) return Array.from({ length: pageCount }, (_, index) => index + 1);
-	const pagesToShowBeforeTruncation = truncationBefore ? [1] : Array.from({ length: range }, (_, index) => index + 1);
-	const pagesToShowAfterTruncation = truncationAfter ? [pageCount] : Array.from({ length: range }, (_, index) => index + pageCount - range + 1);
-	const pagesToShowBetweenTruncation = truncationBefore && truncationAfter ? Array.from({ length: NUMBER_OF_BUTTONS_IN_BETWEEN }, (_, index) => currentPage + index - 1) : [];
-	return [
-		...pagesToShowBeforeTruncation,
-		...pagesToShowBetweenTruncation,
-		...pagesToShowAfterTruncation
-	];
-};
+var NUMBER_OF_BUTTONS_IN_BETWEEN, getPageNumbers;
+var init_getPageNumbers = __esmMin(() => {
+	NUMBER_OF_BUTTONS_IN_BETWEEN = 3;
+	getPageNumbers = (currentPage, pageCount, range = 5) => {
+		const truncationBefore = currentPage >= range;
+		const truncationAfter = currentPage <= pageCount - range + 1 || currentPage < range;
+		if (pageCount <= range) return Array.from({ length: pageCount }, (_, index) => index + 1);
+		const pagesToShowBeforeTruncation = truncationBefore ? [1] : Array.from({ length: range }, (_, index) => index + 1);
+		const pagesToShowAfterTruncation = truncationAfter ? [pageCount] : Array.from({ length: range }, (_, index) => index + pageCount - range + 1);
+		const pagesToShowBetweenTruncation = truncationBefore && truncationAfter ? Array.from({ length: NUMBER_OF_BUTTONS_IN_BETWEEN }, (_, index) => currentPage + index - 1) : [];
+		return [
+			...pagesToShowBeforeTruncation,
+			...pagesToShowBetweenTruncation,
+			...pagesToShowAfterTruncation
+		];
+	};
+});
 
 //#endregion
-export { getPageNumbers };
+init_getPageNumbers();
+export { getPageNumbers, init_getPageNumbers };

package/dist/components/Pagination/index.js

@@ -1,54 +1,57 @@
 'use client';
-import { __name } from "../../_virtual/_rolldown/runtime.js";
-import { Stack } from "../Stack/index.js";
-import { PaginationButtons } from "./PaginationButtons.js";
-import { PerPage } from "./PerPage.js";
+import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../Stack/index.js";
+import { PaginationButtons, init_PaginationButtons } from "./PaginationButtons.js";
+import { PerPage, init_PerPage } from "./PerPage.js";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Pagination/index.tsx
-/**
-* Pagination is a component to navigate between pages, it is composed of 2 buttons to go to the previous and next page,
-* and a list of buttons to go to a specific page.
-*/
-const Pagination = ({ disabled = false, page, pageCount, onChange, pageTabCount = 5, className, perPage, onChangePerPage, perPageText, numberOfItemsText, numberOfItems, perPagePortalTarget, "data-testid": dataTestId, style }) => {
-	const [perPageComputed, setPerPage] = useState(perPage !== null && perPage !== void 0 ? perPage : 10);
-	useEffect(() => {
-		if (page < 1) onChange(1);
-		if (page > pageCount) onChange(pageCount);
-	}, [
-		page,
-		pageCount,
-		onChange
-	]);
-	useEffect(() => {
-		if (perPage) setPerPage(perPage);
-	}, [perPage]);
-	return /* @__PURE__ */ jsxs(Stack, {
-		direction: "row",
-		justifyContent: "space-between",
-		style,
-		children: [perPage ? /* @__PURE__ */ jsx(PerPage, {
-			numberOfItems,
-			numberOfItemsText,
-			onChangePerPage,
-			page,
-			perPage: perPageComputed,
-			perPageText,
-			portalTarget: perPagePortalTarget,
-			setPerPage
-		}) : null, /* @__PURE__ */ jsx(PaginationButtons, {
-			className,
-			"data-testid": dataTestId,
-			disabled,
-			onChange,
+var Pagination;
+var init_Pagination = __esmMin(() => {
+	init_Stack();
+	init_PaginationButtons();
+	init_PerPage();
+	Pagination = ({ disabled = false, page, pageCount, onChange, pageTabCount = 5, className, perPage, onChangePerPage, perPageText, numberOfItemsText, numberOfItems, perPagePortalTarget, "data-testid": dataTestId, style }) => {
+		const [perPageComputed, setPerPage] = useState(perPage !== null && perPage !== void 0 ? perPage : 10);
+		useEffect(() => {
+			if (page < 1) onChange(1);
+			if (page > pageCount) onChange(pageCount);
+		}, [
 			page,
 			pageCount,
-			pageTabCount,
-			perPage: !!perPage
-		})]
-	});
-};
+			onChange
+		]);
+		useEffect(() => {
+			if (perPage) setPerPage(perPage);
+		}, [perPage]);
+		return /* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			justifyContent: "space-between",
+			style,
+			children: [perPage ? /* @__PURE__ */ jsx(PerPage, {
+				numberOfItems,
+				numberOfItemsText,
+				onChangePerPage,
+				page,
+				perPage: perPageComputed,
+				perPageText,
+				portalTarget: perPagePortalTarget,
+				setPerPage
+			}) : null, /* @__PURE__ */ jsx(PaginationButtons, {
+				className,
+				"data-testid": dataTestId,
+				disabled,
+				onChange,
+				page,
+				pageCount,
+				pageTabCount,
+				perPage: !!perPage
+			})]
+		});
+	};
+});
 
 //#endregion
-export { Pagination };
+init_Pagination();
+export { Pagination, init_Pagination };