@atom-learning/components 7.0.0 → 8.0.1

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,7 +1,5 @@
 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;
-}, "appearance" | "size" | "theme" | "isRounded"> & {
+declare const StyledActionIcon: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "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;
     size?: ("sm" | "md" | "lg" | "xs" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs">>) | undefined;

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,7 +1,5 @@
 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;
-}, "appearance" | "size" | "theme" | "isRounded"> & {
+declare const StyledActionIcon: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "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;
     size?: ("sm" | "md" | "lg" | "xs" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs">>) | undefined;

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"}

package/dist/components/password-input/PasswordInput.js

@@ -5,27 +5,32 @@ import { Input } from "../input/Input.js";
 import { getFieldIconSize } from "../../utilities/style/get-icon-size.js";
 import * as React$1 from "react";
 import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Eye, EyeCrossed } from "@atom-learning/icons";
 //#region src/components/password-input/PasswordInput.tsx
 var PasswordInput = React$1.forwardRef(({ className, hidePasswordText = "Hide password", showPasswordText = "Show password", size = "md", ...restProps }, ref) => {
 	const [isPasswordVisible, setIsPasswordVisible] = useState(false);
 	const togglePasswordVisibility = () => setIsPasswordVisible((currentState) => !currentState);
 	const iconSize = React$1.useMemo(() => getFieldIconSize(size), [size]);
-	return /* @__PURE__ */ React$1.createElement("div", { className: cn("relative", className) }, /* @__PURE__ */ React$1.createElement(Input, {
-		...restProps,
-		size,
-		type: isPasswordVisible ? "text" : "password",
-		ref,
-		className: "pr-6"
-	}), /* @__PURE__ */ React$1.createElement(ActionIcon, {
-		appearance: "simple",
-		theme: "neutral",
-		label: isPasswordVisible ? hidePasswordText : showPasswordText,
-		onClick: togglePasswordVisibility,
-		onMouseDown: (e) => e.preventDefault(),
-		size: iconSize,
-		className: cn(size === "lg" ? "bottom-1" : "bottom-0", "absolute", "right-0")
-	}, /* @__PURE__ */ React$1.createElement(Icon, { is: isPasswordVisible ? Eye : EyeCrossed })));
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative", className),
+		children: [/* @__PURE__ */ jsx(Input, {
+			...restProps,
+			size,
+			type: isPasswordVisible ? "text" : "password",
+			ref,
+			className: "pr-6"
+		}), /* @__PURE__ */ jsx(ActionIcon, {
+			appearance: "simple",
+			theme: "neutral",
+			label: isPasswordVisible ? hidePasswordText : showPasswordText,
+			onClick: togglePasswordVisibility,
+			onMouseDown: (e) => e.preventDefault(),
+			size: iconSize,
+			className: cn(size === "lg" ? "bottom-1" : "bottom-0", "absolute", "right-0"),
+			children: /* @__PURE__ */ jsx(Icon, { is: isPasswordVisible ? Eye : EyeCrossed })
+		})]
+	});
 });
 PasswordInput.displayName = "PasswordInput";
 //#endregion

