@ultraviolet/ui 3.9.0 → 3.10.1

package/dist/components/Pagination/PaginationButtons.js

@@ -1,115 +1,97 @@
-"use client";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { ArrowLeftIcon } from "@ultraviolet/icons/ArrowLeftIcon";
-import { ArrowRightIcon } from "@ultraviolet/icons/ArrowRightIcon";
-import { useCallback, useMemo } from "react";
-import { Button } from "../Button/index.js";
+'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 { pageNumbersContainer, ellipsisClass, pageButton } from "./styles.css.js";
-const MakeButton = ({
-  hasEllipsisBefore,
-  pageNumber,
-  disabled,
-  page,
-  handlePageClick,
-  perPage
-}) => /* @__PURE__ */ jsxs(Fragment, { 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, {})
-      }
-    ) }),
-    /* @__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, {})
-      }
-    ) })
-  ] });
-};
-export {
-  PaginationButtons
+import { ellipsisClass, pageButton, pageNumbersContainer } from "./styles.css.js";
+import { useCallback, useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowLeftIcon } from "@ultraviolet/icons/ArrowLeftIcon";
+import { ArrowRightIcon } from "@ultraviolet/icons/ArrowRightIcon";
+
+//#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, {})
+				})
+			}),
+			/* @__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 };

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

@@ -1 +1 @@
-{"version":3,"file":"PerPage.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/PerPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAwBrD,KAAK,YAAY,GAAG;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAA;IAC5C,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,EAAE,MAAM,CAAA;IACrB,YAAY,CAAC,EAAE,WAAW,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,OAAO,GAAI,8GASrB,YAAY,4CA6Bd,CAAA"}
+{"version":3,"file":"PerPage.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/PerPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAwBrD,KAAK,YAAY,GAAG;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAA;IAC5C,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,EAAE,MAAM,CAAA;IACrB,YAAY,CAAC,EAAE,WAAW,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,OAAO,yKAsCnB,CAAA"}

package/dist/components/Pagination/PerPage.js

@@ -1,66 +1,72 @@
-"use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { SelectInput } from "../SelectInput/index.js";
+'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 { 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"
-  }
+	{
+		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?.(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 ?? "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 ?? `of ${numberOfItems} items"`
-    ] })
-  ] });
-};
-export {
-  PerPage
+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);
+	};
+	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 };

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

@@ -1 +1 @@
-{"version":3,"file":"getPageNumbers.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/getPageNumbers.ts"],"names":[],"mappings":"AACA;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,GACzB,aAAa,MAAM,EACnB,WAAW,MAAM,EACjB,cAAS,KACR,MAAM,EA6BR,CAAA"}
+{"version":3,"file":"getPageNumbers.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/getPageNumbers.ts"],"names":[],"mappings":"AACA;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,sEAiC1B,CAAA"}

package/dist/components/Pagination/getPageNumbers.js

@@ -1,22 +1,27 @@
+import { __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
-  ];
-};
-export {
-  getPageNumbers
+	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 };

package/dist/components/Pagination/index.d.ts

@@ -60,6 +60,6 @@ type PaginationProps = {
  * 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.
  */
