@digigov/ui 2.0.0-7d9a8d86 → 2.0.0-834daea4

package/navigation/NavList/hooks/useTogglableNav.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/NavList/hooks/useTogglableNav.tsx"],
-  "sourcesContent": ["/* eslint-disable no-case-declarations */\nimport { useRef, useState, useCallback, useMemo } from 'react';\n\nexport interface UseTogglableNavInterface {\n  toggleProperty: string;\n  singleOpen?: boolean;\n  toggleOpenClose?: boolean;\n  toggleParentOpen?: boolean;\n  onToggleProperty: string;\n  initial?: Record<string, boolean>;\n  firstOpen?: boolean;\n  ariaNavigation?: boolean;\n  toggleHook?: (id: string) => void;\n}\n\nexport interface UseTogglableNavReturn {\n  registerButton: (el: string) => any;\n  registerLink: (el: string) => any;\n  registerNavItem: (item: any) => any;\n  registered: { current: Record<string, { el: HTMLElement; type: string }> };\n  opened: Record<string, boolean>;\n  toggle: (id: string) => void;\n  setOpened: (\n    opened:\n      | ((curOpened: Record<string, boolean>) => Record<string, boolean>)\n      | Record<string, boolean>\n  ) => void;\n}\n\nexport function useTogglableNav({\n  toggleProperty,\n  toggleOpenClose,\n  toggleParentOpen,\n  onToggleProperty,\n  initial,\n  ariaNavigation,\n  toggleHook,\n}: UseTogglableNavInterface): UseTogglableNavReturn {\n  const [opened, setOpened] = useState(initial || {});\n  const registered = useRef<Record<string, { el: HTMLElement; type: string }>>(\n    {}\n  );\n  const openedKeys = useRef<string[]>([]);\n\n  const toggle = useCallback((e) => {\n    const key = e.currentTarget.getAttribute('aria-controls') as string;\n    const selected = ((e.currentTarget.getAttribute(\n      'aria-selected'\n    ) as string) === 'true') as boolean;\n    if (toggleHook) {\n      toggleHook(key);\n    }\n    e.preventDefault();\n    if (toggleOpenClose) {\n      if (toggleParentOpen) {\n        const items = key.split('__');\n        const currentKey = items.slice(0, items.length).join('__');\n        const totalKeys = items.map((_, index) => {\n          return items.slice(0, index + 1).join('__');\n        });\n\n        if (!selected && !openedKeys.current.includes(currentKey)) {\n          openedKeys.current.push(currentKey);\n        }\n        if (selected && openedKeys.current.includes(currentKey)) {\n          openedKeys.current = openedKeys.current.filter(\n            (k) => k !== currentKey\n          );\n        }\n\n        setOpened((_) => ({\n          ...totalKeys.reduce((acc, cur) => {\n            acc[cur] = cur === currentKey ? !selected : true;\n            return acc;\n          }, {}),\n        }));\n      } else {\n        setOpened({ [key]: !selected });\n      }\n    } else {\n      setOpened({ [key]: true });\n    }\n  }, []);\n\n  const getMenuItems = (element) => {\n    if (element) {\n      if (element?.role === 'menuitem') {\n        return element;\n      } else {\n        const childrenArray = Array.from(element?.children);\n        const menuItemsArray: any[] = [];\n        childrenArray.forEach((child) => {\n          const menuItem = getMenuItems(child);\n          if (menuItem && !menuItemsArray.includes(menuItem)) {\n            menuItemsArray.push(menuItem);\n          }\n        });\n        return menuItemsArray.flatMap((x) => x);\n      }\n    }\n    return null;\n  };\n\n  const findChildren = (parent, items) => {\n    return items\n      ? items.filter(\n          (child) => child.slice(0, child.lastIndexOf('__')) === parent\n        )\n      : items;\n  };\n\n  const findParent = (child, items) => {\n    const parent = child.slice(0, child.lastIndexOf('__'));\n    return items.find((item) => item === parent) ? parent : null;\n  };\n\n  const findSiblings = (key, items) => {\n    const parent = key.slice(0, key.lastIndexOf('__'));\n    if (key.lastIndexOf('__') > 0) {\n      return items.filter(\n        (child) => child.slice(0, child.lastIndexOf('__')) === parent\n      );\n    }\n    return items.filter((child) => !child.includes('__'));\n  };\n\n  const findLeftSibling = (key, items) => {\n    const siblings = findSiblings(key, items);\n    if (siblings.length > 0) {\n      const keyIndex = siblings.findIndex((item) => item === key);\n      return keyIndex > 0 ? siblings[keyIndex - 1] : null;\n    }\n    return null;\n  };\n\n  const findRightSibling = (key, items) => {\n    const siblings = findSiblings(key, items);\n    if (siblings.length > 0) {\n      const keyIndex = siblings.findIndex((item) => item === key);\n      return keyIndex < siblings.length - 1 ? siblings[keyIndex + 1] : null;\n    }\n    return null;\n  };\n\n  const getOpenItemChildren = (currentItem, items) => {\n    const itemChildrenArray: any[] = [];\n    const itemChildren = findChildren(currentItem, items);\n    itemChildren.forEach((item) => {\n      if (openedKeys.current.includes(item)) {\n        itemChildrenArray.push(item);\n        const internChildren = getOpenItemChildren(item, items);\n        if (internChildren.length > 0) {\n          itemChildrenArray.push(internChildren);\n        }\n      } else {\n        itemChildrenArray.push(item);\n      }\n    });\n    return itemChildrenArray.flatMap((x) => x);\n  };\n\n  const onKeyDown = useCallback((e) => {\n    const orientation = document\n      .querySelector(`[aria-orientation]`)\n      ?.getAttribute('aria-orientation');\n    const key = e.target.getAttribute('aria-controls');\n    const keys = Object.entries(registered.current).map(\n      ([entryKey, _]) => entryKey\n    );\n\n    const handleArrowRight = () => {\n      const arrowRightItem = findRightSibling(key, keys);\n      if (arrowRightItem) {\n        registered.current[arrowRightItem].el.focus();\n      }\n    };\n\n    const handleArrowLeft = () => {\n      const arrowLeftItem = findLeftSibling(key, keys);\n      if (arrowLeftItem) {\n        registered.current[arrowLeftItem].el.focus();\n      }\n    };\n\n    switch (e.key) {\n      case 'ArrowRight':\n        handleArrowRight();\n        break;\n      case 'ArrowDown':\n        const openItem = getOpenItemChildren(key, keys);\n        const arrowDownItems = findChildren(key, openItem);\n        const menuItems = getMenuItems(document.getElementById(key));\n\n        if (arrowDownItems.length > 0) {\n          registered.current[arrowDownItems[0]].el.focus();\n        } else {\n          if (orientation === 'vertical') {\n            if (\n              document.activeElement?.getAttribute('aria-selected') ===\n                'true' &&\n              menuItems &&\n              menuItems.length > 0\n            ) {\n              menuItems[0].focus();\n            } else {\n              handleArrowRight();\n            }\n          } else {\n            if (menuItems && menuItems.length > 0) {\n              menuItems[0].focus();\n            }\n          }\n        }\n\n        break;\n      case 'ArrowLeft':\n        handleArrowLeft();\n        break;\n      case 'ArrowUp':\n        if (orientation === 'vertical') {\n          handleArrowLeft();\n        } else {\n          const arrowUpItem = findParent(key, keys);\n          if (arrowUpItem) {\n            registered.current[arrowUpItem].el.focus();\n          }\n        }\n        break;\n      case ' ':\n      case 'Enter':\n        if (registered.current[key].type === 'link') {\n          registered.current[key].el.click();\n        } else {\n          toggle(e);\n        }\n        break;\n    }\n  }, []);\n  const registerButtonRef = useCallback((el) => {\n    if (!el) return;\n    const key = el.getAttribute('aria-controls') as string;\n    if (registered.current[key]) return;\n    registered.current[key] = {\n      el,\n      type: 'button',\n    };\n  }, []);\n\n  const registerLinkRef = useCallback((el) => {\n    if (!el) return;\n    const key = el.getAttribute('aria-controls') as string;\n    if (registered.current[key]) return;\n    registered.current[key] = {\n      el,\n      type: 'link',\n    };\n  }, []);\n  const registerButton = useCallback(\n    (key) => {\n      const isOpen = !!opened[key];\n      return {\n        ref: registerButtonRef,\n        [toggleProperty]: isOpen,\n        [onToggleProperty]: toggle,\n        'aria-controls': `${key}`,\n        ...(ariaNavigation && { onKeyDown }),\n      };\n    },\n    [opened]\n  );\n\n  const registerLink = useCallback(\n    (key) => {\n      return {\n        ref: registerLinkRef,\n        'aria-controls': `${key}`,\n        ...(ariaNavigation && { onKeyDown }),\n      };\n    },\n    [opened]\n  );\n  const registerNavItem = useCallback(\n    (item) => {\n      if (item.subMenu || item.menu) {\n        return { ...registerButton(item.name), role: 'button' };\n      } else if (item.href) {\n        return { ...registerLink(item.name), href: item.href };\n      } else {\n        console.error(item);\n        throw new Error('Invalid nav item. Must be either button or link');\n      }\n    },\n    [opened]\n  );\n  return useMemo(\n    () => ({\n      registerNavItem,\n      registerButton,\n      registerLink,\n      registered,\n      opened,\n      toggle,\n      setOpened,\n    }),\n    [opened]\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable no-case-declarations */\nimport { useRef, useState, useCallback, useMemo } from 'react';\n\nexport interface UseTogglableNavInterface {\n  toggleProperty: string;\n  singleOpen?: boolean;\n  toggleOpenClose?: boolean;\n  toggleParentOpen?: boolean;\n  onToggleProperty: string;\n  initial?: Record<string, boolean>;\n  firstOpen?: boolean;\n  ariaNavigation?: boolean;\n  toggleHook?: (id: string) => void;\n}\n\nexport interface UseTogglableNavReturn {\n  registerButton: (el: string) => any;\n  registerLink: (el: string) => any;\n  registerNavItem: (item: any) => any;\n  registered: { current: Record<string, { el: HTMLElement; type: string }> };\n  opened: Record<string, boolean>;\n  toggle: (id: string) => void;\n  setOpened: (\n    opened:\n      | ((curOpened: Record<string, boolean>) => Record<string, boolean>)\n      | Record<string, boolean>\n  ) => void;\n}\n\nexport function useTogglableNav({\n  toggleProperty,\n  toggleOpenClose,\n  toggleParentOpen,\n  onToggleProperty,\n  initial,\n  ariaNavigation,\n  toggleHook,\n}: UseTogglableNavInterface): UseTogglableNavReturn {\n  const [opened, setOpened] = useState(initial || {});\n  const registered = useRef<Record<string, { el: HTMLElement; type: string }>>(\n    {}\n  );\n  const openedKeys = useRef<string[]>([]);\n\n  const toggle = useCallback((e) => {\n    const key = e.currentTarget.getAttribute('aria-controls') as string;\n    const selected = ((e.currentTarget.getAttribute(\n      'aria-selected'\n    ) as string) === 'true') as boolean;\n    if (toggleHook) {\n      toggleHook(key);\n    }\n    e.preventDefault();\n    if (toggleOpenClose) {\n      if (toggleParentOpen) {\n        const items = key.split('__');\n        const currentKey = items.slice(0, items.length).join('__');\n        const totalKeys = items.map((_, index) => {\n          return items.slice(0, index + 1).join('__');\n        });\n\n        if (!selected && !openedKeys.current.includes(currentKey)) {\n          openedKeys.current.push(currentKey);\n        }\n        if (selected && openedKeys.current.includes(currentKey)) {\n          openedKeys.current = openedKeys.current.filter(\n            (k) => k !== currentKey\n          );\n        }\n\n        setOpened((_) => ({\n          ...totalKeys.reduce((acc, cur) => {\n            acc[cur] = cur === currentKey ? !selected : true;\n            return acc;\n          }, {}),\n        }));\n      } else {\n        setOpened({ [key]: !selected });\n      }\n    } else {\n      setOpened({ [key]: true });\n    }\n  }, []);\n\n  const getMenuItems = (element) => {\n    if (element) {\n      if (element?.role === 'menuitem') {\n        return element;\n      } else {\n        const childrenArray = Array.from(element?.children);\n        const menuItemsArray: any[] = [];\n        childrenArray.forEach((child) => {\n          const menuItem = getMenuItems(child);\n          if (menuItem && !menuItemsArray.includes(menuItem)) {\n            menuItemsArray.push(menuItem);\n          }\n        });\n        return menuItemsArray.flatMap((x) => x);\n      }\n    }\n    return null;\n  };\n\n  const findChildren = (parent, items) => {\n    return items\n      ? items.filter(\n          (child) => child.slice(0, child.lastIndexOf('__')) === parent\n        )\n      : items;\n  };\n\n  const findParent = (child, items) => {\n    const parent = child.slice(0, child.lastIndexOf('__'));\n    return items.find((item) => item === parent) ? parent : null;\n  };\n\n  const findSiblings = (key, items) => {\n    const parent = key.slice(0, key.lastIndexOf('__'));\n    if (key.lastIndexOf('__') > 0) {\n      return items.filter(\n        (child) => child.slice(0, child.lastIndexOf('__')) === parent\n      );\n    }\n    return items.filter((child) => !child.includes('__'));\n  };\n\n  const findLeftSibling = (key, items) => {\n    const siblings = findSiblings(key, items);\n    if (siblings.length > 0) {\n      const keyIndex = siblings.findIndex((item) => item === key);\n      return keyIndex > 0 ? siblings[keyIndex - 1] : null;\n    }\n    return null;\n  };\n\n  const findRightSibling = (key, items) => {\n    const siblings = findSiblings(key, items);\n    if (siblings.length > 0) {\n      const keyIndex = siblings.findIndex((item) => item === key);\n      return keyIndex < siblings.length - 1 ? siblings[keyIndex + 1] : null;\n    }\n    return null;\n  };\n\n  const getOpenItemChildren = (currentItem, items) => {\n    const itemChildrenArray: any[] = [];\n    const itemChildren = findChildren(currentItem, items);\n    itemChildren.forEach((item) => {\n      if (openedKeys.current.includes(item)) {\n        itemChildrenArray.push(item);\n        const internChildren = getOpenItemChildren(item, items);\n        if (internChildren.length > 0) {\n          itemChildrenArray.push(internChildren);\n        }\n      } else {\n        itemChildrenArray.push(item);\n      }\n    });\n    return itemChildrenArray.flatMap((x) => x);\n  };\n\n  const onKeyDown = useCallback((e) => {\n    const orientation = document\n      .querySelector(`[aria-orientation]`)\n      ?.getAttribute('aria-orientation');\n    const key = e.target.getAttribute('aria-controls');\n    const keys = Object.entries(registered.current).map(\n      ([entryKey, _]) => entryKey\n    );\n\n    const handleArrowRight = () => {\n      const arrowRightItem = findRightSibling(key, keys);\n      if (arrowRightItem) {\n        registered.current[arrowRightItem].el.focus();\n      }\n    };\n\n    const handleArrowLeft = () => {\n      const arrowLeftItem = findLeftSibling(key, keys);\n      if (arrowLeftItem) {\n        registered.current[arrowLeftItem].el.focus();\n      }\n    };\n\n    switch (e.key) {\n      case 'ArrowRight':\n        handleArrowRight();\n        break;\n      case 'ArrowDown':\n        const openItem = getOpenItemChildren(key, keys);\n        const arrowDownItems = findChildren(key, openItem);\n        const menuItems = getMenuItems(document.getElementById(key));\n\n        if (arrowDownItems.length > 0) {\n          registered.current[arrowDownItems[0]].el.focus();\n        } else {\n          if (orientation === 'vertical') {\n            if (\n              document.activeElement?.getAttribute('aria-selected') ===\n                'true' &&\n              menuItems &&\n              menuItems.length > 0\n            ) {\n              menuItems[0].focus();\n            } else {\n              handleArrowRight();\n            }\n          } else {\n            if (menuItems && menuItems.length > 0) {\n              menuItems[0].focus();\n            }\n          }\n        }\n\n        break;\n      case 'ArrowLeft':\n        handleArrowLeft();\n        break;\n      case 'ArrowUp':\n        if (orientation === 'vertical') {\n          handleArrowLeft();\n        } else {\n          const arrowUpItem = findParent(key, keys);\n          if (arrowUpItem) {\n            registered.current[arrowUpItem].el.focus();\n          }\n        }\n        break;\n      case ' ':\n      case 'Enter':\n        if (registered.current[key].type === 'link') {\n          registered.current[key].el.click();\n        } else {\n          toggle(e);\n        }\n        break;\n    }\n  }, []);\n  const registerButtonRef = useCallback((el) => {\n    if (!el) return;\n    const key = el.getAttribute('aria-controls') as string;\n    if (registered.current[key]) return;\n    registered.current[key] = {\n      el,\n      type: 'button',\n    };\n  }, []);\n\n  const registerLinkRef = useCallback((el) => {\n    if (!el) return;\n    const key = el.getAttribute('aria-controls') as string;\n    if (registered.current[key]) return;\n    registered.current[key] = {\n      el,\n      type: 'link',\n    };\n  }, []);\n  const registerButton = useCallback(\n    (key) => {\n      const isOpen = !!opened[key];\n      return {\n        ref: registerButtonRef,\n        [toggleProperty]: isOpen,\n        arrow: true,\n        [onToggleProperty]: toggle,\n        'aria-controls': `${key}`,\n        ...(ariaNavigation && { onKeyDown }),\n      };\n    },\n    [opened]\n  );\n\n  const registerLink = useCallback(\n    (key) => {\n      return {\n        ref: registerLinkRef,\n        'aria-controls': `${key}`,\n        ...(ariaNavigation && { onKeyDown }),\n      };\n    },\n    [opened]\n  );\n  const registerNavItem = useCallback(\n    (item) => {\n      if (item.subMenu || item.menu) {\n        return { ...registerButton(item.name), role: 'button' };\n      } else if (item.href) {\n        return { ...registerLink(item.name), href: item.href };\n      } else {\n        console.error(item);\n        throw new Error('Invalid nav item. Must be either button or link');\n      }\n    },\n    [opened]\n  );\n  return useMemo(\n    () => ({\n      registerNavItem,\n      registerButton,\n      registerLink,\n      registered,\n      opened,\n      toggle,\n      setOpened,\n    }),\n    [opened]\n  );\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/navigation/NavList/index.d.ts

@@ -12,6 +12,7 @@ export * from '@digigov/react-core/NavMenuContentListItem';
 export * from '@digigov/react-core/NavMenuTitle';
 export * from '@digigov/react-core/NavListItemActionContainer';
 export * from '@digigov/react-core/NavListItemAction';
-export * from '@digigov/react-core/NavListItemLink';
+export * from '@digigov/react-core/NavListItemBadge';
 export * from '@digigov/react-core/NavListItemButton';
+export * from '@digigov/react-core/NavListItemLink';
 export default NavList;

package/navigation/NavList/index.js

@@ -12,8 +12,9 @@ export * from "@digigov/react-core/NavMenuContentListItem";
 export * from "@digigov/react-core/NavMenuTitle";
 export * from "@digigov/react-core/NavListItemActionContainer";
 export * from "@digigov/react-core/NavListItemAction";
-export * from "@digigov/react-core/NavListItemLink";
+export * from "@digigov/react-core/NavListItemBadge";
 export * from "@digigov/react-core/NavListItemButton";
+export * from "@digigov/react-core/NavListItemLink";
 var NavList_default = NavList;
 export {
   NavList_default as default

package/navigation/NavList/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/navigation/NavList/index.tsx"],
-  "sourcesContent": ["import NavList from '@digigov/react-core/NavList';\nexport * from '@digigov/ui/navigation/NavList/NavListAuto';\nexport * from '@digigov/ui/navigation/NavList/NavMenuContentList';\nexport * from '@digigov/ui/navigation/NavList/types';\nexport * from '@digigov/ui/navigation/NavList/hooks/useNavList';\n\nexport * from '@digigov/react-core/Nav';\nexport * from '@digigov/react-core/NavList';\nexport * from '@digigov/react-core/NavMenuContainer';\nexport * from '@digigov/react-core/NavMenuContent';\nexport * from '@digigov/react-core/NavMenuContentListBase';\nexport * from '@digigov/react-core/NavMenuContentListItem';\nexport * from '@digigov/react-core/NavMenuTitle';\nexport * from '@digigov/react-core/NavListItemActionContainer';\nexport * from '@digigov/react-core/NavListItemAction';\nexport * from '@digigov/react-core/NavListItemLink';\nexport * from '@digigov/react-core/NavListItemButton';\nexport default NavList;\n"],
-  "mappings": "AAAA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAO,kBAAQ;",
+  "sourcesContent": ["import NavList from '@digigov/react-core/NavList';\nexport * from '@digigov/ui/navigation/NavList/NavListAuto';\nexport * from '@digigov/ui/navigation/NavList/NavMenuContentList';\nexport * from '@digigov/ui/navigation/NavList/types';\nexport * from '@digigov/ui/navigation/NavList/hooks/useNavList';\n\nexport * from '@digigov/react-core/Nav';\nexport * from '@digigov/react-core/NavList';\nexport * from '@digigov/react-core/NavMenuContainer';\nexport * from '@digigov/react-core/NavMenuContent';\nexport * from '@digigov/react-core/NavMenuContentListBase';\nexport * from '@digigov/react-core/NavMenuContentListItem';\nexport * from '@digigov/react-core/NavMenuTitle';\nexport * from '@digigov/react-core/NavListItemActionContainer';\nexport * from '@digigov/react-core/NavListItemAction';\nexport * from '@digigov/react-core/NavListItemBadge';\nexport * from '@digigov/react-core/NavListItemButton';\nexport * from '@digigov/react-core/NavListItemLink';\nexport default NavList;\n"],
+  "mappings": "AAAA,OAAO,aAAa;AACpB,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,IAAO,kBAAQ;",
   "names": []
 }

package/navigation/NavList/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/navigation/NavList/interaction.test.d.ts

@@ -0,0 +1 @@
+export {};

package/navigation/NavList/types.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { NavProps } from '@digigov/ui/navigation/NavList';
+import { NavProps } from '@digigov/react-core/Nav';
 export type NavListLayout = 'horizontal' | 'vertical';
 interface NavListItemMenuInterface {
     links: NavListItemLinkInterface[];

package/navigation/Pagination/Pagination/index.js

@@ -0,0 +1,48 @@
+import React from "react";
+import Pagination from "@digigov/react-core/Pagination";
+import PaginationLabelContainer from "@digigov/react-core/PaginationLabelContainer";
+import PaginationListItem from "@digigov/react-core/PaginationListItem";
+import ChevronIcon from "@digigov/react-icons/ChevronIcon";
+import Button from "@digigov/ui/form/Button";
+import LabelContainer from "@digigov/ui/form/LabelContainer";
+import SelectContainer, {
+  SelectOption
+} from "@digigov/ui/form/SelectContainer";
+import { I18nText } from "@digigov/ui/i18n/I18nText";
+var Pagination_default = Pagination;
+const PaginationLabel = React.forwardRef(function PaginationLabel2({ start, end, total }, ref) {
+  return /* @__PURE__ */ React.createElement(PaginationLabelContainer, { ref }, /* @__PURE__ */ React.createElement(I18nText, { i18nKey: "pagination.label" }, "Showing ", /* @__PURE__ */ React.createElement("b", null, start), " to ", /* @__PURE__ */ React.createElement("b", null, end), " of ", /* @__PURE__ */ React.createElement("b", null, total), " results"));
+});
+const PaginationResultsPerPageSelect = React.forwardRef(function PaginationResultsPerPageSelect2({ resultsPerPageOptions, currentResultsPerPage, handleOnChange, children }, ref) {
+  return /* @__PURE__ */ React.createElement(LabelContainer, { ref }, children, /* @__PURE__ */ React.createElement(
+    SelectContainer,
+    {
+      dense: true,
+      value: currentResultsPerPage,
+      onChange: (e) => {
+        handleOnChange(Number(e.target.value));
+      }
+    },
+    resultsPerPageOptions.map((option, index) => /* @__PURE__ */ React.createElement(SelectOption, { key: index }, option))
+  ));
+});
+const PaginationListItemButton = React.forwardRef(function PaginationListItemButton2({ onClick, arrow, children, variant, active, isCurrentPage, tabIndex }, ref) {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    PaginationListItem,
+    {
+      tabIndex,
+      active,
+      currentPage: isCurrentPage,
+      ref,
+      variant
+    },
+    isCurrentPage ? children : /* @__PURE__ */ React.createElement(Button, { variant: "link", onClick }, arrow === "left" && /* @__PURE__ */ React.createElement(ChevronIcon, { direction: arrow }), children, arrow === "right" && /* @__PURE__ */ React.createElement(ChevronIcon, { direction: arrow }))
+  ));
+});
+export {
+  PaginationLabel,
+  PaginationListItemButton,
+  PaginationResultsPerPageSelect,
+  Pagination_default as default
+};
+//# sourceMappingURL=Pagination.js.map

