@primer/react-brand 0.75.0-rc.a3f7dbd6 → 0.75.0

package/esm/river/RiverBreakout/RiverBreakout.js

@@ -1,4 +1,4 @@
-import e from "../../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../../node_modules/clsx/dist/clsx.js";
 import { useAnimation as t } from "../../animation/useAnimation.js";
 import { Heading as n } from "../../Heading/Heading.js";
 import r from "../../component-helpers/shared.module.js";

package/esm/river/RiverBreakout/RiverBreakout.js.map

@@ -1 +1 @@
-{"version":3,"file":"RiverBreakout.js","names":[],"sources":["../../../src/river/RiverBreakout/RiverBreakout.tsx"],"sourcesContent":["import React, {Ref, forwardRef} from 'react'\nimport {clsx} from 'clsx'\nimport {RiverProps} from '../River'\nimport {RiverVisualBase, RiverContent, type RiverVisualBaseProps} from '../River/River'\nimport {useAnimation} from '../../animation'\nimport findElementInChildren from '../../findElementInChildren'\nimport {Heading} from '../../Heading'\n\nimport styles from '../river-shared.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\nexport const RiverBreakoutVariants = ['default', 'gridline'] as const\nexport type RiverBreakoutVariant = (typeof RiverBreakoutVariants)[number]\n\ntype RiverBreakoutProps = Omit<RiverProps, 'align' | 'imageTextRatio'> & {\n  /**\n   * Apply a visual variant. The default is `default`.\n   * `gridline` adds horizontal border lines and lateral spacing.\n   */\n  variant?: RiverBreakoutVariant\n}\n\nconst Root = forwardRef(\n  ({animate, className, children, style, variant = 'default', ...rest}: RiverBreakoutProps, ref: Ref<HTMLElement>) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    // TODO: when Firefox supports :has() selector, we should use that instead of JS\n    const defaultColor =\n      findElementInChildren(children, 'b') || findElementInChildren(children, 'em') ? 'muted' : 'default'\n\n    if (!findElementInChildren(children, A11yHeading)) {\n      if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {\n        // eslint-disable-next-line no-console\n        console.warn(\n          'RiverBreakout: A11yHeading child is required. This element will not be visible, only read by screenreaders.',\n        )\n      }\n    }\n\n    return (\n      <section\n        ref={ref}\n        className={clsx(\n          styles.RiverBreakout,\n          variant === 'gridline' && styles['RiverBreakout--variant-gridline'],\n          variant === 'gridline' && gridlineStyles.gridline,\n          defaultColor === 'muted' && styles['RiverBreakout--muted'],\n          animationClasses,\n          className,\n        )}\n        style={{...animationInlineStyles, ...style}}\n        {...rest}\n      >\n        {children}\n      </section>\n    )\n  },\n)\n\nconst A11yHeading = ({as = 'h3', children}: React.PropsWithChildren<{as?: 'h2' | 'h3'}>) => (\n  <Heading className=\"visually-hidden\" as={as}>\n    {children}\n  </Heading>\n)\n\nconst Visual = forwardRef<HTMLDivElement, RiverVisualBaseProps>(({className, ...props}, ref) => (\n  <RiverVisualBase ref={ref} className={className} {...props} />\n))\n\nexport const RiverBreakout = Object.assign(Root, {Visual, Content: RiverContent, A11yHeading})\n"],"mappings":";;;;;;;;;;AAWA,IAAa,IAAwB,CAAC,WAAW,WAAW,EAWtD,IAAO,GACV,EAAC,YAAS,cAAW,aAAU,UAAO,aAAU,WAAW,GAAG,KAA2B,MAA0B;CAClH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAGlF,IACJ,EAAsB,GAAU,IAAI,IAAI,EAAsB,GAAU,KAAK,GAAG,UAAU;AAW5F,QATK,EAAsB,GAAU,EAAY,8BAClB,iBAAA,QAAA,IAAA,aAA0C,WAErE,QAAQ,KACN,8GACD,EAKH,kBAAC,WAAD;EACO;EACL,WAAW,EACT,EAAO,eACP,MAAY,cAAc,EAAO,oCACjC,MAAY,cAAc,EAAe,UACzC,MAAiB,WAAW,EAAO,yBACnC,GACA,EACD;EACD,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,GAAI;EAEH;EACO,CAAA;EAGf,EAEK,KAAe,EAAC,QAAK,MAAM,kBAC/B,kBAAC,GAAD;CAAS,WAAU;CAAsB;CACtC;CACO,CAAA,EAGN,IAAS,GAAkD,EAAC,cAAW,GAAG,KAAQ,MACtF,kBAAC,GAAD;CAAsB;CAAgB;CAAW,GAAI;CAAS,CAAA,CAC9D,EAEW,IAAgB,OAAO,OAAO,GAAM;CAAC;CAAQ,SAAS;CAAc;CAAY,CAAC"}
+{"version":3,"file":"RiverBreakout.js","names":[],"sources":["../../../src/river/RiverBreakout/RiverBreakout.tsx"],"sourcesContent":["import React, {Ref, forwardRef} from 'react'\nimport {clsx} from 'clsx'\nimport {RiverProps} from '../River'\nimport {RiverVisualBase, RiverContent, type RiverVisualBaseProps} from '../River/River'\nimport {useAnimation} from '../../animation'\nimport findElementInChildren from '../../findElementInChildren'\nimport {Heading} from '../../Heading'\n\nimport styles from '../river-shared.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\nexport const RiverBreakoutVariants = ['default', 'gridline'] as const\nexport type RiverBreakoutVariant = (typeof RiverBreakoutVariants)[number]\n\ntype RiverBreakoutProps = Omit<RiverProps, 'align' | 'imageTextRatio'> & {\n  /**\n   * Apply a visual variant. The default is `default`.\n   * `gridline` adds horizontal border lines and lateral spacing.\n   */\n  variant?: RiverBreakoutVariant\n}\n\nconst Root = forwardRef(\n  ({animate, className, children, style, variant = 'default', ...rest}: RiverBreakoutProps, ref: Ref<HTMLElement>) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    // TODO: when Firefox supports :has() selector, we should use that instead of JS\n    const defaultColor =\n      findElementInChildren(children, 'b') || findElementInChildren(children, 'em') ? 'muted' : 'default'\n\n    if (!findElementInChildren(children, A11yHeading)) {\n      if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {\n        // eslint-disable-next-line no-console\n        console.warn(\n          'RiverBreakout: A11yHeading child is required. This element will not be visible, only read by screenreaders.',\n        )\n      }\n    }\n\n    return (\n      <section\n        ref={ref}\n        className={clsx(\n          styles.RiverBreakout,\n          variant === 'gridline' && styles['RiverBreakout--variant-gridline'],\n          variant === 'gridline' && gridlineStyles.gridline,\n          defaultColor === 'muted' && styles['RiverBreakout--muted'],\n          animationClasses,\n          className,\n        )}\n        style={{...animationInlineStyles, ...style}}\n        {...rest}\n      >\n        {children}\n      </section>\n    )\n  },\n)\n\nconst A11yHeading = ({as = 'h3', children}: React.PropsWithChildren<{as?: 'h2' | 'h3'}>) => (\n  <Heading className=\"visually-hidden\" as={as}>\n    {children}\n  </Heading>\n)\n\nconst Visual = forwardRef<HTMLDivElement, RiverVisualBaseProps>(({className, ...props}, ref) => (\n  <RiverVisualBase ref={ref} className={className} {...props} />\n))\n\nexport const RiverBreakout = Object.assign(Root, {Visual, Content: RiverContent, A11yHeading})\n"],"mappings":";;;;;;;;;;AAWA,IAAa,IAAwB,CAAC,WAAW,UAAU,GAWrD,IAAO,GACV,EAAC,YAAS,cAAW,aAAU,UAAO,aAAU,WAAW,GAAG,KAA2B,MAA0B;CAClH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,CAAO,GAGjF,IACJ,EAAsB,GAAU,GAAG,KAAK,EAAsB,GAAU,IAAI,IAAI,UAAU;CAW5F,OATK,EAAsB,GAAU,CAAW,+BACjB,iBAAA,QAAA,IAAA,aAA0C,WAErE,QAAQ,KACN,6GACF,GAKF,kBAAC,WAAD;EACO;EACL,WAAW,EACT,EAAO,eACP,MAAY,cAAc,EAAO,oCACjC,MAAY,cAAc,EAAe,UACzC,MAAiB,WAAW,EAAO,yBACnC,GACA,CACF;EACA,OAAO;GAAC,GAAG;GAAuB,GAAG;EAAK;EAC1C,GAAI;EAEH;CACM,CAAA;AAEb,CACF,GAEM,KAAe,EAAC,QAAK,MAAM,kBAC/B,kBAAC,GAAD;CAAS,WAAU;CAAsB;CACtC;AACM,CAAA,GAGL,IAAS,GAAkD,EAAC,cAAW,GAAG,KAAQ,MACtF,kBAAC,GAAD;CAAsB;CAAgB;CAAW,GAAI;AAAQ,CAAA,CAC9D,GAEY,IAAgB,OAAO,OAAO,GAAM;CAAC;CAAQ,SAAS;CAAc;AAAW,CAAC"}

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

@@ -59,11 +59,11 @@ export declare const RiverBreakoutTabs: React.ForwardRefExoticComponent<{
 } & {
     children?: React.ReactNode | undefined;
 } & Omit<React.HTMLAttributes<HTMLElement>, "onChange"> & React.RefAttributes<HTMLElement>> & {
-    A11yHeading: ({ as, children, id }: RiverBreakoutTabsA11yHeadingProps) => import("react/jsx-runtime").JSX.Element;
-    Content: ({ children, className, ...props }: RiverBreakoutTabsContentProps) => import("react/jsx-runtime").JSX.Element;
-    Heading: ({ as, children, className, size, weight, ...props }: RiverBreakoutTabsHeadingProps) => import("react/jsx-runtime").JSX.Element;
-    Icon: ({ color, ...props }: RiverBreakoutTabsIconProps) => import("react/jsx-runtime").JSX.Element;
-    Item: ({ children }: RiverBreakoutTabsItemProps) => import("react/jsx-runtime").JSX.Element;
+    A11yHeading: ({ as, children, id }: RiverBreakoutTabsA11yHeadingProps) => React.JSX.Element;
+    Content: ({ children, className, ...props }: RiverBreakoutTabsContentProps) => React.JSX.Element;
+    Heading: ({ as, children, className, size, weight, ...props }: RiverBreakoutTabsHeadingProps) => React.JSX.Element;
+    Icon: ({ color, ...props }: RiverBreakoutTabsIconProps) => React.JSX.Element;
+    Item: ({ children }: RiverBreakoutTabsItemProps) => React.JSX.Element;
     Visual: React.ForwardRefExoticComponent<Omit<RiverVisualBaseProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 };
 //# sourceMappingURL=RiverBreakoutTabs.d.ts.map

package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.js

