@atom-learning/components 8.0.2 → 9.0.0-beta.0

package/dist/components/pagination/Pagination.js

@@ -1,7 +1,7 @@
 import { cn } from "../../styled.js";
 import { ColorScheme } from "../../experiments/color-scheme/ColorScheme.js";
 import { VisibleElementsAmount } from "./pagination.constants.js";
-import { PaginationProvider } from "./pagination-context/PaginationContext.js";
+import { PaginationProvider } from "./Pagination.context.js";
 import { PaginationPopover } from "./PaginationPopover.js";
 import { PaginationItems } from "./PaginationItems.js";
 import "react";
@@ -31,7 +31,7 @@ var PaginationComponent = ({ colorScheme, onSelectedPageChange, selectedPage, vi
 		})
 	});
 };
-var Pagination = Object.assign(PaginationComponent, { Popover: PaginationPopover });
+var Pagination = /* @__PURE__ */ Object.assign(PaginationComponent, { Popover: PaginationPopover });
 PaginationComponent.displayName = "Pagination";
 //#endregion
 export { 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;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"}
+{"version":3,"file":"Pagination.js","names":[],"sources":["../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ColorScheme } from '../../experiments/color-scheme/ColorScheme'\nimport { cn } from '../../styled'\nimport { VisibleElementsAmount } from './pagination.constants'\nimport { PaginationProvider } from './Pagination.context'\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 = /* @__PURE__ */ Object.assign(PaginationComponent, {\n  Popover: PaginationPopover\n})\n\nPaginationComponent.displayName = 'Pagination'\n"],"mappings":";;;;;;;;;AAUA,IAAM,uBAAuB,EAC3B,aACA,sBACA,cACA,uBAAuB,sBAAsB,MAC7C,YACA,iBAAiB,CAAC,GAClB,gBAAgB,CAAC,GACjB,oBAAoB,MACpB,SAAS,CAAC,GACV,UACA,WACA,GAAG,WACkB;CACrB,IAAI,CAAC,YAAY,OAAO;CAaxB,OACE,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,SAAS;cACpD,YAAY,oBAAC,iBAAD,CAAkB,CAAA;GAC5B,CAAA;EACM,CAAA;CACK,CAAA;AAExB;AAEA,IAAa,aAA6B,uBAAO,OAAO,qBAAqB,EAC3E,SAAS,kBACX,CAAC;AAED,oBAAoB,cAAc"}

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 = (): 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"}
+{"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 = () => {\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,wBAAwB;CACnC,MAAM,EAAE,oBAAoB,cAAc;CAE1C,OACE,oBAAA,UAAA,EAAA,UACG,gBAAgB,KAAK,gBAAgB,MAAM;EAC1C,QAAQ,gBAAR;GACE,KAAK,kBACH,OAAO,oBAAC,mBAAD,CAA6C,GAArB,iBAAiB,CAAI;GACtD,KAAK,qBACH,OAAO,oBAAC,0BAAD,CAAgD,GAAjB,cAAiB;GACzD,KAAK,iBACH,OAAO,oBAAC,sBAAD,CAA4C,GAAjB,cAAiB;GACrD,SACE,OACE,oBAAC,gBAAD,EAEE,YAAY,eACb,GAFM,cAEN;EAEP;CACF,CAAC,EACD,CAAA;AAEN"}

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

@@ -1,16 +1,15 @@
 import * as React from 'react';
-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;
-    isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+declare const StyledActionIcon: import("../..").PolymorphicComponent<({ ref, children, theme, appearance, size, label, href, disabled, hasTooltip, tooltipSide, ...rest }: Omit<{
+    theme?: ("danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white">>) | undefined;
+    appearance?: ("outline" | "simple" | "solid" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "outline" | "simple" | "solid">>) | undefined;
+    size?: ("lg" | "md" | "sm" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xs">>) | undefined;
+    isRounded?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
 } & {
+    as?: never;
+} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "isRounded" | "size" | "theme">, "as" | "children" | "hasTooltip" | "label" | "tooltipSide" | keyof import("../..").NavigatorActions> & {
     as?: React.ElementType;
-}, "children" | "label" | "hasTooltip" | "tooltipSide" | keyof import("../..").NavigatorActions> & {
     children: React.ReactNode;
     label: string;
-} & Omit<import("../..").TOptionalTooltipWrapperProps, "label"> & import("../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, never> & {
-    as?: React.ElementType;
-}>;
+} & Omit<import("../..").OptionalTooltipWrapperProps, "label"> & import("../..").NavigatorActions) => React.JSX.Element, unknown>;
 export declare const PaginationNextButton: (props: Partial<React.ComponentProps<typeof StyledActionIcon>>) => React.JSX.Element;
 export {};

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;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"}
+{"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'\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":";;;;;;;;AAQA,IAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM,CAAC,QAAQ,qBAAqB,EACtC,CAAC;AAED,IAAa,wBACX,UACG;CACH,MAAM,EAAE,cAAc,QAAQ,sBAAsB,cAAc;CAIlE,OACE,oBAAC,kBAAD;EACE,YAAY;EACZ,MAAK;EACL,OAAM;EACN,SAAS;EACT,UAAU,CARM;EAShB,GAAI;EACJ,OAAO,QAAQ,uBAAuB;YAEtC,oBAAC,MAAD,EAAM,IAAI,aAAe,CAAA;CACT,CAAA;AAEtB"}

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,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"}
+{"version":3,"file":"PaginationPage.js","names":[],"sources":["../../../src/components/pagination/PaginationPage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\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":";;;;;AAMA,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;CACF;CACA,UAAU;EACR,MAAM,EACJ,IAAI,CAAC,SAAS,EAChB;EACA,UAAU,EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,EACF;EACA,WAAW,EACT,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;EACF,EACF;CACF;CACA,kBAAkB,CAChB;EACE,UAAU;EACV,WAAW;EACX,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;CACF,CACF;AACF,CAAC;AAED,IAAa,kBAAkB,EAC7B,YACA,WACA,cACyB;CACzB,MAAM,EAAE,aAAa,UAAU,gBAAgB,eAAe,gBAC5D,cAAc;CAEhB,MAAM,cAAc,eAAe,SAAS,UAAU;CACtD,MAAM,aAAa,cAAc,SAAS,UAAU;CAEpD,MAAM,aAAa,gBAAgB;CAEnC,MAAM,sBAAsB;EAC1B,IAAI,cAAc,YAAY;EAC9B,cAAc,UAAU;CAC1B;CAEA,MAAM,iBAAiB,eAAe;EACpC,UAAU;EACV,SAAS,UAAU;CACrB;CAEA,OACE,oBAAC,cAAD;EACE,UAAU;EACV,MAAK;EACL,eAAe,cAAc,UAAU;EAC5B;EACX,WAAW;EACX,UAAU;EACV,gBAAc,cAAc;EAC5B,iBAAe;EACf,aAAa;YAEZ;CACW,CAAA;AAElB"}

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

@@ -1,2 +1,2 @@
-import React from 'react';
+import * as React from 'react';
 export declare const PaginationPopover: ({ children }: React.PropsWithChildren<unknown>) => React.JSX.Element;

package/dist/components/pagination/PaginationPopover.js

@@ -3,14 +3,14 @@ import { ActionIcon } from "../action-icon/ActionIcon.js";
 import { usePagination } from "./usePagination.js";
 import { PaginationPage } from "./PaginationPage.js";
 import { Popover } from "../popover/Popover.js";
-import React from "react";
+import * as React$1 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);
+	const [isOpen, setIsOpen] = React$1.useState(false);
 	return /* @__PURE__ */ jsxs(Popover, {
 		open: isOpen,
 		onOpenChange: setIsOpen,

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,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"}
+{"version":3,"file":"PaginationPopover.js","names":[],"sources":["../../../src/components/pagination/PaginationPopover.tsx"],"sourcesContent":["import { Ellypsis } from '@atom-learning/icons'\nimport * as 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,cAAc;CAC7C,MAAM,kBAAkB,MAAM,KAC5B,EAAE,QAAQ,WAAW,IACpB,GAAG,UAAU,QAAQ,CACxB;CAEA,MAAM,CAAC,QAAQ,aAAa,QAAM,SAAkB,KAAK;CAEzD,OACE,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,SAAW,CAAA;GACX,CAAA;EAEC,CAAA,GACjB,oBAAC,QAAQ,SAAT;GAAiB,MAAK;GAAK,iBAAiB;GAAO,WAAU;aAC3D,oBAAC,OAAD;IAAK,WAAU;cACZ,iBAAiB,KAAK,eAAe;KACpC,OACE,oBAAC,gBAAD;MAEc;MACZ,eAAe,UAAU,KAAK;KAC/B,GAHM,UAGN;IAEL,CAAC;GACE,CAAA;EACU,CAAA,CACV;;AAEb"}

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

@@ -1,16 +1,15 @@
 import * as React from 'react';
-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;
-    isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+declare const StyledActionIcon: import("../..").PolymorphicComponent<({ ref, children, theme, appearance, size, label, href, disabled, hasTooltip, tooltipSide, ...rest }: Omit<{
+    theme?: ("danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white">>) | undefined;
+    appearance?: ("outline" | "simple" | "solid" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "outline" | "simple" | "solid">>) | undefined;
+    size?: ("lg" | "md" | "sm" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xs">>) | undefined;
+    isRounded?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
 } & {
+    as?: never;
+} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "isRounded" | "size" | "theme">, "as" | "children" | "hasTooltip" | "label" | "tooltipSide" | keyof import("../..").NavigatorActions> & {
     as?: React.ElementType;
-}, "children" | "label" | "hasTooltip" | "tooltipSide" | keyof import("../..").NavigatorActions> & {
     children: React.ReactNode;
     label: string;
-} & Omit<import("../..").TOptionalTooltipWrapperProps, "label"> & import("../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, never> & {
-    as?: React.ElementType;
-}>;
+} & Omit<import("../..").OptionalTooltipWrapperProps, "label"> & import("../..").NavigatorActions) => React.JSX.Element, unknown>;
 export declare const PaginationPreviousButton: (props: Partial<React.ComponentProps<typeof StyledActionIcon>>) => React.JSX.Element;
 export {};

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;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"}
+{"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'\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":";;;;;;;;AAQA,IAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM,CAAC,QAAQ,qBAAqB,EACtC,CAAC;AAED,IAAa,4BACX,UACG;CACH,MAAM,EAAE,kBAAkB,QAAQ,0BAA0B,cAAc;CAI1E,OACE,oBAAC,kBAAD;EACE,YAAY;EACZ,MAAK;EACL,OAAM;EACN,SAAS;EACT,UAAU,CARM;EAShB,GAAI;EACJ,OAAO,QAAQ,2BAA2B;YAE1C,oBAAC,MAAD,EAAM,IAAI,YAAc,CAAA;CACR,CAAA;AAEtB"}

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.constants.js","names":[],"sources":["../../../src/components/pagination/pagination.constants.ts"],"sourcesContent":["export enum VisibleElementsAmount {\n  LESS = 6,\n  MORE = 8\n}\n\nexport const VIEW_ALL_POPOVER = 'VIEW_ALL_POPOVER'\nexport const GO_TO_PREVIOUS_PAGE = 'GO_TO_PREVIOUS_PAGE'\nexport const GO_TO_NEXT_PAGE = 'GO_TO_NEXT_PAGE'\n"],"mappings":";AAAA,IAAY,wBAAL,yBAAA,uBAAA;AACL,uBAAA,sBAAA,UAAA,KAAA;AACA,uBAAA,sBAAA,UAAA,KAAA;;KACD;AAED,IAAa,mBAAmB;AAChC,IAAa,sBAAsB;AACnC,IAAa,kBAAkB"}
+{"version":3,"file":"pagination.constants.js","names":[],"sources":["../../../src/components/pagination/pagination.constants.ts"],"sourcesContent":["export enum VisibleElementsAmount {\n  LESS = 6,\n  MORE = 8\n}\n\nexport const VIEW_ALL_POPOVER = 'VIEW_ALL_POPOVER'\nexport const GO_TO_PREVIOUS_PAGE = 'GO_TO_PREVIOUS_PAGE'\nexport const GO_TO_NEXT_PAGE = 'GO_TO_NEXT_PAGE'\n"],"mappings":";AAAA,IAAY,wBAAL,yBAAA,uBAAA;CACL,sBAAA,sBAAA,UAAA,KAAA;CACA,sBAAA,sBAAA,UAAA,KAAA;;AACF,EAAA,CAAA,CAAA;AAEA,IAAa,mBAAmB;AAChC,IAAa,sBAAsB;AACnC,IAAa,kBAAkB"}

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

@@ -1,4 +1,4 @@
-import { PaginationItemsToRender } from './types';
+import type { PaginationItemsToRender } from './types';
 export declare const getPaginationElementsToRender: (currentPage: number, pagesCount: number, visibleElementsCount: number) => PaginationItemsToRender;
 export declare const findNextAvailablePage: (startPage: number, disabledPages: number[], pagesCount: number) => number | undefined;
 export declare const findPreviousAvailablePage: (startPage: number, disabledPages: number[]) => number | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.helper.js","names":[],"sources":["../../../src/components/pagination/pagination.helper.ts"],"sourcesContent":["import {\n  GO_TO_NEXT_PAGE,\n  GO_TO_PREVIOUS_PAGE,\n  VIEW_ALL_POPOVER\n} from './pagination.constants'\nimport { PaginationItemsToRender } from './types'\n\nexport const getPaginationElementsToRender = (\n  currentPage: number,\n  pagesCount: number,\n  visibleElementsCount: number\n): PaginationItemsToRender => {\n  const paginationPages = Array.from(\n    { length: pagesCount },\n    (_, index) => index + 1\n  )\n\n  /*\n   * As we always show the `<` `>` arrows,\n   * subtract 2 from `visibleElementsCount` (one for each of the GO_TO_PREVIOUS/NEXT_PAGE arrows)\n   * to get the `visiblePagesCount`\n   */\n  let visiblePagesCount = visibleElementsCount - 2\n  const withPreviousNextPageArrows = (paginationPages) => [\n    GO_TO_PREVIOUS_PAGE,\n    ...paginationPages,\n    GO_TO_NEXT_PAGE\n  ]\n\n  /**\n   * If fewer pages than threshold for truncating render them all.\n   *\n   * pagesCount: 6\n   * visibleElementsCount: >=6\n   * returns [GO_TO_PREVIOUS_PAGE, 1, 2, 3, 4, GO_TO_NEXT_PAGE]\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *  | < |  | 1 |  | 2 |  | 3 |  | 4 |  | > |\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *\n   */\n  if (pagesCount <= visiblePagesCount) {\n    return withPreviousNextPageArrows(paginationPages)\n  }\n\n  /**\n   * If current page is either at the very start or at the very end of the pages\n   */\n  const canFitEdgePage = visibleElementsCount >= 5\n  const canFitViewAllPopover = visibleElementsCount >= 4\n  const canFitPages = visibleElementsCount >= 3\n\n  if (canFitViewAllPopover) {\n    // Subtract one from visiblePagesCount to accomodate for us adding the `[…]` VIEW_ALL_POPOVER\n    visiblePagesCount -= 1\n  }\n\n  if (canFitEdgePage) {\n    // Subtract one more from visiblePagesCount to accomodate for us adding the GO_TO_PREVIOUS/NEXT_PAGE arrows\n    visiblePagesCount -= 1\n  }\n\n  const firstPage = paginationPages[0]\n  const lastPage = paginationPages[paginationPages.length - 1]\n\n  /**\n   * If we're truncating and current page is at the start of the page list,\n   * render the initial truncated page list, e.g.\n   *\n   *  pagesCount: 8\n   *  currentPage: 1/2\n   *  visibleElementsCount: 6\n   *  returns [GO_TO_PREVIOUS_PAGE, 1, 2, VIEW_ALL_POPOVER, 6, GO_TO_NEXT_PAGE]\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *  | < |  | 1 |  | 2 |  | … |  | 8 |  | > |\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *\n   */\n  if (currentPage < visiblePagesCount) {\n    const newPaginationItems = [] as PaginationItemsToRender\n    if (canFitPages) {\n      newPaginationItems.push(...paginationPages.slice(0, visiblePagesCount))\n    }\n    if (canFitViewAllPopover) {\n      newPaginationItems.push(VIEW_ALL_POPOVER)\n    }\n    if (canFitEdgePage) {\n      newPaginationItems.push(lastPage)\n    }\n    return withPreviousNextPageArrows(newPaginationItems)\n  }\n\n  /**\n   * If we're truncating and the current page is towards the end of the\n   * page list (depending on visibleElementsCount),\n   * render a truncated page list from the end, e.g.\n   *\n   *  pagesCount: 8\n   *  currentPage: 7/8\n   *  visibleElementsCount: 6\n   *  returns [GO_TO_PREVIOUS_PAGE, 1, VIEW_ALL_POPOVER, 7, 8, GO_TO_NEXT_PAGE]\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *  | < |  | 1 |  | … |  | 7 |  | 8 |  | > |\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *\n   */\n  if (currentPage > pagesCount - visiblePagesCount) {\n    const newPaginationItems = [] as PaginationItemsToRender\n    if (canFitEdgePage) {\n      newPaginationItems.push(firstPage)\n    }\n    if (canFitViewAllPopover) {\n      newPaginationItems.push(VIEW_ALL_POPOVER)\n    }\n    if (canFitPages) {\n      newPaginationItems.push(\n        ...paginationPages.slice(pagesCount - visiblePagesCount, pagesCount)\n      )\n    }\n    return withPreviousNextPageArrows(newPaginationItems)\n  }\n\n  /**\n   * If we're truncating and the current page doesn't meet any of the previous conditions\n   * (we're in the middle)\n   * render a truncated page list from a specific index relative to `currentPage`, e.g.\n   *\n   *  currentPage: 4\n   *  visibleElementsCount: 6 // VisibleElementsAmount.LESS\n   *  returns [GO_TO_PREVIOUS_PAGE, 3, 4, VIEW_ALL_POPOVER, 6, GO_TO_NEXT_PAGE]\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *  | < |  | 3 |  | 4 |  | … |  | 6 |  | > |\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *\n   *  currentPage: 6\n   *  visibleElementsCount: 8 // VisibleElementsAmount.MORE\n   *  returns [GO_TO_PREVIOUS_PAGE, 4, 5, 6, 7, VIEW_ALL_POPOVER, 10, GO_TO_NEXT_PAGE]\n   *  +---+  +---+  +---+  +---+  +---+  +---+  +---+  +---+\n   *  | < |  | 4 |  | 5 |  | 6 |  | 7 |  | … |  | 10 | | > |\n   *  +---+  +---+  +---+  +---+  +---+  +---+  +---+  +---+\n   */\n  const canFitCurrentPage = canFitPages\n  const canFitCurrentPageAndPreviousPage = visibleElementsCount >= 6\n  const canFitCurrentPageAndPreviousPageAndNextPage = visibleElementsCount >= 7\n  const canFitLastPage = canFitEdgePage\n\n  const newPaginationItems = [] as PaginationItemsToRender\n  if (canFitCurrentPageAndPreviousPageAndNextPage) {\n    newPaginationItems.push(\n      ...paginationPages.slice(\n        currentPage + 1 - visiblePagesCount,\n        currentPage + 1\n      )\n    )\n  } else if (canFitCurrentPageAndPreviousPage) {\n    newPaginationItems.push(\n      ...paginationPages.slice(currentPage - visiblePagesCount, currentPage)\n    )\n  } else if (canFitCurrentPage) {\n    newPaginationItems.push(\n      ...paginationPages.slice(currentPage - 1, currentPage - 1 + 1)\n    )\n  }\n  if (canFitViewAllPopover) {\n    newPaginationItems.push(VIEW_ALL_POPOVER)\n  }\n  if (canFitLastPage) {\n    newPaginationItems.push(lastPage)\n  }\n  return withPreviousNextPageArrows(newPaginationItems)\n}\n\nexport const findNextAvailablePage = (\n  startPage: number,\n  disabledPages: number[],\n  pagesCount: number\n): number | undefined => {\n  if (startPage > pagesCount) return\n  let nextPage = startPage\n  while (disabledPages.includes(nextPage)) {\n    nextPage++\n  }\n  return nextPage\n}\n\nexport const findPreviousAvailablePage = (\n  startPage: number,\n  disabledPages: number[]\n): number | undefined => {\n  if (startPage < 1) return\n  let previousPage = startPage\n  while (disabledPages.includes(previousPage)) {\n    previousPage--\n  }\n  return previousPage\n}\n"],"mappings":";;AAOA,IAAa,iCACX,aACA,YACA,yBAC4B;CAC5B,MAAM,kBAAkB,MAAM,KAC5B,EAAE,QAAQ,YAAY,GACrB,GAAG,UAAU,QAAQ,EACvB;CAOD,IAAI,oBAAoB,uBAAuB;CAC/C,MAAM,8BAA8B,oBAAoB;EACtD;EACA,GAAG;EACH;EACD;;;;;;;;;;;;AAaD,KAAI,cAAc,kBAChB,QAAO,2BAA2B,gBAAgB;;;;CAMpD,MAAM,iBAAiB,wBAAwB;CAC/C,MAAM,uBAAuB,wBAAwB;CACrD,MAAM,cAAc,wBAAwB;AAE5C,KAAI,qBAEF,sBAAqB;AAGvB,KAAI,eAEF,sBAAqB;CAGvB,MAAM,YAAY,gBAAgB;CAClC,MAAM,WAAW,gBAAgB,gBAAgB,SAAS;;;;;;;;;;;;;;AAe1D,KAAI,cAAc,mBAAmB;EACnC,MAAM,qBAAqB,EAAE;AAC7B,MAAI,YACF,oBAAmB,KAAK,GAAG,gBAAgB,MAAM,GAAG,kBAAkB,CAAC;AAEzE,MAAI,qBACF,oBAAmB,KAAK,iBAAiB;AAE3C,MAAI,eACF,oBAAmB,KAAK,SAAS;AAEnC,SAAO,2BAA2B,mBAAmB;;;;;;;;;;;;;;;;AAiBvD,KAAI,cAAc,aAAa,mBAAmB;EAChD,MAAM,qBAAqB,EAAE;AAC7B,MAAI,eACF,oBAAmB,KAAK,UAAU;AAEpC,MAAI,qBACF,oBAAmB,KAAK,iBAAiB;AAE3C,MAAI,YACF,oBAAmB,KACjB,GAAG,gBAAgB,MAAM,aAAa,mBAAmB,WAAW,CACrE;AAEH,SAAO,2BAA2B,mBAAmB;;;;;;;;;;;;;;;;;;;;;CAsBvD,MAAM,oBAAoB;CAC1B,MAAM,mCAAmC,wBAAwB;CACjE,MAAM,8CAA8C,wBAAwB;CAC5E,MAAM,iBAAiB;CAEvB,MAAM,qBAAqB,EAAE;AAC7B,KAAI,4CACF,oBAAmB,KACjB,GAAG,gBAAgB,MACjB,cAAc,IAAI,mBAClB,cAAc,EACf,CACF;UACQ,iCACT,oBAAmB,KACjB,GAAG,gBAAgB,MAAM,cAAc,mBAAmB,YAAY,CACvE;UACQ,kBACT,oBAAmB,KACjB,GAAG,gBAAgB,MAAM,cAAc,GAAG,cAAc,IAAI,EAAE,CAC/D;AAEH,KAAI,qBACF,oBAAmB,KAAK,iBAAiB;AAE3C,KAAI,eACF,oBAAmB,KAAK,SAAS;AAEnC,QAAO,2BAA2B,mBAAmB;;AAGvD,IAAa,yBACX,WACA,eACA,eACuB;AACvB,KAAI,YAAY,WAAY;CAC5B,IAAI,WAAW;AACf,QAAO,cAAc,SAAS,SAAS,CACrC;AAEF,QAAO;;AAGT,IAAa,6BACX,WACA,kBACuB;AACvB,KAAI,YAAY,EAAG;CACnB,IAAI,eAAe;AACnB,QAAO,cAAc,SAAS,aAAa,CACzC;AAEF,QAAO"}
+{"version":3,"file":"pagination.helper.js","names":[],"sources":["../../../src/components/pagination/pagination.helper.ts"],"sourcesContent":["import {\n  GO_TO_NEXT_PAGE,\n  GO_TO_PREVIOUS_PAGE,\n  VIEW_ALL_POPOVER\n} from './pagination.constants'\nimport type { PaginationItemsToRender } from './types'\n\nexport const getPaginationElementsToRender = (\n  currentPage: number,\n  pagesCount: number,\n  visibleElementsCount: number\n): PaginationItemsToRender => {\n  const paginationPages = Array.from(\n    { length: pagesCount },\n    (_, index) => index + 1\n  )\n\n  /*\n   * As we always show the `<` `>` arrows,\n   * subtract 2 from `visibleElementsCount` (one for each of the GO_TO_PREVIOUS/NEXT_PAGE arrows)\n   * to get the `visiblePagesCount`\n   */\n  let visiblePagesCount = visibleElementsCount - 2\n  const withPreviousNextPageArrows = (paginationPages) => [\n    GO_TO_PREVIOUS_PAGE,\n    ...paginationPages,\n    GO_TO_NEXT_PAGE\n  ]\n\n  /**\n   * If fewer pages than threshold for truncating render them all.\n   *\n   * pagesCount: 6\n   * visibleElementsCount: >=6\n   * returns [GO_TO_PREVIOUS_PAGE, 1, 2, 3, 4, GO_TO_NEXT_PAGE]\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *  | < |  | 1 |  | 2 |  | 3 |  | 4 |  | > |\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *\n   */\n  if (pagesCount <= visiblePagesCount) {\n    return withPreviousNextPageArrows(paginationPages)\n  }\n\n  /**\n   * If current page is either at the very start or at the very end of the pages\n   */\n  const canFitEdgePage = visibleElementsCount >= 5\n  const canFitViewAllPopover = visibleElementsCount >= 4\n  const canFitPages = visibleElementsCount >= 3\n\n  if (canFitViewAllPopover) {\n    // Subtract one from visiblePagesCount to accomodate for us adding the `[…]` VIEW_ALL_POPOVER\n    visiblePagesCount -= 1\n  }\n\n  if (canFitEdgePage) {\n    // Subtract one more from visiblePagesCount to accomodate for us adding the GO_TO_PREVIOUS/NEXT_PAGE arrows\n    visiblePagesCount -= 1\n  }\n\n  const firstPage = paginationPages[0]\n  const lastPage = paginationPages[paginationPages.length - 1]\n\n  /**\n   * If we're truncating and current page is at the start of the page list,\n   * render the initial truncated page list, e.g.\n   *\n   *  pagesCount: 8\n   *  currentPage: 1/2\n   *  visibleElementsCount: 6\n   *  returns [GO_TO_PREVIOUS_PAGE, 1, 2, VIEW_ALL_POPOVER, 6, GO_TO_NEXT_PAGE]\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *  | < |  | 1 |  | 2 |  | … |  | 8 |  | > |\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *\n   */\n  if (currentPage < visiblePagesCount) {\n    const newPaginationItems = [] as PaginationItemsToRender\n    if (canFitPages) {\n      newPaginationItems.push(...paginationPages.slice(0, visiblePagesCount))\n    }\n    if (canFitViewAllPopover) {\n      newPaginationItems.push(VIEW_ALL_POPOVER)\n    }\n    if (canFitEdgePage) {\n      newPaginationItems.push(lastPage)\n    }\n    return withPreviousNextPageArrows(newPaginationItems)\n  }\n\n  /**\n   * If we're truncating and the current page is towards the end of the\n   * page list (depending on visibleElementsCount),\n   * render a truncated page list from the end, e.g.\n   *\n   *  pagesCount: 8\n   *  currentPage: 7/8\n   *  visibleElementsCount: 6\n   *  returns [GO_TO_PREVIOUS_PAGE, 1, VIEW_ALL_POPOVER, 7, 8, GO_TO_NEXT_PAGE]\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *  | < |  | 1 |  | … |  | 7 |  | 8 |  | > |\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *\n   */\n  if (currentPage > pagesCount - visiblePagesCount) {\n    const newPaginationItems = [] as PaginationItemsToRender\n    if (canFitEdgePage) {\n      newPaginationItems.push(firstPage)\n    }\n    if (canFitViewAllPopover) {\n      newPaginationItems.push(VIEW_ALL_POPOVER)\n    }\n    if (canFitPages) {\n      newPaginationItems.push(\n        ...paginationPages.slice(pagesCount - visiblePagesCount, pagesCount)\n      )\n    }\n    return withPreviousNextPageArrows(newPaginationItems)\n  }\n\n  /**\n   * If we're truncating and the current page doesn't meet any of the previous conditions\n   * (we're in the middle)\n   * render a truncated page list from a specific index relative to `currentPage`, e.g.\n   *\n   *  currentPage: 4\n   *  visibleElementsCount: 6 // VisibleElementsAmount.LESS\n   *  returns [GO_TO_PREVIOUS_PAGE, 3, 4, VIEW_ALL_POPOVER, 6, GO_TO_NEXT_PAGE]\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *  | < |  | 3 |  | 4 |  | … |  | 6 |  | > |\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *\n   *  currentPage: 6\n   *  visibleElementsCount: 8 // VisibleElementsAmount.MORE\n   *  returns [GO_TO_PREVIOUS_PAGE, 4, 5, 6, 7, VIEW_ALL_POPOVER, 10, GO_TO_NEXT_PAGE]\n   *  +---+  +---+  +---+  +---+  +---+  +---+  +---+  +---+\n   *  | < |  | 4 |  | 5 |  | 6 |  | 7 |  | … |  | 10 | | > |\n   *  +---+  +---+  +---+  +---+  +---+  +---+  +---+  +---+\n   */\n  const canFitCurrentPage = canFitPages\n  const canFitCurrentPageAndPreviousPage = visibleElementsCount >= 6\n  const canFitCurrentPageAndPreviousPageAndNextPage = visibleElementsCount >= 7\n  const canFitLastPage = canFitEdgePage\n\n  const newPaginationItems = [] as PaginationItemsToRender\n  if (canFitCurrentPageAndPreviousPageAndNextPage) {\n    newPaginationItems.push(\n      ...paginationPages.slice(\n        currentPage + 1 - visiblePagesCount,\n        currentPage + 1\n      )\n    )\n  } else if (canFitCurrentPageAndPreviousPage) {\n    newPaginationItems.push(\n      ...paginationPages.slice(currentPage - visiblePagesCount, currentPage)\n    )\n  } else if (canFitCurrentPage) {\n    newPaginationItems.push(\n      ...paginationPages.slice(currentPage - 1, currentPage - 1 + 1)\n    )\n  }\n  if (canFitViewAllPopover) {\n    newPaginationItems.push(VIEW_ALL_POPOVER)\n  }\n  if (canFitLastPage) {\n    newPaginationItems.push(lastPage)\n  }\n  return withPreviousNextPageArrows(newPaginationItems)\n}\n\nexport const findNextAvailablePage = (\n  startPage: number,\n  disabledPages: number[],\n  pagesCount: number\n): number | undefined => {\n  if (startPage > pagesCount) return\n  let nextPage = startPage\n  while (disabledPages.includes(nextPage)) {\n    nextPage++\n  }\n  return nextPage\n}\n\nexport const findPreviousAvailablePage = (\n  startPage: number,\n  disabledPages: number[]\n): number | undefined => {\n  if (startPage < 1) return\n  let previousPage = startPage\n  while (disabledPages.includes(previousPage)) {\n    previousPage--\n  }\n  return previousPage\n}\n"],"mappings":";;AAOA,IAAa,iCACX,aACA,YACA,yBAC4B;CAC5B,MAAM,kBAAkB,MAAM,KAC5B,EAAE,QAAQ,WAAW,IACpB,GAAG,UAAU,QAAQ,CACxB;CAOA,IAAI,oBAAoB,uBAAuB;CAC/C,MAAM,8BAA8B,oBAAoB;EACtD;EACA,GAAG;EACH;CACF;;;;;;;;;;;;CAaA,IAAI,cAAc,mBAChB,OAAO,2BAA2B,eAAe;;;;CAMnD,MAAM,iBAAiB,wBAAwB;CAC/C,MAAM,uBAAuB,wBAAwB;CACrD,MAAM,cAAc,wBAAwB;CAE5C,IAAI,sBAEF,qBAAqB;CAGvB,IAAI,gBAEF,qBAAqB;CAGvB,MAAM,YAAY,gBAAgB;CAClC,MAAM,WAAW,gBAAgB,gBAAgB,SAAS;;;;;;;;;;;;;;CAe1D,IAAI,cAAc,mBAAmB;EACnC,MAAM,qBAAqB,CAAC;EAC5B,IAAI,aACF,mBAAmB,KAAK,GAAG,gBAAgB,MAAM,GAAG,iBAAiB,CAAC;EAExE,IAAI,sBACF,mBAAmB,KAAK,gBAAgB;EAE1C,IAAI,gBACF,mBAAmB,KAAK,QAAQ;EAElC,OAAO,2BAA2B,kBAAkB;CACtD;;;;;;;;;;;;;;;CAgBA,IAAI,cAAc,aAAa,mBAAmB;EAChD,MAAM,qBAAqB,CAAC;EAC5B,IAAI,gBACF,mBAAmB,KAAK,SAAS;EAEnC,IAAI,sBACF,mBAAmB,KAAK,gBAAgB;EAE1C,IAAI,aACF,mBAAmB,KACjB,GAAG,gBAAgB,MAAM,aAAa,mBAAmB,UAAU,CACrE;EAEF,OAAO,2BAA2B,kBAAkB;CACtD;;;;;;;;;;;;;;;;;;;;CAqBA,MAAM,oBAAoB;CAC1B,MAAM,mCAAmC,wBAAwB;CACjE,MAAM,8CAA8C,wBAAwB;CAC5E,MAAM,iBAAiB;CAEvB,MAAM,qBAAqB,CAAC;CAC5B,IAAI,6CACF,mBAAmB,KACjB,GAAG,gBAAgB,MACjB,cAAc,IAAI,mBAClB,cAAc,CAChB,CACF;MACK,IAAI,kCACT,mBAAmB,KACjB,GAAG,gBAAgB,MAAM,cAAc,mBAAmB,WAAW,CACvE;MACK,IAAI,mBACT,mBAAmB,KACjB,GAAG,gBAAgB,MAAM,cAAc,GAAG,cAAc,IAAI,CAAC,CAC/D;CAEF,IAAI,sBACF,mBAAmB,KAAK,gBAAgB;CAE1C,IAAI,gBACF,mBAAmB,KAAK,QAAQ;CAElC,OAAO,2BAA2B,kBAAkB;AACtD;AAEA,IAAa,yBACX,WACA,eACA,eACuB;CACvB,IAAI,YAAY,YAAY;CAC5B,IAAI,WAAW;CACf,OAAO,cAAc,SAAS,QAAQ,GACpC;CAEF,OAAO;AACT;AAEA,IAAa,6BACX,WACA,kBACuB;CACvB,IAAI,YAAY,GAAG;CACnB,IAAI,eAAe;CACnB,OAAO,cAAc,SAAS,YAAY,GACxC;CAEF,OAAO;AACT"}

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

@@ -1,4 +1,4 @@
-import { TcolorScheme } from '../../experiments/color-scheme/ColorScheme';
+import type { TcolorScheme } from '../../experiments/color-scheme/ColorScheme';
 import { GO_TO_NEXT_PAGE, GO_TO_PREVIOUS_PAGE, VIEW_ALL_POPOVER } from './pagination.constants';
 export type PaginationItemsToRender = (number | typeof VIEW_ALL_POPOVER | typeof GO_TO_PREVIOUS_PAGE | typeof GO_TO_NEXT_PAGE)[];
 interface Labels {
@@ -14,7 +14,7 @@ interface BasePaginationProps {
     labels: Labels;
     onItemHover: (pageNumber: number) => void;
 }
-export type TVisibleElementsCount = 6 | 8;
+export type VisibleElementsCount = 6 | 8;
 export interface PaginationPageProps {
     pageNumber: number;
     className?: string;
@@ -31,7 +31,7 @@ export interface PaginationContextValue extends BasePaginationProps {
 export type PaginationProviderProps = Pick<BasePaginationProps, 'pagesCount'> & Partial<BasePaginationProps> & {
     selectedPage?: number;
     onSelectedPageChange?: (pageNumber: number) => void;
-    visibleElementsCount?: TVisibleElementsCount;
+    visibleElementsCount?: VisibleElementsCount;
 };
 export interface PaginationProps extends PaginationProviderProps {
     colorScheme?: TcolorScheme;

package/dist/components/pagination/usePagination.js

@@ -1,4 +1,4 @@
-import { PaginationContext } from "./pagination-context/PaginationContext.js";
+import { PaginationContext } from "./Pagination.context.js";
 import * as React$1 from "react";
 //#region src/components/pagination/usePagination.tsx
 var usePagination = () => {

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

@@ -1 +1 @@
-{"version":3,"file":"usePagination.js","names":[],"sources":["../../../src/components/pagination/usePagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PaginationContext } from './pagination-context/PaginationContext'\nimport type { PaginationContextValue } from './types'\n\nexport const usePagination = (): PaginationContextValue => {\n  const context = React.useContext(PaginationContext)\n\n  if (!context) {\n    throw new Error(\n      'Ensure that you wrap any components with the PaginationProvider component'\n    )\n  }\n\n  return context\n}\n"],"mappings":";;;AAKA,IAAa,sBAA8C;CACzD,MAAM,UAAU,QAAM,WAAW,kBAAkB;AAEnD,KAAI,CAAC,QACH,OAAM,IAAI,MACR,4EACD;AAGH,QAAO"}
+{"version":3,"file":"usePagination.js","names":[],"sources":["../../../src/components/pagination/usePagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PaginationContext } from './Pagination.context'\nimport type { PaginationContextValue } from './types'\n\nexport const usePagination = (): PaginationContextValue => {\n  const context = React.useContext(PaginationContext)\n\n  if (!context) {\n    throw new Error(\n      'Ensure that you wrap any components with the PaginationProvider component'\n    )\n  }\n\n  return context\n}\n"],"mappings":";;;AAKA,IAAa,sBAA8C;CACzD,MAAM,UAAU,QAAM,WAAW,iBAAiB;CAElD,IAAI,CAAC,SACH,MAAM,IAAI,MACR,2EACF;CAGF,OAAO;AACT"}

package/dist/components/password-field/PasswordField.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { FieldElementWrapperProps } from '../../components/field-wrapper/FieldWrapper';
-import { PasswordInput } from '../../components/password-input/PasswordInput';
+import { type FieldElementWrapperProps } from '../field-wrapper/FieldWrapper';
+import { PasswordInput } from '../password-input/PasswordInput';
 type PasswordFieldProps = React.ComponentProps<typeof PasswordInput> & Omit<FieldElementWrapperProps, 'label'> & {
     label?: string;
 };
-export declare const PasswordField: {
-    ({ className, hideLabel, label, name, prompt, description, validation, appearance, theme, ...remainingProps }: PasswordFieldProps): React.JSX.Element;
-    displayName: string;
-};
+export declare function PasswordField({ className, hideLabel, label, name, prompt, description, validation, appearance, theme, ...rest }: PasswordFieldProps): React.JSX.Element;
+export declare namespace PasswordField {
+    var displayName: string;
+}
 export {};

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

@@ -7,7 +7,7 @@ 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 }) => {
+var PasswordField = ({ className, hideLabel, label = "Password", name, prompt = void 0, description, validation, appearance, theme, ...rest }) => {
 	const { register } = useFormContext();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
@@ -32,7 +32,7 @@ var PasswordField = ({ className, hideLabel, label = "Password", name, prompt =
 			appearance: formAppearance,
 			theme: formTheme,
 			...error !== void 0 && { state: "error" },
-			...remainingProps
+			...rest
 		})
 	});
 };

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,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"}
+{"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 { cn } from '../../styled'\nimport {\n  type FieldElementWrapperProps,\n  FieldWrapper\n} from '../field-wrapper/FieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\nimport { useFormCustomContext } from '../form/useFormCustomContext'\nimport { PasswordInput } from '../password-input/PasswordInput'\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  ...rest\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        {...rest}\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,WACqB;CACxB,MAAM,EAAE,aAAa,eAAe;CACpC,MAAM,UAAU,qBAAqB;CACrC,MAAM,EAAE,UAAU,cAAc,IAAI;CAEpC,MAAM,MAAM,aAAa,SAAS,UAAU,IAAI;CAChD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;CAEpC,OACE,oBAAC,cAAD;EACe;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,QAAQ;EACtC,YAAY;EACZ,WAAW,GAAG,YAAY,SAAS;YAEnC,oBAAC,eAAD;GACE,cAAa;GACP;GACN,IAAI;GACC;GACL,YAAY;GACZ,OAAO;GACP,GAAK,UAAU,KAAA,KAAa,EAAE,OAAO,QAAQ;GAC7C,GAAI;EACL,CAAA;CACW,CAAA;AAElB;AAEA,cAAc,cAAc"}

package/dist/components/password-input/PasswordInput.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import type { InputProps } from '../../components/input/Input';
+import type { InputProps } from '../input/Input';
 type PasswordInputProps = Omit<InputProps, 'type'> & {
     hidePasswordText?: string;
     showPasswordText?: string;
 };
-export declare const PasswordInput: React.ForwardRefExoticComponent<Omit<PasswordInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const PasswordInput: ({ ref, className, hidePasswordText, showPasswordText, size, ...restProps }: PasswordInputProps) => React.JSX.Element;
 export {};

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

@@ -1,14 +1,14 @@
 import { cn } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
-import { Input } from "../input/Input.js";
 import { getFieldIconSize } from "../../utilities/style/get-icon-size.js";
+import { Input } from "../input/Input.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) => {
+var PasswordInput = ({ ref, className, hidePasswordText = "Hide password", showPasswordText = "Show password", size = "md", ...restProps }) => {
 	const [isPasswordVisible, setIsPasswordVisible] = useState(false);
 	const togglePasswordVisibility = () => setIsPasswordVisible((currentState) => !currentState);
 	const iconSize = React$1.useMemo(() => getFieldIconSize(size), [size]);
@@ -31,8 +31,7 @@ var PasswordInput = React$1.forwardRef(({ className, hidePasswordText = "Hide pa
 			children: /* @__PURE__ */ jsx(Icon, { is: isPasswordVisible ? Eye : EyeCrossed })
 		})]
 	});
-});
-PasswordInput.displayName = "PasswordInput";
+};
 //#endregion
 export { PasswordInput };
 

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,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"}
+{"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 { cn } from '../../styled'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport type { InputProps } from '../input/Input'\nimport { Input } from '../input/Input'\n\ntype PasswordInputProps = Omit<InputProps, 'type'> & {\n  hidePasswordText?: string\n  showPasswordText?: string\n}\n\nexport const PasswordInput = ({\n  ref,\n  className,\n  hidePasswordText = 'Hide password',\n  showPasswordText = 'Show password',\n  size = 'md',\n  ...restProps\n}: PasswordInputProps) => {\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"],"mappings":";;;;;;;;;;AAgBA,IAAa,iBAAiB,EAC5B,KACA,WACA,mBAAmB,iBACnB,mBAAmB,iBACnB,OAAO,MACP,GAAG,gBACqB;CACxB,MAAM,CAAC,mBAAmB,wBAAwB,SAAkB,KAAK;CACzE,MAAM,iCACJ,sBAAsB,iBAAiB,CAAC,YAAY;CAEtD,MAAM,WAAW,QAAM,cAAc,iBAAiB,IAAI,GAAG,CAAC,IAAI,CAAC;CAEnE,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,YAAY,SAAS;YAAxC,CACE,oBAAC,OAAD;GACE,GAAI;GACE;GACN,MAAM,oBAAoB,SAAS;GAC9B;GACL,WAAU;EACX,CAAA,GACD,oBAAC,YAAD;GACE,YAAW;GACX,OAAM;GACN,OAAO,oBAAoB,mBAAmB;GAC9C,SAAS;GACT,cAAc,MAAM,EAAE,eAAe;GACrC,MAAM;GACN,WAAW,GACT,SAAS,OAAO,aAAa,YAC7B,YACA,SACF;aAEA,oBAAC,MAAD,EAAM,IAAI,oBAAoB,MAAM,WAAa,CAAA;EACvC,CAAA,CACT;;AAET"}

package/dist/components/popover/Popover.d.ts

@@ -1,9 +1,9 @@
 export declare const Popover: import("react").FC<import("@radix-ui/react-popover").PopoverProps> & {
-    Content: ({ children, side, sideOffset, closePopoverText, showCloseButton, size, ...remainingProps }: Omit<import("@radix-ui/react-popover").PopoverContentProps & import("react").RefAttributes<HTMLDivElement>, "size"> & {
-        size?: "sm" | "md" | "lg" | undefined;
+    Content: ({ children, side, sideOffset, closePopoverText, showCloseButton, size, ...rest }: {
+        size?: "lg" | "md" | "sm" | undefined;
     } & {
-        as?: import("react").ElementType;
-    } & import("@radix-ui/react-popover").PopoverContentProps & import("react").RefAttributes<HTMLDivElement> & {
+        as?: never;
+    } & Omit<import("@radix-ui/react-popover").PopoverContentProps & import("react").RefAttributes<HTMLDivElement>, "as" | "size"> & import("@radix-ui/react-popover").PopoverContentProps & import("react").RefAttributes<HTMLDivElement> & {
         closePopoverText?: string;
         showCloseButton?: boolean;
     }) => import("react").JSX.Element;

package/dist/components/popover/Popover.js

@@ -1,7 +1,7 @@
 import { PopoverContent } from "./PopoverContent.js";
 import { Anchor, Portal, Root, Trigger } from "@radix-ui/react-popover";
 //#region src/components/popover/Popover.tsx
-var Popover = Object.assign(Root, {
+var Popover = /* @__PURE__ */ Object.assign(Root, {
 	Content: PopoverContent,
 	Portal,
 	Anchor,

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","names":[],"sources":["../../../src/components/popover/Popover.tsx"],"sourcesContent":["import { Anchor, Portal, Root, Trigger } from '@radix-ui/react-popover'\n\nimport { PopoverContent } from './PopoverContent'\n\nexport const Popover = Object.assign(Root, {\n  Content: PopoverContent,\n  Portal,\n  Anchor,\n  Trigger\n})\n\nRoot.displayName = 'Popover'\n"],"mappings":";;;AAIA,IAAa,UAAU,OAAO,OAAO,MAAM;CACzC,SAAS;CACT;CACA;CACA;CACD,CAAC;AAEF,KAAK,cAAc"}
+{"version":3,"file":"Popover.js","names":[],"sources":["../../../src/components/popover/Popover.tsx"],"sourcesContent":["import { Anchor, Portal, Root, Trigger } from '@radix-ui/react-popover'\n\nimport { PopoverContent } from './PopoverContent'\n\nexport const Popover = /* @__PURE__ */ Object.assign(Root, {\n  Content: PopoverContent,\n  Portal,\n  Anchor,\n  Trigger\n})\n\nRoot.displayName = 'Popover'\n"],"mappings":";;;AAIA,IAAa,UAA0B,uBAAO,OAAO,MAAM;CACzD,SAAS;CACT;CACA;CACA;AACF,CAAC;AAED,KAAK,cAAc"}

package/dist/components/popover/PopoverContent.d.ts

@@ -1,13 +1,11 @@
 import { Content } from '@radix-ui/react-popover';
 import * as React from 'react';
-declare const StyledContent: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-popover").PopoverContentProps & React.RefAttributes<HTMLDivElement>, "size"> & {
-    size?: "sm" | "md" | "lg" | undefined;
-} & {
-    as?: React.ElementType;
+declare const StyledContent: import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverContentProps & React.RefAttributes<HTMLDivElement>>, {
+    size?: "lg" | "md" | "sm" | undefined;
 }>;
 type PopoverContentProps = React.ComponentProps<typeof StyledContent> & React.ComponentProps<typeof Content> & {
     closePopoverText?: string;
     showCloseButton?: boolean;
 };
-export declare const PopoverContent: ({ children, side, sideOffset, closePopoverText, showCloseButton, size, ...remainingProps }: PopoverContentProps) => React.JSX.Element;
+export declare const PopoverContent: ({ children, side, sideOffset, closePopoverText, showCloseButton, size, ...rest }: PopoverContentProps) => React.JSX.Element;
 export {};

package/dist/components/popover/PopoverContent.js

@@ -38,11 +38,11 @@ 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__ */ jsxs(StyledContent, {
+var PopoverContent = ({ children, side = "top", sideOffset = 8, closePopoverText = "Close popover", showCloseButton = true, size = "md", ...rest }) => /* @__PURE__ */ jsxs(StyledContent, {
 	size,
 	side,
 	sideOffset,
-	...remainingProps,
+	...rest,
 	children: [
 		showCloseButton && /* @__PURE__ */ jsx(ActionIcon, {
 			as: Close$1,

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,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"}
+{"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'\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  ...rest\n}: PopoverContentProps) => (\n  <StyledContent size={size} side={side} sideOffset={sideOffset} {...rest}>\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":";;;;;;;;AAQA,IAAM,gBAAgB,OAAO,SAAS;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU;EACf,IAAI,CAAC,WAAW;EAChB,IAAI,CAAC,WAAW;CAClB,EACF;AACF,CAAC;AAED,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CAAC;CAAc;CAAO;AAA0B,EACxD,CAAC;AAQD,IAAa,kBAAkB,EAC7B,UACA,OAAO,OACP,aAAa,GACb,mBAAmB,iBACnB,kBAAkB,MAClB,OAAO,MACP,GAAG,WAEH,qBAAC,eAAD;CAAqB;CAAY;CAAkB;CAAY,GAAI;WAAnE;EACG,mBACC,oBAAC,YAAD;GACE,IAAI;GACJ,OAAO;GACP,MAAK;GACL,YAAY;GACZ,OAAM;GACN,WAAU;aAEV,oBAAC,MAAD,EAAM,IAAI,MAAY,CAAA;EACZ,CAAA;EAEb;EACD,oBAAC,aAAD;GAAa,OAAO;GAAI,QAAQ;EAAI,CAAA;CACvB"}

package/dist/components/progress-bar/ProgressBar.d.ts

@@ -1,10 +1,8 @@
 import * as Progress from '@radix-ui/react-progress';
 import * as React from 'react';
-declare const StyledProgressBar: React.ForwardRefExoticComponent<Omit<Progress.ProgressProps & React.RefAttributes<HTMLDivElement>, "size" | "theme"> & {
-    size?: ("sm" | "md" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md">>) | undefined;
-    theme?: ("primary" | "neutral" | "success" | "warning" | "danger" | "info" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "primary" | "neutral" | "success" | "warning" | "danger" | "info">>) | undefined;
-} & {
-    as?: React.ElementType;
+declare const StyledProgressBar: import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<Progress.ProgressProps & React.RefAttributes<HTMLDivElement>>, {
+    size?: ("md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "md" | "sm">>) | undefined;
+    theme?: ("danger" | "info" | "neutral" | "primary" | "success" | "warning" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "danger" | "info" | "neutral" | "primary" | "success" | "warning">>) | undefined;
 }>;
 type ProgressBarProps = React.ComponentPropsWithoutRef<typeof StyledProgressBar> & ({
     id: string;
@@ -13,8 +11,8 @@ type ProgressBarProps = React.ComponentPropsWithoutRef<typeof StyledProgressBar>
     'aria-label': string;
     id?: string;
 });
-export declare const ProgressBar: {
-    ({ value, max, size, theme, ...remainingProps }: ProgressBarProps): React.JSX.Element;
-    displayName: string;
-};
+export declare function ProgressBar({ value, max, size, theme, ...rest }: ProgressBarProps): React.JSX.Element;
+export declare namespace ProgressBar {
+    var displayName: string;
+}
 export {};

package/dist/components/progress-bar/ProgressBar.js

@@ -25,7 +25,7 @@ var StyledProgressBar = styled(Progress.Root, {
 			neutral: ["bg-grey-400", "text-grey-800"]
 		}
 	}
-}, { enabledResponsiveVariants: true });
+}, { enableResponsiveVariants: true });
 var StyledIndicator = styled(Progress.Indicator, { base: [
 	"bg-current",
 	"rounded-full",
@@ -36,12 +36,12 @@ var StyledIndicator = styled(Progress.Indicator, { base: [
 	"duration-300",
 	"ease-out"
 ] });
-var ProgressBar = ({ value, max = 100, size = "md", theme = "primary", ...remainingProps }) => /* @__PURE__ */ jsx(StyledProgressBar, {
+var ProgressBar = ({ value, max = 100, size = "md", theme = "primary", ...rest }) => /* @__PURE__ */ jsx(StyledProgressBar, {
 	value,
 	max,
 	theme,
 	size,
-	...remainingProps,
+	...rest,
 	children: /* @__PURE__ */ jsx(StyledIndicator, {
 		className: "w-full translate-x-(--progress)",
 		style: { "--progress": `-${100 - (value || 0) / max * 100}%` }

package/dist/components/progress-bar/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","names":[],"sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import * as Progress from '@radix-ui/react-progress'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledProgressBar = styled(\n  Progress.Root,\n  {\n    base: [\n      'rounded-full',\n      'bg-grey-200',\n      'relative',\n      'overflow-hidden',\n      'w-full'\n    ],\n    variants: {\n      size: {\n        sm: ['h-1'],\n        md: ['h-2']\n      },\n      theme: {\n        primary: ['text-primary-800'],\n        info: ['text-info'],\n        success: ['text-success'],\n        warning: ['text-warning'],\n        danger: ['text-danger'],\n        neutral: ['bg-grey-400', 'text-grey-800']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\nconst StyledIndicator = styled(Progress.Indicator, {\n  base: [\n    'bg-current',\n    'rounded-full',\n    'box-border',\n    'h-full',\n    'absolute',\n    'transition-all',\n    'duration-300',\n    'ease-out'\n  ]\n})\n\ntype ProgressBarProps = React.ComponentPropsWithoutRef<\n  typeof StyledProgressBar\n> &\n  (\n    | { id: string; 'aria-label'?: string }\n    | { 'aria-label': string; id?: string }\n  )\n\nexport const ProgressBar = ({\n  value,\n  max = 100,\n  size = 'md',\n  theme = 'primary',\n  ...remainingProps\n}: ProgressBarProps) => (\n  <StyledProgressBar\n    value={value}\n    max={max}\n    theme={theme}\n    size={size}\n    {...remainingProps}\n  >\n    <StyledIndicator\n      className=\"w-full translate-x-(--progress)\"\n      style={{\n        '--progress': `-${100 - ((value || 0) / max) * 100}%`\n      }}\n    />\n  </StyledProgressBar>\n)\n\nProgressBar.displayName = 'ProgressBar'\n"],"mappings":";;;;;AAKA,IAAM,oBAAoB,OACxB,SAAS,MACT;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,MAAM;GACZ;EACD,OAAO;GACL,SAAS,CAAC,mBAAmB;GAC7B,MAAM,CAAC,YAAY;GACnB,SAAS,CAAC,eAAe;GACzB,SAAS,CAAC,eAAe;GACzB,QAAQ,CAAC,cAAc;GACvB,SAAS,CAAC,eAAe,gBAAgB;GAC1C;EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAED,IAAM,kBAAkB,OAAO,SAAS,WAAW,EACjD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAUF,IAAa,eAAe,EAC1B,OACA,MAAM,KACN,OAAO,MACP,QAAQ,WACR,GAAG,qBAEH,oBAAC,mBAAD;CACS;CACF;CACE;CACD;CACN,GAAI;WAEJ,oBAAC,iBAAD;EACE,WAAU;EACV,OAAO,EACL,cAAc,IAAI,OAAQ,SAAS,KAAK,MAAO,IAAI,IACpD;EACD,CAAA;CACgB,CAAA;AAGtB,YAAY,cAAc"}
+{"version":3,"file":"ProgressBar.js","names":[],"sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import * as Progress from '@radix-ui/react-progress'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\n\nconst StyledProgressBar = styled(\n  Progress.Root,\n  {\n    base: [\n      'rounded-full',\n      'bg-grey-200',\n      'relative',\n      'overflow-hidden',\n      'w-full'\n    ],\n    variants: {\n      size: {\n        sm: ['h-1'],\n        md: ['h-2']\n      },\n      theme: {\n        primary: ['text-primary-800'],\n        info: ['text-info'],\n        success: ['text-success'],\n        warning: ['text-warning'],\n        danger: ['text-danger'],\n        neutral: ['bg-grey-400', 'text-grey-800']\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\nconst StyledIndicator = styled(Progress.Indicator, {\n  base: [\n    'bg-current',\n    'rounded-full',\n    'box-border',\n    'h-full',\n    'absolute',\n    'transition-all',\n    'duration-300',\n    'ease-out'\n  ]\n})\n\ntype ProgressBarProps = React.ComponentPropsWithoutRef<\n  typeof StyledProgressBar\n> &\n  (\n    | { id: string; 'aria-label'?: string }\n    | { 'aria-label': string; id?: string }\n  )\n\nexport const ProgressBar = ({\n  value,\n  max = 100,\n  size = 'md',\n  theme = 'primary',\n  ...rest\n}: ProgressBarProps) => (\n  <StyledProgressBar\n    value={value}\n    max={max}\n    theme={theme}\n    size={size}\n    {...rest}\n  >\n    <StyledIndicator\n      className=\"w-full translate-x-(--progress)\"\n      style={{\n        '--progress': `-${100 - ((value || 0) / max) * 100}%`\n      }}\n    />\n  </StyledProgressBar>\n)\n\nProgressBar.displayName = 'ProgressBar'\n"],"mappings":";;;;;AAKA,IAAM,oBAAoB,OACxB,SAAS,MACT;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI,CAAC,KAAK;GACV,IAAI,CAAC,KAAK;EACZ;EACA,OAAO;GACL,SAAS,CAAC,kBAAkB;GAC5B,MAAM,CAAC,WAAW;GAClB,SAAS,CAAC,cAAc;GACxB,SAAS,CAAC,cAAc;GACxB,QAAQ,CAAC,aAAa;GACtB,SAAS,CAAC,eAAe,eAAe;EAC1C;CACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAEA,IAAM,kBAAkB,OAAO,SAAS,WAAW,EACjD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAUD,IAAa,eAAe,EAC1B,OACA,MAAM,KACN,OAAO,MACP,QAAQ,WACR,GAAG,WAEH,oBAAC,mBAAD;CACS;CACF;CACE;CACD;CACN,GAAI;WAEJ,oBAAC,iBAAD;EACE,WAAU;EACV,OAAO,EACL,cAAc,IAAI,OAAQ,SAAS,KAAK,MAAO,IAAI,GACrD;CACD,CAAA;AACgB,CAAA;AAGrB,YAAY,cAAc"}