@atom-learning/components 6.17.0 → 8.0.0

package/dist/components/number-input-field/NumberInputField.js

@@ -3,6 +3,7 @@ import { FieldWrapper } from "../field-wrapper/FieldWrapper.js";
 import { useFormCustomContext } from "../form/useFormCustomContext.js";
 import { NumberInput } from "../number-input/NumberInput.js";
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 import { useController, useFormContext } from "react-hook-form";
 //#region src/components/number-input-field/NumberInputField.tsx
 var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt, description, label, name, validation, onValueChange, appearance, theme, ...remainingProps }) => {
@@ -20,7 +21,7 @@ var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt,
 	React$1.useEffect(() => {
 		if (typeof value !== "undefined") onChange(value);
 	}, [value]);
-	return /* @__PURE__ */ React$1.createElement(FieldWrapper, {
+	return /* @__PURE__ */ jsx(FieldWrapper, {
 		className,
 		description,
 		error,
@@ -29,25 +30,26 @@ var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt,
 		label,
 		prompt,
 		required: Boolean(validation?.required),
-		appearance: formAppearance
-	}, /* @__PURE__ */ React$1.createElement(NumberInput, {
-		id: name,
-		name: innerName,
-		ref,
-		...error && {
-			state: "error",
-			"aria-invalid": true
-		},
-		defaultValue,
-		onValueChange: (newValue) => {
-			onChange(newValue);
-			onValueChange?.(newValue);
-		},
-		value: innerValue,
 		appearance: formAppearance,
-		theme: formTheme,
-		...remainingProps
-	}));
+		children: /* @__PURE__ */ jsx(NumberInput, {
+			id: name,
+			name: innerName,
+			ref,
+			...error && {
+				state: "error",
+				"aria-invalid": true
+			},
+			defaultValue,
+			onValueChange: (newValue) => {
+				onChange(newValue);
+				onValueChange?.(newValue);
+			},
+			value: innerValue,
+			appearance: formAppearance,
+			theme: formTheme,
+			...remainingProps
+		})
+	});
 };
 NumberInputField.displayName = "NumberInputField";
 //#endregion

