@primer/react-brand 0.68.0-rc.982c487b → 0.68.0-rc.b6d410ef
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/esm/Button/Button.js +1 -1
- package/esm/Button/Button.module-Byz3R1qi.css +1 -0
- package/esm/Button/Button.module.js +2 -2
- package/esm/Button/Button.module.js.map +1 -1
- package/esm/Hero/{Hero.module-b8OFm8Ci.css → Hero.module-DvYo_AtL.css} +1 -1
- package/esm/Hero/Hero.module.js +1 -1
- package/esm/Hero/Hero.module.js.map +1 -1
- package/esm/Icon/Icon.module-UyYnXhrw.css +1 -0
- package/esm/Icon/Icon.module.js +1 -1
- package/esm/Icon/Icon.module.js.map +1 -1
- package/esm/Stack/Stack.js +1 -1
- package/esm/forms/Checkbox/Checkbox.module-CtRGEfSq.css +1 -0
- package/esm/forms/Checkbox/Checkbox.module.js +1 -1
- package/esm/forms/Checkbox/Checkbox.module.js.map +1 -1
- package/esm/forms/ControlGroup/ControlGroup.module-XDWDqxx9.css +1 -0
- package/esm/forms/ControlGroup/ControlGroup.module.js +1 -1
- package/esm/forms/ControlGroup/ControlGroup.module.js.map +1 -1
- package/esm/forms/FormControl/{FormControl.module-UQqb_zPR.css → FormControl.module-CSNT689n.css} +1 -1
- package/esm/forms/FormControl/FormControl.module.js +1 -1
- package/esm/forms/FormControl/FormControl.module.js.map +1 -1
- package/esm/forms/Radio/Radio.module-B470XLdO.css +1 -0
- package/esm/forms/Radio/Radio.module.js +1 -1
- package/esm/forms/Radio/Radio.module.js.map +1 -1
- package/esm/forms/Select/Select.module-CRuV5AGO.css +1 -0
- package/esm/forms/Select/Select.module.js +1 -1
- package/esm/forms/Select/Select.module.js.map +1 -1
- package/esm/forms/TextInput/TextInput.module-CrmcmO_m.css +1 -0
- package/esm/forms/TextInput/TextInput.module.js +1 -1
- package/esm/forms/TextInput/TextInput.module.js.map +1 -1
- package/esm/forms/Textarea/{Textarea.module-CdUlSjWq.css → Textarea.module-C4pwTMjB.css} +1 -1
- package/esm/forms/Textarea/Textarea.module.js +1 -1
- package/esm/forms/Textarea/Textarea.module.js.map +1 -1
- package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes-kII0kqk3.css +1 -0
- package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/size/size-SXubYfUg.css +1 -0
- package/esm/river/RiverAccordion/RiverAccordion.d.ts.map +1 -1
- package/esm/river/RiverAccordion/RiverAccordion.js +14 -6
- package/esm/river/RiverAccordion/RiverAccordion.js.map +1 -1
- package/esm/river/RiverAccordion/RiverAccordion.module-nlZZH3O7.css +1 -0
- package/esm/river/RiverAccordion/RiverAccordion.module.js +3 -2
- package/esm/river/RiverAccordion/RiverAccordion.module.js.map +1 -1
- package/lib/Hero/HeroContext.d.ts +1 -1
- package/lib/css/main.css +334 -144
- 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 +7 -7
- 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 +51 -19
- package/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/eyebrow-banner.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/faq/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/faq/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/faq/faq.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/footer/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/footer/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/frosted-glass-vfx/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/frosted-glass-vfx/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/grid/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/grid/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/grid/grid.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/hero/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/icon/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/icon/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/ide/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/ide/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/image/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/inline-link/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/inline-link/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/inline-link/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/label/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/label/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/link/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/link/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/logosuite/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/logosuite/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/logosuite/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/pagination/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/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 +2 -2
- 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/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/frosted-glass-vfx/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/grid/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/grid/grid.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/hero/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/icon/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/ide/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/image/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/inline-link/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/inline-link/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/label/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/link/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/logosuite/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/logosuite/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/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/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 +2 -2
- 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/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/frosted-glass-vfx/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/grid/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/grid/grid.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/hero/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/icon/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/ide/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/image/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/inline-link/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/inline-link/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/label/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/link/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/logosuite/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/logosuite/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/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/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 +2 -2
- 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/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/frosted-glass-vfx/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/grid/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/grid/grid.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/hero/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/icon/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/ide/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/image/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/inline-link/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/inline-link/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/label/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/link/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/logosuite/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/logosuite/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/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/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 +2 -2
- 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/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/footer/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/frosted-glass-vfx/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/frosted-glass-vfx/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/grid/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/grid/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/grid/grid.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/grid/grid.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/hero/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/hero/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/icon/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/icon/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/ide/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/ide/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/image/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/image/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/inline-link/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/inline-link/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/inline-link/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/inline-link/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/label/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/label/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/link/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/link/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/logosuite/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/logosuite/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/logosuite/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/logosuite/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/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/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 +2 -2
- 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/package.json +1 -1
- package/esm/Button/Button.module-CDHmNf-Y.css +0 -1
- package/esm/Icon/Icon.module-C1_lP1JO.css +0 -1
- package/esm/forms/Checkbox/Checkbox.module-DTWn-eCl.css +0 -1
- package/esm/forms/ControlGroup/ControlGroup.module-B7ITrHM_.css +0 -1
- package/esm/forms/Radio/Radio.module-C_NUEyme.css +0 -1
- package/esm/forms/Select/Select.module-q1LyPHa8.css +0 -1
- package/esm/forms/TextInput/TextInput.module-zPnaJdhX.css +0 -1
- package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes-DPvZ0fhp.css +0 -1
- package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/size/size-Dr6y-7jl.css +0 -1
- package/esm/river/RiverAccordion/RiverAccordion.module-BSoiBgAe.css +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.module.js","names":[],"sources":["../../../src/forms/Textarea/Textarea.module.css"],"sourcesContent":["/*\n * Default Textarea styles\n */\n.Textarea {\n display: flex;\n color: var(--brand-control-color-fg-default);\n background-color: var(--brand-color-canvas-default);\n border: none;\n border-radius: var(--brand-borderRadius-medium);\n line-height: var(--brand-text-lineHeight-100);\n transition: var(--brand-control-animation-duration) var(--brand-control-animation-easing);\n transition-property: color, background-color, box-shadow;\n}\n\n.Textarea::placeholder {\n color: var(--brand-color-text-muted);\n opacity: 1;\n}\n\n.Textarea[disabled] {\n -webkit-text-fill-color: var(--brand-control-color-fg-disabled);\n color: var(--brand-control-color-fg-disabled);\n cursor: not-allowed;\n background-color: var(--brand-control-color-canvas-disabled);\n opacity: 1;\n resize: none;\n}\n\n.Textarea:focus {\n outline: none;\n}\n\n.Textarea-resize--vertical {\n resize: vertical;\n}\n\n.Textarea-resize--horizontal {\n resize: horizontal;\n}\n\n.Textarea-resize--none {\n resize: none;\n}\n\n.Textarea-resize--both {\n resize: both;\n}\n\n/*\n * Sizes\n */\n.Textarea--medium {\n font-weight: var(--brand-text-weight-100);\n font-size: var(--brand-text-size-100);\n padding: var(--brand-control-medium-paddingBlock-normal) var(--brand-control-medium-paddingInline-condensed);\n}\n\n.Textarea--large {\n font-weight: var(--brand-text-weight-200);\n font-size: var(--brand-text-size-200);\n padding: var(--brand-control-large-paddingBlock-normal) var(--brand-control-large-paddingInline-condensed);\n}\n\n/*\n * Visual states\n */\n.Textarea--fullWidth {\n width: 100%;\n}\n\n/*\n * Textarea wrapper\n */\n\n.Textarea-wrapper--disabled {\n border-color: var(--brand-control-color-border-disabled);\n}\n\n.Textarea-wrapper {\n font-family: var(--brand-body-fontFamily);\n display: inline-flex;\n position: relative;\n border: solid var(--brand-borderWidth-thin, 1px) var(--brand-control-color-border-default);\n border-radius: var(--brand-borderRadius-medium);\n transition: var(--brand-control-animation-duration) var(--brand-control-animation-easing);\n transition-property: border;\n}\n\n.Textarea-wrapper--invisible {\n border-color: transparent;\n}\n\n.Textarea-wrapper--fullWidth {\n display: flex;\n}\n\n.Textarea-wrapper:not(.Textarea-wrapper--fullWidth) {\n width: min-content;\n}\n\n.Textarea-wrapper--monospace {\n font-family: var(--brand-fontStack-monospace);\n}\n\n.Textarea-wrapper:focus-within {\n border-color: var(--brand-color-focus);\n box-shadow: 0 0 0 1px var(--brand-color-focus);\n outline: none;\n}\n\n@media (forced-colors: active) {\n .Textarea-wrapper:focus-within {\n outline: var(--brand-borderWidth-thick) solid Highlight;\n outline-offset: var(--base-size-2);\n }\n}\n\n/*\n * Validation\n */\n\n.Textarea-wrapper--success,\n.Textarea-wrapper--success.Textarea-wrapper--disabled {\n border-color: var(--brand-color-success-fg);\n}\n\n.Textarea-wrapper--error,\n.Textarea-wrapper--error.Textarea-wrapper--disabled {\n border-color: var(--brand-color-danger-fg);\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 .Textarea,\n .Textarea::before,\n .Textarea::after,\n .Textarea * {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"Textarea.module.js","names":[],"sources":["../../../src/forms/Textarea/Textarea.module.css"],"sourcesContent":["/*\n * Default Textarea styles\n */\n.Textarea {\n display: flex;\n color: var(--brand-control-color-fg-default);\n background-color: var(--brand-color-canvas-default);\n border: none;\n border-radius: var(--brand-borderRadius-medium);\n line-height: var(--brand-text-lineHeight-100);\n transition: var(--brand-control-animation-duration) var(--brand-control-animation-easing);\n transition-property: color, background-color, box-shadow;\n}\n\n.Textarea::placeholder {\n color: var(--brand-color-text-muted);\n opacity: 1;\n}\n\n.Textarea[disabled] {\n -webkit-text-fill-color: var(--brand-control-color-fg-disabled);\n color: var(--brand-control-color-fg-disabled);\n cursor: not-allowed;\n background-color: var(--brand-control-color-canvas-disabled);\n opacity: 1;\n resize: none;\n}\n\n.Textarea:focus {\n outline: none;\n}\n\n.Textarea-resize--vertical {\n resize: vertical;\n}\n\n.Textarea-resize--horizontal {\n resize: horizontal;\n}\n\n.Textarea-resize--none {\n resize: none;\n}\n\n.Textarea-resize--both {\n resize: both;\n}\n\n/*\n * Sizes\n */\n.Textarea--medium {\n font-weight: var(--brand-text-weight-100);\n font-size: var(--brand-text-size-100);\n padding: var(--brand-control-medium-paddingBlock-normal) var(--brand-control-medium-paddingInline-condensed);\n}\n\n.Textarea--large {\n font-weight: var(--brand-text-weight-200);\n font-size: var(--brand-text-size-200);\n padding: var(--brand-control-large-paddingBlock-normal) var(--brand-control-large-paddingInline-condensed);\n}\n\n/*\n * Visual states\n */\n.Textarea--fullWidth {\n width: 100%;\n}\n\n/*\n * Textarea wrapper\n */\n\n.Textarea-wrapper--disabled {\n border-color: var(--brand-control-color-border-disabled);\n}\n\n.Textarea-wrapper {\n font-family: var(--brand-body-fontFamily);\n display: inline-flex;\n position: relative;\n border: solid var(--brand-borderWidth-thin, 1px) var(--brand-control-color-border-default);\n border-radius: var(--brand-borderRadius-medium);\n transition: var(--brand-control-animation-duration) var(--brand-control-animation-easing);\n transition-property: border;\n}\n\n.Textarea-wrapper--invisible {\n border-color: transparent;\n}\n\n.Textarea-wrapper--fullWidth {\n display: flex;\n}\n\n.Textarea-wrapper:not(.Textarea-wrapper--fullWidth) {\n width: min-content;\n}\n\n.Textarea-wrapper--monospace {\n font-family: var(--brand-fontStack-monospace);\n}\n\n.Textarea-wrapper:focus-within {\n border-color: var(--brand-control-color-focus);\n box-shadow: 0 0 0 1px var(--brand-control-color-focus);\n outline: none;\n}\n\n@media (forced-colors: active) {\n .Textarea-wrapper:focus-within {\n outline: var(--brand-borderWidth-thick) solid Highlight;\n outline-offset: var(--base-size-2);\n }\n}\n\n/*\n * Validation\n */\n\n.Textarea-wrapper--success,\n.Textarea-wrapper--success.Textarea-wrapper--disabled {\n border-color: var(--brand-color-success-fg);\n}\n\n.Textarea-wrapper--error,\n.Textarea-wrapper--error.Textarea-wrapper--disabled {\n border-color: var(--brand-color-danger-fg);\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 .Textarea,\n .Textarea::before,\n .Textarea::after,\n .Textarea * {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root,[data-color-mode=light]{--brand-button-primary-bgColor-rest:var(--base-color-scale-green-6);--brand-button-primary-bgColor-hover:color-mix(in srgb, var(--base-color-scale-green-6), #000 16%);--brand-button-primary-bgColor-active:linear-gradient(0deg, #0000003d 0%, #0000003d 100%), var(--base-color-scale-green-6);--brand-button-primary-bgColor-disabled:var(--base-color-scale-gray-4);--brand-button-primary-borderColor-rest:transparent;--brand-button-primary-borderColor-hover:transparent;--brand-button-primary-borderColor-active:var(--base-color-scale-green-7);--brand-button-primary-borderColor-disabled:transparent;--brand-button-primary-fgColor-rest:var(--base-color-scale-white-0);--brand-button-primary-fgColor-disabled:var(--base-color-scale-gray-2);--brand-button-primary-shadow-active:none;--brand-button-secondary-bgColor-rest:#0000000f;--brand-button-secondary-bgColor-hover:#0000001e;--brand-button-secondary-bgColor-active:#00000036;--brand-button-secondary-borderColor-rest:var(--base-color-scale-gray-2);--brand-button-secondary-borderColor-hover:var(--base-color-scale-gray-2);--brand-button-secondary-borderColor-active:var(--base-color-scale-gray-2);--brand-button-secondary-fgColor-rest:var(--brand-color-text-default);--brand-button-secondary-fgColor-disabled:var(--base-color-scale-gray-3);--brand-button-subtle-bgColor-rest:#00000003;--brand-button-subtle-bgColor-hover:#0000001e;--brand-button-subtle-bgColor-active:#00000036;--brand-button-subtle-borderColor-rest:var(--base-color-scale-gray-2);--brand-button-subtle-borderColor-hover:var(--base-color-scale-gray-2);--brand-button-subtle-borderColor-active:var(--base-color-scale-gray-2);--brand-button-subtle-fgColor-rest:var(--brand-color-text-default);--brand-button-subtle-fgColor-disabled:var(--base-color-scale-gray-3)}[data-color-mode=dark]{--brand-button-primary-bgColor-rest:var(--base-color-scale-green-5);--brand-button-primary-bgColor-hover:color-mix(in srgb, var(--base-color-scale-green-5), #000 16%);--brand-button-primary-bgColor-active:linear-gradient(0deg, #0000003d 0%, #0000003d 100%), var(--base-color-scale-green-5);--brand-button-primary-bgColor-disabled:var(--base-color-scale-gray-4);--brand-button-primary-borderColor-rest:transparent;--brand-button-primary-borderColor-hover:transparent;--brand-button-primary-borderColor-active:var(--base-color-scale-green-6);--brand-button-primary-borderColor-disabled:transparent;--brand-button-primary-fgColor-rest:var(--base-color-scale-white-0);--brand-button-primary-fgColor-disabled:var(--base-color-scale-gray-2);--brand-button-primary-shadow-active:none;--brand-button-secondary-bgColor-rest:#ffffff1f;--brand-button-secondary-bgColor-hover:#ffffff29;--brand-button-secondary-bgColor-active:#ffffff42;--brand-button-secondary-borderColor-rest:#ffffff0f;--brand-button-secondary-borderColor-hover:#ffffff1f;--brand-button-secondary-borderColor-active:#ffffff1f;--brand-button-secondary-fgColor-rest:var(--brand-color-text-default);--brand-button-secondary-fgColor-disabled:var(--base-color-scale-gray-4);--brand-button-subtle-bgColor-rest:#00000003;--brand-button-subtle-bgColor-hover:#ffffff29;--brand-button-subtle-bgColor-active:#ffffff3d;--brand-button-subtle-borderColor-rest:var(--base-color-scale-gray-6);--brand-button-subtle-borderColor-hover:#ffffff1f;--brand-button-subtle-borderColor-active:#ffffff1f;--brand-button-subtle-fgColor-rest:var(--brand-color-text-default);--brand-button-subtle-fgColor-disabled:var(--base-color-scale-gray-4)}
|
package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/size/size-SXubYfUg.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--brand-control-animation-easing:var(--brand-animation-easing-glide);--brand-control-animation-duration:80ms;--brand-control-large-size:3.75rem;--brand-control-medium-size:2.6875rem;--brand-controlStack-large-gap-spacious:var(--base-size-12);--brand-controlStack-large-gap-condensed:var(--base-size-8);--brand-controlStack-large-gap-auto:var(--base-size-8);--brand-controlStack-medium-gap-spacious:var(--base-size-12);--brand-controlStack-medium-gap-condensed:var(--base-size-8);--brand-controlStack-small-gap-spacious:var(--base-size-16);--brand-controlStack-small-gap-condensed:var(--base-size-8);--brand-stack-gap-spacious:var(--base-size-48);--brand-stack-gap-normal:var(--base-size-24);--brand-stack-gap-condensed:var(--base-size-16);--brand-stack-padding-spacious:var(--base-size-48);--brand-stack-padding-normal:var(--base-size-24);--brand-stack-padding-condensed:var(--base-size-16);--brand-box-spacing-spacious:var(--base-size-48);--brand-box-spacing-normal:var(--base-size-24);--brand-box-spacing-condensed:var(--base-size-16);--brand-control-large-gap:var(--base-size-16);--brand-control-large-paddingInline-spacious:var(--base-size-32);--brand-control-large-paddingInline-normal:var(--base-size-20);--brand-control-large-paddingInline-condensed:var(--base-size-16);--brand-control-large-paddingBlock-normal:var(--base-size-20);--brand-control-large-paddingBlock-condensed:var(--base-size-12);--brand-control-large-lineBoxHeight:var(--base-size-20);--brand-control-medium-gap:var(--base-size-12);--brand-control-medium-paddingInline-spacious:var(--base-size-28);--brand-control-medium-paddingInline-normal:var(--base-size-16);--brand-control-medium-paddingInline-condensed:var(--base-size-12);--brand-control-medium-paddingBlock-normal:var(--base-size-16);--brand-control-medium-paddingBlock-condensed:var(--base-size-6);--brand-control-medium-lineBoxHeight:var(--base-size-16);--brand-control-small-gap:var(--base-size-8);--brand-control-small-paddingInline-spacious:var(--base-size-24);--brand-control-small-paddingInline-normal:var(--base-size-12);--brand-control-small-paddingInline-condensed:var(--base-size-8);--brand-control-small-paddingBlock:var(--base-size-8);--brand-control-small-lineBoxHeight:var(--base-size-12);--brand-control-small-size:var(--base-size-32);--brand-control-minTarget-coarse:var(--base-size-44);--brand-control-minTarget-fine:var(--base-size-16)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RiverAccordion.d.ts","sourceRoot":"","sources":["../../../src/river/RiverAccordion/RiverAccordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiG,MAAM,OAAO,CAAA;AAIrH,OAAO,EAAU,KAAK,YAAY,EAAa,MAAM,OAAO,CAAA;AAI5D;;GAEG;AACH,OAAO,6FAA6F,CAAA;
|
|
1
|
+
{"version":3,"file":"RiverAccordion.d.ts","sourceRoot":"","sources":["../../../src/river/RiverAccordion/RiverAccordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiG,MAAM,OAAO,CAAA;AAIrH,OAAO,EAAU,KAAK,YAAY,EAAa,MAAM,OAAO,CAAA;AAI5D;;GAEG;AACH,OAAO,6FAA6F,CAAA;AAsCpG,eAAO,MAAM,sBAAsB,kCAAmC,CAAA;AACtE,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE3E,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACxD,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IACvB,OAAO,CAAC,EAAE,qBAAqB,CAAA;CAChC,CAAC,GACA,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAmEtC,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IAC3E,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,GAAG,0BAA0B,CAAC,EAAE,CAAA;IACvF,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAwED,MAAM,MAAM,0BAA0B,GAAG,YAAY,CAAA;AA+BrD,MAAM,MAAM,0BAA0B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAiC7E,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AA2B5E;;;GAGG;AACH,eAAO,MAAM,cAAc;YAhPjB,OAAO,GAAG,KAAK;cACb,qBAAqB;;;;iDAiL+B,0BAA0B;2DA/BH,0BAA0B;qDAxE7C,uBAAuB;sCAwItC,yBAAyB;CAkC5E,CAAA"}
|
|
@@ -35,8 +35,13 @@ var x = d(null), S = () => {
|
|
|
35
35
|
"aria-hidden": !0
|
|
36
36
|
})), S = g(() => ({
|
|
37
37
|
openIndex: f,
|
|
38
|
-
setOpenIndex: p
|
|
39
|
-
|
|
38
|
+
setOpenIndex: p,
|
|
39
|
+
variant: r
|
|
40
|
+
}), [
|
|
41
|
+
f,
|
|
42
|
+
p,
|
|
43
|
+
r
|
|
44
|
+
]);
|
|
40
45
|
return /* @__PURE__ */ y(x.Provider, {
|
|
41
46
|
value: S,
|
|
42
47
|
children: /* @__PURE__ */ b("div", {
|
|
@@ -128,10 +133,13 @@ var x = d(null), S = () => {
|
|
|
128
133
|
...i,
|
|
129
134
|
children: a
|
|
130
135
|
});
|
|
131
|
-
}, A = ({ className: t, ...n }) =>
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
136
|
+
}, A = ({ className: t, ...n }) => {
|
|
137
|
+
let { variant: r } = S();
|
|
138
|
+
return /* @__PURE__ */ y("div", {
|
|
139
|
+
className: e(s.RiverAccordion__visual, r === "gridline" && s["RiverAccordion__visual--has-background"], t),
|
|
140
|
+
...n
|
|
141
|
+
});
|
|
142
|
+
}, j = (e) => (t) => u.isValidElement(t) && t.type === e, M = j(D), N = j(k), P = j(O), F = j(A), I = Object.assign(E, {
|
|
135
143
|
Content: k,
|
|
136
144
|
Heading: O,
|
|
137
145
|
Item: D,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RiverAccordion.js","names":[],"sources":["../../../src/river/RiverAccordion/RiverAccordion.tsx"],"sourcesContent":["import React, {createContext, forwardRef, useCallback, useContext, useMemo, useState, useRef, useEffect} from 'react'\nimport {clsx} from 'clsx'\nimport {ChevronDownIcon, ChevronUpIcon} from '@primer/octicons-react'\n\nimport {Heading, type HeadingProps, Link, Text} from '../..'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\nimport {useId} from '../../hooks/useId'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/river.css'\n\n/** Main Stylesheet (as a CSS Module) */\nimport styles from './RiverAccordion.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\ntype RiverAccordionContextType = {\n openIndex: number\n setOpenIndex: (index: number) => void\n}\n\nconst RiverAccordionContext = createContext<RiverAccordionContextType | null>(null)\n\nconst useRiverAccordionContext = (): RiverAccordionContextType => {\n const context = useContext(RiverAccordionContext)\n if (context === null) {\n throw new Error('useRiverAccordionContext must be used within a RiverAccordion component')\n }\n return context\n}\n\ntype RiverAccordionItemContextType = {\n index: number\n isOpen: boolean\n id: string\n}\n\nconst RiverAccordionItemContext = createContext<RiverAccordionItemContextType | null>(null)\n\nconst useRiverAccordionItemContext = (): RiverAccordionItemContextType => {\n const context = useContext(RiverAccordionItemContext)\n if (context === null) {\n throw new Error('useRiverAccordionItemContext must be used within a RiverAccordion component')\n }\n return context\n}\n\nexport const RiverAccordionVariants = ['default', 'gridline'] as const\nexport type RiverAccordionVariant = (typeof RiverAccordionVariants)[number]\n\nexport type RiverAccordionProps = React.PropsWithChildren<{\n align?: 'start' | 'end'\n variant?: RiverAccordionVariant\n}> &\n React.HTMLAttributes<HTMLDivElement>\n\nconst RiverAccordionRoot = forwardRef<HTMLDivElement, RiverAccordionProps>(\n ({align = 'start', variant = 'default', children, className, ...rest}, forwardedRef) => {\n const containerRef = useProvidedRefOrCreate<HTMLDivElement>(forwardedRef as React.RefObject<HTMLDivElement>)\n const [openIndex, setOpenIndex] = useState(0)\n\n const accordionComponents = useMemo(() => {\n return React.Children.toArray(children).reduce<{\n items: React.ReactElement<RiverAccordionItemProps>[]\n visuals: React.ReactElement<RiverAccordionVisualProps>[]\n }>(\n (acc, child) => {\n if (!isRiverAccordionItem(child)) {\n return acc\n }\n\n const visualChild = React.Children.toArray(child.props.children).find(isRiverAccordionVisual)\n\n if (visualChild) {\n acc.items.push(child)\n acc.visuals.push(visualChild)\n }\n\n return acc\n },\n {items: [], visuals: []},\n )\n }, [children])\n\n const items = accordionComponents.items.map((item, index) => React.cloneElement(item, {key: index, index}))\n const visuals = accordionComponents.visuals.map((visual, index) =>\n React.cloneElement(visual, {key: index, 'aria-hidden': true}),\n )\n\n const contextValue = useMemo(\n () => ({\n openIndex,\n setOpenIndex,\n }),\n [openIndex, setOpenIndex],\n )\n\n return (\n <RiverAccordionContext.Provider value={contextValue}>\n <div\n ref={containerRef}\n className={clsx(\n styles.RiverAccordion,\n styles[`RiverAccordion__align-${align}`],\n styles[`RiverAccordion--variant-${variant}`],\n variant === 'gridline' && gridlineStyles.gridline,\n className,\n )}\n {...rest}\n >\n <div className={styles.RiverAccordion__accordionContainer}>{items}</div>\n <div className={styles.RiverAccordion__visualsContainer}>\n <div className={styles.RiverAccordion__visualsWrapper}>{visuals}</div>\n </div>\n </div>\n </RiverAccordionContext.Provider>\n )\n },\n)\n\nexport type RiverAccordionItemProps = React.HTMLAttributes<HTMLDivElement> & {\n children: React.ReactElement<RiverAccordionHeadingProps | RiverAccordionContentProps>[]\n index?: number\n}\n\nconst RiverAccordionItem = ({className, index, children, ...props}: RiverAccordionItemProps) => {\n const {openIndex} = useRiverAccordionContext()\n const panelId = useId()\n const isOpen = index === openIndex\n const panelRef = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n if (panelRef.current) {\n // Workaround to avoid React 18 / 19 type mismatches with the `inert` attribute.\n // This approach won't immediately apply the attribute in pure SSR contexts, only post-hydration\n // TODO: Move back to JSX when React 19 is fully adopted in Dotcom.\n panelRef.current.toggleAttribute('inert', !isOpen)\n }\n }, [isOpen])\n\n const itemContextValue = useMemo(\n () => ({\n id: panelId,\n // Index optional for consumers, but always provided by parent\n index: index as number,\n isOpen,\n }),\n [panelId, index, isOpen],\n )\n\n const {heading, content, visual} = useMemo(() => {\n return React.Children.toArray(children).reduce<{\n heading: React.ReactElement<RiverAccordionHeadingProps> | null\n content: React.ReactElement<RiverAccordionContentProps> | null\n visual: React.ReactElement<RiverAccordionVisualProps> | null\n }>(\n (acc, child) => {\n if (isRiverAccordionHeading(child)) {\n acc.heading = child\n }\n\n if (isRiverAccordionContent(child)) {\n acc.content = child\n }\n\n if (isRiverAccordionVisual(child)) {\n acc.visual = child\n }\n\n return acc\n },\n {heading: null, content: null, visual: null},\n )\n }, [children])\n\n if (!heading || !content || !visual) {\n return null\n }\n\n return (\n <RiverAccordionItemContext.Provider value={itemContextValue}>\n <div\n className={clsx(styles.RiverAccordion__item, isOpen && styles['RiverAccordion__item--open'], className)}\n {...props}\n >\n {heading}\n <div ref={panelRef} className={styles.RiverAccordion__panel} id={panelId} aria-hidden={!isOpen}>\n {content}\n {visual}\n </div>\n </div>\n </RiverAccordionItemContext.Provider>\n )\n}\n\nexport type RiverAccordionHeadingProps = HeadingProps\n\nconst RiverAccordionHeading = ({as = 'h3', children, className, size = '6', ...props}: RiverAccordionHeadingProps) => {\n const {setOpenIndex} = useRiverAccordionContext()\n const {id, index, isOpen} = useRiverAccordionItemContext()\n\n const onClick = useCallback(() => {\n if (!isOpen) {\n setOpenIndex(index)\n }\n }, [index, isOpen, setOpenIndex])\n\n return (\n <Heading size={size} as={as} className={clsx(styles.RiverAccordion__heading, className)} {...props}>\n <button\n type=\"button\"\n className={styles.RiverAccordion__trigger}\n onClick={onClick}\n aria-disabled={isOpen}\n aria-controls={id}\n aria-expanded={isOpen}\n >\n {children}\n <span aria-hidden=\"true\" className={styles.RiverAccordion__icon}>\n {isOpen ? <ChevronUpIcon size={24} /> : <ChevronDownIcon size={24} />}\n </span>\n </button>\n </Heading>\n )\n}\n\nexport type RiverAccordionContentProps = React.HTMLAttributes<HTMLDivElement>\n\nconst RiverAccordionContent = ({className, children, ...props}: RiverAccordionContentProps) => {\n const childrenWithStyledText = useMemo(() => {\n const isLink = createComponentTypeGuard(Link)\n const isText = createComponentTypeGuard(Text)\n\n return React.Children.toArray(children).map(child => {\n if (isText(child)) {\n return React.cloneElement(child, {\n as: child.props.as ?? 'p',\n variant: child.props.variant ?? 'muted',\n size: child.props.size ?? '300',\n })\n }\n\n if (isLink(child)) {\n return React.cloneElement(child, {\n variant: child.props.variant ?? 'accent',\n })\n }\n\n return child\n })\n }, [children])\n\n return (\n <div className={clsx(styles.RiverAccordion__content, className)} {...props}>\n {childrenWithStyledText}\n </div>\n )\n}\n\nexport type RiverAccordionVisualProps = React.HTMLAttributes<HTMLDivElement>\n\nconst RiverAccordionVisual = ({className, ...props}: RiverAccordionVisualProps) => {\n return <div className={clsx(styles.RiverAccordion__visual, className)} {...props} />\n}\n\nconst createComponentTypeGuard =\n <T,>(componentType: React.ComponentType<T>) =>\n (element: unknown): element is React.ReactElement<T> =>\n React.isValidElement(element) && element.type === componentType\n\nconst isRiverAccordionItem = createComponentTypeGuard(RiverAccordionItem)\nconst isRiverAccordionContent = createComponentTypeGuard(RiverAccordionContent)\nconst isRiverAccordionHeading = createComponentTypeGuard(RiverAccordionHeading)\nconst isRiverAccordionVisual = createComponentTypeGuard(RiverAccordionVisual)\n\n/**\n * Use the RiverAccordion to create collapsible content panels with associated visuals.\n * @see https://primer.style/brand/components/RiverAccordion\n */\nexport const RiverAccordion = Object.assign(RiverAccordionRoot, {\n Content: RiverAccordionContent,\n Heading: RiverAccordionHeading,\n Item: RiverAccordionItem,\n Visual: RiverAccordionVisual,\n})\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"RiverAccordion.js","names":[],"sources":["../../../src/river/RiverAccordion/RiverAccordion.tsx"],"sourcesContent":["import React, {createContext, forwardRef, useCallback, useContext, useMemo, useState, useRef, useEffect} from 'react'\nimport {clsx} from 'clsx'\nimport {ChevronDownIcon, ChevronUpIcon} from '@primer/octicons-react'\n\nimport {Heading, type HeadingProps, Link, Text} from '../..'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\nimport {useId} from '../../hooks/useId'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/river.css'\n\n/** Main Stylesheet (as a CSS Module) */\nimport styles from './RiverAccordion.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\ntype RiverAccordionContextType = {\n openIndex: number\n setOpenIndex: (index: number) => void\n variant: RiverAccordionVariant\n}\n\nconst RiverAccordionContext = createContext<RiverAccordionContextType | null>(null)\n\nconst useRiverAccordionContext = (): RiverAccordionContextType => {\n const context = useContext(RiverAccordionContext)\n if (context === null) {\n throw new Error('useRiverAccordionContext must be used within a RiverAccordion component')\n }\n return context\n}\n\ntype RiverAccordionItemContextType = {\n index: number\n isOpen: boolean\n id: string\n}\n\nconst RiverAccordionItemContext = createContext<RiverAccordionItemContextType | null>(null)\n\nconst useRiverAccordionItemContext = (): RiverAccordionItemContextType => {\n const context = useContext(RiverAccordionItemContext)\n if (context === null) {\n throw new Error('useRiverAccordionItemContext must be used within a RiverAccordion component')\n }\n return context\n}\n\nexport const RiverAccordionVariants = ['default', 'gridline'] as const\nexport type RiverAccordionVariant = (typeof RiverAccordionVariants)[number]\n\nexport type RiverAccordionProps = React.PropsWithChildren<{\n align?: 'start' | 'end'\n variant?: RiverAccordionVariant\n}> &\n React.HTMLAttributes<HTMLDivElement>\n\nconst RiverAccordionRoot = forwardRef<HTMLDivElement, RiverAccordionProps>(\n ({align = 'start', variant = 'default', children, className, ...rest}, forwardedRef) => {\n const containerRef = useProvidedRefOrCreate<HTMLDivElement>(forwardedRef as React.RefObject<HTMLDivElement>)\n const [openIndex, setOpenIndex] = useState(0)\n\n const accordionComponents = useMemo(() => {\n return React.Children.toArray(children).reduce<{\n items: React.ReactElement<RiverAccordionItemProps>[]\n visuals: React.ReactElement<RiverAccordionVisualProps>[]\n }>(\n (acc, child) => {\n if (!isRiverAccordionItem(child)) {\n return acc\n }\n\n const visualChild = React.Children.toArray(child.props.children).find(isRiverAccordionVisual)\n\n if (visualChild) {\n acc.items.push(child)\n acc.visuals.push(visualChild)\n }\n\n return acc\n },\n {items: [], visuals: []},\n )\n }, [children])\n\n const items = accordionComponents.items.map((item, index) => React.cloneElement(item, {key: index, index}))\n const visuals = accordionComponents.visuals.map((visual, index) =>\n React.cloneElement(visual, {key: index, 'aria-hidden': true}),\n )\n\n const contextValue = useMemo(\n () => ({\n openIndex,\n setOpenIndex,\n variant,\n }),\n [openIndex, setOpenIndex, variant],\n )\n\n return (\n <RiverAccordionContext.Provider value={contextValue}>\n <div\n ref={containerRef}\n className={clsx(\n styles.RiverAccordion,\n styles[`RiverAccordion__align-${align}`],\n styles[`RiverAccordion--variant-${variant}`],\n variant === 'gridline' && gridlineStyles.gridline,\n className,\n )}\n {...rest}\n >\n <div className={styles.RiverAccordion__accordionContainer}>{items}</div>\n <div className={styles.RiverAccordion__visualsContainer}>\n <div className={styles.RiverAccordion__visualsWrapper}>{visuals}</div>\n </div>\n </div>\n </RiverAccordionContext.Provider>\n )\n },\n)\n\nexport type RiverAccordionItemProps = React.HTMLAttributes<HTMLDivElement> & {\n children: React.ReactElement<RiverAccordionHeadingProps | RiverAccordionContentProps>[]\n index?: number\n}\n\nconst RiverAccordionItem = ({className, index, children, ...props}: RiverAccordionItemProps) => {\n const {openIndex} = useRiverAccordionContext()\n const panelId = useId()\n const isOpen = index === openIndex\n const panelRef = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n if (panelRef.current) {\n // Workaround to avoid React 18 / 19 type mismatches with the `inert` attribute.\n // This approach won't immediately apply the attribute in pure SSR contexts, only post-hydration\n // TODO: Move back to JSX when React 19 is fully adopted in Dotcom.\n panelRef.current.toggleAttribute('inert', !isOpen)\n }\n }, [isOpen])\n\n const itemContextValue = useMemo(\n () => ({\n id: panelId,\n // Index optional for consumers, but always provided by parent\n index: index as number,\n isOpen,\n }),\n [panelId, index, isOpen],\n )\n\n const {heading, content, visual} = useMemo(() => {\n return React.Children.toArray(children).reduce<{\n heading: React.ReactElement<RiverAccordionHeadingProps> | null\n content: React.ReactElement<RiverAccordionContentProps> | null\n visual: React.ReactElement<RiverAccordionVisualProps> | null\n }>(\n (acc, child) => {\n if (isRiverAccordionHeading(child)) {\n acc.heading = child\n }\n\n if (isRiverAccordionContent(child)) {\n acc.content = child\n }\n\n if (isRiverAccordionVisual(child)) {\n acc.visual = child\n }\n\n return acc\n },\n {heading: null, content: null, visual: null},\n )\n }, [children])\n\n if (!heading || !content || !visual) {\n return null\n }\n\n return (\n <RiverAccordionItemContext.Provider value={itemContextValue}>\n <div\n className={clsx(styles.RiverAccordion__item, isOpen && styles['RiverAccordion__item--open'], className)}\n {...props}\n >\n {heading}\n <div ref={panelRef} className={styles.RiverAccordion__panel} id={panelId} aria-hidden={!isOpen}>\n {content}\n {visual}\n </div>\n </div>\n </RiverAccordionItemContext.Provider>\n )\n}\n\nexport type RiverAccordionHeadingProps = HeadingProps\n\nconst RiverAccordionHeading = ({as = 'h3', children, className, size = '6', ...props}: RiverAccordionHeadingProps) => {\n const {setOpenIndex} = useRiverAccordionContext()\n const {id, index, isOpen} = useRiverAccordionItemContext()\n\n const onClick = useCallback(() => {\n if (!isOpen) {\n setOpenIndex(index)\n }\n }, [index, isOpen, setOpenIndex])\n\n return (\n <Heading size={size} as={as} className={clsx(styles.RiverAccordion__heading, className)} {...props}>\n <button\n type=\"button\"\n className={styles.RiverAccordion__trigger}\n onClick={onClick}\n aria-disabled={isOpen}\n aria-controls={id}\n aria-expanded={isOpen}\n >\n {children}\n <span aria-hidden=\"true\" className={styles.RiverAccordion__icon}>\n {isOpen ? <ChevronUpIcon size={24} /> : <ChevronDownIcon size={24} />}\n </span>\n </button>\n </Heading>\n )\n}\n\nexport type RiverAccordionContentProps = React.HTMLAttributes<HTMLDivElement>\n\nconst RiverAccordionContent = ({className, children, ...props}: RiverAccordionContentProps) => {\n const childrenWithStyledText = useMemo(() => {\n const isLink = createComponentTypeGuard(Link)\n const isText = createComponentTypeGuard(Text)\n\n return React.Children.toArray(children).map(child => {\n if (isText(child)) {\n return React.cloneElement(child, {\n as: child.props.as ?? 'p',\n variant: child.props.variant ?? 'muted',\n size: child.props.size ?? '300',\n })\n }\n\n if (isLink(child)) {\n return React.cloneElement(child, {\n variant: child.props.variant ?? 'accent',\n })\n }\n\n return child\n })\n }, [children])\n\n return (\n <div className={clsx(styles.RiverAccordion__content, className)} {...props}>\n {childrenWithStyledText}\n </div>\n )\n}\n\nexport type RiverAccordionVisualProps = React.HTMLAttributes<HTMLDivElement>\n\nconst RiverAccordionVisual = ({className, ...props}: RiverAccordionVisualProps) => {\n const {variant} = useRiverAccordionContext()\n\n return (\n <div\n className={clsx(\n styles.RiverAccordion__visual,\n variant === 'gridline' && styles['RiverAccordion__visual--has-background'],\n className,\n )}\n {...props}\n />\n )\n}\n\nconst createComponentTypeGuard =\n <T,>(componentType: React.ComponentType<T>) =>\n (element: unknown): element is React.ReactElement<T> =>\n React.isValidElement(element) && element.type === componentType\n\nconst isRiverAccordionItem = createComponentTypeGuard(RiverAccordionItem)\nconst isRiverAccordionContent = createComponentTypeGuard(RiverAccordionContent)\nconst isRiverAccordionHeading = createComponentTypeGuard(RiverAccordionHeading)\nconst isRiverAccordionVisual = createComponentTypeGuard(RiverAccordionVisual)\n\n/**\n * Use the RiverAccordion to create collapsible content panels with associated visuals.\n * @see https://primer.style/brand/components/RiverAccordion\n */\nexport const RiverAccordion = Object.assign(RiverAccordionRoot, {\n Content: RiverAccordionContent,\n Heading: RiverAccordionHeading,\n Item: RiverAccordionItem,\n Visual: RiverAccordionVisual,\n})\n"],"mappings":";;;;;;;;;;;;;AAuBA,IAAM,IAAwB,EAAgD,KAAK,EAE7E,UAA4D;CAChE,IAAM,IAAU,EAAW,EAAsB;AACjD,KAAI,MAAY,KACd,OAAU,MAAM,0EAA0E;AAE5F,QAAO;GASH,IAA4B,EAAoD,KAAK,EAErF,UAAoE;CACxE,IAAM,IAAU,EAAW,EAA0B;AACrD,KAAI,MAAY,KACd,OAAU,MAAM,8EAA8E;AAEhG,QAAO;GAGI,IAAyB,CAAC,WAAW,WAAW,EASvD,IAAqB,GACxB,EAAC,WAAQ,SAAS,aAAU,WAAW,aAAU,cAAW,GAAG,KAAO,MAAiB;CACtF,IAAM,IAAe,EAAuC,EAAgD,EACtG,CAAC,GAAW,KAAgB,EAAS,EAAE,EAEvC,IAAsB,QACnB,EAAM,SAAS,QAAQ,EAAS,CAAC,QAIrC,GAAK,MAAU;AACd,MAAI,CAAC,EAAqB,EAAM,CAC9B,QAAO;EAGT,IAAM,IAAc,EAAM,SAAS,QAAQ,EAAM,MAAM,SAAS,CAAC,KAAK,EAAuB;AAO7F,SALI,MACF,EAAI,MAAM,KAAK,EAAM,EACrB,EAAI,QAAQ,KAAK,EAAY,GAGxB;IAET;EAAC,OAAO,EAAE;EAAE,SAAS,EAAE;EAAC,CACzB,EACA,CAAC,EAAS,CAAC,EAER,IAAQ,EAAoB,MAAM,KAAK,GAAM,MAAU,EAAM,aAAa,GAAM;EAAC,KAAK;EAAO;EAAM,CAAC,CAAC,EACrG,IAAU,EAAoB,QAAQ,KAAK,GAAQ,MACvD,EAAM,aAAa,GAAQ;EAAC,KAAK;EAAO,eAAe;EAAK,CAAC,CAC9D,EAEK,IAAe,SACZ;EACL;EACA;EACA;EACD,GACD;EAAC;EAAW;EAAc;EAAQ,CACnC;AAED,QACE,kBAAC,EAAsB,UAAvB;EAAgC,OAAO;YACrC,kBAAC,OAAD;GACE,KAAK;GACL,WAAW,EACT,EAAO,gBACP,EAAO,yBAAyB,MAChC,EAAO,2BAA2B,MAClC,MAAY,cAAc,EAAe,UACzC,EACD;GACD,GAAI;aATN,CAWE,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAqC;IAAY,CAAA,EACxE,kBAAC,OAAD;IAAK,WAAW,EAAO;cACrB,kBAAC,OAAD;KAAK,WAAW,EAAO;eAAiC;KAAc,CAAA;IAClE,CAAA,CACF;;EACyB,CAAA;EAGtC,EAOK,KAAsB,EAAC,cAAW,UAAO,aAAU,GAAG,QAAoC;CAC9F,IAAM,EAAC,iBAAa,GAA0B,EACxC,IAAU,GAAO,EACjB,IAAS,MAAU,GACnB,IAAW,EAAuB,KAAK;AAE7C,SAAgB;AACd,EAAI,EAAS,WAIX,EAAS,QAAQ,gBAAgB,SAAS,CAAC,EAAO;IAEnD,CAAC,EAAO,CAAC;CAEZ,IAAM,IAAmB,SAChB;EACL,IAAI;EAEG;EACP;EACD,GACD;EAAC;EAAS;EAAO;EAAO,CACzB,EAEK,EAAC,YAAS,YAAS,cAAU,QAC1B,EAAM,SAAS,QAAQ,EAAS,CAAC,QAKrC,GAAK,OACA,EAAwB,EAAM,KAChC,EAAI,UAAU,IAGZ,EAAwB,EAAM,KAChC,EAAI,UAAU,IAGZ,EAAuB,EAAM,KAC/B,EAAI,SAAS,IAGR,IAET;EAAC,SAAS;EAAM,SAAS;EAAM,QAAQ;EAAK,CAC7C,EACA,CAAC,EAAS,CAAC;AAMd,QAJI,CAAC,KAAW,CAAC,KAAW,CAAC,IACpB,OAIP,kBAAC,EAA0B,UAA3B;EAAoC,OAAO;YACzC,kBAAC,OAAD;GACE,WAAW,EAAK,EAAO,sBAAsB,KAAU,EAAO,+BAA+B,EAAU;GACvG,GAAI;aAFN,CAIG,GACD,kBAAC,OAAD;IAAK,KAAK;IAAU,WAAW,EAAO;IAAuB,IAAI;IAAS,eAAa,CAAC;cAAxF,CACG,GACA,EACG;MACF;;EAC6B,CAAA;GAMnC,KAAyB,EAAC,QAAK,MAAM,aAAU,cAAW,UAAO,KAAK,GAAG,QAAuC;CACpH,IAAM,EAAC,oBAAgB,GAA0B,EAC3C,EAAC,OAAI,UAAO,cAAU,GAA8B,EAEpD,IAAU,QAAkB;AAChC,EAAK,KACH,EAAa,EAAM;IAEpB;EAAC;EAAO;EAAQ;EAAa,CAAC;AAEjC,QACE,kBAAC,GAAD;EAAe;EAAU;EAAI,WAAW,EAAK,EAAO,yBAAyB,EAAU;EAAE,GAAI;YAC3F,kBAAC,UAAD;GACE,MAAK;GACL,WAAW,EAAO;GACT;GACT,iBAAe;GACf,iBAAe;GACf,iBAAe;aANjB,CAQG,GACD,kBAAC,QAAD;IAAM,eAAY;IAAO,WAAW,EAAO;cAC/B,EAAT,IAAU,IAA8B,GAA/B,EAAe,MAAM,IAAM,CAAgC;IAChE,CAAA,CACA;;EACD,CAAA;GAMR,KAAyB,EAAC,cAAW,aAAU,GAAG,QAAuC;CAC7F,IAAM,IAAyB,QAAc;EAC3C,IAAM,IAAS,EAAyB,EAAK,EACvC,IAAS,EAAyB,EAAK;AAE7C,SAAO,EAAM,SAAS,QAAQ,EAAS,CAAC,KAAI,MACtC,EAAO,EAAM,GACR,EAAM,aAAa,GAAO;GAC/B,IAAI,EAAM,MAAM,MAAM;GACtB,SAAS,EAAM,MAAM,WAAW;GAChC,MAAM,EAAM,MAAM,QAAQ;GAC3B,CAAC,GAGA,EAAO,EAAM,GACR,EAAM,aAAa,GAAO,EAC/B,SAAS,EAAM,MAAM,WAAW,UACjC,CAAC,GAGG,EACP;IACD,CAAC,EAAS,CAAC;AAEd,QACE,kBAAC,OAAD;EAAK,WAAW,EAAK,EAAO,yBAAyB,EAAU;EAAE,GAAI;YAClE;EACG,CAAA;GAMJ,KAAwB,EAAC,cAAW,GAAG,QAAsC;CACjF,IAAM,EAAC,eAAW,GAA0B;AAE5C,QACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAO,wBACP,MAAY,cAAc,EAAO,2CACjC,EACD;EACD,GAAI;EACJ,CAAA;GAIA,KACC,OACJ,MACC,EAAM,eAAe,EAAQ,IAAI,EAAQ,SAAS,GAEhD,IAAuB,EAAyB,EAAmB,EACnE,IAA0B,EAAyB,EAAsB,EACzE,IAA0B,EAAyB,EAAsB,EACzE,IAAyB,EAAyB,EAAqB,EAMhE,IAAiB,OAAO,OAAO,GAAoB;CAC9D,SAAS;CACT,SAAS;CACT,MAAM;CACN,QAAQ;CACT,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB{grid-gap:0;grid-template:"visual""accordion"/1fr;gap:0;display:grid;position:relative}@media (width>=48rem){.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB{--gap-width:var(--brand-Grid-spacing-column-gap);--column-and-gap-width:calc((100% + var(--gap-width)) / 12);--4-grid-columns:calc(4 * var(--column-and-gap-width));--7-grid-columns-minus-last-gap:calc((7 * var(--column-and-gap-width)) - var(--gap-width));gap:var(--column-and-gap-width);grid-template-rows:auto}.Primer_Brand__RiverAccordion-module__RiverAccordion__align-start___wbXB3{grid-template-columns:var(--4-grid-columns) var(--7-grid-columns-minus-last-gap);grid-template-areas:"accordion visual"}.Primer_Brand__RiverAccordion-module__RiverAccordion__align-end___Zq4qJ{grid-template-columns:var(--7-grid-columns-minus-last-gap) var(--4-grid-columns);grid-template-areas:"visual accordion"}}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4{padding-inline:var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);padding-block:var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock);position:relative}@media (width>=48rem){.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4{--gap-width:var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);--half-column:calc(50% - var(--gap-width) / 2);gap:var(--gap-width);align-items:center}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4.Primer_Brand__RiverAccordion-module__RiverAccordion__align-start___wbXB3{grid-template-columns:var(--half-column) var(--half-column);grid-template-areas:"accordion visual"}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4.Primer_Brand__RiverAccordion-module__RiverAccordion__align-end___Zq4qJ{grid-template-columns:var(--half-column) var(--half-column);grid-template-areas:"visual accordion"}}@media (width>=80rem){.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6{border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx{margin-inline:calc(-1 * var(--brand-RiverAccordion-variant-gridline-spacing-outerInline));margin-block-start:calc(-1 * var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock))}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB){border-radius:0}.Primer_Brand__RiverAccordion-module__RiverAccordion__accordionContainer___a80ds{grid-area:accordion}.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx{grid-area:visual}.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6{border-radius:var(--brand-borderRadius-xlarge);grid-template-columns:subgrid;grid-template-rows:subgrid;width:100%;display:grid;overflow:hidden}.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob{opacity:0;width:100%;height:100%;transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default), scale var(--brand-animation-duration-default) var(--brand-animation-easing-default);grid-area:1/1;align-items:center;display:flex;scale:1.05}.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob>*{border-radius:var(--brand-borderRadius-xlarge);-o-object-fit:contain;object-fit:contain;width:100%;height:auto;display:block;overflow:hidden}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob>*{border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob img,.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob picture,.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob video{border-radius:inherit;-o-object-fit:contain;object-fit:contain;width:100%;height:auto;display:block}.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob>* img,.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob>* video{border-radius:inherit;-o-object-fit:cover;object-fit:cover;width:100%;height:100%;display:block}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB{padding:var(--base-size-32);background:var(--brand-RiverAccordion-visual-background,var(--brand-color-canvas-subtle));justify-content:center;align-items:center;display:flex}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB>*{border-radius:var(--brand-borderRadius-large);justify-content:center;align-items:center;max-width:100%;height:auto;display:flex}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB img,.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB picture,.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB video{border-radius:var(--brand-borderRadius-large);max-width:100%;height:100%}@media (width>=48rem){.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB){grid-template-columns:1fr 1fr;align-items:stretch;gap:0;padding:0}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB) .Primer_Brand__RiverAccordion-module__RiverAccordion__accordionContainer___a80ds{padding:var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock) var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);flex-direction:column;justify-content:center;display:flex}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4.Primer_Brand__RiverAccordion-module__RiverAccordion__align-start___wbXB3:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB) .Primer_Brand__RiverAccordion-module__RiverAccordion__accordionContainer___a80ds{padding-inline-end:var(--brand-RiverAccordion-variant-gridline-spacing-contentGap)}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4.Primer_Brand__RiverAccordion-module__RiverAccordion__align-end___Zq4qJ:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB) .Primer_Brand__RiverAccordion-module__RiverAccordion__accordionContainer___a80ds{padding-inline-start:var(--brand-RiverAccordion-variant-gridline-spacing-contentGap)}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx{margin:0}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB){height:100%}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB{padding:var(--base-size-64);justify-content:center;align-items:center}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB>*,.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB img,.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB picture,.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB video{border-radius:var(--brand-borderRadius-large)}}:is(.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:first-child) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:first-child,.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(2)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(2),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(3)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(3),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(4)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(4),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(5)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(5),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(6)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(6),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(7)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(7),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(8)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(8),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(9)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(9),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(10)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(10),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:not(:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:first-child){opacity:1;z-index:1;scale:1}.Primer_Brand__RiverAccordion-module__RiverAccordion__accordionContainer___a80ds .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob{clip:rect(0, 0, 0, 0);word-wrap:normal;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.Primer_Brand__RiverAccordion-module__RiverAccordion__item___SheMX{border-bottom:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-block-start:var(--base-size-32);position:relative}.Primer_Brand__RiverAccordion-module__RiverAccordion__item___SheMX:not(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2) .Primer_Brand__RiverAccordion-module__RiverAccordion__heading___O56M6{color:var(--brand-color-text-muted)}.Primer_Brand__RiverAccordion-module__RiverAccordion__trigger___1RM50{color:inherit;cursor:pointer;font:inherit;text-align:left;width:100%;padding:0;padding:var(--base-size-4);margin:0;margin:calc(var(--base-size-4) * -1);background:0 0;border:none;justify-content:space-between;align-items:center;display:flex}.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2 .Primer_Brand__RiverAccordion-module__RiverAccordion__trigger___1RM50{cursor:auto;cursor:initial}.Primer_Brand__RiverAccordion-module__RiverAccordion__item___SheMX:not(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2) .Primer_Brand__RiverAccordion-module__RiverAccordion__trigger___1RM50:after{content:"";width:100%;height:100%;display:block;position:absolute}.Primer_Brand__RiverAccordion-module__RiverAccordion__panel___Y4GUN{transition:grid-template-rows var(--brand-animation-duration-default) var(--brand-animation-easing-default), margin-block-start var(--brand-animation-duration-default) var(--brand-animation-easing-default), padding-block-end var(--brand-animation-duration-default) var(--brand-animation-easing-default);grid-template-rows:0fr;margin-block-start:var(--base-size-32);display:grid;overflow-y:clip}.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2 .Primer_Brand__RiverAccordion-module__RiverAccordion__panel___Y4GUN{grid-template-rows:1fr;margin-block-start:var(--base-size-12);padding-block-end:var(--base-size-32)}.Primer_Brand__RiverAccordion-module__RiverAccordion__content___87sh8{align-items:flex-start;gap:var(--base-size-20);flex-direction:column;min-height:0;display:flex}.Primer_Brand__RiverAccordion-module__RiverAccordion__icon___FMAZH{color:var(--brand-color-text-muted);flex-shrink:0;align-items:center;display:flex}.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2 .Primer_Brand__RiverAccordion-module__RiverAccordion__icon___FMAZH{color:var(--brand-color-text-default)}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import './RiverAccordion.module-
|
|
1
|
+
import './RiverAccordion.module-nlZZH3O7.css';var e = {
|
|
2
2
|
RiverAccordion: "Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB",
|
|
3
3
|
"RiverAccordion__align-start": "Primer_Brand__RiverAccordion-module__RiverAccordion__align-start___wbXB3",
|
|
4
4
|
"RiverAccordion__align-end": "Primer_Brand__RiverAccordion-module__RiverAccordion__align-end___Zq4qJ",
|
|
5
5
|
"RiverAccordion--variant-gridline": "Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4",
|
|
6
6
|
RiverAccordion__visualsWrapper: "Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6",
|
|
7
|
-
|
|
7
|
+
"RiverAccordion__visual--has-background": "Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB",
|
|
8
8
|
RiverAccordion__visualsContainer: "Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx",
|
|
9
|
+
RiverAccordion__accordionContainer: "Primer_Brand__RiverAccordion-module__RiverAccordion__accordionContainer___a80ds",
|
|
9
10
|
RiverAccordion__visual: "Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob",
|
|
10
11
|
"RiverAccordion__item--open": "Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2",
|
|
11
12
|
RiverAccordion__item: "Primer_Brand__RiverAccordion-module__RiverAccordion__item___SheMX",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RiverAccordion.module.js","names":[],"sources":["../../../src/river/RiverAccordion/RiverAccordion.module.css"],"sourcesContent":[".RiverAccordion {\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: auto auto;\n grid-template-areas:\n 'visual'\n 'accordion';\n gap: 0;\n position: relative;\n}\n\n@media (min-width: 48rem) {\n .RiverAccordion {\n --gap-width: var(--brand-Grid-spacing-column-gap);\n --column-and-gap-width: calc((100% + var(--gap-width)) / 12);\n\n --4-grid-columns: calc(4 * var(--column-and-gap-width));\n --7-grid-columns-minus-last-gap: calc((7 * var(--column-and-gap-width)) - var(--gap-width));\n\n grid-template-rows: auto;\n gap: var(--column-and-gap-width);\n }\n\n .RiverAccordion__align-start {\n grid-template-columns: var(--4-grid-columns) var(--7-grid-columns-minus-last-gap);\n grid-template-areas: 'accordion visual';\n }\n\n .RiverAccordion__align-end {\n grid-template-columns: var(--7-grid-columns-minus-last-gap) var(--4-grid-columns);\n grid-template-areas: 'visual accordion';\n }\n}\n\n/* Gridline variant */\n\n.RiverAccordion--variant-gridline {\n position: relative;\n padding-inline: var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);\n padding-block: var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock);\n}\n\n@media (min-width: 48rem) {\n .RiverAccordion--variant-gridline {\n --gap-width: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);\n --half-column: calc(50% - var(--gap-width) / 2);\n\n gap: var(--gap-width);\n align-items: center;\n }\n\n .RiverAccordion--variant-gridline.RiverAccordion__align-start {\n grid-template-columns: var(--half-column) var(--half-column);\n grid-template-areas: 'accordion visual';\n }\n\n .RiverAccordion--variant-gridline.RiverAccordion__align-end {\n grid-template-columns: var(--half-column) var(--half-column);\n grid-template-areas: 'visual accordion';\n }\n}\n\n@media (min-width: 80rem) {\n .RiverAccordion--variant-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper {\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.RiverAccordion__accordionContainer {\n grid-area: accordion;\n}\n\n.RiverAccordion__visualsContainer {\n grid-area: visual;\n}\n\n.RiverAccordion__visualsWrapper {\n width: 100%;\n overflow: hidden;\n border-radius: var(--brand-borderRadius-xlarge);\n display: grid;\n grid-template-columns: subgrid;\n grid-template-rows: subgrid;\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual {\n grid-column: 1;\n grid-row: 1;\n width: 100%;\n height: 100%;\n opacity: 0;\n scale: 1.05;\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n scale var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual > * {\n width: 100%;\n object-fit: contain;\n}\n\n/* Show the visual when the corresponding accordion item is open */\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(1)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(1),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(2)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(2),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(3)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(3),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(4)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(4),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(5)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(5),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(6)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(6),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(7)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(7),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(8)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(8),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(9)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(9),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(10)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(10),\n/* Just in case all accordions are somehow closed, show the first visual */\n.RiverAccordion:not(:has(.RiverAccordion__item--open)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(1) {\n opacity: 1;\n scale: 1;\n z-index: 1;\n}\n\n/* Visually hide visuals inside the accordion */\n.RiverAccordion__accordionContainer .RiverAccordion__visual {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n word-wrap: normal;\n border: 0;\n}\n\n.RiverAccordion__item {\n position: relative;\n padding-block-start: var(--base-size-32);\n border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.RiverAccordion__item:not(.RiverAccordion__item--open) .RiverAccordion__heading {\n color: var(--brand-color-text-muted);\n}\n\n.RiverAccordion__trigger {\n background: none;\n border: none;\n color: inherit;\n cursor: pointer;\n font: inherit;\n margin: 0;\n padding: 0;\n text-align: left;\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: var(--base-size-4);\n margin: calc(var(--base-size-4) * -1);\n}\n\n.RiverAccordion__item--open .RiverAccordion__trigger {\n cursor: initial;\n}\n\n.RiverAccordion__item:not(.RiverAccordion__item--open) .RiverAccordion__trigger::after {\n content: '';\n position: absolute;\n display: block;\n width: 100%;\n height: 100%;\n}\n\n.RiverAccordion__panel {\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n margin-block-start var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n padding-block-end var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n margin-block-start: var(--base-size-32);\n overflow-y: clip;\n}\n\n.RiverAccordion__item--open .RiverAccordion__panel {\n margin-block-start: var(--base-size-12);\n padding-block-end: var(--base-size-32);\n grid-template-rows: 1fr;\n}\n\n.RiverAccordion__content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n min-height: 0;\n gap: var(--base-size-20);\n}\n\n.RiverAccordion__icon {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n color: var(--brand-color-text-muted);\n}\n\n.RiverAccordion__item--open .RiverAccordion__icon {\n color: var(--brand-color-text-default);\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"RiverAccordion.module.js","names":[],"sources":["../../../src/river/RiverAccordion/RiverAccordion.module.css"],"sourcesContent":[".RiverAccordion {\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: auto auto;\n grid-template-areas:\n 'visual'\n 'accordion';\n gap: 0;\n position: relative;\n}\n\n@media (min-width: 48rem) {\n .RiverAccordion {\n --gap-width: var(--brand-Grid-spacing-column-gap);\n --column-and-gap-width: calc((100% + var(--gap-width)) / 12);\n\n --4-grid-columns: calc(4 * var(--column-and-gap-width));\n --7-grid-columns-minus-last-gap: calc((7 * var(--column-and-gap-width)) - var(--gap-width));\n\n grid-template-rows: auto;\n gap: var(--column-and-gap-width);\n }\n\n .RiverAccordion__align-start {\n grid-template-columns: var(--4-grid-columns) var(--7-grid-columns-minus-last-gap);\n grid-template-areas: 'accordion visual';\n }\n\n .RiverAccordion__align-end {\n grid-template-columns: var(--7-grid-columns-minus-last-gap) var(--4-grid-columns);\n grid-template-areas: 'visual accordion';\n }\n}\n\n/* Gridline variant */\n\n.RiverAccordion--variant-gridline {\n position: relative;\n padding-inline: var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);\n padding-block: var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock);\n}\n\n@media (min-width: 48rem) {\n .RiverAccordion--variant-gridline {\n --gap-width: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);\n --half-column: calc(50% - var(--gap-width) / 2);\n\n gap: var(--gap-width);\n align-items: center;\n }\n\n .RiverAccordion--variant-gridline.RiverAccordion__align-start {\n grid-template-columns: var(--half-column) var(--half-column);\n grid-template-areas: 'accordion visual';\n }\n\n .RiverAccordion--variant-gridline.RiverAccordion__align-end {\n grid-template-columns: var(--half-column) var(--half-column);\n grid-template-areas: 'visual accordion';\n }\n}\n\n@media (min-width: 80rem) {\n .RiverAccordion--variant-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper {\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) .RiverAccordion__visualsContainer {\n margin-inline: calc(-1 * var(--brand-RiverAccordion-variant-gridline-spacing-outerInline));\n margin-block-start: calc(-1 * var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock));\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper:has(.RiverAccordion__visual--has-background) {\n border-radius: 0;\n}\n\n.RiverAccordion__accordionContainer {\n grid-area: accordion;\n}\n\n.RiverAccordion__visualsContainer {\n grid-area: visual;\n}\n\n.RiverAccordion__visualsWrapper {\n width: 100%;\n overflow: hidden;\n border-radius: var(--brand-borderRadius-xlarge);\n display: grid;\n grid-template-columns: subgrid;\n grid-template-rows: subgrid;\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual {\n grid-column: 1;\n grid-row: 1;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n opacity: 0;\n scale: 1.05;\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n scale var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual > * {\n display: block;\n width: 100%;\n height: auto;\n overflow: hidden;\n border-radius: var(--brand-borderRadius-xlarge);\n object-fit: contain;\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual > * {\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual img,\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual picture,\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual video {\n display: block;\n width: 100%;\n height: auto;\n border-radius: inherit;\n object-fit: contain;\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual > * img,\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual > * video {\n display: block;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n object-fit: cover;\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--base-size-32);\n background: var(--brand-RiverAccordion-visual-background, var(--brand-color-canvas-subtle));\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background > * {\n display: flex;\n align-items: center;\n justify-content: center;\n max-width: 100%;\n height: auto;\n border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background img,\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background picture,\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background video {\n max-width: 100%;\n height: 100%;\n border-radius: var(--brand-borderRadius-large);\n}\n\n@media (min-width: 48rem) {\n .RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) {\n padding: 0;\n gap: 0;\n align-items: stretch;\n grid-template-columns: 1fr 1fr;\n }\n\n .RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) .RiverAccordion__accordionContainer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock)\n var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);\n }\n\n .RiverAccordion--variant-gridline.RiverAccordion__align-start:has(.RiverAccordion__visual--has-background)\n .RiverAccordion__accordionContainer {\n padding-inline-end: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);\n }\n\n .RiverAccordion--variant-gridline.RiverAccordion__align-end:has(.RiverAccordion__visual--has-background)\n .RiverAccordion__accordionContainer {\n padding-inline-start: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);\n }\n\n .RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) .RiverAccordion__visualsContainer {\n margin: 0;\n }\n\n .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper:has(.RiverAccordion__visual--has-background) {\n height: 100%;\n }\n\n .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background {\n align-items: center;\n justify-content: center;\n padding: var(--base-size-64);\n }\n\n .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background > *,\n .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background img,\n .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background picture,\n .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background video {\n border-radius: var(--brand-borderRadius-large);\n }\n}\n\n/* Show the visual when the corresponding accordion item is open */\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(1)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(1),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(2)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(2),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(3)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(3),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(4)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(4),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(5)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(5),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(6)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(6),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(7)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(7),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(8)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(8),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(9)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(9),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(10)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(10),\n/* Just in case all accordions are somehow closed, show the first visual */\n.RiverAccordion:not(:has(.RiverAccordion__item--open)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(1) {\n opacity: 1;\n scale: 1;\n z-index: 1;\n}\n\n/* Visually hide visuals inside the accordion */\n.RiverAccordion__accordionContainer .RiverAccordion__visual {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n word-wrap: normal;\n border: 0;\n}\n\n.RiverAccordion__item {\n position: relative;\n padding-block-start: var(--base-size-32);\n border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.RiverAccordion__item:not(.RiverAccordion__item--open) .RiverAccordion__heading {\n color: var(--brand-color-text-muted);\n}\n\n.RiverAccordion__trigger {\n background: none;\n border: none;\n color: inherit;\n cursor: pointer;\n font: inherit;\n margin: 0;\n padding: 0;\n text-align: left;\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: var(--base-size-4);\n margin: calc(var(--base-size-4) * -1);\n}\n\n.RiverAccordion__item--open .RiverAccordion__trigger {\n cursor: initial;\n}\n\n.RiverAccordion__item:not(.RiverAccordion__item--open) .RiverAccordion__trigger::after {\n content: '';\n position: absolute;\n display: block;\n width: 100%;\n height: 100%;\n}\n\n.RiverAccordion__panel {\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n margin-block-start var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n padding-block-end var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n margin-block-start: var(--base-size-32);\n overflow-y: clip;\n}\n\n.RiverAccordion__item--open .RiverAccordion__panel {\n margin-block-start: var(--base-size-12);\n padding-block-end: var(--base-size-32);\n grid-template-rows: 1fr;\n}\n\n.RiverAccordion__content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n min-height: 0;\n gap: var(--base-size-20);\n}\n\n.RiverAccordion__icon {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n color: var(--brand-color-text-muted);\n}\n\n.RiverAccordion__item--open .RiverAccordion__icon {\n color: var(--brand-color-text-default);\n}\n"],"mappings":""}
|
|
@@ -4,7 +4,7 @@ export type HeroAlign = (typeof HeroAlignOptions)[number];
|
|
|
4
4
|
export declare const HeroVariantOptions: readonly ["default", "gridline", "gridline-expressive"];
|
|
5
5
|
export type HeroVariant = (typeof HeroVariantOptions)[number];
|
|
6
6
|
export declare const heroMediaPositions: readonly ["block-end", "block-end-padded", "inline-start", "inline-end", "inline-end-padded", "inline-start-padded"];
|
|
7
|
-
export declare const heroMediaInlinePositions: ("
|
|
7
|
+
export declare const heroMediaInlinePositions: ("block-end" | "block-end-padded" | "inline-start" | "inline-end" | "inline-end-padded" | "inline-start-padded")[];
|
|
8
8
|
export type HeroMediaPositions = (typeof heroMediaPositions)[number];
|
|
9
9
|
export type HeroMediaInlinePositions = (typeof heroMediaInlinePositions)[number];
|
|
10
10
|
type HeroContextType = {
|