package/{feedback/ErrorSummary/index.spec → navigation/Pagination/Pagination}/package.json

@@ -2,5 +2,5 @@
   "sideEffects": false,
   "module": "./index.js",
   "types": "./index.d.ts",
-  "main": "../../../cjs/feedback/ErrorSummary/index.spec/index.js"
+  "main": "../../../cjs/navigation/Pagination/Pagination/index.js"
 }

package/navigation/Pagination/Pagination.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import Pagination from '@digigov/react-core/Pagination';
+import { PaginationLabelContainerProps } from '@digigov/react-core/PaginationLabelContainer';
+import { LabelContainerProps } from '@digigov/ui/form/LabelContainer';
+export default Pagination;
+export interface PaginationLabelProps extends PaginationLabelContainerProps {
+    /**
+     * Use start to set the value of the start point of the results shown.
+     */
+    start: number;
+    /**
+     * Use end to set the value of the end point of the results shown.
+     */
+    end: number;
+    /**
+     * Use total to set the value of the total results.
+     */
+    total: number;
+}
+export interface PaginationResultsPerPageSelectProps extends LabelContainerProps {
+    resultsPerPageOptions: number[];
+    currentResultsPerPage: number;
+    handleOnChange: React.Dispatch<React.SetStateAction<number>>;
+}
+export interface PaginationListItemButtonProps {
+    arrow?: 'left' | 'right';
+    children?: string | number;
+    variant?: 'number' | 'dots';
+    active?: boolean;
+    onClick?: (e: any) => void;
+    isCurrentPage?: boolean;
+    tabIndex?: number;
+}
+/**
+ * PaginationLabel component is used for placing the pagination results label.
+ */
+export declare const PaginationLabel: React.ForwardRefExoticComponent<Omit<PaginationLabelProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export declare const PaginationResultsPerPageSelect: React.ForwardRefExoticComponent<Omit<PaginationResultsPerPageSelectProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+export declare const PaginationListItemButton: React.ForwardRefExoticComponent<PaginationListItemButtonProps & React.RefAttributes<HTMLLIElement>>;

