@persona/design-system 0.1.5-pre.4

package/dist/components/Pagination/index.cjs

@@ -0,0 +1,211 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_chunk = require("../../chunk-CoPdw6nB.cjs");
+const require_Stack = require("../../Stack-BHb3ZB2A.cjs");
+require("../Stack/index.cjs");
+const require_IconButton = require("../../IconButton-B1ZL8BqW.cjs");
+require("../Button/index.cjs");
+const require_Input = require("../../Input-DHOsR4cl.cjs");
+require("../Input/index.cjs");
+const require_Select = require("../../Select-CVB-Q1g1.cjs");
+let _persona_design_tokens = require("@persona/design-tokens");
+let styled_components = require("styled-components");
+styled_components = require_chunk.__toESM(styled_components);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let lodash_fp_js = require("lodash/fp.js");
+//#region components/Pagination/constants.ts
+const DEFAULT_PAGE_SIZE_OPTIONS = [
+	10,
+	25,
+	50,
+	100,
+	300
+];
+//#endregion
+//#region components/Pagination/PageSelector.tsx
+const PAGE_LIMIT_BEFORE_SCROLL_MODE = 100;
+const PageSelectorStack = (0, styled_components.default)(require_Stack.HStack).attrs({ justify: "flex-end" })`
+  padding: ${_persona_design_tokens.Spacing[2]};
+`;
+const PageInput = (0, styled_components.default)(require_Stack.HStack).attrs({ align: "center" })`
+  white-space: nowrap;
+`;
+function PageSelector({ paginationParams, handlePageLinkClick, isLoading, onPageChange }) {
+	const { "current-page": currentPage, "total-pages": totalPages, "lower-bound": lowerBound } = paginationParams ?? {};
+	const [selectedPage, setSelectedPage] = (0, react.useState)(currentPage);
+	const handlePageLinkClickDebounced = (0, react.useMemo)(() => (0, lodash_fp_js.debounce)(500, handlePageLinkClick), [handlePageLinkClick]);
+	(0, react.useEffect)(() => {
+		if (currentPage != null) setSelectedPage(currentPage);
+	}, [currentPage]);
+	if (!paginationParams) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PageSelectorStack, {
+		"data-test": "pagination__page-selector",
+		id: "pagination__page-selector",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PageInput, { children: [
+				totalPages < 100 && !lowerBound ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Input.Input, {
+					"aria-label": "Go to page number",
+					size: "sm",
+					inputSize: 2,
+					onChange: (e) => {
+						const value = e.target.valueAsNumber;
+						if (Number.isNaN(value)) setSelectedPage(void 0);
+						else {
+							setSelectedPage(value);
+							const boundedValue = Math.min(Math.max(e.target.valueAsNumber, 1), totalPages);
+							handlePageLinkClickDebounced(boundedValue);
+							onPageChange?.(boundedValue);
+						}
+					},
+					onBlur: (e) => {
+						if (Number.isNaN(e.target.valueAsNumber)) setSelectedPage(currentPage);
+					},
+					min: 1,
+					max: totalPages,
+					type: "number",
+					disabled: isLoading,
+					value: selectedPage ?? ""
+				}) : currentPage + " ",
+				"of ",
+				lowerBound ? "many" : totalPages,
+				" pages"
+			] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.Button, {
+				id: "pagination__page-selector--left",
+				disabled: currentPage === 1 || isLoading,
+				onClick: () => {
+					if (currentPage !== 1) {
+						const prevPageNum = currentPage - 1;
+						setSelectedPage(prevPageNum);
+						handlePageLinkClick(prevPageNum);
+						onPageChange?.(prevPageNum);
+					}
+				},
+				"data-test": "pagination__page-selector-paddle-left",
+				variant: "inverse",
+				size: "sm",
+				width: "auto",
+				"aria-label": "Previous page",
+				children: "Prev"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.Button, {
+				id: "pagination__page-selector--right",
+				disabled: currentPage === totalPages && !lowerBound || isLoading,
+				onClick: () => {
+					if (currentPage !== totalPages || lowerBound) {
+						const nextPageNum = currentPage + 1;
+						setSelectedPage(nextPageNum);
+						handlePageLinkClick(nextPageNum);
+						onPageChange?.(nextPageNum);
+					}
+				},
+				"data-test": "pagination__page-selector-paddle-right",
+				variant: "inverse",
+				size: "sm",
+				width: "auto",
+				"aria-label": "Next page",
+				children: "Next"
+			})
+		]
+	});
+}
+//#endregion
+//#region components/Pagination/PageSizeSelector.tsx
+const Selector = (0, styled_components.default)("div")`
+  padding: ${_persona_design_tokens.Spacing[2]};
+  display: flex;
+  justify-content: flex-end;
+`;
+const Label = styled_components.default.label`
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  gap: ${_persona_design_tokens.Spacing[2]};
+  padding: ${_persona_design_tokens.Spacing[2]};
+`;
+(0, styled_components.default)("div")`
+  padding: 0 ${_persona_design_tokens.Spacing[1]};
+  color: ${_persona_design_tokens.Color.PrimaryPurple};
+  cursor: pointer;
+
+  ${({ currentPageSize, pageSizeOption }) => {
+	if (currentPageSize === pageSizeOption) return `
+        ${_persona_design_tokens.Typography.TextMediumBold};
+        text-decoration: underline;
+      `;
+}};
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+const PageSizeSelector = ({ pageSize, pageSizeOptions, handlePageSizeClick }) => {
+	const pageSizes = [...pageSizeOptions, ...pageSizeOptions.includes(pageSize) ? [] : [pageSize]].sort((a, b) => a - b);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Selector, {
+		"data-test": "pagination__page-size-selector",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Label, { children: ["Items per page:", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Select.Select, {
+			value: pageSize.toString(),
+			onValueChange: (val) => handlePageSizeClick(Number(val)),
+			size: "sm",
+			children: pageSizes.map((size) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Select.Option, {
+				value: size.toString(),
+				children: size
+			}, size))
+		})] })
+	});
+};
+//#endregion
+//#region components/Pagination/Pagination.tsx
+const MAX_PAGES = 100;
+const Container = (0, styled_components.default)("nav")`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+const PaginationInfo = (0, styled_components.default)("div")`
+  display: flex;
+  align-items: center;
+
+  color: ${_persona_design_tokens.Color.TextPrimary};
+`;
+const Pagination = ({ pageSize, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, paginationParams, handlePageSizeClick, handlePageLinkClick, isLoading, showPageSizeSelector = true, onPageChange }) => {
+	if (!paginationParams || !pageSize) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {});
+	const { "current-page": currentPage, "total-count": totalCount, "total-pages": totalPages, "lower-bound": lowerBound } = paginationParams;
+	const totalCountDisplay = lowerBound || totalPages >= MAX_PAGES ? "many" : totalCount;
+	const lastItemIndex = lowerBound ? currentPage * pageSize : Math.min(currentPage * pageSize, totalCount);
+	const firstItemIndex = pageSize * (currentPage - 1) + 1;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container, {
+		role: "navigation",
+		"aria-label": "pagination",
+		children: [showPageSizeSelector && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageSizeSelector, {
+			pageSize,
+			pageSizeOptions,
+			handlePageSizeClick
+		}), totalCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+			"Showing ",
+			firstItemIndex,
+			"-",
+			lastItemIndex,
+			" of ",
+			totalCountDisplay,
+			" items"
+		] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationInfo, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageSelector, {
+			paginationParams,
+			handlePageLinkClick,
+			isLoading,
+			onPageChange
+		}) })] })]
+	});
+};
+//#endregion
+//#region components/Pagination/index.ts
+var Pagination_default = Pagination;
+//#endregion
+exports.PAGE_LIMIT_BEFORE_SCROLL_MODE = PAGE_LIMIT_BEFORE_SCROLL_MODE;
+exports.PageSelector = PageSelector;
+exports.default = Pagination_default;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/Pagination/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["HStack","Spacing","Input","Button","Spacing","Color","Typography","Select","Option","Color"],"sources":["../../../components/Pagination/constants.ts","../../../components/Pagination/PageSelector.tsx","../../../components/Pagination/PageSizeSelector.tsx","../../../components/Pagination/Pagination.tsx","../../../components/Pagination/index.ts"],"sourcesContent":["export const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100, 300];\n","import Button from '@persona/design-system/components/Button';\nimport { Input } from '@persona/design-system/components/Input';\nimport { HStack } from '@persona/design-system/components/Stack';\nimport { Spacing } from '@persona/design-tokens';\nimport { debounce } from 'lodash/fp';\nimport { useEffect, useMemo, useState } from 'react';\nimport styled from 'styled-components';\n\nimport type { PaginationParams } from 'lib/interfaces/api';\n\n// After a certain limit, it no longer makes sense for someone\n// to jump to the last page. Deep paging has performance limitations.\nexport const PAGE_LIMIT_BEFORE_SCROLL_MODE = 100;\n\nconst PageSelectorStack = styled(HStack).attrs({ justify: 'flex-end' })`\n  padding: ${Spacing[2]};\n`;\n\nexport const PageInput = styled(HStack).attrs({ align: 'center' })`\n  white-space: nowrap;\n`;\n\ninterface PageSelectorProps {\n  paginationParams: PaginationParams;\n  handlePageLinkClick: (pageNumber: number) => void;\n  isLoading?: boolean;\n  /**\n   * Called with the new page number after the page changes (next, prev, or\n   * typed input). Lets the consumer react to page changes -- e.g. scroll the\n   * page back to the top.\n   */\n  onPageChange?: (pageNumber: number) => void;\n}\n\nexport default function PageSelector({\n  paginationParams,\n  handlePageLinkClick,\n  isLoading,\n  onPageChange,\n}: PageSelectorProps) {\n  const {\n    'current-page': currentPage,\n    'total-pages': totalPages,\n    'lower-bound': lowerBound,\n  } = paginationParams ?? {};\n  const [selectedPage, setSelectedPage] = useState<number | undefined>(currentPage);\n\n  // We don't use useDebounced to avoid function object reference issues.\n  const handlePageLinkClickDebounced = useMemo(\n    () => debounce(500, handlePageLinkClick),\n    [handlePageLinkClick],\n  );\n\n  // Keep input state synced to pagination state when other user action changes\n  // pagination state.\n  useEffect(() => {\n    if (currentPage != null) {\n      setSelectedPage(currentPage);\n    }\n  }, [currentPage]);\n\n  if (!paginationParams) {\n    return <div />;\n  }\n\n  return (\n    <PageSelectorStack data-test='pagination__page-selector' id='pagination__page-selector'>\n      <PageInput>\n        {totalPages < PAGE_LIMIT_BEFORE_SCROLL_MODE && !lowerBound ? (\n          <Input\n            aria-label='Go to page number'\n            size='sm'\n            inputSize={2}\n            onChange={(e) => {\n              const value = e.target.valueAsNumber;\n              if (Number.isNaN(value)) {\n                setSelectedPage(undefined);\n              } else {\n                // Setting unbounded value feels smoother as the value is not corrected until after the fetch via useEffect.\n                setSelectedPage(value);\n                const boundedValue = Math.min(Math.max(e.target.valueAsNumber, 1), totalPages);\n                handlePageLinkClickDebounced(boundedValue);\n                onPageChange?.(boundedValue);\n              }\n            }}\n            onBlur={(e) => {\n              // Fill blank value on blur.\n              if (Number.isNaN(e.target.valueAsNumber)) {\n                setSelectedPage(currentPage);\n              }\n            }}\n            min={1}\n            max={totalPages}\n            type='number'\n            disabled={isLoading}\n            value={selectedPage ?? ''}\n          />\n        ) : (\n          currentPage + ' '\n        )}\n        of {lowerBound ? 'many' : totalPages} pages\n      </PageInput>\n      <Button\n        id='pagination__page-selector--left'\n        disabled={currentPage === 1 || isLoading}\n        onClick={() => {\n          if (currentPage !== 1) {\n            const prevPageNum = currentPage - 1;\n            setSelectedPage(prevPageNum);\n            handlePageLinkClick(prevPageNum);\n            onPageChange?.(prevPageNum);\n          }\n        }}\n        data-test='pagination__page-selector-paddle-left'\n        variant='inverse'\n        size='sm'\n        width='auto'\n        aria-label='Previous page'\n      >\n        Prev\n      </Button>\n      <Button\n        id='pagination__page-selector--right'\n        disabled={(currentPage === totalPages && !lowerBound) || isLoading}\n        onClick={() => {\n          if (currentPage !== totalPages || lowerBound) {\n            const nextPageNum = currentPage + 1;\n            setSelectedPage(nextPageNum);\n            handlePageLinkClick(nextPageNum);\n            onPageChange?.(nextPageNum);\n          }\n        }}\n        data-test='pagination__page-selector-paddle-right'\n        variant='inverse'\n        size='sm'\n        width='auto'\n        aria-label='Next page'\n      >\n        Next\n      </Button>\n    </PageSelectorStack>\n  );\n}\n","import Select, { Option } from '@persona/design-system/components/Select';\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport styled from 'styled-components';\n\nconst Selector = styled('div')`\n  padding: ${Spacing[2]};\n  display: flex;\n  justify-content: flex-end;\n`;\n\nconst Label = styled.label`\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  gap: ${Spacing[2]};\n  padding: ${Spacing[2]};\n`;\n\ninterface PageSizeOptionProps {\n  currentPageSize: number;\n  pageSizeOption: number;\n}\n\nexport const PageSizeOption = styled('div')<PageSizeOptionProps>`\n  padding: 0 ${Spacing[1]};\n  color: ${Color.PrimaryPurple};\n  cursor: pointer;\n\n  ${({ currentPageSize, pageSizeOption }) => {\n    if (currentPageSize === pageSizeOption) {\n      return `\n        ${Typography.TextMediumBold};\n        text-decoration: underline;\n      `;\n    }\n  }};\n\n  &:hover {\n    text-decoration: underline;\n  }\n`;\n\ninterface PageSizeSelectorProps {\n  pageSize: number;\n  pageSizeOptions: number[];\n  handlePageSizeClick: (pageSize: number) => void;\n}\n\nconst PageSizeSelector = ({\n  pageSize,\n  pageSizeOptions,\n  handlePageSizeClick,\n}: PageSizeSelectorProps) => {\n  // Add pageSize to selector just in case it isn't part of the options so UI doesn't look weird\n  const pageSizes = [\n    ...pageSizeOptions,\n    ...(pageSizeOptions.includes(pageSize) ? [] : [pageSize]),\n  ].sort((a, b) => a - b);\n\n  return (\n    <Selector data-test='pagination__page-size-selector'>\n      <Label>\n        Items per page:\n        <Select\n          value={pageSize.toString()}\n          onValueChange={(val) => handlePageSizeClick(Number(val))}\n          size='sm'\n        >\n          {pageSizes.map((size) => (\n            <Option key={size} value={size.toString()}>\n              {size}\n            </Option>\n          ))}\n        </Select>\n      </Label>\n    </Selector>\n  );\n};\n\nexport default PageSizeSelector;\n","import { Color } from '@persona/design-tokens';\nimport styled from 'styled-components';\n\nimport type { PaginationParams } from 'lib/interfaces/api';\n\nimport { DEFAULT_PAGE_SIZE_OPTIONS } from './constants';\nimport PageSelector from './PageSelector';\nimport PageSizeSelector from './PageSizeSelector';\n\n// NB: this is configured in config/initializers/kaminari.rb\nconst MAX_PAGES = 100;\n\nconst Container = styled('nav')`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n`;\n\nexport const PaginationInfo = styled('div')`\n  display: flex;\n  align-items: center;\n\n  color: ${Color.TextPrimary};\n`;\n\ninterface PaginationProps {\n  pageSize?: number;\n  pageSizeOptions?: number[];\n  paginationParams?: PaginationParams;\n  handlePageSizeClick: (pageSize: number) => void;\n  handlePageLinkClick: (pageNumber: number) => void;\n  isLoading?: boolean;\n  showPageSizeSelector?: boolean;\n  /**\n   * Called with the new page number after the page changes. Lets the consumer\n   * react to page changes -- e.g. scroll the page back to the top.\n   */\n  onPageChange?: (pageNumber: number) => void;\n}\n\nconst Pagination = ({\n  pageSize,\n  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,\n  paginationParams,\n  handlePageSizeClick,\n  handlePageLinkClick,\n  isLoading,\n  showPageSizeSelector = true,\n  onPageChange,\n}: PaginationProps) => {\n  if (!paginationParams || !pageSize) {\n    return <div />;\n  }\n\n  const {\n    'current-page': currentPage,\n    'total-count': totalCount,\n    'total-pages': totalPages,\n    'lower-bound': lowerBound,\n  } = paginationParams;\n\n  // If the total number of pages is the same as MAX_PAGES, we guess that the total number of\n  // items might be limited by max pages, and that the total could change based on page size.\n  // To limit user confusion here, we use 'many' instead of a specific number.\n  const totalCountDisplay = lowerBound || totalPages >= MAX_PAGES ? 'many' : totalCount;\n\n  const lastItemIndex = lowerBound\n    ? currentPage * pageSize\n    : Math.min(currentPage * pageSize, totalCount);\n  const firstItemIndex = pageSize * (currentPage - 1) + 1;\n\n  return (\n    <Container role='navigation' aria-label='pagination'>\n      {showPageSizeSelector && (\n        <PageSizeSelector\n          pageSize={pageSize}\n          pageSizeOptions={pageSizeOptions}\n          handlePageSizeClick={handlePageSizeClick}\n        />\n      )}\n      {totalCount > 0 && (\n        <>\n          <div>\n            Showing {firstItemIndex}-{lastItemIndex} of {totalCountDisplay} items\n          </div>\n          <PaginationInfo>\n            <PageSelector\n              paginationParams={paginationParams}\n              handlePageLinkClick={handlePageLinkClick}\n              isLoading={isLoading}\n              onPageChange={onPageChange}\n            />\n          </PaginationInfo>\n        </>\n      )}\n    </Container>\n  );\n};\n\nexport default Pagination;\n","import Pagination from './Pagination';\n\nexport { default as PageSelector, PAGE_LIMIT_BEFORE_SCROLL_MODE } from './PageSelector';\nexport default Pagination;\n"],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+import PageSelector, { PAGE_LIMIT_BEFORE_SCROLL_MODE } from "../../PageSelector.cjs";
+import Pagination from "../../Pagination.cjs";
+export { PAGE_LIMIT_BEFORE_SCROLL_MODE, PageSelector, Pagination as default };

