@primer/react-brand 0.75.1 → 0.76.0-rc.16d4997d
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/SubdomainNavBar/index.md +28 -1
- package/docs/index.md +2 -2
- package/esm/Accordion/Accordion.d.ts.map +1 -1
- package/esm/Accordion/Accordion.js +1 -3
- package/esm/Accordion/Accordion.js.map +1 -1
- package/esm/Accordion/{Accordion.module-COckontb.css → Accordion.module-B-iFuyHy.css} +1 -1
- package/esm/Accordion/Accordion.module.js +1 -1
- package/esm/Accordion/Accordion.module.js.map +1 -1
- package/esm/Button/Button.module-9oHHqqnx.css +1 -0
- package/esm/Button/Button.module.js +1 -1
- package/esm/Button/Button.module.js.map +1 -1
- package/esm/IDE/IDE.module-CDu-F0lH.css +1 -0
- package/esm/IDE/IDE.module.js +1 -1
- package/esm/IDE/IDE.module.js.map +1 -1
- package/esm/MinimalFooter/{MinimalFooter.module-CGtOtT5r.css → MinimalFooter.module-BKn_6UZK.css} +1 -1
- package/esm/MinimalFooter/MinimalFooter.module.js +1 -1
- package/esm/MinimalFooter/MinimalFooter.module.js.map +1 -1
- package/esm/SubdomainNavBar/SubdomainNavBar.d.ts +9 -0
- package/esm/SubdomainNavBar/SubdomainNavBar.d.ts.map +1 -1
- package/esm/SubdomainNavBar/SubdomainNavBar.js +320 -319
- package/esm/SubdomainNavBar/SubdomainNavBar.js.map +1 -1
- package/esm/SubdomainNavBar/SubdomainNavBar.module-DLlWpwNa.css +1 -0
- package/esm/SubdomainNavBar/SubdomainNavBar.module.js +7 -1
- package/esm/SubdomainNavBar/SubdomainNavBar.module.js.map +1 -1
- package/esm/VideoPlayer/VideoPlayer.module-Cb7UilXP.css +1 -0
- package/esm/VideoPlayer/VideoPlayer.module.js +1 -1
- package/esm/VideoPlayer/VideoPlayer.module.js.map +1 -1
- package/esm/css/{reset-CSgu34_f.css → reset-CbGp2YkS.css} +1 -1
- package/esm/css/stylesheets.js +1 -1
- package/lib/SubdomainNavBar/SubdomainNavBar.d.ts +9 -0
- package/lib/css/main.css +204 -87
- package/lib/design-tokens/css/tokens/base/colors/color-scales-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/base/colors/light.css +1 -1
- package/lib/design-tokens/css/tokens/base/size/size.css +1 -1
- package/lib/design-tokens/css/tokens/base/typography/typography.css +1 -1
- package/lib/design-tokens/css/tokens/functional/animation/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/colors/global-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/colors/global.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/action-menu/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/anchor-nav/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/bento/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/blinking-cursor/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/breadcrumbs/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/card/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/card/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/comparison-table/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/comparison-table/comparison-table.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/eyebrow-banner.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/faq/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/faq/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/faq/faq.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/footer/base.css +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-code/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/inline-code/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/inline-link/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/inline-link/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/inline-link/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/label/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/label/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/link/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/link/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/logosuite/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/logosuite/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/logosuite/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/media-playlist/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/media-playlist/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/nav-list/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/pricing-options/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/pricing-options/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/pricing-options/pricing-options.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/prose/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/prose/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/river/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/river/river.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/river-story-scroll/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/section/section.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/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/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/tiles/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/timeline/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/timeline/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/timeline/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/token/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/token/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/tooltip/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/tooltip/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/video-player/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/video-player/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/border.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/breakpoints.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/size-coarse.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/size-fine.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/size.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/viewport.css +1 -1
- package/lib/design-tokens/css/tokens/functional/typography/typography-responsive.css +1 -1
- package/lib/design-tokens/css/tokens/functional/typography/typography.css +1 -1
- package/lib/design-tokens/js/module/tokens/base/colors/light.js +1 -1
- package/lib/design-tokens/js/module/tokens/base/size/size.js +1 -1
- package/lib/design-tokens/js/module/tokens/base/typography/typography.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/animation/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/colors/global.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/bento/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/card/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/card/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/comparison-table/comparison-table.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/eyebrow-banner/eyebrow-banner.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/faq/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/faq/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/faq/faq.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/footer/base.js +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-code/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/inline-link/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/inline-link/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/label/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/link/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/logosuite/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/logosuite/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/media-playlist/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/pricing-options/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/pricing-options/pricing-options.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/prose/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/river/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/river/river.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/section/section.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/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/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/text-cursor-animation/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/timeline/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/timeline/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/token/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/tooltip/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/video-player/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/border.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/breakpoints.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/size-coarse.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/size-fine.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/size.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/viewport.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/typography/typography-responsive.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/typography/typography.js +1 -1
- package/lib/design-tokens/js/tokens/base/colors/light.js +1 -1
- package/lib/design-tokens/js/tokens/base/size/size.js +1 -1
- package/lib/design-tokens/js/tokens/base/typography/typography.js +1 -1
- package/lib/design-tokens/js/tokens/functional/animation/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/colors/global.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/bento/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/card/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/card/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/comparison-table/comparison-table.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/eyebrow-banner/eyebrow-banner.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/faq/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/faq/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/faq/faq.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/footer/base.js +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-code/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/inline-link/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/inline-link/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/label/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/link/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/logosuite/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/logosuite/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/media-playlist/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/pricing-options/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/pricing-options/pricing-options.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/prose/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/river/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/river/river.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/section/section.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/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/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/text-cursor-animation/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/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/scss/tokens/base/colors/light.scss +1 -1
- package/lib/design-tokens/scss/tokens/base/size/size.scss +1 -1
- package/lib/design-tokens/scss/tokens/base/typography/typography.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/animation/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/colors/global.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/bento/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/card/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/card/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/comparison-table/comparison-table.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/eyebrow-banner/eyebrow-banner.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/faq/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/faq/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/faq/faq.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/footer/base.scss +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-code/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/inline-link/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/inline-link/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/label/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/link/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/logosuite/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/logosuite/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/media-playlist/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/pricing-options/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/pricing-options/pricing-options.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/prose/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/river/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/river/river.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/section/section.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/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/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/text-cursor-animation/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/timeline/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/timeline/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/token/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/tooltip/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/video-player/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/size/border.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/size/breakpoints.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/size/size-coarse.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/size/size-fine.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/size/size.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/size/viewport.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/typography/typography-responsive.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/typography/typography.scss +1 -1
- package/lib/design-tokens/ts/tokens/base/colors/light.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/base/colors/light.js +1 -1
- package/lib/design-tokens/ts/tokens/base/size/size.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/base/size/size.js +1 -1
- package/lib/design-tokens/ts/tokens/base/typography/typography.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/base/typography/typography.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/animation/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/animation/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/colors/global.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/colors/global.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/bento/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/bento/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/card/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/card/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/card/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/card/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/comparison-table/comparison-table.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/comparison-table/comparison-table.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/eyebrow-banner/eyebrow-banner.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/eyebrow-banner/eyebrow-banner.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/faq/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/faq/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/faq/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/faq/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/faq/faq.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/faq/faq.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/footer/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/footer/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/footer/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/footer/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/frosted-glass-vfx/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/frosted-glass-vfx/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/grid/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/grid/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/grid/grid.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/grid/grid.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/hero/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/hero/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/icon/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/icon/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/ide/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/ide/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/image/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/image/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/inline-code/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/inline-code/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/inline-link/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/inline-link/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/inline-link/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/inline-link/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/label/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/label/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/link/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/link/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/logosuite/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/logosuite/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/logosuite/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/logosuite/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/media-playlist/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/media-playlist/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/pricing-options/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/pricing-options/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/pricing-options/pricing-options.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/pricing-options/pricing-options.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/prose/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/prose/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/river/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/river/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/river/river.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/river/river.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/section/section.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/section/section.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/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/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/text-cursor-animation/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/text-cursor-animation/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/text-cursor-animation/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/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/llms.txt +2 -2
- package/package.json +1 -1
- package/esm/Button/Button.module-Byz3R1qi.css +0 -1
- package/esm/IDE/IDE.module-CFxIRObF.css +0 -1
- package/esm/SubdomainNavBar/SubdomainNavBar.module-WIrpYyjV.css +0 -1
- package/esm/VideoPlayer/VideoPlayer.module-BpVcE2WB.css +0 -1
|
@@ -32,6 +32,32 @@ import {SubdomainNavBar} from '@primer/react-brand'
|
|
|
32
32
|
</div>
|
|
33
33
|
```
|
|
34
34
|
|
|
35
|
+
### Featured variant
|
|
36
|
+
|
|
37
|
+
The `featured` variant displays the GitHub name alongside the site title and an expanded search field on desktop.
|
|
38
|
+
|
|
39
|
+
> This variant is for internal use only.
|
|
40
|
+
>
|
|
41
|
+
> Please check with the Primer Brand team before using this variant.
|
|
42
|
+
|
|
43
|
+
```jsx
|
|
44
|
+
<div style={{width: '100%'}}>
|
|
45
|
+
<SubdomainNavBar title="Site title" variant="featured" fixed={false} fullWidth>
|
|
46
|
+
<SubdomainNavBar.Link href="#">Overview</SubdomainNavBar.Link>
|
|
47
|
+
<SubdomainNavBar.Link href="#">Documentation</SubdomainNavBar.Link>
|
|
48
|
+
<SubdomainNavBar.Link href="#">Resources</SubdomainNavBar.Link>
|
|
49
|
+
<SubdomainNavBar.Search
|
|
50
|
+
placeholder="Search Site title"
|
|
51
|
+
searchTerm=""
|
|
52
|
+
searchResults={[]}
|
|
53
|
+
onChange={() => undefined}
|
|
54
|
+
onSubmit={event => event.preventDefault()}
|
|
55
|
+
/>
|
|
56
|
+
<SubdomainNavBar.PrimaryAction href="#">Primary CTA</SubdomainNavBar.PrimaryAction>
|
|
57
|
+
</SubdomainNavBar>
|
|
58
|
+
</div>
|
|
59
|
+
```
|
|
60
|
+
|
|
35
61
|
### Search
|
|
36
62
|
|
|
37
63
|
`SubdomainNavBar` offers an optional search form control that supports both `onSubmit` and `onChange`; use `onChange` to display inline results. The `placeholder` labels the input in the opened dialog and defaults to `Search {title}`, or `Search` when no navigation title is available.
|
|
@@ -179,6 +205,7 @@ render(<LocalizedMenu />)
|
|
|
179
205
|
| `style` | `React.CSSProperties` | | Forwards custom inline styles to the root element |
|
|
180
206
|
| `fixed` | `boolean` | `true` | Fixes the navigation bar to the top of the viewport |
|
|
181
207
|
| `fullWidth` | `boolean` | `false` | Allows the inner content to fill the available width |
|
|
208
|
+
| `variant` | `'default' \| 'featured'` | `'default'` | Sets the navigation layout |
|
|
182
209
|
| `logoHref` | `string` | `https://github.com` | Changes the URL of the GitHub logo |
|
|
183
210
|
| `title` | `string` | | Required subdomain name used visibly and by assistive technologies |
|
|
184
211
|
| `titleHref` | `string` | `/` | Links the title to the subdomain root |
|
|
@@ -187,7 +214,7 @@ render(<LocalizedMenu />)
|
|
|
187
214
|
| `ref` | `React.Ref<SubdomainNavBarHandle>` | | Ref to the root element with `openSearch()` and `closeSearch()` methods |
|
|
188
215
|
| `onNarrowMenuToggle` | `(isOpen: boolean) => void` | | Called with the new state when the narrow menu opens or closes |
|
|
189
216
|
|
|
190
|
-
`SubdomainNavBarProps`, `SubdomainNavBarHandle`, and `
|
|
217
|
+
`SubdomainNavBarProps`, `SubdomainNavBarHandle`, `SubdomainNavBarMenuLabels`, and `SubdomainNavBarVariant` are exported from `@primer/react-brand`.
|
|
191
218
|
|
|
192
219
|
### Menu labels
|
|
193
220
|
|
package/docs/index.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
# Primer Brand docs (v0.
|
|
1
|
+
# Primer Brand docs (v0.76.0-rc.16d4997d)
|
|
2
2
|
|
|
3
|
-
These docs are bundled with `@primer/react-brand@0.
|
|
3
|
+
These docs are bundled with `@primer/react-brand@0.76.0-rc.16d4997d` and match your installed version.
|
|
4
4
|
|
|
5
5
|
New here? Start with [Getting started](getting-started/index.md) for installation, global
|
|
6
6
|
stylesheet and font setup. Component directories are named after their import (e.g.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../src/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAQZ,KAAK,qBAAqB,EAC1B,KAAK,cAAc,EAGnB,KAAK,YAAY,EAGlB,MAAM,OAAO,CAAA;AAGd,OAAO,EAAU,KAAK,YAAY,EAAC,MAAM,KAAK,CAAA;AAK9C;;GAEG;AACH,OAAO,6GAA6G,CAAA;AAKpH,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,CAAC,kBAAkB,CAAC,GAAG;IAC3E,QAAQ,EAAE,YAAY,CAAC,qBAAqB,GAAG,qBAAqB,CAAC,EAAE,CAAA;IACvE,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;CACvC,CAAA;AAkBD,eAAO,MAAM,aAAa;cAtBd,YAAY,CAAC,qBAAqB,GAAG,qBAAqB,CAAC,EAAE;cAC7D,SAAS,GAAG,UAAU;uBACb,OAAO;iBACb,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI;
|
|
1
|
+
{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../src/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAQZ,KAAK,qBAAqB,EAC1B,KAAK,cAAc,EAGnB,KAAK,YAAY,EAGlB,MAAM,OAAO,CAAA;AAGd,OAAO,EAAU,KAAK,YAAY,EAAC,MAAM,KAAK,CAAA;AAK9C;;GAEG;AACH,OAAO,6GAA6G,CAAA;AAKpH,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,CAAC,kBAAkB,CAAC,GAAG;IAC3E,QAAQ,EAAE,YAAY,CAAC,qBAAqB,GAAG,qBAAqB,CAAC,EAAE,CAAA;IACvE,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;CACvC,CAAA;AAkBD,eAAO,MAAM,aAAa;cAtBd,YAAY,CAAC,qBAAqB,GAAG,qBAAqB,CAAC,EAAE;cAC7D,SAAS,GAAG,UAAU;uBACb,OAAO;iBACb,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI;4CA+MvC,CAAA;AAED,eAAO,MAAM,qBAAqB,8MAAqC,CAAA;AAEvE,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IAChE,EAAE,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,CAAA;IACvB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,WAAW,CAAC,EAAE,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;IACpD,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAA;CAChC,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;SAXtB,YAAY,CAAC,IAAI,CAAC;sBACL,OAAO;kBACX,CAAC,OAAO,qBAAqB,EAAE,MAAM,CAAC;aAC3C,YAAY,CAAC,QAAQ,CAAC;4CAiChC,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;AAE/D,eAAO,MAAM,gBAAgB,GAAI,kCAAgC,qBAAqB,sBAIrF,CAAA;AAED,eAAO,MAAM,SAAS;cArQV,YAAY,CAAC,qBAAqB,GAAG,qBAAqB,CAAC,EAAE;cAC7D,SAAS,GAAG,UAAU;uBACb,OAAO;iBACb,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI;;gDA4PyB,qBAAqB;;aAxC/E,YAAY,CAAC,IAAI,CAAC;0BACL,OAAO;sBACX,CAAC,OAAO,qBAAqB,EAAE,MAAM,CAAC;iBAC3C,YAAY,CAAC,QAAQ,CAAC;;CA2C4E,CAAA"}
|
|
@@ -15,9 +15,7 @@ var g = s(null), _ = () => {
|
|
|
15
15
|
}, v = c(({ children: t, className: n, variant: i = "default", disableAnimation: a = !1, open: s, onClick: c, onToggle: u, onKeyDown: h, handleOpen: _, ...v }, y) => {
|
|
16
16
|
let b = r(y), x = p(null), S = p(!1), C = f(() => ({ variant: i }), [i]), w = l((e) => {
|
|
17
17
|
let t = e.querySelector(`:scope > .${o.Accordion__content}`), n = t?.querySelector(`.${o["Accordion__content-inner"]}`);
|
|
18
|
-
|
|
19
|
-
let r = parseFloat(getComputedStyle(t).getPropertyValue("--brand-Accordion-content-offset")), i = Math.max(0, n.scrollHeight - (Number.isNaN(r) ? 0 : r));
|
|
20
|
-
return e.style.setProperty("--brand-Accordion-content-height", `${i}px`), t;
|
|
18
|
+
return !t || !n ? null : (e.style.setProperty("--brand-Accordion-content-height", `${n.scrollHeight}px`), t);
|
|
21
19
|
}, []), T = l(() => {
|
|
22
20
|
x.current &&= (clearTimeout(x.current), null);
|
|
23
21
|
}, []), E = l((e) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","names":[],"sources":["../../src/Accordion/Accordion.tsx"],"sourcesContent":["import React, {\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n type DetailsHTMLAttributes,\n type HTMLAttributes,\n type KeyboardEvent,\n type MouseEventHandler,\n type ReactElement,\n type RefObject,\n type ToggleEvent,\n} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Heading, type HeadingProps} from '../'\nimport {TriangleDownIcon} from '@primer/octicons-react'\nimport {Colors, BiColorGradients as Gradients} from '../constants'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Accordion.module.css'\n\nexport type AccordionRootProps = DetailsHTMLAttributes<HTMLDetailsElement> & {\n children: ReactElement<AccordionHeadingProps | AccordionContentProps>[]\n variant?: 'default' | 'emphasis'\n disableAnimation?: boolean\n handleOpen?: (isOpen: boolean) => void\n}\n\ntype AccordionContextType = {\n variant: 'default' | 'emphasis'\n}\n\nconst AccordionContext = createContext<AccordionContextType | null>(null)\n\nconst useAccordionContext = (): AccordionContextType => {\n const context = useContext(AccordionContext)\n\n if (context === null) {\n throw new Error('Unable to find Accordion provider. Did you forget to wrap your component in an Accordion?')\n }\n\n return context\n}\n\nexport const AccordionRoot = forwardRef<HTMLDetailsElement, AccordionRootProps>(\n (\n {\n children,\n className,\n variant = 'default',\n disableAnimation = false,\n open,\n onClick,\n onToggle,\n onKeyDown,\n handleOpen,\n ...rest\n },\n forwardedRef,\n ) => {\n const ref = useProvidedRefOrCreate(forwardedRef as RefObject<HTMLDetailsElement | null>)\n const closeAnimationTimeout = useRef<ReturnType<typeof setTimeout> | null>(null)\n const isClosingRef = useRef(false)\n const accordionContextValue = useMemo(() => ({variant}), [variant])\n\n const setContentHeight = useCallback((details: HTMLDetailsElement) => {\n const content = details.querySelector<HTMLElement>(`:scope > .${styles.Accordion__content}`)\n const contentInner = content?.querySelector<HTMLElement>(`.${styles['Accordion__content-inner']}`)\n\n if (!content || !contentInner) {\n return null\n }\n\n const contentOffset = parseFloat(getComputedStyle(content).getPropertyValue('--brand-Accordion-content-offset'))\n const contentHeight = Math.max(0, contentInner.scrollHeight - (Number.isNaN(contentOffset) ? 0 : contentOffset))\n\n details.style.setProperty('--brand-Accordion-content-height', `${contentHeight}px`)\n\n return content\n }, [])\n\n const clearCloseAnimation = useCallback(() => {\n if (closeAnimationTimeout.current) {\n clearTimeout(closeAnimationTimeout.current)\n closeAnimationTimeout.current = null\n }\n }, [])\n\n const closeWithAnimation = useCallback(\n (details: HTMLDetailsElement) => {\n clearCloseAnimation()\n const reducedMotionQuery =\n typeof window !== 'undefined' && typeof window.matchMedia === 'function'\n ? window.matchMedia('(prefers-reduced-motion: reduce)')\n : null\n const prefersReducedMotion = reducedMotionQuery !== null && reducedMotionQuery.matches\n\n if (prefersReducedMotion) {\n details.open = false\n isClosingRef.current = false\n details.classList.remove(styles['Accordion--closing'])\n return\n }\n\n const content = setContentHeight(details)\n\n if (content) {\n content.getBoundingClientRect()\n }\n\n isClosingRef.current = true\n details.classList.add(styles['Accordion--closing'])\n\n closeAnimationTimeout.current = setTimeout(() => {\n details.open = false\n isClosingRef.current = false\n details.classList.remove(styles['Accordion--closing'])\n closeAnimationTimeout.current = null\n }, 300)\n },\n [clearCloseAnimation, setContentHeight],\n )\n\n const handleToggle = useCallback<(event: Event) => void>(\n event => {\n const toggleEvent = event as unknown as ToggleEvent<HTMLDetailsElement>\n if (toggleEvent.currentTarget.open) {\n clearCloseAnimation()\n isClosingRef.current = false\n toggleEvent.currentTarget.classList.remove(styles['Accordion--closing'])\n setContentHeight(toggleEvent.currentTarget)\n }\n onToggle?.(toggleEvent)\n handleOpen?.(toggleEvent.currentTarget.open)\n },\n [clearCloseAnimation, onToggle, handleOpen, setContentHeight],\n )\n\n const handleClick = useCallback<MouseEventHandler<HTMLDetailsElement>>(\n event => {\n onClick?.(event)\n\n if (event.defaultPrevented || disableAnimation) {\n return\n }\n\n const details = event.currentTarget\n const target = event.target\n\n if (!(target instanceof Element) || !details.open) {\n return\n }\n\n const summary = target.closest('summary')\n\n if (summary?.parentElement === details) {\n event.preventDefault()\n\n if (!isClosingRef.current) {\n closeWithAnimation(details)\n }\n }\n },\n [closeWithAnimation, disableAnimation, onClick],\n )\n\n const handleKeyDown = useCallback<EventListener>(\n event => {\n const keyboardEvent = event as unknown as KeyboardEvent<HTMLDetailsElement>\n onKeyDown?.(keyboardEvent)\n\n const details = ref.current\n\n if (keyboardEvent.key === 'Escape' && details?.open) {\n clearCloseAnimation()\n details.open = false\n isClosingRef.current = false\n details.classList.remove(styles['Accordion--closing'])\n details.querySelector('summary')?.focus()\n }\n },\n [clearCloseAnimation, onKeyDown, ref],\n )\n\n useEffect(() => {\n const detailsElement = ref.current\n if (detailsElement) {\n const contentInner = detailsElement.querySelector<HTMLElement>(`.${styles['Accordion__content-inner']}`)\n let resizeObserver: ResizeObserver | undefined\n\n if (detailsElement.open) {\n setContentHeight(detailsElement)\n }\n\n if (typeof ResizeObserver !== 'undefined' && contentInner) {\n resizeObserver = new ResizeObserver(() => {\n if (detailsElement.open) {\n setContentHeight(detailsElement)\n }\n })\n resizeObserver.observe(contentInner)\n }\n\n detailsElement.addEventListener('toggle', handleToggle)\n detailsElement.addEventListener('keydown', handleKeyDown)\n\n return () => {\n clearCloseAnimation()\n resizeObserver?.disconnect()\n detailsElement.removeEventListener('toggle', handleToggle)\n detailsElement.removeEventListener('keydown', handleKeyDown)\n }\n }\n }, [clearCloseAnimation, handleToggle, handleKeyDown, ref, setContentHeight])\n\n return (\n <AccordionContext.Provider value={accordionContextValue}>\n {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events -- summary is natively keyboard-operable and keyboard activation also fires click; onClick only intercepts to animate the close */}\n <details\n className={clsx(\n styles.Accordion,\n styles[`Accordion--${variant}`],\n disableAnimation && styles['Accordion--disableAnimation'],\n className,\n )}\n ref={ref}\n open={open}\n {...rest}\n onClick={handleClick}\n >\n {children}\n </details>\n </AccordionContext.Provider>\n )\n },\n)\n\nexport const AccordionToggleColors = [...Colors, ...Gradients] as const\n\nexport type AccordionHeadingProps = HTMLAttributes<HTMLElement> & {\n as?: HeadingProps['as']\n reversedToggles?: boolean\n toggleColor?: (typeof AccordionToggleColors)[number]\n weight?: HeadingProps['weight']\n}\n\n/**\n * TODO This type is incorrect\n * The ref is applied to the summary, not the heading, so the correct type is\n * `forwardRef<HTMLElement, AccordionHeadingProps>`\n */\nexport const AccordionHeading = forwardRef<HTMLHeadingElement, AccordionHeadingProps>(\n ({children, className, as = 'h4', toggleColor, reversedToggles, weight = 'normal', ...rest}, ref) => {\n const {variant} = useAccordionContext()\n\n return (\n <summary\n className={clsx(\n styles.Accordion__summary,\n reversedToggles && styles['Accordion__summary--reversed-toggles'],\n styles[`Accordion__summary--${variant}`],\n toggleColor && styles[`Accordion__summary--toggleColor-${toggleColor}`],\n className,\n )}\n ref={ref}\n {...rest}\n >\n <span aria-hidden=\"true\" className={styles['Accordion__summary-toggle']}>\n <TriangleDownIcon className={styles['Accordion__summary-toggleIcon']} size={22} />\n </span>\n <Heading as={as} size={variant === 'emphasis' ? '6' : 'subhead-large'} weight={weight}>\n {children}\n </Heading>\n </summary>\n )\n },\n)\n\nexport type AccordionContentProps = HTMLAttributes<HTMLElement>\n\nexport const AccordionContent = ({children, className, ...rest}: AccordionContentProps) => (\n <section className={clsx(styles.Accordion__content, className)} {...rest}>\n <div className={styles['Accordion__content-inner']}>{children}</div>\n </section>\n)\n\nexport const Accordion = Object.assign(AccordionRoot, {Content: AccordionContent, Heading: AccordionHeading})\n"],"mappings":";;;;;;;;;;AA0CA,IAAM,IAAmB,EAA2C,IAAI,GAElE,UAAkD;CACtD,IAAM,IAAU,EAAW,CAAgB;CAE3C,IAAI,MAAY,MACd,MAAU,MAAM,2FAA2F;CAG7G,OAAO;AACT,GAEa,IAAgB,GAEzB,EACE,aACA,cACA,aAAU,WACV,sBAAmB,IACnB,SACA,YACA,aACA,cACA,eACA,GAAG,KAEL,MACG;CACH,IAAM,IAAM,EAAuB,CAAoD,GACjF,IAAwB,EAA6C,IAAI,GACzE,IAAe,EAAO,EAAK,GAC3B,IAAwB,SAAe,EAAC,WAAO,IAAI,CAAC,CAAO,CAAC,GAE5D,IAAmB,GAAa,MAAgC;EACpE,IAAM,IAAU,EAAQ,cAA2B,aAAa,EAAO,oBAAoB,GACrF,IAAe,GAAS,cAA2B,IAAI,EAAO,6BAA6B;EAEjG,IAAI,CAAC,KAAW,CAAC,GACf,OAAO;EAGT,IAAM,IAAgB,WAAW,iBAAiB,CAAO,CAAC,CAAC,iBAAiB,kCAAkC,CAAC,GACzG,IAAgB,KAAK,IAAI,GAAG,EAAa,gBAAgB,OAAO,MAAM,CAAa,IAAI,IAAI,EAAc;EAI/G,OAFA,EAAQ,MAAM,YAAY,oCAAoC,GAAG,EAAc,GAAG,GAE3E;CACT,GAAG,CAAC,CAAC,GAEC,IAAsB,QAAkB;EAC5C,AAEE,EAAsB,aADtB,aAAa,EAAsB,OAAO,GACV;CAEpC,GAAG,CAAC,CAAC,GAEC,IAAqB,GACxB,MAAgC;EAC/B,EAAoB;EACpB,IAAM,IACJ,OAAO,SAAW,OAAe,OAAO,OAAO,cAAe,aAC1D,OAAO,WAAW,kCAAkC,IACpD;EAGN,IAF6B,MAAuB,QAAQ,EAAmB,SAErD;GAGxB,AAFA,EAAQ,OAAO,IACf,EAAa,UAAU,IACvB,EAAQ,UAAU,OAAO,EAAO,qBAAqB;GACrD;EACF;EAEA,IAAM,IAAU,EAAiB,CAAO;EASxC,AAPI,KACF,EAAQ,sBAAsB,GAGhC,EAAa,UAAU,IACvB,EAAQ,UAAU,IAAI,EAAO,qBAAqB,GAElD,EAAsB,UAAU,iBAAiB;GAI/C,AAHA,EAAQ,OAAO,IACf,EAAa,UAAU,IACvB,EAAQ,UAAU,OAAO,EAAO,qBAAqB,GACrD,EAAsB,UAAU;EAClC,GAAG,GAAG;CACR,GACA,CAAC,GAAqB,CAAgB,CACxC,GAEM,IAAe,GACnB,MAAS;EACP,IAAM,IAAc;EAQpB,AAPI,EAAY,cAAc,SAC5B,EAAoB,GACpB,EAAa,UAAU,IACvB,EAAY,cAAc,UAAU,OAAO,EAAO,qBAAqB,GACvE,EAAiB,EAAY,aAAa,IAE5C,IAAW,CAAW,GACtB,IAAa,EAAY,cAAc,IAAI;CAC7C,GACA;EAAC;EAAqB;EAAU;EAAY;CAAgB,CAC9D,GAEM,IAAc,GAClB,MAAS;EAGP,IAFA,IAAU,CAAK,GAEX,EAAM,oBAAoB,GAC5B;EAGF,IAAM,IAAU,EAAM,eAChB,IAAS,EAAM;EAEjB,EAAE,aAAkB,YAAY,CAAC,EAAQ,QAI7B,EAAO,QAAQ,SAE3B,CAAA,EAAS,kBAAkB,MAC7B,EAAM,eAAe,GAEhB,EAAa,WAChB,EAAmB,CAAO;CAGhC,GACA;EAAC;EAAoB;EAAkB;CAAO,CAChD,GAEM,IAAgB,GACpB,MAAS;EACP,IAAM,IAAgB;EACtB,IAAY,CAAa;EAEzB,IAAM,IAAU,EAAI;EAEpB,AAAI,EAAc,QAAQ,YAAY,GAAS,SAC7C,EAAoB,GACpB,EAAQ,OAAO,IACf,EAAa,UAAU,IACvB,EAAQ,UAAU,OAAO,EAAO,qBAAqB,GACrD,EAAQ,cAAc,SAAS,CAAC,EAAE,MAAM;CAE5C,GACA;EAAC;EAAqB;EAAW;CAAG,CACtC;CAiCA,OA/BA,QAAgB;EACd,IAAM,IAAiB,EAAI;EAC3B,IAAI,GAAgB;GAClB,IAAM,IAAe,EAAe,cAA2B,IAAI,EAAO,6BAA6B,GACnG;GAkBJ,OAhBI,EAAe,QACjB,EAAiB,CAAc,GAG7B,OAAO,iBAAmB,OAAe,MAC3C,IAAiB,IAAI,qBAAqB;IACxC,AAAI,EAAe,QACjB,EAAiB,CAAc;GAEnC,CAAC,GACD,EAAe,QAAQ,CAAY,IAGrC,EAAe,iBAAiB,UAAU,CAAY,GACtD,EAAe,iBAAiB,WAAW,CAAa,SAE3C;IAIX,AAHA,EAAoB,GACpB,GAAgB,WAAW,GAC3B,EAAe,oBAAoB,UAAU,CAAY,GACzD,EAAe,oBAAoB,WAAW,CAAa;GAC7D;EACF;CACF,GAAG;EAAC;EAAqB;EAAc;EAAe;EAAK;CAAgB,CAAC,GAG1E,kBAAC,EAAiB,UAAlB;EAA2B,OAAO;YAEhC,kBAAC,WAAD;GACE,WAAW,EACT,EAAO,WACP,EAAO,cAAc,MACrB,KAAoB,EAAO,gCAC3B,CACF;GACK;GACC;GACN,GAAI;GACJ,SAAS;GAER;EACM,CAAA;CACgB,CAAA;AAE/B,CACF,GAEa,IAAwB,CAAC,GAAG,GAAQ,GAAG,CAAS,GAchD,IAAmB,GAC7B,EAAC,aAAU,cAAW,QAAK,MAAM,gBAAa,oBAAiB,YAAS,UAAU,GAAG,KAAO,MAAQ;CACnG,IAAM,EAAC,eAAW,EAAoB;CAEtC,OACE,kBAAC,WAAD;EACE,WAAW,EACT,EAAO,oBACP,KAAmB,EAAO,yCAC1B,EAAO,uBAAuB,MAC9B,KAAe,EAAO,mCAAmC,MACzD,CACF;EACK;EACL,GAAI;YATN,CAWE,kBAAC,QAAD;GAAM,eAAY;GAAO,WAAW,EAAO;aACzC,kBAAC,GAAD;IAAkB,WAAW,EAAO;IAAkC,MAAM;GAAK,CAAA;EAC7E,CAAA,GACN,kBAAC,GAAD;GAAa;GAAI,MAAM,MAAY,aAAa,MAAM;GAAyB;GAC5E;EACM,CAAA,CACF;;AAEb,CACF,GAIa,KAAoB,EAAC,aAAU,cAAW,GAAG,QACxD,kBAAC,WAAD;CAAS,WAAW,EAAK,EAAO,oBAAoB,CAAS;CAAG,GAAI;WAClE,kBAAC,OAAD;EAAK,WAAW,EAAO;EAA8B;CAAc,CAAA;AAC5D,CAAA,GAGE,IAAY,OAAO,OAAO,GAAe;CAAC,SAAS;CAAkB,SAAS;AAAgB,CAAC"}
|
|
1
|
+
{"version":3,"file":"Accordion.js","names":[],"sources":["../../src/Accordion/Accordion.tsx"],"sourcesContent":["import React, {\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n type DetailsHTMLAttributes,\n type HTMLAttributes,\n type KeyboardEvent,\n type MouseEventHandler,\n type ReactElement,\n type RefObject,\n type ToggleEvent,\n} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Heading, type HeadingProps} from '../'\nimport {TriangleDownIcon} from '@primer/octicons-react'\nimport {Colors, BiColorGradients as Gradients} from '../constants'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Accordion.module.css'\n\nexport type AccordionRootProps = DetailsHTMLAttributes<HTMLDetailsElement> & {\n children: ReactElement<AccordionHeadingProps | AccordionContentProps>[]\n variant?: 'default' | 'emphasis'\n disableAnimation?: boolean\n handleOpen?: (isOpen: boolean) => void\n}\n\ntype AccordionContextType = {\n variant: 'default' | 'emphasis'\n}\n\nconst AccordionContext = createContext<AccordionContextType | null>(null)\n\nconst useAccordionContext = (): AccordionContextType => {\n const context = useContext(AccordionContext)\n\n if (context === null) {\n throw new Error('Unable to find Accordion provider. Did you forget to wrap your component in an Accordion?')\n }\n\n return context\n}\n\nexport const AccordionRoot = forwardRef<HTMLDetailsElement, AccordionRootProps>(\n (\n {\n children,\n className,\n variant = 'default',\n disableAnimation = false,\n open,\n onClick,\n onToggle,\n onKeyDown,\n handleOpen,\n ...rest\n },\n forwardedRef,\n ) => {\n const ref = useProvidedRefOrCreate(forwardedRef as RefObject<HTMLDetailsElement | null>)\n const closeAnimationTimeout = useRef<ReturnType<typeof setTimeout> | null>(null)\n const isClosingRef = useRef(false)\n const accordionContextValue = useMemo(() => ({variant}), [variant])\n\n const setContentHeight = useCallback((details: HTMLDetailsElement) => {\n const content = details.querySelector<HTMLElement>(`:scope > .${styles.Accordion__content}`)\n const contentInner = content?.querySelector<HTMLElement>(`.${styles['Accordion__content-inner']}`)\n\n if (!content || !contentInner) {\n return null\n }\n\n details.style.setProperty('--brand-Accordion-content-height', `${contentInner.scrollHeight}px`)\n\n return content\n }, [])\n\n const clearCloseAnimation = useCallback(() => {\n if (closeAnimationTimeout.current) {\n clearTimeout(closeAnimationTimeout.current)\n closeAnimationTimeout.current = null\n }\n }, [])\n\n const closeWithAnimation = useCallback(\n (details: HTMLDetailsElement) => {\n clearCloseAnimation()\n const reducedMotionQuery =\n typeof window !== 'undefined' && typeof window.matchMedia === 'function'\n ? window.matchMedia('(prefers-reduced-motion: reduce)')\n : null\n const prefersReducedMotion = reducedMotionQuery !== null && reducedMotionQuery.matches\n\n if (prefersReducedMotion) {\n details.open = false\n isClosingRef.current = false\n details.classList.remove(styles['Accordion--closing'])\n return\n }\n\n const content = setContentHeight(details)\n\n if (content) {\n content.getBoundingClientRect()\n }\n\n isClosingRef.current = true\n details.classList.add(styles['Accordion--closing'])\n\n closeAnimationTimeout.current = setTimeout(() => {\n details.open = false\n isClosingRef.current = false\n details.classList.remove(styles['Accordion--closing'])\n closeAnimationTimeout.current = null\n }, 300)\n },\n [clearCloseAnimation, setContentHeight],\n )\n\n const handleToggle = useCallback<(event: Event) => void>(\n event => {\n const toggleEvent = event as unknown as ToggleEvent<HTMLDetailsElement>\n if (toggleEvent.currentTarget.open) {\n clearCloseAnimation()\n isClosingRef.current = false\n toggleEvent.currentTarget.classList.remove(styles['Accordion--closing'])\n setContentHeight(toggleEvent.currentTarget)\n }\n onToggle?.(toggleEvent)\n handleOpen?.(toggleEvent.currentTarget.open)\n },\n [clearCloseAnimation, onToggle, handleOpen, setContentHeight],\n )\n\n const handleClick = useCallback<MouseEventHandler<HTMLDetailsElement>>(\n event => {\n onClick?.(event)\n\n if (event.defaultPrevented || disableAnimation) {\n return\n }\n\n const details = event.currentTarget\n const target = event.target\n\n if (!(target instanceof Element) || !details.open) {\n return\n }\n\n const summary = target.closest('summary')\n\n if (summary?.parentElement === details) {\n event.preventDefault()\n\n if (!isClosingRef.current) {\n closeWithAnimation(details)\n }\n }\n },\n [closeWithAnimation, disableAnimation, onClick],\n )\n\n const handleKeyDown = useCallback<EventListener>(\n event => {\n const keyboardEvent = event as unknown as KeyboardEvent<HTMLDetailsElement>\n onKeyDown?.(keyboardEvent)\n\n const details = ref.current\n\n if (keyboardEvent.key === 'Escape' && details?.open) {\n clearCloseAnimation()\n details.open = false\n isClosingRef.current = false\n details.classList.remove(styles['Accordion--closing'])\n details.querySelector('summary')?.focus()\n }\n },\n [clearCloseAnimation, onKeyDown, ref],\n )\n\n useEffect(() => {\n const detailsElement = ref.current\n if (detailsElement) {\n const contentInner = detailsElement.querySelector<HTMLElement>(`.${styles['Accordion__content-inner']}`)\n let resizeObserver: ResizeObserver | undefined\n\n if (detailsElement.open) {\n setContentHeight(detailsElement)\n }\n\n if (typeof ResizeObserver !== 'undefined' && contentInner) {\n resizeObserver = new ResizeObserver(() => {\n if (detailsElement.open) {\n setContentHeight(detailsElement)\n }\n })\n resizeObserver.observe(contentInner)\n }\n\n detailsElement.addEventListener('toggle', handleToggle)\n detailsElement.addEventListener('keydown', handleKeyDown)\n\n return () => {\n clearCloseAnimation()\n resizeObserver?.disconnect()\n detailsElement.removeEventListener('toggle', handleToggle)\n detailsElement.removeEventListener('keydown', handleKeyDown)\n }\n }\n }, [clearCloseAnimation, handleToggle, handleKeyDown, ref, setContentHeight])\n\n return (\n <AccordionContext.Provider value={accordionContextValue}>\n {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events -- summary is natively keyboard-operable and keyboard activation also fires click; onClick only intercepts to animate the close */}\n <details\n className={clsx(\n styles.Accordion,\n styles[`Accordion--${variant}`],\n disableAnimation && styles['Accordion--disableAnimation'],\n className,\n )}\n ref={ref}\n open={open}\n {...rest}\n onClick={handleClick}\n >\n {children}\n </details>\n </AccordionContext.Provider>\n )\n },\n)\n\nexport const AccordionToggleColors = [...Colors, ...Gradients] as const\n\nexport type AccordionHeadingProps = HTMLAttributes<HTMLElement> & {\n as?: HeadingProps['as']\n reversedToggles?: boolean\n toggleColor?: (typeof AccordionToggleColors)[number]\n weight?: HeadingProps['weight']\n}\n\n/**\n * TODO This type is incorrect\n * The ref is applied to the summary, not the heading, so the correct type is\n * `forwardRef<HTMLElement, AccordionHeadingProps>`\n */\nexport const AccordionHeading = forwardRef<HTMLHeadingElement, AccordionHeadingProps>(\n ({children, className, as = 'h4', toggleColor, reversedToggles, weight = 'normal', ...rest}, ref) => {\n const {variant} = useAccordionContext()\n\n return (\n <summary\n className={clsx(\n styles.Accordion__summary,\n reversedToggles && styles['Accordion__summary--reversed-toggles'],\n styles[`Accordion__summary--${variant}`],\n toggleColor && styles[`Accordion__summary--toggleColor-${toggleColor}`],\n className,\n )}\n ref={ref}\n {...rest}\n >\n <span aria-hidden=\"true\" className={styles['Accordion__summary-toggle']}>\n <TriangleDownIcon className={styles['Accordion__summary-toggleIcon']} size={22} />\n </span>\n <Heading as={as} size={variant === 'emphasis' ? '6' : 'subhead-large'} weight={weight}>\n {children}\n </Heading>\n </summary>\n )\n },\n)\n\nexport type AccordionContentProps = HTMLAttributes<HTMLElement>\n\nexport const AccordionContent = ({children, className, ...rest}: AccordionContentProps) => (\n <section className={clsx(styles.Accordion__content, className)} {...rest}>\n <div className={styles['Accordion__content-inner']}>{children}</div>\n </section>\n)\n\nexport const Accordion = Object.assign(AccordionRoot, {Content: AccordionContent, Heading: AccordionHeading})\n"],"mappings":";;;;;;;;;;AA0CA,IAAM,IAAmB,EAA2C,IAAI,GAElE,UAAkD;CACtD,IAAM,IAAU,EAAW,CAAgB;CAE3C,IAAI,MAAY,MACd,MAAU,MAAM,2FAA2F;CAG7G,OAAO;AACT,GAEa,IAAgB,GAEzB,EACE,aACA,cACA,aAAU,WACV,sBAAmB,IACnB,SACA,YACA,aACA,cACA,eACA,GAAG,KAEL,MACG;CACH,IAAM,IAAM,EAAuB,CAAoD,GACjF,IAAwB,EAA6C,IAAI,GACzE,IAAe,EAAO,EAAK,GAC3B,IAAwB,SAAe,EAAC,WAAO,IAAI,CAAC,CAAO,CAAC,GAE5D,IAAmB,GAAa,MAAgC;EACpE,IAAM,IAAU,EAAQ,cAA2B,aAAa,EAAO,oBAAoB,GACrF,IAAe,GAAS,cAA2B,IAAI,EAAO,6BAA6B;EAQjG,OANI,CAAC,KAAW,CAAC,IACR,QAGT,EAAQ,MAAM,YAAY,oCAAoC,GAAG,EAAa,aAAa,GAAG,GAEvF;CACT,GAAG,CAAC,CAAC,GAEC,IAAsB,QAAkB;EAC5C,AAEE,EAAsB,aADtB,aAAa,EAAsB,OAAO,GACV;CAEpC,GAAG,CAAC,CAAC,GAEC,IAAqB,GACxB,MAAgC;EAC/B,EAAoB;EACpB,IAAM,IACJ,OAAO,SAAW,OAAe,OAAO,OAAO,cAAe,aAC1D,OAAO,WAAW,kCAAkC,IACpD;EAGN,IAF6B,MAAuB,QAAQ,EAAmB,SAErD;GAGxB,AAFA,EAAQ,OAAO,IACf,EAAa,UAAU,IACvB,EAAQ,UAAU,OAAO,EAAO,qBAAqB;GACrD;EACF;EAEA,IAAM,IAAU,EAAiB,CAAO;EASxC,AAPI,KACF,EAAQ,sBAAsB,GAGhC,EAAa,UAAU,IACvB,EAAQ,UAAU,IAAI,EAAO,qBAAqB,GAElD,EAAsB,UAAU,iBAAiB;GAI/C,AAHA,EAAQ,OAAO,IACf,EAAa,UAAU,IACvB,EAAQ,UAAU,OAAO,EAAO,qBAAqB,GACrD,EAAsB,UAAU;EAClC,GAAG,GAAG;CACR,GACA,CAAC,GAAqB,CAAgB,CACxC,GAEM,IAAe,GACnB,MAAS;EACP,IAAM,IAAc;EAQpB,AAPI,EAAY,cAAc,SAC5B,EAAoB,GACpB,EAAa,UAAU,IACvB,EAAY,cAAc,UAAU,OAAO,EAAO,qBAAqB,GACvE,EAAiB,EAAY,aAAa,IAE5C,IAAW,CAAW,GACtB,IAAa,EAAY,cAAc,IAAI;CAC7C,GACA;EAAC;EAAqB;EAAU;EAAY;CAAgB,CAC9D,GAEM,IAAc,GAClB,MAAS;EAGP,IAFA,IAAU,CAAK,GAEX,EAAM,oBAAoB,GAC5B;EAGF,IAAM,IAAU,EAAM,eAChB,IAAS,EAAM;EAEjB,EAAE,aAAkB,YAAY,CAAC,EAAQ,QAI7B,EAAO,QAAQ,SAE3B,CAAA,EAAS,kBAAkB,MAC7B,EAAM,eAAe,GAEhB,EAAa,WAChB,EAAmB,CAAO;CAGhC,GACA;EAAC;EAAoB;EAAkB;CAAO,CAChD,GAEM,IAAgB,GACpB,MAAS;EACP,IAAM,IAAgB;EACtB,IAAY,CAAa;EAEzB,IAAM,IAAU,EAAI;EAEpB,AAAI,EAAc,QAAQ,YAAY,GAAS,SAC7C,EAAoB,GACpB,EAAQ,OAAO,IACf,EAAa,UAAU,IACvB,EAAQ,UAAU,OAAO,EAAO,qBAAqB,GACrD,EAAQ,cAAc,SAAS,CAAC,EAAE,MAAM;CAE5C,GACA;EAAC;EAAqB;EAAW;CAAG,CACtC;CAiCA,OA/BA,QAAgB;EACd,IAAM,IAAiB,EAAI;EAC3B,IAAI,GAAgB;GAClB,IAAM,IAAe,EAAe,cAA2B,IAAI,EAAO,6BAA6B,GACnG;GAkBJ,OAhBI,EAAe,QACjB,EAAiB,CAAc,GAG7B,OAAO,iBAAmB,OAAe,MAC3C,IAAiB,IAAI,qBAAqB;IACxC,AAAI,EAAe,QACjB,EAAiB,CAAc;GAEnC,CAAC,GACD,EAAe,QAAQ,CAAY,IAGrC,EAAe,iBAAiB,UAAU,CAAY,GACtD,EAAe,iBAAiB,WAAW,CAAa,SAE3C;IAIX,AAHA,EAAoB,GACpB,GAAgB,WAAW,GAC3B,EAAe,oBAAoB,UAAU,CAAY,GACzD,EAAe,oBAAoB,WAAW,CAAa;GAC7D;EACF;CACF,GAAG;EAAC;EAAqB;EAAc;EAAe;EAAK;CAAgB,CAAC,GAG1E,kBAAC,EAAiB,UAAlB;EAA2B,OAAO;YAEhC,kBAAC,WAAD;GACE,WAAW,EACT,EAAO,WACP,EAAO,cAAc,MACrB,KAAoB,EAAO,gCAC3B,CACF;GACK;GACC;GACN,GAAI;GACJ,SAAS;GAER;EACM,CAAA;CACgB,CAAA;AAE/B,CACF,GAEa,IAAwB,CAAC,GAAG,GAAQ,GAAG,CAAS,GAchD,IAAmB,GAC7B,EAAC,aAAU,cAAW,QAAK,MAAM,gBAAa,oBAAiB,YAAS,UAAU,GAAG,KAAO,MAAQ;CACnG,IAAM,EAAC,eAAW,EAAoB;CAEtC,OACE,kBAAC,WAAD;EACE,WAAW,EACT,EAAO,oBACP,KAAmB,EAAO,yCAC1B,EAAO,uBAAuB,MAC9B,KAAe,EAAO,mCAAmC,MACzD,CACF;EACK;EACL,GAAI;YATN,CAWE,kBAAC,QAAD;GAAM,eAAY;GAAO,WAAW,EAAO;aACzC,kBAAC,GAAD;IAAkB,WAAW,EAAO;IAAkC,MAAM;GAAK,CAAA;EAC7E,CAAA,GACN,kBAAC,GAAD;GAAa;GAAI,MAAM,MAAY,aAAa,MAAM;GAAyB;GAC5E;EACM,CAAA,CACF;;AAEb,CACF,GAIa,KAAoB,EAAC,aAAU,cAAW,GAAG,QACxD,kBAAC,WAAD;CAAS,WAAW,EAAK,EAAO,oBAAoB,CAAS;CAAG,GAAI;WAClE,kBAAC,OAAD;EAAK,WAAW,EAAO;EAA8B;CAAc,CAAA;AAC5D,CAAA,GAGE,IAAY,OAAO,OAAO,GAAe;CAAC,SAAS;CAAkB,SAAS;AAAgB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Primer_Brand__Accordion-module__Accordion___RSoMC{--brand-Accordion-content-height:0px;box-sizing:border-box;position:relative}.Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8:after,.Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8 .Primer_Brand__Accordion-module__Accordion__summary-toggleIcon___WFUk5,.Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8>.Primer_Brand__Accordion-module__Accordion__content___GhUVO,.Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{transition:none}.Primer_Brand__Accordion-module__Accordion--default___R_5ld{border-bottom:var(--brand-borderWidth-thin) solid var(--brand-Accordion-border-color-default)}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{background-color:var(--brand-color-canvas-subtle);border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-block:var(--base-size-20);padding-inline:var(--base-size-20);justify-content:flex-start;align-items:center;gap:0}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI:before{content:"";width:calc(var(--base-size-8) - 1px);height:var(--base-size-12);background-color:var(--brand-Accordion-indicator-idle);flex-shrink:0;margin-inline-end:var(--base-size-12);display:block}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI:hover:before{background-color:var(--brand-Accordion-indicator-hover)}details[open]>.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI:before{background-color:var(--brand-Accordion-indicator-active)}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h3,.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h4,.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h5,.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h6{font-family:var(--brand-fontStack-monospace);font-size:var(--brand-text-size-100);font-weight:var(--brand-text-weight-500);line-height:var(--brand-text-lineHeight-100);letter-spacing:.15px;text-transform:uppercase}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)+.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{border-block-start:none}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{padding-block-start:var(--base-size-12);padding-inline:var(--base-size-20)}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof:after{block-size:var(--base-size-12)}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT .Primer_Brand__Accordion-module__Accordion--default___R_5ld:last-child{border-bottom:none}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT .Primer_Brand__Accordion-module__Accordion--default___R_5ld:last-child:after{display:none}.Primer_Brand__Accordion-module__Accordion--default___R_5ld:after{content:"";background-color:var(--brand-Accordion-border-color-default);height:var(--brand-borderWidth-thin);transition:background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);transform-origin:50% 100%;width:100%;position:absolute;bottom:0;left:0;transform:scaleY(0)}.Primer_Brand__Accordion-module__Accordion--default___R_5ld:hover:after,details[open].Primer_Brand__Accordion-module__Accordion--default___R_5ld:after{background-color:var(--brand-color-accent-primary);transform:scaleY(1)}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{cursor:pointer;padding:var(--base-size-24) 0;justify-content:space-between;align-items:center;display:flex;position:relative}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC::-webkit-details-marker{display:none}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus)}details[open].Primer_Brand__Accordion-module__Accordion___RSoMC:has(>summary:focus-visible){outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}details[open].Primer_Brand__Accordion-module__Accordion___RSoMC>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC:focus-visible{outline:none}.Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{cursor:pointer;height:var(--base-size-24);width:var(--base-size-24);color:var(--brand-color-text-emphasized);justify-content:center;align-items:center;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC:not(.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W) .Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{right:0}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI .Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{color:var(--brand-color-text-default);order:1;margin-inline-start:auto;position:static;transform:none}.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W .Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{left:0}.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT .Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{color:var(--brand-Accordion-toggle-color-start,var(--brand-color-text-emphasized))}.Primer_Brand__Accordion-module__Accordion__summary-toggleIcon___WFUk5{transform-origin:50%;transition:transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide)}details[open]>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC .Primer_Brand__Accordion-module__Accordion__summary-toggleIcon___WFUk5{transform:rotate(-180deg)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-default___Hd_up{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-default)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-blue___TGA5S{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-blue)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-blue-purple___dnh9G{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-blue-purple-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-coral____IedP{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-coral)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-green___Q_oKN{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-green)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-green-blue___UPhxW{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-green-blue-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-gray___XAdlE{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-gray)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-indigo___MbEJo{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-indigo)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-lemon___yKljE{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-lemon)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-lime___dXlEo{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-lime)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-orange___DIqep{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-orange)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-pink___JQk2J{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-pink)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-pink-blue___8wMk6{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-pink-blue-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-purple___P3aRT{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-purple)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-purple-red___DuF8G{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-purple-red-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-red___uRFGS{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-red)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-red-orange___cmXlh{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-red-orange-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-teal___fE9fd{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-teal)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-yellow___ws5We{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-yellow)}.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT:not(.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W){padding-inline-end:var(--base-size-48)}.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W{padding-inline-start:var(--base-size-48)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO,.Primer_Brand__Accordion-module__Accordion__content___GhUVO p,.Primer_Brand__Accordion-module__Accordion__content___GhUVO span:not(.Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_),.Primer_Brand__Accordion-module__Accordion__content___GhUVO ul,.Primer_Brand__Accordion-module__Accordion__content___GhUVO ol{color:var(--brand-color-text-muted);font-family:var(--brand-fontStack-sansSerif);font-weight:var(--brand-text-weight-200);font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO{--brand-Accordion-content-offset:0px;max-height:0;transition:max-height var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);position:relative;overflow:hidden}.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{transform:translateY(calc(-1 * var(--brand-Accordion-content-offset)));opacity:0;transition:opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-glide)}.Primer_Brand__Accordion-module__Accordion--default___R_5ld>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{--brand-Accordion-content-offset:calc(var(--base-size-24) - var(--base-size-6));top:calc(var(--base-size-4) * -1)}.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT+.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof:before{content:"";block-size:var(--base-size-12);display:block}.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof:after{content:"";display:block}[data-color-mode=dark] .Primer_Brand__Accordion-module__Accordion__content___GhUVO{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:auto}.Primer_Brand__Accordion-module__Accordion__content___GhUVO p:not(:first-child){margin-block-start:var(--base-size-16)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a{color:var(--brand-InlineLink-color-rest);-webkit-text-decoration:underline;text-decoration:underline;-webkit-text-decoration-color:var(--brand-InlineLink-color-rest);text-decoration-color:var(--brand-InlineLink-color-rest);text-decoration-thickness:var(--brand-borderWidth-thin);text-underline-position:under;transition:var(--brand-InlineLink-transition-timing) text-decoration;position:relative}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a:hover{text-decoration-thickness:var(--brand-borderWidth-thick)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a,.Primer_Brand__Accordion-module__Accordion__content___GhUVO a>span{font-weight:inherit;color:var(--brand-InlineLink-color-rest)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a:active,.Primer_Brand__Accordion-module__Accordion__content___GhUVO a:active>span{color:var(--brand-InlineLink-color-pressed)}details[open]>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{max-height:var(--brand-Accordion-content-height);z-index:0;position:relative}details[open].Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{max-height:none}details[open]>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{opacity:1}details.Primer_Brand__Accordion-module__Accordion--closing___R_qJH>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{max-height:0}details.Primer_Brand__Accordion-module__Accordion--closing___R_qJH>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{opacity:0}.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT+.Primer_Brand__Accordion-module__Accordion__content___GhUVO,details[open]>.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT+.Primer_Brand__Accordion-module__Accordion__content___GhUVO,details.Primer_Brand__Accordion-module__Accordion--closing___R_qJH>.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT+.Primer_Brand__Accordion-module__Accordion__content___GhUVO{margin-block-start:0}details.Primer_Brand__Accordion-module__Accordion--closing___R_qJH>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC .Primer_Brand__Accordion-module__Accordion__summary-toggleIcon___WFUk5{transform:rotate(0)}details[open]>.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W+.Primer_Brand__Accordion-module__Accordion__content___GhUVO{padding-inline-start:var(--base-size-48)}@media screen and (width>=48rem){.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{gap:var(--base-size-40)}}@media (prefers-reduced-motion:reduce){.Primer_Brand__Accordion-module__Accordion___RSoMC,.Primer_Brand__Accordion-module__Accordion___RSoMC:before,.Primer_Brand__Accordion-module__Accordion___RSoMC:after,.Primer_Brand__Accordion-module__Accordion___RSoMC *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
|
|
1
|
+
.Primer_Brand__Accordion-module__Accordion___RSoMC{--brand-Accordion-content-height:0px;box-sizing:border-box;position:relative}.Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8:after,.Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8 .Primer_Brand__Accordion-module__Accordion__summary-toggleIcon___WFUk5,.Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8>.Primer_Brand__Accordion-module__Accordion__content___GhUVO,.Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{transition:none}.Primer_Brand__Accordion-module__Accordion--default___R_5ld{border-bottom:var(--brand-borderWidth-thin) solid var(--brand-Accordion-border-color-default)}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{background-color:var(--brand-color-canvas-subtle);border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-block:var(--base-size-20);padding-inline:var(--base-size-20);justify-content:flex-start;align-items:center;gap:0}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI:before{content:"";width:calc(var(--base-size-8) - 1px);height:var(--base-size-12);background-color:var(--brand-Accordion-indicator-idle);flex-shrink:0;margin-inline-end:var(--base-size-12);display:block}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI:hover:before{background-color:var(--brand-Accordion-indicator-hover)}details[open]>.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI:before{background-color:var(--brand-Accordion-indicator-active)}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h3,.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h4,.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h5,.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h6{font-family:var(--brand-fontStack-monospace);font-size:var(--brand-text-size-100);font-weight:var(--brand-text-weight-500);line-height:var(--brand-text-lineHeight-100);letter-spacing:.15px;text-transform:uppercase}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)+.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{border-block-start:none}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{padding-block-start:var(--base-size-12);padding-inline:var(--base-size-20)}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof:after{block-size:var(--base-size-12)}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT .Primer_Brand__Accordion-module__Accordion--default___R_5ld:last-child{border-bottom:none}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT .Primer_Brand__Accordion-module__Accordion--default___R_5ld:last-child:after{display:none}.Primer_Brand__Accordion-module__Accordion--default___R_5ld:after{content:"";background-color:var(--brand-Accordion-border-color-default);height:var(--brand-borderWidth-thin);transition:background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);transform-origin:50% 100%;width:100%;position:absolute;bottom:0;left:0;transform:scaleY(0)}.Primer_Brand__Accordion-module__Accordion--default___R_5ld:hover:after,details[open].Primer_Brand__Accordion-module__Accordion--default___R_5ld:after{background-color:var(--brand-color-accent-primary);transform:scaleY(1)}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{cursor:pointer;padding:var(--base-size-24) 0;justify-content:space-between;align-items:center;display:flex;position:relative}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC::-webkit-details-marker{display:none}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus)}details[open].Primer_Brand__Accordion-module__Accordion___RSoMC:has(>summary:focus-visible){outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}details[open].Primer_Brand__Accordion-module__Accordion___RSoMC>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC:focus-visible{outline:none}.Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{cursor:pointer;height:var(--base-size-24);width:var(--base-size-24);color:var(--brand-color-text-emphasized);justify-content:center;align-items:center;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC:not(.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W) .Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{right:0}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI .Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{color:var(--brand-color-text-default);order:1;margin-inline-start:auto;position:static;transform:none}.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W .Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{left:0}.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT .Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{color:var(--brand-Accordion-toggle-color-start,var(--brand-color-text-emphasized))}.Primer_Brand__Accordion-module__Accordion__summary-toggleIcon___WFUk5{transform-origin:50%;transition:transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide)}details[open]>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC .Primer_Brand__Accordion-module__Accordion__summary-toggleIcon___WFUk5{transform:rotate(-180deg)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-default___Hd_up{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-default)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-blue___TGA5S{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-blue)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-blue-purple___dnh9G{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-blue-purple-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-coral____IedP{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-coral)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-green___Q_oKN{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-green)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-green-blue___UPhxW{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-green-blue-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-gray___XAdlE{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-gray)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-indigo___MbEJo{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-indigo)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-lemon___yKljE{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-lemon)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-lime___dXlEo{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-lime)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-orange___DIqep{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-orange)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-pink___JQk2J{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-pink)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-pink-blue___8wMk6{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-pink-blue-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-purple___P3aRT{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-purple)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-purple-red___DuF8G{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-purple-red-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-red___uRFGS{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-red)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-red-orange___cmXlh{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-red-orange-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-teal___fE9fd{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-teal)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-yellow___ws5We{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-yellow)}.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT:not(.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W){padding-inline-end:var(--base-size-48)}.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W{padding-inline-start:var(--base-size-48)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO,.Primer_Brand__Accordion-module__Accordion__content___GhUVO p,.Primer_Brand__Accordion-module__Accordion__content___GhUVO span:not(.Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_),.Primer_Brand__Accordion-module__Accordion__content___GhUVO ul,.Primer_Brand__Accordion-module__Accordion__content___GhUVO ol{color:var(--brand-color-text-muted);font-family:var(--brand-fontStack-sansSerif);font-weight:var(--brand-text-weight-200);font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO{max-height:0;transition:max-height var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);position:relative;overflow:hidden}.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{opacity:0;transition:opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-glide)}.Primer_Brand__Accordion-module__Accordion--default___R_5ld>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{top:calc(var(--base-size-2) - var(--base-size-24))}.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT+.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof:before{content:"";block-size:var(--base-size-12);display:block}.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof:after{content:"";display:block}[data-color-mode=dark] .Primer_Brand__Accordion-module__Accordion__content___GhUVO{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:auto}.Primer_Brand__Accordion-module__Accordion__content___GhUVO p:not(:first-child){margin-block-start:var(--base-size-16)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a{color:var(--brand-InlineLink-color-rest);-webkit-text-decoration:underline;text-decoration:underline;-webkit-text-decoration-color:var(--brand-InlineLink-color-rest);text-decoration-color:var(--brand-InlineLink-color-rest);text-decoration-thickness:var(--brand-borderWidth-thin);text-underline-position:under;transition:var(--brand-InlineLink-transition-timing) text-decoration;position:relative}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a:hover{text-decoration-thickness:var(--brand-borderWidth-thick)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a,.Primer_Brand__Accordion-module__Accordion__content___GhUVO a>span{font-weight:inherit;color:var(--brand-InlineLink-color-rest)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a:active,.Primer_Brand__Accordion-module__Accordion__content___GhUVO a:active>span{color:var(--brand-InlineLink-color-pressed)}details[open]>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{max-height:var(--brand-Accordion-content-height);z-index:0;position:relative}details[open].Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{max-height:none}details[open]>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{opacity:1}details.Primer_Brand__Accordion-module__Accordion--closing___R_qJH>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{max-height:0}details.Primer_Brand__Accordion-module__Accordion--closing___R_qJH>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{opacity:0}.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT+.Primer_Brand__Accordion-module__Accordion__content___GhUVO,details[open]>.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT+.Primer_Brand__Accordion-module__Accordion__content___GhUVO,details.Primer_Brand__Accordion-module__Accordion--closing___R_qJH>.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT+.Primer_Brand__Accordion-module__Accordion__content___GhUVO{margin-block-start:0}details.Primer_Brand__Accordion-module__Accordion--closing___R_qJH>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC .Primer_Brand__Accordion-module__Accordion__summary-toggleIcon___WFUk5{transform:rotate(0)}details[open]>.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W+.Primer_Brand__Accordion-module__Accordion__content___GhUVO{padding-inline-start:var(--base-size-48)}@media screen and (width>=48rem){.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{gap:var(--base-size-40)}}@media (prefers-reduced-motion:reduce){.Primer_Brand__Accordion-module__Accordion___RSoMC,.Primer_Brand__Accordion-module__Accordion___RSoMC:before,.Primer_Brand__Accordion-module__Accordion___RSoMC:after,.Primer_Brand__Accordion-module__Accordion___RSoMC *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import './Accordion.module-
|
|
1
|
+
import './Accordion.module-B-iFuyHy.css';//#region src/Accordion/Accordion.module.css
|
|
2
2
|
var e = "Primer_Brand__Accordion-module__Accordion___RSoMC", t = "Primer_Brand__Accordion-module__Accordion__content___GhUVO", n = "Primer_Brand__Accordion-module__Accordion__summary___zYOXC", r = {
|
|
3
3
|
Accordion: e,
|
|
4
4
|
"Accordion--disableAnimation": "Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.module.js","names":[],"sources":["../../src/Accordion/Accordion.module.css"],"sourcesContent":[".Accordion {\n --brand-Accordion-content-height: 0px;\n\n box-sizing: border-box;\n position: relative;\n}\n\n.Accordion--disableAnimation::after,\n.Accordion--disableAnimation .Accordion__summary-toggleIcon,\n.Accordion--disableAnimation > .Accordion__content,\n.Accordion--disableAnimation > .Accordion__content > .Accordion__content-inner {\n transition: none;\n}\n\n.Accordion--default {\n border-bottom: var(--brand-borderWidth-thin) solid var(--brand-Accordion-border-color-default);\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__summary {\n background-color: var(--brand-color-canvas-subtle);\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n padding-block: var(--base-size-20);\n padding-inline: var(--base-size-20);\n gap: 0;\n justify-content: flex-start;\n align-items: center;\n}\n\n.Accordion__summary--emphasis::before {\n content: '';\n display: block;\n width: calc(var(--base-size-8) - 1px);\n height: var(--base-size-12);\n flex-shrink: 0;\n margin-inline-end: var(--base-size-12);\n background-color: var(--brand-Accordion-indicator-idle);\n}\n\n.Accordion__summary--emphasis:hover::before {\n background-color: var(--brand-Accordion-indicator-hover);\n}\n\ndetails[open] > .Accordion__summary--emphasis::before {\n background-color: var(--brand-Accordion-indicator-active);\n}\n\n.Accordion__summary--emphasis :is(h3, h4, h5, h6) {\n font-family: var(--brand-fontStack-monospace);\n font-size: var(--brand-text-size-100);\n font-weight: var(--brand-text-weight-500);\n line-height: var(--brand-text-lineHeight-100);\n letter-spacing: 0.15px;\n text-transform: uppercase;\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion)\n + .Accordion--emphasis:not(.Accordion .Accordion)\n > .Accordion__summary {\n border-block-start: none;\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__content {\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__content > .Accordion__content-inner {\n padding-block-start: var(--base-size-12);\n padding-inline: var(--base-size-20);\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__content > .Accordion__content-inner::after {\n block-size: var(--base-size-12);\n}\n\n.Accordion--emphasis .Accordion--default:last-child {\n border-bottom: none;\n}\n\n.Accordion--emphasis .Accordion--default:last-child::after {\n display: none;\n}\n\n.Accordion--default::after {\n content: '';\n background-color: var(--brand-Accordion-border-color-default);\n height: var(--brand-borderWidth-thin);\n transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide),\n transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n transform: scaleY(0);\n transform-origin: 50% 100%;\n width: 100%;\n position: absolute;\n bottom: 0;\n left: 0;\n}\n\n.Accordion--default:hover::after,\ndetails[open].Accordion--default::after {\n background-color: var(--brand-color-accent-primary);\n transform: scaleY(1);\n}\n\n.Accordion__summary {\n cursor: pointer;\n padding: var(--base-size-24) 0;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.Accordion__summary--reversed-toggles {\n padding-inline-start: var(--base-size-48);\n}\n\n.Accordion__summary::-webkit-details-marker {\n display: none;\n}\n\n.Accordion__summary:focus-visible {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n}\n\n/* When open, move focus ring to the details element to wrap summary + content as one unit */\ndetails[open].Accordion:has(> summary:focus-visible) {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\ndetails[open].Accordion > .Accordion__summary:focus-visible {\n outline: none;\n}\n\n.Accordion__summary-toggle {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--base-size-24);\n width: var(--base-size-24);\n color: var(--brand-color-text-emphasized);\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.Accordion__summary:not(.Accordion__summary--reversed-toggles) .Accordion__summary-toggle {\n right: 0;\n}\n\n.Accordion__summary--emphasis .Accordion__summary-toggle {\n position: static;\n transform: none;\n order: 1;\n margin-inline-start: auto;\n color: var(--brand-color-text-default);\n}\n\n.Accordion__summary--reversed-toggles .Accordion__summary-toggle {\n left: 0;\n}\n\n.Accordion__summary--default .Accordion__summary-toggle {\n color: var(--brand-Accordion-toggle-color-start, var(--brand-color-text-emphasized));\n}\n\n.Accordion__summary-toggleIcon {\n transform-origin: 50% 50%;\n transition: transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n}\n\ndetails[open] > .Accordion__summary .Accordion__summary-toggleIcon {\n transform: rotate(-180deg);\n}\n\n.Accordion__summary--toggleColor-default {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-default);\n}\n\n.Accordion__summary--toggleColor-blue {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-blue);\n}\n\n.Accordion__summary--toggleColor-blue-purple {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-blue-purple-start);\n}\n\n.Accordion__summary--toggleColor-coral {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-coral);\n}\n\n.Accordion__summary--toggleColor-green {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-green);\n}\n\n.Accordion__summary--toggleColor-green-blue {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-green-blue-start);\n}\n\n.Accordion__summary--toggleColor-gray {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-gray);\n}\n\n.Accordion__summary--toggleColor-indigo {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-indigo);\n}\n\n.Accordion__summary--toggleColor-lemon {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-lemon);\n}\n\n.Accordion__summary--toggleColor-lime {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-lime);\n}\n\n.Accordion__summary--toggleColor-orange {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-orange);\n}\n\n.Accordion__summary--toggleColor-pink {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-pink);\n}\n\n.Accordion__summary--toggleColor-pink-blue {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-pink-blue-start);\n}\n\n.Accordion__summary--toggleColor-purple {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-purple);\n}\n\n.Accordion__summary--toggleColor-purple-red {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-purple-red-start);\n}\n\n.Accordion__summary--toggleColor-red {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-red);\n}\n\n.Accordion__summary--toggleColor-red-orange {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-red-orange-start);\n}\n\n.Accordion__summary--toggleColor-teal {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-teal);\n}\n\n.Accordion__summary--toggleColor-yellow {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-yellow);\n}\n\n.Accordion__summary--default:not(.Accordion__summary--reversed-toggles) {\n padding-inline-end: var(--base-size-48);\n}\n\n.Accordion__summary--reversed-toggles {\n padding-inline-start: var(--base-size-48);\n}\n\n.Accordion__content,\n.Accordion__content p,\n.Accordion__content span:not(.Accordion__summary-toggle),\n.Accordion__content ul,\n.Accordion__content ol {\n color: var(--brand-color-text-muted);\n font-family: var(--brand-fontStack-sansSerif);\n font-weight: var(--brand-text-weight-200);\n font-size: var(--brand-text-size-200);\n line-height: var(--brand-text-lineHeight-200);\n}\n\n.Accordion__content {\n --brand-Accordion-content-offset: 0px; /* we reference this in JS */\n overflow: hidden;\n max-height: 0;\n transition: max-height var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n position: relative;\n}\n\n.Accordion__content-inner {\n transform: translateY(calc(-1 * var(--brand-Accordion-content-offset)));\n opacity: 0;\n transition: opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n}\n\n.Accordion--default > .Accordion__content {\n --brand-Accordion-content-offset: calc(var(--base-size-24) - var(--base-size-6)); /* we reference this in JS */\n top: calc(var(--base-size-4) * -1);\n}\n\n.Accordion__summary--default + .Accordion__content > .Accordion__content-inner::before {\n content: '';\n display: block;\n block-size: var(--base-size-12);\n}\n\n.Accordion__content-inner::after {\n content: '';\n display: block;\n}\n\n[data-color-mode='dark'] .Accordion__content {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: auto;\n}\n\n.Accordion__content p:not(:first-child) {\n margin-block-start: var(--base-size-16);\n}\n\n.Accordion__content a {\n color: var(--brand-InlineLink-color-rest);\n position: relative;\n text-decoration: underline;\n text-decoration-color: var(--brand-InlineLink-color-rest);\n text-decoration-thickness: var(--brand-borderWidth-thin);\n text-underline-position: under;\n transition: var(--brand-InlineLink-transition-timing) text-decoration;\n}\n\n.Accordion__content a:hover {\n text-decoration-thickness: var(--brand-borderWidth-thick);\n}\n\n.Accordion__content a,\n.Accordion__content a > span {\n font-weight: inherit;\n color: var(--brand-InlineLink-color-rest);\n}\n\n.Accordion__content a:active,\n.Accordion__content a:active > span {\n color: var(--brand-InlineLink-color-pressed);\n}\n\ndetails[open] > .Accordion__content {\n max-height: var(--brand-Accordion-content-height);\n position: relative;\n z-index: 0;\n}\n\ndetails[open].Accordion--disableAnimation > .Accordion__content {\n max-height: none;\n}\n\ndetails[open] > .Accordion__content > .Accordion__content-inner {\n opacity: 1;\n}\n\ndetails.Accordion--closing > .Accordion__content {\n max-height: 0;\n}\n\ndetails.Accordion--closing > .Accordion__content > .Accordion__content-inner {\n opacity: 0;\n}\n\n.Accordion__summary--default + .Accordion__content {\n margin-block-start: 0;\n}\n\ndetails[open] > .Accordion__summary--default + .Accordion__content {\n margin-block-start: 0;\n}\n\ndetails.Accordion--closing > .Accordion__summary--default + .Accordion__content {\n margin-block-start: 0;\n}\n\ndetails.Accordion--closing > .Accordion__summary .Accordion__summary-toggleIcon {\n transform: rotate(0deg);\n}\n\ndetails[open] > .Accordion__summary--reversed-toggles + .Accordion__content {\n padding-inline-start: var(--base-size-48);\n}\n\n/* Medium breakpoint and up */\n@media screen and (min-width: 48rem) {\n .Accordion__summary {\n gap: var(--base-size-40);\n }\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n .Accordion,\n .Accordion::before,\n .Accordion::after,\n .Accordion * {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"Accordion.module.js","names":[],"sources":["../../src/Accordion/Accordion.module.css"],"sourcesContent":[".Accordion {\n --brand-Accordion-content-height: 0px;\n\n box-sizing: border-box;\n position: relative;\n}\n\n.Accordion--disableAnimation::after,\n.Accordion--disableAnimation .Accordion__summary-toggleIcon,\n.Accordion--disableAnimation > .Accordion__content,\n.Accordion--disableAnimation > .Accordion__content > .Accordion__content-inner {\n transition: none;\n}\n\n.Accordion--default {\n border-bottom: var(--brand-borderWidth-thin) solid var(--brand-Accordion-border-color-default);\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__summary {\n background-color: var(--brand-color-canvas-subtle);\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n padding-block: var(--base-size-20);\n padding-inline: var(--base-size-20);\n gap: 0;\n justify-content: flex-start;\n align-items: center;\n}\n\n.Accordion__summary--emphasis::before {\n content: '';\n display: block;\n width: calc(var(--base-size-8) - 1px);\n height: var(--base-size-12);\n flex-shrink: 0;\n margin-inline-end: var(--base-size-12);\n background-color: var(--brand-Accordion-indicator-idle);\n}\n\n.Accordion__summary--emphasis:hover::before {\n background-color: var(--brand-Accordion-indicator-hover);\n}\n\ndetails[open] > .Accordion__summary--emphasis::before {\n background-color: var(--brand-Accordion-indicator-active);\n}\n\n.Accordion__summary--emphasis :is(h3, h4, h5, h6) {\n font-family: var(--brand-fontStack-monospace);\n font-size: var(--brand-text-size-100);\n font-weight: var(--brand-text-weight-500);\n line-height: var(--brand-text-lineHeight-100);\n letter-spacing: 0.15px;\n text-transform: uppercase;\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion)\n + .Accordion--emphasis:not(.Accordion .Accordion)\n > .Accordion__summary {\n border-block-start: none;\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__content {\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__content > .Accordion__content-inner {\n padding-block-start: var(--base-size-12);\n padding-inline: var(--base-size-20);\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__content > .Accordion__content-inner::after {\n block-size: var(--base-size-12);\n}\n\n.Accordion--emphasis .Accordion--default:last-child {\n border-bottom: none;\n}\n\n.Accordion--emphasis .Accordion--default:last-child::after {\n display: none;\n}\n\n.Accordion--default::after {\n content: '';\n background-color: var(--brand-Accordion-border-color-default);\n height: var(--brand-borderWidth-thin);\n transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide),\n transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n transform: scaleY(0);\n transform-origin: 50% 100%;\n width: 100%;\n position: absolute;\n bottom: 0;\n left: 0;\n}\n\n.Accordion--default:hover::after,\ndetails[open].Accordion--default::after {\n background-color: var(--brand-color-accent-primary);\n transform: scaleY(1);\n}\n\n.Accordion__summary {\n cursor: pointer;\n padding: var(--base-size-24) 0;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.Accordion__summary--reversed-toggles {\n padding-inline-start: var(--base-size-48);\n}\n\n.Accordion__summary::-webkit-details-marker {\n display: none;\n}\n\n.Accordion__summary:focus-visible {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n}\n\n/* When open, move focus ring to the details element to wrap summary + content as one unit */\ndetails[open].Accordion:has(> summary:focus-visible) {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\ndetails[open].Accordion > .Accordion__summary:focus-visible {\n outline: none;\n}\n\n.Accordion__summary-toggle {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--base-size-24);\n width: var(--base-size-24);\n color: var(--brand-color-text-emphasized);\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.Accordion__summary:not(.Accordion__summary--reversed-toggles) .Accordion__summary-toggle {\n right: 0;\n}\n\n.Accordion__summary--emphasis .Accordion__summary-toggle {\n position: static;\n transform: none;\n order: 1;\n margin-inline-start: auto;\n color: var(--brand-color-text-default);\n}\n\n.Accordion__summary--reversed-toggles .Accordion__summary-toggle {\n left: 0;\n}\n\n.Accordion__summary--default .Accordion__summary-toggle {\n color: var(--brand-Accordion-toggle-color-start, var(--brand-color-text-emphasized));\n}\n\n.Accordion__summary-toggleIcon {\n transform-origin: 50% 50%;\n transition: transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n}\n\ndetails[open] > .Accordion__summary .Accordion__summary-toggleIcon {\n transform: rotate(-180deg);\n}\n\n.Accordion__summary--toggleColor-default {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-default);\n}\n\n.Accordion__summary--toggleColor-blue {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-blue);\n}\n\n.Accordion__summary--toggleColor-blue-purple {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-blue-purple-start);\n}\n\n.Accordion__summary--toggleColor-coral {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-coral);\n}\n\n.Accordion__summary--toggleColor-green {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-green);\n}\n\n.Accordion__summary--toggleColor-green-blue {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-green-blue-start);\n}\n\n.Accordion__summary--toggleColor-gray {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-gray);\n}\n\n.Accordion__summary--toggleColor-indigo {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-indigo);\n}\n\n.Accordion__summary--toggleColor-lemon {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-lemon);\n}\n\n.Accordion__summary--toggleColor-lime {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-lime);\n}\n\n.Accordion__summary--toggleColor-orange {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-orange);\n}\n\n.Accordion__summary--toggleColor-pink {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-pink);\n}\n\n.Accordion__summary--toggleColor-pink-blue {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-pink-blue-start);\n}\n\n.Accordion__summary--toggleColor-purple {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-purple);\n}\n\n.Accordion__summary--toggleColor-purple-red {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-purple-red-start);\n}\n\n.Accordion__summary--toggleColor-red {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-red);\n}\n\n.Accordion__summary--toggleColor-red-orange {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-red-orange-start);\n}\n\n.Accordion__summary--toggleColor-teal {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-teal);\n}\n\n.Accordion__summary--toggleColor-yellow {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-yellow);\n}\n\n.Accordion__summary--default:not(.Accordion__summary--reversed-toggles) {\n padding-inline-end: var(--base-size-48);\n}\n\n.Accordion__summary--reversed-toggles {\n padding-inline-start: var(--base-size-48);\n}\n\n.Accordion__content,\n.Accordion__content p,\n.Accordion__content span:not(.Accordion__summary-toggle),\n.Accordion__content ul,\n.Accordion__content ol {\n color: var(--brand-color-text-muted);\n font-family: var(--brand-fontStack-sansSerif);\n font-weight: var(--brand-text-weight-200);\n font-size: var(--brand-text-size-200);\n line-height: var(--brand-text-lineHeight-200);\n}\n\n.Accordion__content {\n overflow: hidden;\n max-height: 0;\n transition: max-height var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n position: relative;\n}\n\n.Accordion__content-inner {\n opacity: 0;\n transition: opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n}\n\n.Accordion--default > .Accordion__content {\n top: calc(var(--base-size-2) - var(--base-size-24));\n}\n\n.Accordion__summary--default + .Accordion__content > .Accordion__content-inner::before {\n content: '';\n display: block;\n block-size: var(--base-size-12);\n}\n\n.Accordion__content-inner::after {\n content: '';\n display: block;\n}\n\n[data-color-mode='dark'] .Accordion__content {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: auto;\n}\n\n.Accordion__content p:not(:first-child) {\n margin-block-start: var(--base-size-16);\n}\n\n.Accordion__content a {\n color: var(--brand-InlineLink-color-rest);\n position: relative;\n text-decoration: underline;\n text-decoration-color: var(--brand-InlineLink-color-rest);\n text-decoration-thickness: var(--brand-borderWidth-thin);\n text-underline-position: under;\n transition: var(--brand-InlineLink-transition-timing) text-decoration;\n}\n\n.Accordion__content a:hover {\n text-decoration-thickness: var(--brand-borderWidth-thick);\n}\n\n.Accordion__content a,\n.Accordion__content a > span {\n font-weight: inherit;\n color: var(--brand-InlineLink-color-rest);\n}\n\n.Accordion__content a:active,\n.Accordion__content a:active > span {\n color: var(--brand-InlineLink-color-pressed);\n}\n\ndetails[open] > .Accordion__content {\n max-height: var(--brand-Accordion-content-height);\n position: relative;\n z-index: 0;\n}\n\ndetails[open].Accordion--disableAnimation > .Accordion__content {\n max-height: none;\n}\n\ndetails[open] > .Accordion__content > .Accordion__content-inner {\n opacity: 1;\n}\n\ndetails.Accordion--closing > .Accordion__content {\n max-height: 0;\n}\n\ndetails.Accordion--closing > .Accordion__content > .Accordion__content-inner {\n opacity: 0;\n}\n\n.Accordion__summary--default + .Accordion__content {\n margin-block-start: 0;\n}\n\ndetails[open] > .Accordion__summary--default + .Accordion__content {\n margin-block-start: 0;\n}\n\ndetails.Accordion--closing > .Accordion__summary--default + .Accordion__content {\n margin-block-start: 0;\n}\n\ndetails.Accordion--closing > .Accordion__summary .Accordion__summary-toggleIcon {\n transform: rotate(0deg);\n}\n\ndetails[open] > .Accordion__summary--reversed-toggles + .Accordion__content {\n padding-inline-start: var(--base-size-48);\n}\n\n/* Medium breakpoint and up */\n@media screen and (min-width: 48rem) {\n .Accordion__summary {\n gap: var(--base-size-40);\n }\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n .Accordion,\n .Accordion::before,\n .Accordion::after,\n .Accordion * {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.Primer_Brand__Button-module__Button___scH9Z{appearance:none;-webkit-user-select:none;user-select:none;vertical-align:middle;border-radius:var(--base-size-6);cursor:pointer;border:solid var(--brand-borderWidth-thin) transparent;box-sizing:border-box;justify-content:center;align-items:center;gap:var(--brand-control-medium-gap);background:0 0;-webkit-text-decoration:none;text-decoration:none;transition:background-color .2s,border-color .2s;display:inline-flex}.Primer_Brand__Button-module__Button___scH9Z:where(button){font:inherit}.Primer_Brand__Button-module__Button___scH9Z:hover{-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__Button-module__Button___scH9Z:focus-visible{outline:4px solid var(--brand-color-focus);outline-offset:2px;transition:none}.Primer_Brand__Button-module__Button--disabled___IHZ7f,.Primer_Brand__Button-module__Button--disabled___IHZ7f:hover,.Primer_Brand__Button-module__Button--disabled___IHZ7f:focus{cursor:not-allowed}.Primer_Brand__Button-module__Button--size-small___zQrEw .Primer_Brand__Button-module__Button__text___ED0bX{display:flex}.Primer_Brand__Button-module__Button__text___ED0bX{position:relative}.Primer_Brand__Button-module__Button--label___qrkyz{font-family:var(--brand-body-fontFamily);font-style:normal;font-weight:var(--base-text-weight-medium);text-align:center}.Primer_Brand__Button-module__Button__icon-visual____qybb{height:var(--base-size-16);fill:currentColor;align-self:center;width:auto;display:flex}.Primer_Brand__Button-module__Button__trailing-visual___5i3xR,.Primer_Brand__Button-module__Button__leading-visual___jjtTe{display:flex}.Primer_Brand__Button-module__Button-arrow___F4HtG{margin-inline-start:calc(var(--base-size-8) * -1);margin-inline-end:calc(var(--base-size-4) * -1)}.Primer_Brand__Button-module__Button--primary___MSbnU{color:var(--brand-button-primary-fgColor-rest);background-color:var(--brand-button-primary-bgColor-rest)}.Primer_Brand__Button-module__Button--size-small___zQrEw.Primer_Brand__Button-module__Button--primary___MSbnU{border-width:var(--brand-borderWidth-thin)}.Primer_Brand__Button-module__Button--primary___MSbnU:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):not([aria-expanded=true]):hover{background-color:var(--brand-button-primary-bgColor-hover)}.Primer_Brand__Button-module__Button--primary___MSbnU:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):active,.Primer_Brand__Button-module__Button--primary___MSbnU[aria-expanded=true]{background:var(--brand-button-primary-bgColor-active);border-color:var(--brand-button-primary-borderColor-active)}.Primer_Brand__Button-module__Button--label-primary___QX1u5{color:var(--brand-button-primary-fgColor-rest)}.Primer_Brand__Button-module__Button--primary___MSbnU:disabled,.Primer_Brand__Button-module__Button--primary___MSbnU[aria-disabled=true],.Primer_Brand__Button-module__Button--primary___MSbnU.Primer_Brand__Button-module__Button--disabled___IHZ7f{background-color:var(--brand-button-primary-bgColor-disabled)}.Primer_Brand__Button-module__Button--primary___MSbnU:disabled .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--primary___MSbnU[aria-disabled=true] .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--primary___MSbnU.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--primary___MSbnU:disabled .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--primary___MSbnU[aria-disabled=true] .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--primary___MSbnU.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--label-primary___QX1u5.Primer_Brand__Button-module__Button-label--disabled___yMoDr{color:var(--brand-button-primary-fgColor-disabled)}.Primer_Brand__Button-module__Button--secondary___gHnw_{background-color:var(--brand-button-secondary-bgColor-rest);border-color:var(--brand-button-secondary-borderColor-rest);color:var(--brand-button-secondary-fgColor-rest);-webkit-backdrop-filter:blur(var(--base-size-20));backdrop-filter:blur(var(--base-size-20))}.Primer_Brand__Button-module__Button--secondary___gHnw_:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):not([aria-expanded=true]):hover{background-color:var(--brand-button-secondary-bgColor-hover);border-color:var(--brand-button-secondary-borderColor-hover)}.Primer_Brand__Button-module__Button--secondary___gHnw_:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):active,.Primer_Brand__Button-module__Button--secondary___gHnw_[aria-expanded=true]{background-color:var(--brand-button-secondary-bgColor-active);border-color:var(--brand-button-secondary-borderColor-active)}.Primer_Brand__Button-module__Button--secondary___gHnw_:disabled{border-color:var(--brand-button-secondary-fgColor-disabled)}.Primer_Brand__Button-module__Button--secondary___gHnw_:disabled .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--secondary___gHnw_[aria-disabled=true] .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--secondary___gHnw_.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--secondary___gHnw_:disabled .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--secondary___gHnw_[aria-disabled=true] .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--secondary___gHnw_.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--label-secondary___eJ0_a.Primer_Brand__Button-module__Button-label--disabled___yMoDr{color:var(--brand-button-secondary-fgColor-disabled)}.Primer_Brand__Button-module__Button--subtle___F7pEE{background-color:var(--brand-button-subtle-bgColor-rest);border-width:var(--brand-borderWidth-thin);border-color:var(--brand-button-subtle-borderColor-rest);color:var(--brand-color-text-default);-webkit-backdrop-filter:blur(var(--base-size-20));backdrop-filter:blur(var(--base-size-20))}.Primer_Brand__Button-module__Button--subtle___F7pEE:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):not([aria-expanded=true]):hover{background-color:var(--brand-button-subtle-bgColor-hover);border-color:var(--brand-button-subtle-borderColor-hover)}.Primer_Brand__Button-module__Button--subtle___F7pEE:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):active,.Primer_Brand__Button-module__Button--subtle___F7pEE[aria-expanded=true]{background-color:var(--brand-button-subtle-bgColor-active);border-color:var(--brand-button-subtle-borderColor-active)}.Primer_Brand__Button-module__Button--label-subtle___8ndWH{color:var(--brand-button-subtle-fgColor-rest)}.Primer_Brand__Button-module__Button--subtle___F7pEE:disabled .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--subtle___F7pEE[aria-disabled=true] .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--subtle___F7pEE.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--subtle___F7pEE:disabled .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--subtle___F7pEE[aria-disabled=true] .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--subtle___F7pEE.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--label-subtle___8ndWH.Primer_Brand__Button-module__Button-label--disabled___yMoDr{color:var(--brand-button-subtle-fgColor-disabled)}.Primer_Brand__Button-module__Button--size-small___zQrEw{min-height:var(--brand-control-small-size);padding-inline:var(--brand-control-small-paddingInline-normal)}.Primer_Brand__Button-module__Button--size-medium___KFmzx{min-height:var(--brand-control-medium-size);padding:var(--brand-control-medium-paddingBlock-condensed) var(--base-size-20)}.Primer_Brand__Button-module__Button--size-large___J6UCI{min-height:var(--brand-control-large-size);padding:var(--brand-control-large-paddingBlock-condensed) var(--brand-control-large-paddingInline-spacious)}.Primer_Brand__Button-module__Button--size-large___J6UCI .Primer_Brand__Button-module__Button__icon-visual____qybb,.Primer_Brand__Button-module__Button--size-large___J6UCI .Primer_Brand__Button-module__Button-arrow___F4HtG{height:var(--base-size-20);width:var(--base-size-20)}.Primer_Brand__Button-module__Button--label-medium___ClmeR{font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200);letter-spacing:.01rem}.Primer_Brand__Button-module__Button--label-large___UDxqS{font-size:var(--brand-text-subhead-size-large);line-height:var(--brand-text-subhead-lineHeight-large)}.Primer_Brand__Button-module__Button--block___kCYDx{width:100%}@media (forced-colors:active){.Primer_Brand__Button-module__Button--disabled___IHZ7f{outline-color:graytext}.Primer_Brand__Button-module__Button--label___qrkyz.Primer_Brand__Button-module__Button-label--disabled___yMoDr{color:graytext}}@media (prefers-reduced-motion:reduce){.Primer_Brand__Button-module__Button___scH9Z,.Primer_Brand__Button-module__Button___scH9Z:before,.Primer_Brand__Button-module__Button___scH9Z:after,.Primer_Brand__Button-module__Button___scH9Z *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import './Button.module-
|
|
1
|
+
import './Button.module-9oHHqqnx.css';//#region src/Button/Button.module.css
|
|
2
2
|
var e = "Primer_Brand__Button-module__Button___scH9Z", t = "Primer_Brand__Button-module__Button__text___ED0bX", n = {
|
|
3
3
|
Button: e,
|
|
4
4
|
"Button--disabled": "Primer_Brand__Button-module__Button--disabled___IHZ7f",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.module.js","names":[],"sources":["../../src/Button/Button.module.css"],"sourcesContent":[".Button {\n appearance: none;\n user-select: none;\n vertical-align: middle;\n align-items: center;\n justify-content: center;\n transition: background-color 0.2s, border-color 0.2s;\n text-decoration: none;\n border-radius: var(--base-size-6);\n cursor: pointer;\n border: solid var(--brand-borderWidth-thin) transparent;\n background: none;\n box-sizing: border-box;\n display: inline-flex;\n gap: var(--brand-control-medium-gap);\n}\n\n.Button:hover {\n text-decoration: none;\n}\n\n.Button:focus-visible {\n transition: none;\n outline: 4px solid var(--brand-color-focus);\n outline-offset: 2px;\n}\n\n.Button--disabled,\n.Button--disabled:hover,\n.Button--disabled:focus {\n cursor: not-allowed;\n}\n\n.Button--size-small .Button__text {\n display: flex;\n}\n\n.Button__text {\n position: relative;\n}\n\n.Button--label {\n font-family: var(--brand-body-fontFamily);\n font-style: normal;\n font-weight: var(--base-text-weight-medium);\n text-align: center;\n}\n\n.Button__icon-visual {\n display: flex;\n align-self: center;\n height: var(--base-size-16);\n width: auto;\n fill: currentcolor;\n}\n\n.Button__trailing-visual,\n.Button__leading-visual {\n display: flex;\n}\n\n/* optically adjust arrow to align with the end (right) padding */\n/* reduce gap between label and arrow */\n.Button-arrow {\n margin-inline-end: calc(var(--base-size-4) * -1);\n margin-inline-start: calc(var(--base-size-8) * -1);\n}\n\n/* primary */\n\n.Button--primary {\n color: var(--brand-button-primary-fgColor-rest);\n background-color: var(--brand-button-primary-bgColor-rest);\n}\n\n.Button--size-small.Button--primary {\n border-width: var(--brand-borderWidth-thin);\n}\n\n.Button--primary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n background-color: var(--brand-button-primary-bgColor-hover);\n}\n\n.Button--primary:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--primary[aria-expanded='true'] {\n background: var(--brand-button-primary-bgColor-active);\n border-color: var(--brand-button-primary-borderColor-active);\n}\n\n.Button--label-primary {\n color: var(--brand-button-primary-fgColor-rest);\n}\n\n.Button--primary:disabled,\n.Button--primary[aria-disabled='true'],\n.Button--primary.Button--disabled {\n background-color: var(--brand-button-primary-bgColor-disabled);\n}\n\n.Button--primary:disabled .Button-arrow--disabled,\n.Button--primary[aria-disabled='true'] .Button-arrow--disabled,\n.Button--primary.Button--disabled .Button-arrow--disabled,\n.Button--primary:disabled .Button__icon-visual--disabled,\n.Button--primary[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--primary.Button--disabled .Button__icon-visual--disabled,\n.Button--label-primary.Button-label--disabled {\n color: var(--brand-button-primary-fgColor-disabled);\n}\n\n/* secondary */\n\n.Button--secondary {\n background-color: var(--brand-button-secondary-bgColor-rest);\n border-color: var(--brand-button-secondary-borderColor-rest);\n color: var(--brand-button-secondary-fgColor-rest);\n backdrop-filter: blur(var(--base-size-20));\n}\n\n.Button--secondary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n background-color: var(--brand-button-secondary-bgColor-hover);\n border-color: var(--brand-button-secondary-borderColor-hover);\n}\n\n.Button--secondary:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--secondary[aria-expanded='true'] {\n background-color: var(--brand-button-secondary-bgColor-active);\n border-color: var(--brand-button-secondary-borderColor-active);\n}\n\n.Button--secondary:disabled {\n border-color: var(--brand-button-secondary-fgColor-disabled);\n}\n\n.Button--secondary:disabled .Button-arrow--disabled,\n.Button--secondary[aria-disabled='true'] .Button-arrow--disabled,\n.Button--secondary.Button--disabled .Button-arrow--disabled,\n.Button--secondary:disabled .Button__icon-visual--disabled,\n.Button--secondary[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--secondary.Button--disabled .Button__icon-visual--disabled,\n.Button--label-secondary.Button-label--disabled {\n color: var(--brand-button-secondary-fgColor-disabled);\n}\n\n/* subtle */\n\n.Button--subtle {\n background-color: var(--brand-button-subtle-bgColor-rest);\n border-width: var(--brand-borderWidth-thin);\n border-color: var(--brand-button-subtle-borderColor-rest);\n color: var(--brand-color-text-default);\n backdrop-filter: blur(var(--base-size-20));\n}\n\n.Button--subtle:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n background-color: var(--brand-button-subtle-bgColor-hover);\n border-color: var(--brand-button-subtle-borderColor-hover);\n}\n\n.Button--subtle:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--subtle[aria-expanded='true'] {\n background-color: var(--brand-button-subtle-bgColor-active);\n border-color: var(--brand-button-subtle-borderColor-active);\n}\n\n.Button--label-subtle {\n color: var(--brand-button-subtle-fgColor-rest);\n}\n\n.Button--subtle:disabled .Button-arrow--disabled,\n.Button--subtle[aria-disabled='true'] .Button-arrow--disabled,\n.Button--subtle.Button--disabled .Button-arrow--disabled,\n.Button--subtle:disabled .Button__icon-visual--disabled,\n.Button--subtle[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--subtle.Button--disabled .Button__icon-visual--disabled,\n.Button--label-subtle.Button-label--disabled {\n color: var(--brand-button-subtle-fgColor-disabled);\n}\n\n/* size */\n\n.Button--size-small {\n min-height: var(--brand-control-small-size);\n padding-inline: var(--brand-control-small-paddingInline-normal);\n}\n\n.Button--size-medium {\n min-height: var(--brand-control-medium-size);\n padding: var(--brand-control-medium-paddingBlock-condensed) var(--base-size-20);\n}\n\n.Button--size-large {\n min-height: var(--brand-control-large-size);\n padding: var(--brand-control-large-paddingBlock-condensed) var(--brand-control-large-paddingInline-spacious);\n}\n\n.Button--size-large .Button__icon-visual,\n.Button--size-large .Button-arrow {\n height: var(--base-size-20);\n width: var(--base-size-20);\n}\n\n.Button--label-medium {\n font-size: var(--brand-text-size-200);\n line-height: var(--brand-text-lineHeight-200);\n letter-spacing: 0.01rem;\n}\n\n.Button--label-large {\n font-size: var(--brand-text-subhead-size-large);\n line-height: var(--brand-text-subhead-lineHeight-large);\n}\n\n.Button--block {\n width: 100%;\n}\n\n@media (forced-colors: active) {\n .Button--disabled {\n outline-color: GrayText;\n }\n\n /* Indicates disabled state in WHCM */\n .Button--label.Button-label--disabled {\n color: GrayText;\n }\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n .Button,\n .Button::before,\n .Button::after,\n .Button * {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"Button.module.js","names":[],"sources":["../../src/Button/Button.module.css"],"sourcesContent":[".Button {\n appearance: none;\n user-select: none;\n vertical-align: middle;\n align-items: center;\n justify-content: center;\n transition: background-color 0.2s, border-color 0.2s;\n text-decoration: none;\n border-radius: var(--base-size-6);\n cursor: pointer;\n border: solid var(--brand-borderWidth-thin) transparent;\n background: none;\n box-sizing: border-box;\n display: inline-flex;\n gap: var(--brand-control-medium-gap);\n}\n\n.Button:where(button) {\n font: inherit;\n}\n\n.Button:hover {\n text-decoration: none;\n}\n\n.Button:focus-visible {\n transition: none;\n outline: 4px solid var(--brand-color-focus);\n outline-offset: 2px;\n}\n\n.Button--disabled,\n.Button--disabled:hover,\n.Button--disabled:focus {\n cursor: not-allowed;\n}\n\n.Button--size-small .Button__text {\n display: flex;\n}\n\n.Button__text {\n position: relative;\n}\n\n.Button--label {\n font-family: var(--brand-body-fontFamily);\n font-style: normal;\n font-weight: var(--base-text-weight-medium);\n text-align: center;\n}\n\n.Button__icon-visual {\n display: flex;\n align-self: center;\n height: var(--base-size-16);\n width: auto;\n fill: currentcolor;\n}\n\n.Button__trailing-visual,\n.Button__leading-visual {\n display: flex;\n}\n\n/* optically adjust arrow to align with the end (right) padding */\n/* reduce gap between label and arrow */\n.Button-arrow {\n margin-inline-end: calc(var(--base-size-4) * -1);\n margin-inline-start: calc(var(--base-size-8) * -1);\n}\n\n/* primary */\n\n.Button--primary {\n color: var(--brand-button-primary-fgColor-rest);\n background-color: var(--brand-button-primary-bgColor-rest);\n}\n\n.Button--size-small.Button--primary {\n border-width: var(--brand-borderWidth-thin);\n}\n\n.Button--primary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n background-color: var(--brand-button-primary-bgColor-hover);\n}\n\n.Button--primary:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--primary[aria-expanded='true'] {\n background: var(--brand-button-primary-bgColor-active);\n border-color: var(--brand-button-primary-borderColor-active);\n}\n\n.Button--label-primary {\n color: var(--brand-button-primary-fgColor-rest);\n}\n\n.Button--primary:disabled,\n.Button--primary[aria-disabled='true'],\n.Button--primary.Button--disabled {\n background-color: var(--brand-button-primary-bgColor-disabled);\n}\n\n.Button--primary:disabled .Button-arrow--disabled,\n.Button--primary[aria-disabled='true'] .Button-arrow--disabled,\n.Button--primary.Button--disabled .Button-arrow--disabled,\n.Button--primary:disabled .Button__icon-visual--disabled,\n.Button--primary[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--primary.Button--disabled .Button__icon-visual--disabled,\n.Button--label-primary.Button-label--disabled {\n color: var(--brand-button-primary-fgColor-disabled);\n}\n\n/* secondary */\n\n.Button--secondary {\n background-color: var(--brand-button-secondary-bgColor-rest);\n border-color: var(--brand-button-secondary-borderColor-rest);\n color: var(--brand-button-secondary-fgColor-rest);\n backdrop-filter: blur(var(--base-size-20));\n}\n\n.Button--secondary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n background-color: var(--brand-button-secondary-bgColor-hover);\n border-color: var(--brand-button-secondary-borderColor-hover);\n}\n\n.Button--secondary:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--secondary[aria-expanded='true'] {\n background-color: var(--brand-button-secondary-bgColor-active);\n border-color: var(--brand-button-secondary-borderColor-active);\n}\n\n.Button--secondary:disabled {\n border-color: var(--brand-button-secondary-fgColor-disabled);\n}\n\n.Button--secondary:disabled .Button-arrow--disabled,\n.Button--secondary[aria-disabled='true'] .Button-arrow--disabled,\n.Button--secondary.Button--disabled .Button-arrow--disabled,\n.Button--secondary:disabled .Button__icon-visual--disabled,\n.Button--secondary[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--secondary.Button--disabled .Button__icon-visual--disabled,\n.Button--label-secondary.Button-label--disabled {\n color: var(--brand-button-secondary-fgColor-disabled);\n}\n\n/* subtle */\n\n.Button--subtle {\n background-color: var(--brand-button-subtle-bgColor-rest);\n border-width: var(--brand-borderWidth-thin);\n border-color: var(--brand-button-subtle-borderColor-rest);\n color: var(--brand-color-text-default);\n backdrop-filter: blur(var(--base-size-20));\n}\n\n.Button--subtle:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n background-color: var(--brand-button-subtle-bgColor-hover);\n border-color: var(--brand-button-subtle-borderColor-hover);\n}\n\n.Button--subtle:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--subtle[aria-expanded='true'] {\n background-color: var(--brand-button-subtle-bgColor-active);\n border-color: var(--brand-button-subtle-borderColor-active);\n}\n\n.Button--label-subtle {\n color: var(--brand-button-subtle-fgColor-rest);\n}\n\n.Button--subtle:disabled .Button-arrow--disabled,\n.Button--subtle[aria-disabled='true'] .Button-arrow--disabled,\n.Button--subtle.Button--disabled .Button-arrow--disabled,\n.Button--subtle:disabled .Button__icon-visual--disabled,\n.Button--subtle[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--subtle.Button--disabled .Button__icon-visual--disabled,\n.Button--label-subtle.Button-label--disabled {\n color: var(--brand-button-subtle-fgColor-disabled);\n}\n\n/* size */\n\n.Button--size-small {\n min-height: var(--brand-control-small-size);\n padding-inline: var(--brand-control-small-paddingInline-normal);\n}\n\n.Button--size-medium {\n min-height: var(--brand-control-medium-size);\n padding: var(--brand-control-medium-paddingBlock-condensed) var(--base-size-20);\n}\n\n.Button--size-large {\n min-height: var(--brand-control-large-size);\n padding: var(--brand-control-large-paddingBlock-condensed) var(--brand-control-large-paddingInline-spacious);\n}\n\n.Button--size-large .Button__icon-visual,\n.Button--size-large .Button-arrow {\n height: var(--base-size-20);\n width: var(--base-size-20);\n}\n\n.Button--label-medium {\n font-size: var(--brand-text-size-200);\n line-height: var(--brand-text-lineHeight-200);\n letter-spacing: 0.01rem;\n}\n\n.Button--label-large {\n font-size: var(--brand-text-subhead-size-large);\n line-height: var(--brand-text-subhead-lineHeight-large);\n}\n\n.Button--block {\n width: 100%;\n}\n\n@media (forced-colors: active) {\n .Button--disabled {\n outline-color: GrayText;\n }\n\n /* Indicates disabled state in WHCM */\n .Button--label.Button-label--disabled {\n color: GrayText;\n }\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n .Button,\n .Button::before,\n .Button::after,\n .Button * {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.Primer_Brand__IDE-module__IDE__inner___NnTQJ{--brand-IDE-lineNumber-width:45px;background:var(--brand-IDE-default-bgColor);border:var(--brand-borderWidth-thin) solid var(--brand-IDE-borderColor)}.Primer_Brand__IDE-module__IDE--glass___kIHmW{-webkit-backdrop-filter:blur(var(--base-size-12));backdrop-filter:blur(var(--base-size-12))}.Primer_Brand__IDE-module__IDE--glass___kIHmW .Primer_Brand__IDE-module__IDE__inner___NnTQJ{background:var(--brand-IDE-glass-bgColor-rest);border-color:#0000!important}.Primer_Brand__IDE-module__IDE__main___U46Bi{width:100%;height:100%;display:flex}.Primer_Brand__IDE-module__IDE--glass___kIHmW .Primer_Brand__IDE-module__IDE__main___U46Bi{height:var(--brand-IDE-height)}.Primer_Brand__IDE-module__IDE--default___1AD3a .Primer_Brand__IDE-module__IDE__main___U46Bi{padding-top:var(--base-size-32)}.Primer_Brand__IDE-module__IDE__inner___NnTQJ{width:100%;height:var(--brand-IDE-height);margin:calc(var(--base-size-12) - 2px) auto;border-radius:var(--brand-borderRadius-large);position:relative;overflow:hidden}.Primer_Brand__IDE-module__IDE__Chat___FjTgp{grid-gap:var(--base-size-16);gap:var(--base-size-16);color:var(--brand-color-text-default);flex-direction:column;grid-area:pane;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.Primer_Brand__IDE-module__IDE--glass___kIHmW .Primer_Brand__IDE-module__IDE__Chat___FjTgp{background:var(--brand-IDE-glass-chat-bgColor)}.Primer_Brand__IDE-module__IDE--full-exp___eJnjX .Primer_Brand__IDE-module__IDE__Chat___FjTgp{min-width:300px;max-width:450px}@media screen and (width<=63.24rem){.Primer_Brand__IDE-module__IDE--full-exp___eJnjX .Primer_Brand__IDE-module__IDE__Chat___FjTgp{display:none}}.Primer_Brand__IDE-module__IDE__Chat-wrapper___OBbrc{display:contents}.Primer_Brand__IDE-module__IDE__Chat-message-user___tz2Ml{gap:var(--base-size-8);align-items:center;display:inline-flex}.Primer_Brand__IDE-module__IDE__Chat-messages___aZ1pR{scrollbar-width:thin;scrollbar-color:var(--brand-IDE-scrollBar-fgColor) var(--brand-IDE-scrollBar-bgColor);height:calc(100% - 78px);overflow-y:scroll}.Primer_Brand__IDE-module__IDE__Chat-messages___aZ1pR::-webkit-scrollbar{width:var(--base-size-12)}.Primer_Brand__IDE-module__IDE__Chat-messages___aZ1pR::-webkit-scrollbar-track{background:var(--brand-IDE-scrollBar-bgColor)}.Primer_Brand__IDE-module__IDE__Chat-messages___aZ1pR::-webkit-scrollbar-thumb{background-color:var(--brand-IDE-scrollBar-fgColor);border-radius:var(--base-size-20);border:var(--brand-borderRadius-small) solid var(--brand-IDE-scrollBar-bgColor)}.Primer_Brand__IDE-module__IDE__Chat-input-area___b5cea{bottom:var(--base-size-16);width:100%;padding:0 var(--base-size-20);opacity:.5;position:absolute}.Primer_Brand__IDE-module__IDE__Chat-input___zqxIs{border-color:var(--brand-color-border-default);background:var(--brand-IDE-default-bgColor)!important;color:var(--brand-color-text-muted)!important;-webkit-text-fill-color:var(--brand-color-text-muted)!important}.Primer_Brand__IDE-module__IDE__Chat-input-area___b5cea svg{fill:var(--brand-color-text-muted)}.Primer_Brand__IDE-module__IDE__Chat-message-content___cKmYo{margin-top:var(--base-size-16)}.Primer_Brand__IDE-module__IDE__Chat-message-snippet___0DOoF{background-color:var(--brand-IDE-default-editor-bgColor);overflow-x:hidden}.Primer_Brand__IDE-module__IDE__Chat-message___mpKSJ{font-family:var(--brand-fontStack-sansSerif);font-size:var(--base-size-16);border-bottom:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding:var(--base-size-20);opacity:0;transform:translateY(var(--brand-animation-variant-slideInDown-distance));transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default), transform var(--brand-animation-duration-default) var(--brand-animation-easing-default)}.Primer_Brand__IDE-module__IDE__Chat-message--visible___t7sQR{opacity:1;transform:translateY(0)}.Primer_Brand__IDE-module__IDE__Chat-message--faded___Zj1bF{opacity:.5}.Primer_Brand__IDE-module__IDE__Chat-message___mpKSJ pre{border:var(--brand-borderWidth-thick) solid var(--brand-color-border-default);padding:var(--base-size-16);border-radius:var(--brand-borderRadius-large);font-family:var(--brand-fontStack-monospace);font-size:calc(var(--base-size-12) + 2px)!important}.Primer_Brand__IDE-module__IDE__Editor___Shd_o{flex-direction:column;grid-area:editor;width:100%;height:100%;display:flex}.Primer_Brand__IDE-module__IDE--default___1AD3a .Primer_Brand__IDE-module__IDE__Editor___Shd_o{width:100%;padding-left:var(--base-size-20)}.Primer_Brand__IDE-module__IDE__Editor-tabs___iGJJ2{background:var(--brand-IDE-default-editor-tabs-bgColor);display:inline-flex;overflow-x:auto}.Primer_Brand__IDE-module__IDE--default___1AD3a .Primer_Brand__IDE-module__IDE__Editor-tabs___iGJJ2{background:var(--brand-IDE-default-editor-tabs-bgColor)}.Primer_Brand__IDE-module__IDE--glass___kIHmW .Primer_Brand__IDE-module__IDE__Editor-tabs___iGJJ2{background:var(--brand-IDE-glass-editor-tabs-bgColor)}.Primer_Brand__IDE-module__IDE__Editor-tab___dJvu_{padding:var(--base-size-8) var(--base-size-12);align-items:center;gap:var(--base-size-4);font:inherit;font-family:var(--brand-fontStack-monospace);font-size:calc(var(--base-size-12) + 2px);color:var(--brand-color-text-muted);cursor:pointer;transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);opacity:1;border:none;flex-shrink:0;display:flex}.Primer_Brand__IDE-module__IDE--default___1AD3a .Primer_Brand__IDE-module__IDE__Editor-tab___dJvu_{background:var(--brand-IDE-default-editor-tab-bgColor-rest)}.Primer_Brand__IDE-module__IDE--glass___kIHmW .Primer_Brand__IDE-module__IDE__Editor-tab___dJvu_{background:var(--brand-IDE-glass-editor-tab-bgColor-rest)}.Primer_Brand__IDE-module__IDE__Editor-tab--active___gdbpw{color:var(--brand-color-text-default);border-top:var(--brand-borderWidth-thin) solid var(--brand-IDE-default-editor-tab-borderColor);z-index:1}.Primer_Brand__IDE-module__IDE--default___1AD3a .Primer_Brand__IDE-module__IDE__Editor-tab--active___gdbpw{background:var(--brand-IDE-default-editor-tab-bgColor-active)}.Primer_Brand__IDE-module__IDE--glass___kIHmW .Primer_Brand__IDE-module__IDE__Editor-tab___dJvu_{color:var(--brand-color-text-muted);background:0 0}.Primer_Brand__IDE-module__IDE--glass___kIHmW .Primer_Brand__IDE-module__IDE__Editor-tab--active___gdbpw{color:var(--brand-color-text-default);background:var(--brand-IDE-glass-editor-tab-bgColor-active)}.Primer_Brand__IDE-module__IDE--full-exp___eJnjX.Primer_Brand__IDE-module__IDE--glass___kIHmW .Primer_Brand__IDE-module__IDE__Editor-tab--active___gdbpw{background:var(--brand-IDE-default-editor-bgColor)}.Primer_Brand__IDE-module__IDE__Editor-tab___dJvu_:hover{color:var(--brand-color-text-default)}.Primer_Brand__IDE-module__IDE__Editor-tab___dJvu_[disabled]{cursor:not-allowed;opacity:.7;color:var(--brand-color-text-muted)!important}.Primer_Brand__IDE-module__IDE__Editor-tab-close-icon___thmFu{width:var(--base-size-12);height:var(--base-size-12);fill:var(--brand-color-text-muted);margin-inline-start:var(--base-size-4)}img.Primer_Brand__IDE-module__IDE__Editor-tab-icon___AlDCB{width:var(--base-size-16);height:var(--base-size-16);filter:grayscale(10%)}.Primer_Brand__IDE-module__IDE__Editor-tab___dJvu_:hover .Primer_Brand__IDE-module__IDE__Editor-tab-close-icon___thmFu{fill:var(--brand-color-text-default)}.Primer_Brand__IDE-module__IDE__Editor-content___wdsHt{height:100%;padding-top:var(--base-size-16);overflow-x:auto}.Primer_Brand__IDE-module__IDE--default___1AD3a .Primer_Brand__IDE-module__IDE__Editor-content___wdsHt{background:var(--brand-IDE-default-editor-bgColor)}.Primer_Brand__IDE-module__IDE--glass___kIHmW .Primer_Brand__IDE-module__IDE__Editor-content___wdsHt{background:var(--brand-IDE-glass-editor-bgColor);border-bottom-left-radius:var(--brand-borderRadius-large)}.Primer_Brand__IDE-module__IDE--full-exp___eJnjX.Primer_Brand__IDE-module__IDE--glass___kIHmW .Primer_Brand__IDE-module__IDE__Editor-content___wdsHt{background:var(--brand-IDE-default-editor-bgColor)}.Primer_Brand__IDE-module__IDE__Editor-pane___33jFZ{margin:0}.Primer_Brand__IDE-module__IDE__Editor-content-wrapper___EW6zO{display:flex}.Primer_Brand__IDE-module__IDE__Editor-content-inner___D0mu_{flex:1}.Primer_Brand__IDE-module__IDE__Editor--small___8hPAZ .Primer_Brand__IDE-module__IDE__Editor-pane___33jFZ,.Primer_Brand__IDE-module__IDE__Editor--small___8hPAZ .Primer_Brand__IDE-module__IDE__Editor-lineNumbers___aOJoq{font-size:calc(var(--base-size-12) - 1px)!important;line-height:calc(var(--base-size-16) + 2px)!important}.Primer_Brand__IDE-module__IDE__Editor--medium___yVQ93 .Primer_Brand__IDE-module__IDE__Editor-pane___33jFZ,.Primer_Brand__IDE-module__IDE__Editor--medium___yVQ93 .Primer_Brand__IDE-module__IDE__Editor-lineNumbers___aOJoq{font-size:.875rem!important;line-height:19.9px!important}.Primer_Brand__IDE-module__IDE__Editor--large___CRKOS .Primer_Brand__IDE-module__IDE__Editor-pane___33jFZ,.Primer_Brand__IDE-module__IDE__Editor--large___CRKOS .Primer_Brand__IDE-module__IDE__Editor-lineNumbers___aOJoq{font-size:1.125rem!important;line-height:var(--base-size-24)!important}.Primer_Brand__IDE-module__IDE__Editor-pane--suggested___EODtb{margin-left:calc(-1 * var(--brand-IDE-lineNumber-width));background-color:var(--brand-IDE-autoSuggestLine-bgColor);border-left:var(--brand-borderWidth-thin) solid var(--brand-IDE-autoSuggest-borderColor);padding-left:calc(var(--base-size-64) - 1px)!important}.Primer_Brand__IDE-module__IDE__Editor-lineNumbers___aOJoq{z-index:1;font-family:var(--brand-fontStack-monospace);font-weight:var(--brand-text-weight-200);font-feature-settings:"liga" 0, "calt" 0;font-variation-settings:normal;letter-spacing:0;flex:0 0 var(--brand-IDE-lineNumber-width)}.Primer_Brand__IDE-module__IDE__Editor-lineNumber___PXF14{padding:0 var(--base-size-8);text-align:right;color:var(--brand-color-text-muted);-webkit-user-select:none;user-select:none;cursor:default;white-space:nowrap;text-overflow:ellipsis;display:block;position:relative;overflow:hidden}.Primer_Brand__IDE-module__IDE__Editor-lineNumber-text___VGyiL{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;text-align:right;vertical-align:middle;box-sizing:border-box;cursor:default;height:100%;display:inline-block;position:absolute}.Primer_Brand__IDE-module__IDE__Editor___Shd_o pre{color:var(--brand-color-text-default);font-family:var(--brand-fontStack-monospace);padding-left:calc(var(--base-size-64) - var(--brand-IDE-lineNumber-width))}pre.Primer_Brand__IDE-module__IDE__Chat-copilot-indicator___KGpK6{background-color:var(--brand-IDE-autoSuggest-bgColor);padding-left:0;padding:var(--base-size-8) var(--base-size-24);border-radius:var(--brand-borderRadius-small);gap:var(--base-size-16);margin:var(--base-size-4) 0 0 var(--base-size-16);display:inline-flex;box-shadow:-9px 10px 39px #00000040}.Primer_Brand__IDE-module__IDE__Chat-copilot-indicator-label___Ly0_c{color:var(--brand-IDE-autoSuggest-fgColor);fill:var(--brand-IDE-autoSuggest-fgColor)}.Primer_Brand__IDE-module__IDE__play-pause-button___z27k0{cursor:pointer;bottom:var(--base-size-16);right:var(--base-size-16);width:var(--base-size-48);height:var(--base-size-48);border-radius:var(--brand-borderRadius-full);background-color:var(--brand-IDE-playPauseControl-rest);transition:background-color var(--brand-animation-duration-faster);border:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex;position:absolute}.Primer_Brand__IDE-module__IDE__play-pause-button___z27k0:hover{background-color:var(--brand-IDE-playPauseControl-hover)}.Primer_Brand__IDE-module__IDE__play-pause-button___z27k0:focus-visible{outline:var(--base-size-4) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}.Primer_Brand__IDE-module__IDE__play-pause-button___z27k0 svg{width:var(--base-size-16);height:var(--base-size-16)}.Primer_Brand__IDE-module__IDE__play-pause-button___z27k0 path{fill:var(--brand-button-subtle-fgColor-rest)}.Primer_Brand__IDE-module__IDE--chat-only____CFK8 .Primer_Brand__IDE-module__IDE__Chat-input-area___b5cea{width:calc(100% - var(--base-size-64))}.Primer_Brand__IDE-module__IDE--chat-only____CFK8 .Primer_Brand__IDE-module__IDE__play-pause-button___z27k0{background-color:var(--brand-IDE-playPauseControl-rest)}.Primer_Brand__IDE-module__IDE--chat-only____CFK8 .Primer_Brand__IDE-module__IDE__play-pause-button___z27k0:hover{background-color:var(--brand-IDE-playPauseControl-hover)}@media (prefers-reduced-motion:reduce){.Primer_Brand__IDE-module__IDE___d_Ai4,.Primer_Brand__IDE-module__IDE___d_Ai4:before,.Primer_Brand__IDE-module__IDE___d_Ai4:after,.Primer_Brand__IDE-module__IDE___d_Ai4 *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
|
package/esm/IDE/IDE.module.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import './IDE.module-
|
|
1
|
+
import './IDE.module-CDu-F0lH.css';//#region src/IDE/IDE.module.css
|
|
2
2
|
var e = "Primer_Brand__IDE-module__IDE__inner___NnTQJ", t = "Primer_Brand__IDE-module__IDE__main___U46Bi", n = "Primer_Brand__IDE-module__IDE__Chat___FjTgp", r = "Primer_Brand__IDE-module__IDE__Editor___Shd_o", i = "Primer_Brand__IDE-module__IDE___d_Ai4", a = {
|
|
3
3
|
IDE__inner: e,
|
|
4
4
|
"IDE--glass": "Primer_Brand__IDE-module__IDE--glass___kIHmW",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IDE.module.js","names":[],"sources":["../../src/IDE/IDE.module.css"],"sourcesContent":[".IDE__inner {\n --brand-IDE-lineNumber-width: 45px;\n background: var(--brand-IDE-default-bgColor);\n border: var(--brand-borderWidth-thin) solid var(--brand-IDE-borderColor);\n}\n\n.IDE--glass {\n backdrop-filter: blur(var(--base-size-12));\n}\n\n.IDE--glass .IDE__inner {\n background: var(--brand-IDE-glass-bgColor-rest);\n border-color: transparent !important;\n}\n\n.IDE__main {\n display: flex;\n height: 100%;\n width: 100%;\n}\n\n.IDE--glass .IDE__main {\n height: var(--brand-IDE-height);\n}\n\n.IDE--default .IDE__main {\n padding-top: var(--base-size-32);\n}\n\n.IDE__inner {\n position: relative;\n width: 100%;\n height: var(--brand-IDE-height);\n margin: calc(var(--base-size-12) - 2px) auto;\n border-radius: var(--brand-borderRadius-large);\n overflow: hidden;\n}\n\n/**\n* Chat\n*/\n.IDE__Chat {\n display: grid;\n grid-area: pane;\n position: relative;\n display: flex;\n flex-direction: column;\n gap: var(--base-size-16);\n color: var(--brand-color-text-default);\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\n.IDE--glass .IDE__Chat {\n background: var(--brand-IDE-glass-chat-bgColor);\n}\n\n.IDE--full-exp .IDE__Chat {\n min-width: 300px;\n max-width: 450px;\n}\n\n@media screen and (max-width: 63.24rem) {\n .IDE--full-exp .IDE__Chat {\n display: none;\n }\n}\n\n.IDE__Chat-wrapper {\n display: contents;\n}\n\n.IDE__Chat-message-user {\n display: inline-flex;\n gap: var(--base-size-8);\n align-items: center;\n}\n\n.IDE__Chat-messages {\n overflow-y: scroll;\n height: calc(100% - 78px);\n}\n\n.IDE__Chat-messages {\n scrollbar-width: thin;\n scrollbar-color: var(--brand-IDE-scrollBar-fgColor) var(--brand-IDE-scrollBar-bgColor);\n}\n\n.IDE__Chat-messages::-webkit-scrollbar {\n width: var(--base-size-12);\n}\n\n.IDE__Chat-messages::-webkit-scrollbar-track {\n background: var(--brand-IDE-scrollBar-bgColor);\n}\n\n.IDE__Chat-messages::-webkit-scrollbar-thumb {\n background-color: var(--brand-IDE-scrollBar-fgColor);\n border-radius: var(--base-size-20);\n border: var(--brand-borderRadius-small) solid var(--brand-IDE-scrollBar-bgColor);\n}\n\n.IDE__Chat-input-area {\n position: absolute;\n bottom: var(--base-size-16);\n width: 100%;\n padding: 0 var(--base-size-20);\n opacity: 0.5;\n}\n\n.IDE__Chat-input {\n background: var(--brand-IDE-default-bgColor) !important;\n color: var(--brand-color-text-muted) !important;\n -webkit-text-fill-color: var(--brand-color-text-muted) !important;\n border-color: var(--brand-color-border-default);\n}\n\n.IDE__Chat-input-area svg {\n fill: var(--brand-color-text-muted);\n}\n\n.IDE__Chat-message-content {\n margin-top: var(--base-size-16);\n}\n\n.IDE__Chat-message-snippet {\n background-color: var(--brand-IDE-default-editor-bgColor);\n overflow-x: hidden;\n}\n\n.IDE__Chat-message {\n font-family: var(--brand-fontStack-sansSerif);\n font-size: var(--base-size-16);\n border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n padding: var(--base-size-20);\n\n opacity: 0;\n transform: translateY(var(--brand-animation-variant-slideInDown-distance));\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.IDE__Chat-message--visible {\n opacity: 1;\n transform: translateY(0);\n}\n\n.IDE__Chat-message--faded {\n opacity: 0.5;\n}\n\n.IDE__Chat-message pre {\n border: var(--brand-borderWidth-thick) solid var(--brand-color-border-default);\n padding: var(--base-size-16);\n border-radius: var(--brand-borderRadius-large);\n font-family: var(--brand-fontStack-monospace);\n font-size: calc(var(--base-size-12) + 2px) !important; /* workaround dotcom specificity */\n}\n\n/**\n* Editor\n*/\n\n.IDE__Editor {\n grid-area: editor;\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n}\n\n.IDE--default .IDE__Editor {\n width: 100%;\n padding-left: var(--base-size-20);\n}\n\n.IDE__Editor-tabs {\n overflow-x: auto;\n display: inline-flex;\n background: var(--brand-IDE-default-editor-tabs-bgColor);\n}\n\n.IDE--default .IDE__Editor-tabs {\n background: var(--brand-IDE-default-editor-tabs-bgColor);\n}\n\n.IDE--glass .IDE__Editor-tabs {\n background: var(--brand-IDE-glass-editor-tabs-bgColor);\n}\n\n.IDE__Editor-tab {\n flex-shrink: 0;\n display: flex;\n padding: var(--base-size-8) var(--base-size-12);\n align-items: center;\n gap: var(--base-size-4);\n font-family: var(--brand-fontStack-monospace);\n font-size: calc(var(--base-size-12) + 2px);\n color: var(--brand-color-text-muted);\n cursor: pointer;\n border: none;\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n opacity: 1;\n}\n\n.IDE--default .IDE__Editor-tab {\n background: var(--brand-IDE-default-editor-tab-bgColor-rest);\n}\n\n.IDE--glass .IDE__Editor-tab {\n background: var(--brand-IDE-glass-editor-tab-bgColor-rest);\n}\n\n.IDE__Editor-tab--active {\n color: var(--brand-color-text-default);\n border-top: var(--brand-borderWidth-thin) solid var(--brand-IDE-default-editor-tab-borderColor);\n z-index: 1;\n}\n\n.IDE--default .IDE__Editor-tab--active {\n background: var(--brand-IDE-default-editor-tab-bgColor-active);\n}\n\n.IDE--glass .IDE__Editor-tab {\n background: transparent;\n color: var(--brand-color-text-muted);\n}\n\n.IDE--glass .IDE__Editor-tab--active {\n color: var(--brand-color-text-default);\n background: var(--brand-IDE-glass-editor-tab-bgColor-active);\n}\n\n.IDE--full-exp.IDE--glass .IDE__Editor-tab--active {\n background: var(--brand-IDE-default-editor-bgColor);\n}\n\n.IDE__Editor-tab:hover {\n color: var(--brand-color-text-default);\n}\n\n.IDE__Editor-tab[disabled] {\n cursor: not-allowed;\n color: var(--brand-color-text-muted) !important;\n opacity: 0.7;\n}\n\n.IDE__Editor-tab-close-icon {\n width: var(--base-size-12);\n height: var(--base-size-12);\n margin-inline-start: var(--base-size-4);\n fill: var(--brand-color-text-muted);\n}\n\nimg.IDE__Editor-tab-icon {\n width: var(--base-size-16);\n height: var(--base-size-16);\n -webkit-filter: grayscale(10%);\n filter: grayscale(10%);\n}\n\n.IDE__Editor-tab:hover .IDE__Editor-tab-close-icon {\n fill: var(--brand-color-text-default);\n}\n\n.IDE__Editor-content {\n height: 100%;\n padding-top: var(--base-size-16);\n overflow-x: auto;\n}\n\n.IDE--default .IDE__Editor-content {\n background: var(--brand-IDE-default-editor-bgColor);\n}\n\n.IDE--glass .IDE__Editor-content {\n background: var(--brand-IDE-glass-editor-bgColor);\n border-bottom-left-radius: var(--brand-borderRadius-large);\n}\n\n.IDE--full-exp.IDE--glass .IDE__Editor-content {\n background: var(--brand-IDE-default-editor-bgColor);\n}\n\n.IDE__Editor-pane {\n margin: 0;\n}\n\n.IDE__Editor-content-wrapper {\n display: flex;\n}\n\n.IDE__Editor-content-inner {\n flex: 1;\n}\n\n.IDE__Editor--small .IDE__Editor-pane,\n.IDE__Editor--small .IDE__Editor-lineNumbers {\n font-size: calc(var(--base-size-12) - 1px) !important; /* workaround dotcom specificity */\n line-height: calc(var(--base-size-16) + 2px) !important; /* workaround dotcom specificity */\n}\n\n.IDE__Editor--medium .IDE__Editor-pane,\n.IDE__Editor--medium .IDE__Editor-lineNumbers {\n font-size: 0.875rem !important; /* workaround dotcom specificity */\n line-height: 19.9px !important; /* workaround dotcom specificity */\n}\n\n.IDE__Editor--large .IDE__Editor-pane,\n.IDE__Editor--large .IDE__Editor-lineNumbers {\n font-size: 1.125rem !important; /* workaround dotcom specificity */\n line-height: var(--base-size-24) !important; /* workaround dotcom specificity */\n}\n\n.IDE__Editor-pane--suggested {\n margin-left: calc(-1 * var(--brand-IDE-lineNumber-width));\n padding-left: calc(var(--base-size-64) - 1px) !important;\n background-color: var(--brand-IDE-autoSuggestLine-bgColor);\n border-left: var(--brand-borderWidth-thin) solid var(--brand-IDE-autoSuggest-borderColor);\n}\n\n.IDE__Editor-lineNumbers {\n z-index: 1;\n font-family: var(--brand-fontStack-monospace);\n font-weight: var(--brand-text-weight-200);\n font-feature-settings: 'liga' 0, 'calt' 0;\n font-variation-settings: normal;\n letter-spacing: 0;\n flex: 0 0 var(--brand-IDE-lineNumber-width);\n}\n\n.IDE__Editor-lineNumber {\n position: relative;\n display: block;\n padding: 0 var(--base-size-8);\n text-align: right;\n color: var(--brand-color-text-muted);\n user-select: none;\n cursor: default;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.IDE__Editor-lineNumber-text {\n font-variant-numeric: tabular-nums;\n position: absolute;\n text-align: right;\n display: inline-block;\n vertical-align: middle;\n box-sizing: border-box;\n cursor: default;\n height: 100%;\n}\n\n.IDE__Editor pre {\n color: var(--brand-color-text-default);\n font-family: var(--brand-fontStack-monospace);\n padding-left: calc(var(--base-size-64) - var(--brand-IDE-lineNumber-width));\n}\n\npre.IDE__Chat-copilot-indicator {\n background-color: var(--brand-IDE-autoSuggest-bgColor);\n padding-left: 0;\n display: inline-flex;\n padding: var(--base-size-8) var(--base-size-24);\n border-radius: var(--brand-borderRadius-small);\n gap: var(--base-size-16);\n margin: var(--base-size-4) 0 0 var(--base-size-16);\n\n box-shadow: -9px 10px 39px 0px rgba(0, 0, 0, 0.25);\n}\n\n.IDE__Chat-copilot-indicator-label {\n color: var(--brand-IDE-autoSuggest-fgColor);\n fill: var(--brand-IDE-autoSuggest-fgColor);\n}\n\n.IDE__play-pause-button {\n cursor: pointer;\n position: absolute;\n bottom: var(--base-size-16);\n right: var(--base-size-16);\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--base-size-48);\n height: var(--base-size-48);\n margin: 0;\n padding: 0;\n border: none;\n border-radius: var(--brand-borderRadius-full);\n background-color: var(--brand-IDE-playPauseControl-rest);\n transition: background-color var(--brand-animation-duration-faster);\n}\n\n.IDE__play-pause-button:hover {\n background-color: var(--brand-IDE-playPauseControl-hover);\n}\n\n.IDE__play-pause-button:focus-visible {\n outline: var(--base-size-4) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\n.IDE__play-pause-button svg {\n width: var(--base-size-16);\n height: var(--base-size-16);\n}\n\n.IDE__play-pause-button path {\n fill: var(--brand-button-subtle-fgColor-rest);\n}\n\n.IDE--chat-only .IDE__Chat-input-area {\n width: calc(100% - var(--base-size-64));\n}\n\n.IDE--chat-only .IDE__play-pause-button {\n background-color: var(--brand-IDE-playPauseControl-rest);\n}\n\n.IDE--chat-only .IDE__play-pause-button:hover {\n background-color: var(--brand-IDE-playPauseControl-hover);\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n .IDE,\n .IDE::before,\n .IDE::after,\n .IDE * {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"IDE.module.js","names":[],"sources":["../../src/IDE/IDE.module.css"],"sourcesContent":[".IDE__inner {\n --brand-IDE-lineNumber-width: 45px;\n background: var(--brand-IDE-default-bgColor);\n border: var(--brand-borderWidth-thin) solid var(--brand-IDE-borderColor);\n}\n\n.IDE--glass {\n backdrop-filter: blur(var(--base-size-12));\n}\n\n.IDE--glass .IDE__inner {\n background: var(--brand-IDE-glass-bgColor-rest);\n border-color: transparent !important;\n}\n\n.IDE__main {\n display: flex;\n height: 100%;\n width: 100%;\n}\n\n.IDE--glass .IDE__main {\n height: var(--brand-IDE-height);\n}\n\n.IDE--default .IDE__main {\n padding-top: var(--base-size-32);\n}\n\n.IDE__inner {\n position: relative;\n width: 100%;\n height: var(--brand-IDE-height);\n margin: calc(var(--base-size-12) - 2px) auto;\n border-radius: var(--brand-borderRadius-large);\n overflow: hidden;\n}\n\n/**\n* Chat\n*/\n.IDE__Chat {\n display: grid;\n grid-area: pane;\n position: relative;\n display: flex;\n flex-direction: column;\n gap: var(--base-size-16);\n color: var(--brand-color-text-default);\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\n.IDE--glass .IDE__Chat {\n background: var(--brand-IDE-glass-chat-bgColor);\n}\n\n.IDE--full-exp .IDE__Chat {\n min-width: 300px;\n max-width: 450px;\n}\n\n@media screen and (max-width: 63.24rem) {\n .IDE--full-exp .IDE__Chat {\n display: none;\n }\n}\n\n.IDE__Chat-wrapper {\n display: contents;\n}\n\n.IDE__Chat-message-user {\n display: inline-flex;\n gap: var(--base-size-8);\n align-items: center;\n}\n\n.IDE__Chat-messages {\n overflow-y: scroll;\n height: calc(100% - 78px);\n}\n\n.IDE__Chat-messages {\n scrollbar-width: thin;\n scrollbar-color: var(--brand-IDE-scrollBar-fgColor) var(--brand-IDE-scrollBar-bgColor);\n}\n\n.IDE__Chat-messages::-webkit-scrollbar {\n width: var(--base-size-12);\n}\n\n.IDE__Chat-messages::-webkit-scrollbar-track {\n background: var(--brand-IDE-scrollBar-bgColor);\n}\n\n.IDE__Chat-messages::-webkit-scrollbar-thumb {\n background-color: var(--brand-IDE-scrollBar-fgColor);\n border-radius: var(--base-size-20);\n border: var(--brand-borderRadius-small) solid var(--brand-IDE-scrollBar-bgColor);\n}\n\n.IDE__Chat-input-area {\n position: absolute;\n bottom: var(--base-size-16);\n width: 100%;\n padding: 0 var(--base-size-20);\n opacity: 0.5;\n}\n\n.IDE__Chat-input {\n background: var(--brand-IDE-default-bgColor) !important;\n color: var(--brand-color-text-muted) !important;\n -webkit-text-fill-color: var(--brand-color-text-muted) !important;\n border-color: var(--brand-color-border-default);\n}\n\n.IDE__Chat-input-area svg {\n fill: var(--brand-color-text-muted);\n}\n\n.IDE__Chat-message-content {\n margin-top: var(--base-size-16);\n}\n\n.IDE__Chat-message-snippet {\n background-color: var(--brand-IDE-default-editor-bgColor);\n overflow-x: hidden;\n}\n\n.IDE__Chat-message {\n font-family: var(--brand-fontStack-sansSerif);\n font-size: var(--base-size-16);\n border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n padding: var(--base-size-20);\n\n opacity: 0;\n transform: translateY(var(--brand-animation-variant-slideInDown-distance));\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.IDE__Chat-message--visible {\n opacity: 1;\n transform: translateY(0);\n}\n\n.IDE__Chat-message--faded {\n opacity: 0.5;\n}\n\n.IDE__Chat-message pre {\n border: var(--brand-borderWidth-thick) solid var(--brand-color-border-default);\n padding: var(--base-size-16);\n border-radius: var(--brand-borderRadius-large);\n font-family: var(--brand-fontStack-monospace);\n font-size: calc(var(--base-size-12) + 2px) !important; /* workaround dotcom specificity */\n}\n\n/**\n* Editor\n*/\n\n.IDE__Editor {\n grid-area: editor;\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n}\n\n.IDE--default .IDE__Editor {\n width: 100%;\n padding-left: var(--base-size-20);\n}\n\n.IDE__Editor-tabs {\n overflow-x: auto;\n display: inline-flex;\n background: var(--brand-IDE-default-editor-tabs-bgColor);\n}\n\n.IDE--default .IDE__Editor-tabs {\n background: var(--brand-IDE-default-editor-tabs-bgColor);\n}\n\n.IDE--glass .IDE__Editor-tabs {\n background: var(--brand-IDE-glass-editor-tabs-bgColor);\n}\n\n.IDE__Editor-tab {\n flex-shrink: 0;\n display: flex;\n padding: var(--base-size-8) var(--base-size-12);\n align-items: center;\n gap: var(--base-size-4);\n font: inherit;\n font-family: var(--brand-fontStack-monospace);\n font-size: calc(var(--base-size-12) + 2px);\n color: var(--brand-color-text-muted);\n cursor: pointer;\n border: none;\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n opacity: 1;\n}\n\n.IDE--default .IDE__Editor-tab {\n background: var(--brand-IDE-default-editor-tab-bgColor-rest);\n}\n\n.IDE--glass .IDE__Editor-tab {\n background: var(--brand-IDE-glass-editor-tab-bgColor-rest);\n}\n\n.IDE__Editor-tab--active {\n color: var(--brand-color-text-default);\n border-top: var(--brand-borderWidth-thin) solid var(--brand-IDE-default-editor-tab-borderColor);\n z-index: 1;\n}\n\n.IDE--default .IDE__Editor-tab--active {\n background: var(--brand-IDE-default-editor-tab-bgColor-active);\n}\n\n.IDE--glass .IDE__Editor-tab {\n background: transparent;\n color: var(--brand-color-text-muted);\n}\n\n.IDE--glass .IDE__Editor-tab--active {\n color: var(--brand-color-text-default);\n background: var(--brand-IDE-glass-editor-tab-bgColor-active);\n}\n\n.IDE--full-exp.IDE--glass .IDE__Editor-tab--active {\n background: var(--brand-IDE-default-editor-bgColor);\n}\n\n.IDE__Editor-tab:hover {\n color: var(--brand-color-text-default);\n}\n\n.IDE__Editor-tab[disabled] {\n cursor: not-allowed;\n color: var(--brand-color-text-muted) !important;\n opacity: 0.7;\n}\n\n.IDE__Editor-tab-close-icon {\n width: var(--base-size-12);\n height: var(--base-size-12);\n margin-inline-start: var(--base-size-4);\n fill: var(--brand-color-text-muted);\n}\n\nimg.IDE__Editor-tab-icon {\n width: var(--base-size-16);\n height: var(--base-size-16);\n -webkit-filter: grayscale(10%);\n filter: grayscale(10%);\n}\n\n.IDE__Editor-tab:hover .IDE__Editor-tab-close-icon {\n fill: var(--brand-color-text-default);\n}\n\n.IDE__Editor-content {\n height: 100%;\n padding-top: var(--base-size-16);\n overflow-x: auto;\n}\n\n.IDE--default .IDE__Editor-content {\n background: var(--brand-IDE-default-editor-bgColor);\n}\n\n.IDE--glass .IDE__Editor-content {\n background: var(--brand-IDE-glass-editor-bgColor);\n border-bottom-left-radius: var(--brand-borderRadius-large);\n}\n\n.IDE--full-exp.IDE--glass .IDE__Editor-content {\n background: var(--brand-IDE-default-editor-bgColor);\n}\n\n.IDE__Editor-pane {\n margin: 0;\n}\n\n.IDE__Editor-content-wrapper {\n display: flex;\n}\n\n.IDE__Editor-content-inner {\n flex: 1;\n}\n\n.IDE__Editor--small .IDE__Editor-pane,\n.IDE__Editor--small .IDE__Editor-lineNumbers {\n font-size: calc(var(--base-size-12) - 1px) !important; /* workaround dotcom specificity */\n line-height: calc(var(--base-size-16) + 2px) !important; /* workaround dotcom specificity */\n}\n\n.IDE__Editor--medium .IDE__Editor-pane,\n.IDE__Editor--medium .IDE__Editor-lineNumbers {\n font-size: 0.875rem !important; /* workaround dotcom specificity */\n line-height: 19.9px !important; /* workaround dotcom specificity */\n}\n\n.IDE__Editor--large .IDE__Editor-pane,\n.IDE__Editor--large .IDE__Editor-lineNumbers {\n font-size: 1.125rem !important; /* workaround dotcom specificity */\n line-height: var(--base-size-24) !important; /* workaround dotcom specificity */\n}\n\n.IDE__Editor-pane--suggested {\n margin-left: calc(-1 * var(--brand-IDE-lineNumber-width));\n padding-left: calc(var(--base-size-64) - 1px) !important;\n background-color: var(--brand-IDE-autoSuggestLine-bgColor);\n border-left: var(--brand-borderWidth-thin) solid var(--brand-IDE-autoSuggest-borderColor);\n}\n\n.IDE__Editor-lineNumbers {\n z-index: 1;\n font-family: var(--brand-fontStack-monospace);\n font-weight: var(--brand-text-weight-200);\n font-feature-settings: 'liga' 0, 'calt' 0;\n font-variation-settings: normal;\n letter-spacing: 0;\n flex: 0 0 var(--brand-IDE-lineNumber-width);\n}\n\n.IDE__Editor-lineNumber {\n position: relative;\n display: block;\n padding: 0 var(--base-size-8);\n text-align: right;\n color: var(--brand-color-text-muted);\n user-select: none;\n cursor: default;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.IDE__Editor-lineNumber-text {\n font-variant-numeric: tabular-nums;\n position: absolute;\n text-align: right;\n display: inline-block;\n vertical-align: middle;\n box-sizing: border-box;\n cursor: default;\n height: 100%;\n}\n\n.IDE__Editor pre {\n color: var(--brand-color-text-default);\n font-family: var(--brand-fontStack-monospace);\n padding-left: calc(var(--base-size-64) - var(--brand-IDE-lineNumber-width));\n}\n\npre.IDE__Chat-copilot-indicator {\n background-color: var(--brand-IDE-autoSuggest-bgColor);\n padding-left: 0;\n display: inline-flex;\n padding: var(--base-size-8) var(--base-size-24);\n border-radius: var(--brand-borderRadius-small);\n gap: var(--base-size-16);\n margin: var(--base-size-4) 0 0 var(--base-size-16);\n\n box-shadow: -9px 10px 39px 0px rgba(0, 0, 0, 0.25);\n}\n\n.IDE__Chat-copilot-indicator-label {\n color: var(--brand-IDE-autoSuggest-fgColor);\n fill: var(--brand-IDE-autoSuggest-fgColor);\n}\n\n.IDE__play-pause-button {\n cursor: pointer;\n position: absolute;\n bottom: var(--base-size-16);\n right: var(--base-size-16);\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--base-size-48);\n height: var(--base-size-48);\n margin: 0;\n padding: 0;\n border: none;\n border-radius: var(--brand-borderRadius-full);\n background-color: var(--brand-IDE-playPauseControl-rest);\n transition: background-color var(--brand-animation-duration-faster);\n}\n\n.IDE__play-pause-button:hover {\n background-color: var(--brand-IDE-playPauseControl-hover);\n}\n\n.IDE__play-pause-button:focus-visible {\n outline: var(--base-size-4) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\n.IDE__play-pause-button svg {\n width: var(--base-size-16);\n height: var(--base-size-16);\n}\n\n.IDE__play-pause-button path {\n fill: var(--brand-button-subtle-fgColor-rest);\n}\n\n.IDE--chat-only .IDE__Chat-input-area {\n width: calc(100% - var(--base-size-64));\n}\n\n.IDE--chat-only .IDE__play-pause-button {\n background-color: var(--brand-IDE-playPauseControl-rest);\n}\n\n.IDE--chat-only .IDE__play-pause-button:hover {\n background-color: var(--brand-IDE-playPauseControl-hover);\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n .IDE,\n .IDE::before,\n .IDE::after,\n .IDE * {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}
|
package/esm/MinimalFooter/{MinimalFooter.module-CGtOtT5r.css → MinimalFooter.module-BKn_6UZK.css}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
.Primer_Brand__MinimalFooter-module__MinimalFooter___xLq65{border-top:var(--brand-borderWidth-thick) solid var(--brand-footer-borderColor);background-color:var(--brand-footer-bg-color);position:relative}.Primer_Brand__MinimalFooter-module__MinimalFooter--withFootnotes___oUvH8{border-top:0}.Primer_Brand__MinimalFooter-module__MinimalFooter__container___mhY_8{max-width:1280px;max-width:var(--brand-footer-max-width,1280px);padding-inline:var(--base-size-20);margin-left:auto;margin-right:auto}@media screen and (width>=48rem){.Primer_Brand__MinimalFooter-module__MinimalFooter__container___mhY_8{padding-inline:var(--base-size-32)}}.Primer_Brand__MinimalFooter-module__MinimalFooter__terms___gwB2R{padding:var(--base-size-48) 0}.Primer_Brand__MinimalFooter-module__MinimalFooter__terms-item___VB5Sx{margin-bottom:var(--base-size-24)}.Primer_Brand__MinimalFooter-module__MinimalFooter__terms-item___VB5Sx sup{font-size:var(--base-size-12);vertical-align:super;margin-right:var(--base-size-4);display:inline-block}.Primer_Brand__MinimalFooter-module__MinimalFooter__terms-item___VB5Sx:last-child{margin-bottom:0}.Primer_Brand__MinimalFooter-module__MinimalFooter__top___UXzkJ{padding-top:var(--base-size-48);padding-bottom:var(--base-size-32);border-bottom:var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle)}.Primer_Brand__MinimalFooter-module__MinimalFooter__top-row____WR7L{grid-gap:var(--base-size-24);align-items:center;gap:var(--base-size-24);grid-template-columns:auto 1fr;display:grid}.Primer_Brand__MinimalFooter-module__MinimalFooter__top-actions___dz_zd{display:contents}.Primer_Brand__MinimalFooter-module__MinimalFooter__top-actions___dz_zd>.Primer_Brand__MinimalFooter-module__MinimalFooter__links___kwBz2{grid-area:2/1/auto/-1;justify-content:flex-start}.Primer_Brand__MinimalFooter-module__MinimalFooter__top-actions___dz_zd>.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop___fmxit{grid-area:1/2;justify-self:flex-end}.Primer_Brand__MinimalFooter-module__MinimalFooter__logo___rFLvw{color:var(--brand-color-text-default);display:inline-flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__logo___rFLvw>svg{width:var(--base-size-24);height:var(--base-size-24)}.Primer_Brand__MinimalFooter-module__MinimalFooter__bottom___oi9Jk{padding-top:var(--base-size-32);padding-bottom:var(--base-size-32)}@media screen and (width>=80rem){.Primer_Brand__MinimalFooter-module__MinimalFooter__top___UXzkJ{padding-top:var(--base-size-32)}.Primer_Brand__MinimalFooter-module__MinimalFooter__top-row____WR7L{justify-content:space-between;display:flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__top-actions___dz_zd{justify-content:flex-end;align-items:center;gap:var(--base-size-20);flex-wrap:wrap;flex:1;min-width:0;display:flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__top-actions___dz_zd>.Primer_Brand__MinimalFooter-module__MinimalFooter__links___kwBz2{justify-content:flex-end}.Primer_Brand__MinimalFooter-module__MinimalFooter__logo___rFLvw>svg{width:var(--base-size-32);height:var(--base-size-32)}}.Primer_Brand__MinimalFooter-module__MinimalFooter__section___W7x7a{min-width:0}.Primer_Brand__MinimalFooter-module__MinimalFooter__section--footnotes___9t40F{border-bottom:var(--brand-borderWidth-thick) solid var(--brand-footer-borderColor);background-color:var(--brand-color-canvas-default)}.Primer_Brand__MinimalFooter-module__MinimalFooter__section--center___K3_Ia>.Primer_Brand__MinimalFooter-module__MinimalFooter__container___mhY_8{padding-top:var(--base-size-32);padding-bottom:var(--base-size-32)}.Primer_Brand__MinimalFooter-module__MinimalFooter__section--center___K3_Ia+.Primer_Brand__MinimalFooter-module__MinimalFooter__section--bottom___HwSJJ{border-top:var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle)}.Primer_Brand__MinimalFooter-module__MinimalFooter__bottom-row___kcZck{align-items:flex-start;gap:var(--base-size-24);flex-direction:column;display:flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__social-links___0zKRs{justify-content:flex-start;align-items:center;gap:var(--base-size-16);margin:0;padding:0;list-style:none;display:flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__social-link___T5TF0{min-width:var(--base-size-24);min-height:var(--base-size-24);justify-content:center;align-items:center;display:flex;position:relative}.Primer_Brand__MinimalFooter-module__MinimalFooter__social-link___T5TF0:hover .Primer_Brand__MinimalFooter-module__MinimalFooter__social-icon___N1tDK,.Primer_Brand__MinimalFooter-module__MinimalFooter__social-link___T5TF0:focus-visible .Primer_Brand__MinimalFooter-module__MinimalFooter__social-icon___N1tDK{filter:var(--brand-footer-socialIcon-hoverFilter)}.Primer_Brand__MinimalFooter-module__MinimalFooter__social-icon___N1tDK{width:auto;height:auto;max-height:var(--base-size-20);filter:var(--brand-footer-socialIcon-restFilter);display:block}.Primer_Brand__MinimalFooter-module__MinimalFooter__copyright___qQ3QR{text-transform:uppercase;margin:0}.Primer_Brand__MinimalFooter-module__MinimalFooter__metaText___peNSx{font-size:var(--base-size-12)}.Primer_Brand__MinimalFooter-module__MinimalFooter__links___kwBz2{align-items:center;gap:var(--base-size-20);flex-wrap:wrap;display:flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__link___T4gI3{color:var(--brand-color-text-muted);cursor:pointer;text-transform:uppercase;background-color:#0000;border:0;align-self:center;padding:0;-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__MinimalFooter-module__MinimalFooter__link___T4gI3:hover{-webkit-text-decoration:underline;text-decoration:underline}@media screen and (width>=48rem){.Primer_Brand__MinimalFooter-module__MinimalFooter__social-links___0zKRs{gap:var(--base-size-20)}}@media screen and (width>=80rem){.Primer_Brand__MinimalFooter-module__MinimalFooter__bottom-row___kcZck{flex-direction:row;justify-content:space-between;align-items:center}}.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop___fmxit{appearance:none;color:var(--brand-color-text-default);cursor:pointer;background:0 0;border:0;padding:0;display:inline-flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop___fmxit:focus-visible{outline:var(--base-size-4) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop___fmxit:disabled,.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop___fmxit[aria-disabled=true]{cursor:not-allowed}.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop-content___umaLY{align-items:center;gap:var(--base-size-12);display:inline-flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop-icon___y85GZ{border:var(--brand-borderWidth-thin) solid var(--brand-footer-backToTop-borderColor-rest);border-radius:var(--base-size-6);background-color:var(--brand-footer-backToTop-bgColor-rest);min-width:var(--brand-footer-backToTop-minTarget);min-height:var(--brand-footer-backToTop-minTarget);transition:background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), border-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);justify-content:center;align-items:center;display:inline-flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop___fmxit:not([disabled]):not([aria-disabled=true]):hover .Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop-icon___y85GZ{border-color:var(--brand-footer-backToTop-borderColor-hover);background-color:var(--brand-footer-backToTop-bgColor-hover)}.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop___fmxit:not([disabled]):not([aria-disabled=true]):active .Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop-icon___y85GZ{border-color:var(--brand-footer-backToTop-borderColor-active);background-color:var(--brand-footer-backToTop-bgColor-active)}@media (prefers-reduced-motion:reduce){.Primer_Brand__MinimalFooter-module__MinimalFooter___xLq65,.Primer_Brand__MinimalFooter-module__MinimalFooter___xLq65:before,.Primer_Brand__MinimalFooter-module__MinimalFooter___xLq65:after,.Primer_Brand__MinimalFooter-module__MinimalFooter___xLq65 *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
|
|
1
|
+
.Primer_Brand__MinimalFooter-module__MinimalFooter___xLq65{border-top:var(--brand-borderWidth-thick) solid var(--brand-footer-borderColor);background-color:var(--brand-footer-bg-color);position:relative}.Primer_Brand__MinimalFooter-module__MinimalFooter--withFootnotes___oUvH8{border-top:0}.Primer_Brand__MinimalFooter-module__MinimalFooter__container___mhY_8{max-width:1280px;max-width:var(--brand-footer-max-width,1280px);padding-inline:var(--base-size-20);margin-left:auto;margin-right:auto}@media screen and (width>=48rem){.Primer_Brand__MinimalFooter-module__MinimalFooter__container___mhY_8{padding-inline:var(--base-size-32)}}.Primer_Brand__MinimalFooter-module__MinimalFooter__terms___gwB2R{padding:var(--base-size-48) 0}.Primer_Brand__MinimalFooter-module__MinimalFooter__terms-item___VB5Sx{margin-bottom:var(--base-size-24)}.Primer_Brand__MinimalFooter-module__MinimalFooter__terms-item___VB5Sx sup{font-size:var(--base-size-12);vertical-align:super;margin-right:var(--base-size-4);display:inline-block}.Primer_Brand__MinimalFooter-module__MinimalFooter__terms-item___VB5Sx:last-child{margin-bottom:0}.Primer_Brand__MinimalFooter-module__MinimalFooter__top___UXzkJ{padding-top:var(--base-size-48);padding-bottom:var(--base-size-32);border-bottom:var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle)}.Primer_Brand__MinimalFooter-module__MinimalFooter__top-row____WR7L{grid-gap:var(--base-size-24);align-items:center;gap:var(--base-size-24);grid-template-columns:auto 1fr;display:grid}.Primer_Brand__MinimalFooter-module__MinimalFooter__top-actions___dz_zd{display:contents}.Primer_Brand__MinimalFooter-module__MinimalFooter__top-actions___dz_zd>.Primer_Brand__MinimalFooter-module__MinimalFooter__links___kwBz2{grid-area:2/1/auto/-1;justify-content:flex-start}.Primer_Brand__MinimalFooter-module__MinimalFooter__top-actions___dz_zd>.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop___fmxit{grid-area:1/2;justify-self:flex-end}.Primer_Brand__MinimalFooter-module__MinimalFooter__logo___rFLvw{color:var(--brand-color-text-default);display:inline-flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__logo___rFLvw>svg{width:var(--base-size-24);height:var(--base-size-24)}.Primer_Brand__MinimalFooter-module__MinimalFooter__bottom___oi9Jk{padding-top:var(--base-size-32);padding-bottom:var(--base-size-32)}@media screen and (width>=80rem){.Primer_Brand__MinimalFooter-module__MinimalFooter__top___UXzkJ{padding-top:var(--base-size-32)}.Primer_Brand__MinimalFooter-module__MinimalFooter__top-row____WR7L{justify-content:space-between;display:flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__top-actions___dz_zd{justify-content:flex-end;align-items:center;gap:var(--base-size-20);flex-wrap:wrap;flex:1;min-width:0;display:flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__top-actions___dz_zd>.Primer_Brand__MinimalFooter-module__MinimalFooter__links___kwBz2{justify-content:flex-end}.Primer_Brand__MinimalFooter-module__MinimalFooter__logo___rFLvw>svg{width:var(--base-size-32);height:var(--base-size-32)}}.Primer_Brand__MinimalFooter-module__MinimalFooter__section___W7x7a{min-width:0}.Primer_Brand__MinimalFooter-module__MinimalFooter__section--footnotes___9t40F{border-bottom:var(--brand-borderWidth-thick) solid var(--brand-footer-borderColor);background-color:var(--brand-color-canvas-default)}.Primer_Brand__MinimalFooter-module__MinimalFooter__section--center___K3_Ia>.Primer_Brand__MinimalFooter-module__MinimalFooter__container___mhY_8{padding-top:var(--base-size-32);padding-bottom:var(--base-size-32)}.Primer_Brand__MinimalFooter-module__MinimalFooter__section--center___K3_Ia+.Primer_Brand__MinimalFooter-module__MinimalFooter__section--bottom___HwSJJ{border-top:var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle)}.Primer_Brand__MinimalFooter-module__MinimalFooter__bottom-row___kcZck{align-items:flex-start;gap:var(--base-size-24);flex-direction:column;display:flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__social-links___0zKRs{justify-content:flex-start;align-items:center;gap:var(--base-size-16);margin:0;padding:0;list-style:none;display:flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__social-link___T5TF0{min-width:var(--base-size-24);min-height:var(--base-size-24);justify-content:center;align-items:center;display:flex;position:relative}.Primer_Brand__MinimalFooter-module__MinimalFooter__social-link___T5TF0:hover .Primer_Brand__MinimalFooter-module__MinimalFooter__social-icon___N1tDK,.Primer_Brand__MinimalFooter-module__MinimalFooter__social-link___T5TF0:focus-visible .Primer_Brand__MinimalFooter-module__MinimalFooter__social-icon___N1tDK{filter:var(--brand-footer-socialIcon-hoverFilter)}.Primer_Brand__MinimalFooter-module__MinimalFooter__social-icon___N1tDK{width:auto;height:auto;max-height:var(--base-size-20);filter:var(--brand-footer-socialIcon-restFilter);display:block}.Primer_Brand__MinimalFooter-module__MinimalFooter__copyright___qQ3QR{text-transform:uppercase;margin:0}.Primer_Brand__MinimalFooter-module__MinimalFooter__metaText___peNSx{font-size:var(--base-size-12)}.Primer_Brand__MinimalFooter-module__MinimalFooter__links___kwBz2{align-items:center;gap:var(--base-size-20);flex-wrap:wrap;display:flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__link___T4gI3{color:var(--brand-color-text-muted);cursor:pointer;text-transform:uppercase;background-color:#0000;border:0;align-self:center;padding:0;-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__MinimalFooter-module__MinimalFooter__link___T4gI3:where(button){font:inherit}.Primer_Brand__MinimalFooter-module__MinimalFooter__link___T4gI3:hover{-webkit-text-decoration:underline;text-decoration:underline}@media screen and (width>=48rem){.Primer_Brand__MinimalFooter-module__MinimalFooter__social-links___0zKRs{gap:var(--base-size-20)}}@media screen and (width>=80rem){.Primer_Brand__MinimalFooter-module__MinimalFooter__bottom-row___kcZck{flex-direction:row;justify-content:space-between;align-items:center}}.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop___fmxit{appearance:none;font:inherit;color:var(--brand-color-text-default);cursor:pointer;background:0 0;border:0;padding:0;display:inline-flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop___fmxit:focus-visible{outline:var(--base-size-4) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop___fmxit:disabled,.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop___fmxit[aria-disabled=true]{cursor:not-allowed}.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop-content___umaLY{align-items:center;gap:var(--base-size-12);display:inline-flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop-icon___y85GZ{border:var(--brand-borderWidth-thin) solid var(--brand-footer-backToTop-borderColor-rest);border-radius:var(--base-size-6);background-color:var(--brand-footer-backToTop-bgColor-rest);min-width:var(--brand-footer-backToTop-minTarget);min-height:var(--brand-footer-backToTop-minTarget);transition:background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), border-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);justify-content:center;align-items:center;display:inline-flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop___fmxit:not([disabled]):not([aria-disabled=true]):hover .Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop-icon___y85GZ{border-color:var(--brand-footer-backToTop-borderColor-hover);background-color:var(--brand-footer-backToTop-bgColor-hover)}.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop___fmxit:not([disabled]):not([aria-disabled=true]):active .Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop-icon___y85GZ{border-color:var(--brand-footer-backToTop-borderColor-active);background-color:var(--brand-footer-backToTop-bgColor-active)}@media (prefers-reduced-motion:reduce){.Primer_Brand__MinimalFooter-module__MinimalFooter___xLq65,.Primer_Brand__MinimalFooter-module__MinimalFooter___xLq65:before,.Primer_Brand__MinimalFooter-module__MinimalFooter___xLq65:after,.Primer_Brand__MinimalFooter-module__MinimalFooter___xLq65 *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import './MinimalFooter.module-
|
|
1
|
+
import './MinimalFooter.module-BKn_6UZK.css';//#region src/MinimalFooter/MinimalFooter.module.css
|
|
2
2
|
var e = "Primer_Brand__MinimalFooter-module__MinimalFooter___xLq65", t = "Primer_Brand__MinimalFooter-module__MinimalFooter__container___mhY_8", n = "Primer_Brand__MinimalFooter-module__MinimalFooter__terms___gwB2R", r = "Primer_Brand__MinimalFooter-module__MinimalFooter__top___UXzkJ", i = "Primer_Brand__MinimalFooter-module__MinimalFooter__links___kwBz2", a = "Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop___fmxit", o = "Primer_Brand__MinimalFooter-module__MinimalFooter__logo___rFLvw", s = "Primer_Brand__MinimalFooter-module__MinimalFooter__bottom___oi9Jk", c = "Primer_Brand__MinimalFooter-module__MinimalFooter__section___W7x7a", l = "Primer_Brand__MinimalFooter-module__MinimalFooter__copyright___qQ3QR", u = "Primer_Brand__MinimalFooter-module__MinimalFooter__metaText___peNSx", d = "Primer_Brand__MinimalFooter-module__MinimalFooter__link___T4gI3", f = {
|
|
3
3
|
MinimalFooter: e,
|
|
4
4
|
"MinimalFooter--withFootnotes": "Primer_Brand__MinimalFooter-module__MinimalFooter--withFootnotes___oUvH8",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MinimalFooter.module.js","names":[],"sources":["../../src/MinimalFooter/MinimalFooter.module.css"],"sourcesContent":[".MinimalFooter {\n position: relative;\n border-top: var(--brand-borderWidth-thick) solid var(--brand-footer-borderColor);\n background-color: var(--brand-footer-bg-color);\n}\n\n.MinimalFooter--withFootnotes {\n border-top: 0;\n}\n\n/**\n * MinimalFooter shared styles\n */\n.MinimalFooter__container {\n max-width: var(--brand-footer-max-width, 1280px);\n padding-inline: var(--base-size-20);\n margin-right: auto;\n margin-left: auto;\n}\n\n@media screen and (min-width: 48rem) {\n .MinimalFooter__container {\n padding-inline: var(--base-size-32);\n }\n}\n\n/**\n * MinimalFooter terms section\n */\n.MinimalFooter__terms {\n padding: var(--base-size-48) 0;\n}\n\n.MinimalFooter__terms-item {\n margin-bottom: var(--base-size-24);\n}\n\n.MinimalFooter__terms-item sup {\n font-size: var(--base-size-12);\n vertical-align: super;\n display: inline-block;\n margin-right: var(--base-size-4);\n}\n\n.MinimalFooter__terms-item:last-child {\n margin-bottom: 0;\n}\n\n/**\n * MinimalFooter top section\n */\n.MinimalFooter__top {\n padding-top: var(--base-size-48);\n padding-bottom: var(--base-size-32);\n border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n}\n\n.MinimalFooter__top-row {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n gap: var(--base-size-24);\n}\n\n.MinimalFooter__top-actions {\n display: contents;\n}\n\n.MinimalFooter__top-actions > .MinimalFooter__links {\n grid-column: 1 / -1;\n grid-row: 2;\n justify-content: flex-start;\n}\n\n.MinimalFooter__top-actions > .MinimalFooter__backToTop {\n grid-column: 2;\n grid-row: 1;\n justify-self: flex-end;\n}\n\n.MinimalFooter__logo {\n display: inline-flex;\n color: var(--brand-color-text-default);\n}\n\n.MinimalFooter__logo > svg {\n width: var(--base-size-24);\n height: var(--base-size-24);\n}\n\n.MinimalFooter__bottom {\n padding-top: var(--base-size-32);\n padding-bottom: var(--base-size-32);\n}\n\n@media screen and (min-width: 80rem) {\n .MinimalFooter__top {\n padding-top: var(--base-size-32);\n }\n\n .MinimalFooter__top-row {\n display: flex;\n justify-content: space-between;\n }\n\n .MinimalFooter__top-actions {\n display: flex;\n flex: 1;\n flex-wrap: wrap;\n align-items: center;\n justify-content: flex-end;\n gap: var(--base-size-20);\n min-width: 0;\n }\n\n .MinimalFooter__top-actions > .MinimalFooter__links {\n justify-content: flex-end;\n }\n\n .MinimalFooter__logo > svg {\n width: var(--base-size-32);\n height: var(--base-size-32);\n }\n}\n\n.MinimalFooter__section {\n min-width: 0;\n}\n\n.MinimalFooter__section--footnotes {\n border-bottom: var(--brand-borderWidth-thick) solid var(--brand-footer-borderColor);\n background-color: var(--brand-color-canvas-default);\n}\n\n.MinimalFooter__section--center > .MinimalFooter__container {\n padding-top: var(--base-size-32);\n padding-bottom: var(--base-size-32);\n}\n\n.MinimalFooter__section--center + .MinimalFooter__section--bottom {\n border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n}\n\n/**\n * MinimalFooter bottom section\n */\n.MinimalFooter__bottom-row {\n display: flex;\n}\n\n.MinimalFooter__bottom-row {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--base-size-24);\n}\n\n.MinimalFooter__social-links {\n display: flex;\n padding: 0;\n margin: 0;\n list-style: none;\n justify-content: flex-start;\n align-items: center;\n gap: var(--base-size-16);\n}\n\n.MinimalFooter__social-link {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--base-size-24);\n min-height: var(--base-size-24);\n}\n\n.MinimalFooter__social-link:hover .MinimalFooter__social-icon,\n.MinimalFooter__social-link:focus-visible .MinimalFooter__social-icon {\n filter: var(--brand-footer-socialIcon-hoverFilter);\n}\n\n.MinimalFooter__social-icon {\n display: block;\n width: auto;\n height: auto;\n max-height: var(--base-size-20);\n filter: var(--brand-footer-socialIcon-restFilter);\n}\n\n.MinimalFooter__copyright {\n margin: 0;\n text-transform: uppercase;\n}\n\n/* Keep the size-100 text rhythm, but use the approved 12px size token for footer chrome. */\n.MinimalFooter__metaText {\n font-size: var(--base-size-12);\n}\n\n.MinimalFooter__links {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--base-size-20);\n}\n\n.MinimalFooter__link {\n align-self: center;\n color: var(--brand-color-text-muted);\n text-decoration: none;\n border: 0;\n background-color: transparent;\n cursor: pointer;\n padding: 0;\n text-transform: uppercase;\n}\n\n.MinimalFooter__link:hover {\n text-decoration: underline;\n}\n\n@media screen and (min-width: 48rem) {\n .MinimalFooter__social-links {\n gap: var(--base-size-20);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .MinimalFooter__bottom-row {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n }\n}\n\n.MinimalFooter__backToTop {\n appearance: none;\n display: inline-flex;\n padding: 0;\n border: 0;\n color: var(--brand-color-text-default);\n background: none;\n cursor: pointer;\n}\n\n.MinimalFooter__backToTop:focus-visible {\n outline: var(--base-size-4) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\n.MinimalFooter__backToTop:disabled,\n.MinimalFooter__backToTop[aria-disabled='true'] {\n cursor: not-allowed;\n}\n\n.MinimalFooter__backToTop-content {\n display: inline-flex;\n align-items: center;\n gap: var(--base-size-12);\n}\n\n.MinimalFooter__backToTop-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: var(--brand-borderWidth-thin) solid var(--brand-footer-backToTop-borderColor-rest);\n border-radius: var(--base-size-6);\n background-color: var(--brand-footer-backToTop-bgColor-rest);\n min-width: var(--brand-footer-backToTop-minTarget);\n min-height: var(--brand-footer-backToTop-minTarget);\n transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide),\n border-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n}\n\n.MinimalFooter__backToTop:not([disabled], [aria-disabled='true']):hover .MinimalFooter__backToTop-icon {\n border-color: var(--brand-footer-backToTop-borderColor-hover);\n background-color: var(--brand-footer-backToTop-bgColor-hover);\n}\n\n.MinimalFooter__backToTop:not([disabled], [aria-disabled='true']):active .MinimalFooter__backToTop-icon {\n border-color: var(--brand-footer-backToTop-borderColor-active);\n background-color: var(--brand-footer-backToTop-bgColor-active);\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n .MinimalFooter,\n .MinimalFooter::before,\n .MinimalFooter::after,\n .MinimalFooter * {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"MinimalFooter.module.js","names":[],"sources":["../../src/MinimalFooter/MinimalFooter.module.css"],"sourcesContent":[".MinimalFooter {\n position: relative;\n border-top: var(--brand-borderWidth-thick) solid var(--brand-footer-borderColor);\n background-color: var(--brand-footer-bg-color);\n}\n\n.MinimalFooter--withFootnotes {\n border-top: 0;\n}\n\n/**\n * MinimalFooter shared styles\n */\n.MinimalFooter__container {\n max-width: var(--brand-footer-max-width, 1280px);\n padding-inline: var(--base-size-20);\n margin-right: auto;\n margin-left: auto;\n}\n\n@media screen and (min-width: 48rem) {\n .MinimalFooter__container {\n padding-inline: var(--base-size-32);\n }\n}\n\n/**\n * MinimalFooter terms section\n */\n.MinimalFooter__terms {\n padding: var(--base-size-48) 0;\n}\n\n.MinimalFooter__terms-item {\n margin-bottom: var(--base-size-24);\n}\n\n.MinimalFooter__terms-item sup {\n font-size: var(--base-size-12);\n vertical-align: super;\n display: inline-block;\n margin-right: var(--base-size-4);\n}\n\n.MinimalFooter__terms-item:last-child {\n margin-bottom: 0;\n}\n\n/**\n * MinimalFooter top section\n */\n.MinimalFooter__top {\n padding-top: var(--base-size-48);\n padding-bottom: var(--base-size-32);\n border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n}\n\n.MinimalFooter__top-row {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n gap: var(--base-size-24);\n}\n\n.MinimalFooter__top-actions {\n display: contents;\n}\n\n.MinimalFooter__top-actions > .MinimalFooter__links {\n grid-column: 1 / -1;\n grid-row: 2;\n justify-content: flex-start;\n}\n\n.MinimalFooter__top-actions > .MinimalFooter__backToTop {\n grid-column: 2;\n grid-row: 1;\n justify-self: flex-end;\n}\n\n.MinimalFooter__logo {\n display: inline-flex;\n color: var(--brand-color-text-default);\n}\n\n.MinimalFooter__logo > svg {\n width: var(--base-size-24);\n height: var(--base-size-24);\n}\n\n.MinimalFooter__bottom {\n padding-top: var(--base-size-32);\n padding-bottom: var(--base-size-32);\n}\n\n@media screen and (min-width: 80rem) {\n .MinimalFooter__top {\n padding-top: var(--base-size-32);\n }\n\n .MinimalFooter__top-row {\n display: flex;\n justify-content: space-between;\n }\n\n .MinimalFooter__top-actions {\n display: flex;\n flex: 1;\n flex-wrap: wrap;\n align-items: center;\n justify-content: flex-end;\n gap: var(--base-size-20);\n min-width: 0;\n }\n\n .MinimalFooter__top-actions > .MinimalFooter__links {\n justify-content: flex-end;\n }\n\n .MinimalFooter__logo > svg {\n width: var(--base-size-32);\n height: var(--base-size-32);\n }\n}\n\n.MinimalFooter__section {\n min-width: 0;\n}\n\n.MinimalFooter__section--footnotes {\n border-bottom: var(--brand-borderWidth-thick) solid var(--brand-footer-borderColor);\n background-color: var(--brand-color-canvas-default);\n}\n\n.MinimalFooter__section--center > .MinimalFooter__container {\n padding-top: var(--base-size-32);\n padding-bottom: var(--base-size-32);\n}\n\n.MinimalFooter__section--center + .MinimalFooter__section--bottom {\n border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n}\n\n/**\n * MinimalFooter bottom section\n */\n.MinimalFooter__bottom-row {\n display: flex;\n}\n\n.MinimalFooter__bottom-row {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--base-size-24);\n}\n\n.MinimalFooter__social-links {\n display: flex;\n padding: 0;\n margin: 0;\n list-style: none;\n justify-content: flex-start;\n align-items: center;\n gap: var(--base-size-16);\n}\n\n.MinimalFooter__social-link {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--base-size-24);\n min-height: var(--base-size-24);\n}\n\n.MinimalFooter__social-link:hover .MinimalFooter__social-icon,\n.MinimalFooter__social-link:focus-visible .MinimalFooter__social-icon {\n filter: var(--brand-footer-socialIcon-hoverFilter);\n}\n\n.MinimalFooter__social-icon {\n display: block;\n width: auto;\n height: auto;\n max-height: var(--base-size-20);\n filter: var(--brand-footer-socialIcon-restFilter);\n}\n\n.MinimalFooter__copyright {\n margin: 0;\n text-transform: uppercase;\n}\n\n/* Keep the size-100 text rhythm, but use the approved 12px size token for footer chrome. */\n.MinimalFooter__metaText {\n font-size: var(--base-size-12);\n}\n\n.MinimalFooter__links {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--base-size-20);\n}\n\n.MinimalFooter__link {\n align-self: center;\n color: var(--brand-color-text-muted);\n text-decoration: none;\n border: 0;\n background-color: transparent;\n cursor: pointer;\n padding: 0;\n text-transform: uppercase;\n}\n\n.MinimalFooter__link:where(button) {\n font: inherit;\n}\n\n.MinimalFooter__link:hover {\n text-decoration: underline;\n}\n\n@media screen and (min-width: 48rem) {\n .MinimalFooter__social-links {\n gap: var(--base-size-20);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .MinimalFooter__bottom-row {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n }\n}\n\n.MinimalFooter__backToTop {\n appearance: none;\n font: inherit;\n display: inline-flex;\n padding: 0;\n border: 0;\n color: var(--brand-color-text-default);\n background: none;\n cursor: pointer;\n}\n\n.MinimalFooter__backToTop:focus-visible {\n outline: var(--base-size-4) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\n.MinimalFooter__backToTop:disabled,\n.MinimalFooter__backToTop[aria-disabled='true'] {\n cursor: not-allowed;\n}\n\n.MinimalFooter__backToTop-content {\n display: inline-flex;\n align-items: center;\n gap: var(--base-size-12);\n}\n\n.MinimalFooter__backToTop-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: var(--brand-borderWidth-thin) solid var(--brand-footer-backToTop-borderColor-rest);\n border-radius: var(--base-size-6);\n background-color: var(--brand-footer-backToTop-bgColor-rest);\n min-width: var(--brand-footer-backToTop-minTarget);\n min-height: var(--brand-footer-backToTop-minTarget);\n transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide),\n border-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n}\n\n.MinimalFooter__backToTop:not([disabled], [aria-disabled='true']):hover .MinimalFooter__backToTop-icon {\n border-color: var(--brand-footer-backToTop-borderColor-hover);\n background-color: var(--brand-footer-backToTop-bgColor-hover);\n}\n\n.MinimalFooter__backToTop:not([disabled], [aria-disabled='true']):active .MinimalFooter__backToTop-icon {\n border-color: var(--brand-footer-backToTop-borderColor-active);\n background-color: var(--brand-footer-backToTop-bgColor-active);\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n .MinimalFooter,\n .MinimalFooter::before,\n .MinimalFooter::after,\n .MinimalFooter * {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}
|
|
@@ -17,6 +17,7 @@ export type SubdomainNavBarMenuLabels = {
|
|
|
17
17
|
*/
|
|
18
18
|
overflowMenuLabel: string;
|
|
19
19
|
};
|
|
20
|
+
export type SubdomainNavBarVariant = 'default' | 'featured';
|
|
20
21
|
export type SubdomainNavBarProps = Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'title'> & {
|
|
21
22
|
/**
|
|
22
23
|
* Valid child elements are `SubdomainNavBar.Link`, `SubdomainNavBar.PrimaryAction`,
|
|
@@ -31,6 +32,10 @@ export type SubdomainNavBarProps = Omit<React.HTMLAttributes<HTMLElement>, 'chil
|
|
|
31
32
|
* Fill the maximum width of the parent container. Defaults to `false`.
|
|
32
33
|
*/
|
|
33
34
|
fullWidth?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Sets the navigation layout. Defaults to `default`.
|
|
37
|
+
*/
|
|
38
|
+
variant?: SubdomainNavBarVariant;
|
|
34
39
|
/**
|
|
35
40
|
* Optional React element rendered after the navigation links.
|
|
36
41
|
*/
|
|
@@ -173,6 +178,10 @@ export declare const SubdomainNavBar: React.ForwardRefExoticComponent<Omit<React
|
|
|
173
178
|
* Fill the maximum width of the parent container. Defaults to `false`.
|
|
174
179
|
*/
|
|
175
180
|
fullWidth?: boolean;
|
|
181
|
+
/**
|
|
182
|
+
* Sets the navigation layout. Defaults to `default`.
|
|
183
|
+
*/
|
|
184
|
+
variant?: SubdomainNavBarVariant;
|
|
176
185
|
/**
|
|
177
186
|
* Optional React element rendered after the navigation links.
|
|
178
187
|
*/
|