@ultraviolet/ui 3.21.1 → 3.22.0

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

@@ -4,88 +4,90 @@ import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 
 //#region src/components/NumberInput/styles.css.ts
 var numberInputStyle;
-var init_styles_css = __esmMin(() => {
-	init_styles_css_ts_vanilla();
-	numberInputStyle = {
-		sideContainer: {
-			large: "uv_1ce7gb60",
-			medium: "uv_1ce7gb61",
-			small: "uv_1ce7gb62"
-		},
-		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
+function init_styles_css() {
+	return (init_styles_css = __esmMin(() => {
+		/* @__PURE__ */ init_styles_css_ts_vanilla();
+		numberInputStyle = {
+			sideContainer: {
+				large: "uv_1ce7gb60",
+				medium: "uv_1ce7gb61",
+				small: "uv_1ce7gb62"
 			},
-			compoundVariants: []
-		}),
-		numberinput: createRuntimeFn({
-			defaultClassName: "uv_1ce7gb6c",
-			variantClassNames: {
-				controls: {
-					false: "uv_1ce7gb6d",
-					true: "uv_1ce7gb6e"
+			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" }
 				},
-				hasUnit: { true: "uv_1ce7gb6f" },
-				size: {
-					large: "uv_1ce7gb6g",
-					medium: "uv_1ce7gb6h",
-					small: "uv_1ce7gb6i"
-				}
-			},
-			defaultVariants: {
-				controls: true,
-				hasUnit: false,
-				size: "large"
-			},
-			compoundVariants: [[{
-				controls: false,
-				hasUnit: false
-			}, "uv_1ce7gb6j"]]
-		}),
-		container: createRuntimeFn({
-			defaultClassName: "uv_1ce7gb6k",
-			variantClassNames: {
-				size: {
-					large: "uv_1ce7gb6l",
-					medium: "uv_1ce7gb6m",
-					small: "uv_1ce7gb6n"
+				defaultVariants: {
+					disabled: false,
+					readOnly: false,
+					size: "large",
+					controls: true
 				},
-				state: {
-					"default": "uv_1ce7gb6o",
-					disabled: "uv_1ce7gb6p",
-					error: "uv_1ce7gb6q",
-					readOnly: "uv_1ce7gb6r",
-					success: "uv_1ce7gb6s"
-				}
-			},
-			defaultVariants: {
-				size: "large",
-				state: "default"
-			},
-			compoundVariants: []
-		})
-	};
-});
+				compoundVariants: []
+			}),
+			numberinput: createRuntimeFn({
+				defaultClassName: "uv_1ce7gb6c",
+				variantClassNames: {
+					controls: {
+						false: "uv_1ce7gb6d",
+						true: "uv_1ce7gb6e"
+					},
+					hasUnit: { true: "uv_1ce7gb6f" },
+					size: {
+						large: "uv_1ce7gb6g",
+						medium: "uv_1ce7gb6h",
+						small: "uv_1ce7gb6i"
+					}
+				},
+				defaultVariants: {
+					controls: true,
+					hasUnit: false,
+					size: "large"
+				},
+				compoundVariants: [[{
+					controls: false,
+					hasUnit: false
+				}, "uv_1ce7gb6j"]]
+			}),
+			container: createRuntimeFn({
+				defaultClassName: "uv_1ce7gb6k",
+				variantClassNames: {
+					size: {
+						large: "uv_1ce7gb6l",
+						medium: "uv_1ce7gb6m",
+						small: "uv_1ce7gb6n"
+					},
+					state: {
+						"default": "uv_1ce7gb6o",
+						disabled: "uv_1ce7gb6p",
+						error: "uv_1ce7gb6q",
+						readOnly: "uv_1ce7gb6r",
+						success: "uv_1ce7gb6s"
+					}
+				},
+				defaultVariants: {
+					size: "large",
+					state: "default"
+				},
+				compoundVariants: []
+			})
+		};
+	}))();
+}
 
 //#endregion
 init_styles_css();

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

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

package/dist/components/NumberInput/types.d.ts

@@ -1,16 +1,14 @@
 import type { RefObject, InputHTMLAttributes, ReactNode } from 'react';
 import type { SIZES } from './constant';
 type Sizes = keyof typeof SIZES;
