@primer/react-brand 0.68.1-rc.e248cf2a → 0.69.0-rc.50f5ffef

package/esm/constants.js

@@ -33,8 +33,10 @@ var e = [
 	40,
 	44,
 	48,
+	60,
 	64,
 	80,
+	88,
 	96,
 	112,
 	128

package/esm/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","names":[],"sources":["../src/constants.tsx"],"sourcesContent":["export const Colors = [\n  'default',\n  'blue',\n  'coral',\n  'green',\n  'gray',\n  'indigo',\n  'lemon',\n  'lime',\n  'orange',\n  'pink',\n  'purple',\n  'red',\n  'teal',\n  'yellow',\n] as const\n\nexport const BiColorGradients = ['blue-purple', 'green-blue', 'pink-blue', 'purple-red', 'red-orange'] as const\nexport const TriColorGradients = ['green-blue-purple'] as const\n\n// TODO: consider generating the scale from  style dictionary and serve from the brand-primitives package\nexport const BaseSizeScale = [4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 64, 80, 96, 112, 128] as const\ntype BaseSizeScale = (typeof BaseSizeScale)[number]\n"],"mappings":";AAAA,IAAa,IAAS;CACpB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EAEY,IAAmB;CAAC;CAAe;CAAc;CAAa;CAAc;CAAa,EACzF,IAAoB,CAAC,oBAAoB,EAGzC,IAAgB;CAAC;CAAG;CAAG;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAK;CAAI"}
+{"version":3,"file":"constants.js","names":[],"sources":["../src/constants.tsx"],"sourcesContent":["export const Colors = [\n  'default',\n  'blue',\n  'coral',\n  'green',\n  'gray',\n  'indigo',\n  'lemon',\n  'lime',\n  'orange',\n  'pink',\n  'purple',\n  'red',\n  'teal',\n  'yellow',\n] as const\n\nexport const BiColorGradients = ['blue-purple', 'green-blue', 'pink-blue', 'purple-red', 'red-orange'] as const\nexport const TriColorGradients = ['green-blue-purple'] as const\n\n// TODO: consider generating the scale from  style dictionary and serve from the brand-primitives package\nexport const BaseSizeScale = [4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 60, 64, 80, 88, 96, 112, 128] as const\ntype BaseSizeScale = (typeof BaseSizeScale)[number]\n"],"mappings":";AAAA,IAAa,IAAS;CACpB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EAEY,IAAmB;CAAC;CAAe;CAAc;CAAa;CAAc;CAAa,EACzF,IAAoB,CAAC,oBAAoB,EAGzC,IAAgB;CAAC;CAAG;CAAG;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAK;CAAI"}

package/esm/css/stylesheets.js

@@ -1,4 +1,4 @@
-import './utilities-BivJncWo.css';import './reset-PKNIUbst.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/typography/typography-responsive-D6GwCHec.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/size/breakpoints-DV9ZFHGu.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/size/border-B0NqqX5b.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/colors/global-with-modes-tpdcmiok.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/base/typography/typography-CAC6sGQ3.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/base/size/size-DBypfR6O.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/base/colors/color-scales-with-modes-BVk7bh0Y.css';/* empty css      */
+import './utilities-BivJncWo.css';import './reset-PKNIUbst.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/typography/typography-responsive-D6GwCHec.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/size/breakpoints-DV9ZFHGu.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/size/border-B0NqqX5b.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/colors/global-with-modes-tpdcmiok.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/base/typography/typography-CAC6sGQ3.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/base/size/size-6EfgMG7y.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/base/colors/color-scales-with-modes-BVk7bh0Y.css';/* empty css      */
 /* empty css                                                                                         */
 /* empty css                                                                    */
 /* empty css                                                                                */

package/esm/index.esm.js

@@ -62,11 +62,11 @@ import { LogoSuite as qt } from "./LogoSuite/LogoSuite.js";
 import { Timeline as Jt } from "./Timeline/Timeline.js";
 import { Bento as Yt } from "./Bento/Bento.js";
 import { EyebrowBanner as Xt, EyebrowBannerIconColors as Zt, EyebrowBannerLabelColors as Qt, defaultEyebrowBannerIconColor as $t } from "./EyebrowBanner/EyebrowBanner.js";
-import { PricingOptions as en } from "./PricingOptions/PricingOptions.js";
-import { SubNav as tn, SubNavSubMenuVariants as nn, useSubNavContext as rn } from "./SubNav/SubNav.js";
-import { IDE as an, IDEDefaultIconMap as on, IDEFileExtensions as sn } from "./IDE/IDE.js";
-import { BreadcrumbVariants as cn, Breadcrumbs as ln } from "./Breadcrumbs/Breadcrumbs.js";
-import { Tooltip as un, TooltipContext as dn } from "./Tooltip/Tooltip.js";
+import { Tooltip as en, TooltipContext as tn } from "./Tooltip/Tooltip.js";
+import { PricingOptions as nn } from "./PricingOptions/PricingOptions.js";
+import { SubNav as rn, SubNavSubMenuVariants as an, useSubNavContext as on } from "./SubNav/SubNav.js";
+import { IDE as sn, IDEDefaultIconMap as cn, IDEFileExtensions as ln } from "./IDE/IDE.js";
+import { BreadcrumbVariants as un, Breadcrumbs as dn } from "./Breadcrumbs/Breadcrumbs.js";
 import { Section as fn, SectionBackgroundColors as pn, SectionPaddingVariants as mn } from "./Section/Section.js";
 import { Statistic as hn, StatisticSizes as gn, StatisticSpacingValues as _n } from "./Statistic/Statistic.js";
 import { BreakoutBanner as vn, BreakoutBannerBackgroundColors as yn } from "./BreakoutBanner/BreakoutBanner.js";
@@ -75,4 +75,4 @@ import { FrostedGlassVFX as Cn, FrostedGlassVFXIntensity as wn, defaultFrostedGl
 import { SectionIntroStacked as En, SectionIntroStackedVariants as Dn } from "./SectionIntroStacked/SectionIntroStacked.js";
 import { Tabs as On } from "./Tabs/Tabs.js";
 import { Tiles as kn } from "./Tiles/Tiles.js";
-export { He as Accordion, Ue as AccordionContent, We as AccordionHeading, Ge as AccordionRoot, Ke as AccordionToggleColors, Rt as ActionMenu, zt as ActionMenuButtonModes, Bt as ActionMenuProvider, Vt as ActionMenuSizes, gt as AnchorNav, a as Animate, n as AnimationContext, r as AnimationProvider, i as AnimationVariants, ot as Avatar, st as AvatarShapes, ct as AvatarSizes, Yt as Bento, g as Box, _ as BoxBackgroundColors, v as BoxBorderColorOptions, y as BoxBorderRadiusOptions, b as BoxBorderWidthOptions, x as BoxSpacingValues, cn as BreadcrumbVariants, ln as Breadcrumbs, vn as BreakoutBanner, yn as BreakoutBannerBackgroundColors, je as BreakpointSize, J as Button, ae as ButtonGroup, Y as ButtonSizes, X as ButtonVariants, _t as CTABanner, vt as CTABannerBackgroundColors, xt as CTAForm, Et as Card, Dt as CardBackgroundColors, Ot as CardCTAVariants, kt as CardIconColors, At as CardLabelVariants, It as CardSkewEffect, jt as CardTokenPositions, Mt as CardVariants, Ye as Checkbox, it as CheckboxGroup, te as ColorModesEnum, mt as ComparisonTable, Xe as DEFAULT_TEXTAREA_COLS, Ze as DEFAULT_TEXTAREA_RESIZE, Qe as DEFAULT_TEXTAREA_ROWS, Xt as EyebrowBanner, Zt as EyebrowBannerIconColors, Qt as EyebrowBannerLabelColors, M as EyebrowText, N as EyebrowTextVariants, qe as FAQ, Je as FAQGroup, bn as Footnotes, xn as FootnotesItemTags, Sn as FootnotesTags, rt as FormControl, Cn as FrostedGlassVFX, wn as FrostedGlassVFXIntensity, t as Grid, I as Heading, L as HeadingFontVariants, R as HeadingLetterSpacing, z as HeadingSizes, B as HeadingStretch, V as HeadingTags, H as HeadingWeights, ee as Hero, an as IDE, on as IDEDefaultIconMap, sn as IDEFileExtensions, Ce as Icon, K as Image, q as ImageBorderRadiusOptions, Re as InlineLink, fe as Label, pe as LabelColors, me as LabelSizes, ce as Link, le as LinkArrowDirections, ue as LinkSizes, de as LinkVariants, qt as LogoSuite, Ie as MediaPlaylist, St as MinimalFooter, bt as OrderedList, Fe as Pagination, Ct as Pillar, en as PricingOptions, Wt as Prose, nt as Radio, at as RadioGroup, _e as River, oe as RiverAccordion, se as RiverAccordionVariants, xe as RiverBreakout, Ne as RiverBreakoutTabs, Se as RiverBreakoutVariants, Pe as RiverStoryScroll, fn as Section, pn as SectionBackgroundColors, Lt as SectionIntro, En as SectionIntroStacked, Dn as SectionIntroStackedVariants, mn as SectionPaddingVariants, tt as Select, c as Stack, l as StackAlignItemVariants, u as StackDirectionVariants, d as StackFlexWrapVariants, f as StackJustifyContentVariants, p as StackSpacingVariants, hn as Statistic, gn as StatisticSizes, _n as StatisticSpacingValues, tn as SubNav, nn as SubNavSubMenuVariants, Le as SubdomainNavBar, On as Tabs, lt as Testimonial, ut as TestimonialQuoteMarkColors, dt as TestimonialVariants, S as Text, P as TextCursorAnimation, C as TextFontVariants, et as TextInput, s as TextRevealAnimation, w as TextSizes, T as TextTags, E as TextVariants, D as TextWeights, $e as Textarea, ne as ThemeContext, re as ThemeProvider, kn as Tiles, Jt as Timeline, ze as Token, Be as TokenVariants, un as Tooltip, dn as TooltipContext, yt as UnorderedList, Kt as VideoPlayer, Z as _Button, ht as _ComparisonTable, e as _GLOBAL_STYLES, Ht as actionMenuOverlaySides, U as classMap, Q as defaultButtonSize, $ as defaultButtonVariant, Nt as defaultCardCTAVariant, Pt as defaultCardIconColor, Ft as defaultCardLabelVariant, $t as defaultEyebrowBannerIconColor, O as defaultFontVariant, Tn as defaultFrostedGlassVFXIntensity, W as defaultHeadingFont, G as defaultHeadingTag, we as defaultIconColor, Te as defaultIconSize, he as defaultLabelColor, ge as defaultLabelSize, wt as defaultPillarIconColor, Tt as defaultPillarIconSize, ft as defaultQuoteMarkColor, ve as defaultRiverAlign, ye as defaultRiverImageTextRatio, be as defaultRiverVariant, m as defaultStackDirection, h as defaultStackSpacing, pt as defaultTestimonialVariant, k as defaultTextSize, A as defaultTextTag, j as defaultTextVariant, Ve as defaultTokenVariant, Ee as iconColors, De as iconSizeMap, Oe as iconSizes, ke as namedIconSizes, Ae as numericIconSizes, F as testIds, Ut as useActionMenuContext, o as useAnimation, rn as useSubNavContext, ie as useTheme, Gt as useVideo, Me as useWindowSize };
+export { He as Accordion, Ue as AccordionContent, We as AccordionHeading, Ge as AccordionRoot, Ke as AccordionToggleColors, Rt as ActionMenu, zt as ActionMenuButtonModes, Bt as ActionMenuProvider, Vt as ActionMenuSizes, gt as AnchorNav, a as Animate, n as AnimationContext, r as AnimationProvider, i as AnimationVariants, ot as Avatar, st as AvatarShapes, ct as AvatarSizes, Yt as Bento, g as Box, _ as BoxBackgroundColors, v as BoxBorderColorOptions, y as BoxBorderRadiusOptions, b as BoxBorderWidthOptions, x as BoxSpacingValues, un as BreadcrumbVariants, dn as Breadcrumbs, vn as BreakoutBanner, yn as BreakoutBannerBackgroundColors, je as BreakpointSize, J as Button, ae as ButtonGroup, Y as ButtonSizes, X as ButtonVariants, _t as CTABanner, vt as CTABannerBackgroundColors, xt as CTAForm, Et as Card, Dt as CardBackgroundColors, Ot as CardCTAVariants, kt as CardIconColors, At as CardLabelVariants, It as CardSkewEffect, jt as CardTokenPositions, Mt as CardVariants, Ye as Checkbox, it as CheckboxGroup, te as ColorModesEnum, mt as ComparisonTable, Xe as DEFAULT_TEXTAREA_COLS, Ze as DEFAULT_TEXTAREA_RESIZE, Qe as DEFAULT_TEXTAREA_ROWS, Xt as EyebrowBanner, Zt as EyebrowBannerIconColors, Qt as EyebrowBannerLabelColors, M as EyebrowText, N as EyebrowTextVariants, qe as FAQ, Je as FAQGroup, bn as Footnotes, xn as FootnotesItemTags, Sn as FootnotesTags, rt as FormControl, Cn as FrostedGlassVFX, wn as FrostedGlassVFXIntensity, t as Grid, I as Heading, L as HeadingFontVariants, R as HeadingLetterSpacing, z as HeadingSizes, B as HeadingStretch, V as HeadingTags, H as HeadingWeights, ee as Hero, sn as IDE, cn as IDEDefaultIconMap, ln as IDEFileExtensions, Ce as Icon, K as Image, q as ImageBorderRadiusOptions, Re as InlineLink, fe as Label, pe as LabelColors, me as LabelSizes, ce as Link, le as LinkArrowDirections, ue as LinkSizes, de as LinkVariants, qt as LogoSuite, Ie as MediaPlaylist, St as MinimalFooter, bt as OrderedList, Fe as Pagination, Ct as Pillar, nn as PricingOptions, Wt as Prose, nt as Radio, at as RadioGroup, _e as River, oe as RiverAccordion, se as RiverAccordionVariants, xe as RiverBreakout, Ne as RiverBreakoutTabs, Se as RiverBreakoutVariants, Pe as RiverStoryScroll, fn as Section, pn as SectionBackgroundColors, Lt as SectionIntro, En as SectionIntroStacked, Dn as SectionIntroStackedVariants, mn as SectionPaddingVariants, tt as Select, c as Stack, l as StackAlignItemVariants, u as StackDirectionVariants, d as StackFlexWrapVariants, f as StackJustifyContentVariants, p as StackSpacingVariants, hn as Statistic, gn as StatisticSizes, _n as StatisticSpacingValues, rn as SubNav, an as SubNavSubMenuVariants, Le as SubdomainNavBar, On as Tabs, lt as Testimonial, ut as TestimonialQuoteMarkColors, dt as TestimonialVariants, S as Text, P as TextCursorAnimation, C as TextFontVariants, et as TextInput, s as TextRevealAnimation, w as TextSizes, T as TextTags, E as TextVariants, D as TextWeights, $e as Textarea, ne as ThemeContext, re as ThemeProvider, kn as Tiles, Jt as Timeline, ze as Token, Be as TokenVariants, en as Tooltip, tn as TooltipContext, yt as UnorderedList, Kt as VideoPlayer, Z as _Button, ht as _ComparisonTable, e as _GLOBAL_STYLES, Ht as actionMenuOverlaySides, U as classMap, Q as defaultButtonSize, $ as defaultButtonVariant, Nt as defaultCardCTAVariant, Pt as defaultCardIconColor, Ft as defaultCardLabelVariant, $t as defaultEyebrowBannerIconColor, O as defaultFontVariant, Tn as defaultFrostedGlassVFXIntensity, W as defaultHeadingFont, G as defaultHeadingTag, we as defaultIconColor, Te as defaultIconSize, he as defaultLabelColor, ge as defaultLabelSize, wt as defaultPillarIconColor, Tt as defaultPillarIconSize, ft as defaultQuoteMarkColor, ve as defaultRiverAlign, ye as defaultRiverImageTextRatio, be as defaultRiverVariant, m as defaultStackDirection, h as defaultStackSpacing, pt as defaultTestimonialVariant, k as defaultTextSize, A as defaultTextTag, j as defaultTextVariant, Ve as defaultTokenVariant, Ee as iconColors, De as iconSizeMap, Oe as iconSizes, ke as namedIconSizes, Ae as numericIconSizes, F as testIds, Ut as useActionMenuContext, o as useAnimation, on as useSubNavContext, ie as useTheme, Gt as useVideo, Me as useWindowSize };

package/esm/packages/design-tokens/lib/design-tokens/css/tokens/base/size/size-6EfgMG7y.css

@@ -0,0 +1 @@
+:root{--base-size-128:8rem;--base-size-112:7rem;--base-size-96:6rem;--base-size-88:5.5rem;--base-size-80:5rem;--base-size-64:4rem;--base-size-60:3.75rem;--base-size-48:3rem;--base-size-44:2.75rem;--base-size-40:2.5rem;--base-size-36:2.25rem;--base-size-32:2rem;--base-size-28:1.75rem;--base-size-24:1.5rem;--base-size-20:1.25rem;--base-size-16:1rem;--base-size-12:.75rem;--base-size-8:.5rem;--base-size-6:.375rem;--base-size-4:.25rem;--base-size-2:.125rem}

package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/logosuite/{colors-with-modes-n4fDsxWz.css → colors-with-modes-B8ia26TA.css}

@@ -1 +1 @@
-:root,[data-color-mode=light]{--brand-LogoSuite-color-control-rest:var(--brand-color-canvas-muted);--brand-LogoSuite-color-control-hover:var(--base-color-scale-gray-2);--brand-LogoSuite-color-logo-muted:var(--brand-color-text-muted);--brand-LogoSuite-color-logo-emphasis:var(--brand-color-text-default);--brand-LogoSuite-color-logo-filter-muted:brightness(0) saturate(100%) invert(37%) sepia(7%) saturate(778%) hue-rotate(171deg) brightness(96%) contrast(91%);--brand-LogoSuite-color-logo-filter-emphasis:brightness(0) saturate(100%) invert(12%) sepia(20%) saturate(450%) hue-rotate(172deg) brightness(100%) contrast(91%)}[data-color-mode=dark]{--brand-LogoSuite-color-control-rest:var(--brand-color-canvas-muted);--brand-LogoSuite-color-control-hover:#5a5b7c;--brand-LogoSuite-color-logo-muted:var(--brand-color-text-muted);--brand-LogoSuite-color-logo-emphasis:var(--brand-color-text-default);--brand-LogoSuite-color-logo-filter-muted:brightness(0) saturate(100%) invert(61%) sepia(8%) saturate(430%) hue-rotate(171deg) brightness(94%) contrast(92%);--brand-LogoSuite-color-logo-filter-emphasis:brightness(0) saturate(100%) invert(91%) sepia(2%) saturate(2455%) hue-rotate(193deg) brightness(107%) contrast(98%)}
+:root,[data-color-mode=light]{--brand-LogoSuite-color-control-rest:var(--brand-color-canvas-muted);--brand-LogoSuite-color-control-hover:var(--base-color-scale-gray-1);--brand-LogoSuite-color-logo-muted:var(--brand-color-text-muted);--brand-LogoSuite-color-logo-emphasis:var(--brand-color-text-default);--brand-LogoSuite-color-logo-filter-muted:brightness(0) saturate(100%) invert(37%) sepia(7%) saturate(778%) hue-rotate(171deg) brightness(96%) contrast(91%);--brand-LogoSuite-color-logo-filter-emphasis:brightness(0) saturate(100%) invert(12%) sepia(20%) saturate(450%) hue-rotate(172deg) brightness(100%) contrast(91%)}[data-color-mode=dark]{--brand-LogoSuite-color-control-rest:var(--brand-color-canvas-muted);--brand-LogoSuite-color-control-hover:#5a5b7c;--brand-LogoSuite-color-logo-muted:var(--brand-color-text-muted);--brand-LogoSuite-color-logo-emphasis:var(--brand-color-text-default);--brand-LogoSuite-color-logo-filter-muted:brightness(0) saturate(100%) invert(61%) sepia(8%) saturate(430%) hue-rotate(171deg) brightness(94%) contrast(92%);--brand-LogoSuite-color-logo-filter-emphasis:brightness(0) saturate(100%) invert(91%) sepia(2%) saturate(2455%) hue-rotate(193deg) brightness(107%) contrast(98%)}

package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/colors-with-modes-BODdIvrY.css

@@ -0,0 +1 @@
+:root,[data-color-mode=light]{--brand-TextCursorAnimation-cursor-color:var(--base-color-scale-green-6)}[data-color-mode=dark]{--brand-TextCursorAnimation-cursor-color:var(--brand-color-accent-primary)}

package/esm/recipes/Flexsuite/Overview/FlexSuiteAIOverview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlexSuiteAIOverview.d.ts","sourceRoot":"","sources":["../../../../src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.tsx"],"names":[],"mappings":"AAyCA,OAAO,EAAoC,KAAK,0BAA0B,EAAC,MAAM,+BAA+B,CAAA;AAGhH,MAAM,MAAM,gCAAgC,GAAG;IAC7C,OAAO,EAAE,0BAA0B,CAAA;CACpC,CAAA;AAID,wBAAgB,mBAAmB,4CAElC;AAED,wBAAgB,2BAA2B,CAAC,EAAC,OAAO,EAAC,EAAE,gCAAgC,2CAwXtF"}
+{"version":3,"file":"FlexSuiteAIOverview.d.ts","sourceRoot":"","sources":["../../../../src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.tsx"],"names":[],"mappings":"AAyCA,OAAO,EAAoC,KAAK,0BAA0B,EAAC,MAAM,+BAA+B,CAAA;AAGhH,MAAM,MAAM,gCAAgC,GAAG;IAC7C,OAAO,EAAE,0BAA0B,CAAA;CACpC,CAAA;AAID,wBAAgB,mBAAmB,4CAElC;AAED,wBAAgB,2BAA2B,CAAC,EAAC,OAAO,EAAC,EAAE,gCAAgC,2CAgetF"}

package/esm/river/RiverAccordion/RiverAccordion.js

@@ -3,7 +3,7 @@ import { useId as t } from "../../hooks/useId.js";
 import { useProvidedRefOrCreate as n } from "../../hooks/useRef.js";
 import { Text as r } from "../../Text/Text.js";
 import { Heading as i } from "../../Heading/Heading.js";
-import { ChevronDownIcon as a, ChevronUpIcon as o } from "../../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { TriangleDownIcon as a, TriangleUpIcon as o } from "../../node_modules/@primer/octicons-react/dist/index.esm.js";
 import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/river/river-QteO10lt.css';/* empty css                                                                                          */
 import s from "./RiverAccordion.module.js";
 import c from "../../component-helpers/shared.module.js";

package/esm/river/RiverAccordion/RiverAccordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"RiverAccordion.js","names":[],"sources":["../../../src/river/RiverAccordion/RiverAccordion.tsx"],"sourcesContent":["import React, {createContext, forwardRef, useCallback, useContext, useMemo, useState, useRef, useEffect} from 'react'\nimport {clsx} from 'clsx'\nimport {ChevronDownIcon, ChevronUpIcon} from '@primer/octicons-react'\n\nimport {Heading, type HeadingProps, Link, Text} from '../..'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\nimport {useId} from '../../hooks/useId'\n\n/**\n * Design tokens\n */\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 './RiverAccordion.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\ntype RiverAccordionContextType = {\n  openIndex: number\n  setOpenIndex: (index: number) => void\n  variant: RiverAccordionVariant\n}\n\nconst RiverAccordionContext = createContext<RiverAccordionContextType | null>(null)\n\nconst useRiverAccordionContext = (): RiverAccordionContextType => {\n  const context = useContext(RiverAccordionContext)\n  if (context === null) {\n    throw new Error('useRiverAccordionContext must be used within a RiverAccordion component')\n  }\n  return context\n}\n\ntype RiverAccordionItemContextType = {\n  index: number\n  isOpen: boolean\n  id: string\n}\n\nconst RiverAccordionItemContext = createContext<RiverAccordionItemContextType | null>(null)\n\nconst useRiverAccordionItemContext = (): RiverAccordionItemContextType => {\n  const context = useContext(RiverAccordionItemContext)\n  if (context === null) {\n    throw new Error('useRiverAccordionItemContext must be used within a RiverAccordion component')\n  }\n  return context\n}\n\nexport const RiverAccordionVariants = ['default', 'gridline'] as const\nexport type RiverAccordionVariant = (typeof RiverAccordionVariants)[number]\n\nexport type RiverAccordionProps = React.PropsWithChildren<{\n  align?: 'start' | 'end'\n  variant?: RiverAccordionVariant\n}> &\n  React.HTMLAttributes<HTMLDivElement>\n\nconst RiverAccordionRoot = forwardRef<HTMLDivElement, RiverAccordionProps>(\n  ({align = 'start', variant = 'default', children, className, ...rest}, forwardedRef) => {\n    const containerRef = useProvidedRefOrCreate<HTMLDivElement>(forwardedRef as React.RefObject<HTMLDivElement>)\n    const [openIndex, setOpenIndex] = useState(0)\n\n    const accordionComponents = useMemo(() => {\n      return React.Children.toArray(children).reduce<{\n        items: React.ReactElement<RiverAccordionItemProps>[]\n        visuals: React.ReactElement<RiverAccordionVisualProps>[]\n      }>(\n        (acc, child) => {\n          if (!isRiverAccordionItem(child)) {\n            return acc\n          }\n\n          const visualChild = React.Children.toArray(child.props.children).find(isRiverAccordionVisual)\n\n          if (visualChild) {\n            acc.items.push(child)\n            acc.visuals.push(visualChild)\n          }\n\n          return acc\n        },\n        {items: [], visuals: []},\n      )\n    }, [children])\n\n    const items = accordionComponents.items.map((item, index) => React.cloneElement(item, {key: index, index}))\n    const visuals = accordionComponents.visuals.map((visual, index) =>\n      React.cloneElement(visual, {key: index, 'aria-hidden': true}),\n    )\n\n    const contextValue = useMemo(\n      () => ({\n        openIndex,\n        setOpenIndex,\n        variant,\n      }),\n      [openIndex, setOpenIndex, variant],\n    )\n\n    return (\n      <RiverAccordionContext.Provider value={contextValue}>\n        <div\n          ref={containerRef}\n          className={clsx(\n            styles.RiverAccordion,\n            styles[`RiverAccordion__align-${align}`],\n            styles[`RiverAccordion--variant-${variant}`],\n            variant === 'gridline' && gridlineStyles.gridline,\n            className,\n          )}\n          {...rest}\n        >\n          <div className={styles.RiverAccordion__accordionContainer}>{items}</div>\n          <div className={styles.RiverAccordion__visualsContainer}>\n            <div className={styles.RiverAccordion__visualsWrapper}>{visuals}</div>\n          </div>\n        </div>\n      </RiverAccordionContext.Provider>\n    )\n  },\n)\n\nexport type RiverAccordionItemProps = React.HTMLAttributes<HTMLDivElement> & {\n  children: React.ReactElement<RiverAccordionHeadingProps | RiverAccordionContentProps>[]\n  index?: number\n}\n\nconst RiverAccordionItem = ({className, index, children, ...props}: RiverAccordionItemProps) => {\n  const {openIndex} = useRiverAccordionContext()\n  const panelId = useId()\n  const isOpen = index === openIndex\n  const panelRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    if (panelRef.current) {\n      // Workaround to avoid React 18 / 19 type mismatches with the `inert` attribute.\n      // This approach won't immediately apply the attribute in pure SSR contexts, only post-hydration\n      // TODO: Move back to JSX when React 19 is fully adopted in Dotcom.\n      panelRef.current.toggleAttribute('inert', !isOpen)\n    }\n  }, [isOpen])\n\n  const itemContextValue = useMemo(\n    () => ({\n      id: panelId,\n      // Index optional for consumers, but always provided by parent\n      index: index as number,\n      isOpen,\n    }),\n    [panelId, index, isOpen],\n  )\n\n  const {heading, content, visual} = useMemo(() => {\n    return React.Children.toArray(children).reduce<{\n      heading: React.ReactElement<RiverAccordionHeadingProps> | null\n      content: React.ReactElement<RiverAccordionContentProps> | null\n      visual: React.ReactElement<RiverAccordionVisualProps> | null\n    }>(\n      (acc, child) => {\n        if (isRiverAccordionHeading(child)) {\n          acc.heading = child\n        }\n\n        if (isRiverAccordionContent(child)) {\n          acc.content = child\n        }\n\n        if (isRiverAccordionVisual(child)) {\n          acc.visual = child\n        }\n\n        return acc\n      },\n      {heading: null, content: null, visual: null},\n    )\n  }, [children])\n\n  if (!heading || !content || !visual) {\n    return null\n  }\n\n  return (\n    <RiverAccordionItemContext.Provider value={itemContextValue}>\n      <div\n        className={clsx(styles.RiverAccordion__item, isOpen && styles['RiverAccordion__item--open'], className)}\n        {...props}\n      >\n        {heading}\n        <div ref={panelRef} className={styles.RiverAccordion__panel} id={panelId} aria-hidden={!isOpen}>\n          {content}\n          {visual}\n        </div>\n      </div>\n    </RiverAccordionItemContext.Provider>\n  )\n}\n\nexport type RiverAccordionHeadingProps = HeadingProps\n\nconst RiverAccordionHeading = ({as = 'h3', children, className, size = '6', ...props}: RiverAccordionHeadingProps) => {\n  const {setOpenIndex} = useRiverAccordionContext()\n  const {id, index, isOpen} = useRiverAccordionItemContext()\n\n  const onClick = useCallback(() => {\n    if (!isOpen) {\n      setOpenIndex(index)\n    }\n  }, [index, isOpen, setOpenIndex])\n\n  return (\n    <Heading size={size} as={as} className={clsx(styles.RiverAccordion__heading, className)} {...props}>\n      <button\n        type=\"button\"\n        className={styles.RiverAccordion__trigger}\n        onClick={onClick}\n        aria-disabled={isOpen}\n        aria-controls={id}\n        aria-expanded={isOpen}\n      >\n        {children}\n        <span aria-hidden=\"true\" className={styles.RiverAccordion__icon}>\n          {isOpen ? <ChevronUpIcon size={24} /> : <ChevronDownIcon size={24} />}\n        </span>\n      </button>\n    </Heading>\n  )\n}\n\nexport type RiverAccordionContentProps = React.HTMLAttributes<HTMLDivElement>\n\nconst RiverAccordionContent = ({className, children, ...props}: RiverAccordionContentProps) => {\n  const childrenWithStyledText = useMemo(() => {\n    const isLink = createComponentTypeGuard(Link)\n    const isText = createComponentTypeGuard(Text)\n\n    return React.Children.toArray(children).map(child => {\n      if (isText(child)) {\n        return React.cloneElement(child, {\n          as: child.props.as ?? 'p',\n          variant: child.props.variant ?? 'muted',\n          size: child.props.size ?? '300',\n        })\n      }\n\n      if (isLink(child)) {\n        return React.cloneElement(child, {\n          variant: child.props.variant ?? 'accent',\n        })\n      }\n\n      return child\n    })\n  }, [children])\n\n  return (\n    <div className={clsx(styles.RiverAccordion__content, className)} {...props}>\n      {childrenWithStyledText}\n    </div>\n  )\n}\n\nexport type RiverAccordionVisualProps = React.HTMLAttributes<HTMLDivElement>\n\nconst RiverAccordionVisual = ({className, ...props}: RiverAccordionVisualProps) => {\n  const {variant} = useRiverAccordionContext()\n\n  return (\n    <div\n      className={clsx(\n        styles.RiverAccordion__visual,\n        variant === 'gridline' && styles['RiverAccordion__visual--has-background'],\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst createComponentTypeGuard =\n  <T,>(componentType: React.ComponentType<T>) =>\n  (element: unknown): element is React.ReactElement<T> =>\n    React.isValidElement(element) && element.type === componentType\n\nconst isRiverAccordionItem = createComponentTypeGuard(RiverAccordionItem)\nconst isRiverAccordionContent = createComponentTypeGuard(RiverAccordionContent)\nconst isRiverAccordionHeading = createComponentTypeGuard(RiverAccordionHeading)\nconst isRiverAccordionVisual = createComponentTypeGuard(RiverAccordionVisual)\n\n/**\n * Use the RiverAccordion to create collapsible content panels with associated visuals.\n * @see https://primer.style/brand/components/RiverAccordion\n */\nexport const RiverAccordion = Object.assign(RiverAccordionRoot, {\n  Content: RiverAccordionContent,\n  Heading: RiverAccordionHeading,\n  Item: RiverAccordionItem,\n  Visual: RiverAccordionVisual,\n})\n"],"mappings":"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"}
+{"version":3,"file":"RiverAccordion.js","names":[],"sources":["../../../src/river/RiverAccordion/RiverAccordion.tsx"],"sourcesContent":["import React, {createContext, forwardRef, useCallback, useContext, useMemo, useState, useRef, useEffect} from 'react'\nimport {clsx} from 'clsx'\nimport {TriangleDownIcon, TriangleUpIcon} from '@primer/octicons-react'\n\nimport {Heading, type HeadingProps, Link, Text} from '../..'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\nimport {useId} from '../../hooks/useId'\n\n/**\n * Design tokens\n */\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 './RiverAccordion.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\ntype RiverAccordionContextType = {\n  openIndex: number\n  setOpenIndex: (index: number) => void\n  variant: RiverAccordionVariant\n}\n\nconst RiverAccordionContext = createContext<RiverAccordionContextType | null>(null)\n\nconst useRiverAccordionContext = (): RiverAccordionContextType => {\n  const context = useContext(RiverAccordionContext)\n  if (context === null) {\n    throw new Error('useRiverAccordionContext must be used within a RiverAccordion component')\n  }\n  return context\n}\n\ntype RiverAccordionItemContextType = {\n  index: number\n  isOpen: boolean\n  id: string\n}\n\nconst RiverAccordionItemContext = createContext<RiverAccordionItemContextType | null>(null)\n\nconst useRiverAccordionItemContext = (): RiverAccordionItemContextType => {\n  const context = useContext(RiverAccordionItemContext)\n  if (context === null) {\n    throw new Error('useRiverAccordionItemContext must be used within a RiverAccordion component')\n  }\n  return context\n}\n\nexport const RiverAccordionVariants = ['default', 'gridline'] as const\nexport type RiverAccordionVariant = (typeof RiverAccordionVariants)[number]\n\nexport type RiverAccordionProps = React.PropsWithChildren<{\n  align?: 'start' | 'end'\n  variant?: RiverAccordionVariant\n}> &\n  React.HTMLAttributes<HTMLDivElement>\n\nconst RiverAccordionRoot = forwardRef<HTMLDivElement, RiverAccordionProps>(\n  ({align = 'start', variant = 'default', children, className, ...rest}, forwardedRef) => {\n    const containerRef = useProvidedRefOrCreate<HTMLDivElement>(forwardedRef as React.RefObject<HTMLDivElement>)\n    const [openIndex, setOpenIndex] = useState(0)\n\n    const accordionComponents = useMemo(() => {\n      return React.Children.toArray(children).reduce<{\n        items: React.ReactElement<RiverAccordionItemProps>[]\n        visuals: React.ReactElement<RiverAccordionVisualProps>[]\n      }>(\n        (acc, child) => {\n          if (!isRiverAccordionItem(child)) {\n            return acc\n          }\n\n          const visualChild = React.Children.toArray(child.props.children).find(isRiverAccordionVisual)\n\n          if (visualChild) {\n            acc.items.push(child)\n            acc.visuals.push(visualChild)\n          }\n\n          return acc\n        },\n        {items: [], visuals: []},\n      )\n    }, [children])\n\n    const items = accordionComponents.items.map((item, index) => React.cloneElement(item, {key: index, index}))\n    const visuals = accordionComponents.visuals.map((visual, index) =>\n      React.cloneElement(visual, {key: index, 'aria-hidden': true}),\n    )\n\n    const contextValue = useMemo(\n      () => ({\n        openIndex,\n        setOpenIndex,\n        variant,\n      }),\n      [openIndex, setOpenIndex, variant],\n    )\n\n    return (\n      <RiverAccordionContext.Provider value={contextValue}>\n        <div\n          ref={containerRef}\n          className={clsx(\n            styles.RiverAccordion,\n            styles[`RiverAccordion__align-${align}`],\n            styles[`RiverAccordion--variant-${variant}`],\n            variant === 'gridline' && gridlineStyles.gridline,\n            className,\n          )}\n          {...rest}\n        >\n          <div className={styles.RiverAccordion__accordionContainer}>{items}</div>\n          <div className={styles.RiverAccordion__visualsContainer}>\n            <div className={styles.RiverAccordion__visualsWrapper}>{visuals}</div>\n          </div>\n        </div>\n      </RiverAccordionContext.Provider>\n    )\n  },\n)\n\nexport type RiverAccordionItemProps = React.HTMLAttributes<HTMLDivElement> & {\n  children: React.ReactElement<RiverAccordionHeadingProps | RiverAccordionContentProps>[]\n  index?: number\n}\n\nconst RiverAccordionItem = ({className, index, children, ...props}: RiverAccordionItemProps) => {\n  const {openIndex} = useRiverAccordionContext()\n  const panelId = useId()\n  const isOpen = index === openIndex\n  const panelRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    if (panelRef.current) {\n      // Workaround to avoid React 18 / 19 type mismatches with the `inert` attribute.\n      // This approach won't immediately apply the attribute in pure SSR contexts, only post-hydration\n      // TODO: Move back to JSX when React 19 is fully adopted in Dotcom.\n      panelRef.current.toggleAttribute('inert', !isOpen)\n    }\n  }, [isOpen])\n\n  const itemContextValue = useMemo(\n    () => ({\n      id: panelId,\n      // Index optional for consumers, but always provided by parent\n      index: index as number,\n      isOpen,\n    }),\n    [panelId, index, isOpen],\n  )\n\n  const {heading, content, visual} = useMemo(() => {\n    return React.Children.toArray(children).reduce<{\n      heading: React.ReactElement<RiverAccordionHeadingProps> | null\n      content: React.ReactElement<RiverAccordionContentProps> | null\n      visual: React.ReactElement<RiverAccordionVisualProps> | null\n    }>(\n      (acc, child) => {\n        if (isRiverAccordionHeading(child)) {\n          acc.heading = child\n        }\n\n        if (isRiverAccordionContent(child)) {\n          acc.content = child\n        }\n\n        if (isRiverAccordionVisual(child)) {\n          acc.visual = child\n        }\n\n        return acc\n      },\n      {heading: null, content: null, visual: null},\n    )\n  }, [children])\n\n  if (!heading || !content || !visual) {\n    return null\n  }\n\n  return (\n    <RiverAccordionItemContext.Provider value={itemContextValue}>\n      <div\n        className={clsx(styles.RiverAccordion__item, isOpen && styles['RiverAccordion__item--open'], className)}\n        {...props}\n      >\n        {heading}\n        <div ref={panelRef} className={styles.RiverAccordion__panel} id={panelId} aria-hidden={!isOpen}>\n          {content}\n          {visual}\n        </div>\n      </div>\n    </RiverAccordionItemContext.Provider>\n  )\n}\n\nexport type RiverAccordionHeadingProps = HeadingProps\n\nconst RiverAccordionHeading = ({as = 'h3', children, className, size = '6', ...props}: RiverAccordionHeadingProps) => {\n  const {setOpenIndex} = useRiverAccordionContext()\n  const {id, index, isOpen} = useRiverAccordionItemContext()\n\n  const onClick = useCallback(() => {\n    if (!isOpen) {\n      setOpenIndex(index)\n    }\n  }, [index, isOpen, setOpenIndex])\n\n  return (\n    <Heading size={size} as={as} className={clsx(styles.RiverAccordion__heading, className)} {...props}>\n      <button\n        type=\"button\"\n        className={styles.RiverAccordion__trigger}\n        onClick={onClick}\n        aria-disabled={isOpen}\n        aria-controls={id}\n        aria-expanded={isOpen}\n      >\n        {children}\n        <span aria-hidden=\"true\" className={styles.RiverAccordion__icon}>\n          {isOpen ? <TriangleUpIcon size={24} /> : <TriangleDownIcon size={24} />}\n        </span>\n      </button>\n    </Heading>\n  )\n}\n\nexport type RiverAccordionContentProps = React.HTMLAttributes<HTMLDivElement>\n\nconst RiverAccordionContent = ({className, children, ...props}: RiverAccordionContentProps) => {\n  const childrenWithStyledText = useMemo(() => {\n    const isLink = createComponentTypeGuard(Link)\n    const isText = createComponentTypeGuard(Text)\n\n    return React.Children.toArray(children).map(child => {\n      if (isText(child)) {\n        return React.cloneElement(child, {\n          as: child.props.as ?? 'p',\n          variant: child.props.variant ?? 'muted',\n          size: child.props.size ?? '300',\n        })\n      }\n\n      if (isLink(child)) {\n        return React.cloneElement(child, {\n          variant: child.props.variant ?? 'accent',\n        })\n      }\n\n      return child\n    })\n  }, [children])\n\n  return (\n    <div className={clsx(styles.RiverAccordion__content, className)} {...props}>\n      {childrenWithStyledText}\n    </div>\n  )\n}\n\nexport type RiverAccordionVisualProps = React.HTMLAttributes<HTMLDivElement>\n\nconst RiverAccordionVisual = ({className, ...props}: RiverAccordionVisualProps) => {\n  const {variant} = useRiverAccordionContext()\n\n  return (\n    <div\n      className={clsx(\n        styles.RiverAccordion__visual,\n        variant === 'gridline' && styles['RiverAccordion__visual--has-background'],\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst createComponentTypeGuard =\n  <T,>(componentType: React.ComponentType<T>) =>\n  (element: unknown): element is React.ReactElement<T> =>\n    React.isValidElement(element) && element.type === componentType\n\nconst isRiverAccordionItem = createComponentTypeGuard(RiverAccordionItem)\nconst isRiverAccordionContent = createComponentTypeGuard(RiverAccordionContent)\nconst isRiverAccordionHeading = createComponentTypeGuard(RiverAccordionHeading)\nconst isRiverAccordionVisual = createComponentTypeGuard(RiverAccordionVisual)\n\n/**\n * Use the RiverAccordion to create collapsible content panels with associated visuals.\n * @see https://primer.style/brand/components/RiverAccordion\n */\nexport const RiverAccordion = Object.assign(RiverAccordionRoot, {\n  Content: RiverAccordionContent,\n  Heading: RiverAccordionHeading,\n  Item: RiverAccordionItem,\n  Visual: RiverAccordionVisual,\n})\n"],"mappings":"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"}

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

@@ -11,6 +11,19 @@ export type RiverBreakoutTabsProps = React.PropsWithChildren<{
     defaultSelectedIndex?: number;
     selectedIndex?: number;
     onChange?: (selectedIndex: number) => void;
+    /**
+     * Decorative background rendered behind the visual and persisted across tab
+     * changes. Must not contain interactive and remain purely decorative.
+     */
+    backgroundVisual?: React.ReactNode;
+    /**
+     * Alignment of media within the visual container when `backgroundVisual` is provided
+     */
+    imagePosition?: 'center' | 'block-end';
+    /**
+     * When `true`, the `backgroundVisual` bleeds out to the gridline edges instead of being inset within them
+     */
+    backgroundVisualFullBleed?: boolean;
 }> & Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>;
 export type RiverBreakoutTabsItemProps = React.PropsWithChildren<{
     className?: string;
@@ -29,6 +42,19 @@ export declare const RiverBreakoutTabs: React.ForwardRefExoticComponent<{
     defaultSelectedIndex?: number;
     selectedIndex?: number;
     onChange?: (selectedIndex: number) => void;
+    /**
+     * Decorative background rendered behind the visual and persisted across tab
+     * changes. Must not contain interactive and remain purely decorative.
+     */
+    backgroundVisual?: React.ReactNode;
+    /**
+     * Alignment of media within the visual container when `backgroundVisual` is provided
+     */
+    imagePosition?: "center" | "block-end";
+    /**
+     * When `true`, the `backgroundVisual` bleeds out to the gridline edges instead of being inset within them
+     */
+    backgroundVisualFullBleed?: boolean;
 } & {
     children?: React.ReactNode | undefined;
 } & Omit<React.HTMLAttributes<HTMLElement>, "onChange"> & React.RefAttributes<HTMLElement>> & {

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

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

package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.js

@@ -68,51 +68,55 @@ var w = (e) => (t) => p.isValidElement(t) && t.type === e, T = ({ children: e })
 }) : {
 	action: null,
 	body: []
-}, V = (e, t) => t === 0 ? -1 : Math.min(Math.max(Number.isFinite(e) ? Math.trunc(e) : 0, 0), t - 1), H = h(({ children: n, className: r, defaultSelectedIndex: a = 0, onChange: s, selectedIndex: c, ...h }, x) => {
-	let w = t(), { isLarge: T } = u(), E = v(() => p.Children.toArray(n), [n]), D = E.find(M) ?? null, O = E.filter(j).map(z).filter((e) => e.heading && e.content && e.visual), k = V(a, O.length), A = typeof c == "number" && Number.isFinite(c) ? V(c, O.length) : null, N = A ?? k, P = D?.props.id ?? `${w}-heading`, F = Math.min(Math.max(O.length, 1), 3), I = N >= 0 ? String(N) : void 0, L = T === !0, R = y(!1), { activeTab: H, activateTab: U, getTabListProps: W, getTabPanelProps: G, getTabProps: K } = l({
-		defaultTab: I,
+}, V = (e, t) => t === 0 ? -1 : Math.min(Math.max(Number.isFinite(e) ? Math.trunc(e) : 0, 0), t - 1), H = h(({ children: n, className: r, defaultSelectedIndex: a = 0, onChange: s, selectedIndex: c, backgroundVisual: h, imagePosition: x = "center", backgroundVisualFullBleed: w = !1, ...T }, E) => {
+	let D = t(), { isLarge: O } = u(), k = v(() => p.Children.toArray(n), [n]), A = k.find(M) ?? null, N = k.filter(j).map(z).filter((e) => e.heading && e.content && e.visual), P = V(a, N.length), F = typeof c == "number" && Number.isFinite(c) ? V(c, N.length) : null, I = F ?? P, L = A?.props.id ?? `${D}-heading`, R = Math.min(Math.max(N.length, 1), 3), H = I >= 0 ? String(I) : void 0, U = O === !0, W = y(!1), { activeTab: G, activateTab: K, getTabListProps: q, getTabPanelProps: J, getTabProps: Y } = l({
+		defaultTab: H,
 		onTabActivate: g((e) => {
-			if (R.current) {
-				R.current = !1;
+			if (W.current) {
+				W.current = !1;
 				return;
 			}
 			if (!s) return;
 			let t = Number(e);
 			Number.isNaN(t) || s(t);
 		}, [s])
-	}), [q, J] = b(N);
+	}), [X, Z] = b(I);
 	_(() => {
-		if (H === null) return;
-		let e = Number(H);
-		Number.isNaN(e) || J(e);
-	}, [H]), _(() => {
-		if (A === null || A < 0) return;
-		let e = String(A);
-		H !== e && (R.current = !0, U(e)), J(A);
+		if (G === null) return;
+		let e = Number(G);
+		Number.isNaN(e) || Z(e);
+	}, [G]), _(() => {
+		if (F === null || F < 0) return;
+		let e = String(F);
+		G !== e && (W.current = !0, K(e)), Z(F);
 	}, [
-		U,
-		H,
-		A
-	]), !D && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("RiverBreakoutTabs: A11yHeading child is required. This element will not be visible, only read by screenreaders.");
-	let Y = (e) => (t) => {
-		t && (J(e), H !== String(e) && U(String(e)));
-	}, X = (e) => {
+		K,
+		G,
+		F
+	]), !A && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("RiverBreakoutTabs: A11yHeading child is required. This element will not be visible, only read by screenreaders.");
+	let ee = (e) => (t) => {
+		t && (Z(e), G !== String(e) && K(String(e)));
+	}, te = (e) => {
 		let t = Number(e.currentTarget.getAttribute("data-index"));
-		!e.currentTarget.open && q === t && (e.currentTarget.open = !0);
-	}, Z = W(D ? { labelledBy: P } : { label: "River breakout tabs" }), Q = v(() => O.map((e) => B(e.content)), [O]);
+		!e.currentTarget.open && X === t && (e.currentTarget.open = !0);
+	}, ne = q(A ? { labelledBy: L } : { label: "River breakout tabs" }), Q = v(() => N.map((e) => B(e.content)), [N]), $ = h == null ? null : /* @__PURE__ */ S("div", {
+		className: d.RiverBreakoutTabs__backgroundVisual,
+		"aria-hidden": "true",
+		children: h
+	});
 	return /* @__PURE__ */ C("section", {
-		ref: x,
-		className: e(o.RiverBreakout, o["RiverBreakout--variant-gridline"], i.gridline, d.RiverBreakoutTabs, r),
-		...h,
-		children: [D && m(D, { id: P }), L ? /* @__PURE__ */ C("div", {
+		ref: E,
+		className: e(o.RiverBreakout, o["RiverBreakout--variant-gridline"], i.gridline, d.RiverBreakoutTabs, h != null && d["RiverBreakoutTabs--has-background-visual"], h != null && x === "block-end" && d["RiverBreakoutTabs--image-position-block-end"], h != null && w && d["RiverBreakoutTabs--background-visual-full-bleed"], r),
+		...T,
+		children: [A && m(A, { id: L }), U ? /* @__PURE__ */ C("div", {
 			className: d.RiverBreakoutTabs__wideTabList,
 			children: [
 				/* @__PURE__ */ S("div", {
-					...Z,
+					...ne,
 					className: d.RiverBreakoutTabs__tablist,
-					style: { "--river-breakout-tabs-columns": String(F) },
-					children: O.map((t, n) => {
-						let r = H === String(n), i = K(String(n)), { body: a } = Q[n];
+					style: { "--river-breakout-tabs-columns": String(R) },
+					children: N.map((t, n) => {
+						let r = G === String(n), i = Y(String(n)), { body: a } = Q[n];
 						return /* @__PURE__ */ S("div", {
 							className: e(d.RiverBreakoutTabs__item, r && d["RiverBreakoutTabs__item--selected"], t.className),
 							children: /* @__PURE__ */ C("button", {
@@ -131,19 +135,19 @@ var w = (e) => (t) => p.isValidElement(t) && t.type === e, T = ({ children: e })
 						}, n);
 					})
 				}),
-				/* @__PURE__ */ S("div", {
+				/* @__PURE__ */ C("div", {
 					className: d.RiverBreakoutTabs__sharedVisuals,
-					children: O.map((t, n) => /* @__PURE__ */ S("div", {
-						...G(String(n)),
+					children: [$, N.map((t, n) => /* @__PURE__ */ S("div", {
+						...J(String(n)),
 						tabIndex: -1,
 						className: d.RiverBreakoutTabs__sharedVisualPanel,
 						children: m(t.visual, { className: e(t.visual?.props.className, d.RiverBreakoutTabs__sharedVisual) })
-					}, n))
+					}, n))]
 				}),
 				Q.some((e) => e.action) && /* @__PURE__ */ S("div", {
 					className: d.RiverBreakoutTabs__wideTabListActions,
-					style: { "--river-breakout-tabs-columns": String(F) },
-					children: O.map((t, n) => {
+					style: { "--river-breakout-tabs-columns": String(R) },
+					children: N.map((t, n) => {
 						let { action: r } = Q[n];
 						return /* @__PURE__ */ S("div", {
 							className: d.RiverBreakoutTabs__wideTabListActionItem,
@@ -154,15 +158,15 @@ var w = (e) => (t) => p.isValidElement(t) && t.type === e, T = ({ children: e })
 			]
 		}) : /* @__PURE__ */ C("div", {
 			className: d.RiverBreakoutTabs__accordion,
-			children: [q >= 0 && O[q]?.visual && /* @__PURE__ */ S("div", {
+			children: [X >= 0 && N[X]?.visual && /* @__PURE__ */ C("div", {
 				className: d.RiverBreakoutTabs__accordionSharedVisuals,
-				children: m(O[q].visual, { className: e(O[q].visual.props.className, d.RiverBreakoutTabs__accordionSharedVisual) })
-			}), O.map((t, n) => /* @__PURE__ */ C(f, {
+				children: [$, m(N[X].visual, { className: e(N[X].visual.props.className, d.RiverBreakoutTabs__accordionSharedVisual) })]
+			}), N.map((t, n) => /* @__PURE__ */ C(f, {
 				"data-index": n,
-				className: e(d.RiverBreakoutTabs__accordionItem, n === q && d["RiverBreakoutTabs__item--selected"], t.className),
-				onToggle: X,
-				open: n === q,
-				handleOpen: Y(n),
+				className: e(d.RiverBreakoutTabs__accordionItem, n === X && d["RiverBreakoutTabs__item--selected"], t.className),
+				onToggle: te,
+				open: n === X,
+				handleOpen: ee(n),
 				children: [/* @__PURE__ */ S(f.Heading, {
 					className: d.RiverBreakoutTabs__accordionHeading,
 					children: /* @__PURE__ */ C("span", {

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

@@ -1 +1 @@
-{"version":3,"file":"RiverBreakoutTabs.js","names":[],"sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx"],"sourcesContent":["import React, {cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Accordion, Heading, Link, Text, type HeadingProps} from '../..'\nimport {Icon, type IconProps} from '../../Icon'\nimport {Visual as RiverVisual, type RiverVisualProps} from '../River/River'\nimport {useId} from '../../hooks/useId'\nimport {useTabs} from '../../hooks/useTabs'\nimport {useWindowSize} from '../../hooks/useWindowSize'\nimport riverStyles from '../river-shared.module.css'\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  Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>\n\nexport type RiverBreakoutTabsItemProps = React.PropsWithChildren<{\n  className?: string\n}>\n\nexport type RiverBreakoutTabsA11yHeadingProps = React.PropsWithChildren<{\n  as?: 'h2' | 'h3'\n  id?: string\n}>\n\nexport type RiverBreakoutTabsHeadingProps = HeadingProps\n\nexport type RiverBreakoutTabsContentProps = React.HTMLAttributes<HTMLDivElement>\n\nexport type RiverBreakoutTabsIconProps = IconProps\n\ntype RiverBreakoutTabsItemChild =\n  | React.ReactElement<RiverBreakoutTabsIconProps>\n  | React.ReactElement<RiverBreakoutTabsHeadingProps>\n  | React.ReactElement<RiverBreakoutTabsContentProps>\n  | React.ReactElement<RiverVisualProps>\n\ntype ExtractedItemParts = {\n  icon: React.ReactElement<RiverBreakoutTabsIconProps> | null\n  heading: React.ReactElement<RiverBreakoutTabsHeadingProps> | null\n  content: React.ReactElement<RiverBreakoutTabsContentProps> | null\n  visual: React.ReactElement<RiverVisualProps> | null\n  className?: string\n}\n\ntype ExtractedContentParts = {\n  action: React.ReactElement<React.ComponentProps<typeof Link>> | null\n  body: React.ReactNode[]\n}\n\nconst RiverBreakoutTabsItem = ({children}: RiverBreakoutTabsItemProps) => <>{children}</>\n\nconst RiverBreakoutTabsA11yHeading = ({as = 'h3', children, id}: RiverBreakoutTabsA11yHeadingProps) => (\n  <Heading as={as} id={id} className=\"visually-hidden\">\n    {children}\n  </Heading>\n)\n\nconst RiverBreakoutTabsIcon = ({color = 'green', ...props}: RiverBreakoutTabsIconProps) => (\n  <Icon color={color} {...props} />\n)\n\nconst RiverBreakoutTabsHeading = ({\n  as = 'h3',\n  children,\n  className,\n  size = 'subhead-large',\n  weight = 'normal',\n  ...props\n}: RiverBreakoutTabsHeadingProps) => (\n  <Heading\n    as={as}\n    className={clsx(styles.RiverBreakoutTabs__heading, className)}\n    size={size}\n    weight={weight}\n    {...props}\n  >\n    {children}\n  </Heading>\n)\n\nconst RiverBreakoutTabsContent = ({children, className, ...props}: RiverBreakoutTabsContentProps) => {\n  const Children = useMemo(\n    () =>\n      React.Children.toArray(children).map(child => {\n        if (isTextChild(child)) {\n          return cloneElement(child, {\n            as: child.props.as ?? 'p',\n            variant: child.props.variant ?? 'muted',\n          })\n        }\n\n        if (isLinkChild(child)) {\n          return cloneElement(child, {\n            className: clsx(child.props.className, styles.RiverBreakoutTabs__link),\n            size: child.props.size ?? 'medium',\n            variant: child.props.variant ?? 'accent',\n          })\n        }\n\n        return child\n      }),\n    [children],\n  )\n\n  return (\n    <div className={clsx(styles.RiverBreakoutTabs__content, className)} {...props}>\n      {Children}\n    </div>\n  )\n}\n\nconst RiverBreakoutTabsVisual = forwardRef<HTMLDivElement, RiverVisualProps>(({className, ...props}, ref) => (\n  <RiverVisual ref={ref} className={className} {...props} />\n))\n\nconst isItem = createComponentTypeGuard(RiverBreakoutTabsItem)\nconst isA11yHeading = createComponentTypeGuard(RiverBreakoutTabsA11yHeading)\nconst isIcon = createComponentTypeGuard(RiverBreakoutTabsIcon)\nconst isHeading = createComponentTypeGuard(RiverBreakoutTabsHeading)\nconst isContent = createComponentTypeGuard(RiverBreakoutTabsContent)\nconst isVisual = createComponentTypeGuard(RiverBreakoutTabsVisual)\n\nconst isTextChild = (child: React.ReactNode): child is React.ReactElement<React.ComponentProps<typeof Text>> =>\n  React.isValidElement<React.ComponentProps<typeof Text>>(child) && child.type === Text\n\nconst isLinkChild = (child: React.ReactNode): child is React.ReactElement<React.ComponentProps<typeof Link>> =>\n  React.isValidElement<React.ComponentProps<typeof Link>>(child) && child.type === Link\n\nconst extractItemParts = (item: React.ReactElement<RiverBreakoutTabsItemProps>): ExtractedItemParts => {\n  const Children = React.Children.toArray(item.props.children) as RiverBreakoutTabsItemChild[]\n\n  return Children.reduce<ExtractedItemParts>(\n    (acc, child) => {\n      if (isIcon(child)) {\n        acc.icon = child\n      }\n\n      if (isHeading(child)) {\n        acc.heading = child\n      }\n\n      if (isContent(child)) {\n        acc.content = child\n      }\n\n      if (isVisual(child)) {\n        acc.visual = child\n      }\n\n      return acc\n    },\n    {icon: null, heading: null, content: null, visual: null, className: item.props.className},\n  )\n}\n\nconst extractWideTabListContentParts = (\n  content: React.ReactElement<RiverBreakoutTabsContentProps> | null,\n): ExtractedContentParts => {\n  if (!content) {\n    return {action: null, body: []}\n  }\n\n  const Children = React.Children.toArray(content.props.children).map(child => {\n    if (isTextChild(child)) {\n      return cloneElement(child, {\n        as: child.props.as ?? 'p',\n        variant: child.props.variant ?? 'muted',\n      })\n    }\n\n    if (isLinkChild(child)) {\n      return cloneElement(child, {\n        className: clsx(child.props.className, styles.RiverBreakoutTabs__link),\n        size: child.props.size ?? 'medium',\n        variant: child.props.variant ?? 'accent',\n      })\n    }\n\n    return child\n  })\n\n  return Children.reduce<ExtractedContentParts>(\n    (acc, child) => {\n      if (isLinkChild(child)) {\n        if (!acc.action) {\n          acc.action = child\n        }\n\n        return acc\n      }\n\n      acc.body.push(child)\n      return acc\n    },\n    {action: null, body: []},\n  )\n}\n\nconst clampIndex = (index: number, length: number) => {\n  if (length === 0) return -1\n\n  const normalizedIndex = Number.isFinite(index) ? Math.trunc(index) : 0\n  return Math.min(Math.max(normalizedIndex, 0), length - 1)\n}\n\nconst RiverBreakoutTabsRoot = forwardRef<HTMLElement, RiverBreakoutTabsProps>(\n  ({children, className, defaultSelectedIndex = 0, onChange, selectedIndex, ...props}, ref) => {\n    const instanceId = useId()\n    const {isLarge} = useWindowSize()\n\n    const Children = useMemo(() => React.Children.toArray(children), [children])\n\n    const A11yHeadingChild = Children.find(isA11yHeading) ?? null\n    const Items = Children.filter(isItem)\n      .map(extractItemParts)\n      .filter(item => item.heading && item.content && item.visual)\n\n    const defaultActiveIndex = clampIndex(defaultSelectedIndex, Items.length)\n    const controlledActiveIndex =\n      typeof selectedIndex === 'number' && Number.isFinite(selectedIndex)\n        ? clampIndex(selectedIndex, Items.length)\n        : null\n    const initialActiveIndex = controlledActiveIndex ?? defaultActiveIndex\n    const headingId = A11yHeadingChild?.props.id ?? `${instanceId}-heading`\n    const wideTabListColumns = Math.min(Math.max(Items.length, 1), 3)\n    const initialActiveTab = initialActiveIndex >= 0 ? String(initialActiveIndex) : undefined\n    const isWideTabList = isLarge === true\n    const suppressOnTabActivateRef = useRef(false)\n\n    const handleTabActivate = useCallback(\n      (id: string) => {\n        if (suppressOnTabActivateRef.current) {\n          suppressOnTabActivateRef.current = false\n          return\n        }\n\n        if (!onChange) return\n\n        const nextIndex = Number(id)\n        if (!Number.isNaN(nextIndex)) {\n          onChange(nextIndex)\n        }\n      },\n      [onChange],\n    )\n\n    const {activeTab, activateTab, getTabListProps, getTabPanelProps, getTabProps} = useTabs({\n      defaultTab: initialActiveTab,\n      onTabActivate: handleTabActivate,\n    })\n\n    const [activeAccordionIndex, setActiveAccordionIndex] = useState(initialActiveIndex)\n\n    useEffect(() => {\n      if (activeTab === null) return\n\n      const nextIndex = Number(activeTab)\n      if (!Number.isNaN(nextIndex)) {\n        setActiveAccordionIndex(nextIndex)\n      }\n    }, [activeTab])\n\n    useEffect(() => {\n      if (controlledActiveIndex === null || controlledActiveIndex < 0) return\n\n      const controlledTab = String(controlledActiveIndex)\n      if (activeTab !== controlledTab) {\n        suppressOnTabActivateRef.current = true\n        activateTab(controlledTab)\n      }\n\n      setActiveAccordionIndex(controlledActiveIndex)\n    }, [activateTab, activeTab, controlledActiveIndex])\n\n    if (!A11yHeadingChild && (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        'RiverBreakoutTabs: A11yHeading child is required. This element will not be visible, only read by screenreaders.',\n      )\n    }\n\n    const handleAccordionOpen = (index: number) => (isOpen: boolean) => {\n      if (isOpen) {\n        setActiveAccordionIndex(index)\n        if (activeTab !== String(index)) {\n          activateTab(String(index))\n        }\n      }\n    }\n\n    const handleAccordionToggle: React.ReactEventHandler<HTMLDetailsElement> = event => {\n      const toggledIndex = Number(event.currentTarget.getAttribute('data-index'))\n\n      if (!event.currentTarget.open && activeAccordionIndex === toggledIndex) {\n        event.currentTarget.open = true\n      }\n    }\n\n    const tabListProps = A11yHeadingChild\n      ? getTabListProps({labelledBy: headingId})\n      : getTabListProps({label: 'River breakout tabs'})\n    const WideTabListContentParts = useMemo(\n      () => Items.map(item => extractWideTabListContentParts(item.content)),\n      [Items],\n    )\n\n    return (\n      <section\n        ref={ref}\n        className={clsx(\n          riverStyles.RiverBreakout,\n          riverStyles['RiverBreakout--variant-gridline'],\n          gridlineStyles.gridline,\n          styles.RiverBreakoutTabs,\n          className,\n        )}\n        {...props}\n      >\n        {A11yHeadingChild && cloneElement(A11yHeadingChild, {id: headingId})}\n\n        {isWideTabList ? (\n          <div className={styles.RiverBreakoutTabs__wideTabList}>\n            <div\n              {...tabListProps}\n              className={styles.RiverBreakoutTabs__tablist}\n              style={{'--river-breakout-tabs-columns': String(wideTabListColumns)} as React.CSSProperties}\n            >\n              {Items.map((item, index) => {\n                const isSelected = activeTab === String(index)\n                const tabProps = getTabProps<HTMLButtonElement>(String(index))\n                const {body} = WideTabListContentParts[index]\n\n                return (\n                  <div\n                    key={index}\n                    className={clsx(\n                      styles.RiverBreakoutTabs__item,\n                      isSelected && styles['RiverBreakoutTabs__item--selected'],\n                      item.className,\n                    )}\n                  >\n                    <button type=\"button\" {...tabProps} className={styles.RiverBreakoutTabs__tab}>\n                      {item.icon &&\n                        cloneElement(item.icon, {\n                          className: item.icon.props.className,\n                        })}\n\n                      {item.heading &&\n                        cloneElement(item.heading, {\n                          className: clsx(item.heading.props.className, styles.RiverBreakoutTabs__tabHeading),\n                        })}\n\n                      {body.length > 0 && <div className={styles.RiverBreakoutTabs__wideTabListContent}>{body}</div>}\n                    </button>\n                  </div>\n                )\n              })}\n            </div>\n\n            <div className={styles.RiverBreakoutTabs__sharedVisuals}>\n              {Items.map((item, index) => {\n                const panelProps = getTabPanelProps(String(index))\n\n                return (\n                  <div\n                    key={index}\n                    {...panelProps}\n                    tabIndex={-1}\n                    className={styles.RiverBreakoutTabs__sharedVisualPanel}\n                  >\n                    {cloneElement(item.visual as React.ReactElement<RiverVisualProps>, {\n                      className: clsx(item.visual?.props.className, styles.RiverBreakoutTabs__sharedVisual),\n                    })}\n                  </div>\n                )\n              })}\n            </div>\n\n            {WideTabListContentParts.some(content => content.action) && (\n              <div\n                className={styles.RiverBreakoutTabs__wideTabListActions}\n                style={{'--river-breakout-tabs-columns': String(wideTabListColumns)} as React.CSSProperties}\n              >\n                {Items.map((_, index) => {\n                  const {action} = WideTabListContentParts[index]\n\n                  return (\n                    <div key={index} className={styles.RiverBreakoutTabs__wideTabListActionItem}>\n                      {action &&\n                        cloneElement(action, {\n                          className: clsx(action.props.className, styles.RiverBreakoutTabs__wideTabListAction),\n                        })}\n                    </div>\n                  )\n                })}\n              </div>\n            )}\n          </div>\n        ) : (\n          <div className={styles.RiverBreakoutTabs__accordion}>\n            {activeAccordionIndex >= 0 && Items[activeAccordionIndex]?.visual && (\n              <div className={styles.RiverBreakoutTabs__accordionSharedVisuals}>\n                {cloneElement(Items[activeAccordionIndex].visual as React.ReactElement<RiverVisualProps>, {\n                  className: clsx(\n                    Items[activeAccordionIndex].visual.props.className,\n                    styles.RiverBreakoutTabs__accordionSharedVisual,\n                  ),\n                })}\n              </div>\n            )}\n\n            {Items.map((item, index) => {\n              return (\n                <Accordion\n                  key={index}\n                  data-index={index}\n                  className={clsx(\n                    styles.RiverBreakoutTabs__accordionItem,\n                    index === activeAccordionIndex && styles['RiverBreakoutTabs__item--selected'],\n                    item.className,\n                  )}\n                  onToggle={handleAccordionToggle}\n                  open={index === activeAccordionIndex}\n                  handleOpen={handleAccordionOpen(index)}\n                >\n                  <Accordion.Heading className={styles.RiverBreakoutTabs__accordionHeading}>\n                    <span className={styles.RiverBreakoutTabs__accordionHeadingInner}>\n                      {item.icon &&\n                        cloneElement(item.icon, {\n                          className: clsx(item.icon.props.className, styles.RiverBreakoutTabs__accordionIcon),\n                        })}\n                      <span className={styles.RiverBreakoutTabs__accordionLabel}>{item.heading?.props.children}</span>\n                    </span>\n                  </Accordion.Heading>\n\n                  <Accordion.Content className={styles.RiverBreakoutTabs__accordionPanel}>\n                    {cloneElement(item.content as React.ReactElement<RiverBreakoutTabsContentProps>, {\n                      className: clsx(item.content?.props.className, styles.RiverBreakoutTabs__accordionContent),\n                    })}\n                  </Accordion.Content>\n                </Accordion>\n              )\n            })}\n          </div>\n        )}\n      </section>\n    )\n  },\n)\n\n/**\n * Use RiverBreakoutTabs to showcase multiple feature stories within a single immersive surface.\n */\nexport const RiverBreakoutTabs = Object.assign(RiverBreakoutTabsRoot, {\n  A11yHeading: RiverBreakoutTabsA11yHeading,\n  Content: RiverBreakoutTabsContent,\n  Heading: RiverBreakoutTabsHeading,\n  Icon: RiverBreakoutTabsIcon,\n  Item: RiverBreakoutTabsItem,\n  Visual: RiverBreakoutTabsVisual,\n})\n"],"mappings":"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"}
+{"version":3,"file":"RiverBreakoutTabs.js","names":[],"sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx"],"sourcesContent":["import React, {cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Accordion, Heading, Link, Text, type HeadingProps} from '../..'\nimport {Icon, type IconProps} from '../../Icon'\nimport {Visual as RiverVisual, type RiverVisualProps} from '../River/River'\nimport {useId} from '../../hooks/useId'\nimport {useTabs} from '../../hooks/useTabs'\nimport {useWindowSize} from '../../hooks/useWindowSize'\nimport riverStyles from '../river-shared.module.css'\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\ntype RiverBreakoutTabsItemChild =\n  | React.ReactElement<RiverBreakoutTabsIconProps>\n  | React.ReactElement<RiverBreakoutTabsHeadingProps>\n  | React.ReactElement<RiverBreakoutTabsContentProps>\n  | React.ReactElement<RiverVisualProps>\n\ntype ExtractedItemParts = {\n  icon: React.ReactElement<RiverBreakoutTabsIconProps> | null\n  heading: React.ReactElement<RiverBreakoutTabsHeadingProps> | null\n  content: React.ReactElement<RiverBreakoutTabsContentProps> | null\n  visual: React.ReactElement<RiverVisualProps> | null\n  className?: string\n}\n\ntype ExtractedContentParts = {\n  action: React.ReactElement<React.ComponentProps<typeof Link>> | null\n  body: React.ReactNode[]\n}\n\nconst RiverBreakoutTabsItem = ({children}: RiverBreakoutTabsItemProps) => <>{children}</>\n\nconst RiverBreakoutTabsA11yHeading = ({as = 'h3', children, id}: RiverBreakoutTabsA11yHeadingProps) => (\n  <Heading as={as} id={id} className=\"visually-hidden\">\n    {children}\n  </Heading>\n)\n\nconst RiverBreakoutTabsIcon = ({color = 'green', ...props}: RiverBreakoutTabsIconProps) => (\n  <Icon color={color} {...props} />\n)\n\nconst RiverBreakoutTabsHeading = ({\n  as = 'h3',\n  children,\n  className,\n  size = 'subhead-large',\n  weight = 'normal',\n  ...props\n}: RiverBreakoutTabsHeadingProps) => (\n  <Heading\n    as={as}\n    className={clsx(styles.RiverBreakoutTabs__heading, className)}\n    size={size}\n    weight={weight}\n    {...props}\n  >\n    {children}\n  </Heading>\n)\n\nconst RiverBreakoutTabsContent = ({children, className, ...props}: RiverBreakoutTabsContentProps) => {\n  const Children = useMemo(\n    () =>\n      React.Children.toArray(children).map(child => {\n        if (isTextChild(child)) {\n          return cloneElement(child, {\n            as: child.props.as ?? 'p',\n            variant: child.props.variant ?? 'muted',\n          })\n        }\n\n        if (isLinkChild(child)) {\n          return cloneElement(child, {\n            className: clsx(child.props.className, styles.RiverBreakoutTabs__link),\n            size: child.props.size ?? 'medium',\n            variant: child.props.variant ?? 'accent',\n          })\n        }\n\n        return child\n      }),\n    [children],\n  )\n\n  return (\n    <div className={clsx(styles.RiverBreakoutTabs__content, className)} {...props}>\n      {Children}\n    </div>\n  )\n}\n\nconst RiverBreakoutTabsVisual = forwardRef<HTMLDivElement, RiverVisualProps>(({className, ...props}, ref) => (\n  <RiverVisual ref={ref} className={className} {...props} />\n))\n\nconst isItem = createComponentTypeGuard(RiverBreakoutTabsItem)\nconst isA11yHeading = createComponentTypeGuard(RiverBreakoutTabsA11yHeading)\nconst isIcon = createComponentTypeGuard(RiverBreakoutTabsIcon)\nconst isHeading = createComponentTypeGuard(RiverBreakoutTabsHeading)\nconst isContent = createComponentTypeGuard(RiverBreakoutTabsContent)\nconst isVisual = createComponentTypeGuard(RiverBreakoutTabsVisual)\n\nconst isTextChild = (child: React.ReactNode): child is React.ReactElement<React.ComponentProps<typeof Text>> =>\n  React.isValidElement<React.ComponentProps<typeof Text>>(child) && child.type === Text\n\nconst isLinkChild = (child: React.ReactNode): child is React.ReactElement<React.ComponentProps<typeof Link>> =>\n  React.isValidElement<React.ComponentProps<typeof Link>>(child) && child.type === Link\n\nconst extractItemParts = (item: React.ReactElement<RiverBreakoutTabsItemProps>): ExtractedItemParts => {\n  const Children = React.Children.toArray(item.props.children) as RiverBreakoutTabsItemChild[]\n\n  return Children.reduce<ExtractedItemParts>(\n    (acc, child) => {\n      if (isIcon(child)) {\n        acc.icon = child\n      }\n\n      if (isHeading(child)) {\n        acc.heading = child\n      }\n\n      if (isContent(child)) {\n        acc.content = child\n      }\n\n      if (isVisual(child)) {\n        acc.visual = child\n      }\n\n      return acc\n    },\n    {icon: null, heading: null, content: null, visual: null, className: item.props.className},\n  )\n}\n\nconst extractWideTabListContentParts = (\n  content: React.ReactElement<RiverBreakoutTabsContentProps> | null,\n): ExtractedContentParts => {\n  if (!content) {\n    return {action: null, body: []}\n  }\n\n  const Children = React.Children.toArray(content.props.children).map(child => {\n    if (isTextChild(child)) {\n      return cloneElement(child, {\n        as: child.props.as ?? 'p',\n        variant: child.props.variant ?? 'muted',\n      })\n    }\n\n    if (isLinkChild(child)) {\n      return cloneElement(child, {\n        className: clsx(child.props.className, styles.RiverBreakoutTabs__link),\n        size: child.props.size ?? 'medium',\n        variant: child.props.variant ?? 'accent',\n      })\n    }\n\n    return child\n  })\n\n  return Children.reduce<ExtractedContentParts>(\n    (acc, child) => {\n      if (isLinkChild(child)) {\n        if (!acc.action) {\n          acc.action = child\n        }\n\n        return acc\n      }\n\n      acc.body.push(child)\n      return acc\n    },\n    {action: null, body: []},\n  )\n}\n\nconst clampIndex = (index: number, length: number) => {\n  if (length === 0) return -1\n\n  const normalizedIndex = Number.isFinite(index) ? Math.trunc(index) : 0\n  return Math.min(Math.max(normalizedIndex, 0), length - 1)\n}\n\nconst RiverBreakoutTabsRoot = forwardRef<HTMLElement, RiverBreakoutTabsProps>(\n  (\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<RiverVisualProps>, {\n                      className: clsx(item.visual?.props.className, styles.RiverBreakoutTabs__sharedVisual),\n                    })}\n                  </div>\n                )\n              })}\n            </div>\n\n            {WideTabListContentParts.some(content => content.action) && (\n              <div\n                className={styles.RiverBreakoutTabs__wideTabListActions}\n                style={{'--river-breakout-tabs-columns': String(wideTabListColumns)} as React.CSSProperties}\n              >\n                {Items.map((_, index) => {\n                  const {action} = WideTabListContentParts[index]\n\n                  return (\n                    <div key={index} className={styles.RiverBreakoutTabs__wideTabListActionItem}>\n                      {action &&\n                        cloneElement(action, {\n                          className: clsx(action.props.className, styles.RiverBreakoutTabs__wideTabListAction),\n                        })}\n                    </div>\n                  )\n                })}\n              </div>\n            )}\n          </div>\n        ) : (\n          <div className={styles.RiverBreakoutTabs__accordion}>\n            {activeAccordionIndex >= 0 && Items[activeAccordionIndex]?.visual && (\n              <div className={styles.RiverBreakoutTabs__accordionSharedVisuals}>\n                {BackgroundVisualLayer}\n                {cloneElement(Items[activeAccordionIndex].visual as React.ReactElement<RiverVisualProps>, {\n                  className: clsx(\n                    Items[activeAccordionIndex].visual.props.className,\n                    styles.RiverBreakoutTabs__accordionSharedVisual,\n                  ),\n                })}\n              </div>\n            )}\n\n            {Items.map((item, index) => {\n              return (\n                <Accordion\n                  key={index}\n                  data-index={index}\n                  className={clsx(\n                    styles.RiverBreakoutTabs__accordionItem,\n                    index === activeAccordionIndex && styles['RiverBreakoutTabs__item--selected'],\n                    item.className,\n                  )}\n                  onToggle={handleAccordionToggle}\n                  open={index === activeAccordionIndex}\n                  handleOpen={handleAccordionOpen(index)}\n                >\n                  <Accordion.Heading className={styles.RiverBreakoutTabs__accordionHeading}>\n                    <span className={styles.RiverBreakoutTabs__accordionHeadingInner}>\n                      {item.icon &&\n                        cloneElement(item.icon, {\n                          className: clsx(item.icon.props.className, styles.RiverBreakoutTabs__accordionIcon),\n                        })}\n                      <span className={styles.RiverBreakoutTabs__accordionLabel}>{item.heading?.props.children}</span>\n                    </span>\n                  </Accordion.Heading>\n\n                  <Accordion.Content className={styles.RiverBreakoutTabs__accordionPanel}>\n                    {cloneElement(item.content as React.ReactElement<RiverBreakoutTabsContentProps>, {\n                      className: clsx(item.content?.props.className, styles.RiverBreakoutTabs__accordionContent),\n                    })}\n                  </Accordion.Content>\n                </Accordion>\n              )\n            })}\n          </div>\n        )}\n      </section>\n    )\n  },\n)\n\n/**\n * Use RiverBreakoutTabs to showcase multiple feature stories within a single immersive surface.\n */\nexport const RiverBreakoutTabs = Object.assign(RiverBreakoutTabsRoot, {\n  A11yHeading: RiverBreakoutTabsA11yHeading,\n  Content: RiverBreakoutTabsContent,\n  Heading: RiverBreakoutTabsHeading,\n  Icon: RiverBreakoutTabsIcon,\n  Item: RiverBreakoutTabsItem,\n  Visual: RiverBreakoutTabsVisual,\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;AAqBA,IAAM,KACC,OACJ,MACC,EAAM,eAAkB,EAAQ,IAAI,EAAQ,SAAS,GAwDnD,KAAyB,EAAC,kBAA0C,kBAAA,GAAA,EAAG,aAAY,CAAA,EAEnF,KAAgC,EAAC,QAAK,MAAM,aAAU,YAC1D,kBAAC,GAAD;CAAa;CAAQ;CAAI,WAAU;CAChC;CACO,CAAA,EAGN,KAAyB,EAAC,WAAQ,SAAS,GAAG,QAClD,kBAAC,GAAD;CAAa;CAAO,GAAI;CAAS,CAAA,EAG7B,KAA4B,EAChC,QAAK,MACL,aACA,cACA,UAAO,iBACP,YAAS,UACT,GAAG,QAEH,kBAAC,GAAD;CACM;CACJ,WAAW,EAAK,EAAO,4BAA4B,EAAU;CACvD;CACE;CACR,GAAI;CAEH;CACO,CAAA,EAGN,KAA4B,EAAC,aAAU,cAAW,GAAG,QAA0C;CACnG,IAAM,IAAW,QAEb,EAAM,SAAS,QAAQ,EAAS,CAAC,KAAI,MAC/B,EAAY,EAAM,GACb,EAAa,GAAO;EACzB,IAAI,EAAM,MAAM,MAAM;EACtB,SAAS,EAAM,MAAM,WAAW;EACjC,CAAC,GAGA,EAAY,EAAM,GACb,EAAa,GAAO;EACzB,WAAW,EAAK,EAAM,MAAM,WAAW,EAAO,wBAAwB;EACtE,MAAM,EAAM,MAAM,QAAQ;EAC1B,SAAS,EAAM,MAAM,WAAW;EACjC,CAAC,GAGG,EACP,EACJ,CAAC,EAAS,CACX;AAED,QACE,kBAAC,OAAD;EAAK,WAAW,EAAK,EAAO,4BAA4B,EAAU;EAAE,GAAI;YACrE;EACG,CAAA;GAIJ,IAA0B,GAA8C,EAAC,cAAW,GAAG,KAAQ,MACnG,kBAAC,GAAD;CAAkB;CAAgB;CAAW,GAAI;CAAS,CAAA,CAC1D,EAEI,IAAS,EAAyB,EAAsB,EACxD,IAAgB,EAAyB,EAA6B,EACtE,IAAS,EAAyB,EAAsB,EACxD,IAAY,EAAyB,EAAyB,EAC9D,IAAY,EAAyB,EAAyB,EAC9D,IAAW,EAAyB,EAAwB,EAE5D,KAAe,MACnB,EAAM,eAAkD,EAAM,IAAI,EAAM,SAAS,GAE7E,KAAe,MACnB,EAAM,eAAkD,EAAM,IAAI,EAAM,SAAS,GAE7E,KAAoB,MACP,EAAM,SAAS,QAAQ,EAAK,MAAM,SAE5C,CAAS,QACb,GAAK,OACA,EAAO,EAAM,KACf,EAAI,OAAO,IAGT,EAAU,EAAM,KAClB,EAAI,UAAU,IAGZ,EAAU,EAAM,KAClB,EAAI,UAAU,IAGZ,EAAS,EAAM,KACjB,EAAI,SAAS,IAGR,IAET;CAAC,MAAM;CAAM,SAAS;CAAM,SAAS;CAAM,QAAQ;CAAM,WAAW,EAAK,MAAM;CAAU,CAC1F,EAGG,KACJ,MAEK,IAIY,EAAM,SAAS,QAAQ,EAAQ,MAAM,SAAS,CAAC,KAAI,MAC9D,EAAY,EAAM,GACb,EAAa,GAAO;CACzB,IAAI,EAAM,MAAM,MAAM;CACtB,SAAS,EAAM,MAAM,WAAW;CACjC,CAAC,GAGA,EAAY,EAAM,GACb,EAAa,GAAO;CACzB,WAAW,EAAK,EAAM,MAAM,WAAW,EAAO,wBAAwB;CACtE,MAAM,EAAM,MAAM,QAAQ;CAC1B,SAAS,EAAM,MAAM,WAAW;CACjC,CAAC,GAGG,EAGF,CAAS,QACb,GAAK,MACA,EAAY,EAAM,IACpB,AACE,EAAI,WAAS,GAGR,MAGT,EAAI,KAAK,KAAK,EAAM,EACb,IAET;CAAC,QAAQ;CAAM,MAAM,EAAE;CAAC,CACzB,GApCQ;CAAC,QAAQ;CAAM,MAAM,EAAE;CAAC,EAuC7B,KAAc,GAAe,MAC7B,MAAW,IAAU,KAGlB,KAAK,IAAI,KAAK,IADG,OAAO,SAAS,EAAM,GAAG,KAAK,MAAM,EAAM,GAAG,GAC3B,EAAE,EAAE,IAAS,EAAE,EAGrD,IAAwB,GAE1B,EACE,aACA,cACA,0BAAuB,GACvB,aACA,kBACA,qBACA,mBAAgB,UAChB,+BAA4B,IAC5B,GAAG,KAEL,MACG;CACH,IAAM,IAAa,GAAO,EACpB,EAAC,eAAW,GAAe,EAE3B,IAAW,QAAc,EAAM,SAAS,QAAQ,EAAS,EAAE,CAAC,EAAS,CAAC,EAEtE,IAAmB,EAAS,KAAK,EAAc,IAAI,MACnD,IAAQ,EAAS,OAAO,EAAO,CAClC,IAAI,EAAiB,CACrB,QAAO,MAAQ,EAAK,WAAW,EAAK,WAAW,EAAK,OAAO,EAExD,IAAqB,EAAW,GAAsB,EAAM,OAAO,EACnE,IACJ,OAAO,KAAkB,YAAY,OAAO,SAAS,EAAc,GAC/D,EAAW,GAAe,EAAM,OAAO,GACvC,MACA,IAAqB,KAAyB,GAC9C,IAAY,GAAkB,MAAM,MAAM,GAAG,EAAW,WACxD,IAAqB,KAAK,IAAI,KAAK,IAAI,EAAM,QAAQ,EAAE,EAAE,EAAE,EAC3D,IAAmB,KAAsB,IAAI,OAAO,EAAmB,GAAG,KAAA,GAC1E,IAAgB,MAAY,IAC5B,IAA2B,EAAO,GAAM,EAmBxC,EAAC,cAAW,gBAAa,oBAAiB,qBAAkB,mBAAe,EAAQ;EACvF,YAAY;EACZ,eAnBwB,GACvB,MAAe;AACd,OAAI,EAAyB,SAAS;AACpC,MAAyB,UAAU;AACnC;;AAGF,OAAI,CAAC,EAAU;GAEf,IAAM,IAAY,OAAO,EAAG;AAC5B,GAAK,OAAO,MAAM,EAAU,IAC1B,EAAS,EAAU;KAGvB,CAAC,EAAS,CAKK;EAChB,CAAC,EAEI,CAAC,GAAsB,KAA2B,EAAS,EAAmB;AAuBpF,CArBA,QAAgB;AACd,MAAI,MAAc,KAAM;EAExB,IAAM,IAAY,OAAO,EAAU;AACnC,EAAK,OAAO,MAAM,EAAU,IAC1B,EAAwB,EAAU;IAEnC,CAAC,EAAU,CAAC,EAEf,QAAgB;AACd,MAAI,MAA0B,QAAQ,IAAwB,EAAG;EAEjE,IAAM,IAAgB,OAAO,EAAsB;AAMnD,EALI,MAAc,MAChB,EAAyB,UAAU,IACnC,EAAY,EAAc,GAG5B,EAAwB,EAAsB;IAC7C;EAAC;EAAa;EAAW;EAAsB,CAAC,EAE/C,CAAC,MAAA,QAAA,IAAA,aAA8C,iBAAA,QAAA,IAAA,aAA0C,WAE3F,QAAQ,KACN,kHACD;CAGH,IAAM,MAAuB,OAAmB,MAAoB;AAClE,EAAI,MACF,EAAwB,EAAM,EAC1B,MAAc,OAAO,EAAM,IAC7B,EAAY,OAAO,EAAM,CAAC;IAK1B,MAAqE,MAAS;EAClF,IAAM,IAAe,OAAO,EAAM,cAAc,aAAa,aAAa,CAAC;AAE3E,EAAI,CAAC,EAAM,cAAc,QAAQ,MAAyB,MACxD,EAAM,cAAc,OAAO;IAIzB,KACF,EADiB,IACD,EAAC,YAAY,GAAU,GACvB,EAAC,OAAO,uBAAsB,CAAC,EAC7C,IAA0B,QACxB,EAAM,KAAI,MAAQ,EAA+B,EAAK,QAAQ,CAAC,EACrE,CAAC,EAAM,CACR,EAEK,IACJ,KAAoB,OAIhB,OAHF,kBAAC,OAAD;EAAK,WAAW,EAAO;EAAqC,eAAY;YACrE;EACG,CAAA;AAGV,QACE,kBAAC,WAAD;EACO;EACL,WAAW,EACT,EAAY,eACZ,EAAY,oCACZ,EAAe,UACf,EAAO,mBACP,KAAoB,QAAQ,EAAO,6CACnC,KAAoB,QAClB,MAAkB,eAClB,EAAO,gDACT,KAAoB,QAClB,KACA,EAAO,oDACT,EACD;EACD,GAAI;YAhBN,CAkBG,KAAoB,EAAa,GAAkB,EAAC,IAAI,GAAU,CAAC,EAEnE,IACC,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB;IACE,kBAAC,OAAD;KACE,GAAI;KACJ,WAAW,EAAO;KAClB,OAAO,EAAC,iCAAiC,OAAO,EAAmB,EAAC;eAEnE,EAAM,KAAK,GAAM,MAAU;MAC1B,IAAM,IAAa,MAAc,OAAO,EAAM,EACxC,IAAW,EAA+B,OAAO,EAAM,CAAC,EACxD,EAAC,YAAQ,EAAwB;AAEvC,aACE,kBAAC,OAAD;OAEE,WAAW,EACT,EAAO,yBACP,KAAc,EAAO,sCACrB,EAAK,UACN;iBAED,kBAAC,UAAD;QAAQ,MAAK;QAAS,GAAI;QAAU,WAAW,EAAO;kBAAtD;SACG,EAAK,QACJ,EAAa,EAAK,MAAM,EACtB,WAAW,EAAK,KAAK,MAAM,WAC5B,CAAC;SAEH,EAAK,WACJ,EAAa,EAAK,SAAS,EACzB,WAAW,EAAK,EAAK,QAAQ,MAAM,WAAW,EAAO,8BAA8B,EACpF,CAAC;SAEH,EAAK,SAAS,KAAK,kBAAC,OAAD;UAAK,WAAW,EAAO;oBAAwC;UAAW,CAAA;SACvF;;OACL,EApBC,EAoBD;OAER;KACE,CAAA;IAEN,kBAAC,OAAD;KAAK,WAAW,EAAO;eAAvB,CACG,GACA,EAAM,KAAK,GAAM,MAId,kBAAC,OAAD;MAEE,GALe,EAAiB,OAAO,EAAM,CAKzC;MACJ,UAAU;MACV,WAAW,EAAO;gBAEjB,EAAa,EAAK,QAAgD,EACjE,WAAW,EAAK,EAAK,QAAQ,MAAM,WAAW,EAAO,gCAAgC,EACtF,CAAC;MACE,EARC,EAQD,CAER,CACE;;IAEL,EAAwB,MAAK,MAAW,EAAQ,OAAO,IACtD,kBAAC,OAAD;KACE,WAAW,EAAO;KAClB,OAAO,EAAC,iCAAiC,OAAO,EAAmB,EAAC;eAEnE,EAAM,KAAK,GAAG,MAAU;MACvB,IAAM,EAAC,cAAU,EAAwB;AAEzC,aACE,kBAAC,OAAD;OAAiB,WAAW,EAAO;iBAChC,KACC,EAAa,GAAQ,EACnB,WAAW,EAAK,EAAO,MAAM,WAAW,EAAO,qCAAqC,EACrF,CAAC;OACA,EALI,EAKJ;OAER;KACE,CAAA;IAEJ;OAEN,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB,CACG,KAAwB,KAAK,EAAM,IAAuB,UACzD,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAvB,CACG,GACA,EAAa,EAAM,GAAsB,QAAgD,EACxF,WAAW,EACT,EAAM,GAAsB,OAAO,MAAM,WACzC,EAAO,yCACR,EACF,CAAC,CACE;OAGP,EAAM,KAAK,GAAM,MAEd,kBAAC,GAAD;IAEE,cAAY;IACZ,WAAW,EACT,EAAO,kCACP,MAAU,KAAwB,EAAO,sCACzC,EAAK,UACN;IACD,UAAU;IACV,MAAM,MAAU;IAChB,YAAY,GAAoB,EAAM;cAVxC,CAYE,kBAAC,EAAU,SAAX;KAAmB,WAAW,EAAO;eACnC,kBAAC,QAAD;MAAM,WAAW,EAAO;gBAAxB,CACG,EAAK,QACJ,EAAa,EAAK,MAAM,EACtB,WAAW,EAAK,EAAK,KAAK,MAAM,WAAW,EAAO,iCAAiC,EACpF,CAAC,EACJ,kBAAC,QAAD;OAAM,WAAW,EAAO;iBAAoC,EAAK,SAAS,MAAM;OAAgB,CAAA,CAC3F;;KACW,CAAA,EAEpB,kBAAC,EAAU,SAAX;KAAmB,WAAW,EAAO;eAClC,EAAa,EAAK,SAA8D,EAC/E,WAAW,EAAK,EAAK,SAAS,MAAM,WAAW,EAAO,oCAAoC,EAC3F,CAAC;KACgB,CAAA,CACV;MA1BL,EA0BK,CAEd,CACE;KAEA;;EAGf,EAKY,IAAoB,OAAO,OAAO,GAAuB;CACpE,aAAa;CACb,SAAS;CACT,SAAS;CACT,MAAM;CACN,MAAM;CACN,QAAQ;CACT,CAAC"}

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

@@ -0,0 +1 @@
+.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs___V0qyz{--river-breakout-tabs-columns:1}@media screen and (width<=63.24rem){.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs___V0qyz{width:100%;max-width:38.625rem;margin-inline:auto}}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordion___fawN5{flex-direction:column;display:flex}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabList___mzEmX{flex-direction:column;padding-block-end:var(--base-size-80);display:flex}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisuals____0vGo{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___V0qyz:has([class*=River__visual--has-background]){padding-block-start:var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock)}.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--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{background-color:var(--brand-color-accent-primary);transform:scaleY(2)}@media screen and (width>=63.25rem) and (hover:hover) and (pointer:fine){.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__item___ZOgN5:hover:before{background-color:var(--brand-color-accent-primary);transform:scaleY(2)}}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__heading___3N6_9{color:var(--brand-color-text-muted);margin:0}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__item--selected___T8vyR .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__heading___3N6_9{color:var(--brand-color-text-default)}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__icon___0ToMw{justify-content:center;align-items:center;display:inline-flex}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__tab___Gukw0{width:100%;color:inherit;font:inherit;text-align:left;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-16)}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__content___NwDBO{align-items:flex-start;gap:var(--base-size-12);flex-direction:column;display:flex}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__link___NBLWE{-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordion___fawN5{padding-block-end:var(--base-size-40)}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionContent___jxVob{align-items:flex-start;gap:var(--base-size-12);flex-direction:column;display:flex}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionContent___jxVob .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__link___NBLWE,.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionContent___jxVob .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__link___NBLWE>span{color:var(--brand-Link-color-accent);font-weight:var(--base-text-weight-medium)}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionContent___jxVob .Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__link___NBLWE{-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionItem___59An1{border-top:none}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionItem___59An1:after{display:none}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionItem___59An1:before{content:"";height:var(--brand-borderWidth-thin);transform-origin:50% 0;background-color:var(--brand-color-border-muted);transition:transform var(--brand-animation-duration-fast) ease, background-color var(--brand-animation-duration-fast) ease;position:absolute;inset-block-start:0;inset-inline:0;transform:scaleY(1)}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionItem___59An1.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__item--selected___T8vyR:before{background-color:var(--brand-color-accent-primary);transform:scaleY(2)}@media (hover:hover) and (pointer:fine){.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionItem___59An1:hover:before{background-color:var(--brand-color-accent-primary);transform:scaleY(2)}}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionHeading___u6tN5{color:var(--brand-color-text-default)}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionHeadingInner___nuDDN{align-items:flex-start;gap:var(--base-size-12);flex-direction:column;display:inline-flex}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionIcon___GRZr8{flex-shrink:0}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionLabel___UsRuR{align-items:center;display:inline-flex}.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionPanel___yTX_x{gap:var(--base-size-24);flex-direction:column;display:flex}@media screen and (width>=618px){.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs___V0qyz{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}@media screen and (width>=63.25rem){.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs___V0qyz{border-inline:none}}@media screen and (width>=1300px){.Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs___V0qyz{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}

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

@@ -1,12 +1,16 @@
-import './RiverBreakoutTabs.module-CyFjQIyU.css';var e = {
+import './RiverBreakoutTabs.module-ByM_DVom.css';var e = {
 	RiverBreakoutTabs: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs___V0qyz",
 	RiverBreakoutTabs__accordion: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordion___fawN5",
 	RiverBreakoutTabs__wideTabList: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__wideTabList___mzEmX",
 	RiverBreakoutTabs__sharedVisuals: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisuals____0vGo",
 	RiverBreakoutTabs__accordionSharedVisuals: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionSharedVisuals___DbPMZ",
 	RiverBreakoutTabs__sharedVisualPanel: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisualPanel___9C_mn",
-	RiverBreakoutTabs__sharedVisual: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__sharedVisual___ST6p9",
+	RiverBreakoutTabs__backgroundVisual: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__backgroundVisual___rrq1M",
 	RiverBreakoutTabs__accordionSharedVisual: "Primer_Brand__RiverBreakoutTabs-module__RiverBreakoutTabs__accordionSharedVisual___BgAxG",
+	"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",

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

@@ -1 +1 @@
-{"version":3,"file":"RiverBreakoutTabs.module.js","names":[],"sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.module.css"],"sourcesContent":[".RiverBreakoutTabs {\n  --river-breakout-tabs-columns: 1;\n}\n\n@media screen and (max-width: 63.24rem) {\n  .RiverBreakoutTabs {\n    width: 100%;\n    max-width: 38.625rem;\n    margin-inline: auto;\n  }\n}\n\n.RiverBreakoutTabs__accordion {\n  display: flex;\n  flex-direction: column;\n}\n\n.RiverBreakoutTabs__wideTabList {\n  display: flex;\n  flex-direction: column;\n  padding-block-end: var(--base-size-80);\n}\n\n.RiverBreakoutTabs__sharedVisuals {\n  order: 1;\n  margin-block-end: var(--base-size-36);\n  width: 100%;\n}\n\n.RiverBreakoutTabs__accordionSharedVisuals {\n  margin-block-end: var(--base-size-16);\n  width: 100%;\n}\n\n.RiverBreakoutTabs__sharedVisualPanel {\n  min-width: 0;\n}\n\n.RiverBreakoutTabs__sharedVisual :is(img, picture, video),\n.RiverBreakoutTabs__accordionSharedVisual :is(img, picture, video) {\n  display: block;\n  max-width: 100%;\n}\n\n.RiverBreakoutTabs :global([class*='River__visual--rounded']) {\n  border-radius: var(--brand-borderRadius-small);\n}\n\n.RiverBreakoutTabs__sharedVisualPanel[hidden] {\n  display: none;\n}\n\n.RiverBreakoutTabs__tablist {\n  order: 2;\n  display: grid;\n  grid-template-columns: repeat(var(--river-breakout-tabs-columns), minmax(0, 1fr));\n  gap: var(--base-size-40);\n}\n\n.RiverBreakoutTabs__wideTabListActions {\n  order: 3;\n  display: grid;\n  grid-template-columns: repeat(var(--river-breakout-tabs-columns), minmax(0, 1fr));\n  gap: var(--base-size-40);\n}\n\n.RiverBreakoutTabs__item {\n  position: relative;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.RiverBreakoutTabs__item::before {\n  content: '';\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline: 0;\n  height: var(--brand-borderWidth-thin);\n  transform: scaleY(1);\n  transform-origin: 50% 0;\n  background-color: var(--brand-color-border-muted);\n  transition: transform var(--brand-animation-duration-fast) ease,\n    background-color var(--brand-animation-duration-fast) ease;\n}\n\n.RiverBreakoutTabs__item--selected::before {\n  transform: scaleY(2);\n  background-color: var(--brand-color-accent-primary);\n}\n\n@media screen and (min-width: 63.25rem) and (hover: hover) and (pointer: fine) {\n  .RiverBreakoutTabs__item:hover::before {\n    transform: scaleY(2);\n    background-color: var(--brand-color-accent-primary);\n  }\n}\n\n.RiverBreakoutTabs__heading {\n  margin: 0;\n  color: var(--brand-color-text-muted);\n}\n\n.RiverBreakoutTabs__item--selected .RiverBreakoutTabs__heading {\n  color: var(--brand-color-text-default);\n}\n\n.RiverBreakoutTabs__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.RiverBreakoutTabs__tab {\n  width: 100%;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: left;\n  padding-block-start: var(--base-size-28);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--base-size-20);\n  cursor: pointer;\n  outline: none;\n  padding-inline: 0;\n}\n\n.RiverBreakoutTabs__tab:focus-visible {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-4);\n}\n\n.RiverBreakoutTabs__tabHeading {\n  margin: 0;\n}\n\n.RiverBreakoutTabs__wideTabListContent {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--base-size-12);\n}\n\n.RiverBreakoutTabs__wideTabListAction {\n  color: var(--brand-Link-color-accent);\n  font-weight: var(--base-text-weight-medium);\n  text-decoration: none;\n}\n\n.RiverBreakoutTabs__wideTabListActionItem {\n  margin-block-start: var(--base-size-12);\n}\n\n.RiverBreakoutTabs__content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--base-size-12);\n}\n\n.RiverBreakoutTabs__link {\n  text-decoration: none;\n}\n\n.RiverBreakoutTabs__accordion {\n  padding-block-end: var(--base-size-40);\n}\n\n.RiverBreakoutTabs__accordionContent {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--base-size-12);\n}\n\n.RiverBreakoutTabs__accordionContent .RiverBreakoutTabs__link,\n.RiverBreakoutTabs__accordionContent .RiverBreakoutTabs__link > span {\n  color: var(--brand-Link-color-accent);\n  font-weight: var(--base-text-weight-medium);\n}\n\n.RiverBreakoutTabs__accordionContent .RiverBreakoutTabs__link {\n  text-decoration: none;\n}\n\n.RiverBreakoutTabs__accordionItem {\n  border-top: none;\n}\n\n.RiverBreakoutTabs__accordionItem::after {\n  display: none;\n}\n\n.RiverBreakoutTabs__accordionItem::before {\n  content: '';\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline: 0;\n  height: var(--brand-borderWidth-thin);\n  transform: scaleY(1);\n  transform-origin: 50% 0;\n  background-color: var(--brand-color-border-muted);\n  transition: transform var(--brand-animation-duration-fast) ease,\n    background-color var(--brand-animation-duration-fast) ease;\n}\n\n.RiverBreakoutTabs__accordionItem.RiverBreakoutTabs__item--selected::before {\n  transform: scaleY(2);\n  background-color: var(--brand-color-accent-primary);\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .RiverBreakoutTabs__accordionItem:hover::before {\n    transform: scaleY(2);\n    background-color: var(--brand-color-accent-primary);\n  }\n}\n\n.RiverBreakoutTabs__accordionHeading {\n  color: var(--brand-color-text-default);\n}\n\n.RiverBreakoutTabs__accordionHeadingInner {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--base-size-12);\n}\n\n.RiverBreakoutTabs__accordionIcon {\n  flex-shrink: 0;\n}\n\n.RiverBreakoutTabs__accordionLabel {\n  display: inline-flex;\n  align-items: center;\n}\n\n.RiverBreakoutTabs__accordionPanel {\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-size-24);\n}\n\n@media screen and (min-width: 618px) {\n  .RiverBreakoutTabs {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverBreakoutTabs {\n    border-inline: none;\n  }\n}\n\n@media screen and (min-width: 1300px) {\n  .RiverBreakoutTabs {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"RiverBreakoutTabs.module.js","names":[],"sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.module.css"],"sourcesContent":[".RiverBreakoutTabs {\n  --river-breakout-tabs-columns: 1;\n}\n\n@media screen and (max-width: 63.24rem) {\n  .RiverBreakoutTabs {\n    width: 100%;\n    max-width: 38.625rem;\n    margin-inline: auto;\n  }\n}\n\n.RiverBreakoutTabs__accordion {\n  display: flex;\n  flex-direction: column;\n}\n\n.RiverBreakoutTabs__wideTabList {\n  display: flex;\n  flex-direction: column;\n  padding-block-end: var(--base-size-80);\n}\n\n.RiverBreakoutTabs__sharedVisuals {\n  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/* River removes the gridline top spacing when a subtle visual is present\n   (.RiverBreakout--variant-gridline:has(.River__visual--has-background)), bleeding the subtle\n   background up to the top gridline. Restore the top spacing so a non-full-bleed background is\n   inset from the top like the sides — only backgroundVisualFullBleed should reach the\n   top gridline. */\n.RiverBreakoutTabs:has(:global([class*='River__visual--has-background'])) {\n  padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\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: scaleY(2);\n  background-color: var(--brand-color-accent-primary);\n}\n\n@media screen and (min-width: 63.25rem) and (hover: hover) and (pointer: fine) {\n  .RiverBreakoutTabs__item:hover::before {\n    transform: scaleY(2);\n    background-color: var(--brand-color-accent-primary);\n  }\n}\n\n.RiverBreakoutTabs__heading {\n  margin: 0;\n  color: var(--brand-color-text-muted);\n}\n\n.RiverBreakoutTabs__item--selected .RiverBreakoutTabs__heading {\n  color: var(--brand-color-text-default);\n}\n\n.RiverBreakoutTabs__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.RiverBreakoutTabs__tab {\n  width: 100%;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: left;\n  padding-block-start: var(--base-size-28);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  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-16);\n}\n\n.RiverBreakoutTabs__content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--base-size-12);\n}\n\n.RiverBreakoutTabs__link {\n  text-decoration: none;\n}\n\n.RiverBreakoutTabs__accordion {\n  padding-block-end: var(--base-size-40);\n}\n\n.RiverBreakoutTabs__accordionContent {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--base-size-12);\n}\n\n.RiverBreakoutTabs__accordionContent .RiverBreakoutTabs__link,\n.RiverBreakoutTabs__accordionContent .RiverBreakoutTabs__link > span {\n  color: var(--brand-Link-color-accent);\n  font-weight: var(--base-text-weight-medium);\n}\n\n.RiverBreakoutTabs__accordionContent .RiverBreakoutTabs__link {\n  text-decoration: none;\n}\n\n.RiverBreakoutTabs__accordionItem {\n  border-top: none;\n}\n\n.RiverBreakoutTabs__accordionItem::after {\n  display: none;\n}\n\n.RiverBreakoutTabs__accordionItem::before {\n  content: '';\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline: 0;\n  height: var(--brand-borderWidth-thin);\n  transform: scaleY(1);\n  transform-origin: 50% 0;\n  background-color: var(--brand-color-border-muted);\n  transition: transform var(--brand-animation-duration-fast) ease,\n    background-color var(--brand-animation-duration-fast) ease;\n}\n\n.RiverBreakoutTabs__accordionItem.RiverBreakoutTabs__item--selected::before {\n  transform: scaleY(2);\n  background-color: var(--brand-color-accent-primary);\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .RiverBreakoutTabs__accordionItem:hover::before {\n    transform: scaleY(2);\n    background-color: var(--brand-color-accent-primary);\n  }\n}\n\n.RiverBreakoutTabs__accordionHeading {\n  color: var(--brand-color-text-default);\n}\n\n.RiverBreakoutTabs__accordionHeadingInner {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--base-size-12);\n}\n\n.RiverBreakoutTabs__accordionIcon {\n  flex-shrink: 0;\n}\n\n.RiverBreakoutTabs__accordionLabel {\n  display: inline-flex;\n  align-items: center;\n}\n\n.RiverBreakoutTabs__accordionPanel {\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-size-24);\n}\n\n@media screen and (min-width: 618px) {\n  .RiverBreakoutTabs {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverBreakoutTabs {\n    border-inline: none;\n  }\n}\n\n@media screen and (min-width: 1300px) {\n  .RiverBreakoutTabs {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n"],"mappings":""}