package/dist/components/Pagination/index.d.mts

@@ -0,0 +1,3 @@
+import PageSelector, { PAGE_LIMIT_BEFORE_SCROLL_MODE } from "../../PageSelector.mjs";
+import Pagination from "../../Pagination.mjs";
+export { PAGE_LIMIT_BEFORE_SCROLL_MODE, PageSelector, Pagination as default };

package/dist/components/Pagination/index.mjs

@@ -0,0 +1,203 @@
+import { t as HStack } from "../../Stack-hwgS2FU1.mjs";
+import "../Stack/index.mjs";
+import { n as Button } from "../../IconButton-C28qxOdi.mjs";
+import "../Button/index.mjs";
+import { n as Input } from "../../Input-eoFk39bE.mjs";
+import "../Input/index.mjs";
+import { n as Select, t as Option } from "../../Select-Cl3AOq0-.mjs";
+import { Color, Spacing, Typography } from "@persona/design-tokens";
+import styled from "styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { debounce } from "lodash/fp.js";
+//#region components/Pagination/constants.ts
+const DEFAULT_PAGE_SIZE_OPTIONS = [
+	10,
+	25,
+	50,
+	100,
+	300
+];
+//#endregion
+//#region components/Pagination/PageSelector.tsx
+const PAGE_LIMIT_BEFORE_SCROLL_MODE = 100;
+const PageSelectorStack = styled(HStack).attrs({ justify: "flex-end" })`
+  padding: ${Spacing[2]};
+`;
+const PageInput = styled(HStack).attrs({ align: "center" })`
+  white-space: nowrap;
+`;
+function PageSelector({ paginationParams, handlePageLinkClick, isLoading, onPageChange }) {
+	const { "current-page": currentPage, "total-pages": totalPages, "lower-bound": lowerBound } = paginationParams ?? {};
+	const [selectedPage, setSelectedPage] = useState(currentPage);
+	const handlePageLinkClickDebounced = useMemo(() => debounce(500, handlePageLinkClick), [handlePageLinkClick]);
+	useEffect(() => {
+		if (currentPage != null) setSelectedPage(currentPage);
+	}, [currentPage]);
+	if (!paginationParams) return /* @__PURE__ */ jsx("div", {});
+	return /* @__PURE__ */ jsxs(PageSelectorStack, {
+		"data-test": "pagination__page-selector",
+		id: "pagination__page-selector",
+		children: [
+			/* @__PURE__ */ jsxs(PageInput, { children: [
+				totalPages < 100 && !lowerBound ? /* @__PURE__ */ jsx(Input, {
+					"aria-label": "Go to page number",
+					size: "sm",
+					inputSize: 2,
+					onChange: (e) => {
+						const value = e.target.valueAsNumber;
+						if (Number.isNaN(value)) setSelectedPage(void 0);
+						else {
+							setSelectedPage(value);
+							const boundedValue = Math.min(Math.max(e.target.valueAsNumber, 1), totalPages);
+							handlePageLinkClickDebounced(boundedValue);
+							onPageChange?.(boundedValue);
+						}
+					},
+					onBlur: (e) => {
+						if (Number.isNaN(e.target.valueAsNumber)) setSelectedPage(currentPage);
+					},
+					min: 1,
+					max: totalPages,
+					type: "number",
+					disabled: isLoading,
+					value: selectedPage ?? ""
+				}) : currentPage + " ",
+				"of ",
+				lowerBound ? "many" : totalPages,
+				" pages"
+			] }),
+			/* @__PURE__ */ jsx(Button, {
+				id: "pagination__page-selector--left",
+				disabled: currentPage === 1 || isLoading,
+				onClick: () => {
+					if (currentPage !== 1) {
+						const prevPageNum = currentPage - 1;
+						setSelectedPage(prevPageNum);
+						handlePageLinkClick(prevPageNum);
+						onPageChange?.(prevPageNum);
+					}
+				},
+				"data-test": "pagination__page-selector-paddle-left",
+				variant: "inverse",
+				size: "sm",
+				width: "auto",
+				"aria-label": "Previous page",
+				children: "Prev"
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				id: "pagination__page-selector--right",
+				disabled: currentPage === totalPages && !lowerBound || isLoading,
+				onClick: () => {
+					if (currentPage !== totalPages || lowerBound) {
+						const nextPageNum = currentPage + 1;
+						setSelectedPage(nextPageNum);
+						handlePageLinkClick(nextPageNum);
+						onPageChange?.(nextPageNum);
+					}
+				},
+				"data-test": "pagination__page-selector-paddle-right",
+				variant: "inverse",
+				size: "sm",
+				width: "auto",
+				"aria-label": "Next page",
+				children: "Next"
+			})
+		]
+	});
+}
+//#endregion
+//#region components/Pagination/PageSizeSelector.tsx
+const Selector = styled("div")`
+  padding: ${Spacing[2]};
+  display: flex;
+  justify-content: flex-end;
+`;
+const Label = styled.label`
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  gap: ${Spacing[2]};
+  padding: ${Spacing[2]};
+`;
+styled("div")`
+  padding: 0 ${Spacing[1]};
+  color: ${Color.PrimaryPurple};
+  cursor: pointer;
+
+  ${({ currentPageSize, pageSizeOption }) => {
+	if (currentPageSize === pageSizeOption) return `
+        ${Typography.TextMediumBold};
+        text-decoration: underline;
+      `;
+}};
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+const PageSizeSelector = ({ pageSize, pageSizeOptions, handlePageSizeClick }) => {
+	const pageSizes = [...pageSizeOptions, ...pageSizeOptions.includes(pageSize) ? [] : [pageSize]].sort((a, b) => a - b);
+	return /* @__PURE__ */ jsx(Selector, {
+		"data-test": "pagination__page-size-selector",
+		children: /* @__PURE__ */ jsxs(Label, { children: ["Items per page:", /* @__PURE__ */ jsx(Select, {
+			value: pageSize.toString(),
+			onValueChange: (val) => handlePageSizeClick(Number(val)),
+			size: "sm",
+			children: pageSizes.map((size) => /* @__PURE__ */ jsx(Option, {
+				value: size.toString(),
+				children: size
+			}, size))
+		})] })
+	});
+};
+//#endregion
+//#region components/Pagination/Pagination.tsx
+const MAX_PAGES = 100;
+const Container = styled("nav")`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+const PaginationInfo = styled("div")`
+  display: flex;
+  align-items: center;
+
+  color: ${Color.TextPrimary};
+`;
+const Pagination = ({ pageSize, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, paginationParams, handlePageSizeClick, handlePageLinkClick, isLoading, showPageSizeSelector = true, onPageChange }) => {
+	if (!paginationParams || !pageSize) return /* @__PURE__ */ jsx("div", {});
+	const { "current-page": currentPage, "total-count": totalCount, "total-pages": totalPages, "lower-bound": lowerBound } = paginationParams;
+	const totalCountDisplay = lowerBound || totalPages >= MAX_PAGES ? "many" : totalCount;
+	const lastItemIndex = lowerBound ? currentPage * pageSize : Math.min(currentPage * pageSize, totalCount);
+	const firstItemIndex = pageSize * (currentPage - 1) + 1;
+	return /* @__PURE__ */ jsxs(Container, {
+		role: "navigation",
+		"aria-label": "pagination",
+		children: [showPageSizeSelector && /* @__PURE__ */ jsx(PageSizeSelector, {
+			pageSize,
+			pageSizeOptions,
+			handlePageSizeClick
+		}), totalCount > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", { children: [
+			"Showing ",
+			firstItemIndex,
+			"-",
+			lastItemIndex,
+			" of ",
+			totalCountDisplay,
+			" items"
+		] }), /* @__PURE__ */ jsx(PaginationInfo, { children: /* @__PURE__ */ jsx(PageSelector, {
+			paginationParams,
+			handlePageLinkClick,
+			isLoading,
+			onPageChange
+		}) })] })]
+	});
+};
+//#endregion
+//#region components/Pagination/index.ts
+var Pagination_default = Pagination;
+//#endregion
+export { PAGE_LIMIT_BEFORE_SCROLL_MODE, PageSelector, Pagination_default as default };
+
+//# sourceMappingURL=index.mjs.map

