npm - @primer/react-brand - Versions diffs - 0.72.0-rc.f273f08b → 0.72.0-rc.f8b72452 - Mend

@primer/react-brand 0.72.0-rc.f273f08b → 0.72.0-rc.f8b72452

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.

Files changed (400) hide show

package/esm/river/RiverAccordion/RiverAccordion.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RiverAccordion.module.js","names":[],"sources":["../../../src/river/RiverAccordion/RiverAccordion.module.css"],"sourcesContent":[".RiverAccordion {\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: auto auto;\n grid-template-areas:\n 'visual'\n 'accordion';\n gap: 0;\n position: relative;\n}\n\n@media (min-width: 48rem) {\n .RiverAccordion {\n --gap-width: var(--brand-Grid-spacing-column-gap);\n --column-and-gap-width: calc((100% + var(--gap-width)) / 12);\n\n --4-grid-columns: calc(4 * var(--column-and-gap-width));\n --7-grid-columns-minus-last-gap: calc((7 * var(--column-and-gap-width)) - var(--gap-width));\n\n grid-template-rows: auto;\n gap: var(--column-and-gap-width);\n }\n\n .RiverAccordion__align-start {\n grid-template-columns: var(--4-grid-columns) var(--7-grid-columns-minus-last-gap);\n grid-template-areas: 'accordion visual';\n }\n\n .RiverAccordion__align-end {\n grid-template-columns: var(--7-grid-columns-minus-last-gap) var(--4-grid-columns);\n grid-template-areas: 'visual accordion';\n }\n}\n\n/* Gridline variant /\n\n.RiverAccordion--variant-gridline {\n position: relative;\n padding-inline: var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);\n padding-block: var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock);\n}\n\n@media (min-width: 48rem) {\n .RiverAccordion--variant-gridline {\n --gap-width: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);\n --half-column: calc(50% - var(--gap-width) / 2);\n\n gap: var(--gap-width);\n align-items: center;\n }\n\n .RiverAccordion--variant-gridline.RiverAccordion__align-start {\n grid-template-columns: var(--half-column) var(--half-column);\n grid-template-areas: 'accordion visual';\n }\n\n .RiverAccordion--variant-gridline.RiverAccordion__align-end {\n grid-template-columns: var(--half-column) var(--half-column);\n grid-template-areas: 'visual accordion';\n }\n}\n\n@media (min-width: 80rem) {\n .RiverAccordion--variant-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper {\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) .RiverAccordion__visualsContainer {\n margin-inline: calc(-1 var(--brand-RiverAccordion-variant-gridline-spacing-outerInline));\n margin-block-start: calc(-1 * var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock));\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper:has(.RiverAccordion__visual--has-background) {\n border-radius: 0;\n}\n\n.RiverAccordion__accordionContainer {\n grid-area: accordion;\n}\n\n.RiverAccordion__visualsContainer {\n grid-area: visual;\n}\n\n.RiverAccordion__visualsWrapper {\n width: 100%;\n overflow: hidden;\n border-radius: var(--brand-borderRadius-xlarge);\n display: grid;\n grid-template-columns: subgrid;\n grid-template-rows: subgrid;\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual {\n grid-column: 1;\n grid-row: 1;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n opacity: 0;\n scale: 1.05;\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n scale var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual > * {\n display: block;\n width: 100%;\n height: auto;\n overflow: hidden;\n border-radius: var(--brand-borderRadius-xlarge);\n object-fit: contain;\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual > * {\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual img,\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual picture,\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual video {\n display: block;\n width: 100%;\n height: auto;\n border-radius: inherit;\n object-fit: contain;\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual > * img,\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual > * video {\n display: block;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n object-fit: cover;\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--base-size-32);\n background: var(--brand-RiverAccordion-visual-background, var(--brand-color-canvas-subtle));\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background > * {\n display: flex;\n align-items: center;\n justify-content: center;\n max-width: 100%;\n height: auto;\n border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background img,\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background picture,\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background video {\n max-width: 100%;\n height: 100%;\n border-radius: var(--brand-borderRadius-large);\n}\n\n@media (min-width: 48rem) {\n .RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) {\n padding: 0;\n gap: 0;\n align-items: stretch;\n grid-template-columns: 1fr 1fr;\n }\n\n .RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) .RiverAccordion__accordionContainer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock)\n var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);\n }\n\n .RiverAccordion--variant-gridline.RiverAccordion__align-start:has(.RiverAccordion__visual--has-background)\n .RiverAccordion__accordionContainer {\n padding-inline-end: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);\n }\n\n .RiverAccordion--variant-gridline.RiverAccordion__align-end:has(.RiverAccordion__visual--has-background)\n .RiverAccordion__accordionContainer {\n padding-inline-start: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);\n }\n\n .RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) .RiverAccordion__visualsContainer {\n margin: 0;\n }\n\n .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper:has(.RiverAccordion__visual--has-background) {\n height: 100%;\n }\n\n .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background {\n align-items: center;\n justify-content: center;\n padding: var(--base-size-64);\n }\n\n .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background > ,\n .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background img,\n .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background picture,\n .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background video {\n border-radius: var(--brand-borderRadius-large);\n }\n}\n\n/ Show the visual when the corresponding accordion item is open /\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(1)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(1),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(2)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(2),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(3)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(3),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(4)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(4),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(5)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(5),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(6)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(6),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(7)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(7),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(8)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(8),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(9)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(9),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(10)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(10),\n/ Just in case all accordions are somehow closed, show the first visual /\n.RiverAccordion:not(:has(.RiverAccordion__item--open)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(1) {\n opacity: 1;\n scale: 1;\n z-index: 1;\n}\n\n/ Visually hide visuals inside the accordion /\n.RiverAccordion__accordionContainer .RiverAccordion__visual {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n word-wrap: normal;\n border: 0;\n}\n\n.RiverAccordion__item {\n position: relative;\n padding-block-start: var(--base-size-32);\n border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.RiverAccordion__item:not(.RiverAccordion__item--open) .RiverAccordion__heading {\n color: var(--brand-color-text-muted);\n}\n\n.RiverAccordion__trigger {\n background: none;\n border: none;\n color: inherit;\n cursor: pointer;\n font: inherit;\n margin: 0;\n padding: 0;\n text-align: left;\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: var(--base-size-4);\n margin: calc(var(--base-size-4) -1);\n}\n\n.RiverAccordion__item--open .RiverAccordion__trigger {\n cursor: initial;\n}\n\n.RiverAccordion__item:not(.RiverAccordion__item--open) .RiverAccordion__trigger::after {\n content: '';\n position: absolute;\n display: block;\n width: 100%;\n height: 100%;\n}\n\n.RiverAccordion__panel {\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n margin-block-start var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n padding-block-end var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n margin-block-start: var(--base-size-32);\n overflow-y: clip;\n}\n\n.RiverAccordion__item--open .RiverAccordion__panel {\n margin-block-start: var(--base-size-12);\n padding-block-end: var(--base-size-32);\n grid-template-rows: 1fr;\n}\n\n.RiverAccordion__content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n min-height: 0;\n gap: var(--base-size-20);\n}\n\n.RiverAccordion__icon {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n color: var(--brand-color-text-muted);\n}\n\n.RiverAccordion__item--open .RiverAccordion__icon {\n color: var(--brand-color-text-default);\n}\n"],"mappings":""}
1	+ {"version":3,"file":"RiverAccordion.module.js","names":[],"sources":["../../../src/river/RiverAccordion/RiverAccordion.module.css"],"sourcesContent":[".RiverAccordion {\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: auto auto;\n grid-template-areas:\n 'visual'\n 'accordion';\n gap: 0;\n position: relative;\n}\n\n@media screen and (min-width: 63.25rem) {\n .RiverAccordion {\n --gap-width: var(--brand-Grid-spacing-column-gap);\n --column-and-gap-width: calc((100% + var(--gap-width)) / 12);\n\n --4-grid-columns: calc(4 * var(--column-and-gap-width));\n --7-grid-columns-minus-last-gap: calc((7 * var(--column-and-gap-width)) - var(--gap-width));\n\n grid-template-rows: auto;\n gap: var(--column-and-gap-width);\n }\n\n .RiverAccordion__align-start {\n grid-template-columns: var(--4-grid-columns) var(--7-grid-columns-minus-last-gap);\n grid-template-areas: 'accordion visual';\n }\n\n .RiverAccordion__align-end {\n grid-template-columns: var(--7-grid-columns-minus-last-gap) var(--4-grid-columns);\n grid-template-areas: 'visual accordion';\n }\n}\n\n/* Gridline variant /\n\n.RiverAccordion--variant-gridline {\n position: relative;\n padding-inline: var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);\n padding-block: var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock);\n}\n\n@media screen and (min-width: 63.25rem) {\n .RiverAccordion--variant-gridline {\n --gap-width: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);\n --half-column: calc(50% - var(--gap-width) / 2);\n\n gap: var(--gap-width);\n align-items: center;\n }\n\n .RiverAccordion--variant-gridline.RiverAccordion__align-start {\n grid-template-columns: var(--half-column) var(--half-column);\n grid-template-areas: 'accordion visual';\n }\n\n .RiverAccordion--variant-gridline.RiverAccordion__align-end {\n grid-template-columns: var(--half-column) var(--half-column);\n grid-template-areas: 'visual accordion';\n }\n}\n\n@media (min-width: 80rem) {\n .RiverAccordion--variant-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper {\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) .RiverAccordion__visualsContainer {\n margin-inline: calc(-1 var(--brand-RiverAccordion-variant-gridline-spacing-outerInline));\n margin-block-start: calc(-1 * var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock));\n}\n\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n .RiverAccordion {\n max-width: 618px;\n margin-inline: auto;\n }\n\n .RiverAccordion--variant-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper:has(.RiverAccordion__visual--has-background) {\n border-radius: 0;\n}\n\n.RiverAccordion__accordionContainer {\n grid-area: accordion;\n}\n\n.RiverAccordion__visualsContainer {\n grid-area: visual;\n}\n\n.RiverAccordion__visualsWrapper {\n width: 100%;\n overflow: hidden;\n border-radius: var(--brand-borderRadius-xlarge);\n display: grid;\n grid-template-columns: subgrid;\n grid-template-rows: subgrid;\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual {\n grid-column: 1;\n grid-row: 1;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n opacity: 0;\n scale: 1.05;\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n scale var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual > * {\n display: block;\n width: 100%;\n height: auto;\n overflow: hidden;\n border-radius: var(--brand-borderRadius-xlarge);\n object-fit: contain;\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual > * {\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual img,\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual picture,\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual video {\n display: block;\n width: 100%;\n height: auto;\n border-radius: inherit;\n object-fit: contain;\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual > * img,\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual > * video {\n display: block;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n object-fit: cover;\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--base-size-32);\n background: var(--brand-RiverAccordion-visual-background, var(--brand-color-canvas-subtle));\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background > * {\n display: flex;\n align-items: center;\n justify-content: center;\n max-width: 100%;\n height: auto;\n border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background img,\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background picture,\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background video {\n max-width: 100%;\n height: 100%;\n border-radius: var(--brand-borderRadius-large);\n}\n\n@media screen and (min-width: 63.25rem) {\n .RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) {\n padding: 0;\n gap: 0;\n align-items: stretch;\n grid-template-columns: 1fr 1fr;\n }\n\n .RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) .RiverAccordion__accordionContainer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock)\n var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);\n }\n\n .RiverAccordion--variant-gridline.RiverAccordion__align-start:has(.RiverAccordion__visual--has-background)\n .RiverAccordion__accordionContainer {\n padding-inline-end: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);\n }\n\n .RiverAccordion--variant-gridline.RiverAccordion__align-end:has(.RiverAccordion__visual--has-background)\n .RiverAccordion__accordionContainer {\n padding-inline-start: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);\n }\n\n .RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) .RiverAccordion__visualsContainer {\n margin: 0;\n }\n\n .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper:has(.RiverAccordion__visual--has-background) {\n height: 100%;\n }\n\n .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background {\n align-items: center;\n justify-content: center;\n padding: var(--base-size-64);\n }\n\n .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background > ,\n .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background img,\n .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background picture,\n .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background video {\n border-radius: var(--brand-borderRadius-large);\n }\n}\n\n/ Show the visual when the corresponding accordion item is open /\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(1)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(1),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(2)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(2),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(3)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(3),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(4)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(4),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(5)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(5),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(6)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(6),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(7)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(7),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(8)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(8),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(9)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(9),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(10)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(10),\n/ Just in case all accordions are somehow closed, show the first visual /\n.RiverAccordion:not(:has(.RiverAccordion__item--open)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(1) {\n opacity: 1;\n scale: 1;\n z-index: 1;\n}\n\n/ Visually hide visuals inside the accordion /\n.RiverAccordion__accordionContainer .RiverAccordion__visual {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n word-wrap: normal;\n border: 0;\n}\n\n.RiverAccordion__item {\n position: relative;\n padding-block-start: var(--base-size-32);\n border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n@media screen and (max-width: 63.24rem) {\n .RiverAccordion--variant-gridline .RiverAccordion__item:last-child {\n border-bottom: none;\n }\n}\n\n.RiverAccordion__item:not(.RiverAccordion__item--open) .RiverAccordion__heading {\n color: var(--brand-color-text-muted);\n}\n\n.RiverAccordion__trigger {\n background: none;\n border: none;\n color: inherit;\n cursor: pointer;\n font: inherit;\n margin: 0;\n padding: 0;\n text-align: left;\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: var(--base-size-4);\n margin: calc(var(--base-size-4) -1);\n}\n\n.RiverAccordion__item--open .RiverAccordion__trigger {\n cursor: initial;\n}\n\n.RiverAccordion__item:not(.RiverAccordion__item--open) .RiverAccordion__trigger::after {\n content: '';\n position: absolute;\n display: block;\n width: 100%;\n height: 100%;\n}\n\n.RiverAccordion__panel {\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n margin-block-start var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n padding-block-end var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n margin-block-start: var(--base-size-32);\n overflow-y: clip;\n}\n\n.RiverAccordion__item--open .RiverAccordion__panel {\n margin-block-start: var(--base-size-12);\n padding-block-end: var(--base-size-32);\n grid-template-rows: 1fr;\n}\n\n.RiverAccordion__content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n min-height: 0;\n gap: var(--base-size-20);\n}\n\n.RiverAccordion__icon {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n color: var(--brand-color-text-muted);\n}\n\n.RiverAccordion__item--open .RiverAccordion__icon {\n color: var(--brand-color-text-default);\n}\n"],"mappings":""}

package/esm/river/RiverBreakout/RiverBreakout.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import React from 'react';
 import { RiverProps } from '../River';
+import { type RiverVisualProps } from '../River/River';
 export declare const RiverBreakoutVariants: readonly ["default", "gridline"];
 export type RiverBreakoutVariant = (typeof RiverBreakoutVariants)[number];
 type RiverBreakoutProps = Omit<RiverProps, 'align' | 'imageTextRatio'> & {
@@ -10,7 +11,7 @@ type RiverBreakoutProps = Omit<RiverProps, 'align' | 'imageTextRatio'> & {
     variant?: RiverBreakoutVariant;
 };
 export declare const RiverBreakout: React.ForwardRefExoticComponent<Omit<RiverBreakoutProps, "ref"> & React.RefAttributes<HTMLElement>> & {
-    Visual: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<import("..").RiverVisualProps>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Visual: React.ForwardRefExoticComponent<Omit<RiverVisualProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Content: React.ForwardRefExoticComponent<Omit<import("..").RiverContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     A11yHeading: ({ as, children }: React.PropsWithChildren<{
         as?: "h2" | "h3";

package/esm/river/RiverBreakout/RiverBreakout.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RiverBreakout.d.ts","sourceRoot":"","sources":["../../../src/river/RiverBreakout/RiverBreakout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAE5C,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAA;~~AASnC~~,eAAO,MAAM,qBAAqB,kCAAmC,CAAA;AACrE,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEzE,KAAK,kBAAkB,GAAG,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,gBAAgB,CAAC,GAAG;IACvE;;;OAGG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA;~~AA6CD~~,eAAO,MAAM,aAAa;;;~~oCANkB~~,KAAK,CAAC,iBAAiB,CAAC;QAAC,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;KAAC,CAAC;~~CAMoB~~,CAAA"}
1	+ {"version":3,"file":"RiverBreakout.d.ts","sourceRoot":"","sources":["../../../src/river/RiverBreakout/RiverBreakout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAE5C,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAA;AACnC,OAAO,EAAsC,KAAK,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AAQzF,eAAO,MAAM,qBAAqB,kCAAmC,CAAA;AACrE,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEzE,KAAK,kBAAkB,GAAG,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,gBAAgB,CAAC,GAAG;IACvE;;;OAGG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B,CAAA;AA2DD,eAAO,MAAM,aAAa;;;oCAVkB,KAAK,CAAC,iBAAiB,CAAC;QAAC,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;KAAC,CAAC;CAUO,CAAA"}

package/esm/river/RiverBreakout/RiverBreakout.js CHANGED Viewed

@@ -5,31 +5,35 @@ import r from "../../component-helpers/shared.module.js";
 import i from "../river-shared.module.js";
 import { RiverContent as a, Visual as o } from "../River/River.js";
 import s from "../../findElementInChildren.js";
-import { forwardRef as c } from "react";
-import { jsx as l } from "react/jsx-runtime";
+import c, { forwardRef as l } from "react";
+import { jsx as u } from "react/jsx-runtime";
 //#region src/river/RiverBreakout/RiverBreakout.tsx
-var u = ["default", "gridline"], d = c(({ animate: n, className: a, children: o, style: c, variant: u = "default", ...d }, p) => {
-	let { classes: m, styles: h } = t(n), g = s(o, "b") || s(o, "em") ? "muted" : "default";
-	return s(o, f) || (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("RiverBreakout: A11yHeading child is required. This element will not be visible, only read by screenreaders."), /* @__PURE__ */ l("section", {
-		ref: p,
-		className: e(i.RiverBreakout, u === "gridline" && i["RiverBreakout--variant-gridline"], u === "gridline" && r.gridline, g === "muted" && i["RiverBreakout--muted"], m, a),
+var d = ["default", "gridline"], f = l(({ animate: n, className: a, children: o, style: l, variant: d = "default", ...f }, h) => {
+	let { classes: g, styles: _ } = t(n), v = c.Children.map(o, (t) => c.isValidElement(t) && t.type === m ? c.cloneElement(t, { className: e(t.props.className, d === "gridline" && i["River__visual--has-background"]) }) : t), y = s(o, "b") || s(o, "em") ? "muted" : "default";
+	return s(o, p) || (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("RiverBreakout: A11yHeading child is required. This element will not be visible, only read by screenreaders."), /* @__PURE__ */ u("section", {
+		ref: h,
+		className: e(i.RiverBreakout, d === "gridline" && i["RiverBreakout--variant-gridline"], d === "gridline" && r.gridline, y === "muted" && i["RiverBreakout--muted"], g, a),
 		style: {
-			...h,
-			...c
+			..._,
+			...l
 		},
-		...d,
-		children: o
+		...f,
+		children: v
 	});
-}), f = ({ as: e = "h3", children: t }) => /* @__PURE__ */ l(n, {
+}), p = ({ as: e = "h3", children: t }) => /* @__PURE__ */ u(n, {
 	className: "visually-hidden",
 	as: e,
 	children: t
-}), p = Object.assign(d, {
-	Visual: o,
+}), m = l(({ className: e, ...t }, n) => /* @__PURE__ */ u(o, {
+	ref: n,
+	className: e,
+	...t
+})), h = Object.assign(f, {
+	Visual: m,
 	Content: a,
-	A11yHeading: f
+	A11yHeading: p
 });
 //#endregion
-export { p as RiverBreakout, u as RiverBreakoutVariants };
+export { h as RiverBreakout, d as RiverBreakoutVariants };
 //# sourceMappingURL=RiverBreakout.js.map

package/esm/river/RiverBreakout/RiverBreakout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RiverBreakout.js","names":[],"sources":["../../../src/river/RiverBreakout/RiverBreakout.tsx"],"sourcesContent":["import React, {Ref, forwardRef} from 'react'\nimport {clsx} from 'clsx'\nimport {RiverProps} from '../River'\nimport {Visual as RiverVisual, RiverContent} from '../River/River'\nimport {useAnimation} from '../../animation'\nimport findElementInChildren from '../../findElementInChildren'\nimport {Heading} from '../../Heading'\n\nimport styles from '../river-shared.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\nexport const RiverBreakoutVariants = ['default', 'gridline'] as const\nexport type RiverBreakoutVariant = (typeof RiverBreakoutVariants)[number]\n\ntype RiverBreakoutProps = Omit<RiverProps, 'align' \| 'imageTextRatio'> & {\n /*\n Apply a visual variant. The default is `default`.\n * `gridline` adds horizontal border lines and lateral spacing.\n */\n variant?: RiverBreakoutVariant\n}\n\nconst Root = forwardRef(\n ({animate, className, children, style, variant = 'default', ...rest}: RiverBreakoutProps, ref: Ref<HTMLElement>) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n // TODO: when Firefox supports :has() selector, we should use that instead of JS\n const defaultColor =\n findElementInChildren(children, 'b') \|\| findElementInChildren(children, 'em') ? 'muted' : 'default'\n\n if (!findElementInChildren(children, A11yHeading)) {\n if (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test') {\n // eslint-disable-next-line no-console\n console.warn(\n 'RiverBreakout: A11yHeading child is required. This element will not be visible, only read by screenreaders.',\n )\n }\n }\n\n return (\n <section\n ref={ref}\n className={clsx(\n styles.RiverBreakout,\n variant === 'gridline' && styles['RiverBreakout--variant-gridline'],\n variant === 'gridline' && gridlineStyles.gridline,\n defaultColor === 'muted' && styles['RiverBreakout--muted'],\n animationClasses,\n className,\n )}\n style={{...animationInlineStyles, ...style}}\n {...rest}\n >\n {~~children~~}\n </section>\n )\n },\n)\n\nconst A11yHeading = ({as = 'h3', children}: React.PropsWithChildren<{as?: 'h2' \| 'h3'}>) => (\n <Heading className=\"visually-hidden\" as={as}>\n {children}\n </Heading>\n)\n\nexport const RiverBreakout = Object.assign(Root, {Visual~~: RiverVisual~~, Content: RiverContent, A11yHeading})\n"],"mappings":";;;;;;;;;;AAWA,IAAa,IAAwB,CAAC,WAAW,WAAW,EAWtD,IAAO,GACV,EAAC,YAAS,cAAW,aAAU,UAAO,aAAU,WAAW,GAAG,KAA2B,MAA0B;CAClH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,~~EAGlF~~,IACJ,EAAsB,GAAU,IAAI,IAAI,EAAsB,GAAU,KAAK,GAAG,UAAU;AAW5F,QATK,EAAsB,GAAU,EAAY,8BAClB,iBAAA,QAAA,IAAA,aAA0C,WAErE,QAAQ,KACN,8GACD,EAKH,kBAAC,WAAD;EACO;EACL,WAAW,EACT,EAAO,eACP,MAAY,cAAc,EAAO,oCACjC,MAAY,cAAc,EAAe,UACzC,MAAiB,WAAW,EAAO,yBACnC,GACA,EACD;EACD,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,GAAI;~~EAEH~~;EACO,CAAA;EAGf,EAEK,KAAe,EAAC,QAAK,MAAM,kBAC/B,kBAAC,GAAD;CAAS,WAAU;CAAsB;CACtC;CACO,CAAA,~~EAGC~~,IAAgB,OAAO,OAAO,GAAM;~~CAAS~~;~~CAAa~~,SAAS;CAAc;CAAY,CAAC"}
1	+ {"version":3,"file":"RiverBreakout.js","names":[],"sources":["../../../src/river/RiverBreakout/RiverBreakout.tsx"],"sourcesContent":["import React, {Ref, forwardRef} from 'react'\nimport {clsx} from 'clsx'\nimport {RiverProps} from '../River'\nimport {Visual as RiverVisual, RiverContent, type RiverVisualProps} from '../River/River'\nimport {useAnimation} from '../../animation'\nimport findElementInChildren from '../../findElementInChildren'\nimport {Heading} from '../../Heading'\n\nimport styles from '../river-shared.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\nexport const RiverBreakoutVariants = ['default', 'gridline'] as const\nexport type RiverBreakoutVariant = (typeof RiverBreakoutVariants)[number]\n\ntype RiverBreakoutProps = Omit<RiverProps, 'align' \| 'imageTextRatio'> & {\n /*\n Apply a visual variant. The default is `default`.\n * `gridline` adds horizontal border lines and lateral spacing.\n */\n variant?: RiverBreakoutVariant\n}\n\nconst Root = forwardRef(\n ({animate, className, children, style, variant = 'default', ...rest}: RiverBreakoutProps, ref: Ref<HTMLElement>) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const Children = React.Children.map(children, child => {\n if (React.isValidElement<RiverVisualProps>(child) && child.type === Visual) {\n return React.cloneElement(child, {\n className: clsx(child.props.className, variant === 'gridline' && styles['River__visual--has-background']),\n })\n }\n\n return child\n })\n\n // TODO: when Firefox supports :has() selector, we should use that instead of JS\n const defaultColor =\n findElementInChildren(children, 'b') \|\| findElementInChildren(children, 'em') ? 'muted' : 'default'\n\n if (!findElementInChildren(children, A11yHeading)) {\n if (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test') {\n // eslint-disable-next-line no-console\n console.warn(\n 'RiverBreakout: A11yHeading child is required. This element will not be visible, only read by screenreaders.',\n )\n }\n }\n\n return (\n <section\n ref={ref}\n className={clsx(\n styles.RiverBreakout,\n variant === 'gridline' && styles['RiverBreakout--variant-gridline'],\n variant === 'gridline' && gridlineStyles.gridline,\n defaultColor === 'muted' && styles['RiverBreakout--muted'],\n animationClasses,\n className,\n )}\n style={{...animationInlineStyles, ...style}}\n {...rest}\n >\n {Children}\n </section>\n )\n },\n)\n\nconst A11yHeading = ({as = 'h3', children}: React.PropsWithChildren<{as?: 'h2' \| 'h3'}>) => (\n <Heading className=\"visually-hidden\" as={as}>\n {children}\n </Heading>\n)\n\nconst Visual = forwardRef<HTMLDivElement, RiverVisualProps>(({className, ...props}, ref) => (\n <RiverVisual ref={ref} className={className} {...props} />\n))\n\nexport const RiverBreakout = Object.assign(Root, {Visual, Content: RiverContent, A11yHeading})\n"],"mappings":";;;;;;;;;;AAWA,IAAa,IAAwB,CAAC,WAAW,WAAW,EAWtD,IAAO,GACV,EAAC,YAAS,cAAW,aAAU,UAAO,aAAU,WAAW,GAAG,KAA2B,MAA0B;CAClH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAW,EAAM,SAAS,IAAI,IAAU,MACxC,EAAM,eAAiC,EAAM,IAAI,EAAM,SAAS,IAC3D,EAAM,aAAa,GAAO,EAC/B,WAAW,EAAK,EAAM,MAAM,WAAW,MAAY,cAAc,EAAO,iCAAiC,EAC1G,CAAC,GAGG,EACP,EAGI,IACJ,EAAsB,GAAU,IAAI,IAAI,EAAsB,GAAU,KAAK,GAAG,UAAU;AAW5F,QATK,EAAsB,GAAU,EAAY,8BAClB,iBAAA,QAAA,IAAA,aAA0C,WAErE,QAAQ,KACN,8GACD,EAKH,kBAAC,WAAD;EACO;EACL,WAAW,EACT,EAAO,eACP,MAAY,cAAc,EAAO,oCACjC,MAAY,cAAc,EAAe,UACzC,MAAiB,WAAW,EAAO,yBACnC,GACA,EACD;EACD,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,GAAI;YAEH;EACO,CAAA;EAGf,EAEK,KAAe,EAAC,QAAK,MAAM,kBAC/B,kBAAC,GAAD;CAAS,WAAU;CAAsB;CACtC;CACO,CAAA,EAGN,IAAS,GAA8C,EAAC,cAAW,GAAG,KAAQ,MAClF,kBAAC,GAAD;CAAkB;CAAgB;CAAW,GAAI;CAAS,CAAA,CAC1D,EAEW,IAAgB,OAAO,OAAO,GAAM;CAAC;CAAQ,SAAS;CAAc;CAAY,CAAC"}

package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.d.ts CHANGED Viewed

@@ -35,6 +35,7 @@ export type RiverBreakoutTabsA11yHeadingProps = React.PropsWithChildren<{
 export type RiverBreakoutTabsHeadingProps = HeadingProps;
 export type RiverBreakoutTabsContentProps = React.HTMLAttributes<HTMLDivElement>;
 export type RiverBreakoutTabsIconProps = IconProps;
+export type RiverBreakoutTabsVisualProps = RiverVisualProps;
 /**
  * Use RiverBreakoutTabs to showcase multiple feature stories within a single immersive surface.
  */

package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RiverBreakoutTabs.d.ts","sourceRoot":"","sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoF,MAAM,OAAO,CAAA;AAGxG,OAAO,EAAiC,KAAK,YAAY,EAAC,MAAM,OAAO,CAAA;AACvE,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAwB,KAAK,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AAO3E;;GAEG;AACH,OAAO,4FAA4F,CAAA;AACnG,OAAO,6FAA6F,CAAA;AAUpG,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAA;IACtC;;OAEG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAA;CACpC,CAAC,GACA,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC,CAAA;AAErD,MAAM,MAAM,0BAA0B,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC,CAAA;AAEF,MAAM,MAAM,iCAAiC,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACtE,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAChB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAC,CAAA;AAEF,MAAM,MAAM,6BAA6B,GAAG,YAAY,CAAA;AAExD,MAAM,MAAM,6BAA6B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAEhF,MAAM,MAAM,0BAA0B,GAAG,SAAS,CAAA;~~AAmclD~~;;GAEG;AACH,eAAO,MAAM,iBAAiB;~~2BAteL~~,MAAM;oBACb,MAAM;eACX,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI;IAC1C;;;OAGG;uBACgB,KAAK,CAAC,SAAS;IAClC;;OAEG;oBACa,QAAQ,GAAG,WAAW;IACtC;;OAEG;gCACyB,OAAO;;;;~~wCAwC4B~~,iCAAiC;iDA6B/B,6BAA6B;mEAZ7F,6BAA6B;gCAX4B,0BAA0B;yBAR3C,0BAA0B;;CAwbnE,CAAA"}
1	+ {"version":3,"file":"RiverBreakoutTabs.d.ts","sourceRoot":"","sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoF,MAAM,OAAO,CAAA;AAGxG,OAAO,EAAiC,KAAK,YAAY,EAAC,MAAM,OAAO,CAAA;AACvE,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAwB,KAAK,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AAO3E;;GAEG;AACH,OAAO,4FAA4F,CAAA;AACnG,OAAO,6FAA6F,CAAA;AAUpG,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAA;IACtC;;OAEG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAA;CACpC,CAAC,GACA,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC,CAAA;AAErD,MAAM,MAAM,0BAA0B,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC,CAAA;AAEF,MAAM,MAAM,iCAAiC,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACtE,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAChB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAC,CAAA;AAEF,MAAM,MAAM,6BAA6B,GAAG,YAAY,CAAA;AAExD,MAAM,MAAM,6BAA6B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAEhF,MAAM,MAAM,0BAA0B,GAAG,SAAS,CAAA;AAElD,MAAM,MAAM,4BAA4B,GAAG,gBAAgB,CAAA;AAmc3D;;GAEG;AACH,eAAO,MAAM,iBAAiB;2BAxeL,MAAM;oBACb,MAAM;eACX,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI;IAC1C;;;OAGG;uBACgB,KAAK,CAAC,SAAS;IAClC;;OAEG;oBACa,QAAQ,GAAG,WAAW;IACtC;;OAEG;gCACyB,OAAO;;;;wCA0C4B,iCAAiC;iDA6B/B,6BAA6B;mEAZ7F,6BAA6B;gCAX4B,0BAA0B;yBAR3C,0BAA0B;;CAwbnE,CAAA"}

package/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RiverBreakoutTabs.js","names":[],"sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx"],"sourcesContent":["import React, {cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Accordion, Heading, Link, Text, type HeadingProps} from '../..'\nimport {Icon, type IconProps} from '../../Icon'\nimport {Visual as RiverVisual, type RiverVisualProps} from '../River/River'\nimport {useId} from '../../hooks/useId'\nimport {useTabs} from '../../hooks/useTabs'\nimport {useWindowSize} from '../../hooks/useWindowSize'\nimport riverStyles from '../river-shared.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/river.css'\n\n/* Main Stylesheet (as a CSS Module) /\nimport styles from './RiverBreakoutTabs.module.css'\n\nconst createComponentTypeGuard =\n <T,>(componentType: React.ComponentType<T>) =>\n (element: unknown): element is React.ReactElement<T> =>\n React.isValidElement<T>(element) && element.type === componentType\n\nexport type RiverBreakoutTabsProps = React.PropsWithChildren<{\n defaultSelectedIndex?: number\n selectedIndex?: number\n onChange?: (selectedIndex: number) => void\n /\n Decorative background rendered behind the visual and persisted across tab\n * changes. Must not contain interactive and remain purely decorative.\n /\n backgroundVisual?: React.ReactNode\n /\n Alignment of media within the visual container when `backgroundVisual` is provided\n /\n imagePosition?: 'center' \| 'block-end'\n /\n When `true`, the `backgroundVisual` bleeds out to the gridline edges instead of being inset within them\n /\n backgroundVisualFullBleed?: boolean\n}> &\n Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>\n\nexport type RiverBreakoutTabsItemProps = React.PropsWithChildren<{\n className?: string\n}>\n\nexport type RiverBreakoutTabsA11yHeadingProps = React.PropsWithChildren<{\n as?: 'h2' \| 'h3'\n id?: string\n}>\n\nexport type RiverBreakoutTabsHeadingProps = HeadingProps\n\nexport type RiverBreakoutTabsContentProps = React.HTMLAttributes<HTMLDivElement>\n\nexport type RiverBreakoutTabsIconProps = IconProps\n\ntype RiverBreakoutTabsItemChild =\n \| React.ReactElement<RiverBreakoutTabsIconProps>\n \| React.ReactElement<RiverBreakoutTabsHeadingProps>\n \| React.ReactElement<RiverBreakoutTabsContentProps>\n \| React.ReactElement<RiverVisualProps>\n\ntype ExtractedItemParts = {\n icon: React.ReactElement<RiverBreakoutTabsIconProps> \| null\n heading: React.ReactElement<RiverBreakoutTabsHeadingProps> \| null\n content: React.ReactElement<RiverBreakoutTabsContentProps> \| null\n visual: React.ReactElement<RiverVisualProps> \| null\n className?: string\n}\n\ntype ExtractedContentParts = {\n action: React.ReactElement<React.ComponentProps<typeof Link>> \| null\n body: React.ReactNode[]\n}\n\nconst RiverBreakoutTabsItem = ({children}: RiverBreakoutTabsItemProps) => <>{children}</>\n\nconst RiverBreakoutTabsA11yHeading = ({as = 'h3', children, id}: RiverBreakoutTabsA11yHeadingProps) => (\n <Heading as={as} id={id} className=\"visually-hidden\">\n {children}\n </Heading>\n)\n\nconst RiverBreakoutTabsIcon = ({color = 'green', ...props}: RiverBreakoutTabsIconProps) => (\n <Icon color={color} {...props} />\n)\n\nconst RiverBreakoutTabsHeading = ({\n as = 'h3',\n children,\n className,\n size = 'subhead-large',\n weight = 'normal',\n ...props\n}: RiverBreakoutTabsHeadingProps) => (\n <Heading\n as={as}\n className={clsx(styles.RiverBreakoutTabs__heading, className)}\n size={size}\n weight={weight}\n {...props}\n >\n {children}\n </Heading>\n)\n\nconst RiverBreakoutTabsContent = ({children, className, ...props}: RiverBreakoutTabsContentProps) => {\n const Children = useMemo(\n () =>\n React.Children.toArray(children).map(child => {\n if (isTextChild(child)) {\n return cloneElement(child, {\n as: child.props.as ?? 'p',\n variant: child.props.variant ?? 'muted',\n })\n }\n\n if (isLinkChild(child)) {\n return cloneElement(child, {\n className: clsx(child.props.className, styles.RiverBreakoutTabs__link),\n size: child.props.size ?? 'medium',\n variant: child.props.variant ?? 'accent',\n })\n }\n\n return child\n }),\n [children],\n )\n\n return (\n <div className={clsx(styles.RiverBreakoutTabs__content, className)} {...props}>\n {Children}\n </div>\n )\n}\n\nconst RiverBreakoutTabsVisual = forwardRef<HTMLDivElement, RiverVisualProps>(({className, ...props}, ref) => (\n <RiverVisual ref={ref} className={className} {...props} />\n))\n\nconst isItem = createComponentTypeGuard(RiverBreakoutTabsItem)\nconst isA11yHeading = createComponentTypeGuard(RiverBreakoutTabsA11yHeading)\nconst isIcon = createComponentTypeGuard(RiverBreakoutTabsIcon)\nconst isHeading = createComponentTypeGuard(RiverBreakoutTabsHeading)\nconst isContent = createComponentTypeGuard(RiverBreakoutTabsContent)\nconst isVisual = createComponentTypeGuard(RiverBreakoutTabsVisual)\n\nconst isTextChild = (child: React.ReactNode): child is React.ReactElement<React.ComponentProps<typeof Text>> =>\n React.isValidElement<React.ComponentProps<typeof Text>>(child) && child.type === Text\n\nconst isLinkChild = (child: React.ReactNode): child is React.ReactElement<React.ComponentProps<typeof Link>> =>\n React.isValidElement<React.ComponentProps<typeof Link>>(child) && child.type === Link\n\nconst extractItemParts = (item: React.ReactElement<RiverBreakoutTabsItemProps>): ExtractedItemParts => {\n const Children = React.Children.toArray(item.props.children) as RiverBreakoutTabsItemChild[]\n\n return Children.reduce<ExtractedItemParts>(\n (acc, child) => {\n if (isIcon(child)) {\n acc.icon = child\n }\n\n if (isHeading(child)) {\n acc.heading = child\n }\n\n if (isContent(child)) {\n acc.content = child\n }\n\n if (isVisual(child)) {\n acc.visual = child\n }\n\n return acc\n },\n {icon: null, heading: null, content: null, visual: null, className: item.props.className},\n )\n}\n\nconst extractWideTabListContentParts = (\n content: React.ReactElement<RiverBreakoutTabsContentProps> \| null,\n): ExtractedContentParts => {\n if (!content) {\n return {action: null, body: []}\n }\n\n const Children = React.Children.toArray(content.props.children).map(child => {\n if (isTextChild(child)) {\n return cloneElement(child, {\n as: child.props.as ?? 'p',\n variant: child.props.variant ?? 'muted',\n })\n }\n\n if (isLinkChild(child)) {\n return cloneElement(child, {\n className: clsx(child.props.className, styles.RiverBreakoutTabs__link),\n size: child.props.size ?? 'medium',\n variant: child.props.variant ?? 'accent',\n })\n }\n\n return child\n })\n\n return Children.reduce<ExtractedContentParts>(\n (acc, child) => {\n if (isLinkChild(child)) {\n if (!acc.action) {\n acc.action = child\n }\n\n return acc\n }\n\n acc.body.push(child)\n return acc\n },\n {action: null, body: []},\n )\n}\n\nconst clampIndex = (index: number, length: number) => {\n if (length === 0) return -1\n\n const normalizedIndex = Number.isFinite(index) ? Math.trunc(index) : 0\n return Math.min(Math.max(normalizedIndex, 0), length - 1)\n}\n\nconst RiverBreakoutTabsRoot = forwardRef<HTMLElement, RiverBreakoutTabsProps>(\n (\n {\n children,\n className,\n defaultSelectedIndex = 0,\n onChange,\n selectedIndex,\n backgroundVisual,\n imagePosition = 'center',\n backgroundVisualFullBleed = false,\n ...props\n },\n ref,\n ) => {\n const instanceId = useId()\n const {isLarge} = useWindowSize()\n\n const Children = useMemo(() => React.Children.toArray(children), [children])\n\n const A11yHeadingChild = Children.find(isA11yHeading) ?? null\n const Items = Children.filter(isItem)\n .map(extractItemParts)\n .filter(item => item.heading && item.content && item.visual)\n\n const defaultActiveIndex = clampIndex(defaultSelectedIndex, Items.length)\n const controlledActiveIndex =\n typeof selectedIndex === 'number' && Number.isFinite(selectedIndex)\n ? clampIndex(selectedIndex, Items.length)\n : null\n const initialActiveIndex = controlledActiveIndex ?? defaultActiveIndex\n const headingId = A11yHeadingChild?.props.id ?? `${instanceId}-heading`\n const wideTabListColumns = Math.min(Math.max(Items.length, 1), 3)\n const initialActiveTab = initialActiveIndex >= 0 ? String(initialActiveIndex) : undefined\n const isWideTabList = isLarge === true\n const suppressOnTabActivateRef = useRef(false)\n\n const handleTabActivate = useCallback(\n (id: string) => {\n if (suppressOnTabActivateRef.current) {\n suppressOnTabActivateRef.current = false\n return\n }\n\n if (!onChange) return\n\n const nextIndex = Number(id)\n if (!Number.isNaN(nextIndex)) {\n onChange(nextIndex)\n }\n },\n [onChange],\n )\n\n const {activeTab, activateTab, getTabListProps, getTabPanelProps, getTabProps} = useTabs({\n defaultTab: initialActiveTab,\n onTabActivate: handleTabActivate,\n })\n\n const [activeAccordionIndex, setActiveAccordionIndex] = useState(initialActiveIndex)\n\n useEffect(() => {\n if (activeTab === null) return\n\n const nextIndex = Number(activeTab)\n if (!Number.isNaN(nextIndex)) {\n setActiveAccordionIndex(nextIndex)\n }\n }, [activeTab])\n\n useEffect(() => {\n if (controlledActiveIndex === null \|\| controlledActiveIndex < 0) return\n\n const controlledTab = String(controlledActiveIndex)\n if (activeTab !== controlledTab) {\n suppressOnTabActivateRef.current = true\n activateTab(controlledTab)\n }\n\n setActiveAccordionIndex(controlledActiveIndex)\n }, [activateTab, activeTab, controlledActiveIndex])\n\n if (!A11yHeadingChild && (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test')) {\n // eslint-disable-next-line no-console\n console.warn(\n 'RiverBreakoutTabs: A11yHeading child is required. This element will not be visible, only read by screenreaders.',\n )\n }\n\n const handleAccordionOpen = (index: number) => (isOpen: boolean) => {\n if (isOpen) {\n setActiveAccordionIndex(index)\n if (activeTab !== String(index)) {\n activateTab(String(index))\n }\n }\n }\n\n const handleAccordionToggle: React.ReactEventHandler<HTMLDetailsElement> = event => {\n const toggledIndex = Number(event.currentTarget.getAttribute('data-index'))\n\n if (!event.currentTarget.open && activeAccordionIndex === toggledIndex) {\n event.currentTarget.open = true\n }\n }\n\n const tabListProps = A11yHeadingChild\n ? getTabListProps({labelledBy: headingId})\n : getTabListProps({label: 'River breakout tabs'})\n const WideTabListContentParts = useMemo(\n () => Items.map(item => extractWideTabListContentParts(item.content)),\n [Items],\n )\n\n const BackgroundVisualLayer =\n backgroundVisual != null ? (\n <div className={styles.RiverBreakoutTabs__backgroundVisual} aria-hidden=\"true\">\n {backgroundVisual}\n </div>\n ) : null\n\n return (\n <section\n ref={ref}\n className={clsx(\n riverStyles.RiverBreakout,\n riverStyles['RiverBreakout--variant-gridline'],\n gridlineStyles.gridline,\n styles.RiverBreakoutTabs,\n backgroundVisual != null && styles['RiverBreakoutTabs--has-background-visual'],\n backgroundVisual != null &&\n imagePosition === 'block-end' &&\n styles['RiverBreakoutTabs--image-position-block-end'],\n backgroundVisual != null &&\n backgroundVisualFullBleed &&\n styles['RiverBreakoutTabs--background-visual-full-bleed'],\n className,\n )}\n {...props}\n >\n {A11yHeadingChild && cloneElement(A11yHeadingChild, {id: headingId})}\n\n {isWideTabList ? (\n <div className={styles.RiverBreakoutTabs__wideTabList}>\n <div\n {...tabListProps}\n className={styles.RiverBreakoutTabs__tablist}\n style={{'--river-breakout-tabs-columns': String(wideTabListColumns)} as React.CSSProperties}\n >\n {Items.map((item, index) => {\n const isSelected = activeTab === String(index)\n const tabProps = getTabProps<HTMLButtonElement>(String(index))\n const {body} = WideTabListContentParts[index]\n\n return (\n <div\n key={index}\n className={clsx(\n styles.RiverBreakoutTabs__item,\n isSelected && styles['RiverBreakoutTabs__item--selected'],\n item.className,\n )}\n >\n <button type=\"button\" {...tabProps} className={styles.RiverBreakoutTabs__tab}>\n {item.icon &&\n cloneElement(item.icon, {\n className: item.icon.props.className,\n })}\n\n {item.heading &&\n cloneElement(item.heading, {\n className: clsx(item.heading.props.className, styles.RiverBreakoutTabs__tabHeading),\n })}\n\n {body.length > 0 && <div className={styles.RiverBreakoutTabs__wideTabListContent}>{body}</div>}\n </button>\n </div>\n )\n })}\n </div>\n\n <div className={styles.RiverBreakoutTabs__sharedVisuals}>\n {BackgroundVisualLayer}\n {Items.map((item, index) => {\n const panelProps = getTabPanelProps(String(index))\n\n return (\n <div\n key={index}\n {...panelProps}\n tabIndex={-1}\n className={styles.RiverBreakoutTabs__sharedVisualPanel}\n >\n {cloneElement(item.visual as React.ReactElement<RiverVisualProps>, {\n className: clsx(item.visual?.props.className, styles.RiverBreakoutTabs__sharedVisual),\n })}\n </div>\n )\n })}\n </div>\n\n {WideTabListContentParts.some(content => content.action) && (\n <div\n className={styles.RiverBreakoutTabs__wideTabListActions}\n style={{'--river-breakout-tabs-columns': String(wideTabListColumns)} as React.CSSProperties}\n >\n {Items.map((_, index) => {\n const {action} = WideTabListContentParts[index]\n\n return (\n <div key={index} className={styles.RiverBreakoutTabs__wideTabListActionItem}>\n {action &&\n cloneElement(action, {\n className: clsx(action.props.className, styles.RiverBreakoutTabs__wideTabListAction),\n })}\n </div>\n )\n })}\n </div>\n )}\n </div>\n ) : (\n <div className={styles.RiverBreakoutTabs__accordion}>\n {activeAccordionIndex >= 0 && Items[activeAccordionIndex]?.visual && (\n <div className={styles.RiverBreakoutTabs__accordionSharedVisuals}>\n {BackgroundVisualLayer}\n {cloneElement(Items[activeAccordionIndex].visual as React.ReactElement<RiverVisualProps>, {\n className: clsx(\n Items[activeAccordionIndex].visual.props.className,\n styles.RiverBreakoutTabs__accordionSharedVisual,\n ),\n })}\n </div>\n )}\n\n {Items.map((item, index) => {\n return (\n <Accordion\n key={index}\n data-index={index}\n className={clsx(\n styles.RiverBreakoutTabs__accordionItem,\n index === activeAccordionIndex && styles['RiverBreakoutTabs__item--selected'],\n item.className,\n )}\n onToggle={handleAccordionToggle}\n open={index === activeAccordionIndex}\n handleOpen={handleAccordionOpen(index)}\n >\n <Accordion.Heading className={styles.RiverBreakoutTabs__accordionHeading}>\n <span className={styles.RiverBreakoutTabs__accordionHeadingInner}>\n {item.icon &&\n cloneElement(item.icon, {\n className: clsx(item.icon.props.className, styles.RiverBreakoutTabs__accordionIcon),\n })}\n <span className={styles.RiverBreakoutTabs__accordionLabel}>{item.heading?.props.children}</span>\n </span>\n </Accordion.Heading>\n\n <Accordion.Content className={styles.RiverBreakoutTabs__accordionPanel}>\n {cloneElement(item.content as React.ReactElement<RiverBreakoutTabsContentProps>, {\n className: clsx(item.content?.props.className, styles.RiverBreakoutTabs__accordionContent),\n })}\n </Accordion.Content>\n </Accordion>\n )\n })}\n </div>\n )}\n </section>\n )\n },\n)\n\n/\n Use RiverBreakoutTabs to showcase multiple feature stories within a single immersive surface.\n */\nexport const RiverBreakoutTabs = Object.assign(RiverBreakoutTabsRoot, {\n A11yHeading: RiverBreakoutTabsA11yHeading,\n Content: RiverBreakoutTabsContent,\n Heading: RiverBreakoutTabsHeading,\n Icon: RiverBreakoutTabsIcon,\n Item: RiverBreakoutTabsItem,\n Visual: RiverBreakoutTabsVisual,\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;AAqBA,IAAM,KACC,OACJ,MACC,EAAM,eAAkB,EAAQ,IAAI,EAAQ,SAAS,GAwDnD,KAAyB,EAAC,kBAA0C,kBAAA,GAAA,EAAG,aAAY,CAAA,EAEnF,KAAgC,EAAC,QAAK,MAAM,aAAU,YAC1D,kBAAC,GAAD;CAAa;CAAQ;CAAI,WAAU;CAChC;CACO,CAAA,EAGN,KAAyB,EAAC,WAAQ,SAAS,GAAG,QAClD,kBAAC,GAAD;CAAa;CAAO,GAAI;CAAS,CAAA,EAG7B,KAA4B,EAChC,QAAK,MACL,aACA,cACA,UAAO,iBACP,YAAS,UACT,GAAG,QAEH,kBAAC,GAAD;CACM;CACJ,WAAW,EAAK,EAAO,4BAA4B,EAAU;CACvD;CACE;CACR,GAAI;CAEH;CACO,CAAA,EAGN,KAA4B,EAAC,aAAU,cAAW,GAAG,QAA0C;CACnG,IAAM,IAAW,QAEb,EAAM,SAAS,QAAQ,EAAS,CAAC,KAAI,MAC/B,EAAY,EAAM,GACb,EAAa,GAAO;EACzB,IAAI,EAAM,MAAM,MAAM;EACtB,SAAS,EAAM,MAAM,WAAW;EACjC,CAAC,GAGA,EAAY,EAAM,GACb,EAAa,GAAO;EACzB,WAAW,EAAK,EAAM,MAAM,WAAW,EAAO,wBAAwB;EACtE,MAAM,EAAM,MAAM,QAAQ;EAC1B,SAAS,EAAM,MAAM,WAAW;EACjC,CAAC,GAGG,EACP,EACJ,CAAC,EAAS,CACX;AAED,QACE,kBAAC,OAAD;EAAK,WAAW,EAAK,EAAO,4BAA4B,EAAU;EAAE,GAAI;YACrE;EACG,CAAA;GAIJ,IAA0B,GAA8C,EAAC,cAAW,GAAG,KAAQ,MACnG,kBAAC,GAAD;CAAkB;CAAgB;CAAW,GAAI;CAAS,CAAA,CAC1D,EAEI,IAAS,EAAyB,EAAsB,EACxD,IAAgB,EAAyB,EAA6B,EACtE,IAAS,EAAyB,EAAsB,EACxD,IAAY,EAAyB,EAAyB,EAC9D,IAAY,EAAyB,EAAyB,EAC9D,IAAW,EAAyB,EAAwB,EAE5D,KAAe,MACnB,EAAM,eAAkD,EAAM,IAAI,EAAM,SAAS,GAE7E,KAAe,MACnB,EAAM,eAAkD,EAAM,IAAI,EAAM,SAAS,GAE7E,KAAoB,MACP,EAAM,SAAS,QAAQ,EAAK,MAAM,SAE5C,CAAS,QACb,GAAK,OACA,EAAO,EAAM,KACf,EAAI,OAAO,IAGT,EAAU,EAAM,KAClB,EAAI,UAAU,IAGZ,EAAU,EAAM,KAClB,EAAI,UAAU,IAGZ,EAAS,EAAM,KACjB,EAAI,SAAS,IAGR,IAET;CAAC,MAAM;CAAM,SAAS;CAAM,SAAS;CAAM,QAAQ;CAAM,WAAW,EAAK,MAAM;CAAU,CAC1F,EAGG,KACJ,MAEK,IAIY,EAAM,SAAS,QAAQ,EAAQ,MAAM,SAAS,CAAC,KAAI,MAC9D,EAAY,EAAM,GACb,EAAa,GAAO;CACzB,IAAI,EAAM,MAAM,MAAM;CACtB,SAAS,EAAM,MAAM,WAAW;CACjC,CAAC,GAGA,EAAY,EAAM,GACb,EAAa,GAAO;CACzB,WAAW,EAAK,EAAM,MAAM,WAAW,EAAO,wBAAwB;CACtE,MAAM,EAAM,MAAM,QAAQ;CAC1B,SAAS,EAAM,MAAM,WAAW;CACjC,CAAC,GAGG,EAGF,CAAS,QACb,GAAK,MACA,EAAY,EAAM,IACpB,AACE,EAAI,WAAS,GAGR,MAGT,EAAI,KAAK,KAAK,EAAM,EACb,IAET;CAAC,QAAQ;CAAM,MAAM,EAAE;CAAC,CACzB,GApCQ;CAAC,QAAQ;CAAM,MAAM,EAAE;CAAC,EAuC7B,KAAc,GAAe,MAC7B,MAAW,IAAU,KAGlB,KAAK,IAAI,KAAK,IADG,OAAO,SAAS,EAAM,GAAG,KAAK,MAAM,EAAM,GAAG,GAC3B,EAAE,EAAE,IAAS,EAAE,EAGrD,IAAwB,GAE1B,EACE,aACA,cACA,0BAAuB,GACvB,aACA,kBACA,qBACA,mBAAgB,UAChB,+BAA4B,IAC5B,GAAG,KAEL,MACG;CACH,IAAM,IAAa,GAAO,EACpB,EAAC,eAAW,GAAe,EAE3B,IAAW,QAAc,EAAM,SAAS,QAAQ,EAAS,EAAE,CAAC,EAAS,CAAC,EAEtE,IAAmB,EAAS,KAAK,EAAc,IAAI,MACnD,IAAQ,EAAS,OAAO,EAAO,CAClC,IAAI,EAAiB,CACrB,QAAO,MAAQ,EAAK,WAAW,EAAK,WAAW,EAAK,OAAO,EAExD,IAAqB,EAAW,GAAsB,EAAM,OAAO,EACnE,IACJ,OAAO,KAAkB,YAAY,OAAO,SAAS,EAAc,GAC/D,EAAW,GAAe,EAAM,OAAO,GACvC,MACA,IAAqB,KAAyB,GAC9C,IAAY,GAAkB,MAAM,MAAM,GAAG,EAAW,WACxD,IAAqB,KAAK,IAAI,KAAK,IAAI,EAAM,QAAQ,EAAE,EAAE,EAAE,EAC3D,IAAmB,KAAsB,IAAI,OAAO,EAAmB,GAAG,KAAA,GAC1E,IAAgB,MAAY,IAC5B,IAA2B,EAAO,GAAM,EAmBxC,EAAC,cAAW,gBAAa,oBAAiB,qBAAkB,mBAAe,EAAQ;EACvF,YAAY;EACZ,eAnBwB,GACvB,MAAe;AACd,OAAI,EAAyB,SAAS;AACpC,MAAyB,UAAU;AACnC;;AAGF,OAAI,CAAC,EAAU;GAEf,IAAM,IAAY,OAAO,EAAG;AAC5B,GAAK,OAAO,MAAM,EAAU,IAC1B,EAAS,EAAU;KAGvB,CAAC,EAAS,CAKK;EAChB,CAAC,EAEI,CAAC,GAAsB,KAA2B,EAAS,EAAmB;AAuBpF,CArBA,QAAgB;AACd,MAAI,MAAc,KAAM;EAExB,IAAM,IAAY,OAAO,EAAU;AACnC,EAAK,OAAO,MAAM,EAAU,IAC1B,EAAwB,EAAU;IAEnC,CAAC,EAAU,CAAC,EAEf,QAAgB;AACd,MAAI,MAA0B,QAAQ,IAAwB,EAAG;EAEjE,IAAM,IAAgB,OAAO,EAAsB;AAMnD,EALI,MAAc,MAChB,EAAyB,UAAU,IACnC,EAAY,EAAc,GAG5B,EAAwB,EAAsB;IAC7C;EAAC;EAAa;EAAW;EAAsB,CAAC,EAE/C,CAAC,MAAA,QAAA,IAAA,aAA8C,iBAAA,QAAA,IAAA,aAA0C,WAE3F,QAAQ,KACN,kHACD;CAGH,IAAM,MAAuB,OAAmB,MAAoB;AAClE,EAAI,MACF,EAAwB,EAAM,EAC1B,MAAc,OAAO,EAAM,IAC7B,EAAY,OAAO,EAAM,CAAC;IAK1B,MAAqE,MAAS;EAClF,IAAM,IAAe,OAAO,EAAM,cAAc,aAAa,aAAa,CAAC;AAE3E,EAAI,CAAC,EAAM,cAAc,QAAQ,MAAyB,MACxD,EAAM,cAAc,OAAO;IAIzB,KACF,EADiB,IACD,EAAC,YAAY,GAAU,GACvB,EAAC,OAAO,uBAAsB,CAAC,EAC7C,IAA0B,QACxB,EAAM,KAAI,MAAQ,EAA+B,EAAK,QAAQ,CAAC,EACrE,CAAC,EAAM,CACR,EAEK,IACJ,KAAoB,OAIhB,OAHF,kBAAC,OAAD;EAAK,WAAW,EAAO;EAAqC,eAAY;YACrE;EACG,CAAA;AAGV,QACE,kBAAC,WAAD;EACO;EACL,WAAW,EACT,EAAY,eACZ,EAAY,oCACZ,EAAe,UACf,EAAO,mBACP,KAAoB,QAAQ,EAAO,6CACnC,KAAoB,QAClB,MAAkB,eAClB,EAAO,gDACT,KAAoB,QAClB,KACA,EAAO,oDACT,EACD;EACD,GAAI;YAhBN,CAkBG,KAAoB,EAAa,GAAkB,EAAC,IAAI,GAAU,CAAC,EAEnE,IACC,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB;IACE,kBAAC,OAAD;KACE,GAAI;KACJ,WAAW,EAAO;KAClB,OAAO,EAAC,iCAAiC,OAAO,EAAmB,EAAC;eAEnE,EAAM,KAAK,GAAM,MAAU;MAC1B,IAAM,IAAa,MAAc,OAAO,EAAM,EACxC,IAAW,EAA+B,OAAO,EAAM,CAAC,EACxD,EAAC,YAAQ,EAAwB;AAEvC,aACE,kBAAC,OAAD;OAEE,WAAW,EACT,EAAO,yBACP,KAAc,EAAO,sCACrB,EAAK,UACN;iBAED,kBAAC,UAAD;QAAQ,MAAK;QAAS,GAAI;QAAU,WAAW,EAAO;kBAAtD;SACG,EAAK,QACJ,EAAa,EAAK,MAAM,EACtB,WAAW,EAAK,KAAK,MAAM,WAC5B,CAAC;SAEH,EAAK,WACJ,EAAa,EAAK,SAAS,EACzB,WAAW,EAAK,EAAK,QAAQ,MAAM,WAAW,EAAO,8BAA8B,EACpF,CAAC;SAEH,EAAK,SAAS,KAAK,kBAAC,OAAD;UAAK,WAAW,EAAO;oBAAwC;UAAW,CAAA;SACvF;;OACL,EApBC,EAoBD;OAER;KACE,CAAA;IAEN,kBAAC,OAAD;KAAK,WAAW,EAAO;eAAvB,CACG,GACA,EAAM,KAAK,GAAM,MAId,kBAAC,OAAD;MAEE,GALe,EAAiB,OAAO,EAAM,CAKzC;MACJ,UAAU;MACV,WAAW,EAAO;gBAEjB,EAAa,EAAK,QAAgD,EACjE,WAAW,EAAK,EAAK,QAAQ,MAAM,WAAW,EAAO,gCAAgC,EACtF,CAAC;MACE,EARC,EAQD,CAER,CACE;;IAEL,EAAwB,MAAK,MAAW,EAAQ,OAAO,IACtD,kBAAC,OAAD;KACE,WAAW,EAAO;KAClB,OAAO,EAAC,iCAAiC,OAAO,EAAmB,EAAC;eAEnE,EAAM,KAAK,GAAG,MAAU;MACvB,IAAM,EAAC,cAAU,EAAwB;AAEzC,aACE,kBAAC,OAAD;OAAiB,WAAW,EAAO;iBAChC,KACC,EAAa,GAAQ,EACnB,WAAW,EAAK,EAAO,MAAM,WAAW,EAAO,qCAAqC,EACrF,CAAC;OACA,EALI,EAKJ;OAER;KACE,CAAA;IAEJ;OAEN,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB,CACG,KAAwB,KAAK,EAAM,IAAuB,UACzD,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAvB,CACG,GACA,EAAa,EAAM,GAAsB,QAAgD,EACxF,WAAW,EACT,EAAM,GAAsB,OAAO,MAAM,WACzC,EAAO,yCACR,EACF,CAAC,CACE;OAGP,EAAM,KAAK,GAAM,MAEd,kBAAC,GAAD;IAEE,cAAY;IACZ,WAAW,EACT,EAAO,kCACP,MAAU,KAAwB,EAAO,sCACzC,EAAK,UACN;IACD,UAAU;IACV,MAAM,MAAU;IAChB,YAAY,GAAoB,EAAM;cAVxC,CAYE,kBAAC,EAAU,SAAX;KAAmB,WAAW,EAAO;eACnC,kBAAC,QAAD;MAAM,WAAW,EAAO;gBAAxB,CACG,EAAK,QACJ,EAAa,EAAK,MAAM,EACtB,WAAW,EAAK,EAAK,KAAK,MAAM,WAAW,EAAO,iCAAiC,EACpF,CAAC,EACJ,kBAAC,QAAD;OAAM,WAAW,EAAO;iBAAoC,EAAK,SAAS,MAAM;OAAgB,CAAA,CAC3F;;KACW,CAAA,EAEpB,kBAAC,EAAU,SAAX;KAAmB,WAAW,EAAO;eAClC,EAAa,EAAK,SAA8D,EAC/E,WAAW,EAAK,EAAK,SAAS,MAAM,WAAW,EAAO,oCAAoC,EAC3F,CAAC;KACgB,CAAA,CACV;MA1BL,EA0BK,CAEd,CACE;KAEA;;EAGf,EAKY,IAAoB,OAAO,OAAO,GAAuB;CACpE,aAAa;CACb,SAAS;CACT,SAAS;CACT,MAAM;CACN,MAAM;CACN,QAAQ;CACT,CAAC"}
1	+ {"version":3,"file":"RiverBreakoutTabs.js","names":[],"sources":["../../../src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx"],"sourcesContent":["import React, {cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Accordion, Heading, Link, Text, type HeadingProps} from '../..'\nimport {Icon, type IconProps} from '../../Icon'\nimport {Visual as RiverVisual, type RiverVisualProps} from '../River/River'\nimport {useId} from '../../hooks/useId'\nimport {useTabs} from '../../hooks/useTabs'\nimport {useWindowSize} from '../../hooks/useWindowSize'\nimport riverStyles from '../river-shared.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/river.css'\n\n/* Main Stylesheet (as a CSS Module) /\nimport styles from './RiverBreakoutTabs.module.css'\n\nconst createComponentTypeGuard =\n <T,>(componentType: React.ComponentType<T>) =>\n (element: unknown): element is React.ReactElement<T> =>\n React.isValidElement<T>(element) && element.type === componentType\n\nexport type RiverBreakoutTabsProps = React.PropsWithChildren<{\n defaultSelectedIndex?: number\n selectedIndex?: number\n onChange?: (selectedIndex: number) => void\n /\n Decorative background rendered behind the visual and persisted across tab\n * changes. Must not contain interactive and remain purely decorative.\n /\n backgroundVisual?: React.ReactNode\n /\n Alignment of media within the visual container when `backgroundVisual` is provided\n /\n imagePosition?: 'center' \| 'block-end'\n /\n When `true`, the `backgroundVisual` bleeds out to the gridline edges instead of being inset within them\n /\n backgroundVisualFullBleed?: boolean\n}> &\n Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>\n\nexport type RiverBreakoutTabsItemProps = React.PropsWithChildren<{\n className?: string\n}>\n\nexport type RiverBreakoutTabsA11yHeadingProps = React.PropsWithChildren<{\n as?: 'h2' \| 'h3'\n id?: string\n}>\n\nexport type RiverBreakoutTabsHeadingProps = HeadingProps\n\nexport type RiverBreakoutTabsContentProps = React.HTMLAttributes<HTMLDivElement>\n\nexport type RiverBreakoutTabsIconProps = IconProps\n\nexport type RiverBreakoutTabsVisualProps = RiverVisualProps\n\ntype RiverBreakoutTabsItemChild =\n \| React.ReactElement<RiverBreakoutTabsIconProps>\n \| React.ReactElement<RiverBreakoutTabsHeadingProps>\n \| React.ReactElement<RiverBreakoutTabsContentProps>\n \| React.ReactElement<RiverBreakoutTabsVisualProps>\n\ntype ExtractedItemParts = {\n icon: React.ReactElement<RiverBreakoutTabsIconProps> \| null\n heading: React.ReactElement<RiverBreakoutTabsHeadingProps> \| null\n content: React.ReactElement<RiverBreakoutTabsContentProps> \| null\n visual: React.ReactElement<RiverBreakoutTabsVisualProps> \| null\n className?: string\n}\n\ntype ExtractedContentParts = {\n action: React.ReactElement<React.ComponentProps<typeof Link>> \| null\n body: React.ReactNode[]\n}\n\nconst RiverBreakoutTabsItem = ({children}: RiverBreakoutTabsItemProps) => <>{children}</>\n\nconst RiverBreakoutTabsA11yHeading = ({as = 'h3', children, id}: RiverBreakoutTabsA11yHeadingProps) => (\n <Heading as={as} id={id} className=\"visually-hidden\">\n {children}\n </Heading>\n)\n\nconst RiverBreakoutTabsIcon = ({color = 'green', ...props}: RiverBreakoutTabsIconProps) => (\n <Icon color={color} {...props} />\n)\n\nconst RiverBreakoutTabsHeading = ({\n as = 'h3',\n children,\n className,\n size = 'subhead-large',\n weight = 'normal',\n ...props\n}: RiverBreakoutTabsHeadingProps) => (\n <Heading\n as={as}\n className={clsx(styles.RiverBreakoutTabs__heading, className)}\n size={size}\n weight={weight}\n {...props}\n >\n {children}\n </Heading>\n)\n\nconst RiverBreakoutTabsContent = ({children, className, ...props}: RiverBreakoutTabsContentProps) => {\n const Children = useMemo(\n () =>\n React.Children.toArray(children).map(child => {\n if (isTextChild(child)) {\n return cloneElement(child, {\n as: child.props.as ?? 'p',\n variant: child.props.variant ?? 'muted',\n })\n }\n\n if (isLinkChild(child)) {\n return cloneElement(child, {\n className: clsx(child.props.className, styles.RiverBreakoutTabs__link),\n size: child.props.size ?? 'medium',\n variant: child.props.variant ?? 'accent',\n })\n }\n\n return child\n }),\n [children],\n )\n\n return (\n <div className={clsx(styles.RiverBreakoutTabs__content, className)} {...props}>\n {Children}\n </div>\n )\n}\n\nconst RiverBreakoutTabsVisual = forwardRef<HTMLDivElement, RiverBreakoutTabsVisualProps>(\n ({className, ...props}, ref) => <RiverVisual ref={ref} className={className} {...props} />,\n)\n\nconst isItem = createComponentTypeGuard(RiverBreakoutTabsItem)\nconst isA11yHeading = createComponentTypeGuard(RiverBreakoutTabsA11yHeading)\nconst isIcon = createComponentTypeGuard(RiverBreakoutTabsIcon)\nconst isHeading = createComponentTypeGuard(RiverBreakoutTabsHeading)\nconst isContent = createComponentTypeGuard(RiverBreakoutTabsContent)\nconst isVisual = createComponentTypeGuard(RiverBreakoutTabsVisual)\n\nconst isTextChild = (child: React.ReactNode): child is React.ReactElement<React.ComponentProps<typeof Text>> =>\n React.isValidElement<React.ComponentProps<typeof Text>>(child) && child.type === Text\n\nconst isLinkChild = (child: React.ReactNode): child is React.ReactElement<React.ComponentProps<typeof Link>> =>\n React.isValidElement<React.ComponentProps<typeof Link>>(child) && child.type === Link\n\nconst extractItemParts = (item: React.ReactElement<RiverBreakoutTabsItemProps>): ExtractedItemParts => {\n const Children = React.Children.toArray(item.props.children) as RiverBreakoutTabsItemChild[]\n\n return Children.reduce<ExtractedItemParts>(\n (acc, child) => {\n if (isIcon(child)) {\n acc.icon = child\n }\n\n if (isHeading(child)) {\n acc.heading = child\n }\n\n if (isContent(child)) {\n acc.content = child\n }\n\n if (isVisual(child)) {\n acc.visual = child\n }\n\n return acc\n },\n {icon: null, heading: null, content: null, visual: null, className: item.props.className},\n )\n}\n\nconst extractWideTabListContentParts = (\n content: React.ReactElement<RiverBreakoutTabsContentProps> \| null,\n): ExtractedContentParts => {\n if (!content) {\n return {action: null, body: []}\n }\n\n const Children = React.Children.toArray(content.props.children).map(child => {\n if (isTextChild(child)) {\n return cloneElement(child, {\n as: child.props.as ?? 'p',\n variant: child.props.variant ?? 'muted',\n })\n }\n\n if (isLinkChild(child)) {\n return cloneElement(child, {\n className: clsx(child.props.className, styles.RiverBreakoutTabs__link),\n size: child.props.size ?? 'medium',\n variant: child.props.variant ?? 'accent',\n })\n }\n\n return child\n })\n\n return Children.reduce<ExtractedContentParts>(\n (acc, child) => {\n if (isLinkChild(child)) {\n if (!acc.action) {\n acc.action = child\n }\n\n return acc\n }\n\n acc.body.push(child)\n return acc\n },\n {action: null, body: []},\n )\n}\n\nconst clampIndex = (index: number, length: number) => {\n if (length === 0) return -1\n\n const normalizedIndex = Number.isFinite(index) ? Math.trunc(index) : 0\n return Math.min(Math.max(normalizedIndex, 0), length - 1)\n}\n\nconst RiverBreakoutTabsRoot = forwardRef<HTMLElement, RiverBreakoutTabsProps>(\n (\n {\n children,\n className,\n defaultSelectedIndex = 0,\n onChange,\n selectedIndex,\n backgroundVisual,\n imagePosition = 'center',\n backgroundVisualFullBleed = false,\n ...props\n },\n ref,\n ) => {\n const instanceId = useId()\n const {isLarge} = useWindowSize()\n\n const Children = useMemo(() => React.Children.toArray(children), [children])\n\n const A11yHeadingChild = Children.find(isA11yHeading) ?? null\n const Items = Children.filter(isItem)\n .map(extractItemParts)\n .filter(item => item.heading && item.content && item.visual)\n\n const defaultActiveIndex = clampIndex(defaultSelectedIndex, Items.length)\n const controlledActiveIndex =\n typeof selectedIndex === 'number' && Number.isFinite(selectedIndex)\n ? clampIndex(selectedIndex, Items.length)\n : null\n const initialActiveIndex = controlledActiveIndex ?? defaultActiveIndex\n const headingId = A11yHeadingChild?.props.id ?? `${instanceId}-heading`\n const wideTabListColumns = Math.min(Math.max(Items.length, 1), 3)\n const initialActiveTab = initialActiveIndex >= 0 ? String(initialActiveIndex) : undefined\n const isWideTabList = isLarge === true\n const suppressOnTabActivateRef = useRef(false)\n\n const handleTabActivate = useCallback(\n (id: string) => {\n if (suppressOnTabActivateRef.current) {\n suppressOnTabActivateRef.current = false\n return\n }\n\n if (!onChange) return\n\n const nextIndex = Number(id)\n if (!Number.isNaN(nextIndex)) {\n onChange(nextIndex)\n }\n },\n [onChange],\n )\n\n const {activeTab, activateTab, getTabListProps, getTabPanelProps, getTabProps} = useTabs({\n defaultTab: initialActiveTab,\n onTabActivate: handleTabActivate,\n })\n\n const [activeAccordionIndex, setActiveAccordionIndex] = useState(initialActiveIndex)\n\n useEffect(() => {\n if (activeTab === null) return\n\n const nextIndex = Number(activeTab)\n if (!Number.isNaN(nextIndex)) {\n setActiveAccordionIndex(nextIndex)\n }\n }, [activeTab])\n\n useEffect(() => {\n if (controlledActiveIndex === null \|\| controlledActiveIndex < 0) return\n\n const controlledTab = String(controlledActiveIndex)\n if (activeTab !== controlledTab) {\n suppressOnTabActivateRef.current = true\n activateTab(controlledTab)\n }\n\n setActiveAccordionIndex(controlledActiveIndex)\n }, [activateTab, activeTab, controlledActiveIndex])\n\n if (!A11yHeadingChild && (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test')) {\n // eslint-disable-next-line no-console\n console.warn(\n 'RiverBreakoutTabs: A11yHeading child is required. This element will not be visible, only read by screenreaders.',\n )\n }\n\n const handleAccordionOpen = (index: number) => (isOpen: boolean) => {\n if (isOpen) {\n setActiveAccordionIndex(index)\n if (activeTab !== String(index)) {\n activateTab(String(index))\n }\n }\n }\n\n const handleAccordionToggle: React.ReactEventHandler<HTMLDetailsElement> = event => {\n const toggledIndex = Number(event.currentTarget.getAttribute('data-index'))\n\n if (!event.currentTarget.open && activeAccordionIndex === toggledIndex) {\n event.currentTarget.open = true\n }\n }\n\n const tabListProps = A11yHeadingChild\n ? getTabListProps({labelledBy: headingId})\n : getTabListProps({label: 'River breakout tabs'})\n const WideTabListContentParts = useMemo(\n () => Items.map(item => extractWideTabListContentParts(item.content)),\n [Items],\n )\n\n const BackgroundVisualLayer =\n backgroundVisual != null ? (\n <div className={styles.RiverBreakoutTabs__backgroundVisual} aria-hidden=\"true\">\n {backgroundVisual}\n </div>\n ) : null\n\n return (\n <section\n ref={ref}\n className={clsx(\n riverStyles.RiverBreakout,\n riverStyles['RiverBreakout--variant-gridline'],\n gridlineStyles.gridline,\n styles.RiverBreakoutTabs,\n backgroundVisual != null && styles['RiverBreakoutTabs--has-background-visual'],\n backgroundVisual != null &&\n imagePosition === 'block-end' &&\n styles['RiverBreakoutTabs--image-position-block-end'],\n backgroundVisual != null &&\n backgroundVisualFullBleed &&\n styles['RiverBreakoutTabs--background-visual-full-bleed'],\n className,\n )}\n {...props}\n >\n {A11yHeadingChild && cloneElement(A11yHeadingChild, {id: headingId})}\n\n {isWideTabList ? (\n <div className={styles.RiverBreakoutTabs__wideTabList}>\n <div\n {...tabListProps}\n className={styles.RiverBreakoutTabs__tablist}\n style={{'--river-breakout-tabs-columns': String(wideTabListColumns)} as React.CSSProperties}\n >\n {Items.map((item, index) => {\n const isSelected = activeTab === String(index)\n const tabProps = getTabProps<HTMLButtonElement>(String(index))\n const {body} = WideTabListContentParts[index]\n\n return (\n <div\n key={index}\n className={clsx(\n styles.RiverBreakoutTabs__item,\n isSelected && styles['RiverBreakoutTabs__item--selected'],\n item.className,\n )}\n >\n <button type=\"button\" {...tabProps} className={styles.RiverBreakoutTabs__tab}>\n {item.icon &&\n cloneElement(item.icon, {\n className: item.icon.props.className,\n })}\n\n {item.heading &&\n cloneElement(item.heading, {\n className: clsx(item.heading.props.className, styles.RiverBreakoutTabs__tabHeading),\n })}\n\n {body.length > 0 && <div className={styles.RiverBreakoutTabs__wideTabListContent}>{body}</div>}\n </button>\n </div>\n )\n })}\n </div>\n\n <div className={styles.RiverBreakoutTabs__sharedVisuals}>\n {BackgroundVisualLayer}\n {Items.map((item, index) => {\n const panelProps = getTabPanelProps(String(index))\n\n return (\n <div\n key={index}\n {...panelProps}\n tabIndex={-1}\n className={styles.RiverBreakoutTabs__sharedVisualPanel}\n >\n {cloneElement(item.visual as React.ReactElement<RiverVisualProps>, {\n className: clsx(item.visual?.props.className, styles.RiverBreakoutTabs__sharedVisual),\n })}\n </div>\n )\n })}\n </div>\n\n {WideTabListContentParts.some(content => content.action) && (\n <div\n className={styles.RiverBreakoutTabs__wideTabListActions}\n style={{'--river-breakout-tabs-columns': String(wideTabListColumns)} as React.CSSProperties}\n >\n {Items.map((_, index) => {\n const {action} = WideTabListContentParts[index]\n\n return (\n <div key={index} className={styles.RiverBreakoutTabs__wideTabListActionItem}>\n {action &&\n cloneElement(action, {\n className: clsx(action.props.className, styles.RiverBreakoutTabs__wideTabListAction),\n })}\n </div>\n )\n })}\n </div>\n )}\n </div>\n ) : (\n <div className={styles.RiverBreakoutTabs__accordion}>\n {activeAccordionIndex >= 0 && Items[activeAccordionIndex]?.visual && (\n <div className={styles.RiverBreakoutTabs__accordionSharedVisuals}>\n {BackgroundVisualLayer}\n {cloneElement(Items[activeAccordionIndex].visual as React.ReactElement<RiverVisualProps>, {\n className: clsx(\n Items[activeAccordionIndex].visual.props.className,\n styles.RiverBreakoutTabs__accordionSharedVisual,\n ),\n })}\n </div>\n )}\n\n {Items.map((item, index) => {\n return (\n <Accordion\n key={index}\n data-index={index}\n className={clsx(\n styles.RiverBreakoutTabs__accordionItem,\n index === activeAccordionIndex && styles['RiverBreakoutTabs__item--selected'],\n item.className,\n )}\n onToggle={handleAccordionToggle}\n open={index === activeAccordionIndex}\n handleOpen={handleAccordionOpen(index)}\n >\n <Accordion.Heading className={styles.RiverBreakoutTabs__accordionHeading}>\n <span className={styles.RiverBreakoutTabs__accordionHeadingInner}>\n {item.icon &&\n cloneElement(item.icon, {\n className: clsx(item.icon.props.className, styles.RiverBreakoutTabs__accordionIcon),\n })}\n <span className={styles.RiverBreakoutTabs__accordionLabel}>{item.heading?.props.children}</span>\n </span>\n </Accordion.Heading>\n\n <Accordion.Content className={styles.RiverBreakoutTabs__accordionPanel}>\n {cloneElement(item.content as React.ReactElement<RiverBreakoutTabsContentProps>, {\n className: clsx(item.content?.props.className, styles.RiverBreakoutTabs__accordionContent),\n })}\n </Accordion.Content>\n </Accordion>\n )\n })}\n </div>\n )}\n </section>\n )\n },\n)\n\n/\n Use RiverBreakoutTabs to showcase multiple feature stories within a single immersive surface.\n */\nexport const RiverBreakoutTabs = Object.assign(RiverBreakoutTabsRoot, {\n A11yHeading: RiverBreakoutTabsA11yHeading,\n Content: RiverBreakoutTabsContent,\n Heading: RiverBreakoutTabsHeading,\n Icon: RiverBreakoutTabsIcon,\n Item: RiverBreakoutTabsItem,\n Visual: RiverBreakoutTabsVisual,\n})\n"],"mappings":"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"}

package/esm/river/river-shared.module-Bf_bNlTd.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__river-shared-module__River___PCP5W{grid-gap:var(--brand-River-spacing-inner);gap:var(--brand-River-spacing-inner);padding-inline:var(--brand-River-spacing-outerInline);padding-block:var(--brand-River-spacing-outerBlock);grid-auto-rows:min-content;display:grid;container-type:inline-size}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX{padding-inline:var(--brand-River-variant-gridline-spacing-outerInline);padding-block:var(--brand-River-variant-gridline-spacing-outerBlock);gap:var(--base-size-32);position:relative}@media screen and (width>=48rem){.Primer_Brand__river-shared-module__River--variant-gridline___e27QX{gap:var(--base-size-28)}}@media screen and (width>=80rem){.Primer_Brand__river-shared-module__River--variant-gridline___e27QX{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__river-shared-module__River--align-center___4igQp{text-align:center}.Primer_Brand__river-shared-module__River__content___udxiD{order:2}.Primer_Brand__river-shared-module__River__visual--fill-media___aXDjy img,.Primer_Brand__river-shared-module__River__visual--fill-media___aXDjy picture,.Primer_Brand__river-shared-module__River__visual--fill-media___aXDjy video{-o-object-fit:cover;object-fit:cover;width:100%;height:100%}.Primer_Brand__river-shared-module__River__visual--rounded___noFTs{border-radius:var(--brand-borderRadius-large);overflow:hidden}.Primer_Brand__river-shared-module__River__visual--has-shadow___5__Jy{box-shadow:var(--brand-River-visual-shadow)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{background-color:var(--brand-color-canvas-subtle);padding:var(--base-size-32);margin-inline:calc(-1 * var(--brand-River-variant-gridline-spacing-outerInline));border-radius:0;justify-content:center;align-items:center;display:flex}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA img,.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA picture,.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA video{border-radius:var(--brand-borderRadius-large);width:auto;max-width:100%;height:auto}@media screen and (width<=47.99rem){.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{justify-content:flex-end;align-items:flex-end;padding-block-end:0;padding-inline-end:0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA img,.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA picture,.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA video{border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:0}}@media screen and (width>=48rem) and (width<=63.24rem){.Primer_Brand__river-shared-module__River___PCP5W{max-width:618px;margin-inline:auto}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{align-items:flex-end;padding-block-end:0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA img,.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA picture,.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA video{border-end-end-radius:0;border-end-start-radius:0}}.Primer_Brand__river-shared-module__River__heading___e5fwB{margin-bottom:var(--brand-River-heading-margin)}.Primer_Brand__river-shared-module__River__call-to-action___yOsJI{margin-top:var(--base-size-24)}.Primer_Brand__river-shared-module__River__text___HCqnL strong,.Primer_Brand__river-shared-module__River__text___HCqnL b{font-weight:var(--base-text-weight-normal);color:var(--brand-color-text-default)}.Primer_Brand__river-shared-module__River__heading___e5fwB code,.Primer_Brand__river-shared-module__River__text___HCqnL code{font-size:inherit;background-color:var(--brand-color-canvas-subtle);padding:0 var(--base-size-4) var(--base-size-2);margin-inline:var(--base-size-2);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-small);box-shadow:var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default);font-family:var(--brand-fontStack-monospace)!important}.Primer_Brand__river-shared-module__River__text___HCqnL code{padding:var(--base-size-2) var(--base-size-4) 0}.Primer_Brand__river-shared-module__River__heading-inner___XAylb:has(code){line-height:1.8lh}@media screen and (width>=64rem){.Primer_Brand__river-shared-module__River__heading-inner___XAylb:has(code){line-height:2.1lh}}.Primer_Brand__river-shared-module__River__text___HCqnL:has(code){line-height:1.1lh}.Primer_Brand__river-shared-module__River__trailingComponent___jDuou{margin-block-start:var(--brand-River-spacing-inner)}.Primer_Brand__river-shared-module__River__trailingComponent--divider___mTL35{border-top:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-block-start:var(--brand-River-spacing-inner)}.Primer_Brand__river-shared-module__River__label___ENXiR{margin-block-end:var(--brand-River-label-margin)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-start___PjR7w .Primer_Brand__river-shared-module__River__visual___s4zuj{order:1}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-start___PjR7w .Primer_Brand__river-shared-module__River__content___udxiD{order:2}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-end___PI17m .Primer_Brand__river-shared-module__River__content___udxiD{order:1}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-end___PI17m .Primer_Brand__river-shared-module__River__visual___s4zuj{order:2}@media screen and (width<=63.24rem){.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-start___PjR7w .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{margin-block-start:calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock))}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-end___PI17m .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{margin-block-end:calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock))}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-center___4igQp .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{margin-block-start:calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock))}}@media screen and (width>=63.25rem){.Primer_Brand__river-shared-module__River___PCP5W{grid-template-rows:initial}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{padding:var(--base-size-64);margin:0}.Primer_Brand__river-shared-module__River__content___udxiD{order:initial}.Primer_Brand__river-shared-module__River--50-50___37Rpp{grid-template-columns:[content]1fr[visual]1fr}.Primer_Brand__river-shared-module__River--60-40___3M2aV{grid-template-columns:[content]4fr[visual]6fr}.Primer_Brand__river-shared-module__River--align-start___PjR7w{grid-template-areas:"content visual"}.Primer_Brand__river-shared-module__River--align-end___PI17m{grid-template-areas:"visual content"}.Primer_Brand__river-shared-module__River--align-end___PI17m.Primer_Brand__river-shared-module__River--60-40___3M2aV{grid-template-columns:[visual]6fr[content]4fr}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-start___PjR7w.Primer_Brand__river-shared-module__River--50-50___37Rpp:not(:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA)) .Primer_Brand__river-shared-module__River__visual___s4zuj{margin-inline-start:calc(var(--base-size-80) + var(--base-size-8))}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-end___PI17m.Primer_Brand__river-shared-module__River--50-50___37Rpp:not(:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA)) .Primer_Brand__river-shared-module__River__visual___s4zuj{margin-inline-end:calc(var(--base-size-80) + var(--base-size-8))}.Primer_Brand__river-shared-module__River__content___udxiD{grid-area:content;align-content:center;display:grid}.Primer_Brand__river-shared-module__River--50-50___37Rpp:not(.Primer_Brand__river-shared-module__River--variant-gridline___e27QX) .Primer_Brand__river-shared-module__River__body-text___K4T6H,.Primer_Brand__river-shared-module__River--50-50___37Rpp:not(.Primer_Brand__river-shared-module__River--variant-gridline___e27QX) .Primer_Brand__river-shared-module__River__heading___e5fwB{max-width:400px}.Primer_Brand__river-shared-module__River--align-start___PjR7w:not(.Primer_Brand__river-shared-module__River--variant-gridline___e27QX) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline-end:var(--base-size-128)}.Primer_Brand__river-shared-module__River--align-end___PI17m:not(.Primer_Brand__river-shared-module__River--variant-gridline___e27QX) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline-start:var(--base-size-128)}.Primer_Brand__river-shared-module__River__content--align-block-end___w7f2E{align-content:end}.Primer_Brand__river-shared-module__River__visual___s4zuj{grid-area:visual}.Primer_Brand__river-shared-module__River--align-center___4igQp{grid-auto-rows:min-content;grid-template-columns:initial}.Primer_Brand__river-shared-module__River--align-center___4igQp .Primer_Brand__river-shared-module__River__content___udxiD,.Primer_Brand__river-shared-module__River--align-center___4igQp .Primer_Brand__river-shared-module__River__visual___s4zuj{grid-area:unset;justify-self:center}.Primer_Brand__river-shared-module__River--align-center___4igQp .Primer_Brand__river-shared-module__River__body-text___K4T6H{justify-self:center;max-width:600px}.Primer_Brand__river-shared-module__River--align-center___4igQp .Primer_Brand__river-shared-module__River__visual___s4zuj{margin-bottom:var(--brand-River-spacing-inner)}.Primer_Brand__river-shared-module__River--align-center___4igQp .Primer_Brand__river-shared-module__River__content___udxiD{margin-top:var(--brand-River-spacing-inner)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX:not(.Primer_Brand__river-shared-module__River--align-center___4igQp):has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA){gap:0;padding:0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--50-50___37Rpp:not(.Primer_Brand__river-shared-module__River--align-center___4igQp):has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA){grid-template-columns:1fr 1fr}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--60-40___3M2aV:not(.Primer_Brand__river-shared-module__River--align-center___4igQp):has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA){grid-template-columns:560fr 676fr}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-end___PI17m.Primer_Brand__river-shared-module__River--60-40___3M2aV:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA){grid-template-columns:676fr 560fr}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-start___PjR7w:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline-start:var(--base-size-64);padding-inline-end:var(--brand-River-spacing-inner);padding-block:var(--brand-River-variant-gridline-spacing-outerBlock)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--50-50___37Rpp.Primer_Brand__river-shared-module__River--align-start___PjR7w:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline-end:calc(var(--base-size-80) + var(--base-size-32))}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--60-40___3M2aV.Primer_Brand__river-shared-module__River--align-start___PjR7w:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline-end:var(--base-size-128)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-end___PI17m:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline-start:var(--brand-River-spacing-inner);padding-inline-end:var(--base-size-64);padding-block:var(--brand-River-variant-gridline-spacing-outerBlock)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--50-50___37Rpp.Primer_Brand__river-shared-module__River--align-end___PI17m:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline-start:calc(var(--base-size-80) + var(--base-size-32))}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--60-40___3M2aV.Primer_Brand__river-shared-module__River--align-end___PI17m:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline-start:var(--base-size-128)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-start___PjR7w:not(:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA)) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline-end:var(--brand-River-spacing-inner)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-end___PI17m:not(:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA)) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline-start:var(--brand-River-spacing-inner)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--50-50___37Rpp:not(.Primer_Brand__river-shared-module__River--align-center___4igQp) .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{margin-inline:0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-center___4igQp:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA){padding:0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-center___4igQp .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{width:100%;margin:0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-center___4igQp .Primer_Brand__river-shared-module__River__visual___s4zuj{margin-bottom:0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-center___4igQp{gap:0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-center___4igQp .Primer_Brand__river-shared-module__River__content___udxiD{margin-top:0;margin-bottom:var(--base-size-64)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-center___4igQp:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline:var(--brand-River-variant-gridline-spacing-outerInline);padding-block-start:var(--brand-River-variant-gridline-spacing-outerBlock)}}.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F{gap:var(--brand-RiverBreakout-spacing-inner);flex-direction:column;padding-block-start:var(--brand-River-spacing-outerBlock);padding-block-end:var(--brand-River-spacing-outerBlock);display:flex}.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__text___HCqnL{max-width:37.5rem;color:var(--brand-color-text-default);font-size:var(--brand-text-size-500);font-weight:var(--brand-heading-weight-500);letter-spacing:var(--brand-heading-letterSpacing-500);line-height:var(--brand-text-lineHeight-500)}.Primer_Brand__river-shared-module__RiverBreakout--muted___ndl_I .Primer_Brand__river-shared-module__River__text___HCqnL{color:var(--brand-color-text-muted)}.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__text___HCqnL em,.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__text___HCqnL b{color:var(--brand-color-text-default);font-style:normal;font-weight:inherit}.Primer_Brand__river-shared-module__RiverBreakout__hiddenHeading___wqngh{clip:rect(1px, 1px, 1px, 1px);border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__call-to-action___yOsJI{padding-block-start:var(--base-size-12)}@media screen and (width>=48rem){.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__content___udxiD{grid-gap:var(--brand-River-spacing-inner);gap:var(--brand-River-spacing-inner);grid-row-gap:var(--brand-River-spacing-innerY);row-gap:var(--brand-River-spacing-innerY);grid-template-columns:5fr 3fr;grid-template-areas:"text trailingComponent""cta trailingComponent";grid-auto-rows:auto 1fr;display:grid}.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__text___HCqnL{grid-area:text}.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__call-to-action___yOsJI{grid-area:cta;margin-block:0}.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__trailingComponent___jDuou{grid-area:trailingComponent;justify-self:flex-end;margin-block-start:0}}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H{padding-inline:var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);gap:0;padding-block-start:var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);padding-block-end:0;position:relative}@media screen and (width<=63.24rem){.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H{width:100%;max-width:38.625rem;margin-inline:auto}}@media screen and (width>=618px){.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}@media screen and (width>=63.25rem){.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H{border-inline:none}}@media screen and (width>=1300px){.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual___s4zuj{overflow:hidden}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--rounded___noFTs{border-radius:var(--brand-borderRadius-large)}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__content___udxiD{gap:var(--brand-RiverBreakout-variant-gridline-spacing-contentGap);padding-block-start:var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);padding-block-end:var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd)}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__call-to-action___yOsJI{padding-block-start:var(--base-size-12)}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__trailingComponent--divider___mTL35{border-top:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);margin-inline:calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerInline));padding-block-start:var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);padding-block-end:var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);padding-inline:var(--brand-RiverBreakout-variant-gridline-spacing-outerInline)}@media screen and (width>=48rem) and (width<=63.24rem){.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__content___udxiD{flex-direction:column;display:flex}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__trailingComponent___jDuou{margin-block-start:0}}@media screen and (width>=63.25rem){.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H:has(.Primer_Brand__river-shared-module__River__trailingComponent--divider___mTL35){padding-block-end:0}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__content___udxiD{grid-template-columns:1fr 31rem;grid-template-areas:"text trailingComponent""cta trailingComponent";grid-template-columns:1fr var(--brand-RiverBreakout-gridline-trailing-width,31rem);grid-gap:var(--brand-RiverBreakout-variant-gridline-spacing-contentGap);gap:var(--brand-RiverBreakout-variant-gridline-spacing-contentGap);flex:1;grid-template-rows:auto 1fr;padding-block:0;display:grid}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__text___HCqnL{grid-area:text;padding-block-start:var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock)}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__call-to-action___yOsJI{grid-area:cta;margin-block:0;padding-block-end:var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd)}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__trailingComponent___jDuou{grid-area:trailingComponent;margin-block-start:0}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__trailingComponent--divider___mTL35{border-top:none;border-left:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-inline:0;padding-block:0;padding-inline-start:var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);align-self:stretch;margin-block:0;margin-inline:0;padding-block-start:var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);padding-block-end:var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd)}}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA){padding-block-start:0}.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{background-color:var(--brand-color-canvas-subtle);border-radius:0;justify-content:center;align-items:center;display:flex;overflow:hidden}.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA img,.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA picture,.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA video{border-radius:var(--brand-borderRadius-large);width:auto;max-width:100%;height:auto}.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA [data-video-player-container]{border-radius:var(--brand-borderRadius-large)}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{margin-inline:calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerInline));padding:var(--base-size-32)}@media screen and (width<=47.99rem){.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{align-items:flex-end;padding-block-end:0}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA img,.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA picture,.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA video,.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA [data-video-player-container]{border-end-end-radius:0;border-end-start-radius:0}}@media screen and (width>=48rem) and (width<=63.24rem){.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{align-items:flex-end;padding-block-end:0}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA img,.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA picture,.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA video,.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA [data-video-player-container]{border-end-end-radius:0;border-end-start-radius:0}}@media screen and (width>=63.25rem){.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{padding:var(--base-size-64);align-items:flex-end;padding-block-end:0}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA img,.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA picture,.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA video,.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA [data-video-player-container]{border-end-end-radius:0;border-end-start-radius:0}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA.Primer_Brand__river-shared-module__River__visual--rounded___noFTs{border-radius:0}}