package/dist/components/number-input-field/NumberInputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInputField.js","names":[],"sources":["../../../src/components/number-input-field/NumberInputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { FieldWrapper } from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { ValidationOptions } from '~/components/form/validation'\n\nimport type { NumberInputProps } from '../number-input/NumberInput'\nimport { NumberInput } from '../number-input/NumberInput'\n\nexport interface NumberInputFieldProps extends NumberInputProps {\n  className?: string\n  hideLabel?: boolean\n  description?: string\n  label: string\n  name: string\n  prompt?: { link: string; label: string }\n  validation?: ValidationOptions\n}\n\nexport const NumberInputField = ({\n  className,\n  defaultValue = 0,\n  hideLabel,\n  value,\n  prompt,\n  description,\n  label,\n  name,\n  validation,\n  onValueChange,\n  appearance,\n  theme,\n  ...remainingProps\n}: NumberInputFieldProps) => {\n  const { control } = useFormContext()\n  const context = useFormCustomContext()\n  const {\n    field: { ref, onChange, value: innerValue, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n  const { error } = useFieldError(name)\n\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner value to match what is passed in.\n    if (typeof value !== 'undefined') onChange(value)\n  }, [value])\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <NumberInput\n        id={name}\n        name={innerName}\n        ref={ref}\n        {...(error && { state: 'error', 'aria-invalid': true })}\n        defaultValue={defaultValue}\n        onValueChange={(newValue) => {\n          onChange(newValue)\n          onValueChange?.(newValue)\n        }}\n        value={innerValue}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nNumberInputField.displayName = 'NumberInputField'\n"],"mappings":";;;;;;;AAqBA,IAAa,oBAAoB,EAC/B,WACA,eAAe,GACf,WACA,OACA,QACA,aACA,OACA,MACA,YACA,eACA,YACA,OACA,GAAG,qBACwB;CAC3B,MAAM,EAAE,YAAY,gBAAgB;CACpC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,YAAY,MAAM,gBAC/C,cAAc;EAChB;EACA;EACA,OAAO;EACP;EACD,CAAC;CACF,MAAM,EAAE,UAAU,cAAc,KAAK;CAErC,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;AAEpC,SAAM,gBAAgB;AAEpB,MAAI,OAAO,UAAU,YAAa,UAAS,MAAM;IAChD,CAAC,MAAM,CAAC;AAEX,QACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EAiBC,EAfb,wBAAA,cAAC,aAAD;EACE,IAAI;EACJ,MAAM;EACD;EACL,GAAK,SAAS;GAAE,OAAO;GAAS,gBAAgB;GAAM;EACxC;EACd,gBAAgB,aAAa;AAC3B,YAAS,SAAS;AAClB,mBAAgB,SAAS;;EAE3B,OAAO;EACP,YAAY;EACZ,OAAO;EACP,GAAI;EACJ,CAAA,CACW;;AAInB,iBAAiB,cAAc"}
+{"version":3,"file":"NumberInputField.js","names":[],"sources":["../../../src/components/number-input-field/NumberInputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { FieldWrapper } from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { ValidationOptions } from '~/components/form/validation'\n\nimport type { NumberInputProps } from '../number-input/NumberInput'\nimport { NumberInput } from '../number-input/NumberInput'\n\nexport interface NumberInputFieldProps extends NumberInputProps {\n  className?: string\n  hideLabel?: boolean\n  description?: string\n  label: string\n  name: string\n  prompt?: { link: string; label: string }\n  validation?: ValidationOptions\n}\n\nexport const NumberInputField = ({\n  className,\n  defaultValue = 0,\n  hideLabel,\n  value,\n  prompt,\n  description,\n  label,\n  name,\n  validation,\n  onValueChange,\n  appearance,\n  theme,\n  ...remainingProps\n}: NumberInputFieldProps) => {\n  const { control } = useFormContext()\n  const context = useFormCustomContext()\n  const {\n    field: { ref, onChange, value: innerValue, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n  const { error } = useFieldError(name)\n\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner value to match what is passed in.\n    if (typeof value !== 'undefined') onChange(value)\n  }, [value])\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <NumberInput\n        id={name}\n        name={innerName}\n        ref={ref}\n        {...(error && { state: 'error', 'aria-invalid': true })}\n        defaultValue={defaultValue}\n        onValueChange={(newValue) => {\n          onChange(newValue)\n          onValueChange?.(newValue)\n        }}\n        value={innerValue}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nNumberInputField.displayName = 'NumberInputField'\n"],"mappings":";;;;;;;;AAqBA,IAAa,oBAAoB,EAC/B,WACA,eAAe,GACf,WACA,OACA,QACA,aACA,OACA,MACA,YACA,eACA,YACA,OACA,GAAG,qBACwB;CAC3B,MAAM,EAAE,YAAY,gBAAgB;CACpC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,YAAY,MAAM,gBAC/C,cAAc;EAChB;EACA;EACA,OAAO;EACP;EACD,CAAC;CACF,MAAM,EAAE,UAAU,cAAc,KAAK;CAErC,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;AAEpC,SAAM,gBAAgB;AAEpB,MAAI,OAAO,UAAU,YAAa,UAAS,MAAM;IAChD,CAAC,MAAM,CAAC;AAEX,QACE,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;YAEZ,oBAAC,aAAD;GACE,IAAI;GACJ,MAAM;GACD;GACL,GAAK,SAAS;IAAE,OAAO;IAAS,gBAAgB;IAAM;GACxC;GACd,gBAAgB,aAAa;AAC3B,aAAS,SAAS;AAClB,oBAAgB,SAAS;;GAE3B,OAAO;GACP,YAAY;GACZ,OAAO;GACP,GAAI;GACJ,CAAA;EACW,CAAA;;AAInB,iBAAiB,cAAc"}

package/dist/components/pagination/Pagination.js

@@ -4,11 +4,12 @@ import { VisibleElementsAmount } from "./pagination.constants.js";
 import { PaginationProvider } from "./pagination-context/PaginationContext.js";
 import { PaginationPopover } from "./PaginationPopover.js";
 import { PaginationItems } from "./PaginationItems.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/pagination/Pagination.tsx
 var PaginationComponent = ({ colorScheme, onSelectedPageChange, selectedPage, visibleElementsCount = VisibleElementsAmount.LESS, pagesCount, indicatedPages = [], disabledPages = [], onItemHover = () => null, labels = {}, children, className, ...rest }) => {
 	if (!pagesCount) return null;
-	const paginationProviderProps = {
+	return /* @__PURE__ */ jsx(PaginationProvider, {
 		onSelectedPageChange,
 		selectedPage,
 		visibleElementsCount,
@@ -16,17 +17,19 @@ var PaginationComponent = ({ colorScheme, onSelectedPageChange, selectedPage, vi
 		indicatedPages,
 		disabledPages,
 		onItemHover,
-		labels
-	};
-	return /* @__PURE__ */ React$1.createElement(PaginationProvider, paginationProviderProps, /* @__PURE__ */ React$1.createElement(ColorScheme, {
-		base: "grey1",
-		accent: "primary1",
-		...colorScheme,
-		asChild: true
-	}, /* @__PURE__ */ React$1.createElement("div", {
-		...rest,
-		className: cn("flex", "gap-1", className)
-	}, children || /* @__PURE__ */ React$1.createElement(PaginationItems, null))));
+		labels,
+		children: /* @__PURE__ */ jsx(ColorScheme, {
+			base: "grey1",
+			accent: "primary1",
+			...colorScheme,
+			asChild: true,
+			children: /* @__PURE__ */ jsx("div", {
+				...rest,
+				className: cn("flex", "gap-1", className),
+				children: children || /* @__PURE__ */ jsx(PaginationItems, {})
+			})
+		})
+	});
 };
 var Pagination = Object.assign(PaginationComponent, { Popover: PaginationPopover });
 PaginationComponent.displayName = "Pagination";

package/dist/components/pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":[],"sources":["../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { ColorScheme } from '../../experiments/color-scheme/ColorScheme'\nimport { PaginationProvider } from './pagination-context/PaginationContext'\nimport { VisibleElementsAmount } from './pagination.constants'\nimport { PaginationItems } from './PaginationItems'\nimport { PaginationPopover } from './PaginationPopover'\nimport type { PaginationProps, PaginationProviderProps } from './types'\n\nconst PaginationComponent = ({\n  colorScheme,\n  onSelectedPageChange,\n  selectedPage,\n  visibleElementsCount = VisibleElementsAmount.LESS,\n  pagesCount,\n  indicatedPages = [],\n  disabledPages = [],\n  onItemHover = () => null,\n  labels = {},\n  children,\n  className,\n  ...rest\n}: PaginationProps) => {\n  if (!pagesCount) return null\n\n  const paginationProviderProps: PaginationProviderProps = {\n    onSelectedPageChange,\n    selectedPage,\n    visibleElementsCount,\n    pagesCount,\n    indicatedPages,\n    disabledPages,\n    onItemHover,\n    labels\n  }\n\n  return (\n    <PaginationProvider {...paginationProviderProps}>\n      <ColorScheme base=\"grey1\" accent=\"primary1\" {...colorScheme} asChild>\n        <div {...rest} className={cn('flex', 'gap-1', className)}>\n          {children || <PaginationItems />}\n        </div>\n      </ColorScheme>\n    </PaginationProvider>\n  )\n}\n\nexport const Pagination = Object.assign(PaginationComponent, {\n  Popover: PaginationPopover\n})\n\nPaginationComponent.displayName = 'Pagination'\n"],"mappings":";;;;;;;;AAWA,IAAM,uBAAuB,EAC3B,aACA,sBACA,cACA,uBAAuB,sBAAsB,MAC7C,YACA,iBAAiB,EAAE,EACnB,gBAAgB,EAAE,EAClB,oBAAoB,MACpB,SAAS,EAAE,EACX,UACA,WACA,GAAG,WACkB;AACrB,KAAI,CAAC,WAAY,QAAO;CAExB,MAAM,0BAAmD;EACvD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;AAED,QACE,wBAAA,cAAC,oBAAuB,yBACtB,wBAAA,cAAC,aAAD;EAAa,MAAK;EAAQ,QAAO;EAAW,GAAI;EAAa,SAAA;EAI/C,EAHZ,wBAAA,cAAC,OAAD;EAAK,GAAI;EAAM,WAAW,GAAG,QAAQ,SAAS,UAAU;EAElD,EADH,YAAY,wBAAA,cAAC,iBAAA,KAAkB,CAC5B,CACM,CACK;;AAIzB,IAAa,aAAa,OAAO,OAAO,qBAAqB,EAC3D,SAAS,mBACV,CAAC;AAEF,oBAAoB,cAAc"}
+{"version":3,"file":"Pagination.js","names":[],"sources":["../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { ColorScheme } from '../../experiments/color-scheme/ColorScheme'\nimport { PaginationProvider } from './pagination-context/PaginationContext'\nimport { VisibleElementsAmount } from './pagination.constants'\nimport { PaginationItems } from './PaginationItems'\nimport { PaginationPopover } from './PaginationPopover'\nimport type { PaginationProps, PaginationProviderProps } from './types'\n\nconst PaginationComponent = ({\n  colorScheme,\n  onSelectedPageChange,\n  selectedPage,\n  visibleElementsCount = VisibleElementsAmount.LESS,\n  pagesCount,\n  indicatedPages = [],\n  disabledPages = [],\n  onItemHover = () => null,\n  labels = {},\n  children,\n  className,\n  ...rest\n}: PaginationProps) => {\n  if (!pagesCount) return null\n\n  const paginationProviderProps: PaginationProviderProps = {\n    onSelectedPageChange,\n    selectedPage,\n    visibleElementsCount,\n    pagesCount,\n    indicatedPages,\n    disabledPages,\n    onItemHover,\n    labels\n  }\n\n  return (\n    <PaginationProvider {...paginationProviderProps}>\n      <ColorScheme base=\"grey1\" accent=\"primary1\" {...colorScheme} asChild>\n        <div {...rest} className={cn('flex', 'gap-1', className)}>\n          {children || <PaginationItems />}\n        </div>\n      </ColorScheme>\n    </PaginationProvider>\n  )\n}\n\nexport const Pagination = Object.assign(PaginationComponent, {\n  Popover: PaginationPopover\n})\n\nPaginationComponent.displayName = 'Pagination'\n"],"mappings":";;;;;;;;;AAWA,IAAM,uBAAuB,EAC3B,aACA,sBACA,cACA,uBAAuB,sBAAsB,MAC7C,YACA,iBAAiB,EAAE,EACnB,gBAAgB,EAAE,EAClB,oBAAoB,MACpB,SAAS,EAAE,EACX,UACA,WACA,GAAG,WACkB;AACrB,KAAI,CAAC,WAAY,QAAO;AAaxB,QACE,oBAAC,oBAAD;EAXA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;YAKE,oBAAC,aAAD;GAAa,MAAK;GAAQ,QAAO;GAAW,GAAI;GAAa,SAAA;aAC3D,oBAAC,OAAD;IAAK,GAAI;IAAM,WAAW,GAAG,QAAQ,SAAS,UAAU;cACrD,YAAY,oBAAC,iBAAD,EAAmB,CAAA;IAC5B,CAAA;GACM,CAAA;EACK,CAAA;;AAIzB,IAAa,aAAa,OAAO,OAAO,qBAAqB,EAC3D,SAAS,mBACV,CAAC;AAEF,oBAAoB,cAAc"}

package/dist/components/pagination/PaginationItems.d.ts

@@ -1 +1,2 @@
-export declare const PaginationItems: () => JSX.Element;
+import * as React from 'react';
+export declare const PaginationItems: () => React.JSX.Element;

package/dist/components/pagination/PaginationItems.js

@@ -4,21 +4,19 @@ import { PaginationNextButton } from "./PaginationNextButton.js";
 import { PaginationPage } from "./PaginationPage.js";
 import { PaginationPopover } from "./PaginationPopover.js";
 import { PaginationPreviousButton } from "./PaginationPreviousButton.js";
-import * as React$1 from "react";
+import "react";
+import { Fragment, jsx } from "react/jsx-runtime";
 //#region src/components/pagination/PaginationItems.tsx
 var PaginationItems = () => {
 	const { paginationItems } = usePagination();
-	return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, paginationItems.map((paginationItem, i) => {
+	return /* @__PURE__ */ jsx(Fragment, { children: paginationItems.map((paginationItem, i) => {
 		switch (paginationItem) {
-			case VIEW_ALL_POPOVER: return /* @__PURE__ */ React$1.createElement(PaginationPopover, { key: paginationItem + i });
-			case GO_TO_PREVIOUS_PAGE: return /* @__PURE__ */ React$1.createElement(PaginationPreviousButton, { key: paginationItem });
-			case GO_TO_NEXT_PAGE: return /* @__PURE__ */ React$1.createElement(PaginationNextButton, { key: paginationItem });
-			default: return /* @__PURE__ */ React$1.createElement(PaginationPage, {
-				key: paginationItem,
-				pageNumber: paginationItem
-			});
+			case VIEW_ALL_POPOVER: return /* @__PURE__ */ jsx(PaginationPopover, {}, paginationItem + i);
+			case GO_TO_PREVIOUS_PAGE: return /* @__PURE__ */ jsx(PaginationPreviousButton, {}, paginationItem);
+			case GO_TO_NEXT_PAGE: return /* @__PURE__ */ jsx(PaginationNextButton, {}, paginationItem);
+			default: return /* @__PURE__ */ jsx(PaginationPage, { pageNumber: paginationItem }, paginationItem);
 		}
-	}));
+	}) });
 };
 //#endregion
 export { PaginationItems };

package/dist/components/pagination/PaginationItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationItems.js","names":[],"sources":["../../../src/components/pagination/PaginationItems.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n  GO_TO_NEXT_PAGE,\n  GO_TO_PREVIOUS_PAGE,\n  VIEW_ALL_POPOVER\n} from './pagination.constants'\nimport { PaginationNextButton } from './PaginationNextButton'\nimport { PaginationPage } from './PaginationPage'\nimport { PaginationPopover } from './PaginationPopover'\nimport { PaginationPreviousButton } from './PaginationPreviousButton'\nimport { usePagination } from './usePagination'\n\nexport const PaginationItems = (): JSX.Element => {\n  const { paginationItems } = usePagination()\n\n  return (\n    <>\n      {paginationItems.map((paginationItem, i) => {\n        switch (paginationItem) {\n          case VIEW_ALL_POPOVER:\n            return <PaginationPopover key={paginationItem + i} />\n          case GO_TO_PREVIOUS_PAGE:\n            return <PaginationPreviousButton key={paginationItem} />\n          case GO_TO_NEXT_PAGE:\n            return <PaginationNextButton key={paginationItem} />\n          default:\n            return (\n              <PaginationPage\n                key={paginationItem}\n                pageNumber={paginationItem}\n              />\n            )\n        }\n      })}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;AAaA,IAAa,wBAAqC;CAChD,MAAM,EAAE,oBAAoB,eAAe;AAE3C,QACE,wBAAA,cAAA,QAAA,UAAA,MACG,gBAAgB,KAAK,gBAAgB,MAAM;AAC1C,UAAQ,gBAAR;GACE,KAAK,iBACH,QAAO,wBAAA,cAAC,mBAAD,EAAmB,KAAK,iBAAiB,GAAK,CAAA;GACvD,KAAK,oBACH,QAAO,wBAAA,cAAC,0BAAD,EAA0B,KAAK,gBAAkB,CAAA;GAC1D,KAAK,gBACH,QAAO,wBAAA,cAAC,sBAAD,EAAsB,KAAK,gBAAkB,CAAA;GACtD,QACE,QACE,wBAAA,cAAC,gBAAD;IACE,KAAK;IACL,YAAY;IACZ,CAAA;;GAGR,CACD"}
+{"version":3,"file":"PaginationItems.js","names":[],"sources":["../../../src/components/pagination/PaginationItems.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n  GO_TO_NEXT_PAGE,\n  GO_TO_PREVIOUS_PAGE,\n  VIEW_ALL_POPOVER\n} from './pagination.constants'\nimport { PaginationNextButton } from './PaginationNextButton'\nimport { PaginationPage } from './PaginationPage'\nimport { PaginationPopover } from './PaginationPopover'\nimport { PaginationPreviousButton } from './PaginationPreviousButton'\nimport { usePagination } from './usePagination'\n\nexport const PaginationItems = (): React.JSX.Element => {\n  const { paginationItems } = usePagination()\n\n  return (\n    <>\n      {paginationItems.map((paginationItem, i) => {\n        switch (paginationItem) {\n          case VIEW_ALL_POPOVER:\n            return <PaginationPopover key={paginationItem + i} />\n          case GO_TO_PREVIOUS_PAGE:\n            return <PaginationPreviousButton key={paginationItem} />\n          case GO_TO_NEXT_PAGE:\n            return <PaginationNextButton key={paginationItem} />\n          default:\n            return (\n              <PaginationPage\n                key={paginationItem}\n                pageNumber={paginationItem}\n              />\n            )\n        }\n      })}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;AAaA,IAAa,wBAA2C;CACtD,MAAM,EAAE,oBAAoB,eAAe;AAE3C,QACE,oBAAA,UAAA,EAAA,UACG,gBAAgB,KAAK,gBAAgB,MAAM;AAC1C,UAAQ,gBAAR;GACE,KAAK,iBACH,QAAO,oBAAC,mBAAD,EAA8C,EAAtB,iBAAiB,EAAK;GACvD,KAAK,oBACH,QAAO,oBAAC,0BAAD,EAAiD,EAAlB,eAAkB;GAC1D,KAAK,gBACH,QAAO,oBAAC,sBAAD,EAA6C,EAAlB,eAAkB;GACtD,QACE,QACE,oBAAC,gBAAD,EAEE,YAAY,gBACZ,EAFK,eAEL;;GAGR,EACD,CAAA"}

package/dist/components/pagination/PaginationNextButton.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-declare const StyledActionIcon: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+declare const StyledActionIcon: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLButtonElement> | null | undefined;
 }, "appearance" | "size" | "theme" | "isRounded"> & {
     theme?: ("primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger">>) | undefined;
     appearance?: ("simple" | "outline" | "solid" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "simple" | "outline" | "solid">>) | undefined;
@@ -11,7 +11,9 @@ declare const StyledActionIcon: React.ForwardRefExoticComponent<Omit<Omit<Omit<O
 }, "children" | "label" | "hasTooltip" | "tooltipSide" | keyof import("../..").NavigatorActions> & {
     children: React.ReactNode;
     label: string;
-} & Omit<import("../..").TOptionalTooltipWrapperProps, "label"> & import("../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, never> & {
+} & Omit<import("../..").TOptionalTooltipWrapperProps, "label"> & import("../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLButtonElement> | null | undefined;
+}, never> & {
     as?: React.ElementType;
 }>;
 export declare const PaginationNextButton: (props: Partial<React.ComponentProps<typeof StyledActionIcon>>) => React.JSX.Element;

package/dist/components/pagination/PaginationNextButton.js

@@ -2,22 +2,23 @@ import { styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
 import { usePagination } from "./usePagination.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 import { ChevronRight } from "@atom-learning/icons";
 //#region src/components/pagination/PaginationNextButton.tsx
 var StyledActionIcon = styled(ActionIcon, { base: ["ml-1", "disabled:opacity-30"] });
 var PaginationNextButton = (props) => {
 	const { goToNextPage, labels, nextAvailablePage } = usePagination();
-	const isDisabled = !nextAvailablePage;
-	return /* @__PURE__ */ React$1.createElement(StyledActionIcon, {
+	return /* @__PURE__ */ jsx(StyledActionIcon, {
 		hasTooltip: false,
 		size: "md",
 		theme: "neutral",
 		onClick: goToNextPage,
-		disabled: isDisabled,
+		disabled: !nextAvailablePage,
 		...props,
-		label: labels?.nextPageButtonLabel || "Next page"
-	}, /* @__PURE__ */ React$1.createElement(Icon, { is: ChevronRight }));
+		label: labels?.nextPageButtonLabel || "Next page",
+		children: /* @__PURE__ */ jsx(Icon, { is: ChevronRight })
+	});
 };
 //#endregion
 export { PaginationNextButton };

package/dist/components/pagination/PaginationNextButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationNextButton.js","names":[],"sources":["../../../src/components/pagination/PaginationNextButton.tsx"],"sourcesContent":["import { ChevronRight } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n  base: ['ml-1', 'disabled:opacity-30']\n})\n\nexport const PaginationNextButton = (\n  props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n  const { goToNextPage, labels, nextAvailablePage } = usePagination()\n\n  const isDisabled = !nextAvailablePage\n\n  return (\n    <StyledActionIcon\n      hasTooltip={false}\n      size=\"md\"\n      theme=\"neutral\"\n      onClick={goToNextPage}\n      disabled={isDisabled}\n      {...props}\n      label={labels?.nextPageButtonLabel || 'Next page'}\n    >\n      <Icon is={ChevronRight} />\n    </StyledActionIcon>\n  )\n}\n"],"mappings":";;;;;;;AASA,IAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM,CAAC,QAAQ,sBAAsB,EACtC,CAAC;AAEF,IAAa,wBACX,UACG;CACH,MAAM,EAAE,cAAc,QAAQ,sBAAsB,eAAe;CAEnE,MAAM,aAAa,CAAC;AAEpB,QACE,wBAAA,cAAC,kBAAD;EACE,YAAY;EACZ,MAAK;EACL,OAAM;EACN,SAAS;EACT,UAAU;EACV,GAAI;EACJ,OAAO,QAAQ,uBAAuB;EAGrB,EADjB,wBAAA,cAAC,MAAD,EAAM,IAAI,cAAgB,CAAA,CACT"}
+{"version":3,"file":"PaginationNextButton.js","names":[],"sources":["../../../src/components/pagination/PaginationNextButton.tsx"],"sourcesContent":["import { ChevronRight } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n  base: ['ml-1', 'disabled:opacity-30']\n})\n\nexport const PaginationNextButton = (\n  props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n  const { goToNextPage, labels, nextAvailablePage } = usePagination()\n\n  const isDisabled = !nextAvailablePage\n\n  return (\n    <StyledActionIcon\n      hasTooltip={false}\n      size=\"md\"\n      theme=\"neutral\"\n      onClick={goToNextPage}\n      disabled={isDisabled}\n      {...props}\n      label={labels?.nextPageButtonLabel || 'Next page'}\n    >\n      <Icon is={ChevronRight} />\n    </StyledActionIcon>\n  )\n}\n"],"mappings":";;;;;;;;AASA,IAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM,CAAC,QAAQ,sBAAsB,EACtC,CAAC;AAEF,IAAa,wBACX,UACG;CACH,MAAM,EAAE,cAAc,QAAQ,sBAAsB,eAAe;AAInE,QACE,oBAAC,kBAAD;EACE,YAAY;EACZ,MAAK;EACL,OAAM;EACN,SAAS;EACT,UARe,CAAC;EAShB,GAAI;EACJ,OAAO,QAAQ,uBAAuB;YAEtC,oBAAC,MAAD,EAAM,IAAI,cAAgB,CAAA;EACT,CAAA"}

package/dist/components/pagination/PaginationPage.js

@@ -1,6 +1,7 @@
 import { styled } from "../../styled.js";
 import { usePagination } from "./usePagination.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/pagination/PaginationPage.tsx
 var StyledButton = styled("button", {
 	base: [
@@ -84,7 +85,7 @@ var PaginationPage = ({ pageNumber, className, onClick }) => {
 		onClick?.();
 		goToPage(pageNumber);
 	};
-	return /* @__PURE__ */ React$1.createElement(StyledButton, {
+	return /* @__PURE__ */ jsx(StyledButton, {
 		selected: isSelected,
 		size: "md",
 		onClick: () => handleOnClick(pageNumber),
@@ -93,8 +94,9 @@ var PaginationPage = ({ pageNumber, className, onClick }) => {
 		disabled: isDisabled,
 		"aria-current": isSelected && "page",
 		"aria-disabled": isDisabled,
-		onMouseOver: handleOnHover
-	}, pageNumber);
+		onMouseOver: handleOnHover,
+		children: pageNumber
+	});
 };
 //#endregion
 export { PaginationPage };

package/dist/components/pagination/PaginationPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationPage.js","names":[],"sources":["../../../src/components/pagination/PaginationPage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport type { PaginationPageProps } from './types'\nimport { usePagination } from './usePagination'\n\nconst StyledButton = styled('button', {\n  base: [\n    'items-center',\n    'border',\n    'border-transparent',\n    'rounded-sm',\n    'cursor-pointer',\n    'font-body',\n    'justify-center',\n    'whitespace-nowrap',\n    'w-max',\n    'flex',\n    'flex-col',\n    'p-0',\n    'font-normal',\n    'text-text-subtle',\n    'bg-(--base-1)',\n    'relative',\n    'not-disabled:active:bg-(--base-3)',\n    'not-disabled:active:text-(--text-bold)',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:z-1',\n    'not-disabled:hover:bg-(--base-2)',\n    'not-disabled:hover:text-text-regular',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'disabled:pointer-events-none'\n  ],\n  variants: {\n    size: {\n      md: ['size-10']\n    },\n    selected: {\n      true: [\n        'border',\n        'border-(--accent-9)',\n        'font-semibold',\n        'not-disabled:active:border-(--accent-11)',\n        'not-disabled:active:text-(--accent-11)',\n        'not-disabled:hover:border-(--accent-10)',\n        'not-disabled:hover:text-(--accent-10)',\n        'text-(--accent-9)'\n      ]\n    },\n    indicated: {\n      true: [\n        'bg-(--accent-9)',\n        'font-semibold',\n        'not-disabled:active:bg-(--accent-11)',\n        'not-disabled:active:text-white',\n        'not-disabled:hover:bg-(--accent-10)',\n        'not-disabled:hover:text-white',\n        'text-white'\n      ]\n    }\n  },\n  compoundVariants: [\n    {\n      selected: true,\n      indicated: true,\n      class: [\n        'bg-(--accent-9)',\n        'font-semibold',\n        'not-disabled:active:bg-(--accent-11)',\n        'not-disabled:active:text-white',\n        'not-disabled:hover:bg-(--accent-10)',\n        'not-disabled:hover:text-white',\n        'not-focus-visible:border-white!',\n        'shadow-[var(--accent-9)_0px_0px_0px_1px]',\n        'text-white'\n      ]\n    }\n  ]\n})\n\nexport const PaginationPage = ({\n  pageNumber,\n  className,\n  onClick\n}: PaginationPageProps) => {\n  const { currentPage, goToPage, indicatedPages, disabledPages, onItemHover } =\n    usePagination()\n\n  const isIndicated = indicatedPages.includes(pageNumber)\n  const isDisabled = disabledPages.includes(pageNumber)\n\n  const isSelected = currentPage === pageNumber\n\n  const handleOnHover = () => {\n    if (isSelected || isDisabled) return\n    onItemHover?.(pageNumber)\n  }\n\n  const handleOnClick = (pageNumber) => {\n    onClick?.()\n    goToPage(pageNumber)\n  }\n\n  return (\n    <StyledButton\n      selected={isSelected}\n      size=\"md\"\n      onClick={() => handleOnClick(pageNumber)}\n      className={className}\n      indicated={isIndicated}\n      disabled={isDisabled}\n      aria-current={isSelected && 'page'}\n      aria-disabled={isDisabled}\n      onMouseOver={handleOnHover}\n    >\n      {pageNumber}\n    </StyledButton>\n  )\n}\n"],"mappings":";;;;AAOA,IAAM,eAAe,OAAO,UAAU;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM,EACJ,IAAI,CAAC,UAAU,EAChB;EACD,UAAU,EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,EACF;EACD,WAAW,EACT,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACD,EACF;EACF;CACD,kBAAkB,CAChB;EACE,UAAU;EACV,WAAW;EACX,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACF,CACF;CACF,CAAC;AAEF,IAAa,kBAAkB,EAC7B,YACA,WACA,cACyB;CACzB,MAAM,EAAE,aAAa,UAAU,gBAAgB,eAAe,gBAC5D,eAAe;CAEjB,MAAM,cAAc,eAAe,SAAS,WAAW;CACvD,MAAM,aAAa,cAAc,SAAS,WAAW;CAErD,MAAM,aAAa,gBAAgB;CAEnC,MAAM,sBAAsB;AAC1B,MAAI,cAAc,WAAY;AAC9B,gBAAc,WAAW;;CAG3B,MAAM,iBAAiB,eAAe;AACpC,aAAW;AACX,WAAS,WAAW;;AAGtB,QACE,wBAAA,cAAC,cAAD;EACE,UAAU;EACV,MAAK;EACL,eAAe,cAAc,WAAW;EAC7B;EACX,WAAW;EACX,UAAU;EACV,gBAAc,cAAc;EAC5B,iBAAe;EACf,aAAa;EAGA,EADZ,WACY"}
+{"version":3,"file":"PaginationPage.js","names":[],"sources":["../../../src/components/pagination/PaginationPage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport type { PaginationPageProps } from './types'\nimport { usePagination } from './usePagination'\n\nconst StyledButton = styled('button', {\n  base: [\n    'items-center',\n    'border',\n    'border-transparent',\n    'rounded-sm',\n    'cursor-pointer',\n    'font-body',\n    'justify-center',\n    'whitespace-nowrap',\n    'w-max',\n    'flex',\n    'flex-col',\n    'p-0',\n    'font-normal',\n    'text-text-subtle',\n    'bg-(--base-1)',\n    'relative',\n    'not-disabled:active:bg-(--base-3)',\n    'not-disabled:active:text-(--text-bold)',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:z-1',\n    'not-disabled:hover:bg-(--base-2)',\n    'not-disabled:hover:text-text-regular',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'disabled:pointer-events-none'\n  ],\n  variants: {\n    size: {\n      md: ['size-10']\n    },\n    selected: {\n      true: [\n        'border',\n        'border-(--accent-9)',\n        'font-semibold',\n        'not-disabled:active:border-(--accent-11)',\n        'not-disabled:active:text-(--accent-11)',\n        'not-disabled:hover:border-(--accent-10)',\n        'not-disabled:hover:text-(--accent-10)',\n        'text-(--accent-9)'\n      ]\n    },\n    indicated: {\n      true: [\n        'bg-(--accent-9)',\n        'font-semibold',\n        'not-disabled:active:bg-(--accent-11)',\n        'not-disabled:active:text-white',\n        'not-disabled:hover:bg-(--accent-10)',\n        'not-disabled:hover:text-white',\n        'text-white'\n      ]\n    }\n  },\n  compoundVariants: [\n    {\n      selected: true,\n      indicated: true,\n      class: [\n        'bg-(--accent-9)',\n        'font-semibold',\n        'not-disabled:active:bg-(--accent-11)',\n        'not-disabled:active:text-white',\n        'not-disabled:hover:bg-(--accent-10)',\n        'not-disabled:hover:text-white',\n        'not-focus-visible:border-white!',\n        'shadow-[var(--accent-9)_0px_0px_0px_1px]',\n        'text-white'\n      ]\n    }\n  ]\n})\n\nexport const PaginationPage = ({\n  pageNumber,\n  className,\n  onClick\n}: PaginationPageProps) => {\n  const { currentPage, goToPage, indicatedPages, disabledPages, onItemHover } =\n    usePagination()\n\n  const isIndicated = indicatedPages.includes(pageNumber)\n  const isDisabled = disabledPages.includes(pageNumber)\n\n  const isSelected = currentPage === pageNumber\n\n  const handleOnHover = () => {\n    if (isSelected || isDisabled) return\n    onItemHover?.(pageNumber)\n  }\n\n  const handleOnClick = (pageNumber) => {\n    onClick?.()\n    goToPage(pageNumber)\n  }\n\n  return (\n    <StyledButton\n      selected={isSelected}\n      size=\"md\"\n      onClick={() => handleOnClick(pageNumber)}\n      className={className}\n      indicated={isIndicated}\n      disabled={isDisabled}\n      aria-current={isSelected && 'page'}\n      aria-disabled={isDisabled}\n      onMouseOver={handleOnHover}\n    >\n      {pageNumber}\n    </StyledButton>\n  )\n}\n"],"mappings":";;;;;AAOA,IAAM,eAAe,OAAO,UAAU;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM,EACJ,IAAI,CAAC,UAAU,EAChB;EACD,UAAU,EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,EACF;EACD,WAAW,EACT,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACD,EACF;EACF;CACD,kBAAkB,CAChB;EACE,UAAU;EACV,WAAW;EACX,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACF,CACF;CACF,CAAC;AAEF,IAAa,kBAAkB,EAC7B,YACA,WACA,cACyB;CACzB,MAAM,EAAE,aAAa,UAAU,gBAAgB,eAAe,gBAC5D,eAAe;CAEjB,MAAM,cAAc,eAAe,SAAS,WAAW;CACvD,MAAM,aAAa,cAAc,SAAS,WAAW;CAErD,MAAM,aAAa,gBAAgB;CAEnC,MAAM,sBAAsB;AAC1B,MAAI,cAAc,WAAY;AAC9B,gBAAc,WAAW;;CAG3B,MAAM,iBAAiB,eAAe;AACpC,aAAW;AACX,WAAS,WAAW;;AAGtB,QACE,oBAAC,cAAD;EACE,UAAU;EACV,MAAK;EACL,eAAe,cAAc,WAAW;EAC7B;EACX,WAAW;EACX,UAAU;EACV,gBAAc,cAAc;EAC5B,iBAAe;EACf,aAAa;YAEZ;EACY,CAAA"}

package/dist/components/pagination/PaginationPopover.js

@@ -4,33 +4,42 @@ import { usePagination } from "./usePagination.js";
 import { PaginationPage } from "./PaginationPage.js";
 import { Popover } from "../popover/Popover.js";
 import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Ellypsis } from "@atom-learning/icons";
 //#region src/components/pagination/PaginationPopover.tsx
 var PaginationPopover = ({ children }) => {
 	const { pagesCount, labels } = usePagination();
 	const paginationItems = Array.from({ length: pagesCount }, (_, index) => index + 1);
 	const [isOpen, setIsOpen] = React.useState(false);
-	return /* @__PURE__ */ React.createElement(Popover, {
+	return /* @__PURE__ */ jsxs(Popover, {
 		open: isOpen,
 		onOpenChange: setIsOpen,
-		defaultOpen: false
-	}, /* @__PURE__ */ React.createElement(Popover.Trigger, { asChild: true }, children || /* @__PURE__ */ React.createElement(ActionIcon, {
-		hasTooltip: false,
-		size: "md",
-		theme: "neutral",
-		label: labels?.popoverTriggerLabel || "Open pagination popover",
-		"data-testid": "pagination_popover_trigger"
-	}, /* @__PURE__ */ React.createElement(Icon, { is: Ellypsis }))), /* @__PURE__ */ React.createElement(Popover.Content, {
-		size: "md",
-		showCloseButton: false,
-		className: "p-0"
-	}, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap justify-center gap-1 p-4" }, paginationItems?.map((pageNumber) => {
-		return /* @__PURE__ */ React.createElement(PaginationPage, {
-			key: pageNumber,
-			pageNumber,
-			onClick: () => setIsOpen(false)
-		});
-	}))));
+		defaultOpen: false,
+		children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+			asChild: true,
+			children: children || /* @__PURE__ */ jsx(ActionIcon, {
+				hasTooltip: false,
+				size: "md",
+				theme: "neutral",
+				label: labels?.popoverTriggerLabel || "Open pagination popover",
+				"data-testid": "pagination_popover_trigger",
+				children: /* @__PURE__ */ jsx(Icon, { is: Ellypsis })
+			})
+		}), /* @__PURE__ */ jsx(Popover.Content, {
+			size: "md",
+			showCloseButton: false,
+			className: "p-0",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap justify-center gap-1 p-4",
+				children: paginationItems?.map((pageNumber) => {
+					return /* @__PURE__ */ jsx(PaginationPage, {
+						pageNumber,
+						onClick: () => setIsOpen(false)
+					}, pageNumber);
+				})
+			})
+		})]
+	});
 };
 //#endregion
 export { PaginationPopover };

