@persona/design-system 0.1.7 → 0.1.8

package/dist/{MiddleTruncatedText-Bzpg3zAU.mjs.map → MiddleTruncatedText-GXI-CPvs.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"MiddleTruncatedText-Bzpg3zAU.mjs","names":[],"sources":["../lib/middleTruncateText.ts","../lib/MiddleTruncatedText.tsx"],"sourcesContent":["import { Typography } from '@persona/design-tokens';\n\nconst ELLIPSIS = '…';\nconst DEFAULT_FONT = `${Typography.TextMono.fontWeight} ${Typography.TextExtraSmall.fontSize} ${Typography.TextMono.fontFamily}`;\nconst MEASUREMENT_TOLERANCE_PX = 1;\n\nfunction createMeasurementCanvas(): [HTMLCanvasElement, () => void] {\n  // oxlint-disable-next-line persona-web/document-create-element-canvas\n  const canvas = document.createElement('canvas');\n  const cleanup = () => {\n    canvas.width = 0;\n    canvas.height = 0;\n    canvas.remove();\n  };\n\n  return [canvas, cleanup];\n}\n\nexport function buildMiddleTruncatedText(text: string, charsToShow: number): string {\n  if (charsToShow >= text.length) {\n    return text;\n  }\n\n  if (charsToShow <= ELLIPSIS.length) {\n    return ELLIPSIS.slice(0, Math.max(charsToShow, 0));\n  }\n\n  const contentChars = charsToShow - ELLIPSIS.length;\n  const front = Math.ceil(contentChars / 2);\n  const back = Math.floor(contentChars / 2);\n\n  return text.slice(0, front) + ELLIPSIS + text.slice(text.length - back);\n}\n\nexport function isMiddleTruncated(displayText: string, fullText: string): boolean {\n  return displayText !== fullText;\n}\n\nexport function parseMaxWidthPx(maxWidth: number | string): number | null {\n  if (typeof maxWidth === 'number') {\n    return maxWidth;\n  }\n\n  if (maxWidth.endsWith('px')) {\n    const parsed = Number.parseFloat(maxWidth);\n    return Number.isNaN(parsed) ? null : parsed;\n  }\n\n  return null;\n}\n\nexport function measureTextWidth(text: string, font = DEFAULT_FONT): number {\n  const [canvas, cleanupCanvas] = createMeasurementCanvas();\n\n  try {\n    const context = canvas.getContext('2d');\n\n    if (!context) {\n      return text.length * 6;\n    }\n\n    context.font = font;\n    const measuredWidth = context.measureText(text).width;\n    const minimumReasonableWidth = text.length * 4;\n\n    if (measuredWidth === 0 || measuredWidth < minimumReasonableWidth) {\n      return text.length * 6;\n    }\n\n    return measuredWidth;\n  } finally {\n    cleanupCanvas();\n  }\n}\n\nexport function findMiddleTruncatedTextForWidth(\n  text: string,\n  maxWidthPx: number,\n  font = DEFAULT_FONT,\n): string {\n  const fitBudget = maxWidthPx + MEASUREMENT_TOLERANCE_PX;\n\n  if (measureTextWidth(text, font) <= fitBudget) {\n    return text;\n  }\n\n  let low = ELLIPSIS.length;\n  let high = text.length;\n  let bestDisplay = buildMiddleTruncatedText(text, ELLIPSIS.length);\n\n  while (low <= high) {\n    const mid = Math.floor((low + high) / 2);\n    const candidate = buildMiddleTruncatedText(text, mid);\n\n    if (measureTextWidth(candidate, font) <= fitBudget) {\n      bestDisplay = candidate;\n      low = mid + 1;\n    } else {\n      high = mid - 1;\n    }\n  }\n\n  return bestDisplay;\n}\n\nexport function findMaxMiddleTruncatedCharsThatFit(\n  element: HTMLElement,\n  text: string,\n  maxWidthPx?: number | null,\n  font?: string,\n): { displayText: string; charsToShow: number } {\n  const measuredWidth = element.clientWidth > 0 ? element.clientWidth : null;\n  const parsedMaxWidth = maxWidthPx ?? parseMaxWidthPx(element.style.maxWidth);\n  const widthBudget =\n    measuredWidth != null && parsedMaxWidth != null\n      ? Math.min(measuredWidth, parsedMaxWidth)\n      : (measuredWidth ?? parsedMaxWidth);\n\n  if (widthBudget != null && widthBudget > 0) {\n    const displayText = findMiddleTruncatedTextForWidth(text, widthBudget, font);\n    return { displayText, charsToShow: displayText.length };\n  }\n\n  element.textContent = text;\n  if (element.scrollWidth <= element.clientWidth) {\n    return { displayText: text, charsToShow: text.length };\n  }\n\n  let low = ELLIPSIS.length;\n  let high = text.length;\n  let bestCharsToShow = ELLIPSIS.length;\n  let bestDisplay = buildMiddleTruncatedText(text, ELLIPSIS.length);\n\n  while (low <= high) {\n    const mid = Math.floor((low + high) / 2);\n    const candidate = buildMiddleTruncatedText(text, mid);\n    element.textContent = candidate;\n\n    if (element.scrollWidth <= element.clientWidth) {\n      bestCharsToShow = mid;\n      bestDisplay = candidate;\n      low = mid + 1;\n    } else {\n      high = mid - 1;\n    }\n  }\n\n  return { displayText: bestDisplay, charsToShow: bestCharsToShow };\n}\n","import {\n  type ComponentPropsWithoutRef,\n  type FC,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport styled from 'styled-components';\n\nimport {\n  findMaxMiddleTruncatedCharsThatFit,\n  isMiddleTruncated,\n  parseMaxWidthPx,\n} from './middleTruncateText';\n\nconst TruncationSpan = styled.span`\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  min-width: 0;\n  position: relative;\n`;\n\nconst AccessibleText = styled.span`\n  opacity: 0;\n  user-select: text;\n`;\n\nconst VisualTruncatedText = styled.span`\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  color: inherit;\n  pointer-events: none;\n`;\n\nexport interface MiddleTruncatedTextProps extends ComponentPropsWithoutRef<'span'> {\n  value: string;\n  maxWidth?: number | string;\n  font?: string;\n  titleBehavior?: 'always' | 'conditional' | 'never';\n  onTruncatedChange?: (isTruncated: boolean) => void;\n}\n\nexport const MiddleTruncatedText: FC<MiddleTruncatedTextProps> = ({\n  value,\n  maxWidth = '96px',\n  font,\n  titleBehavior = 'conditional',\n  onTruncatedChange,\n  'aria-label': ariaLabel,\n  style,\n  ...props\n}) => {\n  const ref = useRef<HTMLSpanElement>(null);\n  const [displayText, setDisplayText] = useState(value);\n  const maxWidthPx = parseMaxWidthPx(maxWidth);\n\n  const updateTruncation = useCallback(\n    (element: HTMLElement) => {\n      const { displayText: nextDisplayText } = findMaxMiddleTruncatedCharsThatFit(\n        element,\n        value,\n        maxWidthPx,\n        font,\n      );\n      setDisplayText((current) => (current === nextDisplayText ? current : nextDisplayText));\n      onTruncatedChange?.(isMiddleTruncated(nextDisplayText, value));\n    },\n    [value, maxWidthPx, font, onTruncatedChange],\n  );\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n    if (!element) {\n      return;\n    }\n\n    updateTruncation(element);\n\n    let cancelled = false;\n    void document.fonts?.ready.then(() => {\n      if (!cancelled) {\n        updateTruncation(element);\n      }\n    });\n\n    const resizeObserver =\n      typeof ResizeObserver === 'undefined'\n        ? null\n        : new ResizeObserver(() => updateTruncation(element));\n    resizeObserver?.observe(element);\n\n    return () => {\n      cancelled = true;\n      resizeObserver?.disconnect();\n    };\n  }, [maxWidth, updateTruncation]);\n\n  const isTruncated = isMiddleTruncated(displayText, value);\n\n  return (\n    <TruncationSpan\n      ref={ref}\n      style={{ ...style, maxWidth }}\n      aria-label={ariaLabel ?? (isTruncated ? value : undefined)}\n      title={\n        titleBehavior !== 'never' && (titleBehavior === 'always' || isTruncated) ? value : undefined\n      }\n      {...props}\n    >\n      {isTruncated ? (\n        <>\n          <AccessibleText>{value}</AccessibleText>\n          <VisualTruncatedText aria-hidden='true'>{displayText}</VisualTruncatedText>\n        </>\n      ) : (\n        displayText\n      )}\n    </TruncationSpan>\n  );\n};\n\nexport default MiddleTruncatedText;\n"],"mappings":"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"}
+{"version":3,"file":"MiddleTruncatedText-GXI-CPvs.mjs","names":[],"sources":["../lib/middleTruncateText.ts","../lib/MiddleTruncatedText.tsx"],"sourcesContent":["import { Typography } from '@persona/design-tokens';\n\nconst ELLIPSIS = '…';\nconst DEFAULT_FONT = `${Typography.TextMono.fontWeight} ${Typography.TextExtraSmall.fontSize} ${Typography.TextMono.fontFamily}`;\nconst MEASUREMENT_TOLERANCE_PX = 1;\n\nfunction createMeasurementCanvas(): [HTMLCanvasElement, () => void] {\n  // oxlint-disable-next-line persona-web/document-create-element-canvas\n  const canvas = document.createElement('canvas');\n  const cleanup = () => {\n    canvas.width = 0;\n    canvas.height = 0;\n    canvas.remove();\n  };\n\n  return [canvas, cleanup];\n}\n\nexport function buildMiddleTruncatedText(text: string, charsToShow: number): string {\n  if (charsToShow >= text.length) {\n    return text;\n  }\n\n  if (charsToShow <= ELLIPSIS.length) {\n    return ELLIPSIS.slice(0, Math.max(charsToShow, 0));\n  }\n\n  const contentChars = charsToShow - ELLIPSIS.length;\n  const front = Math.ceil(contentChars / 2);\n  const back = Math.floor(contentChars / 2);\n\n  return text.slice(0, front) + ELLIPSIS + text.slice(text.length - back);\n}\n\nexport function isMiddleTruncated(displayText: string, fullText: string): boolean {\n  return displayText !== fullText;\n}\n\nexport function parseMaxWidthPx(maxWidth: number | string): number | null {\n  if (typeof maxWidth === 'number') {\n    return maxWidth;\n  }\n\n  if (maxWidth.endsWith('px')) {\n    const parsed = Number.parseFloat(maxWidth);\n    return Number.isNaN(parsed) ? null : parsed;\n  }\n\n  return null;\n}\n\nexport function measureTextWidth(text: string, font = DEFAULT_FONT): number {\n  const [canvas, cleanupCanvas] = createMeasurementCanvas();\n\n  try {\n    const context = canvas.getContext('2d');\n\n    if (!context) {\n      return text.length * 6;\n    }\n\n    context.font = font;\n    const measuredWidth = context.measureText(text).width;\n    const minimumReasonableWidth = text.length * 4;\n\n    if (measuredWidth === 0 || measuredWidth < minimumReasonableWidth) {\n      return text.length * 6;\n    }\n\n    return measuredWidth;\n  } finally {\n    cleanupCanvas();\n  }\n}\n\nexport function findMiddleTruncatedTextForWidth(\n  text: string,\n  maxWidthPx: number,\n  font = DEFAULT_FONT,\n): string {\n  const fitBudget = maxWidthPx + MEASUREMENT_TOLERANCE_PX;\n\n  if (measureTextWidth(text, font) <= fitBudget) {\n    return text;\n  }\n\n  let low = ELLIPSIS.length;\n  let high = text.length;\n  let bestDisplay = buildMiddleTruncatedText(text, ELLIPSIS.length);\n\n  while (low <= high) {\n    const mid = Math.floor((low + high) / 2);\n    const candidate = buildMiddleTruncatedText(text, mid);\n\n    if (measureTextWidth(candidate, font) <= fitBudget) {\n      bestDisplay = candidate;\n      low = mid + 1;\n    } else {\n      high = mid - 1;\n    }\n  }\n\n  return bestDisplay;\n}\n\nexport function findMaxMiddleTruncatedCharsThatFit(\n  element: HTMLElement,\n  text: string,\n  maxWidthPx?: number | null,\n  font?: string,\n): { displayText: string; charsToShow: number } {\n  const measuredWidth = element.clientWidth > 0 ? element.clientWidth : null;\n  const parsedMaxWidth = maxWidthPx ?? parseMaxWidthPx(element.style.maxWidth);\n  const widthBudget =\n    measuredWidth != null && parsedMaxWidth != null\n      ? Math.min(measuredWidth, parsedMaxWidth)\n      : (measuredWidth ?? parsedMaxWidth);\n\n  if (widthBudget != null && widthBudget > 0) {\n    const displayText = findMiddleTruncatedTextForWidth(text, widthBudget, font);\n    return { displayText, charsToShow: displayText.length };\n  }\n\n  element.textContent = text;\n  if (element.scrollWidth <= element.clientWidth) {\n    return { displayText: text, charsToShow: text.length };\n  }\n\n  let low = ELLIPSIS.length;\n  let high = text.length;\n  let bestCharsToShow = ELLIPSIS.length;\n  let bestDisplay = buildMiddleTruncatedText(text, ELLIPSIS.length);\n\n  while (low <= high) {\n    const mid = Math.floor((low + high) / 2);\n    const candidate = buildMiddleTruncatedText(text, mid);\n    element.textContent = candidate;\n\n    if (element.scrollWidth <= element.clientWidth) {\n      bestCharsToShow = mid;\n      bestDisplay = candidate;\n      low = mid + 1;\n    } else {\n      high = mid - 1;\n    }\n  }\n\n  return { displayText: bestDisplay, charsToShow: bestCharsToShow };\n}\n","import {\n  type ComponentPropsWithoutRef,\n  type FC,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport styled from 'styled-components';\n\nimport {\n  findMaxMiddleTruncatedCharsThatFit,\n  isMiddleTruncated,\n  parseMaxWidthPx,\n} from './middleTruncateText';\n\nconst TruncationSpan = styled.span`\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  min-width: 0;\n  position: relative;\n`;\n\nconst AccessibleText = styled.span`\n  opacity: 0;\n  user-select: text;\n`;\n\nconst VisualTruncatedText = styled.span`\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  color: inherit;\n  pointer-events: none;\n`;\n\nexport interface MiddleTruncatedTextProps extends ComponentPropsWithoutRef<'span'> {\n  value: string;\n  maxWidth?: number | string;\n  font?: string;\n  titleBehavior?: 'always' | 'conditional' | 'never';\n  onTruncatedChange?: (isTruncated: boolean) => void;\n}\n\nexport const MiddleTruncatedText: FC<MiddleTruncatedTextProps> = ({\n  value,\n  maxWidth = '96px',\n  font,\n  titleBehavior = 'conditional',\n  onTruncatedChange,\n  'aria-label': ariaLabel,\n  style,\n  ...props\n}) => {\n  const ref = useRef<HTMLSpanElement>(null);\n  const [displayText, setDisplayText] = useState(value);\n  const maxWidthPx = parseMaxWidthPx(maxWidth);\n\n  const updateTruncation = useCallback(\n    (element: HTMLElement) => {\n      const { displayText: nextDisplayText } = findMaxMiddleTruncatedCharsThatFit(\n        element,\n        value,\n        maxWidthPx,\n        font,\n      );\n      setDisplayText((current) => (current === nextDisplayText ? current : nextDisplayText));\n      onTruncatedChange?.(isMiddleTruncated(nextDisplayText, value));\n    },\n    [value, maxWidthPx, font, onTruncatedChange],\n  );\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n    if (!element) {\n      return;\n    }\n\n    updateTruncation(element);\n\n    let cancelled = false;\n    void document.fonts?.ready.then(() => {\n      if (!cancelled) {\n        updateTruncation(element);\n      }\n    });\n\n    const resizeObserver =\n      typeof ResizeObserver === 'undefined'\n        ? null\n        : new ResizeObserver(() => updateTruncation(element));\n    resizeObserver?.observe(element);\n\n    return () => {\n      cancelled = true;\n      resizeObserver?.disconnect();\n    };\n  }, [maxWidth, updateTruncation]);\n\n  const isTruncated = isMiddleTruncated(displayText, value);\n\n  return (\n    <TruncationSpan\n      ref={ref}\n      style={{ ...style, maxWidth }}\n      aria-label={ariaLabel ?? (isTruncated ? value : undefined)}\n      title={\n        titleBehavior !== 'never' && (titleBehavior === 'always' || isTruncated) ? value : undefined\n      }\n      {...props}\n    >\n      {isTruncated ? (\n        <>\n          <AccessibleText>{value}</AccessibleText>\n          <VisualTruncatedText aria-hidden='true'>{displayText}</VisualTruncatedText>\n        </>\n      ) : (\n        displayText\n      )}\n    </TruncationSpan>\n  );\n};\n\nexport default MiddleTruncatedText;\n"],"mappings":"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"}

