@guardian/stand 0.0.72 → 0.0.74

package/dist/components/Menu/Menu.d.cts

@@ -1,10 +1,9 @@
 import { DefaultPropsWithChildren } from "../../util/types.cjs";
 import { MenuItemProps, MenuProps, MenuSectionProps, MenuSeparatorProps } from "./types.cjs";
 //#region src/components/Menu/Menu.d.ts
-declare function MenuSeparator({ theme, cssOverrides, ...props }: MenuSeparatorProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function MenuToggle({ children }: DefaultPropsWithChildren<unknown>): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function MenuSection({ name, size, theme, cssOverrides, children, ...props }: MenuSectionProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function MenuItem({ label, description, aside, icon, size, theme, cssOverrides, ...props }: MenuItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function Menu({ theme, size, popoverProps, menuTriggerProps, children, cssOverrides, ...props }: MenuProps): import("@emotion/react/jsx-runtime").JSX.Element;
-//#endregion
-export { Menu, MenuItem, MenuSection, MenuSeparator, MenuToggle };
+export declare function MenuSeparator({ theme, cssOverrides, ...props }: MenuSeparatorProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function MenuToggle({ children }: DefaultPropsWithChildren<unknown>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function MenuSection({ name, size, theme, cssOverrides, children, ...props }: MenuSectionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function MenuItem({ label, description, aside, icon, size, theme, cssOverrides, ...props }: MenuItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Menu({ theme, size, popoverProps, menuTriggerProps, children, cssOverrides, ...props }: MenuProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion

package/dist/components/Menu/Menu.d.ts

@@ -1,10 +1,9 @@
 import { DefaultPropsWithChildren } from "../../util/types.js";
 import { MenuItemProps, MenuProps, MenuSectionProps, MenuSeparatorProps } from "./types.js";
 //#region src/components/Menu/Menu.d.ts
-declare function MenuSeparator({ theme, cssOverrides, ...props }: MenuSeparatorProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function MenuToggle({ children }: DefaultPropsWithChildren<unknown>): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function MenuSection({ name, size, theme, cssOverrides, children, ...props }: MenuSectionProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function MenuItem({ label, description, aside, icon, size, theme, cssOverrides, ...props }: MenuItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function Menu({ theme, size, popoverProps, menuTriggerProps, children, cssOverrides, ...props }: MenuProps): import("@emotion/react/jsx-runtime").JSX.Element;
-//#endregion
-export { Menu, MenuItem, MenuSection, MenuSeparator, MenuToggle };
+export declare function MenuSeparator({ theme, cssOverrides, ...props }: MenuSeparatorProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function MenuToggle({ children }: DefaultPropsWithChildren<unknown>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function MenuSection({ name, size, theme, cssOverrides, children, ...props }: MenuSectionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function MenuItem({ label, description, aside, icon, size, theme, cssOverrides, ...props }: MenuItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Menu({ theme, size, popoverProps, menuTriggerProps, children, cssOverrides, ...props }: MenuProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion

package/dist/components/Menu/styles.d.cts

@@ -3,15 +3,14 @@ import { ComponentMenu } from "../../styleD/build/typescript/component/menu.cjs"
 import "./types.cjs";
 import { SerializedStyles } from "@emotion/react";
 //#region src/components/Menu/styles.d.ts
-type MenuTheme = Prettify<ComponentMenu['menu']>;
-type PartialMenuTheme = Prettify<DeepPartial<MenuTheme>>;
-type MenuSectionTheme = Prettify<ComponentMenu['menuSection']>;
-type PartialMenuSectionTheme = Prettify<DeepPartial<MenuSectionTheme>>;
-type MenuItemTheme = Prettify<ComponentMenu['menuItem']>;
-type PartialMenuItemTheme = Prettify<DeepPartial<MenuItemTheme>>;
-type MenuSeparatorTheme = Prettify<ComponentMenu['menuSeparator']>;
-type PartialMenuSeparatorTheme = Prettify<DeepPartial<MenuSeparatorTheme>>;
-type MenuPopoverTheme = Prettify<ComponentMenu['menuPopover']>;
-type PartialMenuPopoverTheme = Prettify<DeepPartial<MenuPopoverTheme>>;
-//#endregion
-export { MenuItemTheme, MenuPopoverTheme, MenuSectionTheme, MenuSeparatorTheme, MenuTheme, PartialMenuItemTheme, PartialMenuPopoverTheme, PartialMenuSectionTheme, PartialMenuSeparatorTheme, PartialMenuTheme };
+export type MenuTheme = Prettify<ComponentMenu['menu']>;
+export type PartialMenuTheme = Prettify<DeepPartial<MenuTheme>>;
+export type MenuSectionTheme = Prettify<ComponentMenu['menuSection']>;
+export type PartialMenuSectionTheme = Prettify<DeepPartial<MenuSectionTheme>>;
+export type MenuItemTheme = Prettify<ComponentMenu['menuItem']>;
+export type PartialMenuItemTheme = Prettify<DeepPartial<MenuItemTheme>>;
+export type MenuSeparatorTheme = Prettify<ComponentMenu['menuSeparator']>;
+export type PartialMenuSeparatorTheme = Prettify<DeepPartial<MenuSeparatorTheme>>;
+export type MenuPopoverTheme = Prettify<ComponentMenu['menuPopover']>;
+export type PartialMenuPopoverTheme = Prettify<DeepPartial<MenuPopoverTheme>>;
+//#endregion

package/dist/components/Menu/styles.d.ts

@@ -3,15 +3,14 @@ import { ComponentMenu } from "../../styleD/build/typescript/component/menu.js";
 import "./types.js";
 import { SerializedStyles } from "@emotion/react";
 //#region src/components/Menu/styles.d.ts
-type MenuTheme = Prettify<ComponentMenu['menu']>;
-type PartialMenuTheme = Prettify<DeepPartial<MenuTheme>>;
-type MenuSectionTheme = Prettify<ComponentMenu['menuSection']>;
-type PartialMenuSectionTheme = Prettify<DeepPartial<MenuSectionTheme>>;
-type MenuItemTheme = Prettify<ComponentMenu['menuItem']>;
-type PartialMenuItemTheme = Prettify<DeepPartial<MenuItemTheme>>;
-type MenuSeparatorTheme = Prettify<ComponentMenu['menuSeparator']>;
-type PartialMenuSeparatorTheme = Prettify<DeepPartial<MenuSeparatorTheme>>;
-type MenuPopoverTheme = Prettify<ComponentMenu['menuPopover']>;
-type PartialMenuPopoverTheme = Prettify<DeepPartial<MenuPopoverTheme>>;
-//#endregion
-export { MenuItemTheme, MenuPopoverTheme, MenuSectionTheme, MenuSeparatorTheme, MenuTheme, PartialMenuItemTheme, PartialMenuPopoverTheme, PartialMenuSectionTheme, PartialMenuSeparatorTheme, PartialMenuTheme };
+export type MenuTheme = Prettify<ComponentMenu['menu']>;
+export type PartialMenuTheme = Prettify<DeepPartial<MenuTheme>>;
+export type MenuSectionTheme = Prettify<ComponentMenu['menuSection']>;
+export type PartialMenuSectionTheme = Prettify<DeepPartial<MenuSectionTheme>>;
+export type MenuItemTheme = Prettify<ComponentMenu['menuItem']>;
+export type PartialMenuItemTheme = Prettify<DeepPartial<MenuItemTheme>>;
+export type MenuSeparatorTheme = Prettify<ComponentMenu['menuSeparator']>;
+export type PartialMenuSeparatorTheme = Prettify<DeepPartial<MenuSeparatorTheme>>;
+export type MenuPopoverTheme = Prettify<ComponentMenu['menuPopover']>;
+export type PartialMenuPopoverTheme = Prettify<DeepPartial<MenuPopoverTheme>>;
+//#endregion

package/dist/components/Menu/types.d.cts

@@ -53,8 +53,8 @@ interface MenuItemProps$1 extends DefaultProps<MenuItemTheme, MenuItemProps['cla
    */
   size?: MenuPopoverProps['size'];
 }
-type MenuSeparatorProps = DefaultProps<MenuSeparatorTheme, SeparatorProps['className']>;
-interface MenuPopoverProps extends DefaultProps<MenuPopoverTheme, PopoverProps['className']>, PopoverProps {
+export type MenuSeparatorProps = DefaultProps<MenuSeparatorTheme, SeparatorProps['className']>;
+export interface MenuPopoverProps extends DefaultProps<MenuPopoverTheme, PopoverProps['className']>, PopoverProps {
   /**
    * Size variant of the Popover, this doesn't need to be passed if the Popover is a child of Menu, as it will inherit the size of the Menu.
    */
@@ -62,4 +62,4 @@ interface MenuPopoverProps extends DefaultProps<MenuPopoverTheme, PopoverProps['
 }
 type MenuTriggerProps$1 = MenuTriggerProps;
 //#endregion
-export { MenuItemProps$1 as MenuItemProps, MenuPopoverProps, MenuProps$1 as MenuProps, MenuSectionProps$1 as MenuSectionProps, MenuSeparatorProps, MenuTriggerProps$1 as MenuTriggerProps };
+export { MenuItemProps$1 as MenuItemProps, MenuProps$1 as MenuProps, MenuSectionProps$1 as MenuSectionProps, MenuTriggerProps$1 as MenuTriggerProps };

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

@@ -53,8 +53,8 @@ interface MenuItemProps$1 extends DefaultProps<MenuItemTheme, MenuItemProps['cla
    */
   size?: MenuPopoverProps['size'];
 }
-type MenuSeparatorProps = DefaultProps<MenuSeparatorTheme, SeparatorProps['className']>;
-interface MenuPopoverProps extends DefaultProps<MenuPopoverTheme, PopoverProps['className']>, PopoverProps {
+export type MenuSeparatorProps = DefaultProps<MenuSeparatorTheme, SeparatorProps['className']>;
+export interface MenuPopoverProps extends DefaultProps<MenuPopoverTheme, PopoverProps['className']>, PopoverProps {
   /**
    * Size variant of the Popover, this doesn't need to be passed if the Popover is a child of Menu, as it will inherit the size of the Menu.
    */
@@ -62,4 +62,4 @@ interface MenuPopoverProps extends DefaultProps<MenuPopoverTheme, PopoverProps['
 }
 type MenuTriggerProps$1 = MenuTriggerProps;
 //#endregion
-export { MenuItemProps$1 as MenuItemProps, MenuPopoverProps, MenuProps$1 as MenuProps, MenuSectionProps$1 as MenuSectionProps, MenuSeparatorProps, MenuTriggerProps$1 as MenuTriggerProps };
+export { MenuItemProps$1 as MenuItemProps, MenuProps$1 as MenuProps, MenuSectionProps$1 as MenuSectionProps, MenuTriggerProps$1 as MenuTriggerProps };

package/dist/components/Modal/Modal.d.cts

@@ -1,8 +1,8 @@
 import { DialogButtonsProps, DialogContentProps, DialogDismissProps, DialogHeaderProps, DialogProps, DialogTriggerProps, ModalProps } from "./types.cjs";
 import React from "react";
 //#region src/components/Modal/Modal.d.ts
-declare const Modal: ({ theme, children, cssOverrides, ...props }: ModalProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-declare const DialogTrigger: (props: DialogTriggerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ theme, children, cssOverrides, ...props }: ModalProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DialogTrigger: (props: DialogTriggerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 interface DialogCompound {
   (props: DialogProps): React.ReactElement;
   Header: (props: DialogHeaderProps) => React.ReactElement;
@@ -10,6 +10,5 @@ interface DialogCompound {
   Content: (props: DialogContentProps) => React.ReactElement;
   Dismiss: (props: DialogDismissProps) => React.ReactElement;
 }
-declare const Dialog: DialogCompound;
-//#endregion
-export { Dialog, DialogTrigger, Modal };
+export declare const Dialog: DialogCompound;
+//#endregion

package/dist/components/Modal/Modal.d.ts

@@ -1,8 +1,8 @@
 import { DialogButtonsProps, DialogContentProps, DialogDismissProps, DialogHeaderProps, DialogProps, DialogTriggerProps, ModalProps } from "./types.js";
 import React from "react";
 //#region src/components/Modal/Modal.d.ts
-declare const Modal: ({ theme, children, cssOverrides, ...props }: ModalProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-declare const DialogTrigger: (props: DialogTriggerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ theme, children, cssOverrides, ...props }: ModalProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DialogTrigger: (props: DialogTriggerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 interface DialogCompound {
   (props: DialogProps): React.ReactElement;
   Header: (props: DialogHeaderProps) => React.ReactElement;
@@ -10,6 +10,5 @@ interface DialogCompound {
   Content: (props: DialogContentProps) => React.ReactElement;
   Dismiss: (props: DialogDismissProps) => React.ReactElement;
 }
-declare const Dialog: DialogCompound;
-//#endregion
-export { Dialog, DialogTrigger, Modal };
+export declare const Dialog: DialogCompound;
+//#endregion

package/dist/components/Modal/styles.d.cts

@@ -2,8 +2,7 @@ import { DeepPartial, Prettify } from "../../util/types.cjs";
 import { ComponentModal } from "../../styleD/build/typescript/component/modal.cjs";
 import { SerializedStyles } from "@emotion/react";
 //#region src/components/Modal/styles.d.ts
-type ModalTheme = Prettify<Pick<ComponentModal, 'modal' | 'overlay'>>;
-type PartialModalTheme = Prettify<DeepPartial<ModalTheme>>;
-type DialogTheme = Prettify<ComponentModal['dialog']>;
-//#endregion
-export { DialogTheme, ModalTheme, PartialModalTheme };
+export type ModalTheme = Prettify<Pick<ComponentModal, 'modal' | 'overlay'>>;
+export type PartialModalTheme = Prettify<DeepPartial<ModalTheme>>;
+export type DialogTheme = Prettify<ComponentModal['dialog']>;
+//#endregion

package/dist/components/Modal/styles.d.ts

@@ -2,8 +2,7 @@ import { DeepPartial, Prettify } from "../../util/types.js";
 import { ComponentModal } from "../../styleD/build/typescript/component/modal.js";
 import { SerializedStyles } from "@emotion/react";
 //#region src/components/Modal/styles.d.ts
-type ModalTheme = Prettify<Pick<ComponentModal, 'modal' | 'overlay'>>;
-type PartialModalTheme = Prettify<DeepPartial<ModalTheme>>;
-type DialogTheme = Prettify<ComponentModal['dialog']>;
-//#endregion
-export { DialogTheme, ModalTheme, PartialModalTheme };
+export type ModalTheme = Prettify<Pick<ComponentModal, 'modal' | 'overlay'>>;
+export type PartialModalTheme = Prettify<DeepPartial<ModalTheme>>;
+export type DialogTheme = Prettify<ComponentModal['dialog']>;
+//#endregion

package/dist/components/Modal/types.d.cts

@@ -4,16 +4,16 @@ import { TypographyProps } from "../Typography/types.cjs";
 import { DialogTheme, ModalTheme } from "./styles.cjs";
 import { DialogProps, DialogTriggerProps, ModalOverlayProps } from "react-aria-components";
 //#region src/components/Modal/types.d.ts
-type ModalProps = DefaultProps<ModalTheme, ModalOverlayProps['className']> & ModalOverlayProps;
+export type ModalProps = DefaultProps<ModalTheme, ModalOverlayProps['className']> & ModalOverlayProps;
 type DialogProps$1 = DefaultProps<DialogTheme['container'], DialogProps['className']> & DialogProps;
-type DialogHeaderProps = Omit<TypographyProps, 'theme'> & {
+export type DialogHeaderProps = Omit<TypographyProps, 'theme'> & {
   theme?: DeepPartial<DialogTheme['title']>;
 };
-type DialogButtonsProps = DefaultPropsWithChildren<DialogTheme['ctas']>;
-type DialogContentProps = DefaultPropsWithChildren<DialogTheme['children']>;
-type DialogDismissProps = Omit<IconButtonProps, 'theme'> & {
+export type DialogButtonsProps = DefaultPropsWithChildren<DialogTheme['ctas']>;
+export type DialogContentProps = DefaultPropsWithChildren<DialogTheme['children']>;
+export type DialogDismissProps = Omit<IconButtonProps, 'theme'> & {
   theme?: DeepPartial<DialogTheme['dismiss']>;
 };
 type DialogTriggerProps$1 = DialogTriggerProps;
 //#endregion
-export { DialogButtonsProps, DialogContentProps, DialogDismissProps, DialogHeaderProps, DialogProps$1 as DialogProps, DialogTriggerProps$1 as DialogTriggerProps, ModalProps };
+export { DialogProps$1 as DialogProps, DialogTriggerProps$1 as DialogTriggerProps };

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

@@ -4,16 +4,16 @@ import { TypographyProps } from "../Typography/types.js";
 import { DialogTheme, ModalTheme } from "./styles.js";
 import { DialogProps, DialogTriggerProps, ModalOverlayProps } from "react-aria-components";
 //#region src/components/Modal/types.d.ts
-type ModalProps = DefaultProps<ModalTheme, ModalOverlayProps['className']> & ModalOverlayProps;
+export type ModalProps = DefaultProps<ModalTheme, ModalOverlayProps['className']> & ModalOverlayProps;
 type DialogProps$1 = DefaultProps<DialogTheme['container'], DialogProps['className']> & DialogProps;
-type DialogHeaderProps = Omit<TypographyProps, 'theme'> & {
+export type DialogHeaderProps = Omit<TypographyProps, 'theme'> & {
   theme?: DeepPartial<DialogTheme['title']>;
 };
-type DialogButtonsProps = DefaultPropsWithChildren<DialogTheme['ctas']>;
-type DialogContentProps = DefaultPropsWithChildren<DialogTheme['children']>;
-type DialogDismissProps = Omit<IconButtonProps, 'theme'> & {
+export type DialogButtonsProps = DefaultPropsWithChildren<DialogTheme['ctas']>;
+export type DialogContentProps = DefaultPropsWithChildren<DialogTheme['children']>;
+export type DialogDismissProps = Omit<IconButtonProps, 'theme'> & {
   theme?: DeepPartial<DialogTheme['dismiss']>;
 };
 type DialogTriggerProps$1 = DialogTriggerProps;
 //#endregion
-export { DialogButtonsProps, DialogContentProps, DialogDismissProps, DialogHeaderProps, DialogProps$1 as DialogProps, DialogTriggerProps$1 as DialogTriggerProps, ModalProps };
+export { DialogProps$1 as DialogProps, DialogTriggerProps$1 as DialogTriggerProps };

package/dist/components/Pagination/Pagination.cjs

@@ -0,0 +1,97 @@
+const require_mergeDeep = require("../../util/mergeDeep.cjs");
+const require_IconButton = require("../IconButton/IconButton.cjs");
+const require_lib = require("./lib.cjs");
+const require_styles = require("./styles.cjs");
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
+//#region src/components/Pagination/Pagination.tsx
+const defaultLabels = {
+	nav: "Pagination",
+	previous: "Go to previous page",
+	next: "Go to next page",
+	page: (page) => `Go to page ${page}`,
+	status: (currentPage, totalPages) => `Page ${currentPage} of ${totalPages}`
+};
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const Pagination = ({ currentPage, totalItems, pageSize, onPageChange, siblingCount = 1, boundaryCount = 1, showSummary = true, renderSummary, collapseBelow = "md", labels, theme, cssOverrides, className }) => {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultPaginationTheme, theme ?? {});
+	const mergedLabels = {
+		...defaultLabels,
+		...labels
+	};
+	const safePageSize = Math.max(1, pageSize);
+	const totalPages = require_lib.getTotalPages(totalItems, safePageSize);
+	const page = clamp(currentPage, 1, totalPages);
+	const items = require_lib.getPageRange({
+		currentPage: page,
+		totalPages,
+		siblingCount,
+		boundaryCount
+	});
+	const goTo = (next) => onPageChange(clamp(next, 1, totalPages));
+	const startItem = totalItems === 0 ? 0 : (page - 1) * safePageSize + 1;
+	const endItem = Math.min(page * safePageSize, totalItems);
+	const summary = renderSummary ? renderSummary({
+		currentPage: page,
+		totalPages,
+		totalItems,
+		pageSize: safePageSize,
+		startItem,
+		endItem
+	}) : `Results: ${startItem}\u2013${endItem} of ${totalItems}`;
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("nav", {
+		"aria-label": mergedLabels.nav,
+		className,
+		css: [require_styles.paginationStyles(mergedTheme), cssOverrides],
+		children: [
+			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+				variant: "secondary",
+				size: "xs",
+				symbol: "chevron_left",
+				ariaLabel: mergedLabels.previous,
+				isDisabled: page <= 1,
+				onPress: () => goTo(page - 1),
+				cssOverrides: require_styles.arrowStyles(mergedTheme)
+			}),
+			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("ul", {
+				css: require_styles.listStyles(mergedTheme, collapseBelow),
+				children: items.map((item, index) => {
+					if (item === "ellipsis") return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("li", {
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
+							css: require_styles.ellipsisStyles(mergedTheme),
+							children: "…"
+						})
+					}, `ellipsis-${index}`);
+					const isCurrent = item === page;
+					return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Button, {
+						"aria-label": mergedLabels.page(item),
+						"aria-current": isCurrent ? "page" : void 0,
+						onPress: () => !isCurrent && goTo(item),
+						css: require_styles.itemStyles(mergedTheme, isCurrent),
+						children: item
+					}) }, item);
+				})
+			}),
+			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
+				css: require_styles.compactStatusStyles(mergedTheme, collapseBelow),
+				children: mergedLabels.status(page, totalPages)
+			}),
+			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+				variant: "secondary",
+				size: "xs",
+				symbol: "chevron_right",
+				ariaLabel: mergedLabels.next,
+				isDisabled: page >= totalPages,
+				onPress: () => goTo(page + 1),
+				cssOverrides: require_styles.arrowStyles(mergedTheme)
+			}),
+			showSummary && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
+				css: require_styles.summaryStyles(mergedTheme, collapseBelow),
+				children: summary
+			})
+		]
+	});
+};
+//#endregion
+exports.Pagination = Pagination;

package/dist/components/Pagination/Pagination.d.cts

@@ -0,0 +1,4 @@
+import { PaginationProps } from "./types.cjs";
+//#region src/components/Pagination/Pagination.d.ts
+export declare const Pagination: ({ currentPage, totalItems, pageSize, onPageChange, siblingCount, boundaryCount, showSummary, renderSummary, collapseBelow, labels, theme, cssOverrides, className }: PaginationProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion

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

@@ -0,0 +1,4 @@
+import { PaginationProps } from "./types.js";
+//#region src/components/Pagination/Pagination.d.ts
+export declare const Pagination: ({ currentPage, totalItems, pageSize, onPageChange, siblingCount, boundaryCount, showSummary, renderSummary, collapseBelow, labels, theme, cssOverrides, className }: PaginationProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,97 @@
+import { mergeDeep } from "../../util/mergeDeep.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { getPageRange, getTotalPages } from "./lib.js";
+import { arrowStyles, compactStatusStyles, defaultPaginationTheme, ellipsisStyles, itemStyles, listStyles, paginationStyles, summaryStyles } from "./styles.js";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { Button } from "react-aria-components";
+//#region src/components/Pagination/Pagination.tsx
+const defaultLabels = {
+	nav: "Pagination",
+	previous: "Go to previous page",
+	next: "Go to next page",
+	page: (page) => `Go to page ${page}`,
+	status: (currentPage, totalPages) => `Page ${currentPage} of ${totalPages}`
+};
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const Pagination = ({ currentPage, totalItems, pageSize, onPageChange, siblingCount = 1, boundaryCount = 1, showSummary = true, renderSummary, collapseBelow = "md", labels, theme, cssOverrides, className }) => {
+	const mergedTheme = mergeDeep(defaultPaginationTheme, theme ?? {});
+	const mergedLabels = {
+		...defaultLabels,
+		...labels
+	};
+	const safePageSize = Math.max(1, pageSize);
+	const totalPages = getTotalPages(totalItems, safePageSize);
+	const page = clamp(currentPage, 1, totalPages);
+	const items = getPageRange({
+		currentPage: page,
+		totalPages,
+		siblingCount,
+		boundaryCount
+	});
+	const goTo = (next) => onPageChange(clamp(next, 1, totalPages));
+	const startItem = totalItems === 0 ? 0 : (page - 1) * safePageSize + 1;
+	const endItem = Math.min(page * safePageSize, totalItems);
+	const summary = renderSummary ? renderSummary({
+		currentPage: page,
+		totalPages,
+		totalItems,
+		pageSize: safePageSize,
+		startItem,
+		endItem
+	}) : `Results: ${startItem}\u2013${endItem} of ${totalItems}`;
+	return /* @__PURE__ */ jsxs("nav", {
+		"aria-label": mergedLabels.nav,
+		className,
+		css: [paginationStyles(mergedTheme), cssOverrides],
+		children: [
+			/* @__PURE__ */ jsx(IconButton, {
+				variant: "secondary",
+				size: "xs",
+				symbol: "chevron_left",
+				ariaLabel: mergedLabels.previous,
+				isDisabled: page <= 1,
+				onPress: () => goTo(page - 1),
+				cssOverrides: arrowStyles(mergedTheme)
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				css: listStyles(mergedTheme, collapseBelow),
+				children: items.map((item, index) => {
+					if (item === "ellipsis") return /* @__PURE__ */ jsx("li", {
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx("span", {
+							css: ellipsisStyles(mergedTheme),
+							children: "…"
+						})
+					}, `ellipsis-${index}`);
+					const isCurrent = item === page;
+					return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Button, {
+						"aria-label": mergedLabels.page(item),
+						"aria-current": isCurrent ? "page" : void 0,
+						onPress: () => !isCurrent && goTo(item),
+						css: itemStyles(mergedTheme, isCurrent),
+						children: item
+					}) }, item);
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				css: compactStatusStyles(mergedTheme, collapseBelow),
+				children: mergedLabels.status(page, totalPages)
+			}),
+			/* @__PURE__ */ jsx(IconButton, {
+				variant: "secondary",
+				size: "xs",
+				symbol: "chevron_right",
+				ariaLabel: mergedLabels.next,
+				isDisabled: page >= totalPages,
+				onPress: () => goTo(page + 1),
+				cssOverrides: arrowStyles(mergedTheme)
+			}),
+			showSummary && /* @__PURE__ */ jsx("span", {
+				css: summaryStyles(mergedTheme, collapseBelow),
+				children: summary
+			})
+		]
+	});
+};
+//#endregion
+export { Pagination };

package/dist/components/Pagination/lib.cjs

@@ -0,0 +1,30 @@
+//#region src/components/Pagination/lib.ts
+const ELLIPSIS = "ellipsis";
+const range = (start, end) => Array.from({ length: Math.max(0, end - start + 1) }, (_, i) => start + i);
+/** Derive the total number of pages from a total item count and page size. */
+const getTotalPages = (totalItems, pageSize) => Math.max(1, Math.ceil(Math.max(0, totalItems) / Math.max(1, pageSize)));
+/**
+* Build the list of page numbers and ellipsis markers to render, keeping the
+* first/last boundary pages and a window of siblings around the current page.
+*/
+const getPageRange = ({ currentPage, totalPages, siblingCount = 1, boundaryCount = 1 }) => {
+	if (totalPages <= 1) return range(1, totalPages);
+	if (siblingCount * 2 + 3 + boundaryCount * 2 >= totalPages) return range(1, totalPages);
+	const startPages = range(1, boundaryCount);
+	const endPages = range(totalPages - boundaryCount + 1, totalPages);
+	const siblingsStart = Math.max(Math.min(currentPage - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2);
+	const siblingsEnd = Math.min(Math.max(currentPage + siblingCount, boundaryCount + siblingCount * 2 + 2), endPages.length > 0 ? endPages[0] - 2 : totalPages - 1);
+	const startEllipsis = siblingsStart > boundaryCount + 2 ? [ELLIPSIS] : boundaryCount + 1 < totalPages - boundaryCount ? [boundaryCount + 1] : [];
+	const endEllipsis = siblingsEnd < totalPages - boundaryCount - 1 ? [ELLIPSIS] : totalPages - boundaryCount > boundaryCount ? [totalPages - boundaryCount] : [];
+	return [
+		...startPages,
+		...startEllipsis,
+		...range(siblingsStart, siblingsEnd),
+		...endEllipsis,
+		...endPages
+	];
+};
+//#endregion
+exports.ELLIPSIS = ELLIPSIS;
+exports.getPageRange = getPageRange;
+exports.getTotalPages = getTotalPages;

package/dist/components/Pagination/lib.js

@@ -0,0 +1,28 @@
+//#region src/components/Pagination/lib.ts
+const ELLIPSIS = "ellipsis";
+const range = (start, end) => Array.from({ length: Math.max(0, end - start + 1) }, (_, i) => start + i);
+/** Derive the total number of pages from a total item count and page size. */
+const getTotalPages = (totalItems, pageSize) => Math.max(1, Math.ceil(Math.max(0, totalItems) / Math.max(1, pageSize)));
+/**
+* Build the list of page numbers and ellipsis markers to render, keeping the
+* first/last boundary pages and a window of siblings around the current page.
+*/
+const getPageRange = ({ currentPage, totalPages, siblingCount = 1, boundaryCount = 1 }) => {
+	if (totalPages <= 1) return range(1, totalPages);
+	if (siblingCount * 2 + 3 + boundaryCount * 2 >= totalPages) return range(1, totalPages);
+	const startPages = range(1, boundaryCount);
+	const endPages = range(totalPages - boundaryCount + 1, totalPages);
+	const siblingsStart = Math.max(Math.min(currentPage - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2);
+	const siblingsEnd = Math.min(Math.max(currentPage + siblingCount, boundaryCount + siblingCount * 2 + 2), endPages.length > 0 ? endPages[0] - 2 : totalPages - 1);
+	const startEllipsis = siblingsStart > boundaryCount + 2 ? [ELLIPSIS] : boundaryCount + 1 < totalPages - boundaryCount ? [boundaryCount + 1] : [];
+	const endEllipsis = siblingsEnd < totalPages - boundaryCount - 1 ? [ELLIPSIS] : totalPages - boundaryCount > boundaryCount ? [totalPages - boundaryCount] : [];
+	return [
+		...startPages,
+		...startEllipsis,
+		...range(siblingsStart, siblingsEnd),
+		...endEllipsis,
+		...endPages
+	];
+};
+//#endregion
+export { ELLIPSIS, getPageRange, getTotalPages };

package/dist/components/Pagination/styles.cjs

@@ -0,0 +1,112 @@
+const require_typography = require("../../styleD/utils/semantic/typography.cjs");
+const require_mq = require("../../styleD/utils/semantic/mq.cjs");
+const require_pagination = require("../../styleD/build/typescript/component/pagination.cjs");
+let _emotion_react = require("@emotion/react");
+//#region src/components/Pagination/styles.ts
+const defaultPaginationTheme = require_pagination.componentPagination;
+const paginationStyles = (theme) => _emotion_react.css`
+	display: ${theme.shared.display};
+	align-items: ${theme.shared.alignItems};
+	gap: ${theme.shared.gap};
+`;
+const listStyles = (theme, collapseBelow) => _emotion_react.css`
+	display: ${theme.shared.display};
+	align-items: ${theme.shared.alignItems};
+	gap: ${theme.shared.gap};
+	margin: 0;
+	padding: 0;
+	list-style: none;
+
+	${require_mq.until[collapseBelow]} {
+		display: none;
+	}
+`;
+const itemStyles = (theme, isCurrent) => {
+	const item = theme.item;
+	const typography = isCurrent ? item.current.typography : item.typography;
+	return _emotion_react.css`
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+		min-width: ${item.minWidth};
+		height: ${item.height};
+		padding: ${item.paddingY} ${item.paddingX};
+		border-radius: ${item.borderRadius};
+		border: ${item.borderWidth} ${item.borderStyle}
+			${isCurrent ? item.current.borderColor : item.borderColor};
+		background-color: ${isCurrent ? item.current.backgroundColor : item.backgroundColor};
+		color: ${isCurrent ? item.current.color : item.color};
+		cursor: ${isCurrent ? "default" : item.cursor};
+		${require_typography.convertTypographyToEmotionStringStyle(typography)}
+
+		&[data-hovered]:not([aria-current='page']) {
+			background-color: ${item.hover.backgroundColor};
+			border-color: ${item.hover.borderColor};
+		}
+
+		&[data-pressed]:not([aria-current='page']) {
+			background-color: ${item.active.backgroundColor};
+		}
+
+		&[data-focus-visible] {
+			outline: ${item.focusVisible.outlineWidth} solid
+				${item.focusVisible.outlineColor};
+			outline-offset: ${item.focusVisible.outlineOffset};
+		}
+
+		&[data-disabled] {
+			color: ${item.disabled.color};
+			background-color: ${item.disabled.backgroundColor};
+			border-color: ${item.disabled.borderColor};
+			cursor: ${item.disabled.cursor};
+		}
+	`;
+};
+const ellipsisStyles = (theme) => _emotion_react.css`
+	box-sizing: border-box;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: ${theme.ellipsis.minWidth};
+	min-width: ${theme.ellipsis.minWidth};
+	height: ${theme.item.height};
+	color: ${theme.ellipsis.color};
+`;
+const arrowStyles = (theme) => _emotion_react.css`
+	box-sizing: border-box;
+	width: ${theme.item.height};
+	min-width: ${theme.item.height};
+	height: ${theme.item.height};
+`;
+const summaryStyles = (theme, collapseBelow) => _emotion_react.css`
+	margin-left: ${theme.summary.marginLeft};
+	color: ${theme.summary.color};
+	white-space: nowrap;
+	${require_typography.convertTypographyToEmotionStringStyle(theme.summary.typography)}
+
+	${require_mq.until[collapseBelow]} {
+		display: none;
+	}
+`;
+const compactStatusStyles = (theme, collapseBelow) => _emotion_react.css`
+	display: none;
+	flex: 1;
+	text-align: center;
+	white-space: nowrap;
+	color: ${theme.summary.color};
+	${require_typography.convertTypographyToEmotionStringStyle(theme.summary.typography)}
+
+	${require_mq.until[collapseBelow]} {
+		display: block;
+	}
+`;
+//#endregion
+exports.arrowStyles = arrowStyles;
+exports.compactStatusStyles = compactStatusStyles;
+exports.defaultPaginationTheme = defaultPaginationTheme;
+exports.ellipsisStyles = ellipsisStyles;
+exports.itemStyles = itemStyles;
+exports.listStyles = listStyles;
+exports.paginationStyles = paginationStyles;
+exports.summaryStyles = summaryStyles;

package/dist/components/Pagination/styles.d.cts

@@ -0,0 +1,7 @@
+import { DeepPartial, Prettify } from "../../util/types.cjs";
+import { ComponentPagination } from "../../styleD/build/typescript/component/pagination.cjs";
+import { SerializedStyles } from "@emotion/react";
+//#region src/components/Pagination/styles.d.ts
+export type PaginationTheme = Prettify<ComponentPagination>;
+export type PartialPaginationTheme = Prettify<DeepPartial<PaginationTheme>>;
+//#endregion