@dbcdk/react-components 0.0.169 → 0.0.170

package/dist/components/page-layout/PageLayout.module.css

@@ -0,0 +1,333 @@
+/* When PageLayout owns scrolling, the body shouldn't reserve scrollbar gutter space.
+   This prevents the right-side gap that body { overflow-y: scroll } would otherwise create. */
+:global(body):has([data-contain-scrolling]) {
+  overflow: hidden;
+}
+
+/* Root shell */
+.root {
+  width: 100%;
+  max-width: 100%;
+  display: grid;
+  gap: 0;
+
+  /* Banner height computed from its own tokens (not measured) — accurate for the
+     built-in EnvironmentBanner; off by the difference for a custom-height banner. */
+  --page-layout-banner-height: calc(
+    var(--spacing-2xs) * 2 + var(--font-size-md) * var(--line-height-normal)
+  );
+}
+
+/* Viewport handling:
+   - containScrolling => app-shell: lock to viewport and manage scroll in regions
+   - documentScrolling => let page scroll normally
+*/
+.containScrolling {
+  height: 100vh;
+  height: 100dvh;
+  overflow: hidden;
+}
+
+.documentScrolling {
+  min-height: 100vh;
+  min-height: 100dvh;
+  overflow: visible;
+}
+
+/* Orientation layouts */
+.vertical {
+  grid-template-columns: auto minmax(0, 1fr);
+}
+
+.horizontal {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+/* Banner: spans both sidebar and main columns */
+.banner {
+  grid-column: 1 / -1;
+  min-width: 0;
+  flex: 0 0 auto;
+}
+
+/* Keep the banner visible while scrolling instead of it scrolling away; header and
+   sidebar stick right below it (see their top offsets further down). */
+.documentScrolling .banner {
+  position: sticky;
+  top: 0;
+  z-index: calc(var(--z-sticky) + 1);
+}
+
+/* Give the banner its natural height, then the rest to the sidebar+main row (the
+   `1fr` row grows beyond it if content needs more — the CSS-grid sticky-footer trick). */
+.hasBanner {
+  grid-template-rows: auto 1fr;
+}
+
+/* documentScrolling only has `min-height` (so long content can still grow the
+   page), which leaves the grid container's own block-size indefinite — and an
+   indefinite container makes the `1fr` row above size itself from its content
+   (i.e. from the sidebar's own capped height below) instead of from real
+   leftover viewport space. Any drift between --page-layout-banner-height's
+   estimate and the banner's real rendered height then inflated the whole page,
+   but only once the sidenav's content was tall enough to hit that cap — giving
+   this one combination a real, definite block-size makes the `1fr` row's size
+   come from the banner's actual rendered height, so the estimate is only ever
+   used below as a cap, never as the page's actual size. */
+.documentScrolling.vertical.hasBanner {
+  height: 100vh;
+  height: 100dvh;
+}
+
+/* Sidebar */
+.sidebar {
+  min-width: 0;
+  min-block-size: 0; /* CRITICAL: else a tall sidenav grows the grid row instead of scrolling */
+  overflow: hidden;
+  background: var(--color-bg-surface);
+
+  /* Hug the sidebar's own content width instead of stretching to fill the "auto"
+     column — some browsers size that column wider than the content once a
+     descendant scrollbar reserves space, leaving a visible gap otherwise. */
+  justify-self: start;
+}
+
+/* The Sidebar/SidebarContainer inside already owns its own internal scrolling
+   (its root is height:100%; overflow:auto). This wrapper only needs to cap the
+   available height — if it *also* reserves its own scrollbar, that scrollbar's
+   width gets folded into this box's max-content size (used by `justify-self:
+   start` above), making it a scrollbar's-width wider than the fixed-width
+   Sidebar inside and leaving a gap on the right edge. */
+.containScrolling .sidebar {
+  overflow: hidden;
+}
+
+/* Pin the sidebar to the viewport and let it scroll independently of the document.
+   max-block-size is a hard cap: a grid row's "auto" size still grows to fit a long
+   sidenav's content otherwise (min-block-size: 0 alone doesn't stop that). */
+.documentScrolling.vertical .sidebar {
+  position: sticky;
+  top: 0;
+  max-block-size: 100vh;
+  max-block-size: 100dvh;
+  /* See the .containScrolling .sidebar comment above — same double-scrollbar
+     reasoning applies here. */
+  overflow: hidden;
+}
+
+/* Leave room for the banner's height, and stick below it instead of at top:0 so it
+   doesn't slide up underneath the now-sticky banner while scrolling. */
+.documentScrolling.vertical.hasBanner .sidebar {
+  top: var(--page-layout-banner-height);
+  max-block-size: calc(100vh - var(--page-layout-banner-height));
+  max-block-size: calc(100dvh - var(--page-layout-banner-height));
+}
+
+/* Without a banner, the sidebar is the grid's only row (sizes to content, doesn't
+   stretch), so it needs an explicit height. With a banner, it stretches to fill the
+   `1fr` row instead (see .hasBanner above). */
+.documentScrolling.vertical:not(.hasBanner) .sidebar {
+  align-self: start;
+  block-size: 100vh;
+  block-size: 100dvh;
+}
+
+/* In horizontal orientation, sidebar becomes a full-width top block if used */
+.horizontal .sidebar {
+  grid-column: 1 / -1;
+  justify-self: stretch;
+  border-right: none;
+  border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
+}
+
+/* Main column:
+   Use flex so the "rest of space" logic works reliably.
+*/
+.mainColumn {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-bg-surface);
+}
+
+/* In containScrolling mode, mainColumn must fill the viewport height
+   so the flex "remaining space" can be computed.
+*/
+.containScrolling .mainColumn {
+  height: 100%;
+  min-height: 0; /* important: allows children to shrink */
+}
+
+/* Regions */
+.header {
+  min-width: 0;
+  background: var(--color-bg-surface);
+  border-bottom: var(--border-width-thin) solid var(--color-border-default);
+  flex: 0 0 auto;
+}
+
+/* Sticky header only when the document is scrolling (body scroll) */
+.documentScrolling .header {
+  position: sticky;
+  top: 0;
+  z-index: var(--z-sticky);
+}
+
+/* Stick right below the (also sticky) banner instead of underneath it. */
+.documentScrolling.hasBanner .header {
+  top: var(--page-layout-banner-height);
+}
+
+.hero {
+  min-width: 0;
+  background: var(--color-bg-surface);
+  border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
+  flex: 0 0 auto;
+}
+
+/* Scroll wrapper: contains content + footer */
+.mainScroll {
+  min-width: 0;
+  min-height: 0; /* CRITICAL for nested flex/scroll */
+  display: flex;
+  flex-direction: column;
+
+  /* This is the "take all remaining space" bit */
+  flex: 1 1 auto;
+
+  /* default: documentScrolling uses normal page flow */
+  overflow: visible;
+}
+
+/* Contained scrolling: mainScroll scrolls (includes footer) */
+.containScrolling .mainScroll {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Content area (not a scroll container anymore) */
+.content {
+  min-width: 0;
+  min-height: 0;
+  flex: 1 1 auto; /* take remaining space inside mainScroll */
+  display: flex; /* lets contentInner stretch */
+  flex-direction: column;
+  align-items: center;
+
+  background: var(--color-bg-surface);
+  padding: var(--spacing-md);
+  overflow: visible;
+}
+
+.horizontal .content {
+  padding-top: var(--spacing-lg);
+  padding-inline: var(--spacing-lg);
+}
+
+.footer {
+  min-width: 0;
+  background: var(--color-bg-surface-subtle);
+  display: flex;
+  justify-content: center;
+  padding-inline: var(--spacing-md);
+
+  /* When there is extra space (content is short), this pushes footer to the bottom.
+     When content is long, footer follows content normally and is reached by scrolling.
+  */
+  margin-top: auto;
+  flex: 0 0 auto;
+}
+
+.horizontal .footer {
+  padding-inline: var(--spacing-lg);
+}
+
+/* Header slot wrappers */
+.headerContainer {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  padding-inline: var(--spacing-md);
+}
+
+.horizontal .headerContainer {
+  padding-inline: var(--spacing-lg);
+}
+
+.headerContent {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.footerContent {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.maxWidthMd {
+  max-width: 1600px;
+  margin-inline: auto;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.maxWidthSm {
+  margin-inline: auto;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+@media (min-width: 640px) {
+  .maxWidthSm {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .maxWidthSm {
+    max-width: 668px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .maxWidthSm {
+    max-width: 924px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .maxWidthSm {
+    max-width: 1180px;
+  }
+}
+
+/* Content slot inner wrapper (so maxWidth works without interfering with scroll) */
+.contentInner {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xl);
+  width: 100%;
+  box-sizing: border-box;
+  min-width: 0;
+
+  /* This is what makes your "main content" actually expand to fill */
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+/* Optional: for small viewport heights, avoid forced viewport locking */
+@media (max-height: 400px) {
+  .containScrolling {
+    height: auto;
+    overflow: visible;
+  }
+
+  /* In this mode, avoid forcing a nested scroll region */
+  .containScrolling .mainScroll {
+    overflow: visible;
+  }
+
+  .containScrolling .mainColumn {
+    height: auto;
+  }
+}

package/dist/components/page-layout/components/footer/Footer.cjs

@@ -0,0 +1,53 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var logo = require('../../../../assets/logo');
+var Hyperlink = require('../../../../components/hyperlink/Hyperlink');
+var styles = require('./Footer.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const DEFAULT_META_PARTS = [
+  "Tempovej 7-11",
+  "DK-2750 Ballerup",
+  "+45 44 86 77 11",
+  `\xA9 ${(/* @__PURE__ */ new Date()).getFullYear()} DBC DIGITAL A/S`
+];
+const DEFAULT_LINKS = [
+  {
+    label: "Kundeservice",
+    href: "https://kundeservice.dbc.dk",
+    external: true
+  }
+];
+function Footer({
+  links = DEFAULT_LINKS,
+  metaParts = DEFAULT_META_PARTS,
+  version,
+  extraLinks
+}) {
+  const displayMetaParts = version && metaParts.length > 0 ? metaParts.map(
+    (part, index) => index === metaParts.length - 1 ? `${part} \xB7 ${version}` : part
+  ) : metaParts;
+  return /* @__PURE__ */ jsxRuntime.jsx("footer", { className: styles__default.default.footer, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.inner, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.brand, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.logoRow, children: /* @__PURE__ */ jsxRuntime.jsx(logo.Logo, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx("address", { className: styles__default.default.meta, children: displayMetaParts.map((part) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.part, children: part }, part)) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: styles__default.default.links, "aria-label": "Footer navigation", children: [
+      extraLinks && extraLinks.length > 0 && (extraLinks == null ? void 0 : extraLinks.map((link, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: link }, index))),
+      links.map((link) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(
+        Hyperlink.Hyperlink,
+        {
+          href: link.href,
+          ...link.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+          children: link.label
+        }
+      ) }, link.label))
+    ] })
+  ] }) });
+}
+
+exports.Footer = Footer;

package/dist/components/page-layout/components/footer/Footer.d.ts

@@ -0,0 +1,14 @@
+import type { JSX, ReactElement } from 'react';
+export interface FooterLink {
+    label: string;
+    href: string;
+    external?: boolean;
+}
+export interface FooterProps {
+    links?: FooterLink[];
+    metaParts?: string[];
+    version?: string | number;
+    /** Extra links rendered before the default links. Pass framework link elements (e.g. Next.js <Link>). */
+    extraLinks?: ReactElement[];
+}
+export declare function Footer({ links, metaParts, version, extraLinks, }: FooterProps): JSX.Element;

package/dist/components/page-layout/components/footer/Footer.js

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Logo } from '../../../../assets/logo';
+import { Hyperlink } from '../../../../components/hyperlink/Hyperlink';
+import styles from './Footer.module.css';
+
+const DEFAULT_META_PARTS = [
+  "Tempovej 7-11",
+  "DK-2750 Ballerup",
+  "+45 44 86 77 11",
+  `\xA9 ${(/* @__PURE__ */ new Date()).getFullYear()} DBC DIGITAL A/S`
+];
+const DEFAULT_LINKS = [
+  {
+    label: "Kundeservice",
+    href: "https://kundeservice.dbc.dk",
+    external: true
+  }
+];
+function Footer({
+  links = DEFAULT_LINKS,
+  metaParts = DEFAULT_META_PARTS,
+  version,
+  extraLinks
+}) {
+  const displayMetaParts = version && metaParts.length > 0 ? metaParts.map(
+    (part, index) => index === metaParts.length - 1 ? `${part} \xB7 ${version}` : part
+  ) : metaParts;
+  return /* @__PURE__ */ jsx("footer", { className: styles.footer, children: /* @__PURE__ */ jsxs("div", { className: styles.inner, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.brand, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.logoRow, children: /* @__PURE__ */ jsx(Logo, {}) }),
+      /* @__PURE__ */ jsx("address", { className: styles.meta, children: displayMetaParts.map((part) => /* @__PURE__ */ jsx("span", { className: styles.part, children: part }, part)) })
+    ] }),
+    /* @__PURE__ */ jsxs("nav", { className: styles.links, "aria-label": "Footer navigation", children: [
+      extraLinks && extraLinks.length > 0 && (extraLinks == null ? void 0 : extraLinks.map((link, index) => /* @__PURE__ */ jsx("span", { children: link }, index))),
+      links.map((link) => /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+        Hyperlink,
+        {
+          href: link.href,
+          ...link.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+          children: link.label
+        }
+      ) }, link.label))
+    ] })
+  ] }) });
+}
+
+export { Footer };

