@primer/react-brand 0.68.0-rc.0963e67e → 0.68.0-rc.20c2136f

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

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

package/esm/river/river-shared.module-D0AV93uz.css

@@ -0,0 +1 @@
+.Primer_Brand__river-shared-module__River___PCP5W{grid-gap:var(--brand-River-spacing-inner);gap:var(--brand-River-spacing-inner);padding-inline:var(--brand-River-spacing-outerInline);padding-block:var(--brand-River-spacing-outerBlock);grid-auto-rows:min-content;display:grid;container-type:inline-size}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX{padding-inline:var(--brand-River-variant-gridline-spacing-outerInline);padding-block:var(--brand-River-variant-gridline-spacing-outerBlock);gap:var(--base-size-32);position:relative}@media screen and (width>=48rem){.Primer_Brand__river-shared-module__River--variant-gridline___e27QX{gap:var(--base-size-28)}}@media screen and (width>=80rem){.Primer_Brand__river-shared-module__River--variant-gridline___e27QX{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__river-shared-module__River--align-center___4igQp{text-align:center}.Primer_Brand__river-shared-module__River__content___udxiD{order:2}.Primer_Brand__river-shared-module__River__visual--fill-media___aXDjy img,.Primer_Brand__river-shared-module__River__visual--fill-media___aXDjy picture,.Primer_Brand__river-shared-module__River__visual--fill-media___aXDjy video{-o-object-fit:cover;object-fit:cover;width:100%;height:100%}.Primer_Brand__river-shared-module__River__visual--rounded___noFTs{border-radius:var(--brand-borderRadius-large);overflow:hidden}.Primer_Brand__river-shared-module__River__visual--has-shadow___5__Jy{box-shadow:var(--brand-River-visual-shadow)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{background-color:var(--brand-color-canvas-subtle);padding:var(--base-size-32);margin-inline:calc(-1 * var(--brand-River-variant-gridline-spacing-outerInline));border-radius:0;justify-content:center;align-items:center;display:flex}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA img,.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA picture,.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA video{border-radius:var(--brand-borderRadius-large);width:auto;max-width:100%;height:auto}@media screen and (width<=47.99rem){.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{justify-content:flex-end;align-items:flex-end;padding-block-end:0;padding-inline-end:0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA img,.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA picture,.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA video{border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:0}}@media screen and (width>=48rem) and (width<=63.24rem){.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{align-items:flex-end;padding-block-end:0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA img,.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA picture,.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA video{border-end-end-radius:0;border-end-start-radius:0}}.Primer_Brand__river-shared-module__River__heading___e5fwB{margin-bottom:var(--brand-River-heading-margin)}.Primer_Brand__river-shared-module__River__call-to-action___yOsJI{margin-top:var(--base-size-20)}.Primer_Brand__river-shared-module__River__text___HCqnL strong,.Primer_Brand__river-shared-module__River__text___HCqnL b{font-weight:var(--base-text-weight-normal);color:var(--brand-color-text-default)}.Primer_Brand__river-shared-module__River__heading___e5fwB code,.Primer_Brand__river-shared-module__River__text___HCqnL code{font-size:inherit;background-color:var(--brand-color-canvas-subtle);padding:0 var(--base-size-4) var(--base-size-2);margin-inline:var(--base-size-2);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-small);box-shadow:var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default);font-family:var(--brand-fontStack-monospace)!important}.Primer_Brand__river-shared-module__River__text___HCqnL code{padding:var(--base-size-2) var(--base-size-4) 0}.Primer_Brand__river-shared-module__River__heading-inner___XAylb:has(code){line-height:1.8lh}@media screen and (width>=64rem){.Primer_Brand__river-shared-module__River__heading-inner___XAylb:has(code){line-height:2.1lh}}.Primer_Brand__river-shared-module__River__text___HCqnL:has(code){line-height:1.1lh}.Primer_Brand__river-shared-module__River__trailingComponent___jDuou{margin-block-start:var(--brand-River-spacing-inner)}.Primer_Brand__river-shared-module__River__trailingComponent--divider___mTL35{border-top:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-block-start:var(--brand-River-spacing-inner)}.Primer_Brand__river-shared-module__River__label___ENXiR{margin-block-end:var(--brand-River-label-margin)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-start___PjR7w .Primer_Brand__river-shared-module__River__visual___s4zuj{order:1}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-start___PjR7w .Primer_Brand__river-shared-module__River__content___udxiD{order:2}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-end___PI17m .Primer_Brand__river-shared-module__River__content___udxiD{order:1}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-end___PI17m .Primer_Brand__river-shared-module__River__visual___s4zuj{order:2}@media screen and (width<=63.24rem){.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-start___PjR7w .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{margin-block-start:calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock))}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-end___PI17m .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{margin-block-end:calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock))}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-center___4igQp .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{margin-block-start:calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock))}}@media screen and (width>=63.25rem){.Primer_Brand__river-shared-module__River___PCP5W{grid-template-rows:initial}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{padding:var(--base-size-64);margin:0}.Primer_Brand__river-shared-module__River__content___udxiD{order:initial}.Primer_Brand__river-shared-module__River--50-50___37Rpp{grid-template-columns:[content]1fr[visual]1fr}.Primer_Brand__river-shared-module__River--60-40___3M2aV{grid-template-columns:[content]4fr[visual]6fr}.Primer_Brand__river-shared-module__River--align-start___PjR7w{grid-template-areas:"content visual"}.Primer_Brand__river-shared-module__River--align-end___PI17m{grid-template-areas:"visual content"}.Primer_Brand__river-shared-module__River--align-end___PI17m.Primer_Brand__river-shared-module__River--60-40___3M2aV{grid-template-columns:[visual]6fr[content]4fr}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-start___PjR7w.Primer_Brand__river-shared-module__River--50-50___37Rpp:not(:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA)) .Primer_Brand__river-shared-module__River__visual___s4zuj{margin-inline-start:calc(var(--base-size-80) + var(--base-size-8))}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-end___PI17m.Primer_Brand__river-shared-module__River--50-50___37Rpp:not(:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA)) .Primer_Brand__river-shared-module__River__visual___s4zuj{margin-inline-end:calc(var(--base-size-80) + var(--base-size-8))}.Primer_Brand__river-shared-module__River__content___udxiD{grid-area:content;align-content:center;display:grid}.Primer_Brand__river-shared-module__River--50-50___37Rpp:not(.Primer_Brand__river-shared-module__River--variant-gridline___e27QX) .Primer_Brand__river-shared-module__River__body-text___K4T6H,.Primer_Brand__river-shared-module__River--50-50___37Rpp:not(.Primer_Brand__river-shared-module__River--variant-gridline___e27QX) .Primer_Brand__river-shared-module__River__heading___e5fwB{max-width:400px}.Primer_Brand__river-shared-module__River--align-start___PjR7w:not(.Primer_Brand__river-shared-module__River--variant-gridline___e27QX) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline-end:var(--base-size-128)}.Primer_Brand__river-shared-module__River--align-end___PI17m:not(.Primer_Brand__river-shared-module__River--variant-gridline___e27QX) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline-start:var(--base-size-128)}.Primer_Brand__river-shared-module__River__content--align-block-end___w7f2E{align-content:end}.Primer_Brand__river-shared-module__River__visual___s4zuj{grid-area:visual}.Primer_Brand__river-shared-module__River--align-center___4igQp{grid-auto-rows:min-content;grid-template-columns:initial}.Primer_Brand__river-shared-module__River--align-center___4igQp .Primer_Brand__river-shared-module__River__content___udxiD,.Primer_Brand__river-shared-module__River--align-center___4igQp .Primer_Brand__river-shared-module__River__visual___s4zuj{grid-area:unset;justify-self:center}.Primer_Brand__river-shared-module__River--align-center___4igQp .Primer_Brand__river-shared-module__River__body-text___K4T6H{justify-self:center;max-width:600px}.Primer_Brand__river-shared-module__River--align-center___4igQp .Primer_Brand__river-shared-module__River__visual___s4zuj{margin-bottom:var(--brand-River-spacing-inner)}.Primer_Brand__river-shared-module__River--align-center___4igQp .Primer_Brand__river-shared-module__River__content___udxiD{margin-top:var(--brand-River-spacing-inner)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX:not(.Primer_Brand__river-shared-module__River--align-center___4igQp):has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA){gap:0;padding:0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--50-50___37Rpp:not(.Primer_Brand__river-shared-module__River--align-center___4igQp):has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA){grid-template-columns:1fr 1fr}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--60-40___3M2aV:not(.Primer_Brand__river-shared-module__River--align-center___4igQp):has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA){grid-template-columns:560fr 676fr}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-end___PI17m.Primer_Brand__river-shared-module__River--60-40___3M2aV:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA){grid-template-columns:676fr 560fr}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-start___PjR7w:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline-start:var(--base-size-64);padding-inline-end:var(--brand-River-spacing-inner);padding-block:var(--brand-River-variant-gridline-spacing-outerBlock)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--50-50___37Rpp.Primer_Brand__river-shared-module__River--align-start___PjR7w:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline-end:calc(var(--base-size-80) + var(--base-size-32))}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--60-40___3M2aV.Primer_Brand__river-shared-module__River--align-start___PjR7w:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline-end:var(--base-size-128)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-end___PI17m:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline-start:var(--brand-River-spacing-inner);padding-inline-end:var(--base-size-64);padding-block:var(--brand-River-variant-gridline-spacing-outerBlock)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--50-50___37Rpp.Primer_Brand__river-shared-module__River--align-end___PI17m:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline-start:calc(var(--base-size-80) + var(--base-size-32))}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--60-40___3M2aV.Primer_Brand__river-shared-module__River--align-end___PI17m:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline-start:var(--base-size-128)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-start___PjR7w:not(:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA)) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline-end:var(--brand-River-spacing-inner)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-end___PI17m:not(:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA)) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline-start:var(--brand-River-spacing-inner)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--50-50___37Rpp:not(.Primer_Brand__river-shared-module__River--align-center___4igQp) .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{margin-inline:0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-center___4igQp:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA){padding:0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-center___4igQp .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{width:100%;margin:0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-center___4igQp .Primer_Brand__river-shared-module__River__visual___s4zuj{margin-bottom:0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-center___4igQp{gap:0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-center___4igQp .Primer_Brand__river-shared-module__River__content___udxiD{margin-top:0;margin-bottom:var(--base-size-64)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-center___4igQp:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline:var(--brand-River-variant-gridline-spacing-outerInline);padding-block-start:var(--brand-River-variant-gridline-spacing-outerBlock)}}.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F{gap:var(--brand-RiverBreakout-spacing-inner);flex-direction:column;padding-block-start:var(--brand-River-spacing-outerBlock);padding-block-end:var(--brand-River-spacing-outerBlock);display:flex}.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__text___HCqnL{max-width:37.5rem;color:var(--brand-color-text-default);font-size:var(--brand-text-size-500);font-weight:var(--brand-heading-weight-500);letter-spacing:var(--brand-heading-letterSpacing-500);line-height:var(--brand-text-lineHeight-500)}.Primer_Brand__river-shared-module__RiverBreakout--muted___ndl_I .Primer_Brand__river-shared-module__River__text___HCqnL{color:var(--brand-color-text-muted)}.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__text___HCqnL em,.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__text___HCqnL b{color:var(--brand-color-text-default);font-style:normal;font-weight:inherit}.Primer_Brand__river-shared-module__RiverBreakout__hiddenHeading___wqngh{clip:rect(1px, 1px, 1px, 1px);border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__call-to-action___yOsJI{padding-block-start:var(--base-size-12)}@media screen and (width>=48rem){.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__content___udxiD{grid-gap:var(--brand-River-spacing-inner);gap:var(--brand-River-spacing-inner);grid-row-gap:var(--brand-River-spacing-innerY);row-gap:var(--brand-River-spacing-innerY);grid-template-columns:5fr 3fr;grid-template-areas:"text trailingComponent""cta trailingComponent";grid-auto-rows:auto 1fr;display:grid}.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__text___HCqnL{grid-area:text}.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__call-to-action___yOsJI{grid-area:cta;margin-block:0}.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__trailingComponent___jDuou{grid-area:trailingComponent;justify-self:flex-end;margin-block-start:0}}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H{padding-inline:var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);gap:0;padding-block-start:var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);padding-block-end:0;position:relative}@media screen and (width<=63.24rem){.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H{width:100%;max-width:38.625rem;margin-inline:auto}}@media screen and (width>=618px){.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}@media screen and (width>=63.25rem){.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H{border-inline:none}}@media screen and (width>=1300px){.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual___s4zuj{overflow:hidden}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--rounded___noFTs{border-radius:var(--brand-borderRadius-large)}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__content___udxiD{gap:var(--brand-RiverBreakout-variant-gridline-spacing-contentGap);padding-block-start:var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);padding-block-end:var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd)}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__call-to-action___yOsJI{padding-block-start:var(--base-size-12)}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__trailingComponent--divider___mTL35{border-top:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);margin-inline:calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerInline));padding-block-start:var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);padding-block-end:var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);padding-inline:var(--brand-RiverBreakout-variant-gridline-spacing-outerInline)}@media screen and (width>=48rem) and (width<=63.24rem){.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__content___udxiD{flex-direction:column;display:flex}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__trailingComponent___jDuou{margin-block-start:0}}@media screen and (width>=63.25rem){.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H:has(.Primer_Brand__river-shared-module__River__trailingComponent--divider___mTL35){padding-block-end:0}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__content___udxiD{grid-template-columns:1fr 31rem;grid-template-areas:"text trailingComponent""cta trailingComponent";grid-template-columns:1fr var(--brand-RiverBreakout-gridline-trailing-width,31rem);grid-gap:var(--brand-RiverBreakout-variant-gridline-spacing-contentGap);gap:var(--brand-RiverBreakout-variant-gridline-spacing-contentGap);flex:1;grid-template-rows:auto 1fr;padding-block:0;display:grid}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__text___HCqnL{grid-area:text;padding-block-start:var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock)}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__call-to-action___yOsJI{grid-area:cta;margin-block:0;padding-block-end:var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd)}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__trailingComponent___jDuou{grid-area:trailingComponent;margin-block-start:0}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__trailingComponent--divider___mTL35{border-top:none;border-left:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-inline:0;padding-block:0;padding-inline-start:var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);align-self:stretch;margin-block:0;margin-inline:0;padding-block-start:var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);padding-block-end:var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd)}}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA){padding-block-start:0}.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{background-color:var(--brand-color-canvas-subtle);border-radius:0;justify-content:center;align-items:center;display:flex;overflow:hidden}.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA img,.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA picture,.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA video{border-radius:var(--brand-borderRadius-large);width:auto;max-width:100%;height:auto}.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA [data-video-player-container]{border-radius:var(--brand-borderRadius-large)}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{margin-inline:calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerInline));padding:var(--base-size-32)}@media screen and (width<=47.99rem){.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{align-items:flex-end;padding-block-end:0}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA img,.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA picture,.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA video,.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA [data-video-player-container]{border-end-end-radius:0;border-end-start-radius:0}}@media screen and (width>=48rem) and (width<=63.24rem){.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{align-items:flex-end;padding-block-end:0}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA img,.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA picture,.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA video,.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA [data-video-player-container]{border-end-end-radius:0;border-end-start-radius:0}}@media screen and (width>=63.25rem){.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{padding:var(--base-size-64);align-items:flex-end;padding-block-end:0}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA img,.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA picture,.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA video,.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA [data-video-player-container]{border-end-end-radius:0;border-end-start-radius:0}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA.Primer_Brand__river-shared-module__River__visual--rounded___noFTs{border-radius:0}}

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