package/dist/Modal.d.mts

@@ -1,9 +1,9 @@
-import { r as ButtonProps } from "./Button-DXsYU5qU.mjs";
+import { r as ButtonProps } from "./Button-9p469xA1.mjs";
 import * as _$styled_components0 from "styled-components";
-import { ComponentProps, ComponentPropsWithoutRef, ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as _$react_aria_components0 from "react-aria-components";
 import { Dialog, DialogTrigger, Pressable } from "react-aria-components";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentProps, ComponentPropsWithoutRef, ReactNode } from "react";
 
 //#region components/Modal/Modal.d.ts
 declare const ModalTrigger: typeof DialogTrigger;

package/dist/PageHeader-CUDnarkt.cjs

@@ -0,0 +1,77 @@
+const require_chunk = require("./chunk-CKQMccvm.cjs");
+const require_Text = require("./Text-G9QmYf0P.cjs");
+const require_Breadcrumbs = require("./Breadcrumbs-tR49JqAS.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");
+//#region components/PageHeader/PageHeader.tsx
+const PageHeaderContainer = styled_components.default.header`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  padding: ${_persona_design_tokens.Spacing[3]} ${_persona_design_tokens.Spacing[5]};
+  background-color: ${({ theme }) => theme.color.background.primary};
+  border-bottom: 1px solid ${({ theme }) => theme.color.border.primary};
+  box-sizing: border-box;
+  min-height: 56px; /* Standardize height for most PageHeaders */
+`;
+const TitleContainer = styled_components.default.div`
+  display: flex;
+  flex: 1;
+  align-items: center;
+  h1 {
+    margin: 0;
+  }
+  p {
+    margin: 0 0 0 ${_persona_design_tokens.Spacing[2]};
+  }
+`;
+const LeftContainer = styled_components.default.div`
+  display: flex;
+  align-items: center;
+`;
+const RightContainer = styled_components.default.div`
+  display: flex;
+  gap: ${_persona_design_tokens.Spacing[2]};
+  margin-left: ${_persona_design_tokens.Spacing[3]};
+`;
+const PageHeader = ({ title, breadcrumbs, subtitle, level = "product", prepend, append, children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PageHeaderContainer, {
+	...props,
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LeftContainer, { children: [
+		prepend && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: prepend }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TitleContainer, { children: [breadcrumbs ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Breadcrumbs.Breadcrumbs, {
+			size: "lg",
+			...breadcrumbs
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [level === "product" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Heading, {
+			as: "h1",
+			size: "sm",
+			children: title
+		}), level === "detail" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Paragraph, {
+			as: "h1",
+			size: "lg",
+			color: "primary",
+			children: title
+		})] }), subtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Paragraph, {
+			size: "md",
+			children: subtitle
+		})] }),
+		append && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: append })
+	] }), children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RightContainer, { children })]
+});
+//#endregion
+Object.defineProperty(exports, "PageHeader", {
+	enumerable: true,
+	get: function() {
+		return PageHeader;
+	}
+});
+Object.defineProperty(exports, "PageHeaderContainer", {
+	enumerable: true,
+	get: function() {
+		return PageHeaderContainer;
+	}
+});
+
+//# sourceMappingURL=PageHeader-CUDnarkt.cjs.map