package/dist/components/password-input/PasswordInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.js","names":[],"sources":["../../../src/components/password-input/PasswordInput.tsx"],"sourcesContent":["import { Eye, EyeCrossed } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useState } from 'react'\n\nimport { ActionIcon } from '~/components/action-icon/ActionIcon'\nimport { Icon } from '~/components/icon/Icon'\nimport type { InputProps } from '~/components/input/Input'\nimport { Input } from '~/components/input/Input'\nimport { cn } from '~/styled'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\ntype PasswordInputProps = Omit<InputProps, 'type'> & {\n  hidePasswordText?: string\n  showPasswordText?: string\n}\n\nexport const PasswordInput = React.forwardRef<\n  HTMLInputElement,\n  PasswordInputProps\n>(\n  (\n    {\n      className,\n      hidePasswordText = 'Hide password',\n      showPasswordText = 'Show password',\n      size = 'md',\n      ...restProps\n    },\n    ref\n  ) => {\n    const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false)\n    const togglePasswordVisibility = () =>\n      setIsPasswordVisible((currentState) => !currentState)\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    return (\n      <div className={cn('relative', className)}>\n        <Input\n          {...restProps}\n          size={size}\n          type={isPasswordVisible ? 'text' : 'password'}\n          ref={ref}\n          className=\"pr-6\"\n        />\n        <ActionIcon\n          appearance=\"simple\"\n          theme=\"neutral\"\n          label={isPasswordVisible ? hidePasswordText : showPasswordText}\n          onClick={togglePasswordVisibility}\n          onMouseDown={(e) => e.preventDefault()} // prevent focus being lost from password input\n          size={iconSize}\n          className={cn(\n            size === 'lg' ? 'bottom-1' : 'bottom-0',\n            'absolute',\n            'right-0'\n          )}\n        >\n          <Icon is={isPasswordVisible ? Eye : EyeCrossed} />\n        </ActionIcon>\n      </div>\n    )\n  }\n)\n\nPasswordInput.displayName = 'PasswordInput'\n"],"mappings":";;;;;;;;;AAgBA,IAAa,gBAAgB,QAAM,YAK/B,EACE,WACA,mBAAmB,iBACnB,mBAAmB,iBACnB,OAAO,MACP,GAAG,aAEL,QACG;CACH,MAAM,CAAC,mBAAmB,wBAAwB,SAAkB,MAAM;CAC1E,MAAM,iCACJ,sBAAsB,iBAAiB,CAAC,aAAa;CAEvD,MAAM,WAAW,QAAM,cAAc,iBAAiB,KAAK,EAAE,CAAC,KAAK,CAAC;AAEpE,QACE,wBAAA,cAAC,OAAD,EAAK,WAAW,GAAG,YAAY,UAAU,EAuBnC,EAtBJ,wBAAA,cAAC,OAAD;EACE,GAAI;EACE;EACN,MAAM,oBAAoB,SAAS;EAC9B;EACL,WAAU;EACV,CAAA,EACF,wBAAA,cAAC,YAAD;EACE,YAAW;EACX,OAAM;EACN,OAAO,oBAAoB,mBAAmB;EAC9C,SAAS;EACT,cAAc,MAAM,EAAE,gBAAgB;EACtC,MAAM;EACN,WAAW,GACT,SAAS,OAAO,aAAa,YAC7B,YACA,UACD;EAGU,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,oBAAoB,MAAM,YAAc,CAAA,CACvC,CACT;EAGX;AAED,cAAc,cAAc"}
+{"version":3,"file":"PasswordInput.js","names":[],"sources":["../../../src/components/password-input/PasswordInput.tsx"],"sourcesContent":["import { Eye, EyeCrossed } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useState } from 'react'\n\nimport { ActionIcon } from '~/components/action-icon/ActionIcon'\nimport { Icon } from '~/components/icon/Icon'\nimport type { InputProps } from '~/components/input/Input'\nimport { Input } from '~/components/input/Input'\nimport { cn } from '~/styled'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\ntype PasswordInputProps = Omit<InputProps, 'type'> & {\n  hidePasswordText?: string\n  showPasswordText?: string\n}\n\nexport const PasswordInput = React.forwardRef<\n  HTMLInputElement,\n  PasswordInputProps\n>(\n  (\n    {\n      className,\n      hidePasswordText = 'Hide password',\n      showPasswordText = 'Show password',\n      size = 'md',\n      ...restProps\n    },\n    ref\n  ) => {\n    const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false)\n    const togglePasswordVisibility = () =>\n      setIsPasswordVisible((currentState) => !currentState)\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    return (\n      <div className={cn('relative', className)}>\n        <Input\n          {...restProps}\n          size={size}\n          type={isPasswordVisible ? 'text' : 'password'}\n          ref={ref}\n          className=\"pr-6\"\n        />\n        <ActionIcon\n          appearance=\"simple\"\n          theme=\"neutral\"\n          label={isPasswordVisible ? hidePasswordText : showPasswordText}\n          onClick={togglePasswordVisibility}\n          onMouseDown={(e) => e.preventDefault()} // prevent focus being lost from password input\n          size={iconSize}\n          className={cn(\n            size === 'lg' ? 'bottom-1' : 'bottom-0',\n            'absolute',\n            'right-0'\n          )}\n        >\n          <Icon is={isPasswordVisible ? Eye : EyeCrossed} />\n        </ActionIcon>\n      </div>\n    )\n  }\n)\n\nPasswordInput.displayName = 'PasswordInput'\n"],"mappings":";;;;;;;;;;AAgBA,IAAa,gBAAgB,QAAM,YAK/B,EACE,WACA,mBAAmB,iBACnB,mBAAmB,iBACnB,OAAO,MACP,GAAG,aAEL,QACG;CACH,MAAM,CAAC,mBAAmB,wBAAwB,SAAkB,MAAM;CAC1E,MAAM,iCACJ,sBAAsB,iBAAiB,CAAC,aAAa;CAEvD,MAAM,WAAW,QAAM,cAAc,iBAAiB,KAAK,EAAE,CAAC,KAAK,CAAC;AAEpE,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,YAAY,UAAU;YAAzC,CACE,oBAAC,OAAD;GACE,GAAI;GACE;GACN,MAAM,oBAAoB,SAAS;GAC9B;GACL,WAAU;GACV,CAAA,EACF,oBAAC,YAAD;GACE,YAAW;GACX,OAAM;GACN,OAAO,oBAAoB,mBAAmB;GAC9C,SAAS;GACT,cAAc,MAAM,EAAE,gBAAgB;GACtC,MAAM;GACN,WAAW,GACT,SAAS,OAAO,aAAa,YAC7B,YACA,UACD;aAED,oBAAC,MAAD,EAAM,IAAI,oBAAoB,MAAM,YAAc,CAAA;GACvC,CAAA,CACT;;EAGX;AAED,cAAc,cAAc"}