@@ -1,8 +1,8 @@
-import e from "../../node_modules/clsx/dist/clsx.js";
+import { clsx as 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-DHn1_SEa.css';import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/river/base-Ue-p74RC.css';/* empty css                                                                                          */
+import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/river/base-Ue-p74RC.css';import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/river/river-DHn1_SEa.css';/* empty css                                                                                          */
 import i from "../../component-helpers/shared.module.js";
 import { Link as a } from "../../Link/Link.js";
 /* empty css                                                                                         */

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

@@ -1 +1 @@
-{"version":3,"file":"RiverBreakoutTabs.js","names":[],"sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx"],"sourcesContent":["import React, {cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Accordion, Heading, Link, Text, type HeadingProps} from '../..'\nimport {Icon, type IconProps} from '../../Icon'\nimport {RiverVisualBase, type RiverVisualBaseProps} from '../River/River'\nimport {useId} from '../../hooks/useId'\nimport {useTabs} from '../../hooks/useTabs'\nimport {useWindowSize} from '../../hooks/useWindowSize'\nimport riverStyles from '../river-shared.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/river.css'\n\n/** Main Stylesheet (as a CSS Module) */\nimport styles from './RiverBreakoutTabs.module.css'\n\nconst createComponentTypeGuard =\n  <T,>(componentType: React.ComponentType<T>) =>\n  (element: unknown): element is React.ReactElement<T> =>\n    React.isValidElement<T>(element) && element.type === componentType\n\nexport type RiverBreakoutTabsProps = React.PropsWithChildren<{\n  defaultSelectedIndex?: number\n  selectedIndex?: number\n  onChange?: (selectedIndex: number) => void\n  /**\n   * Decorative background rendered behind the visual and persisted across tab\n   * changes. Must not contain interactive and remain purely decorative.\n   */\n  backgroundVisual?: React.ReactNode\n  /**\n   * Alignment of media within the visual container when `backgroundVisual` is provided\n   */\n  imagePosition?: 'center' | 'block-end'\n  /**\n   * When `true`, the `backgroundVisual` bleeds out to the gridline edges instead of being inset within them\n   */\n  backgroundVisualFullBleed?: boolean\n}> &\n  Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>\n\nexport type RiverBreakoutTabsItemProps = React.PropsWithChildren<{\n  className?: string\n}>\n\nexport type RiverBreakoutTabsA11yHeadingProps = React.PropsWithChildren<{\n  as?: 'h2' | 'h3'\n  id?: string\n}>\n\nexport type RiverBreakoutTabsHeadingProps = HeadingProps\n\nexport type RiverBreakoutTabsContentProps = React.HTMLAttributes<HTMLDivElement>\n\nexport type RiverBreakoutTabsIconProps = IconProps\n\nexport type RiverBreakoutTabsVisualProps = RiverVisualBaseProps\n\ntype RiverBreakoutTabsItemChild =\n  | React.ReactElement<RiverBreakoutTabsIconProps>\n  | React.ReactElement<RiverBreakoutTabsHeadingProps>\n  | React.ReactElement<RiverBreakoutTabsContentProps>\n  | React.ReactElement<RiverBreakoutTabsVisualProps>\n\ntype ExtractedItemParts = {\n  icon: React.ReactElement<RiverBreakoutTabsIconProps> | null\n  heading: React.ReactElement<RiverBreakoutTabsHeadingProps> | null\n  content: React.ReactElement<RiverBreakoutTabsContentProps> | null\n  visual: React.ReactElement<RiverBreakoutTabsVisualProps> | null\n  className?: string\n}\n\ntype ExtractedContentParts = {\n  action: React.ReactElement<React.ComponentProps<typeof Link>> | null\n  body: React.ReactNode[]\n}\n\nconst RiverBreakoutTabsItem = ({children}: RiverBreakoutTabsItemProps) => <>{children}</>\n\nconst RiverBreakoutTabsA11yHeading = ({as = 'h3', children, id}: RiverBreakoutTabsA11yHeadingProps) => (\n  <Heading as={as} id={id} className=\"visually-hidden\">\n    {children}\n  </Heading>\n)\n\nconst RiverBreakoutTabsIcon = ({color = 'green', ...props}: RiverBreakoutTabsIconProps) => (\n  <Icon color={color} {...props} />\n)\n\nconst RiverBreakoutTabsHeading = ({\n  as = 'h3',\n  children,\n  className,\n  size = 'subhead-large',\n  weight = 'normal',\n  ...props\n}: RiverBreakoutTabsHeadingProps) => (\n  <Heading\n    as={as}\n    className={clsx(styles.RiverBreakoutTabs__heading, className)}\n    size={size}\n    weight={weight}\n    {...props}\n  >\n    {children}\n  </Heading>\n)\n\nconst RiverBreakoutTabsContent = ({children, className, ...props}: RiverBreakoutTabsContentProps) => {\n  const Children = useMemo(\n    () =>\n      React.Children.toArray(children).map(child => {\n        if (isTextChild(child)) {\n          return cloneElement(child, {\n            as: child.props.as ?? 'p',\n            variant: child.props.variant ?? 'muted',\n          })\n        }\n\n        if (isLinkChild(child)) {\n          return cloneElement(child, {\n            className: clsx(child.props.className, styles.RiverBreakoutTabs__link),\n            size: child.props.size ?? 'medium',\n            variant: child.props.variant ?? 'accent',\n          })\n        }\n\n        return child\n      }),\n    [children],\n  )\n\n  return (\n    <div className={clsx(styles.RiverBreakoutTabs__content, className)} {...props}>\n      {Children}\n    </div>\n  )\n}\n\nconst RiverBreakoutTabsVisual = forwardRef<HTMLDivElement, RiverBreakoutTabsVisualProps>(\n  ({className, ...props}, ref) => <RiverVisualBase ref={ref} className={className} {...props} />,\n)\n\nconst isItem = createComponentTypeGuard(RiverBreakoutTabsItem)\nconst isA11yHeading = createComponentTypeGuard(RiverBreakoutTabsA11yHeading)\nconst isIcon = createComponentTypeGuard(RiverBreakoutTabsIcon)\nconst isHeading = createComponentTypeGuard(RiverBreakoutTabsHeading)\nconst isContent = createComponentTypeGuard(RiverBreakoutTabsContent)\nconst isVisual = createComponentTypeGuard(RiverBreakoutTabsVisual)\n\nconst isTextChild = (child: React.ReactNode): child is React.ReactElement<React.ComponentProps<typeof Text>> =>\n  React.isValidElement<React.ComponentProps<typeof Text>>(child) && child.type === Text\n\nconst isLinkChild = (child: React.ReactNode): child is React.ReactElement<React.ComponentProps<typeof Link>> =>\n  React.isValidElement<React.ComponentProps<typeof Link>>(child) && child.type === Link\n\nconst extractItemParts = (item: React.ReactElement<RiverBreakoutTabsItemProps>): ExtractedItemParts => {\n  const Children = React.Children.toArray(item.props.children) as RiverBreakoutTabsItemChild[]\n\n  return Children.reduce<ExtractedItemParts>(\n    (acc, child) => {\n      if (isIcon(child)) {\n        acc.icon = child\n      }\n\n      if (isHeading(child)) {\n        acc.heading = child\n      }\n\n      if (isContent(child)) {\n        acc.content = child\n      }\n\n      if (isVisual(child)) {\n        acc.visual = child\n      }\n\n      return acc\n    },\n    {icon: null, heading: null, content: null, visual: null, className: item.props.className},\n  )\n}\n\nconst extractWideTabListContentParts = (\n  content: React.ReactElement<RiverBreakoutTabsContentProps> | null,\n): ExtractedContentParts => {\n  if (!content) {\n    return {action: null, body: []}\n  }\n\n  const Children = React.Children.toArray(content.props.children).map(child => {\n    if (isTextChild(child)) {\n      return cloneElement(child, {\n        as: child.props.as ?? 'p',\n        variant: child.props.variant ?? 'muted',\n      })\n    }\n\n    if (isLinkChild(child)) {\n      return cloneElement(child, {\n        className: clsx(child.props.className, styles.RiverBreakoutTabs__link),\n        size: child.props.size ?? 'medium',\n        variant: child.props.variant ?? 'accent',\n      })\n    }\n\n    return child\n  })\n\n  return Children.reduce<ExtractedContentParts>(\n    (acc, child) => {\n      if (isLinkChild(child)) {\n        if (!acc.action) {\n          acc.action = child\n        }\n\n        return acc\n      }\n\n      acc.body.push(child)\n      return acc\n    },\n    {action: null, body: []},\n  )\n}\n\nconst clampIndex = (index: number, length: number) => {\n  if (length === 0) return -1\n\n  const normalizedIndex = Number.isFinite(index) ? Math.trunc(index) : 0\n  return Math.min(Math.max(normalizedIndex, 0), length - 1)\n}\n\nconst RiverBreakoutTabsRoot = forwardRef<HTMLElement, RiverBreakoutTabsProps>(\n  (\n    {\n      children,\n      className,\n      defaultSelectedIndex = 0,\n      onChange,\n      selectedIndex,\n      backgroundVisual,\n      imagePosition = 'center',\n      backgroundVisualFullBleed = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const instanceId = useId()\n    const {isLarge} = useWindowSize()\n\n    const Children = useMemo(() => React.Children.toArray(children), [children])\n\n    const A11yHeadingChild = Children.find(isA11yHeading) ?? null\n    const Items = Children.filter(isItem)\n      .map(extractItemParts)\n      .filter(item => item.heading && item.content && item.visual)\n\n    const defaultActiveIndex = clampIndex(defaultSelectedIndex, Items.length)\n    const controlledActiveIndex =\n      typeof selectedIndex === 'number' && Number.isFinite(selectedIndex)\n        ? clampIndex(selectedIndex, Items.length)\n        : null\n    const initialActiveIndex = controlledActiveIndex ?? defaultActiveIndex\n    const headingId = A11yHeadingChild?.props.id ?? `${instanceId}-heading`\n    const wideTabListColumns = Math.min(Math.max(Items.length, 1), 3)\n    const initialActiveTab = initialActiveIndex >= 0 ? String(initialActiveIndex) : undefined\n    const isWideTabList = isLarge === true\n    const suppressOnTabActivateRef = useRef(false)\n\n    const handleTabActivate = useCallback(\n      (id: string) => {\n        if (suppressOnTabActivateRef.current) {\n          suppressOnTabActivateRef.current = false\n          return\n        }\n\n        if (!onChange) return\n\n        const nextIndex = Number(id)\n        if (!Number.isNaN(nextIndex)) {\n          onChange(nextIndex)\n        }\n      },\n      [onChange],\n    )\n\n    const {activeTab, activateTab, getTabListProps, getTabPanelProps, getTabProps} = useTabs({\n      defaultTab: initialActiveTab,\n      onTabActivate: handleTabActivate,\n    })\n\n    const [activeAccordionIndex, setActiveAccordionIndex] = useState(initialActiveIndex)\n\n    useEffect(() => {\n      if (activeTab === null) return\n\n      const nextIndex = Number(activeTab)\n      if (!Number.isNaN(nextIndex)) {\n        setActiveAccordionIndex(nextIndex)\n      }\n    }, [activeTab])\n\n    useEffect(() => {\n      if (controlledActiveIndex === null || controlledActiveIndex < 0) return\n\n      const controlledTab = String(controlledActiveIndex)\n      if (activeTab !== controlledTab) {\n        suppressOnTabActivateRef.current = true\n        activateTab(controlledTab)\n      }\n\n      setActiveAccordionIndex(controlledActiveIndex)\n    }, [activateTab, activeTab, controlledActiveIndex])\n\n    if (!A11yHeadingChild && (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        'RiverBreakoutTabs: A11yHeading child is required. This element will not be visible, only read by screenreaders.',\n      )\n    }\n\n    const handleAccordionOpen = (index: number) => (isOpen: boolean) => {\n      if (isOpen) {\n        setActiveAccordionIndex(index)\n        if (activeTab !== String(index)) {\n          activateTab(String(index))\n        }\n      }\n    }\n\n    const handleAccordionToggle: React.ReactEventHandler<HTMLDetailsElement> = event => {\n      const toggledIndex = Number(event.currentTarget.getAttribute('data-index'))\n\n      if (!event.currentTarget.open && activeAccordionIndex === toggledIndex) {\n        event.currentTarget.open = true\n      }\n    }\n\n    const tabListProps = A11yHeadingChild\n      ? getTabListProps({labelledBy: headingId})\n      : getTabListProps({label: 'River breakout tabs'})\n    const WideTabListContentParts = useMemo(\n      () => Items.map(item => extractWideTabListContentParts(item.content)),\n      [Items],\n    )\n\n    const BackgroundVisualLayer =\n      backgroundVisual != null ? (\n        <div className={styles.RiverBreakoutTabs__backgroundVisual} aria-hidden=\"true\">\n          {backgroundVisual}\n        </div>\n      ) : null\n\n    return (\n      <section\n        ref={ref}\n        className={clsx(\n          riverStyles.RiverBreakout,\n          riverStyles['RiverBreakout--variant-gridline'],\n          gridlineStyles.gridline,\n          styles.RiverBreakoutTabs,\n          backgroundVisual != null && styles['RiverBreakoutTabs--has-background-visual'],\n          backgroundVisual != null &&\n            imagePosition === 'block-end' &&\n            styles['RiverBreakoutTabs--image-position-block-end'],\n          backgroundVisual != null &&\n            backgroundVisualFullBleed &&\n            styles['RiverBreakoutTabs--background-visual-full-bleed'],\n          className,\n        )}\n        {...props}\n      >\n        {A11yHeadingChild && cloneElement(A11yHeadingChild, {id: headingId})}\n\n        {isWideTabList ? (\n          <div className={styles.RiverBreakoutTabs__wideTabList}>\n            <div\n              {...tabListProps}\n              className={styles.RiverBreakoutTabs__tablist}\n              style={{'--river-breakout-tabs-columns': String(wideTabListColumns)} as React.CSSProperties}\n            >\n              {Items.map((item, index) => {\n                const isSelected = activeTab === String(index)\n                const tabProps = getTabProps<HTMLButtonElement>(String(index))\n                const {body} = WideTabListContentParts[index]\n\n                return (\n                  <div\n                    key={index}\n                    className={clsx(\n                      styles.RiverBreakoutTabs__item,\n                      isSelected && styles['RiverBreakoutTabs__item--selected'],\n                      item.className,\n                    )}\n                  >\n                    <button type=\"button\" {...tabProps} className={styles.RiverBreakoutTabs__tab}>\n                      {item.icon &&\n                        cloneElement(item.icon, {\n                          className: item.icon.props.className,\n                        })}\n\n                      {item.heading &&\n                        cloneElement(item.heading, {\n                          className: clsx(item.heading.props.className, styles.RiverBreakoutTabs__tabHeading),\n                        })}\n\n                      {body.length > 0 && <div className={styles.RiverBreakoutTabs__wideTabListContent}>{body}</div>}\n                    </button>\n                  </div>\n                )\n              })}\n            </div>\n\n            <div className={styles.RiverBreakoutTabs__sharedVisuals}>\n              {BackgroundVisualLayer}\n              {Items.map((item, index) => {\n                const panelProps = getTabPanelProps(String(index))\n\n                return (\n                  <div\n                    key={index}\n                    {...panelProps}\n                    tabIndex={-1}\n                    className={styles.RiverBreakoutTabs__sharedVisualPanel}\n                  >\n                    {cloneElement(item.visual as React.ReactElement<RiverBreakoutTabsVisualProps>, {\n                      className: clsx(item.visual?.props.className, styles.RiverBreakoutTabs__sharedVisual),\n                    })}\n                  </div>\n                )\n              })}\n            </div>\n\n            {WideTabListContentParts.some(content => content.action) && (\n              <div\n                className={styles.RiverBreakoutTabs__wideTabListActions}\n                style={{'--river-breakout-tabs-columns': String(wideTabListColumns)} as React.CSSProperties}\n              >\n                {Items.map((_, index) => {\n                  const {action} = WideTabListContentParts[index]\n\n                  return (\n                    <div key={index} className={styles.RiverBreakoutTabs__wideTabListActionItem}>\n                      {action &&\n                        cloneElement(action, {\n                          className: clsx(action.props.className, styles.RiverBreakoutTabs__wideTabListAction),\n                        })}\n                    </div>\n                  )\n                })}\n              </div>\n            )}\n          </div>\n        ) : (\n          <div className={styles.RiverBreakoutTabs__accordion}>\n            {activeAccordionIndex >= 0 && Items[activeAccordionIndex]?.visual && (\n              <div className={styles.RiverBreakoutTabs__accordionSharedVisuals}>\n                {BackgroundVisualLayer}\n                {cloneElement(Items[activeAccordionIndex].visual as React.ReactElement<RiverBreakoutTabsVisualProps>, {\n                  className: clsx(\n                    Items[activeAccordionIndex].visual.props.className,\n                    styles.RiverBreakoutTabs__accordionSharedVisual,\n                  ),\n                })}\n              </div>\n            )}\n\n            {Items.map((item, index) => {\n              return (\n                <Accordion\n                  key={index}\n                  data-index={index}\n                  className={clsx(\n                    styles.RiverBreakoutTabs__accordionItem,\n                    index === activeAccordionIndex && styles['RiverBreakoutTabs__item--selected'],\n                    item.className,\n                  )}\n                  onToggle={handleAccordionToggle}\n                  open={index === activeAccordionIndex}\n                  handleOpen={handleAccordionOpen(index)}\n                >\n                  <Accordion.Heading className={styles.RiverBreakoutTabs__accordionHeading}>\n                    <span className={styles.RiverBreakoutTabs__accordionHeadingInner}>\n                      {item.icon &&\n                        cloneElement(item.icon, {\n                          className: clsx(item.icon.props.className, styles.RiverBreakoutTabs__accordionIcon),\n                        })}\n                      <span className={styles.RiverBreakoutTabs__accordionLabel}>{item.heading?.props.children}</span>\n                    </span>\n                  </Accordion.Heading>\n\n                  <Accordion.Content className={styles.RiverBreakoutTabs__accordionPanel}>\n                    {cloneElement(item.content as React.ReactElement<RiverBreakoutTabsContentProps>, {\n                      className: clsx(item.content?.props.className, styles.RiverBreakoutTabs__accordionContent),\n                    })}\n                  </Accordion.Content>\n                </Accordion>\n              )\n            })}\n          </div>\n        )}\n      </section>\n    )\n  },\n)\n\n/**\n * Use RiverBreakoutTabs to showcase multiple feature stories within a single immersive surface.\n */\nexport const RiverBreakoutTabs = Object.assign(RiverBreakoutTabsRoot, {\n  A11yHeading: RiverBreakoutTabsA11yHeading,\n  Content: RiverBreakoutTabsContent,\n  Heading: RiverBreakoutTabsHeading,\n  Icon: RiverBreakoutTabsIcon,\n  Item: RiverBreakoutTabsItem,\n  Visual: RiverBreakoutTabsVisual,\n})\n"],"mappings":"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"}
+{"version":3,"file":"RiverBreakoutTabs.js","names":[],"sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx"],"sourcesContent":["import React, {cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Accordion, Heading, Link, Text, type HeadingProps} from '../..'\nimport {Icon, type IconProps} from '../../Icon'\nimport {RiverVisualBase, type RiverVisualBaseProps} from '../River/River'\nimport {useId} from '../../hooks/useId'\nimport {useTabs} from '../../hooks/useTabs'\nimport {useWindowSize} from '../../hooks/useWindowSize'\nimport riverStyles from '../river-shared.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/river.css'\n\n/** Main Stylesheet (as a CSS Module) */\nimport styles from './RiverBreakoutTabs.module.css'\n\nconst createComponentTypeGuard =\n  <T,>(componentType: React.ComponentType<T>) =>\n  (element: unknown): element is React.ReactElement<T> =>\n    React.isValidElement<T>(element) && element.type === componentType\n\nexport type RiverBreakoutTabsProps = React.PropsWithChildren<{\n  defaultSelectedIndex?: number\n  selectedIndex?: number\n  onChange?: (selectedIndex: number) => void\n  /**\n   * Decorative background rendered behind the visual and persisted across tab\n   * changes. Must not contain interactive and remain purely decorative.\n   */\n  backgroundVisual?: React.ReactNode\n  /**\n   * Alignment of media within the visual container when `backgroundVisual` is provided\n   */\n  imagePosition?: 'center' | 'block-end'\n  /**\n   * When `true`, the `backgroundVisual` bleeds out to the gridline edges instead of being inset within them\n   */\n  backgroundVisualFullBleed?: boolean\n}> &\n  Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>\n\nexport type RiverBreakoutTabsItemProps = React.PropsWithChildren<{\n  className?: string\n}>\n\nexport type RiverBreakoutTabsA11yHeadingProps = React.PropsWithChildren<{\n  as?: 'h2' | 'h3'\n  id?: string\n}>\n\nexport type RiverBreakoutTabsHeadingProps = HeadingProps\n\nexport type RiverBreakoutTabsContentProps = React.HTMLAttributes<HTMLDivElement>\n\nexport type RiverBreakoutTabsIconProps = IconProps\n\nexport type RiverBreakoutTabsVisualProps = RiverVisualBaseProps\n\ntype RiverBreakoutTabsItemChild =\n  | React.ReactElement<RiverBreakoutTabsIconProps>\n  | React.ReactElement<RiverBreakoutTabsHeadingProps>\n  | React.ReactElement<RiverBreakoutTabsContentProps>\n  | React.ReactElement<RiverBreakoutTabsVisualProps>\n\ntype ExtractedItemParts = {\n  icon: React.ReactElement<RiverBreakoutTabsIconProps> | null\n  heading: React.ReactElement<RiverBreakoutTabsHeadingProps> | null\n  content: React.ReactElement<RiverBreakoutTabsContentProps> | null\n  visual: React.ReactElement<RiverBreakoutTabsVisualProps> | null\n  className?: string\n}\n\ntype ExtractedContentParts = {\n  action: React.ReactElement<React.ComponentProps<typeof Link>> | null\n  body: React.ReactNode[]\n}\n\nconst RiverBreakoutTabsItem = ({children}: RiverBreakoutTabsItemProps) => <>{children}</>\n\nconst RiverBreakoutTabsA11yHeading = ({as = 'h3', children, id}: RiverBreakoutTabsA11yHeadingProps) => (\n  <Heading as={as} id={id} className=\"visually-hidden\">\n    {children}\n  </Heading>\n)\n\nconst RiverBreakoutTabsIcon = ({color = 'green', ...props}: RiverBreakoutTabsIconProps) => (\n  <Icon color={color} {...props} />\n)\n\nconst RiverBreakoutTabsHeading = ({\n  as = 'h3',\n  children,\n  className,\n  size = 'subhead-large',\n  weight = 'normal',\n  ...props\n}: RiverBreakoutTabsHeadingProps) => (\n  <Heading\n    as={as}\n    className={clsx(styles.RiverBreakoutTabs__heading, className)}\n    size={size}\n    weight={weight}\n    {...props}\n  >\n    {children}\n  </Heading>\n)\n\nconst RiverBreakoutTabsContent = ({children, className, ...props}: RiverBreakoutTabsContentProps) => {\n  const Children = useMemo(\n    () =>\n      React.Children.toArray(children).map(child => {\n        if (isTextChild(child)) {\n          return cloneElement(child, {\n            as: child.props.as ?? 'p',\n            variant: child.props.variant ?? 'muted',\n          })\n        }\n\n        if (isLinkChild(child)) {\n          return cloneElement(child, {\n            className: clsx(child.props.className, styles.RiverBreakoutTabs__link),\n            size: child.props.size ?? 'medium',\n            variant: child.props.variant ?? 'accent',\n          })\n        }\n\n        return child\n      }),\n    [children],\n  )\n\n  return (\n    <div className={clsx(styles.RiverBreakoutTabs__content, className)} {...props}>\n      {Children}\n    </div>\n  )\n}\n\nconst RiverBreakoutTabsVisual = forwardRef<HTMLDivElement, RiverBreakoutTabsVisualProps>(\n  ({className, ...props}, ref) => <RiverVisualBase ref={ref} className={className} {...props} />,\n)\n\nconst isItem = createComponentTypeGuard(RiverBreakoutTabsItem)\nconst isA11yHeading = createComponentTypeGuard(RiverBreakoutTabsA11yHeading)\nconst isIcon = createComponentTypeGuard(RiverBreakoutTabsIcon)\nconst isHeading = createComponentTypeGuard(RiverBreakoutTabsHeading)\nconst isContent = createComponentTypeGuard(RiverBreakoutTabsContent)\nconst isVisual = createComponentTypeGuard(RiverBreakoutTabsVisual)\n\nconst isTextChild = (child: React.ReactNode): child is React.ReactElement<React.ComponentProps<typeof Text>> =>\n  React.isValidElement<React.ComponentProps<typeof Text>>(child) && child.type === Text\n\nconst isLinkChild = (child: React.ReactNode): child is React.ReactElement<React.ComponentProps<typeof Link>> =>\n  React.isValidElement<React.ComponentProps<typeof Link>>(child) && child.type === Link\n\nconst extractItemParts = (item: React.ReactElement<RiverBreakoutTabsItemProps>): ExtractedItemParts => {\n  const Children = React.Children.toArray(item.props.children) as RiverBreakoutTabsItemChild[]\n\n  return Children.reduce<ExtractedItemParts>(\n    (acc, child) => {\n      if (isIcon(child)) {\n        acc.icon = child\n      }\n\n      if (isHeading(child)) {\n        acc.heading = child\n      }\n\n      if (isContent(child)) {\n        acc.content = child\n      }\n\n      if (isVisual(child)) {\n        acc.visual = child\n      }\n\n      return acc\n    },\n    {icon: null, heading: null, content: null, visual: null, className: item.props.className},\n  )\n}\n\nconst extractWideTabListContentParts = (\n  content: React.ReactElement<RiverBreakoutTabsContentProps> | null,\n): ExtractedContentParts => {\n  if (!content) {\n    return {action: null, body: []}\n  }\n\n  const Children = React.Children.toArray(content.props.children).map(child => {\n    if (isTextChild(child)) {\n      return cloneElement(child, {\n        as: child.props.as ?? 'p',\n        variant: child.props.variant ?? 'muted',\n      })\n    }\n\n    if (isLinkChild(child)) {\n      return cloneElement(child, {\n        className: clsx(child.props.className, styles.RiverBreakoutTabs__link),\n        size: child.props.size ?? 'medium',\n        variant: child.props.variant ?? 'accent',\n      })\n    }\n\n    return child\n  })\n\n  return Children.reduce<ExtractedContentParts>(\n    (acc, child) => {\n      if (isLinkChild(child)) {\n        if (!acc.action) {\n          acc.action = child\n        }\n\n        return acc\n      }\n\n      acc.body.push(child)\n      return acc\n    },\n    {action: null, body: []},\n  )\n}\n\nconst clampIndex = (index: number, length: number) => {\n  if (length === 0) return -1\n\n  const normalizedIndex = Number.isFinite(index) ? Math.trunc(index) : 0\n  return Math.min(Math.max(normalizedIndex, 0), length - 1)\n}\n\nconst RiverBreakoutTabsRoot = forwardRef<HTMLElement, RiverBreakoutTabsProps>(\n  (\n    {\n      children,\n      className,\n      defaultSelectedIndex = 0,\n      onChange,\n      selectedIndex,\n      backgroundVisual,\n      imagePosition = 'center',\n      backgroundVisualFullBleed = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const instanceId = useId()\n    const {isLarge} = useWindowSize()\n\n    const Children = useMemo(() => React.Children.toArray(children), [children])\n\n    const A11yHeadingChild = Children.find(isA11yHeading) ?? null\n    const Items = Children.filter(isItem)\n      .map(extractItemParts)\n      .filter(item => item.heading && item.content && item.visual)\n\n    const defaultActiveIndex = clampIndex(defaultSelectedIndex, Items.length)\n    const controlledActiveIndex =\n      typeof selectedIndex === 'number' && Number.isFinite(selectedIndex)\n        ? clampIndex(selectedIndex, Items.length)\n        : null\n    const initialActiveIndex = controlledActiveIndex ?? defaultActiveIndex\n    const headingId = A11yHeadingChild?.props.id ?? `${instanceId}-heading`\n    const wideTabListColumns = Math.min(Math.max(Items.length, 1), 3)\n    const initialActiveTab = initialActiveIndex >= 0 ? String(initialActiveIndex) : undefined\n    const isWideTabList = isLarge === true\n    const suppressOnTabActivateRef = useRef(false)\n\n    const handleTabActivate = useCallback(\n      (id: string) => {\n        if (suppressOnTabActivateRef.current) {\n          suppressOnTabActivateRef.current = false\n          return\n        }\n\n        if (!onChange) return\n\n        const nextIndex = Number(id)\n        if (!Number.isNaN(nextIndex)) {\n          onChange(nextIndex)\n        }\n      },\n      [onChange],\n    )\n\n    const {activeTab, activateTab, getTabListProps, getTabPanelProps, getTabProps} = useTabs({\n      defaultTab: initialActiveTab,\n      onTabActivate: handleTabActivate,\n    })\n\n    const [activeAccordionIndex, setActiveAccordionIndex] = useState(initialActiveIndex)\n\n    useEffect(() => {\n      if (activeTab === null) return\n\n      const nextIndex = Number(activeTab)\n      if (!Number.isNaN(nextIndex)) {\n        setActiveAccordionIndex(nextIndex)\n      }\n    }, [activeTab])\n\n    useEffect(() => {\n      if (controlledActiveIndex === null || controlledActiveIndex < 0) return\n\n      const controlledTab = String(controlledActiveIndex)\n      if (activeTab !== controlledTab) {\n        suppressOnTabActivateRef.current = true\n        activateTab(controlledTab)\n      }\n\n      setActiveAccordionIndex(controlledActiveIndex)\n    }, [activateTab, activeTab, controlledActiveIndex])\n\n    if (!A11yHeadingChild && (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        'RiverBreakoutTabs: A11yHeading child is required. This element will not be visible, only read by screenreaders.',\n      )\n    }\n\n    const handleAccordionOpen = (index: number) => (isOpen: boolean) => {\n      if (isOpen) {\n        setActiveAccordionIndex(index)\n        if (activeTab !== String(index)) {\n          activateTab(String(index))\n        }\n      }\n    }\n\n    const handleAccordionToggle: React.ReactEventHandler<HTMLDetailsElement> = event => {\n      const toggledIndex = Number(event.currentTarget.getAttribute('data-index'))\n\n      if (!event.currentTarget.open && activeAccordionIndex === toggledIndex) {\n        event.currentTarget.open = true\n      }\n    }\n\n    const tabListProps = A11yHeadingChild\n      ? getTabListProps({labelledBy: headingId})\n      : getTabListProps({label: 'River breakout tabs'})\n    const WideTabListContentParts = useMemo(\n      () => Items.map(item => extractWideTabListContentParts(item.content)),\n      [Items],\n    )\n\n    const BackgroundVisualLayer =\n      backgroundVisual != null ? (\n        <div className={styles.RiverBreakoutTabs__backgroundVisual} aria-hidden=\"true\">\n          {backgroundVisual}\n        </div>\n      ) : null\n\n    return (\n      <section\n        ref={ref}\n        className={clsx(\n          riverStyles.RiverBreakout,\n          riverStyles['RiverBreakout--variant-gridline'],\n          gridlineStyles.gridline,\n          styles.RiverBreakoutTabs,\n          backgroundVisual != null && styles['RiverBreakoutTabs--has-background-visual'],\n          backgroundVisual != null &&\n            imagePosition === 'block-end' &&\n            styles['RiverBreakoutTabs--image-position-block-end'],\n          backgroundVisual != null &&\n            backgroundVisualFullBleed &&\n            styles['RiverBreakoutTabs--background-visual-full-bleed'],\n          className,\n        )}\n        {...props}\n      >\n        {A11yHeadingChild && cloneElement(A11yHeadingChild, {id: headingId})}\n\n        {isWideTabList ? (\n          <div className={styles.RiverBreakoutTabs__wideTabList}>\n            <div\n              {...tabListProps}\n              className={styles.RiverBreakoutTabs__tablist}\n              style={{'--river-breakout-tabs-columns': String(wideTabListColumns)} as React.CSSProperties}\n            >\n              {Items.map((item, index) => {\n                const isSelected = activeTab === String(index)\n                const tabProps = getTabProps<HTMLButtonElement>(String(index))\n                const {body} = WideTabListContentParts[index]\n\n                return (\n                  <div\n                    key={index}\n                    className={clsx(\n                      styles.RiverBreakoutTabs__item,\n                      isSelected && styles['RiverBreakoutTabs__item--selected'],\n                      item.className,\n                    )}\n                  >\n                    <button type=\"button\" {...tabProps} className={styles.RiverBreakoutTabs__tab}>\n                      {item.icon &&\n                        cloneElement(item.icon, {\n                          className: item.icon.props.className,\n                        })}\n\n                      {item.heading &&\n                        cloneElement(item.heading, {\n                          className: clsx(item.heading.props.className, styles.RiverBreakoutTabs__tabHeading),\n                        })}\n\n                      {body.length > 0 && <div className={styles.RiverBreakoutTabs__wideTabListContent}>{body}</div>}\n                    </button>\n                  </div>\n                )\n              })}\n            </div>\n\n            <div className={styles.RiverBreakoutTabs__sharedVisuals}>\n              {BackgroundVisualLayer}\n              {Items.map((item, index) => {\n                const panelProps = getTabPanelProps(String(index))\n\n                return (\n                  <div\n                    key={index}\n                    {...panelProps}\n                    tabIndex={-1}\n                    className={styles.RiverBreakoutTabs__sharedVisualPanel}\n                  >\n                    {cloneElement(item.visual as React.ReactElement<RiverBreakoutTabsVisualProps>, {\n                      className: clsx(item.visual?.props.className, styles.RiverBreakoutTabs__sharedVisual),\n                    })}\n                  </div>\n                )\n              })}\n            </div>\n\n            {WideTabListContentParts.some(content => content.action) && (\n              <div\n                className={styles.RiverBreakoutTabs__wideTabListActions}\n                style={{'--river-breakout-tabs-columns': String(wideTabListColumns)} as React.CSSProperties}\n              >\n                {Items.map((_, index) => {\n                  const {action} = WideTabListContentParts[index]\n\n                  return (\n                    <div key={index} className={styles.RiverBreakoutTabs__wideTabListActionItem}>\n                      {action &&\n                        cloneElement(action, {\n                          className: clsx(action.props.className, styles.RiverBreakoutTabs__wideTabListAction),\n                        })}\n                    </div>\n                  )\n                })}\n              </div>\n            )}\n          </div>\n        ) : (\n          <div className={styles.RiverBreakoutTabs__accordion}>\n            {activeAccordionIndex >= 0 && Items[activeAccordionIndex]?.visual && (\n              <div className={styles.RiverBreakoutTabs__accordionSharedVisuals}>\n                {BackgroundVisualLayer}\n                {cloneElement(Items[activeAccordionIndex].visual as React.ReactElement<RiverBreakoutTabsVisualProps>, {\n                  className: clsx(\n                    Items[activeAccordionIndex].visual.props.className,\n                    styles.RiverBreakoutTabs__accordionSharedVisual,\n                  ),\n                })}\n              </div>\n            )}\n\n            {Items.map((item, index) => {\n              return (\n                <Accordion\n                  key={index}\n                  data-index={index}\n                  className={clsx(\n                    styles.RiverBreakoutTabs__accordionItem,\n                    index === activeAccordionIndex && styles['RiverBreakoutTabs__item--selected'],\n                    item.className,\n                  )}\n                  onToggle={handleAccordionToggle}\n                  open={index === activeAccordionIndex}\n                  handleOpen={handleAccordionOpen(index)}\n                >\n                  <Accordion.Heading className={styles.RiverBreakoutTabs__accordionHeading}>\n                    <span className={styles.RiverBreakoutTabs__accordionHeadingInner}>\n                      {item.icon &&\n                        cloneElement(item.icon, {\n                          className: clsx(item.icon.props.className, styles.RiverBreakoutTabs__accordionIcon),\n                        })}\n                      <span className={styles.RiverBreakoutTabs__accordionLabel}>{item.heading?.props.children}</span>\n                    </span>\n                  </Accordion.Heading>\n\n                  <Accordion.Content className={styles.RiverBreakoutTabs__accordionPanel}>\n                    {cloneElement(item.content as React.ReactElement<RiverBreakoutTabsContentProps>, {\n                      className: clsx(item.content?.props.className, styles.RiverBreakoutTabs__accordionContent),\n                    })}\n                  </Accordion.Content>\n                </Accordion>\n              )\n            })}\n          </div>\n        )}\n      </section>\n    )\n  },\n)\n\n/**\n * Use RiverBreakoutTabs to showcase multiple feature stories within a single immersive surface.\n */\nexport const RiverBreakoutTabs = Object.assign(RiverBreakoutTabsRoot, {\n  A11yHeading: RiverBreakoutTabsA11yHeading,\n  Content: RiverBreakoutTabsContent,\n  Heading: RiverBreakoutTabsHeading,\n  Icon: RiverBreakoutTabsIcon,\n  Item: RiverBreakoutTabsItem,\n  Visual: RiverBreakoutTabsVisual,\n})\n"],"mappings":"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"}

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