package/dist/PageHeader-CUDnarkt.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader-CUDnarkt.cjs","names":["Spacing","Breadcrumbs","Heading","Paragraph"],"sources":["../components/PageHeader/PageHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport Breadcrumbs, { type BreadcrumbsProps } from 'design-system/components/Breadcrumbs';\nimport { Heading, Paragraph } from 'design-system/components/Text';\n\nexport const PageHeaderContainer = styled.header`\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n  padding: ${Spacing[3]} ${Spacing[5]};\n  background-color: ${({ theme }) => theme.color.background.primary};\n  border-bottom: 1px solid ${({ theme }) => theme.color.border.primary};\n  box-sizing: border-box;\n  min-height: 56px; /* Standardize height for most PageHeaders */\n`;\n\nconst TitleContainer = styled.div`\n  display: flex;\n  flex: 1;\n  align-items: center;\n  h1 {\n    margin: 0;\n  }\n  p {\n    margin: 0 0 0 ${Spacing[2]};\n  }\n`;\n\nconst LeftContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst RightContainer = styled.div`\n  display: flex;\n  gap: ${Spacing[2]};\n  margin-left: ${Spacing[3]};\n`;\n\ninterface PageHeaderCommonProps {\n  level?: 'product' | 'detail';\n  subtitle?: ReactNode;\n  prepend?: ReactNode;\n  append?: ReactNode;\n  children?: ReactNode;\n}\n\n/** Exactly one heading source is required: either `title` or `breadcrumbs`. */\nexport type PageHeaderProps = PageHeaderCommonProps &\n  (\n    | { title: ReactNode; breadcrumbs?: never }\n    | {\n        title?: never;\n        /** Renders in place of `title`; the current crumb becomes the page `h1`, at `lg` size. */\n        breadcrumbs: BreadcrumbsProps;\n      }\n  );\n\nconst PageHeader = ({\n  title,\n  breadcrumbs,\n  subtitle,\n  level = 'product',\n  prepend,\n  append,\n  children,\n  ...props\n}: PageHeaderProps) => (\n  <PageHeaderContainer {...props}>\n    <LeftContainer>\n      {prepend && <div>{prepend}</div>}\n      <TitleContainer>\n        {breadcrumbs ? (\n          <Breadcrumbs size='lg' {...breadcrumbs} />\n        ) : (\n          <>\n            {level === 'product' && (\n              <Heading as='h1' size='sm'>\n                {title}\n              </Heading>\n            )}\n            {level === 'detail' && (\n              <Paragraph as='h1' size='lg' color='primary'>\n                {title}\n              </Paragraph>\n            )}\n          </>\n        )}\n        {subtitle && <Paragraph size='md'>{subtitle}</Paragraph>}\n      </TitleContainer>\n      {append && <div>{append}</div>}\n    </LeftContainer>\n    {children && <RightContainer>{children}</RightContainer>}\n  </PageHeaderContainer>\n);\n\nexport default PageHeader;\n"],"mappings":";;;;;;;;AAOA,MAAa,sBAAsB,kBAAA,QAAO,MAAM;;;;;aAKnCA,uBAAAA,QAAQ,GAAG,GAAGA,uBAAAA,QAAQ,GAAG;uBACf,EAAE,YAAY,MAAM,MAAM,WAAW,QAAQ;8BACtC,EAAE,YAAY,MAAM,MAAM,OAAO,QAAQ;;;;AAKvE,MAAM,iBAAiB,kBAAA,QAAO,GAAG;;;;;;;;oBAQbA,uBAAAA,QAAQ,GAAG;;;AAI/B,MAAM,gBAAgB,kBAAA,QAAO,GAAG;;;;AAKhC,MAAM,iBAAiB,kBAAA,QAAO,GAAG;;SAExBA,uBAAAA,QAAQ,GAAG;iBACHA,uBAAAA,QAAQ,GAAG;;AAsB5B,MAAM,cAAc,EAClB,OACA,aACA,UACA,QAAQ,WACR,SACA,QACA,UACA,GAAG,YAEH,iBAAA,GAAA,kBAAA,MAAC,qBAAD;CAAqB,GAAI;WAAzB,CACE,iBAAA,GAAA,kBAAA,MAAC,eAAD,EAAA,UAAA;EACG,WAAW,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAA,UAAM,SAAc,CAAA;EAChC,iBAAA,GAAA,kBAAA,MAAC,gBAAD,EAAA,UAAA,CACG,cACC,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD;GAAa,MAAK;GAAK,GAAI;GAAe,CAAA,GAE1C,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACG,UAAU,aACT,iBAAA,GAAA,kBAAA,KAACC,aAAAA,SAAD;GAAS,IAAG;GAAK,MAAK;aACnB;GACO,CAAA,EAEX,UAAU,YACT,iBAAA,GAAA,kBAAA,KAACC,aAAAA,WAAD;GAAW,IAAG;GAAK,MAAK;GAAK,OAAM;aAChC;GACS,CAAA,CAEb,EAAA,CAAA,EAEJ,YAAY,iBAAA,GAAA,kBAAA,KAACA,aAAAA,WAAD;GAAW,MAAK;aAAM;GAAqB,CAAA,CACzC,EAAA,CAAA;EAChB,UAAU,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAA,UAAM,QAAa,CAAA;EAChB,EAAA,CAAA,EACf,YAAY,iBAAA,GAAA,kBAAA,KAAC,gBAAD,EAAiB,UAA0B,CAAA,CACpC"}