package/esm/river/river-shared.module.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import './river-shared.module-D0AV93uz.css';var e = {
+import './river-shared.module-Bf_bNlTd.css';var e = {
 	River: "Primer_Brand__river-shared-module__River___PCP5W",
 	"River--variant-gridline": "Primer_Brand__river-shared-module__River--variant-gridline___e27QX",
 	"River--align-center": "Primer_Brand__river-shared-module__River--align-center___4igQp",

package/esm/river/river-shared.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"river-shared.module.js","names":[],"sources":["../../src/river/river-shared.module.css"],"sourcesContent":[".River {\n display: grid;\n gap: var(--brand-River-spacing-inner);\n grid-auto-rows: min-content;\n padding-inline: var(--brand-River-spacing-outerInline);\n padding-block: var(--brand-River-spacing-outerBlock);\n container-type: inline-size;\n}\n\n.River--variant-gridline {\n position: relative;\n padding-inline: var(--brand-River-variant-gridline-spacing-outerInline);\n padding-block: var(--brand-River-variant-gridline-spacing-outerBlock);\n gap: var(--base-size-32);\n}\n\n@media screen and (min-width: 48rem) {\n .River--variant-gridline {\n gap: var(--base-size-28);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .River--variant-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.River--align-center {\n text-align: center;\n}\n\n.River__content {\n order: 2;\n}\n\n.River__visual--fill-media img,\n.River__visual--fill-media picture,\n.River__visual--fill-media video {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.River__visual--rounded {\n overflow: hidden;\n border-radius: var(--brand-borderRadius-large);\n}\n\n.River__visual--has-shadow {\n box-shadow: var(--brand-River-visual-shadow);\n}\n\n.River--variant-gridline .River__visual--has-background {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--brand-color-canvas-subtle);\n padding: var(--base-size-32);\n border-radius: 0;\n margin-inline: calc(-1 * var(--brand-River-variant-gridline-spacing-outerInline));\n}\n\n.River--variant-gridline .River__visual--has-background img,\n.River--variant-gridline .River__visual--has-background picture,\n.River--variant-gridline .River__visual--has-background video {\n max-width: 100%;\n height: auto;\n width: auto;\n border-radius: var(--brand-borderRadius-large);\n}\n\n@media screen and (max-width: 47.99rem) {\n .River--variant-gridline .River__visual--has-background {\n align-items: flex-end;\n justify-content: flex-end;\n padding-block-end: 0;\n padding-inline-end: 0;\n }\n\n .River--variant-gridline .River__visual--has-background img,\n .River--variant-gridline .River__visual--has-background picture,\n .River--variant-gridline .River__visual--has-background video {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n border-start-end-radius: 0;\n }\n}\n\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n .River--variant-gridline .River__visual--has-background {\n align-items: flex-end;\n padding-block-end: 0;\n }\n\n .River--variant-gridline .River__visual--has-background img,\n .River--variant-gridline .River__visual--has-background picture,\n .River--variant-gridline .River__visual--has-background video {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n}\n\n.River__heading {\n margin-bottom: var(--brand-River-heading-margin);\n}\n\n.River__call-to-action {\n margin-top: var(--base-size-20);\n}\n\n.River__text strong,\n.River__text b {\n font-weight: var(--base-text-weight-normal);\n color: var(--brand-color-text-default);\n}\n\n.River__heading code,\n.River__text code {\n font-size: inherit;\n font-family: var(--brand-fontStack-monospace) !important;\n background-color: var(--brand-color-canvas-subtle);\n padding: 0 var(--base-size-4) var(--base-size-2);\n margin-inline: var(--base-size-2);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n border-radius: var(--brand-borderRadius-small);\n box-shadow: var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default);\n}\n\n.River__text code {\n padding: var(--base-size-2) var(--base-size-4) 0;\n}\n\n.River__heading-inner:has(code) {\n line-height: calc(1lh * 1.8);\n}\n\n@media screen and (min-width: 64rem) {\n .River__heading-inner:has(code) {\n line-height: calc(1lh * 2.1);\n }\n}\n\n.River__text:has(code) {\n line-height: calc(1lh * 1.1);\n}\n\n.River__trailingComponent {\n margin-block-start: var(--brand-River-spacing-inner);\n}\n\n.River__trailingComponent--divider {\n padding-block-start: var(--brand-River-spacing-inner);\n border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.River__label {\n margin-block-end: var(--brand-River-label-margin);\n}\n\n.River--variant-gridline.River--align-start .River__visual {\n order: 1;\n}\n\n.River--variant-gridline.River--align-start .River__content {\n order: 2;\n}\n\n.River--variant-gridline.River--align-end .River__content {\n order: 1;\n}\n\n.River--variant-gridline.River--align-end .River__visual {\n order: 2;\n}\n\n@media screen and (max-width: 63.24rem) {\n .River--variant-gridline.River--align-start .River__visual--has-background {\n margin-block-start: calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock));\n }\n\n .River--variant-gridline.River--align-end .River__visual--has-background {\n margin-block-end: calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock));\n }\n\n .River--variant-gridline.River--align-center .River__visual--has-background {\n margin-block-start: calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock));\n }\n}\n\n/* Large breakpoint and up /\n@media screen and (min-width: 63.25rem) {\n .River {\n grid-template-rows: unset;\n }\n\n .River--variant-gridline .River__visual--has-background {\n padding: var(--base-size-64);\n margin: 0;\n }\n\n .River__content {\n order: unset;\n }\n\n .River--50-50 {\n grid-template-columns: [content] 1fr [visual] 1fr;\n }\n\n .River--60-40 {\n grid-template-columns: [content] 4fr [visual] 6fr;\n }\n\n .River--align-start {\n grid-template-areas: 'content visual';\n }\n\n .River--align-end {\n grid-template-areas: 'visual content';\n }\n\n .River--align-end.River--60-40 {\n grid-template-columns: [visual] 6fr [content] 4fr;\n }\n\n .River--variant-gridline.River--align-start.River--50-50:not(:has(.River__visual--has-background)) .River__visual {\n margin-inline-start: calc(var(--base-size-80) + var(--base-size-8));\n }\n\n .River--variant-gridline.River--align-end.River--50-50:not(:has(.River__visual--has-background)) .River__visual {\n margin-inline-end: calc(var(--base-size-80) + var(--base-size-8));\n }\n\n .River__content {\n display: grid;\n align-content: center;\n grid-area: content;\n }\n\n .River--50-50:not(.River--variant-gridline) .River__body-text,\n .River--50-50:not(.River--variant-gridline) .River__heading {\n max-width: 400px;\n }\n\n .River--align-start:not(.River--variant-gridline) .River__content {\n padding-inline-end: var(--base-size-128);\n }\n\n .River--align-end:not(.River--variant-gridline) .River__content {\n padding-inline-start: var(--base-size-128);\n }\n\n .River__content--align-block-end {\n align-content: end;\n }\n\n .River__visual {\n grid-area: visual;\n }\n\n .River--align-center {\n grid-auto-rows: min-content;\n grid-template-columns: unset;\n }\n\n .River--align-center .River__content,\n .River--align-center .River__visual {\n grid-area: unset;\n justify-self: center;\n }\n\n .River--align-center .River__body-text {\n max-width: 600px;\n justify-self: center;\n }\n\n .River--align-center .River__visual {\n margin-bottom: var(--brand-River-spacing-inner);\n }\n\n .River--align-center .River__content {\n margin-top: var(--brand-River-spacing-inner);\n }\n\n .River--variant-gridline:not(.River--align-center):has(.River__visual--has-background) {\n padding: 0;\n gap: 0;\n }\n\n .River--variant-gridline.River--50-50:not(.River--align-center):has(.River__visual--has-background) {\n grid-template-columns: 1fr 1fr;\n }\n\n .River--variant-gridline.River--60-40:not(.River--align-center):has(.River__visual--has-background) {\n grid-template-columns: 560fr 676fr;\n }\n\n .River--variant-gridline.River--align-end.River--60-40:has(.River__visual--has-background) {\n grid-template-columns: 676fr 560fr;\n }\n\n .River--variant-gridline.River--align-start:has(.River__visual--has-background) .River__content {\n padding-inline-start: var(--base-size-64);\n padding-inline-end: var(--brand-River-spacing-inner);\n padding-block: var(--brand-River-variant-gridline-spacing-outerBlock);\n }\n\n .River--variant-gridline.River--50-50.River--align-start:has(.River__visual--has-background) .River__content {\n padding-inline-end: calc(var(--base-size-80) + var(--base-size-32));\n }\n\n .River--variant-gridline.River--60-40.River--align-start:has(.River__visual--has-background) .River__content {\n padding-inline-end: var(--base-size-128);\n }\n\n .River--variant-gridline.River--align-end:has(.River__visual--has-background) .River__content {\n padding-inline-start: var(--brand-River-spacing-inner);\n padding-inline-end: var(--base-size-64);\n padding-block: var(--brand-River-variant-gridline-spacing-outerBlock);\n }\n\n .River--variant-gridline.River--50-50.River--align-end:has(.River__visual--has-background) .River__content {\n padding-inline-start: calc(var(--base-size-80) + var(--base-size-32));\n }\n\n .River--variant-gridline.River--60-40.River--align-end:has(.River__visual--has-background) .River__content {\n padding-inline-start: var(--base-size-128);\n }\n\n .River--variant-gridline.River--align-start:not(:has(.River__visual--has-background)) .River__content {\n padding-inline-end: var(--brand-River-spacing-inner);\n }\n\n .River--variant-gridline.River--align-end:not(:has(.River__visual--has-background)) .River__content {\n padding-inline-start: var(--brand-River-spacing-inner);\n }\n\n .River--variant-gridline.River--50-50:not(.River--align-center) .River__visual--has-background {\n margin-inline-start: 0;\n margin-inline-end: 0;\n }\n\n .River--variant-gridline.River--align-center:has(.River__visual--has-background) {\n padding: 0;\n }\n\n .River--variant-gridline.River--align-center .River__visual--has-background {\n width: 100%;\n margin: 0;\n }\n\n .River--variant-gridline.River--align-center .River__visual {\n margin-bottom: 0;\n }\n\n .River--variant-gridline.River--align-center {\n gap: 0;\n }\n\n .River--variant-gridline.River--align-center .River__content {\n margin-top: 0;\n margin-bottom: var(--base-size-64);\n }\n\n .River--variant-gridline.River--align-center:has(.River__visual--has-background) .River__content {\n padding-inline: var(--brand-River-variant-gridline-spacing-outerInline);\n padding-block-start: var(--brand-River-variant-gridline-spacing-outerBlock);\n }\n}\n\n.RiverBreakout {\n display: flex;\n flex-direction: column;\n gap: var(--brand-RiverBreakout-spacing-inner);\n padding-block-end: var(--brand-River-spacing-outerBlock);\n padding-block-start: var(--brand-River-spacing-outerBlock);\n}\n\n.RiverBreakout .River__text {\n max-width: 37.5rem; / 600px /\n color: var(--brand-color-text-default);\n font-size: var(--brand-text-size-500);\n font-weight: var(--brand-heading-weight-500);\n letter-spacing: var(--brand-heading-letterSpacing-500);\n line-height: var(--brand-text-lineHeight-500);\n}\n\n.RiverBreakout--muted .River__text {\n color: var(--brand-color-text-muted);\n}\n\n.RiverBreakout .River__text em,\n.RiverBreakout .River__text b {\n color: var(--brand-color-text-default);\n font-style: normal;\n font-weight: inherit;\n}\n\n.RiverBreakout__hiddenHeading {\n border: 0;\n clip: rect(1px, 1px, 1px, 1px);\n height: 1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.RiverBreakout .River__call-to-action {\n padding-block-start: var(--base-size-12);\n}\n\n@media screen and (min-width: 48rem) {\n .RiverBreakout .River__content {\n display: grid;\n gap: var(--brand-River-spacing-inner);\n row-gap: var(--brand-River-spacing-innerY);\n grid-template-areas:\n 'text trailingComponent'\n 'cta trailingComponent';\n grid-template-columns: 5fr 3fr;\n grid-auto-rows: auto 1fr;\n }\n\n .RiverBreakout .River__text {\n grid-area: text;\n }\n\n .RiverBreakout .River__call-to-action {\n grid-area: cta;\n margin-block: 0;\n }\n\n .RiverBreakout .River__trailingComponent {\n grid-area: trailingComponent;\n justify-self: flex-end;\n margin-block-start: 0;\n }\n}\n\n.RiverBreakout--variant-gridline {\n position: relative;\n padding-inline: var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);\n padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n padding-block-end: 0;\n gap: 0;\n}\n\n@media screen and (max-width: 63.24rem) {\n .RiverBreakout--variant-gridline {\n width: 100%;\n max-width: 38.625rem;\n margin-inline: auto;\n }\n}\n\n@media screen and (min-width: 618px) {\n .RiverBreakout--variant-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .RiverBreakout--variant-gridline {\n border-inline: none;\n }\n}\n\n@media screen and (min-width: 1300px) {\n .RiverBreakout--variant-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.RiverBreakout--variant-gridline .River__visual {\n overflow: hidden;\n}\n\n.RiverBreakout--variant-gridline .River__visual--rounded {\n border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverBreakout--variant-gridline .River__content {\n padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n gap: var(--brand-RiverBreakout-variant-gridline-spacing-contentGap);\n}\n\n.RiverBreakout--variant-gridline .River__call-to-action {\n padding-block-start: var(--base-size-12);\n}\n\n.RiverBreakout--variant-gridline .River__trailingComponent--divider {\n padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n margin-inline: calc(-1 var(--brand-RiverBreakout-variant-gridline-spacing-outerInline));\n padding-inline: var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);\n}\n\n/* Reset base RiverBreakout grid for gridline variant until desktop breakpoint /\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n .RiverBreakout--variant-gridline .River__content {\n display: flex;\n flex-direction: column;\n }\n\n .RiverBreakout--variant-gridline .River__trailingComponent {\n margin-block-start: 0;\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .RiverBreakout--variant-gridline:has(.River__trailingComponent--divider) {\n padding-block-end: 0;\n }\n\n .RiverBreakout--variant-gridline .River__content {\n display: grid;\n grid-template-areas:\n 'text trailingComponent'\n 'cta trailingComponent';\n grid-template-columns: 1fr var(--brand-RiverBreakout-gridline-trailing-width, 31rem);\n grid-template-rows: auto 1fr;\n gap: var(--brand-RiverBreakout-variant-gridline-spacing-contentGap);\n flex: 1;\n padding-block: 0;\n }\n\n .RiverBreakout--variant-gridline .River__text {\n grid-area: text;\n padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n }\n\n .RiverBreakout--variant-gridline .River__call-to-action {\n grid-area: cta;\n margin-block: 0;\n padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n }\n\n .RiverBreakout--variant-gridline .River__trailingComponent {\n grid-area: trailingComponent;\n margin-block-start: 0;\n }\n\n .RiverBreakout--variant-gridline .River__trailingComponent--divider {\n border-top: none;\n border-left: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n margin-inline: 0;\n margin-block: 0;\n padding-inline: 0;\n padding-inline-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);\n padding-block: 0;\n padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n align-self: stretch;\n }\n}\n\n/ Gridline + background: remove outer container top padding (background fills to top edge) /\n.RiverBreakout--variant-gridline:has(.River__visual--has-background) {\n padding-block-start: 0;\n}\n\n.RiverBreakout .River__visual--has-background {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--brand-color-canvas-subtle);\n border-radius: 0;\n overflow: hidden;\n}\n\n.RiverBreakout .River__visual--has-background img,\n.RiverBreakout .River__visual--has-background picture,\n.RiverBreakout .River__visual--has-background video {\n max-width: 100%;\n height: auto;\n width: auto;\n border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverBreakout .River__visual--has-background [data-video-player-container] {\n border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverBreakout--variant-gridline .River__visual--has-background {\n margin-inline: calc(-1 var(--brand-RiverBreakout-variant-gridline-spacing-outerInline));\n padding: var(--base-size-32);\n}\n\n@media screen and (max-width: 47.99rem) {\n .RiverBreakout--variant-gridline .River__visual--has-background {\n align-items: flex-end;\n padding-block-end: 0;\n }\n\n .RiverBreakout--variant-gridline .River__visual--has-background img,\n .RiverBreakout--variant-gridline .River__visual--has-background picture,\n .RiverBreakout--variant-gridline .River__visual--has-background video {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n\n .RiverBreakout--variant-gridline .River__visual--has-background [data-video-player-container] {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n}\n\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n .RiverBreakout--variant-gridline .River__visual--has-background {\n align-items: flex-end;\n padding-block-end: 0;\n }\n\n .RiverBreakout--variant-gridline .River__visual--has-background img,\n .RiverBreakout--variant-gridline .River__visual--has-background picture,\n .RiverBreakout--variant-gridline .River__visual--has-background video {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n\n .RiverBreakout--variant-gridline .River__visual--has-background [data-video-player-container] {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .RiverBreakout--variant-gridline .River__visual--has-background {\n align-items: flex-end;\n padding: var(--base-size-64);\n padding-block-end: 0;\n }\n\n .RiverBreakout--variant-gridline .River__visual--has-background img,\n .RiverBreakout--variant-gridline .River__visual--has-background picture,\n .RiverBreakout--variant-gridline .River__visual--has-background video {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n\n .RiverBreakout--variant-gridline .River__visual--has-background [data-video-player-container] {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n\n .RiverBreakout--variant-gridline .River__visual--has-background.River__visual--rounded {\n border-radius: 0;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"river-shared.module.js","names":[],"sources":["../../src/river/river-shared.module.css"],"sourcesContent":[".River {\n display: grid;\n gap: var(--brand-River-spacing-inner);\n grid-auto-rows: min-content;\n padding-inline: var(--brand-River-spacing-outerInline);\n padding-block: var(--brand-River-spacing-outerBlock);\n container-type: inline-size;\n}\n\n.River--variant-gridline {\n position: relative;\n padding-inline: var(--brand-River-variant-gridline-spacing-outerInline);\n padding-block: var(--brand-River-variant-gridline-spacing-outerBlock);\n gap: var(--base-size-32);\n}\n\n@media screen and (min-width: 48rem) {\n .River--variant-gridline {\n gap: var(--base-size-28);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .River--variant-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.River--align-center {\n text-align: center;\n}\n\n.River__content {\n order: 2;\n}\n\n.River__visual--fill-media img,\n.River__visual--fill-media picture,\n.River__visual--fill-media video {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.River__visual--rounded {\n overflow: hidden;\n border-radius: var(--brand-borderRadius-large);\n}\n\n.River__visual--has-shadow {\n box-shadow: var(--brand-River-visual-shadow);\n}\n\n.River--variant-gridline .River__visual--has-background {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--brand-color-canvas-subtle);\n padding: var(--base-size-32);\n border-radius: 0;\n margin-inline: calc(-1 * var(--brand-River-variant-gridline-spacing-outerInline));\n}\n\n.River--variant-gridline .River__visual--has-background img,\n.River--variant-gridline .River__visual--has-background picture,\n.River--variant-gridline .River__visual--has-background video {\n max-width: 100%;\n height: auto;\n width: auto;\n border-radius: var(--brand-borderRadius-large);\n}\n\n@media screen and (max-width: 47.99rem) {\n .River--variant-gridline .River__visual--has-background {\n align-items: flex-end;\n justify-content: flex-end;\n padding-block-end: 0;\n padding-inline-end: 0;\n }\n\n .River--variant-gridline .River__visual--has-background img,\n .River--variant-gridline .River__visual--has-background picture,\n .River--variant-gridline .River__visual--has-background video {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n border-start-end-radius: 0;\n }\n}\n\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n .River {\n max-width: 618px;\n margin-inline: auto;\n }\n\n .River--variant-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .River--variant-gridline .River__visual--has-background {\n align-items: flex-end;\n padding-block-end: 0;\n }\n\n .River--variant-gridline .River__visual--has-background img,\n .River--variant-gridline .River__visual--has-background picture,\n .River--variant-gridline .River__visual--has-background video {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n}\n\n.River__heading {\n margin-bottom: var(--brand-River-heading-margin);\n}\n\n.River__call-to-action {\n margin-top: var(--base-size-24);\n}\n\n.River__text strong,\n.River__text b {\n font-weight: var(--base-text-weight-normal);\n color: var(--brand-color-text-default);\n}\n\n.River__heading code,\n.River__text code {\n font-size: inherit;\n font-family: var(--brand-fontStack-monospace) !important;\n background-color: var(--brand-color-canvas-subtle);\n padding: 0 var(--base-size-4) var(--base-size-2);\n margin-inline: var(--base-size-2);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n border-radius: var(--brand-borderRadius-small);\n box-shadow: var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default);\n}\n\n.River__text code {\n padding: var(--base-size-2) var(--base-size-4) 0;\n}\n\n.River__heading-inner:has(code) {\n line-height: calc(1lh * 1.8);\n}\n\n@media screen and (min-width: 64rem) {\n .River__heading-inner:has(code) {\n line-height: calc(1lh * 2.1);\n }\n}\n\n.River__text:has(code) {\n line-height: calc(1lh * 1.1);\n}\n\n.River__trailingComponent {\n margin-block-start: var(--brand-River-spacing-inner);\n}\n\n.River__trailingComponent--divider {\n padding-block-start: var(--brand-River-spacing-inner);\n border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.River__label {\n margin-block-end: var(--brand-River-label-margin);\n}\n\n.River--variant-gridline.River--align-start .River__visual {\n order: 1;\n}\n\n.River--variant-gridline.River--align-start .River__content {\n order: 2;\n}\n\n.River--variant-gridline.River--align-end .River__content {\n order: 1;\n}\n\n.River--variant-gridline.River--align-end .River__visual {\n order: 2;\n}\n\n@media screen and (max-width: 63.24rem) {\n .River--variant-gridline.River--align-start .River__visual--has-background {\n margin-block-start: calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock));\n }\n\n .River--variant-gridline.River--align-end .River__visual--has-background {\n margin-block-end: calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock));\n }\n\n .River--variant-gridline.River--align-center .River__visual--has-background {\n margin-block-start: calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock));\n }\n}\n\n/* Large breakpoint and up /\n@media screen and (min-width: 63.25rem) {\n .River {\n grid-template-rows: unset;\n }\n\n .River--variant-gridline .River__visual--has-background {\n padding: var(--base-size-64);\n margin: 0;\n }\n\n .River__content {\n order: unset;\n }\n\n .River--50-50 {\n grid-template-columns: [content] 1fr [visual] 1fr;\n }\n\n .River--60-40 {\n grid-template-columns: [content] 4fr [visual] 6fr;\n }\n\n .River--align-start {\n grid-template-areas: 'content visual';\n }\n\n .River--align-end {\n grid-template-areas: 'visual content';\n }\n\n .River--align-end.River--60-40 {\n grid-template-columns: [visual] 6fr [content] 4fr;\n }\n\n .River--variant-gridline.River--align-start.River--50-50:not(:has(.River__visual--has-background)) .River__visual {\n margin-inline-start: calc(var(--base-size-80) + var(--base-size-8));\n }\n\n .River--variant-gridline.River--align-end.River--50-50:not(:has(.River__visual--has-background)) .River__visual {\n margin-inline-end: calc(var(--base-size-80) + var(--base-size-8));\n }\n\n .River__content {\n display: grid;\n align-content: center;\n grid-area: content;\n }\n\n .River--50-50:not(.River--variant-gridline) .River__body-text,\n .River--50-50:not(.River--variant-gridline) .River__heading {\n max-width: 400px;\n }\n\n .River--align-start:not(.River--variant-gridline) .River__content {\n padding-inline-end: var(--base-size-128);\n }\n\n .River--align-end:not(.River--variant-gridline) .River__content {\n padding-inline-start: var(--base-size-128);\n }\n\n .River__content--align-block-end {\n align-content: end;\n }\n\n .River__visual {\n grid-area: visual;\n }\n\n .River--align-center {\n grid-auto-rows: min-content;\n grid-template-columns: unset;\n }\n\n .River--align-center .River__content,\n .River--align-center .River__visual {\n grid-area: unset;\n justify-self: center;\n }\n\n .River--align-center .River__body-text {\n max-width: 600px;\n justify-self: center;\n }\n\n .River--align-center .River__visual {\n margin-bottom: var(--brand-River-spacing-inner);\n }\n\n .River--align-center .River__content {\n margin-top: var(--brand-River-spacing-inner);\n }\n\n .River--variant-gridline:not(.River--align-center):has(.River__visual--has-background) {\n padding: 0;\n gap: 0;\n }\n\n .River--variant-gridline.River--50-50:not(.River--align-center):has(.River__visual--has-background) {\n grid-template-columns: 1fr 1fr;\n }\n\n .River--variant-gridline.River--60-40:not(.River--align-center):has(.River__visual--has-background) {\n grid-template-columns: 560fr 676fr;\n }\n\n .River--variant-gridline.River--align-end.River--60-40:has(.River__visual--has-background) {\n grid-template-columns: 676fr 560fr;\n }\n\n .River--variant-gridline.River--align-start:has(.River__visual--has-background) .River__content {\n padding-inline-start: var(--base-size-64);\n padding-inline-end: var(--brand-River-spacing-inner);\n padding-block: var(--brand-River-variant-gridline-spacing-outerBlock);\n }\n\n .River--variant-gridline.River--50-50.River--align-start:has(.River__visual--has-background) .River__content {\n padding-inline-end: calc(var(--base-size-80) + var(--base-size-32));\n }\n\n .River--variant-gridline.River--60-40.River--align-start:has(.River__visual--has-background) .River__content {\n padding-inline-end: var(--base-size-128);\n }\n\n .River--variant-gridline.River--align-end:has(.River__visual--has-background) .River__content {\n padding-inline-start: var(--brand-River-spacing-inner);\n padding-inline-end: var(--base-size-64);\n padding-block: var(--brand-River-variant-gridline-spacing-outerBlock);\n }\n\n .River--variant-gridline.River--50-50.River--align-end:has(.River__visual--has-background) .River__content {\n padding-inline-start: calc(var(--base-size-80) + var(--base-size-32));\n }\n\n .River--variant-gridline.River--60-40.River--align-end:has(.River__visual--has-background) .River__content {\n padding-inline-start: var(--base-size-128);\n }\n\n .River--variant-gridline.River--align-start:not(:has(.River__visual--has-background)) .River__content {\n padding-inline-end: var(--brand-River-spacing-inner);\n }\n\n .River--variant-gridline.River--align-end:not(:has(.River__visual--has-background)) .River__content {\n padding-inline-start: var(--brand-River-spacing-inner);\n }\n\n .River--variant-gridline.River--50-50:not(.River--align-center) .River__visual--has-background {\n margin-inline-start: 0;\n margin-inline-end: 0;\n }\n\n .River--variant-gridline.River--align-center:has(.River__visual--has-background) {\n padding: 0;\n }\n\n .River--variant-gridline.River--align-center .River__visual--has-background {\n width: 100%;\n margin: 0;\n }\n\n .River--variant-gridline.River--align-center .River__visual {\n margin-bottom: 0;\n }\n\n .River--variant-gridline.River--align-center {\n gap: 0;\n }\n\n .River--variant-gridline.River--align-center .River__content {\n margin-top: 0;\n margin-bottom: var(--base-size-64);\n }\n\n .River--variant-gridline.River--align-center:has(.River__visual--has-background) .River__content {\n padding-inline: var(--brand-River-variant-gridline-spacing-outerInline);\n padding-block-start: var(--brand-River-variant-gridline-spacing-outerBlock);\n }\n}\n\n.RiverBreakout {\n display: flex;\n flex-direction: column;\n gap: var(--brand-RiverBreakout-spacing-inner);\n padding-block-end: var(--brand-River-spacing-outerBlock);\n padding-block-start: var(--brand-River-spacing-outerBlock);\n}\n\n.RiverBreakout .River__text {\n max-width: 37.5rem; / 600px /\n color: var(--brand-color-text-default);\n font-size: var(--brand-text-size-500);\n font-weight: var(--brand-heading-weight-500);\n letter-spacing: var(--brand-heading-letterSpacing-500);\n line-height: var(--brand-text-lineHeight-500);\n}\n\n.RiverBreakout--muted .River__text {\n color: var(--brand-color-text-muted);\n}\n\n.RiverBreakout .River__text em,\n.RiverBreakout .River__text b {\n color: var(--brand-color-text-default);\n font-style: normal;\n font-weight: inherit;\n}\n\n.RiverBreakout__hiddenHeading {\n border: 0;\n clip: rect(1px, 1px, 1px, 1px);\n height: 1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.RiverBreakout .River__call-to-action {\n padding-block-start: var(--base-size-12);\n}\n\n@media screen and (min-width: 48rem) {\n .RiverBreakout .River__content {\n display: grid;\n gap: var(--brand-River-spacing-inner);\n row-gap: var(--brand-River-spacing-innerY);\n grid-template-areas:\n 'text trailingComponent'\n 'cta trailingComponent';\n grid-template-columns: 5fr 3fr;\n grid-auto-rows: auto 1fr;\n }\n\n .RiverBreakout .River__text {\n grid-area: text;\n }\n\n .RiverBreakout .River__call-to-action {\n grid-area: cta;\n margin-block: 0;\n }\n\n .RiverBreakout .River__trailingComponent {\n grid-area: trailingComponent;\n justify-self: flex-end;\n margin-block-start: 0;\n }\n}\n\n.RiverBreakout--variant-gridline {\n position: relative;\n padding-inline: var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);\n padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n padding-block-end: 0;\n gap: 0;\n}\n\n@media screen and (max-width: 63.24rem) {\n .RiverBreakout--variant-gridline {\n width: 100%;\n max-width: 38.625rem;\n margin-inline: auto;\n }\n}\n\n@media screen and (min-width: 618px) {\n .RiverBreakout--variant-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .RiverBreakout--variant-gridline {\n border-inline: none;\n }\n}\n\n@media screen and (min-width: 1300px) {\n .RiverBreakout--variant-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.RiverBreakout--variant-gridline .River__visual {\n overflow: hidden;\n}\n\n.RiverBreakout--variant-gridline .River__visual--rounded {\n border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverBreakout--variant-gridline .River__content {\n padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n gap: var(--brand-RiverBreakout-variant-gridline-spacing-contentGap);\n}\n\n.RiverBreakout--variant-gridline .River__call-to-action {\n padding-block-start: var(--base-size-12);\n}\n\n.RiverBreakout--variant-gridline .River__trailingComponent--divider {\n padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n margin-inline: calc(-1 var(--brand-RiverBreakout-variant-gridline-spacing-outerInline));\n padding-inline: var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);\n}\n\n/* Reset base RiverBreakout grid for gridline variant until desktop breakpoint /\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n .RiverBreakout--variant-gridline .River__content {\n display: flex;\n flex-direction: column;\n }\n\n .RiverBreakout--variant-gridline .River__trailingComponent {\n margin-block-start: 0;\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .RiverBreakout--variant-gridline:has(.River__trailingComponent--divider) {\n padding-block-end: 0;\n }\n\n .RiverBreakout--variant-gridline .River__content {\n display: grid;\n grid-template-areas:\n 'text trailingComponent'\n 'cta trailingComponent';\n grid-template-columns: 1fr var(--brand-RiverBreakout-gridline-trailing-width, 31rem);\n grid-template-rows: auto 1fr;\n gap: var(--brand-RiverBreakout-variant-gridline-spacing-contentGap);\n flex: 1;\n padding-block: 0;\n }\n\n .RiverBreakout--variant-gridline .River__text {\n grid-area: text;\n padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n }\n\n .RiverBreakout--variant-gridline .River__call-to-action {\n grid-area: cta;\n margin-block: 0;\n padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n }\n\n .RiverBreakout--variant-gridline .River__trailingComponent {\n grid-area: trailingComponent;\n margin-block-start: 0;\n }\n\n .RiverBreakout--variant-gridline .River__trailingComponent--divider {\n border-top: none;\n border-left: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n margin-inline: 0;\n margin-block: 0;\n padding-inline: 0;\n padding-inline-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);\n padding-block: 0;\n padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n align-self: stretch;\n }\n}\n\n/ Gridline + background: remove outer container top padding (background fills to top edge) /\n.RiverBreakout--variant-gridline:has(.River__visual--has-background) {\n padding-block-start: 0;\n}\n\n.RiverBreakout .River__visual--has-background {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--brand-color-canvas-subtle);\n border-radius: 0;\n overflow: hidden;\n}\n\n.RiverBreakout .River__visual--has-background img,\n.RiverBreakout .River__visual--has-background picture,\n.RiverBreakout .River__visual--has-background video {\n max-width: 100%;\n height: auto;\n width: auto;\n border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverBreakout .River__visual--has-background [data-video-player-container] {\n border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverBreakout--variant-gridline .River__visual--has-background {\n margin-inline: calc(-1 var(--brand-RiverBreakout-variant-gridline-spacing-outerInline));\n padding: var(--base-size-32);\n}\n\n@media screen and (max-width: 47.99rem) {\n .RiverBreakout--variant-gridline .River__visual--has-background {\n align-items: flex-end;\n padding-block-end: 0;\n }\n\n .RiverBreakout--variant-gridline .River__visual--has-background img,\n .RiverBreakout--variant-gridline .River__visual--has-background picture,\n .RiverBreakout--variant-gridline .River__visual--has-background video {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n\n .RiverBreakout--variant-gridline .River__visual--has-background [data-video-player-container] {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n}\n\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n .RiverBreakout--variant-gridline .River__visual--has-background {\n align-items: flex-end;\n padding-block-end: 0;\n }\n\n .RiverBreakout--variant-gridline .River__visual--has-background img,\n .RiverBreakout--variant-gridline .River__visual--has-background picture,\n .RiverBreakout--variant-gridline .River__visual--has-background video {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n\n .RiverBreakout--variant-gridline .River__visual--has-background [data-video-player-container] {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .RiverBreakout--variant-gridline .River__visual--has-background {\n align-items: flex-end;\n padding: var(--base-size-64);\n padding-block-end: 0;\n }\n\n .RiverBreakout--variant-gridline .River__visual--has-background img,\n .RiverBreakout--variant-gridline .River__visual--has-background picture,\n .RiverBreakout--variant-gridline .River__visual--has-background video {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n\n .RiverBreakout--variant-gridline .River__visual--has-background [data-video-player-container] {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n\n .RiverBreakout--variant-gridline .River__visual--has-background.River__visual--rounded {\n border-radius: 0;\n }\n}\n"],"mappings":""}