package/navigation/Pagination/Pagination.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/navigation/Pagination/Pagination.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport Pagination from '@digigov/react-core/Pagination';\nimport PaginationLabelContainer, {\n  PaginationLabelContainerProps,\n} from '@digigov/react-core/PaginationLabelContainer';\nimport PaginationListItem from '@digigov/react-core/PaginationListItem';\nimport ChevronIcon from '@digigov/react-icons/ChevronIcon';\nimport Button from '@digigov/ui/form/Button';\nimport LabelContainer, {\n  LabelContainerProps,\n} from '@digigov/ui/form/LabelContainer';\nimport SelectContainer, {\n  SelectOption,\n} from '@digigov/ui/form/SelectContainer';\nimport { I18nText } from '@digigov/ui/i18n/I18nText';\n\nexport default Pagination;\n\nexport interface PaginationLabelProps extends PaginationLabelContainerProps {\n  /**\n   * Use start to set the value of the start point of the results shown.\n   */\n  start: number;\n  /**\n   * Use end to set the value of the end point of the results shown.\n   */\n  end: number;\n  /**\n   * Use total to set the value of the total results.\n   */\n  total: number;\n}\nexport interface PaginationResultsPerPageSelectProps\n  extends LabelContainerProps {\n  resultsPerPageOptions: number[];\n  currentResultsPerPage: number;\n  handleOnChange: React.Dispatch<React.SetStateAction<number>>;\n}\n\nexport interface PaginationListItemButtonProps {\n  arrow?: 'left' | 'right';\n  children?: string | number;\n  variant?: 'number' | 'dots';\n  active?: boolean;\n  onClick?: (e: any) => void;\n  isCurrentPage?: boolean;\n  tabIndex?: number;\n}\n/**\n * PaginationLabel component is used for placing the pagination results label.\n */\nexport const PaginationLabel = React.forwardRef<\n  HTMLParagraphElement,\n  PaginationLabelProps\n>(function PaginationLabel(\n  { start, end, total },\n  ref: React.Ref<HTMLParagraphElement>\n) {\n  return (\n    <PaginationLabelContainer ref={ref}>\n      <I18nText i18nKey=\"pagination.label\">\n        Showing <b>{start}</b> to <b>{end}</b> of <b>{total}</b> results\n      </I18nText>\n    </PaginationLabelContainer>\n  );\n});\n\nexport const PaginationResultsPerPageSelect = React.forwardRef<\n  HTMLLabelElement,\n  PaginationResultsPerPageSelectProps\n>(function PaginationResultsPerPageSelect(\n  { resultsPerPageOptions, currentResultsPerPage, handleOnChange, children },\n  ref: React.Ref<HTMLLabelElement>\n) {\n  return (\n    <LabelContainer ref={ref}>\n      {children}\n      <SelectContainer\n        dense\n        value={currentResultsPerPage}\n        onChange={(e) => {\n          handleOnChange(Number(e.target.value));\n        }}\n      >\n        {resultsPerPageOptions.map((option, index) => (\n          <SelectOption key={index}>{option}</SelectOption>\n        ))}\n      </SelectContainer>\n    </LabelContainer>\n  );\n});\n\nexport const PaginationListItemButton = React.forwardRef<\n  HTMLLIElement,\n  PaginationListItemButtonProps\n>(function PaginationListItemButton(\n  { onClick, arrow, children, variant, active, isCurrentPage, tabIndex },\n  ref: React.Ref<HTMLLIElement>\n) {\n  return (\n    <>\n      <PaginationListItem\n        tabIndex={tabIndex}\n        active={active} //disabled\n        currentPage={isCurrentPage}\n        ref={ref}\n        variant={variant}\n      >\n        {isCurrentPage ? (\n          children\n        ) : (\n          <Button variant=\"link\" onClick={onClick}>\n            {arrow === 'left' && <ChevronIcon direction={arrow} />}\n            {children}\n            {arrow === 'right' && <ChevronIcon direction={arrow} />}\n          </Button>\n        )}\n      </PaginationListItem>\n    </>\n  );\n});\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,gBAAgB;AACvB,OAAO,8BAEA;AACP,OAAO,wBAAwB;AAC/B,OAAO,iBAAiB;AACxB,OAAO,YAAY;AACnB,OAAO,oBAEA;AACP,OAAO;AAAA,EACL;AAAA,OACK;AACP,SAAS,gBAAgB;AAEzB,IAAO,qBAAQ;AAmCR,MAAM,kBAAkB,MAAM,WAGnC,SAASA,iBACT,EAAE,OAAO,KAAK,MAAM,GACpB,KACA;AACA,SACE,oCAAC,4BAAyB,OACxB,oCAAC,YAAS,SAAQ,sBAAmB,YAC3B,oCAAC,WAAG,KAAM,GAAI,QAAI,oCAAC,WAAG,GAAI,GAAI,QAAI,oCAAC,WAAG,KAAM,GAAI,UAC1D,CACF;AAEJ,CAAC;AAEM,MAAM,iCAAiC,MAAM,WAGlD,SAASC,gCACT,EAAE,uBAAuB,uBAAuB,gBAAgB,SAAS,GACzE,KACA;AACA,SACE,oCAAC,kBAAe,OACb,UACD;AAAA,IAAC;AAAA;AAAA,MACC,OAAK;AAAA,MACL,OAAO;AAAA,MACP,UAAU,CAAC,MAAM;AACf,uBAAe,OAAO,EAAE,OAAO,KAAK,CAAC;AAAA,MACvC;AAAA;AAAA,IAEC,sBAAsB,IAAI,CAAC,QAAQ,UAClC,oCAAC,gBAAa,KAAK,SAAQ,MAAO,CACnC;AAAA,EACH,CACF;AAEJ,CAAC;AAEM,MAAM,2BAA2B,MAAM,WAG5C,SAASC,0BACT,EAAE,SAAS,OAAO,UAAU,SAAS,QAAQ,eAAe,SAAS,GACrE,KACA;AACA,SACE,0DACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA;AAAA;AAAA,IAEC,gBACC,WAEA,oCAAC,UAAO,SAAQ,QAAO,WACpB,UAAU,UAAU,oCAAC,eAAY,WAAW,OAAO,GACnD,UACA,UAAU,WAAW,oCAAC,eAAY,WAAW,OAAO,CACvD;AAAA,EAEJ,CACF;AAEJ,CAAC;",
+  "names": ["PaginationLabel", "PaginationResultsPerPageSelect", "PaginationListItemButton"]
+}

package/navigation/Pagination/Pagination.stories/index.js

@@ -6,14 +6,21 @@ var Pagination_stories_default = {
   component: Pagination,
   displayName: "Pagination"
 };
-export * from "@digigov/ui/navigation/Pagination/__stories__/Default";
-export * from "@digigov/ui/navigation/Pagination/__stories__/WithInactiveValues";
-export * from "@digigov/ui/navigation/Pagination/__stories__/WithResultsPerPage";
-export * from "@digigov/ui/navigation/Pagination/__stories__/PaginationSmall";
-export * from "@digigov/ui/navigation/Pagination/__stories__/PaginationWithSmallFont";
-export * from "@digigov/ui/navigation/Pagination/__stories__/WithHook";
-export * from "@digigov/ui/navigation/Pagination/__stories__/Auto";
+import { Default } from "@digigov/ui/navigation/Pagination/__stories__/Default";
+import { WithInactiveValues } from "@digigov/ui/navigation/Pagination/__stories__/WithInactiveValues";
+import { WithResultsPerPage } from "@digigov/ui/navigation/Pagination/__stories__/WithResultsPerPage";
+import { PaginationSmall } from "@digigov/ui/navigation/Pagination/__stories__/PaginationSmall";
+import { PaginationWithSmallFont } from "@digigov/ui/navigation/Pagination/__stories__/PaginationWithSmallFont";
+import { WithHook } from "@digigov/ui/navigation/Pagination/__stories__/WithHook";
+import { Auto } from "@digigov/ui/navigation/Pagination/__stories__/Auto";
 export {
+  Auto,
+  Default,
+  PaginationSmall,
+  PaginationWithSmallFont,
+  WithHook,
+  WithInactiveValues,
+  WithResultsPerPage,
   Pagination_stories_default as default
 };
 //# sourceMappingURL=Pagination.stories.js.map

package/navigation/Pagination/Pagination.stories.d.ts

@@ -6,11 +6,11 @@ declare namespace _default {
     export let displayName: string;
 }
 export default _default;
-export * from "@digigov/ui/navigation/Pagination/__stories__/Default";
-export * from "@digigov/ui/navigation/Pagination/__stories__/WithInactiveValues";
-export * from "@digigov/ui/navigation/Pagination/__stories__/WithResultsPerPage";
-export * from "@digigov/ui/navigation/Pagination/__stories__/PaginationSmall";
-export * from "@digigov/ui/navigation/Pagination/__stories__/PaginationWithSmallFont";
-export * from "@digigov/ui/navigation/Pagination/__stories__/WithHook";
-export * from "@digigov/ui/navigation/Pagination/__stories__/Auto";
+export { Default } from "@digigov/ui/navigation/Pagination/__stories__/Default";
+export { WithInactiveValues } from "@digigov/ui/navigation/Pagination/__stories__/WithInactiveValues";
+export { WithResultsPerPage } from "@digigov/ui/navigation/Pagination/__stories__/WithResultsPerPage";
+export { PaginationSmall } from "@digigov/ui/navigation/Pagination/__stories__/PaginationSmall";
+export { PaginationWithSmallFont } from "@digigov/ui/navigation/Pagination/__stories__/PaginationWithSmallFont";
+export { WithHook } from "@digigov/ui/navigation/Pagination/__stories__/WithHook";
+export { Auto } from "@digigov/ui/navigation/Pagination/__stories__/Auto";
 import Pagination from '@digigov/ui/navigation/Pagination';

package/navigation/Pagination/Pagination.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/navigation/Pagination/Pagination.stories.js"],
-  "sourcesContent": ["import Pagination from '@digigov/ui/navigation/Pagination';\nexport default {\n  title: 'Digigov UI/navigation/Pagination',\n  description:\n    'Use the pagination component to let users browse through a long list.',\n  link:\n    'https://guide.services.gov.gr/docs/patterns/admin-pages/components/pagination',\n  component: Pagination,\n  displayName: 'Pagination',\n};\nexport * from '@digigov/ui/navigation/Pagination/__stories__/Default';\nexport * from '@digigov/ui/navigation/Pagination/__stories__/WithInactiveValues';\nexport * from '@digigov/ui/navigation/Pagination/__stories__/WithResultsPerPage';\nexport * from '@digigov/ui/navigation/Pagination/__stories__/PaginationSmall';\nexport * from '@digigov/ui/navigation/Pagination/__stories__/PaginationWithSmallFont';\nexport * from '@digigov/ui/navigation/Pagination/__stories__/WithHook';\nexport * from '@digigov/ui/navigation/Pagination/__stories__/Auto';\n"],
-  "mappings": "AAAA;AACA,IAAO,6BAAQ;AAAA,EACb,OAAO;AAAA,EACP,aACE;AAAA,EACF,MACE;AAAA,EACF,WAAW;AAAA,EACX,aAAa;AAAA;AAEf;AACA;AACA;AACA;AACA;AACA;AACA;",
+  "sourcesContent": ["import Pagination from '@digigov/ui/navigation/Pagination';\nexport default {\n  title: 'Digigov UI/navigation/Pagination',\n  description:\n    'Use the pagination component to let users browse through a long list.',\n  link:\n    'https://guide.services.gov.gr/docs/patterns/admin-pages/components/pagination',\n  component: Pagination,\n  displayName: 'Pagination',\n};\nexport { Default } from '@digigov/ui/navigation/Pagination/__stories__/Default';\nexport { WithInactiveValues } from '@digigov/ui/navigation/Pagination/__stories__/WithInactiveValues';\nexport { WithResultsPerPage } from '@digigov/ui/navigation/Pagination/__stories__/WithResultsPerPage';\nexport { PaginationSmall } from '@digigov/ui/navigation/Pagination/__stories__/PaginationSmall';\nexport { PaginationWithSmallFont } from '@digigov/ui/navigation/Pagination/__stories__/PaginationWithSmallFont';\nexport { WithHook } from '@digigov/ui/navigation/Pagination/__stories__/WithHook';\nexport { Auto } from '@digigov/ui/navigation/Pagination/__stories__/Auto';\n"],
+  "mappings": "AAAA,OAAO,gBAAgB;AACvB,IAAO,6BAAQ;AAAA,EACb,OAAO;AAAA,EACP,aACE;AAAA,EACF,MACE;AAAA,EACF,WAAW;AAAA,EACX,aAAa;AACf;AACA,SAAS,eAAe;AACxB,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;AACxC,SAAS,gBAAgB;AACzB,SAAS,YAAY;",
   "names": []
 }

package/navigation/Pagination/__stories__/Auto/index.js

@@ -1,48 +1,38 @@
 import React from "react";
 import Card from "@digigov/ui/content/Card";
-import Container from "@digigov/ui/layouts/Basic";
-import Main from "@digigov/ui/layouts/Basic";
+import Container from "@digigov/ui/layouts/Basic/Container";
 import Grid from "@digigov/ui/layouts/Grid";
+import { Pagination } from "@digigov/ui/navigation/Pagination";
 import {
-  Pagination,
   PaginationContextAuto,
   PaginationLabelAuto,
   PaginationListAuto,
   PaginationResultsPerPageSelectAuto,
   usePaginationContext
-} from "@digigov/ui/navigation/Pagination";
+} from "@digigov/ui/navigation/Pagination/auto";
 const fetchedData = [];
 for (let i = 0; i < 78; i++) {
-  fetchedData.push({id: i});
+  fetchedData.push({ id: i });
 }
