@primer/react-brand 0.71.0 → 0.71.1-rc.13d73825

package/esm/Pagination/Pagination.js

@@ -7,59 +7,72 @@ 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 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 = 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, {
+var d = {
+	prev: "Previous",
+	next: "Next",
+	prevAriaLabel: "Previous Page",
+	nextAriaLabel: "Next Page"
+}, f = s(({ id: t, className: n, pageCount: s, currentPage: u, onPageChange: f, hrefBuilder: h = m, pageAttributesBuilder: g, marginPageCount: _ = 1, showPages: v = !0, surroundingPageCount: y = 2, labels: b, "aria-label": x, "data-testid": S, ...C }) => {
+	let { width: w } = r();
+	w && w < 768 && (_ = 1, y = 0);
+	let T = b?.prev ?? d.prev, E = b?.next ?? d.next, D = b?.prevAriaLabel ?? d.prevAriaLabel, O = b?.nextAriaLabel ?? d.nextAriaLabel, k = o.useRef(null), A = c((e) => (t) => {
+		f && f(t, e);
+	}, [f]), j = o.useMemo(() => i(s, u, v, _, y).map((e) => /* @__PURE__ */ l(p, {
 		page: e,
-		hrefBuilder: m,
-		pageAttributesBuilder: h,
-		onClick: w(e.num)
+		hrefBuilder: h,
+		pageAttributesBuilder: g,
+		prevLabel: T,
+		nextLabel: E,
+		prevAriaLabel: D,
+		nextAriaLabel: O,
+		onClick: A(e.num)
 	}, `${e.type}-${e.num}`)), [
 		s,
 		u,
-		_,
-		g,
 		v,
-		m,
+		_,
+		y,
 		h,
-		w
+		g,
+		T,
+		E,
+		D,
+		O,
+		A
 	]);
 	return /* @__PURE__ */ l("nav", {
-		ref: C,
+		ref: k,
 		id: t,
 		className: e(a.Pagination, n),
-		"data-testid": b,
-		"aria-label": y || "Pagination",
-		...x,
+		"data-testid": S,
+		"aria-label": x || "Pagination",
+		...C,
 		children: /* @__PURE__ */ l("div", {
 			className: e(a.Pagination__inner),
-			children: T
+			children: j
 		})
 	});
-}), f = ({ page: r, hrefBuilder: i, pageAttributesBuilder: s, onClick: c }) => {
-	let [d, f] = o.useState(!1), p = {
+}), p = ({ page: r, hrefBuilder: i, pageAttributesBuilder: s, prevLabel: c, nextLabel: d, prevAriaLabel: f, nextAriaLabel: p, onClick: m }) => {
+	let [h, g] = o.useState(!1), _ = {
 		role: "button",
 		size: "small",
 		variant: "subtle",
-		onClick: r.disabled ? void 0 : c
-	}, { className: m, ...h } = s?.(r.num, r) ?? {};
+		onClick: r.disabled ? void 0 : m
+	}, { className: v, ...y } = s?.(r.num, r) ?? {};
 	switch (r.type) {
 		case "PREV": return /* @__PURE__ */ l(n, {
-			...p,
+			..._,
 			as: "a",
 			rel: "prev",
 			href: r.disabled ? void 0 : i(r.num),
 			"aria-disabled": r.disabled || void 0,
-			"aria-label": "Previous Page",
-			...h,
-			className: e(a.Pagination__controlItem, m),
-			onMouseEnter: () => f(!0),
-			onMouseLeave: () => f(!1),
-			onFocus: () => f(!0),
-			onBlur: () => f(!1),
+			"aria-label": f,
+			...y,
+			className: e(a.Pagination__controlItem, v),
+			onMouseEnter: () => g(!0),
+			onMouseLeave: () => g(!1),
+			onFocus: () => g(!0),
+			onBlur: () => g(!1),
 			children: /* @__PURE__ */ u("span", {
 				className: a.Pagination__controlContent,
 				children: [/* @__PURE__ */ l("span", {
@@ -67,71 +80,71 @@ var d = s(({ id: t, className: n, pageCount: s, currentPage: u, onPageChange: d,
 					children: /* @__PURE__ */ l(t, {
 						hidden: !0,
 						reverse: !0,
-						expanded: !r.disabled && d,
+						expanded: !r.disabled && h,
 						className: a.Pagination__controlArrow
 					})
 				}), /* @__PURE__ */ l("span", {
 					className: a.Pagination__controlText,
-					children: "Previous"
+					children: c
 				})]
 			})
 		});
 		case "NEXT": return /* @__PURE__ */ l(n, {
-			...p,
+			..._,
 			as: "a",
 			rel: "next",
 			href: r.disabled ? void 0 : i(r.num),
 			"aria-disabled": r.disabled || void 0,
-			"aria-label": "Next Page",
-			...h,
-			className: e(a.Pagination__controlItem, m),
-			onMouseEnter: () => f(!0),
-			onMouseLeave: () => f(!1),
-			onFocus: () => f(!0),
-			onBlur: () => f(!1),
+			"aria-label": p,
+			...y,
+			className: e(a.Pagination__controlItem, v),
+			onMouseEnter: () => g(!0),
+			onMouseLeave: () => g(!1),
+			onFocus: () => g(!0),
+			onBlur: () => g(!1),
 			children: /* @__PURE__ */ u("span", {
 				className: a.Pagination__controlContent,
 				children: [/* @__PURE__ */ l("span", {
 					className: a.Pagination__controlText,
-					children: "Next"
+					children: d
 				}), /* @__PURE__ */ l("span", {
 					className: e(a.Pagination__controlArrowWrapper, a["Pagination__controlArrowWrapper--next"]),
 					children: /* @__PURE__ */ l(t, {
 						hidden: !0,
-						expanded: !r.disabled && d,
+						expanded: !r.disabled && h,
 						className: a.Pagination__controlArrow
 					})
 				})]
 			})
 		});
 		case "NUM": return /* @__PURE__ */ l(n, {
-			...p,
+			..._,
 			as: "a",
 			variant: r.selected ? "primary" : "subtle",
-			className: e(a.Pagination__pageItem, m),
+			className: e(a.Pagination__pageItem, v),
 			href: i(r.num),
 			"aria-label": `Page ${r.num}${r.precedesBreak ? "..." : ""}`,
 			"aria-current": r.selected ? "page" : void 0,
-			...h,
+			...y,
 			children: r.num
 		});
 		case "BREAK": return /* @__PURE__ */ l(n, {
-			...p,
+			..._,
 			as: "a",
-			className: e(a.Pagination__pageItem, m),
+			className: e(a.Pagination__pageItem, v),
 			variant: "subtle",
 			role: "presentation",
 			href: void 0,
 			onClick: void 0,
-			...h,
+			...y,
 			children: "…"
 		});
 	}
 };
-function p(e) {
+function m(e) {
 	return `#${e}`;
 }
 //#endregion
-export { d as Pagination };
+export { f 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 {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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"}
+{"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  /* Custom text labels for the pagination controls. Use for localization. */\n  labels?: {\n    prev?: string\n    next?: string\n    prevAriaLabel?: string\n    nextAriaLabel?: string\n  }\n  'data-testid'?: string\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>\n\nconst defaultPaginationLabels = {\n  prev: 'Previous',\n  next: 'Next',\n  prevAriaLabel: 'Previous Page',\n  nextAriaLabel: 'Next Page',\n}\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    labels,\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 prevLabel = labels?.prev ?? defaultPaginationLabels.prev\n    const nextLabel = labels?.next ?? defaultPaginationLabels.next\n    const prevAriaLabel = labels?.prevAriaLabel ?? defaultPaginationLabels.prevAriaLabel\n    const nextAriaLabel = labels?.nextAriaLabel ?? defaultPaginationLabels.nextAriaLabel\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            prevLabel={prevLabel}\n            nextLabel={nextLabel}\n            prevAriaLabel={prevAriaLabel}\n            nextAriaLabel={nextAriaLabel}\n            onClick={pageChange(page.num)}\n          />\n        )\n      })\n    }, [\n      pageCount,\n      currentPage,\n      showPages,\n      marginPageCount,\n      surroundingPageCount,\n      hrefBuilder,\n      pageAttributesBuilder,\n      prevLabel,\n      nextLabel,\n      prevAriaLabel,\n      nextAriaLabel,\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  prevLabel: string\n  nextLabel: string\n  prevAriaLabel: string\n  nextAriaLabel: string\n  onClick?: React.MouseEventHandler<HTMLAnchorElement>\n}\n\nconst PaginationItem = ({\n  page,\n  hrefBuilder,\n  pageAttributesBuilder,\n  prevLabel,\n  nextLabel,\n  prevAriaLabel,\n  nextAriaLabel,\n  onClick,\n}: 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={prevAriaLabel}\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}>{prevLabel}</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={nextAriaLabel}\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}>{nextLabel}</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/SectionIntroStacked/SectionIntroStacked.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SectionIntroStacked.d.ts","sourceRoot":"","sources":["../../src/SectionIntroStacked/SectionIntroStacked.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,iBAAiB,EAAiC,MAAM,OAAO,CAAA;AAG1F,OAAO,EAAO,SAAS,EAAC,MAAM,SAAS,CAAA;AACvC,OAAO,EAAU,YAAY,EAAoB,MAAM,YAAY,CAAA;AACnE,OAAO,EAAO,SAAS,EAAC,MAAM,SAAS,CAAA;AACvC,OAAO,EAAO,SAAS,EAAC,MAAM,SAAS,CAAA;AAMvC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD,eAAO,MAAM,2BAA2B,kCAAmC,CAAA;AAC3E,MAAM,MAAM,0BAA0B,GAAG,CAAC,OAAO,2BAA2B,CAAC,CAAC,MAAM,CAAC,CAAA;AAErF,MAAM,MAAM,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GACtE,SAAS,CAAC,WAAW,CAAC,GACtB,iBAAiB,GAAG;IAClB,OAAO,CAAC,EAAE,0BAA0B,CAAA;CACrC,CAAA;AAwCH,KAAK,+BAA+B,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAAG,YAAY,CAAA;AA4CnF,KAAK,mCAAmC,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,SAAS,CAAC,GAC1E,SAAS,CAAC,oBAAoB,CAAC,GAAG;IAChC,EAAE,CAAC,EAAE,GAAG,CAAA;IACR,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC9C,CAAA;AAkBH,KAAK,4BAA4B,GAAG,SAAS,GAAG,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAqB5E,KAAK,6BAA6B,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAchE,KAAK,gCAAgC,GAAG,SAAS,CAAA;AAyCjD,KAAK,uCAAuC,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,CAAC,GACvF,SAAS,CAAC,oBAAoB,CAAC,GAAG;IAChC,EAAE,CAAC,EAAE,GAAG,CAAA;IACR,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC9C,CAAA;AAmBH,MAAM,MAAM,4BAA4B,GAAG,SAAS,CAAC,aAAa,CAAC,CAAA;AAiDnE,eAAO,MAAM,mBAAmB;;;;uDA7H4B,iBAAiB,CAAC,6BAA6B,CAAC;6CA8E1D,iBAAiB,CAAC,4BAA4B,CAAC;+CAhEvC,gCAAgC;;;CAwHxF,CAAA"}
+{"version":3,"file":"SectionIntroStacked.d.ts","sourceRoot":"","sources":["../../src/SectionIntroStacked/SectionIntroStacked.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,iBAAiB,EAAiC,MAAM,OAAO,CAAA;AAG1F,OAAO,EAAO,SAAS,EAAC,MAAM,SAAS,CAAA;AACvC,OAAO,EAAU,YAAY,EAAoB,MAAM,YAAY,CAAA;AACnE,OAAO,EAAO,SAAS,EAAC,MAAM,SAAS,CAAA;AACvC,OAAO,EAAO,SAAS,EAAC,MAAM,SAAS,CAAA;AAMvC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD,eAAO,MAAM,2BAA2B,kCAAmC,CAAA;AAC3E,MAAM,MAAM,0BAA0B,GAAG,CAAC,OAAO,2BAA2B,CAAC,CAAC,MAAM,CAAC,CAAA;AAErF,MAAM,MAAM,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GACtE,SAAS,CAAC,WAAW,CAAC,GACtB,iBAAiB,GAAG;IAClB,OAAO,CAAC,EAAE,0BAA0B,CAAA;CACrC,CAAA;AAuCH,KAAK,+BAA+B,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAAG,YAAY,CAAA;AA4CnF,KAAK,mCAAmC,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,SAAS,CAAC,GAC1E,SAAS,CAAC,oBAAoB,CAAC,GAAG;IAChC,EAAE,CAAC,EAAE,GAAG,CAAA;IACR,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC9C,CAAA;AAkBH,KAAK,4BAA4B,GAAG,SAAS,GAAG,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAqB5E,KAAK,6BAA6B,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAchE,KAAK,gCAAgC,GAAG,SAAS,CAAA;AAyCjD,KAAK,uCAAuC,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,CAAC,GACvF,SAAS,CAAC,oBAAoB,CAAC,GAAG;IAChC,EAAE,CAAC,EAAE,GAAG,CAAA;IACR,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC9C,CAAA;AAmBH,MAAM,MAAM,4BAA4B,GAAG,SAAS,CAAC,aAAa,CAAC,CAAA;AAiDnE,eAAO,MAAM,mBAAmB;;;;uDA7H4B,iBAAiB,CAAC,6BAA6B,CAAC;6CA8E1D,iBAAiB,CAAC,4BAA4B,CAAC;+CAhEvC,gCAAgC;;;CAwHxF,CAAA"}

package/esm/SectionIntroStacked/SectionIntroStacked.js

@@ -23,12 +23,14 @@ var g = ["default", "gridline"], _ = d(({ animate: r, className: i, children: a,
 		children: /* @__PURE__ */ h(t, {
 			fullWidth: !0,
 			enableGutters: c !== "gridline",
+			columnGap: "none",
 			children: [/* @__PURE__ */ m(t.Column, {
 				span: { large: 6 },
+				className: l["SectionIntroStacked-content"],
 				children: y
 			}), /* @__PURE__ */ m(t.Column, {
-				span: c === "gridline" ? { large: 6 } : { large: 5 },
-				start: c === "gridline" ? { large: 7 } : { large: 8 },
+				span: { large: 6 },
+				start: { large: 7 },
 				children: v
 			})]
 		})
@@ -68,7 +70,7 @@ var g = ["default", "gridline"], _ = d(({ animate: r, className: i, children: a,
 }, C = ({ className: t, color: n = "green", ...r }) => /* @__PURE__ */ m(c, {
 	className: e(l.SectionIntroStackedItem__icon, t),
 	hasBackground: !0,
-	size: "medium",
+	size: "small",
 	color: n,
 	...r
 }), w = d(({ as: t = "h3", size: n = "subhead-large", className: r, children: a, ...o }, s) => /* @__PURE__ */ m(i, {

package/esm/SectionIntroStacked/SectionIntroStacked.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionIntroStacked.js","names":[],"sources":["../../src/SectionIntroStacked/SectionIntroStacked.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren, useMemo, type Ref, useCallback} from 'react'\nimport {clsx} from 'clsx'\nimport {Grid} from '../Grid'\nimport {Link, LinkProps} from '../Link'\nimport {Heading, HeadingProps, defaultHeadingTag} from '../Heading'\nimport {Text, TextProps} from '../Text'\nimport {Icon, IconProps} from '../Icon'\nimport {useAnimation} from '../animation'\n\nimport styles from './SectionIntroStacked.module.css'\nimport gridlineStyles from '../component-helpers/shared.module.css'\n\nimport type {BaseProps} from '../component-helpers'\n\nexport const SectionIntroStackedVariants = ['default', 'gridline'] as const\nexport type SectionIntroStackedVariant = (typeof SectionIntroStackedVariants)[number]\n\nexport type SectionIntroStackedProps = React.HTMLAttributes<HTMLElement> &\n  BaseProps<HTMLElement> &\n  PropsWithChildren & {\n    variant?: SectionIntroStackedVariant\n  }\n\nconst Root = forwardRef<HTMLElement, PropsWithChildren<SectionIntroStackedProps>>(\n  ({animate, className, children, style, variant = 'default', ...props}, ref) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const childrenArray = React.Children.toArray(children)\n\n    // extract Items and everything else into two separate arrays\n    const items = childrenArray.filter(child => React.isValidElement(child) && child.type === ItemsBase)\n\n    const otherChildren = childrenArray.filter(child => !items.includes(child))\n\n    return (\n      <header\n        ref={ref}\n        className={clsx(\n          styles.SectionIntroStacked,\n          variant === 'gridline' && styles['SectionIntroStacked--variant-gridline'],\n          variant === 'gridline' && gridlineStyles.gridline,\n          animationClasses,\n          className,\n        )}\n        {...props}\n        style={{...animationInlineStyles, ...style}}\n      >\n        <Grid fullWidth enableGutters={variant !== 'gridline'}>\n          <Grid.Column span={{large: 6}}>{otherChildren}</Grid.Column>\n          <Grid.Column\n            span={variant === 'gridline' ? {large: 6} : {large: 5}}\n            start={variant === 'gridline' ? {large: 7} : {large: 8}}\n          >\n            {items}\n          </Grid.Column>\n        </Grid>\n      </header>\n    )\n  },\n)\n\ntype SectionIntroStackedHeadingProps = BaseProps<HTMLHeadingElement> & HeadingProps\n\nconst defaultHeadingSize = '3'\n\nconst _Heading = forwardRef(\n  (\n    {\n      as = defaultHeadingTag,\n      size = defaultHeadingSize,\n      className,\n      children,\n      ...props\n    }: PropsWithChildren<SectionIntroStackedHeadingProps>,\n    ref: Ref<HTMLHeadingElement>,\n  ) => {\n    const childrenArray = useMemo(() => React.Children.toArray(children), [children])\n\n    const getConditionalVariant = useCallback(() => {\n      if (childrenArray.some(child => React.isValidElement(child) && (child.type === 'b' || child.type === 'em'))) {\n        return 'muted'\n      }\n      return 'default'\n    }, [childrenArray])\n\n    const defaultColor = childrenArray.length === 1 ? 'default' : getConditionalVariant()\n\n    return (\n      <Heading\n        ref={ref}\n        className={clsx(\n          styles[`SectionIntroStacked-heading`],\n          defaultColor === 'muted' && styles[`SectionIntroStacked-heading--muted`],\n          className,\n        )}\n        size={size}\n        as={as}\n        {...props}\n      >\n        {children}\n      </Heading>\n    )\n  },\n)\n\ntype SectionIntroStackedDescriptionProps = Omit<TextProps, 'as' | 'variant'> &\n  BaseProps<HTMLParagraphElement> & {\n    as?: 'p'\n    children: React.ReactNode | React.ReactNode[]\n  }\n\nconst _Description = forwardRef(\n  ({className, children, ...props}: SectionIntroStackedDescriptionProps, ref: Ref<HTMLParagraphElement>) => {\n    return (\n      <Text\n        as=\"p\"\n        className={clsx(styles['SectionIntroStacked-description'], className)}\n        ref={ref}\n        variant=\"muted\"\n        {...props}\n      >\n        {children}\n      </Text>\n    )\n  },\n)\n\ntype SectionIntroStackedLinkProps = LinkProps & BaseProps<HTMLAnchorElement>\n\nconst _Link = forwardRef(\n  (\n    {className, children, variant = 'accent', size = 'medium', ...props}: SectionIntroStackedLinkProps,\n    ref: Ref<HTMLAnchorElement>,\n  ) => {\n    return (\n      <Link\n        ref={ref}\n        className={clsx(styles['SectionIntroStacked-link'], className)}\n        size={size}\n        variant={variant}\n        {...props}\n      >\n        {children}\n      </Link>\n    )\n  },\n)\n\ntype SectionIntroStackedItemsProps = BaseProps<HTMLUListElement>\n\nconst ItemsBase = ({animate, className, children, ...rest}: PropsWithChildren<SectionIntroStackedItemsProps>) => {\n  const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n  const timelineClassName = clsx(animationClasses, styles['SectionIntroStacked-items'], className)\n\n  return (\n    <ul className={timelineClassName} style={{...animationInlineStyles}} {...rest}>\n      {children}\n    </ul>\n  )\n}\n\ntype SectionIntroStackedItemIconProps = IconProps\n\nconst ItemIcon = ({className, color = 'green', ...props}: SectionIntroStackedItemIconProps) => {\n  return (\n    <Icon\n      className={clsx(styles['SectionIntroStackedItem__icon'], className)}\n      hasBackground\n      size=\"medium\"\n      color={color}\n      {...props}\n    />\n  )\n}\n\ntype SectionIntroStackedItemHeadingProps = HeadingProps\n\nconst ItemHeading = forwardRef(\n  (\n    {\n      as = 'h3',\n      size = 'subhead-large',\n      className,\n      children,\n      ...props\n    }: PropsWithChildren<SectionIntroStackedItemHeadingProps>,\n    ref: Ref<HTMLHeadingElement>,\n  ) => {\n    return (\n      <Heading\n        ref={ref}\n        as={as}\n        size={size}\n        className={clsx(styles['SectionIntroStackedItem__heading'], className)}\n        {...props}\n      >\n        {children}\n      </Heading>\n    )\n  },\n)\n\ntype SectionIntroStackedItemDescriptionProps = Omit<TextProps, 'as' | 'variant' | 'size'> &\n  BaseProps<HTMLParagraphElement> & {\n    as?: 'p'\n    children: React.ReactNode | React.ReactNode[]\n  }\n\nconst ItemDescription = forwardRef(\n  ({className, children, ...props}: SectionIntroStackedItemDescriptionProps, ref: Ref<HTMLParagraphElement>) => {\n    return (\n      <Text\n        as=\"p\"\n        variant=\"muted\"\n        size=\"200\"\n        className={clsx(styles['SectionIntroStackedItem__description'], className)}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </Text>\n    )\n  },\n)\n\nexport type SectionIntroStackedItemProps = BaseProps<HTMLLIElement>\n\nconst ItemBase = ({className, children, ...rest}: PropsWithChildren<SectionIntroStackedItemProps>) => {\n  const itemClassName = clsx(styles['SectionIntroStackedItem-item'], className)\n  const childrenArray = useMemo(() => React.Children.toArray(children), [children])\n\n  const hasSubComponents = childrenArray.some(\n    child =>\n      React.isValidElement(child) &&\n      (child.type === ItemIcon || child.type === ItemHeading || child.type === ItemDescription),\n  )\n\n  if (hasSubComponents) {\n    const iconChild = childrenArray.find(child => React.isValidElement(child) && child.type === ItemIcon)\n\n    const contentChildren = childrenArray.filter(child => !(React.isValidElement(child) && child.type === ItemIcon))\n\n    return (\n      <li className={clsx(itemClassName, !!iconChild && styles['SectionIntroStackedItem-item--with-icon'])} {...rest}>\n        {iconChild}\n        <div className={styles['SectionIntroStackedItem__content']}>{contentChildren}</div>\n      </li>\n    )\n  }\n\n  const getConditionalVariant = () => {\n    if (childrenArray.some(child => React.isValidElement(child) && (child.type === 'b' || child.type === 'em'))) {\n      return 'muted'\n    }\n    return 'default'\n  }\n\n  const defaultColor = childrenArray.length === 1 ? 'default' : getConditionalVariant()\n  return (\n    <li className={itemClassName} {...rest}>\n      <Text\n        as=\"span\"\n        className={clsx(\n          styles['SectionIntroStackedItem__item-text'],\n          defaultColor === 'muted' && styles[`SectionIntroStackedItem__item-text--muted`],\n        )}\n        size=\"350\"\n      >\n        {children}\n      </Text>\n    </li>\n  )\n}\n\nexport const SectionIntroStacked = Object.assign(Root, {\n  Heading: _Heading,\n  Description: _Description,\n  Link: _Link,\n  Items: ItemsBase,\n  Item: ItemBase,\n  ItemIcon,\n  ItemHeading,\n  ItemDescription,\n})\n"],"mappings":";;;;;;;;;;;;AAcA,IAAa,IAA8B,CAAC,WAAW,WAAW,EAS5D,IAAO,GACV,EAAC,YAAS,cAAW,aAAU,UAAO,aAAU,WAAW,GAAG,KAAQ,MAAQ;CAC7E,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAgB,EAAM,SAAS,QAAQ,EAAS,EAGhD,IAAQ,EAAc,QAAO,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAU,EAE9F,IAAgB,EAAc,QAAO,MAAS,CAAC,EAAM,SAAS,EAAM,CAAC;AAE3E,QACE,kBAAC,UAAD;EACO;EACL,WAAW,EACT,EAAO,qBACP,MAAY,cAAc,EAAO,0CACjC,MAAY,cAAc,EAAe,UACzC,GACA,EACD;EACD,GAAI;EACJ,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;YAE3C,kBAAC,GAAD;GAAM,WAAA;GAAU,eAAe,MAAY;aAA3C,CACE,kBAAC,EAAK,QAAN;IAAa,MAAM,EAAC,OAAO,GAAE;cAAG;IAA4B,CAAA,EAC5D,kBAAC,EAAK,QAAN;IACE,MAAM,MAAY,aAAa,EAAC,OAAO,GAAE,GAAG,EAAC,OAAO,GAAE;IACtD,OAAO,MAAY,aAAa,EAAC,OAAO,GAAE,GAAG,EAAC,OAAO,GAAE;cAEtD;IACW,CAAA,CACT;;EACA,CAAA;EAGd,EAIK,IAAqB,KAErB,IAAW,GAEb,EACE,QAAK,GACL,UAAO,GACP,cACA,aACA,GAAG,KAEL,MACG;CACH,IAAM,IAAgB,QAAc,EAAM,SAAS,QAAQ,EAAS,EAAE,CAAC,EAAS,CAAC,EAE3E,IAAwB,QACxB,EAAc,MAAK,MAAS,EAAM,eAAe,EAAM,KAAK,EAAM,SAAS,OAAO,EAAM,SAAS,MAAM,GAClG,UAEF,WACN,CAAC,EAAc,CAAC,EAEb,IAAe,EAAc,WAAW,IAAI,YAAY,GAAuB;AAErF,QACE,kBAAC,GAAD;EACO;EACL,WAAW,EACT,EAAO,gCACP,MAAiB,WAAW,EAAO,uCACnC,EACD;EACK;EACF;EACJ,GAAI;EAEH;EACO,CAAA;EAGf,EAQK,IAAe,GAClB,EAAC,cAAW,aAAU,GAAG,KAA6C,MAEnE,kBAAC,GAAD;CACE,IAAG;CACH,WAAW,EAAK,EAAO,oCAAoC,EAAU;CAChE;CACL,SAAQ;CACR,GAAI;CAEH;CACI,CAAA,CAGZ,EAIK,IAAQ,GAEV,EAAC,cAAW,aAAU,aAAU,UAAU,UAAO,UAAU,GAAG,KAC9D,MAGE,kBAAC,GAAD;CACO;CACL,WAAW,EAAK,EAAO,6BAA6B,EAAU;CACxD;CACG;CACT,GAAI;CAEH;CACI,CAAA,CAGZ,EAIK,KAAa,EAAC,YAAS,cAAW,aAAU,GAAG,QAA4D;CAC/G,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ;AAIxF,QACE,kBAAC,MAAD;EAAI,WAHoB,EAAK,GAAkB,EAAO,8BAA8B,EAGrE;EAAmB,OAAO,EAAC,GAAG,GAAsB;EAAE,GAAI;EACtE;EACE,CAAA;GAMH,KAAY,EAAC,cAAW,WAAQ,SAAS,GAAG,QAE9C,kBAAC,GAAD;CACE,WAAW,EAAK,EAAO,+BAAkC,EAAU;CACnE,eAAA;CACA,MAAK;CACE;CACP,GAAI;CACJ,CAAA,EAMA,IAAc,GAEhB,EACE,QAAK,MACL,UAAO,iBACP,cACA,aACA,GAAG,KAEL,MAGE,kBAAC,GAAD;CACO;CACD;CACE;CACN,WAAW,EAAK,EAAO,kCAAqC,EAAU;CACtE,GAAI;CAEH;CACO,CAAA,CAGf,EAQK,IAAkB,GACrB,EAAC,cAAW,aAAU,GAAG,KAAiD,MAEvE,kBAAC,GAAD;CACE,IAAG;CACH,SAAQ;CACR,MAAK;CACL,WAAW,EAAK,EAAO,sCAAyC,EAAU;CACrE;CACL,GAAI;CAEH;CACI,CAAA,CAGZ,EAmDY,IAAsB,OAAO,OAAO,GAAM;CACrD,SAAS;CACT,aAAa;CACb,MAAM;CACN,OAAO;CACP,OApDgB,EAAC,cAAW,aAAU,GAAG,QAA2D;EACpG,IAAM,IAAgB,EAAK,EAAO,iCAAiC,EAAU,EACvE,IAAgB,QAAc,EAAM,SAAS,QAAQ,EAAS,EAAE,CAAC,EAAS,CAAC;AAQjF,MANyB,EAAc,MACrC,MACE,EAAM,eAAe,EAAM,KAC1B,EAAM,SAAS,KAAY,EAAM,SAAS,KAAe,EAAM,SAAS,GAGzE,EAAkB;GACpB,IAAM,IAAY,EAAc,MAAK,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAS,EAE/F,IAAkB,EAAc,QAAO,MAAS,EAAE,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,GAAU;AAEhH,UACE,kBAAC,MAAD;IAAI,WAAW,EAAK,GAAe,CAAC,CAAC,KAAa,EAAO,2CAA2C;IAAE,GAAI;cAA1G,CACG,GACD,kBAAC,OAAD;KAAK,WAAW,EAAO;eAAsC;KAAsB,CAAA,CAChF;;;EAWT,IAAM,IAAe,EAAc,WAAW,IAAI,YAN5C,EAAc,MAAK,MAAS,EAAM,eAAe,EAAM,KAAK,EAAM,SAAS,OAAO,EAAM,SAAS,MAAM,GAClG,UAEF;AAIT,SACE,kBAAC,MAAD;GAAI,WAAW;GAAe,GAAI;aAChC,kBAAC,GAAD;IACE,IAAG;IACH,WAAW,EACT,EAAO,uCACP,MAAiB,WAAW,EAAO,6CACpC;IACD,MAAK;IAEJ;IACI,CAAA;GACJ,CAAA;;CAUP;CACA;CACA;CACD,CAAC"}
+{"version":3,"file":"SectionIntroStacked.js","names":[],"sources":["../../src/SectionIntroStacked/SectionIntroStacked.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren, useMemo, type Ref, useCallback} from 'react'\nimport {clsx} from 'clsx'\nimport {Grid} from '../Grid'\nimport {Link, LinkProps} from '../Link'\nimport {Heading, HeadingProps, defaultHeadingTag} from '../Heading'\nimport {Text, TextProps} from '../Text'\nimport {Icon, IconProps} from '../Icon'\nimport {useAnimation} from '../animation'\n\nimport styles from './SectionIntroStacked.module.css'\nimport gridlineStyles from '../component-helpers/shared.module.css'\n\nimport type {BaseProps} from '../component-helpers'\n\nexport const SectionIntroStackedVariants = ['default', 'gridline'] as const\nexport type SectionIntroStackedVariant = (typeof SectionIntroStackedVariants)[number]\n\nexport type SectionIntroStackedProps = React.HTMLAttributes<HTMLElement> &\n  BaseProps<HTMLElement> &\n  PropsWithChildren & {\n    variant?: SectionIntroStackedVariant\n  }\n\nconst Root = forwardRef<HTMLElement, PropsWithChildren<SectionIntroStackedProps>>(\n  ({animate, className, children, style, variant = 'default', ...props}, ref) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const childrenArray = React.Children.toArray(children)\n\n    // extract Items and everything else into two separate arrays\n    const items = childrenArray.filter(child => React.isValidElement(child) && child.type === ItemsBase)\n\n    const otherChildren = childrenArray.filter(child => !items.includes(child))\n\n    return (\n      <header\n        ref={ref}\n        className={clsx(\n          styles.SectionIntroStacked,\n          variant === 'gridline' && styles['SectionIntroStacked--variant-gridline'],\n          variant === 'gridline' && gridlineStyles.gridline,\n          animationClasses,\n          className,\n        )}\n        {...props}\n        style={{...animationInlineStyles, ...style}}\n      >\n        <Grid fullWidth enableGutters={variant !== 'gridline'} columnGap=\"none\">\n          <Grid.Column span={{large: 6}} className={styles['SectionIntroStacked-content']}>\n            {otherChildren}\n          </Grid.Column>\n          <Grid.Column span={{large: 6}} start={{large: 7}}>\n            {items}\n          </Grid.Column>\n        </Grid>\n      </header>\n    )\n  },\n)\n\ntype SectionIntroStackedHeadingProps = BaseProps<HTMLHeadingElement> & HeadingProps\n\nconst defaultHeadingSize = '3'\n\nconst _Heading = forwardRef(\n  (\n    {\n      as = defaultHeadingTag,\n      size = defaultHeadingSize,\n      className,\n      children,\n      ...props\n    }: PropsWithChildren<SectionIntroStackedHeadingProps>,\n    ref: Ref<HTMLHeadingElement>,\n  ) => {\n    const childrenArray = useMemo(() => React.Children.toArray(children), [children])\n\n    const getConditionalVariant = useCallback(() => {\n      if (childrenArray.some(child => React.isValidElement(child) && (child.type === 'b' || child.type === 'em'))) {\n        return 'muted'\n      }\n      return 'default'\n    }, [childrenArray])\n\n    const defaultColor = childrenArray.length === 1 ? 'default' : getConditionalVariant()\n\n    return (\n      <Heading\n        ref={ref}\n        className={clsx(\n          styles[`SectionIntroStacked-heading`],\n          defaultColor === 'muted' && styles[`SectionIntroStacked-heading--muted`],\n          className,\n        )}\n        size={size}\n        as={as}\n        {...props}\n      >\n        {children}\n      </Heading>\n    )\n  },\n)\n\ntype SectionIntroStackedDescriptionProps = Omit<TextProps, 'as' | 'variant'> &\n  BaseProps<HTMLParagraphElement> & {\n    as?: 'p'\n    children: React.ReactNode | React.ReactNode[]\n  }\n\nconst _Description = forwardRef(\n  ({className, children, ...props}: SectionIntroStackedDescriptionProps, ref: Ref<HTMLParagraphElement>) => {\n    return (\n      <Text\n        as=\"p\"\n        className={clsx(styles['SectionIntroStacked-description'], className)}\n        ref={ref}\n        variant=\"muted\"\n        {...props}\n      >\n        {children}\n      </Text>\n    )\n  },\n)\n\ntype SectionIntroStackedLinkProps = LinkProps & BaseProps<HTMLAnchorElement>\n\nconst _Link = forwardRef(\n  (\n    {className, children, variant = 'accent', size = 'medium', ...props}: SectionIntroStackedLinkProps,\n    ref: Ref<HTMLAnchorElement>,\n  ) => {\n    return (\n      <Link\n        ref={ref}\n        className={clsx(styles['SectionIntroStacked-link'], className)}\n        size={size}\n        variant={variant}\n        {...props}\n      >\n        {children}\n      </Link>\n    )\n  },\n)\n\ntype SectionIntroStackedItemsProps = BaseProps<HTMLUListElement>\n\nconst ItemsBase = ({animate, className, children, ...rest}: PropsWithChildren<SectionIntroStackedItemsProps>) => {\n  const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n  const timelineClassName = clsx(animationClasses, styles['SectionIntroStacked-items'], className)\n\n  return (\n    <ul className={timelineClassName} style={{...animationInlineStyles}} {...rest}>\n      {children}\n    </ul>\n  )\n}\n\ntype SectionIntroStackedItemIconProps = IconProps\n\nconst ItemIcon = ({className, color = 'green', ...props}: SectionIntroStackedItemIconProps) => {\n  return (\n    <Icon\n      className={clsx(styles['SectionIntroStackedItem__icon'], className)}\n      hasBackground\n      size=\"small\"\n      color={color}\n      {...props}\n    />\n  )\n}\n\ntype SectionIntroStackedItemHeadingProps = HeadingProps\n\nconst ItemHeading = forwardRef(\n  (\n    {\n      as = 'h3',\n      size = 'subhead-large',\n      className,\n      children,\n      ...props\n    }: PropsWithChildren<SectionIntroStackedItemHeadingProps>,\n    ref: Ref<HTMLHeadingElement>,\n  ) => {\n    return (\n      <Heading\n        ref={ref}\n        as={as}\n        size={size}\n        className={clsx(styles['SectionIntroStackedItem__heading'], className)}\n        {...props}\n      >\n        {children}\n      </Heading>\n    )\n  },\n)\n\ntype SectionIntroStackedItemDescriptionProps = Omit<TextProps, 'as' | 'variant' | 'size'> &\n  BaseProps<HTMLParagraphElement> & {\n    as?: 'p'\n    children: React.ReactNode | React.ReactNode[]\n  }\n\nconst ItemDescription = forwardRef(\n  ({className, children, ...props}: SectionIntroStackedItemDescriptionProps, ref: Ref<HTMLParagraphElement>) => {\n    return (\n      <Text\n        as=\"p\"\n        variant=\"muted\"\n        size=\"200\"\n        className={clsx(styles['SectionIntroStackedItem__description'], className)}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </Text>\n    )\n  },\n)\n\nexport type SectionIntroStackedItemProps = BaseProps<HTMLLIElement>\n\nconst ItemBase = ({className, children, ...rest}: PropsWithChildren<SectionIntroStackedItemProps>) => {\n  const itemClassName = clsx(styles['SectionIntroStackedItem-item'], className)\n  const childrenArray = useMemo(() => React.Children.toArray(children), [children])\n\n  const hasSubComponents = childrenArray.some(\n    child =>\n      React.isValidElement(child) &&\n      (child.type === ItemIcon || child.type === ItemHeading || child.type === ItemDescription),\n  )\n\n  if (hasSubComponents) {\n    const iconChild = childrenArray.find(child => React.isValidElement(child) && child.type === ItemIcon)\n\n    const contentChildren = childrenArray.filter(child => !(React.isValidElement(child) && child.type === ItemIcon))\n\n    return (\n      <li className={clsx(itemClassName, !!iconChild && styles['SectionIntroStackedItem-item--with-icon'])} {...rest}>\n        {iconChild}\n        <div className={styles['SectionIntroStackedItem__content']}>{contentChildren}</div>\n      </li>\n    )\n  }\n\n  const getConditionalVariant = () => {\n    if (childrenArray.some(child => React.isValidElement(child) && (child.type === 'b' || child.type === 'em'))) {\n      return 'muted'\n    }\n    return 'default'\n  }\n\n  const defaultColor = childrenArray.length === 1 ? 'default' : getConditionalVariant()\n  return (\n    <li className={itemClassName} {...rest}>\n      <Text\n        as=\"span\"\n        className={clsx(\n          styles['SectionIntroStackedItem__item-text'],\n          defaultColor === 'muted' && styles[`SectionIntroStackedItem__item-text--muted`],\n        )}\n        size=\"350\"\n      >\n        {children}\n      </Text>\n    </li>\n  )\n}\n\nexport const SectionIntroStacked = Object.assign(Root, {\n  Heading: _Heading,\n  Description: _Description,\n  Link: _Link,\n  Items: ItemsBase,\n  Item: ItemBase,\n  ItemIcon,\n  ItemHeading,\n  ItemDescription,\n})\n"],"mappings":"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"}

package/esm/SectionIntroStacked/SectionIntroStacked.module-w4PEL6ek.css

@@ -0,0 +1 @@
+.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked___UM_8Y{--brand-Grid-spacing-row:var(--base-size-64)}@media screen and (width>=48rem) and (width<=63.24rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked___UM_8Y{max-width:618px;margin-inline:auto}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked___UM_8Y.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi{padding-inline:var(--base-size-32);padding-block:calc(var(--base-size-64) - var(--base-size-4));--SectionIntroStacked-item-divider-overflow-start:var(--base-size-32);--SectionIntroStacked-item-divider-overflow-end:var(--base-size-32)}}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi{padding-inline:var(--base-size-24);padding-block:var(--base-size-32);--SectionIntroStacked-item-divider-overflow-start:var(--base-size-24);--SectionIntroStacked-item-divider-overflow-end:var(--base-size-24);position:relative}@media screen and (width>=63.25rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi{padding-inline:var(--base-size-64);padding-block:var(--base-size-64);--SectionIntroStacked-item-divider-overflow-start:0px;--SectionIntroStacked-item-divider-overflow-end:var(--base-size-64)}}@media screen and (width>=80rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading--muted___MNSqH,.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__item-text--muted___PAxL5{color:var(--brand-color-text-muted)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading--muted___MNSqH em,.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading--muted___MNSqH b,.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__item-text___sVBGJ em,.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__item-text___sVBGJ b{color:var(--brand-color-text-default);font-style:normal;font-weight:var(--base-text-weight-normal)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--full-width___wxr_6 .Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading___zOCel{max-width:none}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-description____vGqZ{max-width:50ch;margin-block-start:var(--base-size-16)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-link___Vna3J{margin-block-start:var(--base-size-16)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-items___rRGdi{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}@media screen and (width<=63.24rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading___zOCel{font-size:var(--brand-text-size-600)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-items___rRGdi{overflow:hidden}}@media screen and (width>=63.25rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-items___rRGdi{top:var(--base-size-2);position:relative}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-items___rRGdi{border-inline-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);margin-block:calc(-1 * var(--base-size-64));padding-block:calc(var(--base-size-64) - var(--base-size-32));position:static;top:auto}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-content___Sh_hs{padding-inline-end:var(--base-size-80)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws{padding-inline-start:var(--base-size-64)}}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws{border-block-end:none;position:relative}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws:first-child{padding-block-start:var(--base-size-40)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws:last-child{padding-block-end:var(--base-size-40)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi .Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws:not(:last-child):after{content:"";bottom:0;left:calc(-1 * var(--SectionIntroStacked-item-divider-overflow-start));right:calc(-1 * var(--SectionIntroStacked-item-divider-overflow-end));border-bottom:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);position:absolute}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws{padding-block:var(--base-size-40);border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws:last-child{border-block-end:none;padding-block-end:0}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws:first-child{padding-block-start:0}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item--with-icon___XYMFo{align-items:flex-start;gap:var(--base-size-24);flex-direction:column;display:flex}@media screen and (width>=48rem){.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item--with-icon___XYMFo{gap:var(--base-size-48);flex-direction:row}}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__content___kUlfY{gap:var(--base-size-12);flex-direction:column;flex:1;min-width:0;display:flex}.Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__icon___PkmCx{border-radius:var(--base-size-12);flex-shrink:0}

package/esm/SectionIntroStacked/SectionIntroStacked.module.js

@@ -1,4 +1,4 @@
-import './SectionIntroStacked.module-C3cmwHDY.css';var e = {
+import './SectionIntroStacked.module-w4PEL6ek.css';var e = {
 	SectionIntroStacked: "Primer_Brand__SectionIntroStacked-module__SectionIntroStacked___UM_8Y",
 	"SectionIntroStacked--variant-gridline": "Primer_Brand__SectionIntroStacked-module__SectionIntroStacked--variant-gridline___TUqhi",
 	"SectionIntroStacked-heading--muted": "Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-heading--muted___MNSqH",
@@ -9,6 +9,7 @@ import './SectionIntroStacked.module-C3cmwHDY.css';var e = {
 	"SectionIntroStacked-description": "Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-description____vGqZ",
 	"SectionIntroStacked-link": "Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-link___Vna3J",
 	"SectionIntroStacked-items": "Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-items___rRGdi",
+	"SectionIntroStacked-content": "Primer_Brand__SectionIntroStacked-module__SectionIntroStacked-content___Sh_hs",
 	"SectionIntroStackedItem-item": "Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item___hzIws",
 	"SectionIntroStackedItem-item--with-icon": "Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem-item--with-icon___XYMFo",
 	SectionIntroStackedItem__content: "Primer_Brand__SectionIntroStacked-module__SectionIntroStackedItem__content___kUlfY",

package/esm/SectionIntroStacked/SectionIntroStacked.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionIntroStacked.module.js","names":[],"sources":["../../src/SectionIntroStacked/SectionIntroStacked.module.css"],"sourcesContent":[".SectionIntroStacked {\n  --brand-Grid-spacing-row: var(--base-size-48);\n}\n\n.SectionIntroStacked--variant-gridline {\n  position: relative;\n  padding-inline: var(--base-size-24);\n  padding-block: var(--base-size-32);\n\n  --SectionIntroStacked-item-divider-overflow-start: var(--base-size-24);\n  --SectionIntroStacked-item-divider-overflow-end: var(--base-size-24);\n}\n\n@media screen and (min-width: 63.25rem) {\n  .SectionIntroStacked--variant-gridline {\n    padding-inline: var(--base-size-64);\n    padding-block: var(--base-size-64);\n    /* At large viewports, left overflow is 0 (vertical divider bounds the start) */\n    --SectionIntroStacked-item-divider-overflow-start: 0px;\n    --SectionIntroStacked-item-divider-overflow-end: var(--base-size-64);\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .SectionIntroStacked--variant-gridline {\n    padding-inline: var(--base-size-64);\n    padding-block: var(--base-size-64);\n    --SectionIntroStacked-item-divider-overflow-start: 0px;\n    --SectionIntroStacked-item-divider-overflow-end: calc(var(--brand-Grid-spacing-margin) + var(--base-size-64));\n  }\n}\n\n@media screen and (min-width: 80rem) {\n  .SectionIntroStacked--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.SectionIntroStacked-heading--muted,\n.SectionIntroStackedItem__item-text--muted {\n  color: var(--brand-color-text-muted);\n}\n\n.SectionIntroStacked-heading--muted em,\n.SectionIntroStacked-heading--muted b,\n.SectionIntroStackedItem__item-text em,\n.SectionIntroStackedItem__item-text b {\n  color: var(--brand-color-text-default);\n  font-style: normal;\n  font-weight: var(--base-text-weight-normal);\n}\n\n.SectionIntroStacked--full-width .SectionIntroStacked-heading {\n  max-width: none;\n}\n\n.SectionIntroStacked-description {\n  margin-block-start: var(--base-size-16);\n  max-width: 50ch;\n}\n\n.SectionIntroStacked-link {\n  margin-block-start: var(--base-size-16);\n}\n\n.SectionIntroStacked-items {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n}\n\n@media screen and (max-width: 63.25rem) {\n  .SectionIntroStacked-heading {\n    font-size: var(--brand-text-size-600);\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .SectionIntroStacked-items {\n    position: relative;\n    top: var(--base-size-2);\n  }\n\n  .SectionIntroStacked--variant-gridline .SectionIntroStacked-items {\n    border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n    margin-block: calc(-1 * var(--base-size-64));\n    padding-block: 0;\n    position: static;\n    top: auto;\n  }\n\n  .SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item {\n    /* Inset item content from the vertical gridline */\n    padding-inline-start: var(--base-size-32);\n    padding-inline-end: var(--base-size-32);\n  }\n}\n\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item {\n  border-block-end: none;\n  position: relative;\n}\n\n/* Restore equal padding on first/last items in gridline variant */\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:first-child {\n  padding-block-start: var(--base-size-40);\n}\n\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:last-child {\n  padding-block-end: var(--base-size-40);\n}\n\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:not(:last-child)::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: calc(-1 * var(--SectionIntroStacked-item-divider-overflow-start));\n  right: calc(-1 * var(--SectionIntroStacked-item-divider-overflow-end));\n  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SectionIntroStackedItem-item {\n  padding-block: var(--base-size-40);\n  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SectionIntroStackedItem-item:last-child {\n  border-block-end: none;\n  padding-block-end: 0;\n}\n\n.SectionIntroStackedItem-item:first-child {\n  padding-block-start: 0;\n}\n\n.SectionIntroStackedItem-item--with-icon {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  gap: var(--base-size-24);\n}\n\n@media screen and (min-width: 63.25rem) {\n  .SectionIntroStackedItem-item--with-icon {\n    gap: var(--base-size-48);\n  }\n}\n\n.SectionIntroStackedItem__content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-size-8);\n  flex: 1;\n  min-width: 0;\n}\n\n.SectionIntroStackedItem__icon {\n  flex-shrink: 0;\n  border-radius: var(--base-size-12);\n}\n"],"mappings":""}
+{"version":3,"file":"SectionIntroStacked.module.js","names":[],"sources":["../../src/SectionIntroStacked/SectionIntroStacked.module.css"],"sourcesContent":[".SectionIntroStacked {\n  --brand-Grid-spacing-row: var(--base-size-64);\n}\n\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n  .SectionIntroStacked {\n    max-width: 618px;\n    margin-inline: auto;\n  }\n\n  .SectionIntroStacked.SectionIntroStacked--variant-gridline {\n    padding-inline: var(--base-size-32);\n    padding-block: calc(var(--base-size-64) - var(--base-size-4));\n\n    --SectionIntroStacked-item-divider-overflow-start: var(--base-size-32);\n    --SectionIntroStacked-item-divider-overflow-end: var(--base-size-32);\n  }\n}\n\n.SectionIntroStacked--variant-gridline {\n  position: relative;\n  padding-inline: var(--base-size-24);\n  padding-block: var(--base-size-32);\n\n  --SectionIntroStacked-item-divider-overflow-start: var(--base-size-24);\n  --SectionIntroStacked-item-divider-overflow-end: var(--base-size-24);\n}\n\n@media screen and (min-width: 63.25rem) {\n  .SectionIntroStacked--variant-gridline {\n    padding-inline: var(--base-size-64);\n    padding-block: var(--base-size-64);\n    /* At large viewports, left overflow is 0 (vertical divider bounds the start) */\n    --SectionIntroStacked-item-divider-overflow-start: 0px;\n    --SectionIntroStacked-item-divider-overflow-end: var(--base-size-64);\n  }\n}\n\n@media screen and (min-width: 80rem) {\n  .SectionIntroStacked--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.SectionIntroStacked-heading--muted,\n.SectionIntroStackedItem__item-text--muted {\n  color: var(--brand-color-text-muted);\n}\n\n.SectionIntroStacked-heading--muted em,\n.SectionIntroStacked-heading--muted b,\n.SectionIntroStackedItem__item-text em,\n.SectionIntroStackedItem__item-text b {\n  color: var(--brand-color-text-default);\n  font-style: normal;\n  font-weight: var(--base-text-weight-normal);\n}\n\n.SectionIntroStacked--full-width .SectionIntroStacked-heading {\n  max-width: none;\n}\n\n.SectionIntroStacked-description {\n  margin-block-start: var(--base-size-16);\n  max-width: 50ch;\n}\n\n.SectionIntroStacked-link {\n  margin-block-start: var(--base-size-16);\n}\n\n.SectionIntroStacked-items {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n}\n\n@media screen and (max-width: 63.24rem) {\n  .SectionIntroStacked-heading {\n    font-size: var(--brand-text-size-600);\n  }\n  .SectionIntroStacked-items {\n    overflow: hidden;\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .SectionIntroStacked-items {\n    position: relative;\n    top: var(--base-size-2);\n  }\n\n  .SectionIntroStacked--variant-gridline .SectionIntroStacked-items {\n    border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n    margin-block: calc(-1 * var(--base-size-64));\n    padding-block: calc(var(--base-size-64) - var(--base-size-32));\n    position: static;\n    top: auto;\n  }\n\n  .SectionIntroStacked-content {\n    padding-inline-end: var(--base-size-80);\n  }\n\n  .SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item {\n    /* Inset item content from the vertical gridline */\n    padding-inline-start: var(--base-size-64);\n  }\n}\n\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item {\n  border-block-end: none;\n  position: relative;\n}\n\n/* Restore equal padding on first/last items in gridline variant */\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:first-child {\n  padding-block-start: var(--base-size-40);\n}\n\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:last-child {\n  padding-block-end: var(--base-size-40);\n}\n\n.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:not(:last-child)::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: calc(-1 * var(--SectionIntroStacked-item-divider-overflow-start));\n  right: calc(-1 * var(--SectionIntroStacked-item-divider-overflow-end));\n  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SectionIntroStackedItem-item {\n  padding-block: var(--base-size-40);\n  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SectionIntroStackedItem-item:last-child {\n  border-block-end: none;\n  padding-block-end: 0;\n}\n\n.SectionIntroStackedItem-item:first-child {\n  padding-block-start: 0;\n}\n\n.SectionIntroStackedItem-item--with-icon {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--base-size-24);\n  flex-direction: column;\n}\n\n@media screen and (min-width: 48rem) {\n  .SectionIntroStackedItem-item--with-icon {\n    gap: var(--base-size-48);\n    flex-direction: row;\n  }\n}\n\n.SectionIntroStackedItem__content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-size-12);\n  flex: 1;\n  min-width: 0;\n}\n\n.SectionIntroStackedItem__icon {\n  flex-shrink: 0;\n  border-radius: var(--base-size-12);\n}\n"],"mappings":""}

package/lib/Pagination/Pagination.d.ts

@@ -11,10 +11,16 @@ export type PaginationProps = {
     marginPageCount?: number;
     showPages?: boolean;
     surroundingPageCount?: number;
+    labels?: {
+        prev?: string;
+        next?: string;
+        prevAriaLabel?: string;
+        nextAriaLabel?: string;
+    };
     'data-testid'?: string;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
 /**
  * Use Pagination to display a sequence of links that allow navigation to discrete, related pages.
  * @see https://primer.style/brand/components/Pagination
  */
-export declare const Pagination: React.MemoExoticComponent<({ id, className, pageCount, currentPage, onPageChange, hrefBuilder, pageAttributesBuilder, marginPageCount, showPages, surroundingPageCount, "aria-label": ariaLabel, "data-testid": testId, ...rest }: PaginationProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const Pagination: React.MemoExoticComponent<({ id, className, pageCount, currentPage, onPageChange, hrefBuilder, pageAttributesBuilder, marginPageCount, showPages, surroundingPageCount, labels, "aria-label": ariaLabel, "data-testid": testId, ...rest }: PaginationProps) => import("react/jsx-runtime").JSX.Element>;