@@ -1,4 +1,4 @@
-import './river-shared.module-Cc5R8-Kl.css';var e = {
+import './river-shared.module-D0AV93uz.css';var e = {
 	River: "Primer_Brand__river-shared-module__River___PCP5W",
 	"River--variant-gridline": "Primer_Brand__river-shared-module__River--variant-gridline___e27QX",
 	"River--align-center": "Primer_Brand__river-shared-module__River--align-center___4igQp",

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

@@ -1 +1 @@
-{"version":3,"file":"river-shared.module.js","names":[],"sources":["../../src/river/river-shared.module.css"],"sourcesContent":[".River {\n  display: grid;\n  gap: var(--brand-River-spacing-inner);\n  grid-auto-rows: min-content;\n  padding-inline: var(--brand-River-spacing-outerInline);\n  padding-block: var(--brand-River-spacing-outerBlock);\n  container-type: inline-size;\n}\n\n.River--variant-gridline {\n  position: relative;\n  padding-inline: var(--brand-River-variant-gridline-spacing-outerInline);\n  padding-block: var(--brand-River-variant-gridline-spacing-outerBlock);\n  gap: var(--base-size-32);\n}\n\n@media screen and (min-width: 48rem) {\n  .River--variant-gridline {\n    gap: var(--base-size-28);\n  }\n}\n\n.River--variant-gridline::before,\n.River--variant-gridline::after {\n  content: '';\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 100vw;\n  height: 0;\n  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  z-index: 1;\n}\n\n.River--variant-gridline::before {\n  top: 0;\n}\n\n.River--variant-gridline::after {\n  bottom: 0;\n}\n\n@media screen and (min-width: 80rem) {\n  .River--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.River--align-center {\n  text-align: center;\n}\n\n.River__content {\n  order: 2;\n}\n\n.River__visual--fill-media img,\n.River__visual--fill-media picture,\n.River__visual--fill-media video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.River__visual--rounded {\n  overflow: hidden;\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.River__visual--has-shadow {\n  box-shadow: var(--brand-River-visual-shadow);\n}\n\n.River--variant-gridline .River__visual--has-background {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--brand-color-canvas-subtle);\n  padding: var(--base-size-32);\n  border-radius: 0;\n  margin-inline: calc(-1 * var(--brand-River-variant-gridline-spacing-outerInline));\n}\n\n.River--variant-gridline .River__visual--has-background img,\n.River--variant-gridline .River__visual--has-background picture,\n.River--variant-gridline .River__visual--has-background video {\n  max-width: 100%;\n  height: auto;\n  width: auto;\n  border-radius: var(--brand-borderRadius-large);\n}\n\n@media screen and (max-width: 47.99rem) {\n  .River--variant-gridline .River__visual--has-background {\n    align-items: flex-end;\n    justify-content: flex-end;\n    padding-block-end: 0;\n    padding-inline-end: 0;\n  }\n\n  .River--variant-gridline .River__visual--has-background img,\n  .River--variant-gridline .River__visual--has-background picture,\n  .River--variant-gridline .River__visual--has-background video {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n    border-start-end-radius: 0;\n  }\n}\n\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n  .River--variant-gridline .River__visual--has-background {\n    align-items: flex-end;\n    padding-block-end: 0;\n  }\n\n  .River--variant-gridline .River__visual--has-background img,\n  .River--variant-gridline .River__visual--has-background picture,\n  .River--variant-gridline .River__visual--has-background video {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n}\n\n.River__heading {\n  margin-bottom: var(--brand-River-heading-margin);\n}\n\n.River__call-to-action {\n  margin-top: var(--base-size-20);\n}\n\n.River__text strong,\n.River__text b {\n  font-weight: var(--base-text-weight-normal);\n  color: var(--brand-color-text-default);\n}\n\n.River__heading code,\n.River__text code {\n  font-size: inherit;\n  font-family: var(--brand-fontStack-monospace) !important;\n  background-color: var(--brand-color-canvas-subtle);\n  padding: 0 var(--base-size-4) var(--base-size-2);\n  margin-inline: var(--base-size-2);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-small);\n  box-shadow: var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default);\n}\n\n.River__text code {\n  padding: var(--base-size-2) var(--base-size-4) 0;\n}\n\n.River__heading-inner:has(code) {\n  line-height: calc(1lh * 1.8);\n}\n\n@media screen and (min-width: 64rem) {\n  .River__heading-inner:has(code) {\n    line-height: calc(1lh * 2.1);\n  }\n}\n\n.River__text:has(code) {\n  line-height: calc(1lh * 1.1);\n}\n\n.River__trailingComponent {\n  margin-block-start: var(--brand-River-spacing-inner);\n}\n\n.River__trailingComponent--divider {\n  padding-block-start: var(--brand-River-spacing-inner);\n  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.River__label {\n  margin-block-end: var(--brand-River-label-margin);\n}\n\n.River--variant-gridline.River--align-start .River__visual {\n  order: 1;\n}\n\n.River--variant-gridline.River--align-start .River__content {\n  order: 2;\n}\n\n.River--variant-gridline.River--align-end .River__content {\n  order: 1;\n}\n\n.River--variant-gridline.River--align-end .River__visual {\n  order: 2;\n}\n\n@media screen and (max-width: 63.24rem) {\n  .River--variant-gridline.River--align-start .River__visual--has-background {\n    margin-block-start: calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock));\n  }\n\n  .River--variant-gridline.River--align-end .River__visual--has-background {\n    margin-block-end: calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock));\n  }\n\n  .River--variant-gridline.River--align-center .River__visual--has-background {\n    margin-block-start: calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock));\n  }\n}\n\n/* Large breakpoint and up */\n@media screen and (min-width: 63.25rem) {\n  .River {\n    grid-template-rows: unset;\n  }\n\n  .River--variant-gridline .River__visual--has-background {\n    padding: var(--base-size-64);\n    margin: 0;\n  }\n\n  .River__content {\n    order: unset;\n  }\n\n  .River--50-50 {\n    grid-template-columns: [content] 1fr [visual] 1fr;\n  }\n\n  .River--60-40 {\n    grid-template-columns: [content] 4fr [visual] 6fr;\n  }\n\n  .River--align-start {\n    grid-template-areas: 'content visual';\n  }\n\n  .River--align-end {\n    grid-template-areas: 'visual content';\n  }\n\n  .River--align-end.River--60-40 {\n    grid-template-columns: [visual] 6fr [content] 4fr;\n  }\n\n  .River--variant-gridline.River--align-start.River--50-50:not(:has(.River__visual--has-background)) .River__visual {\n    margin-inline-start: calc(var(--base-size-80) + var(--base-size-8));\n  }\n\n  .River--variant-gridline.River--align-end.River--50-50:not(:has(.River__visual--has-background)) .River__visual {\n    margin-inline-end: calc(var(--base-size-80) + var(--base-size-8));\n  }\n\n  .River__content {\n    display: grid;\n    align-content: center;\n    grid-area: content;\n  }\n\n  .River--50-50:not(.River--variant-gridline) .River__body-text,\n  .River--50-50:not(.River--variant-gridline) .River__heading {\n    max-width: 400px;\n  }\n\n  .River--align-start:not(.River--variant-gridline) .River__content {\n    padding-inline-end: var(--base-size-128);\n  }\n\n  .River--align-end:not(.River--variant-gridline) .River__content {\n    padding-inline-start: var(--base-size-128);\n  }\n\n  .River__content--align-block-end {\n    align-content: end;\n  }\n\n  .River__visual {\n    grid-area: visual;\n  }\n\n  .River--align-center {\n    grid-auto-rows: min-content;\n    grid-template-columns: unset;\n  }\n\n  .River--align-center .River__content,\n  .River--align-center .River__visual {\n    grid-area: unset;\n    justify-self: center;\n  }\n\n  .River--align-center .River__body-text {\n    max-width: 600px;\n    justify-self: center;\n  }\n\n  .River--align-center .River__visual {\n    margin-bottom: var(--brand-River-spacing-inner);\n  }\n\n  .River--align-center .River__content {\n    margin-top: var(--brand-River-spacing-inner);\n  }\n\n  .River--variant-gridline:not(.River--align-center):has(.River__visual--has-background) {\n    padding: 0;\n    gap: 0;\n  }\n\n  .River--variant-gridline.River--50-50:not(.River--align-center):has(.River__visual--has-background) {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  .River--variant-gridline.River--60-40:not(.River--align-center):has(.River__visual--has-background) {\n    grid-template-columns: 560fr 676fr;\n  }\n\n  .River--variant-gridline.River--align-end.River--60-40:has(.River__visual--has-background) {\n    grid-template-columns: 676fr 560fr;\n  }\n\n  .River--variant-gridline.River--align-start:has(.River__visual--has-background) .River__content {\n    padding-inline-start: var(--base-size-64);\n    padding-inline-end: var(--brand-River-spacing-inner);\n    padding-block: var(--brand-River-variant-gridline-spacing-outerBlock);\n  }\n\n  .River--variant-gridline.River--50-50.River--align-start:has(.River__visual--has-background) .River__content {\n    padding-inline-end: calc(var(--base-size-80) + var(--base-size-32));\n  }\n\n  .River--variant-gridline.River--60-40.River--align-start:has(.River__visual--has-background) .River__content {\n    padding-inline-end: var(--base-size-128);\n  }\n\n  .River--variant-gridline.River--align-end:has(.River__visual--has-background) .River__content {\n    padding-inline-start: var(--brand-River-spacing-inner);\n    padding-inline-end: var(--base-size-64);\n    padding-block: var(--brand-River-variant-gridline-spacing-outerBlock);\n  }\n\n  .River--variant-gridline.River--50-50.River--align-end:has(.River__visual--has-background) .River__content {\n    padding-inline-start: calc(var(--base-size-80) + var(--base-size-32));\n  }\n\n  .River--variant-gridline.River--60-40.River--align-end:has(.River__visual--has-background) .River__content {\n    padding-inline-start: var(--base-size-128);\n  }\n\n  .River--variant-gridline.River--align-start:not(:has(.River__visual--has-background)) .River__content {\n    padding-inline-end: var(--brand-River-spacing-inner);\n  }\n\n  .River--variant-gridline.River--align-end:not(:has(.River__visual--has-background)) .River__content {\n    padding-inline-start: var(--brand-River-spacing-inner);\n  }\n\n  .River--variant-gridline.River--50-50:not(.River--align-center) .River__visual--has-background {\n    margin-inline-start: 0;\n    margin-inline-end: 0;\n  }\n\n  .River--variant-gridline.River--align-center:has(.River__visual--has-background) {\n    padding: 0;\n  }\n\n  .River--variant-gridline.River--align-center .River__visual--has-background {\n    width: 100%;\n    margin: 0;\n  }\n\n  .River--variant-gridline.River--align-center .River__visual {\n    margin-bottom: 0;\n  }\n\n  .River--variant-gridline.River--align-center {\n    gap: 0;\n  }\n\n  .River--variant-gridline.River--align-center .River__content {\n    margin-top: 0;\n    margin-bottom: var(--base-size-64);\n  }\n\n  .River--variant-gridline.River--align-center:has(.River__visual--has-background) .River__content {\n    padding-inline: var(--brand-River-variant-gridline-spacing-outerInline);\n    padding-block-start: var(--brand-River-variant-gridline-spacing-outerBlock);\n  }\n}\n\n.RiverBreakout {\n  display: flex;\n  flex-direction: column;\n  gap: var(--brand-RiverBreakout-spacing-inner);\n  padding-block-end: var(--brand-River-spacing-outerBlock);\n  padding-block-start: var(--brand-River-spacing-outerBlock);\n}\n\n.RiverBreakout .River__text {\n  max-width: 37.5rem; /* 600px */\n  color: var(--brand-color-text-default);\n  font-size: var(--brand-text-size-500);\n  font-weight: var(--brand-heading-weight-500);\n  letter-spacing: var(--brand-heading-letterSpacing-500);\n  line-height: var(--brand-text-lineHeight-500);\n}\n\n.RiverBreakout--muted .River__text {\n  color: var(--brand-color-text-muted);\n}\n\n.RiverBreakout .River__text em,\n.RiverBreakout .River__text b {\n  color: var(--brand-color-text-default);\n  font-style: normal;\n  font-weight: inherit;\n}\n\n.RiverBreakout__hiddenHeading {\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n  height: 1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\n.RiverBreakout .River__call-to-action {\n  padding-block-start: var(--base-size-12);\n}\n\n@media screen and (min-width: 48rem) {\n  .RiverBreakout .River__content {\n    display: grid;\n    gap: var(--brand-River-spacing-inner);\n    row-gap: var(--brand-River-spacing-innerY);\n    grid-template-areas:\n      'text trailingComponent'\n      'cta trailingComponent';\n    grid-template-columns: 5fr 3fr;\n    grid-auto-rows: auto 1fr;\n  }\n\n  .RiverBreakout .River__text {\n    grid-area: text;\n  }\n\n  .RiverBreakout .River__call-to-action {\n    grid-area: cta;\n    margin-block: 0;\n  }\n\n  .RiverBreakout .River__trailingComponent {\n    grid-area: trailingComponent;\n    justify-self: flex-end;\n    margin-block-start: 0;\n  }\n}\n\n.RiverBreakout--variant-gridline {\n  position: relative;\n  padding-inline: var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);\n  padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n  padding-block-end: 0;\n  gap: 0;\n}\n\n@media screen and (max-width: 63.24rem) {\n  .RiverBreakout--variant-gridline {\n    width: 100%;\n    max-width: 38.625rem;\n    margin-inline: auto;\n  }\n}\n\n.RiverBreakout--variant-gridline::before,\n.RiverBreakout--variant-gridline::after {\n  content: '';\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 100vw;\n  height: 0;\n  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.RiverBreakout--variant-gridline::before {\n  top: 0;\n}\n\n.RiverBreakout--variant-gridline::after {\n  bottom: 0;\n}\n\n@media screen and (min-width: 618px) {\n  .RiverBreakout--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverBreakout--variant-gridline {\n    border-inline: none;\n  }\n}\n\n@media screen and (min-width: 1300px) {\n  .RiverBreakout--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.RiverBreakout--variant-gridline .River__visual {\n  overflow: hidden;\n}\n\n.RiverBreakout--variant-gridline .River__visual--rounded {\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverBreakout--variant-gridline .River__content {\n  padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n  padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n  gap: var(--brand-RiverBreakout-variant-gridline-spacing-contentGap);\n}\n\n.RiverBreakout--variant-gridline .River__call-to-action {\n  padding-block-start: var(--base-size-12);\n}\n\n.RiverBreakout--variant-gridline .River__trailingComponent--divider {\n  padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n  padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  margin-inline: calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerInline));\n  padding-inline: var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);\n}\n\n/* Reset base RiverBreakout grid for gridline variant until desktop breakpoint */\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n  .RiverBreakout--variant-gridline .River__content {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .RiverBreakout--variant-gridline .River__trailingComponent {\n    margin-block-start: 0;\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverBreakout--variant-gridline:has(.River__trailingComponent--divider) {\n    padding-block-end: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__content {\n    display: grid;\n    grid-template-areas:\n      'text trailingComponent'\n      'cta trailingComponent';\n    grid-template-columns: 1fr var(--brand-RiverBreakout-gridline-trailing-width, 31rem);\n    grid-template-rows: auto 1fr;\n    gap: var(--brand-RiverBreakout-variant-gridline-spacing-contentGap);\n    flex: 1;\n    padding-block: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__text {\n    grid-area: text;\n    padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n  }\n\n  .RiverBreakout--variant-gridline .River__call-to-action {\n    grid-area: cta;\n    margin-block: 0;\n    padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n  }\n\n  .RiverBreakout--variant-gridline .River__trailingComponent {\n    grid-area: trailingComponent;\n    margin-block-start: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__trailingComponent--divider {\n    border-top: none;\n    border-left: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n    margin-inline: 0;\n    margin-block: 0;\n    padding-inline: 0;\n    padding-inline-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);\n    padding-block: 0;\n    padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n    padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n    align-self: stretch;\n  }\n}\n\n/* Gridline + background: remove outer container top padding (background fills to top edge) */\n.RiverBreakout--variant-gridline:has(.River__visual--has-background) {\n  padding-block-start: 0;\n}\n\n.RiverBreakout .River__visual--has-background {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--brand-color-canvas-subtle);\n  border-radius: 0;\n  overflow: hidden;\n}\n\n.RiverBreakout .River__visual--has-background img,\n.RiverBreakout .River__visual--has-background picture,\n.RiverBreakout .River__visual--has-background video {\n  max-width: 100%;\n  height: auto;\n  width: auto;\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverBreakout .River__visual--has-background [data-video-player-container] {\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverBreakout--variant-gridline .River__visual--has-background {\n  margin-inline: calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerInline));\n  padding: var(--base-size-32);\n}\n\n@media screen and (max-width: 47.99rem) {\n  .RiverBreakout--variant-gridline .River__visual--has-background {\n    align-items: flex-end;\n    padding-block-end: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background img,\n  .RiverBreakout--variant-gridline .River__visual--has-background picture,\n  .RiverBreakout--variant-gridline .River__visual--has-background video {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background [data-video-player-container] {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n}\n\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n  .RiverBreakout--variant-gridline .River__visual--has-background {\n    align-items: flex-end;\n    padding-block-end: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background img,\n  .RiverBreakout--variant-gridline .River__visual--has-background picture,\n  .RiverBreakout--variant-gridline .River__visual--has-background video {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background [data-video-player-container] {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverBreakout--variant-gridline .River__visual--has-background {\n    align-items: flex-end;\n    padding: var(--base-size-64);\n    padding-block-end: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background img,\n  .RiverBreakout--variant-gridline .River__visual--has-background picture,\n  .RiverBreakout--variant-gridline .River__visual--has-background video {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background [data-video-player-container] {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background.River__visual--rounded {\n    border-radius: 0;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"river-shared.module.js","names":[],"sources":["../../src/river/river-shared.module.css"],"sourcesContent":[".River {\n  display: grid;\n  gap: var(--brand-River-spacing-inner);\n  grid-auto-rows: min-content;\n  padding-inline: var(--brand-River-spacing-outerInline);\n  padding-block: var(--brand-River-spacing-outerBlock);\n  container-type: inline-size;\n}\n\n.River--variant-gridline {\n  position: relative;\n  padding-inline: var(--brand-River-variant-gridline-spacing-outerInline);\n  padding-block: var(--brand-River-variant-gridline-spacing-outerBlock);\n  gap: var(--base-size-32);\n}\n\n@media screen and (min-width: 48rem) {\n  .River--variant-gridline {\n    gap: var(--base-size-28);\n  }\n}\n\n@media screen and (min-width: 80rem) {\n  .River--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.River--align-center {\n  text-align: center;\n}\n\n.River__content {\n  order: 2;\n}\n\n.River__visual--fill-media img,\n.River__visual--fill-media picture,\n.River__visual--fill-media video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.River__visual--rounded {\n  overflow: hidden;\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.River__visual--has-shadow {\n  box-shadow: var(--brand-River-visual-shadow);\n}\n\n.River--variant-gridline .River__visual--has-background {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--brand-color-canvas-subtle);\n  padding: var(--base-size-32);\n  border-radius: 0;\n  margin-inline: calc(-1 * var(--brand-River-variant-gridline-spacing-outerInline));\n}\n\n.River--variant-gridline .River__visual--has-background img,\n.River--variant-gridline .River__visual--has-background picture,\n.River--variant-gridline .River__visual--has-background video {\n  max-width: 100%;\n  height: auto;\n  width: auto;\n  border-radius: var(--brand-borderRadius-large);\n}\n\n@media screen and (max-width: 47.99rem) {\n  .River--variant-gridline .River__visual--has-background {\n    align-items: flex-end;\n    justify-content: flex-end;\n    padding-block-end: 0;\n    padding-inline-end: 0;\n  }\n\n  .River--variant-gridline .River__visual--has-background img,\n  .River--variant-gridline .River__visual--has-background picture,\n  .River--variant-gridline .River__visual--has-background video {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n    border-start-end-radius: 0;\n  }\n}\n\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n  .River--variant-gridline .River__visual--has-background {\n    align-items: flex-end;\n    padding-block-end: 0;\n  }\n\n  .River--variant-gridline .River__visual--has-background img,\n  .River--variant-gridline .River__visual--has-background picture,\n  .River--variant-gridline .River__visual--has-background video {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n}\n\n.River__heading {\n  margin-bottom: var(--brand-River-heading-margin);\n}\n\n.River__call-to-action {\n  margin-top: var(--base-size-20);\n}\n\n.River__text strong,\n.River__text b {\n  font-weight: var(--base-text-weight-normal);\n  color: var(--brand-color-text-default);\n}\n\n.River__heading code,\n.River__text code {\n  font-size: inherit;\n  font-family: var(--brand-fontStack-monospace) !important;\n  background-color: var(--brand-color-canvas-subtle);\n  padding: 0 var(--base-size-4) var(--base-size-2);\n  margin-inline: var(--base-size-2);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-small);\n  box-shadow: var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default);\n}\n\n.River__text code {\n  padding: var(--base-size-2) var(--base-size-4) 0;\n}\n\n.River__heading-inner:has(code) {\n  line-height: calc(1lh * 1.8);\n}\n\n@media screen and (min-width: 64rem) {\n  .River__heading-inner:has(code) {\n    line-height: calc(1lh * 2.1);\n  }\n}\n\n.River__text:has(code) {\n  line-height: calc(1lh * 1.1);\n}\n\n.River__trailingComponent {\n  margin-block-start: var(--brand-River-spacing-inner);\n}\n\n.River__trailingComponent--divider {\n  padding-block-start: var(--brand-River-spacing-inner);\n  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.River__label {\n  margin-block-end: var(--brand-River-label-margin);\n}\n\n.River--variant-gridline.River--align-start .River__visual {\n  order: 1;\n}\n\n.River--variant-gridline.River--align-start .River__content {\n  order: 2;\n}\n\n.River--variant-gridline.River--align-end .River__content {\n  order: 1;\n}\n\n.River--variant-gridline.River--align-end .River__visual {\n  order: 2;\n}\n\n@media screen and (max-width: 63.24rem) {\n  .River--variant-gridline.River--align-start .River__visual--has-background {\n    margin-block-start: calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock));\n  }\n\n  .River--variant-gridline.River--align-end .River__visual--has-background {\n    margin-block-end: calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock));\n  }\n\n  .River--variant-gridline.River--align-center .River__visual--has-background {\n    margin-block-start: calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock));\n  }\n}\n\n/* Large breakpoint and up */\n@media screen and (min-width: 63.25rem) {\n  .River {\n    grid-template-rows: unset;\n  }\n\n  .River--variant-gridline .River__visual--has-background {\n    padding: var(--base-size-64);\n    margin: 0;\n  }\n\n  .River__content {\n    order: unset;\n  }\n\n  .River--50-50 {\n    grid-template-columns: [content] 1fr [visual] 1fr;\n  }\n\n  .River--60-40 {\n    grid-template-columns: [content] 4fr [visual] 6fr;\n  }\n\n  .River--align-start {\n    grid-template-areas: 'content visual';\n  }\n\n  .River--align-end {\n    grid-template-areas: 'visual content';\n  }\n\n  .River--align-end.River--60-40 {\n    grid-template-columns: [visual] 6fr [content] 4fr;\n  }\n\n  .River--variant-gridline.River--align-start.River--50-50:not(:has(.River__visual--has-background)) .River__visual {\n    margin-inline-start: calc(var(--base-size-80) + var(--base-size-8));\n  }\n\n  .River--variant-gridline.River--align-end.River--50-50:not(:has(.River__visual--has-background)) .River__visual {\n    margin-inline-end: calc(var(--base-size-80) + var(--base-size-8));\n  }\n\n  .River__content {\n    display: grid;\n    align-content: center;\n    grid-area: content;\n  }\n\n  .River--50-50:not(.River--variant-gridline) .River__body-text,\n  .River--50-50:not(.River--variant-gridline) .River__heading {\n    max-width: 400px;\n  }\n\n  .River--align-start:not(.River--variant-gridline) .River__content {\n    padding-inline-end: var(--base-size-128);\n  }\n\n  .River--align-end:not(.River--variant-gridline) .River__content {\n    padding-inline-start: var(--base-size-128);\n  }\n\n  .River__content--align-block-end {\n    align-content: end;\n  }\n\n  .River__visual {\n    grid-area: visual;\n  }\n\n  .River--align-center {\n    grid-auto-rows: min-content;\n    grid-template-columns: unset;\n  }\n\n  .River--align-center .River__content,\n  .River--align-center .River__visual {\n    grid-area: unset;\n    justify-self: center;\n  }\n\n  .River--align-center .River__body-text {\n    max-width: 600px;\n    justify-self: center;\n  }\n\n  .River--align-center .River__visual {\n    margin-bottom: var(--brand-River-spacing-inner);\n  }\n\n  .River--align-center .River__content {\n    margin-top: var(--brand-River-spacing-inner);\n  }\n\n  .River--variant-gridline:not(.River--align-center):has(.River__visual--has-background) {\n    padding: 0;\n    gap: 0;\n  }\n\n  .River--variant-gridline.River--50-50:not(.River--align-center):has(.River__visual--has-background) {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  .River--variant-gridline.River--60-40:not(.River--align-center):has(.River__visual--has-background) {\n    grid-template-columns: 560fr 676fr;\n  }\n\n  .River--variant-gridline.River--align-end.River--60-40:has(.River__visual--has-background) {\n    grid-template-columns: 676fr 560fr;\n  }\n\n  .River--variant-gridline.River--align-start:has(.River__visual--has-background) .River__content {\n    padding-inline-start: var(--base-size-64);\n    padding-inline-end: var(--brand-River-spacing-inner);\n    padding-block: var(--brand-River-variant-gridline-spacing-outerBlock);\n  }\n\n  .River--variant-gridline.River--50-50.River--align-start:has(.River__visual--has-background) .River__content {\n    padding-inline-end: calc(var(--base-size-80) + var(--base-size-32));\n  }\n\n  .River--variant-gridline.River--60-40.River--align-start:has(.River__visual--has-background) .River__content {\n    padding-inline-end: var(--base-size-128);\n  }\n\n  .River--variant-gridline.River--align-end:has(.River__visual--has-background) .River__content {\n    padding-inline-start: var(--brand-River-spacing-inner);\n    padding-inline-end: var(--base-size-64);\n    padding-block: var(--brand-River-variant-gridline-spacing-outerBlock);\n  }\n\n  .River--variant-gridline.River--50-50.River--align-end:has(.River__visual--has-background) .River__content {\n    padding-inline-start: calc(var(--base-size-80) + var(--base-size-32));\n  }\n\n  .River--variant-gridline.River--60-40.River--align-end:has(.River__visual--has-background) .River__content {\n    padding-inline-start: var(--base-size-128);\n  }\n\n  .River--variant-gridline.River--align-start:not(:has(.River__visual--has-background)) .River__content {\n    padding-inline-end: var(--brand-River-spacing-inner);\n  }\n\n  .River--variant-gridline.River--align-end:not(:has(.River__visual--has-background)) .River__content {\n    padding-inline-start: var(--brand-River-spacing-inner);\n  }\n\n  .River--variant-gridline.River--50-50:not(.River--align-center) .River__visual--has-background {\n    margin-inline-start: 0;\n    margin-inline-end: 0;\n  }\n\n  .River--variant-gridline.River--align-center:has(.River__visual--has-background) {\n    padding: 0;\n  }\n\n  .River--variant-gridline.River--align-center .River__visual--has-background {\n    width: 100%;\n    margin: 0;\n  }\n\n  .River--variant-gridline.River--align-center .River__visual {\n    margin-bottom: 0;\n  }\n\n  .River--variant-gridline.River--align-center {\n    gap: 0;\n  }\n\n  .River--variant-gridline.River--align-center .River__content {\n    margin-top: 0;\n    margin-bottom: var(--base-size-64);\n  }\n\n  .River--variant-gridline.River--align-center:has(.River__visual--has-background) .River__content {\n    padding-inline: var(--brand-River-variant-gridline-spacing-outerInline);\n    padding-block-start: var(--brand-River-variant-gridline-spacing-outerBlock);\n  }\n}\n\n.RiverBreakout {\n  display: flex;\n  flex-direction: column;\n  gap: var(--brand-RiverBreakout-spacing-inner);\n  padding-block-end: var(--brand-River-spacing-outerBlock);\n  padding-block-start: var(--brand-River-spacing-outerBlock);\n}\n\n.RiverBreakout .River__text {\n  max-width: 37.5rem; /* 600px */\n  color: var(--brand-color-text-default);\n  font-size: var(--brand-text-size-500);\n  font-weight: var(--brand-heading-weight-500);\n  letter-spacing: var(--brand-heading-letterSpacing-500);\n  line-height: var(--brand-text-lineHeight-500);\n}\n\n.RiverBreakout--muted .River__text {\n  color: var(--brand-color-text-muted);\n}\n\n.RiverBreakout .River__text em,\n.RiverBreakout .River__text b {\n  color: var(--brand-color-text-default);\n  font-style: normal;\n  font-weight: inherit;\n}\n\n.RiverBreakout__hiddenHeading {\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n  height: 1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\n.RiverBreakout .River__call-to-action {\n  padding-block-start: var(--base-size-12);\n}\n\n@media screen and (min-width: 48rem) {\n  .RiverBreakout .River__content {\n    display: grid;\n    gap: var(--brand-River-spacing-inner);\n    row-gap: var(--brand-River-spacing-innerY);\n    grid-template-areas:\n      'text trailingComponent'\n      'cta trailingComponent';\n    grid-template-columns: 5fr 3fr;\n    grid-auto-rows: auto 1fr;\n  }\n\n  .RiverBreakout .River__text {\n    grid-area: text;\n  }\n\n  .RiverBreakout .River__call-to-action {\n    grid-area: cta;\n    margin-block: 0;\n  }\n\n  .RiverBreakout .River__trailingComponent {\n    grid-area: trailingComponent;\n    justify-self: flex-end;\n    margin-block-start: 0;\n  }\n}\n\n.RiverBreakout--variant-gridline {\n  position: relative;\n  padding-inline: var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);\n  padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n  padding-block-end: 0;\n  gap: 0;\n}\n\n@media screen and (max-width: 63.24rem) {\n  .RiverBreakout--variant-gridline {\n    width: 100%;\n    max-width: 38.625rem;\n    margin-inline: auto;\n  }\n}\n\n@media screen and (min-width: 618px) {\n  .RiverBreakout--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverBreakout--variant-gridline {\n    border-inline: none;\n  }\n}\n\n@media screen and (min-width: 1300px) {\n  .RiverBreakout--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.RiverBreakout--variant-gridline .River__visual {\n  overflow: hidden;\n}\n\n.RiverBreakout--variant-gridline .River__visual--rounded {\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverBreakout--variant-gridline .River__content {\n  padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n  padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n  gap: var(--brand-RiverBreakout-variant-gridline-spacing-contentGap);\n}\n\n.RiverBreakout--variant-gridline .River__call-to-action {\n  padding-block-start: var(--base-size-12);\n}\n\n.RiverBreakout--variant-gridline .River__trailingComponent--divider {\n  padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n  padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  margin-inline: calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerInline));\n  padding-inline: var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);\n}\n\n/* Reset base RiverBreakout grid for gridline variant until desktop breakpoint */\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n  .RiverBreakout--variant-gridline .River__content {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .RiverBreakout--variant-gridline .River__trailingComponent {\n    margin-block-start: 0;\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverBreakout--variant-gridline:has(.River__trailingComponent--divider) {\n    padding-block-end: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__content {\n    display: grid;\n    grid-template-areas:\n      'text trailingComponent'\n      'cta trailingComponent';\n    grid-template-columns: 1fr var(--brand-RiverBreakout-gridline-trailing-width, 31rem);\n    grid-template-rows: auto 1fr;\n    gap: var(--brand-RiverBreakout-variant-gridline-spacing-contentGap);\n    flex: 1;\n    padding-block: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__text {\n    grid-area: text;\n    padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n  }\n\n  .RiverBreakout--variant-gridline .River__call-to-action {\n    grid-area: cta;\n    margin-block: 0;\n    padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n  }\n\n  .RiverBreakout--variant-gridline .River__trailingComponent {\n    grid-area: trailingComponent;\n    margin-block-start: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__trailingComponent--divider {\n    border-top: none;\n    border-left: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n    margin-inline: 0;\n    margin-block: 0;\n    padding-inline: 0;\n    padding-inline-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);\n    padding-block: 0;\n    padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n    padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n    align-self: stretch;\n  }\n}\n\n/* Gridline + background: remove outer container top padding (background fills to top edge) */\n.RiverBreakout--variant-gridline:has(.River__visual--has-background) {\n  padding-block-start: 0;\n}\n\n.RiverBreakout .River__visual--has-background {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--brand-color-canvas-subtle);\n  border-radius: 0;\n  overflow: hidden;\n}\n\n.RiverBreakout .River__visual--has-background img,\n.RiverBreakout .River__visual--has-background picture,\n.RiverBreakout .River__visual--has-background video {\n  max-width: 100%;\n  height: auto;\n  width: auto;\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverBreakout .River__visual--has-background [data-video-player-container] {\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverBreakout--variant-gridline .River__visual--has-background {\n  margin-inline: calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerInline));\n  padding: var(--base-size-32);\n}\n\n@media screen and (max-width: 47.99rem) {\n  .RiverBreakout--variant-gridline .River__visual--has-background {\n    align-items: flex-end;\n    padding-block-end: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background img,\n  .RiverBreakout--variant-gridline .River__visual--has-background picture,\n  .RiverBreakout--variant-gridline .River__visual--has-background video {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background [data-video-player-container] {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n}\n\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n  .RiverBreakout--variant-gridline .River__visual--has-background {\n    align-items: flex-end;\n    padding-block-end: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background img,\n  .RiverBreakout--variant-gridline .River__visual--has-background picture,\n  .RiverBreakout--variant-gridline .River__visual--has-background video {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background [data-video-player-container] {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverBreakout--variant-gridline .River__visual--has-background {\n    align-items: flex-end;\n    padding: var(--base-size-64);\n    padding-block-end: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background img,\n  .RiverBreakout--variant-gridline .River__visual--has-background picture,\n  .RiverBreakout--variant-gridline .River__visual--has-background video {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background [data-video-player-container] {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background.River__visual--rounded {\n    border-radius: 0;\n  }\n}\n"],"mappings":""}

package/lib/MediaPlaylist/MediaPlaylist.d.ts

@@ -0,0 +1,76 @@
+import React from 'react';
+import { type HeadingProps, type TextProps } from '..';
+import type { BaseProps } from '../component-helpers';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/media-playlist/colors-with-modes.css';
+export type MediaPlaylistProps = React.PropsWithChildren<{
+    /**
+     * The index of the item to be selected by default. This is ignored if `selectedIndex` is provided.
+     */
+    defaultSelectedIndex?: number;
+    /**
+     * The index of the currently selected item. This makes the component controlled.
+     */
+    selectedIndex?: number;
+    /**
+     * Callback fired when the selected index changes.
+     */
+    onChange?: (selectedIndex: number) => void;
+    'data-testid'?: string;
+}> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>;
+export type MediaPlaylistHeadingProps = React.PropsWithChildren<{
+    as?: Exclude<HeadingProps['as'], 'h1'>;
+}> & BaseProps<HTMLDivElement>;
+type MediaPlaylistHeadingInternalProps = {
+    activeIndex?: number | null;
+    itemCount?: number;
+};
+declare function MediaPlaylistHeading({ activeIndex, as, children, className, id, itemCount, ...props }: MediaPlaylistHeadingProps & MediaPlaylistHeadingInternalProps): import("react/jsx-runtime").JSX.Element;
+export type MediaPlaylistItemProps = React.PropsWithChildren<{
+    /**
+     * An optional thumbnail to be shown in the playlist for this item.
+     */
+    thumbnail?: React.ReactNode;
+} & BaseProps<HTMLDivElement>>;
+declare function MediaPlaylistItem({ children }: MediaPlaylistItemProps): import("react/jsx-runtime").JSX.Element;
+export type MediaPlaylistItemHeadingProps = Omit<TextProps, 'as' | 'children' | 'title'> & {
+    children?: React.ReactNode;
+    description?: React.ReactNode;
+    title?: React.ReactNode;
+};
+declare function MediaPlaylistItemHeading({ children, className, description, font, size, title, variant, weight, ...props }: MediaPlaylistItemHeadingProps): import("react/jsx-runtime").JSX.Element;
+export type MediaPlaylistItemContentProps = React.HTMLAttributes<HTMLDivElement>;
+declare function MediaPlaylistItemContent({ children, className, ...props }: MediaPlaylistItemContentProps): import("react/jsx-runtime").JSX.Element;
+export type MediaPlaylistItemMediaProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Use MediaPlaylist to pair media playback with an itemized, thumbnail-backed playlist.
+ */
+export declare const MediaPlaylist: React.ForwardRefExoticComponent<{
+    /**
+     * The index of the item to be selected by default. This is ignored if `selectedIndex` is provided.
+     */
+    defaultSelectedIndex?: number;
+    /**
+     * The index of the currently selected item. This makes the component controlled.
+     */
+    selectedIndex?: number;
+    /**
+     * Callback fired when the selected index changes.
+     */
+    onChange?: (selectedIndex: number) => void;
+    'data-testid'?: string;
+} & {
+    children?: React.ReactNode | undefined;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<HTMLDivElement>> & {
+    Heading: typeof MediaPlaylistHeading;
+    Item: typeof MediaPlaylistItem;
+    ItemHeading: typeof MediaPlaylistItemHeading;
+    ItemContent: typeof MediaPlaylistItemContent;
+    ItemMedia: React.ForwardRefExoticComponent<MediaPlaylistItemMediaProps & React.RefAttributes<HTMLDivElement>>;
+    testIds: {
+        root: string;
+    };
+};
+export {};

package/lib/MediaPlaylist/index.d.ts

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

package/lib/MediaPlaylist/useMediaPlaylist.d.ts

@@ -0,0 +1,83 @@
+import React from 'react';
+import type { PaginationPageType } from '../Pagination/model';
+type UseMediaPlaylistProps = {
+    children: React.ReactNode;
+    components: MediaPlaylistComponentTypes;
+    defaultSelectedIndex: number;
+    onChange?: (selectedIndex: number) => void;
+    selectedIndex?: number;
+};
+/**
+ * Internal only hook used by MediaPlaylist to manage state and behavior.
+ * @private
+ * @internal
+ */
+export type MediaPlaylistComponentTypes = {
+    Heading: React.ElementType;
+    Item: React.ElementType;
+    ItemHeading: React.ElementType;
+    ItemContent: React.ElementType;
+    ItemMedia: React.ElementType;
+};
+type MediaPlaylistHeadingChildProps = {
+    activeIndex?: number | null;
+    id?: string;
+    itemCount?: number;
+};
+type MediaPlaylistItemChildProps = React.PropsWithChildren<Record<string, unknown>>;
+type MediaPlaylistItemChild = React.ReactElement<MediaPlaylistItemChildProps>;
+type MediaPlaylistItemData = {
+    className?: string;
+    content: MediaPlaylistItemChild;
+    heading: MediaPlaylistItemChild;
+    media: MediaPlaylistItemChild;
+    thumbnail?: React.ReactNode;
+};
+/**
+ * Internal only hook used by MediaPlaylist to manage state and behavior.
+ * @private
+ * @internal
+ */
+export declare function useMediaPlaylist({ children, components, defaultSelectedIndex, onChange, selectedIndex, }: UseMediaPlaylistProps): {
+    activeIndex: number | null;
+    currentItemPage: number;
+    getPaginationAttributes: (pageNumber: number, page: PaginationPageType) => {
+        [key: string]: string;
+    };
+    getTabListProps: (props: {
+        label: string;
+        labelledBy?: never;
+    } | {
+        labelledBy: string;
+        label?: never;
+    }) => {
+        role: "tablist";
+        'aria-orientation': "horizontal" | "vertical";
+    };
+    getTabPanelProps: (id: string) => {
+        role: "tabpanel";
+        id: `tabs-${string}-panel-${string}`;
+        'aria-labelledby': `tabs-${string}-tab-${string}`;
+        hidden: boolean;
+        tabIndex: 0;
+    };
+    getTabProps: <T extends HTMLElement = HTMLElement>(id: string, externalRef?: React.Ref<T>) => {
+        role: "tab";
+        id: `tabs-${string}-tab-${string}`;
+        'aria-controls': `tabs-${string}-panel-${string}`;
+        'aria-selected': boolean;
+        tabIndex: 0 | -1;
+        onClick: () => void;
+        onKeyDown: (event: React.KeyboardEvent) => void;
+        onFocus: () => void;
+        ref: (element: HTMLElement | null) => void;
+    };
+    handlePageChange: (event: React.MouseEvent, page: number) => void;
+    hasOverflowItems: boolean;
+    headingChild: React.ReactElement<MediaPlaylistHeadingChildProps, string | React.JSXElementConstructor<any>> | null;
+    isItemSelected: (index: number) => boolean;
+    items: MediaPlaylistItemData[];
+    setItemRef: (index: number, element: HTMLDivElement | null) => void;
+    tabListRef: React.RefObject<HTMLDivElement | null>;
+};
+export {};

package/lib/Pagination/Pagination.d.ts

@@ -1,14 +1,11 @@
 import React from 'react';
-/**
- * Design tokens
- */
-import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/pagination/colors-with-modes.css';
+import { PaginationPageType } from './model';
 export type PaginationProps = {
     pageCount: number;
     currentPage: number;
     onPageChange?: (e: React.MouseEvent, n: number) => void;
     hrefBuilder?: (n: number) => string;
-    pageAttributesBuilder?: (n: number) => {
+    pageAttributesBuilder?: (n: number, page: PaginationPageType) => {
         [attributeName: string]: string;
     };
     marginPageCount?: number;

package/lib/Pagination/model.d.ts

@@ -1,8 +1,8 @@
-export type PageType = {
+export type PaginationPageType = {
     type: 'PREV' | 'NEXT' | 'NUM' | 'BREAK';
     num: number;
     disabled?: boolean;
     selected?: boolean;
     precedesBreak?: boolean;
 };
-export declare function buildPaginationModel(pageCount: number, currentPage: number, showPages: boolean, marginPageCount: number, surroundingPageCount: number): PageType[];
+export declare function buildPaginationModel(pageCount: number, currentPage: number, showPages: boolean, marginPageCount: number, surroundingPageCount: number): PaginationPageType[];

package/lib/Pillar/Pillar.d.ts

@@ -17,6 +17,10 @@ export type PillarProps<C extends keyof JSX.IntrinsicElements = 'div'> = React.H
      * Enables optional border around the pillar content
      */
     hasBorder?: boolean;
+    /**
+     * Allows the pillar to fill the width of its parent container.
+     */
+    fullWidth?: boolean;
 } & (C extends 'article' ? PropsWithChildren<BaseProps<HTMLElement>> : PropsWithChildren<BaseProps<HTMLDivElement>>);
 type PillarImageProps = ImageProps;
 declare function PillarImage({ className, ...rest }: PillarImageProps): import("react/jsx-runtime").JSX.Element;