package/dist/components/popover/PopoverContent.js

@@ -1,7 +1,8 @@
 import { styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
-import * as React$1 from "react";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Close } from "@atom-learning/icons";
 import { Arrow, Close as Close$1, Content } from "@radix-ui/react-popover";
 //#region src/components/popover/PopoverContent.tsx
@@ -37,22 +38,28 @@ var StyledArrow = styled(Arrow, { base: [
 	"z-1",
 	"in-data-[align=end]:mx-6"
 ] });
-var PopoverContent = ({ children, side = "top", sideOffset = 8, closePopoverText = "Close popover", showCloseButton = true, size = "md", ...remainingProps }) => /* @__PURE__ */ React$1.createElement(StyledContent, {
+var PopoverContent = ({ children, side = "top", sideOffset = 8, closePopoverText = "Close popover", showCloseButton = true, size = "md", ...remainingProps }) => /* @__PURE__ */ jsxs(StyledContent, {
 	size,
 	side,
 	sideOffset,
-	...remainingProps
-}, showCloseButton && /* @__PURE__ */ React$1.createElement(ActionIcon, {
-	as: Close$1,
-	label: closePopoverText,
-	size: "md",
-	hasTooltip: false,
-	theme: "neutral",
-	className: "absolute top-0.5 right-0.5"
-}, /* @__PURE__ */ React$1.createElement(Icon, { is: Close })), children, /* @__PURE__ */ React$1.createElement(StyledArrow, {
-	width: 16,
-	height: 8
-}));
+	...remainingProps,
+	children: [
+		showCloseButton && /* @__PURE__ */ jsx(ActionIcon, {
+			as: Close$1,
+			label: closePopoverText,
+			size: "md",
+			hasTooltip: false,
+			theme: "neutral",
+			className: "absolute top-0.5 right-0.5",
+			children: /* @__PURE__ */ jsx(Icon, { is: Close })
+		}),
+		children,
+		/* @__PURE__ */ jsx(StyledArrow, {
+			width: 16,
+			height: 8
+		})
+	]
+});
 //#endregion
 export { PopoverContent };
 

