npm - @primer/react-brand - Versions diffs - 0.75.0-rc.c3abcc84 → 0.75.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (915) hide show

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

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/esm/river/RiverStoryScroll/RiverStoryScroll.js CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~"}
1	+ {"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 CHANGED Viewed

	@@ -1 +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"}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~"}
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,qBA8BhC"}

package/esm/river/RiverStoryScroll/RiverStoryScrollResponder.js CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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,sBAgEtG,CAAA"}

package/esm/river/RiverStoryScroll/RiverStoryScrollTracker.js CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~"}
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;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 CHANGED Viewed

	@@ -1 +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"}
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,CAAI,KAAK,EAAK,SAAS,EAAM"}

package/lib/Accordion/Accordion.d.ts CHANGED Viewed

@@ -35,14 +35,14 @@ export declare const AccordionHeading: React.ForwardRefExoticComponent<React.HTM
     weight?: HeadingProps["weight"];
 } & React.RefAttributes<HTMLHeadingElement>>;
 export type AccordionContentProps = HTMLAttributes<HTMLElement>;
-export declare const AccordionContent: ({ children, className, ...rest }: AccordionContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccordionContent: ({ children, className, ...rest }: AccordionContentProps) => React.JSX.Element;
 export declare const Accordion: React.ForwardRefExoticComponent<React.DetailsHTMLAttributes<HTMLDetailsElement> & {
     children: ReactElement<AccordionHeadingProps | AccordionContentProps>[];
     variant?: "default" | "emphasis";
     disableAnimation?: boolean;
     handleOpen?: (isOpen: boolean) => void;
 } & React.RefAttributes<HTMLDetailsElement>> & {
-    Content: ({ children, className, ...rest }: AccordionContentProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ children, className, ...rest }: AccordionContentProps) => React.JSX.Element;
     Heading: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
         as?: HeadingProps["as"];
         reversedToggles?: boolean;

package/lib/ActionMenu/ActionMenu.d.ts CHANGED Viewed

@@ -144,10 +144,10 @@ export declare const ActionMenu: React.NamedExoticComponent<{
      */
     mode?: ActionMenuButtonModes;
 } & BaseProps<HTMLDivElement>> & {
-    readonly type: ({ id, children, "data-testid": testId, disabled, open, selectionVariant, menuAlignment, size, menuSide, onSelect, mode, }: ActionMenuProps) => import("react/jsx-runtime").JSX.Element;
+    readonly type: ({ id, children, "data-testid": testId, disabled, open, selectionVariant, menuAlignment, size, menuSide, onSelect, mode, }: ActionMenuProps) => React.JSX.Element;
 } & {
     Button: React.ForwardRefExoticComponent<Omit<ActionMenuButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-    Item: ({ as, children, className, disabled, handler, selected, type, value, onClick, onKeyDown, leadingVisual: LeadingVisual, ...props }: ActionMenuItemAnchorProps | ActionMenuItemDefaultProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ as, children, className, disabled, handler, selected, type, value, onClick, onKeyDown, leadingVisual: LeadingVisual, ...props }: ActionMenuItemAnchorProps | ActionMenuItemDefaultProps) => React.JSX.Element;
     Overlay: React.ForwardRefExoticComponent<Omit<ActionMenuOverlayProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
     testIds: {
         root: string;

package/lib/AnchorNav/AnchorNav.d.ts CHANGED Viewed

@@ -19,7 +19,7 @@ export type AnchorNavProps = BaseProps<HTMLElement> & {
      */
     hideUntilSticky?: boolean;
 } & React.ComponentPropsWithoutRef<'nav'>;
-declare function AnchorNavBase({ children, enableDefaultBgColor, hideUntilSticky, ...rest }: AnchorNavProps): import("react/jsx-runtime").JSX.Element;
+declare function AnchorNavBase({ children, enableDefaultBgColor, hideUntilSticky, ...rest }: AnchorNavProps): React.JSX.Element;
 type AnchorNavLinkIntersectionOptions = {
     /**
      * The area of the element that should trigger the next linked section to be highlighted.
@@ -45,15 +45,15 @@ type AnchorNavLinkProps = BaseProps<HTMLAnchorElement> & {
     prefersReducedMotion?: boolean;
     updateCurrentActiveNav?: (id: string | null) => void;
 } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>;
-declare function NavLinkBase({ alignment, children, href, isActive, toggleMenuCallback, prefersReducedMotion, intersectionOptions, updateCurrentActiveNav, ...rest }: AnchorNavLinkProps): import("react/jsx-runtime").JSX.Element;
+declare function NavLinkBase({ alignment, children, href, isActive, toggleMenuCallback, prefersReducedMotion, intersectionOptions, updateCurrentActiveNav, ...rest }: AnchorNavLinkProps): React.JSX.Element;
 type AnchorNavActionProps = {
     /**
      * Required path or location for the action button to link to.
      */
     href: string;
 } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> & ButtonBaseProps;
-declare function ActionBase({ children, href, variant, size, ...rest }: AnchorNavActionProps): import("react/jsx-runtime").JSX.Element;
-declare function SecondaryActionBase({ children, href, variant, size, ...rest }: AnchorNavActionProps): import("react/jsx-runtime").JSX.Element;
+declare function ActionBase({ children, href, variant, size, ...rest }: AnchorNavActionProps): React.JSX.Element;
+declare function SecondaryActionBase({ children, href, variant, size, ...rest }: AnchorNavActionProps): React.JSX.Element;
 /**
  * AnchorNav allows users to navigate to different sections of a page.
  * @see https://primer.style/brand/components/AnchorNav