package/dist/components/page-layout/components/footer/Footer.module.css

@@ -0,0 +1,86 @@
+.footer {
+  inline-size: 100%;
+  background: var(--color-bg-surface-subtle);
+  line-height: var(--line-height-normal);
+}
+
+.inner {
+  inline-size: 100%;
+  padding-block: var(--spacing-lg);
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--spacing-2xl);
+}
+
+.brand {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  flex-shrink: 0;
+}
+
+.logoRow {
+  flex-shrink: 0;
+}
+
+.logoRow svg {
+  height: 24px;
+  width: auto;
+  color: var(--color-brand);
+  display: block;
+}
+
+.meta {
+  font-style: normal;
+  margin: 0;
+  color: var(--color-fg-subtle);
+  line-height: var(--line-height-normal);
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.part {
+  white-space: nowrap;
+}
+
+.links {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0;
+  line-height: var(--line-height-normal);
+}
+
+.linkGroup {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-2xs);
+}
+
+.linkGroup + .linkGroup {
+  margin-block-start: var(--spacing-sm);
+  padding-inline: 0;
+  border-inline-start: none;
+}
+
+.linkItem {
+  white-space: nowrap;
+}
+
+@media (max-width: 640px) {
+  .inner {
+    flex-direction: column;
+    gap: var(--spacing-md);
+  }
+
+  .linkGroup {
+    padding-inline: 0;
+  }
+
+  .linkGroup:first-child {
+    padding-inline-start: 0;
+  }
+}

