@primer/react-brand 0.81.1-rc.019987d3 → 0.81.1-rc.2c56871a
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/components/RiverBreakoutTabs/index.md +4 -3
- package/docs/index.md +2 -2
- package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.d.ts.map +1 -1
- package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.js +1 -0
- package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.js.map +1 -1
- package/lib/css/main.css +83 -83
- package/lib/design-tokens/css/tokens/base/colors/color-scales-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/base/colors/light.css +1 -1
- package/lib/design-tokens/css/tokens/base/size/size.css +1 -1
- package/lib/design-tokens/css/tokens/base/typography/typography.css +1 -1
- package/lib/design-tokens/css/tokens/functional/animation/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/colors/global-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/colors/global.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/action-menu/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/anchor-nav/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/bento/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/blinking-cursor/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/breadcrumbs/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/button/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/card/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/card/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/carousel-pagination/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/carousel-pagination/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/comparison-table/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/comparison-table/comparison-table.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/eyebrow-banner.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/faq/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/faq/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/faq/faq.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/feature-comparison-table/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/feature-comparison-table/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/footer/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/footer/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/footer/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/frosted-glass-vfx/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/frosted-glass-vfx/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/grid/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/grid/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/grid/grid.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/hero/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/icon/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/icon/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/icon-button/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/icon-button/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/icon-button/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/ide/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/ide/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/image/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/inline-code/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/inline-link/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/inline-link/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/inline-link/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/label/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/label/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/link/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/link/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/logosuite/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/logosuite/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/logosuite/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/media-playlist/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/media-playlist/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/nav-list/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/pricing-options/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/pricing-options/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/pricing-options/pricing-options.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/prose/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/prose/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/river/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/river/river.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/river-story-scroll/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/section/section.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/spinner/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/spinner/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/spinner/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/statistic/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/sub-nav/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/sub-nav/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/subdomain-nav-bar/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/tabs/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/tabs/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/tabs/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/testimonial/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/testimonial/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/testimonial/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/testimonial-group/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/tiles/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/tiles/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/timeline/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/timeline/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/timeline/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/toggle-switch/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/toggle-switch/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/toggle-switch/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/token/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/token/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/tooltip/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/tooltip/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/video-player/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/video-player/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/border.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/breakpoints.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/size-coarse.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/size-fine.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/size.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/viewport.css +1 -1
- package/lib/design-tokens/css/tokens/functional/typography/typography-responsive.css +1 -1
- package/lib/design-tokens/css/tokens/functional/typography/typography.css +1 -1
- package/lib/design-tokens/js/module/tokens/base/colors/light.js +1 -1
- package/lib/design-tokens/js/module/tokens/base/size/size.js +1 -1
- package/lib/design-tokens/js/module/tokens/base/typography/typography.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/animation/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/colors/global.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/bento/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/button/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/card/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/card/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/carousel-pagination/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/comparison-table/comparison-table.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/eyebrow-banner/eyebrow-banner.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/faq/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/faq/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/faq/faq.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/feature-comparison-table/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/footer/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/footer/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/frosted-glass-vfx/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/grid/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/grid/grid.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/hero/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/icon/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/icon-button/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/icon-button/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/ide/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/image/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/inline-code/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/inline-link/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/inline-link/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/label/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/link/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/logosuite/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/logosuite/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/media-playlist/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/pricing-options/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/pricing-options/pricing-options.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/prose/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/river/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/river/river.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/section/section.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/spinner/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/spinner/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/statistic/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/sub-nav/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/tabs/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/tabs/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/testimonial/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/testimonial/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/testimonial-group/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/text-cursor-animation/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/text-cursor-animation/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/tiles/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/timeline/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/timeline/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/toggle-switch/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/toggle-switch/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/token/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/tooltip/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/video-player/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/border.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/breakpoints.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/size-coarse.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/size-fine.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/size.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/viewport.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/typography/typography-responsive.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/typography/typography.js +1 -1
- package/lib/design-tokens/js/tokens/base/colors/light.js +1 -1
- package/lib/design-tokens/js/tokens/base/size/size.js +1 -1
- package/lib/design-tokens/js/tokens/base/typography/typography.js +1 -1
- package/lib/design-tokens/js/tokens/functional/animation/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/colors/global.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/bento/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/button/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/card/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/card/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/carousel-pagination/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/comparison-table/comparison-table.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/eyebrow-banner/eyebrow-banner.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/faq/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/faq/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/faq/faq.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/feature-comparison-table/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/footer/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/footer/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/frosted-glass-vfx/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/grid/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/grid/grid.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/hero/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/icon/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/icon-button/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/icon-button/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/ide/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/image/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/inline-code/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/inline-link/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/inline-link/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/label/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/link/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/logosuite/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/logosuite/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/media-playlist/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/pricing-options/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/pricing-options/pricing-options.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/prose/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/river/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/river/river.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/section/section.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/spinner/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/spinner/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/statistic/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/sub-nav/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/tabs/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/tabs/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/testimonial/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/testimonial/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/testimonial-group/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/text-cursor-animation/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/text-cursor-animation/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/tiles/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/timeline/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/timeline/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/toggle-switch/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/toggle-switch/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/token/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/tooltip/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/video-player/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/border.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/breakpoints.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/size-coarse.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/size-fine.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/size.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/viewport.js +1 -1
- package/lib/design-tokens/js/tokens/functional/typography/typography-responsive.js +1 -1
- package/lib/design-tokens/js/tokens/functional/typography/typography.js +1 -1
- package/lib/design-tokens/scss/tokens/base/colors/light.scss +1 -1
- package/lib/design-tokens/scss/tokens/base/size/size.scss +1 -1
- package/lib/design-tokens/scss/tokens/base/typography/typography.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/animation/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/colors/global.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/bento/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/button/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/card/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/card/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/carousel-pagination/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/comparison-table/comparison-table.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/eyebrow-banner/eyebrow-banner.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/faq/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/faq/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/faq/faq.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/feature-comparison-table/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/footer/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/footer/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/frosted-glass-vfx/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/grid/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/grid/grid.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/hero/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/icon/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/icon-button/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/icon-button/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/ide/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/image/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/inline-code/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/inline-link/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/inline-link/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/label/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/link/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/logosuite/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/logosuite/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/media-playlist/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/pricing-options/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/pricing-options/pricing-options.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/prose/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/river/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/river/river.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/section/section.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/spinner/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/spinner/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/statistic/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/sub-nav/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/tabs/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/tabs/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/testimonial/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/testimonial/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/testimonial-group/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/text-cursor-animation/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/text-cursor-animation/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/tiles/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/timeline/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/timeline/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/toggle-switch/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/toggle-switch/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/token/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/tooltip/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/video-player/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/size/border.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/size/breakpoints.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/size/size-coarse.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/size/size-fine.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/size/size.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/size/viewport.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/typography/typography-responsive.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/typography/typography.scss +1 -1
- package/lib/design-tokens/ts/tokens/base/colors/light.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/base/colors/light.js +1 -1
- package/lib/design-tokens/ts/tokens/base/size/size.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/base/size/size.js +1 -1
- package/lib/design-tokens/ts/tokens/base/typography/typography.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/base/typography/typography.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/animation/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/animation/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/colors/global.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/colors/global.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/bento/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/bento/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/button/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/button/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/card/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/card/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/card/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/card/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/carousel-pagination/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/carousel-pagination/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/comparison-table/comparison-table.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/comparison-table/comparison-table.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/eyebrow-banner/eyebrow-banner.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/eyebrow-banner/eyebrow-banner.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/faq/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/faq/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/faq/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/faq/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/faq/faq.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/faq/faq.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/feature-comparison-table/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/feature-comparison-table/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/footer/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/footer/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/footer/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/footer/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/frosted-glass-vfx/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/frosted-glass-vfx/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/grid/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/grid/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/grid/grid.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/grid/grid.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/hero/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/hero/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/icon/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/icon/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/icon-button/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/icon-button/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/icon-button/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/icon-button/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/ide/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/ide/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/image/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/image/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/inline-code/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/inline-code/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/inline-link/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/inline-link/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/inline-link/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/inline-link/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/label/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/label/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/link/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/link/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/logosuite/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/logosuite/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/logosuite/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/logosuite/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/media-playlist/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/media-playlist/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/pricing-options/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/pricing-options/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/pricing-options/pricing-options.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/pricing-options/pricing-options.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/prose/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/prose/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/river/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/river/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/river/river.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/river/river.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/section/section.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/section/section.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/spinner/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/spinner/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/spinner/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/spinner/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/statistic/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/statistic/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/sub-nav/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/sub-nav/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/tabs/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/tabs/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/tabs/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/tabs/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/testimonial/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/testimonial/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/testimonial/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/testimonial/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/testimonial-group/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/testimonial-group/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/text-cursor-animation/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/text-cursor-animation/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/text-cursor-animation/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/text-cursor-animation/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/tiles/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/tiles/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/timeline/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/timeline/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/timeline/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/timeline/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/toggle-switch/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/toggle-switch/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/toggle-switch/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/toggle-switch/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/token/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/token/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/tooltip/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/tooltip/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/video-player/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/video-player/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/border.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/border.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/breakpoints.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/breakpoints.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size-coarse.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size-coarse.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size-fine.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size-fine.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/viewport.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/viewport.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/typography/typography-responsive.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/typography/typography-responsive.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/typography/typography.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/typography/typography.js +1 -1
- package/lib/index.js +1 -1
- package/llms.txt +2 -2
- package/package.json +1 -1
|
@@ -172,9 +172,10 @@ Place action buttons inside `RiverBreakoutTabs.Content`. They remain outside the
|
|
|
172
172
|
|
|
173
173
|
### RiverBreakoutTabs.Heading `Required`
|
|
174
174
|
|
|
175
|
-
| Name | Type | Default | Description
|
|
176
|
-
| :--------- | :---------- | :-----: |
|
|
177
|
-
| `children` | `ReactNode` | | Item heading text
|
|
175
|
+
| Name | Type | Default | Description |
|
|
176
|
+
| :--------- | :---------- | :-----: | :--------------------- |
|
|
177
|
+
| `children` | `ReactNode` | | Item heading text |
|
|
178
|
+
| `as` | | `'h3'` | Semantic heading level |
|
|
178
179
|
|
|
179
180
|
`RiverBreakoutTabs.Heading` extends the [`Heading`](../../typography/Heading/index.md) component.
|
|
180
181
|
|
package/docs/index.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
# Primer Brand docs (v0.81.1-rc.
|
|
1
|
+
# Primer Brand docs (v0.81.1-rc.2c56871a)
|
|
2
2
|
|
|
3
|
-
These docs are bundled with `@primer/react-brand@0.81.1-rc.
|
|
3
|
+
These docs are bundled with `@primer/react-brand@0.81.1-rc.2c56871a` and match your installed version.
|
|
4
4
|
|
|
5
5
|
New here? Start with [Getting started](getting-started/index.md) for installation, global
|
|
6
6
|
stylesheet and font setup. Component directories are named after their import (e.g.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RiverBreakoutTabs.d.ts","sourceRoot":"","sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoF,MAAM,OAAO,CAAA;AAGxG,OAAO,EAAiC,KAAK,YAAY,EAAC,MAAM,OAAO,CAAA;AACvE,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAkB,KAAK,oBAAoB,EAAC,MAAM,gBAAgB,CAAA;AAOzE;;GAEG;AACH,OAAO,4FAA4F,CAAA;AACnG,OAAO,6FAA6F,CAAA;AAUpG,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAA;IACtC;;OAEG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAA;CACpC,CAAC,GACA,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC,CAAA;AAErD,MAAM,MAAM,0BAA0B,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC,CAAA;AAEF,MAAM,MAAM,iCAAiC,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACtE,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAChB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAC,CAAA;AAEF,MAAM,MAAM,6BAA6B,GAAG,YAAY,CAAA;AAExD,MAAM,MAAM,6BAA6B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAEhF,MAAM,MAAM,0BAA0B,GAAG,SAAS,CAAA;AAElD,MAAM,MAAM,4BAA4B,GAAG,oBAAoB,CAAA;
|
|
1
|
+
{"version":3,"file":"RiverBreakoutTabs.d.ts","sourceRoot":"","sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoF,MAAM,OAAO,CAAA;AAGxG,OAAO,EAAiC,KAAK,YAAY,EAAC,MAAM,OAAO,CAAA;AACvE,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAkB,KAAK,oBAAoB,EAAC,MAAM,gBAAgB,CAAA;AAOzE;;GAEG;AACH,OAAO,4FAA4F,CAAA;AACnG,OAAO,6FAA6F,CAAA;AAUpG,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAA;IACtC;;OAEG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAA;CACpC,CAAC,GACA,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC,CAAA;AAErD,MAAM,MAAM,0BAA0B,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC,CAAA;AAEF,MAAM,MAAM,iCAAiC,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACtE,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAChB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAC,CAAA;AAEF,MAAM,MAAM,6BAA6B,GAAG,YAAY,CAAA;AAExD,MAAM,MAAM,6BAA6B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAEhF,MAAM,MAAM,0BAA0B,GAAG,SAAS,CAAA;AAElD,MAAM,MAAM,4BAA4B,GAAG,oBAAoB,CAAA;AAud/D;;GAEG;AACH,eAAO,MAAM,iBAAiB;2BA5fL,MAAM;oBACb,MAAM;eACX,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI;IAC1C;;;OAGG;uBACgB,KAAK,CAAC,SAAS;IAClC;;OAEG;oBACa,QAAQ,GAAG,WAAW;IACtC;;OAEG;gCACyB,OAAO;;;;wCA0C4B,iCAAiC;iDA6B/B,6BAA6B;mEAZ7F,6BAA6B;gCAX4B,0BAA0B;yBAR3C,0BAA0B;;CA4cnE,CAAA"}
|
|
@@ -173,6 +173,7 @@ var w = (e) => (t) => p.isValidElement(t) && t.type === e, T = ({ children: e })
|
|
|
173
173
|
open: n === X,
|
|
174
174
|
handleOpen: ee(n),
|
|
175
175
|
children: [/* @__PURE__ */ S(f.Heading, {
|
|
176
|
+
as: t.heading?.props.as ?? "h3",
|
|
176
177
|
className: d.RiverBreakoutTabs__accordionHeading,
|
|
177
178
|
children: /* @__PURE__ */ C("span", {
|
|
178
179
|
className: d.RiverBreakoutTabs__accordionHeadingInner,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RiverBreakoutTabs.js","names":[],"sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx"],"sourcesContent":["import React, {cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Accordion, Heading, Link, Text, type HeadingProps} from '../..'\nimport {Icon, type IconProps} from '../../Icon'\nimport {RiverVisualBase, type RiverVisualBaseProps} from '../River/River'\nimport {useId} from '../../hooks/useId'\nimport {useTabs} from '../../hooks/useTabs'\nimport {useWindowSize} from '../../hooks/useWindowSize'\nimport riverStyles from '../river-shared.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/river.css'\n\n/** Main Stylesheet (as a CSS Module) */\nimport styles from './RiverBreakoutTabs.module.css'\n\nconst createComponentTypeGuard =\n <T,>(componentType: React.ComponentType<T>) =>\n (element: unknown): element is React.ReactElement<T> =>\n React.isValidElement<T>(element) && element.type === componentType\n\nexport type RiverBreakoutTabsProps = React.PropsWithChildren<{\n defaultSelectedIndex?: number\n selectedIndex?: number\n onChange?: (selectedIndex: number) => void\n /**\n * Decorative background rendered behind the visual and persisted across tab\n * changes. Must not contain interactive and remain purely decorative.\n */\n backgroundVisual?: React.ReactNode\n /**\n * Alignment of media within the visual container when `backgroundVisual` is provided\n */\n imagePosition?: 'center' | 'block-end'\n /**\n * When `true`, the `backgroundVisual` bleeds out to the gridline edges instead of being inset within them\n */\n backgroundVisualFullBleed?: boolean\n}> &\n Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>\n\nexport type RiverBreakoutTabsItemProps = React.PropsWithChildren<{\n className?: string\n}>\n\nexport type RiverBreakoutTabsA11yHeadingProps = React.PropsWithChildren<{\n as?: 'h2' | 'h3'\n id?: string\n}>\n\nexport type RiverBreakoutTabsHeadingProps = HeadingProps\n\nexport type RiverBreakoutTabsContentProps = React.HTMLAttributes<HTMLDivElement>\n\nexport type RiverBreakoutTabsIconProps = IconProps\n\nexport type RiverBreakoutTabsVisualProps = RiverVisualBaseProps\n\ntype RiverBreakoutTabsItemChild =\n | React.ReactElement<RiverBreakoutTabsIconProps>\n | React.ReactElement<RiverBreakoutTabsHeadingProps>\n | React.ReactElement<RiverBreakoutTabsContentProps>\n | React.ReactElement<RiverBreakoutTabsVisualProps>\n\ntype ExtractedItemParts = {\n icon: React.ReactElement<RiverBreakoutTabsIconProps> | null\n heading: React.ReactElement<RiverBreakoutTabsHeadingProps> | null\n content: React.ReactElement<RiverBreakoutTabsContentProps> | null\n visual: React.ReactElement<RiverBreakoutTabsVisualProps> | null\n className?: string\n}\n\ntype ExtractedContentParts = {\n action: React.ReactElement<React.ComponentProps<typeof Link>> | null\n body: React.ReactNode[]\n}\n\nconst RiverBreakoutTabsItem = ({children}: RiverBreakoutTabsItemProps) => <>{children}</>\n\nconst RiverBreakoutTabsA11yHeading = ({as = 'h3', children, id}: RiverBreakoutTabsA11yHeadingProps) => (\n <Heading as={as} id={id} className=\"visually-hidden\">\n {children}\n </Heading>\n)\n\nconst RiverBreakoutTabsIcon = ({color = 'green', ...props}: RiverBreakoutTabsIconProps) => (\n <Icon color={color} {...props} />\n)\n\nconst RiverBreakoutTabsHeading = ({\n as = 'h3',\n children,\n className,\n size = 'subhead-large',\n weight = 'normal',\n ...props\n}: RiverBreakoutTabsHeadingProps) => (\n <Heading\n as={as}\n className={clsx(styles.RiverBreakoutTabs__heading, className)}\n size={size}\n weight={weight}\n {...props}\n >\n {children}\n </Heading>\n)\n\nconst RiverBreakoutTabsContent = ({children, className, ...props}: RiverBreakoutTabsContentProps) => {\n const Children = useMemo(\n () =>\n React.Children.toArray(children).map(child => {\n if (isTextChild(child)) {\n return cloneElement(child, {\n as: child.props.as ?? 'p',\n variant: child.props.variant ?? 'muted',\n })\n }\n\n if (isLinkChild(child)) {\n return cloneElement(child, {\n className: clsx(child.props.className, styles.RiverBreakoutTabs__link),\n size: child.props.size ?? 'medium',\n variant: child.props.variant ?? 'accent',\n })\n }\n\n return child\n }),\n [children],\n )\n\n return (\n <div className={clsx(styles.RiverBreakoutTabs__content, className)} {...props}>\n {Children}\n </div>\n )\n}\n\nconst RiverBreakoutTabsVisual = forwardRef<HTMLDivElement, RiverBreakoutTabsVisualProps>(\n ({className, rounded = true, ...props}, ref) => (\n <RiverVisualBase\n ref={ref}\n className={clsx(rounded && styles['RiverBreakoutTabs__visual--rounded'], className)}\n rounded={rounded}\n {...props}\n />\n ),\n)\n\nconst isItem = createComponentTypeGuard(RiverBreakoutTabsItem)\nconst isA11yHeading = createComponentTypeGuard(RiverBreakoutTabsA11yHeading)\nconst isIcon = createComponentTypeGuard(RiverBreakoutTabsIcon)\nconst isHeading = createComponentTypeGuard(RiverBreakoutTabsHeading)\nconst isContent = createComponentTypeGuard(RiverBreakoutTabsContent)\nconst isVisual = createComponentTypeGuard(RiverBreakoutTabsVisual)\n\nconst isTextChild = (child: React.ReactNode): child is React.ReactElement<React.ComponentProps<typeof Text>> =>\n React.isValidElement<React.ComponentProps<typeof Text>>(child) && child.type === Text\n\nconst isLinkChild = (child: React.ReactNode): child is React.ReactElement<React.ComponentProps<typeof Link>> =>\n React.isValidElement<React.ComponentProps<typeof Link>>(child) && child.type === Link\n\nconst extractItemParts = (item: React.ReactElement<RiverBreakoutTabsItemProps>): ExtractedItemParts => {\n const Children = React.Children.toArray(item.props.children) as RiverBreakoutTabsItemChild[]\n\n return Children.reduce<ExtractedItemParts>(\n (acc, child) => {\n if (isIcon(child)) {\n acc.icon = child\n }\n\n if (isHeading(child)) {\n acc.heading = child\n }\n\n if (isContent(child)) {\n acc.content = child\n }\n\n if (isVisual(child)) {\n acc.visual = child\n }\n\n return acc\n },\n {icon: null, heading: null, content: null, visual: null, className: item.props.className},\n )\n}\n\nconst extractWideTabListContentParts = (\n content: React.ReactElement<RiverBreakoutTabsContentProps> | null,\n): ExtractedContentParts => {\n if (!content) {\n return {action: null, body: []}\n }\n\n const Children = React.Children.toArray(content.props.children).map(child => {\n if (isTextChild(child)) {\n return cloneElement(child, {\n as: child.props.as ?? 'p',\n variant: child.props.variant ?? 'muted',\n })\n }\n\n if (isLinkChild(child)) {\n return cloneElement(child, {\n className: clsx(child.props.className, styles.RiverBreakoutTabs__link),\n size: child.props.size ?? 'medium',\n variant: child.props.variant ?? 'accent',\n })\n }\n\n return child\n })\n\n return Children.reduce<ExtractedContentParts>(\n (acc, child) => {\n if (isLinkChild(child)) {\n if (!acc.action) {\n acc.action = child\n }\n\n return acc\n }\n\n acc.body.push(child)\n return acc\n },\n {action: null, body: []},\n )\n}\n\nconst clampIndex = (index: number, length: number) => {\n if (length === 0) return -1\n\n const normalizedIndex = Number.isFinite(index) ? Math.trunc(index) : 0\n return Math.min(Math.max(normalizedIndex, 0), length - 1)\n}\n\nconst RiverBreakoutTabsRoot = forwardRef<HTMLElement, RiverBreakoutTabsProps>(\n (\n {\n children,\n className,\n defaultSelectedIndex = 0,\n onChange,\n selectedIndex,\n backgroundVisual,\n imagePosition = 'center',\n backgroundVisualFullBleed = false,\n ...props\n },\n ref,\n ) => {\n const instanceId = useId()\n const {isLarge} = useWindowSize()\n\n const Children = useMemo(() => React.Children.toArray(children), [children])\n\n const A11yHeadingChild = Children.find(isA11yHeading) ?? null\n const Items = Children.filter(isItem)\n .map(extractItemParts)\n .filter(item => item.heading && item.content && item.visual)\n\n const defaultActiveIndex = clampIndex(defaultSelectedIndex, Items.length)\n const controlledActiveIndex =\n typeof selectedIndex === 'number' && Number.isFinite(selectedIndex)\n ? clampIndex(selectedIndex, Items.length)\n : null\n const initialActiveIndex = controlledActiveIndex ?? defaultActiveIndex\n const headingId = A11yHeadingChild?.props.id ?? `${instanceId}-heading`\n const wideTabListColumns = Math.min(Math.max(Items.length, 1), 3)\n const initialActiveTab = initialActiveIndex >= 0 ? String(initialActiveIndex) : undefined\n const isWideTabList = isLarge === true\n const suppressOnTabActivateRef = useRef(false)\n\n const handleTabActivate = useCallback(\n (id: string) => {\n if (suppressOnTabActivateRef.current) {\n suppressOnTabActivateRef.current = false\n return\n }\n\n if (!onChange) return\n\n const nextIndex = Number(id)\n if (!Number.isNaN(nextIndex)) {\n onChange(nextIndex)\n }\n },\n [onChange],\n )\n\n const {activeTab, activateTab, getTabListProps, getTabPanelProps, getTabProps} = useTabs({\n defaultTab: initialActiveTab,\n onTabActivate: handleTabActivate,\n })\n\n const [activeAccordionIndex, setActiveAccordionIndex] = useState(initialActiveIndex)\n\n useEffect(() => {\n if (activeTab === null) return\n\n const nextIndex = Number(activeTab)\n if (!Number.isNaN(nextIndex)) {\n setActiveAccordionIndex(nextIndex)\n }\n }, [activeTab])\n\n useEffect(() => {\n if (controlledActiveIndex === null || controlledActiveIndex < 0) return\n\n const controlledTab = String(controlledActiveIndex)\n if (activeTab !== controlledTab) {\n suppressOnTabActivateRef.current = true\n activateTab(controlledTab)\n }\n\n setActiveAccordionIndex(controlledActiveIndex)\n }, [activateTab, activeTab, controlledActiveIndex])\n\n if (!A11yHeadingChild && (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')) {\n // eslint-disable-next-line no-console\n console.warn(\n 'RiverBreakoutTabs: A11yHeading child is required. This element will not be visible, only read by screenreaders.',\n )\n }\n\n const handleAccordionOpen = (index: number) => (isOpen: boolean) => {\n if (isOpen) {\n setActiveAccordionIndex(index)\n if (activeTab !== String(index)) {\n activateTab(String(index))\n }\n }\n }\n\n const handleAccordionToggle: React.ReactEventHandler<HTMLDetailsElement> = event => {\n const toggledIndex = Number(event.currentTarget.getAttribute('data-index'))\n\n if (!event.currentTarget.open && activeAccordionIndex === toggledIndex) {\n event.currentTarget.open = true\n }\n }\n\n const tabListProps = A11yHeadingChild\n ? getTabListProps({labelledBy: headingId})\n : getTabListProps({label: 'River breakout tabs'})\n const WideTabListContentParts = useMemo(\n () => Items.map(item => extractWideTabListContentParts(item.content)),\n [Items],\n )\n\n const BackgroundVisualLayer =\n backgroundVisual != null ? (\n <div className={styles.RiverBreakoutTabs__backgroundVisual} aria-hidden=\"true\">\n {backgroundVisual}\n </div>\n ) : null\n\n return (\n <section\n ref={ref}\n className={clsx(\n riverStyles.RiverBreakout,\n riverStyles['RiverBreakout--variant-gridline'],\n gridlineStyles.gridline,\n styles.RiverBreakoutTabs,\n backgroundVisual != null && styles['RiverBreakoutTabs--has-background-visual'],\n backgroundVisual != null &&\n imagePosition === 'block-end' &&\n styles['RiverBreakoutTabs--image-position-block-end'],\n backgroundVisual != null &&\n backgroundVisualFullBleed &&\n styles['RiverBreakoutTabs--background-visual-full-bleed'],\n className,\n )}\n {...props}\n >\n {A11yHeadingChild && cloneElement(A11yHeadingChild, {id: headingId})}\n\n {isWideTabList ? (\n <div\n className={styles.RiverBreakoutTabs__wideTabList}\n style={{'--river-breakout-tabs-columns': String(wideTabListColumns)} as React.CSSProperties}\n >\n <div {...tabListProps} className={styles.RiverBreakoutTabs__tablist}>\n {Items.map((item, index) => {\n const isSelected = activeTab === String(index)\n const tabProps = getTabProps<HTMLButtonElement>(String(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 </button>\n </div>\n )\n })}\n </div>\n\n <div className={styles.RiverBreakoutTabs__sharedVisuals}>\n {BackgroundVisualLayer}\n {Items.map((item, index) => {\n const panelProps = getTabPanelProps(String(index))\n\n return (\n <div\n key={index}\n {...panelProps}\n tabIndex={-1}\n className={styles.RiverBreakoutTabs__sharedVisualPanel}\n >\n {cloneElement(item.visual as React.ReactElement<RiverBreakoutTabsVisualProps>, {\n className: clsx(item.visual?.props.className, styles.RiverBreakoutTabs__sharedVisual),\n })}\n </div>\n )\n })}\n </div>\n\n {WideTabListContentParts.some(({body}) => body.length > 0) && (\n <div className={styles.RiverBreakoutTabs__wideTabListContentRow}>\n {WideTabListContentParts.map(({body}, index) => (\n <div\n key={index}\n className={styles.RiverBreakoutTabs__wideTabListContent}\n role={body.length > 0 ? 'group' : undefined}\n aria-labelledby={body.length > 0 ? getTabProps(String(index)).id : undefined}\n >\n {body}\n </div>\n ))}\n </div>\n )}\n\n {WideTabListContentParts.some(content => content.action) && (\n <div className={styles.RiverBreakoutTabs__wideTabListActions}>\n {Items.map((_, index) => {\n const {action} = WideTabListContentParts[index]\n\n return (\n <div key={index} className={styles.RiverBreakoutTabs__wideTabListActionItem}>\n {action &&\n cloneElement(action, {\n className: clsx(action.props.className, styles.RiverBreakoutTabs__wideTabListAction),\n })}\n </div>\n )\n })}\n </div>\n )}\n </div>\n ) : (\n <div className={styles.RiverBreakoutTabs__accordion}>\n {activeAccordionIndex >= 0 && Items[activeAccordionIndex]?.visual && (\n <div className={styles.RiverBreakoutTabs__accordionSharedVisuals}>\n {BackgroundVisualLayer}\n {cloneElement(Items[activeAccordionIndex].visual as React.ReactElement<RiverBreakoutTabsVisualProps>, {\n // Remount the visual so new media autoplays when the active item changes.\n key: String(activeAccordionIndex),\n className: clsx(\n Items[activeAccordionIndex].visual.props.className,\n styles.RiverBreakoutTabs__accordionSharedVisual,\n ),\n })}\n </div>\n )}\n\n {Items.map((item, index) => {\n return (\n <Accordion\n key={index}\n data-index={index}\n className={clsx(\n styles.RiverBreakoutTabs__accordionItem,\n index === activeAccordionIndex && styles['RiverBreakoutTabs__item--selected'],\n item.className,\n )}\n onToggle={handleAccordionToggle}\n open={index === activeAccordionIndex}\n handleOpen={handleAccordionOpen(index)}\n >\n <Accordion.Heading className={styles.RiverBreakoutTabs__accordionHeading}>\n <span className={styles.RiverBreakoutTabs__accordionHeadingInner}>\n {item.icon &&\n cloneElement(item.icon, {\n className: clsx(item.icon.props.className, styles.RiverBreakoutTabs__accordionIcon),\n })}\n <span className={styles.RiverBreakoutTabs__accordionLabel}>{item.heading?.props.children}</span>\n </span>\n </Accordion.Heading>\n\n <Accordion.Content className={styles.RiverBreakoutTabs__accordionPanel}>\n {cloneElement(item.content as React.ReactElement<RiverBreakoutTabsContentProps>, {\n className: clsx(item.content?.props.className, styles.RiverBreakoutTabs__accordionContent),\n })}\n </Accordion.Content>\n </Accordion>\n )\n })}\n </div>\n )}\n </section>\n )\n },\n)\n\n/**\n * Use RiverBreakoutTabs to showcase multiple feature stories within a single immersive surface.\n */\nexport const RiverBreakoutTabs = Object.assign(RiverBreakoutTabsRoot, {\n A11yHeading: RiverBreakoutTabsA11yHeading,\n Content: RiverBreakoutTabsContent,\n Heading: RiverBreakoutTabsHeading,\n Icon: RiverBreakoutTabsIcon,\n Item: RiverBreakoutTabsItem,\n Visual: RiverBreakoutTabsVisual,\n})\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"RiverBreakoutTabs.js","names":[],"sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx"],"sourcesContent":["import React, {cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Accordion, Heading, Link, Text, type HeadingProps} from '../..'\nimport {Icon, type IconProps} from '../../Icon'\nimport {RiverVisualBase, type RiverVisualBaseProps} from '../River/River'\nimport {useId} from '../../hooks/useId'\nimport {useTabs} from '../../hooks/useTabs'\nimport {useWindowSize} from '../../hooks/useWindowSize'\nimport riverStyles from '../river-shared.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/river.css'\n\n/** Main Stylesheet (as a CSS Module) */\nimport styles from './RiverBreakoutTabs.module.css'\n\nconst createComponentTypeGuard =\n <T,>(componentType: React.ComponentType<T>) =>\n (element: unknown): element is React.ReactElement<T> =>\n React.isValidElement<T>(element) && element.type === componentType\n\nexport type RiverBreakoutTabsProps = React.PropsWithChildren<{\n defaultSelectedIndex?: number\n selectedIndex?: number\n onChange?: (selectedIndex: number) => void\n /**\n * Decorative background rendered behind the visual and persisted across tab\n * changes. Must not contain interactive and remain purely decorative.\n */\n backgroundVisual?: React.ReactNode\n /**\n * Alignment of media within the visual container when `backgroundVisual` is provided\n */\n imagePosition?: 'center' | 'block-end'\n /**\n * When `true`, the `backgroundVisual` bleeds out to the gridline edges instead of being inset within them\n */\n backgroundVisualFullBleed?: boolean\n}> &\n Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>\n\nexport type RiverBreakoutTabsItemProps = React.PropsWithChildren<{\n className?: string\n}>\n\nexport type RiverBreakoutTabsA11yHeadingProps = React.PropsWithChildren<{\n as?: 'h2' | 'h3'\n id?: string\n}>\n\nexport type RiverBreakoutTabsHeadingProps = HeadingProps\n\nexport type RiverBreakoutTabsContentProps = React.HTMLAttributes<HTMLDivElement>\n\nexport type RiverBreakoutTabsIconProps = IconProps\n\nexport type RiverBreakoutTabsVisualProps = RiverVisualBaseProps\n\ntype RiverBreakoutTabsItemChild =\n | React.ReactElement<RiverBreakoutTabsIconProps>\n | React.ReactElement<RiverBreakoutTabsHeadingProps>\n | React.ReactElement<RiverBreakoutTabsContentProps>\n | React.ReactElement<RiverBreakoutTabsVisualProps>\n\ntype ExtractedItemParts = {\n icon: React.ReactElement<RiverBreakoutTabsIconProps> | null\n heading: React.ReactElement<RiverBreakoutTabsHeadingProps> | null\n content: React.ReactElement<RiverBreakoutTabsContentProps> | null\n visual: React.ReactElement<RiverBreakoutTabsVisualProps> | null\n className?: string\n}\n\ntype ExtractedContentParts = {\n action: React.ReactElement<React.ComponentProps<typeof Link>> | null\n body: React.ReactNode[]\n}\n\nconst RiverBreakoutTabsItem = ({children}: RiverBreakoutTabsItemProps) => <>{children}</>\n\nconst RiverBreakoutTabsA11yHeading = ({as = 'h3', children, id}: RiverBreakoutTabsA11yHeadingProps) => (\n <Heading as={as} id={id} className=\"visually-hidden\">\n {children}\n </Heading>\n)\n\nconst RiverBreakoutTabsIcon = ({color = 'green', ...props}: RiverBreakoutTabsIconProps) => (\n <Icon color={color} {...props} />\n)\n\nconst RiverBreakoutTabsHeading = ({\n as = 'h3',\n children,\n className,\n size = 'subhead-large',\n weight = 'normal',\n ...props\n}: RiverBreakoutTabsHeadingProps) => (\n <Heading\n as={as}\n className={clsx(styles.RiverBreakoutTabs__heading, className)}\n size={size}\n weight={weight}\n {...props}\n >\n {children}\n </Heading>\n)\n\nconst RiverBreakoutTabsContent = ({children, className, ...props}: RiverBreakoutTabsContentProps) => {\n const Children = useMemo(\n () =>\n React.Children.toArray(children).map(child => {\n if (isTextChild(child)) {\n return cloneElement(child, {\n as: child.props.as ?? 'p',\n variant: child.props.variant ?? 'muted',\n })\n }\n\n if (isLinkChild(child)) {\n return cloneElement(child, {\n className: clsx(child.props.className, styles.RiverBreakoutTabs__link),\n size: child.props.size ?? 'medium',\n variant: child.props.variant ?? 'accent',\n })\n }\n\n return child\n }),\n [children],\n )\n\n return (\n <div className={clsx(styles.RiverBreakoutTabs__content, className)} {...props}>\n {Children}\n </div>\n )\n}\n\nconst RiverBreakoutTabsVisual = forwardRef<HTMLDivElement, RiverBreakoutTabsVisualProps>(\n ({className, rounded = true, ...props}, ref) => (\n <RiverVisualBase\n ref={ref}\n className={clsx(rounded && styles['RiverBreakoutTabs__visual--rounded'], className)}\n rounded={rounded}\n {...props}\n />\n ),\n)\n\nconst isItem = createComponentTypeGuard(RiverBreakoutTabsItem)\nconst isA11yHeading = createComponentTypeGuard(RiverBreakoutTabsA11yHeading)\nconst isIcon = createComponentTypeGuard(RiverBreakoutTabsIcon)\nconst isHeading = createComponentTypeGuard(RiverBreakoutTabsHeading)\nconst isContent = createComponentTypeGuard(RiverBreakoutTabsContent)\nconst isVisual = createComponentTypeGuard(RiverBreakoutTabsVisual)\n\nconst isTextChild = (child: React.ReactNode): child is React.ReactElement<React.ComponentProps<typeof Text>> =>\n React.isValidElement<React.ComponentProps<typeof Text>>(child) && child.type === Text\n\nconst isLinkChild = (child: React.ReactNode): child is React.ReactElement<React.ComponentProps<typeof Link>> =>\n React.isValidElement<React.ComponentProps<typeof Link>>(child) && child.type === Link\n\nconst extractItemParts = (item: React.ReactElement<RiverBreakoutTabsItemProps>): ExtractedItemParts => {\n const Children = React.Children.toArray(item.props.children) as RiverBreakoutTabsItemChild[]\n\n return Children.reduce<ExtractedItemParts>(\n (acc, child) => {\n if (isIcon(child)) {\n acc.icon = child\n }\n\n if (isHeading(child)) {\n acc.heading = child\n }\n\n if (isContent(child)) {\n acc.content = child\n }\n\n if (isVisual(child)) {\n acc.visual = child\n }\n\n return acc\n },\n {icon: null, heading: null, content: null, visual: null, className: item.props.className},\n )\n}\n\nconst extractWideTabListContentParts = (\n content: React.ReactElement<RiverBreakoutTabsContentProps> | null,\n): ExtractedContentParts => {\n if (!content) {\n return {action: null, body: []}\n }\n\n const Children = React.Children.toArray(content.props.children).map(child => {\n if (isTextChild(child)) {\n return cloneElement(child, {\n as: child.props.as ?? 'p',\n variant: child.props.variant ?? 'muted',\n })\n }\n\n if (isLinkChild(child)) {\n return cloneElement(child, {\n className: clsx(child.props.className, styles.RiverBreakoutTabs__link),\n size: child.props.size ?? 'medium',\n variant: child.props.variant ?? 'accent',\n })\n }\n\n return child\n })\n\n return Children.reduce<ExtractedContentParts>(\n (acc, child) => {\n if (isLinkChild(child)) {\n if (!acc.action) {\n acc.action = child\n }\n\n return acc\n }\n\n acc.body.push(child)\n return acc\n },\n {action: null, body: []},\n )\n}\n\nconst clampIndex = (index: number, length: number) => {\n if (length === 0) return -1\n\n const normalizedIndex = Number.isFinite(index) ? Math.trunc(index) : 0\n return Math.min(Math.max(normalizedIndex, 0), length - 1)\n}\n\nconst RiverBreakoutTabsRoot = forwardRef<HTMLElement, RiverBreakoutTabsProps>(\n (\n {\n children,\n className,\n defaultSelectedIndex = 0,\n onChange,\n selectedIndex,\n backgroundVisual,\n imagePosition = 'center',\n backgroundVisualFullBleed = false,\n ...props\n },\n ref,\n ) => {\n const instanceId = useId()\n const {isLarge} = useWindowSize()\n\n const Children = useMemo(() => React.Children.toArray(children), [children])\n\n const A11yHeadingChild = Children.find(isA11yHeading) ?? null\n const Items = Children.filter(isItem)\n .map(extractItemParts)\n .filter(item => item.heading && item.content && item.visual)\n\n const defaultActiveIndex = clampIndex(defaultSelectedIndex, Items.length)\n const controlledActiveIndex =\n typeof selectedIndex === 'number' && Number.isFinite(selectedIndex)\n ? clampIndex(selectedIndex, Items.length)\n : null\n const initialActiveIndex = controlledActiveIndex ?? defaultActiveIndex\n const headingId = A11yHeadingChild?.props.id ?? `${instanceId}-heading`\n const wideTabListColumns = Math.min(Math.max(Items.length, 1), 3)\n const initialActiveTab = initialActiveIndex >= 0 ? String(initialActiveIndex) : undefined\n const isWideTabList = isLarge === true\n const suppressOnTabActivateRef = useRef(false)\n\n const handleTabActivate = useCallback(\n (id: string) => {\n if (suppressOnTabActivateRef.current) {\n suppressOnTabActivateRef.current = false\n return\n }\n\n if (!onChange) return\n\n const nextIndex = Number(id)\n if (!Number.isNaN(nextIndex)) {\n onChange(nextIndex)\n }\n },\n [onChange],\n )\n\n const {activeTab, activateTab, getTabListProps, getTabPanelProps, getTabProps} = useTabs({\n defaultTab: initialActiveTab,\n onTabActivate: handleTabActivate,\n })\n\n const [activeAccordionIndex, setActiveAccordionIndex] = useState(initialActiveIndex)\n\n useEffect(() => {\n if (activeTab === null) return\n\n const nextIndex = Number(activeTab)\n if (!Number.isNaN(nextIndex)) {\n setActiveAccordionIndex(nextIndex)\n }\n }, [activeTab])\n\n useEffect(() => {\n if (controlledActiveIndex === null || controlledActiveIndex < 0) return\n\n const controlledTab = String(controlledActiveIndex)\n if (activeTab !== controlledTab) {\n suppressOnTabActivateRef.current = true\n activateTab(controlledTab)\n }\n\n setActiveAccordionIndex(controlledActiveIndex)\n }, [activateTab, activeTab, controlledActiveIndex])\n\n if (!A11yHeadingChild && (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')) {\n // eslint-disable-next-line no-console\n console.warn(\n 'RiverBreakoutTabs: A11yHeading child is required. This element will not be visible, only read by screenreaders.',\n )\n }\n\n const handleAccordionOpen = (index: number) => (isOpen: boolean) => {\n if (isOpen) {\n setActiveAccordionIndex(index)\n if (activeTab !== String(index)) {\n activateTab(String(index))\n }\n }\n }\n\n const handleAccordionToggle: React.ReactEventHandler<HTMLDetailsElement> = event => {\n const toggledIndex = Number(event.currentTarget.getAttribute('data-index'))\n\n if (!event.currentTarget.open && activeAccordionIndex === toggledIndex) {\n event.currentTarget.open = true\n }\n }\n\n const tabListProps = A11yHeadingChild\n ? getTabListProps({labelledBy: headingId})\n : getTabListProps({label: 'River breakout tabs'})\n const WideTabListContentParts = useMemo(\n () => Items.map(item => extractWideTabListContentParts(item.content)),\n [Items],\n )\n\n const BackgroundVisualLayer =\n backgroundVisual != null ? (\n <div className={styles.RiverBreakoutTabs__backgroundVisual} aria-hidden=\"true\">\n {backgroundVisual}\n </div>\n ) : null\n\n return (\n <section\n ref={ref}\n className={clsx(\n riverStyles.RiverBreakout,\n riverStyles['RiverBreakout--variant-gridline'],\n gridlineStyles.gridline,\n styles.RiverBreakoutTabs,\n backgroundVisual != null && styles['RiverBreakoutTabs--has-background-visual'],\n backgroundVisual != null &&\n imagePosition === 'block-end' &&\n styles['RiverBreakoutTabs--image-position-block-end'],\n backgroundVisual != null &&\n backgroundVisualFullBleed &&\n styles['RiverBreakoutTabs--background-visual-full-bleed'],\n className,\n )}\n {...props}\n >\n {A11yHeadingChild && cloneElement(A11yHeadingChild, {id: headingId})}\n\n {isWideTabList ? (\n <div\n className={styles.RiverBreakoutTabs__wideTabList}\n style={{'--river-breakout-tabs-columns': String(wideTabListColumns)} as React.CSSProperties}\n >\n <div {...tabListProps} className={styles.RiverBreakoutTabs__tablist}>\n {Items.map((item, index) => {\n const isSelected = activeTab === String(index)\n const tabProps = getTabProps<HTMLButtonElement>(String(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 </button>\n </div>\n )\n })}\n </div>\n\n <div className={styles.RiverBreakoutTabs__sharedVisuals}>\n {BackgroundVisualLayer}\n {Items.map((item, index) => {\n const panelProps = getTabPanelProps(String(index))\n\n return (\n <div\n key={index}\n {...panelProps}\n tabIndex={-1}\n className={styles.RiverBreakoutTabs__sharedVisualPanel}\n >\n {cloneElement(item.visual as React.ReactElement<RiverBreakoutTabsVisualProps>, {\n className: clsx(item.visual?.props.className, styles.RiverBreakoutTabs__sharedVisual),\n })}\n </div>\n )\n })}\n </div>\n\n {WideTabListContentParts.some(({body}) => body.length > 0) && (\n <div className={styles.RiverBreakoutTabs__wideTabListContentRow}>\n {WideTabListContentParts.map(({body}, index) => (\n <div\n key={index}\n className={styles.RiverBreakoutTabs__wideTabListContent}\n role={body.length > 0 ? 'group' : undefined}\n aria-labelledby={body.length > 0 ? getTabProps(String(index)).id : undefined}\n >\n {body}\n </div>\n ))}\n </div>\n )}\n\n {WideTabListContentParts.some(content => content.action) && (\n <div className={styles.RiverBreakoutTabs__wideTabListActions}>\n {Items.map((_, index) => {\n const {action} = WideTabListContentParts[index]\n\n return (\n <div key={index} className={styles.RiverBreakoutTabs__wideTabListActionItem}>\n {action &&\n cloneElement(action, {\n className: clsx(action.props.className, styles.RiverBreakoutTabs__wideTabListAction),\n })}\n </div>\n )\n })}\n </div>\n )}\n </div>\n ) : (\n <div className={styles.RiverBreakoutTabs__accordion}>\n {activeAccordionIndex >= 0 && Items[activeAccordionIndex]?.visual && (\n <div className={styles.RiverBreakoutTabs__accordionSharedVisuals}>\n {BackgroundVisualLayer}\n {cloneElement(Items[activeAccordionIndex].visual as React.ReactElement<RiverBreakoutTabsVisualProps>, {\n // Remount the visual so new media autoplays when the active item changes.\n key: String(activeAccordionIndex),\n className: clsx(\n Items[activeAccordionIndex].visual.props.className,\n styles.RiverBreakoutTabs__accordionSharedVisual,\n ),\n })}\n </div>\n )}\n\n {Items.map((item, index) => {\n return (\n <Accordion\n key={index}\n data-index={index}\n className={clsx(\n styles.RiverBreakoutTabs__accordionItem,\n index === activeAccordionIndex && styles['RiverBreakoutTabs__item--selected'],\n item.className,\n )}\n onToggle={handleAccordionToggle}\n open={index === activeAccordionIndex}\n handleOpen={handleAccordionOpen(index)}\n >\n <Accordion.Heading\n as={item.heading?.props.as ?? 'h3'}\n className={styles.RiverBreakoutTabs__accordionHeading}\n >\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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"}
|