-export type NumberInputProps = {
+import type { BaseFormComponentProps } from '../../types';
+export type NumberInputProps = BaseFormComponentProps<HTMLInputElement> & {
     size?: Sizes;
     /**
      * Text displayed into component at the right of number value.
      */
     unit?: string;
     tooltip?: string;
-    className?: string;
-    'data-testid'?: string;
-    label?: string;
     /**
      * Label description displayed right next to the label. It allows you to customize the label content.
      */
@@ -21,12 +19,11 @@ export type NumberInputProps = {
     controls?: boolean;
     error?: string | boolean;
     success?: string | boolean;
-    helper?: ReactNode;
     value?: number | null;
     onChange?: (newValue: number | null) => void;
     min?: number;
     max?: number;
-} & Pick<InputHTMLAttributes<HTMLInputElement>, 'onFocus' | 'onBlur' | 'name' | 'id' | 'placeholder' | 'aria-label' | 'disabled' | 'step' | 'readOnly' | 'required' | 'autoFocus' | 'style' | 'aria-describedby'>;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, 'placeholder' | 'step' | 'readOnly'>;
 export type ControlsProps = {
     controls?: NumberInputProps['controls'];
     direction: 'up' | 'down';

package/dist/components/NumberInput/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/NumberInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AACvC,KAAK,KAAK,GAAG,MAAM,OAAO,KAAK,CAAA;AAE/B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAA;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC1B,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,GAAG,IAAI,CACN,mBAAmB,CAAC,gBAAgB,CAAC,EACnC,SAAS,GACT,QAAQ,GACR,MAAM,GACN,IAAI,GACJ,aAAa,GACb,YAAY,GACZ,UAAU,GACV,MAAM,GACN,UAAU,GACV,UAAU,GACV,WAAW,GACX,OAAO,GACP,kBAAkB,CACrB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAA;IACvC,SAAS,EAAE,IAAI,GAAG,MAAM,CAAA;IACxB,IAAI,EAAE,MAAM,OAAO,KAAK,CAAA;IACxB,QAAQ,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;IAC5C,GAAG,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAA;IAC7B,GAAG,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAA;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAA;CACxC,CAAA;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClC,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAA;CACxC,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/NumberInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AACvC,KAAK,KAAK,GAAG,MAAM,OAAO,KAAK,CAAA;AAC/B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAA;AAEzD,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,CAAC,gBAAgB,CAAC,GAAG;IACxE,IAAI,CAAC,EAAE,KAAK,CAAA;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,aAAa,GAAG,MAAM,GAAG,UAAU,CAAC,CAAA;AAEpF,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAA;IACvC,SAAS,EAAE,IAAI,GAAG,MAAM,CAAA;IACxB,IAAI,EAAE,MAAM,OAAO,KAAK,CAAA;IACxB,QAAQ,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;IAC5C,GAAG,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAA;IAC7B,GAAG,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAA;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAA;CACxC,CAAA;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClC,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAA;CACxC,CAAA"}

package/dist/components/Pagination/Ellipsis.js

@@ -5,21 +5,23 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Pagination/Ellipsis.tsx
 var Ellipsis;
-var init_Ellipsis = __esmMin(() => {
-	init_Text();
-	init_styles_css();
-	Ellipsis = ({ disabled, size }) => /* @__PURE__ */ jsx(Text, {
-		"aria-label": "ellipsis",
-		as: "span",
-		className: paginationStyle.ellipsisClass[size],
-		disabled,
-		placement: "center",
-		prominence: "default",
-		sentiment: "neutral",
-		variant: "body",
-		children: "..."
-	});
-});
+function init_Ellipsis() {
+	return (init_Ellipsis = __esmMin(() => {
+		init_Text();
+		init_styles_css();
+		Ellipsis = ({ disabled, size }) => /* @__PURE__ */ jsx(Text, {
+			"aria-label": "ellipsis",
+			as: "span",
+			className: paginationStyle.ellipsisClass[size],
+			disabled,
+			placement: "center",
+			prominence: "default",
+			sentiment: "neutral",
+			variant: "body",
+			children: "..."
+		});
+	}))();
+}
 
 //#endregion
 init_Ellipsis();

package/dist/components/Pagination/PaginationButton.js

@@ -7,25 +7,27 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Pagination/PaginationButton.tsx
 var MakeButton;
-var init_PaginationButton = __esmMin(() => {
-	init_Button();
-	init_Ellipsis();
-	init_styles_css();
-	MakeButton = ({ hasEllipsisBefore, pageNumber, disabled, page, handlePageClick, size }) => /* @__PURE__ */ jsxs(Fragment, { children: [hasEllipsisBefore ? /* @__PURE__ */ jsx(Ellipsis, {
-		disabled,
-		size
-	}) : null, /* @__PURE__ */ jsx(Button, {
-		"aria-current": pageNumber === page,
-		className: paginationStyle.pageButton[size],
-		disabled,
-		onClick: handlePageClick(pageNumber),
-		sentiment: pageNumber === page ? "primary" : "neutral",
-		size,
-		type: "button",
-		variant: pageNumber === page ? "filled" : "outlined",
-		children: pageNumber
-	})] });
-});
+function init_PaginationButton() {
+	return (init_PaginationButton = __esmMin(() => {
+		init_Button();
+		init_Ellipsis();
+		init_styles_css();
+		MakeButton = ({ hasEllipsisBefore, pageNumber, disabled, page, handlePageClick, size }) => /* @__PURE__ */ jsxs(Fragment, { children: [hasEllipsisBefore ? /* @__PURE__ */ jsx(Ellipsis, {
+			disabled,
+			size
+		}) : null, /* @__PURE__ */ jsx(Button, {
+			"aria-current": pageNumber === page,
+			className: paginationStyle.pageButton[size],
+			disabled,
+			onClick: handlePageClick(pageNumber),
+			sentiment: pageNumber === page ? "primary" : "neutral",
+			size,
+			type: "button",
+			variant: pageNumber === page ? "filled" : "outlined",
+			children: pageNumber
+		})] });
+	}))();
+}
 
 //#endregion
 init_PaginationButton();

package/dist/components/Pagination/PaginationButtons.js

@@ -13,79 +13,81 @@ import { ArrowLeftIcon } from "@ultraviolet/icons/ArrowLeftIcon";
 
 //#region src/components/Pagination/PaginationButtons.tsx
 var PaginationButtons;
-var init_PaginationButtons = __esmMin(() => {
-	init_Button();
-	init_Stack();
-	init_Ellipsis();
-	init_getPageNumbers();
-	init_PaginationButton();
-	init_styles_css();
-	PaginationButtons = ({ page, disabled, onChange, pageCount, pageTabCount, "data-testid": dataTestId, className, hideFirstPage, hideLastPage, size }) => {
-		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, hideFirstPage, hideLastPage) : [1], [
-			page,
-			pageCount,
-			pageTabCount,
-			hideFirstPage,
-			hideLastPage
-		]);
-		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,
-						variant: "outlined",
-						children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
+function init_PaginationButtons() {
+	return (init_PaginationButtons = __esmMin(() => {
+		init_Button();
+		init_Stack();
+		init_Ellipsis();
+		init_getPageNumbers();
+		init_PaginationButton();
+		init_styles_css();
+		PaginationButtons = ({ page, disabled, onChange, pageCount, pageTabCount, "data-testid": dataTestId, className, hideFirstPage, hideLastPage, size }) => {
+			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, hideFirstPage, hideLastPage) : [1], [
+				page,
+				pageCount,
+				pageTabCount,
+				hideFirstPage,
+				hideLastPage
+			]);
+			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,
+							variant: "outlined",
+							children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
+						})
+					}),
+					/* @__PURE__ */ jsxs(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) || index === 0 && pageNumber !== 1,
+							page,
+							pageNumber,
+							size
+						}, pageNumber)), pageNumbersToDisplay.at(-1) === pageCount ? null : /* @__PURE__ */ jsx(Ellipsis, {
+							disabled,
+							size
+						})]
+					}),
+					/* @__PURE__ */ jsx(Stack, {
+						gap: 1,
+						children: /* @__PURE__ */ jsx(Button, {
+							"aria-label": "Next",
+							disabled: page >= pageCount || disabled,
+							onClick: goToNextPage,
+							sentiment: "primary",
+							size,
+							variant: "outlined",
+							children: /* @__PURE__ */ jsx(ArrowRightIcon, {})
+						})
 					})