@@ -1,38 +1,39 @@
-import './RiverBreakoutTabs.module-CB2SZhbE.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__backgroundVisual: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__backgroundVisual___rrq1M",
-	RiverBreakoutTabs__accordionSharedVisual: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionSharedVisual___BgAxG",
+import './RiverBreakoutTabs.module-CB2SZhbE.css';//#region src/river/RiverBreakoutTabs/RiverBreakoutTabs.module.css
+var e = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs___V0qyz", t = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordion___fawN5", n = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabList___mzEmX", r = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisuals____0vGo", i = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionSharedVisuals___DbPMZ", a = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisualPanel___9C_mn", o = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__backgroundVisual___rrq1M", s = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionSharedVisual___BgAxG", c = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisual___ST6p9", l = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__tablist___sGkZH", u = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabListActions____5ifh", d = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__item___ZOgN5", f = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__heading___3N6_9", p = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__icon___0ToMw", m = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__tab___Gukw0", h = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__tabHeading___WIYkc", g = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabListContent___Thx_L", _ = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabListAction____VPPu", v = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabListActionItem___Vpe6P", y = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__content___NwDBO", b = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__link___NBLWE", x = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionContent___jxVob", S = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionItem___59An1", C = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionHeading___u6tN5", w = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionHeadingInner___nuDDN", T = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionIcon___GRZr8", E = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionLabel___UsRuR", D = "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionPanel___yTX_x", O = {
+	RiverBreakoutTabs: e,
+	RiverBreakoutTabs__accordion: t,
+	RiverBreakoutTabs__wideTabList: n,
+	RiverBreakoutTabs__sharedVisuals: r,
+	RiverBreakoutTabs__accordionSharedVisuals: i,
+	RiverBreakoutTabs__sharedVisualPanel: a,
+	RiverBreakoutTabs__backgroundVisual: o,
+	RiverBreakoutTabs__accordionSharedVisual: s,
 	"RiverBreakoutTabs--has-background-visual": "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--has-background-visual___4fOiK",
 	"RiverBreakoutTabs--image-position-block-end": "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--image-position-block-end___wyjv2",
 	"RiverBreakoutTabs--background-visual-full-bleed": "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs--background-visual-full-bleed___HM5Fs",