package/dist/components/Pagination/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/Pagination/constants.ts","../../../components/Pagination/PageSelector.tsx","../../../components/Pagination/PageSizeSelector.tsx","../../../components/Pagination/Pagination.tsx","../../../components/Pagination/index.ts"],"sourcesContent":["export const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100, 300];\n","import Button from '@persona/design-system/components/Button';\nimport { Input } from '@persona/design-system/components/Input';\nimport { HStack } from '@persona/design-system/components/Stack';\nimport { Spacing } from '@persona/design-tokens';\nimport { debounce } from 'lodash/fp';\nimport { useEffect, useMemo, useState } from 'react';\nimport styled from 'styled-components';\n\nimport type { PaginationParams } from 'lib/interfaces/api';\n\n// After a certain limit, it no longer makes sense for someone\n// to jump to the last page. Deep paging has performance limitations.\nexport const PAGE_LIMIT_BEFORE_SCROLL_MODE = 100;\n\nconst PageSelectorStack = styled(HStack).attrs({ justify: 'flex-end' })`\n  padding: ${Spacing[2]};\n`;\n\nexport const PageInput = styled(HStack).attrs({ align: 'center' })`\n  white-space: nowrap;\n`;\n\ninterface PageSelectorProps {\n  paginationParams: PaginationParams;\n  handlePageLinkClick: (pageNumber: number) => void;\n  isLoading?: boolean;\n  /**\n   * Called with the new page number after the page changes (next, prev, or\n   * typed input). Lets the consumer react to page changes -- e.g. scroll the\n   * page back to the top.\n   */\n  onPageChange?: (pageNumber: number) => void;\n}\n\nexport default function PageSelector({\n  paginationParams,\n  handlePageLinkClick,\n  isLoading,\n  onPageChange,\n}: PageSelectorProps) {\n  const {\n    'current-page': currentPage,\n    'total-pages': totalPages,\n    'lower-bound': lowerBound,\n  } = paginationParams ?? {};\n  const [selectedPage, setSelectedPage] = useState<number | undefined>(currentPage);\n\n  // We don't use useDebounced to avoid function object reference issues.\n  const handlePageLinkClickDebounced = useMemo(\n    () => debounce(500, handlePageLinkClick),\n    [handlePageLinkClick],\n  );\n\n  // Keep input state synced to pagination state when other user action changes\n  // pagination state.\n  useEffect(() => {\n    if (currentPage != null) {\n      setSelectedPage(currentPage);\n    }\n  }, [currentPage]);\n\n  if (!paginationParams) {\n    return <div />;\n  }\n\n  return (\n    <PageSelectorStack data-test='pagination__page-selector' id='pagination__page-selector'>\n      <PageInput>\n        {totalPages < PAGE_LIMIT_BEFORE_SCROLL_MODE && !lowerBound ? (\n          <Input\n            aria-label='Go to page number'\n            size='sm'\n            inputSize={2}\n            onChange={(e) => {\n              const value = e.target.valueAsNumber;\n              if (Number.isNaN(value)) {\n                setSelectedPage(undefined);\n              } else {\n                // Setting unbounded value feels smoother as the value is not corrected until after the fetch via useEffect.\n                setSelectedPage(value);\n                const boundedValue = Math.min(Math.max(e.target.valueAsNumber, 1), totalPages);\n                handlePageLinkClickDebounced(boundedValue);\n                onPageChange?.(boundedValue);\n              }\n            }}\n            onBlur={(e) => {\n              // Fill blank value on blur.\n              if (Number.isNaN(e.target.valueAsNumber)) {\n                setSelectedPage(currentPage);\n              }\n            }}\n            min={1}\n            max={totalPages}\n            type='number'\n            disabled={isLoading}\n            value={selectedPage ?? ''}\n          />\n        ) : (\n          currentPage + ' '\n        )}\n        of {lowerBound ? 'many' : totalPages} pages\n      </PageInput>\n      <Button\n        id='pagination__page-selector--left'\n        disabled={currentPage === 1 || isLoading}\n        onClick={() => {\n          if (currentPage !== 1) {\n            const prevPageNum = currentPage - 1;\n            setSelectedPage(prevPageNum);\n            handlePageLinkClick(prevPageNum);\n            onPageChange?.(prevPageNum);\n          }\n        }}\n        data-test='pagination__page-selector-paddle-left'\n        variant='inverse'\n        size='sm'\n        width='auto'\n        aria-label='Previous page'\n      >\n        Prev\n      </Button>\n      <Button\n        id='pagination__page-selector--right'\n        disabled={(currentPage === totalPages && !lowerBound) || isLoading}\n        onClick={() => {\n          if (currentPage !== totalPages || lowerBound) {\n            const nextPageNum = currentPage + 1;\n            setSelectedPage(nextPageNum);\n            handlePageLinkClick(nextPageNum);\n            onPageChange?.(nextPageNum);\n          }\n        }}\n        data-test='pagination__page-selector-paddle-right'\n        variant='inverse'\n        size='sm'\n        width='auto'\n        aria-label='Next page'\n      >\n        Next\n      </Button>\n    </PageSelectorStack>\n  );\n}\n","import Select, { Option } from '@persona/design-system/components/Select';\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport styled from 'styled-components';\n\nconst Selector = styled('div')`\n  padding: ${Spacing[2]};\n  display: flex;\n  justify-content: flex-end;\n`;\n\nconst Label = styled.label`\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  gap: ${Spacing[2]};\n  padding: ${Spacing[2]};\n`;\n\ninterface PageSizeOptionProps {\n  currentPageSize: number;\n  pageSizeOption: number;\n}\n\nexport const PageSizeOption = styled('div')<PageSizeOptionProps>`\n  padding: 0 ${Spacing[1]};\n  color: ${Color.PrimaryPurple};\n  cursor: pointer;\n\n  ${({ currentPageSize, pageSizeOption }) => {\n    if (currentPageSize === pageSizeOption) {\n      return `\n        ${Typography.TextMediumBold};\n        text-decoration: underline;\n      `;\n    }\n  }};\n\n  &:hover {\n    text-decoration: underline;\n  }\n`;\n\ninterface PageSizeSelectorProps {\n  pageSize: number;\n  pageSizeOptions: number[];\n  handlePageSizeClick: (pageSize: number) => void;\n}\n\nconst PageSizeSelector = ({\n  pageSize,\n  pageSizeOptions,\n  handlePageSizeClick,\n}: PageSizeSelectorProps) => {\n  // Add pageSize to selector just in case it isn't part of the options so UI doesn't look weird\n  const pageSizes = [\n    ...pageSizeOptions,\n    ...(pageSizeOptions.includes(pageSize) ? [] : [pageSize]),\n  ].sort((a, b) => a - b);\n\n  return (\n    <Selector data-test='pagination__page-size-selector'>\n      <Label>\n        Items per page:\n        <Select\n          value={pageSize.toString()}\n          onValueChange={(val) => handlePageSizeClick(Number(val))}\n          size='sm'\n        >\n          {pageSizes.map((size) => (\n            <Option key={size} value={size.toString()}>\n              {size}\n            </Option>\n          ))}\n        </Select>\n      </Label>\n    </Selector>\n  );\n};\n\nexport default PageSizeSelector;\n","import { Color } from '@persona/design-tokens';\nimport styled from 'styled-components';\n\nimport type { PaginationParams } from 'lib/interfaces/api';\n\nimport { DEFAULT_PAGE_SIZE_OPTIONS } from './constants';\nimport PageSelector from './PageSelector';\nimport PageSizeSelector from './PageSizeSelector';\n\n// NB: this is configured in config/initializers/kaminari.rb\nconst MAX_PAGES = 100;\n\nconst Container = styled('nav')`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n`;\n\nexport const PaginationInfo = styled('div')`\n  display: flex;\n  align-items: center;\n\n  color: ${Color.TextPrimary};\n`;\n\ninterface PaginationProps {\n  pageSize?: number;\n  pageSizeOptions?: number[];\n  paginationParams?: PaginationParams;\n  handlePageSizeClick: (pageSize: number) => void;\n  handlePageLinkClick: (pageNumber: number) => void;\n  isLoading?: boolean;\n  showPageSizeSelector?: boolean;\n  /**\n   * Called with the new page number after the page changes. Lets the consumer\n   * react to page changes -- e.g. scroll the page back to the top.\n   */\n  onPageChange?: (pageNumber: number) => void;\n}\n\nconst Pagination = ({\n  pageSize,\n  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,\n  paginationParams,\n  handlePageSizeClick,\n  handlePageLinkClick,\n  isLoading,\n  showPageSizeSelector = true,\n  onPageChange,\n}: PaginationProps) => {\n  if (!paginationParams || !pageSize) {\n    return <div />;\n  }\n\n  const {\n    'current-page': currentPage,\n    'total-count': totalCount,\n    'total-pages': totalPages,\n    'lower-bound': lowerBound,\n  } = paginationParams;\n\n  // If the total number of pages is the same as MAX_PAGES, we guess that the total number of\n  // items might be limited by max pages, and that the total could change based on page size.\n  // To limit user confusion here, we use 'many' instead of a specific number.\n  const totalCountDisplay = lowerBound || totalPages >= MAX_PAGES ? 'many' : totalCount;\n\n  const lastItemIndex = lowerBound\n    ? currentPage * pageSize\n    : Math.min(currentPage * pageSize, totalCount);\n  const firstItemIndex = pageSize * (currentPage - 1) + 1;\n\n  return (\n    <Container role='navigation' aria-label='pagination'>\n      {showPageSizeSelector && (\n        <PageSizeSelector\n          pageSize={pageSize}\n          pageSizeOptions={pageSizeOptions}\n          handlePageSizeClick={handlePageSizeClick}\n        />\n      )}\n      {totalCount > 0 && (\n        <>\n          <div>\n            Showing {firstItemIndex}-{lastItemIndex} of {totalCountDisplay} items\n          </div>\n          <PaginationInfo>\n            <PageSelector\n              paginationParams={paginationParams}\n              handlePageLinkClick={handlePageLinkClick}\n              isLoading={isLoading}\n              onPageChange={onPageChange}\n            />\n          </PaginationInfo>\n        </>\n      )}\n    </Container>\n  );\n};\n\nexport default Pagination;\n","import Pagination from './Pagination';\n\nexport { default as PageSelector, PAGE_LIMIT_BEFORE_SCROLL_MODE } from './PageSelector';\nexport default Pagination;\n"],"mappings":"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"}