package/dist/components/pagination/Pagination.cjs

@@ -0,0 +1,161 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var styles = require('./Pagination.module.css');
+var Button = require('../button/Button');
+var Menu = require('../menu/Menu');
+var Popover = require('../popover/Popover');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const DEFAULT_PAGE_SIZE_OPTIONS = [20, 50, 100];
+const NUMBER_LOCALE = "da-DK";
+function Pagination({
+  itemsCount = 0,
+  skip = 0,
+  take = DEFAULT_PAGE_SIZE_OPTIONS[1],
+  onPageChange,
+  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
+  showFirstLast = true,
+  showGoToPage = true,
+  showPageSize = true
+}) {
+  const popoverRef = react.useRef(null);
+  const pageSizeRef = react.useRef(null);
+  const formatNumber = react.useCallback((value) => value.toLocaleString(NUMBER_LOCALE), []);
+  const totalPages = react.useMemo(
+    () => Math.max(1, Math.ceil(itemsCount / Math.max(1, take))),
+    [itemsCount, take]
+  );
+  const currentPage = react.useMemo(() => {
+    const p = Math.floor(skip / Math.max(1, take)) + 1;
+    return Math.min(Math.max(1, p), totalPages);
+  }, [skip, take, totalPages]);
+  const emit = react.useCallback(
+    (page, nextTake = take) => {
+      const nextTotalPages = Math.max(1, Math.ceil(itemsCount / Math.max(1, nextTake)));
+      const clampedPage = Math.min(Math.max(1, page), nextTotalPages);
+      const nextSkip = (clampedPage - 1) * nextTake;
+      onPageChange == null ? void 0 : onPageChange({
+        page: clampedPage,
+        take: nextTake,
+        skip: nextSkip,
+        totalPages: nextTotalPages
+      });
+    },
+    [onPageChange, take, itemsCount]
+  );
+  const firstPage = react.useCallback(() => emit(1), [emit]);
+  const lastPage = react.useCallback(() => emit(totalPages), [emit, totalPages]);
+  const prevPage = react.useCallback(() => emit(currentPage - 1), [emit, currentPage]);
+  const nextPage = react.useCallback(() => emit(currentPage + 1), [emit, currentPage]);
+  const goToPage = react.useCallback((page) => emit(page), [emit]);
+  const canPrev = currentPage > 1;
+  const canNext = currentPage < totalPages;
+  const rangeLabel = react.useMemo(() => {
+    if (itemsCount <= 0) return "0 af 0";
+    const first = skip + 1;
+    const last = Math.min(skip + take, itemsCount);
+    return `${formatNumber(first)}\u2013${formatNumber(last)} af ${formatNumber(itemsCount)}`;
+  }, [formatNumber, itemsCount, skip, take]);
+  const pages = react.useMemo(() => Array.from({ length: totalPages }, (_, i) => i + 1), [totalPages]);
+  const handlePageSizeChange = react.useCallback((size) => emit(1, size), [emit]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.container, children: [
+    showFirstLast && /* @__PURE__ */ jsxRuntime.jsx(
+      Button.Button,
+      {
+        size: "sm",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeft, {}),
+        disabled: !canPrev,
+        onClick: firstPage,
+        "aria-label": "First page"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button.Button,
+      {
+        size: "sm",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, {}),
+        disabled: !canPrev,
+        onClick: prevPage,
+        "aria-label": "Previous page"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.range, "aria-live": "polite", children: rangeLabel }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button.Button,
+      {
+        size: "sm",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, {}),
+        disabled: !canNext,
+        onClick: nextPage,
+        "aria-label": "Next page"
+      }
+    ),
+    showFirstLast && /* @__PURE__ */ jsxRuntime.jsx(
+      Button.Button,
+      {
+        size: "sm",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsRight, {}),
+        disabled: !canNext,
+        onClick: lastPage,
+        "aria-label": "Last page"
+      }
+    ),
+    showGoToPage && /* @__PURE__ */ jsxRuntime.jsx(
+      Popover.Popover,
+      {
+        ref: popoverRef,
+        trigger: (open) => /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { size: "sm", variant: "outlined", onClick: open, children: [
+          "Side ",
+          formatNumber(currentPage),
+          "/",
+          formatNumber(totalPages),
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 16 })
+        ] }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: pages == null ? void 0 : pages.map((page) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: page === currentPage, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => {
+              var _a;
+              goToPage(page);
+              (_a = popoverRef.current) == null ? void 0 : _a.close();
+            },
+            children: formatNumber(page)
+          }
+        ) }, page)) })
+      }
+    ),
+    showPageSize && /* @__PURE__ */ jsxRuntime.jsx(
+      Popover.Popover,
+      {
+        ref: pageSizeRef,
+        trigger: (open) => /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { size: "sm", variant: "outlined", onClick: open, children: [
+          "Vis ",
+          formatNumber(take),
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 16 })
+        ] }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: pageSizeOptions == null ? void 0 : pageSizeOptions.map((size) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: size === take, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => {
+              var _a;
+              handlePageSizeChange(size);
+              (_a = pageSizeRef.current) == null ? void 0 : _a.close();
+            },
+            children: formatNumber(size)
+          }
+        ) }, size)) })
+      }
+    )
+  ] });
+}
+
+exports.Pagination = Pagination;