@primer/react-brand 0.68.0-rc.59bbed40 → 0.68.0-rc.5bd56cbb

package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.js

@@ -0,0 +1,192 @@
+import e from "../../node_modules/clsx/dist/clsx.js";
+import { useId as t } from "../../hooks/useId.js";
+import { Text as n } from "../../Text/Text.js";
+import { Heading as r } from "../../Heading/Heading.js";
+import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/river/river-QteO10lt.css';import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/river/base-Ue-p74RC.css';/* empty css                                                                                          */
+import { Link as i } from "../../Link/Link.js";
+/* empty css                                                                                         */
+import a from "../river-shared.module.js";
+import { Visual as o } from "../River/River.js";
+import { Icon as s } from "../../Icon/Icon.js";
+import { useTabs as c } from "../../hooks/useTabs.js";
+import { useWindowSize as l } from "../../hooks/useWindowSize.js";
+import u from "./RiverBreakoutTabs.module.js";
+import { Accordion as d } from "../../Accordion/Accordion.js";
+import f, { cloneElement as p, forwardRef as m, useCallback as h, useEffect as g, useMemo as _, useRef as v, useState as y } from "react";
+import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
+//#region src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx
+var C = (e) => (t) => f.isValidElement(t) && t.type === e, w = ({ children: e }) => /* @__PURE__ */ x(b, { children: e }), T = ({ as: e = "h3", children: t, id: n }) => /* @__PURE__ */ x(r, {
+	as: e,
+	id: n,
+	className: "visually-hidden",
+	children: t
+}), E = ({ color: e = "green", ...t }) => /* @__PURE__ */ x(s, {
+	color: e,
+	...t
+}), D = ({ as: t = "h3", children: n, className: i, size: a = "subhead-large", weight: o = "normal", ...s }) => /* @__PURE__ */ x(r, {
+	as: t,
+	className: e(u.RiverBreakoutTabs__heading, i),
+	size: a,
+	weight: o,
+	...s,
+	children: n
+}), O = ({ children: t, className: n, ...r }) => {
+	let i = _(() => f.Children.toArray(t).map((t) => I(t) ? p(t, {
+		as: t.props.as ?? "p",
+		variant: t.props.variant ?? "muted"
+	}) : L(t) ? p(t, {
+		className: e(t.props.className, u.RiverBreakoutTabs__link),
+		size: t.props.size ?? "medium",
+		variant: t.props.variant ?? "accent"
+	}) : t), [t]);
+	return /* @__PURE__ */ x("div", {
+		className: e(u.RiverBreakoutTabs__content, n),
+		...r,
+		children: i
+	});
+}, k = m(({ className: e, ...t }, n) => /* @__PURE__ */ x(o, {
+	ref: n,
+	className: e,
+	...t
+})), A = C(w), j = C(T), M = C(E), N = C(D), P = C(O), F = C(k), I = (e) => f.isValidElement(e) && e.type === n, L = (e) => f.isValidElement(e) && e.type === i, R = (e) => f.Children.toArray(e.props.children).reduce((e, t) => (M(t) && (e.icon = t), N(t) && (e.heading = t), P(t) && (e.content = t), F(t) && (e.visual = t), e), {
+	icon: null,
+	heading: null,
+	content: null,
+	visual: null,
+	className: e.props.className
+}), z = (t) => t ? f.Children.toArray(t.props.children).map((t) => I(t) ? p(t, {
+	as: t.props.as ?? "p",
+	variant: t.props.variant ?? "muted"
+}) : L(t) ? p(t, {
+	className: e(t.props.className, u.RiverBreakoutTabs__link),
+	size: t.props.size ?? "medium",
+	variant: t.props.variant ?? "accent"
+}) : t).reduce((e, t) => L(t) ? (e.action ||= t, e) : (e.body.push(t), e), {
+	action: null,
+	body: []
+}) : {
+	action: null,
+	body: []
+}, B = (e, t) => t === 0 ? -1 : Math.min(Math.max(Number.isFinite(e) ? Math.trunc(e) : 0, 0), t - 1), V = m(({ children: n, className: r, defaultSelectedIndex: i = 0, onChange: o, selectedIndex: s, ...m }, b) => {
+	let C = t(), { isLarge: w } = l(), T = _(() => f.Children.toArray(n), [n]), E = T.find(j) ?? null, D = T.filter(A).map(R).filter((e) => e.heading && e.content && e.visual), O = B(i, D.length), k = typeof s == "number" && Number.isFinite(s) ? B(s, D.length) : null, M = k ?? O, N = E?.props.id ?? `${C}-heading`, P = Math.min(Math.max(D.length, 1), 3), F = M >= 0 ? String(M) : void 0, I = w === !0, L = v(!1), { activeTab: V, activateTab: H, getTabListProps: U, getTabPanelProps: W, getTabProps: G } = c({
+		defaultTab: F,
+		onTabActivate: h((e) => {
+			if (L.current) {
+				L.current = !1;
+				return;
+			}
+			if (!o) return;
+			let t = Number(e);
+			Number.isNaN(t) || o(t);
+		}, [o])
+	}), [K, q] = y(M);
+	g(() => {
+		if (V === null) return;
+		let e = Number(V);
+		Number.isNaN(e) || q(e);
+	}, [V]), g(() => {
+		if (k === null || k < 0) return;
+		let e = String(k);
+		V !== e && (L.current = !0, H(e)), q(k);
+	}, [
+		H,
+		V,
+		k
+	]), !E && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("RiverBreakoutTabs: A11yHeading child is required. This element will not be visible, only read by screenreaders.");
+	let J = (e) => (t) => {
+		t && (q(e), V !== String(e) && H(String(e)));
+	}, Y = (e) => {
+		let t = Number(e.currentTarget.getAttribute("data-index"));
+		!e.currentTarget.open && K === t && (e.currentTarget.open = !0);
+	}, X = U(E ? { labelledBy: N } : { label: "River breakout tabs" }), Z = _(() => D.map((e) => z(e.content)), [D]);
+	return /* @__PURE__ */ S("section", {
+		ref: b,
+		className: e(a.RiverBreakout, a["RiverBreakout--variant-gridline"], u.RiverBreakoutTabs, r),
+		...m,
+		children: [E && p(E, { id: N }), I ? /* @__PURE__ */ S("div", {
+			className: u.RiverBreakoutTabs__wideTabList,
+			children: [
+				/* @__PURE__ */ x("div", {
+					...X,
+					className: u.RiverBreakoutTabs__tablist,
+					style: { "--river-breakout-tabs-columns": String(P) },
+					children: D.map((t, n) => {
+						let r = V === String(n), i = G(String(n)), { body: a } = Z[n];
+						return /* @__PURE__ */ x("div", {
+							className: e(u.RiverBreakoutTabs__item, r && u["RiverBreakoutTabs__item--selected"], t.className),
+							children: /* @__PURE__ */ S("button", {
+								type: "button",
+								...i,
+								className: u.RiverBreakoutTabs__tab,
+								children: [
+									t.icon && p(t.icon, { className: t.icon.props.className }),
+									t.heading && p(t.heading, { className: e(t.heading.props.className, u.RiverBreakoutTabs__tabHeading) }),
+									a.length > 0 && /* @__PURE__ */ x("div", {
+										className: u.RiverBreakoutTabs__wideTabListContent,
+										children: a
+									})
+								]
+							})
+						}, n);
+					})
+				}),
+				/* @__PURE__ */ x("div", {
+					className: u.RiverBreakoutTabs__sharedVisuals,
+					children: D.map((t, n) => /* @__PURE__ */ x("div", {
+						...W(String(n)),
+						tabIndex: -1,
+						className: u.RiverBreakoutTabs__sharedVisualPanel,
+						children: p(t.visual, { className: e(t.visual?.props.className, u.RiverBreakoutTabs__sharedVisual) })
+					}, n))
+				}),
+				Z.some((e) => e.action) && /* @__PURE__ */ x("div", {
+					className: u.RiverBreakoutTabs__wideTabListActions,
+					style: { "--river-breakout-tabs-columns": String(P) },
+					children: D.map((t, n) => {
+						let { action: r } = Z[n];
+						return /* @__PURE__ */ x("div", {
+							className: u.RiverBreakoutTabs__wideTabListActionItem,
+							children: r && p(r, { className: e(r.props.className, u.RiverBreakoutTabs__wideTabListAction) })
+						}, n);
+					})
+				})
+			]
+		}) : /* @__PURE__ */ S("div", {
+			className: u.RiverBreakoutTabs__accordion,
+			children: [K >= 0 && D[K]?.visual && /* @__PURE__ */ x("div", {
+				className: u.RiverBreakoutTabs__accordionSharedVisuals,
+				children: p(D[K].visual, { className: e(D[K].visual.props.className, u.RiverBreakoutTabs__accordionSharedVisual) })
+			}), D.map((t, n) => /* @__PURE__ */ S(d, {
+				"data-index": n,
+				className: e(u.RiverBreakoutTabs__accordionItem, n === K && u["RiverBreakoutTabs__item--selected"], t.className),
+				onToggle: Y,
+				open: n === K,
+				handleOpen: J(n),
+				children: [/* @__PURE__ */ x(d.Heading, {
+					className: u.RiverBreakoutTabs__accordionHeading,
+					children: /* @__PURE__ */ S("span", {
+						className: u.RiverBreakoutTabs__accordionHeadingInner,
+						children: [t.icon && p(t.icon, { className: e(t.icon.props.className, u.RiverBreakoutTabs__accordionIcon) }), /* @__PURE__ */ x("span", {
+							className: u.RiverBreakoutTabs__accordionLabel,
+							children: t.heading?.props.children
+						})]
+					})
+				}), /* @__PURE__ */ x(d.Content, {
+					className: u.RiverBreakoutTabs__accordionPanel,
+					children: p(t.content, { className: e(t.content?.props.className, u.RiverBreakoutTabs__accordionContent) })
+				})]
+			}, n))]
+		})]
+	});
+}), H = Object.assign(V, {
+	A11yHeading: T,
+	Content: O,
+	Heading: D,
+	Icon: E,
+	Item: w,
+	Visual: k
+});
+//#endregion
+export { H as RiverBreakoutTabs };
+
+//# sourceMappingURL=RiverBreakoutTabs.js.map

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