-	RiverBreakoutTabs__sharedVisual: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisual___ST6p9",
-	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__sharedVisual: c,
+	RiverBreakoutTabs__tablist: l,
+	RiverBreakoutTabs__wideTabListActions: u,
+	RiverBreakoutTabs__item: d,
 	"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"
+	RiverBreakoutTabs__heading: f,
+	RiverBreakoutTabs__icon: p,
+	RiverBreakoutTabs__tab: m,
+	RiverBreakoutTabs__tabHeading: h,
+	RiverBreakoutTabs__wideTabListContent: g,
+	RiverBreakoutTabs__wideTabListAction: _,
+	RiverBreakoutTabs__wideTabListActionItem: v,
+	RiverBreakoutTabs__content: y,
+	RiverBreakoutTabs__link: b,
+	RiverBreakoutTabs__accordionContent: x,
+	RiverBreakoutTabs__accordionItem: S,
+	RiverBreakoutTabs__accordionHeading: C,
+	RiverBreakoutTabs__accordionHeadingInner: w,
+	RiverBreakoutTabs__accordionIcon: T,
+	RiverBreakoutTabs__accordionLabel: E,
+	RiverBreakoutTabs__accordionPanel: D
 };
 //#endregion
-export { e as default };
+export { e as RiverBreakoutTabs, t as RiverBreakoutTabs__accordion, x as RiverBreakoutTabs__accordionContent, C as RiverBreakoutTabs__accordionHeading, w as RiverBreakoutTabs__accordionHeadingInner, T as RiverBreakoutTabs__accordionIcon, S as RiverBreakoutTabs__accordionItem, E as RiverBreakoutTabs__accordionLabel, D as RiverBreakoutTabs__accordionPanel, s as RiverBreakoutTabs__accordionSharedVisual, i as RiverBreakoutTabs__accordionSharedVisuals, o as RiverBreakoutTabs__backgroundVisual, y as RiverBreakoutTabs__content, f as RiverBreakoutTabs__heading, p as RiverBreakoutTabs__icon, d as RiverBreakoutTabs__item, b as RiverBreakoutTabs__link, c as RiverBreakoutTabs__sharedVisual, a as RiverBreakoutTabs__sharedVisualPanel, r as RiverBreakoutTabs__sharedVisuals, m as RiverBreakoutTabs__tab, h as RiverBreakoutTabs__tabHeading, l as RiverBreakoutTabs__tablist, n as RiverBreakoutTabs__wideTabList, _ as RiverBreakoutTabs__wideTabListAction, v as RiverBreakoutTabs__wideTabListActionItem, u as RiverBreakoutTabs__wideTabListActions, g as RiverBreakoutTabs__wideTabListContent, O as default };
 
 //# sourceMappingURL=RiverBreakoutTabs.module.js.map

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

