@primer/react-brand 0.74.0-rc.ffd69649 → 0.74.0
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/Card/index.md +2 -2
- package/docs/components/Card/react.md +2 -3
- package/docs/components/InlineCode/index.md +53 -0
- package/docs/components/Label/index.md +14 -46
- package/docs/components/Label/react.md +23 -20
- package/docs/components/MinimalFooter/index.md +54 -10
- package/docs/components/PricingOptions/index.md +28 -6
- package/docs/components/River/react.md +11 -8
- package/docs/components/Token/index.md +4 -3
- package/docs/components/index.md +4 -3
- package/docs/index.md +6 -5
- package/docs/introduction/mcp.md +10 -10
- package/esm/Bento/Bento.d.ts.map +1 -1
- package/esm/Bento/Bento.js +3 -3
- package/esm/Bento/Bento.js.map +1 -1
- package/esm/CTABanner/CTABanner.d.ts +1 -0
- package/esm/CTABanner/CTABanner.d.ts.map +1 -1
- package/esm/CTABanner/CTABanner.js +4 -3
- package/esm/CTABanner/CTABanner.js.map +1 -1
- package/esm/CTABanner/{CTABanner.module-CDLOww8c.css → CTABanner.module-D4pYR4mY.css} +1 -1
- package/esm/CTABanner/CTABanner.module.js +1 -2
- package/esm/CTABanner/CTABanner.module.js.map +1 -1
- package/esm/Card/Card.d.ts +2 -1
- package/esm/Card/Card.d.ts.map +1 -1
- package/esm/Card/Card.js +2 -1
- package/esm/Card/Card.js.map +1 -1
- package/esm/Card/Card.module-Svi04dp7.css +1 -0
- package/esm/Card/Card.module.js +1 -1
- package/esm/Card/Card.module.js.map +1 -1
- package/esm/InlineCode/InlineCode.d.ts +19 -0
- package/esm/InlineCode/InlineCode.d.ts.map +1 -0
- package/esm/InlineCode/InlineCode.js +22 -0
- package/esm/InlineCode/InlineCode.js.map +1 -0
- package/esm/InlineCode/InlineCode.module-Br3-YmSA.css +1 -0
- package/esm/InlineCode/InlineCode.module.js +9 -0
- package/esm/InlineCode/InlineCode.module.js.map +1 -0
- package/esm/InlineCode/index.d.ts +2 -0
- package/esm/InlineCode/index.d.ts.map +1 -0
- package/esm/Label/Label.d.ts +3 -1
- package/esm/Label/Label.d.ts.map +1 -1
- package/esm/Label/Label.js.map +1 -1
- package/esm/MinimalFooter/MinimalFooter.d.ts +25 -1
- package/esm/MinimalFooter/MinimalFooter.d.ts.map +1 -1
- package/esm/MinimalFooter/MinimalFooter.js +140 -100
- package/esm/MinimalFooter/MinimalFooter.js.map +1 -1
- package/esm/MinimalFooter/MinimalFooter.module-CGtOtT5r.css +1 -0
- package/esm/MinimalFooter/MinimalFooter.module.js +26 -13
- package/esm/MinimalFooter/MinimalFooter.module.js.map +1 -1
- package/esm/Pillar/Pillar.d.ts +1 -1
- package/esm/Pillar/Pillar.js.map +1 -1
- package/esm/PricingOptions/PricingOptions.d.ts +4 -0
- package/esm/PricingOptions/PricingOptions.d.ts.map +1 -1
- package/esm/PricingOptions/PricingOptions.js +10 -10
- package/esm/PricingOptions/PricingOptions.js.map +1 -1
- package/esm/Token/Token.d.ts +2 -2
- package/esm/Token/Token.js.map +1 -1
- package/esm/index.d.ts +1 -0
- package/esm/index.d.ts.map +1 -1
- package/esm/index.esm.js +48 -47
- package/esm/node_modules/@primer/octicons-react/dist/index.esm.js +22 -28
- package/esm/node_modules/@primer/octicons-react/dist/index.esm.js.map +1 -1
- package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/footer/base-C0fjI9_t.css +1 -0
- package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/footer/colors-with-modes-CMFhnjfv.css +1 -0
- package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes-Bj7XtHMY.css +1 -0
- package/esm/river/River/River.d.ts +8 -2
- package/esm/river/River/River.d.ts.map +1 -1
- package/esm/river/River/River.js +6 -6
- package/esm/river/River/River.js.map +1 -1
- package/esm/river/river-shared.module-B1HvdKsP.css +1 -0
- package/esm/river/river-shared.module.js +1 -2
- package/esm/river/river-shared.module.js.map +1 -1
- package/lib/CTABanner/CTABanner.d.ts +1 -0
- package/lib/Card/Card.d.ts +2 -1
- package/lib/InlineCode/InlineCode.d.ts +18 -0
- package/lib/InlineCode/index.d.ts +1 -0
- package/lib/Label/Label.d.ts +3 -1
- package/lib/MinimalFooter/MinimalFooter.d.ts +25 -1
- package/lib/Pillar/Pillar.d.ts +1 -1
- package/lib/PricingOptions/PricingOptions.d.ts +4 -0
- package/lib/Token/Token.d.ts +2 -2
- package/lib/css/main.css +417 -218
- 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/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/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/footer/base.css +8 -0
- package/lib/design-tokens/css/tokens/functional/components/footer/colors-with-modes.css +19 -3
- package/lib/design-tokens/css/tokens/functional/components/footer/colors.css +10 -2
- 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/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 +17 -0
- package/lib/design-tokens/css/tokens/functional/components/inline-code/colors.css +10 -0
- 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/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/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/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/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/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/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/footer/base.js +14 -0
- package/lib/design-tokens/js/module/tokens/functional/components/footer/colors.js +41 -3
- 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/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 +27 -0
- 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/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/text-cursor-animation/colors.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/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/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/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/footer/base.js +6 -0
- package/lib/design-tokens/js/tokens/functional/components/footer/colors.js +10 -2
- 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/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 +8 -0
- 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/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/text-cursor-animation/colors.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/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/json/colors.json +11 -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/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/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/footer/base.scss +5 -0
- package/lib/design-tokens/scss/tokens/functional/components/footer/colors.scss +10 -2
- 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/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 +7 -0
- 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/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/text-cursor-animation/colors.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/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/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/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/footer/base.d.ts +17 -0
- package/lib/design-tokens/ts/tokens/functional/components/footer/base.js +14 -0
- package/lib/design-tokens/ts/tokens/functional/components/footer/colors.d.ts +15 -1
- package/lib/design-tokens/ts/tokens/functional/components/footer/colors.js +16 -2
- 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/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 +21 -0
- package/lib/design-tokens/ts/tokens/functional/components/inline-code/colors.js +18 -0
- 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/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/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/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/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.d.ts +1 -0
- package/lib/index.js +1 -1
- package/lib/river/River/River.d.ts +8 -2
- package/llms.txt +6 -5
- package/package.json +1 -1
- package/esm/Card/Card.module-DvGFYMFf.css +0 -1
- package/esm/MinimalFooter/MinimalFooter.module-Cl2g38SO.css +0 -1
- package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/footer/colors-with-modes-DhME9i-y.css +0 -1
- package/esm/river/river-shared.module-5fefR7ip.css +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--brand-footer-backToTop-minTarget:var(--base-size-44)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root,[data-color-mode=light]{--brand-footer-borderColor:var(--base-color-scale-green-6);--brand-footer-bg-color:var(--brand-color-canvas-subtle);--brand-footer-backToTop-borderColor-rest:var(--base-color-scale-gray-2);--brand-footer-backToTop-borderColor-hover:var(--base-color-scale-gray-2);--brand-footer-backToTop-borderColor-active:var(--base-color-scale-gray-2);--brand-footer-backToTop-bgColor-rest:#00000003;--brand-footer-backToTop-bgColor-hover:#0000001e;--brand-footer-backToTop-bgColor-active:#00000036;--brand-footer-socialIcon-restFilter:sepia(37%) saturate(152%) hue-rotate(77deg) brightness(57%);--brand-footer-socialIcon-hoverFilter:brightness(0)}[data-color-mode=dark]{--brand-footer-borderColor:var(--base-color-scale-green-3);--brand-footer-bg-color:var(--brand-color-canvas-subtle);--brand-footer-backToTop-borderColor-rest:var(--base-color-scale-gray-6);--brand-footer-backToTop-borderColor-hover:#ffffff1f;--brand-footer-backToTop-borderColor-active:#ffffff1f;--brand-footer-backToTop-bgColor-rest:#00000003;--brand-footer-backToTop-bgColor-hover:#ffffff29;--brand-footer-backToTop-bgColor-active:#ffffff3d;--brand-footer-socialIcon-restFilter:saturate(73%) hue-rotate(-89deg) brightness(110%);--brand-footer-socialIcon-hoverFilter:brightness(2)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root,[data-color-mode=light]{--brand-InlineCode-color-fg-default:var(--brand-color-text-muted);--brand-InlineCode-color-fg-heading:var(--brand-color-text-default);--brand-InlineCode-bgColor:var(--base-color-scale-gray-1)}[data-color-mode=dark]{--brand-InlineCode-color-fg-default:var(--brand-color-text-muted);--brand-InlineCode-color-fg-heading:var(--brand-color-text-default);--brand-InlineCode-bgColor:var(--base-color-scale-gray-7)}
|
|
@@ -2,12 +2,15 @@ import React, { PropsWithChildren } from 'react';
|
|
|
2
2
|
import { type HeadingProps } from '../../Heading';
|
|
3
3
|
import { type TextProps } from '../../Text';
|
|
4
4
|
import { type LinkProps } from '../../Link';
|
|
5
|
+
import { type LabelProps } from '../../Label';
|
|
6
|
+
import { type EyebrowTextProps } from '../../EyebrowText';
|
|
5
7
|
import type { BaseProps } from '../../component-helpers';
|
|
6
8
|
/**
|
|
7
9
|
* Design tokens
|
|
8
10
|
*/
|
|
9
11
|
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/base.css';
|
|
10
12
|
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/river.css';
|
|
13
|
+
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css';
|
|
11
14
|
export declare const RiverVariants: readonly ["default", "gridline"];
|
|
12
15
|
export declare const BorderedGrid: "gridline";
|
|
13
16
|
export declare const GridLine: "gridline";
|
|
@@ -39,6 +42,7 @@ export type RiverProps = {
|
|
|
39
42
|
export declare const defaultRiverImageTextRatio = "50:50";
|
|
40
43
|
export declare const defaultRiverAlign = "start";
|
|
41
44
|
export declare const defaultRiverVariant: RiverVariant;
|
|
45
|
+
type RiverContentChild = React.ReactElement<EyebrowTextProps | HeadingProps | TextProps | LinkProps | LabelProps>;
|
|
42
46
|
export type RiverContentProps = BaseProps<HTMLDivElement> & {
|
|
43
47
|
/**
|
|
44
48
|
* Aligns the content vertically within its container.
|
|
@@ -64,11 +68,12 @@ export type RiverContentProps = BaseProps<HTMLDivElement> & {
|
|
|
64
68
|
leadingComponent?: React.FunctionComponent;
|
|
65
69
|
/**
|
|
66
70
|
* Only valid children are allowed.
|
|
67
|
-
* These include: `Heading`, `Text` and `Link`.
|
|
71
|
+
* These include: `EyebrowText`, `Heading`, `Text` and `Link`.
|
|
72
|
+
* Passing the standalone `Label` component is deprecated; use `EyebrowText` instead.
|
|
68
73
|
* The declarative order of the children will be ignored in the rendered output
|
|
69
74
|
* to enforce correct HTML semantics.
|
|
70
75
|
*/
|
|
71
|
-
children:
|
|
76
|
+
children: RiverContentChild | RiverContentChild[];
|
|
72
77
|
} & React.HTMLAttributes<HTMLDivElement>;
|
|
73
78
|
export declare const RiverContent: React.ForwardRefExoticComponent<Omit<RiverContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
74
79
|
export declare const RiverVisualPositionOptions: readonly ["default", "center", "block-end", "block-end-inline-start", "block-end-inline-end"];
|
|
@@ -110,4 +115,5 @@ export declare const River: React.ForwardRefExoticComponent<Omit<RiverProps, "re
|
|
|
110
115
|
Visual: React.ForwardRefExoticComponent<Omit<RiverVisualProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
111
116
|
Content: React.ForwardRefExoticComponent<Omit<RiverContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
112
117
|
};
|
|
118
|
+
export {};
|
|
113
119
|
//# sourceMappingURL=River.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"River.d.ts","sourceRoot":"","sources":["../../../src/river/River/River.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,iBAAiB,EAAoB,MAAM,OAAO,CAAA;AAE7E,OAAO,EAAU,KAAK,YAAY,EAAC,MAAM,eAAe,CAAA;AACxD,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,YAAY,CAAA;
|
|
1
|
+
{"version":3,"file":"River.d.ts","sourceRoot":"","sources":["../../../src/river/River/River.tsx"],"names":[],"mappings":"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"}
|
package/esm/river/River/River.js
CHANGED
|
@@ -3,11 +3,12 @@ import { useAnimation as t } from "../../animation/useAnimation.js";
|
|
|
3
3
|
import { Text as n } from "../../Text/Text.js";
|
|
4
4
|
import { EyebrowText as r } from "../../EyebrowText/EyebrowText.js";
|
|
5
5
|
import { Heading as i } from "../../Heading/Heading.js";
|
|
6
|
-
import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/river/river-DHn1_SEa.css';import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/river/base-Ue-p74RC.css';/* empty css */
|
|
6
|
+
import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/river/river-DHn1_SEa.css';import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/river/base-Ue-p74RC.css';import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes-Bj7XtHMY.css';/* empty css */
|
|
7
7
|
import a from "../../component-helpers/shared.module.js";
|
|
8
8
|
import { Link as o } from "../../Link/Link.js";
|
|
9
9
|
import { Label as s } from "../../Label/Label.js";
|
|
10
10
|
/* empty css */
|
|
11
|
+
/* empty css */
|
|
11
12
|
import c from "../river-shared.module.js";
|
|
12
13
|
import l, { forwardRef as u, useMemo as d } from "react";
|
|
13
14
|
import { jsx as f, jsxs as p } from "react/jsx-runtime";
|
|
@@ -30,8 +31,8 @@ var m = "50:50", h = "start", g = "default", _ = u(({ animate: n, imageTextRatio
|
|
|
30
31
|
children: [C, E]
|
|
31
32
|
});
|
|
32
33
|
}), v = u(({ align: a = "center", animate: u, children: m, className: h, leadingComponent: g, trailingComponent: _, trailingComponentDivider: v = !1, style: y, ...b }, x) => {
|
|
33
|
-
let { classes: S, styles: C } = t(u), w = d(() => l.Children.toArray(m), [m]), T = w.find((e) => l.isValidElement(e) && e.type === i), E = w.find((e) => l.isValidElement(e) && e.type === n), D = w.find((e) => l.isValidElement(e) && e.type === o), O = w.find((e) => l.isValidElement(e) && e.type === s), k = w.find((e) => l.isValidElement(e) && e.type === r);
|
|
34
|
-
return /* @__PURE__ */ p("div", {
|
|
34
|
+
let { classes: S, styles: C } = t(u), w = d(() => l.Children.toArray(m), [m]), T = w.find((e) => l.isValidElement(e) && e.type === i), E = w.find((e) => l.isValidElement(e) && e.type === n), D = w.find((e) => l.isValidElement(e) && e.type === o), O = w.find((e) => l.isValidElement(e) && e.type === s), k = w.find((e) => l.isValidElement(e) && e.type === r), A = l.isValidElement(O) && !g;
|
|
35
|
+
return A && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("River.Content: standalone `Label` children are deprecated. Use `EyebrowText` instead."), /* @__PURE__ */ p("div", {
|
|
35
36
|
ref: x,
|
|
36
37
|
className: e(S, c.River__content, c[`River__content--align-${a}`], h),
|
|
37
38
|
style: {
|
|
@@ -40,7 +41,7 @@ var m = "50:50", h = "start", g = "default", _ = u(({ animate: n, imageTextRatio
|
|
|
40
41
|
},
|
|
41
42
|
...b,
|
|
42
43
|
children: [
|
|
43
|
-
|
|
44
|
+
A && /* @__PURE__ */ f("div", {
|
|
44
45
|
className: c.River__label,
|
|
45
46
|
children: l.cloneElement(O, {})
|
|
46
47
|
}),
|
|
@@ -57,8 +58,7 @@ var m = "50:50", h = "start", g = "default", _ = u(({ animate: n, imageTextRatio
|
|
|
57
58
|
children: l.cloneElement(T, {
|
|
58
59
|
as: T.props.as || "h3",
|
|
59
60
|
size: T.props.size || "5",
|
|
60
|
-
weight: T.props.weight
|
|
61
|
-
className: e(T.props.className, c["River__heading-inner"])
|
|
61
|
+
weight: T.props.weight
|
|
62
62
|
})
|
|
63
63
|
}),
|
|
64
64
|
l.isValidElement(E) && /* @__PURE__ */ f("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"River.js","names":[],"sources":["../../../src/river/River/River.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren, useMemo, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport {Heading, type HeadingProps} from '../../Heading'\nimport {Text, type TextProps} from '../../Text'\nimport {Link, type LinkProps} from '../../Link'\nimport {Label, type LabelProps} from '../../Label'\nimport {EyebrowText} from '../../EyebrowText'\nimport {useAnimation} from '../../animation'\nimport type {BaseProps} from '../../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/river.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from '../river-shared.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\nexport const RiverVariants = ['default', 'gridline'] as const\nexport const BorderedGrid = 'gridline' as const\nexport const GridLine = 'gridline' as const\nexport type RiverVariant = (typeof RiverVariants)[number]\n\nexport const RiverContentAlignValues = ['center', 'block-end'] as const\nexport type RiverContentAlign = (typeof RiverContentAlignValues)[number]\n\nexport type RiverProps = {\n /**\n * Only specific children are valid.\n * These include: `River.Visual` and `River.Content`.\n * The declarative order of the children will be ignored in the rendered output\n * to enforce correct HTML semantics.\n */\n children: React.ReactElement<RiverVisualProps | RiverContentProps>[]\n /**\n * Apply an alternative image to text column ratio. The default is `50:50`.\n */\n imageTextRatio?: '60:40' | '50:50'\n /**\n * Adjust the order of the `Content` column. The default is `start`.\n */\n align?: 'start' | 'end' | 'center'\n /**\n * Apply a visual variant. The default is `default`.\n * `gridline` applies lateral spacing for use in bordered grid layouts.\n */\n variant?: RiverVariant\n} & BaseProps<HTMLElement> &\n React.HTMLAttributes<HTMLElement>\n\nexport const defaultRiverImageTextRatio = '50:50'\nexport const defaultRiverAlign = 'start'\nexport const defaultRiverVariant: RiverVariant = 'default'\n\ntype ValidRootChildren = {\n Visual: React.ReactElement<RiverVisualProps> | null\n Content: React.ReactElement<RiverContentProps> | null\n}\n\nconst Root = forwardRef(\n (\n {\n animate,\n imageTextRatio = defaultRiverImageTextRatio,\n align = defaultRiverAlign,\n variant = defaultRiverVariant,\n className,\n children,\n style,\n ...rest\n }: RiverProps,\n ref: Ref<HTMLElement>,\n ) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const {Visual: VisualChild, Content: ContentChild} = React.Children.toArray(children).reduce<ValidRootChildren>(\n (acc, child) => {\n if (React.isValidElement(child) && typeof child.type !== 'string') {\n if (child.type === Visual) {\n acc.Visual = child as React.ReactElement<RiverVisualProps>\n }\n if (child.type === RiverContent) {\n acc.Content = child as React.ReactElement<RiverContentProps>\n }\n }\n return acc\n },\n {Visual: null, Content: null},\n )\n\n const visualPosition = VisualChild?.props.position ?? 'default'\n const visualPadding = VisualChild?.props.padding ?? 'default'\n const hasNonDefaultPosition = visualPosition !== 'default'\n const hasNonDefaultPadding = visualPadding !== 'default'\n const hasVisualLayoutOverrides = hasNonDefaultPosition || hasNonDefaultPadding\n const supportsVisualLayoutOverrides = variant === 'gridline'\n\n if (\n hasVisualLayoutOverrides &&\n !supportsVisualLayoutOverrides &&\n (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')\n ) {\n // eslint-disable-next-line no-console\n console.warn(\n `River: River.Visual position and padding are only supported when River uses variant=\"gridline\"; ignoring position=\"${visualPosition}\" and padding=\"${visualPadding}\".`,\n )\n }\n\n const VisualChildWithVariantStyles = VisualChild\n ? React.cloneElement(VisualChild, {\n className: clsx(\n VisualChild.props.className,\n variant === 'gridline' && styles['River__visual--has-background'],\n ),\n })\n : null\n\n return (\n <section\n ref={ref}\n className={clsx(\n styles.River,\n styles[`River--${imageTextRatio.replace(':', '-')}`],\n styles[`River--align-${align}`],\n styles[`River--variant-${variant}`],\n variant === 'gridline' && gridlineStyles.gridline,\n animationClasses,\n className,\n )}\n style={{...animationInlineStyles, ...style}}\n {...rest}\n >\n {ContentChild}\n {VisualChildWithVariantStyles}\n </section>\n )\n },\n)\n\nexport type RiverContentProps = BaseProps<HTMLDivElement> & {\n /**\n * Aligns the content vertically within its container.\n */\n align?: RiverContentAlign\n /**\n * Escape-hatch for inserting custom React components.\n * Warning:\n * This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n * Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n */\n trailingComponent?: React.FunctionComponent\n /**\n * When `true`, a divider will be rendered between the standard river and optional trailing content.\n */\n trailingComponentDivider?: boolean\n /**\n * Escape-hatch for inserting custom React components.\n * Warning:\n * This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n * Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n */\n leadingComponent?: React.FunctionComponent\n /**\n * Only valid children are allowed.\n * These include: `Heading`, `Text` and `Link`.\n * The declarative order of the children will be ignored in the rendered output\n * to enforce correct HTML semantics.\n */\n children: React.ReactElement<TextProps> | React.ReactElement<HeadingProps | TextProps | LinkProps>[]\n} & React.HTMLAttributes<HTMLDivElement>\n\nexport const RiverContent = forwardRef(\n (\n {\n align = 'center',\n animate,\n children,\n className,\n leadingComponent: LeadingComponent,\n trailingComponent: TrailingComponent,\n trailingComponentDivider = false,\n style,\n ...rest\n }: RiverContentProps,\n ref: Ref<HTMLDivElement>,\n ) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const Children = useMemo(() => React.Children.toArray(children), [children])\n\n const HeadingChild = Children.find(child => React.isValidElement(child) && child.type === Heading)\n\n const TextChild = Children.find(child => React.isValidElement(child) && child.type === Text)\n\n const LinkChild = Children.find(child => React.isValidElement(child) && child.type === Link)\n\n const LabelChild = Children.find(child => React.isValidElement(child) && child.type === Label)\n\n const EyebrowTextChild = Children.find(child => React.isValidElement(child) && child.type === EyebrowText)\n\n return (\n <div\n ref={ref}\n className={clsx(animationClasses, styles.River__content, styles[`River__content--align-${align}`], className)}\n style={{...animationInlineStyles, ...style}}\n {...rest}\n >\n {React.isValidElement(LabelChild) && !LeadingComponent && (\n <div className={styles.River__label}>\n {React.cloneElement(LabelChild as React.ReactElement<LabelProps>, {})}\n </div>\n )}\n\n {!LabelChild && React.isValidElement(EyebrowTextChild) && !LeadingComponent && (\n <div className={styles.River__label}>{EyebrowTextChild}</div>\n )}\n\n {!LabelChild && !EyebrowTextChild && LeadingComponent && (\n <div className={styles.River__leadingComponent}>\n <LeadingComponent />\n </div>\n )}\n\n {React.isValidElement<HeadingProps>(HeadingChild) && (\n <div className={styles.River__heading}>\n {React.cloneElement(HeadingChild as React.ReactElement<HeadingProps>, {\n // as uses h3 default, but can be overridden\n as: HeadingChild.props.as || 'h3',\n size: HeadingChild.props.size || '5',\n weight: HeadingChild.props.weight,\n className: clsx(HeadingChild.props.className, styles['River__heading-inner']),\n })}\n </div>\n )}\n\n {React.isValidElement<TextProps>(TextChild) && (\n <div className={styles['River__body-text']}>\n {React.cloneElement(TextChild as React.ReactElement<TextProps>, {\n variant: 'muted',\n as: 'p',\n className: clsx(styles.River__text, TextChild.props.className),\n })}\n </div>\n )}\n {React.isValidElement<LinkProps>(LinkChild) && (\n <div className={styles['River__call-to-action']}>\n {React.cloneElement(LinkChild as React.ReactElement<LinkProps>, {\n size: 'medium',\n variant: LinkChild.props.variant || 'accent',\n })}\n </div>\n )}\n {TrailingComponent && (\n <div\n className={clsx(\n styles.River__trailingComponent,\n trailingComponentDivider && styles['River__trailingComponent--divider'],\n )}\n >\n <TrailingComponent />\n </div>\n )}\n </div>\n )\n },\n)\n\nexport const RiverVisualPositionOptions = [\n 'default',\n 'center',\n 'block-end',\n 'block-end-inline-start',\n 'block-end-inline-end',\n] as const\nexport type RiverVisualPosition = (typeof RiverVisualPositionOptions)[number]\n\nexport const RiverVisualPaddingOptions = ['default', 'none', 'all'] as const\nexport type RiverVisualPadding = (typeof RiverVisualPaddingOptions)[number]\n\nexport type RiverVisualBaseProps = BaseProps<HTMLDivElement> &\n React.HtmlHTMLAttributes<HTMLDivElement> &\n PropsWithChildren<{\n /**\n * Applies automatic size constraints to child images and video.\n * This can be disabled by setting this prop to `false`.\n */\n fillMedia?: boolean\n /**\n * `img` and `video` elements will apply a shadow by default.\n * This can be disabled by setting this prop to `false`.\n */\n hasShadow?: boolean\n /**\n * Enables rounded corners.\n * Can optionally be disabled.\n */\n rounded?: boolean\n }>\n\nexport type RiverVisualProps = RiverVisualBaseProps & {\n /**\n * Positions media within the visual region in the gridline variant.\n */\n position?: RiverVisualPosition\n /**\n * Controls media padding within the visual region in the gridline variant.\n */\n padding?: RiverVisualPadding\n}\n\nexport const RiverVisualBase = forwardRef<HTMLDivElement, RiverVisualBaseProps>(\n (\n {fillMedia = true, children, className, hasShadow = false, rounded = true, ...rest}: RiverVisualBaseProps,\n ref: Ref<HTMLDivElement>,\n ) => {\n return (\n <div\n ref={ref}\n className={clsx(\n styles.River__visual,\n hasShadow && styles['River__visual--has-shadow'],\n fillMedia && styles['River__visual--fill-media'],\n rounded && styles['River__visual--rounded'],\n className,\n )}\n {...rest}\n >\n {children}\n </div>\n )\n },\n)\n\nconst Visual = forwardRef<HTMLDivElement, RiverVisualProps>(\n ({className, position = 'default', padding = 'default', ...rest}, ref) => (\n <RiverVisualBase\n ref={ref}\n className={clsx(\n position !== 'default' && styles[`River__visual--position-${position}`],\n padding !== 'default' && styles[`River__visual--padding-${padding}`],\n className,\n )}\n {...rest}\n />\n ),\n)\n\n/**\n * Alternating text and image pairs.\n */\nexport const River = Object.assign(Root, {Visual, Content: RiverContent})\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"River.js","names":[],"sources":["../../../src/river/River/River.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren, useMemo, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport {Heading, type HeadingProps} from '../../Heading'\nimport {Text, type TextProps} from '../../Text'\nimport {Link, type LinkProps} from '../../Link'\nimport {Label, type LabelProps} from '../../Label'\nimport {EyebrowText, type EyebrowTextProps} from '../../EyebrowText'\nimport {useAnimation} from '../../animation'\nimport type {BaseProps} from '../../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/river.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from '../river-shared.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\nexport const RiverVariants = ['default', 'gridline'] as const\nexport const BorderedGrid = 'gridline' as const\nexport const GridLine = 'gridline' as const\nexport type RiverVariant = (typeof RiverVariants)[number]\n\nexport const RiverContentAlignValues = ['center', 'block-end'] as const\nexport type RiverContentAlign = (typeof RiverContentAlignValues)[number]\n\nexport type RiverProps = {\n /**\n * Only specific children are valid.\n * These include: `River.Visual` and `River.Content`.\n * The declarative order of the children will be ignored in the rendered output\n * to enforce correct HTML semantics.\n */\n children: React.ReactElement<RiverVisualProps | RiverContentProps>[]\n /**\n * Apply an alternative image to text column ratio. The default is `50:50`.\n */\n imageTextRatio?: '60:40' | '50:50'\n /**\n * Adjust the order of the `Content` column. The default is `start`.\n */\n align?: 'start' | 'end' | 'center'\n /**\n * Apply a visual variant. The default is `default`.\n * `gridline` applies lateral spacing for use in bordered grid layouts.\n */\n variant?: RiverVariant\n} & BaseProps<HTMLElement> &\n React.HTMLAttributes<HTMLElement>\n\nexport const defaultRiverImageTextRatio = '50:50'\nexport const defaultRiverAlign = 'start'\nexport const defaultRiverVariant: RiverVariant = 'default'\n\ntype ValidRootChildren = {\n Visual: React.ReactElement<RiverVisualProps> | null\n Content: React.ReactElement<RiverContentProps> | null\n}\n\nconst Root = forwardRef(\n (\n {\n animate,\n imageTextRatio = defaultRiverImageTextRatio,\n align = defaultRiverAlign,\n variant = defaultRiverVariant,\n className,\n children,\n style,\n ...rest\n }: RiverProps,\n ref: Ref<HTMLElement>,\n ) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const {Visual: VisualChild, Content: ContentChild} = React.Children.toArray(children).reduce<ValidRootChildren>(\n (acc, child) => {\n if (React.isValidElement(child) && typeof child.type !== 'string') {\n if (child.type === Visual) {\n acc.Visual = child as React.ReactElement<RiverVisualProps>\n }\n if (child.type === RiverContent) {\n acc.Content = child as React.ReactElement<RiverContentProps>\n }\n }\n return acc\n },\n {Visual: null, Content: null},\n )\n\n const visualPosition = VisualChild?.props.position ?? 'default'\n const visualPadding = VisualChild?.props.padding ?? 'default'\n const hasNonDefaultPosition = visualPosition !== 'default'\n const hasNonDefaultPadding = visualPadding !== 'default'\n const hasVisualLayoutOverrides = hasNonDefaultPosition || hasNonDefaultPadding\n const supportsVisualLayoutOverrides = variant === 'gridline'\n\n if (\n hasVisualLayoutOverrides &&\n !supportsVisualLayoutOverrides &&\n (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')\n ) {\n // eslint-disable-next-line no-console\n console.warn(\n `River: River.Visual position and padding are only supported when River uses variant=\"gridline\"; ignoring position=\"${visualPosition}\" and padding=\"${visualPadding}\".`,\n )\n }\n\n const VisualChildWithVariantStyles = VisualChild\n ? React.cloneElement(VisualChild, {\n className: clsx(\n VisualChild.props.className,\n variant === 'gridline' && styles['River__visual--has-background'],\n ),\n })\n : null\n\n return (\n <section\n ref={ref}\n className={clsx(\n styles.River,\n styles[`River--${imageTextRatio.replace(':', '-')}`],\n styles[`River--align-${align}`],\n styles[`River--variant-${variant}`],\n variant === 'gridline' && gridlineStyles.gridline,\n animationClasses,\n className,\n )}\n style={{...animationInlineStyles, ...style}}\n {...rest}\n >\n {ContentChild}\n {VisualChildWithVariantStyles}\n </section>\n )\n },\n)\n\ntype RiverContentChild = React.ReactElement<EyebrowTextProps | HeadingProps | TextProps | LinkProps | LabelProps>\n\nexport type RiverContentProps = BaseProps<HTMLDivElement> & {\n /**\n * Aligns the content vertically within its container.\n */\n align?: RiverContentAlign\n /**\n * Escape-hatch for inserting custom React components.\n * Warning:\n * This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n * Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n */\n trailingComponent?: React.FunctionComponent\n /**\n * When `true`, a divider will be rendered between the standard river and optional trailing content.\n */\n trailingComponentDivider?: boolean\n /**\n * Escape-hatch for inserting custom React components.\n * Warning:\n * This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n * Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n */\n leadingComponent?: React.FunctionComponent\n /**\n * Only valid children are allowed.\n * These include: `EyebrowText`, `Heading`, `Text` and `Link`.\n * Passing the standalone `Label` component is deprecated; use `EyebrowText` instead.\n * The declarative order of the children will be ignored in the rendered output\n * to enforce correct HTML semantics.\n */\n children: RiverContentChild | RiverContentChild[]\n} & React.HTMLAttributes<HTMLDivElement>\n\nexport const RiverContent = forwardRef(\n (\n {\n align = 'center',\n animate,\n children,\n className,\n leadingComponent: LeadingComponent,\n trailingComponent: TrailingComponent,\n trailingComponentDivider = false,\n style,\n ...rest\n }: RiverContentProps,\n ref: Ref<HTMLDivElement>,\n ) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const Children = useMemo(() => React.Children.toArray(children), [children])\n\n const HeadingChild = Children.find(child => React.isValidElement(child) && child.type === Heading)\n\n const TextChild = Children.find(child => React.isValidElement(child) && child.type === Text)\n\n const LinkChild = Children.find(child => React.isValidElement(child) && child.type === Link)\n\n const LabelChild = Children.find(child => React.isValidElement(child) && child.type === Label)\n\n const EyebrowTextChild = Children.find(child => React.isValidElement(child) && child.type === EyebrowText)\n\n const usesDeprecatedLabel = React.isValidElement<LabelProps>(LabelChild) && !LeadingComponent\n if (usesDeprecatedLabel && (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')) {\n // eslint-disable-next-line no-console\n console.warn('River.Content: standalone `Label` children are deprecated. Use `EyebrowText` instead.')\n }\n\n return (\n <div\n ref={ref}\n className={clsx(animationClasses, styles.River__content, styles[`River__content--align-${align}`], className)}\n style={{...animationInlineStyles, ...style}}\n {...rest}\n >\n {usesDeprecatedLabel && (\n <div className={styles.River__label}>\n {React.cloneElement(LabelChild as React.ReactElement<LabelProps>, {})}\n </div>\n )}\n\n {!LabelChild && React.isValidElement(EyebrowTextChild) && !LeadingComponent && (\n <div className={styles.River__label}>{EyebrowTextChild}</div>\n )}\n\n {!LabelChild && !EyebrowTextChild && LeadingComponent && (\n <div className={styles.River__leadingComponent}>\n <LeadingComponent />\n </div>\n )}\n\n {React.isValidElement<HeadingProps>(HeadingChild) && (\n <div className={styles.River__heading}>\n {React.cloneElement(HeadingChild as React.ReactElement<HeadingProps>, {\n // as uses h3 default, but can be overridden\n as: HeadingChild.props.as || 'h3',\n size: HeadingChild.props.size || '5',\n weight: HeadingChild.props.weight,\n })}\n </div>\n )}\n\n {React.isValidElement<TextProps>(TextChild) && (\n <div className={styles['River__body-text']}>\n {React.cloneElement(TextChild as React.ReactElement<TextProps>, {\n variant: 'muted',\n as: 'p',\n className: clsx(styles.River__text, TextChild.props.className),\n })}\n </div>\n )}\n {React.isValidElement<LinkProps>(LinkChild) && (\n <div className={styles['River__call-to-action']}>\n {React.cloneElement(LinkChild as React.ReactElement<LinkProps>, {\n size: 'medium',\n variant: LinkChild.props.variant || 'accent',\n })}\n </div>\n )}\n {TrailingComponent && (\n <div\n className={clsx(\n styles.River__trailingComponent,\n trailingComponentDivider && styles['River__trailingComponent--divider'],\n )}\n >\n <TrailingComponent />\n </div>\n )}\n </div>\n )\n },\n)\n\nexport const RiverVisualPositionOptions = [\n 'default',\n 'center',\n 'block-end',\n 'block-end-inline-start',\n 'block-end-inline-end',\n] as const\nexport type RiverVisualPosition = (typeof RiverVisualPositionOptions)[number]\n\nexport const RiverVisualPaddingOptions = ['default', 'none', 'all'] as const\nexport type RiverVisualPadding = (typeof RiverVisualPaddingOptions)[number]\n\nexport type RiverVisualBaseProps = BaseProps<HTMLDivElement> &\n React.HtmlHTMLAttributes<HTMLDivElement> &\n PropsWithChildren<{\n /**\n * Applies automatic size constraints to child images and video.\n * This can be disabled by setting this prop to `false`.\n */\n fillMedia?: boolean\n /**\n * `img` and `video` elements will apply a shadow by default.\n * This can be disabled by setting this prop to `false`.\n */\n hasShadow?: boolean\n /**\n * Enables rounded corners.\n * Can optionally be disabled.\n */\n rounded?: boolean\n }>\n\nexport type RiverVisualProps = RiverVisualBaseProps & {\n /**\n * Positions media within the visual region in the gridline variant.\n */\n position?: RiverVisualPosition\n /**\n * Controls media padding within the visual region in the gridline variant.\n */\n padding?: RiverVisualPadding\n}\n\nexport const RiverVisualBase = forwardRef<HTMLDivElement, RiverVisualBaseProps>(\n (\n {fillMedia = true, children, className, hasShadow = false, rounded = true, ...rest}: RiverVisualBaseProps,\n ref: Ref<HTMLDivElement>,\n ) => {\n return (\n <div\n ref={ref}\n className={clsx(\n styles.River__visual,\n hasShadow && styles['River__visual--has-shadow'],\n fillMedia && styles['River__visual--fill-media'],\n rounded && styles['River__visual--rounded'],\n className,\n )}\n {...rest}\n >\n {children}\n </div>\n )\n },\n)\n\nconst Visual = forwardRef<HTMLDivElement, RiverVisualProps>(\n ({className, position = 'default', padding = 'default', ...rest}, ref) => (\n <RiverVisualBase\n ref={ref}\n className={clsx(\n position !== 'default' && styles[`River__visual--position-${position}`],\n padding !== 'default' && styles[`River__visual--padding-${padding}`],\n className,\n )}\n {...rest}\n />\n ),\n)\n\n/**\n * Alternating text and image pairs.\n */\nexport const River = Object.assign(Root, {Visual, Content: RiverContent})\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
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___s4zuj img,.Primer_Brand__river-shared-module__River__visual___s4zuj picture{display:block}.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(--brand-River-variant-gridline-visual-padding);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___PCP5W{max-width:618px;margin-inline:auto}.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--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-24)}.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-family:var(--brand-fontStack-monospace);font-size:calc(1em - 1px);font-weight:var(--base-text-weight-regular);color:var(--brand-InlineCode-color-fg-default);background-color:var(--brand-InlineCode-bgColor);padding-block:0;padding-inline:var(--base-size-4);border-radius:var(--base-size-2);white-space:normal;word-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:1.6}.Primer_Brand__river-shared-module__River__leadingComponent___J27K0 img,.Primer_Brand__river-shared-module__River__leadingComponent___J27K0 picture,.Primer_Brand__river-shared-module__River__trailingComponent___jDuou img,.Primer_Brand__river-shared-module__River__trailingComponent___jDuou picture{display:block}.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{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__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-center___DjITG{padding:var(--brand-River-variant-gridline-visual-padding);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___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end____8UId{padding:var(--brand-River-variant-gridline-visual-padding);border-radius:0;justify-content:center;align-items:flex-end;padding-block-end:0;display:flex}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-start___u_Kc6{padding:var(--brand-River-variant-gridline-visual-padding);border-radius:0;justify-content:flex-start;align-items:flex-end;padding-block-end:0;padding-inline-start:0;display:flex}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-end___3KRp9{padding:var(--brand-River-variant-gridline-visual-padding);border-radius:0;justify-content:flex-end;align-items:flex-end;padding-block-end:0;padding-inline-end:0;display:flex}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--padding-all___rTBWZ{padding:var(--brand-River-variant-gridline-visual-padding)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5{border-radius:0;padding:0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-center___DjITG img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-center___DjITG picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-center___DjITG video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-center___DjITG [data-video-player-container],.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end____8UId img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end____8UId picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end____8UId video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end____8UId [data-video-player-container],.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-start___u_Kc6 img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-start___u_Kc6 picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-start___u_Kc6 video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-start___u_Kc6 [data-video-player-container],.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-end___3KRp9 img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-end___3KRp9 picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-end___3KRp9 video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-end___3KRp9 [data-video-player-container]{border-radius:0;width:auto;max-width:100%;height:auto}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--padding-all___rTBWZ img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--padding-all___rTBWZ picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--padding-all___rTBWZ video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--padding-all___rTBWZ [data-video-player-container]{border-radius:0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-center___DjITG img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-center___DjITG picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-center___DjITG video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-center___DjITG [data-video-player-container]{border-radius:var(--brand-borderRadius-large)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end____8UId img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end____8UId picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end____8UId video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end____8UId [data-video-player-container]{border-radius:var(--brand-borderRadius-large) var(--brand-borderRadius-large) 0 0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-start___u_Kc6 img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-start___u_Kc6 picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-start___u_Kc6 video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-start___u_Kc6 [data-video-player-container]{border-radius:0;border-start-end-radius:var(--brand-borderRadius-large)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-end___3KRp9 img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-end___3KRp9 picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-end___3KRp9 video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-end___3KRp9 [data-video-player-container]{border-radius:0;border-start-start-radius:var(--brand-borderRadius-large)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--padding-all___rTBWZ img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--padding-all___rTBWZ picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--padding-all___rTBWZ video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--padding-all___rTBWZ [data-video-player-container]{border-radius:var(--brand-borderRadius-large)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--fill-media___aXDjy.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--fill-media___aXDjy.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--fill-media___aXDjy.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--fill-media___aXDjy.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 [data-video-player-container]{-o-object-fit:cover;object-fit:cover;width:100%;max-width:none;height:100%}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 [data-video-player-container],.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 [data-video-player-container]{border-radius:0}.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)}}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import './river-shared.module-
|
|
1
|
+
import './river-shared.module-B1HvdKsP.css';var e = {
|
|
2
2
|
River: "Primer_Brand__river-shared-module__River___PCP5W",
|
|
3
3
|
"River--variant-gridline": "Primer_Brand__river-shared-module__River--variant-gridline___e27QX",
|
|
4
4
|
"River--align-center": "Primer_Brand__river-shared-module__River--align-center___4igQp",
|
|
@@ -11,7 +11,6 @@ import './river-shared.module-5fefR7ip.css';var e = {
|
|
|
11
11
|
River__heading: "Primer_Brand__river-shared-module__River__heading___e5fwB",
|
|
12
12
|
"River__call-to-action": "Primer_Brand__river-shared-module__River__call-to-action___yOsJI",
|
|
13
13
|
River__text: "Primer_Brand__river-shared-module__River__text___HCqnL",
|
|
14
|
-
"River__heading-inner": "Primer_Brand__river-shared-module__River__heading-inner___XAylb",
|
|
15
14
|
River__leadingComponent: "Primer_Brand__river-shared-module__River__leadingComponent___J27K0",
|
|
16
15
|
River__trailingComponent: "Primer_Brand__river-shared-module__River__trailingComponent___jDuou",
|
|
17
16
|
"River__trailingComponent--divider": "Primer_Brand__river-shared-module__River__trailingComponent--divider___mTL35",
|
|
@@ -1 +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@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 :is(img, picture) {\n display: block;\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(--brand-River-variant-gridline-visual-padding);\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 {\n max-width: 618px;\n margin-inline: auto;\n }\n\n .River--variant-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\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-24);\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__leadingComponent :is(img, picture),\n.River__trailingComponent :is(img, picture) {\n display: block;\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 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/* Explicit visual media layouts override the responsive default without changing it. */\n.River--variant-gridline .River__visual.River__visual--position-center {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--brand-River-variant-gridline-visual-padding);\n border-radius: 0;\n}\n\n.River--variant-gridline .River__visual.River__visual--position-block-end {\n display: flex;\n align-items: flex-end;\n justify-content: center;\n padding: var(--brand-River-variant-gridline-visual-padding);\n padding-block-end: 0;\n border-radius: 0;\n}\n\n.River--variant-gridline .River__visual.River__visual--position-block-end-inline-start {\n display: flex;\n align-items: flex-end;\n justify-content: flex-start;\n padding: var(--brand-River-variant-gridline-visual-padding);\n padding-block-end: 0;\n padding-inline-start: 0;\n border-radius: 0;\n}\n\n.River--variant-gridline .River__visual.River__visual--position-block-end-inline-end {\n display: flex;\n align-items: flex-end;\n justify-content: flex-end;\n padding: var(--brand-River-variant-gridline-visual-padding);\n padding-block-end: 0;\n padding-inline-end: 0;\n border-radius: 0;\n}\n\n.River--variant-gridline .River__visual.River__visual--padding-all {\n padding: var(--brand-River-variant-gridline-visual-padding);\n}\n\n.River--variant-gridline .River__visual.River__visual--padding-none {\n padding: 0;\n border-radius: 0;\n}\n\n.River--variant-gridline\n .River__visual:is(\n .River__visual--position-center,\n .River__visual--position-block-end,\n .River__visual--position-block-end-inline-start,\n .River__visual--position-block-end-inline-end\n )\n :is(img, picture, video, [data-video-player-container]) {\n max-width: 100%;\n width: auto;\n height: auto;\n border-radius: 0;\n}\n\n.River--variant-gridline\n .River__visual.River__visual--padding-all\n :is(img, picture, video, [data-video-player-container]) {\n border-radius: 0;\n}\n\n.River--variant-gridline\n .River__visual.River__visual--rounded.River__visual--position-center\n :is(img, picture, video, [data-video-player-container]) {\n border-radius: var(--brand-borderRadius-large);\n}\n\n.River--variant-gridline\n .River__visual.River__visual--rounded.River__visual--position-block-end\n :is(img, picture, video, [data-video-player-container]) {\n border-radius: var(--brand-borderRadius-large) var(--brand-borderRadius-large) 0 0;\n}\n\n.River--variant-gridline\n .River__visual.River__visual--rounded.River__visual--position-block-end-inline-start\n :is(img, picture, video, [data-video-player-container]) {\n border-radius: 0;\n border-start-end-radius: var(--brand-borderRadius-large);\n}\n\n.River--variant-gridline\n .River__visual.River__visual--rounded.River__visual--position-block-end-inline-end\n :is(img, picture, video, [data-video-player-container]) {\n border-radius: 0;\n border-start-start-radius: var(--brand-borderRadius-large);\n}\n\n.River--variant-gridline\n .River__visual.River__visual--rounded.River__visual--padding-all\n :is(img, picture, video, [data-video-player-container]) {\n border-radius: var(--brand-borderRadius-large);\n}\n\n.River--variant-gridline\n .River__visual.River__visual--fill-media.River__visual--padding-none\n :is(img, picture, video, [data-video-player-container]) {\n width: 100%;\n max-width: none;\n height: 100%;\n object-fit: cover;\n}\n\n.River--variant-gridline\n .River__visual.River__visual--padding-none\n :is(img, picture, video, [data-video-player-container]),\n.River--variant-gridline\n .River__visual.River__visual--rounded.River__visual--padding-none\n :is(img, picture, video, [data-video-player-container]) {\n border-radius: 0;\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"],"mappings":""}
|
|
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@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 :is(img, picture) {\n display: block;\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(--brand-River-variant-gridline-visual-padding);\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 {\n max-width: 618px;\n margin-inline: auto;\n }\n\n .River--variant-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\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-24);\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-family: var(--brand-fontStack-monospace);\n /* optical resize relative to parent. monospace tends to be a little taller than sans-serif */\n font-size: calc(1em - 1px);\n font-weight: var(--base-text-weight-regular);\n /* Keep the background clear of adjacent lines when large text wraps. */\n line-height: 1.6;\n color: var(--brand-InlineCode-color-fg-default);\n background-color: var(--brand-InlineCode-bgColor);\n padding-block: 0;\n padding-inline: var(--base-size-4);\n border-radius: var(--base-size-2);\n white-space: normal;\n overflow-wrap: anywhere;\n -webkit-box-decoration-break: clone;\n box-decoration-break: clone;\n}\n\n.River__leadingComponent :is(img, picture),\n.River__trailingComponent :is(img, picture) {\n display: block;\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 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/* Explicit visual media layouts override the responsive default without changing it. */\n.River--variant-gridline .River__visual.River__visual--position-center {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--brand-River-variant-gridline-visual-padding);\n border-radius: 0;\n}\n\n.River--variant-gridline .River__visual.River__visual--position-block-end {\n display: flex;\n align-items: flex-end;\n justify-content: center;\n padding: var(--brand-River-variant-gridline-visual-padding);\n padding-block-end: 0;\n border-radius: 0;\n}\n\n.River--variant-gridline .River__visual.River__visual--position-block-end-inline-start {\n display: flex;\n align-items: flex-end;\n justify-content: flex-start;\n padding: var(--brand-River-variant-gridline-visual-padding);\n padding-block-end: 0;\n padding-inline-start: 0;\n border-radius: 0;\n}\n\n.River--variant-gridline .River__visual.River__visual--position-block-end-inline-end {\n display: flex;\n align-items: flex-end;\n justify-content: flex-end;\n padding: var(--brand-River-variant-gridline-visual-padding);\n padding-block-end: 0;\n padding-inline-end: 0;\n border-radius: 0;\n}\n\n.River--variant-gridline .River__visual.River__visual--padding-all {\n padding: var(--brand-River-variant-gridline-visual-padding);\n}\n\n.River--variant-gridline .River__visual.River__visual--padding-none {\n padding: 0;\n border-radius: 0;\n}\n\n.River--variant-gridline\n .River__visual:is(\n .River__visual--position-center,\n .River__visual--position-block-end,\n .River__visual--position-block-end-inline-start,\n .River__visual--position-block-end-inline-end\n )\n :is(img, picture, video, [data-video-player-container]) {\n max-width: 100%;\n width: auto;\n height: auto;\n border-radius: 0;\n}\n\n.River--variant-gridline\n .River__visual.River__visual--padding-all\n :is(img, picture, video, [data-video-player-container]) {\n border-radius: 0;\n}\n\n.River--variant-gridline\n .River__visual.River__visual--rounded.River__visual--position-center\n :is(img, picture, video, [data-video-player-container]) {\n border-radius: var(--brand-borderRadius-large);\n}\n\n.River--variant-gridline\n .River__visual.River__visual--rounded.River__visual--position-block-end\n :is(img, picture, video, [data-video-player-container]) {\n border-radius: var(--brand-borderRadius-large) var(--brand-borderRadius-large) 0 0;\n}\n\n.River--variant-gridline\n .River__visual.River__visual--rounded.River__visual--position-block-end-inline-start\n :is(img, picture, video, [data-video-player-container]) {\n border-radius: 0;\n border-start-end-radius: var(--brand-borderRadius-large);\n}\n\n.River--variant-gridline\n .River__visual.River__visual--rounded.River__visual--position-block-end-inline-end\n :is(img, picture, video, [data-video-player-container]) {\n border-radius: 0;\n border-start-start-radius: var(--brand-borderRadius-large);\n}\n\n.River--variant-gridline\n .River__visual.River__visual--rounded.River__visual--padding-all\n :is(img, picture, video, [data-video-player-container]) {\n border-radius: var(--brand-borderRadius-large);\n}\n\n.River--variant-gridline\n .River__visual.River__visual--fill-media.River__visual--padding-none\n :is(img, picture, video, [data-video-player-container]) {\n width: 100%;\n max-width: none;\n height: 100%;\n object-fit: cover;\n}\n\n.River--variant-gridline\n .River__visual.River__visual--padding-none\n :is(img, picture, video, [data-video-player-container]),\n.River--variant-gridline\n .River__visual.River__visual--rounded.River__visual--padding-none\n :is(img, picture, video, [data-video-player-container]) {\n border-radius: 0;\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"],"mappings":""}
|
|
@@ -5,6 +5,7 @@ import { TextProps } from '../Text';
|
|
|
5
5
|
/**
|
|
6
6
|
* Design tokens
|
|
7
7
|
*/
|
|
8
|
+
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css';
|
|
8
9
|
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes.css';
|
|
9
10
|
import { type LinkProps } from '../Link';
|
|
10
11
|
export declare const CTABannerBackgroundColors: readonly ["default", "subtle"];
|
package/lib/Card/Card.d.ts
CHANGED
|
@@ -5,6 +5,7 @@ import type { BaseProps } from '../component-helpers';
|
|
|
5
5
|
/**
|
|
6
6
|
* Design tokens
|
|
7
7
|
*/
|
|
8
|
+
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css';
|
|
8
9
|
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/base.css';
|
|
9
10
|
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes.css';
|
|
10
11
|
export declare const CardVariants: readonly ["default", "minimal"];
|
|
@@ -96,7 +97,7 @@ type CardDescriptionProps = BaseProps<HTMLParagraphElement> & {
|
|
|
96
97
|
};
|
|
97
98
|
/**
|
|
98
99
|
* Card component:
|
|
99
|
-
*
|
|
100
|
+
* @see https://primer.style/brand/components/Card
|
|
100
101
|
*/
|
|
101
102
|
export declare const Card: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
|
|
102
103
|
Image: typeof CardImage;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { BaseProps } from '../component-helpers';
|
|
3
|
+
/**
|
|
4
|
+
* Design tokens
|
|
5
|
+
*/
|
|
6
|
+
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css';
|
|
7
|
+
export type InlineCodeProps = React.ComponentPropsWithoutRef<'code'> & BaseProps<HTMLElement> & {
|
|
8
|
+
/**
|
|
9
|
+
* Controls whether the code fragment can wrap.
|
|
10
|
+
* Disable only for short fragments that must remain together.
|
|
11
|
+
* @default true
|
|
12
|
+
*/
|
|
13
|
+
wrap?: boolean;
|
|
14
|
+
};
|
|
15
|
+
/**
|
|
16
|
+
* Use InlineCode to render a short inline code fragment.
|
|
17
|
+
*/
|
|
18
|
+
export declare const InlineCode: React.ForwardRefExoticComponent<Omit<InlineCodeProps, "ref"> & React.RefAttributes<HTMLElement>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './InlineCode';
|
package/lib/Label/Label.d.ts
CHANGED
|
@@ -25,7 +25,9 @@ export type LabelProps = BaseProps<HTMLSpanElement> & {
|
|
|
25
25
|
['data-testid']?: string;
|
|
26
26
|
} & React.ComponentPropsWithoutRef<'span'>;
|
|
27
27
|
/**
|
|
28
|
-
* Use
|
|
28
|
+
* Use Label to display short status or metadata attached to an object in product-like UI
|
|
29
|
+
* Prefer Token for general-purpose compact metadata, categories, statuses, and short pre-heading markers.
|
|
30
|
+
*
|
|
29
31
|
* @see https://primer.style/brand/components/Label
|
|
30
32
|
*/
|
|
31
33
|
export declare const Label: React.ForwardRefExoticComponent<Omit<LabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>> & {
|
|
@@ -4,6 +4,7 @@ import { BaseProps } from '../component-helpers';
|
|
|
4
4
|
* Design tokens
|
|
5
5
|
*/
|
|
6
6
|
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/footer/colors-with-modes.css';
|
|
7
|
+
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/footer/base.css';
|
|
7
8
|
declare const socialLinkData: {
|
|
8
9
|
readonly x: {
|
|
9
10
|
readonly fullName: "X";
|
|
@@ -64,6 +65,13 @@ declare const socialLinkData: {
|
|
|
64
65
|
};
|
|
65
66
|
type SocialLinkName = keyof typeof socialLinkData;
|
|
66
67
|
export type MinimalFooterProps = {
|
|
68
|
+
/**
|
|
69
|
+
* Escape-hatch for inserting custom React components.
|
|
70
|
+
* Warning:
|
|
71
|
+
* This prop isn't advertised in our docs but remains part of the public API for edge-cases.
|
|
72
|
+
* Need to use this prop? Please check in with #primer-brand first to confirm correct usage.
|
|
73
|
+
*/
|
|
74
|
+
centerComponent?: React.ReactElement;
|
|
67
75
|
/**
|
|
68
76
|
* An array of social links to be displayed in the footer.
|
|
69
77
|
*/
|
|
@@ -78,12 +86,27 @@ export type MinimalFooterProps = {
|
|
|
78
86
|
*/
|
|
79
87
|
copyrightStatement?: string | React.ReactElement;
|
|
80
88
|
} & BaseProps<HTMLElement>;
|
|
81
|
-
declare function Root({ className, children, copyrightStatement, logoHref, socialLinks, ...rest }: PropsWithChildren<MinimalFooterProps>): import("react/jsx-runtime").JSX.Element;
|
|
89
|
+
declare function Root({ centerComponent, className, children, copyrightStatement, logoHref, socialLinks, ...rest }: PropsWithChildren<MinimalFooterProps>): import("react/jsx-runtime").JSX.Element;
|
|
82
90
|
type FootnoteProps = BaseProps<HTMLElement>;
|
|
83
91
|
declare function Footnotes({ children, className }: PropsWithChildren<FootnoteProps>): import("react/jsx-runtime").JSX.Element;
|
|
84
92
|
type LinkProps<C extends React.ElementType> = BaseProps<C> & {
|
|
85
93
|
as?: 'a' | 'button';
|
|
86
94
|
} & Omit<React.ComponentPropsWithoutRef<C>, keyof C>;
|
|
95
|
+
export type MinimalFooterBackToTopProps = {
|
|
96
|
+
/**
|
|
97
|
+
* The visible and accessible label.
|
|
98
|
+
*/
|
|
99
|
+
children: React.ReactNode;
|
|
100
|
+
/**
|
|
101
|
+
* The ID of the semantic top-of-page element that receives focus after keyboard activation.
|
|
102
|
+
* Defaults to the first `<main>` element, then falls back to `<body>`.
|
|
103
|
+
*/
|
|
104
|
+
focusTargetId?: string;
|
|
105
|
+
/**
|
|
106
|
+
* Runs before the built-in behavior. Call `event.preventDefault()` to cancel scrolling and focus transfer.
|
|
107
|
+
*/
|
|
108
|
+
onClick?: React.MouseEventHandler<HTMLButtonElement>;
|
|
109
|
+
} & BaseProps<HTMLButtonElement> & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'children'>;
|
|
87
110
|
/**
|
|
88
111
|
* Use MinimalFooter to render a global footer on all GitHub pages.
|
|
89
112
|
* @see https://primer.style/brand/components/MinimalFooter
|
|
@@ -91,5 +114,6 @@ type LinkProps<C extends React.ElementType> = BaseProps<C> & {
|
|
|
91
114
|
export declare const MinimalFooter: typeof Root & {
|
|
92
115
|
Footnotes: typeof Footnotes;
|
|
93
116
|
Link: <C extends React.ElementType = "a">({ as, children, ...rest }: PropsWithChildren<LinkProps<C>>) => import("react/jsx-runtime").JSX.Element;
|
|
117
|
+
BackToTop: React.ForwardRefExoticComponent<Omit<MinimalFooterBackToTopProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
94
118
|
};
|
|
95
119
|
export {};
|
package/lib/Pillar/Pillar.d.ts
CHANGED
|
@@ -43,7 +43,7 @@ type PillarLinkProps = {
|
|
|
43
43
|
} & Omit<LinkProps, 'size' | 'direction'> & BaseProps<HTMLAnchorElement>;
|
|
44
44
|
/**
|
|
45
45
|
* Pillar component:
|
|
46
|
-
*
|
|
46
|
+
* @see https://primer.style/brand/components/Pillar
|
|
47
47
|
*/
|
|
48
48
|
export declare const Pillar: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<PillarProps<"div">>, "ref"> & React.RefAttributes<HTMLDivElement>> & {
|
|
49
49
|
Icon: typeof PillarIcon;
|
|
@@ -63,6 +63,10 @@ type PricingOptionsFeatureListGroupHeadingProps = PropsWithChildren<BaseProps<HT
|
|
|
63
63
|
type PricingOptionsFeatureListItemProps = PropsWithChildren<BaseProps<HTMLLIElement>> & {
|
|
64
64
|
'data-testid'?: string;
|
|
65
65
|
infoTooltip?: string;
|
|
66
|
+
/**
|
|
67
|
+
* Optional accessible label for the info tooltip trigger. Overrides the automatically generated label.
|
|
68
|
+
*/
|
|
69
|
+
infoTooltipAriaLabel?: string;
|
|
66
70
|
variant?: 'included' | 'excluded';
|
|
67
71
|
} & Omit<ListItemProps, 'variant'>;
|
|
68
72
|
type AsA = {
|
package/lib/Token/Token.d.ts
CHANGED
|
@@ -34,8 +34,8 @@ type TokenAnchorProps = BaseProps<HTMLAnchorElement> & TokenSharedProps & {
|
|
|
34
34
|
} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>;
|
|
35
35
|
export type TokenProps = TokenSpanProps | TokenAnchorProps;
|
|
36
36
|
/**
|
|
37
|
-
* Use
|
|
38
|
-
* @see https://primer.style/brand
|
|
37
|
+
* Use Token to display compact metadata that describes or supports adjacent content.
|
|
38
|
+
* @see https://primer.style/brand/components/Token
|
|
39
39
|
*/
|
|
40
40
|
export declare const Token: React.ForwardRefExoticComponent<(Omit<TokenSpanProps, "ref"> | Omit<TokenAnchorProps, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLSpanElement>> & {
|
|
41
41
|
testIds: {
|