-export declare const Pagination: ({ disabled, page, pageCount, onChange, pageTabCount, className, perPage, onChangePerPage, perPageText, numberOfItemsText, numberOfItems, perPagePortalTarget, "data-testid": dataTestId, style, }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Pagination: ({ disabled, page, pageCount, onChange, pageTabCount, className, perPage, onChangePerPage, perPageText, numberOfItemsText, numberOfItems, perPagePortalTarget, 'data-testid': dataTestId, style, }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAM1C,KAAK,eAAe,GAAG;IACrB;;MAEE;IACF,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC;;MAEE;IACF,IAAI,EAAE,MAAM,CAAA;IACZ;;MAEE;IACF,SAAS,EAAE,MAAM,CAAA;IACjB;;MAEE;IACF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;MAEE;IACF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,CACA;IACE;;OAEG;IACH,OAAO,EAAE,MAAM,CAAA;IACf;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;OAEG;IACH,aAAa,EAAE,MAAM,CAAA;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,WAAW,CAAA;CAClC,GACD;IACE,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,eAAe,CAAC,EAAE,KAAK,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAA;IACnB,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB,aAAa,CAAC,EAAE,KAAK,CAAA;IACrB,mBAAmB,CAAC,EAAE,KAAK,CAAA;CAC5B,CACJ,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,mMAexB,eAAe,4CA4CjB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAM1C,KAAK,eAAe,GAAG;IACrB;;MAEE;IACF,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC;;MAEE;IACF,IAAI,EAAE,MAAM,CAAA;IACZ;;MAEE;IACF,SAAS,EAAE,MAAM,CAAA;IACjB;;MAEE;IACF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;MAEE;IACF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,CACA;IACE;;OAEG;IACH,OAAO,EAAE,MAAM,CAAA;IACf;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;OAEG;IACH,aAAa,EAAE,MAAM,CAAA;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,WAAW,CAAA;CAClC,GACD;IACE,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,eAAe,CAAC,EAAE,KAAK,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAA;IACnB,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB,aAAa,CAAC,EAAE,KAAK,CAAA;IACrB,mBAAmB,CAAC,EAAE,KAAK,CAAA;CAC5B,CACJ,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,iQA2DtB,CAAA"}

package/dist/components/Pagination/index.js

@@ -1,68 +1,54 @@
-"use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
+'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";
-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 ?? 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,
-        page,
-        pageCount,
-        pageTabCount,
-        perPage: !!perPage
-      }
-    )
-  ] });
-};
-export {
-  Pagination
+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,
+			page,
+			pageCount,
+			pageTabCount,
+			perPage: !!perPage
+		})]
+	});
 };
+
+//#endregion
+export { Pagination };

package/dist/components/Pagination/styles.css.d.ts

@@ -1,4 +1,4 @@
 export declare const pageNumbersContainer: string;
-export declare const pageButton: Record<"small" | "medium", string>;
-export declare const ellipsisClass: Record<"small" | "medium", string>;
+export declare const pageButton: Record<"medium" | "small", string>;
+export declare const ellipsisClass: Record<"medium" | "small", string>;
 //# sourceMappingURL=styles.css.d.ts.map

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

@@ -1,9 +1,15 @@
-/* empty css                          */
+/* empty css                      */
+
+//#region src/components/Pagination/styles.css.ts
 var pageNumbersContainer = "uv_a0295u0";
-var pageButton = { medium: "uv_a0295u1", small: "uv_a0295u2" };
-var ellipsisClass = { medium: "uv_a0295u4 uv_a0295u3", small: "uv_a0295u5 uv_a0295u3" };
-export {
-  ellipsisClass,
-  pageButton,
-  pageNumbersContainer
+var pageButton = {
+	medium: "uv_a0295u1",
+	small: "uv_a0295u2"
 };
+var ellipsisClass = {
+	medium: "uv_a0295u4 uv_a0295u3",
+	small: "uv_a0295u5 uv_a0295u3"
+};
+
+//#endregion
+export { ellipsisClass, pageButton, pageNumbersContainer };

package/dist/components/PasswordCheck/index.d.ts

@@ -18,6 +18,6 @@ type PasswordCheckProps = {
  * PasswordCheck is a component that display a list of password rules with a check or a cross depending on the validity
  * of the rule.
  */
-export declare const PasswordCheck: ({ rules, className, "data-testid": dataTestId, style, }: PasswordCheckProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PasswordCheck: ({ rules, className, 'data-testid': dataTestId, style, }: PasswordCheckProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/PasswordCheck/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PasswordCheck/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAK1C,KAAK,IAAI,GAAG;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,OAAO,CAAA;CACf,CAAA;AAED,KAAK,kBAAkB,GAAG;IACxB;;;OAGG;IACH,KAAK,EAAE,IAAI,EAAE,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,yDAK3B,kBAAkB,4CAoBpB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PasswordCheck/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAK1C,KAAK,IAAI,GAAG;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,OAAO,CAAA;CACf,CAAA;AAED,KAAK,kBAAkB,GAAG;IACxB;;;OAGG;IACH,KAAK,EAAE,IAAI,EAAE,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa,0HAyBzB,CAAA"}