@primer/react-brand 0.68.0-rc.b6d410ef → 0.68.0

package/esm/MediaPlaylist/useMediaPlaylist.js

@@ -0,0 +1,114 @@
+import { useTabs as e } from "../hooks/useTabs.js";
+import t, { useCallback as n, useEffect as r, useMemo as i, useRef as a } from "react";
+//#region src/MediaPlaylist/useMediaPlaylist.ts
+function o({ children: t, components: o, defaultSelectedIndex: s, onChange: u, selectedIndex: d }) {
+	let { headingChild: f, items: p } = i(() => c(t, o), [t, o]), m = p.length, h = l(s, m), g = typeof d == "number" && Number.isFinite(d) ? l(d, m) : null, _ = g ?? h, v = _ === null ? void 0 : String(_), y = m > 3, b = a(null), x = a([]), S = a(!1), C = n((e) => {
+		let t = b.current, n = x.current[e];
+		!t || !n || typeof t.scrollTo != "function" || t.scrollTo({
+			top: Math.max(0, n.offsetTop - t.offsetTop),
+			behavior: "smooth"
+		});
+	}, []), { activeTab: w, activateTab: T, getTabListProps: E, getTabPanelProps: D, getTabProps: O } = e({
+		defaultTab: v,
+		onTabActivate: n((e) => {
+			let t = Number(e);
+			if (!Number.isNaN(t)) {
+				if (y && C(t), S.current) {
+					S.current = !1;
+					return;
+				}
+				u?.(t);
+			}
+		}, [
+			y,
+			u,
+			C
+		]),
+		orientation: "vertical"
+	}), k = w === null ? _ : l(Number(w), m), A = k === null ? 1 : k + 1;
+	r(() => {
+		if (g === null) return;
+		let e = String(g);
+		w !== e && (S.current = !0, T(e));
+	}, [
+		T,
+		w,
+		g
+	]), r(() => {
+		k === null || w === String(k) || (S.current = !0, T(String(k)));
+	}, [
+		T,
+		k,
+		w
+	]);
+	let j = n((e, t) => {
+		e.preventDefault();
+		let n = l(t - 1, m);
+		n !== null && (C(n), w !== String(n) && T(String(n)));
+	}, [
+		T,
+		w,
+		m,
+		C
+	]), M = n((e) => w === String(e), [w]), N = n((e, t) => {
+		x.current[e] = t;
+	}, []);
+	return {
+		activeIndex: k,
+		currentItemPage: A,
+		getPaginationAttributes: n((e, t) => {
+			switch (t.type) {
+				case "PREV": return { "aria-label": "Previous video" };
+				case "NEXT": return { "aria-label": "Next video" };
+				case "NUM": {
+					let n = { "aria-label": `Video ${e}` };
+					return t.selected && (n["aria-current"] = "step"), n;
+				}
+				case "BREAK": return {};
+			}
+		}, []),
+		getTabListProps: E,
+		getTabPanelProps: D,
+		getTabProps: O,
+		handlePageChange: j,
+		hasOverflowItems: y,
+		headingChild: f,
+		isItemSelected: M,
+		items: p,
+		setItemRef: N,
+		tabListRef: b
+	};
+}
+var s = (e) => (n) => t.isValidElement(n) && n.type === e;
+function c(e, n) {
+	let r = s(n.Heading), i = s(n.Item), a = s(n.ItemHeading), o = s(n.ItemContent), c = s(n.ItemMedia), l = {
+		headingChild: null,
+		items: []
+	};
+	for (let n of t.Children.toArray(e)) {
+		if (r(n)) {
+			l.headingChild = n;
+			continue;
+		}
+		if (!i(n)) continue;
+		let e = t.Children.toArray(n.props.children), s = {
+			heading: null,
+			content: null,
+			media: null
+		};
+		for (let t of e) a(t) && (s.heading = t), o(t) && (s.content = t), c(t) && (s.media = t);
+		!s.heading || !s.content || !s.media || l.items.push({
+			className: n.props.className,
+			content: s.content,
+			heading: s.heading,
+			media: s.media,
+			thumbnail: n.props.thumbnail
+		});
+	}
+	return l;
+}
+var l = (e, t) => t < 1 ? null : Math.min(Math.max(Number.isFinite(e) ? Math.trunc(e) : 0, 0), t - 1);
+//#endregion
+export { o as useMediaPlaylist };
+
+//# sourceMappingURL=useMediaPlaylist.js.map

package/esm/MediaPlaylist/useMediaPlaylist.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaPlaylist.js","names":[],"sources":["../../src/MediaPlaylist/useMediaPlaylist.ts"],"sourcesContent":["import React, {useCallback, useEffect, useMemo, useRef} from 'react'\n\nimport type {PaginationPageType} from '../Pagination/model'\nimport {useTabs} from '../hooks/useTabs'\n\ntype UseMediaPlaylistProps = {\n  children: React.ReactNode\n  components: MediaPlaylistComponentTypes\n  defaultSelectedIndex: number\n  onChange?: (selectedIndex: number) => void\n  selectedIndex?: number\n}\n\n/**\n * Internal only hook used by MediaPlaylist to manage state and behavior.\n * @private\n * @internal\n */\nexport type MediaPlaylistComponentTypes = {\n  Heading: React.ElementType\n  Item: React.ElementType\n  ItemHeading: React.ElementType\n  ItemContent: React.ElementType\n  ItemMedia: React.ElementType\n}\n\ntype MediaPlaylistHeadingChildProps = {\n  activeIndex?: number | null\n  id?: string\n  itemCount?: number\n}\n\ntype MediaPlaylistItemProps = React.PropsWithChildren<{\n  className?: string\n  thumbnail?: React.ReactNode\n}>\n\ntype MediaPlaylistItemChildProps = React.PropsWithChildren<Record<string, unknown>>\n\ntype MediaPlaylistItemChild = React.ReactElement<MediaPlaylistItemChildProps>\n\ntype MediaPlaylistItemData = {\n  className?: string\n  content: MediaPlaylistItemChild\n  heading: MediaPlaylistItemChild\n  media: MediaPlaylistItemChild\n  thumbnail?: React.ReactNode\n}\n\n/**\n * Internal only hook used by MediaPlaylist to manage state and behavior.\n * @private\n * @internal\n */\nexport function useMediaPlaylist({\n  children,\n  components,\n  defaultSelectedIndex,\n  onChange,\n  selectedIndex,\n}: UseMediaPlaylistProps) {\n  const {headingChild, items} = useMemo(() => getMediaPlaylistChildren(children, components), [children, components])\n  const itemCount = items.length\n  const defaultActiveIndex = getValidIndex(defaultSelectedIndex, itemCount)\n\n  const controlledActiveIndex =\n    typeof selectedIndex === 'number' && Number.isFinite(selectedIndex) ? getValidIndex(selectedIndex, itemCount) : null\n\n  const initialActiveIndex = controlledActiveIndex ?? defaultActiveIndex\n  const initialActiveTab = initialActiveIndex === null ? undefined : String(initialActiveIndex)\n  const hasOverflowItems = itemCount > 3\n  const tabListRef = useRef<HTMLDivElement>(null)\n  const itemRefs = useRef<Array<HTMLDivElement | null>>([])\n  const suppressOnTabActivateRef = useRef(false)\n\n  const scrollListToIndex = useCallback((index: number) => {\n    const tabList = tabListRef.current\n    const item = itemRefs.current[index]\n\n    if (!tabList || !item || typeof tabList.scrollTo !== 'function') return\n\n    tabList.scrollTo({\n      top: Math.max(0, item.offsetTop - tabList.offsetTop),\n      behavior: 'smooth',\n    })\n  }, [])\n\n  const handleTabActivate = useCallback(\n    (id: string) => {\n      const nextIndex = Number(id)\n      if (Number.isNaN(nextIndex)) return\n\n      if (hasOverflowItems) {\n        scrollListToIndex(nextIndex)\n      }\n\n      if (suppressOnTabActivateRef.current) {\n        suppressOnTabActivateRef.current = false\n        return\n      }\n\n      onChange?.(nextIndex)\n    },\n    [hasOverflowItems, onChange, scrollListToIndex],\n  )\n\n  const {activeTab, activateTab, getTabListProps, getTabPanelProps, getTabProps} = useTabs({\n    defaultTab: initialActiveTab,\n    onTabActivate: handleTabActivate,\n    orientation: 'vertical',\n  })\n\n  const activeIndex = activeTab === null ? initialActiveIndex : getValidIndex(Number(activeTab), itemCount)\n  const currentItemPage = activeIndex === null ? 1 : activeIndex + 1\n\n  useEffect(() => {\n    if (controlledActiveIndex === null) return\n\n    const controlledTab = String(controlledActiveIndex)\n    if (activeTab !== controlledTab) {\n      suppressOnTabActivateRef.current = true\n      activateTab(controlledTab)\n    }\n  }, [activateTab, activeTab, controlledActiveIndex])\n\n  useEffect(() => {\n    if (activeIndex === null || activeTab === String(activeIndex)) return\n\n    suppressOnTabActivateRef.current = true\n    activateTab(String(activeIndex))\n  }, [activateTab, activeIndex, activeTab])\n\n  const handlePageChange = useCallback(\n    (event: React.MouseEvent, page: number) => {\n      event.preventDefault()\n\n      const nextIndex = getValidIndex(page - 1, itemCount)\n      if (nextIndex === null) return\n\n      scrollListToIndex(nextIndex)\n\n      if (activeTab !== String(nextIndex)) {\n        activateTab(String(nextIndex))\n      }\n    },\n    [activateTab, activeTab, itemCount, scrollListToIndex],\n  )\n\n  const isItemSelected = useCallback((index: number) => activeTab === String(index), [activeTab])\n\n  const setItemRef = useCallback((index: number, element: HTMLDivElement | null) => {\n    itemRefs.current[index] = element\n  }, [])\n\n  const getPaginationAttributes = useCallback((pageNumber: number, page: PaginationPageType) => {\n    switch (page.type) {\n      case 'PREV':\n        return {'aria-label': 'Previous video'}\n      case 'NEXT':\n        return {'aria-label': 'Next video'}\n      case 'NUM': {\n        const attributes: {[key: string]: string} = {'aria-label': `Video ${pageNumber}`}\n\n        if (page.selected) {\n          attributes['aria-current'] = 'step'\n        }\n\n        return attributes\n      }\n      case 'BREAK':\n        return {}\n    }\n  }, [])\n\n  return {\n    activeIndex,\n    currentItemPage,\n    getPaginationAttributes,\n    getTabListProps,\n    getTabPanelProps,\n    getTabProps,\n    handlePageChange,\n    hasOverflowItems,\n    headingChild,\n    isItemSelected,\n    items,\n    setItemRef,\n    tabListRef,\n  }\n}\n\nconst createComponentTypeGuard =\n  <T>(componentType: React.ElementType) =>\n  (element: unknown): element is React.ReactElement<T> =>\n    React.isValidElement<T>(element) && element.type === componentType\n\nfunction getMediaPlaylistChildren(children: React.ReactNode, components: MediaPlaylistComponentTypes) {\n  const isHeading = createComponentTypeGuard<MediaPlaylistHeadingChildProps>(components.Heading)\n  const isItem = createComponentTypeGuard<MediaPlaylistItemProps>(components.Item)\n  const isItemHeading = createComponentTypeGuard<MediaPlaylistItemChildProps>(components.ItemHeading)\n  const isItemContent = createComponentTypeGuard<MediaPlaylistItemChildProps>(components.ItemContent)\n  const isItemMedia = createComponentTypeGuard<MediaPlaylistItemChildProps>(components.ItemMedia)\n\n  const playlistChildren = {\n    headingChild: null as React.ReactElement<MediaPlaylistHeadingChildProps> | null,\n    items: [] as MediaPlaylistItemData[],\n  }\n\n  for (const child of React.Children.toArray(children)) {\n    if (isHeading(child)) {\n      playlistChildren.headingChild = child\n      continue\n    }\n\n    if (!isItem(child)) {\n      continue\n    }\n\n    const itemChildren = React.Children.toArray(child.props.children)\n\n    const itemParts = {\n      heading: null as MediaPlaylistItemChild | null,\n      content: null as MediaPlaylistItemChild | null,\n      media: null as MediaPlaylistItemChild | null,\n    }\n\n    for (const itemChild of itemChildren) {\n      if (isItemHeading(itemChild)) {\n        itemParts.heading = itemChild\n      }\n\n      if (isItemContent(itemChild)) {\n        itemParts.content = itemChild\n      }\n\n      if (isItemMedia(itemChild)) {\n        itemParts.media = itemChild\n      }\n    }\n\n    if (!itemParts.heading || !itemParts.content || !itemParts.media) {\n      continue\n    }\n\n    playlistChildren.items.push({\n      className: child.props.className,\n      content: itemParts.content,\n      heading: itemParts.heading,\n      media: itemParts.media,\n      thumbnail: child.props.thumbnail,\n    })\n  }\n\n  return playlistChildren\n}\n\nconst getValidIndex = (index: number, length: number) => {\n  if (length < 1) return null\n\n  const normalizedIndex = Number.isFinite(index) ? Math.trunc(index) : 0\n  return Math.min(Math.max(normalizedIndex, 0), length - 1)\n}\n"],"mappings":"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"}