@@ -19,5 +19,5 @@ export type RiverStoryScrollProps = {
      */
     children?: React.ReactElement<RiverProps>[];
 };
-export declare function RiverStoryScroll({ children, disabled }: RiverStoryScrollProps): import("react/jsx-runtime").JSX.Element;
+export declare function RiverStoryScroll({ children, disabled }: RiverStoryScrollProps): React.JSX.Element;
 //# sourceMappingURL=RiverStoryScroll.d.ts.map

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

@@ -1 +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"}
+{"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,qBAuH3E"}

package/esm/river/RiverStoryScroll/RiverStoryScroll.js

@@ -1,4 +1,4 @@
-import e from "../../node_modules/clsx/dist/clsx.js";
+import { clsx as 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";
@@ -21,13 +21,15 @@ function d({ children: d, disabled: f }) {
 			e.removeEventListener("change", t);
 		};
 	}, []), o(() => {
-		f || h || !m.current || v(Array.from(m.current.querySelectorAll("img, video")).map((e) => e instanceof HTMLImageElement ? {
+		if (f || h || !m.current) return;
+		let e = Array.from(m.current.querySelectorAll("img, video")).map((e) => e instanceof HTMLImageElement ? {
 			type: "image",
 			src: e.src
 		} : {
 			type: "video",
 			src: e.querySelector("source")?.src || ""
-		}));
+		});
+		v(e);
 	}, [f, h]), f || h ? /* @__PURE__ */ l(c, { children: d }) : /* @__PURE__ */ l("div", {
 		className: e(n.RiverStoryScroll, n["RiverStoryScroll--enabled"]),
 		children: /* @__PURE__ */ u(t, {

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

@@ -1 +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"}
+{"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,IAAI,GACvD,IAAsB,EAA8B,IAAI,GAExD,CAAC,GAAsB,KAA2B,EAAM,SAAS,EAAK,GACtE,CAAC,GAAO,KAAY,EAAM,SAAkB,CAAC,CAAC,GAE9C,IAAW,EAAM,SAAS,IAAI,IAAU,MAAS;EACrD,IAAI,EAAM,eAAe,CAAK,GAC5B,OAAO,EAAM,aAAa,GAAyC,EACjE,WAAW,EACT,EAAO,qCACP,CAAC,KAAY,EAAO,kCACtB,EACF,CAAC;CAEL,CAAC,GAEK,IAA0B,IAAe,MAAM,EAAS,MAAM,CAAC,CAAC,KAAK,EAAK,IAAI,CAAC;CA6CrF,OA3CA,QAAgB;EACd,IAAM,IAAa,OAAO,WAAW,kCAAkC;EACvE,EAAwB,EAAW,OAAO;EAE1C,IAAM,KAAY,MAA2B;GAC3C,EAAwB,EAAE,OAAO;EACnC;EAIA,OAFA,EAAW,iBAAiB,UAAU,CAAQ,SAEjC;GACX,EAAW,oBAAoB,UAAU,CAAQ;EACnD;CACF,GAAG,CAAC,CAAC,GAEL,QAAgB;EACd,IAAI,KAAY,KAAwB,CAAC,EAAoB,SAAS;EAMtE,IAAM,IAJgB,MAAM,KAC1B,EAAoB,QAAQ,iBAAsD,YAAY,CAGtE,CAAA,CAAc,KAAI,MACtC,aAAmB,mBACd;GACL,MAAM;GACN,KAAK,EAAQ;EACf,IAGK;GACL,MAAM;GACN,KAAK,EAAQ,cAAc,QAAQ,CAAC,EAAE,OAAO;EAC/C,CACD;EAED,EAAS,CAAQ;CACnB,GAAG,CAAC,GAAU,CAAoB,CAAC,GAE/B,KAAY,IACP,kBAAA,GAAA,EAAG,YAAW,CAAA,IAIrB,kBAAC,OAAD;EAAK,WAAW,EAAK,EAAO,kBAAkB,EAAO,4BAA4B;YAC/E,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,kCACT;eAJF;MAME,kBAAC,OAAD,EAAK,WAAW,EAAO,kCAAoC,CAAA;MAC1D,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;QAAiC,CAAA;OACxD,CAAA,GAER,EAAK,SAAS,WACb,kBAAC,OAAD;QAAK,WAAW,EAAO;QAA4B,KAAK,GAAG,EAAK;QAAO,KAAI;OAAI,CAAA,CAExD;SAXpB,CAWoB,CAC5B;MACD,kBAAC,OAAD;OAAK,WAAW,EAAO;iBACpB,EAAM,KAAK,GAAG,MACb,kBAAC,OAAD,EAAK,WAAW,EAAO,oCAAkD,GAAR,CAAQ,CAC1E;MACE,CAAA;KACF;;GACF,CAAA,GAEL,kBAAC,OAAD;IACE,KAAK;IACL,WAAW,EACT,EAAO,wCACP,EAAO,6CACT;cAEC,EAAM,SAAS,IAAI,IAAW,GAAO,MACpC,kBAAC,GAAD;KAEE,UAAS;KACF;KACP,WAAW,EAAO;eAEjB;IACsB,GANlB,CAMkB,CAC1B;GACE,CAAA,CACmB;;CACvB,CAAA;AAET"}

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

@@ -1,13 +1,14 @@
-import './RiverStoryScroll.module-kez68wMZ.css';var e = {
-	RiverStoryScroll: "Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC",
-	RiverStoryScroll__inner: "Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__inner___WF5b_",
+import './RiverStoryScroll.module-kez68wMZ.css';//#region src/river/RiverStoryScroll/RiverStoryScroll.module.css
+var e = "Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC", t = "Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__inner___WF5b_", n = "Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__image___SlwET", r = "Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i", i = "Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination___N3Qqs", a = {
+	RiverStoryScroll: e,
+	RiverStoryScroll__inner: t,
 	"RiverStoryScroll__visual-cover": "Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-cover___3Fzq_",
-	RiverStoryScroll__image: "Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__image___SlwET",
+	RiverStoryScroll__image: n,
 	"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",
+	RiverStoryScroll__tracker: r,
 	"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",
@@ -17,11 +18,11 @@ import './RiverStoryScroll.module-kez68wMZ.css';var e = {
 	"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: i,
 	"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 };
+export { e as RiverStoryScroll, n as RiverStoryScroll__image, t as RiverStoryScroll__inner, i as RiverStoryScroll__pagination, r as RiverStoryScroll__tracker, a as default };
 
 //# sourceMappingURL=RiverStoryScroll.module.js.map

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

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

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

@@ -1 +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"}
+{"version":3,"file":"RiverStoryScrollProvider.d.ts","sourceRoot":"","sources":["../../../src/river/RiverStoryScroll/RiverStoryScrollProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,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,qBAyCA"}

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

@@ -1 +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"}
+{"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,CAAC;CACnB,2BAA2B;EACzB,MAAU,MAAM,mDAAmD;CACrE;AACF,CAAC,GAEY,UAA8B,EAAW,CAAkB;AAExE,SAAgB,EAAyB,EACvC,aACA,cACA,oBAKC;CACD,IAAM,CAAC,GAAkB,KAAuB,EAAoB,CAAa,GAC3E,GAAG,KAAqB,kBAAsB,IAAI,IAAI,CAAC,GACvD,CAAC,GAAiB,KAAsB,EAAwB,IAAI;CA0B1E,OACE,kBAAC,OAAD;EAAgB;YACd,kBAAC,EAAmB,UAApB;GACE,OAAO;IACL;IACA,sBA7BwB,GAAe,MAAuB;KACpE,GAAkB,MAAyB;MACzC,IAAM,IAAoB,IAAI,IAAI,CAAqB;MAEvD,AAAI,IACF,EAAkB,IAAI,CAAK,IAE3B,EAAkB,OAAO,CAAK;MAGhC,IAAM,IACJ,EAAkB,OAAO,IAAI,KAAK,IAAI,GAAG,MAAM,KAAK,CAAiB,CAAC,IAAI;MAS5E,OAPI,MAAwB,SAE1B,EAAmB,CAAmB,GAEtC,GAAoB,MAAU,EAAO,KAAK,GAAG,MAAQ,MAAQ,CAAmB,CAAC,IAG5E;KACT,CAAC;IACH;GAQM;GAEC;EAC0B,CAAA;CAC1B,CAAA;AAET"}

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

@@ -6,6 +6,6 @@ type RiverStoryScrollResponderProps = {
     visibleClassName?: string;
     hiddenClassName?: string;
 };
-export declare function RiverStoryScrollResponder({ index, children, className, visibleClassName, hiddenClassName, }: RiverStoryScrollResponderProps): import("react/jsx-runtime").JSX.Element;
+export declare function RiverStoryScrollResponder({ index, children, className, visibleClassName, hiddenClassName, }: RiverStoryScrollResponderProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=RiverStoryScrollResponder.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"RiverStoryScrollResponder.d.ts","sourceRoot":"","sources":["../../../src/river/RiverStoryScroll/RiverStoryScrollResponder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAA;AAM9C,KAAK,8BAA8B,GAAG;IACpC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,wBAAgB,yBAAyB,CAAC,EACxC,KAAK,EACL,QAAQ,EACR,SAAS,EACT,gBAAgD,EAChD,eAAoD,GACrD,EAAE,8BAA8B,2CA8BhC"}
+{"version":3,"file":"RiverStoryScrollResponder.d.ts","sourceRoot":"","sources":["../../../src/river/RiverStoryScroll/RiverStoryScrollResponder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAA;AAM9C,KAAK,8BAA8B,GAAG;IACpC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,wBAAgB,yBAAyB,CAAC,EACxC,KAAK,EACL,QAAQ,EACR,SAAS,EACT,gBAAgD,EAChD,eAAoD,GACrD,EAAE,8BAA8B,qBA8BhC"}

package/esm/river/RiverStoryScroll/RiverStoryScrollResponder.js

@@ -1,4 +1,4 @@
-import e from "../../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../../node_modules/clsx/dist/clsx.js";
 import { useStoryScrollContext as t } from "./RiverStoryScrollProvider.js";
 import n from "./RiverStoryScroll.module.js";
 import r, { useEffect as i, useRef as a } from "react";

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

@@ -1 +1 @@
-{"version":3,"file":"RiverStoryScrollResponder.js","names":[],"sources":["../../../src/river/RiverStoryScroll/RiverStoryScrollResponder.tsx"],"sourcesContent":["import React, {useEffect, useRef} from 'react'\nimport {useStoryScrollContext} from './RiverStoryScrollProvider' // Adjust the import path as necessary\n\nimport styles from './RiverStoryScroll.module.css'\nimport {clsx} from 'clsx'\n\ntype RiverStoryScrollResponderProps = {\n  index: number\n  children?: React.ReactNode\n  className?: string\n  visibleClassName?: string // Optional: A class to apply when the item is supposed to be visible\n  hiddenClassName?: string // Optional: A class to apply when the item is hidden\n}\n\nexport function RiverStoryScrollResponder({\n  index,\n  children,\n  className,\n  visibleClassName = styles['tracker-in-viewport'],\n  hiddenClassName = styles['tracker-outside-viewport'],\n}: RiverStoryScrollResponderProps) {\n  const {visibilityStates} = useStoryScrollContext()\n  const isVisible = visibilityStates[index]\n  const videoRef = useRef<HTMLVideoElement>(null)\n\n  useEffect(() => {\n    const videoElement = videoRef.current\n\n    if (!videoElement) return\n\n    if (isVisible) {\n      // eslint-disable-next-line github/no-then\n      videoElement.play().catch(error => {\n        // eslint-disable-next-line no-console\n        console.error('Error playing the video:', error)\n      })\n    } else {\n      videoElement.pause()\n    }\n  }, [isVisible])\n\n  // Parse children to attach ref to video elements\n  const parsedChildren = React.Children.map(children, child => {\n    if (React.isValidElement(child) && child.type === 'video') {\n      return React.cloneElement(child, {ref: videoRef} as React.HTMLAttributes<HTMLVideoElement>)\n    }\n    return child\n  })\n\n  return <div className={clsx(className, isVisible ? visibleClassName : hiddenClassName)}>{parsedChildren}</div>\n}\n"],"mappings":";;;;;;AAcA,SAAgB,EAA0B,EACxC,UACA,aACA,cACA,sBAAmB,EAAO,wBAC1B,qBAAkB,EAAO,+BACQ;CACjC,IAAM,EAAC,wBAAoB,GAAuB,EAC5C,IAAY,EAAiB,IAC7B,IAAW,EAAyB,KAAK;AAE/C,SAAgB;EACd,IAAM,IAAe,EAAS;AAEzB,QAED,IAEF,EAAa,MAAM,CAAC,OAAM,MAAS;AAEjC,WAAQ,MAAM,4BAA4B,EAAM;IAChD,GAEF,EAAa,OAAO;IAErB,CAAC,EAAU,CAAC;CAGf,IAAM,IAAiB,EAAM,SAAS,IAAI,IAAU,MAC9C,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,UACzC,EAAM,aAAa,GAAO,EAAC,KAAK,GAAS,CAA2C,GAEtF,EACP;AAEF,QAAO,kBAAC,OAAD;EAAK,WAAW,EAAK,GAAW,IAAY,IAAmB,EAAgB;YAAG;EAAqB,CAAA"}
+{"version":3,"file":"RiverStoryScrollResponder.js","names":[],"sources":["../../../src/river/RiverStoryScroll/RiverStoryScrollResponder.tsx"],"sourcesContent":["import React, {useEffect, useRef} from 'react'\nimport {useStoryScrollContext} from './RiverStoryScrollProvider' // Adjust the import path as necessary\n\nimport styles from './RiverStoryScroll.module.css'\nimport {clsx} from 'clsx'\n\ntype RiverStoryScrollResponderProps = {\n  index: number\n  children?: React.ReactNode\n  className?: string\n  visibleClassName?: string // Optional: A class to apply when the item is supposed to be visible\n  hiddenClassName?: string // Optional: A class to apply when the item is hidden\n}\n\nexport function RiverStoryScrollResponder({\n  index,\n  children,\n  className,\n  visibleClassName = styles['tracker-in-viewport'],\n  hiddenClassName = styles['tracker-outside-viewport'],\n}: RiverStoryScrollResponderProps) {\n  const {visibilityStates} = useStoryScrollContext()\n  const isVisible = visibilityStates[index]\n  const videoRef = useRef<HTMLVideoElement>(null)\n\n  useEffect(() => {\n    const videoElement = videoRef.current\n\n    if (!videoElement) return\n\n    if (isVisible) {\n      // eslint-disable-next-line github/no-then\n      videoElement.play().catch(error => {\n        // eslint-disable-next-line no-console\n        console.error('Error playing the video:', error)\n      })\n    } else {\n      videoElement.pause()\n    }\n  }, [isVisible])\n\n  // Parse children to attach ref to video elements\n  const parsedChildren = React.Children.map(children, child => {\n    if (React.isValidElement(child) && child.type === 'video') {\n      return React.cloneElement(child, {ref: videoRef} as React.HTMLAttributes<HTMLVideoElement>)\n    }\n    return child\n  })\n\n  return <div className={clsx(className, isVisible ? visibleClassName : hiddenClassName)}>{parsedChildren}</div>\n}\n"],"mappings":";;;;;;AAcA,SAAgB,EAA0B,EACxC,UACA,aACA,cACA,sBAAmB,EAAO,wBAC1B,qBAAkB,EAAO,+BACQ;CACjC,IAAM,EAAC,wBAAoB,EAAsB,GAC3C,IAAY,EAAiB,IAC7B,IAAW,EAAyB,IAAI;CAE9C,QAAgB;EACd,IAAM,IAAe,EAAS;EAEzB,MAED,IAEF,EAAa,KAAK,CAAC,CAAC,OAAM,MAAS;GAEjC,QAAQ,MAAM,4BAA4B,CAAK;EACjD,CAAC,IAED,EAAa,MAAM;CAEvB,GAAG,CAAC,CAAS,CAAC;CAGd,IAAM,IAAiB,EAAM,SAAS,IAAI,IAAU,MAC9C,EAAM,eAAe,CAAK,KAAK,EAAM,SAAS,UACzC,EAAM,aAAa,GAAO,EAAC,KAAK,EAAQ,CAA2C,IAErF,CACR;CAED,OAAO,kBAAC,OAAD;EAAK,WAAW,EAAK,GAAW,IAAY,IAAmB,CAAe;YAAI;CAAoB,CAAA;AAC/G"}

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

@@ -5,6 +5,6 @@ type RiverStoryScrollTrackerProps = {
     className?: string;
     location?: string;
 };
-export declare const RiverStoryScrollTracker: ({ index, children, className }: RiverStoryScrollTrackerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RiverStoryScrollTracker: ({ index, children, className }: RiverStoryScrollTrackerProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=RiverStoryScrollTracker.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"RiverStoryScrollTracker.d.ts","sourceRoot":"","sources":["../../../src/river/RiverStoryScroll/RiverStoryScrollTracker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAA;AAOxD,KAAK,4BAA4B,GAAG;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,uBAAuB,GAAI,gCAAmC,4BAA4B,4CAgEtG,CAAA"}
+{"version":3,"file":"RiverStoryScrollTracker.d.ts","sourceRoot":"","sources":["../../../src/river/RiverStoryScroll/RiverStoryScrollTracker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAA;AAOxD,KAAK,4BAA4B,GAAG;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,uBAAuB,GAAI,gCAAmC,4BAA4B,sBAgEtG,CAAA"}

package/esm/river/RiverStoryScroll/RiverStoryScrollTracker.js

@@ -1,4 +1,4 @@
-import e from "../../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../../node_modules/clsx/dist/clsx.js";
 import { useWindowSize as t } from "../../hooks/useWindowSize.js";
 import { useStoryScrollContext as n } from "./RiverStoryScrollProvider.js";
 import r from "./RiverStoryScroll.module.js";

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

@@ -1 +1 @@
-{"version":3,"file":"RiverStoryScrollTracker.js","names":[],"sources":["../../../src/river/RiverStoryScroll/RiverStoryScrollTracker.tsx"],"sourcesContent":["import React, {useEffect, useRef, useState} from 'react'\nimport {clsx} from 'clsx'\n\nimport {useWindowSize} from '../../'\nimport {useStoryScrollContext} from './RiverStoryScrollProvider'\nimport styles from './RiverStoryScroll.module.css'\n\ntype RiverStoryScrollTrackerProps = {\n  index: number\n  children?: React.ReactNode\n  className?: string\n  location?: string\n}\n\nexport const RiverStoryScrollTracker = ({index, children, className = ''}: RiverStoryScrollTrackerProps) => {\n  const {isLarge} = useWindowSize()\n  const elementRef = useRef<HTMLDivElement | null>(null)\n  const [isIntersecting, setIsIntersecting] = useState(false)\n  const {setVisibilityStates} = useStoryScrollContext()\n\n  useEffect(() => {\n    function isLandscape() {\n      return window.innerWidth / window.innerHeight >= 0.78\n    }\n\n    const observerCallback = ([entry]: IntersectionObserverEntry[]) => {\n      if (isLandscape()) {\n        setIsIntersecting(entry.isIntersecting)\n        setVisibilityStates(index, entry.isIntersecting)\n      }\n    }\n\n    const observerCallbackPortrait = ([entry]: IntersectionObserverEntry[]) => {\n      if (!isLandscape()) {\n        setIsIntersecting(entry.isIntersecting)\n        setVisibilityStates(index, entry.isIntersecting)\n      }\n    }\n\n    const observer = new IntersectionObserver(\n      observerCallback,\n      !isLarge\n        ? {\n            rootMargin: '-80% 0% -19.99% 0%',\n            threshold: 0,\n          }\n        : {threshold: 0.8},\n    )\n\n    const observerPortrait = new IntersectionObserver(\n      observerCallbackPortrait,\n      !isLarge\n        ? {\n            rootMargin: '-65% 0% -34.99% 0%',\n            threshold: 0,\n          }\n        : {threshold: 0.8},\n    )\n\n    if (elementRef.current) {\n      observer.observe(elementRef.current)\n      observerPortrait.observe(elementRef.current)\n    }\n\n    return () => {\n      observer.disconnect()\n      observerPortrait.disconnect()\n    }\n  }, [index, isLarge, setVisibilityStates])\n\n  return (\n    <div\n      ref={elementRef}\n      className={clsx(className, isIntersecting ? styles['in-viewport'] : styles['outside-viewport'])}\n    >\n      {children}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAcA,IAAa,KAA2B,EAAC,UAAO,aAAU,eAAY,SAAsC;CAC1G,IAAM,EAAC,eAAW,GAAe,EAC3B,IAAa,EAA8B,KAAK,EAChD,CAAC,GAAgB,KAAqB,EAAS,GAAM,EACrD,EAAC,2BAAuB,GAAuB;AAoDrD,QAlDA,QAAgB;EACd,SAAS,IAAc;AACrB,UAAO,OAAO,aAAa,OAAO,eAAe;;EAGnD,IAAM,KAAoB,CAAC,OAAwC;AACjE,GAAI,GAAa,KACf,EAAkB,EAAM,eAAe,EACvC,EAAoB,GAAO,EAAM,eAAe;KAI9C,KAA4B,CAAC,OAAwC;AACzE,GAAK,GAAa,KAChB,EAAkB,EAAM,eAAe,EACvC,EAAoB,GAAO,EAAM,eAAe;KAI9C,IAAW,IAAI,qBACnB,GACC,IAKG,EAAC,WAAW,IAAI,GAJhB;GACE,YAAY;GACZ,WAAW;GACZ,CAEN,EAEK,IAAmB,IAAI,qBAC3B,GACC,IAKG,EAAC,WAAW,IAAI,GAJhB;GACE,YAAY;GACZ,WAAW;GACZ,CAEN;AAOD,SALI,EAAW,YACb,EAAS,QAAQ,EAAW,QAAQ,EACpC,EAAiB,QAAQ,EAAW,QAAQ,SAGjC;AAEX,GADA,EAAS,YAAY,EACrB,EAAiB,YAAY;;IAE9B;EAAC;EAAO;EAAS;EAAoB,CAAC,EAGvC,kBAAC,OAAD;EACE,KAAK;EACL,WAAW,EAAK,GAAW,IAAiB,EAAO,iBAAiB,EAAO,oBAAoB;EAE9F;EACG,CAAA"}
+{"version":3,"file":"RiverStoryScrollTracker.js","names":[],"sources":["../../../src/river/RiverStoryScroll/RiverStoryScrollTracker.tsx"],"sourcesContent":["import React, {useEffect, useRef, useState} from 'react'\nimport {clsx} from 'clsx'\n\nimport {useWindowSize} from '../../'\nimport {useStoryScrollContext} from './RiverStoryScrollProvider'\nimport styles from './RiverStoryScroll.module.css'\n\ntype RiverStoryScrollTrackerProps = {\n  index: number\n  children?: React.ReactNode\n  className?: string\n  location?: string\n}\n\nexport const RiverStoryScrollTracker = ({index, children, className = ''}: RiverStoryScrollTrackerProps) => {\n  const {isLarge} = useWindowSize()\n  const elementRef = useRef<HTMLDivElement | null>(null)\n  const [isIntersecting, setIsIntersecting] = useState(false)\n  const {setVisibilityStates} = useStoryScrollContext()\n\n  useEffect(() => {\n    function isLandscape() {\n      return window.innerWidth / window.innerHeight >= 0.78\n    }\n\n    const observerCallback = ([entry]: IntersectionObserverEntry[]) => {\n      if (isLandscape()) {\n        setIsIntersecting(entry.isIntersecting)\n        setVisibilityStates(index, entry.isIntersecting)\n      }\n    }\n\n    const observerCallbackPortrait = ([entry]: IntersectionObserverEntry[]) => {\n      if (!isLandscape()) {\n        setIsIntersecting(entry.isIntersecting)\n        setVisibilityStates(index, entry.isIntersecting)\n      }\n    }\n\n    const observer = new IntersectionObserver(\n      observerCallback,\n      !isLarge\n        ? {\n            rootMargin: '-80% 0% -19.99% 0%',\n            threshold: 0,\n          }\n        : {threshold: 0.8},\n    )\n\n    const observerPortrait = new IntersectionObserver(\n      observerCallbackPortrait,\n      !isLarge\n        ? {\n            rootMargin: '-65% 0% -34.99% 0%',\n            threshold: 0,\n          }\n        : {threshold: 0.8},\n    )\n\n    if (elementRef.current) {\n      observer.observe(elementRef.current)\n      observerPortrait.observe(elementRef.current)\n    }\n\n    return () => {\n      observer.disconnect()\n      observerPortrait.disconnect()\n    }\n  }, [index, isLarge, setVisibilityStates])\n\n  return (\n    <div\n      ref={elementRef}\n      className={clsx(className, isIntersecting ? styles['in-viewport'] : styles['outside-viewport'])}\n    >\n      {children}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAcA,IAAa,KAA2B,EAAC,UAAO,aAAU,eAAY,SAAsC;CAC1G,IAAM,EAAC,eAAW,EAAc,GAC1B,IAAa,EAA8B,IAAI,GAC/C,CAAC,GAAgB,KAAqB,EAAS,EAAK,GACpD,EAAC,2BAAuB,EAAsB;CAoDpD,OAlDA,QAAgB;EACd,SAAS,IAAc;GACrB,OAAO,OAAO,aAAa,OAAO,eAAe;EACnD;EAEA,IAAM,KAAoB,CAAC,OAAwC;GACjE,AAAI,EAAY,MACd,EAAkB,EAAM,cAAc,GACtC,EAAoB,GAAO,EAAM,cAAc;EAEnD,GAEM,KAA4B,CAAC,OAAwC;GACzE,AAAK,EAAY,MACf,EAAkB,EAAM,cAAc,GACtC,EAAoB,GAAO,EAAM,cAAc;EAEnD,GAEM,IAAW,IAAI,qBACnB,GACC,IAKG,EAAC,WAAW,GAAG,IAJf;GACE,YAAY;GACZ,WAAW;EACb,CAEN,GAEM,IAAmB,IAAI,qBAC3B,GACC,IAKG,EAAC,WAAW,GAAG,IAJf;GACE,YAAY;GACZ,WAAW;EACb,CAEN;EAOA,OALI,EAAW,YACb,EAAS,QAAQ,EAAW,OAAO,GACnC,EAAiB,QAAQ,EAAW,OAAO,UAGhC;GAEX,AADA,EAAS,WAAW,GACpB,EAAiB,WAAW;EAC9B;CACF,GAAG;EAAC;EAAO;EAAS;CAAmB,CAAC,GAGtC,kBAAC,OAAD;EACE,KAAK;EACL,WAAW,EAAK,GAAW,IAAiB,EAAO,iBAAiB,EAAO,mBAAmB;EAE7F;CACE,CAAA;AAET"}

package/esm/river/river-shared.module.js

@@ -1,20 +1,21 @@
-import './river-shared.module-B1HvdKsP.css';var e = {
-	River: "Primer_Brand__river-shared-module__River___PCP5W",
+import './river-shared.module-B1HvdKsP.css';//#region src/river/river-shared.module.css
+var e = "Primer_Brand__river-shared-module__River___PCP5W", t = "Primer_Brand__river-shared-module__River__content___udxiD", n = "Primer_Brand__river-shared-module__River__visual___s4zuj", r = "Primer_Brand__river-shared-module__River__heading___e5fwB", i = "Primer_Brand__river-shared-module__River__text___HCqnL", a = "Primer_Brand__river-shared-module__River__leadingComponent___J27K0", o = "Primer_Brand__river-shared-module__River__trailingComponent___jDuou", s = "Primer_Brand__river-shared-module__River__label___ENXiR", c = "Primer_Brand__river-shared-module__RiverBreakout___Jcz2F", l = "Primer_Brand__river-shared-module__RiverBreakout__hiddenHeading___wqngh", u = {
+	River: e,
 	"River--variant-gridline": "Primer_Brand__river-shared-module__River--variant-gridline___e27QX",
 	"River--align-center": "Primer_Brand__river-shared-module__River--align-center___4igQp",
-	River__content: "Primer_Brand__river-shared-module__River__content___udxiD",
-	River__visual: "Primer_Brand__river-shared-module__River__visual___s4zuj",
+	River__content: t,
+	River__visual: n,
 	"River__visual--fill-media": "Primer_Brand__river-shared-module__River__visual--fill-media___aXDjy",
 	"River__visual--rounded": "Primer_Brand__river-shared-module__River__visual--rounded___noFTs",
 	"River__visual--has-shadow": "Primer_Brand__river-shared-module__River__visual--has-shadow___5__Jy",
 	"River__visual--has-background": "Primer_Brand__river-shared-module__River__visual--has-background___0wEBA",
-	River__heading: "Primer_Brand__river-shared-module__River__heading___e5fwB",
+	River__heading: r,
 	"River__call-to-action": "Primer_Brand__river-shared-module__River__call-to-action___yOsJI",
-	River__text: "Primer_Brand__river-shared-module__River__text___HCqnL",
-	River__leadingComponent: "Primer_Brand__river-shared-module__River__leadingComponent___J27K0",
-	River__trailingComponent: "Primer_Brand__river-shared-module__River__trailingComponent___jDuou",
+	River__text: i,
+	River__leadingComponent: a,
+	River__trailingComponent: o,
 	"River__trailingComponent--divider": "Primer_Brand__river-shared-module__River__trailingComponent--divider___mTL35",
-	River__label: "Primer_Brand__river-shared-module__River__label___ENXiR",
+	River__label: s,
 	"River--align-start": "Primer_Brand__river-shared-module__River--align-start___PjR7w",
 	"River--align-end": "Primer_Brand__river-shared-module__River--align-end___PI17m",
 	"River--50-50": "Primer_Brand__river-shared-module__River--50-50___37Rpp",
@@ -28,12 +29,12 @@ import './river-shared.module-B1HvdKsP.css';var e = {
 	"River__visual--padding-all": "Primer_Brand__river-shared-module__River__visual--padding-all___rTBWZ",
 	"River__visual--padding-none": "Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5",
 	"does-not-exist": "Primer_Brand__river-shared-module__does-not-exist___GLvK6",
-	RiverBreakout: "Primer_Brand__river-shared-module__RiverBreakout___Jcz2F",
+	RiverBreakout: c,
 	"RiverBreakout--muted": "Primer_Brand__river-shared-module__RiverBreakout--muted___ndl_I",
-	RiverBreakout__hiddenHeading: "Primer_Brand__river-shared-module__RiverBreakout__hiddenHeading___wqngh",
+	RiverBreakout__hiddenHeading: l,
 	"RiverBreakout--variant-gridline": "Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H"
 };
 //#endregion
-export { e as default };
+export { e as River, c as RiverBreakout, l as RiverBreakout__hiddenHeading, t as River__content, r as River__heading, s as River__label, a as River__leadingComponent, i as River__text, o as River__trailingComponent, n as River__visual, u as default };
 
 //# sourceMappingURL=river-shared.module.js.map

package/esm/utils/getTextContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"getTextContent.js","names":[],"sources":["../../src/utils/getTextContent.ts"],"sourcesContent":["import React from 'react'\n\nexport function getTextContent(node: React.ReactNode): string {\n  if (!node) return ''\n\n  if (typeof node === 'string' || typeof node === 'number') {\n    return String(node)\n  }\n\n  if (Array.isArray(node)) {\n    return node.map(getTextContent).join('')\n  }\n\n  if (React.isValidElement(node)) {\n    const props = node.props as {children?: React.ReactNode}\n    return getTextContent(props.children)\n  }\n\n  return ''\n}\n"],"mappings":";;AAEA,SAAgB,EAAe,GAA+B;AAC5D,KAAI,CAAC,EAAM,QAAO;AAElB,KAAI,OAAO,KAAS,YAAY,OAAO,KAAS,SAC9C,QAAO,OAAO,EAAK;AAGrB,KAAI,MAAM,QAAQ,EAAK,CACrB,QAAO,EAAK,IAAI,EAAe,CAAC,KAAK,GAAG;AAG1C,KAAI,EAAM,eAAe,EAAK,EAAE;EAC9B,IAAM,IAAQ,EAAK;AACnB,SAAO,EAAe,EAAM,SAAS;;AAGvC,QAAO"}
+{"version":3,"file":"getTextContent.js","names":[],"sources":["../../src/utils/getTextContent.ts"],"sourcesContent":["import React from 'react'\n\nexport function getTextContent(node: React.ReactNode): string {\n  if (!node) return ''\n\n  if (typeof node === 'string' || typeof node === 'number') {\n    return String(node)\n  }\n\n  if (Array.isArray(node)) {\n    return node.map(getTextContent).join('')\n  }\n\n  if (React.isValidElement(node)) {\n    const props = node.props as {children?: React.ReactNode}\n    return getTextContent(props.children)\n  }\n\n  return ''\n}\n"],"mappings":";;AAEA,SAAgB,EAAe,GAA+B;CAC5D,IAAI,CAAC,GAAM,OAAO;CAElB,IAAI,OAAO,KAAS,YAAY,OAAO,KAAS,UAC9C,OAAO,OAAO,CAAI;CAGpB,IAAI,MAAM,QAAQ,CAAI,GACpB,OAAO,EAAK,IAAI,CAAc,CAAC,CAAC,KAAK,EAAE;CAGzC,IAAI,EAAM,eAAe,CAAI,GAAG;EAC9B,IAAM,IAAQ,EAAK;EACnB,OAAO,EAAe,EAAM,QAAQ;CACtC;CAEA,OAAO;AACT"}

package/esm/utils/isFragmentElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"isFragmentElement.js","names":[],"sources":["../../src/utils/isFragmentElement.ts"],"sourcesContent":["import React from 'react'\n\nexport const isFragmentElement = (\n  node: React.ReactNode | null | undefined,\n): node is React.ReactElement<{children?: React.ReactNode}> => {\n  return React.isValidElement(node) && node.type === React.Fragment\n}\n"],"mappings":";;AAEA,IAAa,KACX,MAEO,EAAM,eAAe,EAAK,IAAI,EAAK,SAAS,EAAM"}
+{"version":3,"file":"isFragmentElement.js","names":[],"sources":["../../src/utils/isFragmentElement.ts"],"sourcesContent":["import React from 'react'\n\nexport const isFragmentElement = (\n  node: React.ReactNode | null | undefined,\n): node is React.ReactElement<{children?: React.ReactNode}> => {\n  return React.isValidElement(node) && node.type === React.Fragment\n}\n"],"mappings":";;AAEA,IAAa,KACX,MAEO,EAAM,eAAe,CAAI,KAAK,EAAK,SAAS,EAAM"}