@primer/react-brand 0.68.0-rc.b6d410ef → 0.68.1-rc.90424ad4
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/Accordion/Accordion.d.ts +5 -2
- package/esm/Accordion/Accordion.d.ts.map +1 -1
- package/esm/Accordion/Accordion.js +92 -50
- package/esm/Accordion/Accordion.js.map +1 -1
- package/esm/Accordion/Accordion.module-COckontb.css +1 -0
- package/esm/Accordion/Accordion.module.js +7 -5
- package/esm/Accordion/Accordion.module.js.map +1 -1
- package/esm/Box/Box.d.ts +1 -1
- package/esm/Box/Box.d.ts.map +1 -1
- package/esm/Box/Box.module-ZdcUfGo-.css +1 -0
- package/esm/Box/Box.module.js +81 -1
- package/esm/Box/Box.module.js.map +1 -1
- package/esm/Card/{Card.module-OxFQdnTA.css → Card.module-DZZ8DN76.css} +1 -1
- package/esm/Card/Card.module.js +1 -1
- package/esm/Card/Card.module.js.map +1 -1
- package/esm/FAQ/FAQ.d.ts +2 -1
- package/esm/FAQ/FAQ.d.ts.map +1 -1
- package/esm/Hero/{Hero.module-DvYo_AtL.css → Hero.module-Cy82CEW3.css} +1 -1
- package/esm/Hero/Hero.module.js +1 -1
- package/esm/Hero/Hero.module.js.map +1 -1
- package/esm/Link/Link.d.ts +1 -1
- package/esm/Link/Link.d.ts.map +1 -1
- package/esm/Link/Link.js +37 -28
- package/esm/Link/Link.js.map +1 -1
- package/esm/LogoSuite/LogoSuite.js +1 -1
- package/esm/LogoSuite/LogoSuite.module-69Mthqju.css +1 -0
- package/esm/LogoSuite/LogoSuite.module.js +1 -1
- package/esm/LogoSuite/LogoSuite.module.js.map +1 -1
- package/esm/MediaPlaylist/MediaPlaylist.d.ts +77 -0
- package/esm/MediaPlaylist/MediaPlaylist.d.ts.map +1 -0
- package/esm/MediaPlaylist/MediaPlaylist.js +172 -0
- package/esm/MediaPlaylist/MediaPlaylist.js.map +1 -0
- package/esm/MediaPlaylist/MediaPlaylist.module-BU39a4-W.css +1 -0
- package/esm/MediaPlaylist/MediaPlaylist.module.js +30 -0
- package/esm/MediaPlaylist/MediaPlaylist.module.js.map +1 -0
- package/esm/MediaPlaylist/index.d.ts +2 -0
- package/esm/MediaPlaylist/index.d.ts.map +1 -0
- package/esm/MediaPlaylist/useMediaPlaylist.d.ts +84 -0
- package/esm/MediaPlaylist/useMediaPlaylist.d.ts.map +1 -0
- package/esm/MediaPlaylist/useMediaPlaylist.js +114 -0
- package/esm/MediaPlaylist/useMediaPlaylist.js.map +1 -0
- package/esm/Pagination/Pagination.d.ts +2 -5
- package/esm/Pagination/Pagination.d.ts.map +1 -1
- package/esm/Pagination/Pagination.js +94 -52
- package/esm/Pagination/Pagination.js.map +1 -1
- package/esm/Pagination/Pagination.module-DmKBSq7s.css +1 -0
- package/esm/Pagination/Pagination.module.js +9 -3
- package/esm/Pagination/Pagination.module.js.map +1 -1
- package/esm/Pagination/model.d.ts +2 -2
- package/esm/Pagination/model.d.ts.map +1 -1
- package/esm/Pagination/model.js.map +1 -1
- package/esm/PricingOptions/PricingOptions.d.ts +2 -1
- package/esm/PricingOptions/PricingOptions.d.ts.map +1 -1
- package/esm/PricingOptions/PricingOptions.js +46 -45
- package/esm/PricingOptions/PricingOptions.js.map +1 -1
- package/esm/Stack/Stack.d.ts +1 -1
- package/esm/Stack/Stack.d.ts.map +1 -1
- package/esm/Stack/Stack.module-BlpDkOqI.css +1 -0
- package/esm/Stack/Stack.module.js +17 -1
- package/esm/Stack/Stack.module.js.map +1 -1
- package/esm/SubNav/SubNav.d.ts.map +1 -1
- package/esm/SubNav/SubNav.js +17 -16
- package/esm/SubNav/SubNav.js.map +1 -1
- package/esm/SubNav/SubNav.module-D-gLr0JO.css +1 -0
- package/esm/SubNav/SubNav.module.js +1 -1
- package/esm/SubNav/SubNav.module.js.map +1 -1
- package/esm/Tabs/{Tabs.module-D8VFUDRe.css → Tabs.module-CK_p1qwC.css} +1 -1
- package/esm/Tabs/Tabs.module.js +1 -1
- package/esm/Tabs/Tabs.module.js.map +1 -1
- package/esm/TextCursorAnimation/TextCursorAnimation.d.ts +1 -0
- package/esm/TextCursorAnimation/TextCursorAnimation.d.ts.map +1 -1
- package/esm/TextCursorAnimation/TextCursorAnimation.js +1 -0
- package/esm/TextCursorAnimation/TextCursorAnimation.js.map +1 -1
- package/esm/TextCursorAnimation/{TextCursorAnimation.module-CkVDXNW5.css → TextCursorAnimation.module-BJLhwKrK.css} +1 -1
- package/esm/TextCursorAnimation/TextCursorAnimation.module.js +1 -1
- package/esm/TextCursorAnimation/TextCursorAnimation.module.js.map +1 -1
- package/esm/Tiles/Tiles.module-BOGZTY7t.css +1 -0
- package/esm/Tiles/Tiles.module.js +1 -1
- package/esm/Tiles/Tiles.module.js.map +1 -1
- package/esm/constants.d.ts +1 -1
- package/esm/constants.d.ts.map +1 -1
- package/esm/constants.js +2 -0
- package/esm/constants.js.map +1 -1
- package/esm/css/stylesheets.js +1 -1
- package/esm/index.d.ts +1 -0
- package/esm/index.d.ts.map +1 -1
- package/esm/index.esm.js +51 -50
- package/esm/packages/design-tokens/lib/design-tokens/css/tokens/base/size/size-6EfgMG7y.css +1 -0
- package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/logosuite/{colors-with-modes-n4fDsxWz.css → colors-with-modes-B8ia26TA.css} +1 -1
- package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/media-playlist/colors-with-modes-YId8eSZQ.css +1 -0
- package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/colors-with-modes-BODdIvrY.css +1 -0
- package/esm/recipes/Flexsuite/Details/FlexSuiteAIDetailsPlaylist/FlexSuiteAIDetailsPlaylist.content.d.ts +49 -0
- package/esm/recipes/Flexsuite/Details/FlexSuiteAIDetailsPlaylist/FlexSuiteAIDetailsPlaylist.content.d.ts.map +1 -0
- package/esm/recipes/Flexsuite/Details/FlexSuiteAIDetailsPlaylist/FlexSuiteAIDetailsPlaylist.d.ts +7 -0
- package/esm/recipes/Flexsuite/Details/FlexSuiteAIDetailsPlaylist/FlexSuiteAIDetailsPlaylist.d.ts.map +1 -0
- package/esm/recipes/Flexsuite/Details/index.d.ts +4 -0
- package/esm/recipes/Flexsuite/Details/index.d.ts.map +1 -0
- package/esm/recipes/Flexsuite/Overview/FlexSuiteAIOverview.d.ts.map +1 -1
- package/esm/river/RiverAccordion/RiverAccordion.js +1 -1
- package/esm/river/RiverAccordion/RiverAccordion.js.map +1 -1
- package/lib/Accordion/Accordion.d.ts +5 -2
- package/lib/Box/Box.d.ts +1 -1
- package/lib/FAQ/FAQ.d.ts +2 -1
- package/lib/Grid/Grid.d.ts +1 -1
- package/lib/Link/Link.d.ts +1 -1
- package/lib/MediaPlaylist/MediaPlaylist.d.ts +76 -0
- package/lib/MediaPlaylist/index.d.ts +1 -0
- package/lib/MediaPlaylist/useMediaPlaylist.d.ts +83 -0
- package/lib/Pagination/Pagination.d.ts +2 -5
- package/lib/Pagination/model.d.ts +2 -2
- package/lib/PricingOptions/PricingOptions.d.ts +2 -1
- package/lib/Stack/Stack.d.ts +1 -1
- package/lib/TextCursorAnimation/TextCursorAnimation.d.ts +1 -0
- package/lib/constants.d.ts +1 -1
- package/lib/css/main.css +1055 -391
- 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 +3 -1
- package/lib/design-tokens/css/tokens/base/typography/typography.css +1 -1
- package/lib/design-tokens/css/tokens/functional/animation/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/colors/global-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/colors/global.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/action-menu/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/anchor-nav/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/bento/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/blinking-cursor/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/breadcrumbs/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/card/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/card/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/comparison-table/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/comparison-table/comparison-table.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/eyebrow-banner.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/faq/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/faq/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/faq/faq.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/footer/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 +2 -2
- package/lib/design-tokens/css/tokens/functional/components/logosuite/colors.css +2 -2
- package/lib/design-tokens/css/tokens/functional/components/media-playlist/colors-with-modes.css +13 -0
- package/lib/design-tokens/css/tokens/functional/components/media-playlist/colors.css +8 -0
- package/lib/design-tokens/css/tokens/functional/components/pricing-options/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/pricing-options/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/pricing-options/pricing-options.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/prose/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/prose/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/river/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/river/river.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/river-story-scroll/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/section/section.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/statistic/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/sub-nav/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/sub-nav/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/subdomain-nav-bar/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/tabs/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/tabs/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/tabs/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/testimonial/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/testimonial/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/testimonial/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/colors-with-modes.css +13 -0
- package/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/colors.css +8 -0
- package/lib/design-tokens/css/tokens/functional/components/tiles/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/timeline/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/timeline/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/timeline/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/token/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/token/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/tooltip/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/tooltip/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/video-player/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/video-player/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/border.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/breakpoints.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/size-coarse.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/size-fine.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/size.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/viewport.css +1 -1
- package/lib/design-tokens/css/tokens/functional/typography/typography-responsive.css +1 -1
- package/lib/design-tokens/css/tokens/functional/typography/typography.css +1 -1
- package/lib/design-tokens/js/module/tokens/base/colors/light.js +1 -1
- package/lib/design-tokens/js/module/tokens/base/size/size.js +3 -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 +2 -2
- package/lib/design-tokens/js/module/tokens/functional/components/media-playlist/colors.js +15 -0
- package/lib/design-tokens/js/module/tokens/functional/components/pricing-options/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/pricing-options/pricing-options.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/prose/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/river/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/river/river.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/section/section.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/statistic/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/sub-nav/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/tabs/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/tabs/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/testimonial/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/testimonial/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/text-cursor-animation/colors.js +17 -0
- package/lib/design-tokens/js/module/tokens/functional/components/timeline/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/timeline/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/token/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/tooltip/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/video-player/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/border.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/breakpoints.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/size-coarse.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/size-fine.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/size.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/viewport.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/typography/typography-responsive.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/typography/typography.js +1 -1
- package/lib/design-tokens/js/tokens/base/colors/light.js +1 -1
- package/lib/design-tokens/js/tokens/base/size/size.js +3 -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 +2 -2
- package/lib/design-tokens/js/tokens/functional/components/media-playlist/colors.js +6 -0
- package/lib/design-tokens/js/tokens/functional/components/pricing-options/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/pricing-options/pricing-options.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/prose/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/river/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/river/river.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/section/section.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/statistic/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/sub-nav/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/tabs/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/tabs/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/testimonial/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/testimonial/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/text-cursor-animation/colors.js +6 -0
- package/lib/design-tokens/js/tokens/functional/components/timeline/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/timeline/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/token/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/tooltip/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/video-player/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/border.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/breakpoints.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/size-coarse.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/size-fine.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/size.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/viewport.js +1 -1
- package/lib/design-tokens/js/tokens/functional/typography/typography-responsive.js +1 -1
- package/lib/design-tokens/js/tokens/functional/typography/typography.js +1 -1
- package/lib/design-tokens/scss/tokens/base/colors/light.scss +1 -1
- package/lib/design-tokens/scss/tokens/base/size/size.scss +3 -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 +2 -2
- package/lib/design-tokens/scss/tokens/functional/components/media-playlist/colors.scss +5 -0
- package/lib/design-tokens/scss/tokens/functional/components/pricing-options/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/pricing-options/pricing-options.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/prose/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/river/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/river/river.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/section/section.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/statistic/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/sub-nav/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/tabs/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/tabs/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/testimonial/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/testimonial/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/text-cursor-animation/colors.scss +5 -0
- package/lib/design-tokens/scss/tokens/functional/components/timeline/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/timeline/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/token/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/tooltip/colors.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/components/video-player/base.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/size/border.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/size/breakpoints.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/size/size-coarse.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/size/size-fine.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/size/size.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/size/viewport.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/typography/typography-responsive.scss +1 -1
- package/lib/design-tokens/scss/tokens/functional/typography/typography.scss +1 -1
- package/lib/design-tokens/ts/tokens/base/colors/light.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/base/colors/light.js +1 -1
- package/lib/design-tokens/ts/tokens/base/size/size.d.ts +3 -1
- package/lib/design-tokens/ts/tokens/base/size/size.js +3 -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 +2 -2
- package/lib/design-tokens/ts/tokens/functional/components/media-playlist/colors.d.ts +15 -0
- package/lib/design-tokens/ts/tokens/functional/components/media-playlist/colors.js +12 -0
- package/lib/design-tokens/ts/tokens/functional/components/pricing-options/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/pricing-options/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/pricing-options/pricing-options.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/pricing-options/pricing-options.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/prose/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/prose/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/river/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/river/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/river/river.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/river/river.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/section/section.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/section/section.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/statistic/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/statistic/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/sub-nav/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/sub-nav/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/tabs/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/tabs/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/tabs/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/tabs/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/testimonial/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/testimonial/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/testimonial/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/testimonial/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/text-cursor-animation/colors.d.ts +17 -0
- package/lib/design-tokens/ts/tokens/functional/components/text-cursor-animation/colors.js +14 -0
- package/lib/design-tokens/ts/tokens/functional/components/timeline/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/timeline/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/timeline/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/timeline/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/token/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/token/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/tooltip/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/tooltip/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/video-player/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/video-player/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/border.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/border.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/breakpoints.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/breakpoints.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size-coarse.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size-coarse.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size-fine.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size-fine.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/viewport.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/viewport.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/typography/typography-responsive.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/typography/typography-responsive.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/typography/typography.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/typography/typography.js +1 -1
- package/lib/index.d.ts +1 -0
- package/lib/index.js +1 -1
- package/lib/recipes/Flexsuite/Details/FlexSuiteAIDetailsPlaylist/FlexSuiteAIDetailsPlaylist.content.d.ts +48 -0
- package/lib/recipes/Flexsuite/Details/FlexSuiteAIDetailsPlaylist/FlexSuiteAIDetailsPlaylist.d.ts +6 -0
- package/lib/recipes/Flexsuite/Details/index.d.ts +3 -0
- package/package.json +1 -1
- package/esm/Accordion/Accordion.module-D4diKFGj.css +0 -1
- package/esm/Box/Box.module-BgKMrzcY.css +0 -1
- package/esm/LogoSuite/LogoSuite.module-CWV4mJoG.css +0 -1
- package/esm/Pagination/Pagination.module-C7Z_pTFq.css +0 -1
- package/esm/Stack/Stack.module-ZIKnqNP_.css +0 -1
- package/esm/SubNav/SubNav.module-CFXuWNmS.css +0 -1
- package/esm/Tiles/Tiles.module-DVK0nMCy.css +0 -1
- package/esm/packages/design-tokens/lib/design-tokens/css/tokens/base/size/size-DBypfR6O.css +0 -1
- package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/pagination/colors-with-modes-C2GLM06X.css +0 -1
- package/lib/design-tokens/css/tokens/functional/components/pagination/colors-with-modes.css +0 -17
|
@@ -7,11 +7,13 @@ import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/compone
|
|
|
7
7
|
export type AccordionRootProps = DetailsHTMLAttributes<HTMLDetailsElement> & {
|
|
8
8
|
children: ReactElement<AccordionHeadingProps | AccordionContentProps>[];
|
|
9
9
|
variant?: 'default' | 'emphasis';
|
|
10
|
+
disableAnimation?: boolean;
|
|
10
11
|
handleOpen?: (isOpen: boolean) => void;
|
|
11
12
|
};
|
|
12
13
|
export declare const AccordionRoot: React.ForwardRefExoticComponent<React.DetailsHTMLAttributes<HTMLDetailsElement> & {
|
|
13
14
|
children: ReactElement<AccordionHeadingProps | AccordionContentProps>[];
|
|
14
15
|
variant?: "default" | "emphasis";
|
|
16
|
+
disableAnimation?: boolean;
|
|
15
17
|
handleOpen?: (isOpen: boolean) => void;
|
|
16
18
|
} & React.RefAttributes<HTMLDetailsElement>>;
|
|
17
19
|
export declare const AccordionToggleColors: readonly ["default", "blue", "coral", "green", "gray", "indigo", "lemon", "lime", "orange", "pink", "purple", "red", "teal", "yellow", "blue-purple", "green-blue", "pink-blue", "purple-red", "red-orange"];
|
|
@@ -33,13 +35,14 @@ export declare const AccordionHeading: React.ForwardRefExoticComponent<React.HTM
|
|
|
33
35
|
weight?: HeadingProps["weight"];
|
|
34
36
|
} & React.RefAttributes<HTMLHeadingElement>>;
|
|
35
37
|
export type AccordionContentProps = HTMLAttributes<HTMLElement>;
|
|
36
|
-
export declare const AccordionContent: ({ className, ...rest }: AccordionContentProps) => import("react/jsx-runtime").JSX.Element;
|
|
38
|
+
export declare const AccordionContent: ({ children, className, ...rest }: AccordionContentProps) => import("react/jsx-runtime").JSX.Element;
|
|
37
39
|
export declare const Accordion: React.ForwardRefExoticComponent<React.DetailsHTMLAttributes<HTMLDetailsElement> & {
|
|
38
40
|
children: ReactElement<AccordionHeadingProps | AccordionContentProps>[];
|
|
39
41
|
variant?: "default" | "emphasis";
|
|
42
|
+
disableAnimation?: boolean;
|
|
40
43
|
handleOpen?: (isOpen: boolean) => void;
|
|
41
44
|
} & React.RefAttributes<HTMLDetailsElement>> & {
|
|
42
|
-
Content: ({ className, ...rest }: AccordionContentProps) => import("react/jsx-runtime").JSX.Element;
|
|
45
|
+
Content: ({ children, className, ...rest }: AccordionContentProps) => import("react/jsx-runtime").JSX.Element;
|
|
43
46
|
Heading: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
|
|
44
47
|
as?: HeadingProps["as"];
|
|
45
48
|
reversedToggles?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../src/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../src/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAQZ,KAAK,qBAAqB,EAC1B,KAAK,cAAc,EAGnB,KAAK,YAAY,EAGlB,MAAM,OAAO,CAAA;AAGd,OAAO,EAAU,KAAK,YAAY,EAAC,MAAM,KAAK,CAAA;AAK9C;;GAEG;AACH,OAAO,6GAA6G,CAAA;AAKpH,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,CAAC,kBAAkB,CAAC,GAAG;IAC3E,QAAQ,EAAE,YAAY,CAAC,qBAAqB,GAAG,qBAAqB,CAAC,EAAE,CAAA;IACvE,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;CACvC,CAAA;AAkBD,eAAO,MAAM,aAAa;cAtBd,YAAY,CAAC,qBAAqB,GAAG,qBAAqB,CAAC,EAAE;cAC7D,SAAS,GAAG,UAAU;uBACb,OAAO;iBACb,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI;4CAkNvC,CAAA;AAED,eAAO,MAAM,qBAAqB,8MAAqC,CAAA;AAEvE,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IAChE,EAAE,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,CAAA;IACvB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,WAAW,CAAC,EAAE,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;IACpD,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAA;CAChC,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;SAXtB,YAAY,CAAC,IAAI,CAAC;sBACL,OAAO;kBACX,CAAC,OAAO,qBAAqB,EAAE,MAAM,CAAC;aAC3C,YAAY,CAAC,QAAQ,CAAC;4CAiChC,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;AAE/D,eAAO,MAAM,gBAAgB,GAAI,kCAAgC,qBAAqB,4CAIrF,CAAA;AAED,eAAO,MAAM,SAAS;cAxQV,YAAY,CAAC,qBAAqB,GAAG,qBAAqB,CAAC,EAAE;cAC7D,SAAS,GAAG,UAAU;uBACb,OAAO;iBACb,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI;;gDA+PyB,qBAAqB;;aAxC/E,YAAY,CAAC,IAAI,CAAC;0BACL,OAAO;sBACX,CAAC,OAAO,qBAAqB,EAAE,MAAM,CAAC;iBAC3C,YAAY,CAAC,QAAQ,CAAC;;CA2C4E,CAAA"}
|
|
@@ -2,73 +2,115 @@ import e from "../node_modules/clsx/dist/clsx.js";
|
|
|
2
2
|
import { BiColorGradients as t, Colors as n } from "../constants.js";
|
|
3
3
|
import { useProvidedRefOrCreate as r } from "../hooks/useRef.js";
|
|
4
4
|
import { Heading as i } from "../Heading/Heading.js";
|
|
5
|
-
import {
|
|
5
|
+
import { TriangleDownIcon as a } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
|
|
6
6
|
import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes-PcQKqJQI.css';/* empty css */
|
|
7
|
-
import
|
|
8
|
-
import { createContext as
|
|
7
|
+
import o from "./Accordion.module.js";
|
|
8
|
+
import { createContext as s, forwardRef as c, useCallback as l, useContext as u, useEffect as d, useMemo as f, useRef as p } from "react";
|
|
9
9
|
import { jsx as m, jsxs as h } from "react/jsx-runtime";
|
|
10
10
|
//#region src/Accordion/Accordion.tsx
|
|
11
|
-
var g =
|
|
12
|
-
let e =
|
|
11
|
+
var g = s(null), _ = () => {
|
|
12
|
+
let e = u(g);
|
|
13
13
|
if (e === null) throw Error("Unable to find Accordion provider. Did you forget to wrap your component in an Accordion?");
|
|
14
14
|
return e;
|
|
15
|
-
}, v =
|
|
16
|
-
let
|
|
15
|
+
}, v = c(({ children: t, className: n, variant: i = "default", disableAnimation: a = !1, open: s, onClick: c, onToggle: u, onKeyDown: h, handleOpen: _, ...v }, y) => {
|
|
16
|
+
let b = r(y), x = p(null), S = p(!1), C = f(() => ({ variant: i }), [i]), w = l((e) => {
|
|
17
|
+
let t = e.querySelector(`:scope > .${o.Accordion__content}`), n = t?.querySelector(`.${o["Accordion__content-inner"]}`);
|
|
18
|
+
if (!t || !n) return null;
|
|
19
|
+
let r = parseFloat(getComputedStyle(t).getPropertyValue("--brand-Accordion-content-offset")), i = Math.max(0, n.scrollHeight - (Number.isNaN(r) ? 0 : r));
|
|
20
|
+
return e.style.setProperty("--brand-Accordion-content-height", `${i}px`), t;
|
|
21
|
+
}, []), T = l(() => {
|
|
22
|
+
x.current &&= (clearTimeout(x.current), null);
|
|
23
|
+
}, []), E = l((e) => {
|
|
24
|
+
T();
|
|
25
|
+
let t = typeof window < "u" && typeof window.matchMedia == "function" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null;
|
|
26
|
+
if (t !== null && t.matches) {
|
|
27
|
+
e.open = !1, S.current = !1, e.classList.remove(o["Accordion--closing"]);
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
let n = w(e);
|
|
31
|
+
n && n.getBoundingClientRect(), S.current = !0, e.classList.add(o["Accordion--closing"]), x.current = setTimeout(() => {
|
|
32
|
+
e.open = !1, S.current = !1, e.classList.remove(o["Accordion--closing"]), x.current = null;
|
|
33
|
+
}, 300);
|
|
34
|
+
}, [T, w]), D = l((e) => {
|
|
17
35
|
let t = e;
|
|
18
|
-
o?.(t),
|
|
19
|
-
}, [
|
|
36
|
+
t.currentTarget.open && (T(), S.current = !1, t.currentTarget.classList.remove(o["Accordion--closing"]), w(t.currentTarget)), u?.(t), _?.(t.currentTarget.open);
|
|
37
|
+
}, [
|
|
38
|
+
T,
|
|
39
|
+
u,
|
|
40
|
+
_,
|
|
41
|
+
w
|
|
42
|
+
]), O = l((e) => {
|
|
43
|
+
if (c?.(e), e.defaultPrevented || a) return;
|
|
44
|
+
let t = e.currentTarget, n = e.target;
|
|
45
|
+
!(n instanceof Element) || !t.open || n.closest("summary")?.parentElement === t && (e.preventDefault(), S.current || E(t));
|
|
46
|
+
}, [
|
|
47
|
+
E,
|
|
48
|
+
a,
|
|
49
|
+
c
|
|
50
|
+
]), k = l((e) => {
|
|
20
51
|
let t = e;
|
|
21
|
-
|
|
22
|
-
let n =
|
|
23
|
-
t.key === "Escape" && n?.open && (n.open = !1, n.querySelector("summary")?.focus());
|
|
24
|
-
}, [c, _]);
|
|
25
|
-
return f(() => {
|
|
26
|
-
let e = _.current;
|
|
27
|
-
if (e) return e.addEventListener("toggle", y), e.addEventListener("keydown", b), () => {
|
|
28
|
-
e.removeEventListener("toggle", y), e.removeEventListener("keydown", b);
|
|
29
|
-
};
|
|
52
|
+
h?.(t);
|
|
53
|
+
let n = b.current;
|
|
54
|
+
t.key === "Escape" && n?.open && (T(), n.open = !1, S.current = !1, n.classList.remove(o["Accordion--closing"]), n.querySelector("summary")?.focus());
|
|
30
55
|
}, [
|
|
31
|
-
|
|
56
|
+
T,
|
|
57
|
+
h,
|
|
58
|
+
b
|
|
59
|
+
]);
|
|
60
|
+
return d(() => {
|
|
61
|
+
let e = b.current;
|
|
62
|
+
if (e) {
|
|
63
|
+
let t = e.querySelector(`.${o["Accordion__content-inner"]}`), n;
|
|
64
|
+
return e.open && w(e), typeof ResizeObserver < "u" && t && (n = new ResizeObserver(() => {
|
|
65
|
+
e.open && w(e);
|
|
66
|
+
}), n.observe(t)), e.addEventListener("toggle", D), e.addEventListener("keydown", k), () => {
|
|
67
|
+
T(), n?.disconnect(), e.removeEventListener("toggle", D), e.removeEventListener("keydown", k);
|
|
68
|
+
};
|
|
69
|
+
}
|
|
70
|
+
}, [
|
|
71
|
+
T,
|
|
72
|
+
D,
|
|
73
|
+
k,
|
|
32
74
|
b,
|
|
33
|
-
|
|
75
|
+
w
|
|
34
76
|
]), /* @__PURE__ */ m(g.Provider, {
|
|
35
|
-
value:
|
|
77
|
+
value: C,
|
|
36
78
|
children: /* @__PURE__ */ m("details", {
|
|
37
|
-
className: e(
|
|
38
|
-
ref:
|
|
39
|
-
open:
|
|
40
|
-
...
|
|
79
|
+
className: e(o.Accordion, o[`Accordion--${i}`], a && o["Accordion--disableAnimation"], n),
|
|
80
|
+
ref: b,
|
|
81
|
+
open: s,
|
|
82
|
+
...v,
|
|
83
|
+
onClick: O,
|
|
41
84
|
children: t
|
|
42
85
|
})
|
|
43
86
|
});
|
|
44
|
-
}), y = [...n, ...t], b =
|
|
45
|
-
let { variant:
|
|
87
|
+
}), y = [...n, ...t], b = c(({ children: t, className: n, as: r = "h4", toggleColor: s, reversedToggles: c, weight: l = "normal", ...u }, d) => {
|
|
88
|
+
let { variant: f } = _();
|
|
46
89
|
return /* @__PURE__ */ h("summary", {
|
|
47
|
-
className: e(
|
|
48
|
-
ref:
|
|
49
|
-
...
|
|
50
|
-
children: [
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
/* @__PURE__ */ m(i, {
|
|
57
|
-
as: r,
|
|
58
|
-
size: p === "emphasis" ? "6" : "subhead-large",
|
|
59
|
-
weight: u,
|
|
60
|
-
children: t
|
|
61
|
-
}),
|
|
62
|
-
/* @__PURE__ */ m("span", {
|
|
63
|
-
"aria-hidden": "true",
|
|
64
|
-
className: s["Accordion__summary--expanded"],
|
|
65
|
-
children: /* @__PURE__ */ m(o, { size: 24 })
|
|
90
|
+
className: e(o.Accordion__summary, c && o["Accordion__summary--reversed-toggles"], o[`Accordion__summary--${f}`], s && o[`Accordion__summary--toggleColor-${s}`], n),
|
|
91
|
+
ref: d,
|
|
92
|
+
...u,
|
|
93
|
+
children: [/* @__PURE__ */ m("span", {
|
|
94
|
+
"aria-hidden": "true",
|
|
95
|
+
className: o["Accordion__summary-toggle"],
|
|
96
|
+
children: /* @__PURE__ */ m(a, {
|
|
97
|
+
className: o["Accordion__summary-toggleIcon"],
|
|
98
|
+
size: 22
|
|
66
99
|
})
|
|
67
|
-
|
|
100
|
+
}), /* @__PURE__ */ m(i, {
|
|
101
|
+
as: r,
|
|
102
|
+
size: f === "emphasis" ? "6" : "subhead-large",
|
|
103
|
+
weight: l,
|
|
104
|
+
children: t
|
|
105
|
+
})]
|
|
68
106
|
});
|
|
69
|
-
}), x = ({
|
|
70
|
-
className: e(
|
|
71
|
-
...
|
|
107
|
+
}), x = ({ children: t, className: n, ...r }) => /* @__PURE__ */ m("section", {
|
|
108
|
+
className: e(o.Accordion__content, n),
|
|
109
|
+
...r,
|
|
110
|
+
children: /* @__PURE__ */ m("div", {
|
|
111
|
+
className: o["Accordion__content-inner"],
|
|
112
|
+
children: t
|
|
113
|
+
})
|
|
72
114
|
}), S = Object.assign(v, {
|
|
73
115
|
Content: x,
|
|
74
116
|
Heading: b
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","names":[],"sources":["../../src/Accordion/Accordion.tsx"],"sourcesContent":["import React, {\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useMemo,\n useEffect,\n type DetailsHTMLAttributes,\n type HTMLAttributes,\n type KeyboardEvent,\n type ReactElement,\n type RefObject,\n type ToggleEvent,\n} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Heading, type HeadingProps} from '../'\nimport {ChevronDownIcon, ChevronUpIcon} from '@primer/octicons-react'\nimport {Colors, BiColorGradients as Gradients} from '../constants'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Accordion.module.css'\n\nexport type AccordionRootProps = DetailsHTMLAttributes<HTMLDetailsElement> & {\n children: ReactElement<AccordionHeadingProps | AccordionContentProps>[]\n variant?: 'default' | 'emphasis'\n handleOpen?: (isOpen: boolean) => void\n}\n\ntype AccordionContextType = {\n variant: 'default' | 'emphasis'\n}\n\nconst AccordionContext = createContext<AccordionContextType | null>(null)\n\nconst useAccordionContext = (): AccordionContextType => {\n const context = useContext(AccordionContext)\n\n if (context === null) {\n throw new Error('Unable to find Accordion provider. Did you forget to wrap your component in an Accordion?')\n }\n\n return context\n}\n\nexport const AccordionRoot = forwardRef<HTMLDetailsElement, AccordionRootProps>(\n ({children, className, variant = 'default', open, onToggle, onKeyDown, handleOpen, ...rest}, forwardedRef) => {\n const ref = useProvidedRefOrCreate(forwardedRef as RefObject<HTMLDetailsElement | null>)\n const accordionContextValue = useMemo(() => ({variant}), [variant])\n\n const handleToggle = useCallback<(event: Event) => void>(\n event => {\n const toggleEvent = event as unknown as ToggleEvent<HTMLDetailsElement>\n onToggle?.(toggleEvent)\n handleOpen?.(toggleEvent.currentTarget.open)\n },\n [onToggle, handleOpen],\n )\n\n const handleKeyDown = useCallback<EventListener>(\n event => {\n const keyboardEvent = event as unknown as KeyboardEvent<HTMLDetailsElement>\n onKeyDown?.(keyboardEvent)\n\n const details = ref.current\n\n if (keyboardEvent.key === 'Escape' && details?.open) {\n details.open = false\n details.querySelector('summary')?.focus()\n }\n },\n [onKeyDown, ref],\n )\n\n useEffect(() => {\n const detailsElement = ref.current\n if (detailsElement) {\n detailsElement.addEventListener('toggle', handleToggle)\n detailsElement.addEventListener('keydown', handleKeyDown)\n\n return () => {\n detailsElement.removeEventListener('toggle', handleToggle)\n detailsElement.removeEventListener('keydown', handleKeyDown)\n }\n }\n }, [handleToggle, handleKeyDown, ref])\n\n return (\n <AccordionContext.Provider value={accordionContextValue}>\n <details\n className={clsx(styles.Accordion, styles[`Accordion--${variant}`], className)}\n ref={ref}\n open={open}\n {...rest}\n >\n {children}\n </details>\n </AccordionContext.Provider>\n )\n },\n)\n\nexport const AccordionToggleColors = [...Colors, ...Gradients] as const\n\nexport type AccordionHeadingProps = HTMLAttributes<HTMLElement> & {\n as?: HeadingProps['as']\n reversedToggles?: boolean\n toggleColor?: (typeof AccordionToggleColors)[number]\n weight?: HeadingProps['weight']\n}\n\n/**\n * TODO This type is incorrect\n * The ref is applied to the summary, not the heading, so the correct type is\n * `forwardRef<HTMLElement, AccordionHeadingProps>`\n */\nexport const AccordionHeading = forwardRef<HTMLHeadingElement, AccordionHeadingProps>(\n ({children, className, as = 'h4', toggleColor, reversedToggles, weight = 'normal', ...rest}, ref) => {\n const {variant} = useAccordionContext()\n\n return (\n <summary\n className={clsx(\n styles.Accordion__summary,\n reversedToggles && styles['Accordion__summary--reversed-toggles'],\n styles[`Accordion__summary--${variant}`],\n toggleColor && styles[`Accordion__summary--toggleColor-${toggleColor}`],\n className,\n )}\n ref={ref}\n {...rest}\n >\n <span aria-hidden=\"true\" className={styles['Accordion__summary--collapsed']}>\n <ChevronDownIcon size={24} />\n </span>\n <Heading as={as} size={variant === 'emphasis' ? '6' : 'subhead-large'} weight={weight}>\n {children}\n </Heading>\n <span aria-hidden=\"true\" className={styles['Accordion__summary--expanded']}>\n <ChevronUpIcon size={24} />\n </span>\n </summary>\n )\n },\n)\n\nexport type AccordionContentProps = HTMLAttributes<HTMLElement>\n\nexport const AccordionContent = ({className, ...rest}: AccordionContentProps) => (\n <section className={clsx(styles.Accordion__content, className)} {...rest} />\n)\n\nexport const Accordion = Object.assign(AccordionRoot, {Content: AccordionContent, Heading: AccordionHeading})\n"],"mappings":";;;;;;;;;;AAuCA,IAAM,IAAmB,EAA2C,KAAK,EAEnE,UAAkD;CACtD,IAAM,IAAU,EAAW,EAAiB;AAE5C,KAAI,MAAY,KACd,OAAU,MAAM,4FAA4F;AAG9G,QAAO;GAGI,IAAgB,GAC1B,EAAC,aAAU,cAAW,aAAU,WAAW,SAAM,aAAU,cAAW,eAAY,GAAG,KAAO,MAAiB;CAC5G,IAAM,IAAM,EAAuB,EAAqD,EAClF,IAAwB,SAAe,EAAC,YAAQ,GAAG,CAAC,EAAQ,CAAC,EAE7D,IAAe,GACnB,MAAS;EACP,IAAM,IAAc;AAEpB,EADA,IAAW,EAAY,EACvB,IAAa,EAAY,cAAc,KAAK;IAE9C,CAAC,GAAU,EAAW,CACvB,EAEK,IAAgB,GACpB,MAAS;EACP,IAAM,IAAgB;AACtB,MAAY,EAAc;EAE1B,IAAM,IAAU,EAAI;AAEpB,EAAI,EAAc,QAAQ,YAAY,GAAS,SAC7C,EAAQ,OAAO,IACf,EAAQ,cAAc,UAAU,EAAE,OAAO;IAG7C,CAAC,GAAW,EAAI,CACjB;AAeD,QAbA,QAAgB;EACd,IAAM,IAAiB,EAAI;AAC3B,MAAI,EAIF,QAHA,EAAe,iBAAiB,UAAU,EAAa,EACvD,EAAe,iBAAiB,WAAW,EAAc,QAE5C;AAEX,GADA,EAAe,oBAAoB,UAAU,EAAa,EAC1D,EAAe,oBAAoB,WAAW,EAAc;;IAG/D;EAAC;EAAc;EAAe;EAAI,CAAC,EAGpC,kBAAC,EAAiB,UAAlB;EAA2B,OAAO;YAChC,kBAAC,WAAD;GACE,WAAW,EAAK,EAAO,WAAW,EAAO,cAAc,MAAY,EAAU;GACxE;GACC;GACN,GAAI;GAEH;GACO,CAAA;EACgB,CAAA;EAGjC,EAEY,IAAwB,CAAC,GAAG,GAAQ,GAAG,EAAU,EAcjD,IAAmB,GAC7B,EAAC,aAAU,cAAW,QAAK,MAAM,gBAAa,oBAAiB,YAAS,UAAU,GAAG,KAAO,MAAQ;CACnG,IAAM,EAAC,eAAW,GAAqB;AAEvC,QACE,kBAAC,WAAD;EACE,WAAW,EACT,EAAO,oBACP,KAAmB,EAAO,yCAC1B,EAAO,uBAAuB,MAC9B,KAAe,EAAO,mCAAmC,MACzD,EACD;EACI;EACL,GAAI;YATN;GAWE,kBAAC,QAAD;IAAM,eAAY;IAAO,WAAW,EAAO;cACzC,kBAAC,GAAD,EAAiB,MAAM,IAAM,CAAA;IACxB,CAAA;GACP,kBAAC,GAAD;IAAa;IAAI,MAAM,MAAY,aAAa,MAAM;IAAyB;IAC5E;IACO,CAAA;GACV,kBAAC,QAAD;IAAM,eAAY;IAAO,WAAW,EAAO;cACzC,kBAAC,GAAD,EAAe,MAAM,IAAM,CAAA;IACtB,CAAA;GACC;;EAGf,EAIY,KAAoB,EAAC,cAAW,GAAG,QAC9C,kBAAC,WAAD;CAAS,WAAW,EAAK,EAAO,oBAAoB,EAAU;CAAE,GAAI;CAAQ,CAAA,EAGjE,IAAY,OAAO,OAAO,GAAe;CAAC,SAAS;CAAkB,SAAS;CAAiB,CAAC"}
|
|
1
|
+
{"version":3,"file":"Accordion.js","names":[],"sources":["../../src/Accordion/Accordion.tsx"],"sourcesContent":["import React, {\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n type DetailsHTMLAttributes,\n type HTMLAttributes,\n type KeyboardEvent,\n type MouseEventHandler,\n type ReactElement,\n type RefObject,\n type ToggleEvent,\n} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Heading, type HeadingProps} from '../'\nimport {TriangleDownIcon} from '@primer/octicons-react'\nimport {Colors, BiColorGradients as Gradients} from '../constants'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Accordion.module.css'\n\nexport type AccordionRootProps = DetailsHTMLAttributes<HTMLDetailsElement> & {\n children: ReactElement<AccordionHeadingProps | AccordionContentProps>[]\n variant?: 'default' | 'emphasis'\n disableAnimation?: boolean\n handleOpen?: (isOpen: boolean) => void\n}\n\ntype AccordionContextType = {\n variant: 'default' | 'emphasis'\n}\n\nconst AccordionContext = createContext<AccordionContextType | null>(null)\n\nconst useAccordionContext = (): AccordionContextType => {\n const context = useContext(AccordionContext)\n\n if (context === null) {\n throw new Error('Unable to find Accordion provider. Did you forget to wrap your component in an Accordion?')\n }\n\n return context\n}\n\nexport const AccordionRoot = forwardRef<HTMLDetailsElement, AccordionRootProps>(\n (\n {\n children,\n className,\n variant = 'default',\n disableAnimation = false,\n open,\n onClick,\n onToggle,\n onKeyDown,\n handleOpen,\n ...rest\n },\n forwardedRef,\n ) => {\n const ref = useProvidedRefOrCreate(forwardedRef as RefObject<HTMLDetailsElement | null>)\n const closeAnimationTimeout = useRef<ReturnType<typeof setTimeout> | null>(null)\n const isClosingRef = useRef(false)\n const accordionContextValue = useMemo(() => ({variant}), [variant])\n\n const setContentHeight = useCallback((details: HTMLDetailsElement) => {\n const content = details.querySelector<HTMLElement>(`:scope > .${styles.Accordion__content}`)\n const contentInner = content?.querySelector<HTMLElement>(`.${styles['Accordion__content-inner']}`)\n\n if (!content || !contentInner) {\n return null\n }\n\n const contentOffset = parseFloat(getComputedStyle(content).getPropertyValue('--brand-Accordion-content-offset'))\n const contentHeight = Math.max(0, contentInner.scrollHeight - (Number.isNaN(contentOffset) ? 0 : contentOffset))\n\n details.style.setProperty('--brand-Accordion-content-height', `${contentHeight}px`)\n\n return content\n }, [])\n\n const clearCloseAnimation = useCallback(() => {\n if (closeAnimationTimeout.current) {\n clearTimeout(closeAnimationTimeout.current)\n closeAnimationTimeout.current = null\n }\n }, [])\n\n const closeWithAnimation = useCallback(\n (details: HTMLDetailsElement) => {\n clearCloseAnimation()\n const reducedMotionQuery =\n typeof window !== 'undefined' && typeof window.matchMedia === 'function'\n ? window.matchMedia('(prefers-reduced-motion: reduce)')\n : null\n const prefersReducedMotion = reducedMotionQuery !== null && reducedMotionQuery.matches\n\n if (prefersReducedMotion) {\n details.open = false\n isClosingRef.current = false\n details.classList.remove(styles['Accordion--closing'])\n return\n }\n\n const content = setContentHeight(details)\n\n if (content) {\n content.getBoundingClientRect()\n }\n\n isClosingRef.current = true\n details.classList.add(styles['Accordion--closing'])\n\n closeAnimationTimeout.current = setTimeout(() => {\n details.open = false\n isClosingRef.current = false\n details.classList.remove(styles['Accordion--closing'])\n closeAnimationTimeout.current = null\n }, 300)\n },\n [clearCloseAnimation, setContentHeight],\n )\n\n const handleToggle = useCallback<(event: Event) => void>(\n event => {\n const toggleEvent = event as unknown as ToggleEvent<HTMLDetailsElement>\n if (toggleEvent.currentTarget.open) {\n clearCloseAnimation()\n isClosingRef.current = false\n toggleEvent.currentTarget.classList.remove(styles['Accordion--closing'])\n setContentHeight(toggleEvent.currentTarget)\n }\n onToggle?.(toggleEvent)\n handleOpen?.(toggleEvent.currentTarget.open)\n },\n [clearCloseAnimation, onToggle, handleOpen, setContentHeight],\n )\n\n const handleClick = useCallback<MouseEventHandler<HTMLDetailsElement>>(\n event => {\n onClick?.(event)\n\n if (event.defaultPrevented || disableAnimation) {\n return\n }\n\n const details = event.currentTarget\n const target = event.target\n\n if (!(target instanceof Element) || !details.open) {\n return\n }\n\n const summary = target.closest('summary')\n\n if (summary?.parentElement === details) {\n event.preventDefault()\n\n if (!isClosingRef.current) {\n closeWithAnimation(details)\n }\n }\n },\n [closeWithAnimation, disableAnimation, onClick],\n )\n\n const handleKeyDown = useCallback<EventListener>(\n event => {\n const keyboardEvent = event as unknown as KeyboardEvent<HTMLDetailsElement>\n onKeyDown?.(keyboardEvent)\n\n const details = ref.current\n\n if (keyboardEvent.key === 'Escape' && details?.open) {\n clearCloseAnimation()\n details.open = false\n isClosingRef.current = false\n details.classList.remove(styles['Accordion--closing'])\n details.querySelector('summary')?.focus()\n }\n },\n [clearCloseAnimation, onKeyDown, ref],\n )\n\n useEffect(() => {\n const detailsElement = ref.current\n if (detailsElement) {\n const contentInner = detailsElement.querySelector<HTMLElement>(`.${styles['Accordion__content-inner']}`)\n let resizeObserver: ResizeObserver | undefined\n\n if (detailsElement.open) {\n setContentHeight(detailsElement)\n }\n\n if (typeof ResizeObserver !== 'undefined' && contentInner) {\n resizeObserver = new ResizeObserver(() => {\n if (detailsElement.open) {\n setContentHeight(detailsElement)\n }\n })\n resizeObserver.observe(contentInner)\n }\n\n detailsElement.addEventListener('toggle', handleToggle)\n detailsElement.addEventListener('keydown', handleKeyDown)\n\n return () => {\n clearCloseAnimation()\n resizeObserver?.disconnect()\n detailsElement.removeEventListener('toggle', handleToggle)\n detailsElement.removeEventListener('keydown', handleKeyDown)\n }\n }\n }, [clearCloseAnimation, handleToggle, handleKeyDown, ref, setContentHeight])\n\n return (\n <AccordionContext.Provider value={accordionContextValue}>\n {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events -- summary is natively keyboard-operable and keyboard activation also fires click; onClick only intercepts to animate the close */}\n <details\n className={clsx(\n styles.Accordion,\n styles[`Accordion--${variant}`],\n disableAnimation && styles['Accordion--disableAnimation'],\n className,\n )}\n ref={ref}\n open={open}\n {...rest}\n onClick={handleClick}\n >\n {children}\n </details>\n </AccordionContext.Provider>\n )\n },\n)\n\nexport const AccordionToggleColors = [...Colors, ...Gradients] as const\n\nexport type AccordionHeadingProps = HTMLAttributes<HTMLElement> & {\n as?: HeadingProps['as']\n reversedToggles?: boolean\n toggleColor?: (typeof AccordionToggleColors)[number]\n weight?: HeadingProps['weight']\n}\n\n/**\n * TODO This type is incorrect\n * The ref is applied to the summary, not the heading, so the correct type is\n * `forwardRef<HTMLElement, AccordionHeadingProps>`\n */\nexport const AccordionHeading = forwardRef<HTMLHeadingElement, AccordionHeadingProps>(\n ({children, className, as = 'h4', toggleColor, reversedToggles, weight = 'normal', ...rest}, ref) => {\n const {variant} = useAccordionContext()\n\n return (\n <summary\n className={clsx(\n styles.Accordion__summary,\n reversedToggles && styles['Accordion__summary--reversed-toggles'],\n styles[`Accordion__summary--${variant}`],\n toggleColor && styles[`Accordion__summary--toggleColor-${toggleColor}`],\n className,\n )}\n ref={ref}\n {...rest}\n >\n <span aria-hidden=\"true\" className={styles['Accordion__summary-toggle']}>\n <TriangleDownIcon className={styles['Accordion__summary-toggleIcon']} size={22} />\n </span>\n <Heading as={as} size={variant === 'emphasis' ? '6' : 'subhead-large'} weight={weight}>\n {children}\n </Heading>\n </summary>\n )\n },\n)\n\nexport type AccordionContentProps = HTMLAttributes<HTMLElement>\n\nexport const AccordionContent = ({children, className, ...rest}: AccordionContentProps) => (\n <section className={clsx(styles.Accordion__content, className)} {...rest}>\n <div className={styles['Accordion__content-inner']}>{children}</div>\n </section>\n)\n\nexport const Accordion = Object.assign(AccordionRoot, {Content: AccordionContent, Heading: AccordionHeading})\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.Primer_Brand__Accordion-module__Accordion___RSoMC{--brand-Accordion-content-height:0px;box-sizing:border-box;position:relative}.Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8:after,.Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8 .Primer_Brand__Accordion-module__Accordion__summary-toggleIcon___WFUk5,.Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8>.Primer_Brand__Accordion-module__Accordion__content___GhUVO,.Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{transition:none}.Primer_Brand__Accordion-module__Accordion--default___R_5ld{border-bottom:var(--brand-borderWidth-thin) solid var(--brand-Accordion-border-color-default)}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{background-color:var(--brand-color-canvas-subtle);border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-block:var(--base-size-20);padding-inline:var(--base-size-20);justify-content:flex-start;align-items:center;gap:0}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI:before{content:"";width:calc(var(--base-size-8) - 1px);height:var(--base-size-12);background-color:var(--brand-Accordion-indicator-idle);flex-shrink:0;margin-inline-end:var(--base-size-12);display:block}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI:hover:before{background-color:var(--brand-Accordion-indicator-hover)}details[open]>.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI:before{background-color:var(--brand-Accordion-indicator-active)}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h3,.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h4,.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h5,.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h6{font-family:var(--brand-fontStack-monospace);font-size:var(--brand-text-size-100);font-weight:var(--brand-text-weight-500);line-height:var(--brand-text-lineHeight-100);letter-spacing:.15px;text-transform:uppercase}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)+.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{border-block-start:none}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{padding-block-start:var(--base-size-12);padding-inline:var(--base-size-20)}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof:after{block-size:var(--base-size-12)}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT .Primer_Brand__Accordion-module__Accordion--default___R_5ld:last-child{border-bottom:none}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT .Primer_Brand__Accordion-module__Accordion--default___R_5ld:last-child:after{display:none}.Primer_Brand__Accordion-module__Accordion--default___R_5ld:after{content:"";background-color:var(--brand-Accordion-border-color-default);height:var(--brand-borderWidth-thin);transition:background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);transform-origin:50% 100%;width:100%;position:absolute;bottom:0;left:0;transform:scaleY(0)}.Primer_Brand__Accordion-module__Accordion--default___R_5ld:hover:after,details[open].Primer_Brand__Accordion-module__Accordion--default___R_5ld:after{background-color:var(--brand-color-accent-primary);transform:scaleY(1)}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{cursor:pointer;padding:var(--base-size-24) 0;justify-content:space-between;align-items:center;display:flex;position:relative}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC::-webkit-details-marker{display:none}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus)}details[open].Primer_Brand__Accordion-module__Accordion___RSoMC:has(>summary:focus-visible){outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}details[open].Primer_Brand__Accordion-module__Accordion___RSoMC>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC:focus-visible{outline:none}.Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{cursor:pointer;height:var(--base-size-24);width:var(--base-size-24);color:var(--brand-color-text-emphasized);justify-content:center;align-items:center;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC:not(.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W) .Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{right:0}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI .Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{color:var(--brand-color-text-default);order:1;margin-inline-start:auto;position:static;transform:none}.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W .Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{left:0}.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT .Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{color:var(--brand-Accordion-toggle-color-start,var(--brand-color-text-emphasized))}.Primer_Brand__Accordion-module__Accordion__summary-toggleIcon___WFUk5{transform-origin:50%;transition:transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide)}details[open]>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC .Primer_Brand__Accordion-module__Accordion__summary-toggleIcon___WFUk5{transform:rotate(-180deg)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-default___Hd_up{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-default)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-blue___TGA5S{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-blue)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-blue-purple___dnh9G{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-blue-purple-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-coral____IedP{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-coral)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-green___Q_oKN{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-green)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-green-blue___UPhxW{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-green-blue-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-gray___XAdlE{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-gray)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-indigo___MbEJo{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-indigo)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-lemon___yKljE{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-lemon)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-lime___dXlEo{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-lime)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-orange___DIqep{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-orange)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-pink___JQk2J{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-pink)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-pink-blue___8wMk6{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-pink-blue-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-purple___P3aRT{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-purple)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-purple-red___DuF8G{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-purple-red-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-red___uRFGS{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-red)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-red-orange___cmXlh{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-red-orange-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-teal___fE9fd{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-teal)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-yellow___ws5We{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-yellow)}.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT:not(.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W){padding-inline-end:var(--base-size-48)}.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W{padding-inline-start:var(--base-size-48)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO,.Primer_Brand__Accordion-module__Accordion__content___GhUVO p,.Primer_Brand__Accordion-module__Accordion__content___GhUVO span:not(.Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_),.Primer_Brand__Accordion-module__Accordion__content___GhUVO ul,.Primer_Brand__Accordion-module__Accordion__content___GhUVO ol{color:var(--brand-color-text-muted);font-family:var(--brand-fontStack-sansSerif);font-weight:var(--brand-text-weight-200);font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO{--brand-Accordion-content-offset:0px;max-height:0;transition:max-height var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);position:relative;overflow:hidden}.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{transform:translateY(calc(-1 * var(--brand-Accordion-content-offset)));opacity:0;transition:opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-glide)}.Primer_Brand__Accordion-module__Accordion--default___R_5ld>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{--brand-Accordion-content-offset:calc(var(--base-size-24) - var(--base-size-6));top:calc(var(--base-size-4) * -1)}.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT+.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof:before{content:"";block-size:var(--base-size-12);display:block}.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof:after{content:"";display:block}[data-color-mode=dark] .Primer_Brand__Accordion-module__Accordion__content___GhUVO{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:auto}.Primer_Brand__Accordion-module__Accordion__content___GhUVO p:not(:first-child){margin-block-start:var(--base-size-16)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a{color:var(--brand-InlineLink-color-rest);-webkit-text-decoration:underline;text-decoration:underline;-webkit-text-decoration-color:var(--brand-InlineLink-color-rest);text-decoration-color:var(--brand-InlineLink-color-rest);text-decoration-thickness:var(--brand-borderWidth-thin);text-underline-position:under;transition:var(--brand-InlineLink-transition-timing) text-decoration;position:relative}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a:hover{text-decoration-thickness:var(--brand-borderWidth-thick)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a,.Primer_Brand__Accordion-module__Accordion__content___GhUVO a>span{font-weight:inherit;color:var(--brand-InlineLink-color-rest)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a:active,.Primer_Brand__Accordion-module__Accordion__content___GhUVO a:active>span{color:var(--brand-InlineLink-color-pressed)}details[open]>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{max-height:var(--brand-Accordion-content-height);z-index:0;position:relative}details[open].Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{max-height:none}details[open]>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{opacity:1}details.Primer_Brand__Accordion-module__Accordion--closing___R_qJH>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{max-height:0}details.Primer_Brand__Accordion-module__Accordion--closing___R_qJH>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{opacity:0}.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT+.Primer_Brand__Accordion-module__Accordion__content___GhUVO,details[open]>.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT+.Primer_Brand__Accordion-module__Accordion__content___GhUVO,details.Primer_Brand__Accordion-module__Accordion--closing___R_qJH>.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT+.Primer_Brand__Accordion-module__Accordion__content___GhUVO{margin-block-start:0}details.Primer_Brand__Accordion-module__Accordion--closing___R_qJH>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC .Primer_Brand__Accordion-module__Accordion__summary-toggleIcon___WFUk5{transform:rotate(0)}details[open]>.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W+.Primer_Brand__Accordion-module__Accordion__content___GhUVO{padding-inline-start:var(--base-size-48)}@media screen and (width>=48rem){.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{gap:var(--base-size-40)}}@media (prefers-reduced-motion:reduce){.Primer_Brand__Accordion-module__Accordion___RSoMC,.Primer_Brand__Accordion-module__Accordion___RSoMC:before,.Primer_Brand__Accordion-module__Accordion___RSoMC:after,.Primer_Brand__Accordion-module__Accordion___RSoMC *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
|
|
@@ -1,13 +1,15 @@
|
|
|
1
|
-
import './Accordion.module-
|
|
1
|
+
import './Accordion.module-COckontb.css';var e = {
|
|
2
2
|
Accordion: "Primer_Brand__Accordion-module__Accordion___RSoMC",
|
|
3
|
+
"Accordion--disableAnimation": "Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8",
|
|
4
|
+
"Accordion__summary-toggleIcon": "Primer_Brand__Accordion-module__Accordion__summary-toggleIcon___WFUk5",
|
|
5
|
+
Accordion__content: "Primer_Brand__Accordion-module__Accordion__content___GhUVO",
|
|
6
|
+
"Accordion__content-inner": "Primer_Brand__Accordion-module__Accordion__content-inner___R4pof",
|
|
3
7
|
"Accordion--default": "Primer_Brand__Accordion-module__Accordion--default___R_5ld",
|
|
4
8
|
"Accordion--emphasis": "Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT",
|
|
5
9
|
Accordion__summary: "Primer_Brand__Accordion-module__Accordion__summary___zYOXC",
|
|
6
10
|
"Accordion__summary--emphasis": "Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI",
|
|
7
|
-
Accordion__content: "Primer_Brand__Accordion-module__Accordion__content___GhUVO",
|
|
8
11
|
"Accordion__summary--reversed-toggles": "Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W",
|
|
9
|
-
"Accordion__summary
|
|
10
|
-
"Accordion__summary--expanded": "Primer_Brand__Accordion-module__Accordion__summary--expanded___rUiGi",
|
|
12
|
+
"Accordion__summary-toggle": "Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_",
|
|
11
13
|
"Accordion__summary--default": "Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT",
|
|
12
14
|
"Accordion__summary--toggleColor-default": "Primer_Brand__Accordion-module__Accordion__summary--toggleColor-default___Hd_up",
|
|
13
15
|
"Accordion__summary--toggleColor-blue": "Primer_Brand__Accordion-module__Accordion__summary--toggleColor-blue___TGA5S",
|
|
@@ -28,7 +30,7 @@ import './Accordion.module-D4diKFGj.css';var e = {
|
|
|
28
30
|
"Accordion__summary--toggleColor-red-orange": "Primer_Brand__Accordion-module__Accordion__summary--toggleColor-red-orange___cmXlh",
|
|
29
31
|
"Accordion__summary--toggleColor-teal": "Primer_Brand__Accordion-module__Accordion__summary--toggleColor-teal___fE9fd",
|
|
30
32
|
"Accordion__summary--toggleColor-yellow": "Primer_Brand__Accordion-module__Accordion__summary--toggleColor-yellow___ws5We",
|
|
31
|
-
"
|
|
33
|
+
"Accordion--closing": "Primer_Brand__Accordion-module__Accordion--closing___R_qJH"
|
|
32
34
|
};
|
|
33
35
|
//#endregion
|
|
34
36
|
export { e as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.module.js","names":[],"sources":["../../src/Accordion/Accordion.module.css"],"sourcesContent":[".Accordion {\n box-sizing: border-box;\n position: relative;\n}\n\n.Accordion--default {\n border-bottom: var(--brand-borderWidth-thin) solid var(--brand-Accordion-border-color-default);\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__summary {\n background-color: var(--brand-color-canvas-subtle);\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n padding-block: var(--base-size-20);\n padding-inline: var(--base-size-20);\n gap: 0;\n justify-content: flex-start;\n align-items: center;\n}\n\n.Accordion__summary--emphasis::before {\n content: '';\n display: block;\n width: calc(var(--base-size-8) - 1px);\n height: var(--base-size-12);\n flex-shrink: 0;\n margin-inline-end: var(--base-size-12);\n background-color: var(--brand-Accordion-indicator-idle);\n}\n\n.Accordion__summary--emphasis:hover::before {\n background-color: var(--brand-Accordion-indicator-hover);\n}\n\ndetails[open] > .Accordion__summary--emphasis::before {\n background-color: var(--brand-Accordion-indicator-active);\n}\n\n.Accordion__summary--emphasis :is(h3, h4, h5, h6) {\n font-family: var(--brand-fontStack-monospace);\n font-size: var(--brand-text-size-100);\n font-weight: var(--brand-text-weight-500);\n line-height: var(--brand-text-lineHeight-100);\n letter-spacing: 0.15px;\n text-transform: uppercase;\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion)\n + .Accordion--emphasis:not(.Accordion .Accordion)\n > .Accordion__summary {\n border-block-start: none;\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__content {\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n padding-block-start: var(--base-size-12);\n padding-block-end: var(--base-size-12);\n padding-inline: var(--base-size-20);\n}\n\n.Accordion--emphasis .Accordion--default:last-child {\n border-bottom: none;\n}\n\n.Accordion--emphasis .Accordion--default:last-child::after {\n display: none;\n}\n\n.Accordion--default::after {\n content: '';\n background-color: var(--brand-Accordion-border-color-default);\n height: var(--brand-borderWidth-thin);\n transition: var(--brand-animation-duration-fast) transform;\n transform: scaleY(0);\n transform-origin: 50% 100%;\n width: 100%;\n position: absolute;\n bottom: 0;\n left: 0;\n}\n\n.Accordion--default:hover::after,\ndetails[open].Accordion--default::after {\n background-color: var(--brand-color-accent-primary);\n transform: scaleY(1);\n}\n\n.Accordion__summary {\n cursor: pointer;\n padding: var(--base-size-24) 0;\n position: relative;\n display: flex;\n justify-content: space-between;\n}\n\n.Accordion__summary--reversed-toggles {\n padding-inline-start: var(--base-size-48);\n}\n\n.Accordion__summary::-webkit-details-marker {\n display: none;\n}\n\n.Accordion__summary:focus-visible {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n}\n\n/* When open, move focus ring to the details element to wrap summary + content as one unit */\ndetails[open].Accordion:has(> summary:focus-visible) {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\ndetails[open].Accordion > .Accordion__summary:focus-visible {\n outline: none;\n}\n\n.Accordion__summary--collapsed,\n.Accordion__summary--expanded {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--base-size-24);\n width: var(--base-size-24);\n color: var(--brand-color-text-default);\n position: absolute;\n transition: opacity var(--brand-animation-duration-faster) ease;\n}\n\n.Accordion__summary:not(.Accordion__summary--reversed-toggles) .Accordion__summary--collapsed,\n.Accordion__summary:not(.Accordion__summary--reversed-toggles) .Accordion__summary--expanded {\n right: 0;\n}\n\n.Accordion__summary--emphasis .Accordion__summary--collapsed,\n.Accordion__summary--emphasis .Accordion__summary--expanded {\n position: static;\n order: 1;\n}\n\n.Accordion__summary--emphasis .Accordion__summary--collapsed {\n margin-inline-start: auto;\n}\n\n.Accordion__summary--emphasis .Accordion__summary--expanded {\n margin-inline-start: calc(-1 * var(--base-size-24));\n}\n\n.Accordion__summary--reversed-toggles .Accordion__summary--collapsed,\n.Accordion__summary--reversed-toggles .Accordion__summary--expanded {\n left: 0;\n}\n\n.Accordion__summary--default .Accordion__summary--collapsed,\n.Accordion__summary--default .Accordion__summary--expanded {\n color: var(--brand-Accordion-toggle-color-start, var(--brand-color-text-default));\n}\n\n.Accordion__summary--toggleColor-default {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-default);\n}\n\n.Accordion__summary--toggleColor-blue {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-blue);\n}\n\n.Accordion__summary--toggleColor-blue-purple {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-blue-purple-start);\n}\n\n.Accordion__summary--toggleColor-coral {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-coral);\n}\n\n.Accordion__summary--toggleColor-green {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-green);\n}\n\n.Accordion__summary--toggleColor-green-blue {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-green-blue-start);\n}\n\n.Accordion__summary--toggleColor-gray {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-gray);\n}\n\n.Accordion__summary--toggleColor-indigo {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-indigo);\n}\n\n.Accordion__summary--toggleColor-lemon {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-lemon);\n}\n\n.Accordion__summary--toggleColor-lime {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-lime);\n}\n\n.Accordion__summary--toggleColor-orange {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-orange);\n}\n\n.Accordion__summary--toggleColor-pink {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-pink);\n}\n\n.Accordion__summary--toggleColor-pink-blue {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-pink-blue-start);\n}\n\n.Accordion__summary--toggleColor-purple {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-purple);\n}\n\n.Accordion__summary--toggleColor-purple-red {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-purple-red-start);\n}\n\n.Accordion__summary--toggleColor-red {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-red);\n}\n\n.Accordion__summary--toggleColor-red-orange {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-red-orange-start);\n}\n\n.Accordion__summary--toggleColor-teal {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-teal);\n}\n\n.Accordion__summary--toggleColor-yellow {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-yellow);\n}\n\n.Accordion__summary.Accordion__summary--default .Accordion__summary--expanded {\n opacity: 0;\n}\n\n.Accordion__summary.Accordion__summary--emphasis .Accordion__summary--expanded {\n opacity: 0;\n}\n\ndetails[open] .Accordion__summary.Accordion__summary--emphasis .Accordion__summary--expanded {\n opacity: 1;\n}\n\ndetails[open] .Accordion__summary.Accordion__summary--emphasis .Accordion__summary--collapsed {\n opacity: 0;\n}\n\ndetails[open] > .Accordion__summary.Accordion__summary--default .Accordion__summary--expanded {\n opacity: 1;\n}\n\ndetails[open] > .Accordion__summary.Accordion__summary--default .Accordion__summary--collapsed {\n opacity: 0;\n}\n\n.Accordion__summary--default:not(.Accordion__summary--reversed-toggles) {\n padding-inline-end: var(--base-size-48);\n}\n\n.Accordion__summary--reversed-toggles {\n padding-inline-start: var(--base-size-48);\n}\n\n.Accordion__content,\n.Accordion__content p,\n.Accordion__content span:not(.Accordion__summary--expanded):not(.Accordion__summary--collapsed),\n.Accordion__content ul,\n.Accordion__content ol {\n color: var(--brand-color-text-muted);\n font-family: var(--brand-fontStack-sansSerif);\n font-weight: var(--brand-text-weight-200);\n font-size: var(--brand-text-size-200);\n line-height: var(--brand-text-lineHeight-200);\n}\n\n[data-color-mode='dark'] .Accordion__content {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: auto;\n}\n\n.Accordion__content p:not(:first-child) {\n margin-block-start: var(--base-size-16);\n}\n\n.Accordion__content a {\n color: var(--brand-InlineLink-color-rest);\n position: relative;\n text-decoration: underline;\n text-decoration-color: var(--brand-InlineLink-color-rest);\n text-decoration-thickness: var(--brand-borderWidth-thin);\n text-underline-position: under;\n transition: var(--brand-InlineLink-transition-timing) text-decoration;\n}\n\n.Accordion__content a:hover {\n text-decoration-thickness: var(--brand-borderWidth-thick);\n}\n\n.Accordion__content a,\n.Accordion__content a > span {\n font-weight: inherit;\n color: var(--brand-InlineLink-color-rest);\n}\n\n.Accordion__content a:active,\n.Accordion__content a:active > span {\n color: var(--brand-InlineLink-color-pressed);\n}\n\ndetails[open] > .Accordion__content {\n padding-bottom: var(--base-size-24);\n animation: fade-in 0.5s;\n position: relative;\n z-index: 0;\n}\n\n.Accordion__summary--default + .Accordion__content {\n margin-top: calc(var(--base-size-12) * -1); /* for 12px gap between question and answer */\n}\n\ndetails[open] > .Accordion__summary--reversed-toggles + .Accordion__content {\n padding-inline-start: var(--base-size-48);\n}\n\n/* Medium breakpoint and up */\n@media screen and (min-width: 48rem) {\n .Accordion__summary {\n gap: var(--base-size-40);\n }\n}\n\n@keyframes fade-in {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n .Accordion,\n .Accordion::before,\n .Accordion::after,\n .Accordion * {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"Accordion.module.js","names":[],"sources":["../../src/Accordion/Accordion.module.css"],"sourcesContent":[".Accordion {\n --brand-Accordion-content-height: 0px;\n\n box-sizing: border-box;\n position: relative;\n}\n\n.Accordion--disableAnimation::after,\n.Accordion--disableAnimation .Accordion__summary-toggleIcon,\n.Accordion--disableAnimation > .Accordion__content,\n.Accordion--disableAnimation > .Accordion__content > .Accordion__content-inner {\n transition: none;\n}\n\n.Accordion--default {\n border-bottom: var(--brand-borderWidth-thin) solid var(--brand-Accordion-border-color-default);\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__summary {\n background-color: var(--brand-color-canvas-subtle);\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n padding-block: var(--base-size-20);\n padding-inline: var(--base-size-20);\n gap: 0;\n justify-content: flex-start;\n align-items: center;\n}\n\n.Accordion__summary--emphasis::before {\n content: '';\n display: block;\n width: calc(var(--base-size-8) - 1px);\n height: var(--base-size-12);\n flex-shrink: 0;\n margin-inline-end: var(--base-size-12);\n background-color: var(--brand-Accordion-indicator-idle);\n}\n\n.Accordion__summary--emphasis:hover::before {\n background-color: var(--brand-Accordion-indicator-hover);\n}\n\ndetails[open] > .Accordion__summary--emphasis::before {\n background-color: var(--brand-Accordion-indicator-active);\n}\n\n.Accordion__summary--emphasis :is(h3, h4, h5, h6) {\n font-family: var(--brand-fontStack-monospace);\n font-size: var(--brand-text-size-100);\n font-weight: var(--brand-text-weight-500);\n line-height: var(--brand-text-lineHeight-100);\n letter-spacing: 0.15px;\n text-transform: uppercase;\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion)\n + .Accordion--emphasis:not(.Accordion .Accordion)\n > .Accordion__summary {\n border-block-start: none;\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__content {\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__content > .Accordion__content-inner {\n padding-block-start: var(--base-size-12);\n padding-inline: var(--base-size-20);\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__content > .Accordion__content-inner::after {\n block-size: var(--base-size-12);\n}\n\n.Accordion--emphasis .Accordion--default:last-child {\n border-bottom: none;\n}\n\n.Accordion--emphasis .Accordion--default:last-child::after {\n display: none;\n}\n\n.Accordion--default::after {\n content: '';\n background-color: var(--brand-Accordion-border-color-default);\n height: var(--brand-borderWidth-thin);\n transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide),\n transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n transform: scaleY(0);\n transform-origin: 50% 100%;\n width: 100%;\n position: absolute;\n bottom: 0;\n left: 0;\n}\n\n.Accordion--default:hover::after,\ndetails[open].Accordion--default::after {\n background-color: var(--brand-color-accent-primary);\n transform: scaleY(1);\n}\n\n.Accordion__summary {\n cursor: pointer;\n padding: var(--base-size-24) 0;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.Accordion__summary--reversed-toggles {\n padding-inline-start: var(--base-size-48);\n}\n\n.Accordion__summary::-webkit-details-marker {\n display: none;\n}\n\n.Accordion__summary:focus-visible {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n}\n\n/* When open, move focus ring to the details element to wrap summary + content as one unit */\ndetails[open].Accordion:has(> summary:focus-visible) {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\ndetails[open].Accordion > .Accordion__summary:focus-visible {\n outline: none;\n}\n\n.Accordion__summary-toggle {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--base-size-24);\n width: var(--base-size-24);\n color: var(--brand-color-text-emphasized);\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.Accordion__summary:not(.Accordion__summary--reversed-toggles) .Accordion__summary-toggle {\n right: 0;\n}\n\n.Accordion__summary--emphasis .Accordion__summary-toggle {\n position: static;\n transform: none;\n order: 1;\n margin-inline-start: auto;\n color: var(--brand-color-text-default);\n}\n\n.Accordion__summary--reversed-toggles .Accordion__summary-toggle {\n left: 0;\n}\n\n.Accordion__summary--default .Accordion__summary-toggle {\n color: var(--brand-Accordion-toggle-color-start, var(--brand-color-text-emphasized));\n}\n\n.Accordion__summary-toggleIcon {\n transform-origin: 50% 50%;\n transition: transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n}\n\ndetails[open] > .Accordion__summary .Accordion__summary-toggleIcon {\n transform: rotate(-180deg);\n}\n\n.Accordion__summary--toggleColor-default {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-default);\n}\n\n.Accordion__summary--toggleColor-blue {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-blue);\n}\n\n.Accordion__summary--toggleColor-blue-purple {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-blue-purple-start);\n}\n\n.Accordion__summary--toggleColor-coral {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-coral);\n}\n\n.Accordion__summary--toggleColor-green {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-green);\n}\n\n.Accordion__summary--toggleColor-green-blue {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-green-blue-start);\n}\n\n.Accordion__summary--toggleColor-gray {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-gray);\n}\n\n.Accordion__summary--toggleColor-indigo {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-indigo);\n}\n\n.Accordion__summary--toggleColor-lemon {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-lemon);\n}\n\n.Accordion__summary--toggleColor-lime {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-lime);\n}\n\n.Accordion__summary--toggleColor-orange {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-orange);\n}\n\n.Accordion__summary--toggleColor-pink {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-pink);\n}\n\n.Accordion__summary--toggleColor-pink-blue {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-pink-blue-start);\n}\n\n.Accordion__summary--toggleColor-purple {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-purple);\n}\n\n.Accordion__summary--toggleColor-purple-red {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-purple-red-start);\n}\n\n.Accordion__summary--toggleColor-red {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-red);\n}\n\n.Accordion__summary--toggleColor-red-orange {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-red-orange-start);\n}\n\n.Accordion__summary--toggleColor-teal {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-teal);\n}\n\n.Accordion__summary--toggleColor-yellow {\n --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-yellow);\n}\n\n.Accordion__summary--default:not(.Accordion__summary--reversed-toggles) {\n padding-inline-end: var(--base-size-48);\n}\n\n.Accordion__summary--reversed-toggles {\n padding-inline-start: var(--base-size-48);\n}\n\n.Accordion__content,\n.Accordion__content p,\n.Accordion__content span:not(.Accordion__summary-toggle),\n.Accordion__content ul,\n.Accordion__content ol {\n color: var(--brand-color-text-muted);\n font-family: var(--brand-fontStack-sansSerif);\n font-weight: var(--brand-text-weight-200);\n font-size: var(--brand-text-size-200);\n line-height: var(--brand-text-lineHeight-200);\n}\n\n.Accordion__content {\n --brand-Accordion-content-offset: 0px; /* we reference this in JS */\n overflow: hidden;\n max-height: 0;\n transition: max-height var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n position: relative;\n}\n\n.Accordion__content-inner {\n transform: translateY(calc(-1 * var(--brand-Accordion-content-offset)));\n opacity: 0;\n transition: opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n}\n\n.Accordion--default > .Accordion__content {\n --brand-Accordion-content-offset: calc(var(--base-size-24) - var(--base-size-6)); /* we reference this in JS */\n top: calc(var(--base-size-4) * -1);\n}\n\n.Accordion__summary--default + .Accordion__content > .Accordion__content-inner::before {\n content: '';\n display: block;\n block-size: var(--base-size-12);\n}\n\n.Accordion__content-inner::after {\n content: '';\n display: block;\n}\n\n[data-color-mode='dark'] .Accordion__content {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: auto;\n}\n\n.Accordion__content p:not(:first-child) {\n margin-block-start: var(--base-size-16);\n}\n\n.Accordion__content a {\n color: var(--brand-InlineLink-color-rest);\n position: relative;\n text-decoration: underline;\n text-decoration-color: var(--brand-InlineLink-color-rest);\n text-decoration-thickness: var(--brand-borderWidth-thin);\n text-underline-position: under;\n transition: var(--brand-InlineLink-transition-timing) text-decoration;\n}\n\n.Accordion__content a:hover {\n text-decoration-thickness: var(--brand-borderWidth-thick);\n}\n\n.Accordion__content a,\n.Accordion__content a > span {\n font-weight: inherit;\n color: var(--brand-InlineLink-color-rest);\n}\n\n.Accordion__content a:active,\n.Accordion__content a:active > span {\n color: var(--brand-InlineLink-color-pressed);\n}\n\ndetails[open] > .Accordion__content {\n max-height: var(--brand-Accordion-content-height);\n position: relative;\n z-index: 0;\n}\n\ndetails[open].Accordion--disableAnimation > .Accordion__content {\n max-height: none;\n}\n\ndetails[open] > .Accordion__content > .Accordion__content-inner {\n opacity: 1;\n}\n\ndetails.Accordion--closing > .Accordion__content {\n max-height: 0;\n}\n\ndetails.Accordion--closing > .Accordion__content > .Accordion__content-inner {\n opacity: 0;\n}\n\n.Accordion__summary--default + .Accordion__content {\n margin-block-start: 0;\n}\n\ndetails[open] > .Accordion__summary--default + .Accordion__content {\n margin-block-start: 0;\n}\n\ndetails.Accordion--closing > .Accordion__summary--default + .Accordion__content {\n margin-block-start: 0;\n}\n\ndetails.Accordion--closing > .Accordion__summary .Accordion__summary-toggleIcon {\n transform: rotate(0deg);\n}\n\ndetails[open] > .Accordion__summary--reversed-toggles + .Accordion__content {\n padding-inline-start: var(--base-size-48);\n}\n\n/* Medium breakpoint and up */\n@media screen and (min-width: 48rem) {\n .Accordion__summary {\n gap: var(--base-size-40);\n }\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n .Accordion,\n .Accordion::before,\n .Accordion::after,\n .Accordion * {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}
|
package/esm/Box/Box.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { PropsWithChildren } from 'react';
|
|
2
2
|
import { AnimateProps } from '../animation';
|
|
3
3
|
import type { BaseProps } from '../component-helpers';
|
|
4
|
-
export declare const BoxSpacingValues: readonly ["none", "condensed", "normal", "spacious", 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 64, 80, 96, 112, 128];
|
|
4
|
+
export declare const BoxSpacingValues: readonly ["none", "condensed", "normal", "spacious", 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 60, 64, 80, 88, 96, 112, 128];
|
|
5
5
|
type SpacingValues = (typeof BoxSpacingValues)[number];
|
|
6
6
|
type ResponsiveSpacingMap = {
|
|
7
7
|
narrow?: SpacingValues;
|
package/esm/Box/Box.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../src/Box/Box.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAC,iBAAiB,EAAU,MAAM,OAAO,CAAA;AACvD,OAAO,EAAC,YAAY,EAAe,MAAM,cAAc,CAAA;AACvD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAMnD,eAAO,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../src/Box/Box.tsx"],"names":[],"mappings":"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"}
|