package/esm/Pagination/Pagination.d.ts

@@ -1,14 +1,11 @@
 import React from 'react';
-/**
- * Design tokens
- */
-import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/pagination/colors-with-modes.css';
+import { PaginationPageType } from './model';
 export type PaginationProps = {
     pageCount: number;
     currentPage: number;
     onPageChange?: (e: React.MouseEvent, n: number) => void;
     hrefBuilder?: (n: number) => string;
-    pageAttributesBuilder?: (n: number) => {
+    pageAttributesBuilder?: (n: number, page: PaginationPageType) => {
         [attributeName: string]: string;
     };
     marginPageCount?: number;

package/esm/Pagination/Pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAA;AAO9C;;GAEG;AACH,OAAO,8GAA8G,CAAA;AAKrH,MAAM,MAAM,eAAe,GAAG;IAE5B,SAAS,EAAE,MAAM,CAAA;IAEjB,WAAW,EAAE,MAAM,CAAA;IAEnB,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAEvD,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAEnC,qBAAqB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK;QAAC,CAAC,aAAa,EAAE,MAAM,GAAG,MAAM,CAAA;KAAC,CAAA;IAExE,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAA;AAE1D;;;GAGG;AACH,eAAO,MAAM,UAAU,qOAelB,eAAe,6CAyDnB,CAAA"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAA;AAM9C,OAAO,EAAuB,kBAAkB,EAAC,MAAM,SAAS,CAAA;AAKhE,MAAM,MAAM,eAAe,GAAG;IAE5B,SAAS,EAAE,MAAM,CAAA;IAEjB,WAAW,EAAE,MAAM,CAAA;IAEnB,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAEvD,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAEnC,qBAAqB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,KAAK;QAAC,CAAC,aAAa,EAAE,MAAM,GAAG,MAAM,CAAA;KAAC,CAAA;IAElG,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAA;AAE1D;;;GAGG;AACH,eAAO,MAAM,UAAU,qOAelB,eAAe,6CAyDnB,CAAA"}

package/esm/Pagination/Pagination.js

@@ -1,25 +1,25 @@
 import e from "../node_modules/clsx/dist/clsx.js";
-import { Link as t } from "../Link/Link.js";
-import { useWindowSize as n } from "../hooks/useWindowSize.js";
-import { buildPaginationModel as r } from "./model.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/pagination/colors-with-modes-C2GLM06X.css';/* empty css                                                                                                        */
-import i from "./Pagination.module.js";
-import a, { memo as o, useCallback as s } from "react";
-import { jsx as c } from "react/jsx-runtime";
+import { ExpandableArrow as t } from "../ExpandableArrow/ExpandableArrow.js";
+import { Button as n } from "../Button/Button.js";
+import { useWindowSize as r } from "../hooks/useWindowSize.js";
+import { buildPaginationModel as i } from "./model.js";
+import a from "./Pagination.module.js";
+import o, { memo as s, useCallback as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/Pagination/Pagination.tsx
-var l = o(({ id: t, className: o, pageCount: l, currentPage: f, onPageChange: p, hrefBuilder: m = d, pageAttributesBuilder: h, marginPageCount: g = 1, showPages: _ = !0, surroundingPageCount: v = 2, "aria-label": y, "data-testid": b, ...x }) => {
-	let { width: S } = n();
+var d = s(({ id: t, className: n, pageCount: s, currentPage: u, onPageChange: d, hrefBuilder: m = p, pageAttributesBuilder: h, marginPageCount: g = 1, showPages: _ = !0, surroundingPageCount: v = 2, "aria-label": y, "data-testid": b, ...x }) => {
+	let { width: S } = r();
 	S && S < 768 && (g = 1, v = 0);
-	let C = a.useRef(null), w = s((e) => (t) => {
-		p && p(t, e);
-	}, [p]), T = a.useMemo(() => r(l, f, _, g, v).map((e) => /* @__PURE__ */ c(u, {
+	let C = o.useRef(null), w = c((e) => (t) => {
+		d && d(t, e);
+	}, [d]), T = o.useMemo(() => i(s, u, _, g, v).map((e) => /* @__PURE__ */ l(f, {
 		page: e,
 		hrefBuilder: m,
 		pageAttributesBuilder: h,
 		onClick: w(e.num)
 	}, `${e.type}-${e.num}`)), [
-		l,
-		f,
+		s,
+		u,
 		_,
 		g,
 		v,
@@ -27,69 +27,111 @@ var l = o(({ id: t, className: o, pageCount: l, currentPage: f, onPageChange: p,
 		h,
 		w
 	]);
-	return /* @__PURE__ */ c("nav", {
+	return /* @__PURE__ */ l("nav", {
 		ref: C,
 		id: t,
-		className: e(i.Pagination, _ && i.Pagination__showPages, o),
+		className: e(a.Pagination, n),
 		"data-testid": b,
 		"aria-label": y || "Pagination",
 		...x,
-		children: /* @__PURE__ */ c("div", {
-			className: e(i.Pagination__inner),
+		children: /* @__PURE__ */ l("div", {
+			className: e(a.Pagination__inner),
 			children: T
 		})
 	});
-}), u = ({ page: n, hrefBuilder: r, pageAttributesBuilder: a, onClick: o }) => {
-	let s = {
+}), f = ({ page: r, hrefBuilder: i, pageAttributesBuilder: s, onClick: c }) => {
+	let [d, f] = o.useState(!1), p = {
 		role: "button",
-		arrowDirection: "none",
-		className: e(i.Pagination__item),
-		size: "medium",
-		onClick: o
-	}, l = a?.(n.num);
-	switch (n.type) {
-		case "PREV": return /* @__PURE__ */ c(t, {
-			...s,
+		size: "small",
+		variant: "subtle",
+		onClick: r.disabled ? void 0 : c
+	}, { className: m, ...h } = s?.(r.num, r) ?? {};
+	switch (r.type) {
+		case "PREV": return /* @__PURE__ */ l(n, {
+			...p,
+			as: "a",
 			rel: "prev",
-			arrowDirection: "start",
-			href: n.disabled ? void 0 : r(n.num),
-			"aria-disabled": n.disabled || void 0,
+			href: r.disabled ? void 0 : i(r.num),
+			"aria-disabled": r.disabled || void 0,
 			"aria-label": "Previous Page",
-			...l,
-			children: "Previous"
+			...h,
+			className: e(a.Pagination__controlItem, m),
+			onMouseEnter: () => f(!0),
+			onMouseLeave: () => f(!1),
+			onFocus: () => f(!0),
+			onBlur: () => f(!1),
+			children: /* @__PURE__ */ u("span", {
+				className: a.Pagination__controlContent,
+				children: [/* @__PURE__ */ l("span", {
+					className: e(a.Pagination__controlArrowWrapper, a["Pagination__controlArrowWrapper--previous"]),
+					children: /* @__PURE__ */ l(t, {
+						hidden: !0,
+						reverse: !0,
+						expanded: !r.disabled && d,
+						className: a.Pagination__controlArrow
+					})
+				}), /* @__PURE__ */ l("span", {
+					className: a.Pagination__controlText,
+					children: "Previous"
+				})]
+			})
 		});
-		case "NEXT": return /* @__PURE__ */ c(t, {
-			...s,
+		case "NEXT": return /* @__PURE__ */ l(n, {
+			...p,
+			as: "a",
 			rel: "next",
-			arrowDirection: "end",
-			href: n.disabled ? void 0 : r(n.num),
-			"aria-disabled": n.disabled || void 0,
+			href: r.disabled ? void 0 : i(r.num),
+			"aria-disabled": r.disabled || void 0,
 			"aria-label": "Next Page",
-			...l,
-			children: "Next"
+			...h,
+			className: e(a.Pagination__controlItem, m),
+			onMouseEnter: () => f(!0),
+			onMouseLeave: () => f(!1),
+			onFocus: () => f(!0),
+			onBlur: () => f(!1),
+			children: /* @__PURE__ */ u("span", {
+				className: a.Pagination__controlContent,
+				children: [/* @__PURE__ */ l("span", {
+					className: a.Pagination__controlText,
+					children: "Next"
+				}), /* @__PURE__ */ l("span", {
+					className: e(a.Pagination__controlArrowWrapper, a["Pagination__controlArrowWrapper--next"]),
+					children: /* @__PURE__ */ l(t, {
+						hidden: !0,
+						expanded: !r.disabled && d,
+						className: a.Pagination__controlArrow
+					})
+				})]
+			})
 		});
-		case "NUM": return /* @__PURE__ */ c(t, {
-			...s,
-			href: r(n.num),
-			"aria-label": `Page ${n.num}${n.precedesBreak ? "..." : ""}`,
-			"aria-current": n.selected ? "page" : void 0,
-			...l,
-			children: n.num
+		case "NUM": return /* @__PURE__ */ l(n, {
+			...p,
+			as: "a",
+			variant: r.selected ? "primary" : "subtle",
+			className: e(a.Pagination__pageItem, m),
+			href: i(r.num),
+			"aria-label": `Page ${r.num}${r.precedesBreak ? "..." : ""}`,
+			"aria-current": r.selected ? "page" : void 0,
+			...h,
+			children: r.num
 		});
-		case "BREAK": return /* @__PURE__ */ c(t, {
-			...s,
+		case "BREAK": return /* @__PURE__ */ l(n, {
+			...p,
+			as: "a",
+			className: e(a.Pagination__pageItem, m),
+			variant: "subtle",
 			role: "presentation",
 			href: void 0,
 			onClick: void 0,
-			...l,
+			...h,
 			children: "…"
 		});
 	}
 };
-function d(e) {
+function p(e) {
 	return `#${e}`;
 }
 //#endregion
-export { l as Pagination };
+export { d as Pagination };
 
 //# sourceMappingURL=Pagination.js.map

package/esm/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":[],"sources":["../../src/Pagination/Pagination.tsx"],"sourcesContent":["import React, {memo, useCallback} from 'react'\nimport {Link, LinkProps, useWindowSize} from '..'\n\nimport {clsx} from 'clsx'\n\nimport {buildPaginationModel, PageType} from './model'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/pagination/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Pagination.module.css'\n\nexport type PaginationProps = {\n  /* The total number of pages */\n  pageCount: number\n  /* The current page number */\n  currentPage: number\n  /* Callback function for when the page changes */\n  onPageChange?: (e: React.MouseEvent, n: number) => void\n  /* Function to build the href for each page */\n  hrefBuilder?: (n: number) => string\n  /* Function to forward custom attributes for each pagination item */\n  pageAttributesBuilder?: (n: number) => {[attributeName: string]: string}\n  /* Defines how many pages are to to be displayed on the left and right of the component */\n  marginPageCount?: number\n  /* Whether to show the page numbers */\n  showPages?: boolean\n  /* The number of pages to show on each side of the current page */\n  surroundingPageCount?: number\n  'data-testid'?: string\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>\n\n/**\n * Use Pagination to display a sequence of links that allow navigation to discrete, related pages.\n * @see https://primer.style/brand/components/Pagination\n */\nexport const Pagination = memo(\n  ({\n    id,\n    className,\n    pageCount,\n    currentPage,\n    onPageChange,\n    hrefBuilder = defaultHrefBuilder,\n    pageAttributesBuilder,\n    marginPageCount = 1,\n    showPages = true,\n    surroundingPageCount = 2,\n    'aria-label': ariaLabel,\n    'data-testid': testId,\n    ...rest\n  }: PaginationProps) => {\n    // On mobile, limit the number of visible numbers\n    const {width} = useWindowSize()\n    if (width && width < 768) {\n      marginPageCount = 1\n      surroundingPageCount = 0\n    }\n\n    const navRef = React.useRef<HTMLElement>(null)\n\n    const pageChange = useCallback(\n      (n: number) => (e: React.MouseEvent) => {\n        if (onPageChange) {\n          onPageChange(e, n)\n        }\n      },\n      [onPageChange],\n    )\n\n    const paginationItems = React.useMemo(() => {\n      const model = buildPaginationModel(pageCount, currentPage, showPages, marginPageCount, surroundingPageCount)\n\n      return model.map(page => {\n        return (\n          <PaginationItem\n            key={`${page.type}-${page.num}`}\n            page={page}\n            hrefBuilder={hrefBuilder}\n            pageAttributesBuilder={pageAttributesBuilder}\n            onClick={pageChange(page.num)}\n          />\n        )\n      })\n    }, [\n      pageCount,\n      currentPage,\n      showPages,\n      marginPageCount,\n      surroundingPageCount,\n      hrefBuilder,\n      pageAttributesBuilder,\n      pageChange,\n    ])\n\n    return (\n      <nav\n        ref={navRef}\n        id={id}\n        className={clsx(styles.Pagination, showPages && styles['Pagination__showPages'], className)}\n        data-testid={testId}\n        aria-label={ariaLabel || 'Pagination'}\n        {...rest}\n      >\n        <div className={clsx(styles.Pagination__inner)}>{paginationItems}</div>\n      </nav>\n    )\n  },\n)\n\ntype PaginationItemProps = {\n  page: PageType\n  hrefBuilder: (n: number) => string\n  pageAttributesBuilder?: (n: number) => {[key: string]: string}\n  onClick?: LinkProps['onClick']\n}\n\nconst PaginationItem = ({page, hrefBuilder, pageAttributesBuilder, onClick}: PaginationItemProps) => {\n  const baseProps: LinkProps = {\n    role: 'button',\n    arrowDirection: 'none',\n    className: clsx(styles.Pagination__item),\n    size: 'medium',\n    onClick,\n  }\n\n  const customProps = pageAttributesBuilder?.(page.num)\n\n  switch (page.type) {\n    case 'PREV': {\n      return (\n        <Link\n          {...baseProps}\n          rel=\"prev\"\n          arrowDirection=\"start\"\n          href={page.disabled ? undefined : hrefBuilder(page.num)}\n          aria-disabled={page.disabled || undefined}\n          aria-label=\"Previous Page\"\n          {...customProps}\n        >\n          Previous\n        </Link>\n      )\n    }\n    case 'NEXT': {\n      return (\n        <Link\n          {...baseProps}\n          rel=\"next\"\n          arrowDirection=\"end\"\n          href={page.disabled ? undefined : hrefBuilder(page.num)}\n          aria-disabled={page.disabled || undefined}\n          aria-label=\"Next Page\"\n          {...customProps}\n        >\n          Next\n        </Link>\n      )\n    }\n    case 'NUM': {\n      return (\n        /**\n         * Append \"...\" to the aria-label for pages that preceed a break because screen readers will change the\n         * tone the text is read in. This is a slightly nicer experience than skipping a bunch of numbers unexpectedly.\n         */\n        <Link\n          {...baseProps}\n          href={hrefBuilder(page.num)}\n          aria-label={`Page ${page.num}${page.precedesBreak ? '...' : ''}`}\n          aria-current={page.selected ? 'page' : undefined}\n          {...customProps}\n        >\n          {page.num}\n        </Link>\n      )\n    }\n    case 'BREAK': {\n      return (\n        <Link {...baseProps} role=\"presentation\" href={undefined} onClick={undefined} {...customProps}>\n          …\n        </Link>\n      )\n    }\n  }\n}\n\nfunction defaultHrefBuilder(pageNum: number) {\n  return `#${pageNum}`\n}\n"],"mappings":";;;;;;;;;AAuCA,IAAa,IAAa,GACvB,EACC,OACA,cACA,cACA,gBACA,iBACA,iBAAc,GACd,0BACA,qBAAkB,GAClB,eAAY,IACZ,0BAAuB,GACvB,cAAc,GACd,eAAe,GACf,GAAG,QACkB;CAErB,IAAM,EAAC,aAAS,GAAe;AAC/B,CAAI,KAAS,IAAQ,QACnB,IAAkB,GAClB,IAAuB;CAGzB,IAAM,IAAS,EAAM,OAAoB,KAAK,EAExC,IAAa,GAChB,OAAe,MAAwB;AACtC,EAAI,KACF,EAAa,GAAG,EAAE;IAGtB,CAAC,EAAa,CACf,EAEK,IAAkB,EAAM,cACd,EAAqB,GAAW,GAAa,GAAW,GAAiB,EAEhF,CAAM,KAAI,MAEb,kBAAC,GAAD;EAEQ;EACO;EACU;EACvB,SAAS,EAAW,EAAK,IAAI;EAC7B,EALK,GAAG,EAAK,KAAK,GAAG,EAAK,MAK1B,CAEJ,EACD;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,kBAAC,OAAD;EACE,KAAK;EACD;EACJ,WAAW,EAAK,EAAO,YAAY,KAAa,EAAO,uBAA0B,EAAU;EAC3F,eAAa;EACb,cAAY,KAAa;EACzB,GAAI;YAEJ,kBAAC,OAAD;GAAK,WAAW,EAAK,EAAO,kBAAkB;aAAG;GAAsB,CAAA;EACnE,CAAA;EAGX,EASK,KAAkB,EAAC,SAAM,gBAAa,0BAAuB,iBAAkC;CACnG,IAAM,IAAuB;EAC3B,MAAM;EACN,gBAAgB;EAChB,WAAW,EAAK,EAAO,iBAAiB;EACxC,MAAM;EACN;EACD,EAEK,IAAc,IAAwB,EAAK,IAAI;AAErD,SAAQ,EAAK,MAAb;EACE,KAAK,OACH,QACE,kBAAC,GAAD;GACE,GAAI;GACJ,KAAI;GACJ,gBAAe;GACf,MAAM,EAAK,WAAW,KAAA,IAAY,EAAY,EAAK,IAAI;GACvD,iBAAe,EAAK,YAAY,KAAA;GAChC,cAAW;GACX,GAAI;aACL;GAEM,CAAA;EAGX,KAAK,OACH,QACE,kBAAC,GAAD;GACE,GAAI;GACJ,KAAI;GACJ,gBAAe;GACf,MAAM,EAAK,WAAW,KAAA,IAAY,EAAY,EAAK,IAAI;GACvD,iBAAe,EAAK,YAAY,KAAA;GAChC,cAAW;GACX,GAAI;aACL;GAEM,CAAA;EAGX,KAAK,MACH,QAKE,kBAAC,GAAD;GACE,GAAI;GACJ,MAAM,EAAY,EAAK,IAAI;GAC3B,cAAY,QAAQ,EAAK,MAAM,EAAK,gBAAgB,QAAQ;GAC5D,gBAAc,EAAK,WAAW,SAAS,KAAA;GACvC,GAAI;aAEH,EAAK;GACD,CAAA;EAGX,KAAK,QACH,QACE,kBAAC,GAAD;GAAM,GAAI;GAAW,MAAK;GAAe,MAAM,KAAA;GAAW,SAAS,KAAA;GAAW,GAAI;aAAa;GAExF,CAAA;;;AAMf,SAAS,EAAmB,GAAiB;AAC3C,QAAO,IAAI"}
+{"version":3,"file":"Pagination.js","names":[],"sources":["../../src/Pagination/Pagination.tsx"],"sourcesContent":["import React, {memo, useCallback} from 'react'\nimport {Button, useWindowSize} from '..'\n\nimport {clsx} from 'clsx'\n\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport {buildPaginationModel, PaginationPageType} from './model'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Pagination.module.css'\n\nexport type PaginationProps = {\n  /* The total number of pages */\n  pageCount: number\n  /* The current page number */\n  currentPage: number\n  /* Callback function for when the page changes */\n  onPageChange?: (e: React.MouseEvent, n: number) => void\n  /* Function to build the href for each page */\n  hrefBuilder?: (n: number) => string\n  /* Function to forward custom attributes for each pagination item */\n  pageAttributesBuilder?: (n: number, page: PaginationPageType) => {[attributeName: string]: string}\n  /* Defines how many pages are to be displayed on the left and right of the component */\n  marginPageCount?: number\n  /* Whether to show the page numbers */\n  showPages?: boolean\n  /* The number of pages to show on each side of the current page */\n  surroundingPageCount?: number\n  'data-testid'?: string\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>\n\n/**\n * Use Pagination to display a sequence of links that allow navigation to discrete, related pages.\n * @see https://primer.style/brand/components/Pagination\n */\nexport const Pagination = memo(\n  ({\n    id,\n    className,\n    pageCount,\n    currentPage,\n    onPageChange,\n    hrefBuilder = defaultHrefBuilder,\n    pageAttributesBuilder,\n    marginPageCount = 1,\n    showPages = true,\n    surroundingPageCount = 2,\n    'aria-label': ariaLabel,\n    'data-testid': testId,\n    ...rest\n  }: PaginationProps) => {\n    // On mobile, limit the number of visible numbers\n    const {width} = useWindowSize()\n    if (width && width < 768) {\n      marginPageCount = 1\n      surroundingPageCount = 0\n    }\n\n    const navRef = React.useRef<HTMLElement>(null)\n\n    const pageChange = useCallback(\n      (n: number) => (e: React.MouseEvent) => {\n        if (onPageChange) {\n          onPageChange(e, n)\n        }\n      },\n      [onPageChange],\n    )\n\n    const paginationItems = React.useMemo(() => {\n      const model = buildPaginationModel(pageCount, currentPage, showPages, marginPageCount, surroundingPageCount)\n\n      return model.map(page => {\n        return (\n          <PaginationItem\n            key={`${page.type}-${page.num}`}\n            page={page}\n            hrefBuilder={hrefBuilder}\n            pageAttributesBuilder={pageAttributesBuilder}\n            onClick={pageChange(page.num)}\n          />\n        )\n      })\n    }, [\n      pageCount,\n      currentPage,\n      showPages,\n      marginPageCount,\n      surroundingPageCount,\n      hrefBuilder,\n      pageAttributesBuilder,\n      pageChange,\n    ])\n\n    return (\n      <nav\n        ref={navRef}\n        id={id}\n        className={clsx(styles.Pagination, className)}\n        data-testid={testId}\n        aria-label={ariaLabel || 'Pagination'}\n        {...rest}\n      >\n        <div className={clsx(styles.Pagination__inner)}>{paginationItems}</div>\n      </nav>\n    )\n  },\n)\n\ntype PaginationItemProps = {\n  page: PaginationPageType\n  hrefBuilder: (n: number) => string\n  pageAttributesBuilder?: (n: number, page: PaginationPageType) => {[key: string]: string}\n  onClick?: React.MouseEventHandler<HTMLAnchorElement>\n}\n\nconst PaginationItem = ({page, hrefBuilder, pageAttributesBuilder, onClick}: PaginationItemProps) => {\n  const [isArrowExpanded, setIsArrowExpanded] = React.useState(false)\n\n  const baseProps = {\n    role: 'button',\n    size: 'small' as const,\n    variant: 'subtle' as const,\n    onClick: page.disabled ? undefined : onClick,\n  }\n\n  const customProps = pageAttributesBuilder?.(page.num, page)\n  const {className: customClassName, ...customAttributes} = customProps ?? {}\n\n  switch (page.type) {\n    case 'PREV': {\n      return (\n        <Button\n          {...baseProps}\n          as=\"a\"\n          rel=\"prev\"\n          href={page.disabled ? undefined : hrefBuilder(page.num)}\n          aria-disabled={page.disabled || undefined}\n          aria-label=\"Previous Page\"\n          {...customAttributes}\n          className={clsx(styles.Pagination__controlItem, customClassName)}\n          onMouseEnter={() => setIsArrowExpanded(true)}\n          onMouseLeave={() => setIsArrowExpanded(false)}\n          onFocus={() => setIsArrowExpanded(true)}\n          onBlur={() => setIsArrowExpanded(false)}\n        >\n          <span className={styles.Pagination__controlContent}>\n            <span\n              className={clsx(\n                styles.Pagination__controlArrowWrapper,\n                styles['Pagination__controlArrowWrapper--previous'],\n              )}\n            >\n              <ExpandableArrow\n                hidden\n                reverse\n                expanded={!page.disabled && isArrowExpanded}\n                className={styles.Pagination__controlArrow}\n              />\n            </span>\n            <span className={styles.Pagination__controlText}>Previous</span>\n          </span>\n        </Button>\n      )\n    }\n    case 'NEXT': {\n      return (\n        <Button\n          {...baseProps}\n          as=\"a\"\n          rel=\"next\"\n          href={page.disabled ? undefined : hrefBuilder(page.num)}\n          aria-disabled={page.disabled || undefined}\n          aria-label=\"Next Page\"\n          {...customAttributes}\n          className={clsx(styles.Pagination__controlItem, customClassName)}\n          onMouseEnter={() => setIsArrowExpanded(true)}\n          onMouseLeave={() => setIsArrowExpanded(false)}\n          onFocus={() => setIsArrowExpanded(true)}\n          onBlur={() => setIsArrowExpanded(false)}\n        >\n          <span className={styles.Pagination__controlContent}>\n            <span className={styles.Pagination__controlText}>Next</span>\n            <span\n              className={clsx(styles.Pagination__controlArrowWrapper, styles['Pagination__controlArrowWrapper--next'])}\n            >\n              <ExpandableArrow\n                hidden\n                expanded={!page.disabled && isArrowExpanded}\n                className={styles.Pagination__controlArrow}\n              />\n            </span>\n          </span>\n        </Button>\n      )\n    }\n    case 'NUM': {\n      return (\n        /**\n         * Append \"...\" to the aria-label for pages that precede a break because screen readers will change the\n         * tone the text is read in. This is a slightly nicer experience than skipping a bunch of numbers unexpectedly.\n         */\n        <Button\n          {...baseProps}\n          as=\"a\"\n          variant={page.selected ? 'primary' : 'subtle'}\n          className={clsx(styles.Pagination__pageItem, customClassName)}\n          href={hrefBuilder(page.num)}\n          aria-label={`Page ${page.num}${page.precedesBreak ? '...' : ''}`}\n          aria-current={page.selected ? 'page' : undefined}\n          {...customAttributes}\n        >\n          {page.num}\n        </Button>\n      )\n    }\n    case 'BREAK': {\n      return (\n        <Button\n          {...baseProps}\n          as=\"a\"\n          className={clsx(styles.Pagination__pageItem, customClassName)}\n          variant=\"subtle\"\n          role=\"presentation\"\n          href={undefined}\n          onClick={undefined}\n          {...customAttributes}\n        >\n          …\n        </Button>\n      )\n    }\n  }\n}\n\nfunction defaultHrefBuilder(pageNum: number) {\n  return `#${pageNum}`\n}\n"],"mappings":"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"}

package/esm/Pagination/Pagination.module-DmKBSq7s.css

@@ -0,0 +1 @@
+.Primer_Brand__Pagination-module__Pagination___kfPR3{margin-top:var(--base-size-20);margin-bottom:var(--base-size-16);text-align:center}.Primer_Brand__Pagination-module__Pagination__inner___uSIJu{justify-content:center;align-items:center;gap:var(--base-size-8);flex-wrap:wrap;display:inline-flex}.Primer_Brand__Pagination-module__Pagination__pageItem___4j6vp{--brand-button-subtle-borderColor-rest:transparent;--brand-button-subtle-borderColor-hover:transparent;--brand-button-subtle-borderColor-active:transparent;transition:none}.Primer_Brand__Pagination-module__Pagination__controlContent___VU4Qm{gap:var(--base-size-4);align-items:center;display:inline-flex;position:relative}.Primer_Brand__Pagination-module__Pagination__controlArrowWrapper___0Q_Ku{flex-shrink:0;display:none}.Primer_Brand__Pagination-module__Pagination__controlArrowWrapper--previous____zTeS{transform:translateX(var(--base-size-2))}.Primer_Brand__Pagination-module__Pagination__controlArrowWrapper--next___KhVzs{transform:translateX(calc(var(--base-size-2) * -1))}.Primer_Brand__Pagination-module__Pagination__controlArrow___RwrzD{width:var(--base-size-16);height:var(--base-size-16)}@media screen and (width<=47.99rem){.Primer_Brand__Pagination-module__Pagination__controlItem___zNWUt{padding-inline:var(--base-size-8);--brand-button-subtle-borderColor-rest:transparent;--brand-button-subtle-borderColor-hover:transparent;--brand-button-subtle-borderColor-active:transparent}.Primer_Brand__Pagination-module__Pagination__controlText___S6XdE{width:var(--base-size-2);height:var(--base-size-2);clip:rect(0, 0, 0, 0);word-wrap:normal;border:0;padding:0;position:absolute;overflow:hidden}.Primer_Brand__Pagination-module__Pagination__controlArrowWrapper___0Q_Ku{display:flex}.Primer_Brand__Pagination-module__Pagination__controlItem___zNWUt>span{align-items:center;display:flex}.Primer_Brand__Pagination-module__Pagination__controlItem___zNWUt>span>span{align-items:center;line-height:0;display:flex}}

package/esm/Pagination/Pagination.module.js

@@ -1,8 +1,14 @@
-import './Pagination.module-C7Z_pTFq.css';var e = {
+import './Pagination.module-DmKBSq7s.css';var e = {
 	Pagination: "Primer_Brand__Pagination-module__Pagination___kfPR3",
 	Pagination__inner: "Primer_Brand__Pagination-module__Pagination__inner___uSIJu",
-	Pagination__item: "Primer_Brand__Pagination-module__Pagination__item___O5m_Y",
-	Pagination__showPages: "Primer_Brand__Pagination-module__Pagination__showPages___YVeH_"
+	Pagination__pageItem: "Primer_Brand__Pagination-module__Pagination__pageItem___4j6vp",
+	Pagination__controlContent: "Primer_Brand__Pagination-module__Pagination__controlContent___VU4Qm",
+	Pagination__controlArrowWrapper: "Primer_Brand__Pagination-module__Pagination__controlArrowWrapper___0Q_Ku",
+	"Pagination__controlArrowWrapper--previous": "Primer_Brand__Pagination-module__Pagination__controlArrowWrapper--previous____zTeS",
+	"Pagination__controlArrowWrapper--next": "Primer_Brand__Pagination-module__Pagination__controlArrowWrapper--next___KhVzs",
+	Pagination__controlArrow: "Primer_Brand__Pagination-module__Pagination__controlArrow___RwrzD",
+	Pagination__controlItem: "Primer_Brand__Pagination-module__Pagination__controlItem___zNWUt",
+	Pagination__controlText: "Primer_Brand__Pagination-module__Pagination__controlText___S6XdE"
 };
 //#endregion
 export { e as default };

package/esm/Pagination/Pagination.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.module.js","names":[],"sources":["../../src/Pagination/Pagination.module.css"],"sourcesContent":[".Pagination {\n  margin-top: var(--base-size-20);\n  margin-bottom: var(--base-size-16);\n  text-align: center;\n}\n\n.Pagination__inner {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--base-size-8);\n}\n\n.Pagination__item {\n  min-width: var(--base-size-32);\n  height: var(--base-size-32);\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: middle;\n  cursor: pointer;\n  user-select: none;\n  text-decoration: none;\n  padding: var(--base-size-4) var(--base-size-8);\n  border: var(--brand-borderWidth-thick) solid transparent;\n  border-radius: var(--brand-borderRadius-medium);\n  transition: border-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.Pagination__item span {\n  font-size: var(--brand-text-size-100);\n  line-height: var(--base-size-20);\n}\n\n.Pagination__item:hover,\n.Pagination__item:focus {\n  text-decoration: none;\n  outline: 0;\n  transition-duration: 0.1s;\n  border-color: var(--brand-pagination-borderColor-hover);\n}\n\n.Pagination__item::after {\n  display: none;\n}\n\n.Pagination__item:active {\n  border-color: var(--brand-pagination-link-bgColor-active);\n}\n\n.Pagination__item[aria-current],\n.Pagination__item[aria-current]:hover {\n  background-color: var(--brand-pagination-link-bgColor-active);\n  border-color: transparent;\n}\n\n.Pagination__item[aria-current] * {\n  color: var(--brand-color-text-onEmphasis);\n}\n\n.Pagination__item[aria-disabled],\n.Pagination__item[aria-disabled]:hover,\n.Pagination__item[role='presentation'],\n.Pagination__item[role='presentation']:hover {\n  color: var(--brand-color-text-muted);\n  cursor: default;\n  background-color: transparent;\n  border-color: transparent;\n  font-size: inherit;\n  font-family: inherit;\n  padding-top: inherit;\n  padding-bottom: inherit;\n}\n\n.Pagination__item[aria-disabled] *,\n.Pagination__item[aria-disabled]:hover *,\n.Pagination__item[role='presentation'] *,\n.Pagination__item[role='presentation']:hover * {\n  color: inherit;\n}\n\n.Pagination__showPages .Pagination__item[rel='prev'] span,\n.Pagination__showPages .Pagination__item[rel='next'] span {\n  display: none;\n}\n\n.Pagination__item[rel='prev'] svg,\n.Pagination__item[rel='next'] svg {\n  margin-inline: 0;\n  position: relative;\n}\n\n.Pagination__item[rel='prev'] svg {\n  left: var(--base-size-2);\n}\n\n.Pagination__item[rel='next'] svg {\n  right: var(--base-size-2);\n}\n\n@media screen and (min-width: 48rem) {\n  .Pagination__item[rel='prev'] span,\n  .Pagination__item[rel='next'] span {\n    display: block !important;\n  }\n\n  .Pagination__item[rel='prev'] svg,\n  .Pagination__item[rel='next'] svg {\n    margin-inline: unset;\n    left: 0;\n    right: 0;\n  }\n\n  .Pagination__item[rel='prev'][aria-disabled] svg,\n  .Pagination__item[rel='next'][aria-disabled] svg {\n    display: none;\n  }\n}\n\n@media (forced-colors: active) {\n  .Pagination__item[aria-current],\n  .Pagination__item[aria-current]:hover {\n    border-color: Highlight;\n    border-width: var(--brand-borderWidth-thicker);\n  }\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .Pagination,\n  .Pagination::before,\n  .Pagination::after,\n  .Pagination * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Pagination.module.js","names":[],"sources":["../../src/Pagination/Pagination.module.css"],"sourcesContent":[".Pagination {\n  margin-top: var(--base-size-20);\n  margin-bottom: var(--base-size-16);\n  text-align: center;\n}\n\n.Pagination__inner {\n  display: inline-flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: var(--base-size-8);\n}\n\n.Pagination__pageItem {\n  transition: none; /* Prevents flash of background color when changing pages */\n  --brand-button-subtle-borderColor-rest: transparent;\n  --brand-button-subtle-borderColor-hover: transparent;\n  --brand-button-subtle-borderColor-active: transparent;\n}\n\n.Pagination__controlContent {\n  position: relative;\n  display: inline-flex;\n  gap: var(--base-size-4);\n  align-items: center;\n}\n\n.Pagination__controlArrowWrapper {\n  display: none;\n  flex-shrink: 0;\n}\n\n.Pagination__controlArrowWrapper--previous {\n  transform: translateX(var(--base-size-2));\n}\n\n.Pagination__controlArrowWrapper--next {\n  transform: translateX(calc(var(--base-size-2) * -1));\n}\n\n.Pagination__controlArrow {\n  width: var(--base-size-16);\n  height: var(--base-size-16);\n}\n\n@media screen and (max-width: 47.99rem) {\n  .Pagination__controlItem {\n    padding-inline: var(--base-size-8);\n    --brand-button-subtle-borderColor-rest: transparent;\n    --brand-button-subtle-borderColor-hover: transparent;\n    --brand-button-subtle-borderColor-active: transparent;\n  }\n\n  .Pagination__controlText {\n    position: absolute;\n    width: var(--base-size-2);\n    height: var(--base-size-2);\n    padding: 0;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    word-wrap: normal;\n    border: 0;\n  }\n\n  .Pagination__controlArrowWrapper {\n    display: flex;\n  }\n\n  .Pagination__controlItem > span {\n    display: flex;\n    align-items: center;\n  }\n\n  .Pagination__controlItem > span > span {\n    display: flex;\n    align-items: center;\n    line-height: 0;\n  }\n}\n"],"mappings":""}

package/esm/Pagination/model.d.ts

@@ -1,9 +1,9 @@
-export type PageType = {
+export type PaginationPageType = {
     type: 'PREV' | 'NEXT' | 'NUM' | 'BREAK';
     num: number;
     disabled?: boolean;
     selected?: boolean;
     precedesBreak?: boolean;
 };
-export declare function buildPaginationModel(pageCount: number, currentPage: number, showPages: boolean, marginPageCount: number, surroundingPageCount: number): PageType[];
+export declare function buildPaginationModel(pageCount: number, currentPage: number, showPages: boolean, marginPageCount: number, surroundingPageCount: number): PaginationPageType[];
 //# sourceMappingURL=model.d.ts.map

package/esm/Pagination/model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../src/Pagination/model.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,CAAA;IACvC,GAAG,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAAA;AAED,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,MAAM,EACjB,WAAW,EAAE,MAAM,EACnB,SAAS,EAAE,OAAO,EAClB,eAAe,EAAE,MAAM,EACvB,oBAAoB,EAAE,MAAM,GAC3B,QAAQ,EAAE,CAwHZ"}
+{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../src/Pagination/model.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,CAAA;IACvC,GAAG,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAAA;AAED,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,MAAM,EACjB,WAAW,EAAE,MAAM,EACnB,SAAS,EAAE,OAAO,EAClB,eAAe,EAAE,MAAM,EACvB,oBAAoB,EAAE,MAAM,GAC3B,kBAAkB,EAAE,CAwHtB"}

package/esm/Pagination/model.js.map

@@ -1 +1 @@
-{"version":3,"file":"model.js","names":[],"sources":["../../src/Pagination/model.ts"],"sourcesContent":["export type PageType = {\n  type: 'PREV' | 'NEXT' | 'NUM' | 'BREAK'\n  num: number\n  disabled?: boolean\n  selected?: boolean\n  precedesBreak?: boolean\n}\n\nexport function buildPaginationModel(\n  pageCount: number,\n  currentPage: number,\n  showPages: boolean,\n  marginPageCount: number,\n  surroundingPageCount: number,\n): PageType[] {\n  const pages: PageType[] = []\n\n  if (showPages) {\n    const pageNums: Array<number> = []\n    const addPage = (n: number) => {\n      if (n >= 1 && n <= pageCount) {\n        pageNums.push(n)\n      }\n    }\n\n    // Start by defining the window of pages to show around the current page.\n    // If the window goes off either edge, shift it until it fits.\n    let extentLeft = currentPage - surroundingPageCount\n    let extentRight = currentPage + surroundingPageCount\n    if (extentLeft < 1 && extentRight > pageCount) {\n      // Our window is larger than the entire range,\n      // so simply display every page.\n      extentLeft = 1\n      extentRight = pageCount\n    } else if (extentLeft < 1) {\n      while (extentLeft < 1) {\n        extentLeft++\n        extentRight++\n      }\n    } else if (extentRight > pageCount) {\n      while (extentRight > pageCount) {\n        extentLeft--\n        extentRight--\n      }\n    }\n\n    // Next, include the pages in the margins.\n    // If a margin page is already covered in the window,\n    // extend the window to the other direction.\n    for (let i = 1; i <= marginPageCount; i++) {\n      const leftPage = i\n      const rightPage = pageCount - (i - 1)\n      if (leftPage >= extentLeft) {\n        extentRight++\n      } else {\n        addPage(leftPage)\n      }\n      if (rightPage <= extentRight) {\n        extentLeft--\n      } else {\n        addPage(rightPage)\n      }\n    }\n\n    for (let i = extentLeft; i <= extentRight; i++) {\n      addPage(i)\n    }\n\n    const sorted = pageNums\n      .slice()\n      .sort((a, b) => a - b)\n      .filter((item, idx, ary) => !idx || item !== ary[idx - 1])\n    for (let idx = 0; idx < sorted.length; idx++) {\n      const num = sorted[idx]\n      const selected = num === currentPage\n      const last = sorted[idx - 1]\n      const next = sorted[idx + 1]\n      const lastDelta = num - last\n      const nextDelta = num - next\n      const precedesBreak = nextDelta !== -1\n\n      if (idx === 0) {\n        if (num !== 1) {\n          // If the first page isn't page one,\n          // we need to add a break\n          pages.push({\n            type: 'BREAK',\n            num: 1,\n          })\n        }\n        pages.push({\n          type: 'NUM',\n          num,\n          selected,\n          precedesBreak,\n        })\n      } else {\n        if (lastDelta === 1) {\n          pages.push({\n            type: 'NUM',\n            num,\n            selected,\n            precedesBreak,\n          })\n        } else {\n          // We skipped some, so add a break\n          pages.push({\n            type: 'BREAK',\n            num: num - 1,\n          })\n          pages.push({\n            type: 'NUM',\n            num,\n            selected,\n            precedesBreak: false,\n          })\n        }\n      }\n    }\n\n    const lastPage = pages[pages.length - 1]\n    if (lastPage.type === 'NUM' && lastPage.num !== pageCount) {\n      // The last page we rendered wasn't the actual last page,\n      // so we need an additional break\n      pages.push({\n        type: 'BREAK',\n        num: pageCount,\n      })\n    }\n  }\n\n  const prev: PageType = {type: 'PREV', num: currentPage - 1, disabled: currentPage === 1}\n  const next: PageType = {type: 'NEXT', num: currentPage + 1, disabled: currentPage === pageCount}\n  return [prev, ...pages, next]\n}\n"],"mappings":";AAQA,SAAgB,EACd,GACA,GACA,GACA,GACA,GACY;CACZ,IAAM,IAAoB,EAAE;AAE5B,KAAI,GAAW;EACb,IAAM,IAA0B,EAAE,EAC5B,KAAW,MAAc;AAC7B,GAAI,KAAK,KAAK,KAAK,KACjB,EAAS,KAAK,EAAE;KAMhB,IAAa,IAAc,GAC3B,IAAc,IAAc;AAChC,MAAI,IAAa,KAAK,IAAc,EAIlC,CADA,IAAa,GACb,IAAc;WACL,IAAa,EACtB,QAAO,IAAa,GAElB,CADA,KACA;WAEO,IAAc,EACvB,QAAO,IAAc,GAEnB,CADA,KACA;AAOJ,OAAK,IAAI,IAAI,GAAG,KAAK,GAAiB,KAAK;GACzC,IAAM,IAAW,GACX,IAAY,KAAa,IAAI;AAMnC,GALI,KAAY,IACd,MAEA,EAAQ,EAAS,EAEf,KAAa,IACf,MAEA,EAAQ,EAAU;;AAItB,OAAK,IAAI,IAAI,GAAY,KAAK,GAAa,IACzC,GAAQ,EAAE;EAGZ,IAAM,IAAS,EACZ,OAAO,CACP,MAAM,GAAG,MAAM,IAAI,EAAE,CACrB,QAAQ,GAAM,GAAK,MAAQ,CAAC,KAAO,MAAS,EAAI,IAAM,GAAG;AAC5D,OAAK,IAAI,IAAM,GAAG,IAAM,EAAO,QAAQ,KAAO;GAC5C,IAAM,IAAM,EAAO,IACb,IAAW,MAAQ,GACnB,IAAO,EAAO,IAAM,IACpB,IAAO,EAAO,IAAM,IACpB,IAAY,IAAM,GAElB,IADY,IAAM,MACY;AAEpC,GAAI,MAAQ,KACN,MAAQ,KAGV,EAAM,KAAK;IACT,MAAM;IACN,KAAK;IACN,CAAC,EAEJ,EAAM,KAAK;IACT,MAAM;IACN;IACA;IACA;IACD,CAAC,IAEE,MAAc,IAChB,EAAM,KAAK;IACT,MAAM;IACN;IACA;IACA;IACD,CAAC,IAGF,EAAM,KAAK;IACT,MAAM;IACN,KAAK,IAAM;IACZ,CAAC,EACF,EAAM,KAAK;IACT,MAAM;IACN;IACA;IACA,eAAe;IAChB,CAAC;;EAKR,IAAM,IAAW,EAAM,EAAM,SAAS;AACtC,EAAI,EAAS,SAAS,SAAS,EAAS,QAAQ,KAG9C,EAAM,KAAK;GACT,MAAM;GACN,KAAK;GACN,CAAC;;CAIN,IAAM,IAAiB;EAAC,MAAM;EAAQ,KAAK,IAAc;EAAG,UAAU,MAAgB;EAAE,EAClF,IAAiB;EAAC,MAAM;EAAQ,KAAK,IAAc;EAAG,UAAU,MAAgB;EAAU;AAChG,QAAO;EAAC;EAAM,GAAG;EAAO;EAAK"}
+{"version":3,"file":"model.js","names":[],"sources":["../../src/Pagination/model.ts"],"sourcesContent":["export type PaginationPageType = {\n  type: 'PREV' | 'NEXT' | 'NUM' | 'BREAK'\n  num: number\n  disabled?: boolean\n  selected?: boolean\n  precedesBreak?: boolean\n}\n\nexport function buildPaginationModel(\n  pageCount: number,\n  currentPage: number,\n  showPages: boolean,\n  marginPageCount: number,\n  surroundingPageCount: number,\n): PaginationPageType[] {\n  const pages: PaginationPageType[] = []\n\n  if (showPages) {\n    const pageNums: Array<number> = []\n    const addPage = (n: number) => {\n      if (n >= 1 && n <= pageCount) {\n        pageNums.push(n)\n      }\n    }\n\n    // Start by defining the window of pages to show around the current page.\n    // If the window goes off either edge, shift it until it fits.\n    let extentLeft = currentPage - surroundingPageCount\n    let extentRight = currentPage + surroundingPageCount\n    if (extentLeft < 1 && extentRight > pageCount) {\n      // Our window is larger than the entire range,\n      // so simply display every page.\n      extentLeft = 1\n      extentRight = pageCount\n    } else if (extentLeft < 1) {\n      while (extentLeft < 1) {\n        extentLeft++\n        extentRight++\n      }\n    } else if (extentRight > pageCount) {\n      while (extentRight > pageCount) {\n        extentLeft--\n        extentRight--\n      }\n    }\n\n    // Next, include the pages in the margins.\n    // If a margin page is already covered in the window,\n    // extend the window to the other direction.\n    for (let i = 1; i <= marginPageCount; i++) {\n      const leftPage = i\n      const rightPage = pageCount - (i - 1)\n      if (leftPage >= extentLeft) {\n        extentRight++\n      } else {\n        addPage(leftPage)\n      }\n      if (rightPage <= extentRight) {\n        extentLeft--\n      } else {\n        addPage(rightPage)\n      }\n    }\n\n    for (let i = extentLeft; i <= extentRight; i++) {\n      addPage(i)\n    }\n\n    const sorted = pageNums\n      .slice()\n      .sort((a, b) => a - b)\n      .filter((item, idx, ary) => !idx || item !== ary[idx - 1])\n    for (let idx = 0; idx < sorted.length; idx++) {\n      const num = sorted[idx]\n      const selected = num === currentPage\n      const last = sorted[idx - 1]\n      const next = sorted[idx + 1]\n      const lastDelta = num - last\n      const nextDelta = num - next\n      const precedesBreak = nextDelta !== -1\n\n      if (idx === 0) {\n        if (num !== 1) {\n          // If the first page isn't page one,\n          // we need to add a break\n          pages.push({\n            type: 'BREAK',\n            num: 1,\n          })\n        }\n        pages.push({\n          type: 'NUM',\n          num,\n          selected,\n          precedesBreak,\n        })\n      } else {\n        if (lastDelta === 1) {\n          pages.push({\n            type: 'NUM',\n            num,\n            selected,\n            precedesBreak,\n          })\n        } else {\n          // We skipped some, so add a break\n          pages.push({\n            type: 'BREAK',\n            num: num - 1,\n          })\n          pages.push({\n            type: 'NUM',\n            num,\n            selected,\n            precedesBreak: false,\n          })\n        }\n      }\n    }\n\n    const lastPage = pages[pages.length - 1]\n    if (lastPage.type === 'NUM' && lastPage.num !== pageCount) {\n      // The last page we rendered wasn't the actual last page,\n      // so we need an additional break\n      pages.push({\n        type: 'BREAK',\n        num: pageCount,\n      })\n    }\n  }\n\n  const prev: PaginationPageType = {type: 'PREV', num: currentPage - 1, disabled: currentPage === 1}\n  const next: PaginationPageType = {type: 'NEXT', num: currentPage + 1, disabled: currentPage === pageCount}\n  return [prev, ...pages, next]\n}\n"],"mappings":";AAQA,SAAgB,EACd,GACA,GACA,GACA,GACA,GACsB;CACtB,IAAM,IAA8B,EAAE;AAEtC,KAAI,GAAW;EACb,IAAM,IAA0B,EAAE,EAC5B,KAAW,MAAc;AAC7B,GAAI,KAAK,KAAK,KAAK,KACjB,EAAS,KAAK,EAAE;KAMhB,IAAa,IAAc,GAC3B,IAAc,IAAc;AAChC,MAAI,IAAa,KAAK,IAAc,EAIlC,CADA,IAAa,GACb,IAAc;WACL,IAAa,EACtB,QAAO,IAAa,GAElB,CADA,KACA;WAEO,IAAc,EACvB,QAAO,IAAc,GAEnB,CADA,KACA;AAOJ,OAAK,IAAI,IAAI,GAAG,KAAK,GAAiB,KAAK;GACzC,IAAM,IAAW,GACX,IAAY,KAAa,IAAI;AAMnC,GALI,KAAY,IACd,MAEA,EAAQ,EAAS,EAEf,KAAa,IACf,MAEA,EAAQ,EAAU;;AAItB,OAAK,IAAI,IAAI,GAAY,KAAK,GAAa,IACzC,GAAQ,EAAE;EAGZ,IAAM,IAAS,EACZ,OAAO,CACP,MAAM,GAAG,MAAM,IAAI,EAAE,CACrB,QAAQ,GAAM,GAAK,MAAQ,CAAC,KAAO,MAAS,EAAI,IAAM,GAAG;AAC5D,OAAK,IAAI,IAAM,GAAG,IAAM,EAAO,QAAQ,KAAO;GAC5C,IAAM,IAAM,EAAO,IACb,IAAW,MAAQ,GACnB,IAAO,EAAO,IAAM,IACpB,IAAO,EAAO,IAAM,IACpB,IAAY,IAAM,GAElB,IADY,IAAM,MACY;AAEpC,GAAI,MAAQ,KACN,MAAQ,KAGV,EAAM,KAAK;IACT,MAAM;IACN,KAAK;IACN,CAAC,EAEJ,EAAM,KAAK;IACT,MAAM;IACN;IACA;IACA;IACD,CAAC,IAEE,MAAc,IAChB,EAAM,KAAK;IACT,MAAM;IACN;IACA;IACA;IACD,CAAC,IAGF,EAAM,KAAK;IACT,MAAM;IACN,KAAK,IAAM;IACZ,CAAC,EACF,EAAM,KAAK;IACT,MAAM;IACN;IACA;IACA,eAAe;IAChB,CAAC;;EAKR,IAAM,IAAW,EAAM,EAAM,SAAS;AACtC,EAAI,EAAS,SAAS,SAAS,EAAS,QAAQ,KAG9C,EAAM,KAAK;GACT,MAAM;GACN,KAAK;GACN,CAAC;;CAIN,IAAM,IAA2B;EAAC,MAAM;EAAQ,KAAK,IAAc;EAAG,UAAU,MAAgB;EAAE,EAC5F,IAA2B;EAAC,MAAM;EAAQ,KAAK,IAAc;EAAG,UAAU,MAAgB;EAAU;AAC1G,QAAO;EAAC;EAAM,GAAG;EAAO;EAAK"}

package/esm/SubNav/SubNav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SubNav.d.ts","sourceRoot":"","sources":["../../src/SubNav/SubNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAYZ,KAAK,iBAAiB,EAEtB,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AACd,OAAO,EAAS,WAAW,EAAE,cAAc,EAAQ,SAAS,EAA+B,MAAM,IAAI,CAAA;AAWrG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD;;GAEG;AACH,OAAO,8FAA8F,CAAA;AACrG,OAAO,2GAA2G,CAAA;AA4BlH,eAAO,MAAM,qBAAqB,iCAAkC,CAAA;AACpE,KAAK,eAAe,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7D,KAAK,iBAAiB,GAAG;IACvB,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;CAC5C,CAAA;AAID,eAAO,MAAM,gBAAgB,yBAM5B,CAAA;AA6CD,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,iBAAiB,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAA;AA8PhD,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,GACvD,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAe9B,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,GACvD,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAe9B,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC9B,eAAe,CAAC,EAAE,eAAe,CAAA;CAClC,GAAG,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,GACvD,SAAS,CAAC,iBAAiB,CAAC,CAAA;AA6J9B,KAAK,YAAY,GAAG;IAClB,OAAO,CAAC,EAAE,eAAe,CAAA;CAC1B,GAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GACxC,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAE7B,iBAAS,WAAW,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,OAAoB,EAAE,GAAG,KAAK,EAAC,EAAE,YAAY,2CAgEvF;AAED,KAAK,iBAAiB,GAAG;IACvB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;IACnC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;CAC1C,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,CAAA;AAE/D,iBAAS,UAAU,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAE,OAAmB,EAAE,IAAc,EAAE,GAAG,IAAI,EAAC,EAAE,iBAAiB,2CAcpG;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM;8EA7SgE,gBAAgB;iFAmBb,mBAAmB;;;;;;;;;;;;;CAiSvG,CAAA"}
+{"version":3,"file":"SubNav.d.ts","sourceRoot":"","sources":["../../src/SubNav/SubNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAYZ,KAAK,iBAAiB,EAEtB,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AACd,OAAO,EAAS,WAAW,EAAE,cAAc,EAAQ,SAAS,EAA+B,MAAM,IAAI,CAAA;AAWrG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD;;GAEG;AACH,OAAO,8FAA8F,CAAA;AACrG,OAAO,2GAA2G,CAAA;AA4BlH,eAAO,MAAM,qBAAqB,iCAAkC,CAAA;AACpE,KAAK,eAAe,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7D,KAAK,iBAAiB,GAAG;IACvB,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;CAC5C,CAAA;AAID,eAAO,MAAM,gBAAgB,yBAM5B,CAAA;AA6CD,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,iBAAiB,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAA;AA+PhD,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,GACvD,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAe9B,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,GACvD,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAe9B,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC9B,eAAe,CAAC,EAAE,eAAe,CAAA;CAClC,GAAG,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,GACvD,SAAS,CAAC,iBAAiB,CAAC,CAAA;AA6J9B,KAAK,YAAY,GAAG;IAClB,OAAO,CAAC,EAAE,eAAe,CAAA;CAC1B,GAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GACxC,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAE7B,iBAAS,WAAW,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,OAAoB,EAAE,GAAG,KAAK,EAAC,EAAE,YAAY,2CAgEvF;AAED,KAAK,iBAAiB,GAAG;IACvB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;IACnC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;CAC1C,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,CAAA;AAE/D,iBAAS,UAAU,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAE,OAAmB,EAAE,IAAc,EAAE,GAAG,IAAI,EAAC,EAAE,iBAAiB,2CAcpG;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM;8EA7SgE,gBAAgB;iFAmBb,mBAAmB;;;;;;;;;;;;;CAiSvG,CAAA"}

package/esm/SubNav/SubNav.js

@@ -95,7 +95,7 @@ var P = y(_(({ id: o, children: s, className: f, "data-testid": g, fullWidth: _,
 			return !1;
 		}));
 	}, [W]);
-	let { heading: J, subheading: Y, links: X, action: ne } = W.reduce((e, t) => {
+	let { heading: J, subheading: Y, links: ne, action: re } = W.reduce((e, t) => {
 		if (v(t)) if (t.type === F) e.heading = t;
 		else if (t.type === I) e.subheading = t;
 		else if (t.type === R) {
@@ -111,10 +111,10 @@ var P = y(_(({ id: o, children: s, className: f, "data-testid": g, fullWidth: _,
 		subheading: void 0,
 		links: [],
 		action: void 0
-	}), re = q ? h.toArray(q.props.children) : [], Z = re[0], Q = re[1], ie = v(Q) && Q.type === z && Q.props.variant === "anchor" ? Q : null, $ = v(Y) && Y.type === I && !!Y.props["aria-current"], ae = C(() => /* @__PURE__ */ E("div", {
+	}), ie = q ? h.toArray(q.props.children) : [], X = ie[0], Z = ie[1], ae = v(Z) && Z.type === z && Z.props.variant === "anchor" ? Z : null, Q = v(Y) && Y.type === I && !!Y.props["aria-current"], $ = Y ? X : null, oe = C(() => /* @__PURE__ */ E("div", {
 		className: e(p["SubNav__overlay-toggle"], L && p["SubNav__overlay-toggle--open"]),
 		children: /* @__PURE__ */ E("span", {
-			className: e(p["SubNav__overlay-toggle-content"], !Z && p["SubNav__overlay-toggle-content--end"]),
+			className: e(p["SubNav__overlay-toggle-content"], !$ && p["SubNav__overlay-toggle-content--end"]),
 			children: /* @__PURE__ */ D("button", {
 				ref: P,
 				className: p["SubNav__overlay-toggle-label"],
@@ -122,11 +122,11 @@ var P = y(_(({ id: o, children: s, className: f, "data-testid": g, fullWidth: _,
 				onClick: L ? G : K,
 				"aria-expanded": L ? "true" : "false",
 				"aria-controls": H,
-				"aria-label": Z ? `Navigation menu. Current page: ${Z}` : "Navigation menu",
-				children: [Z && /* @__PURE__ */ E(r, {
+				"aria-label": X ? `Navigation menu. Current page: ${X}` : "Navigation menu",
+				children: [$ && /* @__PURE__ */ E(r, {
 					as: "span",
 					size: "100",
-					children: Z
+					children: $
 				}), E(L ? a : i, {
 					className: p["SubNav__overlay-toggle-icon"],
 					size: 13
@@ -134,15 +134,16 @@ var P = y(_(({ id: o, children: s, className: f, "data-testid": g, fullWidth: _,
 			})
 		})
 	}), [
-		Z,
+		X,
 		G,
 		K,
 		H,
-		L
+		L,
+		$
 	]);
 	return /* @__PURE__ */ E("div", {
 		ref: O,
-		className: e(p.SubNav__container, Y && p["SubNav--has-sub-heading"], Y && $ && p["SubNav--subHeadingActive"], ee && p["SubNav__container--with-anchor-nav"]),
+		className: e(p.SubNav__container, Y && p["SubNav--has-sub-heading"], Y && Q && p["SubNav--subHeadingActive"], ee && p["SubNav__container--with-anchor-nav"]),
 		children: /* @__PURE__ */ E(N, { children: /* @__PURE__ */ E("nav", {
 			ref: j,
 			id: o,
@@ -160,22 +161,22 @@ var P = y(_(({ id: o, children: s, className: f, "data-testid": g, fullWidth: _,
 								children: J
 							}),
 							Y && /* @__PURE__ */ E("div", {
-								className: e(p["SubNav__heading-container"], p["SubNav__subheading-container"], $ && p["SubNav__subheading-container-active"]),
+								className: e(p["SubNav__heading-container"], p["SubNav__subheading-container"], Q && p["SubNav__subheading-container-active"]),
 								children: Y
 							}),
-							!U && (!Y || $) && ae,
-							ie && ie
+							!U && (!Y || Q) && oe,
+							ae && ae
 						]
 					}),
-					!U && Y && !$ && ae,
-					X.length > 0 && /* @__PURE__ */ D("ul", {
+					!U && Y && !Q && oe,
+					ne.length > 0 && /* @__PURE__ */ D("ul", {
 						ref: M,
 						id: H,
 						className: e(p["SubNav__links-overlay"], L && p["SubNav__links-overlay--open"]),
 						"data-testid": k.overlay,
-						children: [X, ne && /* @__PURE__ */ E("li", {
+						children: [ne, re && /* @__PURE__ */ E("li", {
 							className: p["SubNav__action-container"],
-							children: ne
+							children: re
 						})]
 					})
 				]