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

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

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 (519) hide show

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

@@ -71,9 +71,11 @@ export type RiverContentProps = BaseProps<HTMLDivElement> & {
     children: React.ReactElement<TextProps> | React.ReactElement<HeadingProps | TextProps | LinkProps>[];
 } & React.HTMLAttributes<HTMLDivElement>;
 export declare const RiverContent: React.ForwardRefExoticComponent<Omit<RiverContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const RiverVisualBackgroundColors: readonly ["default", "subtle"];
-export type RiverVisualBackgroundColor = (typeof RiverVisualBackgroundColors)[number];
-export type RiverVisualProps = BaseProps<HTMLDivElement> & React.HtmlHTMLAttributes<HTMLDivElement> & PropsWithChildren<{
+export declare const RiverVisualPositionOptions: readonly ["default", "center", "block-end", "block-end-inline-start", "block-end-inline-end"];
+export type RiverVisualPosition = (typeof RiverVisualPositionOptions)[number];
+export declare const RiverVisualPaddingOptions: readonly ["default", "none", "all"];
+export type RiverVisualPadding = (typeof RiverVisualPaddingOptions)[number];
+export type RiverVisualBaseProps = BaseProps<HTMLDivElement> & React.HtmlHTMLAttributes<HTMLDivElement> & PropsWithChildren<{
     /**
      * Applies automatic size constraints to child images and video.
      * This can be disabled by setting this prop to `false`.
@@ -89,17 +91,23 @@ export type RiverVisualProps = BaseProps<HTMLDivElement> & React.HtmlHTMLAttribu
      * Can optionally be disabled.
      */
     rounded?: boolean;
+}>;
+export type RiverVisualProps = RiverVisualBaseProps & {
     /**
-     * Applies a background color with padding around the media.
+     * Positions media within the visual region in the gridline variant.
      */
-    imageBackgroundColor?: RiverVisualBackgroundColor;
-}>;
-export declare const Visual: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<RiverVisualProps>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    position?: RiverVisualPosition;
+    /**
+     * Controls media padding within the visual region in the gridline variant.
+     */
+    padding?: RiverVisualPadding;
+};
+export declare const RiverVisualBase: React.ForwardRefExoticComponent<Omit<RiverVisualBaseProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 /**
  * Alternating text and image pairs.
  */
 export declare const River: React.ForwardRefExoticComponent<Omit<RiverProps, "ref"> & React.RefAttributes<HTMLElement>> & {
-    Visual: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<RiverVisualProps>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Visual: React.ForwardRefExoticComponent<Omit<RiverVisualProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Content: React.ForwardRefExoticComponent<Omit<RiverContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 };
 //# sourceMappingURL=River.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"River.d.ts","sourceRoot":"","sources":["../../../src/river/River/River.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,iBAAiB,EAAoB,MAAM,OAAO,CAAA;AAE7E,OAAO,EAAU,KAAK,YAAY,EAAC,MAAM,eAAe,CAAA;AACxD,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,YAAY,CAAA;AAI/C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AAEtD;;GAEG;AACH,OAAO,4FAA4F,CAAA;AACnG,OAAO,6FAA6F,CAAA;AAMpG,eAAO,MAAM,aAAa,kCAAmC,CAAA;AAC7D,eAAO,MAAM,YAAY,EAAG,UAAmB,CAAA;AAC/C,eAAO,MAAM,QAAQ,EAAG,UAAmB,CAAA;AAC3C,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAA;AAEzD,eAAO,MAAM,uBAAuB,kCAAmC,CAAA;AACvE,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,CAAA;AAExE,MAAM,MAAM,UAAU,GAAG;IACvB;;;;;OAKG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,gBAAgB,GAAG,iBAAiB,CAAC,EAAE,CAAA;IACpE;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IAClC;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB,GAAG,SAAS,CAAC,WAAW,CAAC,GACxB,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAEnC,eAAO,MAAM,0BAA0B,UAAU,CAAA;AACjD,eAAO,MAAM,iBAAiB,UAAU,CAAA;AACxC,eAAO,MAAM,mBAAmB,EAAE,YAAwB,CAAA;~~AA4D1D~~,MAAM,MAAM,iBAAiB,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG;IAC1D;;OAEG;IACH,KAAK,CAAC,EAAE,iBAAiB,CAAA;IACzB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAC3C;;OAEG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAClC;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAC1C;;;;;OAKG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,YAAY,GAAG,SAAS,GAAG,SAAS,CAAC,EAAE,CAAA;CACrG,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAExC,eAAO,MAAM,YAAY,uGA8FxB,CAAA;AAED,eAAO,MAAM,~~2BAA2B~~,~~gCAAiC,~~CAAA;~~AACzE~~,MAAM,MAAM,0BAA0B,GAAG,CAAC,OAAO,~~2BAA2B~~,CAAC,CAAC,MAAM,CAAC,CAAA;~~AAErF~~,MAAM,MAAM,~~gBAAgB~~,GAAG,SAAS,CAAC,cAAc,CAAC,~~GACtD~~,KAAK,CAAC,kBAAkB,CAAC,cAAc,CAAC,GACxC,iBAAiB,CAAC;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;~~IACjB~~;;OAEG;IACH,~~oBAAoB~~,CAAC,EAAE,~~0BAA0B~~,CAAA;~~CAClD~~,CAAC,CAAA;~~AAEJ~~,eAAO,MAAM,~~MAAM,+HA8BlB~~,CAAA;~~AAED~~;;GAEG;AACH,eAAO,MAAM,KAAK;;;CAAuD,CAAA"}
1	+ {"version":3,"file":"River.d.ts","sourceRoot":"","sources":["../../../src/river/River/River.tsx"],"names":[],"mappings":"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"}

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

