@primer/react-brand 0.78.0-rc.e0204c62 → 0.78.0

package/esm/Tiles/Tiles.js

@@ -2,12 +2,14 @@ import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { Text as t } from "../Text/Text.js";
 import { ArrowUpRightIcon as n } from "../node_modules/@primer/octicons-react/dist/icons/ArrowUpRightIcon.js";
 import r from "../component-helpers/shared.module.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/tiles/colors-with-modes-DTTqGOfy.css';/* empty css                                                                                                   */
-import i from "./Tiles.module.js";
-import { createContext as a, forwardRef as o, useContext as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { isFragmentElement as i } from "../utils/isFragmentElement.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/tiles/colors-with-modes-DTTqGOfy.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/tiles/base-CX1T1tsR.css';/* empty css                                                                                      */
+/* empty css                                                                                                   */
+import a from "./Tiles.module.js";
+import o, { createContext as s, forwardRef as c, useContext as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/Tiles/Tiles.tsx
-var u = {
+var f = {
 	root: "Tiles",
 	get grid() {
 		return `${this.root}-grid`;
@@ -15,56 +17,84 @@ var u = {
 	get item() {
 		return `${this.root}-item`;
 	}
-}, d = a("default"), f = o(({ variant: t = "default", layout: n = "default", children: a, className: o, "data-testid": s, ...l }, f) => /* @__PURE__ */ c(d.Provider, {
-	value: n,
-	children: /* @__PURE__ */ c("div", {
-		ref: f,
-		className: e(i.Tiles, i[`Tiles--variant-${t}`], i[`Tiles--layout-${n}`], t === "gridlines" && r.gridline, o),
-		"data-testid": s || u.root,
-		...l,
-		children: /* @__PURE__ */ c("ul", {
-			className: i["Tiles-grid"],
-			"data-testid": u.grid,
-			children: a
+}, p = {
+	default: {
+		xsmall: 2,
+		small: 3,
+		medium: 4,
+		large: 9
+	},
+	compact: {
+		xsmall: 4,
+		small: 3,
+		medium: 6,
+		large: 9
+	}
+}, m = s("default"), h = c(({ variant: t = "default", layout: n = "default", children: s, className: c, "data-testid": l, ...d }, h) => {
+	let g = (e) => o.Children.toArray(e).reduce((e, t) => e + (i(t) ? g(t.props.children) : 1), 0), _ = (e, t) => {
+		if (e === 0) return 1;
+		let n = Math.ceil(e / t);
+		return Math.ceil(e / n);
+	}, v = g(s);
+	(process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && v > 9 && console.warn("Tiles: Use no more than 9 items.");
+	let y = p[n], b = {
+		"--tiles-columns-xsmall": _(v, y.xsmall),
+		"--tiles-columns-small": _(v, y.small),
+		"--tiles-columns-medium": _(v, y.medium),
+		"--tiles-columns-large": _(v, y.large)
+	};
+	return /* @__PURE__ */ u(m.Provider, {
+		value: n,
+		children: /* @__PURE__ */ u("div", {
+			ref: h,
+			className: e(a.Tiles, a[`Tiles--variant-${t}`], a[`Tiles--layout-${n}`], t === "gridlines" && r.gridline, c),
+			"data-testid": l || f.root,
+			...d,
+			children: /* @__PURE__ */ u("ul", {
+				className: a["Tiles-grid"],
+				"data-testid": f.grid,
+				style: b,
+				children: s
+			})
 		})
-	})
-})), p = o(({ name: r, href: a, children: o, className: f, "data-testid": p, ...m }, h) => {
-	let g = s(d), _ = !!a, v = g === "compact" && !_, y = /* @__PURE__ */ l("span", {
-		className: i["Tiles-item-content"],
-		children: [/* @__PURE__ */ c("span", {
-			className: i["Tiles-item-media"],
+	});
+}), g = c(({ name: r, href: i, children: o, className: s, "data-testid": c, ...p }, h) => {
+	let g = l(m), _ = !!i, v = g === "compact" && !_, y = /* @__PURE__ */ d("span", {
+		className: a["Tiles-item-content"],
+		children: [/* @__PURE__ */ u("span", {
+			className: a["Tiles-item-media"],
 			"aria-hidden": "true",
 			children: o
-		}), /* @__PURE__ */ l("span", {
-			className: e(i["Tiles-item-label"], v && "visually-hidden"),
-			children: [/* @__PURE__ */ c(t, {
+		}), /* @__PURE__ */ d("span", {
+			className: e(a["Tiles-item-label"], v && "visually-hidden"),
+			children: [/* @__PURE__ */ u(t, {
 				as: "span",
 				size: "100",
-				className: i["Tiles-item-name"],
+				className: a["Tiles-item-name"],
 				children: r
-			}), _ && /* @__PURE__ */ c(n, {
+			}), _ && /* @__PURE__ */ u(n, {
 				size: 16,
-				className: i["Tiles-item-icon"],
+				className: a["Tiles-item-icon"],
 				"aria-hidden": "true"
 			})]
 		})]
 	});
-	return /* @__PURE__ */ c("li", {
+	return /* @__PURE__ */ u("li", {
 		ref: h,
-		className: e(i["Tiles-item"], f),
-		"data-testid": p || u.item,
-		...m,
-		children: _ ? /* @__PURE__ */ c("a", {
-			href: a,
-			className: i["Tiles-item-link"],
+		className: e(a["Tiles-item"], s),
+		"data-testid": c || f.item,
+		...p,
+		children: _ ? /* @__PURE__ */ u("a", {
+			href: i,
+			className: a["Tiles-item-link"],
 			children: y
 		}) : y
 	});
-}), m = Object.assign(f, {
-	Item: p,
-	testIds: u
+}), _ = Object.assign(h, {
+	Item: g,
+	testIds: f
 });
 //#endregion
-export { m as Tiles };
+export { _ as Tiles };
 
 //# sourceMappingURL=Tiles.js.map

package/esm/Tiles/Tiles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tiles.js","names":[],"sources":["../../src/Tiles/Tiles.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {createContext, forwardRef, type PropsWithChildren, type Ref, useContext} from 'react'\nimport {ArrowUpRightIcon} from '@primer/octicons-react'\nimport type {BaseProps} from '../component-helpers'\nimport gridlineStyles from '../component-helpers/shared.module.css'\nimport {Text} from '../Text'\n\n/** * Design Tokens */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tiles/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Tiles.module.css'\n\nconst testIds = {\n  root: 'Tiles',\n  get grid() {\n    return `${this.root}-grid`\n  },\n  get item() {\n    return `${this.root}-item`\n  },\n}\n\ntype TilesVariant = 'default' | 'gridlines'\n\ntype TilesLayout = 'default' | 'compact'\n\nconst TilesContext = createContext<TilesLayout>('default')\n\nexport type TilesProps = {\n  /**\n   * The visual variant of the Tiles component.\n   */\n  variant?: TilesVariant\n  /**\n   * The layout density of the Tiles grid.\n   */\n  layout?: TilesLayout\n  /**\n   * Test id for the root Tiles element.\n   */\n  'data-testid'?: string\n} & BaseProps<HTMLDivElement> &\n  React.HTMLAttributes<HTMLDivElement>\n\nconst TilesRoot = forwardRef(\n  (\n    {\n      variant = 'default',\n      layout = 'default',\n      children,\n      className,\n      'data-testid': testId,\n      ...rest\n    }: PropsWithChildren<TilesProps>,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    return (\n      <TilesContext.Provider value={layout}>\n        <div\n          ref={ref}\n          className={clsx(\n            styles.Tiles,\n            styles[`Tiles--variant-${variant}`],\n            styles[`Tiles--layout-${layout}`],\n            variant === 'gridlines' && gridlineStyles.gridline,\n            className,\n          )}\n          data-testid={testId || testIds.root}\n          {...rest}\n        >\n          <ul className={styles['Tiles-grid']} data-testid={testIds.grid}>\n            {children}\n          </ul>\n        </div>\n      </TilesContext.Provider>\n    )\n  },\n)\n\nexport type TilesItemProps = {\n  /**\n   * The accessible name for the tile item.\n   */\n  name: string\n  /**\n   * Optional URL to link the tile to.\n   */\n  href?: string\n  /**\n   * Test id for the tile item element.\n   */\n  'data-testid'?: string\n} & BaseProps<HTMLLIElement> &\n  Omit<React.HTMLAttributes<HTMLLIElement>, 'children'> & {\n    children: React.ReactNode\n  }\n\nconst _Item = forwardRef(\n  ({name, href, children, className, 'data-testid': testId, ...rest}: TilesItemProps, ref: Ref<HTMLLIElement>) => {\n    const layout = useContext(TilesContext)\n    const hasLink = Boolean(href)\n    const isLabelHidden = layout === 'compact' && !hasLink\n\n    const content = (\n      <span className={styles['Tiles-item-content']}>\n        <span className={styles['Tiles-item-media']} aria-hidden=\"true\">\n          {children}\n        </span>\n        <span className={clsx(styles['Tiles-item-label'], isLabelHidden && 'visually-hidden')}>\n          <Text as=\"span\" size=\"100\" className={styles['Tiles-item-name']}>\n            {name}\n          </Text>\n          {hasLink && <ArrowUpRightIcon size={16} className={styles['Tiles-item-icon']} aria-hidden=\"true\" />}\n        </span>\n      </span>\n    )\n\n    return (\n      <li ref={ref} className={clsx(styles['Tiles-item'], className)} data-testid={testId || testIds.item} {...rest}>\n        {hasLink ? (\n          <a href={href} className={styles['Tiles-item-link']}>\n            {content}\n          </a>\n        ) : (\n          content\n        )}\n      </li>\n    )\n  },\n)\n\n/**\n * Use Tiles to display a grid of logos or icons with optional links.\n * @see https://primer.style/brand/components/Tiles\n */\nexport const Tiles = Object.assign(TilesRoot, {\n  Item: _Item,\n  testIds,\n})\n"],"mappings":";;;;;;;;;AAaA,IAAM,IAAU;CACd,MAAM;CACN,IAAI,OAAO;EACT,OAAO,GAAG,KAAK,KAAK;CACtB;CACA,IAAI,OAAO;EACT,OAAO,GAAG,KAAK,KAAK;CACtB;AACF,GAMM,IAAe,EAA2B,SAAS,GAkBnD,IAAY,GAEd,EACE,aAAU,WACV,YAAS,WACT,aACA,cACA,eAAe,GACf,GAAG,KAEL,MAGE,kBAAC,EAAa,UAAd;CAAuB,OAAO;WAC5B,kBAAC,OAAD;EACO;EACL,WAAW,EACT,EAAO,OACP,EAAO,kBAAkB,MACzB,EAAO,iBAAiB,MACxB,MAAY,eAAe,EAAe,UAC1C,CACF;EACA,eAAa,KAAU,EAAQ;EAC/B,GAAI;YAEJ,kBAAC,MAAD;GAAI,WAAW,EAAO;GAAe,eAAa,EAAQ;GACvD;EACC,CAAA;CACD,CAAA;AACgB,CAAA,CAG7B,GAoBM,IAAQ,GACX,EAAC,SAAM,SAAM,aAAU,cAAW,eAAe,GAAQ,GAAG,KAAuB,MAA4B;CAC9G,IAAM,IAAS,EAAW,CAAY,GAChC,IAAU,EAAQ,GAClB,IAAgB,MAAW,aAAa,CAAC,GAEzC,IACJ,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB,CACE,kBAAC,QAAD;GAAM,WAAW,EAAO;GAAqB,eAAY;GACtD;EACG,CAAA,GACN,kBAAC,QAAD;GAAM,WAAW,EAAK,EAAO,qBAAqB,KAAiB,iBAAiB;aAApF,CACE,kBAAC,GAAD;IAAM,IAAG;IAAO,MAAK;IAAM,WAAW,EAAO;cAC1C;GACG,CAAA,GACL,KAAW,kBAAC,GAAD;IAAkB,MAAM;IAAI,WAAW,EAAO;IAAoB,eAAY;GAAQ,CAAA,CAC9F;IACF;;CAGR,OACE,kBAAC,MAAD;EAAS;EAAK,WAAW,EAAK,EAAO,eAAe,CAAS;EAAG,eAAa,KAAU,EAAQ;EAAM,GAAI;YACtG,IACC,kBAAC,KAAD;GAAS;GAAM,WAAW,EAAO;aAC9B;EACA,CAAA,IAEH;CAEA,CAAA;AAER,CACF,GAMa,IAAQ,OAAO,OAAO,GAAW;CAC5C,MAAM;CACN;AACF,CAAC"}
+{"version":3,"file":"Tiles.js","names":[],"sources":["../../src/Tiles/Tiles.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {createContext, forwardRef, type PropsWithChildren, type Ref, useContext} from 'react'\nimport {ArrowUpRightIcon} from '@primer/octicons-react'\nimport type {BaseProps} from '../component-helpers'\nimport gridlineStyles from '../component-helpers/shared.module.css'\nimport {Text} from '../Text'\nimport {isFragmentElement} from '../utils/isFragmentElement'\n\n/** * Design Tokens */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tiles/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tiles/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Tiles.module.css'\n\nconst testIds = {\n  root: 'Tiles',\n  get grid() {\n    return `${this.root}-grid`\n  },\n  get item() {\n    return `${this.root}-item`\n  },\n}\n\ntype TilesVariant = 'default' | 'gridlines'\n\ntype TilesLayout = 'default' | 'compact'\n\nconst maximumTilesPerRowByViewport = {\n  default: {xsmall: 2, small: 3, medium: 4, large: 9},\n  compact: {xsmall: 4, small: 3, medium: 6, large: 9},\n} satisfies Record<TilesLayout, Record<'xsmall' | 'small' | 'medium' | 'large', number>>\n\nconst TilesContext = createContext<TilesLayout>('default')\n\nexport type TilesProps = {\n  /**\n   * The visual variant of the Tiles component.\n   */\n  variant?: TilesVariant\n  /**\n   * The layout density of the Tiles grid.\n   */\n  layout?: TilesLayout\n  /**\n   * Test id for the root Tiles element.\n   */\n  'data-testid'?: string\n} & BaseProps<HTMLDivElement> &\n  React.HTMLAttributes<HTMLDivElement>\n\nconst TilesRoot = forwardRef(\n  (\n    {\n      variant = 'default',\n      layout = 'default',\n      children,\n      className,\n      'data-testid': testId,\n      ...rest\n    }: PropsWithChildren<TilesProps>,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    const getChildCount = (childNodes: React.ReactNode): number =>\n      React.Children.toArray(childNodes).reduce<number>(\n        (count, child) => count + (isFragmentElement(child) ? getChildCount(child.props.children) : 1),\n        0,\n      )\n\n    const getBalancedColumnCount = (itemCount: number, maximumTilesPerRow: number) => {\n      if (itemCount === 0) return 1\n\n      const fewestRowsNeeded = Math.ceil(itemCount / maximumTilesPerRow)\n      return Math.ceil(itemCount / fewestRowsNeeded)\n    }\n\n    const itemCount = getChildCount(children)\n\n    if ((process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') && itemCount > 9) {\n      // eslint-disable-next-line no-console\n      console.warn('Tiles: Use no more than 9 items.')\n    }\n\n    const maximumTilesPerRow = maximumTilesPerRowByViewport[layout]\n    const gridStyle = {\n      '--tiles-columns-xsmall': getBalancedColumnCount(itemCount, maximumTilesPerRow.xsmall),\n      '--tiles-columns-small': getBalancedColumnCount(itemCount, maximumTilesPerRow.small),\n      '--tiles-columns-medium': getBalancedColumnCount(itemCount, maximumTilesPerRow.medium),\n      '--tiles-columns-large': getBalancedColumnCount(itemCount, maximumTilesPerRow.large),\n    } as React.CSSProperties\n\n    return (\n      <TilesContext.Provider value={layout}>\n        <div\n          ref={ref}\n          className={clsx(\n            styles.Tiles,\n            styles[`Tiles--variant-${variant}`],\n            styles[`Tiles--layout-${layout}`],\n            variant === 'gridlines' && gridlineStyles.gridline,\n            className,\n          )}\n          data-testid={testId || testIds.root}\n          {...rest}\n        >\n          <ul className={styles['Tiles-grid']} data-testid={testIds.grid} style={gridStyle}>\n            {children}\n          </ul>\n        </div>\n      </TilesContext.Provider>\n    )\n  },\n)\n\nexport type TilesItemProps = {\n  /**\n   * The accessible name for the tile item.\n   */\n  name: string\n  /**\n   * Optional URL to link the tile to.\n   */\n  href?: string\n  /**\n   * Test id for the tile item element.\n   */\n  'data-testid'?: string\n} & BaseProps<HTMLLIElement> &\n  Omit<React.HTMLAttributes<HTMLLIElement>, 'children'> & {\n    children: React.ReactNode\n  }\n\nconst _Item = forwardRef(\n  ({name, href, children, className, 'data-testid': testId, ...rest}: TilesItemProps, ref: Ref<HTMLLIElement>) => {\n    const layout = useContext(TilesContext)\n    const hasLink = Boolean(href)\n    const isLabelHidden = layout === 'compact' && !hasLink\n\n    const content = (\n      <span className={styles['Tiles-item-content']}>\n        <span className={styles['Tiles-item-media']} aria-hidden=\"true\">\n          {children}\n        </span>\n        <span className={clsx(styles['Tiles-item-label'], isLabelHidden && 'visually-hidden')}>\n          <Text as=\"span\" size=\"100\" className={styles['Tiles-item-name']}>\n            {name}\n          </Text>\n          {hasLink && <ArrowUpRightIcon size={16} className={styles['Tiles-item-icon']} aria-hidden=\"true\" />}\n        </span>\n      </span>\n    )\n\n    return (\n      <li ref={ref} className={clsx(styles['Tiles-item'], className)} data-testid={testId || testIds.item} {...rest}>\n        {hasLink ? (\n          <a href={href} className={styles['Tiles-item-link']}>\n            {content}\n          </a>\n        ) : (\n          content\n        )}\n      </li>\n    )\n  },\n)\n\n/**\n * Use Tiles to display a grid of logos or icons with optional links.\n * @see https://primer.style/brand/components/Tiles\n */\nexport const Tiles = Object.assign(TilesRoot, {\n  Item: _Item,\n  testIds,\n})\n"],"mappings":";;;;;;;;;;;AAeA,IAAM,IAAU;CACd,MAAM;CACN,IAAI,OAAO;EACT,OAAO,GAAG,KAAK,KAAK;CACtB;CACA,IAAI,OAAO;EACT,OAAO,GAAG,KAAK,KAAK;CACtB;AACF,GAMM,IAA+B;CACnC,SAAS;EAAC,QAAQ;EAAG,OAAO;EAAG,QAAQ;EAAG,OAAO;CAAC;CAClD,SAAS;EAAC,QAAQ;EAAG,OAAO;EAAG,QAAQ;EAAG,OAAO;CAAC;AACpD,GAEM,IAAe,EAA2B,SAAS,GAkBnD,IAAY,GAEd,EACE,aAAU,WACV,YAAS,WACT,aACA,cACA,eAAe,GACf,GAAG,KAEL,MACG;CACH,IAAM,KAAiB,MACrB,EAAM,SAAS,QAAQ,CAAU,CAAC,CAAC,QAChC,GAAO,MAAU,KAAS,EAAkB,CAAK,IAAI,EAAc,EAAM,MAAM,QAAQ,IAAI,IAC5F,CACF,GAEI,KAA0B,GAAmB,MAA+B;EAChF,IAAI,MAAc,GAAG,OAAO;EAE5B,IAAM,IAAmB,KAAK,KAAK,IAAY,CAAkB;EACjE,OAAO,KAAK,KAAK,IAAY,CAAgB;CAC/C,GAEM,IAAY,EAAc,CAAQ;CAExC,CAAA,QAAA,IAAA,aAA8B,iBAAA,QAAA,IAAA,aAA0C,WAAW,IAAY,KAE7F,QAAQ,KAAK,kCAAkC;CAGjD,IAAM,IAAqB,EAA6B,IAClD,IAAY;EAChB,0BAA0B,EAAuB,GAAW,EAAmB,MAAM;EACrF,yBAAyB,EAAuB,GAAW,EAAmB,KAAK;EACnF,0BAA0B,EAAuB,GAAW,EAAmB,MAAM;EACrF,yBAAyB,EAAuB,GAAW,EAAmB,KAAK;CACrF;CAEA,OACE,kBAAC,EAAa,UAAd;EAAuB,OAAO;YAC5B,kBAAC,OAAD;GACO;GACL,WAAW,EACT,EAAO,OACP,EAAO,kBAAkB,MACzB,EAAO,iBAAiB,MACxB,MAAY,eAAe,EAAe,UAC1C,CACF;GACA,eAAa,KAAU,EAAQ;GAC/B,GAAI;aAEJ,kBAAC,MAAD;IAAI,WAAW,EAAO;IAAe,eAAa,EAAQ;IAAM,OAAO;IACpE;GACC,CAAA;EACD,CAAA;CACgB,CAAA;AAE3B,CACF,GAoBM,IAAQ,GACX,EAAC,SAAM,SAAM,aAAU,cAAW,eAAe,GAAQ,GAAG,KAAuB,MAA4B;CAC9G,IAAM,IAAS,EAAW,CAAY,GAChC,IAAU,EAAQ,GAClB,IAAgB,MAAW,aAAa,CAAC,GAEzC,IACJ,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB,CACE,kBAAC,QAAD;GAAM,WAAW,EAAO;GAAqB,eAAY;GACtD;EACG,CAAA,GACN,kBAAC,QAAD;GAAM,WAAW,EAAK,EAAO,qBAAqB,KAAiB,iBAAiB;aAApF,CACE,kBAAC,GAAD;IAAM,IAAG;IAAO,MAAK;IAAM,WAAW,EAAO;cAC1C;GACG,CAAA,GACL,KAAW,kBAAC,GAAD;IAAkB,MAAM;IAAI,WAAW,EAAO;IAAoB,eAAY;GAAQ,CAAA,CAC9F;IACF;;CAGR,OACE,kBAAC,MAAD;EAAS;EAAK,WAAW,EAAK,EAAO,eAAe,CAAS;EAAG,eAAa,KAAU,EAAQ;EAAM,GAAI;YACtG,IACC,kBAAC,KAAD;GAAS;GAAM,WAAW,EAAO;aAC9B;EACA,CAAA,IAEH;CAEA,CAAA;AAER,CACF,GAMa,IAAQ,OAAO,OAAO,GAAW;CAC5C,MAAM;CACN;AACF,CAAC"}

package/esm/Tiles/Tiles.module-DUo9CsNB.css

@@ -0,0 +1 @@
+.Primer_Brand__Tiles-module__Tiles___RhWBm{width:100%;color:var(--brand-color-text-default)}.Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-columns:var(--tiles-columns-xsmall);margin:0;flex-wrap:wrap;justify-content:center;margin-inline:auto;padding:0;list-style:none;display:flex}.Primer_Brand__Tiles-module__Tiles--layout-default___szHFY .Primer_Brand__Tiles-module__Tiles-grid___lAoQw,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-grid___lAoQw{max-width:min(100%, calc(var(--brand-Tiles-item-maxSize) * var(--tiles-columns)))}@media screen and (width>=34rem) and (width<=47.99rem){.Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-columns:var(--tiles-columns-small)}}@media screen and (width>=48rem){.Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-columns:var(--tiles-columns-medium)}}@media screen and (width>=63.25rem){.Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-columns:var(--tiles-columns-large)}}.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP .Primer_Brand__Tiles-module__Tiles-grid___lAoQw{padding-right:var(--brand-borderWidth-thin);padding-bottom:var(--brand-borderWidth-thin)}.Primer_Brand__Tiles-module__Tiles-item___YlnUj{--tiles-inset-shadow:inset 0 0 0 transparent;width:calc(100% / var(--tiles-columns));max-width:var(--brand-Tiles-item-maxSize);max-height:var(--brand-Tiles-item-maxSize);box-sizing:border-box;background-color:var(--brand-tiles-bgColor-rest);border-top:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);border-left:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);box-shadow:var(--brand-borderWidth-thin) 0 0 0 var(--brand-color-border-muted), 0 var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-muted), inset 0 0 0 transparent;box-shadow:var(--brand-borderWidth-thin) 0 0 0 var(--brand-color-border-muted), 0 var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-muted), var(--tiles-inset-shadow);transition:background-color var(--brand-animation-duration-faster) var(--brand-animation-easing-default), box-shadow var(--brand-animation-duration-faster) var(--brand-animation-easing-default);flex-direction:column;display:flex;position:relative}:is(.Primer_Brand__Tiles-module__Tiles-item___YlnUj:has(.Primer_Brand__Tiles-module__Tiles-item-link___NcK69):hover,.Primer_Brand__Tiles-module__Tiles-item___YlnUj:has(.Primer_Brand__Tiles-module__Tiles-item-link___NcK69):focus-within){--tiles-inset-shadow:inset 0 var(--base-size-2) 0 var(--brand-tiles-highlightColor);background-color:var(--brand-tiles-bgColor-hover)}.Primer_Brand__Tiles-module__Tiles-item-link___NcK69{width:100%;color:inherit;flex:1;-webkit-text-decoration:none;text-decoration:none;display:flex}.Primer_Brand__Tiles-module__Tiles-item-link___NcK69:focus-visible{outline:var(--base-size-4) solid var(--brand-color-focus);outline-offset:calc(-1 * var(--base-size-4));border-radius:var(--brand-borderRadius-small)}.Primer_Brand__Tiles-module__Tiles-item-content___YIq8M{aspect-ratio:1;justify-content:center;align-items:center;width:100%;display:flex;position:relative}.Primer_Brand__Tiles-module__Tiles-item-media___QH9l2{justify-content:center;align-items:center;display:flex}.Primer_Brand__Tiles-module__Tiles-item-media___QH9l2 svg,.Primer_Brand__Tiles-module__Tiles-item-media___QH9l2 img{width:auto;height:var(--base-size-40);max-width:100%}.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2 svg,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2 img{height:var(--base-size-28)}@media screen and (width>=48rem){.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2 svg,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2 img{height:var(--base-size-32)}}.Primer_Brand__Tiles-module__Tiles-item-label___L9BIA{justify-content:space-between;align-items:center;gap:var(--base-size-4);padding:var(--base-size-12) var(--base-size-16);display:flex;position:absolute;bottom:0;left:0;right:0}.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2{transition:transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default)}.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-link___NcK69:hover .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-link___NcK69:focus-visible .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2{transform:translateY(calc(-1 * var(--base-size-4)))}.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-label___L9BIA{opacity:0;transform:translateY(var(--base-size-4));transition:opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-default), transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);pointer-events:none}.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-link___NcK69:hover .Primer_Brand__Tiles-module__Tiles-item-label___L9BIA,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-link___NcK69:focus-visible .Primer_Brand__Tiles-module__Tiles-item-label___L9BIA{opacity:1;transform:translateY(0)}.Primer_Brand__Tiles-module__Tiles-item-name___47ZMU{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}.Primer_Brand__Tiles-module__Tiles-item-icon___2Hu6M{color:var(--brand-color-text-default);flex-shrink:0}@media (prefers-reduced-motion:reduce){.Primer_Brand__Tiles-module__Tiles-item___YlnUj,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-label___L9BIA{transition:none}}

package/esm/Tiles/Tiles.module.js

@@ -1,9 +1,9 @@
-import './Tiles.module-BzHaDJV8.css';//#region src/Tiles/Tiles.module.css
+import './Tiles.module-DUo9CsNB.css';//#region src/Tiles/Tiles.module.css
 var e = "Primer_Brand__Tiles-module__Tiles___RhWBm", t = {
 	Tiles: e,
 	"Tiles-grid": "Primer_Brand__Tiles-module__Tiles-grid___lAoQw",
-	"Tiles--layout-compact": "Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD",
 	"Tiles--layout-default": "Primer_Brand__Tiles-module__Tiles--layout-default___szHFY",
+	"Tiles--layout-compact": "Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD",
 	"Tiles--variant-gridlines": "Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP",
 	"Tiles-item": "Primer_Brand__Tiles-module__Tiles-item___YlnUj",
 	"Tiles-item-link": "Primer_Brand__Tiles-module__Tiles-item-link___NcK69",

package/esm/Tiles/Tiles.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tiles.module.js","names":[],"sources":["../../src/Tiles/Tiles.module.css"],"sourcesContent":[".Tiles {\n  width: 100%;\n  color: var(--brand-color-text-default);\n}\n\n.Tiles-grid {\n  --tiles-columns: 2;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.Tiles--layout-compact .Tiles-grid {\n  --tiles-columns: 4;\n}\n\n@media screen and (min-width: 48rem) {\n  .Tiles--layout-default .Tiles-grid {\n    --tiles-columns: 4;\n  }\n}\n\n@media screen and (min-width: 34rem) and (max-width: 47.99rem) {\n  .Tiles-grid {\n    --tiles-columns: 3;\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Tiles--layout-default .Tiles-grid {\n    --tiles-columns: 6;\n  }\n}\n\n@media screen and (min-width: 48rem) {\n  .Tiles--layout-compact .Tiles-grid {\n    --tiles-columns: 6;\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Tiles--layout-compact .Tiles-grid {\n    --tiles-columns: 8;\n  }\n}\n\n.Tiles--variant-gridlines .Tiles-grid {\n  --tiles-grid-border-color: var(--brand-color-border-muted);\n  position: relative;\n  padding-right: var(--brand-borderWidth-thin);\n  padding-bottom: var(--brand-borderWidth-thin);\n}\n\n.Tiles--variant-gridlines .Tiles-grid::before,\n.Tiles--variant-gridlines .Tiles-grid::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 0;\n  border-left: var(--brand-borderWidth-thin) solid var(--tiles-grid-border-color);\n  z-index: 1;\n  pointer-events: none;\n}\n\n.Tiles--variant-gridlines .Tiles-grid::before {\n  left: 0;\n}\n\n.Tiles--variant-gridlines .Tiles-grid::after {\n  right: 0;\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Tiles--variant-gridlines.Tiles--layout-default .Tiles-grid:not(:has(> .Tiles-item:nth-child(6))),\n  .Tiles--variant-gridlines.Tiles--layout-compact .Tiles-grid:not(:has(> .Tiles-item:nth-child(8))) {\n    --tiles-grid-border-color: transparent;\n  }\n}\n\n.Tiles-item {\n  --tiles-inset-shadow: inset 0 0 0 transparent;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: calc(100% / var(--tiles-columns));\n  box-sizing: border-box;\n  background-color: var(--brand-tiles-bgColor-rest);\n  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  border-left: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  box-shadow: var(--brand-borderWidth-thin) 0 0 0 var(--brand-color-border-muted),\n    0 var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-muted), var(--tiles-inset-shadow);\n  transition: background-color var(--brand-animation-duration-faster) var(--brand-animation-easing-default),\n    box-shadow var(--brand-animation-duration-faster) var(--brand-animation-easing-default);\n}\n\n.Tiles-item:has(.Tiles-item-link):hover,\n.Tiles-item:has(.Tiles-item-link):focus-within {\n  --tiles-inset-shadow: inset 0 var(--base-size-2) 0 var(--brand-tiles-highlightColor);\n  background-color: var(--brand-tiles-bgColor-hover);\n}\n\n.Tiles-item-link {\n  display: flex;\n  width: 100%;\n  flex: 1;\n  text-decoration: none;\n  color: inherit;\n}\n\n.Tiles-item-link:focus-visible {\n  outline: var(--base-size-4) solid var(--brand-color-focus);\n  outline-offset: calc(-1 * var(--base-size-4));\n  border-radius: var(--brand-borderRadius-small);\n}\n\n.Tiles-item-content {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  aspect-ratio: 1;\n}\n\n.Tiles-item-media {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.Tiles-item-media svg,\n.Tiles-item-media img {\n  width: auto;\n  height: var(--base-size-40);\n  max-width: 100%;\n}\n\n.Tiles--layout-compact .Tiles-item-media svg,\n.Tiles--layout-compact .Tiles-item-media img {\n  height: var(--base-size-28);\n}\n\n@media screen and (min-width: 48rem) {\n  .Tiles--layout-compact .Tiles-item-media svg,\n  .Tiles--layout-compact .Tiles-item-media img {\n    height: var(--base-size-32);\n  }\n}\n\n.Tiles-item-label {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--base-size-4);\n  padding: var(--base-size-12) var(--base-size-16);\n}\n\n.Tiles--layout-compact .Tiles-item-media {\n  transition: transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.Tiles--layout-compact .Tiles-item-link:hover .Tiles-item-media,\n.Tiles--layout-compact .Tiles-item-link:focus-visible .Tiles-item-media {\n  transform: translateY(calc(-1 * var(--base-size-4)));\n}\n\n.Tiles--layout-compact .Tiles-item-label {\n  opacity: 0;\n  transform: translateY(var(--base-size-4));\n  transition: opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-default),\n    transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n  pointer-events: none;\n}\n\n.Tiles--layout-compact .Tiles-item-link:hover .Tiles-item-label,\n.Tiles--layout-compact .Tiles-item-link:focus-visible .Tiles-item-label {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.Tiles-item-name {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n.Tiles-item-icon {\n  flex-shrink: 0;\n  color: var(--brand-color-text-default);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .Tiles-item {\n    transition: none;\n  }\n\n  .Tiles--layout-compact .Tiles-item-media {\n    transition: none;\n  }\n\n  .Tiles--layout-compact .Tiles-item-label {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Tiles.module.js","names":[],"sources":["../../src/Tiles/Tiles.module.css"],"sourcesContent":[".Tiles {\n  width: 100%;\n  color: var(--brand-color-text-default);\n}\n\n.Tiles-grid {\n  --tiles-columns: var(--tiles-columns-xsmall);\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  list-style: none;\n  margin: 0;\n  margin-inline: auto;\n  padding: 0;\n}\n\n.Tiles--layout-default .Tiles-grid,\n.Tiles--layout-compact .Tiles-grid {\n  max-width: min(100%, calc(var(--brand-Tiles-item-maxSize) * var(--tiles-columns)));\n}\n\n@media screen and (min-width: 34rem) and (max-width: 47.99rem) {\n  .Tiles-grid {\n    --tiles-columns: var(--tiles-columns-small);\n  }\n}\n\n@media screen and (min-width: 48rem) {\n  .Tiles-grid {\n    --tiles-columns: var(--tiles-columns-medium);\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Tiles-grid {\n    --tiles-columns: var(--tiles-columns-large);\n  }\n}\n\n.Tiles--variant-gridlines .Tiles-grid {\n  padding-right: var(--brand-borderWidth-thin);\n  padding-bottom: var(--brand-borderWidth-thin);\n}\n\n.Tiles-item {\n  --tiles-inset-shadow: inset 0 0 0 transparent;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: calc(100% / var(--tiles-columns));\n  max-width: var(--brand-Tiles-item-maxSize);\n  max-height: var(--brand-Tiles-item-maxSize);\n  box-sizing: border-box;\n  background-color: var(--brand-tiles-bgColor-rest);\n  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  border-left: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  box-shadow: var(--brand-borderWidth-thin) 0 0 0 var(--brand-color-border-muted),\n    0 var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-muted), var(--tiles-inset-shadow);\n  transition: background-color var(--brand-animation-duration-faster) var(--brand-animation-easing-default),\n    box-shadow var(--brand-animation-duration-faster) var(--brand-animation-easing-default);\n}\n\n.Tiles-item:has(.Tiles-item-link):hover,\n.Tiles-item:has(.Tiles-item-link):focus-within {\n  --tiles-inset-shadow: inset 0 var(--base-size-2) 0 var(--brand-tiles-highlightColor);\n  background-color: var(--brand-tiles-bgColor-hover);\n}\n\n.Tiles-item-link {\n  display: flex;\n  width: 100%;\n  flex: 1;\n  text-decoration: none;\n  color: inherit;\n}\n\n.Tiles-item-link:focus-visible {\n  outline: var(--base-size-4) solid var(--brand-color-focus);\n  outline-offset: calc(-1 * var(--base-size-4));\n  border-radius: var(--brand-borderRadius-small);\n}\n\n.Tiles-item-content {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  aspect-ratio: 1;\n}\n\n.Tiles-item-media {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.Tiles-item-media svg,\n.Tiles-item-media img {\n  width: auto;\n  height: var(--base-size-40);\n  max-width: 100%;\n}\n\n.Tiles--layout-compact .Tiles-item-media svg,\n.Tiles--layout-compact .Tiles-item-media img {\n  height: var(--base-size-28);\n}\n\n@media screen and (min-width: 48rem) {\n  .Tiles--layout-compact .Tiles-item-media svg,\n  .Tiles--layout-compact .Tiles-item-media img {\n    height: var(--base-size-32);\n  }\n}\n\n.Tiles-item-label {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--base-size-4);\n  padding: var(--base-size-12) var(--base-size-16);\n}\n\n.Tiles--layout-compact .Tiles-item-media {\n  transition: transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.Tiles--layout-compact .Tiles-item-link:hover .Tiles-item-media,\n.Tiles--layout-compact .Tiles-item-link:focus-visible .Tiles-item-media {\n  transform: translateY(calc(-1 * var(--base-size-4)));\n}\n\n.Tiles--layout-compact .Tiles-item-label {\n  opacity: 0;\n  transform: translateY(var(--base-size-4));\n  transition: opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-default),\n    transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n  pointer-events: none;\n}\n\n.Tiles--layout-compact .Tiles-item-link:hover .Tiles-item-label,\n.Tiles--layout-compact .Tiles-item-link:focus-visible .Tiles-item-label {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.Tiles-item-name {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n.Tiles-item-icon {\n  flex-shrink: 0;\n  color: var(--brand-color-text-default);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .Tiles-item {\n    transition: none;\n  }\n\n  .Tiles--layout-compact .Tiles-item-media {\n    transition: none;\n  }\n\n  .Tiles--layout-compact .Tiles-item-label {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/sub-nav/base-Dl5rLq0_.css

@@ -0,0 +1 @@
+:root{--brand-SubNav-offset-overflowMenu:.25rem;--brand-SubNav-height-overflowMenuItemMin:2.5rem;--brand-SubNav-height-overflowMenuInset:8rem;--brand-SubNav-width-overflowMenuMin:10rem;--brand-SubNav-width-overflowMenuInset:2rem;--brand-SubNav-width-subMenu:18.75rem}

package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/sub-nav/colors-with-modes-Bna3nyXf.css

@@ -0,0 +1 @@
+:root,[data-color-mode=light]{--brand-SubNav-bgColor:var(--brand-color-canvas-default);--brand-SubNav-overflowMenu-bgColor-rest:var(--brand-color-canvas-default);--brand-SubNav-overflowMenu-bgColor-hover:var(--brand-color-canvas-subtle);--brand-SubNav-overflowMenu-fgColor-rest:var(--brand-color-text-muted);--brand-SubNav-overflowMenu-fgColor-hover:var(--brand-color-text-default);--brand-SubNav-overflowMenu-toggle-bgColor-rest:transparent;--brand-SubNav-overflowMenu-toggle-bgColor-hover:var(--base-color-scale-gray-1);--brand-SubNav-overflowMenu-toggle-bgColor-active:var(--base-color-scale-gray-1);--brand-SubNav-color-link-rest:var(--brand-color-text-default);--brand-SubNav-color-link-active:var(--brand-color-text-default);--brand-SubNav-color-link-bgColor:#e4ebe6;--brand-SubNav-shadow:0px 100px 80px #00000003, 0px 41px 33px #00000005, 0px 22px 17px #00000005, 0px 12px 10px #00000008, 0px 6px 5px #0000000a, 0px 2px 2px #00000012}[data-color-mode=dark]{--brand-SubNav-bgColor:var(--brand-color-canvas-default);--brand-SubNav-overflowMenu-bgColor-rest:var(--brand-color-canvas-default);--brand-SubNav-overflowMenu-bgColor-hover:var(--brand-color-canvas-subtle);--brand-SubNav-overflowMenu-fgColor-rest:var(--brand-color-text-muted);--brand-SubNav-overflowMenu-fgColor-hover:var(--brand-color-text-default);--brand-SubNav-overflowMenu-toggle-bgColor-rest:transparent;--brand-SubNav-overflowMenu-toggle-bgColor-hover:var(--base-color-scale-gray-6);--brand-SubNav-overflowMenu-toggle-bgColor-active:var(--base-color-scale-gray-6);--brand-SubNav-color-link-rest:var(--brand-color-text-default);--brand-SubNav-color-link-active:var(--brand-color-text-default);--brand-SubNav-color-link-bgColor:#323834;--brand-SubNav-shadow:0px 100px 80px #00000003, 0px 41px 33px #00000005, 0px 22px 17px #00000005, 0px 12px 10px #00000008, 0px 6px 5px #0000000a, 0px 2px 2px #00000012}

package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/tiles/base-CX1T1tsR.css

@@ -0,0 +1 @@
+:root{--brand-Tiles-item-maxSize:11.5rem}

package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RiverBreakoutTabs.d.ts","sourceRoot":"","sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoF,MAAM,OAAO,CAAA;AAGxG,OAAO,EAAiC,KAAK,YAAY,EAAC,MAAM,OAAO,CAAA;AACvE,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAkB,KAAK,oBAAoB,EAAC,MAAM,gBAAgB,CAAA;AAOzE;;GAEG;AACH,OAAO,4FAA4F,CAAA;AACnG,OAAO,6FAA6F,CAAA;AAUpG,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAA;IACtC;;OAEG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAA;CACpC,CAAC,GACA,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC,CAAA;AAErD,MAAM,MAAM,0BAA0B,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC,CAAA;AAEF,MAAM,MAAM,iCAAiC,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACtE,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAChB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAC,CAAA;AAEF,MAAM,MAAM,6BAA6B,GAAG,YAAY,CAAA;AAExD,MAAM,MAAM,6BAA6B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAEhF,MAAM,MAAM,0BAA0B,GAAG,SAAS,CAAA;AAElD,MAAM,MAAM,4BAA4B,GAAG,oBAAoB,CAAA;AAmc/D;;GAEG;AACH,eAAO,MAAM,iBAAiB;2BAxeL,MAAM;oBACb,MAAM;eACX,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI;IAC1C;;;OAGG;uBACgB,KAAK,CAAC,SAAS;IAClC;;OAEG;oBACa,QAAQ,GAAG,WAAW;IACtC;;OAEG;gCACyB,OAAO;;;;wCA0C4B,iCAAiC;iDA6B/B,6BAA6B;mEAZ7F,6BAA6B;gCAX4B,0BAA0B;yBAR3C,0BAA0B;;CAwbnE,CAAA"}
+{"version":3,"file":"RiverBreakoutTabs.d.ts","sourceRoot":"","sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoF,MAAM,OAAO,CAAA;AAGxG,OAAO,EAAiC,KAAK,YAAY,EAAC,MAAM,OAAO,CAAA;AACvE,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAkB,KAAK,oBAAoB,EAAC,MAAM,gBAAgB,CAAA;AAOzE;;GAEG;AACH,OAAO,4FAA4F,CAAA;AACnG,OAAO,6FAA6F,CAAA;AAUpG,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAA;IACtC;;OAEG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAA;CACpC,CAAC,GACA,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC,CAAA;AAErD,MAAM,MAAM,0BAA0B,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC,CAAA;AAEF,MAAM,MAAM,iCAAiC,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACtE,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAChB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAC,CAAA;AAEF,MAAM,MAAM,6BAA6B,GAAG,YAAY,CAAA;AAExD,MAAM,MAAM,6BAA6B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAEhF,MAAM,MAAM,0BAA0B,GAAG,SAAS,CAAA;AAElD,MAAM,MAAM,4BAA4B,GAAG,oBAAoB,CAAA;AA4c/D;;GAEG;AACH,eAAO,MAAM,iBAAiB;2BAjfL,MAAM;oBACb,MAAM;eACX,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI;IAC1C;;;OAGG;uBACgB,KAAK,CAAC,SAAS;IAClC;;OAEG;oBACa,QAAQ,GAAG,WAAW;IACtC;;OAEG;gCACyB,OAAO;;;;wCA0C4B,iCAAiC;iDA6B/B,6BAA6B;mEAZ7F,6BAA6B;gCAX4B,0BAA0B;yBAR3C,0BAA0B;;CAicnE,CAAA"}

package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.js

@@ -45,10 +45,11 @@ var w = (e) => (t) => p.isValidElement(t) && t.type === e, T = ({ children: e })
 		...r,
 		children: i
 	});
-}, A = h(({ className: e, ...t }, n) => /* @__PURE__ */ S(s, {
-	ref: n,
-	className: e,
-	...t
+}, A = h(({ className: t, rounded: n = !0, ...r }, i) => /* @__PURE__ */ S(s, {
+	ref: i,
+	className: e(n && d["RiverBreakoutTabs__visual--rounded"], t),
+	rounded: n,
+	...r
 })), j = w(T), M = w(E), N = w(D), P = w(O), F = w(k), I = w(A), L = (e) => p.isValidElement(e) && e.type === n, R = (e) => p.isValidElement(e) && e.type === a, z = (e) => p.Children.toArray(e.props.children).reduce((e, t) => (N(t) && (e.icon = t), P(t) && (e.heading = t), F(t) && (e.content = t), I(t) && (e.visual = t), e), {
 	icon: null,
 	heading: null,
@@ -160,7 +161,10 @@ var w = (e) => (t) => p.isValidElement(t) && t.type === e, T = ({ children: e })
 			className: d.RiverBreakoutTabs__accordion,
 			children: [X >= 0 && N[X]?.visual && /* @__PURE__ */ C("div", {
 				className: d.RiverBreakoutTabs__accordionSharedVisuals,
-				children: [$, m(N[X].visual, { className: e(N[X].visual.props.className, d.RiverBreakoutTabs__accordionSharedVisual) })]
+				children: [$, m(N[X].visual, {
+					key: String(X),
+					className: e(N[X].visual.props.className, d.RiverBreakoutTabs__accordionSharedVisual)
+				})]
 			}), N.map((t, n) => /* @__PURE__ */ C(f, {
 				"data-index": n,
 				className: e(d.RiverBreakoutTabs__accordionItem, n === X && d["RiverBreakoutTabs__item--selected"], t.className),

package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"RiverBreakoutTabs.js","names":[],"sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx"],"sourcesContent":["import React, {cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Accordion, Heading, Link, Text, type HeadingProps} from '../..'\nimport {Icon, type IconProps} from '../../Icon'\nimport {RiverVisualBase, type RiverVisualBaseProps} from '../River/River'\nimport {useId} from '../../hooks/useId'\nimport {useTabs} from '../../hooks/useTabs'\nimport {useWindowSize} from '../../hooks/useWindowSize'\nimport riverStyles from '../river-shared.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/river.css'\n\n/** Main Stylesheet (as a CSS Module) */\nimport styles from './RiverBreakoutTabs.module.css'\n\nconst createComponentTypeGuard =\n  <T,>(componentType: React.ComponentType<T>) =>\n  (element: unknown): element is React.ReactElement<T> =>\n    React.isValidElement<T>(element) && element.type === componentType\n\nexport type RiverBreakoutTabsProps = React.PropsWithChildren<{\n  defaultSelectedIndex?: number\n  selectedIndex?: number\n  onChange?: (selectedIndex: number) => void\n  /**\n   * Decorative background rendered behind the visual and persisted across tab\n   * changes. Must not contain interactive and remain purely decorative.\n   */\n  backgroundVisual?: React.ReactNode\n  /**\n   * Alignment of media within the visual container when `backgroundVisual` is provided\n   */\n  imagePosition?: 'center' | 'block-end'\n  /**\n   * When `true`, the `backgroundVisual` bleeds out to the gridline edges instead of being inset within them\n   */\n  backgroundVisualFullBleed?: boolean\n}> &\n  Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>\n\nexport type RiverBreakoutTabsItemProps = React.PropsWithChildren<{\n  className?: string\n}>\n\nexport type RiverBreakoutTabsA11yHeadingProps = React.PropsWithChildren<{\n  as?: 'h2' | 'h3'\n  id?: string\n}>\n\nexport type RiverBreakoutTabsHeadingProps = HeadingProps\n\nexport type RiverBreakoutTabsContentProps = React.HTMLAttributes<HTMLDivElement>\n\nexport type RiverBreakoutTabsIconProps = IconProps\n\nexport type RiverBreakoutTabsVisualProps = RiverVisualBaseProps\n\ntype RiverBreakoutTabsItemChild =\n  | React.ReactElement<RiverBreakoutTabsIconProps>\n  | React.ReactElement<RiverBreakoutTabsHeadingProps>\n  | React.ReactElement<RiverBreakoutTabsContentProps>\n  | React.ReactElement<RiverBreakoutTabsVisualProps>\n\ntype ExtractedItemParts = {\n  icon: React.ReactElement<RiverBreakoutTabsIconProps> | null\n  heading: React.ReactElement<RiverBreakoutTabsHeadingProps> | null\n  content: React.ReactElement<RiverBreakoutTabsContentProps> | null\n  visual: React.ReactElement<RiverBreakoutTabsVisualProps> | null\n  className?: string\n}\n\ntype ExtractedContentParts = {\n  action: React.ReactElement<React.ComponentProps<typeof Link>> | null\n  body: React.ReactNode[]\n}\n\nconst RiverBreakoutTabsItem = ({children}: RiverBreakoutTabsItemProps) => <>{children}</>\n\nconst RiverBreakoutTabsA11yHeading = ({as = 'h3', children, id}: RiverBreakoutTabsA11yHeadingProps) => (\n  <Heading as={as} id={id} className=\"visually-hidden\">\n    {children}\n  </Heading>\n)\n\nconst RiverBreakoutTabsIcon = ({color = 'green', ...props}: RiverBreakoutTabsIconProps) => (\n  <Icon color={color} {...props} />\n)\n\nconst RiverBreakoutTabsHeading = ({\n  as = 'h3',\n  children,\n  className,\n  size = 'subhead-large',\n  weight = 'normal',\n  ...props\n}: RiverBreakoutTabsHeadingProps) => (\n  <Heading\n    as={as}\n    className={clsx(styles.RiverBreakoutTabs__heading, className)}\n    size={size}\n    weight={weight}\n    {...props}\n  >\n    {children}\n  </Heading>\n)\n\nconst RiverBreakoutTabsContent = ({children, className, ...props}: RiverBreakoutTabsContentProps) => {\n  const Children = useMemo(\n    () =>\n      React.Children.toArray(children).map(child => {\n        if (isTextChild(child)) {\n          return cloneElement(child, {\n            as: child.props.as ?? 'p',\n            variant: child.props.variant ?? 'muted',\n          })\n        }\n\n        if (isLinkChild(child)) {\n          return cloneElement(child, {\n            className: clsx(child.props.className, styles.RiverBreakoutTabs__link),\n            size: child.props.size ?? 'medium',\n            variant: child.props.variant ?? 'accent',\n          })\n        }\n\n        return child\n      }),\n    [children],\n  )\n\n  return (\n    <div className={clsx(styles.RiverBreakoutTabs__content, className)} {...props}>\n      {Children}\n    </div>\n  )\n}\n\nconst RiverBreakoutTabsVisual = forwardRef<HTMLDivElement, RiverBreakoutTabsVisualProps>(\n  ({className, ...props}, ref) => <RiverVisualBase ref={ref} className={className} {...props} />,\n)\n\nconst isItem = createComponentTypeGuard(RiverBreakoutTabsItem)\nconst isA11yHeading = createComponentTypeGuard(RiverBreakoutTabsA11yHeading)\nconst isIcon = createComponentTypeGuard(RiverBreakoutTabsIcon)\nconst isHeading = createComponentTypeGuard(RiverBreakoutTabsHeading)\nconst isContent = createComponentTypeGuard(RiverBreakoutTabsContent)\nconst isVisual = createComponentTypeGuard(RiverBreakoutTabsVisual)\n\nconst isTextChild = (child: React.ReactNode): child is React.ReactElement<React.ComponentProps<typeof Text>> =>\n  React.isValidElement<React.ComponentProps<typeof Text>>(child) && child.type === Text\n\nconst isLinkChild = (child: React.ReactNode): child is React.ReactElement<React.ComponentProps<typeof Link>> =>\n  React.isValidElement<React.ComponentProps<typeof Link>>(child) && child.type === Link\n\nconst extractItemParts = (item: React.ReactElement<RiverBreakoutTabsItemProps>): ExtractedItemParts => {\n  const Children = React.Children.toArray(item.props.children) as RiverBreakoutTabsItemChild[]\n\n  return Children.reduce<ExtractedItemParts>(\n    (acc, child) => {\n      if (isIcon(child)) {\n        acc.icon = child\n      }\n\n      if (isHeading(child)) {\n        acc.heading = child\n      }\n\n      if (isContent(child)) {\n        acc.content = child\n      }\n\n      if (isVisual(child)) {\n        acc.visual = child\n      }\n\n      return acc\n    },\n    {icon: null, heading: null, content: null, visual: null, className: item.props.className},\n  )\n}\n\nconst extractWideTabListContentParts = (\n  content: React.ReactElement<RiverBreakoutTabsContentProps> | null,\n): ExtractedContentParts => {\n  if (!content) {\n    return {action: null, body: []}\n  }\n\n  const Children = React.Children.toArray(content.props.children).map(child => {\n    if (isTextChild(child)) {\n      return cloneElement(child, {\n        as: child.props.as ?? 'p',\n        variant: child.props.variant ?? 'muted',\n      })\n    }\n\n    if (isLinkChild(child)) {\n      return cloneElement(child, {\n        className: clsx(child.props.className, styles.RiverBreakoutTabs__link),\n        size: child.props.size ?? 'medium',\n        variant: child.props.variant ?? 'accent',\n      })\n    }\n\n    return child\n  })\n\n  return Children.reduce<ExtractedContentParts>(\n    (acc, child) => {\n      if (isLinkChild(child)) {\n        if (!acc.action) {\n          acc.action = child\n        }\n\n        return acc\n      }\n\n      acc.body.push(child)\n      return acc\n    },\n    {action: null, body: []},\n  )\n}\n\nconst clampIndex = (index: number, length: number) => {\n  if (length === 0) return -1\n\n  const normalizedIndex = Number.isFinite(index) ? Math.trunc(index) : 0\n  return Math.min(Math.max(normalizedIndex, 0), length - 1)\n}\n\nconst RiverBreakoutTabsRoot = forwardRef<HTMLElement, RiverBreakoutTabsProps>(\n  (\n    {\n      children,\n      className,\n      defaultSelectedIndex = 0,\n      onChange,\n      selectedIndex,\n      backgroundVisual,\n      imagePosition = 'center',\n      backgroundVisualFullBleed = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const instanceId = useId()\n    const {isLarge} = useWindowSize()\n\n    const Children = useMemo(() => React.Children.toArray(children), [children])\n\n    const A11yHeadingChild = Children.find(isA11yHeading) ?? null\n    const Items = Children.filter(isItem)\n      .map(extractItemParts)\n      .filter(item => item.heading && item.content && item.visual)\n\n    const defaultActiveIndex = clampIndex(defaultSelectedIndex, Items.length)\n    const controlledActiveIndex =\n      typeof selectedIndex === 'number' && Number.isFinite(selectedIndex)\n        ? clampIndex(selectedIndex, Items.length)\n        : null\n    const initialActiveIndex = controlledActiveIndex ?? defaultActiveIndex\n    const headingId = A11yHeadingChild?.props.id ?? `${instanceId}-heading`\n    const wideTabListColumns = Math.min(Math.max(Items.length, 1), 3)\n    const initialActiveTab = initialActiveIndex >= 0 ? String(initialActiveIndex) : undefined\n    const isWideTabList = isLarge === true\n    const suppressOnTabActivateRef = useRef(false)\n\n    const handleTabActivate = useCallback(\n      (id: string) => {\n        if (suppressOnTabActivateRef.current) {\n          suppressOnTabActivateRef.current = false\n          return\n        }\n\n        if (!onChange) return\n\n        const nextIndex = Number(id)\n        if (!Number.isNaN(nextIndex)) {\n          onChange(nextIndex)\n        }\n      },\n      [onChange],\n    )\n\n    const {activeTab, activateTab, getTabListProps, getTabPanelProps, getTabProps} = useTabs({\n      defaultTab: initialActiveTab,\n      onTabActivate: handleTabActivate,\n    })\n\n    const [activeAccordionIndex, setActiveAccordionIndex] = useState(initialActiveIndex)\n\n    useEffect(() => {\n      if (activeTab === null) return\n\n      const nextIndex = Number(activeTab)\n      if (!Number.isNaN(nextIndex)) {\n        setActiveAccordionIndex(nextIndex)\n      }\n    }, [activeTab])\n\n    useEffect(() => {\n      if (controlledActiveIndex === null || controlledActiveIndex < 0) return\n\n      const controlledTab = String(controlledActiveIndex)\n      if (activeTab !== controlledTab) {\n        suppressOnTabActivateRef.current = true\n        activateTab(controlledTab)\n      }\n\n      setActiveAccordionIndex(controlledActiveIndex)\n    }, [activateTab, activeTab, controlledActiveIndex])\n\n    if (!A11yHeadingChild && (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        'RiverBreakoutTabs: A11yHeading child is required. This element will not be visible, only read by screenreaders.',\n      )\n    }\n\n    const handleAccordionOpen = (index: number) => (isOpen: boolean) => {\n      if (isOpen) {\n        setActiveAccordionIndex(index)\n        if (activeTab !== String(index)) {\n          activateTab(String(index))\n        }\n      }\n    }\n\n    const handleAccordionToggle: React.ReactEventHandler<HTMLDetailsElement> = event => {\n      const toggledIndex = Number(event.currentTarget.getAttribute('data-index'))\n\n      if (!event.currentTarget.open && activeAccordionIndex === toggledIndex) {\n        event.currentTarget.open = true\n      }\n    }\n\n    const tabListProps = A11yHeadingChild\n      ? getTabListProps({labelledBy: headingId})\n      : getTabListProps({label: 'River breakout tabs'})\n    const WideTabListContentParts = useMemo(\n      () => Items.map(item => extractWideTabListContentParts(item.content)),\n      [Items],\n    )\n\n    const BackgroundVisualLayer =\n      backgroundVisual != null ? (\n        <div className={styles.RiverBreakoutTabs__backgroundVisual} aria-hidden=\"true\">\n          {backgroundVisual}\n        </div>\n      ) : null\n\n    return (\n      <section\n        ref={ref}\n        className={clsx(\n          riverStyles.RiverBreakout,\n          riverStyles['RiverBreakout--variant-gridline'],\n          gridlineStyles.gridline,\n          styles.RiverBreakoutTabs,\n          backgroundVisual != null && styles['RiverBreakoutTabs--has-background-visual'],\n          backgroundVisual != null &&\n            imagePosition === 'block-end' &&\n            styles['RiverBreakoutTabs--image-position-block-end'],\n          backgroundVisual != null &&\n            backgroundVisualFullBleed &&\n            styles['RiverBreakoutTabs--background-visual-full-bleed'],\n          className,\n        )}\n        {...props}\n      >\n        {A11yHeadingChild && cloneElement(A11yHeadingChild, {id: headingId})}\n\n        {isWideTabList ? (\n          <div className={styles.RiverBreakoutTabs__wideTabList}>\n            <div\n              {...tabListProps}\n              className={styles.RiverBreakoutTabs__tablist}\n              style={{'--river-breakout-tabs-columns': String(wideTabListColumns)} as React.CSSProperties}\n            >\n              {Items.map((item, index) => {\n                const isSelected = activeTab === String(index)\n                const tabProps = getTabProps<HTMLButtonElement>(String(index))\n                const {body} = WideTabListContentParts[index]\n\n                return (\n                  <div\n                    key={index}\n                    className={clsx(\n                      styles.RiverBreakoutTabs__item,\n                      isSelected && styles['RiverBreakoutTabs__item--selected'],\n                      item.className,\n                    )}\n                  >\n                    <button type=\"button\" {...tabProps} className={styles.RiverBreakoutTabs__tab}>\n                      {item.icon &&\n                        cloneElement(item.icon, {\n                          className: item.icon.props.className,\n                        })}\n\n                      {item.heading &&\n                        cloneElement(item.heading, {\n                          className: clsx(item.heading.props.className, styles.RiverBreakoutTabs__tabHeading),\n                        })}\n\n                      {body.length > 0 && <div className={styles.RiverBreakoutTabs__wideTabListContent}>{body}</div>}\n                    </button>\n                  </div>\n                )\n              })}\n            </div>\n\n            <div className={styles.RiverBreakoutTabs__sharedVisuals}>\n              {BackgroundVisualLayer}\n              {Items.map((item, index) => {\n                const panelProps = getTabPanelProps(String(index))\n\n                return (\n                  <div\n                    key={index}\n                    {...panelProps}\n                    tabIndex={-1}\n                    className={styles.RiverBreakoutTabs__sharedVisualPanel}\n                  >\n                    {cloneElement(item.visual as React.ReactElement<RiverBreakoutTabsVisualProps>, {\n                      className: clsx(item.visual?.props.className, styles.RiverBreakoutTabs__sharedVisual),\n                    })}\n                  </div>\n                )\n              })}\n            </div>\n\n            {WideTabListContentParts.some(content => content.action) && (\n              <div\n                className={styles.RiverBreakoutTabs__wideTabListActions}\n                style={{'--river-breakout-tabs-columns': String(wideTabListColumns)} as React.CSSProperties}\n              >\n                {Items.map((_, index) => {\n                  const {action} = WideTabListContentParts[index]\n\n                  return (\n                    <div key={index} className={styles.RiverBreakoutTabs__wideTabListActionItem}>\n                      {action &&\n                        cloneElement(action, {\n                          className: clsx(action.props.className, styles.RiverBreakoutTabs__wideTabListAction),\n                        })}\n                    </div>\n                  )\n                })}\n              </div>\n            )}\n          </div>\n        ) : (\n          <div className={styles.RiverBreakoutTabs__accordion}>\n            {activeAccordionIndex >= 0 && Items[activeAccordionIndex]?.visual && (\n              <div className={styles.RiverBreakoutTabs__accordionSharedVisuals}>\n                {BackgroundVisualLayer}\n                {cloneElement(Items[activeAccordionIndex].visual as React.ReactElement<RiverBreakoutTabsVisualProps>, {\n                  className: clsx(\n                    Items[activeAccordionIndex].visual.props.className,\n                    styles.RiverBreakoutTabs__accordionSharedVisual,\n                  ),\n                })}\n              </div>\n            )}\n\n            {Items.map((item, index) => {\n              return (\n                <Accordion\n                  key={index}\n                  data-index={index}\n                  className={clsx(\n                    styles.RiverBreakoutTabs__accordionItem,\n                    index === activeAccordionIndex && styles['RiverBreakoutTabs__item--selected'],\n                    item.className,\n                  )}\n                  onToggle={handleAccordionToggle}\n                  open={index === activeAccordionIndex}\n                  handleOpen={handleAccordionOpen(index)}\n                >\n                  <Accordion.Heading className={styles.RiverBreakoutTabs__accordionHeading}>\n                    <span className={styles.RiverBreakoutTabs__accordionHeadingInner}>\n                      {item.icon &&\n                        cloneElement(item.icon, {\n                          className: clsx(item.icon.props.className, styles.RiverBreakoutTabs__accordionIcon),\n                        })}\n                      <span className={styles.RiverBreakoutTabs__accordionLabel}>{item.heading?.props.children}</span>\n                    </span>\n                  </Accordion.Heading>\n\n                  <Accordion.Content className={styles.RiverBreakoutTabs__accordionPanel}>\n                    {cloneElement(item.content as React.ReactElement<RiverBreakoutTabsContentProps>, {\n                      className: clsx(item.content?.props.className, styles.RiverBreakoutTabs__accordionContent),\n                    })}\n                  </Accordion.Content>\n                </Accordion>\n              )\n            })}\n          </div>\n        )}\n      </section>\n    )\n  },\n)\n\n/**\n * Use RiverBreakoutTabs to showcase multiple feature stories within a single immersive surface.\n */\nexport const RiverBreakoutTabs = Object.assign(RiverBreakoutTabsRoot, {\n  A11yHeading: RiverBreakoutTabsA11yHeading,\n  Content: RiverBreakoutTabsContent,\n  Heading: RiverBreakoutTabsHeading,\n  Icon: RiverBreakoutTabsIcon,\n  Item: RiverBreakoutTabsItem,\n  Visual: RiverBreakoutTabsVisual,\n})\n"],"mappings":"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"}
+{"version":3,"file":"RiverBreakoutTabs.js","names":[],"sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx"],"sourcesContent":["import React, {cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Accordion, Heading, Link, Text, type HeadingProps} from '../..'\nimport {Icon, type IconProps} from '../../Icon'\nimport {RiverVisualBase, type RiverVisualBaseProps} from '../River/River'\nimport {useId} from '../../hooks/useId'\nimport {useTabs} from '../../hooks/useTabs'\nimport {useWindowSize} from '../../hooks/useWindowSize'\nimport riverStyles from '../river-shared.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/river.css'\n\n/** Main Stylesheet (as a CSS Module) */\nimport styles from './RiverBreakoutTabs.module.css'\n\nconst createComponentTypeGuard =\n  <T,>(componentType: React.ComponentType<T>) =>\n  (element: unknown): element is React.ReactElement<T> =>\n    React.isValidElement<T>(element) && element.type === componentType\n\nexport type RiverBreakoutTabsProps = React.PropsWithChildren<{\n  defaultSelectedIndex?: number\n  selectedIndex?: number\n  onChange?: (selectedIndex: number) => void\n  /**\n   * Decorative background rendered behind the visual and persisted across tab\n   * changes. Must not contain interactive and remain purely decorative.\n   */\n  backgroundVisual?: React.ReactNode\n  /**\n   * Alignment of media within the visual container when `backgroundVisual` is provided\n   */\n  imagePosition?: 'center' | 'block-end'\n  /**\n   * When `true`, the `backgroundVisual` bleeds out to the gridline edges instead of being inset within them\n   */\n  backgroundVisualFullBleed?: boolean\n}> &\n  Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>\n\nexport type RiverBreakoutTabsItemProps = React.PropsWithChildren<{\n  className?: string\n}>\n\nexport type RiverBreakoutTabsA11yHeadingProps = React.PropsWithChildren<{\n  as?: 'h2' | 'h3'\n  id?: string\n}>\n\nexport type RiverBreakoutTabsHeadingProps = HeadingProps\n\nexport type RiverBreakoutTabsContentProps = React.HTMLAttributes<HTMLDivElement>\n\nexport type RiverBreakoutTabsIconProps = IconProps\n\nexport type RiverBreakoutTabsVisualProps = RiverVisualBaseProps\n\ntype RiverBreakoutTabsItemChild =\n  | React.ReactElement<RiverBreakoutTabsIconProps>\n  | React.ReactElement<RiverBreakoutTabsHeadingProps>\n  | React.ReactElement<RiverBreakoutTabsContentProps>\n  | React.ReactElement<RiverBreakoutTabsVisualProps>\n\ntype ExtractedItemParts = {\n  icon: React.ReactElement<RiverBreakoutTabsIconProps> | null\n  heading: React.ReactElement<RiverBreakoutTabsHeadingProps> | null\n  content: React.ReactElement<RiverBreakoutTabsContentProps> | null\n  visual: React.ReactElement<RiverBreakoutTabsVisualProps> | null\n  className?: string\n}\n\ntype ExtractedContentParts = {\n  action: React.ReactElement<React.ComponentProps<typeof Link>> | null\n  body: React.ReactNode[]\n}\n\nconst RiverBreakoutTabsItem = ({children}: RiverBreakoutTabsItemProps) => <>{children}</>\n\nconst RiverBreakoutTabsA11yHeading = ({as = 'h3', children, id}: RiverBreakoutTabsA11yHeadingProps) => (\n  <Heading as={as} id={id} className=\"visually-hidden\">\n    {children}\n  </Heading>\n)\n\nconst RiverBreakoutTabsIcon = ({color = 'green', ...props}: RiverBreakoutTabsIconProps) => (\n  <Icon color={color} {...props} />\n)\n\nconst RiverBreakoutTabsHeading = ({\n  as = 'h3',\n  children,\n  className,\n  size = 'subhead-large',\n  weight = 'normal',\n  ...props\n}: RiverBreakoutTabsHeadingProps) => (\n  <Heading\n    as={as}\n    className={clsx(styles.RiverBreakoutTabs__heading, className)}\n    size={size}\n    weight={weight}\n    {...props}\n  >\n    {children}\n  </Heading>\n)\n\nconst RiverBreakoutTabsContent = ({children, className, ...props}: RiverBreakoutTabsContentProps) => {\n  const Children = useMemo(\n    () =>\n      React.Children.toArray(children).map(child => {\n        if (isTextChild(child)) {\n          return cloneElement(child, {\n            as: child.props.as ?? 'p',\n            variant: child.props.variant ?? 'muted',\n          })\n        }\n\n        if (isLinkChild(child)) {\n          return cloneElement(child, {\n            className: clsx(child.props.className, styles.RiverBreakoutTabs__link),\n            size: child.props.size ?? 'medium',\n            variant: child.props.variant ?? 'accent',\n          })\n        }\n\n        return child\n      }),\n    [children],\n  )\n\n  return (\n    <div className={clsx(styles.RiverBreakoutTabs__content, className)} {...props}>\n      {Children}\n    </div>\n  )\n}\n\nconst RiverBreakoutTabsVisual = forwardRef<HTMLDivElement, RiverBreakoutTabsVisualProps>(\n  ({className, rounded = true, ...props}, ref) => (\n    <RiverVisualBase\n      ref={ref}\n      className={clsx(rounded && styles['RiverBreakoutTabs__visual--rounded'], className)}\n      rounded={rounded}\n      {...props}\n    />\n  ),\n)\n\nconst isItem = createComponentTypeGuard(RiverBreakoutTabsItem)\nconst isA11yHeading = createComponentTypeGuard(RiverBreakoutTabsA11yHeading)\nconst isIcon = createComponentTypeGuard(RiverBreakoutTabsIcon)\nconst isHeading = createComponentTypeGuard(RiverBreakoutTabsHeading)\nconst isContent = createComponentTypeGuard(RiverBreakoutTabsContent)\nconst isVisual = createComponentTypeGuard(RiverBreakoutTabsVisual)\n\nconst isTextChild = (child: React.ReactNode): child is React.ReactElement<React.ComponentProps<typeof Text>> =>\n  React.isValidElement<React.ComponentProps<typeof Text>>(child) && child.type === Text\n\nconst isLinkChild = (child: React.ReactNode): child is React.ReactElement<React.ComponentProps<typeof Link>> =>\n  React.isValidElement<React.ComponentProps<typeof Link>>(child) && child.type === Link\n\nconst extractItemParts = (item: React.ReactElement<RiverBreakoutTabsItemProps>): ExtractedItemParts => {\n  const Children = React.Children.toArray(item.props.children) as RiverBreakoutTabsItemChild[]\n\n  return Children.reduce<ExtractedItemParts>(\n    (acc, child) => {\n      if (isIcon(child)) {\n        acc.icon = child\n      }\n\n      if (isHeading(child)) {\n        acc.heading = child\n      }\n\n      if (isContent(child)) {\n        acc.content = child\n      }\n\n      if (isVisual(child)) {\n        acc.visual = child\n      }\n\n      return acc\n    },\n    {icon: null, heading: null, content: null, visual: null, className: item.props.className},\n  )\n}\n\nconst extractWideTabListContentParts = (\n  content: React.ReactElement<RiverBreakoutTabsContentProps> | null,\n): ExtractedContentParts => {\n  if (!content) {\n    return {action: null, body: []}\n  }\n\n  const Children = React.Children.toArray(content.props.children).map(child => {\n    if (isTextChild(child)) {\n      return cloneElement(child, {\n        as: child.props.as ?? 'p',\n        variant: child.props.variant ?? 'muted',\n      })\n    }\n\n    if (isLinkChild(child)) {\n      return cloneElement(child, {\n        className: clsx(child.props.className, styles.RiverBreakoutTabs__link),\n        size: child.props.size ?? 'medium',\n        variant: child.props.variant ?? 'accent',\n      })\n    }\n\n    return child\n  })\n\n  return Children.reduce<ExtractedContentParts>(\n    (acc, child) => {\n      if (isLinkChild(child)) {\n        if (!acc.action) {\n          acc.action = child\n        }\n\n        return acc\n      }\n\n      acc.body.push(child)\n      return acc\n    },\n    {action: null, body: []},\n  )\n}\n\nconst clampIndex = (index: number, length: number) => {\n  if (length === 0) return -1\n\n  const normalizedIndex = Number.isFinite(index) ? Math.trunc(index) : 0\n  return Math.min(Math.max(normalizedIndex, 0), length - 1)\n}\n\nconst RiverBreakoutTabsRoot = forwardRef<HTMLElement, RiverBreakoutTabsProps>(\n  (\n    {\n      children,\n      className,\n      defaultSelectedIndex = 0,\n      onChange,\n      selectedIndex,\n      backgroundVisual,\n      imagePosition = 'center',\n      backgroundVisualFullBleed = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const instanceId = useId()\n    const {isLarge} = useWindowSize()\n\n    const Children = useMemo(() => React.Children.toArray(children), [children])\n\n    const A11yHeadingChild = Children.find(isA11yHeading) ?? null\n    const Items = Children.filter(isItem)\n      .map(extractItemParts)\n      .filter(item => item.heading && item.content && item.visual)\n\n    const defaultActiveIndex = clampIndex(defaultSelectedIndex, Items.length)\n    const controlledActiveIndex =\n      typeof selectedIndex === 'number' && Number.isFinite(selectedIndex)\n        ? clampIndex(selectedIndex, Items.length)\n        : null\n    const initialActiveIndex = controlledActiveIndex ?? defaultActiveIndex\n    const headingId = A11yHeadingChild?.props.id ?? `${instanceId}-heading`\n    const wideTabListColumns = Math.min(Math.max(Items.length, 1), 3)\n    const initialActiveTab = initialActiveIndex >= 0 ? String(initialActiveIndex) : undefined\n    const isWideTabList = isLarge === true\n    const suppressOnTabActivateRef = useRef(false)\n\n    const handleTabActivate = useCallback(\n      (id: string) => {\n        if (suppressOnTabActivateRef.current) {\n          suppressOnTabActivateRef.current = false\n          return\n        }\n\n        if (!onChange) return\n\n        const nextIndex = Number(id)\n        if (!Number.isNaN(nextIndex)) {\n          onChange(nextIndex)\n        }\n      },\n      [onChange],\n    )\n\n    const {activeTab, activateTab, getTabListProps, getTabPanelProps, getTabProps} = useTabs({\n      defaultTab: initialActiveTab,\n      onTabActivate: handleTabActivate,\n    })\n\n    const [activeAccordionIndex, setActiveAccordionIndex] = useState(initialActiveIndex)\n\n    useEffect(() => {\n      if (activeTab === null) return\n\n      const nextIndex = Number(activeTab)\n      if (!Number.isNaN(nextIndex)) {\n        setActiveAccordionIndex(nextIndex)\n      }\n    }, [activeTab])\n\n    useEffect(() => {\n      if (controlledActiveIndex === null || controlledActiveIndex < 0) return\n\n      const controlledTab = String(controlledActiveIndex)\n      if (activeTab !== controlledTab) {\n        suppressOnTabActivateRef.current = true\n        activateTab(controlledTab)\n      }\n\n      setActiveAccordionIndex(controlledActiveIndex)\n    }, [activateTab, activeTab, controlledActiveIndex])\n\n    if (!A11yHeadingChild && (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        'RiverBreakoutTabs: A11yHeading child is required. This element will not be visible, only read by screenreaders.',\n      )\n    }\n\n    const handleAccordionOpen = (index: number) => (isOpen: boolean) => {\n      if (isOpen) {\n        setActiveAccordionIndex(index)\n        if (activeTab !== String(index)) {\n          activateTab(String(index))\n        }\n      }\n    }\n\n    const handleAccordionToggle: React.ReactEventHandler<HTMLDetailsElement> = event => {\n      const toggledIndex = Number(event.currentTarget.getAttribute('data-index'))\n\n      if (!event.currentTarget.open && activeAccordionIndex === toggledIndex) {\n        event.currentTarget.open = true\n      }\n    }\n\n    const tabListProps = A11yHeadingChild\n      ? getTabListProps({labelledBy: headingId})\n      : getTabListProps({label: 'River breakout tabs'})\n    const WideTabListContentParts = useMemo(\n      () => Items.map(item => extractWideTabListContentParts(item.content)),\n      [Items],\n    )\n\n    const BackgroundVisualLayer =\n      backgroundVisual != null ? (\n        <div className={styles.RiverBreakoutTabs__backgroundVisual} aria-hidden=\"true\">\n          {backgroundVisual}\n        </div>\n      ) : null\n\n    return (\n      <section\n        ref={ref}\n        className={clsx(\n          riverStyles.RiverBreakout,\n          riverStyles['RiverBreakout--variant-gridline'],\n          gridlineStyles.gridline,\n          styles.RiverBreakoutTabs,\n          backgroundVisual != null && styles['RiverBreakoutTabs--has-background-visual'],\n          backgroundVisual != null &&\n            imagePosition === 'block-end' &&\n            styles['RiverBreakoutTabs--image-position-block-end'],\n          backgroundVisual != null &&\n            backgroundVisualFullBleed &&\n            styles['RiverBreakoutTabs--background-visual-full-bleed'],\n          className,\n        )}\n        {...props}\n      >\n        {A11yHeadingChild && cloneElement(A11yHeadingChild, {id: headingId})}\n\n        {isWideTabList ? (\n          <div className={styles.RiverBreakoutTabs__wideTabList}>\n            <div\n              {...tabListProps}\n              className={styles.RiverBreakoutTabs__tablist}\n              style={{'--river-breakout-tabs-columns': String(wideTabListColumns)} as React.CSSProperties}\n            >\n              {Items.map((item, index) => {\n                const isSelected = activeTab === String(index)\n                const tabProps = getTabProps<HTMLButtonElement>(String(index))\n                const {body} = WideTabListContentParts[index]\n\n                return (\n                  <div\n                    key={index}\n                    className={clsx(\n                      styles.RiverBreakoutTabs__item,\n                      isSelected && styles['RiverBreakoutTabs__item--selected'],\n                      item.className,\n                    )}\n                  >\n                    <button type=\"button\" {...tabProps} className={styles.RiverBreakoutTabs__tab}>\n                      {item.icon &&\n                        cloneElement(item.icon, {\n                          className: item.icon.props.className,\n                        })}\n\n                      {item.heading &&\n                        cloneElement(item.heading, {\n                          className: clsx(item.heading.props.className, styles.RiverBreakoutTabs__tabHeading),\n                        })}\n\n                      {body.length > 0 && <div className={styles.RiverBreakoutTabs__wideTabListContent}>{body}</div>}\n                    </button>\n                  </div>\n                )\n              })}\n            </div>\n\n            <div className={styles.RiverBreakoutTabs__sharedVisuals}>\n              {BackgroundVisualLayer}\n              {Items.map((item, index) => {\n                const panelProps = getTabPanelProps(String(index))\n\n                return (\n                  <div\n                    key={index}\n                    {...panelProps}\n                    tabIndex={-1}\n                    className={styles.RiverBreakoutTabs__sharedVisualPanel}\n                  >\n                    {cloneElement(item.visual as React.ReactElement<RiverBreakoutTabsVisualProps>, {\n                      className: clsx(item.visual?.props.className, styles.RiverBreakoutTabs__sharedVisual),\n                    })}\n                  </div>\n                )\n              })}\n            </div>\n\n            {WideTabListContentParts.some(content => content.action) && (\n              <div\n                className={styles.RiverBreakoutTabs__wideTabListActions}\n                style={{'--river-breakout-tabs-columns': String(wideTabListColumns)} as React.CSSProperties}\n              >\n                {Items.map((_, index) => {\n                  const {action} = WideTabListContentParts[index]\n\n                  return (\n                    <div key={index} className={styles.RiverBreakoutTabs__wideTabListActionItem}>\n                      {action &&\n                        cloneElement(action, {\n                          className: clsx(action.props.className, styles.RiverBreakoutTabs__wideTabListAction),\n                        })}\n                    </div>\n                  )\n                })}\n              </div>\n            )}\n          </div>\n        ) : (\n          <div className={styles.RiverBreakoutTabs__accordion}>\n            {activeAccordionIndex >= 0 && Items[activeAccordionIndex]?.visual && (\n              <div className={styles.RiverBreakoutTabs__accordionSharedVisuals}>\n                {BackgroundVisualLayer}\n                {cloneElement(Items[activeAccordionIndex].visual as React.ReactElement<RiverBreakoutTabsVisualProps>, {\n                  // Remount the visual so new media autoplays when the active item changes.\n                  key: String(activeAccordionIndex),\n                  className: clsx(\n                    Items[activeAccordionIndex].visual.props.className,\n                    styles.RiverBreakoutTabs__accordionSharedVisual,\n                  ),\n                })}\n              </div>\n            )}\n\n            {Items.map((item, index) => {\n              return (\n                <Accordion\n                  key={index}\n                  data-index={index}\n                  className={clsx(\n                    styles.RiverBreakoutTabs__accordionItem,\n                    index === activeAccordionIndex && styles['RiverBreakoutTabs__item--selected'],\n                    item.className,\n                  )}\n                  onToggle={handleAccordionToggle}\n                  open={index === activeAccordionIndex}\n                  handleOpen={handleAccordionOpen(index)}\n                >\n                  <Accordion.Heading className={styles.RiverBreakoutTabs__accordionHeading}>\n                    <span className={styles.RiverBreakoutTabs__accordionHeadingInner}>\n                      {item.icon &&\n                        cloneElement(item.icon, {\n                          className: clsx(item.icon.props.className, styles.RiverBreakoutTabs__accordionIcon),\n                        })}\n                      <span className={styles.RiverBreakoutTabs__accordionLabel}>{item.heading?.props.children}</span>\n                    </span>\n                  </Accordion.Heading>\n\n                  <Accordion.Content className={styles.RiverBreakoutTabs__accordionPanel}>\n                    {cloneElement(item.content as React.ReactElement<RiverBreakoutTabsContentProps>, {\n                      className: clsx(item.content?.props.className, styles.RiverBreakoutTabs__accordionContent),\n                    })}\n                  </Accordion.Content>\n                </Accordion>\n              )\n            })}\n          </div>\n        )}\n      </section>\n    )\n  },\n)\n\n/**\n * Use RiverBreakoutTabs to showcase multiple feature stories within a single immersive surface.\n */\nexport const RiverBreakoutTabs = Object.assign(RiverBreakoutTabsRoot, {\n  A11yHeading: RiverBreakoutTabsA11yHeading,\n  Content: RiverBreakoutTabsContent,\n  Heading: RiverBreakoutTabsHeading,\n  Icon: RiverBreakoutTabsIcon,\n  Item: RiverBreakoutTabsItem,\n  Visual: RiverBreakoutTabsVisual,\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;AAqBA,IAAM,KACC,OACJ,MACC,EAAM,eAAkB,CAAO,KAAK,EAAQ,SAAS,GA0DnD,KAAyB,EAAC,kBAA0C,kBAAA,GAAA,EAAG,YAAW,CAAA,GAElF,KAAgC,EAAC,QAAK,MAAM,aAAU,YAC1D,kBAAC,GAAD;CAAa;CAAQ;CAAI,WAAU;CAChC;AACM,CAAA,GAGL,KAAyB,EAAC,WAAQ,SAAS,GAAG,QAClD,kBAAC,GAAD;CAAa;CAAO,GAAI;AAAQ,CAAA,GAG5B,KAA4B,EAChC,QAAK,MACL,aACA,cACA,UAAO,iBACP,YAAS,UACT,GAAG,QAEH,kBAAC,GAAD;CACM;CACJ,WAAW,EAAK,EAAO,4BAA4B,CAAS;CACtD;CACE;CACR,GAAI;CAEH;AACM,CAAA,GAGL,KAA4B,EAAC,aAAU,cAAW,GAAG,QAA0C;CACnG,IAAM,IAAW,QAEb,EAAM,SAAS,QAAQ,CAAQ,CAAC,CAAC,KAAI,MAC/B,EAAY,CAAK,IACZ,EAAa,GAAO;EACzB,IAAI,EAAM,MAAM,MAAM;EACtB,SAAS,EAAM,MAAM,WAAW;CAClC,CAAC,IAGC,EAAY,CAAK,IACZ,EAAa,GAAO;EACzB,WAAW,EAAK,EAAM,MAAM,WAAW,EAAO,uBAAuB;EACrE,MAAM,EAAM,MAAM,QAAQ;EAC1B,SAAS,EAAM,MAAM,WAAW;CAClC,CAAC,IAGI,CACR,GACH,CAAC,CAAQ,CACX;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW,EAAK,EAAO,4BAA4B,CAAS;EAAG,GAAI;YACrE;CACE,CAAA;AAET,GAEM,IAA0B,GAC7B,EAAC,cAAW,aAAU,IAAM,GAAG,KAAQ,MACtC,kBAAC,GAAD;CACO;CACL,WAAW,EAAK,KAAW,EAAO,uCAAuC,CAAS;CACzE;CACT,GAAI;AACL,CAAA,CAEL,GAEM,IAAS,EAAyB,CAAqB,GACvD,IAAgB,EAAyB,CAA4B,GACrE,IAAS,EAAyB,CAAqB,GACvD,IAAY,EAAyB,CAAwB,GAC7D,IAAY,EAAyB,CAAwB,GAC7D,IAAW,EAAyB,CAAuB,GAE3D,KAAe,MACnB,EAAM,eAAkD,CAAK,KAAK,EAAM,SAAS,GAE7E,KAAe,MACnB,EAAM,eAAkD,CAAK,KAAK,EAAM,SAAS,GAE7E,KAAoB,MACP,EAAM,SAAS,QAAQ,EAAK,MAAM,QAE5C,CAAA,CAAS,QACb,GAAK,OACA,EAAO,CAAK,MACd,EAAI,OAAO,IAGT,EAAU,CAAK,MACjB,EAAI,UAAU,IAGZ,EAAU,CAAK,MACjB,EAAI,UAAU,IAGZ,EAAS,CAAK,MAChB,EAAI,SAAS,IAGR,IAET;CAAC,MAAM;CAAM,SAAS;CAAM,SAAS;CAAM,QAAQ;CAAM,WAAW,EAAK,MAAM;AAAS,CAC1F,GAGI,KACJ,MAEK,IAIY,EAAM,SAAS,QAAQ,EAAQ,MAAM,QAAQ,CAAC,CAAC,KAAI,MAC9D,EAAY,CAAK,IACZ,EAAa,GAAO;CACzB,IAAI,EAAM,MAAM,MAAM;CACtB,SAAS,EAAM,MAAM,WAAW;AAClC,CAAC,IAGC,EAAY,CAAK,IACZ,EAAa,GAAO;CACzB,WAAW,EAAK,EAAM,MAAM,WAAW,EAAO,uBAAuB;CACrE,MAAM,EAAM,MAAM,QAAQ;CAC1B,SAAS,EAAM,MAAM,WAAW;AAClC,CAAC,IAGI,CAGF,CAAA,CAAS,QACb,GAAK,MACA,EAAY,CAAK,KACnB,AACE,EAAI,WAAS,GAGR,MAGT,EAAI,KAAK,KAAK,CAAK,GACZ,IAET;CAAC,QAAQ;CAAM,MAAM,CAAC;AAAC,CACzB,IApCS;CAAC,QAAQ;CAAM,MAAM,CAAC;AAAC,GAuC5B,KAAc,GAAe,MAC7B,MAAW,IAAU,KAGlB,KAAK,IAAI,KAAK,IADG,OAAO,SAAS,CAAK,IAAI,KAAK,MAAM,CAAK,IAAI,GAC3B,CAAC,GAAG,IAAS,CAAC,GAGpD,IAAwB,GAE1B,EACE,aACA,cACA,0BAAuB,GACvB,aACA,kBACA,qBACA,mBAAgB,UAChB,+BAA4B,IAC5B,GAAG,KAEL,MACG;CACH,IAAM,IAAa,EAAM,GACnB,EAAC,eAAW,EAAc,GAE1B,IAAW,QAAc,EAAM,SAAS,QAAQ,CAAQ,GAAG,CAAC,CAAQ,CAAC,GAErE,IAAmB,EAAS,KAAK,CAAa,KAAK,MACnD,IAAQ,EAAS,OAAO,CAAM,CAAC,CAClC,IAAI,CAAgB,CAAC,CACrB,QAAO,MAAQ,EAAK,WAAW,EAAK,WAAW,EAAK,MAAM,GAEvD,IAAqB,EAAW,GAAsB,EAAM,MAAM,GAClE,IACJ,OAAO,KAAkB,YAAY,OAAO,SAAS,CAAa,IAC9D,EAAW,GAAe,EAAM,MAAM,IACtC,MACA,IAAqB,KAAyB,GAC9C,IAAY,GAAkB,MAAM,MAAM,GAAG,EAAW,WACxD,IAAqB,KAAK,IAAI,KAAK,IAAI,EAAM,QAAQ,CAAC,GAAG,CAAC,GAC1D,IAAmB,KAAsB,IAAI,OAAO,CAAkB,IAAI,KAAA,GAC1E,IAAgB,MAAY,IAC5B,IAA2B,EAAO,EAAK,GAmBvC,EAAC,cAAW,gBAAa,oBAAiB,qBAAkB,mBAAe,EAAQ;EACvF,YAAY;EACZ,eAnBwB,GACvB,MAAe;GACd,IAAI,EAAyB,SAAS;IACpC,EAAyB,UAAU;IACnC;GACF;GAEA,IAAI,CAAC,GAAU;GAEf,IAAM,IAAY,OAAO,CAAE;GAC3B,AAAK,OAAO,MAAM,CAAS,KACzB,EAAS,CAAS;EAEtB,GACA,CAAC,CAAQ,CAKM;CACjB,CAAC,GAEK,CAAC,GAAsB,KAA2B,EAAS,CAAkB;CAuBnF,AArBA,QAAgB;EACd,IAAI,MAAc,MAAM;EAExB,IAAM,IAAY,OAAO,CAAS;EAClC,AAAK,OAAO,MAAM,CAAS,KACzB,EAAwB,CAAS;CAErC,GAAG,CAAC,CAAS,CAAC,GAEd,QAAgB;EACd,IAAI,MAA0B,QAAQ,IAAwB,GAAG;EAEjE,IAAM,IAAgB,OAAO,CAAqB;EAMlD,AALI,MAAc,MAChB,EAAyB,UAAU,IACnC,EAAY,CAAa,IAG3B,EAAwB,CAAqB;CAC/C,GAAG;EAAC;EAAa;EAAW;CAAqB,CAAC,GAE9C,CAAC,MAAA,QAAA,IAAA,aAA8C,iBAAA,QAAA,IAAA,aAA0C,WAE3F,QAAQ,KACN,iHACF;CAGF,IAAM,MAAuB,OAAmB,MAAoB;EAClE,AAAI,MACF,EAAwB,CAAK,GACzB,MAAc,OAAO,CAAK,KAC5B,EAAY,OAAO,CAAK,CAAC;CAG/B,GAEM,MAAqE,MAAS;EAClF,IAAM,IAAe,OAAO,EAAM,cAAc,aAAa,YAAY,CAAC;EAE1E,AAAI,CAAC,EAAM,cAAc,QAAQ,MAAyB,MACxD,EAAM,cAAc,OAAO;CAE/B,GAEM,KACF,EADiB,IACD,EAAC,YAAY,EAAS,IACtB,EAAC,OAAO,sBAAqB,CAAC,GAC5C,IAA0B,QACxB,EAAM,KAAI,MAAQ,EAA+B,EAAK,OAAO,CAAC,GACpE,CAAC,CAAK,CACR,GAEM,IACJ,KAAoB,OAIhB,OAHF,kBAAC,OAAD;EAAK,WAAW,EAAO;EAAqC,eAAY;YACrE;CACE,CAAA;CAGT,OACE,kBAAC,WAAD;EACO;EACL,WAAW,EACT,EAAY,eACZ,EAAY,oCACZ,EAAe,UACf,EAAO,mBACP,KAAoB,QAAQ,EAAO,6CACnC,KAAoB,QAClB,MAAkB,eAClB,EAAO,gDACT,KAAoB,QAClB,KACA,EAAO,oDACT,CACF;EACA,GAAI;YAhBN,CAkBG,KAAoB,EAAa,GAAkB,EAAC,IAAI,EAAS,CAAC,GAElE,IACC,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB;IACE,kBAAC,OAAD;KACE,GAAI;KACJ,WAAW,EAAO;KAClB,OAAO,EAAC,iCAAiC,OAAO,CAAkB,EAAC;eAElE,EAAM,KAAK,GAAM,MAAU;MAC1B,IAAM,IAAa,MAAc,OAAO,CAAK,GACvC,IAAW,EAA+B,OAAO,CAAK,CAAC,GACvD,EAAC,YAAQ,EAAwB;MAEvC,OACE,kBAAC,OAAD;OAEE,WAAW,EACT,EAAO,yBACP,KAAc,EAAO,sCACrB,EAAK,SACP;iBAEA,kBAAC,UAAD;QAAQ,MAAK;QAAS,GAAI;QAAU,WAAW,EAAO;kBAAtD;SACG,EAAK,QACJ,EAAa,EAAK,MAAM,EACtB,WAAW,EAAK,KAAK,MAAM,UAC7B,CAAC;SAEF,EAAK,WACJ,EAAa,EAAK,SAAS,EACzB,WAAW,EAAK,EAAK,QAAQ,MAAM,WAAW,EAAO,6BAA6B,EACpF,CAAC;SAEF,EAAK,SAAS,KAAK,kBAAC,OAAD;UAAK,WAAW,EAAO;oBAAwC;SAAU,CAAA;QACvF;;MACL,GApBE,CAoBF;KAET,CAAC;IACE,CAAA;IAEL,kBAAC,OAAD;KAAK,WAAW,EAAO;eAAvB,CACG,GACA,EAAM,KAAK,GAAM,MAId,kBAAC,OAAD;MAEE,GALe,EAAiB,OAAO,CAAK,CAKxC;MACJ,UAAU;MACV,WAAW,EAAO;gBAEjB,EAAa,EAAK,QAA4D,EAC7E,WAAW,EAAK,EAAK,QAAQ,MAAM,WAAW,EAAO,+BAA+B,EACtF,CAAC;KACE,GARE,CAQF,CAER,CACE;;IAEJ,EAAwB,MAAK,MAAW,EAAQ,MAAM,KACrD,kBAAC,OAAD;KACE,WAAW,EAAO;KAClB,OAAO,EAAC,iCAAiC,OAAO,CAAkB,EAAC;eAElE,EAAM,KAAK,GAAG,MAAU;MACvB,IAAM,EAAC,cAAU,EAAwB;MAEzC,OACE,kBAAC,OAAD;OAAiB,WAAW,EAAO;iBAChC,KACC,EAAa,GAAQ,EACnB,WAAW,EAAK,EAAO,MAAM,WAAW,EAAO,oCAAoC,EACrF,CAAC;MACA,GALK,CAKL;KAET,CAAC;IACE,CAAA;GAEJ;OAEL,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB,CACG,KAAwB,KAAK,EAAM,EAAqB,EAAE,UACzD,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAvB,CACG,GACA,EAAa,EAAM,EAAqB,CAAC,QAA4D;KAEpG,KAAK,OAAO,CAAoB;KAChC,WAAW,EACT,EAAM,EAAqB,CAAC,OAAO,MAAM,WACzC,EAAO,wCACT;IACF,CAAC,CACE;OAGN,EAAM,KAAK,GAAM,MAEd,kBAAC,GAAD;IAEE,cAAY;IACZ,WAAW,EACT,EAAO,kCACP,MAAU,KAAwB,EAAO,sCACzC,EAAK,SACP;IACA,UAAU;IACV,MAAM,MAAU;IAChB,YAAY,GAAoB,CAAK;cAVvC,CAYE,kBAAC,EAAU,SAAX;KAAmB,WAAW,EAAO;eACnC,kBAAC,QAAD;MAAM,WAAW,EAAO;gBAAxB,CACG,EAAK,QACJ,EAAa,EAAK,MAAM,EACtB,WAAW,EAAK,EAAK,KAAK,MAAM,WAAW,EAAO,gCAAgC,EACpF,CAAC,GACH,kBAAC,QAAD;OAAM,WAAW,EAAO;iBAAoC,EAAK,SAAS,MAAM;MAAe,CAAA,CAC3F;;IACW,CAAA,GAEnB,kBAAC,EAAU,SAAX;KAAmB,WAAW,EAAO;eAClC,EAAa,EAAK,SAA8D,EAC/E,WAAW,EAAK,EAAK,SAAS,MAAM,WAAW,EAAO,mCAAmC,EAC3F,CAAC;IACgB,CAAA,CACV;MA1BJ,CA0BI,CAEd,CACE;IAEA;;AAEb,CACF,GAKa,IAAoB,OAAO,OAAO,GAAuB;CACpE,aAAa;CACb,SAAS;CACT,SAAS;CACT,MAAM;CACN,MAAM;CACN,QAAQ;AACV,CAAC"}

package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.module-C46WY_qp.css

@@ -0,0 +1 @@
+.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs___V0qyz{--river-breakout-tabs-columns:1}@media screen and (width<=63.24rem){.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs___V0qyz{width:100%;max-width:38.625rem;margin-inline:auto}}@media screen and (width>=80rem){.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs___V0qyz{--brand-RiverBreakout-variant-gridline-spacing-outerInline:var(--base-size-60);--brand-RiverBreakout-variant-gridline-spacing-outerBlock:var(--base-size-60)}}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordion___fawN5{flex-direction:column;display:flex}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabList___mzEmX{flex-direction:column;padding-block-end:var(--base-size-80);display:flex}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisuals____0vGo{border-radius:var(--brand-borderRadius-small);order:1;width:100%;margin-block-end:var(--base-size-36);position:relative;overflow:hidden}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionSharedVisuals___DbPMZ{width:100%;margin-block-end:var(--base-size-16);position:relative}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisualPanel___9C_mn{z-index:1;min-width:0;position:relative}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__backgroundVisual___rrq1M{z-index:0;pointer-events:none;position:absolute;inset:0;overflow:hidden}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionSharedVisual___BgAxG{z-index:1;position:relative}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--has-background-visual___4fOiK .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisualPanel___9C_mn,.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--has-background-visual___4fOiK .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionSharedVisual___BgAxG{padding:var(--base-size-32)}@media screen and (width>=63.25rem){.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--has-background-visual___4fOiK .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisualPanel___9C_mn,.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--has-background-visual___4fOiK .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionSharedVisual___BgAxG{padding:var(--base-size-64)}}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--image-position-block-end___wyjv2 .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisualPanel___9C_mn,.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--image-position-block-end___wyjv2 .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionSharedVisual___BgAxG{padding-block-end:0}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--has-background-visual___4fOiK .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisual___ST6p9:has(>[data-video-player-container]){border-radius:0}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--has-background-visual___4fOiK .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__visual--rounded___GqKyX>[data-video-player-container]{border-radius:var(--brand-borderRadius-medium);overflow:hidden}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--has-background-visual___4fOiK.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--image-position-block-end___wyjv2 .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__visual--rounded___GqKyX>[data-video-player-container]{border-radius:var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--background-visual-full-bleed___HM5Fs .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisuals____0vGo{border-radius:0;overflow:visible}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--background-visual-full-bleed___HM5Fs .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__backgroundVisual___rrq1M{inset-block-start:calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock));inset-inline:calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerInline))}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisual___ST6p9 img,.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisual___ST6p9 picture,.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisual___ST6p9 video,.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionSharedVisual___BgAxG img,.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionSharedVisual___BgAxG picture,.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionSharedVisual___BgAxG video{max-width:100%;display:block}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs___V0qyz [class*=River__visual--rounded]{border-radius:var(--brand-borderRadius-small)}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisualPanel___9C_mn[hidden]{display:none}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__tablist___sGkZH{grid-template-columns:repeat(var(--river-breakout-tabs-columns), minmax(0, 1fr));grid-gap:var(--base-size-40);gap:var(--base-size-40);order:2;display:grid}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabListActions____5ifh{grid-template-columns:repeat(var(--river-breakout-tabs-columns), minmax(0, 1fr));grid-gap:var(--base-size-40);gap:var(--base-size-40);order:3;display:grid}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__item___ZOgN5{flex-direction:column;align-items:flex-start;min-width:0;display:flex;position:relative}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__item___ZOgN5:before{content:"";height:var(--brand-borderWidth-thin);transform-origin:50% 0;background-color:var(--brand-color-border-muted);transition:transform var(--brand-animation-duration-fast) ease, background-color var(--brand-animation-duration-fast) ease;position:absolute;inset-block-start:0;inset-inline:0;transform:scaleY(1)}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__item--selected___T8vyR:before{transform:translateY(calc(-1 * var(--brand-borderWidth-thin))) scaleY(2);background-color:var(--brand-color-accent-primary)}@media screen and (width>=63.25rem) and (hover:hover) and (pointer:fine){.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__item___ZOgN5:hover:before{transform:translateY(calc(-1 * var(--brand-borderWidth-thin))) scaleY(2);background-color:var(--brand-color-accent-primary)}}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__heading___3N6_9{color:var(--brand-color-text-muted);transition:color var(--brand-animation-duration-fast) ease-in-out;margin:0}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__item--selected___T8vyR .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__heading___3N6_9{color:var(--brand-color-text-default)}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__icon___0ToMw{justify-content:center;align-items:center;display:inline-flex}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__tab___Gukw0{width:100%;color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;outline:none;flex-direction:column;align-items:flex-start;padding-block-start:var(--base-size-28);padding-inline:0;display:flex}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__tab___Gukw0:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-4)}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__tabHeading___WIYkc{margin:0}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__tab___Gukw0>*+.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__tabHeading___WIYkc{margin-block-start:var(--base-size-20)}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabListContent___Thx_L{align-items:flex-start;gap:var(--base-size-12);flex-direction:column;margin-block-start:var(--base-size-12);display:flex}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabListAction____VPPu{color:var(--brand-Link-color-accent);font-weight:var(--base-text-weight-medium);-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabListActionItem___Vpe6P{margin-block-start:var(--base-size-12)}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__content___NwDBO{align-items:flex-start;gap:var(--base-size-12);flex-direction:column;display:flex}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__link___NBLWE{-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordion___fawN5{padding-block-end:var(--base-size-40)}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionContent___jxVob{align-items:flex-start;gap:var(--base-size-12);flex-direction:column;display:flex}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionContent___jxVob .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__link___NBLWE,.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionContent___jxVob .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__link___NBLWE>span{color:var(--brand-Link-color-accent);font-weight:var(--base-text-weight-medium)}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionContent___jxVob .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__link___NBLWE{-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionItem___59An1{border-top:none}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionItem___59An1:after{display:none}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionItem___59An1:before{content:"";height:var(--brand-borderWidth-thin);transform-origin:50% 0;background-color:var(--brand-color-border-muted);transition:transform var(--brand-animation-duration-fast) ease, background-color var(--brand-animation-duration-fast) ease;position:absolute;inset-block-start:0;inset-inline:0;transform:scaleY(1)}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionItem___59An1.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__item--selected___T8vyR:before{transform:translateY(calc(-1 * var(--brand-borderWidth-thin))) scaleY(2);background-color:var(--brand-color-accent-primary)}@media (hover:hover) and (pointer:fine){.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionItem___59An1:hover:before{transform:translateY(calc(-1 * var(--brand-borderWidth-thin))) scaleY(2);background-color:var(--brand-color-accent-primary)}}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionHeading___u6tN5{color:var(--brand-color-text-default)}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionHeadingInner___nuDDN{align-items:flex-start;gap:var(--base-size-12);flex-direction:column;display:inline-flex}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionIcon___GRZr8{flex-shrink:0}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionLabel___UsRuR{align-items:center;display:inline-flex}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionPanel___yTX_x{gap:var(--base-size-24);flex-direction:column;display:flex}@media screen and (width>=618px){.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs___V0qyz{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}@media screen and (width>=63.25rem){.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs___V0qyz{border-inline:none}}@media screen and (width>=1300px){.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs___V0qyz{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}

package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.module.js

@@ -1,4 +1,4 @@
-import './RiverBreakoutTabs.module-CB2SZhbE.css';//#region src/river/RiverBreakoutTabs/RiverBreakoutTabs.module.css
+import './RiverBreakoutTabs.module-C46WY_qp.css';//#region src/river/RiverBreakoutTabs/RiverBreakoutTabs.module.css
 var e = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs___V0qyz", t = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordion___fawN5", n = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabList___mzEmX", r = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisuals____0vGo", i = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionSharedVisuals___DbPMZ", a = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisualPanel___9C_mn", o = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__backgroundVisual___rrq1M", s = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionSharedVisual___BgAxG", c = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisual___ST6p9", l = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__tablist___sGkZH", u = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabListActions____5ifh", d = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__item___ZOgN5", f = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__heading___3N6_9", p = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__icon___0ToMw", m = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__tab___Gukw0", h = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__tabHeading___WIYkc", g = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabListContent___Thx_L", _ = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabListAction____VPPu", v = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabListActionItem___Vpe6P", y = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__content___NwDBO", b = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__link___NBLWE", x = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionContent___jxVob", S = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionItem___59An1", C = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionHeading___u6tN5", w = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionHeadingInner___nuDDN", T = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionIcon___GRZr8", E = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionLabel___UsRuR", D = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionPanel___yTX_x", O = {
 	RiverBreakoutTabs: e,
 	RiverBreakoutTabs__accordion: t,
@@ -10,8 +10,9 @@ var e = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs___V0qyz", t =
 	RiverBreakoutTabs__accordionSharedVisual: s,
 	"RiverBreakoutTabs--has-background-visual": "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--has-background-visual___4fOiK",
 	"RiverBreakoutTabs--image-position-block-end": "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--image-position-block-end___wyjv2",
-	"RiverBreakoutTabs--background-visual-full-bleed": "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--background-visual-full-bleed___HM5Fs",
 	RiverBreakoutTabs__sharedVisual: c,
+	"RiverBreakoutTabs__visual--rounded": "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__visual--rounded___GqKyX",
+	"RiverBreakoutTabs--background-visual-full-bleed": "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--background-visual-full-bleed___HM5Fs",
 	RiverBreakoutTabs__tablist: l,
 	RiverBreakoutTabs__wideTabListActions: u,
 	RiverBreakoutTabs__item: d,

package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"RiverBreakoutTabs.module.js","names":[],"sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.module.css"],"sourcesContent":[".RiverBreakoutTabs {\n  --river-breakout-tabs-columns: 1;\n}\n\n@media screen and (max-width: 63.24rem) {\n  .RiverBreakoutTabs {\n    width: 100%;\n    max-width: 38.625rem;\n    margin-inline: auto;\n  }\n}\n\n@media screen and (min-width: 80rem) {\n  .RiverBreakoutTabs {\n    --brand-RiverBreakout-variant-gridline-spacing-outerInline: var(--base-size-60);\n    --brand-RiverBreakout-variant-gridline-spacing-outerBlock: var(--base-size-60);\n  }\n}\n\n.RiverBreakoutTabs__accordion {\n  display: flex;\n  flex-direction: column;\n}\n\n.RiverBreakoutTabs__wideTabList {\n  display: flex;\n  flex-direction: column;\n  padding-block-end: var(--base-size-80);\n}\n\n.RiverBreakoutTabs__sharedVisuals {\n  position: relative;\n  order: 1;\n  margin-block-end: var(--base-size-36);\n  width: 100%;\n  overflow: hidden;\n  border-radius: var(--brand-borderRadius-small);\n}\n\n.RiverBreakoutTabs__accordionSharedVisuals {\n  position: relative;\n  margin-block-end: var(--base-size-16);\n  width: 100%;\n}\n\n.RiverBreakoutTabs__sharedVisualPanel {\n  position: relative;\n  z-index: 1;\n  min-width: 0;\n}\n\n.RiverBreakoutTabs__backgroundVisual {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n.RiverBreakoutTabs__accordionSharedVisual {\n  position: relative;\n  z-index: 1;\n}\n\n.RiverBreakoutTabs--has-background-visual .RiverBreakoutTabs__sharedVisualPanel,\n.RiverBreakoutTabs--has-background-visual .RiverBreakoutTabs__accordionSharedVisual {\n  padding: var(--base-size-32);\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverBreakoutTabs--has-background-visual .RiverBreakoutTabs__sharedVisualPanel,\n  .RiverBreakoutTabs--has-background-visual .RiverBreakoutTabs__accordionSharedVisual {\n    padding: var(--base-size-64);\n  }\n}\n\n/* for imagePosition=\"block-end\" */\n.RiverBreakoutTabs--image-position-block-end .RiverBreakoutTabs__sharedVisualPanel,\n.RiverBreakoutTabs--image-position-block-end .RiverBreakoutTabs__accordionSharedVisual {\n  padding-block-end: 0;\n}\n\n/* for backgroundVisualFullBleed — extend the backdrop to the gridline edges */\n.RiverBreakoutTabs--background-visual-full-bleed .RiverBreakoutTabs__sharedVisuals {\n  overflow: visible;\n  border-radius: 0;\n}\n\n.RiverBreakoutTabs--background-visual-full-bleed .RiverBreakoutTabs__backgroundVisual {\n  inset-block-start: calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock));\n  inset-inline: calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerInline));\n}\n\n.RiverBreakoutTabs__sharedVisual :is(img, picture, video),\n.RiverBreakoutTabs__accordionSharedVisual :is(img, picture, video) {\n  display: block;\n  max-width: 100%;\n}\n\n.RiverBreakoutTabs :global([class*='River__visual--rounded']) {\n  border-radius: var(--brand-borderRadius-small);\n}\n\n.RiverBreakoutTabs__sharedVisualPanel[hidden] {\n  display: none;\n}\n\n.RiverBreakoutTabs__tablist {\n  order: 2;\n  display: grid;\n  grid-template-columns: repeat(var(--river-breakout-tabs-columns), minmax(0, 1fr));\n  gap: var(--base-size-40);\n}\n\n.RiverBreakoutTabs__wideTabListActions {\n  order: 3;\n  display: grid;\n  grid-template-columns: repeat(var(--river-breakout-tabs-columns), minmax(0, 1fr));\n  gap: var(--base-size-40);\n}\n\n.RiverBreakoutTabs__item {\n  position: relative;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.RiverBreakoutTabs__item::before {\n  content: '';\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline: 0;\n  height: var(--brand-borderWidth-thin);\n  transform: scaleY(1);\n  transform-origin: 50% 0;\n  background-color: var(--brand-color-border-muted);\n  transition: transform var(--brand-animation-duration-fast) ease,\n    background-color var(--brand-animation-duration-fast) ease;\n}\n\n.RiverBreakoutTabs__item--selected::before {\n  transform: translateY(calc(-1 * var(--brand-borderWidth-thin))) scaleY(2);\n  background-color: var(--brand-color-accent-primary);\n}\n\n@media screen and (min-width: 63.25rem) and (hover: hover) and (pointer: fine) {\n  .RiverBreakoutTabs__item:hover::before {\n    transform: translateY(calc(-1 * var(--brand-borderWidth-thin))) scaleY(2);\n    background-color: var(--brand-color-accent-primary);\n  }\n}\n\n.RiverBreakoutTabs__heading {\n  margin: 0;\n  color: var(--brand-color-text-muted);\n  transition: color var(--brand-animation-duration-fast) ease-in-out;\n}\n\n.RiverBreakoutTabs__item--selected .RiverBreakoutTabs__heading {\n  color: var(--brand-color-text-default);\n}\n\n.RiverBreakoutTabs__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.RiverBreakoutTabs__tab {\n  width: 100%;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: left;\n  padding-block-start: var(--base-size-28);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  cursor: pointer;\n  outline: none;\n  padding-inline: 0;\n}\n\n.RiverBreakoutTabs__tab:focus-visible {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-4);\n}\n\n.RiverBreakoutTabs__tabHeading {\n  margin: 0;\n}\n\n/* 20px below the icon — only applies when an icon precedes the heading */\n.RiverBreakoutTabs__tab > * + .RiverBreakoutTabs__tabHeading {\n  margin-block-start: var(--base-size-20);\n}\n\n.RiverBreakoutTabs__wideTabListContent {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--base-size-12);\n  margin-block-start: var(--base-size-12);\n}\n\n.RiverBreakoutTabs__wideTabListAction {\n  color: var(--brand-Link-color-accent);\n  font-weight: var(--base-text-weight-medium);\n  text-decoration: none;\n}\n\n.RiverBreakoutTabs__wideTabListActionItem {\n  margin-block-start: var(--base-size-12);\n}\n\n.RiverBreakoutTabs__content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--base-size-12);\n}\n\n.RiverBreakoutTabs__link {\n  text-decoration: none;\n}\n\n.RiverBreakoutTabs__accordion {\n  padding-block-end: var(--base-size-40);\n}\n\n.RiverBreakoutTabs__accordionContent {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--base-size-12);\n}\n\n.RiverBreakoutTabs__accordionContent .RiverBreakoutTabs__link,\n.RiverBreakoutTabs__accordionContent .RiverBreakoutTabs__link > span {\n  color: var(--brand-Link-color-accent);\n  font-weight: var(--base-text-weight-medium);\n}\n\n.RiverBreakoutTabs__accordionContent .RiverBreakoutTabs__link {\n  text-decoration: none;\n}\n\n.RiverBreakoutTabs__accordionItem {\n  border-top: none;\n}\n\n.RiverBreakoutTabs__accordionItem::after {\n  display: none;\n}\n\n.RiverBreakoutTabs__accordionItem::before {\n  content: '';\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline: 0;\n  height: var(--brand-borderWidth-thin);\n  transform: scaleY(1);\n  transform-origin: 50% 0;\n  background-color: var(--brand-color-border-muted);\n  transition: transform var(--brand-animation-duration-fast) ease,\n    background-color var(--brand-animation-duration-fast) ease;\n}\n\n.RiverBreakoutTabs__accordionItem.RiverBreakoutTabs__item--selected::before {\n  transform: translateY(calc(-1 * var(--brand-borderWidth-thin))) scaleY(2);\n  background-color: var(--brand-color-accent-primary);\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .RiverBreakoutTabs__accordionItem:hover::before {\n    transform: translateY(calc(-1 * var(--brand-borderWidth-thin))) scaleY(2);\n    background-color: var(--brand-color-accent-primary);\n  }\n}\n\n.RiverBreakoutTabs__accordionHeading {\n  color: var(--brand-color-text-default);\n}\n\n.RiverBreakoutTabs__accordionHeadingInner {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--base-size-12);\n}\n\n.RiverBreakoutTabs__accordionIcon {\n  flex-shrink: 0;\n}\n\n.RiverBreakoutTabs__accordionLabel {\n  display: inline-flex;\n  align-items: center;\n}\n\n.RiverBreakoutTabs__accordionPanel {\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-size-24);\n}\n\n@media screen and (min-width: 618px) {\n  .RiverBreakoutTabs {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverBreakoutTabs {\n    border-inline: none;\n  }\n}\n\n@media screen and (min-width: 1300px) {\n  .RiverBreakoutTabs {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"RiverBreakoutTabs.module.js","names":[],"sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.module.css"],"sourcesContent":[".RiverBreakoutTabs {\n  --river-breakout-tabs-columns: 1;\n}\n\n@media screen and (max-width: 63.24rem) {\n  .RiverBreakoutTabs {\n    width: 100%;\n    max-width: 38.625rem;\n    margin-inline: auto;\n  }\n}\n\n@media screen and (min-width: 80rem) {\n  .RiverBreakoutTabs {\n    --brand-RiverBreakout-variant-gridline-spacing-outerInline: var(--base-size-60);\n    --brand-RiverBreakout-variant-gridline-spacing-outerBlock: var(--base-size-60);\n  }\n}\n\n.RiverBreakoutTabs__accordion {\n  display: flex;\n  flex-direction: column;\n}\n\n.RiverBreakoutTabs__wideTabList {\n  display: flex;\n  flex-direction: column;\n  padding-block-end: var(--base-size-80);\n}\n\n.RiverBreakoutTabs__sharedVisuals {\n  position: relative;\n  order: 1;\n  margin-block-end: var(--base-size-36);\n  width: 100%;\n  overflow: hidden;\n  border-radius: var(--brand-borderRadius-small);\n}\n\n.RiverBreakoutTabs__accordionSharedVisuals {\n  position: relative;\n  margin-block-end: var(--base-size-16);\n  width: 100%;\n}\n\n.RiverBreakoutTabs__sharedVisualPanel {\n  position: relative;\n  z-index: 1;\n  min-width: 0;\n}\n\n.RiverBreakoutTabs__backgroundVisual {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n.RiverBreakoutTabs__accordionSharedVisual {\n  position: relative;\n  z-index: 1;\n}\n\n.RiverBreakoutTabs--has-background-visual .RiverBreakoutTabs__sharedVisualPanel,\n.RiverBreakoutTabs--has-background-visual .RiverBreakoutTabs__accordionSharedVisual {\n  padding: var(--base-size-32);\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverBreakoutTabs--has-background-visual .RiverBreakoutTabs__sharedVisualPanel,\n  .RiverBreakoutTabs--has-background-visual .RiverBreakoutTabs__accordionSharedVisual {\n    padding: var(--base-size-64);\n  }\n}\n\n/* for imagePosition=\"block-end\" */\n.RiverBreakoutTabs--image-position-block-end .RiverBreakoutTabs__sharedVisualPanel,\n.RiverBreakoutTabs--image-position-block-end .RiverBreakoutTabs__accordionSharedVisual {\n  padding-block-end: 0;\n}\n\n.RiverBreakoutTabs--has-background-visual .RiverBreakoutTabs__sharedVisual:has(> [data-video-player-container]) {\n  border-radius: 0;\n}\n\n.RiverBreakoutTabs--has-background-visual .RiverBreakoutTabs__visual--rounded > [data-video-player-container] {\n  overflow: hidden;\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.RiverBreakoutTabs--has-background-visual.RiverBreakoutTabs--image-position-block-end\n  .RiverBreakoutTabs__visual--rounded\n  > [data-video-player-container] {\n  border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n\n/* for backgroundVisualFullBleed — extend the backdrop to the gridline edges */\n.RiverBreakoutTabs--background-visual-full-bleed .RiverBreakoutTabs__sharedVisuals {\n  overflow: visible;\n  border-radius: 0;\n}\n\n.RiverBreakoutTabs--background-visual-full-bleed .RiverBreakoutTabs__backgroundVisual {\n  inset-block-start: calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock));\n  inset-inline: calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerInline));\n}\n\n.RiverBreakoutTabs__sharedVisual :is(img, picture, video),\n.RiverBreakoutTabs__accordionSharedVisual :is(img, picture, video) {\n  display: block;\n  max-width: 100%;\n}\n\n.RiverBreakoutTabs :global([class*='River__visual--rounded']) {\n  border-radius: var(--brand-borderRadius-small);\n}\n\n.RiverBreakoutTabs__sharedVisualPanel[hidden] {\n  display: none;\n}\n\n.RiverBreakoutTabs__tablist {\n  order: 2;\n  display: grid;\n  grid-template-columns: repeat(var(--river-breakout-tabs-columns), minmax(0, 1fr));\n  gap: var(--base-size-40);\n}\n\n.RiverBreakoutTabs__wideTabListActions {\n  order: 3;\n  display: grid;\n  grid-template-columns: repeat(var(--river-breakout-tabs-columns), minmax(0, 1fr));\n  gap: var(--base-size-40);\n}\n\n.RiverBreakoutTabs__item {\n  position: relative;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.RiverBreakoutTabs__item::before {\n  content: '';\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline: 0;\n  height: var(--brand-borderWidth-thin);\n  transform: scaleY(1);\n  transform-origin: 50% 0;\n  background-color: var(--brand-color-border-muted);\n  transition: transform var(--brand-animation-duration-fast) ease,\n    background-color var(--brand-animation-duration-fast) ease;\n}\n\n.RiverBreakoutTabs__item--selected::before {\n  transform: translateY(calc(-1 * var(--brand-borderWidth-thin))) scaleY(2);\n  background-color: var(--brand-color-accent-primary);\n}\n\n@media screen and (min-width: 63.25rem) and (hover: hover) and (pointer: fine) {\n  .RiverBreakoutTabs__item:hover::before {\n    transform: translateY(calc(-1 * var(--brand-borderWidth-thin))) scaleY(2);\n    background-color: var(--brand-color-accent-primary);\n  }\n}\n\n.RiverBreakoutTabs__heading {\n  margin: 0;\n  color: var(--brand-color-text-muted);\n  transition: color var(--brand-animation-duration-fast) ease-in-out;\n}\n\n.RiverBreakoutTabs__item--selected .RiverBreakoutTabs__heading {\n  color: var(--brand-color-text-default);\n}\n\n.RiverBreakoutTabs__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.RiverBreakoutTabs__tab {\n  width: 100%;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: left;\n  padding-block-start: var(--base-size-28);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  cursor: pointer;\n  outline: none;\n  padding-inline: 0;\n}\n\n.RiverBreakoutTabs__tab:focus-visible {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-4);\n}\n\n.RiverBreakoutTabs__tabHeading {\n  margin: 0;\n}\n\n/* 20px below the icon — only applies when an icon precedes the heading */\n.RiverBreakoutTabs__tab > * + .RiverBreakoutTabs__tabHeading {\n  margin-block-start: var(--base-size-20);\n}\n\n.RiverBreakoutTabs__wideTabListContent {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--base-size-12);\n  margin-block-start: var(--base-size-12);\n}\n\n.RiverBreakoutTabs__wideTabListAction {\n  color: var(--brand-Link-color-accent);\n  font-weight: var(--base-text-weight-medium);\n  text-decoration: none;\n}\n\n.RiverBreakoutTabs__wideTabListActionItem {\n  margin-block-start: var(--base-size-12);\n}\n\n.RiverBreakoutTabs__content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--base-size-12);\n}\n\n.RiverBreakoutTabs__link {\n  text-decoration: none;\n}\n\n.RiverBreakoutTabs__accordion {\n  padding-block-end: var(--base-size-40);\n}\n\n.RiverBreakoutTabs__accordionContent {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--base-size-12);\n}\n\n.RiverBreakoutTabs__accordionContent .RiverBreakoutTabs__link,\n.RiverBreakoutTabs__accordionContent .RiverBreakoutTabs__link > span {\n  color: var(--brand-Link-color-accent);\n  font-weight: var(--base-text-weight-medium);\n}\n\n.RiverBreakoutTabs__accordionContent .RiverBreakoutTabs__link {\n  text-decoration: none;\n}\n\n.RiverBreakoutTabs__accordionItem {\n  border-top: none;\n}\n\n.RiverBreakoutTabs__accordionItem::after {\n  display: none;\n}\n\n.RiverBreakoutTabs__accordionItem::before {\n  content: '';\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline: 0;\n  height: var(--brand-borderWidth-thin);\n  transform: scaleY(1);\n  transform-origin: 50% 0;\n  background-color: var(--brand-color-border-muted);\n  transition: transform var(--brand-animation-duration-fast) ease,\n    background-color var(--brand-animation-duration-fast) ease;\n}\n\n.RiverBreakoutTabs__accordionItem.RiverBreakoutTabs__item--selected::before {\n  transform: translateY(calc(-1 * var(--brand-borderWidth-thin))) scaleY(2);\n  background-color: var(--brand-color-accent-primary);\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .RiverBreakoutTabs__accordionItem:hover::before {\n    transform: translateY(calc(-1 * var(--brand-borderWidth-thin))) scaleY(2);\n    background-color: var(--brand-color-accent-primary);\n  }\n}\n\n.RiverBreakoutTabs__accordionHeading {\n  color: var(--brand-color-text-default);\n}\n\n.RiverBreakoutTabs__accordionHeadingInner {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--base-size-12);\n}\n\n.RiverBreakoutTabs__accordionIcon {\n  flex-shrink: 0;\n}\n\n.RiverBreakoutTabs__accordionLabel {\n  display: inline-flex;\n  align-items: center;\n}\n\n.RiverBreakoutTabs__accordionPanel {\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-size-24);\n}\n\n@media screen and (min-width: 618px) {\n  .RiverBreakoutTabs {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverBreakoutTabs {\n    border-inline: none;\n  }\n}\n\n@media screen and (min-width: 1300px) {\n  .RiverBreakoutTabs {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n"],"mappings":""}

package/lib/SubNav/SubNav.d.ts

@@ -12,6 +12,13 @@ type SubNavContextType = {
     portalRef: RefObject<HTMLDivElement | null>;
 };
 export declare const useSubNavContext: () => SubNavContextType;
+export type SubNavMenuLabels = {
+    menuLabel: string;
+    closeLabel: string;
+    activeLabel: string;
+    closeActiveLabel: string;
+    overflowMenuLabel: string;
+};
 export type SubNavProps = {
     /**
      * @deprecated The hasShadow prop is deprecated and will be removed in a future release.
@@ -22,6 +29,10 @@ export type SubNavProps = {
      * removing any internal padding and guttering.
      */
     fullWidth?: boolean;
+    /**
+     * Customizable accessible labels
+     */
+    menuLabels?: Partial<SubNavMenuLabels>;
     'data-testid'?: string;
 } & PropsWithChildren<BaseProps<HTMLDivElement>>;
 type HeadingBaseProps = {
@@ -37,11 +48,16 @@ type LinkBaseProps = {
     'data-testid'?: string;
     variant?: TextProps['variant'];
     _subMenuVariant?: SubMenuVariants;
+    _isOverflowed?: boolean;
+    _isOverflowMenu?: boolean;
+    _onOverflowLinkActivate?: () => void;
 } & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> & BaseProps<HTMLAnchorElement>;
 type SubMenuProps = {
     variant?: SubMenuVariants;
+    _isOverflowMenu?: boolean;
+    _onOverflowLinkActivate?: () => void;
 } & React.HTMLAttributes<HTMLUListElement> & BaseProps<HTMLUListElement>;
-declare function SubMenuBase({ children, className, variant, ...props }: SubMenuProps): React.JSX.Element;
+declare function SubMenuBase({ children, className, 'aria-label': ariaLabel, variant, _isOverflowMenu, _onOverflowLinkActivate, ...props }: SubMenuProps): React.JSX.Element;
 type SubNavActionProps = {
     /**
      * Required path or location for the action button to link to.
@@ -75,6 +91,8 @@ export declare const SubNav: React.NamedExoticComponent<Omit<SubNavProps, "ref">
         readonly heading: string;
         readonly action: string;
         readonly subMenu: string;
+        readonly overflowButton: string;
+        readonly overflowMenu: string;
     };
 };
 export {};

package/lib/SubNav/useAnchorMenu.d.ts

@@ -0,0 +1,4 @@
+export declare function useAnchorMenu(): {
+    anchorMenuRef: import("react").RefObject<HTMLDivElement | null>;
+    portalRef: import("react").RefObject<HTMLDivElement | null>;
+};

package/lib/SubNav/useNarrowMenu.d.ts

@@ -0,0 +1,7 @@
+export declare function useNarrowMenu(isLarge: boolean | undefined): {
+    navRef: import("react").RefObject<HTMLElement | null>;
+    narrowMenuRef: import("react").RefObject<HTMLDivElement | null>;
+    isNarrowMenuOpen: boolean;
+    closeNarrowMenu: () => void;
+    toggleNarrowMenu: () => void;
+};

package/lib/SubNav/useWideMenu.d.ts

@@ -0,0 +1,12 @@
+import { type FocusEvent, type ReactNode } from 'react';
+export declare function useWideMenu(children: ReactNode, isLarge: boolean | undefined, linkCount: number): {
+    overlayRef: import("react").RefObject<HTMLUListElement | null>;
+    overflowRef: import("react").RefObject<HTMLLIElement | null>;
+    overflowButtonRef: import("react").RefObject<HTMLButtonElement | null>;
+    overflowMenuRef: import("react").RefObject<HTMLDivElement | null>;
+    visibleLinkCount: number;
+    hasOverflow: boolean;
+    isOverflowMenuOpen: boolean;
+    closeOverflowMenu: () => void;
+    handleOverflowMenuBlur: (event: FocusEvent<HTMLLIElement>) => void;
+};

package/lib/Tiles/Tiles.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { BaseProps } from '../component-helpers';
 /** * Design Tokens */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tiles/base.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tiles/colors-with-modes.css';
 type TilesVariant = 'default' | 'gridlines';
 type TilesLayout = 'default' | 'compact';