npm - @primer/react-brand - Versions diffs - 0.77.1-rc.bd5b9efe → 0.78.0-rc.85e39cb4 - Mend

@primer/react-brand 0.77.1-rc.bd5b9efe → 0.78.0-rc.85e39cb4

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 (535) 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, rounded = true, ...props}, ref) => (\n <RiverVisualBase\n ref={ref}\n className={clsx(rounded && styles['RiverBreakoutTabs__visual--rounded'], className)}\n rounded={rounded}\n {...props}\n />\n ),\n)\n\nconst isItem = createComponentTypeGuard(RiverBreakoutTabsItem)\nconst isA11yHeading = createComponentTypeGuard(RiverBreakoutTabsA11yHeading)\nconst isIcon = createComponentTypeGuard(RiverBreakoutTabsIcon)\nconst isHeading = createComponentTypeGuard(RiverBreakoutTabsHeading)\nconst isContent = createComponentTypeGuard(RiverBreakoutTabsContent)\nconst isVisual = createComponentTypeGuard(RiverBreakoutTabsVisual)\n\nconst isTextChild = (child: React.ReactNode): child is React.ReactElement<React.ComponentProps<typeof Text>> =>\n React.isValidElement<React.ComponentProps<typeof Text>>(child) && child.type === Text\n\nconst isLinkChild = (child: React.ReactNode): child is React.ReactElement<React.ComponentProps<typeof Link>> =>\n React.isValidElement<React.ComponentProps<typeof Link>>(child) && child.type === Link\n\nconst extractItemParts = (item: React.ReactElement<RiverBreakoutTabsItemProps>): ExtractedItemParts => {\n const Children = React.Children.toArray(item.props.children) as RiverBreakoutTabsItemChild[]\n\n return Children.reduce<ExtractedItemParts>(\n (acc, child) => {\n if (isIcon(child)) {\n acc.icon = child\n }\n\n if (isHeading(child)) {\n acc.heading = child\n }\n\n if (isContent(child)) {\n acc.content = child\n }\n\n if (isVisual(child)) {\n acc.visual = child\n }\n\n return acc\n },\n {icon: null, heading: null, content: null, visual: null, className: item.props.className},\n )\n}\n\nconst extractWideTabListContentParts = (\n content: React.ReactElement<RiverBreakoutTabsContentProps> \| null,\n): ExtractedContentParts => {\n if (!content) {\n return {action: null, body: []}\n }\n\n const Children = React.Children.toArray(content.props.children).map(child => {\n if (isTextChild(child)) {\n return cloneElement(child, {\n as: child.props.as ?? 'p',\n variant: child.props.variant ?? 'muted',\n })\n }\n\n if (isLinkChild(child)) {\n return cloneElement(child, {\n className: clsx(child.props.className, styles.RiverBreakoutTabs__link),\n size: child.props.size ?? 'medium',\n variant: child.props.variant ?? 'accent',\n })\n }\n\n return child\n })\n\n return Children.reduce<ExtractedContentParts>(\n (acc, child) => {\n if (isLinkChild(child)) {\n if (!acc.action) {\n acc.action = child\n }\n\n return acc\n }\n\n acc.body.push(child)\n return acc\n },\n {action: null, body: []},\n )\n}\n\nconst clampIndex = (index: number, length: number) => {\n if (length === 0) return -1\n\n const normalizedIndex = Number.isFinite(index) ? Math.trunc(index) : 0\n return Math.min(Math.max(normalizedIndex, 0), length - 1)\n}\n\nconst RiverBreakoutTabsRoot = forwardRef<HTMLElement, RiverBreakoutTabsProps>(\n (\n {\n children,\n className,\n defaultSelectedIndex = 0,\n onChange,\n selectedIndex,\n backgroundVisual,\n imagePosition = 'center',\n backgroundVisualFullBleed = false,\n ...props\n },\n ref,\n ) => {\n const instanceId = useId()\n const {isLarge} = useWindowSize()\n\n const Children = useMemo(() => React.Children.toArray(children), [children])\n\n const A11yHeadingChild = Children.find(isA11yHeading) ?? null\n const Items = Children.filter(isItem)\n .map(extractItemParts)\n .filter(item => item.heading && item.content && item.visual)\n\n const defaultActiveIndex = clampIndex(defaultSelectedIndex, Items.length)\n const controlledActiveIndex =\n typeof selectedIndex === 'number' && Number.isFinite(selectedIndex)\n ? clampIndex(selectedIndex, Items.length)\n : null\n const initialActiveIndex = controlledActiveIndex ?? defaultActiveIndex\n const headingId = A11yHeadingChild?.props.id ?? `${instanceId}-heading`\n const wideTabListColumns = Math.min(Math.max(Items.length, 1), 3)\n const initialActiveTab = initialActiveIndex >= 0 ? String(initialActiveIndex) : undefined\n const isWideTabList = isLarge === true\n const suppressOnTabActivateRef = useRef(false)\n\n const handleTabActivate = useCallback(\n (id: string) => {\n if (suppressOnTabActivateRef.current) {\n suppressOnTabActivateRef.current = false\n return\n }\n\n if (!onChange) return\n\n const nextIndex = Number(id)\n if (!Number.isNaN(nextIndex)) {\n onChange(nextIndex)\n }\n },\n [onChange],\n )\n\n const {activeTab, activateTab, getTabListProps, getTabPanelProps, getTabProps} = useTabs({\n defaultTab: initialActiveTab,\n onTabActivate: handleTabActivate,\n })\n\n const [activeAccordionIndex, setActiveAccordionIndex] = useState(initialActiveIndex)\n\n useEffect(() => {\n if (activeTab === null) return\n\n const nextIndex = Number(activeTab)\n if (!Number.isNaN(nextIndex)) {\n setActiveAccordionIndex(nextIndex)\n }\n }, [activeTab])\n\n useEffect(() => {\n if (controlledActiveIndex === null \|\| controlledActiveIndex < 0) return\n\n const controlledTab = String(controlledActiveIndex)\n if (activeTab !== controlledTab) {\n suppressOnTabActivateRef.current = true\n activateTab(controlledTab)\n }\n\n setActiveAccordionIndex(controlledActiveIndex)\n }, [activateTab, activeTab, controlledActiveIndex])\n\n if (!A11yHeadingChild && (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test')) {\n // eslint-disable-next-line no-console\n console.warn(\n 'RiverBreakoutTabs: A11yHeading child is required. This element will not be visible, only read by screenreaders.',\n )\n }\n\n const handleAccordionOpen = (index: number) => (isOpen: boolean) => {\n if (isOpen) {\n setActiveAccordionIndex(index)\n if (activeTab !== String(index)) {\n activateTab(String(index))\n }\n }\n }\n\n const handleAccordionToggle: React.ReactEventHandler<HTMLDetailsElement> = event => {\n const toggledIndex = Number(event.currentTarget.getAttribute('data-index'))\n\n if (!event.currentTarget.open && activeAccordionIndex === toggledIndex) {\n event.currentTarget.open = true\n }\n }\n\n const tabListProps = A11yHeadingChild\n ? getTabListProps({labelledBy: headingId})\n : getTabListProps({label: 'River breakout tabs'})\n const WideTabListContentParts = useMemo(\n () => Items.map(item => extractWideTabListContentParts(item.content)),\n [Items],\n )\n\n const BackgroundVisualLayer =\n backgroundVisual != null ? (\n <div className={styles.RiverBreakoutTabs__backgroundVisual} aria-hidden=\"true\">\n {backgroundVisual}\n </div>\n ) : null\n\n return (\n <section\n ref={ref}\n className={clsx(\n riverStyles.RiverBreakout,\n riverStyles['RiverBreakout--variant-gridline'],\n gridlineStyles.gridline,\n styles.RiverBreakoutTabs,\n backgroundVisual != null && styles['RiverBreakoutTabs--has-background-visual'],\n backgroundVisual != null &&\n imagePosition === 'block-end' &&\n styles['RiverBreakoutTabs--image-position-block-end'],\n backgroundVisual != null &&\n backgroundVisualFullBleed &&\n styles['RiverBreakoutTabs--background-visual-full-bleed'],\n className,\n )}\n {...props}\n >\n {A11yHeadingChild && cloneElement(A11yHeadingChild, {id: headingId})}\n\n {isWideTabList ? (\n <div className={styles.RiverBreakoutTabs__wideTabList}>\n <div\n {...tabListProps}\n className={styles.RiverBreakoutTabs__tablist}\n style={{'--river-breakout-tabs-columns': String(wideTabListColumns)} as React.CSSProperties}\n >\n {Items.map((item, index) => {\n const isSelected = activeTab === String(index)\n const tabProps = getTabProps<HTMLButtonElement>(String(index))\n const {body} = WideTabListContentParts[index]\n\n return (\n <div\n key={index}\n className={clsx(\n styles.RiverBreakoutTabs__item,\n isSelected && styles['RiverBreakoutTabs__item--selected'],\n item.className,\n )}\n >\n <button type=\"button\" {...tabProps} className={styles.RiverBreakoutTabs__tab}>\n {item.icon &&\n cloneElement(item.icon, {\n className: item.icon.props.className,\n })}\n\n {item.heading &&\n cloneElement(item.heading, {\n className: clsx(item.heading.props.className, styles.RiverBreakoutTabs__tabHeading),\n })}\n\n {body.length > 0 && <div className={styles.RiverBreakoutTabs__wideTabListContent}>{body}</div>}\n </button>\n </div>\n )\n })}\n </div>\n\n <div className={styles.RiverBreakoutTabs__sharedVisuals}>\n {BackgroundVisualLayer}\n {Items.map((item, index) => {\n const panelProps = getTabPanelProps(String(index))\n\n return (\n <div\n key={index}\n {...panelProps}\n tabIndex={-1}\n className={styles.RiverBreakoutTabs__sharedVisualPanel}\n >\n {cloneElement(item.visual as React.ReactElement<RiverBreakoutTabsVisualProps>, {\n className: clsx(item.visual?.props.className, styles.RiverBreakoutTabs__sharedVisual),\n })}\n </div>\n )\n })}\n </div>\n\n {WideTabListContentParts.some(content => content.action) && (\n <div\n className={styles.RiverBreakoutTabs__wideTabListActions}\n style={{'--river-breakout-tabs-columns': String(wideTabListColumns)} as React.CSSProperties}\n >\n {Items.map((_, index) => {\n const {action} = WideTabListContentParts[index]\n\n return (\n <div key={index} className={styles.RiverBreakoutTabs__wideTabListActionItem}>\n {action &&\n cloneElement(action, {\n className: clsx(action.props.className, styles.RiverBreakoutTabs__wideTabListAction),\n })}\n </div>\n )\n })}\n </div>\n )}\n </div>\n ) : (\n <div className={styles.RiverBreakoutTabs__accordion}>\n {activeAccordionIndex >= 0 && Items[activeAccordionIndex]?.visual && (\n <div className={styles.RiverBreakoutTabs__accordionSharedVisuals}>\n {BackgroundVisualLayer}\n {cloneElement(Items[activeAccordionIndex].visual as React.ReactElement<RiverBreakoutTabsVisualProps>, {\n // Remount the visual so new media autoplays when the active item changes.\n key: String(activeAccordionIndex),\n className: clsx(\n Items[activeAccordionIndex].visual.props.className,\n styles.RiverBreakoutTabs__accordionSharedVisual,\n ),\n })}\n </div>\n )}\n\n {Items.map((item, index) => {\n return (\n <Accordion\n key={index}\n data-index={index}\n className={clsx(\n styles.RiverBreakoutTabs__accordionItem,\n index === activeAccordionIndex && styles['RiverBreakoutTabs__item--selected'],\n item.className,\n )}\n onToggle={handleAccordionToggle}\n open={index === activeAccordionIndex}\n handleOpen={handleAccordionOpen(index)}\n >\n <Accordion.Heading className={styles.RiverBreakoutTabs__accordionHeading}>\n <span className={styles.RiverBreakoutTabs__accordionHeadingInner}>\n {item.icon &&\n cloneElement(item.icon, {\n className: clsx(item.icon.props.className, styles.RiverBreakoutTabs__accordionIcon),\n })}\n <span className={styles.RiverBreakoutTabs__accordionLabel}>{item.heading?.props.children}</span>\n </span>\n </Accordion.Heading>\n\n <Accordion.Content className={styles.RiverBreakoutTabs__accordionPanel}>\n {cloneElement(item.content as React.ReactElement<RiverBreakoutTabsContentProps>, {\n className: clsx(item.content?.props.className, styles.RiverBreakoutTabs__accordionContent),\n })}\n </Accordion.Content>\n </Accordion>\n )\n })}\n </div>\n )}\n </section>\n )\n },\n)\n\n/\n Use RiverBreakoutTabs to showcase multiple feature stories within a single immersive surface.\n */\nexport const RiverBreakoutTabs = Object.assign(RiverBreakoutTabsRoot, {\n A11yHeading: RiverBreakoutTabsA11yHeading,\n Content: RiverBreakoutTabsContent,\n Heading: RiverBreakoutTabsHeading,\n Icon: RiverBreakoutTabsIcon,\n Item: RiverBreakoutTabsItem,\n Visual: RiverBreakoutTabsVisual,\n})\n"],"mappings":"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"}

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

@@ -0,0 +1 @@

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

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

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

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

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

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

@@ -1,5 +1,7 @@
 import React, { PropsWithChildren, ReactElement } from 'react';
 import { ButtonProps } from '../Button';
+import { type IconButtonProps } from '../IconButton';
+import { type ActionMenuButtonModes as ActionMenuButtonMode, type ActionMenuSizes as ActionMenuSize } from './ActionMenuContext';
 import { type Icon } from '@primer/octicons-react';
 import { type PositionSettings } from '@primer/behaviors';
 import type { BaseProps } from '../component-helpers';
@@ -8,15 +10,12 @@ import type { BaseProps } from '../component-helpers';
  */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/action-menu/colors-with-modes.css';
 export declare const actionMenuOverlaySides: PositionSettings["side"][];
-export declare const ActionMenuSizes: readonly ["small", "medium"];
-export declare const ActionMenuButtonModes: readonly ["default", "split-button"];
-export type ActionMenuButtonModes = (typeof ActionMenuButtonModes)[number];
-export type ActionMenuSizes = (typeof ActionMenuSizes)[number];
+export { ActionMenuButtonModes, ActionMenuProvider, ActionMenuSizes, useActionMenuContext } from './ActionMenuContext';
 export type ActionMenuProps = {
     /**
-     * The content of the ActionMenu. Must be an ActionMenu.Button and an ActionMenu.Overlay
+     * The content of the ActionMenu. Must include an ActionMenu.Button or ActionMenu.IconButton and an ActionMenu.Overlay
      */
-    children: ReactElement<ActionMenuButtonProps> | ReactElement<ActionMenuOverlayProps> | Array<ReactElement<ActionMenuButtonProps> | ReactElement<ActionMenuOverlayProps>>;
+    children: ReactElement<ActionMenuButtonProps> | ReactElement<ActionMenuIconButtonProps> | ReactElement<ActionMenuOverlayProps> | Array<ReactElement<ActionMenuButtonProps> | ReactElement<ActionMenuIconButtonProps> | ReactElement<ActionMenuOverlayProps>>;
     /**
      * Determines whether the ActionMenu is disabled
      */
@@ -47,38 +46,33 @@ export type ActionMenuProps = {
     /**
      * Size configuratin of the ActionMenu
      */
-    size?: ActionMenuSizes;
+    size?: ActionMenuSize;
     menuSide?: PositionSettings['side'];
     /**
      * Alternative behavior for the button and menu items
      * - `default`: The button and menu items behave as a standard button and menu item.
      * - `split-button`: The button behaves as a split button, and the menu items behave as links.
      */
-    mode?: ActionMenuButtonModes;
+    mode?: ActionMenuButtonMode;
 } & BaseProps<HTMLDivElement>;
-type ActionMenuContextType = {
-    size?: ActionMenuSizes;
-    setSize?: React.Dispatch<React.SetStateAction<ActionMenuSizes | undefined>>;
-    onMenuToggle?: () => void;
-};
-export declare const useActionMenuContext: () => ActionMenuContextType;
-type ActionMenuProviderProps = ActionMenuProps & Pick<ActionMenuContextType, 'onMenuToggle'>;
-export declare const ActionMenuProvider: React.FC<ActionMenuProviderProps>;
 type ActionMenuButtonProps = PropsWithChildren<BaseProps<HTMLButtonElement> & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'onClick'>> & {
     as?: ButtonProps<'a'>['as'];
     href?: ButtonProps<'a'>['href'];
     menuOpen?: boolean;
     'data-testid'?: string;
-    size?: ActionMenuSizes;
-    _mode?: ActionMenuButtonModes;
+    size?: ActionMenuSize;
     variant?: ButtonProps<'a'>['variant'];
     leadingVisual?: ButtonProps<'a'>['leadingVisual'];
 };
+export type ActionMenuIconButtonProps<C extends React.ElementType = 'button'> = Omit<IconButtonProps<C>, 'size'> & {
+    'data-testid'?: string;
+};
+type ActionMenuIconButtonComponent = <C extends React.ElementType = 'button'>(props: ActionMenuIconButtonProps<C> & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
 type ActionMenuItemBaseProps = {
     handler?: (newValue: string) => void;
     type?: 'none' | 'single' | 'link';
     disabled?: boolean;
-    size?: ActionMenuSizes;
+    size?: ActionMenuSize;
     leadingVisual?: React.ReactElement | React.ReactNode | Icon;
 } & PropsWithChildren<React.HTMLProps<HTMLLIElement>>;
 type ActionMenuItemAnchorProps = ActionMenuItemBaseProps & {
@@ -102,9 +96,9 @@ type ActionMenuOverlayProps = PropsWithChildren<BaseProps<HTMLUListElement> & Re
  */
 export declare const ActionMenu: React.NamedExoticComponent<{
     /**
-     * The content of the ActionMenu. Must be an ActionMenu.Button and an ActionMenu.Overlay
+     * The content of the ActionMenu. Must include an ActionMenu.Button or ActionMenu.IconButton and an ActionMenu.Overlay
      */
-    children: ReactElement<ActionMenuButtonProps> | ReactElement<ActionMenuOverlayProps> | Array<ReactElement<ActionMenuButtonProps> | ReactElement<ActionMenuOverlayProps>>;
+    children: ReactElement<ActionMenuButtonProps> | ReactElement<ActionMenuIconButtonProps> | ReactElement<ActionMenuOverlayProps> | Array<ReactElement<ActionMenuButtonProps> | ReactElement<ActionMenuIconButtonProps> | ReactElement<ActionMenuOverlayProps>>;
     /**
      * Determines whether the ActionMenu is disabled
      */
@@ -135,18 +129,19 @@ export declare const ActionMenu: React.NamedExoticComponent<{
     /**
      * Size configuratin of the ActionMenu
      */
-    size?: ActionMenuSizes;
+    size?: ActionMenuSize;
     menuSide?: PositionSettings["side"];
     /**
      * Alternative behavior for the button and menu items
      * - `default`: The button and menu items behave as a standard button and menu item.
      * - `split-button`: The button behaves as a split button, and the menu items behave as links.
      */
-    mode?: ActionMenuButtonModes;
+    mode?: ActionMenuButtonMode;
 } & BaseProps<HTMLDivElement>> & {
     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>>;
+    IconButton: ActionMenuIconButtonComponent;
     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: {
@@ -157,4 +152,3 @@ export declare const ActionMenu: React.NamedExoticComponent<{
         readonly item: string;
     };
 };
-export {};

package/lib/ActionMenu/ActionMenuContext.d.ts ADDED Viewed

@@ -0,0 +1,22 @@
+import React, { PropsWithChildren } from 'react';
+export declare const ActionMenuSizes: readonly ["small", "medium"];
+export type ActionMenuSizes = (typeof ActionMenuSizes)[number];
+export declare const ActionMenuButtonModes: readonly ["default", "split-button"];
+export type ActionMenuButtonModes = (typeof ActionMenuButtonModes)[number];
+type ActionMenuContextType = {
+    menuLabel: string;
+    mode: ActionMenuButtonModes;
+    onMenuToggle?: () => void;
+    setSize?: React.Dispatch<React.SetStateAction<ActionMenuSizes | undefined>>;
+    size?: ActionMenuSizes;
+};
+export declare const ActionMenuContext: React.Context<ActionMenuContextType | undefined>;
+type ActionMenuProviderProps = PropsWithChildren<{
+    menuLabel?: string;
+    mode?: ActionMenuButtonModes;
+    onMenuToggle?: () => void;
+    size?: ActionMenuSizes;
+}>;
+export declare const ActionMenuProvider: ({ children, menuLabel, mode, onMenuToggle, size, }: ActionMenuProviderProps) => React.JSX.Element;
+export declare const useActionMenuContext: () => ActionMenuContextType;
+export {};

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

@@ -1,12 +1,14 @@
 import React, { ReactElement } from 'react';
 import type { Icon } from '@primer/octicons-react';
 import type { BaseProps } from '../component-helpers';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/button/base.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css';
 export declare const ButtonVariants: readonly ["primary", "secondary", "subtle"];
 export declare const ButtonSizes: readonly ["small", "medium", "large"];
 export declare const defaultButtonVariant: "secondary";
 export declare const defaultButtonSize: "medium";
 export type ButtonVariant = (typeof ButtonVariants)[number];
+export type ButtonSize = (typeof ButtonSizes)[number];
 export type ButtonBaseProps = {
     /**
      * The leading visual appears before the button content
@@ -23,7 +25,7 @@ export type ButtonBaseProps = {
     /**
      * The size variations available in Button
      */
-    size?: (typeof ButtonSizes)[number];
+    size?: ButtonSize;
     /**
      * A flag to show/hide the arrow icon
      * @deprecated The hasArrow prop is deprecated and will be removed in a future release.
@@ -34,7 +36,7 @@ export type ButtonBaseProps = {
      */
     block?: boolean;
 };
-export type ButtonProps<C extends React.ElementType> = BaseProps<C> & {
+export type ButtonProps<C extends React.ElementType = 'button'> = BaseProps<C> & {
     as?: C;
 } & ButtonBaseProps & React.ComponentPropsWithoutRef<C>;
 export declare const _Button: React.ForwardRefExoticComponent<Omit<ButtonProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,13 +1,19 @@
 import React from 'react';
 import type { BaseProps } from '../component-helpers';
 import { ButtonProps } from '../Button';
+import { type IconButtonProps } from '../IconButton';
 import { ActionMenuProps } from '../ActionMenu';
 export type PrimerBrandButtonType = React.ReactElement<ButtonProps<React.ElementType<'button' | 'a'>>>;
+export type PrimerBrandIconButtonType = React.ReactElement<IconButtonProps<React.ElementType<'button' | 'a'>>>;
 export type PrimerBrandActionMenuType = React.ReactElement<ActionMenuProps>;
-export type ButtonGroupChild = PrimerBrandButtonType | PrimerBrandActionMenuType | false | null | undefined;
+export declare const ButtonGroupVariants: readonly ["default", "joined"];
+export declare const defaultButtonGroupVariant: "default";
+export type ButtonGroupVariant = (typeof ButtonGroupVariants)[number];
+export type ButtonGroupChild = PrimerBrandButtonType | PrimerBrandIconButtonType | PrimerBrandActionMenuType | false | null | undefined;
 export type ButtonGroupProps = BaseProps<HTMLDivElement> & {
     children: ButtonGroupChild | ButtonGroupChild[];
     buttonSize?: ButtonProps<'button' | 'a'>['size'];
     buttonsAs?: 'button' | 'a';
+    variant?: ButtonGroupVariant;
 };
 export declare const ButtonGroup: React.ForwardRefExoticComponent<Omit<ButtonGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/lib/IconButton/IconButton.d.ts ADDED Viewed

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { Icon } from '@primer/octicons-react';
+import { type TooltipDirection } from '../Tooltip';
+import type { BaseProps } from '../component-helpers';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/icon-button/base.css';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/icon-button/colors-with-modes.css';
+export declare const IconButtonVariants: readonly ["primary", "secondary", "subtle", "danger", "invisible"];
+export declare const IconButtonSizes: readonly ["small", "medium", "large"];
+export declare const defaultIconButtonVariant: "secondary";
+export declare const defaultIconButtonSize: "medium";
+export type IconButtonVariant = (typeof IconButtonVariants)[number];
+export type IconButtonSize = (typeof IconButtonSizes)[number];
+type IconButtonBaseProps<C extends React.ElementType> = Omit<BaseProps<C>, 'ref'> & {
+    as?: C;
+    variant?: IconButtonVariant;
+    icon: Icon;
+    'aria-label': string;
+    description?: string;
+    inactive?: boolean;
+    loading?: boolean;
+    loadingAnnouncement?: string;
+    rounded?: boolean;
+    size?: IconButtonSize;
+    tooltipDirection?: TooltipDirection;
+};
+export type IconButtonProps<C extends React.ElementType = 'button'> = IconButtonBaseProps<C> & Omit<React.ComponentPropsWithoutRef<C>, keyof IconButtonBaseProps<C> | 'children'>;
+type IconButtonComponent = <C extends React.ElementType = 'button'>(props: IconButtonProps<C> & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+export declare const IconButton: IconButtonComponent;
+export {};

package/lib/IconButton/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './IconButton';

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

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

package/lib/SubNav/useAnchorMenu.d.ts ADDED Viewed

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

package/lib/SubNav/useNarrowMenu.d.ts ADDED Viewed

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

package/lib/SubNav/useWideMenu.d.ts ADDED Viewed

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

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

@@ -77,8 +77,8 @@ export type SubdomainNavBarHandle = HTMLElement & {
 export type SubdomainNavBarLinkProps = {
     href: string;
     isExternal?: boolean;
-} & React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;
-declare function Link({ href, className, children, isExternal, 'aria-current': ariaCurrent, 'aria-hidden': ariaHidden, tabIndex, ...rest }: PropsWithChildren<SubdomainNavBarLinkProps>): React.JSX.Element;
+} & React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> & Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'rel' | 'target'>;
+declare function Link({ href, className, children, isExternal, 'aria-current': ariaCurrent, 'aria-hidden': ariaHidden, rel, tabIndex, target, ...rest }: PropsWithChildren<SubdomainNavBarLinkProps>): React.JSX.Element;
 export type SubdomainNavBarSearchResultProps = {
     title: string;
     description: string;

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

@@ -1,9 +1,13 @@
 import React from 'react';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tooltip/colors-with-modes.css';
 import { BaseProps } from '../component-helpers';
-type TooltipDirection = 'n' | 'e' | 's' | 'w';
+export declare const TooltipDirections: readonly ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
+export declare const TooltipDelays: readonly ["short", "medium", "long"];
+export type TooltipDirection = (typeof TooltipDirections)[number];
+export type TooltipDelay = (typeof TooltipDelays)[number];
 export type TooltipProps = {
     direction?: TooltipDirection;
+    delay?: TooltipDelay;
     text: string;
     type?: 'label' | 'description';
     children?: React.ReactNode;
@@ -22,4 +26,3 @@ export declare const TooltipContext: React.Context<{
     tooltipId?: string;
 }>;
 export declare const Tooltip: React.ForwardRefExoticComponent<Omit<TooltipProps, "ref"> & React.RefAttributes<unknown>>;
-export {};