@@ -3,7 +3,7 @@ import { useAnimation as t } from "../../animation/useAnimation.js";
 import { Text as n } from "../../Text/Text.js";
 import { EyebrowText as r } from "../../EyebrowText/EyebrowText.js";
 import { Heading as i } from "../../Heading/Heading.js";
-import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/river/river-QteO10lt.css';import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/river/base-Ue-p74RC.css';/* empty css                                                                                          */
+import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/river/river-DHn1_SEa.css';import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/river/base-Ue-p74RC.css';/* empty css                                                                                          */
 import a from "../../component-helpers/shared.module.js";
 import { Link as o } from "../../Link/Link.js";
 import { Label as s } from "../../Label/Label.js";
@@ -13,19 +13,21 @@ import l, { forwardRef as u, useMemo as d } from "react";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/river/River/River.tsx
 var m = "50:50", h = "start", g = "default", _ = u(({ animate: n, imageTextRatio: r = m, align: i = h, variant: o = g, className: s, children: u, style: d, ...f }, _) => {
-	let { classes: b, styles: x } = t(n), { Visual: S, Content: C } = l.Children.toArray(u).reduce((e, t) => (l.isValidElement(t) && typeof t.type != "string" && (t.type === y && (e.Visual = t), t.type === v && (e.Content = t)), e), {
+	let { classes: y, styles: b } = t(n), { Visual: x, Content: C } = l.Children.toArray(u).reduce((e, t) => (l.isValidElement(t) && typeof t.type != "string" && (t.type === S && (e.Visual = t), t.type === v && (e.Content = t)), e), {
 		Visual: null,
 		Content: null
-	});
+	}), w = x?.props.position ?? "default", T = x?.props.padding ?? "default";
+	(w !== "default" || T !== "default") && o !== "gridline" && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn(`River: River.Visual position and padding are only supported when River uses variant="gridline"; ignoring position="${w}" and padding="${T}".`);
+	let E = x ? l.cloneElement(x, { className: e(x.props.className, o === "gridline" && c["River__visual--has-background"]) }) : null;
 	return /* @__PURE__ */ p("section", {
 		ref: _,
-		className: e(c.River, c[`River--${r.replace(":", "-")}`], c[`River--align-${i}`], c[`River--variant-${o}`], o === "gridline" && a.gridline, b, s),
+		className: e(c.River, c[`River--${r.replace(":", "-")}`], c[`River--align-${i}`], c[`River--variant-${o}`], o === "gridline" && a.gridline, y, s),
 		style: {
-			...x,
+			...b,
 			...d
 		},
 		...f,
-		children: [C, S]
+		children: [C, E]
 	});
 }), v = u(({ align: a = "center", animate: u, children: m, className: h, leadingComponent: g, trailingComponent: _, trailingComponentDivider: v = !1, style: y, ...b }, x) => {
 	let { classes: S, styles: C } = t(u), w = d(() => l.Children.toArray(m), [m]), T = w.find((e) => l.isValidElement(e) && e.type === i), E = w.find((e) => l.isValidElement(e) && e.type === n), D = w.find((e) => l.isValidElement(e) && e.type === o), O = w.find((e) => l.isValidElement(e) && e.type === s), k = w.find((e) => l.isValidElement(e) && e.type === r);
@@ -46,7 +48,10 @@ var m = "50:50", h = "start", g = "default", _ = u(({ animate: n, imageTextRatio
 				className: c.River__label,
 				children: k
 			}),
-			!O && !k && g && /* @__PURE__ */ f("div", { children: /* @__PURE__ */ f(g, {}) }),
+			!O && !k && g && /* @__PURE__ */ f("div", {
+				className: c.River__leadingComponent,
+				children: /* @__PURE__ */ f(g, {})
+			}),
 			l.isValidElement(T) && /* @__PURE__ */ f("div", {
 				className: c.River__heading,
 				children: l.cloneElement(T, {
@@ -77,16 +82,30 @@ var m = "50:50", h = "start", g = "default", _ = u(({ animate: n, imageTextRatio
 			})
 		]
 	});
-}), y = u(({ fillMedia: t = !0, children: n, className: r, hasShadow: i = !1, rounded: a = !0, imageBackgroundColor: o, ...s }, l) => /* @__PURE__ */ f("div", {
-	ref: l,
-	className: e(c.River__visual, i && c["River__visual--has-shadow"], t && c["River__visual--fill-media"], a && c["River__visual--rounded"], o === "subtle" && c["River__visual--has-background"], r),
-	...s,
+}), y = [
+	"default",
+	"center",
+	"block-end",
+	"block-end-inline-start",
+	"block-end-inline-end"
+], b = [
+	"default",
+	"none",
+	"all"
+], x = u(({ fillMedia: t = !0, children: n, className: r, hasShadow: i = !1, rounded: a = !0, ...o }, s) => /* @__PURE__ */ f("div", {
+	ref: s,
+	className: e(c.River__visual, i && c["River__visual--has-shadow"], t && c["River__visual--fill-media"], a && c["River__visual--rounded"], r),
+	...o,
 	children: n
-})), b = Object.assign(_, {
-	Visual: y,
+})), S = u(({ className: t, position: n = "default", padding: r = "default", ...i }, a) => /* @__PURE__ */ f(x, {
+	ref: a,
+	className: e(n !== "default" && c[`River__visual--position-${n}`], r !== "default" && c[`River__visual--padding-${r}`], t),
+	...i
+})), C = Object.assign(_, {
+	Visual: S,
 	Content: v
 });
 //#endregion
-export { b as River, v as RiverContent, y as Visual, h as defaultRiverAlign, m as defaultRiverImageTextRatio, g as defaultRiverVariant };
+export { C as River, v as RiverContent, x as RiverVisualBase, b as RiverVisualPaddingOptions, y as RiverVisualPositionOptions, h as defaultRiverAlign, m as defaultRiverImageTextRatio, g as defaultRiverVariant };
 //# sourceMappingURL=River.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"River.js","names":[],"sources":["../../../src/river/River/River.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren, useMemo, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport {Heading, type HeadingProps} from '../../Heading'\nimport {Text, type TextProps} from '../../Text'\nimport {Link, type LinkProps} from '../../Link'\nimport {Label, type LabelProps} from '../../Label'\nimport {EyebrowText} from '../../EyebrowText'\nimport {useAnimation} from '../../animation'\nimport type {BaseProps} from '../../component-helpers'\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 '../river-shared.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\nexport const RiverVariants = ['default', 'gridline'] as const\nexport const BorderedGrid = 'gridline' as const\nexport const GridLine = 'gridline' as const\nexport type RiverVariant = (typeof RiverVariants)[number]\n\nexport const RiverContentAlignValues = ['center', 'block-end'] as const\nexport type RiverContentAlign = (typeof RiverContentAlignValues)[number]\n\nexport type RiverProps = {\n /\n Only specific children are valid.\n * These include: `River.Visual` and `River.Content`.\n * The declarative order of the children will be ignored in the rendered output\n * to enforce correct HTML semantics.\n /\n children: React.ReactElement<RiverVisualProps \| RiverContentProps>[]\n /\n Apply an alternative image to text column ratio. The default is `50:50`.\n /\n imageTextRatio?: '60:40' \| '50:50'\n /\n Adjust the order of the `Content` column. The default is `start`.\n /\n align?: 'start' \| 'end' \| 'center'\n /\n Apply a visual variant. The default is `default`.\n * `gridline` applies lateral spacing for use in bordered grid layouts.\n /\n variant?: RiverVariant\n} & BaseProps<HTMLElement> &\n React.HTMLAttributes<HTMLElement>\n\nexport const defaultRiverImageTextRatio = '50:50'\nexport const defaultRiverAlign = 'start'\nexport const defaultRiverVariant: RiverVariant = 'default'\n\ntype ValidRootChildren = {\n Visual: React.ReactElement<RiverVisualProps> \| null\n Content: React.ReactElement<RiverContentProps> \| null\n}\n\nconst Root = forwardRef(\n (\n {\n animate,\n imageTextRatio = defaultRiverImageTextRatio,\n align = defaultRiverAlign,\n variant = defaultRiverVariant,\n className,\n children,\n style,\n ...rest\n }: RiverProps,\n ref: Ref<HTMLElement>,\n ) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const {Visual: VisualChild, Content: ContentChild} = React.Children.toArray(children).reduce<ValidRootChildren>(\n (acc, child) => {\n if (React.isValidElement(child) && typeof child.type !== 'string') {\n if (child.type === Visual) {\n acc.Visual = child as React.ReactElement<RiverVisualProps>\n }\n if (child.type === RiverContent) {\n acc.Content = child as React.ReactElement<RiverContentProps>\n }\n }\n return acc\n },\n {Visual: null, Content: null},\n )\n\n return (\n <section\n ref={ref}\n className={clsx(\n styles.River,\n styles[`River--${imageTextRatio.replace(':', '-')}`],\n styles[`River--align-${align}`],\n styles[`River--variant-${variant}`],\n variant === 'gridline' && gridlineStyles.gridline,\n animationClasses,\n className,\n )}\n style={{...animationInlineStyles, ...style}}\n {...rest}\n >\n {ContentChild}\n {VisualChild}\n </section>\n )\n },\n)\n\nexport type RiverContentProps = BaseProps<HTMLDivElement> & {\n /\n Aligns the content vertically within its container.\n /\n align?: RiverContentAlign\n /\n Escape-hatch for inserting custom React components.\n * Warning:\n * This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n * Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n /\n trailingComponent?: React.FunctionComponent\n /\n When `true`, a divider will be rendered between the standard river and optional trailing content.\n /\n trailingComponentDivider?: boolean\n /\n Escape-hatch for inserting custom React components.\n * Warning:\n * This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n * Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n /\n leadingComponent?: React.FunctionComponent\n /\n Only valid children are allowed.\n * These include: `Heading`, `Text` and `Link`.\n * The declarative order of the children will be ignored in the rendered output\n * to enforce correct HTML semantics.\n /\n children: React.ReactElement<TextProps> \| React.ReactElement<HeadingProps \| TextProps \| LinkProps>[]\n} & React.HTMLAttributes<HTMLDivElement>\n\nexport const RiverContent = forwardRef(\n (\n {\n align = 'center',\n animate,\n children,\n className,\n leadingComponent: LeadingComponent,\n trailingComponent: TrailingComponent,\n trailingComponentDivider = false,\n style,\n ...rest\n }: RiverContentProps,\n ref: Ref<HTMLDivElement>,\n ) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const Children = useMemo(() => React.Children.toArray(children), [children])\n\n const HeadingChild = Children.find(child => React.isValidElement(child) && child.type === Heading)\n\n const TextChild = Children.find(child => React.isValidElement(child) && child.type === Text)\n\n const LinkChild = Children.find(child => React.isValidElement(child) && child.type === Link)\n\n const LabelChild = Children.find(child => React.isValidElement(child) && child.type === Label)\n\n const EyebrowTextChild = Children.find(child => React.isValidElement(child) && child.type === EyebrowText)\n\n return (\n <div\n ref={ref}\n className={clsx(animationClasses, styles.River__content, styles[`River__content--align-${align}`], className)}\n style={{...animationInlineStyles, ...style}}\n {...rest}\n >\n {React.isValidElement(LabelChild) && !LeadingComponent && (\n <div className={styles.River__label}>\n {React.cloneElement(LabelChild as React.ReactElement<LabelProps>, {})}\n </div>\n )}\n\n {!LabelChild && React.isValidElement(EyebrowTextChild) && !LeadingComponent && (\n <div className={styles.River__label}>{EyebrowTextChild}</div>\n )}\n\n {!LabelChild && !EyebrowTextChild && LeadingComponent && (\n <div>\n <LeadingComponent />\n </div>\n )}\n\n {React.isValidElement<HeadingProps>(HeadingChild) && (\n <div className={styles.River__heading}>\n {React.cloneElement(HeadingChild as React.ReactElement<HeadingProps>, {\n // as uses h3 default, but can be overridden\n as: HeadingChild.props.as \|\| 'h3',\n size: HeadingChild.props.size \|\| '5',\n weight: HeadingChild.props.weight,\n className: clsx(HeadingChild.props.className, styles['River__heading-inner']),\n })}\n </div>\n )}\n\n {React.isValidElement<TextProps>(TextChild) && (\n <div className={styles['River__body-text']}>\n {React.cloneElement(TextChild as React.ReactElement<TextProps>, {\n variant: 'muted',\n as: 'p',\n className: clsx(styles.River__text, TextChild.props.className),\n })}\n </div>\n )}\n {React.isValidElement<LinkProps>(LinkChild) && (\n <div className={styles['River__call-to-action']}>\n {React.cloneElement(LinkChild as React.ReactElement<LinkProps>, {\n size: 'medium',\n variant: LinkChild.props.variant \|\| 'accent',\n })}\n </div>\n )}\n {TrailingComponent && (\n <div\n className={clsx(\n styles.River__trailingComponent,\n trailingComponentDivider && styles['River__trailingComponent--divider'],\n )}\n >\n <TrailingComponent />\n </div>\n )}\n </div>\n )\n },\n)\n\nexport const RiverVisualBackgroundColors = ['default', 'subtle'] as const\nexport type RiverVisualBackgroundColor = (typeof RiverVisualBackgroundColors)[number]\n\nexport type RiverVisualProps = BaseProps<HTMLDivElement> &\n React.HtmlHTMLAttributes<HTMLDivElement> &\n PropsWithChildren<{\n /\n Applies automatic size constraints to child images and video.\n * This can be disabled by setting this prop to `false`.\n /\n fillMedia?: boolean\n /\n `img` and `video` elements will apply a shadow by default.\n * This can be disabled by setting this prop to `false`.\n /\n hasShadow?: boolean\n /\n Enables rounded corners.\n * Can optionally be disabled.\n /\n rounded?: boolean\n /\n Applies a background color with padding around the media.\n /\n imageBackgroundColor?: RiverVisualBackgroundColor\n }>\n\nexport const Visual = forwardRef(\n (\n {\n fillMedia = true,\n children,\n className,\n hasShadow = false,\n rounded = true,\n imageBackgroundColor,\n ...rest\n }: PropsWithChildren<RiverVisualProps>,\n ref: Ref<HTMLDivElement>,\n ) => {\n return (\n <div\n ref={ref}\n className={clsx(\n styles.River__visual,\n hasShadow && styles['River__visual--has-shadow'],\n fillMedia && styles['River__visual--fill-media'],\n rounded && styles['River__visual--rounded'],\n imageBackgroundColor === 'subtle' && styles['River__visual--has-background'],\n className,\n )}\n {...rest}\n >\n {children}\n </div>\n )\n },\n)\n\n/\n Alternating text and image pairs.\n */\nexport const River = Object.assign(Root, {Visual, Content: RiverContent})\n"],"mappings":"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"}
1	+ {"version":3,"file":"River.js","names":[],"sources":["../../../src/river/River/River.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren, useMemo, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport {Heading, type HeadingProps} from '../../Heading'\nimport {Text, type TextProps} from '../../Text'\nimport {Link, type LinkProps} from '../../Link'\nimport {Label, type LabelProps} from '../../Label'\nimport {EyebrowText} from '../../EyebrowText'\nimport {useAnimation} from '../../animation'\nimport type {BaseProps} from '../../component-helpers'\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 '../river-shared.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\nexport const RiverVariants = ['default', 'gridline'] as const\nexport const BorderedGrid = 'gridline' as const\nexport const GridLine = 'gridline' as const\nexport type RiverVariant = (typeof RiverVariants)[number]\n\nexport const RiverContentAlignValues = ['center', 'block-end'] as const\nexport type RiverContentAlign = (typeof RiverContentAlignValues)[number]\n\nexport type RiverProps = {\n /\n Only specific children are valid.\n * These include: `River.Visual` and `River.Content`.\n * The declarative order of the children will be ignored in the rendered output\n * to enforce correct HTML semantics.\n /\n children: React.ReactElement<RiverVisualProps \| RiverContentProps>[]\n /\n Apply an alternative image to text column ratio. The default is `50:50`.\n /\n imageTextRatio?: '60:40' \| '50:50'\n /\n Adjust the order of the `Content` column. The default is `start`.\n /\n align?: 'start' \| 'end' \| 'center'\n /\n Apply a visual variant. The default is `default`.\n * `gridline` applies lateral spacing for use in bordered grid layouts.\n /\n variant?: RiverVariant\n} & BaseProps<HTMLElement> &\n React.HTMLAttributes<HTMLElement>\n\nexport const defaultRiverImageTextRatio = '50:50'\nexport const defaultRiverAlign = 'start'\nexport const defaultRiverVariant: RiverVariant = 'default'\n\ntype ValidRootChildren = {\n Visual: React.ReactElement<RiverVisualProps> \| null\n Content: React.ReactElement<RiverContentProps> \| null\n}\n\nconst Root = forwardRef(\n (\n {\n animate,\n imageTextRatio = defaultRiverImageTextRatio,\n align = defaultRiverAlign,\n variant = defaultRiverVariant,\n className,\n children,\n style,\n ...rest\n }: RiverProps,\n ref: Ref<HTMLElement>,\n ) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const {Visual: VisualChild, Content: ContentChild} = React.Children.toArray(children).reduce<ValidRootChildren>(\n (acc, child) => {\n if (React.isValidElement(child) && typeof child.type !== 'string') {\n if (child.type === Visual) {\n acc.Visual = child as React.ReactElement<RiverVisualProps>\n }\n if (child.type === RiverContent) {\n acc.Content = child as React.ReactElement<RiverContentProps>\n }\n }\n return acc\n },\n {Visual: null, Content: null},\n )\n\n const visualPosition = VisualChild?.props.position ?? 'default'\n const visualPadding = VisualChild?.props.padding ?? 'default'\n const hasNonDefaultPosition = visualPosition !== 'default'\n const hasNonDefaultPadding = visualPadding !== 'default'\n const hasVisualLayoutOverrides = hasNonDefaultPosition \|\| hasNonDefaultPadding\n const supportsVisualLayoutOverrides = variant === 'gridline'\n\n if (\n hasVisualLayoutOverrides &&\n !supportsVisualLayoutOverrides &&\n (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test')\n ) {\n // eslint-disable-next-line no-console\n console.warn(\n `River: River.Visual position and padding are only supported when River uses variant=\"gridline\"; ignoring position=\"${visualPosition}\" and padding=\"${visualPadding}\".`,\n )\n }\n\n const VisualChildWithVariantStyles = VisualChild\n ? React.cloneElement(VisualChild, {\n className: clsx(\n VisualChild.props.className,\n variant === 'gridline' && styles['River__visual--has-background'],\n ),\n })\n : null\n\n return (\n <section\n ref={ref}\n className={clsx(\n styles.River,\n styles[`River--${imageTextRatio.replace(':', '-')}`],\n styles[`River--align-${align}`],\n styles[`River--variant-${variant}`],\n variant === 'gridline' && gridlineStyles.gridline,\n animationClasses,\n className,\n )}\n style={{...animationInlineStyles, ...style}}\n {...rest}\n >\n {ContentChild}\n {VisualChildWithVariantStyles}\n </section>\n )\n },\n)\n\nexport type RiverContentProps = BaseProps<HTMLDivElement> & {\n /\n Aligns the content vertically within its container.\n /\n align?: RiverContentAlign\n /\n Escape-hatch for inserting custom React components.\n * Warning:\n * This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n * Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n /\n trailingComponent?: React.FunctionComponent\n /\n When `true`, a divider will be rendered between the standard river and optional trailing content.\n /\n trailingComponentDivider?: boolean\n /\n Escape-hatch for inserting custom React components.\n * Warning:\n * This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n * Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n /\n leadingComponent?: React.FunctionComponent\n /\n Only valid children are allowed.\n * These include: `Heading`, `Text` and `Link`.\n * The declarative order of the children will be ignored in the rendered output\n * to enforce correct HTML semantics.\n /\n children: React.ReactElement<TextProps> \| React.ReactElement<HeadingProps \| TextProps \| LinkProps>[]\n} & React.HTMLAttributes<HTMLDivElement>\n\nexport const RiverContent = forwardRef(\n (\n {\n align = 'center',\n animate,\n children,\n className,\n leadingComponent: LeadingComponent,\n trailingComponent: TrailingComponent,\n trailingComponentDivider = false,\n style,\n ...rest\n }: RiverContentProps,\n ref: Ref<HTMLDivElement>,\n ) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const Children = useMemo(() => React.Children.toArray(children), [children])\n\n const HeadingChild = Children.find(child => React.isValidElement(child) && child.type === Heading)\n\n const TextChild = Children.find(child => React.isValidElement(child) && child.type === Text)\n\n const LinkChild = Children.find(child => React.isValidElement(child) && child.type === Link)\n\n const LabelChild = Children.find(child => React.isValidElement(child) && child.type === Label)\n\n const EyebrowTextChild = Children.find(child => React.isValidElement(child) && child.type === EyebrowText)\n\n return (\n <div\n ref={ref}\n className={clsx(animationClasses, styles.River__content, styles[`River__content--align-${align}`], className)}\n style={{...animationInlineStyles, ...style}}\n {...rest}\n >\n {React.isValidElement(LabelChild) && !LeadingComponent && (\n <div className={styles.River__label}>\n {React.cloneElement(LabelChild as React.ReactElement<LabelProps>, {})}\n </div>\n )}\n\n {!LabelChild && React.isValidElement(EyebrowTextChild) && !LeadingComponent && (\n <div className={styles.River__label}>{EyebrowTextChild}</div>\n )}\n\n {!LabelChild && !EyebrowTextChild && LeadingComponent && (\n <div className={styles.River__leadingComponent}>\n <LeadingComponent />\n </div>\n )}\n\n {React.isValidElement<HeadingProps>(HeadingChild) && (\n <div className={styles.River__heading}>\n {React.cloneElement(HeadingChild as React.ReactElement<HeadingProps>, {\n // as uses h3 default, but can be overridden\n as: HeadingChild.props.as \|\| 'h3',\n size: HeadingChild.props.size \|\| '5',\n weight: HeadingChild.props.weight,\n className: clsx(HeadingChild.props.className, styles['River__heading-inner']),\n })}\n </div>\n )}\n\n {React.isValidElement<TextProps>(TextChild) && (\n <div className={styles['River__body-text']}>\n {React.cloneElement(TextChild as React.ReactElement<TextProps>, {\n variant: 'muted',\n as: 'p',\n className: clsx(styles.River__text, TextChild.props.className),\n })}\n </div>\n )}\n {React.isValidElement<LinkProps>(LinkChild) && (\n <div className={styles['River__call-to-action']}>\n {React.cloneElement(LinkChild as React.ReactElement<LinkProps>, {\n size: 'medium',\n variant: LinkChild.props.variant \|\| 'accent',\n })}\n </div>\n )}\n {TrailingComponent && (\n <div\n className={clsx(\n styles.River__trailingComponent,\n trailingComponentDivider && styles['River__trailingComponent--divider'],\n )}\n >\n <TrailingComponent />\n </div>\n )}\n </div>\n )\n },\n)\n\nexport const RiverVisualPositionOptions = [\n 'default',\n 'center',\n 'block-end',\n 'block-end-inline-start',\n 'block-end-inline-end',\n] as const\nexport type RiverVisualPosition = (typeof RiverVisualPositionOptions)[number]\n\nexport const RiverVisualPaddingOptions = ['default', 'none', 'all'] as const\nexport type RiverVisualPadding = (typeof RiverVisualPaddingOptions)[number]\n\nexport type RiverVisualBaseProps = BaseProps<HTMLDivElement> &\n React.HtmlHTMLAttributes<HTMLDivElement> &\n PropsWithChildren<{\n /\n Applies automatic size constraints to child images and video.\n * This can be disabled by setting this prop to `false`.\n /\n fillMedia?: boolean\n /\n `img` and `video` elements will apply a shadow by default.\n * This can be disabled by setting this prop to `false`.\n /\n hasShadow?: boolean\n /\n Enables rounded corners.\n * Can optionally be disabled.\n /\n rounded?: boolean\n }>\n\nexport type RiverVisualProps = RiverVisualBaseProps & {\n /\n Positions media within the visual region in the gridline variant.\n /\n position?: RiverVisualPosition\n /\n Controls media padding within the visual region in the gridline variant.\n /\n padding?: RiverVisualPadding\n}\n\nexport const RiverVisualBase = forwardRef<HTMLDivElement, RiverVisualBaseProps>(\n (\n {fillMedia = true, children, className, hasShadow = false, rounded = true, ...rest}: RiverVisualBaseProps,\n ref: Ref<HTMLDivElement>,\n ) => {\n return (\n <div\n ref={ref}\n className={clsx(\n styles.River__visual,\n hasShadow && styles['River__visual--has-shadow'],\n fillMedia && styles['River__visual--fill-media'],\n rounded && styles['River__visual--rounded'],\n className,\n )}\n {...rest}\n >\n {children}\n </div>\n )\n },\n)\n\nconst Visual = forwardRef<HTMLDivElement, RiverVisualProps>(\n ({className, position = 'default', padding = 'default', ...rest}, ref) => (\n <RiverVisualBase\n ref={ref}\n className={clsx(\n position !== 'default' && styles[`River__visual--position-${position}`],\n padding !== 'default' && styles[`River__visual--padding-${padding}`],\n className,\n )}\n {...rest}\n />\n ),\n)\n\n/\n Alternating text and image pairs.\n */\nexport const River = Object.assign(Root, {Visual, Content: RiverContent})\n"],"mappings":"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"}

package/esm/river/River/index.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
-export { River, defaultRiverImageTextRatio, defaultRiverAlign, defaultRiverVariant } from './River';
-export type { RiverProps, RiverContentProps, RiverVisualProps } from './River';
+export { River, defaultRiverImageTextRatio, defaultRiverAlign, defaultRiverVariant, RiverVisualPositionOptions, RiverVisualPaddingOptions, } from './River';
+export type { RiverProps, RiverContentProps, RiverVisualProps, RiverVisualPosition, RiverVisualPadding } from './River';
 //# sourceMappingURL=index.d.ts.map

package/esm/river/River/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/river/River/index.ts"],"names":[],"mappings":"AAAA,OAAO,~~EAAC~~,KAAK,~~EAAE~~,0BAA0B,~~EAAE~~,iBAAiB,~~EAAE~~,mBAAmB,~~EAAC~~,MAAM,SAAS,CAAA;~~AACjG~~,YAAY,EAAC,UAAU,EAAE,iBAAiB,EAAE,gBAAgB,EAAC,MAAM,SAAS,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/river/River/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,0BAA0B,EAC1B,iBAAiB,EACjB,mBAAmB,EACnB,0BAA0B,EAC1B,yBAAyB,GAC1B,MAAM,SAAS,CAAA;AAChB,YAAY,EAAC,UAAU,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAA"}

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

@@ -4,7 +4,7 @@ import { useProvidedRefOrCreate as n } from "../../hooks/useRef.js";
 import { Text as r } from "../../Text/Text.js";
 import { Heading as i } from "../../Heading/Heading.js";
 import { TriangleDownIcon as a, TriangleUpIcon as o } from "../../node_modules/@primer/octicons-react/dist/index.esm.js";
-import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/river/river-QteO10lt.css';/* empty css                                                                                          */
+import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/river/river-DHn1_SEa.css';/* empty css                                                                                          */
 import s from "./RiverAccordion.module.js";
 import c from "../../component-helpers/shared.module.js";
 import { Link as l } from "../../Link/Link.js";

package/esm/river/RiverAccordion/RiverAccordion.module-BTU_metB.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB{grid-gap:0;grid-template:"visual""accordion"/1fr;gap:0;display:grid;position:relative}@media screen and (width>=63.25rem){.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB{--gap-width:var(--brand-Grid-spacing-column-gap);--column-and-gap-width:calc((100% + var(--gap-width)) / 12);--4-grid-columns:calc(4 * var(--column-and-gap-width));--7-grid-columns-minus-last-gap:calc((7 * var(--column-and-gap-width)) - var(--gap-width));gap:var(--column-and-gap-width);grid-template-rows:auto}.Primer_Brand__RiverAccordion-module__RiverAccordion__align-start___wbXB3{grid-template-columns:var(--4-grid-columns) var(--7-grid-columns-minus-last-gap);grid-template-areas:"accordion visual"}.Primer_Brand__RiverAccordion-module__RiverAccordion__align-end___Zq4qJ{grid-template-columns:var(--7-grid-columns-minus-last-gap) var(--4-grid-columns);grid-template-areas:"visual accordion"}}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4{padding-inline:var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);padding-block:var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock);position:relative}@media screen and (width>=63.25rem){.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4{--gap-width:var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);--half-column:calc(50% - var(--gap-width) / 2);gap:var(--gap-width);align-items:center}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4.Primer_Brand__RiverAccordion-module__RiverAccordion__align-start___wbXB3{grid-template-columns:var(--half-column) var(--half-column);grid-template-areas:"accordion visual"}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4.Primer_Brand__RiverAccordion-module__RiverAccordion__align-end___Zq4qJ{grid-template-columns:var(--half-column) var(--half-column);grid-template-areas:"visual accordion"}}@media (width>=80rem){.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6{border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx{margin-inline:calc(-1 * var(--brand-RiverAccordion-variant-gridline-spacing-outerInline));margin-block-start:calc(-1 * var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock))}@media screen and (width>=48rem) and (width<=63.24rem){.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB{max-width:618px;margin-inline:auto}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB){border-radius:0}.Primer_Brand__RiverAccordion-module__RiverAccordion__accordionContainer___a80ds{grid-area:accordion}.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx{grid-area:visual}.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6{border-radius:var(--brand-borderRadius-xlarge);grid-template-columns:subgrid;grid-template-rows:subgrid;width:100%;display:grid;overflow:hidden}.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob{opacity:0;width:100%;height:100%;transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default), scale var(--brand-animation-duration-default) var(--brand-animation-easing-default);grid-area:1/1;align-items:center;display:flex;scale:1.05}.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob>*{border-radius:var(--brand-borderRadius-xlarge);-o-object-fit:contain;object-fit:contain;width:100%;height:auto;display:block;overflow:hidden}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob>*{border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob img,.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob picture,.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob video{border-radius:inherit;-o-object-fit:contain;object-fit:contain;width:100%;height:auto;display:block}.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob>* img,.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob>* video{border-radius:inherit;-o-object-fit:cover;object-fit:cover;width:100%;height:100%;display:block}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB{padding:var(--base-size-32);background:var(--brand-RiverAccordion-visual-background,var(--brand-color-canvas-subtle));justify-content:center;align-items:center;display:flex}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB>*{border-radius:var(--brand-borderRadius-large);justify-content:center;align-items:center;max-width:100%;height:auto;display:flex}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB img,.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB picture,.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB video{border-radius:var(--brand-borderRadius-large);max-width:100%;height:100%}@media screen and (width>=63.25rem){.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB){grid-template-columns:1fr 1fr;align-items:stretch;gap:0;padding:0}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB) .Primer_Brand__RiverAccordion-module__RiverAccordion__accordionContainer___a80ds{padding:var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock) var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);flex-direction:column;justify-content:center;display:flex}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4.Primer_Brand__RiverAccordion-module__RiverAccordion__align-start___wbXB3:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB) .Primer_Brand__RiverAccordion-module__RiverAccordion__accordionContainer___a80ds{padding-inline-end:var(--brand-RiverAccordion-variant-gridline-spacing-contentGap)}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4.Primer_Brand__RiverAccordion-module__RiverAccordion__align-end___Zq4qJ:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB) .Primer_Brand__RiverAccordion-module__RiverAccordion__accordionContainer___a80ds{padding-inline-start:var(--brand-RiverAccordion-variant-gridline-spacing-contentGap)}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx{margin:0}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB){height:100%}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB{padding:var(--base-size-64);justify-content:center;align-items:center}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB>*,.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB img,.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB picture,.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB video{border-radius:var(--brand-borderRadius-large)}}:is(.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:first-child) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:first-child,.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(2)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(2),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(3)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(3),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(4)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(4),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(5)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(5),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(6)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(6),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(7)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(7),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(8)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(8),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(9)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(9),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(10)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(10),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:not(:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:first-child){opacity:1;z-index:1;scale:1}.Primer_Brand__RiverAccordion-module__RiverAccordion__accordionContainer___a80ds .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob{clip:rect(0, 0, 0, 0);word-wrap:normal;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.Primer_Brand__RiverAccordion-module__RiverAccordion__item___SheMX{border-bottom:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-block-start:var(--base-size-32);position:relative}@media screen and (width<=63.24rem){.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__item___SheMX:last-child{border-bottom:none}}.Primer_Brand__RiverAccordion-module__RiverAccordion__item___SheMX:not(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2) .Primer_Brand__RiverAccordion-module__RiverAccordion__heading___O56M6{color:var(--brand-color-text-muted)}.Primer_Brand__RiverAccordion-module__RiverAccordion__trigger___1RM50{color:inherit;cursor:pointer;font:inherit;text-align:left;width:100%;padding:0;padding:var(--base-size-4);margin:0;margin:calc(var(--base-size-4) * -1);background:0 0;border:none;justify-content:space-between;align-items:center;display:flex}.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2 .Primer_Brand__RiverAccordion-module__RiverAccordion__trigger___1RM50{cursor:auto;cursor:initial}.Primer_Brand__RiverAccordion-module__RiverAccordion__item___SheMX:not(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2) .Primer_Brand__RiverAccordion-module__RiverAccordion__trigger___1RM50:after{content:"";width:100%;height:100%;display:block;position:absolute}.Primer_Brand__RiverAccordion-module__RiverAccordion__panel___Y4GUN{transition:grid-template-rows var(--brand-animation-duration-default) var(--brand-animation-easing-default), margin-block-start var(--brand-animation-duration-default) var(--brand-animation-easing-default), padding-block-end var(--brand-animation-duration-default) var(--brand-animation-easing-default);grid-template-rows:0fr;margin-block-start:var(--base-size-32);display:grid;overflow-y:clip}.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2 .Primer_Brand__RiverAccordion-module__RiverAccordion__panel___Y4GUN{grid-template-rows:1fr;margin-block-start:var(--base-size-12);padding-block-end:var(--base-size-32)}.Primer_Brand__RiverAccordion-module__RiverAccordion__content___87sh8{align-items:flex-start;gap:var(--base-size-20);flex-direction:column;min-height:0;display:flex}.Primer_Brand__RiverAccordion-module__RiverAccordion__icon___FMAZH{color:var(--brand-color-text-muted);flex-shrink:0;align-items:center;display:flex}.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2 .Primer_Brand__RiverAccordion-module__RiverAccordion__icon___FMAZH{color:var(--brand-color-text-default)}

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

@@ -1,4 +1,4 @@
-import './RiverAccordion.module-nlZZH3O7.css';var e = {
+import './RiverAccordion.module-BTU_metB.css';var e = {
 	RiverAccordion: "Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB",
 	"RiverAccordion__align-start": "Primer_Brand__RiverAccordion-module__RiverAccordion__align-start___wbXB3",
 	"RiverAccordion__align-end": "Primer_Brand__RiverAccordion-module__RiverAccordion__align-end___Zq4qJ",

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 RiverVisualBaseProps } 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<RiverVisualBaseProps, "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,EAAgC,KAAK,oBAAoB,EAAC,MAAM,gBAAgB,CAAA;AAQvF,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;AAiDD,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

@@ -3,7 +3,7 @@ import { useAnimation as t } from "../../animation/useAnimation.js";
 import { Heading as n } from "../../Heading/Heading.js";
 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 { RiverContent as a, RiverVisualBase 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";
@@ -24,12 +24,16 @@ var u = ["default", "gridline"], d = c(({ animate: n, className: a, children: o,
 	className: "visually-hidden",
 	as: e,
 	children: t
-}), p = Object.assign(d, {
-	Visual: o,
+}), p = c(({ className: e, ...t }, n) => /* @__PURE__ */ l(o, {
+	ref: n,
+	className: e,
+	...t
+})), m = Object.assign(d, {
+	Visual: p,
 	Content: a,
 	A11yHeading: f
 });
 //#endregion
-export { p as RiverBreakout, u as RiverBreakoutVariants };
+export { m as RiverBreakout, u 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 {RiverVisualBase, RiverContent, type RiverVisualBaseProps} 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\nconst Visual = forwardRef<HTMLDivElement, RiverVisualBaseProps>(({className, ...props}, ref) => (\n <RiverVisualBase 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,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,EAGN,IAAS,GAAkD,EAAC,cAAW,GAAG,KAAQ,MACtF,kBAAC,GAAD;CAAsB;CAAgB;CAAW,GAAI;CAAS,CAAA,CAC9D,EAEW,IAAgB,OAAO,OAAO,GAAM;CAAC;CAAQ,SAAS;CAAc;CAAY,CAAC"}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type HeadingProps } from '../..';
 import { type IconProps } from '../../Icon';
-import { type RiverVisualProps } from '../River/River';
+import { type RiverVisualBaseProps } from '../River/River';
 /**
  * Design tokens
  */
@@ -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 = RiverVisualBaseProps;
 /**
  * Use RiverBreakoutTabs to showcase multiple feature stories within a single immersive surface.
  */
@@ -63,6 +64,6 @@ export declare const RiverBreakoutTabs: React.ForwardRefExoticComponent<{
     Heading: ({ as, children, className, size, weight, ...props }: RiverBreakoutTabsHeadingProps) => import("react/jsx-runtime").JSX.Element;
     Icon: ({ color, ...props }: RiverBreakoutTabsIconProps) => import("react/jsx-runtime").JSX.Element;
     Item: ({ children }: RiverBreakoutTabsItemProps) => import("react/jsx-runtime").JSX.Element;
-    Visual: React.ForwardRefExoticComponent<Omit<RiverVisualProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Visual: React.ForwardRefExoticComponent<Omit<RiverVisualBaseProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 };
 //# sourceMappingURL=RiverBreakoutTabs.d.ts.map

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,EAAkB,KAAK,oBAAoB,EAAC,MAAM,gBAAgB,CAAA;AAOzE;;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,oBAAoB,CAAA;AAmc/D;;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 CHANGED Viewed

@@ -2,12 +2,12 @@ import e from "../../node_modules/clsx/dist/clsx.js";
 import { useId as t } from "../../hooks/useId.js";
 import { Text as n } from "../../Text/Text.js";
 import { Heading as r } from "../../Heading/Heading.js";
-import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/river/river-QteO10lt.css';import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/river/base-Ue-p74RC.css';/* empty css                                                                                          */
+import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/river/river-DHn1_SEa.css';import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/river/base-Ue-p74RC.css';/* empty css                                                                                          */
 import i from "../../component-helpers/shared.module.js";
 import { Link as a } from "../../Link/Link.js";
 /* empty css                                                                                         */
 import o from "../river-shared.module.js";
-import { Visual as s } from "../River/River.js";
+import { RiverVisualBase as s } from "../River/River.js";
 import { Icon as c } from "../../Icon/Icon.js";
 import { useTabs as l } from "../../hooks/useTabs.js";
 import { useWindowSize as u } from "../../hooks/useWindowSize.js";