@@ -0,0 +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 {Visual as RiverVisual, type RiverVisualProps} 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'\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  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\ntype RiverBreakoutTabsItemChild =\n  | React.ReactElement<RiverBreakoutTabsIconProps>\n  | React.ReactElement<RiverBreakoutTabsHeadingProps>\n  | React.ReactElement<RiverBreakoutTabsContentProps>\n  | React.ReactElement<RiverVisualProps>\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<RiverVisualProps> | 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, RiverVisualProps>(({className, ...props}, ref) => (\n  <RiverVisual 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  ({children, className, defaultSelectedIndex = 0, onChange, selectedIndex, ...props}, ref) => {\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    return (\n      <section\n        ref={ref}\n        className={clsx(\n          riverStyles.RiverBreakout,\n          riverStyles['RiverBreakout--variant-gridline'],\n          styles.RiverBreakoutTabs,\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              {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<RiverVisualProps>, {\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                {cloneElement(Items[activeAccordionIndex].visual as React.ReactElement<RiverVisualProps>, {\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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"}

package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.module-CyFjQIyU.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}}.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{order:1;width:100%;margin-block-end:var(--base-size-36)}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionSharedVisuals___DbPMZ{width:100%;margin-block-end:var(--base-size-16)}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisualPanel___9C_mn{min-width:0}.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{background-color:var(--brand-color-accent-primary);transform:scaleY(2)}@media screen and (width>=63.25rem) and (hover:hover) and (pointer:fine){.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__item___ZOgN5:hover:before{background-color:var(--brand-color-accent-primary);transform:scaleY(2)}}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__heading___3N6_9{color:var(--brand-color-text-muted);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;align-items:flex-start;gap:var(--base-size-20);cursor:pointer;background:0 0;border:0;outline:none;flex-direction:column;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__wideTabListContent___Thx_L{align-items:flex-start;gap:var(--base-size-12);flex-direction:column;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{background-color:var(--brand-color-accent-primary);transform:scaleY(2)}@media (hover:hover) and (pointer:fine){.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionItem___59An1:hover:before{background-color:var(--brand-color-accent-primary);transform:scaleY(2)}}.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

@@ -0,0 +1,34 @@
+import './RiverBreakoutTabs.module-CyFjQIyU.css';var e = {
+	RiverBreakoutTabs: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs___V0qyz",
+	RiverBreakoutTabs__accordion: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordion___fawN5",
+	RiverBreakoutTabs__wideTabList: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabList___mzEmX",
+	RiverBreakoutTabs__sharedVisuals: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisuals____0vGo",
+	RiverBreakoutTabs__accordionSharedVisuals: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionSharedVisuals___DbPMZ",
+	RiverBreakoutTabs__sharedVisualPanel: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisualPanel___9C_mn",
+	RiverBreakoutTabs__sharedVisual: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisual___ST6p9",
+	RiverBreakoutTabs__accordionSharedVisual: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionSharedVisual___BgAxG",
+	RiverBreakoutTabs__tablist: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__tablist___sGkZH",
+	RiverBreakoutTabs__wideTabListActions: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabListActions____5ifh",
+	RiverBreakoutTabs__item: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__item___ZOgN5",
+	"RiverBreakoutTabs__item--selected": "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__item--selected___T8vyR",
+	RiverBreakoutTabs__heading: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__heading___3N6_9",
+	RiverBreakoutTabs__icon: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__icon___0ToMw",
+	RiverBreakoutTabs__tab: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__tab___Gukw0",
+	RiverBreakoutTabs__tabHeading: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__tabHeading___WIYkc",
+	RiverBreakoutTabs__wideTabListContent: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabListContent___Thx_L",
+	RiverBreakoutTabs__wideTabListAction: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabListAction____VPPu",
+	RiverBreakoutTabs__wideTabListActionItem: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabListActionItem___Vpe6P",
+	RiverBreakoutTabs__content: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__content___NwDBO",
+	RiverBreakoutTabs__link: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__link___NBLWE",
+	RiverBreakoutTabs__accordionContent: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionContent___jxVob",
+	RiverBreakoutTabs__accordionItem: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionItem___59An1",
+	RiverBreakoutTabs__accordionHeading: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionHeading___u6tN5",
+	RiverBreakoutTabs__accordionHeadingInner: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionHeadingInner___nuDDN",
+	RiverBreakoutTabs__accordionIcon: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionIcon___GRZr8",
+	RiverBreakoutTabs__accordionLabel: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionLabel___UsRuR",
+	RiverBreakoutTabs__accordionPanel: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionPanel___yTX_x"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=RiverBreakoutTabs.module.js.map

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

@@ -0,0 +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.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  order: 1;\n  margin-block-end: var(--base-size-36);\n  width: 100%;\n}\n\n.RiverBreakoutTabs__accordionSharedVisuals {\n  margin-block-end: var(--base-size-16);\n  width: 100%;\n}\n\n.RiverBreakoutTabs__sharedVisualPanel {\n  min-width: 0;\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: 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: 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}\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  gap: var(--base-size-20);\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.RiverBreakoutTabs__wideTabListContent {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 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: 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: 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/esm/river/RiverBreakoutTabs/index.d.ts

@@ -0,0 +1,2 @@
+export * from './RiverBreakoutTabs';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/river/RiverBreakoutTabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA"}

package/esm/river/RiverStoryScroll/RiverStoryScroll.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { RiverProps } from '../../';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river-story-scroll/colors-with-modes.css';
+export type RiverStoryScrollProps = {
+    /**
+     * Adjust the order of the `Content` column. The default is `start`.
+     */
+    align?: 'start' | 'end';
+    /**
+     * Apply an alternative image to text column ratio. The default is `50:50`.
+     */
+    imageTextRatio?: '60:40' | '50:50';
+    /**
+     * Disable the scroll effect.
+     */
+    disabled?: boolean;
+    /**
+     * Only River components are allowed as children.
+     */
+    children?: React.ReactElement<RiverProps>[];
+};
+export declare function RiverStoryScroll({ children, disabled }: RiverStoryScrollProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RiverStoryScroll.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RiverStoryScroll.d.ts","sourceRoot":"","sources":["../../../src/river/RiverStoryScroll/RiverStoryScroll.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0B,MAAM,OAAO,CAAA;AAC9C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,QAAQ,CAAA;AAKtC,OAAO,sHAAsH,CAAA;AAG7H,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE,CAAA;CAC5C,CAAA;AAID,wBAAgB,gBAAgB,CAAC,EAAC,QAAQ,EAAE,QAAQ,EAAC,EAAE,qBAAqB,2CAuH3E"}

package/esm/river/RiverStoryScroll/RiverStoryScroll.js

@@ -0,0 +1,83 @@
+import e from "../../node_modules/clsx/dist/clsx.js";
+import { RiverStoryScrollProvider as t } from "./RiverStoryScrollProvider.js";
+import n from "./RiverStoryScroll.module.js";
+import { RiverStoryScrollResponder as r } from "./RiverStoryScrollResponder.js";
+import { RiverStoryScrollTracker as i } from "./RiverStoryScrollTracker.js";
+import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/river-story-scroll/colors-with-modes-omPmv64b.css';/* empty css                                                                                                                   */
+import a, { useEffect as o, useRef as s } from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/river/RiverStoryScroll/RiverStoryScroll.tsx
+function d({ children: d, disabled: f }) {
+	let p = s(null), m = s(null), [h, g] = a.useState(!1), [_, v] = a.useState([]), y = a.Children.map(d, (t) => {
+		if (a.isValidElement(t)) return a.cloneElement(t, { className: e(n["RiverStoryScroll__internal-river"], !f && n["RiverStoryScroll__content-stack"]) });
+	}), b = y ? Array(y.length).fill(!1) : [];
+	return o(() => {
+		let e = window.matchMedia("(prefers-reduced-motion: reduce)");
+		g(e.matches);
+		let t = (e) => {
+			g(e.matches);
+		};
+		return e.addEventListener("change", t), () => {
+			e.removeEventListener("change", t);
+		};
+	}, []), o(() => {
+		f || h || !m.current || v(Array.from(m.current.querySelectorAll("img, video")).map((e) => e instanceof HTMLImageElement ? {
+			type: "image",
+			src: e.src
+		} : {
+			type: "video",
+			src: e.querySelector("source")?.src || ""
+		}));
+	}, [f, h]), f || h ? /* @__PURE__ */ l(c, { children: d }) : /* @__PURE__ */ l("div", {
+		className: e(n.RiverStoryScroll, n["RiverStoryScroll--enabled"]),
+		children: /* @__PURE__ */ u(t, {
+			initialStates: b,
+			className: n.RiverStoryScroll__inner,
+			children: [/* @__PURE__ */ l("div", {
+				className: n["RiverStoryScroll__visual-container"],
+				ref: p,
+				children: /* @__PURE__ */ u("div", {
+					className: e(n["RiverStoryScroll__visual-container-inner"], n["RiverStoryScroll__visual--below"]),
+					children: [
+						/* @__PURE__ */ l("div", { className: n["RiverStoryScroll__visual-cover"] }),
+						_.map((e, t) => /* @__PURE__ */ u(r, {
+							className: n["RiverStoryScroll__visual-scroll-responder"],
+							index: t,
+							children: [e.type === "video" && /* @__PURE__ */ l("video", {
+								playsInline: !0,
+								muted: !0,
+								preload: "auto",
+								className: n.RiverStoryScroll__image,
+								children: /* @__PURE__ */ l("source", {
+									src: e.src,
+									type: "video/mp4; codecs=avc1.4d002a"
+								})
+							}), e.type === "image" && /* @__PURE__ */ l("img", {
+								className: n.RiverStoryScroll__image,
+								src: `${e.src}`,
+								alt: ""
+							})]
+						}, t)),
+						/* @__PURE__ */ l("div", {
+							className: n.RiverStoryScroll__pagination,
+							children: _.map((e, t) => /* @__PURE__ */ l("div", { className: n["RiverStoryScroll__pagination-dot"] }, t))
+						})
+					]
+				})
+			}), /* @__PURE__ */ l("div", {
+				ref: m,
+				className: e(n["RiverStoryScroll__content-container"], n["RiverStoryScroll__content-container--below"]),
+				children: a.Children.map(y, (e, t) => /* @__PURE__ */ l(i, {
+					location: "below",
+					index: t,
+					className: n.RiverStoryScroll__tracker,
+					children: e
+				}, t))
+			})]
+		})
+	});
+}
+//#endregion
+export { d as RiverStoryScroll };
+
+//# sourceMappingURL=RiverStoryScroll.js.map

package/esm/river/RiverStoryScroll/RiverStoryScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RiverStoryScroll.js","names":[],"sources":["../../../src/river/RiverStoryScroll/RiverStoryScroll.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {useEffect, useRef} from 'react'\nimport type {RiverProps} from '../../'\nimport {RiverStoryScrollProvider} from './RiverStoryScrollProvider'\nimport {RiverStoryScrollResponder} from './RiverStoryScrollResponder'\nimport {RiverStoryScrollTracker} from './RiverStoryScrollTracker'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river-story-scroll/colors-with-modes.css'\nimport styles from './RiverStoryScroll.module.css'\n\nexport type RiverStoryScrollProps = {\n  /**\n   * Adjust the order of the `Content` column. The default is `start`.\n   */\n  align?: 'start' | 'end'\n  /**\n   * Apply an alternative image to text column ratio. The default is `50:50`.\n   */\n  imageTextRatio?: '60:40' | '50:50'\n  /**\n   * Disable the scroll effect.\n   */\n  disabled?: boolean\n  /**\n   * Only River components are allowed as children.\n   */\n  children?: React.ReactElement<RiverProps>[]\n}\n\ntype Media = {type: 'image' | 'video'; src: string}\n\nexport function RiverStoryScroll({children, disabled}: RiverStoryScrollProps) {\n  const visualContainerRef = useRef<HTMLDivElement | null>(null)\n  const contentContainerRef = useRef<HTMLDivElement | null>(null)\n\n  const [prefersReducedMotion, setPrefersReducedMotion] = React.useState(false)\n  const [media, setMedia] = React.useState<Media[]>([])\n\n  const Children = React.Children.map(children, child => {\n    if (React.isValidElement(child)) {\n      return React.cloneElement(child as React.ReactElement<RiverProps>, {\n        className: clsx(\n          styles['RiverStoryScroll__internal-river'],\n          !disabled && styles['RiverStoryScroll__content-stack'],\n        ),\n      })\n    }\n  })\n\n  const initialVisibilityStates = Children ? new Array(Children.length).fill(false) : []\n\n  useEffect(() => {\n    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')\n    setPrefersReducedMotion(mediaQuery.matches)\n\n    const listener = (e: MediaQueryListEvent) => {\n      setPrefersReducedMotion(e.matches)\n    }\n\n    mediaQuery.addEventListener('change', listener)\n\n    return () => {\n      mediaQuery.removeEventListener('change', listener)\n    }\n  }, [])\n\n  useEffect(() => {\n    if (disabled || prefersReducedMotion || !contentContainerRef.current) return\n\n    const mediaElements = Array.from(\n      contentContainerRef.current.querySelectorAll<HTMLImageElement | HTMLVideoElement>('img, video'),\n    )\n\n    const newMedia: Media[] = mediaElements.map(element => {\n      if (element instanceof HTMLImageElement) {\n        return {\n          type: 'image',\n          src: element.src,\n        }\n      }\n\n      return {\n        type: 'video',\n        src: element.querySelector('source')?.src || '',\n      }\n    })\n\n    setMedia(newMedia)\n  }, [disabled, prefersReducedMotion])\n\n  if (disabled || prefersReducedMotion) {\n    return <>{children}</>\n  }\n\n  return (\n    <div className={clsx(styles.RiverStoryScroll, styles['RiverStoryScroll--enabled'])}>\n      <RiverStoryScrollProvider initialStates={initialVisibilityStates} className={styles.RiverStoryScroll__inner}>\n        <div className={styles['RiverStoryScroll__visual-container']} ref={visualContainerRef}>\n          <div\n            className={clsx(\n              styles['RiverStoryScroll__visual-container-inner'],\n              styles['RiverStoryScroll__visual--below'],\n            )}\n          >\n            <div className={styles['RiverStoryScroll__visual-cover']} />\n            {media.map((item, index) => (\n              <RiverStoryScrollResponder\n                className={styles['RiverStoryScroll__visual-scroll-responder']}\n                key={index}\n                index={index}\n              >\n                {item.type === 'video' && (\n                  <video playsInline={true} muted={true} preload=\"auto\" className={styles['RiverStoryScroll__image']}>\n                    <source src={item.src} type=\"video/mp4; codecs=avc1.4d002a\" />\n                  </video>\n                )}\n                {item.type === 'image' && (\n                  <img className={styles['RiverStoryScroll__image']} src={`${item.src}`} alt=\"\" />\n                )}\n              </RiverStoryScrollResponder>\n            ))}\n            <div className={styles['RiverStoryScroll__pagination']}>\n              {media.map((_, index) => (\n                <div className={styles['RiverStoryScroll__pagination-dot']} key={index} />\n              ))}\n            </div>\n          </div>\n        </div>\n\n        <div\n          ref={contentContainerRef}\n          className={clsx(\n            styles['RiverStoryScroll__content-container'],\n            styles['RiverStoryScroll__content-container--below'],\n          )}\n        >\n          {React.Children.map(Children, (child, index) => (\n            <RiverStoryScrollTracker\n              key={index}\n              location=\"below\"\n              index={index}\n              className={styles.RiverStoryScroll__tracker}\n            >\n              {child}\n            </RiverStoryScrollTracker>\n          ))}\n        </div>\n      </RiverStoryScrollProvider>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;AA+BA,SAAgB,EAAiB,EAAC,aAAU,eAAkC;CAC5E,IAAM,IAAqB,EAA8B,KAAK,EACxD,IAAsB,EAA8B,KAAK,EAEzD,CAAC,GAAsB,KAA2B,EAAM,SAAS,GAAM,EACvE,CAAC,GAAO,KAAY,EAAM,SAAkB,EAAE,CAAC,EAE/C,IAAW,EAAM,SAAS,IAAI,IAAU,MAAS;AACrD,MAAI,EAAM,eAAe,EAAM,CAC7B,QAAO,EAAM,aAAa,GAAyC,EACjE,WAAW,EACT,EAAO,qCACP,CAAC,KAAY,EAAO,mCACrB,EACF,CAAC;GAEJ,EAEI,IAA0B,IAAe,MAAM,EAAS,OAAO,CAAC,KAAK,GAAM,GAAG,EAAE;AA6CtF,QA3CA,QAAgB;EACd,IAAM,IAAa,OAAO,WAAW,mCAAmC;AACxE,IAAwB,EAAW,QAAQ;EAE3C,IAAM,KAAY,MAA2B;AAC3C,KAAwB,EAAE,QAAQ;;AAKpC,SAFA,EAAW,iBAAiB,UAAU,EAAS,QAElC;AACX,KAAW,oBAAoB,UAAU,EAAS;;IAEnD,EAAE,CAAC,EAEN,QAAgB;AACV,OAAY,KAAwB,CAAC,EAAoB,WAoB7D,EAlBsB,MAAM,KAC1B,EAAoB,QAAQ,iBAAsD,aAAa,CAGvE,CAAc,KAAI,MACtC,aAAmB,mBACd;GACL,MAAM;GACN,KAAK,EAAQ;GACd,GAGI;GACL,MAAM;GACN,KAAK,EAAQ,cAAc,SAAS,EAAE,OAAO;GAC9C,CAGM,CAAS;IACjB,CAAC,GAAU,EAAqB,CAAC,EAEhC,KAAY,IACP,kBAAA,GAAA,EAAG,aAAY,CAAA,GAItB,kBAAC,OAAD;EAAK,WAAW,EAAK,EAAO,kBAAkB,EAAO,6BAA6B;YAChF,kBAAC,GAAD;GAA0B,eAAe;GAAyB,WAAW,EAAO;aAApF,CACE,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAuC,KAAK;cACjE,kBAAC,OAAD;KACE,WAAW,EACT,EAAO,6CACP,EAAO,mCACR;eAJH;MAME,kBAAC,OAAD,EAAK,WAAW,EAAO,mCAAqC,CAAA;MAC3D,EAAM,KAAK,GAAM,MAChB,kBAAC,GAAD;OACE,WAAW,EAAO;OAEX;iBAHT,CAKG,EAAK,SAAS,WACb,kBAAC,SAAD;QAAO,aAAa;QAAM,OAAO;QAAM,SAAQ;QAAO,WAAW,EAAO;kBACtE,kBAAC,UAAD;SAAQ,KAAK,EAAK;SAAK,MAAK;SAAkC,CAAA;QACxD,CAAA,EAET,EAAK,SAAS,WACb,kBAAC,OAAD;QAAK,WAAW,EAAO;QAA4B,KAAK,GAAG,EAAK;QAAO,KAAI;QAAK,CAAA,CAExD;SAXrB,EAWqB,CAC5B;MACF,kBAAC,OAAD;OAAK,WAAW,EAAO;iBACpB,EAAM,KAAK,GAAG,MACb,kBAAC,OAAD,EAAK,WAAW,EAAO,qCAAmD,EAAT,EAAS,CAC1E;OACE,CAAA;MACF;;IACF,CAAA,EAEN,kBAAC,OAAD;IACE,KAAK;IACL,WAAW,EACT,EAAO,wCACP,EAAO,8CACR;cAEA,EAAM,SAAS,IAAI,IAAW,GAAO,MACpC,kBAAC,GAAD;KAEE,UAAS;KACF;KACP,WAAW,EAAO;eAEjB;KACuB,EANnB,EAMmB,CAC1B;IACE,CAAA,CACmB;;EACvB,CAAA"}

package/esm/river/RiverStoryScroll/RiverStoryScroll.module-D8dFaLHq.css

@@ -0,0 +1 @@
+.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--ease:cubic-bezier(.22, .56, .23, .89);-webkit-font-smoothing:antialiased;--stackDistance:calc(var(--base-size-24) * -1);--visualMaxWidth:1032px;--visualMaxWidthUL:1032;--visualMaxHeight:min(690px, 60vh);--visualMaxHeightUL:690;--storyScrollPadding:min(32px, 5vw);position:relative}@media (height<=720px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--visualMaxHeight:55vh}}@media (height<=600px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--visualMaxHeight:50vh}}@media (height<=500px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--visualMaxHeight:40vh}}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__inner___WF5b_{position:relative}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-cover___3Fzq_{width:100%;position:absolute;left:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__image___SlwET{z-index:10;border-radius:var(--brand-borderRadius-large);width:auto;margin-left:auto;margin-right:auto;position:relative}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll--enabled___rZJ_t .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__internal-river___Z0U1_{grid-template-columns:1fr;gap:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll--enabled___rZJ_t .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__internal-river___Z0U1_ img,.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll--enabled___rZJ_t .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__internal-river___Z0U1_ video{display:none}@media (width<=542px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--topOffset:calc((100vh - min(664px, 60vh)) / 5)}}@media (width<=768px) and (height>=670px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--extraBottomSpacing:calc(-1 * (100vh - 100vw) / 5)}}@media (width>=542px) and (width<=1028px) and (height>=670px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--extraBottomSpacing:calc(-1 * (100vh - 100vw) / 3)}}@media (width>=542px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--scrollTextHeight:42vh}}@media (height<=520px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--scrollTextHeight:70vh}}@media (width>=1028px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--stackDistance:-30px}}@media (height<=800px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--stackDistance:-20px}}@media (height<=500px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--stackDistance:-15px}}@media screen and (width<=768px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--topOffset:calc((100vh - min(664px, 60vh)) / 3);--availableWidth:calc(100vw - var(--storyScrollPadding) * 2);--relativeVisualHeight:calc(var(--visualMaxHeightUL) / var(--visualMaxWidthUL) * var(--availableWidth));--visualHeight:min(var(--visualMaxHeight), var(--relativeVisualHeight));--visualWidth:calc(var(--visualHeight) * var(--visualMaxWidthUL) / var(--visualMaxHeightUL));--scrollTextHeight:58vh;--textToVisualPadding:max(5vh, 40px);--topScrollOffset:calc(var(--visualHeight));--bottomScrollOffset:calc(100vh - var(--topOffset) - var(--visualHeight) - var(--textToVisualPadding));--extraBottomSpacing:70px}@supports (height:100dvh){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-container-inner___6xmBy{height:100dvh}}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-container___F1VHb{width:100%;height:100%;position:absolute;top:0;left:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i{min-height:var(--scrollTextHeight);transition:opacity .3s var(--ease);position:relative}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i:has(+.Primer_Brand__RiverStoryScroll-module__in-viewport___QNWnS){opacity:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i.Primer_Brand__RiverStoryScroll-module__in-viewport___QNWnS+.Primer_Brand__RiverStoryScroll-module__outside-viewport___d_yN_{opacity:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{max-width:calc(1032px + var(--storyScrollPadding) * 2);padding-right:var(--storyScrollPadding);padding-left:var(--storyScrollPadding);margin-top:min(30vw,22vh);margin-left:auto;margin-right:auto}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-container--below___wHtLU{padding-top:var(--topScrollOffset);padding-bottom:var(--bottomScrollOffset)}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__image___SlwET{width:100%;height:auto;max-width:var(--visualWidth);border-radius:var(--brand-borderRadius-large)}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-container-inner___6xmBy{pointer-events:none;padding-top:var(--topOffset);margin-top:calc(-1 * var(--topOffset));z-index:1;flex-direction:column;height:100vh;display:flex;position:sticky;top:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual--below___E8917{background-image:linear-gradient(180deg, var(--brand-RiverStoryScroll-content-inactive-bgColor) calc(var(--topOffset) + var(--visualHeight) + 3px), transparent calc(var(--topOffset) + var(--visualHeight) + var(--textToVisualPadding)), transparent 93%, var(--brand-RiverStoryScroll-content-inactive-bgColor) 99%)}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual--below___E8917 .Primer_Brand__RiverStoryScroll-module__story-scroll-text___fiWO6{margin-top:var(--base-size-40)}.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4{opacity:0;display:none}.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4:nth-child(2){opacity:1;display:block}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-scroll-responder___AqOJd{transition:.5s var(--ease) transform, .5s var(--ease) filter, .5s var(--ease) opacity;pointer-events:auto}.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4:has(~.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh){margin-left:auto;margin-right:auto;display:block;position:absolute;left:0;right:0}.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh+.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4{transform:translateY(calc(var(--stackDistance) * -1)) scale(1.015);margin-left:auto;margin-right:auto;display:block;position:absolute;left:0;right:0}.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4:has(+.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh){transform:translateY(var(--stackDistance)) scale(.95);filter:brightness(70%);opacity:1}.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4:has(+.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4+.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh){transform:translateY(calc(var(--stackDistance) * 2)) scale(.9);filter:brightness(50%);opacity:1}.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4:has(+.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4+.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4+.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh){transform:translateY(calc(var(--stackDistance) * 3)) scale(.85);filter:brightness(30%);opacity:1}.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4:has(+.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4+.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4+.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4+.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh){transform:translateY(calc(var(--stackDistance) * 4)) scale(.8);filter:brightness(10%);opacity:1}.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh{display:block;position:relative}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-stack___LUJFy{padding-top:var(--textToVisualPadding);top:calc(var(--topOffset) + var(--visualHeight));position:sticky}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i:last-child .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-stack___LUJFy{height:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination___N3Qqs{gap:var(--base-size-4);left:calc(var(--base-size-20) * -1 - 2px);height:var(--visualHeight);margin:auto;flex-direction:column;justify-content:center;margin-block-start:calc(var(--base-size-20) * -1);display:flex;position:absolute;right:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination-dot___K1RGe{border-radius:var(--brand-borderRadius-large);opacity:.55;background:var(--brand-RiverStoryScroll-pagination-fgColor);width:6px;height:6px;transition:opacity var(--brand-animation-duration-default) var(--ease), height var(--brand-animation-duration-default) var(--ease)}.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh:nth-child(2)~.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination___N3Qqs .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination-dot___K1RGe:first-child,.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh:nth-child(3)~.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination___N3Qqs .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination-dot___K1RGe:nth-child(2),.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh:nth-child(4)~.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination___N3Qqs .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination-dot___K1RGe:nth-child(3),.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh:nth-child(5)~.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination___N3Qqs .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination-dot___K1RGe:nth-child(4),.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh:nth-child(6)~.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination___N3Qqs .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination-dot___K1RGe:nth-child(5){opacity:1;height:var(--base-size-24)}}@media screen and (width>=768px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__inner___WF5b_{grid-gap:var(--base-size-24);gap:var(--base-size-24);grid-template-columns:1fr 1fr;display:grid}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-container___F1VHb{order:2;align-items:center;width:100%;height:80vh;display:flex;position:sticky;top:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-container-inner___6xmBy,.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__image___SlwET{width:100%}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-scroll-responder___AqOJd{width:100%;transition:opacity .3s var(--ease);padding-top:10vh;position:sticky;top:0;right:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-container-inner___6xmBy.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual--below___E8917{position:sticky;top:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-scroll-responder___AqOJd.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4{z-index:-1;opacity:0;position:absolute;top:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-scroll-responder___AqOJd.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh{z-index:1;opacity:1}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-container___8f_JH.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-container--below___wHtLU{padding-top:10vh}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-container___8f_JH.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-container--below___wHtLU .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i{padding:20vh 0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i.Primer_Brand__RiverStoryScroll-module__outside-viewport___d_yN_{position:relative}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i{filter:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i.Primer_Brand__RiverStoryScroll-module__outside-viewport___d_yN_{filter:blur(1px);transition:filter var(--brand-animation-duration-extended) var(--brand-animation-easing-default)}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i:after{content:"";transition:opacity var(--brand-animation-duration-extended) var(--brand-animation-easing-default), visibility var(--brand-animation-duration-extended) var(--brand-animation-easing-default);opacity:0;visibility:hidden;background-color:var(--brand-RiverStoryScroll-content-inactive-bgColor);position:absolute;inset:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i.Primer_Brand__RiverStoryScroll-module__outside-viewport___d_yN_:after{opacity:.7;visibility:visible}}@media screen and (width>=768px) and (height>=900px) and (prefers-reduced-motion:no-preference){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{margin-top:-20vh}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-container___8f_JH.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-container--below___wHtLU{padding-top:16vh}}@media (prefers-reduced-motion:reduce){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC,.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC:before,.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC:after,.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

package/esm/river/RiverStoryScroll/RiverStoryScroll.module.js

@@ -0,0 +1,27 @@
+import './RiverStoryScroll.module-D8dFaLHq.css';var e = {
+	RiverStoryScroll: "Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC",
+	RiverStoryScroll__inner: "Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__inner___WF5b_",
+	"RiverStoryScroll__visual-cover": "Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-cover___3Fzq_",
+	RiverStoryScroll__image: "Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__image___SlwET",
+	"RiverStoryScroll--enabled": "Primer_Brand__RiverStoryScroll-module__RiverStoryScroll--enabled___rZJ_t",
+	"RiverStoryScroll__internal-river": "Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__internal-river___Z0U1_",
+	"RiverStoryScroll__visual-container-inner": "Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-container-inner___6xmBy",
+	"RiverStoryScroll__visual-container": "Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-container___F1VHb",
+	RiverStoryScroll__tracker: "Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i",
+	"in-viewport": "Primer_Brand__RiverStoryScroll-module__in-viewport___QNWnS",
+	"outside-viewport": "Primer_Brand__RiverStoryScroll-module__outside-viewport___d_yN_",
+	"RiverStoryScroll__content-container--below": "Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-container--below___wHtLU",
+	"RiverStoryScroll__visual--below": "Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual--below___E8917",
+	"story-scroll-text": "Primer_Brand__RiverStoryScroll-module__story-scroll-text___fiWO6",
+	"tracker-outside-viewport": "Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4",
+	"RiverStoryScroll__visual-scroll-responder": "Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-scroll-responder___AqOJd",
+	"tracker-in-viewport": "Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh",
+	"RiverStoryScroll__content-stack": "Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-stack___LUJFy",
+	RiverStoryScroll__pagination: "Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination___N3Qqs",
+	"RiverStoryScroll__pagination-dot": "Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination-dot___K1RGe",
+	"RiverStoryScroll__content-container": "Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-container___8f_JH"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=RiverStoryScroll.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RiverStoryScroll.module.js","names":[],"sources":["../../../src/river/RiverStoryScroll/RiverStoryScroll.module.css"],"sourcesContent":[".RiverStoryScroll {\n  --ease: cubic-bezier(0.22, 0.56, 0.23, 0.89);\n  -webkit-font-smoothing: antialiased;\n  --stackDistance: calc(var(--base-size-24) * -1);\n\n  /* River visual (videos)\n  * UL = unit-less, needed for division in certain scenarios\n  */\n  --visualMaxWidth: 1032px;\n  --visualMaxWidthUL: 1032;\n  --visualMaxHeight: min(690px, 60vh);\n  --visualMaxHeightUL: 690;\n  --storyScrollPadding: min(32px, 5vw);\n  position: relative;\n}\n@media (max-height: 720px) {\n  .RiverStoryScroll {\n    --visualMaxHeight: 55vh;\n  }\n}\n\n@media (max-height: 600px) {\n  .RiverStoryScroll {\n    --visualMaxHeight: 50vh;\n  }\n}\n\n@media (max-height: 500px) {\n  .RiverStoryScroll {\n    --visualMaxHeight: 40vh;\n  }\n}\n\n.RiverStoryScroll__inner {\n  position: relative;\n}\n\n.RiverStoryScroll__visual-cover {\n  position: absolute;\n  left: 0;\n  width: 100%;\n}\n\n.RiverStoryScroll__image {\n  margin-left: auto;\n  margin-right: auto;\n  width: auto;\n  z-index: 10;\n  position: relative;\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverStoryScroll--enabled .RiverStoryScroll__internal-river {\n  grid-template-columns: 1fr;\n  gap: 0;\n}\n\n.RiverStoryScroll--enabled .RiverStoryScroll__internal-river img,\n.RiverStoryScroll--enabled .RiverStoryScroll__internal-river video {\n  display: none;\n}\n\n@media (max-width: 542px) {\n  .RiverStoryScroll {\n    --topOffset: calc((100vh - min(664px, 60vh)) / 5);\n  }\n}\n\n@media (max-width: 768px) and (min-height: 670px) {\n  .RiverStoryScroll {\n    --extraBottomSpacing: calc(-1 * (100vh - 100vw) / 5);\n  }\n}\n\n@media (min-width: 542px) and (max-width: 1028px) and (min-height: 670px) {\n  .RiverStoryScroll {\n    --extraBottomSpacing: calc(-1 * (100vh - 100vw) / 3);\n  }\n}\n\n@media (min-width: 542px) {\n  .RiverStoryScroll {\n    --scrollTextHeight: 42vh;\n  }\n}\n\n@media (max-height: 520px) {\n  .RiverStoryScroll {\n    --scrollTextHeight: 70vh;\n  }\n}\n\n@media (min-width: 1028px) {\n  .RiverStoryScroll {\n    --stackDistance: -30px;\n  }\n}\n\n@media (max-height: 800px) {\n  .RiverStoryScroll {\n    --stackDistance: -20px;\n  }\n}\n\n@media (max-height: 500px) {\n  .RiverStoryScroll {\n    --stackDistance: -15px;\n  }\n}\n\n@media screen and (max-width: 768px) {\n  .RiverStoryScroll {\n    --topOffset: calc((100vh - min(664px, 60vh)) / 3);\n\n    /* Spacing above the visual */\n    --availableWidth: calc(100vw - var(--storyScrollPadding) * 2);\n    --relativeVisualHeight: calc(var(--visualMaxHeightUL) / var(--visualMaxWidthUL) * var(--availableWidth));\n    --visualHeight: min(var(--visualMaxHeight), var(--relativeVisualHeight));\n    --visualWidth: calc(var(--visualHeight) * var(--visualMaxWidthUL) / var(--visualMaxHeightUL));\n    --scrollTextHeight: 58vh;\n    --textToVisualPadding: max(5vh, 40px);\n\n    --topScrollOffset: calc(var(--visualHeight));\n    --bottomScrollOffset: calc(100vh - var(--topOffset) - var(--visualHeight) - var(--textToVisualPadding));\n\n    --extraBottomSpacing: 70px;\n  }\n\n  /* Enhanced styling if dvh is supported */\n  @supports (height: 100dvh) {\n    .RiverStoryScroll__visual-container-inner {\n      height: 100dvh;\n    }\n  }\n\n  .RiverStoryScroll__visual-container {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    left: 0;\n    top: 0;\n  }\n\n  .RiverStoryScroll__tracker {\n    min-height: var(--scrollTextHeight);\n    position: relative;\n    transition: opacity 0.3s var(--ease);\n  }\n\n  .RiverStoryScroll__tracker:has(+ .in-viewport) {\n    opacity: 0;\n  }\n\n  .RiverStoryScroll__tracker.in-viewport + .outside-viewport {\n    opacity: 0;\n  }\n\n  .RiverStoryScroll {\n    max-width: calc(1032px + var(--storyScrollPadding) * 2);\n    margin-top: min(30vw, 22vh);\n    margin-left: auto;\n    margin-right: auto;\n    padding-right: var(--storyScrollPadding);\n    padding-left: var(--storyScrollPadding);\n  }\n\n  .RiverStoryScroll__content-container--below {\n    padding-top: var(--topScrollOffset);\n    padding-bottom: var(--bottomScrollOffset);\n  }\n\n  .RiverStoryScroll__image {\n    height: auto;\n    width: 100%;\n    max-width: var(--visualWidth);\n    border-radius: var(--brand-borderRadius-large);\n  }\n\n  .RiverStoryScroll__visual-container-inner {\n    position: sticky;\n    pointer-events: none;\n    top: 0;\n    padding-top: var(--topOffset);\n    margin-top: calc(-1 * var(--topOffset));\n    display: flex;\n    z-index: 1;\n    flex-direction: column;\n    height: 100vh;\n  }\n\n  .RiverStoryScroll__visual--below {\n    background-image: linear-gradient(\n      180deg,\n      var(--brand-RiverStoryScroll-content-inactive-bgColor) calc(var(--topOffset) + var(--visualHeight) + 3px),\n      transparent calc(var(--topOffset) + var(--visualHeight) + var(--textToVisualPadding)),\n      transparent 93%,\n      var(--brand-RiverStoryScroll-content-inactive-bgColor) 99%\n    );\n  }\n\n  .RiverStoryScroll__visual--below .story-scroll-text {\n    margin-top: var(--base-size-40);\n  }\n\n  .tracker-outside-viewport {\n    opacity: 0;\n    display: none;\n  }\n\n  /* Show first visual, even when nothing is visible */\n  .tracker-outside-viewport:nth-child(2) {\n    opacity: 1;\n    display: block;\n  }\n\n  .RiverStoryScroll__visual-scroll-responder {\n    transition: 0.5s var(--ease) transform, 0.5s var(--ease) filter, 0.5s var(--ease) opacity;\n    pointer-events: auto;\n  }\n\n  .tracker-outside-viewport:has(~ .tracker-in-viewport) {\n    position: absolute;\n    display: block;\n    margin-left: auto;\n    margin-right: auto;\n    left: 0;\n    right: 0;\n  }\n\n  .tracker-in-viewport + .tracker-outside-viewport {\n    transform: translateY(calc(var(--stackDistance) * -1)) scale(1.015);\n    position: absolute;\n    display: block;\n    margin-left: auto;\n    margin-right: auto;\n    left: 0;\n    right: 0;\n  }\n\n  .tracker-outside-viewport:has(+ .tracker-in-viewport) {\n    transform: translateY(var(--stackDistance)) scale(0.95);\n    filter: brightness(70%);\n    opacity: 1;\n  }\n\n  .tracker-outside-viewport:has(+ .tracker-outside-viewport + .tracker-in-viewport) {\n    transform: translateY(calc(var(--stackDistance) * 2)) scale(0.9);\n    filter: brightness(50%);\n    opacity: 1;\n  }\n\n  .tracker-outside-viewport:has(+ .tracker-outside-viewport + .tracker-outside-viewport + .tracker-in-viewport) {\n    transform: translateY(calc(var(--stackDistance) * 3)) scale(0.85);\n    filter: brightness(30%);\n    opacity: 1;\n  }\n\n  .tracker-outside-viewport:has(\n      + .tracker-outside-viewport + .tracker-outside-viewport + .tracker-outside-viewport + .tracker-in-viewport\n    ) {\n    transform: translateY(calc(var(--stackDistance) * 4)) scale(0.8);\n    filter: brightness(10%);\n    opacity: 1;\n  }\n\n  .tracker-in-viewport {\n    display: block;\n    position: relative;\n  }\n\n  /* \n    TODO: Re-enable these at a later date\n    \n    .video-controls {\n      --distanceFromEdge: 12px;\n      position: absolute;\n      right: calc((100% - var(--visualWidth)) / 2 + var(--distanceFromEdge));\n      bottom: var(--distanceFromEdge);\n      z-index: 10;\n      pointer-events: auto;\n      transition: opacity 0.3s var(--ease);\n      opacity: 0;\n    }\n\n    @media (min-width: 542px) {\n      .video-controls {\n        --distanceFromEdge: 20px;\n      }\n    }\n\n    .RiverStoryScroll__visual-scroll-responder:hover .video-controls,\n    .video-controls-ended {\n      opacity: 1;\n    }\n\n    .video-control {\n      background-color: rgba(0, 0, 0, 0.18);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 200px;\n      width: 44px;\n      height: 44px;\n      transition: background-color 0.2s ease;\n    }\n\n    .video-control:hover,\n    .video-control:focus {\n      background-color: rgba(0, 0, 0, 0.35);\n    } */\n\n  .RiverStoryScroll__content-stack {\n    position: sticky;\n    padding-top: var(--textToVisualPadding);\n    top: calc(var(--topOffset) + var(--visualHeight));\n  }\n\n  /* This is a hack to make the sticky behavior exclude the height of itself as it reaches the bottom */\n  /* This makes it possible to calculate the end of the sticky scroll without having to account for text content */\n  .RiverStoryScroll__tracker:last-child .RiverStoryScroll__content-stack {\n    height: 0;\n  }\n\n  .RiverStoryScroll__pagination {\n    display: flex;\n    flex-direction: column;\n    gap: var(--base-size-4);\n    position: absolute;\n    left: calc(var(--base-size-20) * -1 - 2px);\n    right: 0;\n    margin: auto;\n    height: var(--visualHeight);\n    justify-content: center;\n    margin-block-start: calc(var(--base-size-20) * -1);\n  }\n\n  .RiverStoryScroll__pagination-dot {\n    width: 6px;\n    height: 6px;\n    border-radius: var(--brand-borderRadius-large);\n    opacity: 0.55;\n    background: var(--brand-RiverStoryScroll-pagination-fgColor);\n    transition: opacity var(--brand-animation-duration-default) var(--ease),\n      height var(--brand-animation-duration-default) var(--ease);\n  }\n\n  .tracker-in-viewport:nth-child(2) ~ .RiverStoryScroll__pagination .RiverStoryScroll__pagination-dot:nth-child(1) {\n    opacity: 1;\n    height: var(--base-size-24);\n  }\n\n  .tracker-in-viewport:nth-child(3) ~ .RiverStoryScroll__pagination .RiverStoryScroll__pagination-dot:nth-child(2) {\n    opacity: 1;\n    height: var(--base-size-24);\n  }\n\n  .tracker-in-viewport:nth-child(4) ~ .RiverStoryScroll__pagination .RiverStoryScroll__pagination-dot:nth-child(3) {\n    opacity: 1;\n    height: var(--base-size-24);\n  }\n\n  .tracker-in-viewport:nth-child(5) ~ .RiverStoryScroll__pagination .RiverStoryScroll__pagination-dot:nth-child(4) {\n    opacity: 1;\n    height: var(--base-size-24);\n  }\n\n  .tracker-in-viewport:nth-child(6) ~ .RiverStoryScroll__pagination .RiverStoryScroll__pagination-dot:nth-child(5) {\n    opacity: 1;\n    height: var(--base-size-24);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  .RiverStoryScroll__inner {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: var(--base-size-24);\n  }\n\n  .RiverStoryScroll__visual-container {\n    position: sticky;\n    width: 100%;\n    top: 0;\n    height: 80vh;\n    display: flex;\n    align-items: center;\n    order: 2;\n  }\n\n  .RiverStoryScroll__visual-container-inner,\n  .RiverStoryScroll__image {\n    width: 100%;\n  }\n\n  .RiverStoryScroll .RiverStoryScroll__visual-scroll-responder {\n    position: sticky;\n    top: 0;\n    width: 100%;\n    right: 0;\n    transition: opacity 0.3s var(--ease);\n    padding-top: 10vh;\n  }\n\n  .RiverStoryScroll__visual-container-inner.RiverStoryScroll__visual--below {\n    position: sticky;\n    top: 0;\n  }\n\n  .RiverStoryScroll__visual-scroll-responder.tracker-outside-viewport {\n    position: absolute;\n    top: 0;\n    z-index: -1;\n    opacity: 0;\n  }\n\n  .RiverStoryScroll__visual-scroll-responder.tracker-in-viewport {\n    z-index: 1;\n    opacity: 1;\n  }\n\n  .RiverStoryScroll__content-container.RiverStoryScroll__content-container--below {\n    padding-top: 10vh;\n  }\n\n  .RiverStoryScroll__content-container.RiverStoryScroll__content-container--below .RiverStoryScroll__tracker {\n    padding: 20vh 0;\n  }\n\n  .RiverStoryScroll__tracker.outside-viewport {\n    position: relative;\n  }\n\n  .RiverStoryScroll__tracker {\n    filter: 0;\n  }\n\n  .RiverStoryScroll__tracker.outside-viewport {\n    filter: blur(1px);\n    transition: filter var(--brand-animation-duration-extended) var(--brand-animation-easing-default);\n  }\n\n  .RiverStoryScroll__tracker::after {\n    content: '';\n    transition: opacity var(--brand-animation-duration-extended) var(--brand-animation-easing-default),\n      visibility var(--brand-animation-duration-extended) var(--brand-animation-easing-default);\n    opacity: 0;\n    visibility: hidden;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: var(--brand-RiverStoryScroll-content-inactive-bgColor);\n  }\n\n  .RiverStoryScroll__tracker.outside-viewport::after {\n    opacity: 0.7;\n    visibility: visible;\n  }\n}\n\n@media screen and (min-width: 768px) and (min-height: 900px) and (prefers-reduced-motion: no-preference) {\n  .RiverStoryScroll {\n    margin-top: -20vh;\n  }\n\n  .RiverStoryScroll__content-container.RiverStoryScroll__content-container--below {\n    padding-top: 16vh;\n  }\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .RiverStoryScroll,\n  .RiverStoryScroll::before,\n  .RiverStoryScroll::after,\n  .RiverStoryScroll * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}

package/esm/river/RiverStoryScroll/RiverStoryScrollProvider.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+type StoryScrollContextType = {
+    visibilityStates: boolean[];
+    setVisibilityStates: (index: number, isVisible: boolean) => void;
+};
+export declare const useStoryScrollContext: () => StoryScrollContextType;
+export declare function RiverStoryScrollProvider({ children, className, initialStates, }: {
+    children: ReactNode;
+    className?: string;
+    initialStates: boolean[];
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=RiverStoryScrollProvider.d.ts.map

package/esm/river/RiverStoryScroll/RiverStoryScrollProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RiverStoryScrollProvider.d.ts","sourceRoot":"","sources":["../../../src/river/RiverStoryScroll/RiverStoryScrollProvider.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAgB,SAAS,EAAuB,MAAM,OAAO,CAAA;AAE3E,KAAK,sBAAsB,GAAG;IAC5B,gBAAgB,EAAE,OAAO,EAAE,CAAA;IAC3B,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;CACjE,CAAA;AASD,eAAO,MAAM,qBAAqB,8BAAuC,CAAA;AAEzE,wBAAgB,wBAAwB,CAAC,EACvC,QAAQ,EACR,SAAS,EACT,aAAa,GACd,EAAE;IACD,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,EAAE,OAAO,EAAE,CAAA;CACzB,2CAyCA"}

package/esm/river/RiverStoryScroll/RiverStoryScrollProvider.js

@@ -0,0 +1,33 @@
+import { createContext as e, useContext as t, useState as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/river/RiverStoryScroll/RiverStoryScrollProvider.tsx
+var i = e({
+	visibilityStates: [],
+	setVisibilityStates: () => {
+		throw Error("setVisibilityStates function must be implemented.");
+	}
+}), a = () => t(i);
+function o({ children: e, className: t, initialStates: a }) {
+	let [o, s] = n(a), [, c] = n(/* @__PURE__ */ new Set()), [l, u] = n(null);
+	return /* @__PURE__ */ r("div", {
+		className: t,
+		children: /* @__PURE__ */ r(i.Provider, {
+			value: {
+				visibilityStates: o,
+				setVisibilityStates: (e, t) => {
+					c((n) => {
+						let r = new Set(n);
+						t ? r.add(e) : r.delete(e);
+						let i = r.size > 0 ? Math.max(...Array.from(r)) : l;
+						return i !== null && (u(i), s((e) => e.map((e, t) => t === i))), r;
+					});
+				}
+			},
+			children: e
+		})
+	});
+}
+//#endregion
+export { o as RiverStoryScrollProvider, a as useStoryScrollContext };
+
+//# sourceMappingURL=RiverStoryScrollProvider.js.map

package/esm/river/RiverStoryScroll/RiverStoryScrollProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RiverStoryScrollProvider.js","names":[],"sources":["../../../src/river/RiverStoryScroll/RiverStoryScrollProvider.tsx"],"sourcesContent":["import React, {createContext, ReactNode, useContext, useState} from 'react'\n\ntype StoryScrollContextType = {\n  visibilityStates: boolean[]\n  setVisibilityStates: (index: number, isVisible: boolean) => void\n}\n\nconst StoryScrollContext = createContext<StoryScrollContextType>({\n  visibilityStates: [],\n  setVisibilityStates: () => {\n    throw new Error('setVisibilityStates function must be implemented.')\n  },\n})\n\nexport const useStoryScrollContext = () => useContext(StoryScrollContext)\n\nexport function RiverStoryScrollProvider({\n  children,\n  className,\n  initialStates,\n}: {\n  children: ReactNode\n  className?: string\n  initialStates: boolean[]\n}) {\n  const [visibilityStates, setVisibilityStates] = useState<boolean[]>(initialStates)\n  const [, setVisibleIndexes] = useState<Set<number>>(new Set())\n  const [lastActiveIndex, setLastActiveIndex] = useState<number | null>(null) // Track the last active index\n\n  const updateVisibilityStates = (index: number, isVisible: boolean) => {\n    setVisibleIndexes(currentVisibleIndexes => {\n      const newVisibleIndexes = new Set(currentVisibleIndexes)\n\n      if (isVisible) {\n        newVisibleIndexes.add(index)\n      } else {\n        newVisibleIndexes.delete(index)\n      }\n\n      const highestVisibleIndex =\n        newVisibleIndexes.size > 0 ? Math.max(...Array.from(newVisibleIndexes)) : lastActiveIndex\n\n      if (highestVisibleIndex !== null) {\n        // Update the last active index if a new item becomes the highest visible item\n        setLastActiveIndex(highestVisibleIndex)\n        // Ensure only the highest visible (or last active) index is marked as visible\n        setVisibilityStates(states => states.map((_, idx) => idx === highestVisibleIndex))\n      }\n\n      return newVisibleIndexes\n    })\n  }\n\n  return (\n    <div className={className}>\n      <StoryScrollContext.Provider\n        value={{\n          visibilityStates,\n          setVisibilityStates: updateVisibilityStates,\n        }}\n      >\n        {children}\n      </StoryScrollContext.Provider>\n    </div>\n  )\n}\n"],"mappings":";;;AAOA,IAAM,IAAqB,EAAsC;CAC/D,kBAAkB,EAAE;CACpB,2BAA2B;AACzB,QAAU,MAAM,oDAAoD;;CAEvE,CAAC,EAEW,UAA8B,EAAW,EAAmB;AAEzE,SAAgB,EAAyB,EACvC,aACA,cACA,oBAKC;CACD,IAAM,CAAC,GAAkB,KAAuB,EAAoB,EAAc,EAC5E,GAAG,KAAqB,kBAAsB,IAAI,KAAK,CAAC,EACxD,CAAC,GAAiB,KAAsB,EAAwB,KAAK;AA0B3E,QACE,kBAAC,OAAD;EAAgB;YACd,kBAAC,EAAmB,UAApB;GACE,OAAO;IACL;IACA,sBA7BwB,GAAe,MAAuB;AACpE,QAAkB,MAAyB;MACzC,IAAM,IAAoB,IAAI,IAAI,EAAsB;AAExD,MAAI,IACF,EAAkB,IAAI,EAAM,GAE5B,EAAkB,OAAO,EAAM;MAGjC,IAAM,IACJ,EAAkB,OAAO,IAAI,KAAK,IAAI,GAAG,MAAM,KAAK,EAAkB,CAAC,GAAG;AAS5E,aAPI,MAAwB,SAE1B,EAAmB,EAAoB,EAEvC,GAAoB,MAAU,EAAO,KAAK,GAAG,MAAQ,MAAQ,EAAoB,CAAC,GAG7E;OACP;;IASG;GAEA;GAC2B,CAAA;EAC1B,CAAA"}