package/dist/components/popover/PopoverContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverContent.js","names":[],"sources":["../../../src/components/popover/PopoverContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Arrow, Close, Content } from '@radix-ui/react-popover'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nconst StyledContent = styled(Content, {\n  base: [\n    'bg-white',\n    'rounded-md',\n    'shadow-lg',\n    'max-w-[90vw]',\n    'p-6',\n    'pr-10',\n    'relative',\n    'z-10',\n    'will-change-transform',\n    'will-change-opacity',\n    'animation-duration-75',\n    '[--slide-opacity-out:0]',\n    'data-[side=top]:[--slide-direction-out-y:-4px]',\n    'data-[side=right]:[--slide-direction-out-x:4px]',\n    'data-[side=bottom]:[--slide-direction-out-y:4px]',\n    'data-[side=left]:[--slide-direction-out-x:-4px]',\n    'motion-safe:data-[state=open]:animate-slide-direction-in',\n    'motion-safe:data-[state=closed]:animate-slide-direction-out'\n  ],\n  variants: {\n    size: {\n      sm: ['max-w-50'],\n      md: ['max-w-100'],\n      lg: ['max-w-150']\n    }\n  }\n})\n\nconst StyledArrow = styled(Arrow, {\n  base: ['fill-white', 'z-1', 'in-data-[align=end]:mx-6']\n})\n\ntype PopoverContentProps = React.ComponentProps<typeof StyledContent> &\n  React.ComponentProps<typeof Content> & {\n    closePopoverText?: string\n    showCloseButton?: boolean\n  }\n\nexport const PopoverContent = ({\n  children,\n  side = 'top',\n  sideOffset = 8,\n  closePopoverText = 'Close popover',\n  showCloseButton = true,\n  size = 'md',\n  ...remainingProps\n}: PopoverContentProps) => (\n  <StyledContent\n    size={size}\n    side={side}\n    sideOffset={sideOffset}\n    {...remainingProps}\n  >\n    {showCloseButton && (\n      <ActionIcon\n        as={Close}\n        label={closePopoverText}\n        size=\"md\"\n        hasTooltip={false}\n        theme=\"neutral\"\n        className=\"absolute top-0.5 right-0.5\"\n      >\n        <Icon is={CloseIcon} />\n      </ActionIcon>\n    )}\n    {children}\n    <StyledArrow width={16} height={8} />\n  </StyledContent>\n)\n"],"mappings":";;;;;;;AASA,IAAM,gBAAgB,OAAO,SAAS;CACpC,MAAM;EACJ;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,WAAW;EAChB,IAAI,CAAC,YAAY;EACjB,IAAI,CAAC,YAAY;EAClB,EACF;CACF,CAAC;AAEF,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CAAC;CAAc;CAAO;CAA2B,EACxD,CAAC;AAQF,IAAa,kBAAkB,EAC7B,UACA,OAAO,OACP,aAAa,GACb,mBAAmB,iBACnB,kBAAkB,MAClB,OAAO,MACP,GAAG,qBAEH,wBAAA,cAAC,eAAD;CACQ;CACA;CACM;CACZ,GAAI;CAgBU,EAdb,mBACC,wBAAA,cAAC,YAAD;CACE,IAAI;CACJ,OAAO;CACP,MAAK;CACL,YAAY;CACZ,OAAM;CACN,WAAU;CAGC,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,OAAa,CAAA,CACZ,EAEd,UACD,wBAAA,cAAC,aAAD;CAAa,OAAO;CAAI,QAAQ;CAAK,CAAA,CACvB"}
+{"version":3,"file":"PopoverContent.js","names":[],"sources":["../../../src/components/popover/PopoverContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Arrow, Close, Content } from '@radix-ui/react-popover'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nconst StyledContent = styled(Content, {\n  base: [\n    'bg-white',\n    'rounded-md',\n    'shadow-lg',\n    'max-w-[90vw]',\n    'p-6',\n    'pr-10',\n    'relative',\n    'z-10',\n    'will-change-transform',\n    'will-change-opacity',\n    'animation-duration-75',\n    '[--slide-opacity-out:0]',\n    'data-[side=top]:[--slide-direction-out-y:-4px]',\n    'data-[side=right]:[--slide-direction-out-x:4px]',\n    'data-[side=bottom]:[--slide-direction-out-y:4px]',\n    'data-[side=left]:[--slide-direction-out-x:-4px]',\n    'motion-safe:data-[state=open]:animate-slide-direction-in',\n    'motion-safe:data-[state=closed]:animate-slide-direction-out'\n  ],\n  variants: {\n    size: {\n      sm: ['max-w-50'],\n      md: ['max-w-100'],\n      lg: ['max-w-150']\n    }\n  }\n})\n\nconst StyledArrow = styled(Arrow, {\n  base: ['fill-white', 'z-1', 'in-data-[align=end]:mx-6']\n})\n\ntype PopoverContentProps = React.ComponentProps<typeof StyledContent> &\n  React.ComponentProps<typeof Content> & {\n    closePopoverText?: string\n    showCloseButton?: boolean\n  }\n\nexport const PopoverContent = ({\n  children,\n  side = 'top',\n  sideOffset = 8,\n  closePopoverText = 'Close popover',\n  showCloseButton = true,\n  size = 'md',\n  ...remainingProps\n}: PopoverContentProps) => (\n  <StyledContent\n    size={size}\n    side={side}\n    sideOffset={sideOffset}\n    {...remainingProps}\n  >\n    {showCloseButton && (\n      <ActionIcon\n        as={Close}\n        label={closePopoverText}\n        size=\"md\"\n        hasTooltip={false}\n        theme=\"neutral\"\n        className=\"absolute top-0.5 right-0.5\"\n      >\n        <Icon is={CloseIcon} />\n      </ActionIcon>\n    )}\n    {children}\n    <StyledArrow width={16} height={8} />\n  </StyledContent>\n)\n"],"mappings":";;;;;;;;AASA,IAAM,gBAAgB,OAAO,SAAS;CACpC,MAAM;EACJ;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,WAAW;EAChB,IAAI,CAAC,YAAY;EACjB,IAAI,CAAC,YAAY;EAClB,EACF;CACF,CAAC;AAEF,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CAAC;CAAc;CAAO;CAA2B,EACxD,CAAC;AAQF,IAAa,kBAAkB,EAC7B,UACA,OAAO,OACP,aAAa,GACb,mBAAmB,iBACnB,kBAAkB,MAClB,OAAO,MACP,GAAG,qBAEH,qBAAC,eAAD;CACQ;CACA;CACM;CACZ,GAAI;WAJN;EAMG,mBACC,oBAAC,YAAD;GACE,IAAI;GACJ,OAAO;GACP,MAAK;GACL,YAAY;GACZ,OAAM;GACN,WAAU;aAEV,oBAAC,MAAD,EAAM,IAAI,OAAa,CAAA;GACZ,CAAA;EAEd;EACD,oBAAC,aAAD;GAAa,OAAO;GAAI,QAAQ;GAAK,CAAA;EACvB"}