package/dist/PageHeader-D-6W61E_.mjs

@@ -0,0 +1,64 @@
+import { i as Paragraph, n as Heading } from "./Text-RcEfNFLx.mjs";
+import { t as Breadcrumbs } from "./Breadcrumbs-CDZ_Mrcg.mjs";
+import { Spacing } from "@persona/design-tokens";
+import styled from "styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region components/PageHeader/PageHeader.tsx
+const PageHeaderContainer = styled.header`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  padding: ${Spacing[3]} ${Spacing[5]};
+  background-color: ${({ theme }) => theme.color.background.primary};
+  border-bottom: 1px solid ${({ theme }) => theme.color.border.primary};
+  box-sizing: border-box;
+  min-height: 56px; /* Standardize height for most PageHeaders */
+`;
+const TitleContainer = styled.div`
+  display: flex;
+  flex: 1;
+  align-items: center;
+  h1 {
+    margin: 0;
+  }
+  p {
+    margin: 0 0 0 ${Spacing[2]};
+  }
+`;
+const LeftContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+const RightContainer = styled.div`
+  display: flex;
+  gap: ${Spacing[2]};
+  margin-left: ${Spacing[3]};
+`;
+const PageHeader = ({ title, breadcrumbs, subtitle, level = "product", prepend, append, children, ...props }) => /* @__PURE__ */ jsxs(PageHeaderContainer, {
+	...props,
+	children: [/* @__PURE__ */ jsxs(LeftContainer, { children: [
+		prepend && /* @__PURE__ */ jsx("div", { children: prepend }),
+		/* @__PURE__ */ jsxs(TitleContainer, { children: [breadcrumbs ? /* @__PURE__ */ jsx(Breadcrumbs, {
+			size: "lg",
+			...breadcrumbs
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [level === "product" && /* @__PURE__ */ jsx(Heading, {
+			as: "h1",
+			size: "sm",
+			children: title
+		}), level === "detail" && /* @__PURE__ */ jsx(Paragraph, {
+			as: "h1",
+			size: "lg",
+			color: "primary",
+			children: title
+		})] }), subtitle && /* @__PURE__ */ jsx(Paragraph, {
+			size: "md",
+			children: subtitle
+		})] }),
+		append && /* @__PURE__ */ jsx("div", { children: append })
+	] }), children && /* @__PURE__ */ jsx(RightContainer, { children })]
+});
+//#endregion
+export { PageHeaderContainer as n, PageHeader as t };
+
+//# sourceMappingURL=PageHeader-D-6W61E_.mjs.map

