@atom-learning/components 2.55.0 → 2.56.0

package/CHANGELOG.md

@@ -1,9 +1,22 @@
-# [2.55.0](https://github.com/Atom-Learning/components/compare/v2.54.3...v2.55.0) (2023-05-16)
+# [2.56.0](https://github.com/Atom-Learning/components/compare/v2.55.0...v2.56.0) (2023-05-25)
+
+
+### Bug Fixes
+
+* update tests ([33541b4](https://github.com/Atom-Learning/components/commit/33541b449721bedd813246e06633035818440833))
 
 
 ### Features
 
-* added new badge theme variant ([5d7556a](https://github.com/Atom-Learning/components/commit/5d7556a00dd30085ebc75270298341a81f9c92a5))
+* add components to display aspect ratio tokens ([54e3d78](https://github.com/Atom-Learning/components/commit/54e3d78694c32802cef442ba8de9fe404db4de22))
+* add navigation buttons for pagination ([f980396](https://github.com/Atom-Learning/components/commit/f9803965c5f446ec57bdb7b4f6bffc273ee9016e))
+* add Pagination Component ([afd0691](https://github.com/Atom-Learning/components/commit/afd06914c158e1fec570d466e62ea9f711323e84))
+* add pagination context provider ([e931538](https://github.com/Atom-Learning/components/commit/e931538fa16079a8f8337da3f2d96817d1a40c51))
+* add pagination page button ([e0db0c6](https://github.com/Atom-Learning/components/commit/e0db0c638fe8b37c4a8baef51b6964966b598167))
+* add pagination pages component ([1b35c5f](https://github.com/Atom-Learning/components/commit/1b35c5f7475be3a274bc2cf83bac4a2925dd2043))
+* add pagination popover component ([96dc9b2](https://github.com/Atom-Learning/components/commit/96dc9b23631087934bfbf6b511a2038f2d2423a8))
+* allow component to be controlled or uncontrolled ([9233b90](https://github.com/Atom-Learning/components/commit/9233b909a46b090e83fd93d52116a05861244284))
+* implement Pagination component ([9edfb1f](https://github.com/Atom-Learning/components/commit/9edfb1f8d6d13a5b283adc88fa7111a1165e9b98))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/index.d.ts

@@ -42,6 +42,7 @@ export { NavigationMenu } from './navigation';
 export { NotificationBadge } from './notification-badge';
 export { NumberInput } from './number-input';
 export { NumberInputField } from './number-input-field';
+export { Pagination } from './pagination';
 export { PasswordField } from './password-field';
 export { PasswordInput } from './password-input';
 export { Popover } from './popover';

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { TPaginationProps } from './types';
+export declare const Pagination: React.FC<TPaginationProps>;

package/dist/components/pagination/Pagination.js

@@ -0,0 +1,2 @@
+import*as t from"react";import{ColorScheme as p}from"../../experiments/color-scheme/ColorScheme.js";import"../accordion/Accordion.js";import"../action-icon/ActionIcon.js";import"../alert-dialog/AlertDialog.js";import"../alert-dialog/alert-context/AlertContext.js";import"../avatar/Avatar.js";import"../badge/Badge.js";import"../box/Box.js";import"../button/Button.js";import"../carousel/Carousel.js";import"../checkbox/Checkbox.js";import"../checkbox-field/CheckboxField.js";import"../chip/Chip.js";import"../chip/ChipGroup.js";import"../chip-dismissible-group/index.js";import"../chip-toggle-group/index.js";import"../combobox/Combobox.js";import"../data-table/DataTableContext.js";import"../data-table/DataTable.js";import"../date-field/DateField.js";import"../date-input/DateInput.js";import"../dialog/Dialog.js";import"../dismissible/index.js";import"../dismissible-group/index.js";import"../divider/Divider.js";import"../dropdown-menu/DropdownMenu.js";import"../empty-state/EmptyState.js";import"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../file-input/FileInput.js";import{Flex as e}from"../flex/Flex.js";import"../form/Form.js";import"dlv";import"react-hook-form";import"../grid/Grid.js";import"../heading/Heading.js";import"../icon/Icon.js";import"../image/Image.js";import"../inline-message/InlineMessage.js";import"../input/Input.js";import"../input-field/InputField.js";import"../label/Label.js";import"../link/Link.js";import"../list/List.js";import"../loader/Loader.js";import"../markdown-content/MarkdownContent.js";import"../navigation/NavigationMenu.js";import"../notification-badge/NotificationBadge.js";import"../number-input/NumberInput.js";import"../number-input-field/NumberInputField.js";import"../password-field/PasswordField.js";import"../password-input/PasswordInput.js";import"../popover/Popover.js";import"../progress-bar/ProgressBar.js";import"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import"../radio-button-field/RadioButtonField.js";import"../radio-card/RadioCard.js";import"@radix-ui/react-radio-group";import"../stack/Stack.js";import"../search-field/SearchField.js";import"../search-input/SearchInput.js";import"../section-message/SectionMessage.js";import"../select/Select.js";import"../select-field/SelectField.js";import"../sidedrawer/Sidedrawer.js";import"../slider/Slider.js";import"../slider-field/SliderField.js";import"../sortable/SortableHandle.js";import"../sortable/SortableItem.js";import"../sortable/SortableRoot.js";import"../stack-content/StackContent.js";import"../stepper/Stepper.js";import"../switch/Switch.js";import"../table/Table.js";import"../tabs/Tabs.js";import"../text/Text.js";import"../textarea/Textarea.js";import"../textarea-field/TextareaField.js";import"../toast/ToastProvider.js";import"../toggle-group/ToggleGroupButton.js";import"../toggle-group/ToggleGroupItem.js";import"../toggle-group/ToggleGroupRoot.js";import"../tooltip/Tooltip.js";import"../top-bar/TopBar.js";import"../video/Video.js";import"../banner/banner-regular/BannerRegular.js";import"../tile/Tile.js";import"../tile-interactive/TileInteractive.js";import"../tile-toggle-group/index.js";import{PaginationProvider as n}from"./pagination-context/PaginationContext.js";import{PaginationNextButton as a}from"./PaginationNextButton.js";import{PaginationPages as l}from"./PaginationPages.js";import{PaginationPreviousButton as c}from"./PaginationPreviousButton.js";const r=({colorScheme:i,css:m,...o})=>o!=null&&o.pagesCount?t.createElement(p,{base:"grey1",accent:"blue1",...i,asChild:!0},t.createElement(e,{css:m},t.createElement(n,{...o},t.createElement(c,null),t.createElement(l,null),t.createElement(a,null)))):null;r.displayName="Pagination";export{r as Pagination};
+//# sourceMappingURL=Pagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sources":["../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ColorScheme } from '../../experiments/color-scheme'\nimport { Flex } from '..'\nimport { PaginationProvider } from './pagination-context/PaginationContext'\nimport { PaginationNextButton } from './PaginationNextButton'\nimport { PaginationPages } from './PaginationPages'\nimport { PaginationPreviousButton } from './PaginationPreviousButton'\nimport type { TPaginationProps } from './types'\n\nexport const Pagination: React.FC<TPaginationProps> = ({\n  colorScheme,\n  css,\n  ...paginationProps\n}) => {\n  // Return null if pages is 0 or undefined\n  if (!paginationProps?.pagesCount) {\n    return null\n  }\n\n  return (\n    <ColorScheme base=\"grey1\" accent=\"blue1\" {...colorScheme} asChild>\n      <Flex css={css}>\n        <PaginationProvider {...paginationProps}>\n          <PaginationPreviousButton />\n          <PaginationPages />\n          <PaginationNextButton />\n        </PaginationProvider>\n      </Flex>\n    </ColorScheme>\n  )\n}\n\nPagination.displayName = 'Pagination'\n"],"names":["Pagination","colorScheme","css","paginationProps","React","ColorScheme","Flex","PaginationProvider","PaginationPreviousButton","PaginationPages","PaginationNextButton"],"mappings":"g5GAUa,MAAAA,EAAyC,CAAC,CACrD,YAAAC,EACA,IAAAC,KACGC,CACL,IAEOA,GAAA,MAAAA,EAAiB,WAKpBC,EAAA,cAACC,EAAA,CAAY,KAAK,QAAQ,OAAO,QAAS,GAAGJ,EAAa,QAAO,EAC/DG,EAAAA,EAAA,cAACE,EAAA,CAAK,IAAKJ,CAAAA,EACTE,EAAA,cAACG,EAAA,CAAoB,GAAGJ,CAAAA,EACtBC,EAAA,cAACI,EAAA,IAAyB,EAC1BJ,EAAA,cAACK,EAAA,IAAgB,EACjBL,EAAA,cAACM,EAAA,IAAqB,CACxB,CACF,CACF,EAZO,KAgBXV,EAAW,YAAc"}

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { IPaginationItemProps } from './types';
+export declare const PaginationItem: React.FC<IPaginationItemProps>;

package/dist/components/pagination/PaginationItem.js

@@ -0,0 +1,2 @@
+import*as e from"react";import{styled as c}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as b}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import"../accordion/Accordion.js";import"../action-icon/ActionIcon.js";import"../alert-dialog/AlertDialog.js";import"../alert-dialog/alert-context/AlertContext.js";import"../avatar/Avatar.js";import"../badge/Badge.js";import{Box as $}from"../box/Box.js";import"../button/Button.js";import"../carousel/Carousel.js";import"../checkbox/Checkbox.js";import"../checkbox-field/CheckboxField.js";import"../chip/Chip.js";import"../chip/ChipGroup.js";import"../chip-dismissible-group/index.js";import"../chip-toggle-group/index.js";import"../combobox/Combobox.js";import"../data-table/DataTableContext.js";import"../data-table/DataTable.js";import"../date-field/DateField.js";import"../date-input/DateInput.js";import"../dialog/Dialog.js";import"../dismissible/index.js";import"../dismissible-group/index.js";import"../divider/Divider.js";import"../dropdown-menu/DropdownMenu.js";import"../empty-state/EmptyState.js";import"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../file-input/FileInput.js";import"../flex/Flex.js";import"../form/Form.js";import"dlv";import"react-hook-form";import"../grid/Grid.js";import"../heading/Heading.js";import"../icon/Icon.js";import"../image/Image.js";import"../inline-message/InlineMessage.js";import"../input/Input.js";import"../input-field/InputField.js";import"../label/Label.js";import"../link/Link.js";import"../list/List.js";import"../loader/Loader.js";import"../markdown-content/MarkdownContent.js";import"../navigation/NavigationMenu.js";import"../notification-badge/NotificationBadge.js";import"../number-input/NumberInput.js";import"../number-input-field/NumberInputField.js";import"./Pagination.js";import"../password-field/PasswordField.js";import"../password-input/PasswordInput.js";import"../popover/Popover.js";import"../progress-bar/ProgressBar.js";import"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import"../radio-button-field/RadioButtonField.js";import"../radio-card/RadioCard.js";import"@radix-ui/react-radio-group";import"../stack/Stack.js";import"../search-field/SearchField.js";import"../search-input/SearchInput.js";import"../section-message/SectionMessage.js";import"../select/Select.js";import"../select-field/SelectField.js";import"../sidedrawer/Sidedrawer.js";import"../slider/Slider.js";import"../slider-field/SliderField.js";import"../sortable/SortableHandle.js";import"../sortable/SortableItem.js";import"../sortable/SortableRoot.js";import"../stack-content/StackContent.js";import"../stepper/Stepper.js";import"../switch/Switch.js";import"../table/Table.js";import"../tabs/Tabs.js";import"../text/Text.js";import"../textarea/Textarea.js";import"../textarea-field/TextareaField.js";import"../toast/ToastProvider.js";import"../toggle-group/ToggleGroupButton.js";import"../toggle-group/ToggleGroupItem.js";import"../toggle-group/ToggleGroupRoot.js";import"../tooltip/Tooltip.js";import"../top-bar/TopBar.js";import"../video/Video.js";import"../banner/banner-regular/BannerRegular.js";import"../tile/Tile.js";import"../tile-interactive/TileInteractive.js";import"../tile-toggle-group/index.js";import{usePagination as u}from"./usePagination.js";const r=c($,{borderRadius:"$round",size:"4px",bg:"$accent9"}),g=c("button",{alignItems:"center",border:"unset",borderRadius:"$0",cursor:"pointer",fontFamily:"$body",justifyContent:"center",whiteSpace:"nowrap",width:"max-content",display:"flex",flexDirection:"column",p:"0",fontWeight:400,color:"$grey800",bg:"$base1","&:not(:disabled)":{"&:hover":{color:"$accent10",bg:"$base2"},"&:active":{bg:"$base3",color:"$grey1000"},"&:focus-visible":{...b()}},"&:disabled":{opacity:"0.3",cursor:"not-allowed"},variants:{size:{md:{width:"$4",height:"$4"}},selected:{true:{border:"1px solid $accent9",color:"$accent9",fontWeight:600,"&:not(:disabled)":{"&:hover":{borderColor:"$accent10",color:"$accent10"},"&:active":{borderColor:"$accent11",fontColor:"$accent11"}}}},indicated:{true:{fontWeight:600,color:"$accent9","&:not(:disabled)":{"&:hover":{color:"$accent10",[`& ${r}`]:{bg:"$accent10"}},"&:active":{color:"$accent11",[`& ${r}`]:{bg:"$accent11"}}}}}}}),f=({pageNumber:o,css:n})=>{const{currentPage:a,goToPage:l,indicatedPages:s,disabledPages:d,onItemHover:i}=u(),m=s.includes(o),p=d.includes(o),t=a===o;return e.createElement(g,{selected:t,size:"md",onClick:()=>l(o),css:n,indicated:m,disabled:p,"aria-current":t&&"page","aria-disabled":p,onMouseOver:()=>{t||i==null||i(o)}},o,m&&e.createElement(r,null))};export{f as PaginationItem};
+//# sourceMappingURL=PaginationItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationItem.js","sources":["../../../src/components/pagination/PaginationItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nimport { styled } from '../../stitches'\nimport { Box } from '..'\nimport type { IPaginationItemProps } from './types'\nimport { usePagination } from './usePagination'\n\nconst Dot = styled(Box, {\n  borderRadius: '$round',\n  size: '4px',\n  bg: '$accent9'\n})\n\nconst StyledButton = styled('button', {\n  alignItems: 'center',\n  border: 'unset',\n  borderRadius: '$0',\n  cursor: 'pointer',\n  fontFamily: '$body',\n  justifyContent: 'center',\n  whiteSpace: 'nowrap',\n  width: 'max-content',\n  display: 'flex',\n  flexDirection: 'column',\n  p: '0',\n  fontWeight: 400,\n  color: '$grey800',\n  bg: '$base1',\n  '&:not(:disabled)': {\n    '&:hover': {\n      color: '$accent10',\n      bg: '$base2'\n    },\n    '&:active': {\n      bg: '$base3',\n      color: '$grey1000'\n    },\n    '&:focus-visible': {\n      ...focusVisibleStyleBlock()\n    }\n  },\n  '&:disabled': {\n    opacity: '0.3',\n    cursor: 'not-allowed'\n  },\n  variants: {\n    size: {\n      md: {\n        width: '$4',\n        height: '$4'\n      }\n    },\n    selected: {\n      true: {\n        border: '1px solid $accent9',\n        color: '$accent9',\n        fontWeight: 600,\n        '&:not(:disabled)': {\n          '&:hover': {\n            borderColor: '$accent10',\n            color: '$accent10'\n          },\n          '&:active': {\n            borderColor: '$accent11',\n            fontColor: '$accent11'\n          }\n        }\n      }\n    },\n    indicated: {\n      true: {\n        fontWeight: 600,\n        color: '$accent9',\n        '&:not(:disabled)': {\n          '&:hover': {\n            color: '$accent10',\n            [`& ${Dot}`]: {\n              bg: '$accent10'\n            }\n          },\n          '&:active': {\n            color: '$accent11',\n            [`& ${Dot}`]: {\n              bg: '$accent11'\n            }\n          }\n        }\n      }\n    }\n  }\n})\n\nexport const PaginationItem: React.FC<IPaginationItemProps> = ({\n  pageNumber,\n  css\n}) => {\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) return\n    onItemHover?.(pageNumber)\n  }\n\n  return (\n    <StyledButton\n      selected={isSelected}\n      size=\"md\"\n      onClick={() => goToPage(pageNumber)}\n      css={css}\n      indicated={isIndicated}\n      disabled={isDisabled}\n      aria-current={isSelected && 'page'}\n      aria-disabled={isDisabled}\n      onMouseOver={handleOnHover}\n    >\n      {pageNumber}\n      {isIndicated && <Dot />}\n    </StyledButton>\n  )\n}\n"],"names":["Dot","styled","Box","StyledButton","focusVisibleStyleBlock","PaginationItem","pageNumber","css","currentPage","goToPage","indicatedPages","disabledPages","onItemHover","usePagination","isIndicated","isDisabled","isSelected","React"],"mappings":"67GASA,MAAMA,EAAMC,EAAOC,EAAK,CACtB,aAAc,SACd,KAAM,MACN,GAAI,UACN,CAAC,EAEKC,EAAeF,EAAO,SAAU,CACpC,WAAY,SACZ,OAAQ,QACR,aAAc,KACd,OAAQ,UACR,WAAY,QACZ,eAAgB,SAChB,WAAY,SACZ,MAAO,cACP,QAAS,OACT,cAAe,SACf,EAAG,IACH,WAAY,IACZ,MAAO,WACP,GAAI,SACJ,mBAAoB,CAClB,UAAW,CACT,MAAO,YACP,GAAI,QACN,EACA,WAAY,CACV,GAAI,SACJ,MAAO,WACT,EACA,kBAAmB,CACjB,GAAGG,EACL,CAAA,CACF,EACA,aAAc,CACZ,QAAS,MACT,OAAQ,aACV,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,KACP,OAAQ,IACV,CACF,EACA,SAAU,CACR,KAAM,CACJ,OAAQ,qBACR,MAAO,WACP,WAAY,IACZ,mBAAoB,CAClB,UAAW,CACT,YAAa,YACb,MAAO,WACT,EACA,WAAY,CACV,YAAa,YACb,UAAW,WACb,CACF,CACF,CACF,EACA,UAAW,CACT,KAAM,CACJ,WAAY,IACZ,MAAO,WACP,mBAAoB,CAClB,UAAW,CACT,MAAO,YACP,CAAC,KAAKJ,KAAQ,CACZ,GAAI,WACN,CACF,EACA,WAAY,CACV,MAAO,YACP,CAAC,KAAKA,KAAQ,CACZ,GAAI,WACN,CACF,CACF,CACF,CACF,CACF,CACF,CAAC,EAEYK,EAAiD,CAAC,CAC7D,WAAAC,EACA,IAAAC,CACF,IAAM,CACJ,KAAM,CAAE,YAAAC,EAAa,SAAAC,EAAU,eAAAC,EAAgB,cAAAC,EAAe,YAAAC,CAAY,EACxEC,IAEIC,EAAcJ,EAAe,SAASJ,CAAU,EAChDS,EAAaJ,EAAc,SAASL,CAAU,EAE9CU,EAAaR,IAAgBF,EAOnC,OACEW,EAAA,cAACd,EAAA,CACC,SAAUa,EACV,KAAK,KACL,QAAS,IAAMP,EAASH,CAAU,EAClC,IAAKC,EACL,UAAWO,EACX,SAAUC,EACV,eAAcC,GAAc,OAC5B,gBAAeD,EACf,YAfkB,IAAM,CACtBC,GACJJ,GAAA,MAAAA,EAAcN,CAChB,CAAA,CAAA,EAcKA,EACAQ,GAAeG,EAAA,cAACjB,EAAA,IAAI,CACvB,CAEJ"}

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

@@ -0,0 +1,470 @@
+import * as React from 'react';
+declare const StyledActionIcon: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Pick<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+}, "appearance" | "size" | "css" | "theme" | "isRounded"> & import("@stitches/react/types/styled-component").TransformProps<{
+    theme?: "primary" | "success" | "danger" | "warning" | "neutral" | undefined;
+    appearance?: "outline" | "solid" | "simple" | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | undefined;
+    isRounded?: boolean | "true" | undefined;
+}, {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}> & {
+    css?: import("@stitches/react/types/css-util").CSS<{
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        reducedMotion: string;
+        allowMotion: string;
+        hover: string;
+    }, {
+        colors: {
+            textForeground: any;
+            textSubtle: any;
+            textPlaceholder: any;
+            background: any;
+            backgroundAccent: any;
+            grey100: any;
+            grey200: any;
+            grey300: any;
+            grey400: any;
+            grey500: any;
+            grey600: any;
+            grey700: any;
+            grey800: any;
+            grey900: any;
+            grey1000: any;
+            grey1100: any;
+            grey1200: any;
+            blue100: any;
+            blue200: any;
+            blue300: any;
+            blue400: any;
+            blue500: any;
+            blue600: any;
+            blue700: any;
+            blue800: any;
+            blue900: any;
+            blue1000: any;
+            blue1100: any;
+            blue1200: any;
+            purple100: any;
+            purple200: any;
+            purple300: any;
+            purple400: any;
+            purple500: any;
+            purple600: any;
+            purple700: any;
+            purple800: any;
+            purple900: any;
+            purple1000: any;
+            purple1100: any;
+            purple1200: any;
+            tonal50: any;
+            tonal100: any;
+            tonal200: any;
+            tonal300: any;
+            tonal400: any;
+            tonal500: any;
+            tonal600: any;
+            alpha100: any;
+            alpha150: any;
+            alpha200: any;
+            alpha250: any;
+            alpha600: any;
+            primaryLight: any;
+            primary: any;
+            primaryMid: any;
+            primaryDark: any;
+            secondary: any;
+            brandRed: any;
+            brandRedAccent: any;
+            brandGreen: any;
+            brandGreenAccent: any;
+            brandPurple: any;
+            brandPurpleAccent: any;
+            brandYellow: any;
+            brandYellowAccent: any;
+            successLight: any;
+            success: any;
+            successMid: any;
+            successDark: any;
+            dangerLight: any;
+            danger: any;
+            dangerMid: any;
+            dangerDark: any;
+            warningLight: any;
+            warning: any;
+            warningMid: any;
+            warningDark: any;
+            warningText: any;
+            subjectEnglish: any;
+            subjectMaths: any;
+            subjectScience: any;
+            subjectVerbalReasoning: any;
+            subjectNonVerbalReasoning: any;
+            subjectCreativeWriting: any;
+            subjectExamSkills: any;
+        };
+        space: {
+            "0": any;
+            "1": any;
+            "2": any;
+            "3": any;
+            "4": any;
+            "5": any;
+            "6": any;
+            "7": any;
+            "8": any;
+            "9": any;
+            "24": any;
+        };
+        fontSizes: {
+            xs: any;
+            sm: any;
+            md: any;
+            lg: any;
+            xl: any;
+            "2xl": any;
+            "3xl": any;
+            "4xl": any;
+        };
+        fonts: {
+            sans: any;
+            mono: any;
+            display: any;
+            body: any;
+        };
+        sizes: {
+            "0": any;
+            "1": any;
+            "2": any;
+            "3": any;
+            "4": any;
+            "5": any;
+            "6": any;
+            "7": any;
+            "8": any;
+        };
+        radii: {
+            "0": any;
+            "1": any;
+            "2": any;
+            "3": any;
+            round: any;
+        };
+        shadows: {
+            "0": any;
+            "1": any;
+            "2": any;
+            "3": any;
+        };
+        ratios: {
+            "16-9": any;
+            "3-2": any;
+            "4-3": any;
+            "1-1": any;
+            "3-4": any;
+        };
+    }, import("@stitches/react/types/config").DefaultThemeMap, {
+        bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
+            background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
+        };
+        size: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">) => {
+            height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
+            width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
+        };
+        p: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        pt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        pr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        pb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        pl: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        px: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        py: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        m: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        mt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        mr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        mb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        ml: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        mx: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+        my: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+            marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+            marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        };
+    }> | undefined;
+}, "appearance" | "size" | "theme" | "label" | "children" | "as" | "isRounded" | "hasTooltip" | "tooltipSide" | keyof import("../../types").NavigatorActions> & import("@stitches/react/types/styled-component").TransformProps<{
+    theme?: "primary" | "success" | "danger" | "warning" | "neutral" | undefined;
+    appearance?: "outline" | "solid" | "simple" | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | undefined;
+    isRounded?: boolean | "true" | undefined;
+}, {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}> & {
+    as?: React.ReactNode;
+    children: React.ReactNode;
+    label: string;
+    hasTooltip?: boolean | undefined;
+    tooltipSide?: "bottom" | "left" | "right" | "top" | undefined;
+} & import("../../types").NavigatorActions, "appearance" | "color" | "translate" | "size" | "css" | "theme" | "onBlur" | "onChange" | "onSubmit" | "form" | "label" | "slot" | "style" | "title" | "key" | "name" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "as" | "disabled" | "value" | "type" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "isRounded" | "hasTooltip" | "tooltipSide" | keyof import("../../types").NavigatorActions> & React.RefAttributes<HTMLButtonElement>>, {}, {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, import("@stitches/react/types/css-util").CSS<{
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, {
+    colors: {
+        textForeground: any;
+        textSubtle: any;
+        textPlaceholder: any;
+        background: any;
+        backgroundAccent: any;
+        grey100: any;
+        grey200: any;
+        grey300: any;
+        grey400: any;
+        grey500: any;
+        grey600: any;
+        grey700: any;
+        grey800: any;
+        grey900: any;
+        grey1000: any;
+        grey1100: any;
+        grey1200: any;
+        blue100: any;
+        blue200: any;
+        blue300: any;
+        blue400: any;
+        blue500: any;
+        blue600: any;
+        blue700: any;
+        blue800: any;
+        blue900: any;
+        blue1000: any;
+        blue1100: any;
+        blue1200: any;
+        purple100: any;
+        purple200: any;
+        purple300: any;
+        purple400: any;
+        purple500: any;
+        purple600: any;
+        purple700: any;
+        purple800: any;
+        purple900: any;
+        purple1000: any;
+        purple1100: any;
+        purple1200: any;
+        tonal50: any;
+        tonal100: any;
+        tonal200: any;
+        tonal300: any;
+        tonal400: any;
+        tonal500: any;
+        tonal600: any;
+        alpha100: any;
+        alpha150: any;
+        alpha200: any;
+        alpha250: any;
+        alpha600: any;
+        primaryLight: any;
+        primary: any;
+        primaryMid: any;
+        primaryDark: any;
+        secondary: any;
+        brandRed: any;
+        brandRedAccent: any;
+        brandGreen: any;
+        brandGreenAccent: any;
+        brandPurple: any;
+        brandPurpleAccent: any;
+        brandYellow: any;
+        brandYellowAccent: any;
+        successLight: any;
+        success: any;
+        successMid: any;
+        successDark: any;
+        dangerLight: any;
+        danger: any;
+        dangerMid: any;
+        dangerDark: any;
+        warningLight: any;
+        warning: any;
+        warningMid: any;
+        warningDark: any;
+        warningText: any;
+        subjectEnglish: any;
+        subjectMaths: any;
+        subjectScience: any;
+        subjectVerbalReasoning: any;
+        subjectNonVerbalReasoning: any;
+        subjectCreativeWriting: any;
+        subjectExamSkills: any;
+    };
+    space: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+        "9": any;
+        "24": any;
+    };
+    fontSizes: {
+        xs: any;
+        sm: any;
+        md: any;
+        lg: any;
+        xl: any;
+        "2xl": any;
+        "3xl": any;
+        "4xl": any;
+    };
+    fonts: {
+        sans: any;
+        mono: any;
+        display: any;
+        body: any;
+    };
+    sizes: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+    };
+    radii: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        round: any;
+    };
+    shadows: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+    };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
+        background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
+    };
+    size: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">) => {
+        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
+        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
+    };
+    p: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    pt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    pr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    pb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    pl: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    px: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    py: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    m: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    mt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    mr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    mb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    ml: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    mx: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    my: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+}>>;
+export declare const PaginationNextButton: (props: Partial<React.ComponentProps<typeof StyledActionIcon>>) => JSX.Element;
+export {};

package/dist/components/pagination/PaginationNextButton.js

@@ -0,0 +1,2 @@
+import{ChevronRight as c}from"@atom-learning/icons";import*as i from"react";import{styled as p}from"../../stitches.js";import{ActionIcon as d}from"../action-icon/ActionIcon.js";import{Icon as g}from"../icon/Icon.js";import{TRUNCATED_THRESHOLD as u}from"./pagination.constants.js";import{getPaginationItemsToRender as f}from"./pagination.helper.js";import{usePagination as b}from"./usePagination.js";const P=p(d,{ml:"$1","&:disabled":{opacity:"0.3"}}),x=n=>{const{goToNextPage:r,currentPage:t,pagesCount:e,labels:o,disabledPages:a,isMaxVisibleElementCount:m}=b(),l=f(t,e,u,m),s=t===e||a.includes(e)&&l.includes(e-1);return i.createElement(P,{hasTooltip:!1,size:"md",theme:"neutral",onClick:r,disabled:s,...n,label:(o==null?void 0:o.nextPageButtonLabel)||"Next page"},i.createElement(g,{is:c}))};export{x as PaginationNextButton};
+//# sourceMappingURL=PaginationNextButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationNextButton.js","sources":["../../../src/components/pagination/PaginationNextButton.tsx"],"sourcesContent":["import { ChevronRight } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { styled } from '~/stitches'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { TRUNCATED_THRESHOLD } from './pagination.constants'\nimport { getPaginationItemsToRender } from './pagination.helper'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n  ml: '$1',\n  '&:disabled': {\n    opacity: '0.3'\n  }\n})\n\nexport const PaginationNextButton = (\n  props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n  const {\n    goToNextPage,\n    currentPage,\n    pagesCount,\n    labels,\n    disabledPages,\n    isMaxVisibleElementCount\n  } = usePagination()\n\n  const paginationItemsInview = getPaginationItemsToRender(\n    currentPage,\n    pagesCount,\n    TRUNCATED_THRESHOLD,\n    isMaxVisibleElementCount\n  )\n  // Check if we are on the last page or if the last page is disabled and the if the second to last page number is rendered\n  const isDisabled =\n    currentPage === pagesCount ||\n    (disabledPages.includes(pagesCount) &&\n      paginationItemsInview.includes(pagesCount - 1))\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"],"names":["StyledActionIcon","styled","ActionIcon","PaginationNextButton","props","goToNextPage","currentPage","pagesCount","labels","disabledPages","isMaxVisibleElementCount","usePagination","paginationItemsInview","getPaginationItemsToRender","TRUNCATED_THRESHOLD","isDisabled","React","Icon","ChevronRight"],"mappings":"+YAUA,MAAMA,EAAmBC,EAAOC,EAAY,CAC1C,GAAI,KACJ,aAAc,CACZ,QAAS,KACX,CACF,CAAC,EAEYC,EACXC,GACG,CACH,KAAM,CACJ,aAAAC,EACA,YAAAC,EACA,WAAAC,EACA,OAAAC,EACA,cAAAC,EACA,yBAAAC,CACF,EAAIC,EAAAA,EAEEC,EAAwBC,EAC5BP,EACAC,EACAO,EACAJ,CACF,EAEMK,EACJT,IAAgBC,GACfE,EAAc,SAASF,CAAU,GAChCK,EAAsB,SAASL,EAAa,CAAC,EAEjD,OACES,EAAA,cAAChB,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,QAASK,EACT,SAAUU,EACT,GAAGX,EACJ,OAAOI,GAAA,KAAA,OAAAA,EAAQ,sBAAuB,WAEtCQ,EAAAA,EAAA,cAACC,EAAA,CAAK,GAAIC,CAAc,CAAA,CAC1B,CAEJ"}

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const PaginationPages: () => JSX.Element;

package/dist/components/pagination/PaginationPages.js

@@ -0,0 +1,2 @@
+import*as t from"react";import"../accordion/Accordion.js";import"../action-icon/ActionIcon.js";import"../alert-dialog/AlertDialog.js";import"../alert-dialog/alert-context/AlertContext.js";import"../avatar/Avatar.js";import"../badge/Badge.js";import"../box/Box.js";import"../button/Button.js";import"../carousel/Carousel.js";import"../checkbox/Checkbox.js";import"../checkbox-field/CheckboxField.js";import"../chip/Chip.js";import"../chip/ChipGroup.js";import"../chip-dismissible-group/index.js";import"../chip-toggle-group/index.js";import"../combobox/Combobox.js";import"../data-table/DataTableContext.js";import"../data-table/DataTable.js";import"../date-field/DateField.js";import"../date-input/DateInput.js";import"../dialog/Dialog.js";import"../dismissible/index.js";import"../dismissible-group/index.js";import"../divider/Divider.js";import"../dropdown-menu/DropdownMenu.js";import"../empty-state/EmptyState.js";import"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../file-input/FileInput.js";import"../flex/Flex.js";import"../form/Form.js";import"dlv";import"react-hook-form";import"../grid/Grid.js";import"../heading/Heading.js";import"../icon/Icon.js";import"../image/Image.js";import"../inline-message/InlineMessage.js";import"../input/Input.js";import"../input-field/InputField.js";import"../label/Label.js";import"../link/Link.js";import"../list/List.js";import"../loader/Loader.js";import"../markdown-content/MarkdownContent.js";import"../navigation/NavigationMenu.js";import"../notification-badge/NotificationBadge.js";import"../number-input/NumberInput.js";import"../number-input-field/NumberInputField.js";import"./Pagination.js";import"../password-field/PasswordField.js";import"../password-input/PasswordInput.js";import"../popover/Popover.js";import"../progress-bar/ProgressBar.js";import"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import"../radio-button-field/RadioButtonField.js";import"../radio-card/RadioCard.js";import"@radix-ui/react-radio-group";import{Stack as g}from"../stack/Stack.js";import"../search-field/SearchField.js";import"../search-input/SearchInput.js";import"../section-message/SectionMessage.js";import"../select/Select.js";import"../select-field/SelectField.js";import"../sidedrawer/Sidedrawer.js";import"../slider/Slider.js";import"../slider-field/SliderField.js";import"../sortable/SortableHandle.js";import"../sortable/SortableItem.js";import"../sortable/SortableRoot.js";import"../stack-content/StackContent.js";import"../stepper/Stepper.js";import"../switch/Switch.js";import"../table/Table.js";import"../tabs/Tabs.js";import"../text/Text.js";import"../textarea/Textarea.js";import"../textarea-field/TextareaField.js";import"../toast/ToastProvider.js";import"../toggle-group/ToggleGroupButton.js";import"../toggle-group/ToggleGroupItem.js";import"../toggle-group/ToggleGroupRoot.js";import"../tooltip/Tooltip.js";import"../top-bar/TopBar.js";import"../video/Video.js";import"../banner/banner-regular/BannerRegular.js";import"../tile/Tile.js";import"../tile-interactive/TileInteractive.js";import"../tile-toggle-group/index.js";import{TRUNCATED_THRESHOLD as i}from"./pagination.constants.js";import{getPaginationItemsToRender as l}from"./pagination.helper.js";import{PaginationItem as p}from"./PaginationItem.js";import{PaginationPopover as s}from"./PaginationPopover.js";import{usePagination as u}from"./usePagination.js";const c=()=>{const{currentPage:e,pagesCount:o,isMaxVisibleElementCount:a}=u(),r=l(e,o,i,a),n=o>i;return t.createElement(g,{gap:1},r==null?void 0:r.map(m=>t.createElement(p,{key:m,pageNumber:m})),n&&t.createElement(s,null),t.createElement(p,{pageNumber:o}))};export{c as PaginationPages};
+//# sourceMappingURL=PaginationPages.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationPages.js","sources":["../../../src/components/pagination/PaginationPages.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Stack } from '..'\nimport { TRUNCATED_THRESHOLD } from './pagination.constants'\nimport { getPaginationItemsToRender } from './pagination.helper'\nimport { PaginationItem } from './PaginationItem'\nimport { PaginationPopover } from './PaginationPopover'\nimport { usePagination } from './usePagination'\n\nexport const PaginationPages = () => {\n  const { currentPage, pagesCount, isMaxVisibleElementCount } = usePagination()\n\n  const paginationItems = getPaginationItemsToRender(\n    currentPage,\n    pagesCount,\n    TRUNCATED_THRESHOLD,\n    isMaxVisibleElementCount\n  )\n\n  const isTruncated = pagesCount > TRUNCATED_THRESHOLD\n\n  return (\n    <Stack gap={1}>\n      {paginationItems?.map((pageNumber) => {\n        return <PaginationItem key={pageNumber} pageNumber={pageNumber} />\n      })}\n      {isTruncated && <PaginationPopover />}\n      <PaginationItem pageNumber={pagesCount} />\n    </Stack>\n  )\n}\n"],"names":["PaginationPages","currentPage","pagesCount","isMaxVisibleElementCount","usePagination","paginationItems","getPaginationItemsToRender","TRUNCATED_THRESHOLD","isTruncated","React","Stack","pageNumber","PaginationItem","PaginationPopover"],"mappings":"o3GASa,MAAAA,EAAkB,IAAM,CACnC,KAAM,CAAE,YAAAC,EAAa,WAAAC,EAAY,yBAAAC,CAAyB,EAAIC,EAExDC,EAAAA,EAAkBC,EACtBL,EACAC,EACAK,EACAJ,CACF,EAEMK,EAAcN,EAAaK,EAEjC,OACEE,EAAA,cAACC,EAAA,CAAM,IAAK,CAAA,EACTL,GAAA,KAAAA,OAAAA,EAAiB,IAAKM,GACdF,EAAA,cAACG,EAAA,CAAe,IAAKD,EAAY,WAAYA,CAAY,CAAA,CAAA,EAEjEH,GAAeC,EAAA,cAACI,EAAA,IAAkB,EACnCJ,EAAA,cAACG,EAAA,CAAe,WAAYV,CAAAA,CAAY,CAC1C,CAEJ"}

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const PaginationPopover: () => JSX.Element;