-const MyContainer = ({data}) => {
-  const {offset, limit} = usePaginationContext();
-  return data.filter((item, index) => {
-    index > offset && index < offset + limit;
-    console.log(item);
+const DataGrid = ({ data }) => {
+  const { offset, limit } = usePaginationContext();
+  return /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 4, mb: { xs: 4, md: 8 } }, data.filter((_item, index) => {
+    return index > offset && index < offset + limit;
   }).map((item, index) => {
-    return /* @__PURE__ */ React.createElement(Grid, {
-      item: true,
-      xs: 4,
-      md: 2,
-      key: index
-    }, /* @__PURE__ */ React.createElement(Card, {
-      variant: "border"
-    }, " ", item.id));
-  });
+    return /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 4, md: 2, key: index }, /* @__PURE__ */ React.createElement(Card, { variant: "border", borderColor: "light", dense: true }, item.id));
+  }));
 };
 const Auto = () => {
-  return /* @__PURE__ */ React.createElement(PaginationContextAuto, {
-    total: fetchedData.length,
-    resultsPerPageOptions: [15, 25],
-    previousLabel: "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03B7",
-    nextLabel: "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7"
-  }, /* @__PURE__ */ React.createElement(Container, null, /* @__PURE__ */ React.createElement(Main, null, /* @__PURE__ */ React.createElement(Grid, {
-    container: true,
-    spacing: 4
-  }, /* @__PURE__ */ React.createElement(MyContainer, {
-    data: fetchedData
-  })), /* @__PURE__ */ React.createElement(Pagination, null, /* @__PURE__ */ React.createElement(PaginationLabelAuto, null), /* @__PURE__ */ React.createElement(PaginationResultsPerPageSelectAuto, null, "\u0391\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03B1 \u03B1\u03BD\u03AC \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1"), /* @__PURE__ */ React.createElement(PaginationListAuto, null)))));
+  return /* @__PURE__ */ React.createElement(
+    PaginationContextAuto,
+    {
+      total: fetchedData.length,
+      resultsPerPageOptions: [15, 25],
+      previousLabel: "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03B7",
+      nextLabel: "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7"
+    },
+    /* @__PURE__ */ React.createElement(Container, { grid: false }, /* @__PURE__ */ React.createElement(DataGrid, { data: fetchedData }), /* @__PURE__ */ React.createElement(Pagination, null, /* @__PURE__ */ React.createElement(PaginationLabelAuto, null), /* @__PURE__ */ React.createElement(PaginationResultsPerPageSelectAuto, null, "\u0391\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03B1 \u03B1\u03BD\u03AC \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1"), /* @__PURE__ */ React.createElement(PaginationListAuto, null)))
+  );
 };
 var Auto_default = Auto;
 export {

package/navigation/Pagination/__stories__/Auto.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const Auto: () => JSX.Element;
+import React from 'react';
+export declare const Auto: () => React.JSX.Element;
 export default Auto;

package/navigation/Pagination/__stories__/Auto.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/Pagination/__stories__/Auto.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport Card from '@digigov/ui/content/Card';\nimport Container from '@digigov/ui/layouts/Basic';\nimport Main from '@digigov/ui/layouts/Basic';\nimport Grid from '@digigov/ui/layouts/Grid';\nimport {\n  Pagination,\n  PaginationContextAuto,\n  PaginationLabelAuto,\n  PaginationListAuto,\n  PaginationResultsPerPageSelectAuto,\n  usePaginationContext,\n} from '@digigov/ui/navigation/Pagination';\n\nconst fetchedData: { id: number }[] = [];\n\nfor (let i = 0; i < 78; i++) {\n  fetchedData.push({ id: i });\n}\n\nconst MyContainer = ({ data }) => {\n  const { offset, limit } = usePaginationContext();\n\n  return data\n    .filter((item, index) => {\n      index > offset && index < offset + limit;\n      console.log(item);\n    })\n    .map((item, index) => {\n      return (\n        <Grid item xs={4} md={2} key={index}>\n          <Card variant=\"border\"> {item.id}</Card>\n        </Grid>\n      );\n    });\n};\n\nexport const Auto = () => {\n  return (\n    <PaginationContextAuto\n      total={fetchedData.length}\n      resultsPerPageOptions={[15, 25]}\n      previousLabel=\"\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03B7\"\n      nextLabel=\"\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7\"\n    >\n      <Container>\n        <Main>\n          <Grid container spacing={4}>\n            <MyContainer data={fetchedData} />\n          </Grid>\n          <Pagination>\n            <PaginationLabelAuto />\n            <PaginationResultsPerPageSelectAuto>\n              \u0391\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03B1 \u03B1\u03BD\u03AC \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1\n            </PaginationResultsPerPageSelectAuto>\n            <PaginationListAuto />\n          </Pagination>\n        </Main>\n      </Container>\n    </PaginationContextAuto>\n  );\n};\nexport default Auto;\n"],
-  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA,MAAM,cAAgC;AAEtC,SAAS,IAAI,GAAG,IAAI,IAAI,KAAK;AAC3B,cAAY,KAAK,CAAE,IAAI;AAAA;AAGzB,MAAM,cAAc,CAAC,CAAE,UAAW;AAChC,QAAM,CAAE,QAAQ,SAAU;AAE1B,SAAO,KACJ,OAAO,CAAC,MAAM,UAAU;AACvB,YAAQ,UAAU,QAAQ,SAAS;AACnC,YAAQ,IAAI;AAAA,KAEb,IAAI,CAAC,MAAM,UAAU;AACpB,WACE,oCAAC,MAAD;AAAA,MAAM,MAAI;AAAA,MAAC,IAAI;AAAA,MAAG,IAAI;AAAA,MAAG,KAAK;AAAA,OAC5B,oCAAC,MAAD;AAAA,MAAM,SAAQ;AAAA,OAAS,KAAE,KAAK;AAAA;AAAA;AAMjC,MAAM,OAAO,MAAM;AACxB,SACE,oCAAC,uBAAD;AAAA,IACE,OAAO,YAAY;AAAA,IACnB,uBAAuB,CAAC,IAAI;AAAA,IAC5B,eAAc;AAAA,IACd,WAAU;AAAA,KAEV,oCAAC,WAAD,MACE,oCAAC,MAAD,MACE,oCAAC,MAAD;AAAA,IAAM,WAAS;AAAA,IAAC,SAAS;AAAA,KACvB,oCAAC,aAAD;AAAA,IAAa,MAAM;AAAA,OAErB,oCAAC,YAAD,MACE,oCAAC,qBAAD,OACA,oCAAC,oCAAD,MAAoC,qIAGpC,oCAAC,oBAAD;AAAA;AAOZ,IAAO,eAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport Card from '@digigov/ui/content/Card';\nimport Container from '@digigov/ui/layouts/Basic/Container';\nimport Grid from '@digigov/ui/layouts/Grid';\nimport { Pagination } from '@digigov/ui/navigation/Pagination';\nimport {\n  PaginationContextAuto,\n  PaginationLabelAuto,\n  PaginationListAuto,\n  PaginationResultsPerPageSelectAuto,\n  usePaginationContext,\n} from '@digigov/ui/navigation/Pagination/auto';\n\nconst fetchedData: { id: number }[] = [];\n\nfor (let i = 0; i < 78; i++) {\n  fetchedData.push({ id: i });\n}\n\nconst DataGrid = ({ data }) => {\n  const { offset, limit } = usePaginationContext();\n\n  return (\n    <Grid container spacing={4} mb={{ xs: 4, md: 8 }}>\n      {data\n        .filter((_item, index) => {\n          return index > offset && index < offset + limit;\n        })\n        .map((item, index) => {\n          return (\n            <Grid item xs={4} md={2} key={index}>\n              <Card variant=\"border\" borderColor=\"light\" dense>\n                {item.id}\n              </Card>\n            </Grid>\n          );\n        })}\n    </Grid>\n  );\n};\n\nexport const Auto = () => {\n  return (\n    <PaginationContextAuto\n      total={fetchedData.length}\n      resultsPerPageOptions={[15, 25]}\n      previousLabel=\"\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03B7\"\n      nextLabel=\"\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7\"\n    >\n      <Container grid={false}>\n        <DataGrid data={fetchedData} />\n        <Pagination>\n          <PaginationLabelAuto />\n          <PaginationResultsPerPageSelectAuto>\n            \u0391\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03B1 \u03B1\u03BD\u03AC \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1\n          </PaginationResultsPerPageSelectAuto>\n          <PaginationListAuto />\n        </Pagination>\n      </Container>\n    </PaginationContextAuto>\n  );\n};\nexport default Auto;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,OAAO,eAAe;AACtB,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAC3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,cAAgC,CAAC;AAEvC,SAAS,IAAI,GAAG,IAAI,IAAI,KAAK;AAC3B,cAAY,KAAK,EAAE,IAAI,EAAE,CAAC;AAC5B;AAEA,MAAM,WAAW,CAAC,EAAE,KAAK,MAAM;AAC7B,QAAM,EAAE,QAAQ,MAAM,IAAI,qBAAqB;AAE/C,SACE,oCAAC,QAAK,WAAS,MAAC,SAAS,GAAG,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,KAC5C,KACE,OAAO,CAAC,OAAO,UAAU;AACxB,WAAO,QAAQ,UAAU,QAAQ,SAAS;AAAA,EAC5C,CAAC,EACA,IAAI,CAAC,MAAM,UAAU;AACpB,WACE,oCAAC,QAAK,MAAI,MAAC,IAAI,GAAG,IAAI,GAAG,KAAK,SAC5B,oCAAC,QAAK,SAAQ,UAAS,aAAY,SAAQ,OAAK,QAC7C,KAAK,EACR,CACF;AAAA,EAEJ,CAAC,CACL;AAEJ;AAEO,MAAM,OAAO,MAAM;AACxB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,YAAY;AAAA,MACnB,uBAAuB,CAAC,IAAI,EAAE;AAAA,MAC9B,eAAc;AAAA,MACd,WAAU;AAAA;AAAA,IAEV,oCAAC,aAAU,MAAM,SACf,oCAAC,YAAS,MAAM,aAAa,GAC7B,oCAAC,kBACC,oCAAC,yBAAoB,GACrB,oCAAC,0CAAmC,kIAEpC,GACA,oCAAC,wBAAmB,CACtB,CACF;AAAA,EACF;AAEJ;AACA,IAAO,eAAQ;",
   "names": []
 }

package/navigation/Pagination/__stories__/Default/index.js

@@ -1,63 +1,15 @@
 import React from "react";
-import {I18NProvider} from "@digigov/ui/i18n";
-import {ChevronIcon} from "@digigov/ui/icons";
-import {SectionBreak} from "@digigov/ui/layouts/SectionBreak";
-import {Link} from "@digigov/ui/navigation/Link";
+import { I18NProvider } from "@digigov/ui/i18n";
+import { ChevronIcon } from "@digigov/ui/icons";
+import { SectionBreak } from "@digigov/ui/layouts/SectionBreak";
+import { Link } from "@digigov/ui/navigation/Link";
 import {
   Pagination,
   PaginationList,
   PaginationListItem,
   PaginationLabel
 } from "@digigov/ui/navigation/Pagination";
-const Default = () => /* @__PURE__ */ React.createElement(I18NProvider, {
-  t: (str) => str
-}, /* @__PURE__ */ React.createElement(Pagination, null, /* @__PURE__ */ React.createElement(PaginationLabel, {
-  start: 21,
-  end: 30,
-  total: 90
-}), /* @__PURE__ */ React.createElement(PaginationList, null, /* @__PURE__ */ React.createElement(PaginationListItem, null, /* @__PURE__ */ React.createElement(Link, null, /* @__PURE__ */ React.createElement(ChevronIcon, {
-  direction: "left"
-}), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /* @__PURE__ */ React.createElement(PaginationListItem, null, /* @__PURE__ */ React.createElement(Link, {
-  href: "#page1"
-}, "1")), /* @__PURE__ */ React.createElement(PaginationListItem, {
-  currentPage: true
-}, "2"), /* @__PURE__ */ React.createElement(PaginationListItem, null, /* @__PURE__ */ React.createElement(Link, {
-  href: "#page3"
-}, "3")), /* @__PURE__ */ React.createElement(PaginationListItem, {
-  variant: "dots"
-}), /* @__PURE__ */ React.createElement(PaginationListItem, null, /* @__PURE__ */ React.createElement(Link, {
-  href: "#page7"
-}, "7")), /* @__PURE__ */ React.createElement(PaginationListItem, null, /* @__PURE__ */ React.createElement(Link, {
-  href: "#page8"
-}, "8")), /* @__PURE__ */ React.createElement(PaginationListItem, null, /* @__PURE__ */ React.createElement(Link, {
-  href: "#page9"
-}, "9")), /* @__PURE__ */ React.createElement(PaginationListItem, null, /* @__PURE__ */ React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /* @__PURE__ */ React.createElement(ChevronIcon, {
-  direction: "right"
-}))))), /* @__PURE__ */ React.createElement(SectionBreak, {
-  size: "lg"
-}), /* @__PURE__ */ React.createElement(Pagination, null, /* @__PURE__ */ React.createElement(PaginationLabel, {
-  start: 81,
-  end: 90,
-  total: 197
-}), /* @__PURE__ */ React.createElement(PaginationList, null, /* @__PURE__ */ React.createElement(PaginationListItem, null, /* @__PURE__ */ React.createElement(Link, null, /* @__PURE__ */ React.createElement(ChevronIcon, {
-  direction: "left"
-}), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /* @__PURE__ */ React.createElement(PaginationListItem, null, /* @__PURE__ */ React.createElement(Link, {
-  href: "#page1"
-}, "1")), /* @__PURE__ */ React.createElement(PaginationListItem, {
-  variant: "dots"
-}), /* @__PURE__ */ React.createElement(PaginationListItem, null, /* @__PURE__ */ React.createElement(Link, {
-  href: "#page7"
-}, "7")), /* @__PURE__ */ React.createElement(PaginationListItem, {
-  currentPage: true
-}, "8"), /* @__PURE__ */ React.createElement(PaginationListItem, null, /* @__PURE__ */ React.createElement(Link, {
-  href: "#page9"
-}, "9")), /* @__PURE__ */ React.createElement(PaginationListItem, {
-  variant: "dots"
-}), /* @__PURE__ */ React.createElement(PaginationListItem, null, /* @__PURE__ */ React.createElement(Link, {
-  href: "#page20"
-}, "20")), /* @__PURE__ */ React.createElement(PaginationListItem, null, /* @__PURE__ */ React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /* @__PURE__ */ React.createElement(ChevronIcon, {
-  direction: "right"
-}))))));
+const Default = () => /* @__PURE__ */ React.createElement(I18NProvider, { t: (str) => str }, /* @__PURE__ */ React.createElement(Pagination, null, /* @__PURE__ */ React.createElement(PaginationLabel, { start: 21, end: 30, total: 90 }), /* @__PURE__ */ React.createElement(PaginationList, null, /* @__PURE__ */ React.createElement(PaginationListItem, null, /* @__PURE__ */ React.createElement(Link, null, /* @__PURE__ */ React.createElement(ChevronIcon, { direction: "left" }), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /* @__PURE__ */ React.createElement(PaginationListItem, null, /* @__PURE__ */ React.createElement(Link, { href: "#page1" }, "1")), /* @__PURE__ */ React.createElement(PaginationListItem, { currentPage: true }, "2"), /* @__PURE__ */ React.createElement(PaginationListItem, null, /* @__PURE__ */ React.createElement(Link, { href: "#page3" }, "3")), /* @__PURE__ */ React.createElement(PaginationListItem, { variant: "dots" }), /* @__PURE__ */ React.createElement(PaginationListItem, null, /* @__PURE__ */ React.createElement(Link, { href: "#page7" }, "7")), /* @__PURE__ */ React.createElement(PaginationListItem, null, /* @__PURE__ */ React.createElement(Link, { href: "#page8" }, "8")), /* @__PURE__ */ React.createElement(PaginationListItem, null, /* @__PURE__ */ React.createElement(Link, { href: "#page9" }, "9")), /* @__PURE__ */ React.createElement(PaginationListItem, null, /* @__PURE__ */ React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /* @__PURE__ */ React.createElement(ChevronIcon, { direction: "right" }))))), /* @__PURE__ */ React.createElement(SectionBreak, { size: "lg" }), /* @__PURE__ */ React.createElement(Pagination, null, /* @__PURE__ */ React.createElement(PaginationLabel, { start: 81, end: 90, total: 197 }), /* @__PURE__ */ React.createElement(PaginationList, null, /* @__PURE__ */ React.createElement(PaginationListItem, null, /* @__PURE__ */ React.createElement(Link, null, /* @__PURE__ */ React.createElement(ChevronIcon, { direction: "left" }), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /* @__PURE__ */ React.createElement(PaginationListItem, null, /* @__PURE__ */ React.createElement(Link, { href: "#page1" }, "1")), /* @__PURE__ */ React.createElement(PaginationListItem, { variant: "dots" }), /* @__PURE__ */ React.createElement(PaginationListItem, null, /* @__PURE__ */ React.createElement(Link, { href: "#page7" }, "7")), /* @__PURE__ */ React.createElement(PaginationListItem, { currentPage: true }, "8"), /* @__PURE__ */ React.createElement(PaginationListItem, null, /* @__PURE__ */ React.createElement(Link, { href: "#page9" }, "9")), /* @__PURE__ */ React.createElement(PaginationListItem, { variant: "dots" }), /* @__PURE__ */ React.createElement(PaginationListItem, null, /* @__PURE__ */ React.createElement(Link, { href: "#page20" }, "20")), /* @__PURE__ */ React.createElement(PaginationListItem, null, /* @__PURE__ */ React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /* @__PURE__ */ React.createElement(ChevronIcon, { direction: "right" }))))));
 var Default_default = Default;
 export {
   Default,

package/navigation/Pagination/__stories__/Default.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const Default: () => JSX.Element;
+import React from 'react';
+export declare const Default: () => React.JSX.Element;
 export default Default;

package/navigation/Pagination/__stories__/Default.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/navigation/Pagination/__stories__/Default.tsx"],
   "sourcesContent": ["import React from 'react';\n\nimport { I18NProvider } from '@digigov/ui/i18n';\nimport { ChevronIcon } from '@digigov/ui/icons';\nimport { SectionBreak } from '@digigov/ui/layouts/SectionBreak';\nimport { Link } from '@digigov/ui/navigation/Link';\nimport {\n  Pagination,\n  PaginationList,\n  PaginationListItem,\n  PaginationLabel,\n} from '@digigov/ui/navigation/Pagination';\n\nexport const Default = () => (\n  <I18NProvider t={(str: string) => str}>\n    <Pagination>\n      <PaginationLabel start={21} end={30} total={90}></PaginationLabel>\n      <PaginationList>\n        <PaginationListItem>\n          <Link>\n            <ChevronIcon direction=\"left\" />\n            \u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF\n          </Link>\n        </PaginationListItem>\n        <PaginationListItem>\n          <Link href=\"#page1\">1</Link>\n        </PaginationListItem>\n        <PaginationListItem currentPage>2</PaginationListItem>\n        <PaginationListItem>\n          <Link href=\"#page3\">3</Link>\n        </PaginationListItem>\n        <PaginationListItem variant=\"dots\" />\n        <PaginationListItem>\n          <Link href=\"#page7\">7</Link>\n        </PaginationListItem>\n        <PaginationListItem>\n          <Link href=\"#page8\">8</Link>\n        </PaginationListItem>\n        <PaginationListItem>\n          <Link href=\"#page9\">9</Link>\n        </PaginationListItem>\n        <PaginationListItem>\n          <Link>\n            \u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF\n            <ChevronIcon direction=\"right\" />\n          </Link>\n        </PaginationListItem>\n      </PaginationList>\n    </Pagination>\n\n    <SectionBreak size=\"lg\" />\n\n    <Pagination>\n      <PaginationLabel start={81} end={90} total={197}></PaginationLabel>\n      <PaginationList>\n        <PaginationListItem>\n          <Link>\n            <ChevronIcon direction=\"left\" />\n            \u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF\n          </Link>\n        </PaginationListItem>\n        <PaginationListItem>\n          <Link href=\"#page1\">1</Link>\n        </PaginationListItem>\n        <PaginationListItem variant=\"dots\"></PaginationListItem>\n        <PaginationListItem>\n          <Link href=\"#page7\">7</Link>\n        </PaginationListItem>\n        <PaginationListItem currentPage>8</PaginationListItem>\n        <PaginationListItem>\n          <Link href=\"#page9\">9</Link>\n        </PaginationListItem>\n        <PaginationListItem variant=\"dots\"></PaginationListItem>\n        <PaginationListItem>\n          <Link href=\"#page20\">20</Link>\n        </PaginationListItem>\n        <PaginationListItem>\n          <Link>\n            \u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF\n            <ChevronIcon direction=\"right\" />\n          </Link>\n        </PaginationListItem>\n      </PaginationList>\n    </Pagination>\n  </I18NProvider>\n);\n\nexport default Default;\n"],
-  "mappings": "AAAA;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOO,MAAM,UAAU,MACrB,oCAAC,cAAD;AAAA,EAAc,GAAG,CAAC,QAAgB;AAAA,GAChC,oCAAC,YAAD,MACE,oCAAC,iBAAD;AAAA,EAAiB,OAAO;AAAA,EAAI,KAAK;AAAA,EAAI,OAAO;AAAA,IAC5C,oCAAC,gBAAD,MACE,oCAAC,oBAAD,MACE,oCAAC,MAAD,MACE,oCAAC,aAAD;AAAA,EAAa,WAAU;AAAA,IAAS,wEAIpC,oCAAC,oBAAD,MACE,oCAAC,MAAD;AAAA,EAAM,MAAK;AAAA,GAAS,OAEtB,oCAAC,oBAAD;AAAA,EAAoB,aAAW;AAAA,GAAC,MAChC,oCAAC,oBAAD,MACE,oCAAC,MAAD;AAAA,EAAM,MAAK;AAAA,GAAS,OAEtB,oCAAC,oBAAD;AAAA,EAAoB,SAAQ;AAAA,IAC5B,oCAAC,oBAAD,MACE,oCAAC,MAAD;AAAA,EAAM,MAAK;AAAA,GAAS,OAEtB,oCAAC,oBAAD,MACE,oCAAC,MAAD;AAAA,EAAM,MAAK;AAAA,GAAS,OAEtB,oCAAC,oBAAD,MACE,oCAAC,MAAD;AAAA,EAAM,MAAK;AAAA,GAAS,OAEtB,oCAAC,oBAAD,MACE,oCAAC,MAAD,MAAM,8CAEJ,oCAAC,aAAD;AAAA,EAAa,WAAU;AAAA,QAM/B,oCAAC,cAAD;AAAA,EAAc,MAAK;AAAA,IAEnB,oCAAC,YAAD,MACE,oCAAC,iBAAD;AAAA,EAAiB,OAAO;AAAA,EAAI,KAAK;AAAA,EAAI,OAAO;AAAA,IAC5C,oCAAC,gBAAD,MACE,oCAAC,oBAAD,MACE,oCAAC,MAAD,MACE,oCAAC,aAAD;AAAA,EAAa,WAAU;AAAA,IAAS,wEAIpC,oCAAC,oBAAD,MACE,oCAAC,MAAD;AAAA,EAAM,MAAK;AAAA,GAAS,OAEtB,oCAAC,oBAAD;AAAA,EAAoB,SAAQ;AAAA,IAC5B,oCAAC,oBAAD,MACE,oCAAC,MAAD;AAAA,EAAM,MAAK;AAAA,GAAS,OAEtB,oCAAC,oBAAD;AAAA,EAAoB,aAAW;AAAA,GAAC,MAChC,oCAAC,oBAAD,MACE,oCAAC,MAAD;AAAA,EAAM,MAAK;AAAA,GAAS,OAEtB,oCAAC,oBAAD;AAAA,EAAoB,SAAQ;AAAA,IAC5B,oCAAC,oBAAD,MACE,oCAAC,MAAD;AAAA,EAAM,MAAK;AAAA,GAAU,QAEvB,oCAAC,oBAAD,MACE,oCAAC,MAAD,MAAM,8CAEJ,oCAAC,aAAD;AAAA,EAAa,WAAU;AAAA;AAQnC,IAAO,kBAAQ;",
+  "mappings": "AAAA,OAAO,WAAW;AAElB,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,UAAU,MACrB,oCAAC,gBAAa,GAAG,CAAC,QAAgB,OAChC,oCAAC,kBACC,oCAAC,mBAAgB,OAAO,IAAI,KAAK,IAAI,OAAO,IAAI,GAChD,oCAAC,sBACC,oCAAC,0BACC,oCAAC,YACC,oCAAC,eAAY,WAAU,QAAO,GAAE,oEAElC,CACF,GACA,oCAAC,0BACC,oCAAC,QAAK,MAAK,YAAS,GAAC,CACvB,GACA,oCAAC,sBAAmB,aAAW,QAAC,GAAC,GACjC,oCAAC,0BACC,oCAAC,QAAK,MAAK,YAAS,GAAC,CACvB,GACA,oCAAC,sBAAmB,SAAQ,QAAO,GACnC,oCAAC,0BACC,oCAAC,QAAK,MAAK,YAAS,GAAC,CACvB,GACA,oCAAC,0BACC,oCAAC,QAAK,MAAK,YAAS,GAAC,CACvB,GACA,oCAAC,0BACC,oCAAC,QAAK,MAAK,YAAS,GAAC,CACvB,GACA,oCAAC,0BACC,oCAAC,YAAK,8CAEJ,oCAAC,eAAY,WAAU,SAAQ,CACjC,CACF,CACF,CACF,GAEA,oCAAC,gBAAa,MAAK,MAAK,GAExB,oCAAC,kBACC,oCAAC,mBAAgB,OAAO,IAAI,KAAK,IAAI,OAAO,KAAK,GACjD,oCAAC,sBACC,oCAAC,0BACC,oCAAC,YACC,oCAAC,eAAY,WAAU,QAAO,GAAE,oEAElC,CACF,GACA,oCAAC,0BACC,oCAAC,QAAK,MAAK,YAAS,GAAC,CACvB,GACA,oCAAC,sBAAmB,SAAQ,QAAO,GACnC,oCAAC,0BACC,oCAAC,QAAK,MAAK,YAAS,GAAC,CACvB,GACA,oCAAC,sBAAmB,aAAW,QAAC,GAAC,GACjC,oCAAC,0BACC,oCAAC,QAAK,MAAK,YAAS,GAAC,CACvB,GACA,oCAAC,sBAAmB,SAAQ,QAAO,GACnC,oCAAC,0BACC,oCAAC,QAAK,MAAK,aAAU,IAAE,CACzB,GACA,oCAAC,0BACC,oCAAC,YAAK,8CAEJ,oCAAC,eAAY,WAAU,SAAQ,CACjC,CACF,CACF,CACF,CACF;AAGF,IAAO,kBAAQ;",
   "names": []
 }

package/navigation/Pagination/__stories__/PaginationSmall/index.js

@@ -1,33 +1,15 @@
 import React from "react";
-import {I18NProvider} from "@digigov/ui/i18n";
-import {ChevronIcon} from "@digigov/ui/icons";
-import {SectionBreak} from "@digigov/ui/layouts/SectionBreak";
-import {Link} from "@digigov/ui/navigation/Link";
+import { I18NProvider } from "@digigov/ui/i18n";
+import { ChevronIcon } from "@digigov/ui/icons";
+import { SectionBreak } from "@digigov/ui/layouts/SectionBreak";
+import { Link } from "@digigov/ui/navigation/Link";
 import {
   Pagination,
   PaginationList,
   PaginationListItem,
   PaginationLabel
 } from "@digigov/ui/navigation/Pagination";
-const PaginationSmall = () => /* @__PURE__ */ React.createElement(I18NProvider, {
-  t: (str) => str
-}, /* @__PURE__ */ React.createElement(Pagination, null, /* @__PURE__ */ React.createElement(PaginationLabel, {
-  start: 1,
-  end: 10,
-  total: 15
-}), /* @__PURE__ */ React.createElement(PaginationList, null, /* @__PURE__ */ React.createElement(PaginationListItem, {
-  active: false
-}, /* @__PURE__ */ React.createElement(Link, null, /* @__PURE__ */ React.createElement(ChevronIcon, {
-  direction: "left"
-}))), /* @__PURE__ */ React.createElement(PaginationListItem, {
-  currentPage: true
-}, "1"), /* @__PURE__ */ React.createElement(PaginationListItem, null, /* @__PURE__ */ React.createElement(Link, {
-  href: "#page2"
-}, "2")), /* @__PURE__ */ React.createElement(PaginationListItem, null, /* @__PURE__ */ React.createElement(Link, null, /* @__PURE__ */ React.createElement(ChevronIcon, {
-  direction: "right"
-}))))), /* @__PURE__ */ React.createElement(SectionBreak, {
-  size: "lg"
-}));
+const PaginationSmall = () => /* @__PURE__ */ React.createElement(I18NProvider, { t: (str) => str }, /* @__PURE__ */ React.createElement(Pagination, null, /* @__PURE__ */ React.createElement(PaginationLabel, { start: 1, end: 10, total: 15 }), /* @__PURE__ */ React.createElement(PaginationList, null, /* @__PURE__ */ React.createElement(PaginationListItem, { active: false }, /* @__PURE__ */ React.createElement(Link, null, /* @__PURE__ */ React.createElement(ChevronIcon, { direction: "left" }))), /* @__PURE__ */ React.createElement(PaginationListItem, { currentPage: true }, "1"), /* @__PURE__ */ React.createElement(PaginationListItem, null, /* @__PURE__ */ React.createElement(Link, { href: "#page2" }, "2")), /* @__PURE__ */ React.createElement(PaginationListItem, null, /* @__PURE__ */ React.createElement(Link, null, /* @__PURE__ */ React.createElement(ChevronIcon, { direction: "right" }))))), /* @__PURE__ */ React.createElement(SectionBreak, { size: "lg" }));
 var PaginationSmall_default = PaginationSmall;
 export {
   PaginationSmall,

package/navigation/Pagination/__stories__/PaginationSmall.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const PaginationSmall: () => JSX.Element;
+import React from 'react';
+export declare const PaginationSmall: () => React.JSX.Element;
 export default PaginationSmall;