@primer/react-brand 0.72.0-rc.c1f51647 → 0.72.0-rc.f8b72452

package/esm/hooks/useFocusTrap.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.js","names":[],"sources":["../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import React from 'react'\nimport {focusTrap} from '@primer/behaviors'\n\nexport interface FocusTrapHookSettings {\n  /**\n   * Ref that will be used for the trapping container. If not provided, one will\n   * be created by this hook and returned.\n   */\n  containerRef: React.RefObject<HTMLElement | null>\n\n  /**\n   * Ref for the element that should receive focus when the focus trap is first enabled.\n   * If not provided, one will be created by this hook and returned. Its use is optional.\n   */\n  initialFocusRef?: React.RefObject<HTMLElement | null>\n\n  /**\n   * Set to true to disable the focus trap and clean up listeners. Can be re-enabled at any time.\n   */\n  disabled?: boolean\n\n  /**\n   * If true, when this focus trap is cleaned up, restore focus to the element that had focus immediately before the focus trap was enabled. (Default: false)\n   */\n  restoreFocusOnCleanUp?: boolean\n}\n\n/**\n * Hook used to trap focus inside a container. Returns a ref that can be added to the container\n * that should trap focus.\n * @param settings {FocusTrapHookSettings}\n */\nexport function useFocusTrap(\n  settings?: FocusTrapHookSettings,\n  dependencies: React.DependencyList = [],\n): {\n  containerRef: React.RefObject<HTMLElement | null> | undefined\n  initialFocusRef: React.RefObject<HTMLElement | null> | undefined\n} {\n  const containerRef = settings?.containerRef\n  const initialFocusRef = settings?.initialFocusRef\n  const disabled = settings?.disabled\n  const abortController = React.useRef<AbortController | null>(null)\n  const previousFocusedElement = React.useRef<Element | null>(null)\n\n  // If we are enabling a focus trap and haven't already stored the previously focused element\n  // go ahead an do that so we can restore later when the trap is disabled.\n  if (!previousFocusedElement.current && !settings?.disabled) {\n    previousFocusedElement.current = document.activeElement\n  }\n\n  // This function removes the event listeners that enable the focus trap and restores focus\n  // to the previously-focused element (if necessary).\n  function disableTrap() {\n    abortController.current?.abort()\n    if (settings?.restoreFocusOnCleanUp && previousFocusedElement.current instanceof HTMLElement) {\n      previousFocusedElement.current.focus()\n      previousFocusedElement.current = null\n    }\n  }\n\n  React.useEffect(\n    () => {\n      if (containerRef?.current instanceof HTMLElement) {\n        if (!disabled) {\n          abortController.current = focusTrap(containerRef.current, initialFocusRef?.current ?? undefined) ?? null\n          return () => {\n            disableTrap()\n          }\n        } else {\n          disableTrap()\n        }\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [containerRef, initialFocusRef, disabled, ...dependencies],\n  )\n\n  return {containerRef, initialFocusRef}\n}\n"],"mappings":";;;AAgCA,SAAgB,EACd,GACA,IAAqC,EAAE,EAIvC;CACA,IAAM,IAAe,GAAU,cACzB,IAAkB,GAAU,iBAC5B,IAAW,GAAU,UACrB,IAAkB,EAAM,OAA+B,KAAK,EAC5D,IAAyB,EAAM,OAAuB,KAAK;AAIjE,CAAI,CAAC,EAAuB,WAAW,CAAC,GAAU,aAChD,EAAuB,UAAU,SAAS;CAK5C,SAAS,IAAc;AAErB,EADA,EAAgB,SAAS,OAAO,EAC5B,GAAU,yBAAyB,EAAuB,mBAAmB,gBAC/E,EAAuB,QAAQ,OAAO,EACtC,EAAuB,UAAU;;AAqBrC,QAjBA,EAAM,gBACE;AACJ,MAAI,GAAc,mBAAmB,YACnC,KAAK,EAMH,IAAa;MAJb,QADA,EAAgB,UAAU,EAAU,EAAa,SAAS,GAAiB,WAAW,KAAA,EAAU,IAAI,YACvF;AACX,MAAa;;IAQrB;EAAC;EAAc;EAAiB;EAAU,GAAG;EAAa,CAC3D,EAEM;EAAC;EAAc;EAAgB"}
+{"version":3,"file":"useFocusTrap.js","names":[],"sources":["../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import React from 'react'\nimport {focusTrap} from '@primer/behaviors'\nimport {useProvidedRefOrCreate} from './useRef'\n\nexport interface FocusTrapHookSettings<\n  ContainerElement extends HTMLElement = HTMLElement,\n  InitialFocusElement extends HTMLElement = HTMLElement,\n> {\n  /**\n   * Ref object that will be used for the trapping container. If not provided, one will\n   * be created by this hook and returned.\n   */\n  containerRef?: React.RefObject<ContainerElement | null>\n\n  /**\n   * Ref object for the element that should receive focus when the focus trap is first enabled.\n   * If not provided, one will be created by this hook and returned. Its use is optional.\n   */\n  initialFocusRef?: React.RefObject<InitialFocusElement | null>\n\n  /**\n   * Set to true to disable the focus trap and clean up listeners. Can be re-enabled at any time.\n   */\n  disabled?: boolean\n\n  /**\n   * If true, when this focus trap is cleaned up, restore focus to the element that had focus immediately before the focus trap was enabled. (Default: false)\n   */\n  restoreFocusOnCleanUp?: boolean\n}\n\n/**\n * Hook used to trap focus inside a container. Returns a ref that can be added to the container\n * that should trap focus.\n * @param settings {FocusTrapHookSettings}\n */\nexport function useFocusTrap<\n  ContainerElement extends HTMLElement = HTMLElement,\n  InitialFocusElement extends HTMLElement = HTMLElement,\n>(\n  settings?: FocusTrapHookSettings<ContainerElement, InitialFocusElement>,\n  dependencies: React.DependencyList = [],\n): {\n  containerRef: React.RefObject<ContainerElement | null>\n  initialFocusRef: React.RefObject<InitialFocusElement | null>\n} {\n  const containerRef = useProvidedRefOrCreate<ContainerElement | null>(settings?.containerRef)\n  const initialFocusRef = useProvidedRefOrCreate<InitialFocusElement | null>(settings?.initialFocusRef)\n  const disabled = settings?.disabled\n  const abortController = React.useRef<AbortController | null>(null)\n  const previousFocusedElement = React.useRef<Element | null>(null)\n\n  // This function removes the event listeners that enable the focus trap and restores focus\n  // to the previously-focused element (if necessary).\n  function disableTrap() {\n    abortController.current?.abort()\n    if (settings?.restoreFocusOnCleanUp && previousFocusedElement.current instanceof HTMLElement) {\n      previousFocusedElement.current.focus()\n    }\n    previousFocusedElement.current = null\n  }\n\n  React.useEffect(\n    () => {\n      if (containerRef.current instanceof HTMLElement) {\n        if (!disabled) {\n          if (!previousFocusedElement.current) {\n            previousFocusedElement.current = document.activeElement\n          }\n          abortController.current = focusTrap(containerRef.current, initialFocusRef.current ?? undefined) ?? null\n          return () => {\n            disableTrap()\n          }\n        } else {\n          disableTrap()\n        }\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [containerRef, initialFocusRef, disabled, ...dependencies],\n  )\n\n  return {containerRef, initialFocusRef}\n}\n"],"mappings":";;;;AAoCA,SAAgB,EAId,GACA,IAAqC,EAAE,EAIvC;CACA,IAAM,IAAe,EAAgD,GAAU,aAAa,EACtF,IAAkB,EAAmD,GAAU,gBAAgB,EAC/F,IAAW,GAAU,UACrB,IAAkB,EAAM,OAA+B,KAAK,EAC5D,IAAyB,EAAM,OAAuB,KAAK;CAIjE,SAAS,IAAc;AAKrB,EAJA,EAAgB,SAAS,OAAO,EAC5B,GAAU,yBAAyB,EAAuB,mBAAmB,eAC/E,EAAuB,QAAQ,OAAO,EAExC,EAAuB,UAAU;;AAuBnC,QApBA,EAAM,gBACE;AACJ,MAAI,EAAa,mBAAmB,YAClC,KAAK,EASH,IAAa;MAJb,QAJA,AACE,EAAuB,YAAU,SAAS,eAE5C,EAAgB,UAAU,EAAU,EAAa,SAAS,EAAgB,WAAW,KAAA,EAAU,IAAI,YACtF;AACX,MAAa;;IAQrB;EAAC;EAAc;EAAiB;EAAU,GAAG;EAAa,CAC3D,EAEM;EAAC;EAAc;EAAgB"}

package/esm/index.d.ts

@@ -56,5 +56,6 @@ export * from './SectionIntroStacked';
 export * from './Tabs';
 export * from './TextCursorAnimation';
 export * from './Tiles';
+export * from './hooks/useFocusTrap';
 export * from './hooks/useWindowSize';
 //# sourceMappingURL=index.d.ts.map

package/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AAEjC,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,QAAQ,CAAA;AACtB,cAAc,uBAAuB,CAAA;AACrC,cAAc,SAAS,CAAA;AAGvB,cAAc,uBAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AAEjC,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,QAAQ,CAAA;AACtB,cAAc,uBAAuB,CAAA;AACrC,cAAc,SAAS,CAAA;AAGvB,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA"}

package/esm/index.esm.js

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

package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-C05YPRXo.css

@@ -0,0 +1 @@
+:root,[data-color-mode=light]{--brand-control-color-border-default:var(--base-color-scale-gray-4);--brand-control-color-border-disabled:var(--base-color-scale-gray-2);--brand-control-color-canvas-disabled:var(--base-color-scale-gray-1);--brand-control-color-fg-default:var(--brand-color-text-default);--brand-control-color-fg-disabled:var(--base-color-scale-gray-4);--brand-control-color-focus:var(--base-color-scale-blue-6);--brand-control-checkbox-bg-default:var(--base-color-scale-white-0);--brand-control-checkbox-bg-hover:var(--brand-color-canvas-subtle);--brand-control-checkbox-bg-checked:var(--base-color-scale-green-6);--brand-control-checkbox-bg-checked-hover:color-mix(in srgb, var(--brand-color-text-emphasized), #000 26%);--brand-control-checkbox-bg-indeterminate:var(--base-color-scale-green-6);--brand-control-checkbox-bg-indeterminate-hover:color-mix(in srgb, var(--brand-color-text-emphasized), #000 26%);--brand-control-checkbox-bg-checked-disabled:color-mix(in srgb, var(--base-color-scale-green-6), #fff 65%);--brand-control-checkbox-fg-checked:var(--base-color-scale-white-0);--brand-control-checkbox-fg-checked-disabled:var(--base-color-scale-white-0);--brand-control-checkbox-border-default:var(--base-color-scale-gray-4);--brand-control-checkbox-border-hover:var(--base-color-scale-gray-4);--brand-control-checkbox-border-checked:var(--base-color-scale-green-6);--brand-control-checkbox-border-checked-hover:var(--brand-color-text-emphasized);--brand-control-checkbox-border-indeterminate:var(--base-color-scale-green-6);--brand-control-checkbox-border-indeterminate-hover:var(--brand-color-text-emphasized);--brand-control-checkbox-border-checked-disabled:color-mix(in srgb, var(--base-color-scale-green-6), #fff 65%);--brand-control-checkbox-border-unchecked-disabled:var(--base-color-scale-gray-1);--brand-control-radio-bg-default:var(--base-color-scale-white-0);--brand-control-radio-bg-hover:var(--brand-color-canvas-subtle);--brand-control-radio-bg-checked:var(--base-color-scale-white-0);--brand-control-radio-bg-checked-hover:var(--brand-color-canvas-subtle);--brand-control-radio-bg-disabled:var(--brand-color-canvas-default);--brand-control-radio-border-default:var(--brand-control-color-border-default);--brand-control-radio-border-hover:var(--base-color-scale-gray-4);--brand-control-radio-border-checked:var(--brand-control-color-border-default);--brand-control-radio-border-checked-hover:var(--brand-control-color-border-default);--brand-control-radio-border-disabled:var(--base-color-scale-gray-4);--brand-control-radio-dot-default:var(--base-color-scale-black-0);--brand-control-radio-dot-checked:var(--base-color-scale-green-6);--brand-control-radio-dot-checked-hover:color-mix(in srgb, var(--brand-color-text-emphasized), #000 26%)}[data-color-mode=dark]{--brand-control-color-border-default:var(--base-color-scale-gray-4);--brand-control-color-border-disabled:var(--base-color-scale-gray-5);--brand-control-color-canvas-disabled:var(--base-color-scale-gray-8);--brand-control-color-fg-default:var(--brand-color-text-default);--brand-control-color-fg-disabled:var(--base-color-scale-gray-5);--brand-control-color-focus:var(--base-color-scale-blue-2);--brand-control-checkbox-bg-default:var(--base-color-scale-gray-7);--brand-control-checkbox-bg-hover:var(--brand-color-canvas-subtle);--brand-control-checkbox-bg-checked:var(--base-color-scale-green-5);--brand-control-checkbox-bg-checked-hover:#309a4d;--brand-control-checkbox-bg-indeterminate:var(--base-color-scale-green-5);--brand-control-checkbox-bg-indeterminate-hover:#309a4d;--brand-control-checkbox-bg-checked-disabled:color-mix(in srgb, var(--base-color-scale-green-6), #000 35%);--brand-control-checkbox-fg-checked:var(--base-color-scale-white-0);--brand-control-checkbox-fg-checked-disabled:color-mix(in srgb, var(--base-color-scale-green-5), #000 20%);--brand-control-checkbox-border-default:var(--base-color-scale-gray-4);--brand-control-checkbox-border-hover:var(--base-color-scale-gray-5);--brand-control-checkbox-border-checked:#077726;--brand-control-checkbox-border-checked-hover:#0000001f;--brand-control-checkbox-border-indeterminate:#077726;--brand-control-checkbox-border-indeterminate-hover:#0000001f;--brand-control-checkbox-border-checked-disabled:color-mix(in srgb, var(--base-color-scale-green-6), #000 35%);--brand-control-checkbox-border-unchecked-disabled:var(--base-color-scale-gray-5);--brand-control-radio-bg-default:var(--base-color-scale-black-0);--brand-control-radio-bg-hover:var(--brand-color-canvas-subtle);--brand-control-radio-bg-checked:var(--base-color-scale-black-0);--brand-control-radio-bg-checked-hover:var(--brand-color-canvas-subtle);--brand-control-radio-bg-disabled:var(--brand-color-canvas-default);--brand-control-radio-border-default:var(--base-color-scale-gray-4);--brand-control-radio-border-hover:var(--base-color-scale-gray-5);--brand-control-radio-border-checked:var(--base-color-scale-gray-4);--brand-control-radio-border-checked-hover:var(--base-color-scale-gray-4);--brand-control-radio-border-disabled:var(--base-color-scale-gray-5);--brand-control-radio-dot-default:var(--base-color-scale-white-0);--brand-control-radio-dot-checked:var(--base-color-scale-green-5);--brand-control-radio-dot-checked-hover:#309a4d}

package/esm/river/River/River.d.ts

@@ -71,8 +71,6 @@ export type RiverContentProps = BaseProps<HTMLDivElement> & {
     children: React.ReactElement<TextProps> | React.ReactElement<HeadingProps | TextProps | LinkProps>[];
 } & React.HTMLAttributes<HTMLDivElement>;
 export declare const RiverContent: React.ForwardRefExoticComponent<Omit<RiverContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const RiverVisualBackgroundColors: readonly ["default", "subtle"];
-export type RiverVisualBackgroundColor = (typeof RiverVisualBackgroundColors)[number];
 export type RiverVisualProps = BaseProps<HTMLDivElement> & React.HtmlHTMLAttributes<HTMLDivElement> & PropsWithChildren<{
     /**
      * Applies automatic size constraints to child images and video.
@@ -89,10 +87,6 @@ export type RiverVisualProps = BaseProps<HTMLDivElement> & React.HtmlHTMLAttribu
      * Can optionally be disabled.
      */
     rounded?: boolean;
-    /**
-     * Applies a background color with padding around the media.
-     */
-    imageBackgroundColor?: RiverVisualBackgroundColor;
 }>;
 export declare const Visual: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<RiverVisualProps>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"River.d.ts","sourceRoot":"","sources":["../../../src/river/River/River.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,iBAAiB,EAAoB,MAAM,OAAO,CAAA;AAE7E,OAAO,EAAU,KAAK,YAAY,EAAC,MAAM,eAAe,CAAA;AACxD,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,YAAY,CAAA;AAI/C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AAEtD;;GAEG;AACH,OAAO,4FAA4F,CAAA;AACnG,OAAO,6FAA6F,CAAA;AAMpG,eAAO,MAAM,aAAa,kCAAmC,CAAA;AAC7D,eAAO,MAAM,YAAY,EAAG,UAAmB,CAAA;AAC/C,eAAO,MAAM,QAAQ,EAAG,UAAmB,CAAA;AAC3C,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAA;AAEzD,eAAO,MAAM,uBAAuB,kCAAmC,CAAA;AACvE,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,CAAA;AAExE,MAAM,MAAM,UAAU,GAAG;IACvB;;;;;OAKG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,gBAAgB,GAAG,iBAAiB,CAAC,EAAE,CAAA;IACpE;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IAClC;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB,GAAG,SAAS,CAAC,WAAW,CAAC,GACxB,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAEnC,eAAO,MAAM,0BAA0B,UAAU,CAAA;AACjD,eAAO,MAAM,iBAAiB,UAAU,CAAA;AACxC,eAAO,MAAM,mBAAmB,EAAE,YAAwB,CAAA;AA4D1D,MAAM,MAAM,iBAAiB,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG;IAC1D;;OAEG;IACH,KAAK,CAAC,EAAE,iBAAiB,CAAA;IACzB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAC3C;;OAEG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAClC;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAC1C;;;;;OAKG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,YAAY,GAAG,SAAS,GAAG,SAAS,CAAC,EAAE,CAAA;CACrG,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAExC,eAAO,MAAM,YAAY,uGA8FxB,CAAA;AAED,eAAO,MAAM,2BAA2B,gCAAiC,CAAA;AACzE,MAAM,MAAM,0BAA0B,GAAG,CAAC,OAAO,2BAA2B,CAAC,CAAC,MAAM,CAAC,CAAA;AAErF,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,cAAc,CAAC,GACtD,KAAK,CAAC,kBAAkB,CAAC,cAAc,CAAC,GACxC,iBAAiB,CAAC;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,oBAAoB,CAAC,EAAE,0BAA0B,CAAA;CAClD,CAAC,CAAA;AAEJ,eAAO,MAAM,MAAM,+HA8BlB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,KAAK;;;CAAuD,CAAA"}
+{"version":3,"file":"River.d.ts","sourceRoot":"","sources":["../../../src/river/River/River.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,iBAAiB,EAAoB,MAAM,OAAO,CAAA;AAE7E,OAAO,EAAU,KAAK,YAAY,EAAC,MAAM,eAAe,CAAA;AACxD,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,YAAY,CAAA;AAI/C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AAEtD;;GAEG;AACH,OAAO,4FAA4F,CAAA;AACnG,OAAO,6FAA6F,CAAA;AAMpG,eAAO,MAAM,aAAa,kCAAmC,CAAA;AAC7D,eAAO,MAAM,YAAY,EAAG,UAAmB,CAAA;AAC/C,eAAO,MAAM,QAAQ,EAAG,UAAmB,CAAA;AAC3C,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAA;AAEzD,eAAO,MAAM,uBAAuB,kCAAmC,CAAA;AACvE,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,CAAA;AAExE,MAAM,MAAM,UAAU,GAAG;IACvB;;;;;OAKG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,gBAAgB,GAAG,iBAAiB,CAAC,EAAE,CAAA;IACpE;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IAClC;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB,GAAG,SAAS,CAAC,WAAW,CAAC,GACxB,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAEnC,eAAO,MAAM,0BAA0B,UAAU,CAAA;AACjD,eAAO,MAAM,iBAAiB,UAAU,CAAA;AACxC,eAAO,MAAM,mBAAmB,EAAE,YAAwB,CAAA;AAqE1D,MAAM,MAAM,iBAAiB,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG;IAC1D;;OAEG;IACH,KAAK,CAAC,EAAE,iBAAiB,CAAA;IACzB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAC3C;;OAEG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAClC;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAC1C;;;;;OAKG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,YAAY,GAAG,SAAS,GAAG,SAAS,CAAC,EAAE,CAAA;CACrG,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAExC,eAAO,MAAM,YAAY,uGA8FxB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,cAAc,CAAC,GACtD,KAAK,CAAC,kBAAkB,CAAC,cAAc,CAAC,GACxC,iBAAiB,CAAC;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAC,CAAA;AAEJ,eAAO,MAAM,MAAM,+HA4BlB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,KAAK;;;CAAuD,CAAA"}

package/esm/river/River/River.js

@@ -16,7 +16,7 @@ var m = "50:50", h = "start", g = "default", _ = u(({ animate: n, imageTextRatio
 	let { classes: b, styles: x } = t(n), { Visual: S, Content: C } = l.Children.toArray(u).reduce((e, t) => (l.isValidElement(t) && typeof t.type != "string" && (t.type === y && (e.Visual = t), t.type === v && (e.Content = t)), e), {
 		Visual: null,
 		Content: null
-	});
+	}), w = S ? l.cloneElement(S, { className: e(S.props.className, o === "gridline" && c["River__visual--has-background"]) }) : null;
 	return /* @__PURE__ */ p("section", {
 		ref: _,
 		className: e(c.River, c[`River--${r.replace(":", "-")}`], c[`River--align-${i}`], c[`River--variant-${o}`], o === "gridline" && a.gridline, b, s),
@@ -25,7 +25,7 @@ var m = "50:50", h = "start", g = "default", _ = u(({ animate: n, imageTextRatio
 			...d
 		},
 		...f,
-		children: [C, S]
+		children: [C, w]
 	});
 }), v = u(({ align: a = "center", animate: u, children: m, className: h, leadingComponent: g, trailingComponent: _, trailingComponentDivider: v = !1, style: y, ...b }, x) => {
 	let { classes: S, styles: C } = t(u), w = d(() => l.Children.toArray(m), [m]), T = w.find((e) => l.isValidElement(e) && e.type === i), E = w.find((e) => l.isValidElement(e) && e.type === n), D = w.find((e) => l.isValidElement(e) && e.type === o), O = w.find((e) => l.isValidElement(e) && e.type === s), k = w.find((e) => l.isValidElement(e) && e.type === r);
@@ -77,10 +77,10 @@ var m = "50:50", h = "start", g = "default", _ = u(({ animate: n, imageTextRatio
 			})
 		]
 	});
-}), y = u(({ fillMedia: t = !0, children: n, className: r, hasShadow: i = !1, rounded: a = !0, imageBackgroundColor: o, ...s }, l) => /* @__PURE__ */ f("div", {
-	ref: l,
-	className: e(c.River__visual, i && c["River__visual--has-shadow"], t && c["River__visual--fill-media"], a && c["River__visual--rounded"], o === "subtle" && c["River__visual--has-background"], r),
-	...s,
+}), y = u(({ fillMedia: t = !0, children: n, className: r, hasShadow: i = !1, rounded: a = !0, ...o }, s) => /* @__PURE__ */ f("div", {
+	ref: s,
+	className: e(c.River__visual, i && c["River__visual--has-shadow"], t && c["River__visual--fill-media"], a && c["River__visual--rounded"], r),
+	...o,
 	children: n
 })), b = Object.assign(_, {
 	Visual: y,

package/esm/river/River/River.js.map

@@ -1 +1 @@
-{"version":3,"file":"River.js","names":[],"sources":["../../../src/river/River/River.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren, useMemo, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport {Heading, type HeadingProps} from '../../Heading'\nimport {Text, type TextProps} from '../../Text'\nimport {Link, type LinkProps} from '../../Link'\nimport {Label, type LabelProps} from '../../Label'\nimport {EyebrowText} from '../../EyebrowText'\nimport {useAnimation} from '../../animation'\nimport type {BaseProps} from '../../component-helpers'\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 '../river-shared.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\nexport const RiverVariants = ['default', 'gridline'] as const\nexport const BorderedGrid = 'gridline' as const\nexport const GridLine = 'gridline' as const\nexport type RiverVariant = (typeof RiverVariants)[number]\n\nexport const RiverContentAlignValues = ['center', 'block-end'] as const\nexport type RiverContentAlign = (typeof RiverContentAlignValues)[number]\n\nexport type RiverProps = {\n  /**\n   * Only specific children are valid.\n   * These include: `River.Visual` and `River.Content`.\n   * The declarative order of the children will be ignored in the rendered output\n   * to enforce correct HTML semantics.\n   */\n  children: React.ReactElement<RiverVisualProps | RiverContentProps>[]\n  /**\n   * Apply an alternative image to text column ratio. The default is `50:50`.\n   */\n  imageTextRatio?: '60:40' | '50:50'\n  /**\n   * Adjust the order of the `Content` column. The default is `start`.\n   */\n  align?: 'start' | 'end' | 'center'\n  /**\n   * Apply a visual variant. The default is `default`.\n   * `gridline` applies lateral spacing for use in bordered grid layouts.\n   */\n  variant?: RiverVariant\n} & BaseProps<HTMLElement> &\n  React.HTMLAttributes<HTMLElement>\n\nexport const defaultRiverImageTextRatio = '50:50'\nexport const defaultRiverAlign = 'start'\nexport const defaultRiverVariant: RiverVariant = 'default'\n\ntype ValidRootChildren = {\n  Visual: React.ReactElement<RiverVisualProps> | null\n  Content: React.ReactElement<RiverContentProps> | null\n}\n\nconst Root = forwardRef(\n  (\n    {\n      animate,\n      imageTextRatio = defaultRiverImageTextRatio,\n      align = defaultRiverAlign,\n      variant = defaultRiverVariant,\n      className,\n      children,\n      style,\n      ...rest\n    }: RiverProps,\n    ref: Ref<HTMLElement>,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const {Visual: VisualChild, Content: ContentChild} = React.Children.toArray(children).reduce<ValidRootChildren>(\n      (acc, child) => {\n        if (React.isValidElement(child) && typeof child.type !== 'string') {\n          if (child.type === Visual) {\n            acc.Visual = child as React.ReactElement<RiverVisualProps>\n          }\n          if (child.type === RiverContent) {\n            acc.Content = child as React.ReactElement<RiverContentProps>\n          }\n        }\n        return acc\n      },\n      {Visual: null, Content: null},\n    )\n\n    return (\n      <section\n        ref={ref}\n        className={clsx(\n          styles.River,\n          styles[`River--${imageTextRatio.replace(':', '-')}`],\n          styles[`River--align-${align}`],\n          styles[`River--variant-${variant}`],\n          variant === 'gridline' && gridlineStyles.gridline,\n          animationClasses,\n          className,\n        )}\n        style={{...animationInlineStyles, ...style}}\n        {...rest}\n      >\n        {ContentChild}\n        {VisualChild}\n      </section>\n    )\n  },\n)\n\nexport type RiverContentProps = BaseProps<HTMLDivElement> & {\n  /**\n   * Aligns the content vertically within its container.\n   */\n  align?: RiverContentAlign\n  /**\n   * Escape-hatch for inserting custom React components.\n   * Warning:\n   *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n   *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n   */\n  trailingComponent?: React.FunctionComponent\n  /**\n   * When `true`, a divider will be rendered between the standard river and optional trailing content.\n   */\n  trailingComponentDivider?: boolean\n  /**\n   * Escape-hatch for inserting custom React components.\n   * Warning:\n   *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n   *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n   */\n  leadingComponent?: React.FunctionComponent\n  /**\n   * Only valid children are allowed.\n   * These include: `Heading`, `Text` and `Link`.\n   * The declarative order of the children will be ignored in the rendered output\n   * to enforce correct HTML semantics.\n   */\n  children: React.ReactElement<TextProps> | React.ReactElement<HeadingProps | TextProps | LinkProps>[]\n} & React.HTMLAttributes<HTMLDivElement>\n\nexport const RiverContent = forwardRef(\n  (\n    {\n      align = 'center',\n      animate,\n      children,\n      className,\n      leadingComponent: LeadingComponent,\n      trailingComponent: TrailingComponent,\n      trailingComponentDivider = false,\n      style,\n      ...rest\n    }: RiverContentProps,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const Children = useMemo(() => React.Children.toArray(children), [children])\n\n    const HeadingChild = Children.find(child => React.isValidElement(child) && child.type === Heading)\n\n    const TextChild = Children.find(child => React.isValidElement(child) && child.type === Text)\n\n    const LinkChild = Children.find(child => React.isValidElement(child) && child.type === Link)\n\n    const LabelChild = Children.find(child => React.isValidElement(child) && child.type === Label)\n\n    const EyebrowTextChild = Children.find(child => React.isValidElement(child) && child.type === EyebrowText)\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(animationClasses, styles.River__content, styles[`River__content--align-${align}`], className)}\n        style={{...animationInlineStyles, ...style}}\n        {...rest}\n      >\n        {React.isValidElement(LabelChild) && !LeadingComponent && (\n          <div className={styles.River__label}>\n            {React.cloneElement(LabelChild as React.ReactElement<LabelProps>, {})}\n          </div>\n        )}\n\n        {!LabelChild && React.isValidElement(EyebrowTextChild) && !LeadingComponent && (\n          <div className={styles.River__label}>{EyebrowTextChild}</div>\n        )}\n\n        {!LabelChild && !EyebrowTextChild && LeadingComponent && (\n          <div>\n            <LeadingComponent />\n          </div>\n        )}\n\n        {React.isValidElement<HeadingProps>(HeadingChild) && (\n          <div className={styles.River__heading}>\n            {React.cloneElement(HeadingChild as React.ReactElement<HeadingProps>, {\n              // as uses h3 default, but can be overridden\n              as: HeadingChild.props.as || 'h3',\n              size: HeadingChild.props.size || '5',\n              weight: HeadingChild.props.weight,\n              className: clsx(HeadingChild.props.className, styles['River__heading-inner']),\n            })}\n          </div>\n        )}\n\n        {React.isValidElement<TextProps>(TextChild) && (\n          <div className={styles['River__body-text']}>\n            {React.cloneElement(TextChild as React.ReactElement<TextProps>, {\n              variant: 'muted',\n              as: 'p',\n              className: clsx(styles.River__text, TextChild.props.className),\n            })}\n          </div>\n        )}\n        {React.isValidElement<LinkProps>(LinkChild) && (\n          <div className={styles['River__call-to-action']}>\n            {React.cloneElement(LinkChild as React.ReactElement<LinkProps>, {\n              size: 'medium',\n              variant: LinkChild.props.variant || 'accent',\n            })}\n          </div>\n        )}\n        {TrailingComponent && (\n          <div\n            className={clsx(\n              styles.River__trailingComponent,\n              trailingComponentDivider && styles['River__trailingComponent--divider'],\n            )}\n          >\n            <TrailingComponent />\n          </div>\n        )}\n      </div>\n    )\n  },\n)\n\nexport const RiverVisualBackgroundColors = ['default', 'subtle'] as const\nexport type RiverVisualBackgroundColor = (typeof RiverVisualBackgroundColors)[number]\n\nexport type RiverVisualProps = BaseProps<HTMLDivElement> &\n  React.HtmlHTMLAttributes<HTMLDivElement> &\n  PropsWithChildren<{\n    /**\n     * Applies automatic size constraints to child images and video.\n     * This can be disabled by setting this prop to `false`.\n     */\n    fillMedia?: boolean\n    /**\n     * `img` and `video` elements will apply a shadow by default.\n     * This can be disabled by setting this prop to `false`.\n     */\n    hasShadow?: boolean\n    /**\n     * Enables rounded corners.\n     * Can optionally be disabled.\n     */\n    rounded?: boolean\n    /**\n     * Applies a background color with padding around the media.\n     */\n    imageBackgroundColor?: RiverVisualBackgroundColor\n  }>\n\nexport const Visual = forwardRef(\n  (\n    {\n      fillMedia = true,\n      children,\n      className,\n      hasShadow = false,\n      rounded = true,\n      imageBackgroundColor,\n      ...rest\n    }: PropsWithChildren<RiverVisualProps>,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          styles.River__visual,\n          hasShadow && styles['River__visual--has-shadow'],\n          fillMedia && styles['River__visual--fill-media'],\n          rounded && styles['River__visual--rounded'],\n          imageBackgroundColor === 'subtle' && styles['River__visual--has-background'],\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\n/**\n * Alternating text and image pairs.\n */\nexport const River = Object.assign(Root, {Visual, Content: RiverContent})\n"],"mappings":";;;;;;;;;;;;;;AAoDA,IAAa,IAA6B,SAC7B,IAAoB,SACpB,IAAoC,WAO3C,IAAO,GAET,EACE,YACA,oBAAiB,GACjB,WAAQ,GACR,aAAU,GACV,cACA,aACA,UACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,EAAC,QAAQ,GAAa,SAAS,MAAgB,EAAM,SAAS,QAAQ,EAAS,CAAC,QACnF,GAAK,OACA,EAAM,eAAe,EAAM,IAAI,OAAO,EAAM,QAAS,aACnD,EAAM,SAAS,MACjB,EAAI,SAAS,IAEX,EAAM,SAAS,MACjB,EAAI,UAAU,KAGX,IAET;EAAC,QAAQ;EAAM,SAAS;EAAK,CAC9B;AAED,QACE,kBAAC,WAAD;EACO;EACL,WAAW,EACT,EAAO,OACP,EAAO,UAAU,EAAe,QAAQ,KAAK,IAAI,KACjD,EAAO,gBAAgB,MACvB,EAAO,kBAAkB,MACzB,MAAY,cAAc,EAAe,UACzC,GACA,EACD;EACD,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,GAAI;YAZN,CAcG,GACA,EACO;;EAGf,EAkCY,IAAe,GAExB,EACE,WAAQ,UACR,YACA,aACA,cACA,kBAAkB,GAClB,mBAAmB,GACnB,8BAA2B,IAC3B,UACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAW,QAAc,EAAM,SAAS,QAAQ,EAAS,EAAE,CAAC,EAAS,CAAC,EAEtE,IAAe,EAAS,MAAK,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAQ,EAE5F,IAAY,EAAS,MAAK,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAK,EAEtF,IAAY,EAAS,MAAK,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAK,EAEtF,IAAa,EAAS,MAAK,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAM,EAExF,IAAmB,EAAS,MAAK,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAY;AAE1G,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EAAK,GAAkB,EAAO,gBAAgB,EAAO,yBAAyB,MAAU,EAAU;EAC7G,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,GAAI;YAJN;GAMG,EAAM,eAAe,EAAW,IAAI,CAAC,KACpC,kBAAC,OAAD;IAAK,WAAW,EAAO;cACpB,EAAM,aAAa,GAA8C,EAAE,CAAC;IACjE,CAAA;GAGP,CAAC,KAAc,EAAM,eAAe,EAAiB,IAAI,CAAC,KACzD,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAe;IAAuB,CAAA;GAG9D,CAAC,KAAc,CAAC,KAAoB,KACnC,kBAAC,OAAD,EAAA,UACE,kBAAC,GAAD,EAAoB,CAAA,EAChB,CAAA;GAGP,EAAM,eAA6B,EAAa,IAC/C,kBAAC,OAAD;IAAK,WAAW,EAAO;cACpB,EAAM,aAAa,GAAkD;KAEpE,IAAI,EAAa,MAAM,MAAM;KAC7B,MAAM,EAAa,MAAM,QAAQ;KACjC,QAAQ,EAAa,MAAM;KAC3B,WAAW,EAAK,EAAa,MAAM,WAAW,EAAO,wBAAwB;KAC9E,CAAC;IACE,CAAA;GAGP,EAAM,eAA0B,EAAU,IACzC,kBAAC,OAAD;IAAK,WAAW,EAAO;cACpB,EAAM,aAAa,GAA4C;KAC9D,SAAS;KACT,IAAI;KACJ,WAAW,EAAK,EAAO,aAAa,EAAU,MAAM,UAAU;KAC/D,CAAC;IACE,CAAA;GAEP,EAAM,eAA0B,EAAU,IACzC,kBAAC,OAAD;IAAK,WAAW,EAAO;cACpB,EAAM,aAAa,GAA4C;KAC9D,MAAM;KACN,SAAS,EAAU,MAAM,WAAW;KACrC,CAAC;IACE,CAAA;GAEP,KACC,kBAAC,OAAD;IACE,WAAW,EACT,EAAO,0BACP,KAA4B,EAAO,qCACpC;cAED,kBAAC,GAAD,EAAqB,CAAA;IACjB,CAAA;GAEJ;;EAGX,EA6BY,IAAS,GAElB,EACE,eAAY,IACZ,aACA,cACA,eAAY,IACZ,aAAU,IACV,yBACA,GAAG,KAEL,MAGE,kBAAC,OAAD;CACO;CACL,WAAW,EACT,EAAO,eACP,KAAa,EAAO,8BACpB,KAAa,EAAO,8BACpB,KAAW,EAAO,2BAClB,MAAyB,YAAY,EAAO,kCAC5C,EACD;CACD,GAAI;CAEH;CACG,CAAA,CAGX,EAKY,IAAQ,OAAO,OAAO,GAAM;CAAC;CAAQ,SAAS;CAAa,CAAC"}
+{"version":3,"file":"River.js","names":[],"sources":["../../../src/river/River/River.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren, useMemo, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport {Heading, type HeadingProps} from '../../Heading'\nimport {Text, type TextProps} from '../../Text'\nimport {Link, type LinkProps} from '../../Link'\nimport {Label, type LabelProps} from '../../Label'\nimport {EyebrowText} from '../../EyebrowText'\nimport {useAnimation} from '../../animation'\nimport type {BaseProps} from '../../component-helpers'\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 '../river-shared.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\nexport const RiverVariants = ['default', 'gridline'] as const\nexport const BorderedGrid = 'gridline' as const\nexport const GridLine = 'gridline' as const\nexport type RiverVariant = (typeof RiverVariants)[number]\n\nexport const RiverContentAlignValues = ['center', 'block-end'] as const\nexport type RiverContentAlign = (typeof RiverContentAlignValues)[number]\n\nexport type RiverProps = {\n  /**\n   * Only specific children are valid.\n   * These include: `River.Visual` and `River.Content`.\n   * The declarative order of the children will be ignored in the rendered output\n   * to enforce correct HTML semantics.\n   */\n  children: React.ReactElement<RiverVisualProps | RiverContentProps>[]\n  /**\n   * Apply an alternative image to text column ratio. The default is `50:50`.\n   */\n  imageTextRatio?: '60:40' | '50:50'\n  /**\n   * Adjust the order of the `Content` column. The default is `start`.\n   */\n  align?: 'start' | 'end' | 'center'\n  /**\n   * Apply a visual variant. The default is `default`.\n   * `gridline` applies lateral spacing for use in bordered grid layouts.\n   */\n  variant?: RiverVariant\n} & BaseProps<HTMLElement> &\n  React.HTMLAttributes<HTMLElement>\n\nexport const defaultRiverImageTextRatio = '50:50'\nexport const defaultRiverAlign = 'start'\nexport const defaultRiverVariant: RiverVariant = 'default'\n\ntype ValidRootChildren = {\n  Visual: React.ReactElement<RiverVisualProps> | null\n  Content: React.ReactElement<RiverContentProps> | null\n}\n\nconst Root = forwardRef(\n  (\n    {\n      animate,\n      imageTextRatio = defaultRiverImageTextRatio,\n      align = defaultRiverAlign,\n      variant = defaultRiverVariant,\n      className,\n      children,\n      style,\n      ...rest\n    }: RiverProps,\n    ref: Ref<HTMLElement>,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const {Visual: VisualChild, Content: ContentChild} = React.Children.toArray(children).reduce<ValidRootChildren>(\n      (acc, child) => {\n        if (React.isValidElement(child) && typeof child.type !== 'string') {\n          if (child.type === Visual) {\n            acc.Visual = child as React.ReactElement<RiverVisualProps>\n          }\n          if (child.type === RiverContent) {\n            acc.Content = child as React.ReactElement<RiverContentProps>\n          }\n        }\n        return acc\n      },\n      {Visual: null, Content: null},\n    )\n\n    const VisualChildWithVariantStyles = VisualChild\n      ? React.cloneElement(VisualChild, {\n          className: clsx(\n            VisualChild.props.className,\n            variant === 'gridline' && styles['River__visual--has-background'],\n          ),\n        })\n      : null\n\n    return (\n      <section\n        ref={ref}\n        className={clsx(\n          styles.River,\n          styles[`River--${imageTextRatio.replace(':', '-')}`],\n          styles[`River--align-${align}`],\n          styles[`River--variant-${variant}`],\n          variant === 'gridline' && gridlineStyles.gridline,\n          animationClasses,\n          className,\n        )}\n        style={{...animationInlineStyles, ...style}}\n        {...rest}\n      >\n        {ContentChild}\n        {VisualChildWithVariantStyles}\n      </section>\n    )\n  },\n)\n\nexport type RiverContentProps = BaseProps<HTMLDivElement> & {\n  /**\n   * Aligns the content vertically within its container.\n   */\n  align?: RiverContentAlign\n  /**\n   * Escape-hatch for inserting custom React components.\n   * Warning:\n   *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n   *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n   */\n  trailingComponent?: React.FunctionComponent\n  /**\n   * When `true`, a divider will be rendered between the standard river and optional trailing content.\n   */\n  trailingComponentDivider?: boolean\n  /**\n   * Escape-hatch for inserting custom React components.\n   * Warning:\n   *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n   *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n   */\n  leadingComponent?: React.FunctionComponent\n  /**\n   * Only valid children are allowed.\n   * These include: `Heading`, `Text` and `Link`.\n   * The declarative order of the children will be ignored in the rendered output\n   * to enforce correct HTML semantics.\n   */\n  children: React.ReactElement<TextProps> | React.ReactElement<HeadingProps | TextProps | LinkProps>[]\n} & React.HTMLAttributes<HTMLDivElement>\n\nexport const RiverContent = forwardRef(\n  (\n    {\n      align = 'center',\n      animate,\n      children,\n      className,\n      leadingComponent: LeadingComponent,\n      trailingComponent: TrailingComponent,\n      trailingComponentDivider = false,\n      style,\n      ...rest\n    }: RiverContentProps,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const Children = useMemo(() => React.Children.toArray(children), [children])\n\n    const HeadingChild = Children.find(child => React.isValidElement(child) && child.type === Heading)\n\n    const TextChild = Children.find(child => React.isValidElement(child) && child.type === Text)\n\n    const LinkChild = Children.find(child => React.isValidElement(child) && child.type === Link)\n\n    const LabelChild = Children.find(child => React.isValidElement(child) && child.type === Label)\n\n    const EyebrowTextChild = Children.find(child => React.isValidElement(child) && child.type === EyebrowText)\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(animationClasses, styles.River__content, styles[`River__content--align-${align}`], className)}\n        style={{...animationInlineStyles, ...style}}\n        {...rest}\n      >\n        {React.isValidElement(LabelChild) && !LeadingComponent && (\n          <div className={styles.River__label}>\n            {React.cloneElement(LabelChild as React.ReactElement<LabelProps>, {})}\n          </div>\n        )}\n\n        {!LabelChild && React.isValidElement(EyebrowTextChild) && !LeadingComponent && (\n          <div className={styles.River__label}>{EyebrowTextChild}</div>\n        )}\n\n        {!LabelChild && !EyebrowTextChild && LeadingComponent && (\n          <div>\n            <LeadingComponent />\n          </div>\n        )}\n\n        {React.isValidElement<HeadingProps>(HeadingChild) && (\n          <div className={styles.River__heading}>\n            {React.cloneElement(HeadingChild as React.ReactElement<HeadingProps>, {\n              // as uses h3 default, but can be overridden\n              as: HeadingChild.props.as || 'h3',\n              size: HeadingChild.props.size || '5',\n              weight: HeadingChild.props.weight,\n              className: clsx(HeadingChild.props.className, styles['River__heading-inner']),\n            })}\n          </div>\n        )}\n\n        {React.isValidElement<TextProps>(TextChild) && (\n          <div className={styles['River__body-text']}>\n            {React.cloneElement(TextChild as React.ReactElement<TextProps>, {\n              variant: 'muted',\n              as: 'p',\n              className: clsx(styles.River__text, TextChild.props.className),\n            })}\n          </div>\n        )}\n        {React.isValidElement<LinkProps>(LinkChild) && (\n          <div className={styles['River__call-to-action']}>\n            {React.cloneElement(LinkChild as React.ReactElement<LinkProps>, {\n              size: 'medium',\n              variant: LinkChild.props.variant || 'accent',\n            })}\n          </div>\n        )}\n        {TrailingComponent && (\n          <div\n            className={clsx(\n              styles.River__trailingComponent,\n              trailingComponentDivider && styles['River__trailingComponent--divider'],\n            )}\n          >\n            <TrailingComponent />\n          </div>\n        )}\n      </div>\n    )\n  },\n)\n\nexport type RiverVisualProps = BaseProps<HTMLDivElement> &\n  React.HtmlHTMLAttributes<HTMLDivElement> &\n  PropsWithChildren<{\n    /**\n     * Applies automatic size constraints to child images and video.\n     * This can be disabled by setting this prop to `false`.\n     */\n    fillMedia?: boolean\n    /**\n     * `img` and `video` elements will apply a shadow by default.\n     * This can be disabled by setting this prop to `false`.\n     */\n    hasShadow?: boolean\n    /**\n     * Enables rounded corners.\n     * Can optionally be disabled.\n     */\n    rounded?: boolean\n  }>\n\nexport const Visual = forwardRef(\n  (\n    {\n      fillMedia = true,\n      children,\n      className,\n      hasShadow = false,\n      rounded = true,\n      ...rest\n    }: PropsWithChildren<RiverVisualProps>,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          styles.River__visual,\n          hasShadow && styles['River__visual--has-shadow'],\n          fillMedia && styles['River__visual--fill-media'],\n          rounded && styles['River__visual--rounded'],\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\n/**\n * Alternating text and image pairs.\n */\nexport const River = Object.assign(Root, {Visual, Content: RiverContent})\n"],"mappings":";;;;;;;;;;;;;;AAoDA,IAAa,IAA6B,SAC7B,IAAoB,SACpB,IAAoC,WAO3C,IAAO,GAET,EACE,YACA,oBAAiB,GACjB,WAAQ,GACR,aAAU,GACV,cACA,aACA,UACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,EAAC,QAAQ,GAAa,SAAS,MAAgB,EAAM,SAAS,QAAQ,EAAS,CAAC,QACnF,GAAK,OACA,EAAM,eAAe,EAAM,IAAI,OAAO,EAAM,QAAS,aACnD,EAAM,SAAS,MACjB,EAAI,SAAS,IAEX,EAAM,SAAS,MACjB,EAAI,UAAU,KAGX,IAET;EAAC,QAAQ;EAAM,SAAS;EAAK,CAC9B,EAEK,IAA+B,IACjC,EAAM,aAAa,GAAa,EAC9B,WAAW,EACT,EAAY,MAAM,WAClB,MAAY,cAAc,EAAO,iCAClC,EACF,CAAC,GACF;AAEJ,QACE,kBAAC,WAAD;EACO;EACL,WAAW,EACT,EAAO,OACP,EAAO,UAAU,EAAe,QAAQ,KAAK,IAAI,KACjD,EAAO,gBAAgB,MACvB,EAAO,kBAAkB,MACzB,MAAY,cAAc,EAAe,UACzC,GACA,EACD;EACD,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,GAAI;YAZN,CAcG,GACA,EACO;;EAGf,EAkCY,IAAe,GAExB,EACE,WAAQ,UACR,YACA,aACA,cACA,kBAAkB,GAClB,mBAAmB,GACnB,8BAA2B,IAC3B,UACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAW,QAAc,EAAM,SAAS,QAAQ,EAAS,EAAE,CAAC,EAAS,CAAC,EAEtE,IAAe,EAAS,MAAK,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAQ,EAE5F,IAAY,EAAS,MAAK,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAK,EAEtF,IAAY,EAAS,MAAK,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAK,EAEtF,IAAa,EAAS,MAAK,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAM,EAExF,IAAmB,EAAS,MAAK,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAY;AAE1G,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EAAK,GAAkB,EAAO,gBAAgB,EAAO,yBAAyB,MAAU,EAAU;EAC7G,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,GAAI;YAJN;GAMG,EAAM,eAAe,EAAW,IAAI,CAAC,KACpC,kBAAC,OAAD;IAAK,WAAW,EAAO;cACpB,EAAM,aAAa,GAA8C,EAAE,CAAC;IACjE,CAAA;GAGP,CAAC,KAAc,EAAM,eAAe,EAAiB,IAAI,CAAC,KACzD,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAe;IAAuB,CAAA;GAG9D,CAAC,KAAc,CAAC,KAAoB,KACnC,kBAAC,OAAD,EAAA,UACE,kBAAC,GAAD,EAAoB,CAAA,EAChB,CAAA;GAGP,EAAM,eAA6B,EAAa,IAC/C,kBAAC,OAAD;IAAK,WAAW,EAAO;cACpB,EAAM,aAAa,GAAkD;KAEpE,IAAI,EAAa,MAAM,MAAM;KAC7B,MAAM,EAAa,MAAM,QAAQ;KACjC,QAAQ,EAAa,MAAM;KAC3B,WAAW,EAAK,EAAa,MAAM,WAAW,EAAO,wBAAwB;KAC9E,CAAC;IACE,CAAA;GAGP,EAAM,eAA0B,EAAU,IACzC,kBAAC,OAAD;IAAK,WAAW,EAAO;cACpB,EAAM,aAAa,GAA4C;KAC9D,SAAS;KACT,IAAI;KACJ,WAAW,EAAK,EAAO,aAAa,EAAU,MAAM,UAAU;KAC/D,CAAC;IACE,CAAA;GAEP,EAAM,eAA0B,EAAU,IACzC,kBAAC,OAAD;IAAK,WAAW,EAAO;cACpB,EAAM,aAAa,GAA4C;KAC9D,MAAM;KACN,SAAS,EAAU,MAAM,WAAW;KACrC,CAAC;IACE,CAAA;GAEP,KACC,kBAAC,OAAD;IACE,WAAW,EACT,EAAO,0BACP,KAA4B,EAAO,qCACpC;cAED,kBAAC,GAAD,EAAqB,CAAA;IACjB,CAAA;GAEJ;;EAGX,EAsBY,IAAS,GAElB,EACE,eAAY,IACZ,aACA,cACA,eAAY,IACZ,aAAU,IACV,GAAG,KAEL,MAGE,kBAAC,OAAD;CACO;CACL,WAAW,EACT,EAAO,eACP,KAAa,EAAO,8BACpB,KAAa,EAAO,8BACpB,KAAW,EAAO,2BAClB,EACD;CACD,GAAI;CAEH;CACG,CAAA,CAGX,EAKY,IAAQ,OAAO,OAAO,GAAM;CAAC;CAAQ,SAAS;CAAa,CAAC"}

package/esm/river/RiverAccordion/RiverAccordion.module-BTU_metB.css

@@ -0,0 +1 @@
+.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB{grid-gap:0;grid-template:"visual""accordion"/1fr;gap:0;display:grid;position:relative}@media screen and (width>=63.25rem){.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB{--gap-width:var(--brand-Grid-spacing-column-gap);--column-and-gap-width:calc((100% + var(--gap-width)) / 12);--4-grid-columns:calc(4 * var(--column-and-gap-width));--7-grid-columns-minus-last-gap:calc((7 * var(--column-and-gap-width)) - var(--gap-width));gap:var(--column-and-gap-width);grid-template-rows:auto}.Primer_Brand__RiverAccordion-module__RiverAccordion__align-start___wbXB3{grid-template-columns:var(--4-grid-columns) var(--7-grid-columns-minus-last-gap);grid-template-areas:"accordion visual"}.Primer_Brand__RiverAccordion-module__RiverAccordion__align-end___Zq4qJ{grid-template-columns:var(--7-grid-columns-minus-last-gap) var(--4-grid-columns);grid-template-areas:"visual accordion"}}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4{padding-inline:var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);padding-block:var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock);position:relative}@media screen and (width>=63.25rem){.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4{--gap-width:var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);--half-column:calc(50% - var(--gap-width) / 2);gap:var(--gap-width);align-items:center}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4.Primer_Brand__RiverAccordion-module__RiverAccordion__align-start___wbXB3{grid-template-columns:var(--half-column) var(--half-column);grid-template-areas:"accordion visual"}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4.Primer_Brand__RiverAccordion-module__RiverAccordion__align-end___Zq4qJ{grid-template-columns:var(--half-column) var(--half-column);grid-template-areas:"visual accordion"}}@media (width>=80rem){.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6{border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx{margin-inline:calc(-1 * var(--brand-RiverAccordion-variant-gridline-spacing-outerInline));margin-block-start:calc(-1 * var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock))}@media screen and (width>=48rem) and (width<=63.24rem){.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB{max-width:618px;margin-inline:auto}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB){border-radius:0}.Primer_Brand__RiverAccordion-module__RiverAccordion__accordionContainer___a80ds{grid-area:accordion}.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx{grid-area:visual}.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6{border-radius:var(--brand-borderRadius-xlarge);grid-template-columns:subgrid;grid-template-rows:subgrid;width:100%;display:grid;overflow:hidden}.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob{opacity:0;width:100%;height:100%;transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default), scale var(--brand-animation-duration-default) var(--brand-animation-easing-default);grid-area:1/1;align-items:center;display:flex;scale:1.05}.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob>*{border-radius:var(--brand-borderRadius-xlarge);-o-object-fit:contain;object-fit:contain;width:100%;height:auto;display:block;overflow:hidden}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob>*{border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob img,.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob picture,.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob video{border-radius:inherit;-o-object-fit:contain;object-fit:contain;width:100%;height:auto;display:block}.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob>* img,.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob>* video{border-radius:inherit;-o-object-fit:cover;object-fit:cover;width:100%;height:100%;display:block}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB{padding:var(--base-size-32);background:var(--brand-RiverAccordion-visual-background,var(--brand-color-canvas-subtle));justify-content:center;align-items:center;display:flex}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB>*{border-radius:var(--brand-borderRadius-large);justify-content:center;align-items:center;max-width:100%;height:auto;display:flex}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB img,.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB picture,.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB video{border-radius:var(--brand-borderRadius-large);max-width:100%;height:100%}@media screen and (width>=63.25rem){.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB){grid-template-columns:1fr 1fr;align-items:stretch;gap:0;padding:0}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB) .Primer_Brand__RiverAccordion-module__RiverAccordion__accordionContainer___a80ds{padding:var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock) var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);flex-direction:column;justify-content:center;display:flex}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4.Primer_Brand__RiverAccordion-module__RiverAccordion__align-start___wbXB3:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB) .Primer_Brand__RiverAccordion-module__RiverAccordion__accordionContainer___a80ds{padding-inline-end:var(--brand-RiverAccordion-variant-gridline-spacing-contentGap)}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4.Primer_Brand__RiverAccordion-module__RiverAccordion__align-end___Zq4qJ:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB) .Primer_Brand__RiverAccordion-module__RiverAccordion__accordionContainer___a80ds{padding-inline-start:var(--brand-RiverAccordion-variant-gridline-spacing-contentGap)}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx{margin:0}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB){height:100%}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB{padding:var(--base-size-64);justify-content:center;align-items:center}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB>*,.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB img,.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB picture,.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB video{border-radius:var(--brand-borderRadius-large)}}:is(.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:first-child) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:first-child,.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(2)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(2),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(3)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(3),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(4)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(4),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(5)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(5),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(6)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(6),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(7)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(7),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(8)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(8),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(9)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(9),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(10)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(10),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:not(:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:first-child){opacity:1;z-index:1;scale:1}.Primer_Brand__RiverAccordion-module__RiverAccordion__accordionContainer___a80ds .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob{clip:rect(0, 0, 0, 0);word-wrap:normal;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.Primer_Brand__RiverAccordion-module__RiverAccordion__item___SheMX{border-bottom:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-block-start:var(--base-size-32);position:relative}@media screen and (width<=63.24rem){.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__item___SheMX:last-child{border-bottom:none}}.Primer_Brand__RiverAccordion-module__RiverAccordion__item___SheMX:not(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2) .Primer_Brand__RiverAccordion-module__RiverAccordion__heading___O56M6{color:var(--brand-color-text-muted)}.Primer_Brand__RiverAccordion-module__RiverAccordion__trigger___1RM50{color:inherit;cursor:pointer;font:inherit;text-align:left;width:100%;padding:0;padding:var(--base-size-4);margin:0;margin:calc(var(--base-size-4) * -1);background:0 0;border:none;justify-content:space-between;align-items:center;display:flex}.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2 .Primer_Brand__RiverAccordion-module__RiverAccordion__trigger___1RM50{cursor:auto;cursor:initial}.Primer_Brand__RiverAccordion-module__RiverAccordion__item___SheMX:not(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2) .Primer_Brand__RiverAccordion-module__RiverAccordion__trigger___1RM50:after{content:"";width:100%;height:100%;display:block;position:absolute}.Primer_Brand__RiverAccordion-module__RiverAccordion__panel___Y4GUN{transition:grid-template-rows var(--brand-animation-duration-default) var(--brand-animation-easing-default), margin-block-start var(--brand-animation-duration-default) var(--brand-animation-easing-default), padding-block-end var(--brand-animation-duration-default) var(--brand-animation-easing-default);grid-template-rows:0fr;margin-block-start:var(--base-size-32);display:grid;overflow-y:clip}.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2 .Primer_Brand__RiverAccordion-module__RiverAccordion__panel___Y4GUN{grid-template-rows:1fr;margin-block-start:var(--base-size-12);padding-block-end:var(--base-size-32)}.Primer_Brand__RiverAccordion-module__RiverAccordion__content___87sh8{align-items:flex-start;gap:var(--base-size-20);flex-direction:column;min-height:0;display:flex}.Primer_Brand__RiverAccordion-module__RiverAccordion__icon___FMAZH{color:var(--brand-color-text-muted);flex-shrink:0;align-items:center;display:flex}.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2 .Primer_Brand__RiverAccordion-module__RiverAccordion__icon___FMAZH{color:var(--brand-color-text-default)}

package/esm/river/RiverAccordion/RiverAccordion.module.js

@@ -1,4 +1,4 @@
-import './RiverAccordion.module-nlZZH3O7.css';var e = {
+import './RiverAccordion.module-BTU_metB.css';var e = {
 	RiverAccordion: "Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB",
 	"RiverAccordion__align-start": "Primer_Brand__RiverAccordion-module__RiverAccordion__align-start___wbXB3",
 	"RiverAccordion__align-end": "Primer_Brand__RiverAccordion-module__RiverAccordion__align-end___Zq4qJ",

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

@@ -1 +1 @@
-{"version":3,"file":"RiverAccordion.module.js","names":[],"sources":["../../../src/river/RiverAccordion/RiverAccordion.module.css"],"sourcesContent":[".RiverAccordion {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-rows: auto auto;\n  grid-template-areas:\n    'visual'\n    'accordion';\n  gap: 0;\n  position: relative;\n}\n\n@media (min-width: 48rem) {\n  .RiverAccordion {\n    --gap-width: var(--brand-Grid-spacing-column-gap);\n    --column-and-gap-width: calc((100% + var(--gap-width)) / 12);\n\n    --4-grid-columns: calc(4 * var(--column-and-gap-width));\n    --7-grid-columns-minus-last-gap: calc((7 * var(--column-and-gap-width)) - var(--gap-width));\n\n    grid-template-rows: auto;\n    gap: var(--column-and-gap-width);\n  }\n\n  .RiverAccordion__align-start {\n    grid-template-columns: var(--4-grid-columns) var(--7-grid-columns-minus-last-gap);\n    grid-template-areas: 'accordion visual';\n  }\n\n  .RiverAccordion__align-end {\n    grid-template-columns: var(--7-grid-columns-minus-last-gap) var(--4-grid-columns);\n    grid-template-areas: 'visual accordion';\n  }\n}\n\n/* Gridline variant */\n\n.RiverAccordion--variant-gridline {\n  position: relative;\n  padding-inline: var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);\n  padding-block: var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock);\n}\n\n@media (min-width: 48rem) {\n  .RiverAccordion--variant-gridline {\n    --gap-width: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);\n    --half-column: calc(50% - var(--gap-width) / 2);\n\n    gap: var(--gap-width);\n    align-items: center;\n  }\n\n  .RiverAccordion--variant-gridline.RiverAccordion__align-start {\n    grid-template-columns: var(--half-column) var(--half-column);\n    grid-template-areas: 'accordion visual';\n  }\n\n  .RiverAccordion--variant-gridline.RiverAccordion__align-end {\n    grid-template-columns: var(--half-column) var(--half-column);\n    grid-template-areas: 'visual accordion';\n  }\n}\n\n@media (min-width: 80rem) {\n  .RiverAccordion--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper {\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) .RiverAccordion__visualsContainer {\n  margin-inline: calc(-1 * var(--brand-RiverAccordion-variant-gridline-spacing-outerInline));\n  margin-block-start: calc(-1 * var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock));\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper:has(.RiverAccordion__visual--has-background) {\n  border-radius: 0;\n}\n\n.RiverAccordion__accordionContainer {\n  grid-area: accordion;\n}\n\n.RiverAccordion__visualsContainer {\n  grid-area: visual;\n}\n\n.RiverAccordion__visualsWrapper {\n  width: 100%;\n  overflow: hidden;\n  border-radius: var(--brand-borderRadius-xlarge);\n  display: grid;\n  grid-template-columns: subgrid;\n  grid-template-rows: subgrid;\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual {\n  grid-column: 1;\n  grid-row: 1;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  opacity: 0;\n  scale: 1.05;\n  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    scale var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual > * {\n  display: block;\n  width: 100%;\n  height: auto;\n  overflow: hidden;\n  border-radius: var(--brand-borderRadius-xlarge);\n  object-fit: contain;\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual > * {\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual img,\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual picture,\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual video {\n  display: block;\n  width: 100%;\n  height: auto;\n  border-radius: inherit;\n  object-fit: contain;\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual > * img,\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual > * video {\n  display: block;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n  object-fit: cover;\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--base-size-32);\n  background: var(--brand-RiverAccordion-visual-background, var(--brand-color-canvas-subtle));\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background > * {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  max-width: 100%;\n  height: auto;\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background img,\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background picture,\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background video {\n  max-width: 100%;\n  height: 100%;\n  border-radius: var(--brand-borderRadius-large);\n}\n\n@media (min-width: 48rem) {\n  .RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) {\n    padding: 0;\n    gap: 0;\n    align-items: stretch;\n    grid-template-columns: 1fr 1fr;\n  }\n\n  .RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) .RiverAccordion__accordionContainer {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    padding: var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock)\n      var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);\n  }\n\n  .RiverAccordion--variant-gridline.RiverAccordion__align-start:has(.RiverAccordion__visual--has-background)\n    .RiverAccordion__accordionContainer {\n    padding-inline-end: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);\n  }\n\n  .RiverAccordion--variant-gridline.RiverAccordion__align-end:has(.RiverAccordion__visual--has-background)\n    .RiverAccordion__accordionContainer {\n    padding-inline-start: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);\n  }\n\n  .RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) .RiverAccordion__visualsContainer {\n    margin: 0;\n  }\n\n  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper:has(.RiverAccordion__visual--has-background) {\n    height: 100%;\n  }\n\n  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background {\n    align-items: center;\n    justify-content: center;\n    padding: var(--base-size-64);\n  }\n\n  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background > *,\n  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background img,\n  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background picture,\n  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background video {\n    border-radius: var(--brand-borderRadius-large);\n  }\n}\n\n/* Show the visual when the corresponding accordion item is open */\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(1)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(1),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(2)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(2),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(3)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(3),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(4)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(4),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(5)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(5),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(6)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(6),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(7)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(7),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(8)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(8),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(9)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(9),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(10)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(10),\n/* Just in case all accordions are somehow closed, show the first visual */\n.RiverAccordion:not(:has(.RiverAccordion__item--open)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(1) {\n  opacity: 1;\n  scale: 1;\n  z-index: 1;\n}\n\n/* Visually hide visuals inside the accordion */\n.RiverAccordion__accordionContainer .RiverAccordion__visual {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  word-wrap: normal;\n  border: 0;\n}\n\n.RiverAccordion__item {\n  position: relative;\n  padding-block-start: var(--base-size-32);\n  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.RiverAccordion__item:not(.RiverAccordion__item--open) .RiverAccordion__heading {\n  color: var(--brand-color-text-muted);\n}\n\n.RiverAccordion__trigger {\n  background: none;\n  border: none;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  margin: 0;\n  padding: 0;\n  text-align: left;\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--base-size-4);\n  margin: calc(var(--base-size-4) * -1);\n}\n\n.RiverAccordion__item--open .RiverAccordion__trigger {\n  cursor: initial;\n}\n\n.RiverAccordion__item:not(.RiverAccordion__item--open) .RiverAccordion__trigger::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.RiverAccordion__panel {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    margin-block-start var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    padding-block-end var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n  margin-block-start: var(--base-size-32);\n  overflow-y: clip;\n}\n\n.RiverAccordion__item--open .RiverAccordion__panel {\n  margin-block-start: var(--base-size-12);\n  padding-block-end: var(--base-size-32);\n  grid-template-rows: 1fr;\n}\n\n.RiverAccordion__content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  min-height: 0;\n  gap: var(--base-size-20);\n}\n\n.RiverAccordion__icon {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  color: var(--brand-color-text-muted);\n}\n\n.RiverAccordion__item--open .RiverAccordion__icon {\n  color: var(--brand-color-text-default);\n}\n"],"mappings":""}
+{"version":3,"file":"RiverAccordion.module.js","names":[],"sources":["../../../src/river/RiverAccordion/RiverAccordion.module.css"],"sourcesContent":[".RiverAccordion {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-rows: auto auto;\n  grid-template-areas:\n    'visual'\n    'accordion';\n  gap: 0;\n  position: relative;\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverAccordion {\n    --gap-width: var(--brand-Grid-spacing-column-gap);\n    --column-and-gap-width: calc((100% + var(--gap-width)) / 12);\n\n    --4-grid-columns: calc(4 * var(--column-and-gap-width));\n    --7-grid-columns-minus-last-gap: calc((7 * var(--column-and-gap-width)) - var(--gap-width));\n\n    grid-template-rows: auto;\n    gap: var(--column-and-gap-width);\n  }\n\n  .RiverAccordion__align-start {\n    grid-template-columns: var(--4-grid-columns) var(--7-grid-columns-minus-last-gap);\n    grid-template-areas: 'accordion visual';\n  }\n\n  .RiverAccordion__align-end {\n    grid-template-columns: var(--7-grid-columns-minus-last-gap) var(--4-grid-columns);\n    grid-template-areas: 'visual accordion';\n  }\n}\n\n/* Gridline variant */\n\n.RiverAccordion--variant-gridline {\n  position: relative;\n  padding-inline: var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);\n  padding-block: var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock);\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverAccordion--variant-gridline {\n    --gap-width: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);\n    --half-column: calc(50% - var(--gap-width) / 2);\n\n    gap: var(--gap-width);\n    align-items: center;\n  }\n\n  .RiverAccordion--variant-gridline.RiverAccordion__align-start {\n    grid-template-columns: var(--half-column) var(--half-column);\n    grid-template-areas: 'accordion visual';\n  }\n\n  .RiverAccordion--variant-gridline.RiverAccordion__align-end {\n    grid-template-columns: var(--half-column) var(--half-column);\n    grid-template-areas: 'visual accordion';\n  }\n}\n\n@media (min-width: 80rem) {\n  .RiverAccordion--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper {\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) .RiverAccordion__visualsContainer {\n  margin-inline: calc(-1 * var(--brand-RiverAccordion-variant-gridline-spacing-outerInline));\n  margin-block-start: calc(-1 * var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock));\n}\n\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n  .RiverAccordion {\n    max-width: 618px;\n    margin-inline: auto;\n  }\n\n  .RiverAccordion--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper:has(.RiverAccordion__visual--has-background) {\n  border-radius: 0;\n}\n\n.RiverAccordion__accordionContainer {\n  grid-area: accordion;\n}\n\n.RiverAccordion__visualsContainer {\n  grid-area: visual;\n}\n\n.RiverAccordion__visualsWrapper {\n  width: 100%;\n  overflow: hidden;\n  border-radius: var(--brand-borderRadius-xlarge);\n  display: grid;\n  grid-template-columns: subgrid;\n  grid-template-rows: subgrid;\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual {\n  grid-column: 1;\n  grid-row: 1;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  opacity: 0;\n  scale: 1.05;\n  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    scale var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual > * {\n  display: block;\n  width: 100%;\n  height: auto;\n  overflow: hidden;\n  border-radius: var(--brand-borderRadius-xlarge);\n  object-fit: contain;\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual > * {\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual img,\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual picture,\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual video {\n  display: block;\n  width: 100%;\n  height: auto;\n  border-radius: inherit;\n  object-fit: contain;\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual > * img,\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual > * video {\n  display: block;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n  object-fit: cover;\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--base-size-32);\n  background: var(--brand-RiverAccordion-visual-background, var(--brand-color-canvas-subtle));\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background > * {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  max-width: 100%;\n  height: auto;\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background img,\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background picture,\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background video {\n  max-width: 100%;\n  height: 100%;\n  border-radius: var(--brand-borderRadius-large);\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) {\n    padding: 0;\n    gap: 0;\n    align-items: stretch;\n    grid-template-columns: 1fr 1fr;\n  }\n\n  .RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) .RiverAccordion__accordionContainer {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    padding: var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock)\n      var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);\n  }\n\n  .RiverAccordion--variant-gridline.RiverAccordion__align-start:has(.RiverAccordion__visual--has-background)\n    .RiverAccordion__accordionContainer {\n    padding-inline-end: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);\n  }\n\n  .RiverAccordion--variant-gridline.RiverAccordion__align-end:has(.RiverAccordion__visual--has-background)\n    .RiverAccordion__accordionContainer {\n    padding-inline-start: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);\n  }\n\n  .RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) .RiverAccordion__visualsContainer {\n    margin: 0;\n  }\n\n  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper:has(.RiverAccordion__visual--has-background) {\n    height: 100%;\n  }\n\n  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background {\n    align-items: center;\n    justify-content: center;\n    padding: var(--base-size-64);\n  }\n\n  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background > *,\n  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background img,\n  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background picture,\n  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background video {\n    border-radius: var(--brand-borderRadius-large);\n  }\n}\n\n/* Show the visual when the corresponding accordion item is open */\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(1)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(1),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(2)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(2),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(3)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(3),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(4)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(4),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(5)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(5),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(6)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(6),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(7)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(7),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(8)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(8),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(9)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(9),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(10)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(10),\n/* Just in case all accordions are somehow closed, show the first visual */\n.RiverAccordion:not(:has(.RiverAccordion__item--open)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(1) {\n  opacity: 1;\n  scale: 1;\n  z-index: 1;\n}\n\n/* Visually hide visuals inside the accordion */\n.RiverAccordion__accordionContainer .RiverAccordion__visual {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  word-wrap: normal;\n  border: 0;\n}\n\n.RiverAccordion__item {\n  position: relative;\n  padding-block-start: var(--base-size-32);\n  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n@media screen and (max-width: 63.24rem) {\n  .RiverAccordion--variant-gridline .RiverAccordion__item:last-child {\n    border-bottom: none;\n  }\n}\n\n.RiverAccordion__item:not(.RiverAccordion__item--open) .RiverAccordion__heading {\n  color: var(--brand-color-text-muted);\n}\n\n.RiverAccordion__trigger {\n  background: none;\n  border: none;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  margin: 0;\n  padding: 0;\n  text-align: left;\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--base-size-4);\n  margin: calc(var(--base-size-4) * -1);\n}\n\n.RiverAccordion__item--open .RiverAccordion__trigger {\n  cursor: initial;\n}\n\n.RiverAccordion__item:not(.RiverAccordion__item--open) .RiverAccordion__trigger::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.RiverAccordion__panel {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    margin-block-start var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    padding-block-end var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n  margin-block-start: var(--base-size-32);\n  overflow-y: clip;\n}\n\n.RiverAccordion__item--open .RiverAccordion__panel {\n  margin-block-start: var(--base-size-12);\n  padding-block-end: var(--base-size-32);\n  grid-template-rows: 1fr;\n}\n\n.RiverAccordion__content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  min-height: 0;\n  gap: var(--base-size-20);\n}\n\n.RiverAccordion__icon {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  color: var(--brand-color-text-muted);\n}\n\n.RiverAccordion__item--open .RiverAccordion__icon {\n  color: var(--brand-color-text-default);\n}\n"],"mappings":""}

package/esm/river/RiverBreakout/RiverBreakout.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { RiverProps } from '../River';
+import { type RiverVisualProps } from '../River/River';
 export declare const RiverBreakoutVariants: readonly ["default", "gridline"];
 export type RiverBreakoutVariant = (typeof RiverBreakoutVariants)[number];
 type RiverBreakoutProps = Omit<RiverProps, 'align' | 'imageTextRatio'> & {
@@ -10,7 +11,7 @@ type RiverBreakoutProps = Omit<RiverProps, 'align' | 'imageTextRatio'> & {
     variant?: RiverBreakoutVariant;
 };
 export declare const RiverBreakout: React.ForwardRefExoticComponent<Omit<RiverBreakoutProps, "ref"> & React.RefAttributes<HTMLElement>> & {
-    Visual: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<import("..").RiverVisualProps>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Visual: React.ForwardRefExoticComponent<Omit<RiverVisualProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Content: React.ForwardRefExoticComponent<Omit<import("..").RiverContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     A11yHeading: ({ as, children }: React.PropsWithChildren<{
         as?: "h2" | "h3";

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

@@ -1 +1 @@
-{"version":3,"file":"RiverBreakout.d.ts","sourceRoot":"","sources":["../../../src/river/RiverBreakout/RiverBreakout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAE5C,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAA;AASnC,eAAO,MAAM,qBAAqB,kCAAmC,CAAA;AACrE,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEzE,KAAK,kBAAkB,GAAG,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,gBAAgB,CAAC,GAAG;IACvE;;;OAGG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA;AA6CD,eAAO,MAAM,aAAa;;;oCANkB,KAAK,CAAC,iBAAiB,CAAC;QAAC,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;KAAC,CAAC;CAMoB,CAAA"}
+{"version":3,"file":"RiverBreakout.d.ts","sourceRoot":"","sources":["../../../src/river/RiverBreakout/RiverBreakout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAE5C,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAA;AACnC,OAAO,EAAsC,KAAK,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AAQzF,eAAO,MAAM,qBAAqB,kCAAmC,CAAA;AACrE,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEzE,KAAK,kBAAkB,GAAG,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,gBAAgB,CAAC,GAAG;IACvE;;;OAGG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA;AA2DD,eAAO,MAAM,aAAa;;;oCAVkB,KAAK,CAAC,iBAAiB,CAAC;QAAC,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;KAAC,CAAC;CAUO,CAAA"}

package/esm/river/RiverBreakout/RiverBreakout.js

@@ -5,31 +5,35 @@ import r from "../../component-helpers/shared.module.js";
 import i from "../river-shared.module.js";
 import { RiverContent as a, Visual as o } from "../River/River.js";
 import s from "../../findElementInChildren.js";
-import { forwardRef as c } from "react";
-import { jsx as l } from "react/jsx-runtime";
+import c, { forwardRef as l } from "react";
+import { jsx as u } from "react/jsx-runtime";
 //#region src/river/RiverBreakout/RiverBreakout.tsx
-var u = ["default", "gridline"], d = c(({ animate: n, className: a, children: o, style: c, variant: u = "default", ...d }, p) => {
-	let { classes: m, styles: h } = t(n), g = s(o, "b") || s(o, "em") ? "muted" : "default";
-	return s(o, f) || (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("RiverBreakout: A11yHeading child is required. This element will not be visible, only read by screenreaders."), /* @__PURE__ */ l("section", {
-		ref: p,
-		className: e(i.RiverBreakout, u === "gridline" && i["RiverBreakout--variant-gridline"], u === "gridline" && r.gridline, g === "muted" && i["RiverBreakout--muted"], m, a),
+var d = ["default", "gridline"], f = l(({ animate: n, className: a, children: o, style: l, variant: d = "default", ...f }, h) => {
+	let { classes: g, styles: _ } = t(n), v = c.Children.map(o, (t) => c.isValidElement(t) && t.type === m ? c.cloneElement(t, { className: e(t.props.className, d === "gridline" && i["River__visual--has-background"]) }) : t), y = s(o, "b") || s(o, "em") ? "muted" : "default";
+	return s(o, p) || (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("RiverBreakout: A11yHeading child is required. This element will not be visible, only read by screenreaders."), /* @__PURE__ */ u("section", {
+		ref: h,
+		className: e(i.RiverBreakout, d === "gridline" && i["RiverBreakout--variant-gridline"], d === "gridline" && r.gridline, y === "muted" && i["RiverBreakout--muted"], g, a),
 		style: {
-			...h,
-			...c
+			..._,
+			...l
 		},
-		...d,
-		children: o
+		...f,
+		children: v
 	});
-}), f = ({ as: e = "h3", children: t }) => /* @__PURE__ */ l(n, {
+}), p = ({ as: e = "h3", children: t }) => /* @__PURE__ */ u(n, {
 	className: "visually-hidden",
 	as: e,
 	children: t
-}), p = Object.assign(d, {
-	Visual: o,
+}), m = l(({ className: e, ...t }, n) => /* @__PURE__ */ u(o, {
+	ref: n,
+	className: e,
+	...t
+})), h = Object.assign(f, {
+	Visual: m,
 	Content: a,
-	A11yHeading: f
+	A11yHeading: p
 });
 //#endregion
-export { p as RiverBreakout, u as RiverBreakoutVariants };
+export { h as RiverBreakout, d as RiverBreakoutVariants };
 
 //# sourceMappingURL=RiverBreakout.js.map

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

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

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

@@ -35,6 +35,7 @@ export type RiverBreakoutTabsA11yHeadingProps = React.PropsWithChildren<{
 export type RiverBreakoutTabsHeadingProps = HeadingProps;
 export type RiverBreakoutTabsContentProps = React.HTMLAttributes<HTMLDivElement>;
 export type RiverBreakoutTabsIconProps = IconProps;
+export type RiverBreakoutTabsVisualProps = RiverVisualProps;
 /**
  * Use RiverBreakoutTabs to showcase multiple feature stories within a single immersive surface.
  */

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;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"}
+{"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;AAElD,MAAM,MAAM,4BAA4B,GAAG,gBAAgB,CAAA;AAmc3D;;GAEG;AACH,eAAO,MAAM,iBAAiB;2BAxeL,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;;;;wCA0C4B,iCAAiC;iDA6B/B,6BAA6B;mEAZ7F,6BAA6B;gCAX4B,0BAA0B;yBAR3C,0BAA0B;;CAwbnE,CAAA"}