package/dist/components/Pii/index.cjs

@@ -0,0 +1,20 @@
+require("../../chunk-CoPdw6nB.cjs");
+const require_Sticker = require("../../Sticker-D_dutvp_.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region components/Pii/Pii.tsx
+const Pii = ({ children, isRedacted, hideOnRedacted }) => {
+	if (isRedacted) return hideOnRedacted ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Sticker.Sticker, {
+		"data-test": "pii__redacted",
+		children: "Redacted"
+	});
+	if (children == null || children === "") return null;
+	if (["string", "number"].includes(typeof children)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
+};
+//#endregion
+//#region components/Pii/index.ts
+var Pii_default = Pii;
+//#endregion
+module.exports = Pii_default;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/Pii/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Sticker"],"sources":["../../../components/Pii/Pii.tsx","../../../components/Pii/index.ts"],"sourcesContent":["import Sticker from '@persona/design-system/components/Sticker';\nimport type { ReactNode } from 'react';\n\ninterface PiiProps {\n  children?: ReactNode;\n  isRedacted: boolean;\n  hideOnRedacted?: boolean;\n}\n\nconst Pii = ({ children, isRedacted, hideOnRedacted }: PiiProps) => {\n  if (isRedacted) {\n    return hideOnRedacted ? null : <Sticker data-test='pii__redacted'>Redacted</Sticker>;\n  }\n\n  if (children == null || children === '') {\n    return null;\n  }\n\n  // There used to be code inserting a classname here in certain cases. There's\n  // no other reason for this to be conditionally wrapped in a span, but\n  // removing it breaks a lot of tests. Someday, the tests will be fixed...\n  // hopefully.\n  if (['string', 'number'].includes(typeof children)) {\n    return <span>{children}</span>;\n  }\n\n  return <>{children}</>;\n};\n\nexport default Pii;\n","import Pii from './Pii';\n\nexport default Pii;\n"],"mappings":";;;;AASA,MAAM,OAAO,EAAE,UAAU,YAAY,qBAA+B;AAClE,KAAI,WACF,QAAO,iBAAiB,OAAO,iBAAA,GAAA,kBAAA,KAACA,gBAAAA,SAAD;EAAS,aAAU;YAAgB;EAAkB,CAAA;AAGtF,KAAI,YAAY,QAAQ,aAAa,GACnC,QAAO;AAOT,KAAI,CAAC,UAAU,SAAS,CAAC,SAAS,OAAO,SAAS,CAChD,QAAO,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAO,UAAgB,CAAA;AAGhC,QAAO,iBAAA,GAAA,kBAAA,KAAA,kBAAA,UAAA,EAAG,UAAY,CAAA;;;;ACxBxB,IAAA,cAAe"}

package/dist/components/Pii/index.d.cts

@@ -0,0 +1,2 @@
+import Pii from "../../Pii.cjs";
+export = Pii;

package/dist/components/Pii/index.d.mts

@@ -0,0 +1,2 @@
+import Pii from "../../Pii.mjs";
+export { Pii as default };

package/dist/components/Pii/index.mjs

@@ -0,0 +1,19 @@
+import { n as Sticker } from "../../Sticker-D6bwBTGr.mjs";
+import { Fragment, jsx } from "react/jsx-runtime";
+//#region components/Pii/Pii.tsx
+const Pii = ({ children, isRedacted, hideOnRedacted }) => {
+	if (isRedacted) return hideOnRedacted ? null : /* @__PURE__ */ jsx(Sticker, {
+		"data-test": "pii__redacted",
+		children: "Redacted"
+	});
+	if (children == null || children === "") return null;
+	if (["string", "number"].includes(typeof children)) return /* @__PURE__ */ jsx("span", { children });
+	return /* @__PURE__ */ jsx(Fragment, { children });
+};
+//#endregion
+//#region components/Pii/index.ts
+var Pii_default = Pii;
+//#endregion
+export { Pii_default as default };
+
+//# sourceMappingURL=index.mjs.map

package/dist/components/Pii/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/Pii/Pii.tsx","../../../components/Pii/index.ts"],"sourcesContent":["import Sticker from '@persona/design-system/components/Sticker';\nimport type { ReactNode } from 'react';\n\ninterface PiiProps {\n  children?: ReactNode;\n  isRedacted: boolean;\n  hideOnRedacted?: boolean;\n}\n\nconst Pii = ({ children, isRedacted, hideOnRedacted }: PiiProps) => {\n  if (isRedacted) {\n    return hideOnRedacted ? null : <Sticker data-test='pii__redacted'>Redacted</Sticker>;\n  }\n\n  if (children == null || children === '') {\n    return null;\n  }\n\n  // There used to be code inserting a classname here in certain cases. There's\n  // no other reason for this to be conditionally wrapped in a span, but\n  // removing it breaks a lot of tests. Someday, the tests will be fixed...\n  // hopefully.\n  if (['string', 'number'].includes(typeof children)) {\n    return <span>{children}</span>;\n  }\n\n  return <>{children}</>;\n};\n\nexport default Pii;\n","import Pii from './Pii';\n\nexport default Pii;\n"],"mappings":";;;AASA,MAAM,OAAO,EAAE,UAAU,YAAY,qBAA+B;AAClE,KAAI,WACF,QAAO,iBAAiB,OAAO,oBAAC,SAAD;EAAS,aAAU;YAAgB;EAAkB,CAAA;AAGtF,KAAI,YAAY,QAAQ,aAAa,GACnC,QAAO;AAOT,KAAI,CAAC,UAAU,SAAS,CAAC,SAAS,OAAO,SAAS,CAChD,QAAO,oBAAC,QAAD,EAAO,UAAgB,CAAA;AAGhC,QAAO,oBAAA,UAAA,EAAG,UAAY,CAAA;;;;ACxBxB,IAAA,cAAe"}

package/dist/components/Popover/index.cjs

@@ -0,0 +1,13 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+require("../../chunk-CoPdw6nB.cjs");
+const require_Popover = require("../../Popover-C2dBSwiU.cjs");
+exports.PopoverAnchor = require_Popover.PopoverAnchor;
+exports.PopoverCard = require_Popover.PopoverCard;
+exports.PopoverClose = require_Popover.PopoverClose;
+exports.PopoverContent = require_Popover.PopoverContent;
+exports.PopoverPortal = require_Popover.PopoverPortal;
+exports.PopoverTrigger = require_Popover.PopoverTrigger;
+exports.default = require_Popover.Popover_default;

package/dist/components/Popover/index.d.cts

@@ -0,0 +1,2 @@
+import _default, { PopoverAnchor, PopoverCard, PopoverCardProps, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger } from "../../Popover.cjs";
+export { PopoverAnchor, PopoverCard, PopoverCardProps, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, _default as default };

package/dist/components/Popover/index.d.mts

@@ -0,0 +1,2 @@
+import _default, { PopoverAnchor, PopoverCard, PopoverCardProps, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger } from "../../Popover.mjs";
+export { PopoverAnchor, PopoverCard, PopoverCardProps, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, _default as default };

package/dist/components/Popover/index.mjs

@@ -0,0 +1,2 @@
+import { a as PopoverPortal, i as PopoverContent, n as PopoverCard, o as PopoverTrigger, r as PopoverClose, s as Popover_default, t as PopoverAnchor } from "../../Popover-BSdyxuja.mjs";
+export { PopoverAnchor, PopoverCard, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, Popover_default as default };