@primer/react-brand 0.72.0-rc.f8b72452 → 0.72.1-rc.8a8dc720
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/ButtonGroup/react.md +29 -8
- package/docs/components/Card/react.md +62 -13
- package/docs/components/Hero/react.md +82 -18
- package/docs/components/River/react.md +46 -13
- package/docs/components/index.md +1 -1
- package/docs/getting-started/index.md +9 -3
- package/docs/index.md +3 -3
- package/esm/ActionMenu/ActionMenu.d.ts +1 -1
- package/esm/ActionMenu/ActionMenu.d.ts.map +1 -1
- package/esm/ActionMenu/ActionMenu.js +60 -60
- package/esm/ActionMenu/ActionMenu.js.map +1 -1
- package/esm/AnchorNav/AnchorNav.js +20 -20
- package/esm/Avatar/Avatar.module-DUQdD7On.css +1 -0
- package/esm/Avatar/Avatar.module.js +1 -1
- package/esm/Avatar/Avatar.module.js.map +1 -1
- package/esm/BreakoutBanner/{BreakoutBanner.module-DGBSJFNJ.css → BreakoutBanner.module-gfmzcUSU.css} +1 -1
- package/esm/BreakoutBanner/BreakoutBanner.module.js +1 -1
- package/esm/BreakoutBanner/BreakoutBanner.module.js.map +1 -1
- package/esm/ButtonGroup/ButtonGroup.d.ts +4 -1
- package/esm/ButtonGroup/ButtonGroup.d.ts.map +1 -1
- package/esm/ButtonGroup/ButtonGroup.js +24 -16
- package/esm/ButtonGroup/ButtonGroup.js.map +1 -1
- package/esm/CTABanner/CTABanner.js +6 -6
- package/esm/CTABanner/CTABanner.module-CDLOww8c.css +1 -0
- package/esm/CTABanner/CTABanner.module.js +1 -1
- package/esm/CTABanner/CTABanner.module.js.map +1 -1
- package/esm/Card/Card.d.ts +6 -3
- package/esm/Card/Card.d.ts.map +1 -1
- package/esm/Card/Card.js +32 -32
- package/esm/Card/Card.js.map +1 -1
- package/esm/Card/Card.module-4GGxtM9r.css +1 -0
- package/esm/Card/Card.module.js +4 -1
- package/esm/Card/Card.module.js.map +1 -1
- package/esm/EyebrowBanner/EyebrowBanner.module-DYeTmaU9.css +1 -0
- package/esm/EyebrowBanner/EyebrowBanner.module.js +1 -1
- package/esm/EyebrowBanner/EyebrowBanner.module.js.map +1 -1
- package/esm/Hero/Hero.d.ts +17 -4
- package/esm/Hero/Hero.d.ts.map +1 -1
- package/esm/Hero/Hero.js +103 -98
- package/esm/Hero/Hero.js.map +1 -1
- package/esm/Hero/Hero.module-BfrAFYlo.css +1 -0
- package/esm/Hero/Hero.module.js +8 -5
- package/esm/Hero/Hero.module.js.map +1 -1
- package/esm/Hero/HeroContext.d.ts +7 -5
- package/esm/Hero/HeroContext.d.ts.map +1 -1
- package/esm/Hero/HeroContext.js +3 -9
- package/esm/Hero/HeroContext.js.map +1 -1
- package/esm/Hero/sub-components/HeroButtonGroup.d.ts +5 -0
- package/esm/Hero/sub-components/HeroButtonGroup.d.ts.map +1 -0
- package/esm/Hero/sub-components/HeroButtonGroup.js +28 -0
- package/esm/Hero/sub-components/HeroButtonGroup.js.map +1 -0
- package/esm/Hero/sub-components/HeroImage.d.ts +7 -4
- package/esm/Hero/sub-components/HeroImage.d.ts.map +1 -1
- package/esm/Hero/sub-components/HeroImage.js +6 -6
- package/esm/Hero/sub-components/HeroImage.js.map +1 -1
- package/esm/Hero/sub-components/HeroVideo.d.ts +16 -4
- package/esm/Hero/sub-components/HeroVideo.d.ts.map +1 -1
- package/esm/Hero/sub-components/HeroVideo.js +15 -15
- package/esm/Hero/sub-components/HeroVideo.js.map +1 -1
- package/esm/Hero/sub-components/index.d.ts +2 -0
- package/esm/Hero/sub-components/index.d.ts.map +1 -1
- package/esm/Link/Link.js +5 -5
- package/esm/LogoSuite/LogoSuite.js +11 -11
- package/esm/LogoSuite/LogoSuite.module-BCbX-lfy.css +1 -0
- package/esm/LogoSuite/LogoSuite.module.js +1 -1
- package/esm/LogoSuite/LogoSuite.module.js.map +1 -1
- package/esm/MinimalFooter/MinimalFooter.js +6 -6
- package/esm/MinimalFooter/{MinimalFooter.module-DPMYigso.css → MinimalFooter.module-Cl2g38SO.css} +1 -1
- package/esm/MinimalFooter/MinimalFooter.module.js +1 -1
- package/esm/MinimalFooter/MinimalFooter.module.js.map +1 -1
- package/esm/PricingOptions/PricingOptions.js +18 -18
- package/esm/PricingOptions/{PricingOptions.module-Cm3Oq9u6.css → PricingOptions.module-CgPKaZAm.css} +1 -1
- package/esm/PricingOptions/PricingOptions.module.js +1 -1
- package/esm/PricingOptions/PricingOptions.module.js.map +1 -1
- package/esm/SectionIntro/SectionIntro.module-BbIW9pPO.css +1 -0
- package/esm/SectionIntro/SectionIntro.module.js +1 -1
- package/esm/SectionIntro/SectionIntro.module.js.map +1 -1
- package/esm/Statistic/Statistic.d.ts.map +1 -1
- package/esm/Statistic/Statistic.js +1 -1
- package/esm/Statistic/Statistic.js.map +1 -1
- package/esm/Statistic/{Statistic.module-Dqb6n1GX.css → Statistic.module-DvdiSbXk.css} +1 -1
- package/esm/Statistic/Statistic.module.js +2 -1
- package/esm/Statistic/Statistic.module.js.map +1 -1
- package/esm/SubNav/SubNav.js +30 -30
- package/esm/SubdomainNavBar/NavigationVisbilityObserver.js +21 -21
- package/esm/SubdomainNavBar/SubdomainNavBar.js +83 -83
- package/esm/Testimonial/Testimonial.js +1 -1
- package/esm/Testimonial/Testimonial.js.map +1 -1
- package/esm/Testimonial/Testimonial.module-BEBpUSD7.css +1 -0
- package/esm/Testimonial/Testimonial.module.js +2 -1
- package/esm/Testimonial/Testimonial.module.js.map +1 -1
- package/esm/VideoPlayer/VideoPlayer.js +4 -4
- package/esm/css/reset-CSgu34_f.css +1 -0
- package/esm/css/stylesheets.js +1 -1
- package/esm/index.esm.js +68 -68
- package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/colors/global-with-modes-Bdet_nBw.css +1 -0
- package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/card/base-DgOt50dE.css +1 -0
- package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/river/river-DHn1_SEa.css +1 -0
- package/esm/river/River/River.d.ts +17 -3
- package/esm/river/River/River.d.ts.map +1 -1
- package/esm/river/River/River.js +30 -11
- package/esm/river/River/River.js.map +1 -1
- package/esm/river/River/index.d.ts +2 -2
- package/esm/river/River/index.d.ts.map +1 -1
- package/esm/river/RiverAccordion/RiverAccordion.js +1 -1
- package/esm/river/RiverBreakout/RiverBreakout.d.ts +2 -2
- package/esm/river/RiverBreakout/RiverBreakout.d.ts.map +1 -1
- package/esm/river/RiverBreakout/RiverBreakout.js +18 -18
- package/esm/river/RiverBreakout/RiverBreakout.js.map +1 -1
- package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.d.ts +3 -3
- package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.d.ts.map +1 -1
- package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.js +2 -2
- package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.js.map +1 -1
- package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.module-CB2SZhbE.css +1 -0
- package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.module.js +1 -1
- package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.module.js.map +1 -1
- package/esm/river/RiverStoryScroll/RiverStoryScroll.module-kez68wMZ.css +1 -0
- package/esm/river/RiverStoryScroll/RiverStoryScroll.module.js +1 -1
- package/esm/river/RiverStoryScroll/RiverStoryScroll.module.js.map +1 -1
- package/esm/river/river-shared.module-5fefR7ip.css +1 -0
- package/esm/river/river-shared.module.js +10 -2
- package/esm/river/river-shared.module.js.map +1 -1
- package/lib/ActionMenu/ActionMenu.d.ts +1 -1
- package/lib/ButtonGroup/ButtonGroup.d.ts +4 -1
- package/lib/Card/Card.d.ts +6 -3
- package/lib/Hero/Hero.d.ts +17 -4
- package/lib/Hero/HeroContext.d.ts +7 -5
- package/lib/Hero/sub-components/HeroButtonGroup.d.ts +4 -0
- package/lib/Hero/sub-components/HeroImage.d.ts +7 -4
- package/lib/Hero/sub-components/HeroVideo.d.ts +16 -4
- package/lib/Hero/sub-components/index.d.ts +2 -0
- package/lib/css/main.css +7012 -6764
- 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 +4 -4
- package/lib/design-tokens/css/tokens/functional/colors/global.css +3 -3
- 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 +3 -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/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/footer/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/frosted-glass-vfx/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/frosted-glass-vfx/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/grid/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/grid/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/grid/grid.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/hero/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/icon/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/icon/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/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-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 +8 -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 +4 -4
- 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 +5 -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/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/frosted-glass-vfx/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/grid/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/grid/grid.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/hero/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/icon/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/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-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 +4 -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 +3 -3
- package/lib/design-tokens/js/tokens/functional/components/bento/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/card/base.js +3 -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/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/frosted-glass-vfx/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/grid/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/grid/grid.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/hero/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/icon/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/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-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 +2 -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 +2 -2
- 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 +3 -3
- package/lib/design-tokens/scss/tokens/functional/components/bento/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/card/base.scss +3 -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/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/frosted-glass-vfx/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/grid/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/grid/grid.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/hero/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/icon/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/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-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 +2 -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 +3 -3
- 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 +5 -1
- package/lib/design-tokens/ts/tokens/functional/components/card/base.js +5 -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/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/footer/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/frosted-glass-vfx/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/frosted-glass-vfx/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/grid/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/grid/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/grid/grid.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/grid/grid.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/hero/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/hero/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/icon/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/icon/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/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-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 +4 -1
- package/lib/design-tokens/ts/tokens/functional/components/river/river.js +4 -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.js +1 -1
- package/lib/river/River/River.d.ts +17 -3
- package/lib/river/River/index.d.ts +2 -2
- package/lib/river/RiverBreakout/RiverBreakout.d.ts +2 -2
- package/lib/river/RiverBreakoutTabs/RiverBreakoutTabs.d.ts +3 -3
- package/llms.txt +3 -3
- package/package.json +1 -1
- package/esm/Avatar/Avatar.module-DzfWmLu4.css +0 -1
- package/esm/CTABanner/CTABanner.module-DZUT186Y.css +0 -1
- package/esm/Card/Card.module-B41BqbuX.css +0 -1
- package/esm/EyebrowBanner/EyebrowBanner.module-C8hfGfYx.css +0 -1
- package/esm/Hero/Hero.module-DjsgFkIQ.css +0 -1
- package/esm/LogoSuite/LogoSuite.module-69Mthqju.css +0 -1
- package/esm/SectionIntro/SectionIntro.module-CiRymbla.css +0 -1
- package/esm/Testimonial/Testimonial.module-DRCosU_J.css +0 -1
- package/esm/css/reset-PKNIUbst.css +0 -1
- package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/colors/global-with-modes-tpdcmiok.css +0 -1
- package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/card/base-BRKNIzyd.css +0 -1
- package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/river/river-QteO10lt.css +0 -1
- package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.module-CH8jehnx.css +0 -1
- package/esm/river/RiverStoryScroll/RiverStoryScroll.module-D8dFaLHq.css +0 -1
- package/esm/river/river-shared.module-Bf_bNlTd.css +0 -1
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import e from "../node_modules/clsx/dist/clsx.js";
|
|
2
2
|
import { useId as t } from "../hooks/useId.js";
|
|
3
3
|
import { Text as n } from "../Text/Text.js";
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import d from "
|
|
9
|
-
import
|
|
4
|
+
import { Button as r } from "../Button/Button.js";
|
|
5
|
+
import { useOnClickOutside as i } from "../hooks/useOnClickOutside.js";
|
|
6
|
+
import { useKeyboardEscape as a } from "../hooks/useKeyboardEscape.js";
|
|
7
|
+
import { ChevronLeftIcon as o, LinkExternalIcon as s, MarkGithubIcon as c, SearchIcon as l, XIcon as u } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
|
|
8
|
+
import { useWindowSize as d } from "../hooks/useWindowSize.js";
|
|
9
|
+
import f from "./SubdomainNavBar.module.js";
|
|
10
10
|
import { NavigationVisbilityObserver as p } from "./NavigationVisbilityObserver.js";
|
|
11
11
|
import { useFocusTrap as m } from "../hooks/useFocusTrap.js";
|
|
12
12
|
import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/subdomain-nav-bar/colors-with-modes-ehJCoExh.css';/* empty css */
|
|
@@ -30,8 +30,8 @@ var D = {
|
|
|
30
30
|
return `${this.root}-search-live-region`;
|
|
31
31
|
}
|
|
32
32
|
};
|
|
33
|
-
function O({ children: i, className:
|
|
34
|
-
let [P, F] = C(!0), [I, L] = C(!1), { isSmall: R, isMedium: z } =
|
|
33
|
+
function O({ children: i, className: s, fixed: l = !0, fullWidth: u = !1, logoHref: h = "https://github.com", title: g, titleHref: v = "/", onNarrowMenuToggle: O, ...N }) {
|
|
34
|
+
let [P, F] = C(!0), [I, L] = C(!1), { isSmall: R, isMedium: z } = d(), [B, V] = C(!1), H = S(null), U = t("start-of-content"), W = () => {
|
|
35
35
|
let e = !P;
|
|
36
36
|
F(e), O?.(!e);
|
|
37
37
|
}, G = () => L(!I), K = S(null);
|
|
@@ -42,7 +42,7 @@ function O({ children: i, className: o, fixed: s = !0, fullWidth: u = !1, logoHr
|
|
|
42
42
|
containerRef: K,
|
|
43
43
|
restoreFocusOnCleanUp: !0,
|
|
44
44
|
disabled: P
|
|
45
|
-
}),
|
|
45
|
+
}), a(() => {
|
|
46
46
|
F(!0), O?.(!1);
|
|
47
47
|
}), b(() => {
|
|
48
48
|
z && (F(!0), O?.(!1));
|
|
@@ -70,51 +70,51 @@ function O({ children: i, className: o, fixed: s = !0, fullWidth: u = !1, logoHr
|
|
|
70
70
|
return !!e && !!t;
|
|
71
71
|
}, [i]);
|
|
72
72
|
return /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ E("div", {
|
|
73
|
-
className: e(
|
|
74
|
-
children: [/* @__PURE__ */ T(
|
|
73
|
+
className: e(f["SubdomainNavBar-outer-container"], l && f["SubdomainNavBar-outer-container--fixed"], Z && f["SubdomainNavBar-outer-container--has-actions"]),
|
|
74
|
+
children: [/* @__PURE__ */ T(r, {
|
|
75
75
|
as: "a",
|
|
76
76
|
href: `#${H.current?.id || U}`,
|
|
77
77
|
variant: "primary",
|
|
78
|
-
className: e(
|
|
78
|
+
className: e(f["SubdomainNavBar-skip-to-content"], !B && "visually-hidden"),
|
|
79
79
|
onFocus: q,
|
|
80
80
|
onBlur: J,
|
|
81
81
|
children: "Skip to content"
|
|
82
82
|
}), /* @__PURE__ */ T("header", {
|
|
83
|
-
className: e(
|
|
83
|
+
className: e(f.SubdomainNavBar, s),
|
|
84
84
|
"data-testid": D.root,
|
|
85
85
|
...N,
|
|
86
86
|
children: /* @__PURE__ */ E("div", {
|
|
87
87
|
ref: K,
|
|
88
|
-
className: e(
|
|
88
|
+
className: e(f["SubdomainNavBar-inner-container"], I && f["SubdomainNavBar-inner-container--search-open"], !u && f["SubdomainNavBar-inner-container--centered"]),
|
|
89
89
|
"data-testid": D.innerContainer,
|
|
90
90
|
children: [
|
|
91
91
|
/* @__PURE__ */ T("nav", {
|
|
92
92
|
"aria-label": "Header logo and title",
|
|
93
93
|
children: /* @__PURE__ */ E("ol", {
|
|
94
|
-
className:
|
|
94
|
+
className: f["SubdomainNavBar-title-area"],
|
|
95
95
|
children: [/* @__PURE__ */ T("li", { children: /* @__PURE__ */ E("a", {
|
|
96
96
|
href: h,
|
|
97
97
|
"aria-label": "Github Home",
|
|
98
|
-
className:
|
|
98
|
+
className: f["SubdomainNavBar-logo-mark"],
|
|
99
99
|
children: [/* @__PURE__ */ T("span", {
|
|
100
|
-
className: e(
|
|
101
|
-
children: /* @__PURE__ */ T(
|
|
100
|
+
className: e(f["SubdomainNavBar-back-arrow"]),
|
|
101
|
+
children: /* @__PURE__ */ T(o, {
|
|
102
102
|
fill: "currentColor",
|
|
103
103
|
size: 24
|
|
104
104
|
})
|
|
105
|
-
}), /* @__PURE__ */ T(
|
|
105
|
+
}), /* @__PURE__ */ T(c, {
|
|
106
106
|
fill: "currentColor",
|
|
107
107
|
size: 24
|
|
108
108
|
})]
|
|
109
109
|
}) }), g && R && /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T("li", {
|
|
110
110
|
role: "separator",
|
|
111
|
-
className:
|
|
111
|
+
className: f["SubdomainNavBar-title-separator"],
|
|
112
112
|
"aria-hidden": !0,
|
|
113
113
|
children: "/"
|
|
114
114
|
}), /* @__PURE__ */ T("li", { children: /* @__PURE__ */ T("a", {
|
|
115
115
|
href: v,
|
|
116
116
|
"aria-label": `${g} home`,
|
|
117
|
-
className: e(
|
|
117
|
+
className: e(f["SubdomainNavBar-title"]),
|
|
118
118
|
children: /* @__PURE__ */ T(n, {
|
|
119
119
|
size: "400",
|
|
120
120
|
weight: "medium",
|
|
@@ -126,15 +126,15 @@ function O({ children: i, className: o, fixed: s = !0, fullWidth: u = !1, logoHr
|
|
|
126
126
|
Y && /* @__PURE__ */ T("nav", {
|
|
127
127
|
id: "menu-navigation",
|
|
128
128
|
"aria-label": g,
|
|
129
|
-
className:
|
|
129
|
+
className: f["SubdomainNavBar-primary-nav"],
|
|
130
130
|
"data-testid": D.menuLinks,
|
|
131
131
|
children: /* @__PURE__ */ T(p, {
|
|
132
|
-
className: e(
|
|
132
|
+
className: e(f["SubdomainNavBar-primary-nav-list--invisible"]),
|
|
133
133
|
children: X
|
|
134
134
|
})
|
|
135
135
|
}),
|
|
136
136
|
/* @__PURE__ */ E("div", {
|
|
137
|
-
className: e(
|
|
137
|
+
className: e(f["SubdomainNavBar-secondary-nav"]),
|
|
138
138
|
children: [
|
|
139
139
|
_.Children.toArray(i).map((e) => _.isValidElement(e) && e.type === A ? _.cloneElement(e, {
|
|
140
140
|
active: I,
|
|
@@ -146,39 +146,39 @@ function O({ children: i, className: o, fixed: s = !0, fullWidth: u = !1, logoHr
|
|
|
146
146
|
"aria-label": "Menu",
|
|
147
147
|
"aria-controls": "menu-navigation",
|
|
148
148
|
"aria-haspopup": "true",
|
|
149
|
-
className: e(
|
|
149
|
+
className: e(f["SubdomainNavBar-menu-button"], f["SubdomainNavBar-mobile-menu-button"], !P && f["SubdomainNavBar-menu-button--close"]),
|
|
150
150
|
"data-testid": D.menuButton,
|
|
151
151
|
onClick: W,
|
|
152
152
|
children: [
|
|
153
|
-
/* @__PURE__ */ T("div", { className: e(
|
|
154
|
-
/* @__PURE__ */ T("div", { className: e(
|
|
155
|
-
/* @__PURE__ */ T("div", { className: e(
|
|
153
|
+
/* @__PURE__ */ T("div", { className: e(f["SubdomainNavBar-menu-button-bar"]) }),
|
|
154
|
+
/* @__PURE__ */ T("div", { className: e(f["SubdomainNavBar-menu-button-bar"]) }),
|
|
155
|
+
/* @__PURE__ */ T("div", { className: e(f["SubdomainNavBar-menu-button-bar"]) })
|
|
156
156
|
]
|
|
157
157
|
}),
|
|
158
158
|
z && /* @__PURE__ */ T("div", {
|
|
159
|
-
className: e(
|
|
159
|
+
className: e(f["SubdomainNavBar-button-area"], f["SubdomainNavBar-button-area--visible"]),
|
|
160
160
|
children: /* @__PURE__ */ T("div", {
|
|
161
|
-
className:
|
|
161
|
+
className: f["SubdomainNavBar-button-area-inner"],
|
|
162
162
|
children: _.Children.toArray(i).map((e) => _.isValidElement(e) && (e.type === j || e.type === M) ? e : null).filter(Boolean)
|
|
163
163
|
})
|
|
164
164
|
}),
|
|
165
165
|
!z && /* @__PURE__ */ E("div", {
|
|
166
|
-
className: e(
|
|
166
|
+
className: e(f["SubdomainNavBar-menu-wrapper"], P && f["SubdomainNavBar-menu-wrapper--close"]),
|
|
167
167
|
children: [/* @__PURE__ */ E("div", { children: [g && v && /* @__PURE__ */ T(n, {
|
|
168
168
|
as: "p",
|
|
169
169
|
children: /* @__PURE__ */ T("a", {
|
|
170
170
|
href: v,
|
|
171
171
|
"aria-label": `${g} home`,
|
|
172
|
-
className: e(
|
|
172
|
+
className: e(f["SubdomainNavBar-link"], f["SubdomainNavBar-link--title"]),
|
|
173
173
|
children: g
|
|
174
174
|
})
|
|
175
175
|
}), Y && !P && /* @__PURE__ */ T(p, {
|
|
176
|
-
className: e(
|
|
176
|
+
className: e(f["SubdomainNavBar-primary-nav-list--visible"]),
|
|
177
177
|
children: X
|
|
178
178
|
})] }), /* @__PURE__ */ T("div", {
|
|
179
|
-
className: e(
|
|
179
|
+
className: e(f["SubdomainNavBar-button-area"], f["SubdomainNavBar-button-area--visible"]),
|
|
180
180
|
children: /* @__PURE__ */ T("div", {
|
|
181
|
-
className:
|
|
181
|
+
className: f["SubdomainNavBar-button-area-inner"],
|
|
182
182
|
children: _.Children.toArray(i).map((e) => _.isValidElement(e) && (e.type === j || e.type === M) ? e : null).filter(Boolean)
|
|
183
183
|
})
|
|
184
184
|
})]
|
|
@@ -193,34 +193,34 @@ function O({ children: i, className: o, fixed: s = !0, fullWidth: u = !1, logoHr
|
|
|
193
193
|
tabIndex: -1
|
|
194
194
|
})] });
|
|
195
195
|
}
|
|
196
|
-
function k({ href: t, className: n, children: r, isExternal:
|
|
196
|
+
function k({ href: t, className: n, children: r, isExternal: i, ...a }) {
|
|
197
197
|
return /* @__PURE__ */ T("li", {
|
|
198
|
-
className: e(
|
|
199
|
-
...
|
|
198
|
+
className: e(f["SubdomainNavBar-primary-nav-list-item"], n),
|
|
199
|
+
...a,
|
|
200
200
|
children: /* @__PURE__ */ E("a", {
|
|
201
201
|
href: t,
|
|
202
|
-
className:
|
|
202
|
+
className: f["SubdomainNavBar-link"],
|
|
203
203
|
children: [/* @__PURE__ */ T("span", {
|
|
204
|
-
className:
|
|
204
|
+
className: f["SubdomainNavBar-link-text"],
|
|
205
205
|
children: r
|
|
206
|
-
}),
|
|
206
|
+
}), i && /* @__PURE__ */ T(s, {
|
|
207
207
|
size: 16,
|
|
208
208
|
"aria-label": "External link"
|
|
209
209
|
})]
|
|
210
210
|
})
|
|
211
211
|
});
|
|
212
212
|
}
|
|
213
|
-
var A = v(({ active: t, title: r, searchResults:
|
|
213
|
+
var A = v(({ active: t, title: r, searchResults: o, searchTerm: s, handlerFn: c, onSubmit: d, onChange: p }, _) => {
|
|
214
214
|
let v = S(null);
|
|
215
215
|
m({
|
|
216
216
|
containerRef: v,
|
|
217
217
|
restoreFocusOnCleanUp: !0,
|
|
218
218
|
disabled: !t
|
|
219
|
-
}),
|
|
219
|
+
}), i(v, c);
|
|
220
220
|
let [x, O] = C(-1), [k, A] = C(), [j, M] = C(!1), N = y((e) => {
|
|
221
221
|
c && c(e), O(-1);
|
|
222
222
|
}, [c]);
|
|
223
|
-
|
|
223
|
+
i(v, N), a(() => {
|
|
224
224
|
if (!k && t) return N(), !1;
|
|
225
225
|
A(!1), O(-1);
|
|
226
226
|
});
|
|
@@ -230,28 +230,28 @@ var A = v(({ active: t, title: r, searchResults: i, searchTerm: a, handlerFn: c,
|
|
|
230
230
|
"ArrowUp",
|
|
231
231
|
"Escape",
|
|
232
232
|
"Enter"
|
|
233
|
-
], n = x, r =
|
|
234
|
-
if (!t.includes(e.key) || e.key === "Enter" && x === -1 || !
|
|
235
|
-
e.preventDefault(), e.key === "ArrowDown" ? (
|
|
236
|
-
}, [
|
|
233
|
+
], n = x, r = o ? o.length : 0, i = v.current, a;
|
|
234
|
+
if (!t.includes(e.key) || e.key === "Enter" && x === -1 || !i) return !1;
|
|
235
|
+
e.preventDefault(), e.key === "ArrowDown" ? (a = n < r - 1 ? n + 1 : -1, O(a)) : e.key === "ArrowUp" && (a = n === -1 ? r - 1 : n - 1, O(a)), ["ArrowDown", "ArrowUp"].includes(e.key) && i.querySelector(`#subdomainnavbar-search-result-${a}`)?.scrollIntoView(), e.key === "Enter" && i.querySelector(`#subdomainnavbar-search-result-${x} a`).click();
|
|
236
|
+
}, [o, x]), F = y(() => {
|
|
237
237
|
M(!0), setTimeout(() => {
|
|
238
238
|
t && M(!1);
|
|
239
239
|
}, 200);
|
|
240
240
|
}, [t]);
|
|
241
241
|
return b(() => {
|
|
242
|
-
A(!!(
|
|
242
|
+
A(!!(o && o.length)), F();
|
|
243
243
|
}, [
|
|
244
|
-
|
|
245
|
-
|
|
244
|
+
o,
|
|
245
|
+
s,
|
|
246
246
|
F
|
|
247
247
|
]), /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T("div", {
|
|
248
|
-
className: e(
|
|
248
|
+
className: e(f["SubdomainNavBar-search-trigger"]),
|
|
249
249
|
children: /* @__PURE__ */ T("button", {
|
|
250
250
|
"aria-label": "Toggle search bar",
|
|
251
|
-
className:
|
|
251
|
+
className: f["SubdomainNavBar-search-button"],
|
|
252
252
|
onClick: c,
|
|
253
253
|
"data-testid": "toggle-search",
|
|
254
|
-
children: /* @__PURE__ */ T(
|
|
254
|
+
children: /* @__PURE__ */ T(l, { "aria-label": "Search icon" })
|
|
255
255
|
})
|
|
256
256
|
}), t && /* @__PURE__ */ E("div", {
|
|
257
257
|
ref: v,
|
|
@@ -259,12 +259,12 @@ var A = v(({ active: t, title: r, searchResults: i, searchTerm: a, handlerFn: c,
|
|
|
259
259
|
"aria-label": `Search ${r}`,
|
|
260
260
|
"aria-modal": "true",
|
|
261
261
|
tabIndex: -1,
|
|
262
|
-
className: e(
|
|
262
|
+
className: e(f["SubdomainNavBar-search-dialog"]),
|
|
263
263
|
children: [/* @__PURE__ */ E("div", {
|
|
264
|
-
className: e(
|
|
264
|
+
className: e(f["SubdomainNavBar-search-dialog-control-area"]),
|
|
265
265
|
children: [/* @__PURE__ */ T("form", {
|
|
266
|
-
className: e(
|
|
267
|
-
onSubmit:
|
|
266
|
+
className: e(f["SubdomainNavBar-search-form"]),
|
|
267
|
+
onSubmit: d,
|
|
268
268
|
role: "search",
|
|
269
269
|
children: /* @__PURE__ */ E(g, {
|
|
270
270
|
fullWidth: !0,
|
|
@@ -274,51 +274,51 @@ var A = v(({ active: t, title: r, searchResults: i, searchTerm: a, handlerFn: c,
|
|
|
274
274
|
children: "Search"
|
|
275
275
|
}), /* @__PURE__ */ T(h, {
|
|
276
276
|
ref: _,
|
|
277
|
-
className: e(
|
|
277
|
+
className: e(f["SubdomainNavBar-search-text-input"]),
|
|
278
278
|
name: "search",
|
|
279
279
|
role: "combobox",
|
|
280
280
|
"aria-expanded": k,
|
|
281
281
|
"aria-controls": "listbox-search-results",
|
|
282
282
|
placeholder: `Search ${r}`,
|
|
283
283
|
onChange: p,
|
|
284
|
-
defaultValue:
|
|
284
|
+
defaultValue: s,
|
|
285
285
|
invisible: !0,
|
|
286
|
-
leadingVisual: /* @__PURE__ */ T(
|
|
286
|
+
leadingVisual: /* @__PURE__ */ T(l, { size: 16 }),
|
|
287
287
|
"aria-activedescendant": x === -1 ? void 0 : `subdomainnavbar-search-result-${x}`,
|
|
288
288
|
onKeyDown: P
|
|
289
289
|
})]
|
|
290
290
|
})
|
|
291
291
|
}), /* @__PURE__ */ T("button", {
|
|
292
292
|
"aria-label": "Close",
|
|
293
|
-
className: e(
|
|
293
|
+
className: e(f["SubdomainNavBar-menu-button"], f["SubdomainNavBar-menu-button--close"]),
|
|
294
294
|
onClick: N,
|
|
295
|
-
children: /* @__PURE__ */ T(
|
|
295
|
+
children: /* @__PURE__ */ T(u, { size: 24 })
|
|
296
296
|
})]
|
|
297
297
|
}), /* @__PURE__ */ E("div", {
|
|
298
298
|
id: "listbox-search-results",
|
|
299
299
|
children: [k && /* @__PURE__ */ E("div", {
|
|
300
|
-
className: e(
|
|
300
|
+
className: e(f["SubdomainNavBar-search-results-container"]),
|
|
301
301
|
children: [/* @__PURE__ */ E(n, {
|
|
302
302
|
id: "subdomainnavbar-search-results-heading",
|
|
303
|
-
className:
|
|
303
|
+
className: f["SubdomainNavBar-search-results-heading"],
|
|
304
304
|
children: [
|
|
305
305
|
"Results for “",
|
|
306
|
-
|
|
306
|
+
s,
|
|
307
307
|
"”"
|
|
308
308
|
]
|
|
309
309
|
}), /* @__PURE__ */ T("ul", {
|
|
310
310
|
role: "listbox",
|
|
311
311
|
tabIndex: 0,
|
|
312
312
|
"aria-labelledby": "subdomainnavbar-search-results-heading",
|
|
313
|
-
className: e(
|
|
314
|
-
children:
|
|
313
|
+
className: e(f["SubdomainNavBar-search-results"]),
|
|
314
|
+
children: o?.map((e, t) => /* @__PURE__ */ E("li", {
|
|
315
315
|
id: `subdomainnavbar-search-result-${t}`,
|
|
316
|
-
className:
|
|
316
|
+
className: f["SubdomainNavBar-search-result-item"],
|
|
317
317
|
role: "option",
|
|
318
318
|
"aria-selected": t === x,
|
|
319
319
|
children: [
|
|
320
320
|
/* @__PURE__ */ T("div", {
|
|
321
|
-
className:
|
|
321
|
+
className: f["SubdomainNavBar-search-result-item-container"],
|
|
322
322
|
children: /* @__PURE__ */ T("a", {
|
|
323
323
|
href: e.url,
|
|
324
324
|
children: e.title
|
|
@@ -328,16 +328,16 @@ var A = v(({ active: t, title: r, searchResults: i, searchTerm: a, handlerFn: c,
|
|
|
328
328
|
as: "p",
|
|
329
329
|
size: "200",
|
|
330
330
|
id: `subdomainnavbar-search-result-item-desc${t}`,
|
|
331
|
-
className:
|
|
331
|
+
className: f["SubdomainNavBar-search-result-item-desc"],
|
|
332
332
|
children: e.description
|
|
333
333
|
}),
|
|
334
334
|
/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(n, {
|
|
335
335
|
size: "100",
|
|
336
|
-
className:
|
|
336
|
+
className: f["SubdomainNavBar-search-result-item-desc"],
|
|
337
337
|
children: e.date
|
|
338
338
|
}), e.category && /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ E(n, {
|
|
339
339
|
size: "100",
|
|
340
|
-
className:
|
|
340
|
+
className: f["SubdomainNavBar-search-result-item-desc"],
|
|
341
341
|
children: [
|
|
342
342
|
" ",
|
|
343
343
|
"•",
|
|
@@ -345,7 +345,7 @@ var A = v(({ active: t, title: r, searchResults: i, searchTerm: a, handlerFn: c,
|
|
|
345
345
|
]
|
|
346
346
|
}), /* @__PURE__ */ T(n, {
|
|
347
347
|
size: "100",
|
|
348
|
-
className:
|
|
348
|
+
className: f["SubdomainNavBar-search-result-item-desc"],
|
|
349
349
|
children: e.category
|
|
350
350
|
})] })] })
|
|
351
351
|
]
|
|
@@ -356,29 +356,29 @@ var A = v(({ active: t, title: r, searchResults: i, searchTerm: a, handlerFn: c,
|
|
|
356
356
|
"aria-atomic": "true",
|
|
357
357
|
"data-testid": D.liveRegion,
|
|
358
358
|
className: "visually-hidden",
|
|
359
|
-
children: [`${
|
|
359
|
+
children: [`${o?.length} suggestions.`, j && /* @__PURE__ */ T("span", { children: "\xA0" })]
|
|
360
360
|
})]
|
|
361
361
|
})]
|
|
362
362
|
})] });
|
|
363
363
|
});
|
|
364
|
-
function j({ children: t, href: n, ...
|
|
365
|
-
return /* @__PURE__ */ T(
|
|
364
|
+
function j({ children: t, href: n, ...i }) {
|
|
365
|
+
return /* @__PURE__ */ T(r, {
|
|
366
366
|
as: "a",
|
|
367
367
|
href: n,
|
|
368
|
-
className: e(
|
|
368
|
+
className: e(f["SubdomainNavBar-cta-button"]),
|
|
369
369
|
variant: "primary",
|
|
370
370
|
size: "small",
|
|
371
|
-
...
|
|
371
|
+
...i,
|
|
372
372
|
children: t
|
|
373
373
|
});
|
|
374
374
|
}
|
|
375
|
-
function M({ children: t, href: n, ...
|
|
376
|
-
return /* @__PURE__ */ T(
|
|
375
|
+
function M({ children: t, href: n, ...i }) {
|
|
376
|
+
return /* @__PURE__ */ T(r, {
|
|
377
377
|
as: "a",
|
|
378
378
|
href: n,
|
|
379
|
-
className: e(
|
|
379
|
+
className: e(f["SubdomainNavBar-cta-button"], f["SubdomainNavBar-cta-button--secondary"]),
|
|
380
380
|
size: "small",
|
|
381
|
-
...
|
|
381
|
+
...i,
|
|
382
382
|
children: t
|
|
383
383
|
});
|
|
384
384
|
}
|
|
@@ -87,7 +87,7 @@ function S({ children: t, ...n }, r) {
|
|
|
87
87
|
children: c.Children.map(t, (t) => {
|
|
88
88
|
if (c.isValidElement(t) && t.type === "img") {
|
|
89
89
|
let n = t, i = {
|
|
90
|
-
className: e(s["Testimonial-logo-image"]),
|
|
90
|
+
className: e(s["Testimonial-logo-image"], n.props.className),
|
|
91
91
|
ref: r
|
|
92
92
|
};
|
|
93
93
|
return c.cloneElement(n, i);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Testimonial.js","names":[],"sources":["../../src/Testimonial/Testimonial.tsx"],"sourcesContent":["import React, {\n HTMLAttributes,\n PropsWithChildren,\n forwardRef,\n SVGProps,\n CSSProperties,\n ComponentPropsWithRef,\n} from 'react'\nimport {clsx} from 'clsx'\nimport {BaseProps} from '../component-helpers'\nimport {Text, Avatar as BaseAvatar, useAnimation} from '../'\nimport type {AvatarProps} from '../'\nimport {Link, type LinkProps} from '../Link'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/testimonial/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/testimonial/colors-with-modes.css'\n\nimport styles from './Testimonial.module.css'\nimport {Colors, BiColorGradients} from '../constants'\n\ntype TestimonialSize = 'small' | 'large'\n\nexport const TestimonialQuoteMarkColors = [...Colors, ...BiColorGradients] as const\nexport const defaultQuoteMarkColor = TestimonialQuoteMarkColors[0]\n\nexport const TestimonialVariants = ['subtle', 'default', 'minimal', 'expressive'] as const\ntype TestimonialVariant = (typeof TestimonialVariants)[number]\nexport const defaultTestimonialVariant: TestimonialVariant = 'minimal'\n\nexport type TestimonialProps = {\n /**\n * Sets alternative appearance for the testimonial\n */\n variant?: TestimonialVariant\n /**\n * Applies an optional border where a variant supports it\n */\n hasBorder?: boolean\n /**\n * Valid children include Testimonial.Name, Testimonial.Avatar, and Testimonial.Name\n */\n children:\n | React.ReactNode\n | React.ReactElement<QuoteProps>\n | React.ReactElement<NameProps>\n | React.ReactElement<AvatarProps>\n | React.ReactElement<LogoProps>[]\n /**\n * Sets the testimonial text size\n */\n size?: TestimonialSize\n /** Sets the color of the quote mark */\n quoteMarkColor?: (typeof TestimonialQuoteMarkColors)[number]\n} & BaseProps<HTMLElement> &\n React.HTMLAttributes<HTMLElement>\n\n/**\n * Testimonial parent element\n * <Testimonial>\n */\nfunction TestimonialBase(\n {\n quoteMarkColor,\n animate,\n className,\n children,\n variant = 'minimal',\n hasBorder = true,\n size,\n style,\n ...rest\n }: PropsWithChildren<TestimonialProps>,\n ref,\n) {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const resolvedQuoteMarkColor = quoteMarkColor ?? (variant === 'expressive' ? 'green' : 'default')\n\n const quoteMark = (\n <div\n aria-hidden=\"true\"\n className={clsx(\n styles['Testimonial__quoteMark'],\n styles[`Testimonial__quoteMark--${resolvedQuoteMarkColor}`],\n variant === 'expressive' && styles['Testimonial__quoteMark--hasBackground'],\n )}\n >\n <span className={styles['Testimonial__quoteMarkGlyph']}>“</span>\n </div>\n )\n\n const childrenArray = React.Children.toArray(children)\n const findChild = (type: React.ElementType) =>\n childrenArray.find(child => React.isValidElement(child) && child.type === type)\n\n const quoteChild = findChild(Quote)\n const actionChild = findChild(_Link)\n const avatarChild = findChild(Avatar)\n const logoChild = findChild(Logo)\n const nameChild = findChild(Name)\n\n return (\n <figure\n ref={ref}\n className={clsx(\n animationClasses,\n styles['Testimonial'],\n styles[`Testimonial--variant-${variant}`],\n size && styles[`Testimonial--size-${size}`],\n hasBorder && styles['Testimonial--border'],\n className,\n )}\n style={{\n ...animationInlineStyles,\n ...style,\n ['--testimonial-accent-color' as keyof CSSProperties]: resolvedQuoteMarkColor,\n }}\n {...rest}\n >\n <div className={styles['Testimonial__quoteWrapper']}>\n {quoteMark}\n {quoteChild}\n {actionChild}\n </div>\n <div className={styles['Testimonial__media']}>\n {avatarChild}\n {logoChild}\n {nameChild}\n </div>\n </figure>\n )\n}\n\nconst Root = forwardRef(TestimonialBase)\n\n/**\n * Testimonial quote child element\n * <Testimonial.Quote>\n */\ntype QuoteProps = React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement>\n\nfunction QuoteBase({children, className}: QuoteProps, ref) {\n return (\n <blockquote ref={ref}>\n <Text className={clsx(styles['Testimonial-quote'], className)}>{children}</Text>\n </blockquote>\n )\n}\n\nconst Quote = forwardRef(QuoteBase)\n\n/**\n * Testimonial name child element\n * <Testimonial.Name>\n */\ntype NameProps = {\n position?: string\n} & React.HTMLAttributes<HTMLElement> &\n BaseProps<HTMLElement>\n\nfunction _Name({children, className, position}: NameProps, ref) {\n return (\n <figcaption ref={ref} className={clsx(styles['Testimonial-caption'], className)}>\n <Text size=\"200\" className={clsx(styles['Testimonial-from'])} font=\"monospace\">\n {children}\n </Text>\n {position && (\n <Text size=\"200\" className={clsx(styles['Testimonial-position'])} variant=\"muted\">\n {position}\n </Text>\n )}\n </figcaption>\n )\n}\n\nconst Name = forwardRef(_Name)\n\n/**\n * Testimonial logo child element\n * <Testimonial.Logo>\n */\ntype LogoProps = {\n children: React.ReactElement<SVGProps<SVGSVGElement>> | React.ReactElement<HTMLAttributes<HTMLImageElement>>\n} & React.HTMLAttributes<HTMLImageElement> &\n BaseProps<HTMLImageElement>\n\nfunction _Logo({children, ...rest}: LogoProps, ref) {\n return (\n <div className={styles['Testimonial-logo']} {...rest}>\n {React.Children.map(children, child => {\n if (React.isValidElement(child)) {\n if (child.type === 'img') {\n const imageChild = child as React.ReactElement<ComponentPropsWithRef<'img'>>\n const imageProps: ComponentPropsWithRef<'img'> = {\n className: clsx(styles['Testimonial-logo-image']),\n ref: ref as ComponentPropsWithRef<'img'>['ref'],\n }\n\n return React.cloneElement(imageChild, imageProps)\n }\n }\n })}\n </div>\n )\n}\n\nconst Logo = forwardRef(_Logo)\n\n/**\n * Testimonial avatar child element\n * <Testimonial.Avatar>\n */\n\nfunction _Avatar({size, ...rest}: AvatarProps) {\n return <BaseAvatar className={clsx(styles['Testimonial-avatar'])} size={48} {...rest} />\n}\n\nconst Avatar = _Avatar\n\n/**\n * Testimonial link child element\n * <Testimonial.Link>\n */\nfunction _LinkBase({className, ...rest}: LinkProps, _ref) {\n return <Link className={clsx(styles['Testimonial-link'], className)} {...rest} size=\"medium\" variant=\"accent\" />\n}\n\nconst _Link = forwardRef(_LinkBase)\n\n/**\n * Use Testimonial to display a quote from a customer or user.\n * @see https://primer.style/brand/components/Testimonial\n */\nexport const Testimonial = Object.assign(Root, {\n Quote,\n Name,\n Avatar,\n Logo,\n Link: _Link,\n})\n"],"mappings":";;;;;;;;;;;;AAsBA,IAAa,IAA6B,CAAC,GAAG,GAAQ,GAAG,EAAiB,EAC7D,IAAwB,EAA2B,IAEnD,IAAsB;CAAC;CAAU;CAAW;CAAW;CAAa,EAEpE,IAAgD;AAiC7D,SAAS,EACP,EACE,mBACA,YACA,cACA,aACA,aAAU,WACV,eAAY,IACZ,SACA,UACA,GAAG,KAEL,GACA;CACA,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAyB,MAAmB,MAAY,eAAe,UAAU,YAEjF,IACJ,kBAAC,OAAD;EACE,eAAY;EACZ,WAAW,EACT,EAAO,wBACP,EAAO,2BAA2B,MAClC,MAAY,gBAAgB,EAAO,yCACpC;YAED,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAgC;GAAc,CAAA;EAClE,CAAA,EAGF,IAAgB,EAAM,SAAS,QAAQ,EAAS,EAChD,KAAa,MACjB,EAAc,MAAK,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAK,EAE3E,IAAa,EAAU,EAAM,EAC7B,IAAc,EAAU,EAAM,EAC9B,IAAc,EAAU,EAAO,EAC/B,IAAY,EAAU,EAAK,EAC3B,IAAY,EAAU,EAAK;AAEjC,QACE,kBAAC,UAAD;EACO;EACL,WAAW,EACT,GACA,EAAO,aACP,EAAO,wBAAwB,MAC/B,KAAQ,EAAO,qBAAqB,MACpC,KAAa,EAAO,wBACpB,EACD;EACD,OAAO;GACL,GAAG;GACH,GAAG;GACF,8BAAsD;GACxD;EACD,GAAI;YAfN,CAiBE,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB;IACG;IACA;IACA;IACG;MACN,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB;IACG;IACA;IACA;IACG;KACC;;;AAIb,IAAM,IAAO,EAAW,EAAgB;AAQxC,SAAS,EAAU,EAAC,aAAU,gBAAwB,GAAK;AACzD,QACE,kBAAC,cAAD;EAAiB;YACf,kBAAC,GAAD;GAAM,WAAW,EAAK,EAAO,sBAAsB,EAAU;GAAG;GAAgB,CAAA;EACrE,CAAA;;AAIjB,IAAM,IAAQ,EAAW,EAAU;AAWnC,SAAS,EAAM,EAAC,aAAU,cAAW,eAAsB,GAAK;AAC9D,QACE,kBAAC,cAAD;EAAiB;EAAK,WAAW,EAAK,EAAO,wBAAwB,EAAU;YAA/E,CACE,kBAAC,GAAD;GAAM,MAAK;GAAM,WAAW,EAAK,EAAO,oBAAoB;GAAE,MAAK;GAChE;GACI,CAAA,EACN,KACC,kBAAC,GAAD;GAAM,MAAK;GAAM,WAAW,EAAK,EAAO,wBAAwB;GAAE,SAAQ;aACvE;GACI,CAAA,CAEE;;;AAIjB,IAAM,IAAO,EAAW,EAAM;AAW9B,SAAS,EAAM,EAAC,aAAU,GAAG,KAAkB,GAAK;AAClD,QACE,kBAAC,OAAD;EAAK,WAAW,EAAO;EAAqB,GAAI;YAC7C,EAAM,SAAS,IAAI,IAAU,MAAS;AACrC,OAAI,EAAM,eAAe,EAAM,IACzB,EAAM,SAAS,OAAO;IACxB,IAAM,IAAa,GACb,IAA2C;KAC/C,WAAW,EAAK,EAAO,
|
|
1
|
+
{"version":3,"file":"Testimonial.js","names":[],"sources":["../../src/Testimonial/Testimonial.tsx"],"sourcesContent":["import React, {\n HTMLAttributes,\n PropsWithChildren,\n forwardRef,\n SVGProps,\n CSSProperties,\n ComponentPropsWithRef,\n} from 'react'\nimport {clsx} from 'clsx'\nimport {BaseProps} from '../component-helpers'\nimport {Text, Avatar as BaseAvatar, useAnimation} from '../'\nimport type {AvatarProps} from '../'\nimport {Link, type LinkProps} from '../Link'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/testimonial/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/testimonial/colors-with-modes.css'\n\nimport styles from './Testimonial.module.css'\nimport {Colors, BiColorGradients} from '../constants'\n\ntype TestimonialSize = 'small' | 'large'\n\nexport const TestimonialQuoteMarkColors = [...Colors, ...BiColorGradients] as const\nexport const defaultQuoteMarkColor = TestimonialQuoteMarkColors[0]\n\nexport const TestimonialVariants = ['subtle', 'default', 'minimal', 'expressive'] as const\ntype TestimonialVariant = (typeof TestimonialVariants)[number]\nexport const defaultTestimonialVariant: TestimonialVariant = 'minimal'\n\nexport type TestimonialProps = {\n /**\n * Sets alternative appearance for the testimonial\n */\n variant?: TestimonialVariant\n /**\n * Applies an optional border where a variant supports it\n */\n hasBorder?: boolean\n /**\n * Valid children include Testimonial.Name, Testimonial.Avatar, and Testimonial.Name\n */\n children:\n | React.ReactNode\n | React.ReactElement<QuoteProps>\n | React.ReactElement<NameProps>\n | React.ReactElement<AvatarProps>\n | React.ReactElement<LogoProps>[]\n /**\n * Sets the testimonial text size\n */\n size?: TestimonialSize\n /** Sets the color of the quote mark */\n quoteMarkColor?: (typeof TestimonialQuoteMarkColors)[number]\n} & BaseProps<HTMLElement> &\n React.HTMLAttributes<HTMLElement>\n\n/**\n * Testimonial parent element\n * <Testimonial>\n */\nfunction TestimonialBase(\n {\n quoteMarkColor,\n animate,\n className,\n children,\n variant = 'minimal',\n hasBorder = true,\n size,\n style,\n ...rest\n }: PropsWithChildren<TestimonialProps>,\n ref,\n) {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const resolvedQuoteMarkColor = quoteMarkColor ?? (variant === 'expressive' ? 'green' : 'default')\n\n const quoteMark = (\n <div\n aria-hidden=\"true\"\n className={clsx(\n styles['Testimonial__quoteMark'],\n styles[`Testimonial__quoteMark--${resolvedQuoteMarkColor}`],\n variant === 'expressive' && styles['Testimonial__quoteMark--hasBackground'],\n )}\n >\n <span className={styles['Testimonial__quoteMarkGlyph']}>“</span>\n </div>\n )\n\n const childrenArray = React.Children.toArray(children)\n const findChild = (type: React.ElementType) =>\n childrenArray.find(child => React.isValidElement(child) && child.type === type)\n\n const quoteChild = findChild(Quote)\n const actionChild = findChild(_Link)\n const avatarChild = findChild(Avatar)\n const logoChild = findChild(Logo)\n const nameChild = findChild(Name)\n\n return (\n <figure\n ref={ref}\n className={clsx(\n animationClasses,\n styles['Testimonial'],\n styles[`Testimonial--variant-${variant}`],\n size && styles[`Testimonial--size-${size}`],\n hasBorder && styles['Testimonial--border'],\n className,\n )}\n style={{\n ...animationInlineStyles,\n ...style,\n ['--testimonial-accent-color' as keyof CSSProperties]: resolvedQuoteMarkColor,\n }}\n {...rest}\n >\n <div className={styles['Testimonial__quoteWrapper']}>\n {quoteMark}\n {quoteChild}\n {actionChild}\n </div>\n <div className={styles['Testimonial__media']}>\n {avatarChild}\n {logoChild}\n {nameChild}\n </div>\n </figure>\n )\n}\n\nconst Root = forwardRef(TestimonialBase)\n\n/**\n * Testimonial quote child element\n * <Testimonial.Quote>\n */\ntype QuoteProps = React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement>\n\nfunction QuoteBase({children, className}: QuoteProps, ref) {\n return (\n <blockquote ref={ref}>\n <Text className={clsx(styles['Testimonial-quote'], className)}>{children}</Text>\n </blockquote>\n )\n}\n\nconst Quote = forwardRef(QuoteBase)\n\n/**\n * Testimonial name child element\n * <Testimonial.Name>\n */\ntype NameProps = {\n position?: string\n} & React.HTMLAttributes<HTMLElement> &\n BaseProps<HTMLElement>\n\nfunction _Name({children, className, position}: NameProps, ref) {\n return (\n <figcaption ref={ref} className={clsx(styles['Testimonial-caption'], className)}>\n <Text size=\"200\" className={clsx(styles['Testimonial-from'])} font=\"monospace\">\n {children}\n </Text>\n {position && (\n <Text size=\"200\" className={clsx(styles['Testimonial-position'])} variant=\"muted\">\n {position}\n </Text>\n )}\n </figcaption>\n )\n}\n\nconst Name = forwardRef(_Name)\n\n/**\n * Testimonial logo child element\n * <Testimonial.Logo>\n */\ntype LogoProps = {\n children: React.ReactElement<SVGProps<SVGSVGElement>> | React.ReactElement<HTMLAttributes<HTMLImageElement>>\n} & React.HTMLAttributes<HTMLImageElement> &\n BaseProps<HTMLImageElement>\n\nfunction _Logo({children, ...rest}: LogoProps, ref) {\n return (\n <div className={styles['Testimonial-logo']} {...rest}>\n {React.Children.map(children, child => {\n if (React.isValidElement(child)) {\n if (child.type === 'img') {\n const imageChild = child as React.ReactElement<ComponentPropsWithRef<'img'>>\n const imageProps: ComponentPropsWithRef<'img'> = {\n className: clsx(styles['Testimonial-logo-image'], imageChild.props.className),\n ref: ref as ComponentPropsWithRef<'img'>['ref'],\n }\n\n return React.cloneElement(imageChild, imageProps)\n }\n }\n })}\n </div>\n )\n}\n\nconst Logo = forwardRef(_Logo)\n\n/**\n * Testimonial avatar child element\n * <Testimonial.Avatar>\n */\n\nfunction _Avatar({size, ...rest}: AvatarProps) {\n return <BaseAvatar className={clsx(styles['Testimonial-avatar'])} size={48} {...rest} />\n}\n\nconst Avatar = _Avatar\n\n/**\n * Testimonial link child element\n * <Testimonial.Link>\n */\nfunction _LinkBase({className, ...rest}: LinkProps, _ref) {\n return <Link className={clsx(styles['Testimonial-link'], className)} {...rest} size=\"medium\" variant=\"accent\" />\n}\n\nconst _Link = forwardRef(_LinkBase)\n\n/**\n * Use Testimonial to display a quote from a customer or user.\n * @see https://primer.style/brand/components/Testimonial\n */\nexport const Testimonial = Object.assign(Root, {\n Quote,\n Name,\n Avatar,\n Logo,\n Link: _Link,\n})\n"],"mappings":";;;;;;;;;;;;AAsBA,IAAa,IAA6B,CAAC,GAAG,GAAQ,GAAG,EAAiB,EAC7D,IAAwB,EAA2B,IAEnD,IAAsB;CAAC;CAAU;CAAW;CAAW;CAAa,EAEpE,IAAgD;AAiC7D,SAAS,EACP,EACE,mBACA,YACA,cACA,aACA,aAAU,WACV,eAAY,IACZ,SACA,UACA,GAAG,KAEL,GACA;CACA,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAyB,MAAmB,MAAY,eAAe,UAAU,YAEjF,IACJ,kBAAC,OAAD;EACE,eAAY;EACZ,WAAW,EACT,EAAO,wBACP,EAAO,2BAA2B,MAClC,MAAY,gBAAgB,EAAO,yCACpC;YAED,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAgC;GAAc,CAAA;EAClE,CAAA,EAGF,IAAgB,EAAM,SAAS,QAAQ,EAAS,EAChD,KAAa,MACjB,EAAc,MAAK,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAK,EAE3E,IAAa,EAAU,EAAM,EAC7B,IAAc,EAAU,EAAM,EAC9B,IAAc,EAAU,EAAO,EAC/B,IAAY,EAAU,EAAK,EAC3B,IAAY,EAAU,EAAK;AAEjC,QACE,kBAAC,UAAD;EACO;EACL,WAAW,EACT,GACA,EAAO,aACP,EAAO,wBAAwB,MAC/B,KAAQ,EAAO,qBAAqB,MACpC,KAAa,EAAO,wBACpB,EACD;EACD,OAAO;GACL,GAAG;GACH,GAAG;GACF,8BAAsD;GACxD;EACD,GAAI;YAfN,CAiBE,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB;IACG;IACA;IACA;IACG;MACN,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB;IACG;IACA;IACA;IACG;KACC;;;AAIb,IAAM,IAAO,EAAW,EAAgB;AAQxC,SAAS,EAAU,EAAC,aAAU,gBAAwB,GAAK;AACzD,QACE,kBAAC,cAAD;EAAiB;YACf,kBAAC,GAAD;GAAM,WAAW,EAAK,EAAO,sBAAsB,EAAU;GAAG;GAAgB,CAAA;EACrE,CAAA;;AAIjB,IAAM,IAAQ,EAAW,EAAU;AAWnC,SAAS,EAAM,EAAC,aAAU,cAAW,eAAsB,GAAK;AAC9D,QACE,kBAAC,cAAD;EAAiB;EAAK,WAAW,EAAK,EAAO,wBAAwB,EAAU;YAA/E,CACE,kBAAC,GAAD;GAAM,MAAK;GAAM,WAAW,EAAK,EAAO,oBAAoB;GAAE,MAAK;GAChE;GACI,CAAA,EACN,KACC,kBAAC,GAAD;GAAM,MAAK;GAAM,WAAW,EAAK,EAAO,wBAAwB;GAAE,SAAQ;aACvE;GACI,CAAA,CAEE;;;AAIjB,IAAM,IAAO,EAAW,EAAM;AAW9B,SAAS,EAAM,EAAC,aAAU,GAAG,KAAkB,GAAK;AAClD,QACE,kBAAC,OAAD;EAAK,WAAW,EAAO;EAAqB,GAAI;YAC7C,EAAM,SAAS,IAAI,IAAU,MAAS;AACrC,OAAI,EAAM,eAAe,EAAM,IACzB,EAAM,SAAS,OAAO;IACxB,IAAM,IAAa,GACb,IAA2C;KAC/C,WAAW,EAAK,EAAO,2BAA2B,EAAW,MAAM,UAAU;KACxE;KACN;AAED,WAAO,EAAM,aAAa,GAAY,EAAW;;IAGrD;EACE,CAAA;;AAIV,IAAM,IAAO,EAAW,EAAM;AAO9B,SAAS,EAAQ,EAAC,SAAM,GAAG,KAAoB;AAC7C,QAAO,kBAAC,GAAD;EAAY,WAAW,EAAK,EAAO,sBAAsB;EAAE,MAAM;EAAI,GAAI;EAAQ,CAAA;;AAG1F,IAAM,IAAS;AAMf,SAAS,EAAU,EAAC,cAAW,GAAG,KAAkB,GAAM;AACxD,QAAO,kBAAC,GAAD;EAAM,WAAW,EAAK,EAAO,qBAAqB,EAAU;EAAE,GAAI;EAAM,MAAK;EAAS,SAAQ;EAAW,CAAA;;AAGlH,IAAM,IAAQ,EAAW,EAAU,EAMtB,IAAc,OAAO,OAAO,GAAM;CAC7C;CACA;CACA;CACA;CACA,MAAM;CACP,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.Primer_Brand__Testimonial-module__Testimonial___kxB6R{color:var(--brand-color-text-default);font-family:var(--brand-fontStack-sansSerif)}.Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe,.Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S{border-radius:var(--brand-borderRadius-xlarge);padding:var(--base-size-48) var(--base-size-32);position:relative}@media screen and (width>=48rem){.Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe,.Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S{padding:var(--base-size-48)}}@media screen and (width>=63.25rem){.Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe.Primer_Brand__Testimonial-module__Testimonial--size-large___NH7Vg,.Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S.Primer_Brand__Testimonial-module__Testimonial--size-large___NH7Vg{padding:var(--base-size-96) var(--base-size-128)}}.Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe{background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S{background-color:var(--brand-color-canvas-default)}.Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe:before,.Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S:before{pointer-events:none;content:"";border-radius:inherit;position:absolute;inset:0}.Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe.Primer_Brand__Testimonial-module__Testimonial--border___pbUPS:before{-webkit-mask-image:var(--brand-Testimonial-borderMask-subtle);-webkit-mask-image:var(--brand-Testimonial-borderMask-subtle);mask-image:var(--brand-Testimonial-borderMask-subtle);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default)}.Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S.Primer_Brand__Testimonial-module__Testimonial--border___pbUPS:before{-webkit-mask-image:var(--brand-Testimonial-borderMask-default);-webkit-mask-image:var(--brand-Testimonial-borderMask-default);mask-image:var(--brand-Testimonial-borderMask-default);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark___sC3I2{--brand-Testimonial-quoteMarkColor-gradient:radial-gradient(circle at top left, var(--brand-Testimonial-quoteMarkColor-start), var(--brand-Testimonial-quoteMarkColor-end));--brand-Testimonial-quoteMarkColor-background:var(--brand-Testimonial-quoteMarkColor-gradient,var(--brand-Testimonial-quoteMarkColor,currentColor));color:var(--brand-Testimonial-quoteMarkColor-start,var(--brand-Testimonial-quoteMarkColor,currentColor));font-size:var(--base-size-48);line-height:var(--base-size-48);font-weight:var(--base-text-weight-extrabold);position:relative}.Primer_Brand__Testimonial-module__Testimonial__quoteMark___sC3I2:before{content:"";background:var(--brand-Testimonial-quoteMarkColor-background);-webkit-mask:linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default)) content-box, linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default));-webkit-mask:linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default)) content-box, linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default));mask:linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default)) content-box, linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default));-webkit-mask-composite:xor;position:absolute;inset:0;-webkit-mask-composite:xor;mask-composite:exclude}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--hasBackground___AUVX2{width:calc(var(--base-size-48) + var(--base-size-8));height:calc(var(--base-size-48) + var(--base-size-8));border-radius:var(--base-size-12);background-color:var(--brand-Testimonial-quoteMarkBackground,var(--base-color-scale-gray-0));font-size:var(--base-size-64);justify-content:center;align-items:center;line-height:1;display:inline-flex}.Primer_Brand__Testimonial-module__Testimonial--size-large___NH7Vg .Primer_Brand__Testimonial-module__Testimonial__quoteMark___sC3I2:not(.Primer_Brand__Testimonial-module__Testimonial__quoteMark--hasBackground___AUVX2){font-size:7.5rem;line-height:1}.Primer_Brand__Testimonial-module__Testimonial__quoteMarkGlyph___1eZ5L{display:block}.Primer_Brand__Testimonial-module__Testimonial-quote___xbxri{font-family:var(--brand-fontStack-sansSerif);font-size:var(--brand-Testimonial-quote-fontSize-default);font-weight:var(--brand-Testimonial-quote-fontWeight-default);letter-spacing:var(--brand-Testimonial-quote-letterSpacing-default);line-height:1.2;display:block}.Primer_Brand__Testimonial-module__Testimonial--size-large___NH7Vg .Primer_Brand__Testimonial-module__Testimonial-quote___xbxri{font-size:var(--brand-Testimonial-quote-fontSize-large);font-weight:var(--brand-Testimonial-quote-fontWeight-large);letter-spacing:var(--brand-Testimonial-quote-letterSpacing-large)}.Primer_Brand__Testimonial-module__Testimonial-quote___xbxri em,.Primer_Brand__Testimonial-module__Testimonial-quote___xbxri b{color:var(--brand-Testimonial-quote-color-emphasis);font-style:normal;font-weight:inherit}.Primer_Brand__Testimonial-module__Testimonial__media___rvn7k{gap:var(--base-size-16);margin-top:var(--base-size-24);align-items:center;display:flex}.Primer_Brand__Testimonial-module__Testimonial-logo-image___rpGVd{display:block}.Primer_Brand__Testimonial-module__Testimonial--size-large___NH7Vg .Primer_Brand__Testimonial-module__Testimonial__media___rvn7k{margin-top:var(--base-size-64)}.Primer_Brand__Testimonial-module__Testimonial-caption___8c_KF{flex-direction:column;display:flex}.Primer_Brand__Testimonial-module__Testimonial-avatar___kWqMQ{flex:none}.Primer_Brand__Testimonial-module__Testimonial-from___XLpqj{font-weight:var(--base-text-weight-normal);text-transform:uppercase}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY{gap:var(--base-size-48);flex-direction:column;display:flex}@media screen and (width>=48rem){.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY{align-items:flex-end;gap:var(--base-size-96);flex-direction:row}}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial__quoteWrapper___vcgUf{align-items:flex-start;gap:var(--base-size-24);flex-direction:column;flex:1 1 0;min-width:0;display:flex}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial__media___rvn7k{align-items:flex-start;gap:var(--base-size-24);flex-direction:column;flex:none;margin-block-start:0}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial-caption___8c_KF{border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);gap:var(--base-size-8);width:100%;padding-block-start:var(--base-size-24)}@media screen and (width>=48rem){.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial__media___rvn7k{min-width:240px;max-width:320px}}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial-from___XLpqj{align-items:center;gap:var(--base-size-8);font-family:var(--brand-fontStack-monospace);font-weight:var(--base-text-weight-medium);text-transform:uppercase;letter-spacing:.01em;display:flex}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial-from___XLpqj:before{content:"";background-color:var(--testimonial-accent-color,var(--brand-Testimonial-quoteMarkColor-default));flex-shrink:0;width:9px;height:14px;display:inline-block}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial__quoteMark___sC3I2{font-family:var(--brand-fontStack-monospace);font-weight:var(--brand-fontWeight-300)}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial__quoteMarkGlyph___1eZ5L{transform:translateY(var(--base-size-12))}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial__quoteMark___sC3I2:not(.Primer_Brand__Testimonial-module__Testimonial__quoteMark--hasBackground___AUVX2){margin-left:-.18em}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial-quote___xbxri{font-family:var(--brand-fontStack-monospace);line-height:var(--brand-text-lineHeight-400);font-weight:var(--base-text-weight-normal)}.Primer_Brand__Testimonial-module__Testimonial-link___kK8cZ{margin-top:var(--base-size-8)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--default___wRFiA{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-default);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-default)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--blue___65lEG{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-blue);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-blue)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--blue-purple___HZ6wp{--brand-Testimonial-quoteMarkColor-start:var(--brand-Testimonial-quoteMarkColor-blue-purple-start);--brand-Testimonial-quoteMarkColor-end:var(--brand-Testimonial-quoteMarkColor-blue-purple-end);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-blue-purple)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--coral___zCLpT{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-coral);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-coral)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--green___zmlvZ{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-green);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-green)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--green-blue___Q0gxM{--brand-Testimonial-quoteMarkColor-start:var(--brand-Testimonial-quoteMarkColor-green-blue-start);--brand-Testimonial-quoteMarkColor-end:var(--brand-Testimonial-quoteMarkColor-green-blue-end);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-green-blue)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--gray___18cS4{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-gray);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-gray)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--indigo___GDdwu{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-indigo);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-indigo)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--lemon___SbBQ4{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-lemon);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-lemon)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--lime___jzEWj{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-lime);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-lime)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--orange___Mk2Ix{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-orange);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-orange)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--pink____Y7MC{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-pink);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-pink)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--pink-blue___VQftN{--brand-Testimonial-quoteMarkColor-start:var(--brand-Testimonial-quoteMarkColor-pink-blue-start);--brand-Testimonial-quoteMarkColor-end:var(--brand-Testimonial-quoteMarkColor-pink-blue-end);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-pink-blue)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--purple___TMw0P{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-purple);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-purple)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--purple-red___f1bgK{--brand-Testimonial-quoteMarkColor-start:var(--brand-Testimonial-quoteMarkColor-purple-red-start);--brand-Testimonial-quoteMarkColor-end:var(--brand-Testimonial-quoteMarkColor-purple-red-end);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-purple-red)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--red___rbO_z{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-red);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-red)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--red-orange___pm_dh{--brand-Testimonial-quoteMarkColor-start:var(--brand-Testimonial-quoteMarkColor-red-orange-start);--brand-Testimonial-quoteMarkColor-end:var(--brand-Testimonial-quoteMarkColor-red-orange-end);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-red-orange)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--teal___S_1eT{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-teal);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-teal)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--yellow___W8v__{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-yellow);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-yellow)}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import './Testimonial.module-
|
|
1
|
+
import './Testimonial.module-BEBpUSD7.css';var e = {
|
|
2
2
|
Testimonial: "Primer_Brand__Testimonial-module__Testimonial___kxB6R",
|
|
3
3
|
"Testimonial--variant-subtle": "Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe",
|
|
4
4
|
"Testimonial--variant-default": "Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S",
|
|
@@ -9,6 +9,7 @@ import './Testimonial.module-DRCosU_J.css';var e = {
|
|
|
9
9
|
Testimonial__quoteMarkGlyph: "Primer_Brand__Testimonial-module__Testimonial__quoteMarkGlyph___1eZ5L",
|
|
10
10
|
"Testimonial-quote": "Primer_Brand__Testimonial-module__Testimonial-quote___xbxri",
|
|
11
11
|
Testimonial__media: "Primer_Brand__Testimonial-module__Testimonial__media___rvn7k",
|
|
12
|
+
"Testimonial-logo-image": "Primer_Brand__Testimonial-module__Testimonial-logo-image___rpGVd",
|
|
12
13
|
"Testimonial-caption": "Primer_Brand__Testimonial-module__Testimonial-caption___8c_KF",
|
|
13
14
|
"Testimonial-avatar": "Primer_Brand__Testimonial-module__Testimonial-avatar___kWqMQ",
|
|
14
15
|
"Testimonial-from": "Primer_Brand__Testimonial-module__Testimonial-from___XLpqj",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Testimonial.module.js","names":[],"sources":["../../src/Testimonial/Testimonial.module.css"],"sourcesContent":[".Testimonial {\n color: var(--brand-color-text-default);\n font-family: var(--brand-fontStack-sansSerif);\n}\n\n.Testimonial--variant-subtle,\n.Testimonial--variant-default {\n position: relative;\n border-radius: var(--brand-borderRadius-xlarge);\n padding: var(--base-size-48) var(--base-size-32);\n}\n\n@media screen and (min-width: 48rem) {\n .Testimonial--variant-subtle,\n .Testimonial--variant-default {\n padding: var(--base-size-48);\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .Testimonial--variant-subtle.Testimonial--size-large,\n .Testimonial--variant-default.Testimonial--size-large {\n padding: var(--base-size-96) var(--base-size-128);\n }\n}\n\n.Testimonial--variant-subtle {\n background-color: var(--brand-color-canvas-subtle);\n}\n\n.Testimonial--variant-default {\n background-color: var(--brand-color-canvas-default);\n}\n\n.Testimonial--variant-subtle::before,\n.Testimonial--variant-default::before {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n pointer-events: none;\n content: '';\n border-radius: inherit;\n}\n\n.Testimonial--variant-subtle.Testimonial--border::before {\n mask-image: var(--brand-Testimonial-borderMask-subtle);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n}\n\n.Testimonial--variant-default.Testimonial--border::before {\n mask-image: var(--brand-Testimonial-borderMask-default);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n}\n\n.Testimonial__quoteMark {\n --brand-Testimonial-quoteMarkColor-gradient: radial-gradient(\n circle at top left,\n var(--brand-Testimonial-quoteMarkColor-start),\n var(--brand-Testimonial-quoteMarkColor-end)\n );\n --brand-Testimonial-quoteMarkColor-background: var(\n --brand-Testimonial-quoteMarkColor-gradient,\n var(--brand-Testimonial-quoteMarkColor, currentColor)\n );\n color: var(--brand-Testimonial-quoteMarkColor-start, var(--brand-Testimonial-quoteMarkColor, currentColor));\n font-size: var(--base-size-48);\n line-height: var(--base-size-48);\n font-weight: var(--base-text-weight-extrabold);\n position: relative;\n}\n\n.Testimonial__quoteMark::before {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--brand-Testimonial-quoteMarkColor-background);\n -webkit-mask: linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default)) content-box,\n linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default));\n mask: linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default)) content-box,\n linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default));\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n}\n\n.Testimonial__quoteMark--hasBackground {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: calc(var(--base-size-48) + var(--base-size-8));\n height: calc(var(--base-size-48) + var(--base-size-8));\n border-radius: var(--base-size-12);\n background-color: var(--brand-Testimonial-quoteMarkBackground, var(--base-color-scale-gray-0));\n font-size: var(--base-size-64);\n line-height: 1;\n}\n\n.Testimonial--size-large .Testimonial__quoteMark:not(.Testimonial__quoteMark--hasBackground) {\n font-size: 7.5rem; /* 120px */\n line-height: 1;\n}\n\n.Testimonial__quoteMarkGlyph {\n display: block;\n}\n\n.Testimonial-quote {\n font-family: var(--brand-fontStack-sansSerif);\n font-size: var(--brand-Testimonial-quote-fontSize-default);\n font-weight: var(--brand-Testimonial-quote-fontWeight-default);\n letter-spacing: var(--brand-Testimonial-quote-letterSpacing-default);\n line-height: 1.2; /* requires custom line-height */\n display: block;\n}\n\n.Testimonial--size-large .Testimonial-quote {\n font-size: var(--brand-Testimonial-quote-fontSize-large);\n font-weight: var(--brand-Testimonial-quote-fontWeight-large);\n letter-spacing: var(--brand-Testimonial-quote-letterSpacing-large);\n}\n\n.Testimonial-quote em,\n.Testimonial-quote b {\n color: var(--brand-Testimonial-quote-color-emphasis);\n font-style: normal;\n font-weight: inherit;\n}\n\n.Testimonial__media {\n display: flex;\n gap: var(--base-size-16);\n align-items: center;\n margin-top: var(--base-size-24);\n}\n\n.Testimonial--size-large .Testimonial__media {\n margin-top: var(--base-size-64);\n}\n\n.Testimonial-caption {\n display: flex;\n flex-direction: column;\n}\n\n.Testimonial-avatar {\n flex: none;\n}\n\n.Testimonial-from {\n font-weight: var(--base-text-weight-normal);\n text-transform: uppercase;\n}\n\n/* Expressive variant */\n.Testimonial--variant-expressive {\n display: flex;\n flex-direction: column;\n gap: var(--base-size-48);\n}\n\n@media screen and (min-width: 48rem) {\n .Testimonial--variant-expressive {\n flex-direction: row;\n align-items: flex-end;\n gap: var(--base-size-96);\n }\n}\n\n.Testimonial--variant-expressive .Testimonial__quoteWrapper {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--base-size-24);\n flex: 1 1 0;\n min-width: 0;\n}\n\n.Testimonial--variant-expressive .Testimonial__media {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--base-size-24);\n margin-block-start: 0;\n flex: 0 0 auto;\n}\n\n.Testimonial--variant-expressive .Testimonial-caption {\n border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n padding-block-start: var(--base-size-24);\n width: 100%;\n gap: var(--base-size-8);\n}\n\n@media screen and (min-width: 48rem) {\n .Testimonial--variant-expressive .Testimonial__media {\n min-width: 240px;\n max-width: 320px;\n }\n}\n\n.Testimonial--variant-expressive .Testimonial-from {\n display: flex;\n align-items: center;\n gap: var(--base-size-8);\n font-family: var(--brand-fontStack-monospace);\n font-weight: var(--base-text-weight-medium);\n text-transform: uppercase;\n letter-spacing: 0.01em;\n}\n\n.Testimonial--variant-expressive .Testimonial-from::before {\n content: '';\n display: inline-block;\n width: 9px;\n height: 14px;\n background-color: var(--testimonial-accent-color, var(--brand-Testimonial-quoteMarkColor-default));\n flex-shrink: 0;\n}\n\n.Testimonial--variant-expressive .Testimonial__quoteMark {\n font-family: var(--brand-fontStack-monospace);\n font-weight: var(--brand-fontWeight-300);\n}\n\n.Testimonial--variant-expressive .Testimonial__quoteMarkGlyph {\n transform: translateY(var(--base-size-12));\n}\n\n.Testimonial--variant-expressive .Testimonial__quoteMark:not(.Testimonial__quoteMark--hasBackground) {\n margin-left: -0.18em;\n}\n\n.Testimonial--variant-expressive .Testimonial-quote {\n font-family: var(--brand-fontStack-monospace);\n line-height: var(--brand-text-lineHeight-400);\n font-weight: var(--base-text-weight-normal);\n}\n\n.Testimonial-link {\n margin-top: var(--base-size-8);\n}\n\n.Testimonial__quoteMark--default {\n --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-default);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-default);\n}\n\n.Testimonial__quoteMark--blue {\n --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-blue);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-blue);\n}\n\n.Testimonial__quoteMark--blue-purple {\n --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-blue-purple-start);\n --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-blue-purple-end);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-blue-purple);\n}\n\n.Testimonial__quoteMark--coral {\n --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-coral);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-coral);\n}\n\n.Testimonial__quoteMark--green {\n --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-green);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-green);\n}\n\n.Testimonial__quoteMark--green-blue {\n --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-green-blue-start);\n --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-green-blue-end);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-green-blue);\n}\n\n.Testimonial__quoteMark--gray {\n --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-gray);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-gray);\n}\n\n.Testimonial__quoteMark--indigo {\n --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-indigo);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-indigo);\n}\n\n.Testimonial__quoteMark--lemon {\n --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-lemon);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-lemon);\n}\n\n.Testimonial__quoteMark--lime {\n --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-lime);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-lime);\n}\n\n.Testimonial__quoteMark--orange {\n --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-orange);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-orange);\n}\n\n.Testimonial__quoteMark--pink {\n --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-pink);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-pink);\n}\n\n.Testimonial__quoteMark--pink-blue {\n --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-pink-blue-start);\n --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-pink-blue-end);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-pink-blue);\n}\n\n.Testimonial__quoteMark--purple {\n --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-purple);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-purple);\n}\n\n.Testimonial__quoteMark--purple-red {\n --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-purple-red-start);\n --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-purple-red-end);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-purple-red);\n}\n\n.Testimonial__quoteMark--red {\n --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-red);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-red);\n}\n\n.Testimonial__quoteMark--red-orange {\n --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-red-orange-start);\n --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-red-orange-end);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-red-orange);\n}\n\n.Testimonial__quoteMark--teal {\n --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-teal);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-teal);\n}\n\n.Testimonial__quoteMark--yellow {\n --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-yellow);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-yellow);\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"Testimonial.module.js","names":[],"sources":["../../src/Testimonial/Testimonial.module.css"],"sourcesContent":[".Testimonial {\n color: var(--brand-color-text-default);\n font-family: var(--brand-fontStack-sansSerif);\n}\n\n.Testimonial--variant-subtle,\n.Testimonial--variant-default {\n position: relative;\n border-radius: var(--brand-borderRadius-xlarge);\n padding: var(--base-size-48) var(--base-size-32);\n}\n\n@media screen and (min-width: 48rem) {\n .Testimonial--variant-subtle,\n .Testimonial--variant-default {\n padding: var(--base-size-48);\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .Testimonial--variant-subtle.Testimonial--size-large,\n .Testimonial--variant-default.Testimonial--size-large {\n padding: var(--base-size-96) var(--base-size-128);\n }\n}\n\n.Testimonial--variant-subtle {\n background-color: var(--brand-color-canvas-subtle);\n}\n\n.Testimonial--variant-default {\n background-color: var(--brand-color-canvas-default);\n}\n\n.Testimonial--variant-subtle::before,\n.Testimonial--variant-default::before {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n pointer-events: none;\n content: '';\n border-radius: inherit;\n}\n\n.Testimonial--variant-subtle.Testimonial--border::before {\n mask-image: var(--brand-Testimonial-borderMask-subtle);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n}\n\n.Testimonial--variant-default.Testimonial--border::before {\n mask-image: var(--brand-Testimonial-borderMask-default);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n}\n\n.Testimonial__quoteMark {\n --brand-Testimonial-quoteMarkColor-gradient: radial-gradient(\n circle at top left,\n var(--brand-Testimonial-quoteMarkColor-start),\n var(--brand-Testimonial-quoteMarkColor-end)\n );\n --brand-Testimonial-quoteMarkColor-background: var(\n --brand-Testimonial-quoteMarkColor-gradient,\n var(--brand-Testimonial-quoteMarkColor, currentColor)\n );\n color: var(--brand-Testimonial-quoteMarkColor-start, var(--brand-Testimonial-quoteMarkColor, currentColor));\n font-size: var(--base-size-48);\n line-height: var(--base-size-48);\n font-weight: var(--base-text-weight-extrabold);\n position: relative;\n}\n\n.Testimonial__quoteMark::before {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--brand-Testimonial-quoteMarkColor-background);\n -webkit-mask: linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default)) content-box,\n linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default));\n mask: linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default)) content-box,\n linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default));\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n}\n\n.Testimonial__quoteMark--hasBackground {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: calc(var(--base-size-48) + var(--base-size-8));\n height: calc(var(--base-size-48) + var(--base-size-8));\n border-radius: var(--base-size-12);\n background-color: var(--brand-Testimonial-quoteMarkBackground, var(--base-color-scale-gray-0));\n font-size: var(--base-size-64);\n line-height: 1;\n}\n\n.Testimonial--size-large .Testimonial__quoteMark:not(.Testimonial__quoteMark--hasBackground) {\n font-size: 7.5rem; /* 120px */\n line-height: 1;\n}\n\n.Testimonial__quoteMarkGlyph {\n display: block;\n}\n\n.Testimonial-quote {\n font-family: var(--brand-fontStack-sansSerif);\n font-size: var(--brand-Testimonial-quote-fontSize-default);\n font-weight: var(--brand-Testimonial-quote-fontWeight-default);\n letter-spacing: var(--brand-Testimonial-quote-letterSpacing-default);\n line-height: 1.2; /* requires custom line-height */\n display: block;\n}\n\n.Testimonial--size-large .Testimonial-quote {\n font-size: var(--brand-Testimonial-quote-fontSize-large);\n font-weight: var(--brand-Testimonial-quote-fontWeight-large);\n letter-spacing: var(--brand-Testimonial-quote-letterSpacing-large);\n}\n\n.Testimonial-quote em,\n.Testimonial-quote b {\n color: var(--brand-Testimonial-quote-color-emphasis);\n font-style: normal;\n font-weight: inherit;\n}\n\n.Testimonial__media {\n display: flex;\n gap: var(--base-size-16);\n align-items: center;\n margin-top: var(--base-size-24);\n}\n\n.Testimonial-logo-image {\n display: block;\n}\n\n.Testimonial--size-large .Testimonial__media {\n margin-top: var(--base-size-64);\n}\n\n.Testimonial-caption {\n display: flex;\n flex-direction: column;\n}\n\n.Testimonial-avatar {\n flex: none;\n}\n\n.Testimonial-from {\n font-weight: var(--base-text-weight-normal);\n text-transform: uppercase;\n}\n\n/* Expressive variant */\n.Testimonial--variant-expressive {\n display: flex;\n flex-direction: column;\n gap: var(--base-size-48);\n}\n\n@media screen and (min-width: 48rem) {\n .Testimonial--variant-expressive {\n flex-direction: row;\n align-items: flex-end;\n gap: var(--base-size-96);\n }\n}\n\n.Testimonial--variant-expressive .Testimonial__quoteWrapper {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--base-size-24);\n flex: 1 1 0;\n min-width: 0;\n}\n\n.Testimonial--variant-expressive .Testimonial__media {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--base-size-24);\n margin-block-start: 0;\n flex: 0 0 auto;\n}\n\n.Testimonial--variant-expressive .Testimonial-caption {\n border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n padding-block-start: var(--base-size-24);\n width: 100%;\n gap: var(--base-size-8);\n}\n\n@media screen and (min-width: 48rem) {\n .Testimonial--variant-expressive .Testimonial__media {\n min-width: 240px;\n max-width: 320px;\n }\n}\n\n.Testimonial--variant-expressive .Testimonial-from {\n display: flex;\n align-items: center;\n gap: var(--base-size-8);\n font-family: var(--brand-fontStack-monospace);\n font-weight: var(--base-text-weight-medium);\n text-transform: uppercase;\n letter-spacing: 0.01em;\n}\n\n.Testimonial--variant-expressive .Testimonial-from::before {\n content: '';\n display: inline-block;\n width: 9px;\n height: 14px;\n background-color: var(--testimonial-accent-color, var(--brand-Testimonial-quoteMarkColor-default));\n flex-shrink: 0;\n}\n\n.Testimonial--variant-expressive .Testimonial__quoteMark {\n font-family: var(--brand-fontStack-monospace);\n font-weight: var(--brand-fontWeight-300);\n}\n\n.Testimonial--variant-expressive .Testimonial__quoteMarkGlyph {\n transform: translateY(var(--base-size-12));\n}\n\n.Testimonial--variant-expressive .Testimonial__quoteMark:not(.Testimonial__quoteMark--hasBackground) {\n margin-left: -0.18em;\n}\n\n.Testimonial--variant-expressive .Testimonial-quote {\n font-family: var(--brand-fontStack-monospace);\n line-height: var(--brand-text-lineHeight-400);\n font-weight: var(--base-text-weight-normal);\n}\n\n.Testimonial-link {\n margin-top: var(--base-size-8);\n}\n\n.Testimonial__quoteMark--default {\n --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-default);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-default);\n}\n\n.Testimonial__quoteMark--blue {\n --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-blue);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-blue);\n}\n\n.Testimonial__quoteMark--blue-purple {\n --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-blue-purple-start);\n --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-blue-purple-end);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-blue-purple);\n}\n\n.Testimonial__quoteMark--coral {\n --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-coral);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-coral);\n}\n\n.Testimonial__quoteMark--green {\n --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-green);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-green);\n}\n\n.Testimonial__quoteMark--green-blue {\n --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-green-blue-start);\n --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-green-blue-end);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-green-blue);\n}\n\n.Testimonial__quoteMark--gray {\n --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-gray);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-gray);\n}\n\n.Testimonial__quoteMark--indigo {\n --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-indigo);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-indigo);\n}\n\n.Testimonial__quoteMark--lemon {\n --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-lemon);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-lemon);\n}\n\n.Testimonial__quoteMark--lime {\n --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-lime);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-lime);\n}\n\n.Testimonial__quoteMark--orange {\n --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-orange);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-orange);\n}\n\n.Testimonial__quoteMark--pink {\n --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-pink);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-pink);\n}\n\n.Testimonial__quoteMark--pink-blue {\n --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-pink-blue-start);\n --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-pink-blue-end);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-pink-blue);\n}\n\n.Testimonial__quoteMark--purple {\n --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-purple);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-purple);\n}\n\n.Testimonial__quoteMark--purple-red {\n --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-purple-red-start);\n --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-purple-red-end);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-purple-red);\n}\n\n.Testimonial__quoteMark--red {\n --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-red);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-red);\n}\n\n.Testimonial__quoteMark--red-orange {\n --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-red-orange-start);\n --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-red-orange-end);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-red-orange);\n}\n\n.Testimonial__quoteMark--teal {\n --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-teal);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-teal);\n}\n\n.Testimonial__quoteMark--yellow {\n --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-yellow);\n --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-yellow);\n}\n"],"mappings":""}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import e from "../node_modules/clsx/dist/clsx.js";
|
|
2
2
|
import { useProvidedRefOrCreate as t } from "../hooks/useRef.js";
|
|
3
3
|
import { Text as n } from "../Text/Text.js";
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
4
|
+
import { MarkGithubIcon as r } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
|
|
5
|
+
import { PlayIcon as i } from "./components/PlayIcon/PlayIcon.js";
|
|
6
6
|
import a from "./VideoPlayer.module.js";
|
|
7
7
|
import { VideoContext as o, VideoProvider as s, useVideo as c } from "./hooks/useVideo.js";
|
|
8
8
|
import { Captions as l } from "./components/Captions/Captions.js";
|
|
@@ -19,7 +19,7 @@ import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/compon
|
|
|
19
19
|
import { forwardRef as v, useCallback as y, useContext as b } from "react";
|
|
20
20
|
import { jsx as x, jsxs as S } from "react/jsx-runtime";
|
|
21
21
|
//#region src/VideoPlayer/VideoPlayer.tsx
|
|
22
|
-
var C = v(({ title: o, visuallyHiddenTitle: s, showBranding: v = !0, children: b, className: C, showPlayPauseButton: T = !0, showSeekControl: E = !0, showCCButton: D = !0, showMuteButton: O = !0, showVolumeControl: k = !0, showFullScreenButton: A = !0, playIcon: j = () => /* @__PURE__ */ x(
|
|
22
|
+
var C = v(({ title: o, visuallyHiddenTitle: s, showBranding: v = !0, children: b, className: C, showPlayPauseButton: T = !0, showSeekControl: E = !0, showCCButton: D = !0, showMuteButton: O = !0, showVolumeControl: k = !0, showFullScreenButton: A = !0, playIcon: j = () => /* @__PURE__ */ x(i, { className: a.VideoPlayer__playButton }), ...M }, N) => {
|
|
23
23
|
let { ccEnabled: P, fullscreenRef: F, isPlaying: I, ref: L, togglePlaying: R } = c(), z = t(y((e) => {
|
|
24
24
|
w(N, e);
|
|
25
25
|
}, [N])), B = y((e) => {
|
|
@@ -46,7 +46,7 @@ var C = v(({ title: o, visuallyHiddenTitle: s, showBranding: v = !0, children: b
|
|
|
46
46
|
}),
|
|
47
47
|
v || !s ? /* @__PURE__ */ S("div", {
|
|
48
48
|
className: e(a.VideoPlayer__title, I && a["VideoPlayer__title--hidden"]),
|
|
49
|
-
children: [v && /* @__PURE__ */ x(
|
|
49
|
+
children: [v && /* @__PURE__ */ x(r, {
|
|
50
50
|
size: 40,
|
|
51
51
|
"aria-label": "GitHub logo"
|
|
52
52
|
}), !s && /* @__PURE__ */ x(n, {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
*,:before,:after{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}ul[role=list],ol[role=list]{list-style:none}html,html:focus-within{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html,html:focus-within{scroll-behavior:auto}}body{min-height:100vh;line-height:1.5}a:not([class]){-webkit-text-decoration-skip:ink;-webkit-text-decoration-skip-ink:auto;text-decoration-skip-ink:auto}img,picture{max-width:100%}input,button,textarea,select{font:inherit}
|
package/esm/css/stylesheets.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import './utilities-BivJncWo.css';import './reset-
|
|
1
|
+
import './utilities-BivJncWo.css';import './reset-CSgu34_f.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/typography/typography-responsive-D6GwCHec.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/size/breakpoints-DV9ZFHGu.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/size/border-B0NqqX5b.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/colors/global-with-modes-Bdet_nBw.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/base/typography/typography-CAC6sGQ3.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/base/size/size-6EfgMG7y.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/base/colors/color-scales-with-modes-BVk7bh0Y.css';/* empty css */
|
|
2
2
|
/* empty css */
|
|
3
3
|
/* empty css */
|
|
4
4
|
/* empty css */
|