package/dist/PageHeader-D-6W61E_.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader-D-6W61E_.mjs","names":[],"sources":["../components/PageHeader/PageHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport Breadcrumbs, { type BreadcrumbsProps } from 'design-system/components/Breadcrumbs';\nimport { Heading, Paragraph } from 'design-system/components/Text';\n\nexport const PageHeaderContainer = styled.header`\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n  padding: ${Spacing[3]} ${Spacing[5]};\n  background-color: ${({ theme }) => theme.color.background.primary};\n  border-bottom: 1px solid ${({ theme }) => theme.color.border.primary};\n  box-sizing: border-box;\n  min-height: 56px; /* Standardize height for most PageHeaders */\n`;\n\nconst TitleContainer = styled.div`\n  display: flex;\n  flex: 1;\n  align-items: center;\n  h1 {\n    margin: 0;\n  }\n  p {\n    margin: 0 0 0 ${Spacing[2]};\n  }\n`;\n\nconst LeftContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst RightContainer = styled.div`\n  display: flex;\n  gap: ${Spacing[2]};\n  margin-left: ${Spacing[3]};\n`;\n\ninterface PageHeaderCommonProps {\n  level?: 'product' | 'detail';\n  subtitle?: ReactNode;\n  prepend?: ReactNode;\n  append?: ReactNode;\n  children?: ReactNode;\n}\n\n/** Exactly one heading source is required: either `title` or `breadcrumbs`. */\nexport type PageHeaderProps = PageHeaderCommonProps &\n  (\n    | { title: ReactNode; breadcrumbs?: never }\n    | {\n        title?: never;\n        /** Renders in place of `title`; the current crumb becomes the page `h1`, at `lg` size. */\n        breadcrumbs: BreadcrumbsProps;\n      }\n  );\n\nconst PageHeader = ({\n  title,\n  breadcrumbs,\n  subtitle,\n  level = 'product',\n  prepend,\n  append,\n  children,\n  ...props\n}: PageHeaderProps) => (\n  <PageHeaderContainer {...props}>\n    <LeftContainer>\n      {prepend && <div>{prepend}</div>}\n      <TitleContainer>\n        {breadcrumbs ? (\n          <Breadcrumbs size='lg' {...breadcrumbs} />\n        ) : (\n          <>\n            {level === 'product' && (\n              <Heading as='h1' size='sm'>\n                {title}\n              </Heading>\n            )}\n            {level === 'detail' && (\n              <Paragraph as='h1' size='lg' color='primary'>\n                {title}\n              </Paragraph>\n            )}\n          </>\n        )}\n        {subtitle && <Paragraph size='md'>{subtitle}</Paragraph>}\n      </TitleContainer>\n      {append && <div>{append}</div>}\n    </LeftContainer>\n    {children && <RightContainer>{children}</RightContainer>}\n  </PageHeaderContainer>\n);\n\nexport default PageHeader;\n"],"mappings":";;;;;;AAOA,MAAa,sBAAsB,OAAO,MAAM;;;;;aAKnC,QAAQ,GAAG,GAAG,QAAQ,GAAG;uBACf,EAAE,YAAY,MAAM,MAAM,WAAW,QAAQ;8BACtC,EAAE,YAAY,MAAM,MAAM,OAAO,QAAQ;;;;AAKvE,MAAM,iBAAiB,OAAO,GAAG;;;;;;;;oBAQb,QAAQ,GAAG;;;AAI/B,MAAM,gBAAgB,OAAO,GAAG;;;;AAKhC,MAAM,iBAAiB,OAAO,GAAG;;SAExB,QAAQ,GAAG;iBACH,QAAQ,GAAG;;AAsB5B,MAAM,cAAc,EAClB,OACA,aACA,UACA,QAAQ,WACR,SACA,QACA,UACA,GAAG,YAEH,qBAAC,qBAAD;CAAqB,GAAI;WAAzB,CACE,qBAAC,eAAD,EAAA,UAAA;EACG,WAAW,oBAAC,OAAD,EAAA,UAAM,SAAc,CAAA;EAChC,qBAAC,gBAAD,EAAA,UAAA,CACG,cACC,oBAAC,aAAD;GAAa,MAAK;GAAK,GAAI;GAAe,CAAA,GAE1C,qBAAA,UAAA,EAAA,UAAA,CACG,UAAU,aACT,oBAAC,SAAD;GAAS,IAAG;GAAK,MAAK;aACnB;GACO,CAAA,EAEX,UAAU,YACT,oBAAC,WAAD;GAAW,IAAG;GAAK,MAAK;GAAK,OAAM;aAChC;GACS,CAAA,CAEb,EAAA,CAAA,EAEJ,YAAY,oBAAC,WAAD;GAAW,MAAK;aAAM;GAAqB,CAAA,CACzC,EAAA,CAAA;EAChB,UAAU,oBAAC,OAAD,EAAA,UAAM,QAAa,CAAA;EAChB,EAAA,CAAA,EACf,YAAY,oBAAC,gBAAD,EAAiB,UAA0B,CAAA,CACpC"}

package/dist/PageHeader.d.cts

@@ -1,19 +1,28 @@
+import { r as BreadcrumbsProps } from "./Breadcrumbs-BBREROrw.cjs";
 import { ReactNode } from "react";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
 
 //#region components/PageHeader/PageHeader.d.ts
 declare const PageHeaderContainer: _$styled_components0.StyledComponent<"header", any, {}, never>;
