@primer/react-brand 0.77.0-rc.d45b2bb1 → 0.77.0

package/docs/components/Section/react.md

@@ -120,18 +120,29 @@ The default `Section` wraps its content in a semantic `<section>` element and pr
 </>
 ```
 
+### Customize gridline inline padding
+
+Override `--brand-Section-variant-gridline-paddingInline` to customize the inline padding of a gridline section.
+
+```css
+.customSection {
+  --brand-Section-variant-gridline-paddingInline: var(--base-size-32);
+}
+```
+
 ## Component props
 
 ### Section
 
-| name                      | type                                                     | default     | required | description                                                                                                                                                   |
-| ------------------------- | -------------------------------------------------------- | ----------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `paddingBlockStart`       | `SectionPaddingVariants \| 'ResponsiveMap'`              | `'normal'`  | `false`  | Control the padding at the top of the section.                                                                                                                |
-| `paddingBlockEnd`         | `SectionPaddingVariants \| 'ResponsiveMap'`              | `'normal'`  | `false`  | Control the padding at the bottom of the section.                                                                                                             |
-| `backgroundColor`         | `SectionBackgroundColors \| 'string' \| 'ResponsiveMap'` |             | `false`  | Add a background color. Use a predefined color, a CSS custom property, or a custom color value.                                                               |
-| `backgroundImageSrc`      | `string` \| `string[]` `ResponsiveMap`                   |             | `false`  | Add one or more background images.                                                                                                                            |
-| `backgroundImageSize`     | `string` \| `string[]` `ResponsiveMap`                   | `'cover'`   | `false`  | Control the size of the background image(s). This accepts all CSS `background-size` supported values, including keywords like `contain`.                      |
-| `backgroundImagePosition` | `string` \| `string[]` `ResponsiveMap`                   | `'50%'`     | `false`  | Control the position of the background image(s). This accepts all CSS `background-position` supported values, including keywords like `top` and edge offsets. |
-| `rounded`                 | `boolean`                                                | `false`     | `false`  | Adds rounded corners to the top of the section.                                                                                                               |
-| `fullWidth`               | `boolean`                                                | `false`     | `false`  | Makes the container fill the entire width of the section.                                                                                                     |
-| `as`                      | `'section'` \| `'div'`                                   | `'section'` | `false`  | Applies the underlying HTML element.                                                                                                                          |
+| name                      | type                                                     | default     | required | description                                                                                                                                                                                     |
+| ------------------------- | -------------------------------------------------------- | ----------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `variant`                 | `'default'` \| `'gridline'`                              | `'default'` | `false`  | Sets the visual variant. The `gridline` variant adds horizontal gridlines, responsive inline padding, and container-edge borders at wide viewports. `rounded` is not supported with `gridline`. |
+| `paddingBlockStart`       | `SectionPaddingVariants \| 'ResponsiveMap'`              | `'normal'`  | `false`  | Control the padding at the top of the section.                                                                                                                                                  |
+| `paddingBlockEnd`         | `SectionPaddingVariants \| 'ResponsiveMap'`              | `'normal'`  | `false`  | Control the padding at the bottom of the section.                                                                                                                                               |
+| `backgroundColor`         | `SectionBackgroundColors \| 'string' \| 'ResponsiveMap'` |             | `false`  | Add a background color. Use a predefined color, a CSS custom property, or a custom color value.                                                                                                 |
+| `backgroundImageSrc`      | `string` \| `string[]` `ResponsiveMap`                   |             | `false`  | Add one or more background images.                                                                                                                                                              |
+| `backgroundImageSize`     | `string` \| `string[]` `ResponsiveMap`                   | `'cover'`   | `false`  | Control the size of the background image(s). This accepts all CSS `background-size` supported values, including keywords like `contain`.                                                        |
+| `backgroundImagePosition` | `string` \| `string[]` `ResponsiveMap`                   | `'50%'`     | `false`  | Control the position of the background image(s). This accepts all CSS `background-position` supported values, including keywords like `top` and edge offsets.                                   |
+| `rounded`                 | `boolean`                                                | `false`     | `false`  | Adds rounded corners to the top of the section. Ignored when `variant` is `'gridline'`.                                                                                                         |
+| `fullWidth`               | `boolean`                                                | `false`     | `false`  | Makes the container fill the entire width of the section. With the `gridline` variant, this also removes its inline padding and container-edge borders.                                         |
+| `as`                      | `'section'` \| `'div'`                                   | `'section'` | `false`  | Applies the underlying HTML element.                                                                                                                                                            |

package/docs/index.md

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.77.0-rc.d45b2bb1)
+# Primer Brand docs (v0.77.0)
 
-These docs are bundled with `@primer/react-brand@0.77.0-rc.d45b2bb1` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.77.0` and match your installed version.
 
 New here? Start with [Getting started](getting-started/index.md) for installation, global
 stylesheet and font setup. Component directories are named after their import (e.g.

package/esm/Section/Section.d.ts

@@ -3,6 +3,7 @@ import type { BaseProps } from '../component-helpers';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/section/section.css';
 export declare const SectionPaddingVariants: readonly ["none", "condensed", "normal", "spacious"];
 export declare const SectionBackgroundColors: readonly ["default", "subtle"];
+export declare const SectionVariants: readonly ["default", "gridline"];
 type ResponsiveMap<T> = {
     narrow?: T;
     regular?: T;
@@ -15,11 +16,16 @@ type ResponsiveBackgroundImagePositionMap = ResponsiveMap<string | string[]>;
 type ResponsiveBackgroundImageSizeMap = ResponsiveMap<string | string[]>;
 type ResponsiveBackgroundImageSrcMap = ResponsiveMap<string | string[]>;
 type ResponsivePaddingVariantsMap = ResponsiveMap<PaddingVariants>;
+type SectionVariant = (typeof SectionVariants)[number];
 type SectionProps = {
     /**
      * The HTML element used to render the section.
      */
     as?: 'section' | 'div';
+    /**
+     * The visual variant of the section.
+     */
+    variant?: SectionVariant;
     /**
      * The padding applied to the start of the section.
      */
@@ -50,6 +56,7 @@ type SectionProps = {
     fullWidth?: boolean;
     /**
      * Adds rounded corners to the top of the section.
+     * Not supported with the `gridline` variant.
      */
     rounded?: boolean;
     /**

package/esm/Section/Section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../src/Section/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,iBAAiB,EAAuB,MAAM,OAAO,CAAA;AAEhF,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD,OAAO,iGAAiG,CAAA;AAGxG,eAAO,MAAM,sBAAsB,sDAAuD,CAAA;AAC1F,eAAO,MAAM,uBAAuB,gCAAiC,CAAA;AAIrE,KAAK,aAAa,CAAC,CAAC,IAAI;IACtB,MAAM,CAAC,EAAE,CAAC,CAAA;IACV,OAAO,CAAC,EAAE,CAAC,CAAA;IACX,IAAI,CAAC,EAAE,CAAC,CAAA;CACT,CAAA;AAED,KAAK,gBAAgB,GAAG,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,GAAG,SAAS,CAAA;AAC5E,KAAK,eAAe,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC9D,KAAK,4BAA4B,GAAG,aAAa,CAAC,gBAAgB,CAAC,CAAA;AACnE,KAAK,oCAAoC,GAAG,aAAa,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,CAAA;AAC5E,KAAK,gCAAgC,GAAG,aAAa,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,CAAA;AACxE,KAAK,+BAA+B,GAAG,aAAa,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,CAAA;AACvE,KAAK,4BAA4B,GAAG,aAAa,CAAC,eAAe,CAAC,CAAA;AAElE,KAAK,YAAY,GAAG;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,SAAS,GAAG,KAAK,CAAA;IACtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,eAAe,GAAG,4BAA4B,CAAA;IAClE;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,GAAG,4BAA4B,CAAA;IAChE;;OAEG;IACH,eAAe,CAAC,EAAE,gBAAgB,GAAG,4BAA4B,CAAA;IACjE;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,+BAA+B,CAAA;IACxE;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,oCAAoC,CAAA;IAClF;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,gCAAgC,CAAA;IAC1E;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B;;OAEG;IACH,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAA;CACzB,GAAG,iBAAiB,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAA;AAOhD,eAAO,MAAM,OAAO,2HA4GnB,CAAA"}
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../src/Section/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,iBAAiB,EAAuB,MAAM,OAAO,CAAA;AAEhF,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD,OAAO,iGAAiG,CAAA;AAIxG,eAAO,MAAM,sBAAsB,sDAAuD,CAAA;AAC1F,eAAO,MAAM,uBAAuB,gCAAiC,CAAA;AACrE,eAAO,MAAM,eAAe,kCAAmC,CAAA;AAK/D,KAAK,aAAa,CAAC,CAAC,IAAI;IACtB,MAAM,CAAC,EAAE,CAAC,CAAA;IACV,OAAO,CAAC,EAAE,CAAC,CAAA;IACX,IAAI,CAAC,EAAE,CAAC,CAAA;CACT,CAAA;AAED,KAAK,gBAAgB,GAAG,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,GAAG,SAAS,CAAA;AAC5E,KAAK,eAAe,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC9D,KAAK,4BAA4B,GAAG,aAAa,CAAC,gBAAgB,CAAC,CAAA;AACnE,KAAK,oCAAoC,GAAG,aAAa,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,CAAA;AAC5E,KAAK,gCAAgC,GAAG,aAAa,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,CAAA;AACxE,KAAK,+BAA+B,GAAG,aAAa,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,CAAA;AACvE,KAAK,4BAA4B,GAAG,aAAa,CAAC,eAAe,CAAC,CAAA;AAClE,KAAK,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAEtD,KAAK,YAAY,GAAG;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,SAAS,GAAG,KAAK,CAAA;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB;;OAEG;IACH,iBAAiB,CAAC,EAAE,eAAe,GAAG,4BAA4B,CAAA;IAClE;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,GAAG,4BAA4B,CAAA;IAChE;;OAEG;IACH,eAAe,CAAC,EAAE,gBAAgB,GAAG,4BAA4B,CAAA;IACjE;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,+BAA+B,CAAA;IACxE;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,oCAAoC,CAAA;IAClF;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,gCAAgC,CAAA;IAC1E;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B;;OAEG;IACH,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAA;CACzB,GAAG,iBAAiB,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAA;AAOhD,eAAO,MAAM,OAAO,2HAwHnB,CAAA"}

package/esm/Section/Section.js

@@ -1,51 +1,52 @@
 import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/section/section-GXjcxN8l.css';/* empty css                                                                                           */
-import t from "./Section.module.js";
-import { forwardRef as n, useCallback as r, useMemo as i } from "react";
-import { jsx as a } from "react/jsx-runtime";
+import t from "../component-helpers/shared.module.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/section/section-A-rkj9BD.css';/* empty css                                                                                           */
+import n from "./Section.module.js";
+import { forwardRef as r, useCallback as i, useMemo as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
 //#region src/Section/Section.tsx
-var o = [
+var s = [
 	"none",
 	"condensed",
 	"normal",
 	"spacious"
-], s = ["default", "subtle"], c = o[2], l = {
+], c = ["default", "subtle"], l = ["default", "gridline"], u = s[2], d = l[0], f = {
 	root: "Section",
 	container: "Section__container"
-}, u = n(({ as: n = "section", paddingBlockStart: o = c, paddingBlockEnd: u = c, backgroundColor: d, backgroundImageSrc: f, backgroundImagePosition: p = "50%", backgroundImageSize: m = "cover", className: h, children: g, "data-testid": _, fullWidth: v = !1, rounded: y = !1, style: b, ...x }, S) => {
-	let C = r((e, n) => typeof e == "string" ? t[`Section--${n}-${e}`] : Object.keys(e).map((r) => t[`Section-${r}--${n}-${e[r]}`]).join(" "), []), w = r((e, t) => t === "background-image-src" ? Array.isArray(e) ? e.map((e) => `url(${e})`).join() : `url(${e})` : t === "background-color" && typeof e == "string" ? s.includes(e) ? `var(--brand-color-canvas-${e})` : e : Array.isArray(e) ? e.join() : e, []), T = r((e, t) => typeof t == "string" || Array.isArray(t) ? { [`--brand-Section-${e}`]: w(t, e) } : {
-		[`--brand-Section-narrow-${e}`]: w(t?.narrow, e),
-		[`--brand-Section-regular-${e}`]: w(t?.regular, e),
-		[`--brand-Section-wide-${e}`]: w(t?.wide, e)
-	}, [w]), E = r((e, t, n) => {
-		n && Object.assign(e, T(t, n));
-	}, [T]), D = i(() => C(o, "paddingBlockStart"), [o, C]), O = i(() => C(u, "paddingBlockEnd"), [u, C]), k = i(() => {
+}, p = r(({ as: r = "section", variant: s = d, paddingBlockStart: l = u, paddingBlockEnd: p = u, backgroundColor: m, backgroundImageSrc: h, backgroundImagePosition: g = "50%", backgroundImageSize: _ = "cover", className: v, children: y, "data-testid": b, fullWidth: x = !1, rounded: S = !1, style: C, ...w }, T) => {
+	let E = i((e, t) => typeof e == "string" ? n[`Section--${t}-${e}`] : Object.keys(e).map((r) => n[`Section-${r}--${t}-${e[r]}`]).join(" "), []), D = i((e, t) => t === "background-image-src" ? Array.isArray(e) ? e.map((e) => `url(${e})`).join() : `url(${e})` : t === "background-color" && typeof e == "string" ? c.includes(e) ? `var(--brand-color-canvas-${e})` : e : Array.isArray(e) ? e.join() : e, []), O = i((e, t) => typeof t == "string" || Array.isArray(t) ? { [`--brand-Section-${e}`]: D(t, e) } : {
+		[`--brand-Section-narrow-${e}`]: D(t?.narrow, e),
+		[`--brand-Section-regular-${e}`]: D(t?.regular, e),
+		[`--brand-Section-wide-${e}`]: D(t?.wide, e)
+	}, [D]), k = i((e, t, n) => {
+		n && Object.assign(e, O(t, n));
+	}, [O]), A = a(() => E(l, "paddingBlockStart"), [l, E]), j = a(() => E(p, "paddingBlockEnd"), [p, E]), M = a(() => {
 		let e = {};
-		return E(e, "background-color", d), E(e, "background-image-src", f), E(e, "background-image-position", p), E(e, "background-image-size", m), e;
+		return k(e, "background-color", m), k(e, "background-image-src", h), k(e, "background-image-position", g), k(e, "background-image-size", _), e;
 	}, [
-		E,
-		d,
-		f,
-		p,
-		m
+		k,
+		m,
+		h,
+		g,
+		_
 	]);
-	return /* @__PURE__ */ a(n, {
-		ref: S,
-		className: e(t.Section, D, O, y && t["Section--rounded"], h),
-		"data-testid": _ || l.root,
+	return s === "gridline" && S && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("Section: rounded is not supported with variant=\"gridline\"; ignoring rounded."), /* @__PURE__ */ o(r, {
+		ref: T,
+		className: e(n.Section, s === "gridline" && n["Section--variant-gridline"], s === "gridline" && t.gridline, A, j, S && s !== "gridline" && n["Section--rounded"], v),
+		"data-testid": b || f.root,
 		style: {
-			...k,
-			...b
+			...M,
+			...C
 		},
-		...x,
-		children: /* @__PURE__ */ a("div", {
-			className: e(t.Section__container, v && t["Section__container--fullWidth"]),
-			"data-testid": l.container,
-			children: g
+		...w,
+		children: /* @__PURE__ */ o("div", {
+			className: e(n.Section__container, x && n["Section__container--fullWidth"]),
+			"data-testid": f.container,
+			children: y
 		})
 	});
 });
 //#endregion
-export { u as Section, s as SectionBackgroundColors, o as SectionPaddingVariants };
+export { p as Section, c as SectionBackgroundColors, s as SectionPaddingVariants, l as SectionVariants };
 
 //# sourceMappingURL=Section.js.map

package/esm/Section/Section.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.js","names":[],"sources":["../../src/Section/Section.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren, useCallback, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/section/section.css'\nimport styles from './Section.module.css'\n\nexport const SectionPaddingVariants = ['none', 'condensed', 'normal', 'spacious'] as const\nexport const SectionBackgroundColors = ['default', 'subtle'] as const\n\nconst defaultSectionPadding = SectionPaddingVariants[2]\n\ntype ResponsiveMap<T> = {\n  narrow?: T\n  regular?: T\n  wide?: T\n}\n\ntype BackgroundColors = (typeof SectionBackgroundColors)[number] | AnyString // The AnyString union type is a workaround to provide autocompletion for the SectionBackgroundColors values\ntype PaddingVariants = (typeof SectionPaddingVariants)[number]\ntype ResponsiveBackgroundColorMap = ResponsiveMap<BackgroundColors>\ntype ResponsiveBackgroundImagePositionMap = ResponsiveMap<string | string[]>\ntype ResponsiveBackgroundImageSizeMap = ResponsiveMap<string | string[]>\ntype ResponsiveBackgroundImageSrcMap = ResponsiveMap<string | string[]>\ntype ResponsivePaddingVariantsMap = ResponsiveMap<PaddingVariants>\n\ntype SectionProps = {\n  /**\n   * The HTML element used to render the section.\n   */\n  as?: 'section' | 'div'\n  /**\n   * The padding applied to the start of the section.\n   */\n  paddingBlockStart?: PaddingVariants | ResponsivePaddingVariantsMap\n  /**\n   * The padding applied to the end of the section.\n   */\n  paddingBlockEnd?: PaddingVariants | ResponsivePaddingVariantsMap\n  /**\n   * The system-level or custom background color of the section.\n   */\n  backgroundColor?: BackgroundColors | ResponsiveBackgroundColorMap\n  /**\n   * The background image of the section.\n   */\n  backgroundImageSrc?: string | string[] | ResponsiveBackgroundImageSrcMap\n  /**\n   * The position of the background image.\n   */\n  backgroundImagePosition?: string | string[] | ResponsiveBackgroundImagePositionMap\n  /**\n   * The size of the background image.\n   */\n  backgroundImageSize?: string | string[] | ResponsiveBackgroundImageSizeMap\n  /**\n   * Makes the content of the section span the full width of its parent container.\n   */\n  fullWidth?: boolean\n  /**\n   * Adds rounded corners to the top of the section.\n   */\n  rounded?: boolean\n  /**\n   * Forward inline styles\n   */\n  style?: React.CSSProperties\n  /**\n   * Optional attirbute for testing\n   */\n  ['data-testid']?: string\n} & PropsWithChildren<BaseProps<HTMLDivElement>>\n\nconst testIds = {\n  root: 'Section',\n  container: 'Section__container',\n}\n\nexport const Section = forwardRef<HTMLDivElement, PropsWithChildren<SectionProps>>(\n  (\n    {\n      as: Component = 'section',\n      paddingBlockStart = defaultSectionPadding,\n      paddingBlockEnd = defaultSectionPadding,\n      backgroundColor,\n      backgroundImageSrc,\n      backgroundImagePosition = '50%',\n      backgroundImageSize = 'cover',\n      className,\n      children,\n      'data-testid': testId,\n      fullWidth = false,\n      rounded = false,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const createPaddingClasses = useCallback(\n      (paddingBlock, blockType) =>\n        typeof paddingBlock === 'string'\n          ? styles[`Section--${blockType}-${paddingBlock}`]\n          : Object.keys(paddingBlock)\n              .map(viewport => styles[`Section-${viewport}--${blockType}-${paddingBlock[viewport]}`])\n              .join(' '),\n      [],\n    )\n\n    const processBackgroundValue = useCallback((value: string | string[], property) => {\n      if (property === 'background-image-src') {\n        return Array.isArray(value) ? value.map(img => `url(${img})`).join() : `url(${value})`\n      }\n\n      if (property === 'background-color' && typeof value === 'string') {\n        return SectionBackgroundColors.includes(value as (typeof SectionBackgroundColors)[number])\n          ? `var(--brand-color-canvas-${value})`\n          : value\n      }\n\n      return Array.isArray(value) ? value.join() : value\n    }, [])\n\n    const createStyles = useCallback(\n      (property, value) =>\n        typeof value === 'string' || Array.isArray(value)\n          ? {[`--brand-Section-${property}`]: processBackgroundValue(value, property)}\n          : {\n              [`--brand-Section-narrow-${property}`]: processBackgroundValue(value?.narrow, property),\n              [`--brand-Section-regular-${property}`]: processBackgroundValue(value?.regular, property),\n              [`--brand-Section-wide-${property}`]: processBackgroundValue(value?.wide, property),\n            },\n      [processBackgroundValue],\n    )\n\n    const addStyle = useCallback(\n      (obj, property, value) => {\n        if (value) {\n          Object.assign(obj, createStyles(property, value))\n        }\n      },\n      [createStyles],\n    )\n\n    const paddingBlockStartClass = useMemo(\n      () => createPaddingClasses(paddingBlockStart, 'paddingBlockStart'),\n      [paddingBlockStart, createPaddingClasses],\n    )\n    const paddingBlockEndClass = useMemo(\n      () => createPaddingClasses(paddingBlockEnd, 'paddingBlockEnd'),\n      [paddingBlockEnd, createPaddingClasses],\n    )\n\n    const backgroundStyles = useMemo(() => {\n      const allStyles = {}\n\n      addStyle(allStyles, 'background-color', backgroundColor)\n      addStyle(allStyles, 'background-image-src', backgroundImageSrc)\n      addStyle(allStyles, 'background-image-position', backgroundImagePosition)\n      addStyle(allStyles, 'background-image-size', backgroundImageSize)\n\n      return allStyles\n    }, [addStyle, backgroundColor, backgroundImageSrc, backgroundImagePosition, backgroundImageSize])\n\n    return (\n      <Component\n        ref={ref}\n        className={clsx(\n          styles.Section,\n          paddingBlockStartClass,\n          paddingBlockEndClass,\n          rounded && styles['Section--rounded'],\n          className,\n        )}\n        data-testid={testId || testIds.root}\n        style={{...backgroundStyles, ...style}}\n        {...props}\n      >\n        <div\n          className={clsx(styles[`Section__container`], fullWidth && styles['Section__container--fullWidth'])}\n          data-testid={testIds.container}\n        >\n          {children}\n        </div>\n      </Component>\n    )\n  },\n)\n"],"mappings":";;;;;;AAOA,IAAa,IAAyB;CAAC;CAAQ;CAAa;CAAU;AAAU,GACnE,IAA0B,CAAC,WAAW,QAAQ,GAErD,IAAwB,EAAuB,IA+D/C,IAAU;CACd,MAAM;CACN,WAAW;AACb,GAEa,IAAU,GAEnB,EACE,IAAI,IAAY,WAChB,uBAAoB,GACpB,qBAAkB,GAClB,oBACA,uBACA,6BAA0B,OAC1B,yBAAsB,SACtB,cACA,aACA,eAAe,GACf,eAAY,IACZ,aAAU,IACV,UACA,GAAG,KAEL,MACG;CACH,IAAM,IAAuB,GAC1B,GAAc,MACb,OAAO,KAAiB,WACpB,EAAO,YAAY,EAAU,GAAG,OAChC,OAAO,KAAK,CAAY,CAAC,CACtB,KAAI,MAAY,EAAO,WAAW,EAAS,IAAI,EAAU,GAAG,EAAa,KAAY,CAAC,CACtF,KAAK,GAAG,GACjB,CAAC,CACH,GAEM,IAAyB,GAAa,GAA0B,MAChE,MAAa,yBACR,MAAM,QAAQ,CAAK,IAAI,EAAM,KAAI,MAAO,OAAO,EAAI,EAAE,CAAC,CAAC,KAAK,IAAI,OAAO,EAAM,KAGlF,MAAa,sBAAsB,OAAO,KAAU,WAC/C,EAAwB,SAAS,CAAiD,IACrF,4BAA4B,EAAM,KAClC,IAGC,MAAM,QAAQ,CAAK,IAAI,EAAM,KAAK,IAAI,GAC5C,CAAC,CAAC,GAEC,IAAe,GAClB,GAAU,MACT,OAAO,KAAU,YAAY,MAAM,QAAQ,CAAK,IAC5C,GAAE,mBAAmB,MAAa,EAAuB,GAAO,CAAQ,EAAC,IACzE;GACG,0BAA0B,MAAa,EAAuB,GAAO,QAAQ,CAAQ;GACrF,2BAA2B,MAAa,EAAuB,GAAO,SAAS,CAAQ;GACvF,wBAAwB,MAAa,EAAuB,GAAO,MAAM,CAAQ;CACpF,GACN,CAAC,CAAsB,CACzB,GAEM,IAAW,GACd,GAAK,GAAU,MAAU;EACxB,AAAI,KACF,OAAO,OAAO,GAAK,EAAa,GAAU,CAAK,CAAC;CAEpD,GACA,CAAC,CAAY,CACf,GAEM,IAAyB,QACvB,EAAqB,GAAmB,mBAAmB,GACjE,CAAC,GAAmB,CAAoB,CAC1C,GACM,IAAuB,QACrB,EAAqB,GAAiB,iBAAiB,GAC7D,CAAC,GAAiB,CAAoB,CACxC,GAEM,IAAmB,QAAc;EACrC,IAAM,IAAY,CAAC;EAOnB,OALA,EAAS,GAAW,oBAAoB,CAAe,GACvD,EAAS,GAAW,wBAAwB,CAAkB,GAC9D,EAAS,GAAW,6BAA6B,CAAuB,GACxE,EAAS,GAAW,yBAAyB,CAAmB,GAEzD;CACT,GAAG;EAAC;EAAU;EAAiB;EAAoB;EAAyB;CAAmB,CAAC;CAEhG,OACE,kBAAC,GAAD;EACO;EACL,WAAW,EACT,EAAO,SACP,GACA,GACA,KAAW,EAAO,qBAClB,CACF;EACA,eAAa,KAAU,EAAQ;EAC/B,OAAO;GAAC,GAAG;GAAkB,GAAG;EAAK;EACrC,GAAI;YAEJ,kBAAC,OAAD;GACE,WAAW,EAAK,EAAO,oBAAuB,KAAa,EAAO,gCAAgC;GAClG,eAAa,EAAQ;GAEpB;EACE,CAAA;CACI,CAAA;AAEf,CACF"}
+{"version":3,"file":"Section.js","names":[],"sources":["../../src/Section/Section.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren, useCallback, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/section/section.css'\nimport styles from './Section.module.css'\nimport gridlineStyles from '../component-helpers/shared.module.css'\n\nexport const SectionPaddingVariants = ['none', 'condensed', 'normal', 'spacious'] as const\nexport const SectionBackgroundColors = ['default', 'subtle'] as const\nexport const SectionVariants = ['default', 'gridline'] as const\n\nconst defaultSectionPadding = SectionPaddingVariants[2]\nconst defaultSectionVariant = SectionVariants[0]\n\ntype ResponsiveMap<T> = {\n  narrow?: T\n  regular?: T\n  wide?: T\n}\n\ntype BackgroundColors = (typeof SectionBackgroundColors)[number] | AnyString // The AnyString union type is a workaround to provide autocompletion for the SectionBackgroundColors values\ntype PaddingVariants = (typeof SectionPaddingVariants)[number]\ntype ResponsiveBackgroundColorMap = ResponsiveMap<BackgroundColors>\ntype ResponsiveBackgroundImagePositionMap = ResponsiveMap<string | string[]>\ntype ResponsiveBackgroundImageSizeMap = ResponsiveMap<string | string[]>\ntype ResponsiveBackgroundImageSrcMap = ResponsiveMap<string | string[]>\ntype ResponsivePaddingVariantsMap = ResponsiveMap<PaddingVariants>\ntype SectionVariant = (typeof SectionVariants)[number]\n\ntype SectionProps = {\n  /**\n   * The HTML element used to render the section.\n   */\n  as?: 'section' | 'div'\n  /**\n   * The visual variant of the section.\n   */\n  variant?: SectionVariant\n  /**\n   * The padding applied to the start of the section.\n   */\n  paddingBlockStart?: PaddingVariants | ResponsivePaddingVariantsMap\n  /**\n   * The padding applied to the end of the section.\n   */\n  paddingBlockEnd?: PaddingVariants | ResponsivePaddingVariantsMap\n  /**\n   * The system-level or custom background color of the section.\n   */\n  backgroundColor?: BackgroundColors | ResponsiveBackgroundColorMap\n  /**\n   * The background image of the section.\n   */\n  backgroundImageSrc?: string | string[] | ResponsiveBackgroundImageSrcMap\n  /**\n   * The position of the background image.\n   */\n  backgroundImagePosition?: string | string[] | ResponsiveBackgroundImagePositionMap\n  /**\n   * The size of the background image.\n   */\n  backgroundImageSize?: string | string[] | ResponsiveBackgroundImageSizeMap\n  /**\n   * Makes the content of the section span the full width of its parent container.\n   */\n  fullWidth?: boolean\n  /**\n   * Adds rounded corners to the top of the section.\n   * Not supported with the `gridline` variant.\n   */\n  rounded?: boolean\n  /**\n   * Forward inline styles\n   */\n  style?: React.CSSProperties\n  /**\n   * Optional attirbute for testing\n   */\n  ['data-testid']?: string\n} & PropsWithChildren<BaseProps<HTMLDivElement>>\n\nconst testIds = {\n  root: 'Section',\n  container: 'Section__container',\n}\n\nexport const Section = forwardRef<HTMLDivElement, PropsWithChildren<SectionProps>>(\n  (\n    {\n      as: Component = 'section',\n      variant = defaultSectionVariant,\n      paddingBlockStart = defaultSectionPadding,\n      paddingBlockEnd = defaultSectionPadding,\n      backgroundColor,\n      backgroundImageSrc,\n      backgroundImagePosition = '50%',\n      backgroundImageSize = 'cover',\n      className,\n      children,\n      'data-testid': testId,\n      fullWidth = false,\n      rounded = false,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const createPaddingClasses = useCallback(\n      (paddingBlock, blockType) =>\n        typeof paddingBlock === 'string'\n          ? styles[`Section--${blockType}-${paddingBlock}`]\n          : Object.keys(paddingBlock)\n              .map(viewport => styles[`Section-${viewport}--${blockType}-${paddingBlock[viewport]}`])\n              .join(' '),\n      [],\n    )\n\n    const processBackgroundValue = useCallback((value: string | string[], property) => {\n      if (property === 'background-image-src') {\n        return Array.isArray(value) ? value.map(img => `url(${img})`).join() : `url(${value})`\n      }\n\n      if (property === 'background-color' && typeof value === 'string') {\n        return SectionBackgroundColors.includes(value as (typeof SectionBackgroundColors)[number])\n          ? `var(--brand-color-canvas-${value})`\n          : value\n      }\n\n      return Array.isArray(value) ? value.join() : value\n    }, [])\n\n    const createStyles = useCallback(\n      (property, value) =>\n        typeof value === 'string' || Array.isArray(value)\n          ? {[`--brand-Section-${property}`]: processBackgroundValue(value, property)}\n          : {\n              [`--brand-Section-narrow-${property}`]: processBackgroundValue(value?.narrow, property),\n              [`--brand-Section-regular-${property}`]: processBackgroundValue(value?.regular, property),\n              [`--brand-Section-wide-${property}`]: processBackgroundValue(value?.wide, property),\n            },\n      [processBackgroundValue],\n    )\n\n    const addStyle = useCallback(\n      (obj, property, value) => {\n        if (value) {\n          Object.assign(obj, createStyles(property, value))\n        }\n      },\n      [createStyles],\n    )\n\n    const paddingBlockStartClass = useMemo(\n      () => createPaddingClasses(paddingBlockStart, 'paddingBlockStart'),\n      [paddingBlockStart, createPaddingClasses],\n    )\n    const paddingBlockEndClass = useMemo(\n      () => createPaddingClasses(paddingBlockEnd, 'paddingBlockEnd'),\n      [paddingBlockEnd, createPaddingClasses],\n    )\n\n    const backgroundStyles = useMemo(() => {\n      const allStyles = {}\n\n      addStyle(allStyles, 'background-color', backgroundColor)\n      addStyle(allStyles, 'background-image-src', backgroundImageSrc)\n      addStyle(allStyles, 'background-image-position', backgroundImagePosition)\n      addStyle(allStyles, 'background-image-size', backgroundImageSize)\n\n      return allStyles\n    }, [addStyle, backgroundColor, backgroundImageSrc, backgroundImagePosition, backgroundImageSize])\n\n    if (\n      variant === 'gridline' &&\n      rounded &&\n      (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')\n    ) {\n      // eslint-disable-next-line no-console\n      console.warn('Section: rounded is not supported with variant=\"gridline\"; ignoring rounded.')\n    }\n\n    return (\n      <Component\n        ref={ref}\n        className={clsx(\n          styles.Section,\n          variant === 'gridline' && styles['Section--variant-gridline'],\n          variant === 'gridline' && gridlineStyles.gridline,\n          paddingBlockStartClass,\n          paddingBlockEndClass,\n          rounded && variant !== 'gridline' && styles['Section--rounded'],\n          className,\n        )}\n        data-testid={testId || testIds.root}\n        style={{...backgroundStyles, ...style}}\n        {...props}\n      >\n        <div\n          className={clsx(styles[`Section__container`], fullWidth && styles['Section__container--fullWidth'])}\n          data-testid={testIds.container}\n        >\n          {children}\n        </div>\n      </Component>\n    )\n  },\n)\n"],"mappings":";;;;;;;AAQA,IAAa,IAAyB;CAAC;CAAQ;CAAa;CAAU;AAAU,GACnE,IAA0B,CAAC,WAAW,QAAQ,GAC9C,IAAkB,CAAC,WAAW,UAAU,GAE/C,IAAwB,EAAuB,IAC/C,IAAwB,EAAgB,IAqExC,IAAU;CACd,MAAM;CACN,WAAW;AACb,GAEa,IAAU,GAEnB,EACE,IAAI,IAAY,WAChB,aAAU,GACV,uBAAoB,GACpB,qBAAkB,GAClB,oBACA,uBACA,6BAA0B,OAC1B,yBAAsB,SACtB,cACA,aACA,eAAe,GACf,eAAY,IACZ,aAAU,IACV,UACA,GAAG,KAEL,MACG;CACH,IAAM,IAAuB,GAC1B,GAAc,MACb,OAAO,KAAiB,WACpB,EAAO,YAAY,EAAU,GAAG,OAChC,OAAO,KAAK,CAAY,CAAC,CACtB,KAAI,MAAY,EAAO,WAAW,EAAS,IAAI,EAAU,GAAG,EAAa,KAAY,CAAC,CACtF,KAAK,GAAG,GACjB,CAAC,CACH,GAEM,IAAyB,GAAa,GAA0B,MAChE,MAAa,yBACR,MAAM,QAAQ,CAAK,IAAI,EAAM,KAAI,MAAO,OAAO,EAAI,EAAE,CAAC,CAAC,KAAK,IAAI,OAAO,EAAM,KAGlF,MAAa,sBAAsB,OAAO,KAAU,WAC/C,EAAwB,SAAS,CAAiD,IACrF,4BAA4B,EAAM,KAClC,IAGC,MAAM,QAAQ,CAAK,IAAI,EAAM,KAAK,IAAI,GAC5C,CAAC,CAAC,GAEC,IAAe,GAClB,GAAU,MACT,OAAO,KAAU,YAAY,MAAM,QAAQ,CAAK,IAC5C,GAAE,mBAAmB,MAAa,EAAuB,GAAO,CAAQ,EAAC,IACzE;GACG,0BAA0B,MAAa,EAAuB,GAAO,QAAQ,CAAQ;GACrF,2BAA2B,MAAa,EAAuB,GAAO,SAAS,CAAQ;GACvF,wBAAwB,MAAa,EAAuB,GAAO,MAAM,CAAQ;CACpF,GACN,CAAC,CAAsB,CACzB,GAEM,IAAW,GACd,GAAK,GAAU,MAAU;EACxB,AAAI,KACF,OAAO,OAAO,GAAK,EAAa,GAAU,CAAK,CAAC;CAEpD,GACA,CAAC,CAAY,CACf,GAEM,IAAyB,QACvB,EAAqB,GAAmB,mBAAmB,GACjE,CAAC,GAAmB,CAAoB,CAC1C,GACM,IAAuB,QACrB,EAAqB,GAAiB,iBAAiB,GAC7D,CAAC,GAAiB,CAAoB,CACxC,GAEM,IAAmB,QAAc;EACrC,IAAM,IAAY,CAAC;EAOnB,OALA,EAAS,GAAW,oBAAoB,CAAe,GACvD,EAAS,GAAW,wBAAwB,CAAkB,GAC9D,EAAS,GAAW,6BAA6B,CAAuB,GACxE,EAAS,GAAW,yBAAyB,CAAmB,GAEzD;CACT,GAAG;EAAC;EAAU;EAAiB;EAAoB;EAAyB;CAAmB,CAAC;CAWhG,OARE,MAAY,cACZ,MAAA,QAAA,IAAA,aAC0B,iBAAA,QAAA,IAAA,aAA0C,WAGpE,QAAQ,KAAK,gFAA8E,GAI3F,kBAAC,GAAD;EACO;EACL,WAAW,EACT,EAAO,SACP,MAAY,cAAc,EAAO,8BACjC,MAAY,cAAc,EAAe,UACzC,GACA,GACA,KAAW,MAAY,cAAc,EAAO,qBAC5C,CACF;EACA,eAAa,KAAU,EAAQ;EAC/B,OAAO;GAAC,GAAG;GAAkB,GAAG;EAAK;EACrC,GAAI;YAEJ,kBAAC,OAAD;GACE,WAAW,EAAK,EAAO,oBAAuB,KAAa,EAAO,gCAAgC;GAClG,eAAa,EAAQ;GAEpB;EACE,CAAA;CACI,CAAA;AAEf,CACF"}

package/esm/Section/Section.module-DjXB_1HE.css

@@ -0,0 +1 @@
+.Primer_Brand__Section-module__Section___O2zvq{--rounded-padding-overlap-adjustment:0px;--rounded-radius:var(--brand-borderRadius-xlarge);--padding-block-start:var(--brand-Section-padding-normal);--padding-block-end:var(--brand-Section-padding-normal);--adjusted-padding-block-end:calc(var(--padding-block-end) + var(--rounded-padding-overlap-adjustment));background-repeat:no-repeat;background-color:var(--brand-Section-narrow-background-color,var(--brand-Section-background-color));background-image:var(--brand-Section-narrow-background-image-src,var(--brand-Section-background-image-src));background-size:var(--brand-Section-narrow-background-image-size,var(--brand-Section-background-image-size));background-position:50%;background-position:var(--brand-Section-narrow-background-image-position,var(--brand-Section-background-image-position,center));padding-block-start:var(--padding-block-start);padding-block-end:var(--adjusted-padding-block-end)}.Primer_Brand__Section-module__Section__container___xy9DV{width:100%;max-width:var(--brand-Section-container-maxWidth);margin-inline:auto}.Primer_Brand__Section-module__Section__container--fullWidth___5sU9n{max-width:none}.Primer_Brand__Section-module__Section--variant-gridline___X6okw .Primer_Brand__Section-module__Section__container___xy9DV{padding-inline:var(--brand-Section-variant-gridline-paddingInline)}.Primer_Brand__Section-module__Section--variant-gridline___X6okw .Primer_Brand__Section-module__Section__container--fullWidth___5sU9n{padding-inline:0}.Primer_Brand__Section-module__Section___O2zvq.Primer_Brand__Section-module__Section--variant-gridline___X6okw:after{bottom:calc(-1 * var(--brand-borderWidth-thin))}.Primer_Brand__Section-module__Section--rounded___9qxrG{border-radius:var(--rounded-radius) var(--rounded-radius) 0 0;margin-top:calc(-1 * var(--rounded-radius))}.Primer_Brand__Section-module__Section___O2zvq:has(+.Primer_Brand__Section-module__Section--rounded___9qxrG){--rounded-padding-overlap-adjustment:var(--rounded-radius)}.Primer_Brand__Section-module__Section--paddingBlockStart-none___4vMFc,.Primer_Brand__Section-module__Section-narrow--paddingBlockStart-none___7jsdQ{--padding-block-start:0}.Primer_Brand__Section-module__Section--paddingBlockStart-condensed___B4uoH,.Primer_Brand__Section-module__Section-narrow--paddingBlockStart-condensed___xbTDA{--padding-block-start:var(--brand-Section-padding-condensed)}.Primer_Brand__Section-module__Section--paddingBlockStart-normal___MRda_,.Primer_Brand__Section-module__Section-narrow--paddingBlockStart-normal___f0OXP{--padding-block-start:var(--brand-Section-padding-normal)}.Primer_Brand__Section-module__Section--paddingBlockStart-spacious___UzvtN,.Primer_Brand__Section-module__Section-narrow--paddingBlockStart-spacious___402r9{--padding-block-start:var(--brand-Section-padding-spacious)}.Primer_Brand__Section-module__Section--paddingBlockEnd-none___bRHMx,.Primer_Brand__Section-module__Section-narrow--paddingBlockEnd-none___r7NV_{--padding-block-end:0px}.Primer_Brand__Section-module__Section--paddingBlockEnd-condensed___Y1rxz,.Primer_Brand__Section-module__Section-narrow--paddingBlockEnd-condensed___0v98Y{--padding-block-end:var(--brand-Section-padding-condensed)}.Primer_Brand__Section-module__Section--paddingBlockEnd-normal___p2GiM,.Primer_Brand__Section-module__Section-narrow--paddingBlockEnd-normal___Cfp0Y{--padding-block-end:var(--brand-Section-padding-normal)}.Primer_Brand__Section-module__Section--paddingBlockEnd-spacious___TybX8,.Primer_Brand__Section-module__Section-narrow--paddingBlockEnd-spacious___ysjWh{--padding-block-end:var(--brand-Section-padding-spacious)}@media screen and (width>=48rem){.Primer_Brand__Section-module__Section___O2zvq{background-color:var(--brand-Section-regular-background-color,var(--brand-Section-background-color));background-image:var(--brand-Section-regular-background-image-src,var(--brand-Section-background-image-src));background-size:var(--brand-Section-regular-background-image-size,var(--brand-Section-background-image-size));background-position:var(--brand-Section-regular-background-image-position,var(--brand-Section-background-image-position))}.Primer_Brand__Section-module__Section-regular--paddingBlockStart-none___Nj9j3{--padding-block-start:0}.Primer_Brand__Section-module__Section-regular--paddingBlockStart-condensed___qaXW1{--padding-block-start:var(--brand-Section-padding-condensed)}.Primer_Brand__Section-module__Section-regular--paddingBlockStart-normal___vB8Ri{--padding-block-start:var(--brand-Section-padding-normal)}.Primer_Brand__Section-module__Section-regular--paddingBlockStart-spacious___ldEla{--padding-block-start:var(--brand-Section-padding-spacious)}.Primer_Brand__Section-module__Section-regular--paddingBlockEnd-none___fz5rB{--padding-block-end:0px}.Primer_Brand__Section-module__Section-regular--paddingBlockEnd-condensed___D1eGT{--padding-block-end:var(--brand-Section-padding-condensed)}.Primer_Brand__Section-module__Section-regular--paddingBlockEnd-normal___6tfPx{--padding-block-end:var(--brand-Section-padding-normal)}.Primer_Brand__Section-module__Section-regular--paddingBlockEnd-spacious___ffrwb{--padding-block-end:var(--brand-Section-padding-spacious)}}@media screen and (width>=80rem){.Primer_Brand__Section-module__Section___O2zvq{background-color:var(--brand-Section-wide-background-color,var(--brand-Section-background-color));background-image:var(--brand-Section-wide-background-image-src,var(--brand-Section-background-image-src));background-size:var(--brand-Section-wide-background-image-size,var(--brand-Section-background-image-size));background-position:var(--brand-Section-wide-background-image-position,var(--brand-Section-background-image-position))}.Primer_Brand__Section-module__Section-wide--paddingBlockStart-none___cYTu3{--padding-block-start:0}.Primer_Brand__Section-module__Section-wide--paddingBlockStart-condensed___Y3WFj{--padding-block-start:var(--brand-Section-padding-condensed)}.Primer_Brand__Section-module__Section-wide--paddingBlockStart-normal___0lhjy{--padding-block-start:var(--brand-Section-padding-normal)}.Primer_Brand__Section-module__Section-wide--paddingBlockStart-spacious___kEVXd{--padding-block-start:var(--brand-Section-padding-spacious)}.Primer_Brand__Section-module__Section-wide--paddingBlockEnd-none___3NyQ9{--padding-block-end:0px}.Primer_Brand__Section-module__Section-wide--paddingBlockEnd-condensed___bF0Sz{--padding-block-end:var(--brand-Section-padding-condensed)}.Primer_Brand__Section-module__Section-wide--paddingBlockEnd-normal___kisJx{--padding-block-end:var(--brand-Section-padding-normal)}.Primer_Brand__Section-module__Section-wide--paddingBlockEnd-spacious___xovw1{--padding-block-end:var(--brand-Section-padding-spacious)}.Primer_Brand__Section-module__Section--variant-gridline___X6okw .Primer_Brand__Section-module__Section__container___xy9DV:not(.Primer_Brand__Section-module__Section__container--fullWidth___5sU9n){border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);position:relative}.Primer_Brand__Section-module__Section--variant-gridline___X6okw .Primer_Brand__Section-module__Section__container___xy9DV:not(.Primer_Brand__Section-module__Section__container--fullWidth___5sU9n):before,.Primer_Brand__Section-module__Section--variant-gridline___X6okw .Primer_Brand__Section-module__Section__container___xy9DV:not(.Primer_Brand__Section-module__Section__container--fullWidth___5sU9n):after{content:"";width:var(--brand-borderWidth-thin);background-color:var(--brand-color-border-muted);pointer-events:none;position:absolute;inset-block-start:calc(-1 * var(--padding-block-start));inset-block-end:calc(-1 * var(--adjusted-padding-block-end))}.Primer_Brand__Section-module__Section--variant-gridline___X6okw .Primer_Brand__Section-module__Section__container___xy9DV:not(.Primer_Brand__Section-module__Section__container--fullWidth___5sU9n):before{inset-inline-start:calc(-1 * var(--brand-borderWidth-thin))}.Primer_Brand__Section-module__Section--variant-gridline___X6okw .Primer_Brand__Section-module__Section__container___xy9DV:not(.Primer_Brand__Section-module__Section__container--fullWidth___5sU9n):after{inset-inline-end:calc(-1 * var(--brand-borderWidth-thin))}}

package/esm/Section/Section.module.js

@@ -1,8 +1,9 @@
-import './Section.module-B8zA8qj8.css';//#region src/Section/Section.module.css
+import './Section.module-DjXB_1HE.css';//#region src/Section/Section.module.css
 var e = "Primer_Brand__Section-module__Section___O2zvq", t = "Primer_Brand__Section-module__Section__container___xy9DV", n = {
 	Section: e,
 	Section__container: t,
 	"Section__container--fullWidth": "Primer_Brand__Section-module__Section__container--fullWidth___5sU9n",
+	"Section--variant-gridline": "Primer_Brand__Section-module__Section--variant-gridline___X6okw",
 	"Section--rounded": "Primer_Brand__Section-module__Section--rounded___9qxrG",
 	"Section--paddingBlockStart-none": "Primer_Brand__Section-module__Section--paddingBlockStart-none___4vMFc",
 	"Section-narrow--paddingBlockStart-none": "Primer_Brand__Section-module__Section-narrow--paddingBlockStart-none___7jsdQ",

package/esm/Section/Section.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.module.js","names":[],"sources":["../../src/Section/Section.module.css"],"sourcesContent":[".Section {\n  --rounded-padding-overlap-adjustment: 0px;\n  --rounded-radius: var(--brand-borderRadius-xlarge);\n  --padding-block-end: var(--brand-Section-padding-normal);\n  --adjusted-padding-block-end: calc(var(--padding-block-end) + var(--rounded-padding-overlap-adjustment));\n\n  background-repeat: no-repeat;\n  background-color: var(--brand-Section-narrow-background-color, var(--brand-Section-background-color));\n  background-image: var(--brand-Section-narrow-background-image-src, var(--brand-Section-background-image-src));\n  background-size: var(--brand-Section-narrow-background-image-size, var(--brand-Section-background-image-size));\n\n  background-position: var(\n    --brand-Section-narrow-background-image-position,\n    var(--brand-Section-background-image-position, center)\n  );\n\n  padding-block-start: var(--padding-block-start);\n  padding-block-end: var(--adjusted-padding-block-end);\n}\n\n.Section__container {\n  width: 100%;\n  max-width: var(--brand-Section-container-maxWidth);\n  margin-inline: auto;\n}\n\n.Section__container--fullWidth {\n  max-width: none;\n}\n\n.Section--rounded {\n  border-radius: var(--rounded-radius) var(--rounded-radius) 0 0;\n  margin-top: calc(-1 * var(--rounded-radius));\n}\n\n/* A progressive enhancment to adjust block-end padding to account for adjacent section rounded corners overlap. */\n.Section:has(+ .Section--rounded) {\n  --rounded-padding-overlap-adjustment: var(--rounded-radius);\n}\n\n.Section--paddingBlockStart-none,\n.Section-narrow--paddingBlockStart-none {\n  padding-block-start: 0;\n}\n\n.Section--paddingBlockStart-condensed,\n.Section-narrow--paddingBlockStart-condensed {\n  padding-block-start: var(--brand-Section-padding-condensed);\n}\n.Section--paddingBlockStart-normal,\n.Section-narrow--paddingBlockStart-normal {\n  padding-block-start: var(--brand-Section-padding-normal);\n}\n.Section--paddingBlockStart-spacious,\n.Section-narrow--paddingBlockStart-spacious {\n  padding-block-start: var(--brand-Section-padding-spacious);\n}\n\n.Section--paddingBlockEnd-none,\n.Section-narrow--paddingBlockEnd-none {\n  --padding-block-end: 0px;\n}\n\n.Section--paddingBlockEnd-condensed,\n.Section-narrow--paddingBlockEnd-condensed {\n  --padding-block-end: var(--brand-Section-padding-condensed);\n}\n.Section--paddingBlockEnd-normal,\n.Section-narrow--paddingBlockEnd-normal {\n  --padding-block-end: var(--brand-Section-padding-normal);\n}\n.Section--paddingBlockEnd-spacious,\n.Section-narrow--paddingBlockEnd-spacious {\n  --padding-block-end: var(--brand-Section-padding-spacious);\n}\n\n@media screen and (min-width: 48rem) {\n  .Section {\n    background-color: var(--brand-Section-regular-background-color, var(--brand-Section-background-color));\n    background-image: var(--brand-Section-regular-background-image-src, var(--brand-Section-background-image-src));\n    background-size: var(--brand-Section-regular-background-image-size, var(--brand-Section-background-image-size));\n    background-position: var(\n      --brand-Section-regular-background-image-position,\n      var(--brand-Section-background-image-position)\n    );\n  }\n\n  .Section-regular--paddingBlockStart-none {\n    padding-block-start: 0;\n  }\n\n  .Section-regular--paddingBlockStart-condensed {\n    padding-block-start: var(--brand-Section-padding-condensed);\n  }\n  .Section-regular--paddingBlockStart-normal {\n    padding-block-start: var(--brand-Section-padding-normal);\n  }\n  .Section-regular--paddingBlockStart-spacious {\n    padding-block-start: var(--brand-Section-padding-spacious);\n  }\n\n  .Section-regular--paddingBlockEnd-none {\n    --padding-block-end: 0px;\n  }\n\n  .Section-regular--paddingBlockEnd-condensed {\n    --padding-block-end: var(--brand-Section-padding-condensed);\n  }\n  .Section-regular--paddingBlockEnd-normal {\n    --padding-block-end: var(--brand-Section-padding-normal);\n  }\n  .Section-regular--paddingBlockEnd-spacious {\n    --padding-block-end: var(--brand-Section-padding-spacious);\n  }\n}\n\n@media screen and (min-width: 80rem) {\n  .Section {\n    background-color: var(--brand-Section-wide-background-color, var(--brand-Section-background-color));\n    background-image: var(--brand-Section-wide-background-image-src, var(--brand-Section-background-image-src));\n    background-size: var(--brand-Section-wide-background-image-size, var(--brand-Section-background-image-size));\n\n    background-position: var(\n      --brand-Section-wide-background-image-position,\n      var(--brand-Section-background-image-position)\n    );\n  }\n\n  .Section-wide--paddingBlockStart-none {\n    padding-block-start: 0;\n  }\n\n  .Section-wide--paddingBlockStart-condensed {\n    padding-block-start: var(--brand-Section-padding-condensed);\n  }\n  .Section-wide--paddingBlockStart-normal {\n    padding-block-start: var(--brand-Section-padding-normal);\n  }\n  .Section-wide--paddingBlockStart-spacious {\n    padding-block-start: var(--brand-Section-padding-spacious);\n  }\n\n  .Section-wide--paddingBlockEnd-none {\n    --padding-block-end: 0px;\n  }\n\n  .Section-wide--paddingBlockEnd-condensed {\n    --padding-block-end: var(--brand-Section-padding-condensed);\n  }\n  .Section-wide--paddingBlockEnd-normal {\n    --padding-block-end: var(--brand-Section-padding-normal);\n  }\n  .Section-wide--paddingBlockEnd-spacious {\n    --padding-block-end: var(--brand-Section-padding-spacious);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Section.module.js","names":[],"sources":["../../src/Section/Section.module.css"],"sourcesContent":[".Section {\n  --rounded-padding-overlap-adjustment: 0px;\n  --rounded-radius: var(--brand-borderRadius-xlarge);\n  --padding-block-start: var(--brand-Section-padding-normal);\n  --padding-block-end: var(--brand-Section-padding-normal);\n  --adjusted-padding-block-end: calc(var(--padding-block-end) + var(--rounded-padding-overlap-adjustment));\n\n  background-repeat: no-repeat;\n  background-color: var(--brand-Section-narrow-background-color, var(--brand-Section-background-color));\n  background-image: var(--brand-Section-narrow-background-image-src, var(--brand-Section-background-image-src));\n  background-size: var(--brand-Section-narrow-background-image-size, var(--brand-Section-background-image-size));\n\n  background-position: var(\n    --brand-Section-narrow-background-image-position,\n    var(--brand-Section-background-image-position, center)\n  );\n\n  padding-block-start: var(--padding-block-start);\n  padding-block-end: var(--adjusted-padding-block-end);\n}\n\n.Section__container {\n  width: 100%;\n  max-width: var(--brand-Section-container-maxWidth);\n  margin-inline: auto;\n}\n\n.Section__container--fullWidth {\n  max-width: none;\n}\n\n.Section--variant-gridline .Section__container {\n  padding-inline: var(--brand-Section-variant-gridline-paddingInline);\n}\n\n.Section--variant-gridline .Section__container--fullWidth {\n  padding-inline: 0;\n}\n\n.Section.Section--variant-gridline::after {\n  bottom: calc(-1 * var(--brand-borderWidth-thin));\n}\n\n.Section--rounded {\n  border-radius: var(--rounded-radius) var(--rounded-radius) 0 0;\n  margin-top: calc(-1 * var(--rounded-radius));\n}\n\n/* A progressive enhancment to adjust block-end padding to account for adjacent section rounded corners overlap. */\n.Section:has(+ .Section--rounded) {\n  --rounded-padding-overlap-adjustment: var(--rounded-radius);\n}\n\n.Section--paddingBlockStart-none,\n.Section-narrow--paddingBlockStart-none {\n  --padding-block-start: 0;\n}\n\n.Section--paddingBlockStart-condensed,\n.Section-narrow--paddingBlockStart-condensed {\n  --padding-block-start: var(--brand-Section-padding-condensed);\n}\n.Section--paddingBlockStart-normal,\n.Section-narrow--paddingBlockStart-normal {\n  --padding-block-start: var(--brand-Section-padding-normal);\n}\n.Section--paddingBlockStart-spacious,\n.Section-narrow--paddingBlockStart-spacious {\n  --padding-block-start: var(--brand-Section-padding-spacious);\n}\n\n.Section--paddingBlockEnd-none,\n.Section-narrow--paddingBlockEnd-none {\n  --padding-block-end: 0px;\n}\n\n.Section--paddingBlockEnd-condensed,\n.Section-narrow--paddingBlockEnd-condensed {\n  --padding-block-end: var(--brand-Section-padding-condensed);\n}\n.Section--paddingBlockEnd-normal,\n.Section-narrow--paddingBlockEnd-normal {\n  --padding-block-end: var(--brand-Section-padding-normal);\n}\n.Section--paddingBlockEnd-spacious,\n.Section-narrow--paddingBlockEnd-spacious {\n  --padding-block-end: var(--brand-Section-padding-spacious);\n}\n\n@media screen and (min-width: 48rem) {\n  .Section {\n    background-color: var(--brand-Section-regular-background-color, var(--brand-Section-background-color));\n    background-image: var(--brand-Section-regular-background-image-src, var(--brand-Section-background-image-src));\n    background-size: var(--brand-Section-regular-background-image-size, var(--brand-Section-background-image-size));\n    background-position: var(\n      --brand-Section-regular-background-image-position,\n      var(--brand-Section-background-image-position)\n    );\n  }\n\n  .Section-regular--paddingBlockStart-none {\n    --padding-block-start: 0;\n  }\n\n  .Section-regular--paddingBlockStart-condensed {\n    --padding-block-start: var(--brand-Section-padding-condensed);\n  }\n  .Section-regular--paddingBlockStart-normal {\n    --padding-block-start: var(--brand-Section-padding-normal);\n  }\n  .Section-regular--paddingBlockStart-spacious {\n    --padding-block-start: var(--brand-Section-padding-spacious);\n  }\n\n  .Section-regular--paddingBlockEnd-none {\n    --padding-block-end: 0px;\n  }\n\n  .Section-regular--paddingBlockEnd-condensed {\n    --padding-block-end: var(--brand-Section-padding-condensed);\n  }\n  .Section-regular--paddingBlockEnd-normal {\n    --padding-block-end: var(--brand-Section-padding-normal);\n  }\n  .Section-regular--paddingBlockEnd-spacious {\n    --padding-block-end: var(--brand-Section-padding-spacious);\n  }\n}\n\n@media screen and (min-width: 80rem) {\n  .Section {\n    background-color: var(--brand-Section-wide-background-color, var(--brand-Section-background-color));\n    background-image: var(--brand-Section-wide-background-image-src, var(--brand-Section-background-image-src));\n    background-size: var(--brand-Section-wide-background-image-size, var(--brand-Section-background-image-size));\n\n    background-position: var(\n      --brand-Section-wide-background-image-position,\n      var(--brand-Section-background-image-position)\n    );\n  }\n\n  .Section-wide--paddingBlockStart-none {\n    --padding-block-start: 0;\n  }\n\n  .Section-wide--paddingBlockStart-condensed {\n    --padding-block-start: var(--brand-Section-padding-condensed);\n  }\n  .Section-wide--paddingBlockStart-normal {\n    --padding-block-start: var(--brand-Section-padding-normal);\n  }\n  .Section-wide--paddingBlockStart-spacious {\n    --padding-block-start: var(--brand-Section-padding-spacious);\n  }\n\n  .Section-wide--paddingBlockEnd-none {\n    --padding-block-end: 0px;\n  }\n\n  .Section-wide--paddingBlockEnd-condensed {\n    --padding-block-end: var(--brand-Section-padding-condensed);\n  }\n  .Section-wide--paddingBlockEnd-normal {\n    --padding-block-end: var(--brand-Section-padding-normal);\n  }\n  .Section-wide--paddingBlockEnd-spacious {\n    --padding-block-end: var(--brand-Section-padding-spacious);\n  }\n\n  .Section--variant-gridline .Section__container:not(.Section__container--fullWidth) {\n    position: relative;\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .Section--variant-gridline .Section__container:not(.Section__container--fullWidth)::before,\n  .Section--variant-gridline .Section__container:not(.Section__container--fullWidth)::after {\n    content: '';\n    position: absolute;\n    inset-block-start: calc(-1 * var(--padding-block-start));\n    inset-block-end: calc(-1 * var(--adjusted-padding-block-end));\n    width: var(--brand-borderWidth-thin);\n    background-color: var(--brand-color-border-muted);\n    pointer-events: none;\n  }\n\n  .Section--variant-gridline .Section__container:not(.Section__container--fullWidth)::before {\n    inset-inline-start: calc(-1 * var(--brand-borderWidth-thin));\n  }\n\n  .Section--variant-gridline .Section__container:not(.Section__container--fullWidth)::after {\n    inset-inline-end: calc(-1 * var(--brand-borderWidth-thin));\n  }\n}\n"],"mappings":""}

package/esm/index.esm.js

@@ -70,12 +70,12 @@ import { SubNav as un, SubNavSubMenuVariants as dn, useSubNavContext as fn } fro
 import { NavList as pn } from "./NavList/NavList.js";
 import { IDE as mn, IDEDefaultIconMap as hn, IDEFileExtensions as gn } from "./IDE/IDE.js";
 import { BreadcrumbVariants as _n, Breadcrumbs as vn } from "./Breadcrumbs/Breadcrumbs.js";
-import { Section as yn, SectionBackgroundColors as bn, SectionPaddingVariants as xn } from "./Section/Section.js";
-import { Statistic as Sn, StatisticSizes as Cn, StatisticSpacingValues as wn } from "./Statistic/Statistic.js";
-import { BreakoutBanner as Tn, BreakoutBannerBackgroundColors as En } from "./BreakoutBanner/BreakoutBanner.js";
-import { Footnotes as Dn, FootnotesItemTags as On, FootnotesTags as kn } from "./Footnotes/Footnotes.js";
-import { FrostedGlassVFX as An, FrostedGlassVFXIntensity as jn, defaultFrostedGlassVFXIntensity as Mn } from "./FrostedGlassVFX/FrostedGlassVFX.js";
-import { SectionIntroStacked as Nn, SectionIntroStackedVariants as Pn } from "./SectionIntroStacked/SectionIntroStacked.js";
-import { Tabs as Fn } from "./Tabs/Tabs.js";
-import { Tiles as In } from "./Tiles/Tiles.js";
-export { Qe as Accordion, $e as AccordionContent, et as AccordionHeading, tt as AccordionRoot, nt as AccordionToggleColors, ne as ActionMenu, re as ActionMenuButtonModes, ie as ActionMenuProvider, ae as ActionMenuSizes, Et as AnchorNav, a as Animate, n as AnimationContext, r as AnimationProvider, i as AnimationVariants, gt as Avatar, _t as AvatarShapes, vt as AvatarSizes, tn as Bento, g as Box, _ as BoxBackgroundColors, v as BoxBorderColorOptions, y as BoxBorderRadiusOptions, b as BoxBorderWidthOptions, x as BoxSpacingValues, _n as BreadcrumbVariants, vn as Breadcrumbs, Tn as BreakoutBanner, En as BreakoutBannerBackgroundColors, ze as BreakpointSize, K as Button, ce as ButtonGroup, q as ButtonSizes, J as ButtonVariants, Dt as CTABanner, Ot as CTABannerBackgroundColors, jt as CTAForm, It as Card, Lt as CardBackgroundColors, Rt as CardCTAVariants, zt as CardIconColors, Bt as CardImagePaddingOptions, Vt as CardLabelVariants, Ht as CardTokenPositions, Ut as CardVariants, at as Checkbox, mt as CheckboxGroup, Q as ColorModesEnum, wt as ComparisonTable, ot as DEFAULT_TEXTAREA_COLS, st as DEFAULT_TEXTAREA_RESIZE, ct as DEFAULT_TEXTAREA_ROWS, nn as EyebrowBanner, rn as EyebrowBannerIconColors, an as EyebrowBannerLabelColors, M as EyebrowText, N as EyebrowTextVariants, rt as FAQ, it as FAQGroup, Dn as Footnotes, On as FootnotesItemTags, kn as FootnotesTags, pt as FormControl, An as FrostedGlassVFX, jn as FrostedGlassVFXIntensity, t as Grid, I as Heading, L as HeadingFontVariants, R as HeadingLetterSpacing, z as HeadingSizes, B as HeadingStretch, V as HeadingTags, H as HeadingWeights, de as Hero, mn as IDE, hn as IDEDefaultIconMap, gn as IDEFileExtensions, je as Icon, le as Image, ue as ImageBorderRadiusOptions, Je as InlineCode, qe as InlineLink, ve as Label, ye as LabelColors, be as LabelSizes, me as Link, he as LinkArrowDirections, ge as LinkSizes, _e as LinkVariants, $t as LogoSuite, We as MediaPlaylist, Mt as MinimalFooter, Zt as MinimalVideoPlayer, pn as NavList, At as OrderedList, Ue as Pagination, Nt as Pillar, ln as PricingOptions, Jt as Prose, ft as Radio, ht as RadioGroup, Ce as River, fe as RiverAccordion, pe as RiverAccordionVariants, ke as RiverBreakout, Ve as RiverBreakoutTabs, Ae as RiverBreakoutVariants, He as RiverStoryScroll, we as RiverVisualPaddingOptions, Te as RiverVisualPositionOptions, yn as Section, bn as SectionBackgroundColors, qt as SectionIntro, Nn as SectionIntroStacked, Pn as SectionIntroStackedVariants, xn as SectionPaddingVariants, dt as Select, c as Stack, l as StackAlignItemVariants, u as StackDirectionVariants, d as StackFlexWrapVariants, f as StackJustifyContentVariants, p as StackSpacingVariants, Sn as Statistic, Cn as StatisticSizes, wn as StatisticSpacingValues, un as SubNav, dn as SubNavSubMenuVariants, Ke as SubdomainNavBar, Fn as Tabs, yt as Testimonial, bt as TestimonialQuoteMarkColors, xt as TestimonialVariants, S as Text, P as TextCursorAnimation, C as TextFontVariants, ut as TextInput, s as TextRevealAnimation, w as TextSizes, T as TextTags, E as TextVariants, D as TextWeights, lt as Textarea, $ as ThemeContext, ee as ThemeProvider, In as Tiles, en as Timeline, Ye as Token, Xe as TokenVariants, sn as Tooltip, cn as TooltipContext, kt as UnorderedList, Xt as VideoPlayer, Y as _Button, Tt as _ComparisonTable, e as _GLOBAL_STYLES, Qt as _MinimalVideoPlayer, oe as actionMenuOverlaySides, U as classMap, X as defaultButtonSize, Z as defaultButtonVariant, Wt as defaultCardCTAVariant, Gt as defaultCardIconColor, Kt as defaultCardLabelVariant, on as defaultEyebrowBannerIconColor, O as defaultFontVariant, Mn as defaultFrostedGlassVFXIntensity, W as defaultHeadingFont, G as defaultHeadingTag, Me as defaultIconColor, Ne as defaultIconSize, xe as defaultLabelColor, Se as defaultLabelSize, Pt as defaultPillarIconColor, Ft as defaultPillarIconSize, St as defaultQuoteMarkColor, Ee as defaultRiverAlign, De as defaultRiverImageTextRatio, Oe as defaultRiverVariant, m as defaultStackDirection, h as defaultStackSpacing, Ct as defaultTestimonialVariant, k as defaultTextSize, A as defaultTextTag, j as defaultTextVariant, Ze as defaultTokenVariant, Pe as iconColors, Fe as iconSizeMap, Ie as iconSizes, Le as namedIconSizes, Re as numericIconSizes, F as testIds, se as useActionMenuContext, o as useAnimation, Ge as useFocusTrap, fn as useSubNavContext, te as useTheme, Yt as useVideo, Be as useWindowSize };
+import { Section as yn, SectionBackgroundColors as bn, SectionPaddingVariants as xn, SectionVariants as Sn } from "./Section/Section.js";
+import { Statistic as Cn, StatisticSizes as wn, StatisticSpacingValues as Tn } from "./Statistic/Statistic.js";
+import { BreakoutBanner as En, BreakoutBannerBackgroundColors as Dn } from "./BreakoutBanner/BreakoutBanner.js";
+import { Footnotes as On, FootnotesItemTags as kn, FootnotesTags as An } from "./Footnotes/Footnotes.js";
+import { FrostedGlassVFX as jn, FrostedGlassVFXIntensity as Mn, defaultFrostedGlassVFXIntensity as Nn } from "./FrostedGlassVFX/FrostedGlassVFX.js";
+import { SectionIntroStacked as Pn, SectionIntroStackedVariants as Fn } from "./SectionIntroStacked/SectionIntroStacked.js";
+import { Tabs as In } from "./Tabs/Tabs.js";
+import { Tiles as Ln } from "./Tiles/Tiles.js";
+export { Qe as Accordion, $e as AccordionContent, et as AccordionHeading, tt as AccordionRoot, nt as AccordionToggleColors, ne as ActionMenu, re as ActionMenuButtonModes, ie as ActionMenuProvider, ae as ActionMenuSizes, Et as AnchorNav, a as Animate, n as AnimationContext, r as AnimationProvider, i as AnimationVariants, gt as Avatar, _t as AvatarShapes, vt as AvatarSizes, tn as Bento, g as Box, _ as BoxBackgroundColors, v as BoxBorderColorOptions, y as BoxBorderRadiusOptions, b as BoxBorderWidthOptions, x as BoxSpacingValues, _n as BreadcrumbVariants, vn as Breadcrumbs, En as BreakoutBanner, Dn as BreakoutBannerBackgroundColors, ze as BreakpointSize, K as Button, ce as ButtonGroup, q as ButtonSizes, J as ButtonVariants, Dt as CTABanner, Ot as CTABannerBackgroundColors, jt as CTAForm, It as Card, Lt as CardBackgroundColors, Rt as CardCTAVariants, zt as CardIconColors, Bt as CardImagePaddingOptions, Vt as CardLabelVariants, Ht as CardTokenPositions, Ut as CardVariants, at as Checkbox, mt as CheckboxGroup, Q as ColorModesEnum, wt as ComparisonTable, ot as DEFAULT_TEXTAREA_COLS, st as DEFAULT_TEXTAREA_RESIZE, ct as DEFAULT_TEXTAREA_ROWS, nn as EyebrowBanner, rn as EyebrowBannerIconColors, an as EyebrowBannerLabelColors, M as EyebrowText, N as EyebrowTextVariants, rt as FAQ, it as FAQGroup, On as Footnotes, kn as FootnotesItemTags, An as FootnotesTags, pt as FormControl, jn as FrostedGlassVFX, Mn as FrostedGlassVFXIntensity, t as Grid, I as Heading, L as HeadingFontVariants, R as HeadingLetterSpacing, z as HeadingSizes, B as HeadingStretch, V as HeadingTags, H as HeadingWeights, de as Hero, mn as IDE, hn as IDEDefaultIconMap, gn as IDEFileExtensions, je as Icon, le as Image, ue as ImageBorderRadiusOptions, Je as InlineCode, qe as InlineLink, ve as Label, ye as LabelColors, be as LabelSizes, me as Link, he as LinkArrowDirections, ge as LinkSizes, _e as LinkVariants, $t as LogoSuite, We as MediaPlaylist, Mt as MinimalFooter, Zt as MinimalVideoPlayer, pn as NavList, At as OrderedList, Ue as Pagination, Nt as Pillar, ln as PricingOptions, Jt as Prose, ft as Radio, ht as RadioGroup, Ce as River, fe as RiverAccordion, pe as RiverAccordionVariants, ke as RiverBreakout, Ve as RiverBreakoutTabs, Ae as RiverBreakoutVariants, He as RiverStoryScroll, we as RiverVisualPaddingOptions, Te as RiverVisualPositionOptions, yn as Section, bn as SectionBackgroundColors, qt as SectionIntro, Pn as SectionIntroStacked, Fn as SectionIntroStackedVariants, xn as SectionPaddingVariants, Sn as SectionVariants, dt as Select, c as Stack, l as StackAlignItemVariants, u as StackDirectionVariants, d as StackFlexWrapVariants, f as StackJustifyContentVariants, p as StackSpacingVariants, Cn as Statistic, wn as StatisticSizes, Tn as StatisticSpacingValues, un as SubNav, dn as SubNavSubMenuVariants, Ke as SubdomainNavBar, In as Tabs, yt as Testimonial, bt as TestimonialQuoteMarkColors, xt as TestimonialVariants, S as Text, P as TextCursorAnimation, C as TextFontVariants, ut as TextInput, s as TextRevealAnimation, w as TextSizes, T as TextTags, E as TextVariants, D as TextWeights, lt as Textarea, $ as ThemeContext, ee as ThemeProvider, Ln as Tiles, en as Timeline, Ye as Token, Xe as TokenVariants, sn as Tooltip, cn as TooltipContext, kt as UnorderedList, Xt as VideoPlayer, Y as _Button, Tt as _ComparisonTable, e as _GLOBAL_STYLES, Qt as _MinimalVideoPlayer, oe as actionMenuOverlaySides, U as classMap, X as defaultButtonSize, Z as defaultButtonVariant, Wt as defaultCardCTAVariant, Gt as defaultCardIconColor, Kt as defaultCardLabelVariant, on as defaultEyebrowBannerIconColor, O as defaultFontVariant, Nn as defaultFrostedGlassVFXIntensity, W as defaultHeadingFont, G as defaultHeadingTag, Me as defaultIconColor, Ne as defaultIconSize, xe as defaultLabelColor, Se as defaultLabelSize, Pt as defaultPillarIconColor, Ft as defaultPillarIconSize, St as defaultQuoteMarkColor, Ee as defaultRiverAlign, De as defaultRiverImageTextRatio, Oe as defaultRiverVariant, m as defaultStackDirection, h as defaultStackSpacing, Ct as defaultTestimonialVariant, k as defaultTextSize, A as defaultTextTag, j as defaultTextVariant, Ze as defaultTokenVariant, Pe as iconColors, Fe as iconSizeMap, Ie as iconSizes, Le as namedIconSizes, Re as numericIconSizes, F as testIds, se as useActionMenuContext, o as useAnimation, Ge as useFocusTrap, fn as useSubNavContext, te as useTheme, Yt as useVideo, Be as useWindowSize };

package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/section/section-A-rkj9BD.css

@@ -0,0 +1 @@
+:root{--brand-Section-variant-gridline-paddingInline:var(--base-size-20);--brand-Section-container-maxWidth:80rem;--brand-Section-padding-spacious:var(--base-size-64);--brand-Section-padding-normal:var(--base-size-48);--brand-Section-padding-condensed:var(--base-size-16)}@media (width>=768px){:root{--brand-Section-variant-gridline-paddingInline:var(--base-size-40);--brand-Section-padding-spacious:var(--base-size-80);--brand-Section-padding-normal:var(--base-size-64);--brand-Section-padding-condensed:var(--base-size-32)}}@media (width>=1024px){:root{--brand-Section-padding-spacious:var(--base-size-128);--brand-Section-padding-normal:var(--base-size-96);--brand-Section-padding-condensed:var(--base-size-48)}}@media (width>=1280px){:root{--brand-Section-variant-gridline-paddingInline:var(--base-size-64)}}

package/esm/river/river-shared.module-DqESc-YN.css

@@ -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___s4zuj img,.Primer_Brand__river-shared-module__River__visual___s4zuj picture{display:block}.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(--brand-River-variant-gridline-visual-padding);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{width:100%;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-family:var(--brand-fontStack-monospace);font-size:calc(1em - 1px);font-weight:var(--base-text-weight-regular);color:var(--brand-InlineCode-color-fg-default);background-color:var(--brand-InlineCode-bgColor);padding-block:0;padding-inline:var(--base-size-4);border-radius:var(--base-size-2);white-space:normal;word-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:1.6}.Primer_Brand__river-shared-module__River__leadingComponent___J27K0 img,.Primer_Brand__river-shared-module__River__leadingComponent___J27K0 picture,.Primer_Brand__river-shared-module__River__trailingComponent___jDuou img,.Primer_Brand__river-shared-module__River__trailingComponent___jDuou picture{display:block}.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{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__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-center___DjITG{padding:var(--brand-River-variant-gridline-visual-padding);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___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end____8UId{padding:var(--brand-River-variant-gridline-visual-padding);border-radius:0;justify-content:center;align-items:flex-end;padding-block-end:0;display:flex}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-start___u_Kc6{padding:var(--brand-River-variant-gridline-visual-padding);border-radius:0;justify-content:flex-start;align-items:flex-end;padding-block-end:0;padding-inline-start:0;display:flex}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-end___3KRp9{padding:var(--brand-River-variant-gridline-visual-padding);border-radius:0;justify-content:flex-end;align-items:flex-end;padding-block-end:0;padding-inline-end:0;display:flex}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--padding-all___rTBWZ{padding:var(--brand-River-variant-gridline-visual-padding)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5{border-radius:0;padding:0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-center___DjITG img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-center___DjITG picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-center___DjITG video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-center___DjITG [data-video-player-container],.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end____8UId img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end____8UId picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end____8UId video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end____8UId [data-video-player-container],.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-start___u_Kc6 img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-start___u_Kc6 picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-start___u_Kc6 video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-start___u_Kc6 [data-video-player-container],.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-end___3KRp9 img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-end___3KRp9 picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-end___3KRp9 video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-end___3KRp9 [data-video-player-container]{border-radius:0;width:auto;max-width:100%;height:auto}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--padding-all___rTBWZ img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--padding-all___rTBWZ picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--padding-all___rTBWZ video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--padding-all___rTBWZ [data-video-player-container]{border-radius:0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-center___DjITG img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-center___DjITG picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-center___DjITG video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-center___DjITG [data-video-player-container]{border-radius:var(--brand-borderRadius-large)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end____8UId img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end____8UId picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end____8UId video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end____8UId [data-video-player-container]{border-radius:var(--brand-borderRadius-large) var(--brand-borderRadius-large) 0 0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-start___u_Kc6 img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-start___u_Kc6 picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-start___u_Kc6 video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-start___u_Kc6 [data-video-player-container]{border-radius:0;border-start-end-radius:var(--brand-borderRadius-large)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-end___3KRp9 img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-end___3KRp9 picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-end___3KRp9 video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-end___3KRp9 [data-video-player-container]{border-radius:0;border-start-start-radius:var(--brand-borderRadius-large)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--padding-all___rTBWZ img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--padding-all___rTBWZ picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--padding-all___rTBWZ video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--padding-all___rTBWZ [data-video-player-container]{border-radius:var(--brand-borderRadius-large)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--fill-media___aXDjy.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--fill-media___aXDjy.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--fill-media___aXDjy.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--fill-media___aXDjy.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 [data-video-player-container]{-o-object-fit:cover;object-fit:cover;width:100%;max-width:none;height:100%}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 [data-video-player-container],.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 [data-video-player-container]{border-radius:0}.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)}}

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

@@ -1,4 +1,4 @@
-import './river-shared.module-B1HvdKsP.css';//#region src/river/river-shared.module.css
+import './river-shared.module-DqESc-YN.css';//#region src/river/river-shared.module.css
 var e = "Primer_Brand__river-shared-module__River___PCP5W", t = "Primer_Brand__river-shared-module__River__content___udxiD", n = "Primer_Brand__river-shared-module__River__visual___s4zuj", r = "Primer_Brand__river-shared-module__River__heading___e5fwB", i = "Primer_Brand__river-shared-module__River__text___HCqnL", a = "Primer_Brand__river-shared-module__River__leadingComponent___J27K0", o = "Primer_Brand__river-shared-module__River__trailingComponent___jDuou", s = "Primer_Brand__river-shared-module__River__label___ENXiR", c = "Primer_Brand__river-shared-module__RiverBreakout___Jcz2F", l = "Primer_Brand__river-shared-module__RiverBreakout__hiddenHeading___wqngh", u = {
 	River: e,
 	"River--variant-gridline": "Primer_Brand__river-shared-module__River--variant-gridline___e27QX",

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

@@ -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 :is(img, picture) {\n  display: block;\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(--brand-River-variant-gridline-visual-padding);\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-family: var(--brand-fontStack-monospace);\n  /* optical resize relative to parent. monospace tends to be a little taller than sans-serif */\n  font-size: calc(1em - 1px);\n  font-weight: var(--base-text-weight-regular);\n  /* Keep the background clear of adjacent lines when large text wraps. */\n  line-height: 1.6;\n  color: var(--brand-InlineCode-color-fg-default);\n  background-color: var(--brand-InlineCode-bgColor);\n  padding-block: 0;\n  padding-inline: var(--base-size-4);\n  border-radius: var(--base-size-2);\n  white-space: normal;\n  overflow-wrap: anywhere;\n  -webkit-box-decoration-break: clone;\n  box-decoration-break: clone;\n}\n\n.River__leadingComponent :is(img, picture),\n.River__trailingComponent :is(img, picture) {\n  display: block;\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    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/* Explicit visual media layouts override the responsive default without changing it. */\n.River--variant-gridline .River__visual.River__visual--position-center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--brand-River-variant-gridline-visual-padding);\n  border-radius: 0;\n}\n\n.River--variant-gridline .River__visual.River__visual--position-block-end {\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  padding: var(--brand-River-variant-gridline-visual-padding);\n  padding-block-end: 0;\n  border-radius: 0;\n}\n\n.River--variant-gridline .River__visual.River__visual--position-block-end-inline-start {\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-start;\n  padding: var(--brand-River-variant-gridline-visual-padding);\n  padding-block-end: 0;\n  padding-inline-start: 0;\n  border-radius: 0;\n}\n\n.River--variant-gridline .River__visual.River__visual--position-block-end-inline-end {\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n  padding: var(--brand-River-variant-gridline-visual-padding);\n  padding-block-end: 0;\n  padding-inline-end: 0;\n  border-radius: 0;\n}\n\n.River--variant-gridline .River__visual.River__visual--padding-all {\n  padding: var(--brand-River-variant-gridline-visual-padding);\n}\n\n.River--variant-gridline .River__visual.River__visual--padding-none {\n  padding: 0;\n  border-radius: 0;\n}\n\n.River--variant-gridline\n  .River__visual:is(\n    .River__visual--position-center,\n    .River__visual--position-block-end,\n    .River__visual--position-block-end-inline-start,\n    .River__visual--position-block-end-inline-end\n  )\n  :is(img, picture, video, [data-video-player-container]) {\n  max-width: 100%;\n  width: auto;\n  height: auto;\n  border-radius: 0;\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--padding-all\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: 0;\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--rounded.River__visual--position-center\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--rounded.River__visual--position-block-end\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: var(--brand-borderRadius-large) var(--brand-borderRadius-large) 0 0;\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--rounded.River__visual--position-block-end-inline-start\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: 0;\n  border-start-end-radius: var(--brand-borderRadius-large);\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--rounded.River__visual--position-block-end-inline-end\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: 0;\n  border-start-start-radius: var(--brand-borderRadius-large);\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--rounded.River__visual--padding-all\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--fill-media.River__visual--padding-none\n  :is(img, picture, video, [data-video-player-container]) {\n  width: 100%;\n  max-width: none;\n  height: 100%;\n  object-fit: cover;\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--padding-none\n  :is(img, picture, video, [data-video-player-container]),\n.River--variant-gridline\n  .River__visual.River__visual--rounded.River__visual--padding-none\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: 0;\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"],"mappings":""}
+{"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 :is(img, picture) {\n  display: block;\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(--brand-River-variant-gridline-visual-padding);\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    width: 100%;\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-family: var(--brand-fontStack-monospace);\n  /* optical resize relative to parent. monospace tends to be a little taller than sans-serif */\n  font-size: calc(1em - 1px);\n  font-weight: var(--base-text-weight-regular);\n  /* Keep the background clear of adjacent lines when large text wraps. */\n  line-height: 1.6;\n  color: var(--brand-InlineCode-color-fg-default);\n  background-color: var(--brand-InlineCode-bgColor);\n  padding-block: 0;\n  padding-inline: var(--base-size-4);\n  border-radius: var(--base-size-2);\n  white-space: normal;\n  overflow-wrap: anywhere;\n  -webkit-box-decoration-break: clone;\n  box-decoration-break: clone;\n}\n\n.River__leadingComponent :is(img, picture),\n.River__trailingComponent :is(img, picture) {\n  display: block;\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    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/* Explicit visual media layouts override the responsive default without changing it. */\n.River--variant-gridline .River__visual.River__visual--position-center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--brand-River-variant-gridline-visual-padding);\n  border-radius: 0;\n}\n\n.River--variant-gridline .River__visual.River__visual--position-block-end {\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  padding: var(--brand-River-variant-gridline-visual-padding);\n  padding-block-end: 0;\n  border-radius: 0;\n}\n\n.River--variant-gridline .River__visual.River__visual--position-block-end-inline-start {\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-start;\n  padding: var(--brand-River-variant-gridline-visual-padding);\n  padding-block-end: 0;\n  padding-inline-start: 0;\n  border-radius: 0;\n}\n\n.River--variant-gridline .River__visual.River__visual--position-block-end-inline-end {\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n  padding: var(--brand-River-variant-gridline-visual-padding);\n  padding-block-end: 0;\n  padding-inline-end: 0;\n  border-radius: 0;\n}\n\n.River--variant-gridline .River__visual.River__visual--padding-all {\n  padding: var(--brand-River-variant-gridline-visual-padding);\n}\n\n.River--variant-gridline .River__visual.River__visual--padding-none {\n  padding: 0;\n  border-radius: 0;\n}\n\n.River--variant-gridline\n  .River__visual:is(\n    .River__visual--position-center,\n    .River__visual--position-block-end,\n    .River__visual--position-block-end-inline-start,\n    .River__visual--position-block-end-inline-end\n  )\n  :is(img, picture, video, [data-video-player-container]) {\n  max-width: 100%;\n  width: auto;\n  height: auto;\n  border-radius: 0;\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--padding-all\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: 0;\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--rounded.River__visual--position-center\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--rounded.River__visual--position-block-end\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: var(--brand-borderRadius-large) var(--brand-borderRadius-large) 0 0;\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--rounded.River__visual--position-block-end-inline-start\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: 0;\n  border-start-end-radius: var(--brand-borderRadius-large);\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--rounded.River__visual--position-block-end-inline-end\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: 0;\n  border-start-start-radius: var(--brand-borderRadius-large);\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--rounded.River__visual--padding-all\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--fill-media.River__visual--padding-none\n  :is(img, picture, video, [data-video-player-container]) {\n  width: 100%;\n  max-width: none;\n  height: 100%;\n  object-fit: cover;\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--padding-none\n  :is(img, picture, video, [data-video-player-container]),\n.River--variant-gridline\n  .River__visual.River__visual--rounded.River__visual--padding-none\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: 0;\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"],"mappings":""}