package/dist/components/pagination/PaginationPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationPopover.js","names":[],"sources":["../../../src/components/pagination/PaginationPopover.tsx"],"sourcesContent":["import { Ellypsis } from '@atom-learning/icons'\nimport React from 'react'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Popover } from '../popover/Popover'\nimport { PaginationPage } from './PaginationPage'\nimport { usePagination } from './usePagination'\n\nexport const PaginationPopover = ({\n  children\n}: React.PropsWithChildren<unknown>) => {\n  const { pagesCount, labels } = usePagination()\n  const paginationItems = Array.from(\n    { length: pagesCount },\n    (_, index) => index + 1\n  )\n\n  const [isOpen, setIsOpen] = React.useState<boolean>(false)\n\n  return (\n    <Popover open={isOpen} onOpenChange={setIsOpen} defaultOpen={false}>\n      <Popover.Trigger asChild>\n        {children || (\n          <ActionIcon\n            hasTooltip={false}\n            size=\"md\"\n            theme=\"neutral\"\n            label={labels?.popoverTriggerLabel || 'Open pagination popover'}\n            data-testid=\"pagination_popover_trigger\"\n          >\n            <Icon is={Ellypsis} />\n          </ActionIcon>\n        )}\n      </Popover.Trigger>\n      <Popover.Content size=\"md\" showCloseButton={false} className=\"p-0\">\n        <div className=\"flex flex-wrap justify-center gap-1 p-4\">\n          {paginationItems?.map((pageNumber) => {\n            return (\n              <PaginationPage\n                key={pageNumber}\n                pageNumber={pageNumber}\n                onClick={() => setIsOpen(false)}\n              />\n            )\n          })}\n        </div>\n      </Popover.Content>\n    </Popover>\n  )\n}\n"],"mappings":";;;;;;;;AASA,IAAa,qBAAqB,EAChC,eACsC;CACtC,MAAM,EAAE,YAAY,WAAW,eAAe;CAC9C,MAAM,kBAAkB,MAAM,KAC5B,EAAE,QAAQ,YAAY,GACrB,GAAG,UAAU,QAAQ,EACvB;CAED,MAAM,CAAC,QAAQ,aAAa,MAAM,SAAkB,MAAM;AAE1D,QACE,sBAAA,cAAC,SAAD;EAAS,MAAM;EAAQ,cAAc;EAAW,aAAa;EA2BnD,EA1BR,sBAAA,cAAC,QAAQ,SAAT,EAAiB,SAAA,MAYC,EAXf,YACC,sBAAA,cAAC,YAAD;EACE,YAAY;EACZ,MAAK;EACL,OAAM;EACN,OAAO,QAAQ,uBAAuB;EACtC,eAAY;EAGD,EADX,sBAAA,cAAC,MAAD,EAAM,IAAI,UAAY,CAAA,CACX,CAEC,EAClB,sBAAA,cAAC,QAAQ,SAAT;EAAiB,MAAK;EAAK,iBAAiB;EAAO,WAAU;EAY3C,EAXhB,sBAAA,cAAC,OAAD,EAAK,WAAU,2CAUT,EATH,iBAAiB,KAAK,eAAe;AACpC,SACE,sBAAA,cAAC,gBAAD;GACE,KAAK;GACO;GACZ,eAAe,UAAU,MAAM;GAC/B,CAAA;GAEJ,CACE,CACU,CACV"}
+{"version":3,"file":"PaginationPopover.js","names":[],"sources":["../../../src/components/pagination/PaginationPopover.tsx"],"sourcesContent":["import { Ellypsis } from '@atom-learning/icons'\nimport React from 'react'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Popover } from '../popover/Popover'\nimport { PaginationPage } from './PaginationPage'\nimport { usePagination } from './usePagination'\n\nexport const PaginationPopover = ({\n  children\n}: React.PropsWithChildren<unknown>) => {\n  const { pagesCount, labels } = usePagination()\n  const paginationItems = Array.from(\n    { length: pagesCount },\n    (_, index) => index + 1\n  )\n\n  const [isOpen, setIsOpen] = React.useState<boolean>(false)\n\n  return (\n    <Popover open={isOpen} onOpenChange={setIsOpen} defaultOpen={false}>\n      <Popover.Trigger asChild>\n        {children || (\n          <ActionIcon\n            hasTooltip={false}\n            size=\"md\"\n            theme=\"neutral\"\n            label={labels?.popoverTriggerLabel || 'Open pagination popover'}\n            data-testid=\"pagination_popover_trigger\"\n          >\n            <Icon is={Ellypsis} />\n          </ActionIcon>\n        )}\n      </Popover.Trigger>\n      <Popover.Content size=\"md\" showCloseButton={false} className=\"p-0\">\n        <div className=\"flex flex-wrap justify-center gap-1 p-4\">\n          {paginationItems?.map((pageNumber) => {\n            return (\n              <PaginationPage\n                key={pageNumber}\n                pageNumber={pageNumber}\n                onClick={() => setIsOpen(false)}\n              />\n            )\n          })}\n        </div>\n      </Popover.Content>\n    </Popover>\n  )\n}\n"],"mappings":";;;;;;;;;AASA,IAAa,qBAAqB,EAChC,eACsC;CACtC,MAAM,EAAE,YAAY,WAAW,eAAe;CAC9C,MAAM,kBAAkB,MAAM,KAC5B,EAAE,QAAQ,YAAY,GACrB,GAAG,UAAU,QAAQ,EACvB;CAED,MAAM,CAAC,QAAQ,aAAa,MAAM,SAAkB,MAAM;AAE1D,QACE,qBAAC,SAAD;EAAS,MAAM;EAAQ,cAAc;EAAW,aAAa;YAA7D,CACE,oBAAC,QAAQ,SAAT;GAAiB,SAAA;aACd,YACC,oBAAC,YAAD;IACE,YAAY;IACZ,MAAK;IACL,OAAM;IACN,OAAO,QAAQ,uBAAuB;IACtC,eAAY;cAEZ,oBAAC,MAAD,EAAM,IAAI,UAAY,CAAA;IACX,CAAA;GAEC,CAAA,EAClB,oBAAC,QAAQ,SAAT;GAAiB,MAAK;GAAK,iBAAiB;GAAO,WAAU;aAC3D,oBAAC,OAAD;IAAK,WAAU;cACZ,iBAAiB,KAAK,eAAe;AACpC,YACE,oBAAC,gBAAD;MAEc;MACZ,eAAe,UAAU,MAAM;MAC/B,EAHK,WAGL;MAEJ;IACE,CAAA;GACU,CAAA,CACV"}

package/dist/components/pagination/PaginationPreviousButton.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-declare const StyledActionIcon: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+declare const StyledActionIcon: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLButtonElement> | null | undefined;
 }, "appearance" | "size" | "theme" | "isRounded"> & {
     theme?: ("primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "primary" | "white" | "neutral" | "primaryDark" | "success" | "warning" | "danger">>) | undefined;
     appearance?: ("simple" | "outline" | "solid" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "simple" | "outline" | "solid">>) | undefined;
@@ -11,7 +11,9 @@ declare const StyledActionIcon: React.ForwardRefExoticComponent<Omit<Omit<Omit<O
 }, "children" | "label" | "hasTooltip" | "tooltipSide" | keyof import("../..").NavigatorActions> & {
     children: React.ReactNode;
     label: string;
-} & Omit<import("../..").TOptionalTooltipWrapperProps, "label"> & import("../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, never> & {
+} & Omit<import("../..").TOptionalTooltipWrapperProps, "label"> & import("../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLButtonElement> | null | undefined;
+}, never> & {
     as?: React.ElementType;
 }>;
 export declare const PaginationPreviousButton: (props: Partial<React.ComponentProps<typeof StyledActionIcon>>) => React.JSX.Element;

package/dist/components/pagination/PaginationPreviousButton.js

@@ -2,22 +2,23 @@ import { styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
 import { usePagination } from "./usePagination.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 import { ChevronLeft } from "@atom-learning/icons";
 //#region src/components/pagination/PaginationPreviousButton.tsx
 var StyledActionIcon = styled(ActionIcon, { base: ["mr-1", "disabled:opacity-30"] });
 var PaginationPreviousButton = (props) => {
 	const { goToPreviousPage, labels, previousAvailablePage } = usePagination();
-	const isDisabled = !previousAvailablePage;
-	return /* @__PURE__ */ React$1.createElement(StyledActionIcon, {
+	return /* @__PURE__ */ jsx(StyledActionIcon, {
 		hasTooltip: false,
 		size: "md",
 		theme: "neutral",
 		onClick: goToPreviousPage,
-		disabled: isDisabled,
+		disabled: !previousAvailablePage,
 		...props,
-		label: labels?.previousPageButtonLabel || "Previous page"
-	}, /* @__PURE__ */ React$1.createElement(Icon, { is: ChevronLeft }));
+		label: labels?.previousPageButtonLabel || "Previous page",
+		children: /* @__PURE__ */ jsx(Icon, { is: ChevronLeft })
+	});
 };
 //#endregion
 export { PaginationPreviousButton };

package/dist/components/pagination/PaginationPreviousButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationPreviousButton.js","names":[],"sources":["../../../src/components/pagination/PaginationPreviousButton.tsx"],"sourcesContent":["import { ChevronLeft } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n  base: ['mr-1', 'disabled:opacity-30']\n})\n\nexport const PaginationPreviousButton = (\n  props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n  const { goToPreviousPage, labels, previousAvailablePage } = usePagination()\n\n  const isDisabled = !previousAvailablePage\n\n  return (\n    <StyledActionIcon\n      hasTooltip={false}\n      size=\"md\"\n      theme=\"neutral\"\n      onClick={goToPreviousPage}\n      disabled={isDisabled}\n      {...props}\n      label={labels?.previousPageButtonLabel || 'Previous page'}\n    >\n      <Icon is={ChevronLeft} />\n    </StyledActionIcon>\n  )\n}\n"],"mappings":";;;;;;;AASA,IAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM,CAAC,QAAQ,sBAAsB,EACtC,CAAC;AAEF,IAAa,4BACX,UACG;CACH,MAAM,EAAE,kBAAkB,QAAQ,0BAA0B,eAAe;CAE3E,MAAM,aAAa,CAAC;AAEpB,QACE,wBAAA,cAAC,kBAAD;EACE,YAAY;EACZ,MAAK;EACL,OAAM;EACN,SAAS;EACT,UAAU;EACV,GAAI;EACJ,OAAO,QAAQ,2BAA2B;EAGzB,EADjB,wBAAA,cAAC,MAAD,EAAM,IAAI,aAAe,CAAA,CACR"}
+{"version":3,"file":"PaginationPreviousButton.js","names":[],"sources":["../../../src/components/pagination/PaginationPreviousButton.tsx"],"sourcesContent":["import { ChevronLeft } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n  base: ['mr-1', 'disabled:opacity-30']\n})\n\nexport const PaginationPreviousButton = (\n  props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n  const { goToPreviousPage, labels, previousAvailablePage } = usePagination()\n\n  const isDisabled = !previousAvailablePage\n\n  return (\n    <StyledActionIcon\n      hasTooltip={false}\n      size=\"md\"\n      theme=\"neutral\"\n      onClick={goToPreviousPage}\n      disabled={isDisabled}\n      {...props}\n      label={labels?.previousPageButtonLabel || 'Previous page'}\n    >\n      <Icon is={ChevronLeft} />\n    </StyledActionIcon>\n  )\n}\n"],"mappings":";;;;;;;;AASA,IAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM,CAAC,QAAQ,sBAAsB,EACtC,CAAC;AAEF,IAAa,4BACX,UACG;CACH,MAAM,EAAE,kBAAkB,QAAQ,0BAA0B,eAAe;AAI3E,QACE,oBAAC,kBAAD;EACE,YAAY;EACZ,MAAK;EACL,OAAM;EACN,SAAS;EACT,UARe,CAAC;EAShB,GAAI;EACJ,OAAO,QAAQ,2BAA2B;YAE1C,oBAAC,MAAD,EAAM,IAAI,aAAe,CAAA;EACR,CAAA"}

package/dist/components/pagination/pagination-context/PaginationContext.js

@@ -1,6 +1,7 @@
 import { VisibleElementsAmount } from "../pagination.constants.js";
 import { findNextAvailablePage, findPreviousAvailablePage, getPaginationElementsToRender } from "../pagination.helper.js";
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/pagination/pagination-context/PaginationContext.tsx
 var PaginationContext = React$1.createContext({
 	goToPage: () => null,
@@ -59,7 +60,10 @@ var PaginationProvider = ({ onSelectedPageChange, selectedPage, visibleElementsC
 		nextAvailablePage,
 		labels
 	]);
-	return /* @__PURE__ */ React$1.createElement(PaginationContext.Provider, { value }, children);
+	return /* @__PURE__ */ jsx(PaginationContext.Provider, {
+		value,
+		children
+	});
 };
 //#endregion
 export { PaginationContext, PaginationProvider };

package/dist/components/pagination/pagination-context/PaginationContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationContext.js","names":[],"sources":["../../../../src/components/pagination/pagination-context/PaginationContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { VisibleElementsAmount } from '../pagination.constants'\nimport {\n  findNextAvailablePage,\n  findPreviousAvailablePage,\n  getPaginationElementsToRender\n} from '../pagination.helper'\nimport type { PaginationContextValue, PaginationProviderProps } from '../types'\n\nexport const PaginationContext = React.createContext<PaginationContextValue>({\n  goToPage: () => null,\n  goToPreviousPage: () => null,\n  goToNextPage: () => null,\n  currentPage: 1,\n  pagesCount: 0,\n  onItemHover: () => null,\n  paginationItems: [],\n  labels: {},\n  indicatedPages: [],\n  disabledPages: []\n})\n\nexport const PaginationProvider = ({\n  onSelectedPageChange,\n  selectedPage,\n  visibleElementsCount = VisibleElementsAmount.LESS,\n  pagesCount,\n  indicatedPages = [],\n  disabledPages = [],\n  onItemHover = () => null,\n  labels = {},\n  children\n}: React.PropsWithChildren<PaginationProviderProps>) => {\n  const [internalCurrentPage, setInternalCurrentPage] = React.useState(1)\n\n  const currentPage = selectedPage || internalCurrentPage\n\n  const goToPage = React.useCallback(\n    (pageNumber: number) => {\n      setInternalCurrentPage(pageNumber)\n      onSelectedPageChange?.(pageNumber)\n    },\n    [onSelectedPageChange]\n  )\n\n  const previousPage = currentPage - 1\n  const previousAvailablePage = findPreviousAvailablePage(\n    previousPage,\n    disabledPages\n  )\n\n  const goToPreviousPage = React.useCallback(() => {\n    if (previousAvailablePage) goToPage(previousAvailablePage)\n  }, [goToPage, previousAvailablePage])\n\n  const nextPage = currentPage + 1\n  const nextAvailablePage = findNextAvailablePage(\n    nextPage,\n    disabledPages,\n    pagesCount\n  )\n  const goToNextPage = React.useCallback(() => {\n    if (nextAvailablePage) goToPage(nextAvailablePage)\n  }, [goToPage, nextAvailablePage])\n\n  const paginationItems = getPaginationElementsToRender(\n    currentPage,\n    pagesCount,\n    visibleElementsCount\n  )\n\n  const value = React.useMemo(() => {\n    return {\n      goToNextPage,\n      goToPreviousPage,\n      goToPage,\n      currentPage,\n      paginationItems,\n      indicatedPages,\n      disabledPages,\n      pagesCount,\n      onItemHover,\n      previousAvailablePage,\n      nextAvailablePage,\n      labels\n    }\n  }, [\n    goToNextPage,\n    goToPreviousPage,\n    goToPage,\n    currentPage,\n    indicatedPages,\n    paginationItems,\n    disabledPages,\n    pagesCount,\n    onItemHover,\n    previousAvailablePage,\n    nextAvailablePage,\n    labels\n  ])\n\n  return (\n    <PaginationContext.Provider value={value}>\n      {children}\n    </PaginationContext.Provider>\n  )\n}\n"],"mappings":";;;;AAUA,IAAa,oBAAoB,QAAM,cAAsC;CAC3E,gBAAgB;CAChB,wBAAwB;CACxB,oBAAoB;CACpB,aAAa;CACb,YAAY;CACZ,mBAAmB;CACnB,iBAAiB,EAAE;CACnB,QAAQ,EAAE;CACV,gBAAgB,EAAE;CAClB,eAAe,EAAE;CAClB,CAAC;AAEF,IAAa,sBAAsB,EACjC,sBACA,cACA,uBAAuB,sBAAsB,MAC7C,YACA,iBAAiB,EAAE,EACnB,gBAAgB,EAAE,EAClB,oBAAoB,MACpB,SAAS,EAAE,EACX,eACsD;CACtD,MAAM,CAAC,qBAAqB,0BAA0B,QAAM,SAAS,EAAE;CAEvE,MAAM,cAAc,gBAAgB;CAEpC,MAAM,WAAW,QAAM,aACpB,eAAuB;AACtB,yBAAuB,WAAW;AAClC,yBAAuB,WAAW;IAEpC,CAAC,qBAAqB,CACvB;CAGD,MAAM,wBAAwB,0BADT,cAAc,GAGjC,cACD;CAED,MAAM,mBAAmB,QAAM,kBAAkB;AAC/C,MAAI,sBAAuB,UAAS,sBAAsB;IACzD,CAAC,UAAU,sBAAsB,CAAC;CAGrC,MAAM,oBAAoB,sBADT,cAAc,GAG7B,eACA,WACD;CACD,MAAM,eAAe,QAAM,kBAAkB;AAC3C,MAAI,kBAAmB,UAAS,kBAAkB;IACjD,CAAC,UAAU,kBAAkB,CAAC;CAEjC,MAAM,kBAAkB,8BACtB,aACA,YACA,qBACD;CAED,MAAM,QAAQ,QAAM,cAAc;AAChC,SAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;IACA;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,wBAAA,cAAC,kBAAkB,UAAnB,EAAmC,OAEN,EAD1B,SAC0B"}
+{"version":3,"file":"PaginationContext.js","names":[],"sources":["../../../../src/components/pagination/pagination-context/PaginationContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { VisibleElementsAmount } from '../pagination.constants'\nimport {\n  findNextAvailablePage,\n  findPreviousAvailablePage,\n  getPaginationElementsToRender\n} from '../pagination.helper'\nimport type { PaginationContextValue, PaginationProviderProps } from '../types'\n\nexport const PaginationContext = React.createContext<PaginationContextValue>({\n  goToPage: () => null,\n  goToPreviousPage: () => null,\n  goToNextPage: () => null,\n  currentPage: 1,\n  pagesCount: 0,\n  onItemHover: () => null,\n  paginationItems: [],\n  labels: {},\n  indicatedPages: [],\n  disabledPages: []\n})\n\nexport const PaginationProvider = ({\n  onSelectedPageChange,\n  selectedPage,\n  visibleElementsCount = VisibleElementsAmount.LESS,\n  pagesCount,\n  indicatedPages = [],\n  disabledPages = [],\n  onItemHover = () => null,\n  labels = {},\n  children\n}: React.PropsWithChildren<PaginationProviderProps>) => {\n  const [internalCurrentPage, setInternalCurrentPage] = React.useState(1)\n\n  const currentPage = selectedPage || internalCurrentPage\n\n  const goToPage = React.useCallback(\n    (pageNumber: number) => {\n      setInternalCurrentPage(pageNumber)\n      onSelectedPageChange?.(pageNumber)\n    },\n    [onSelectedPageChange]\n  )\n\n  const previousPage = currentPage - 1\n  const previousAvailablePage = findPreviousAvailablePage(\n    previousPage,\n    disabledPages\n  )\n\n  const goToPreviousPage = React.useCallback(() => {\n    if (previousAvailablePage) goToPage(previousAvailablePage)\n  }, [goToPage, previousAvailablePage])\n\n  const nextPage = currentPage + 1\n  const nextAvailablePage = findNextAvailablePage(\n    nextPage,\n    disabledPages,\n    pagesCount\n  )\n  const goToNextPage = React.useCallback(() => {\n    if (nextAvailablePage) goToPage(nextAvailablePage)\n  }, [goToPage, nextAvailablePage])\n\n  const paginationItems = getPaginationElementsToRender(\n    currentPage,\n    pagesCount,\n    visibleElementsCount\n  )\n\n  const value = React.useMemo(() => {\n    return {\n      goToNextPage,\n      goToPreviousPage,\n      goToPage,\n      currentPage,\n      paginationItems,\n      indicatedPages,\n      disabledPages,\n      pagesCount,\n      onItemHover,\n      previousAvailablePage,\n      nextAvailablePage,\n      labels\n    }\n  }, [\n    goToNextPage,\n    goToPreviousPage,\n    goToPage,\n    currentPage,\n    indicatedPages,\n    paginationItems,\n    disabledPages,\n    pagesCount,\n    onItemHover,\n    previousAvailablePage,\n    nextAvailablePage,\n    labels\n  ])\n\n  return (\n    <PaginationContext.Provider value={value}>\n      {children}\n    </PaginationContext.Provider>\n  )\n}\n"],"mappings":";;;;;AAUA,IAAa,oBAAoB,QAAM,cAAsC;CAC3E,gBAAgB;CAChB,wBAAwB;CACxB,oBAAoB;CACpB,aAAa;CACb,YAAY;CACZ,mBAAmB;CACnB,iBAAiB,EAAE;CACnB,QAAQ,EAAE;CACV,gBAAgB,EAAE;CAClB,eAAe,EAAE;CAClB,CAAC;AAEF,IAAa,sBAAsB,EACjC,sBACA,cACA,uBAAuB,sBAAsB,MAC7C,YACA,iBAAiB,EAAE,EACnB,gBAAgB,EAAE,EAClB,oBAAoB,MACpB,SAAS,EAAE,EACX,eACsD;CACtD,MAAM,CAAC,qBAAqB,0BAA0B,QAAM,SAAS,EAAE;CAEvE,MAAM,cAAc,gBAAgB;CAEpC,MAAM,WAAW,QAAM,aACpB,eAAuB;AACtB,yBAAuB,WAAW;AAClC,yBAAuB,WAAW;IAEpC,CAAC,qBAAqB,CACvB;CAGD,MAAM,wBAAwB,0BADT,cAAc,GAGjC,cACD;CAED,MAAM,mBAAmB,QAAM,kBAAkB;AAC/C,MAAI,sBAAuB,UAAS,sBAAsB;IACzD,CAAC,UAAU,sBAAsB,CAAC;CAGrC,MAAM,oBAAoB,sBADT,cAAc,GAG7B,eACA,WACD;CACD,MAAM,eAAe,QAAM,kBAAkB;AAC3C,MAAI,kBAAmB,UAAS,kBAAkB;IACjD,CAAC,UAAU,kBAAkB,CAAC;CAEjC,MAAM,kBAAkB,8BACtB,aACA,YACA,qBACD;CAED,MAAM,QAAQ,QAAM,cAAc;AAChC,SAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;IACA;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,kBAAkB,UAAnB;EAAmC;EAChC;EAC0B,CAAA"}

package/dist/components/password-field/PasswordField.js

@@ -3,7 +3,8 @@ import { useFieldError } from "../form/useFieldError.js";
 import { FieldWrapper } from "../field-wrapper/FieldWrapper.js";
 import { useFormCustomContext } from "../form/useFormCustomContext.js";
 import { PasswordInput } from "../password-input/PasswordInput.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 import { useFormContext } from "react-hook-form";
 //#region src/components/password-field/PasswordField.tsx
 var PasswordField = ({ className, hideLabel, label = "Password", name, prompt = void 0, description, validation, appearance, theme, ...remainingProps }) => {
@@ -13,7 +14,7 @@ var PasswordField = ({ className, hideLabel, label = "Password", name, prompt =
 	const ref = validation ? register(validation) : register;
 	const formAppearance = context?.appearance || appearance;
 	const formTheme = context?.theme ?? theme;
-	return /* @__PURE__ */ React$1.createElement(FieldWrapper, {
+	return /* @__PURE__ */ jsx(FieldWrapper, {
 		description,
 		error,
 		fieldId: name,
@@ -22,17 +23,18 @@ var PasswordField = ({ className, hideLabel, label = "Password", name, prompt =
 		prompt,
 		required: Boolean(validation?.required),
 		appearance: formAppearance,
-		className: cn("relative", className)
-	}, /* @__PURE__ */ React$1.createElement(PasswordInput, {
-		autoComplete: "current-password",
-		name,
-		id: name,
-		ref,
-		appearance: formAppearance,
-		theme: formTheme,
-		...error !== void 0 && { state: "error" },
-		...remainingProps
-	}));
+		className: cn("relative", className),
+		children: /* @__PURE__ */ jsx(PasswordInput, {
+			autoComplete: "current-password",
+			name,
+			id: name,
+			ref,
+			appearance: formAppearance,
+			theme: formTheme,
+			...error !== void 0 && { state: "error" },
+			...remainingProps
+		})
+	});
 };
 PasswordField.displayName = "PasswordField";
 //#endregion

package/dist/components/password-field/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.js","names":[],"sources":["../../../src/components/password-field/PasswordField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { PasswordInput } from '~/components/password-input/PasswordInput'\nimport { cn } from '~/styled'\n\ntype PasswordFieldProps = React.ComponentProps<typeof PasswordInput> &\n  Omit<FieldElementWrapperProps, 'label'> & {\n    label?: string\n  }\n\nexport const PasswordField = ({\n  className,\n  hideLabel,\n  label = 'Password',\n  name,\n  prompt = undefined,\n  description,\n  validation,\n  appearance,\n  theme,\n  ...remainingProps\n}: PasswordFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\n\n  return (\n    <FieldWrapper\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n      className={cn('relative', className)}\n    >\n      <PasswordInput\n        autoComplete=\"current-password\"\n        name={name}\n        id={name}\n        ref={ref}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...(error !== undefined && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nPasswordField.displayName = 'PasswordField'\n"],"mappings":";;;;;;;;AAiBA,IAAa,iBAAiB,EAC5B,WACA,WACA,QAAQ,YACR,MACA,SAAS,KAAA,GACT,aACA,YACA,YACA,OACA,GAAG,qBACqB;CACxB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CAErC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAChD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;AAEpC,QACE,wBAAA,cAAC,cAAD;EACe;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EACZ,WAAW,GAAG,YAAY,UAAU;EAYvB,EAVb,wBAAA,cAAC,eAAD;EACE,cAAa;EACP;EACN,IAAI;EACC;EACL,YAAY;EACZ,OAAO;EACP,GAAK,UAAU,KAAA,KAAa,EAAE,OAAO,SAAS;EAC9C,GAAI;EACJ,CAAA,CACW;;AAInB,cAAc,cAAc"}
+{"version":3,"file":"PasswordField.js","names":[],"sources":["../../../src/components/password-field/PasswordField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { PasswordInput } from '~/components/password-input/PasswordInput'\nimport { cn } from '~/styled'\n\ntype PasswordFieldProps = React.ComponentProps<typeof PasswordInput> &\n  Omit<FieldElementWrapperProps, 'label'> & {\n    label?: string\n  }\n\nexport const PasswordField = ({\n  className,\n  hideLabel,\n  label = 'Password',\n  name,\n  prompt = undefined,\n  description,\n  validation,\n  appearance,\n  theme,\n  ...remainingProps\n}: PasswordFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\n\n  return (\n    <FieldWrapper\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n      className={cn('relative', className)}\n    >\n      <PasswordInput\n        autoComplete=\"current-password\"\n        name={name}\n        id={name}\n        ref={ref}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...(error !== undefined && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nPasswordField.displayName = 'PasswordField'\n"],"mappings":";;;;;;;;;AAiBA,IAAa,iBAAiB,EAC5B,WACA,WACA,QAAQ,YACR,MACA,SAAS,KAAA,GACT,aACA,YACA,YACA,OACA,GAAG,qBACqB;CACxB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CAErC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAChD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;AAEpC,QACE,oBAAC,cAAD;EACe;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EACZ,WAAW,GAAG,YAAY,UAAU;YAEpC,oBAAC,eAAD;GACE,cAAa;GACP;GACN,IAAI;GACC;GACL,YAAY;GACZ,OAAO;GACP,GAAK,UAAU,KAAA,KAAa,EAAE,OAAO,SAAS;GAC9C,GAAI;GACJ,CAAA;EACW,CAAA;;AAInB,cAAc,cAAc"}