-interface PageHeaderProps {
-  title: ReactNode;
+interface PageHeaderCommonProps {
   level?: 'product' | 'detail';
   subtitle?: ReactNode;
   prepend?: ReactNode;
   append?: ReactNode;
   children?: ReactNode;
 }
+/** Exactly one heading source is required: either `title` or `breadcrumbs`. */
+type PageHeaderProps = PageHeaderCommonProps & ({
+  title: ReactNode;
+  breadcrumbs?: never;
+} | {
+  title?: never; /** Renders in place of `title`; the current crumb becomes the page `h1`, at `lg` size. */
+  breadcrumbs: BreadcrumbsProps;
+});
 declare const PageHeader: ({
   title,
+  breadcrumbs,
   subtitle,
   level,
   prepend,

package/dist/PageHeader.d.mts

@@ -1,19 +1,28 @@
+import { r as BreadcrumbsProps } from "./Breadcrumbs-DJ5qqqRD.mjs";
 import * as _$styled_components0 from "styled-components";
-import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
 
 //#region components/PageHeader/PageHeader.d.ts
 declare const PageHeaderContainer: _$styled_components0.StyledComponent<"header", any, {}, never>;
-interface PageHeaderProps {
-  title: ReactNode;
+interface PageHeaderCommonProps {
   level?: 'product' | 'detail';
   subtitle?: ReactNode;
   prepend?: ReactNode;
   append?: ReactNode;
   children?: ReactNode;
 }
+/** Exactly one heading source is required: either `title` or `breadcrumbs`. */
+type PageHeaderProps = PageHeaderCommonProps & ({
+  title: ReactNode;
+  breadcrumbs?: never;
+} | {
+  title?: never; /** Renders in place of `title`; the current crumb becomes the page `h1`, at `lg` size. */
+  breadcrumbs: BreadcrumbsProps;
+});
 declare const PageHeader: ({
   title,
+  breadcrumbs,
   subtitle,
   level,
   prepend,

package/dist/{PageSelector-DoROR_Uh.d.cts → PageSelector-CNnVp3Al.d.cts}

@@ -1,5 +1,5 @@
-import { n as HStackProps } from "./Stack-D979gYU9.cjs";
-import { t as PaginationParams } from "./types-CuCT-YnX.cjs";
+import { n as HStackProps } from "./Stack-BzVkf3cz.cjs";
+import { t as PaginationParams } from "./types-CkiXVJeR.cjs";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
 
@@ -27,4 +27,4 @@ declare function PageSelector({
 }: PageSelectorProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { PageInput as n, PageSelector as r, PAGE_LIMIT_BEFORE_SCROLL_MODE as t };
-//# sourceMappingURL=PageSelector-DoROR_Uh.d.cts.map
+//# sourceMappingURL=PageSelector-CNnVp3Al.d.cts.map

package/dist/{PageSelector-CMoV-cHa.d.mts → PageSelector-vay4jpMp.d.mts}

@@ -1,5 +1,5 @@
-import { n as HStackProps } from "./Stack-UMhJ6F_3.mjs";
-import { t as PaginationParams } from "./types-DTak9UTv.mjs";
+import { n as HStackProps } from "./Stack-CkV7k7TE.mjs";
+import { t as PaginationParams } from "./types-TV9nVfSe.mjs";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -27,4 +27,4 @@ declare function PageSelector({
 }: PageSelectorProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { PageInput as n, PageSelector as r, PAGE_LIMIT_BEFORE_SCROLL_MODE as t };
-//# sourceMappingURL=PageSelector-CMoV-cHa.d.mts.map
+//# sourceMappingURL=PageSelector-vay4jpMp.d.mts.map

package/dist/PageSelector.d.cts

@@ -1,2 +1,2 @@
-import { n as PageInput, r as PageSelector, t as PAGE_LIMIT_BEFORE_SCROLL_MODE } from "./PageSelector-DoROR_Uh.cjs";
+import { n as PageInput, r as PageSelector, t as PAGE_LIMIT_BEFORE_SCROLL_MODE } from "./PageSelector-CNnVp3Al.cjs";
 export { PAGE_LIMIT_BEFORE_SCROLL_MODE, PageInput, PageSelector as default };

package/dist/PageSelector.d.mts

@@ -1,2 +1,2 @@
-import { n as PageInput, r as PageSelector, t as PAGE_LIMIT_BEFORE_SCROLL_MODE } from "./PageSelector-CMoV-cHa.mjs";
+import { n as PageInput, r as PageSelector, t as PAGE_LIMIT_BEFORE_SCROLL_MODE } from "./PageSelector-vay4jpMp.mjs";
 export { PAGE_LIMIT_BEFORE_SCROLL_MODE, PageInput, PageSelector as default };

package/dist/PageSizeSelector.d.mts

@@ -11,11 +11,17 @@ interface PageSizeSelectorProps {
   pageSize: number;
   pageSizeOptions: number[];
   handlePageSizeClick: (pageSize: number) => void;
+  /**
+   * Element the options menu renders into. Pass a container inside the surrounding dialog when the
+   * pager sits in a clipping container, where the menu would otherwise be cut off.
+   */
+  menuPortalContainer?: HTMLElement | null;
 }
 declare const PageSizeSelector: ({
   pageSize,
   pageSizeOptions,
-  handlePageSizeClick
+  handlePageSizeClick,
+  menuPortalContainer
 }: PageSizeSelectorProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { PageSizeOption, PageSizeSelector as default };

package/dist/{Pagination-D4IVVj3S.cjs → Pagination-2Yo1vRJZ.cjs}

@@ -1,13 +1,13 @@
 const require_chunk = require("./chunk-CKQMccvm.cjs");
-const require_Stack = require("./Stack-BF-9YjA1.cjs");
-const require_IconButton = require("./IconButton-DNy7g5zh.cjs");
-const require_Input = require("./Input-BDLUq-pK.cjs");
-const require_Select = require("./Select-C65bfYeT.cjs");
+const require_Stack = require("./Stack-UeifHn3c.cjs");
+const require_IconButton = require("./IconButton-nlgjJQCS.cjs");
+const require_Input = require("./Input-OJPQ07TW.cjs");
+const require_Select = require("./Select-BurtT6bN.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");
 styled_components = require_chunk.__toESM(styled_components);
-let react = require("react");
 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 = [
@@ -136,7 +136,7 @@ const Label = styled_components.default.label`
     text-decoration: underline;
   }
 `;
-const PageSizeSelector = ({ pageSize, pageSizeOptions, handlePageSizeClick }) => {
+const PageSizeSelector = ({ pageSize, pageSizeOptions, handlePageSizeClick, menuPortalContainer }) => {
 	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",
@@ -144,6 +144,8 @@ const PageSizeSelector = ({ pageSize, pageSizeOptions, handlePageSizeClick }) =>
 			value: pageSize.toString(),
 			onValueChange: (val) => handlePageSizeClick(Number(val)),
 			size: "sm",
+			portal: menuPortalContainer != null,
+			portalContainer: menuPortalContainer,
 			children: pageSizes.map((size) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Select.Option, {
 				value: size.toString(),
 				children: size
@@ -166,7 +168,7 @@ const PaginationInfo = (0, styled_components.default)("div")`
 
   color: ${_persona_design_tokens.Color.TextPrimary};
 `;
-const Pagination = ({ pageSize, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, paginationParams, handlePageSizeClick, handlePageLinkClick, isLoading, showPageSizeSelector = true, onPageChange }) => {
+const Pagination = ({ pageSize, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, paginationParams, handlePageSizeClick, handlePageLinkClick, isLoading, showPageSizeSelector = true, onPageChange, menuPortalContainer }) => {
 	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;
@@ -178,7 +180,8 @@ const Pagination = ({ pageSize, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, pag
 		children: [showPageSizeSelector && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageSizeSelector, {
 			pageSize,
 			pageSizeOptions,
-			handlePageSizeClick
+			handlePageSizeClick,
+			menuPortalContainer
 		}), totalCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
 			"Showing ",
 			firstItemIndex,
@@ -230,4 +233,4 @@ Object.defineProperty(exports, "Pagination_default", {
 	}
 });
 
-//# sourceMappingURL=Pagination-D4IVVj3S.cjs.map
+//# sourceMappingURL=Pagination-2Yo1vRJZ.cjs.map

package/dist/Pagination-2Yo1vRJZ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination-2Yo1vRJZ.cjs","names":["HStack","Spacing","Input","Button","Spacing","Color","Typography","Select","Option","Typography","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];\nexport const MIN_PAGE_SIZE = 10;\n","import { debounce } from 'lodash/fp';\nimport { useEffect, useMemo, useState } from 'react';\nimport styled from 'styled-components';\n\nimport 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';\n\nimport type { PaginationParams } from './types';\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 styled from 'styled-components';\n\nimport Select, { Option } from '@persona/design-system/components/Select';\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\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   * Element the options menu renders into. Pass a container inside the surrounding dialog when the\n   * pager sits in a clipping container, where the menu would otherwise be cut off.\n   */\n  menuPortalContainer?: HTMLElement | null;\n}\n\nconst PageSizeSelector = ({\n  pageSize,\n  pageSizeOptions,\n  handlePageSizeClick,\n  menuPortalContainer,\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          portal={menuPortalContainer != null}\n          portalContainer={menuPortalContainer}\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 styled from 'styled-components';\n\nimport { Color, Typography } from '@persona/design-tokens';\n\nimport { DEFAULT_PAGE_SIZE_OPTIONS } from './constants';\nimport PageSelector from './PageSelector';\nimport PageSizeSelector from './PageSizeSelector';\nimport type { PaginationParams } from './types';\n\n// NB: this is configured in config/initializers/kaminari.rb\nconst MAX_PAGES = 100;\n\nconst Container = styled('nav')`\n  ${Typography.TextMedium};\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   * Element the page-size menu renders into. Pass a container inside the surrounding dialog when\n   * the pager sits in a clipping container, where the menu would otherwise be cut off.\n   */\n  menuPortalContainer?: HTMLElement | null;\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  menuPortalContainer,\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          menuPortalContainer={menuPortalContainer}\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 * from './constants';\nexport default Pagination;\n"],"mappings":"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"}

package/dist/{Pagination-B97xQ-Wk.d.cts → Pagination-D04tn-tf.d.cts}

@@ -1,4 +1,4 @@
-import { t as PaginationParams } from "./types-CuCT-YnX.cjs";
+import { t as PaginationParams } from "./types-CkiXVJeR.cjs";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
 
@@ -17,6 +17,11 @@ interface PaginationProps {
    * react to page changes -- e.g. scroll the page back to the top.
    */
   onPageChange?: (pageNumber: number) => void;
+  /**
+   * Element the page-size menu renders into. Pass a container inside the surrounding dialog when
+   * the pager sits in a clipping container, where the menu would otherwise be cut off.
+   */
+  menuPortalContainer?: HTMLElement | null;
 }
 declare const Pagination: ({
   pageSize,
@@ -26,8 +31,9 @@ declare const Pagination: ({
   handlePageLinkClick,
   isLoading,
   showPageSizeSelector,
-  onPageChange
+  onPageChange,
+  menuPortalContainer
 }: PaginationProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { PaginationInfo as n, Pagination as t };
-//# sourceMappingURL=Pagination-B97xQ-Wk.d.cts.map
+//# sourceMappingURL=Pagination-D04tn-tf.d.cts.map

package/dist/{Pagination-QWNK_hH7.d.mts → Pagination-ygLutOst.d.mts}

@@ -1,4 +1,4 @@
-import { t as PaginationParams } from "./types-DTak9UTv.mjs";
+import { t as PaginationParams } from "./types-TV9nVfSe.mjs";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -17,6 +17,11 @@ interface PaginationProps {
    * react to page changes -- e.g. scroll the page back to the top.
    */
   onPageChange?: (pageNumber: number) => void;
+  /**
+   * Element the page-size menu renders into. Pass a container inside the surrounding dialog when
+   * the pager sits in a clipping container, where the menu would otherwise be cut off.
+   */
+  menuPortalContainer?: HTMLElement | null;
 }
 declare const Pagination: ({
   pageSize,
@@ -26,8 +31,9 @@ declare const Pagination: ({
   handlePageLinkClick,
   isLoading,
   showPageSizeSelector,
-  onPageChange
+  onPageChange,
+  menuPortalContainer
 }: PaginationProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { PaginationInfo as n, Pagination as t };
-//# sourceMappingURL=Pagination-QWNK_hH7.d.mts.map
+//# sourceMappingURL=Pagination-ygLutOst.d.mts.map

package/dist/{Pagination-Cj08JRG9.mjs → Pagination-ztqhywAP.mjs}

@@ -1,11 +1,11 @@
-import { t as HStack } from "./Stack-ckRN7LrP.mjs";
-import { n as Button } from "./IconButton-DC4rh6ow.mjs";
-import { n as Input } from "./Input-PWfwMSJ7.mjs";
-import { n as Select, t as Option } from "./Select-ByTgXOlU.mjs";
+import { t as HStack } from "./Stack-Bl54WmhY.mjs";
+import { n as Button } from "./IconButton-CIWiEsS-.mjs";
+import { n as Input } from "./Input-BFI_e7aU.mjs";
+import { n as Select, t as Option } from "./Select-cPEORy70.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 { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { debounce } from "lodash/fp.js";
 //#region components/Pagination/constants.ts
 const DEFAULT_PAGE_SIZE_OPTIONS = [
@@ -134,7 +134,7 @@ styled("div")`
     text-decoration: underline;
   }
 `;
-const PageSizeSelector = ({ pageSize, pageSizeOptions, handlePageSizeClick }) => {
+const PageSizeSelector = ({ pageSize, pageSizeOptions, handlePageSizeClick, menuPortalContainer }) => {
 	const pageSizes = [...pageSizeOptions, ...pageSizeOptions.includes(pageSize) ? [] : [pageSize]].sort((a, b) => a - b);
 	return /* @__PURE__ */ jsx(Selector, {
 		"data-test": "pagination__page-size-selector",
@@ -142,6 +142,8 @@ const PageSizeSelector = ({ pageSize, pageSizeOptions, handlePageSizeClick }) =>
 			value: pageSize.toString(),
 			onValueChange: (val) => handlePageSizeClick(Number(val)),
 			size: "sm",
+			portal: menuPortalContainer != null,
+			portalContainer: menuPortalContainer,
 			children: pageSizes.map((size) => /* @__PURE__ */ jsx(Option, {
 				value: size.toString(),
 				children: size
@@ -164,7 +166,7 @@ const PaginationInfo = styled("div")`
 
   color: ${Color.TextPrimary};
 `;
-const Pagination = ({ pageSize, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, paginationParams, handlePageSizeClick, handlePageLinkClick, isLoading, showPageSizeSelector = true, onPageChange }) => {
+const Pagination = ({ pageSize, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, paginationParams, handlePageSizeClick, handlePageLinkClick, isLoading, showPageSizeSelector = true, onPageChange, menuPortalContainer }) => {
 	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;
@@ -176,8 +178,9 @@ const Pagination = ({ pageSize, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, pag
 		children: [showPageSizeSelector && /* @__PURE__ */ jsx(PageSizeSelector, {
 			pageSize,
 			pageSizeOptions,
-			handlePageSizeClick
-		}), totalCount > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", { children: [
+			handlePageSizeClick,
+			menuPortalContainer
+		}), totalCount > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", { children: [
 			"Showing ",
 			firstItemIndex,
 			"-",
@@ -199,4 +202,4 @@ var Pagination_default = Pagination;
 //#endregion
 export { MIN_PAGE_SIZE as a, DEFAULT_PAGE_SIZE_OPTIONS as i, PAGE_LIMIT_BEFORE_SCROLL_MODE as n, PageSelector as r, Pagination_default as t };
 
-//# sourceMappingURL=Pagination-Cj08JRG9.mjs.map
+//# sourceMappingURL=Pagination-ztqhywAP.mjs.map

package/dist/Pagination-ztqhywAP.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination-ztqhywAP.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];\nexport const MIN_PAGE_SIZE = 10;\n","import { debounce } from 'lodash/fp';\nimport { useEffect, useMemo, useState } from 'react';\nimport styled from 'styled-components';\n\nimport 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';\n\nimport type { PaginationParams } from './types';\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 styled from 'styled-components';\n\nimport Select, { Option } from '@persona/design-system/components/Select';\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\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   * Element the options menu renders into. Pass a container inside the surrounding dialog when the\n   * pager sits in a clipping container, where the menu would otherwise be cut off.\n   */\n  menuPortalContainer?: HTMLElement | null;\n}\n\nconst PageSizeSelector = ({\n  pageSize,\n  pageSizeOptions,\n  handlePageSizeClick,\n  menuPortalContainer,\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          portal={menuPortalContainer != null}\n          portalContainer={menuPortalContainer}\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 styled from 'styled-components';\n\nimport { Color, Typography } from '@persona/design-tokens';\n\nimport { DEFAULT_PAGE_SIZE_OPTIONS } from './constants';\nimport PageSelector from './PageSelector';\nimport PageSizeSelector from './PageSizeSelector';\nimport type { PaginationParams } from './types';\n\n// NB: this is configured in config/initializers/kaminari.rb\nconst MAX_PAGES = 100;\n\nconst Container = styled('nav')`\n  ${Typography.TextMedium};\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   * Element the page-size menu renders into. Pass a container inside the surrounding dialog when\n   * the pager sits in a clipping container, where the menu would otherwise be cut off.\n   */\n  menuPortalContainer?: HTMLElement | null;\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  menuPortalContainer,\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          menuPortalContainer={menuPortalContainer}\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 * from './constants';\nexport default Pagination;\n"],"mappings":";;;;;;;;;;AAAA,MAAa,4BAA4B;CAAC;CAAI;CAAI;CAAI;CAAK;CAAI;AAC/D,MAAa,gBAAgB;;;ACY7B,MAAa,gCAAgC;AAE7C,MAAM,oBAAoB,OAAO,OAAO,CAAC,MAAM,EAAE,SAAS,YAAY,CAAC;aAC1D,QAAQ,GAAG;;AAGxB,MAAa,YAAY,OAAO,OAAO,CAAC,MAAM,EAAE,OAAO,UAAU,CAAC;;;AAgBlE,SAAwB,aAAa,EACnC,kBACA,qBACA,WACA,gBACoB;CACpB,MAAM,EACJ,gBAAgB,aAChB,eAAe,YACf,eAAe,eACb,oBAAoB,EAAE;CAC1B,MAAM,CAAC,cAAc,mBAAmB,SAA6B,YAAY;CAGjF,MAAM,+BAA+B,cAC7B,SAAS,KAAK,oBAAoB,EACxC,CAAC,oBAAoB,CACtB;AAID,iBAAgB;AACd,MAAI,eAAe,KACjB,iBAAgB,YAAY;IAE7B,CAAC,YAAY,CAAC;AAEjB,KAAI,CAAC,iBACH,QAAO,oBAAC,OAAD,EAAO,CAAA;AAGhB,QACE,qBAAC,mBAAD;EAAmB,aAAU;EAA4B,IAAG;YAA5D;GACE,qBAAC,WAAD,EAAA,UAAA;IACG,aAAA,OAA8C,CAAC,aAC9C,oBAAC,OAAD;KACE,cAAW;KACX,MAAK;KACL,WAAW;KACX,WAAW,MAAM;MACf,MAAM,QAAQ,EAAE,OAAO;AACvB,UAAI,OAAO,MAAM,MAAM,CACrB,iBAAgB,KAAA,EAAU;WACrB;AAEL,uBAAgB,MAAM;OACtB,MAAM,eAAe,KAAK,IAAI,KAAK,IAAI,EAAE,OAAO,eAAe,EAAE,EAAE,WAAW;AAC9E,oCAA6B,aAAa;AAC1C,sBAAe,aAAa;;;KAGhC,SAAS,MAAM;AAEb,UAAI,OAAO,MAAM,EAAE,OAAO,cAAc,CACtC,iBAAgB,YAAY;;KAGhC,KAAK;KACL,KAAK;KACL,MAAK;KACL,UAAU;KACV,OAAO,gBAAgB;KACvB,CAAA,GAEF,cAAc;IACd;IACE,aAAa,SAAS;IAAW;IAC3B,EAAA,CAAA;GACZ,oBAAC,QAAD;IACE,IAAG;IACH,UAAU,gBAAgB,KAAK;IAC/B,eAAe;AACb,SAAI,gBAAgB,GAAG;MACrB,MAAM,cAAc,cAAc;AAClC,sBAAgB,YAAY;AAC5B,0BAAoB,YAAY;AAChC,qBAAe,YAAY;;;IAG/B,aAAU;IACV,SAAQ;IACR,MAAK;IACL,OAAM;IACN,cAAW;cACZ;IAEQ,CAAA;GACT,oBAAC,QAAD;IACE,IAAG;IACH,UAAW,gBAAgB,cAAc,CAAC,cAAe;IACzD,eAAe;AACb,SAAI,gBAAgB,cAAc,YAAY;MAC5C,MAAM,cAAc,cAAc;AAClC,sBAAgB,YAAY;AAC5B,0BAAoB,YAAY;AAChC,qBAAe,YAAY;;;IAG/B,aAAU;IACV,SAAQ;IACR,MAAK;IACL,OAAM;IACN,cAAW;cACZ;IAEQ,CAAA;GACS;;;;;ACxIxB,MAAM,WAAW,OAAO,MAAM;aACjB,QAAQ,GAAG;;;;AAKxB,MAAM,QAAQ,OAAO,KAAK;;;;SAIjB,QAAQ,GAAG;aACP,QAAQ,GAAG;;AAQM,OAAO,MAAM;eAC5B,QAAQ,GAAG;WACf,MAAM,cAAc;;;KAG1B,EAAE,iBAAiB,qBAAqB;AACzC,KAAI,oBAAoB,eACtB,QAAO;UACH,WAAW,eAAe;;;EAIhC;;;;;;AAkBJ,MAAM,oBAAoB,EACxB,UACA,iBACA,qBACA,0BAC2B;CAE3B,MAAM,YAAY,CAChB,GAAG,iBACH,GAAI,gBAAgB,SAAS,SAAS,GAAG,EAAE,GAAG,CAAC,SAAS,CACzD,CAAC,MAAM,GAAG,MAAM,IAAI,EAAE;AAEvB,QACE,oBAAC,UAAD;EAAU,aAAU;YAClB,qBAAC,OAAD,EAAA,UAAA,CAAO,mBAEL,oBAAC,QAAD;GACE,OAAO,SAAS,UAAU;GAC1B,gBAAgB,QAAQ,oBAAoB,OAAO,IAAI,CAAC;GACxD,MAAK;GACL,QAAQ,uBAAuB;GAC/B,iBAAiB;aAEhB,UAAU,KAAK,SACd,oBAAC,QAAD;IAAmB,OAAO,KAAK,UAAU;cACtC;IACM,EAFI,KAEJ,CACT;GACK,CAAA,CACH,EAAA,CAAA;EACC,CAAA;;;;AC1Ef,MAAM,YAAY;AAElB,MAAM,YAAY,OAAO,MAAM;IAC3B,WAAW,WAAW;;;;;AAM1B,MAAa,iBAAiB,OAAO,MAAM;;;;WAIhC,MAAM,YAAY;;AAuB7B,MAAM,cAAc,EAClB,UACA,kBAAkB,2BAClB,kBACA,qBACA,qBACA,WACA,uBAAuB,MACvB,cACA,0BACqB;AACrB,KAAI,CAAC,oBAAoB,CAAC,SACxB,QAAO,oBAAC,OAAD,EAAO,CAAA;CAGhB,MAAM,EACJ,gBAAgB,aAChB,eAAe,YACf,eAAe,YACf,eAAe,eACb;CAKJ,MAAM,oBAAoB,cAAc,cAAc,YAAY,SAAS;CAE3E,MAAM,gBAAgB,aAClB,cAAc,WACd,KAAK,IAAI,cAAc,UAAU,WAAW;CAChD,MAAM,iBAAiB,YAAY,cAAc,KAAK;AAEtD,QACE,qBAAC,WAAD;EAAW,MAAK;EAAa,cAAW;YAAxC,CACG,wBACC,oBAAC,kBAAD;GACY;GACO;GACI;GACA;GACrB,CAAA,EAEH,aAAa,KACZ,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,OAAD,EAAA,UAAA;GAAK;GACM;GAAe;GAAE;GAAc;GAAK;GAAkB;GAC3D,EAAA,CAAA,EACN,oBAAC,gBAAD,EAAA,UACE,oBAAC,cAAD;GACoB;GACG;GACV;GACG;GACd,CAAA,EACa,CAAA,CAChB,EAAA,CAAA,CAEK;;;;;ACnGhB,IAAA,qBAAe"}

package/dist/Pagination.d.cts

@@ -1,2 +1,2 @@
-import { n as PaginationInfo, t as Pagination } from "./Pagination-B97xQ-Wk.cjs";
+import { n as PaginationInfo, t as Pagination } from "./Pagination-D04tn-tf.cjs";
 export { PaginationInfo, Pagination as default };

package/dist/Pagination.d.mts

@@ -1,2 +1,2 @@
-import { n as PaginationInfo, t as Pagination } from "./Pagination-QWNK_hH7.mjs";
+import { n as PaginationInfo, t as Pagination } from "./Pagination-ygLutOst.mjs";
 export { PaginationInfo, Pagination as default };