-				}),
-				/* @__PURE__ */ jsxs(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) || index === 0 && pageNumber !== 1,
-						page,
-						pageNumber,
-						size
-					}, pageNumber)), pageNumbersToDisplay.at(-1) === pageCount ? null : /* @__PURE__ */ jsx(Ellipsis, {
-						disabled,
-						size
-					})]
-				}),
-				/* @__PURE__ */ jsx(Stack, {
-					gap: 1,
-					children: /* @__PURE__ */ jsx(Button, {
-						"aria-label": "Next",
-						disabled: page >= pageCount || disabled,
-						onClick: goToNextPage,
-						sentiment: "primary",
-						size,
-						variant: "outlined",
-						children: /* @__PURE__ */ jsx(ArrowRightIcon, {})
-					})
-				})
-			]
-		});
-	};
-});
+				]
+			});
+		};
+	}))();
+}
 
 //#endregion
 init_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,iHASjB,YAAY,gCA6Bd,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;AAyBrD,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,iHASjB,YAAY,gCAgCd,CAAA"}

package/dist/components/Pagination/PerPage.js

@@ -3,76 +3,82 @@ 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 { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Pagination/PerPage.tsx
 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);
+function init_PerPage() {
+	return (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);
+			};
+			const labelId = useId();
+			return /* @__PURE__ */ jsxs(Stack, {
+				alignItems: "center",
+				direction: "row",
+				gap: "2",
+				children: [
+					/* @__PURE__ */ jsx(Text, {
+						as: "label",
+						id: labelId,
+						prominence: "weak",
+						sentiment: "neutral",
+						variant: "body",
+						children: perPageText !== null && perPageText !== void 0 ? perPageText : "Items per page"
+					}),
+					/* @__PURE__ */ jsx(SelectInput, {
+						name: "select-items-per-page",
+						"aria-labelledby": labelId,
+						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
 init_PerPage();