npm - @primer/react-brand - Versions diffs - 0.76.0 → 0.77.0-rc.1d290042 - Mend

@primer/react-brand 0.76.0 → 0.77.0-rc.1d290042

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (409) hide show

package/docs/components/Section/react.md CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.76.0)
+# Primer Brand docs (v0.77.0-rc.1d290042)
-These docs are bundled with `@primer/react-brand@0.76.0` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.77.0-rc.1d290042` 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/docs/introduction/theming.md CHANGED Viewed

@@ -43,6 +43,8 @@ Primer Brand supports the following color modes through a dedicated prop by appl
 | Light | `light`                | `data-color-mode="light"` |
 | Dark  | `dark`                 | `data-color-mode="dark"`  |
+In-product appearance modes such as `dark_dimmed` and `light_high_contrast` resolve internally to Primer Brand's `dark` or `light` defaults. The resolved value is returned by `useTheme().colorMode` and applied to `data-color-mode`.
 The `ThemeProvider` applies the data attributes and handles state-changes internally.
 **`ThemeProvider` will apply `light` mode by default if the `colorMode` is not specified. This is recommended for top-level placement.**

package/esm/Section/Section.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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'\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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":""}
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-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/ThemeProvider/ThemeProvider.d.ts CHANGED Viewed

@@ -4,9 +4,10 @@ export declare enum ColorModesEnum {
     DARK = "dark",
     AUTO = "auto"
 }
-export type ColorMode = `${ColorModesEnum}`;
+export type ColorMode = `${ColorModesEnum}` | (string & {});
+export type ResolvedColorMode = ColorModesEnum.LIGHT | ColorModesEnum.DARK;
 export type ThemeContextProps = {
-    colorMode: ColorMode;
+    colorMode: ResolvedColorMode;
     availableColorModes: ColorModesEnum[];
 };
 export type ThemeProviderProps = {

package/esm/ThemeProvider/ThemeProvider.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,~~EAA8C~~,cAAc,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAA;~~AAE3G~~,oBAAY,cAAc;IACxB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,MAAM,MAAM,SAAS,GAAG,GAAG,cAAc,EAAE,CAAA;~~AAE3C~~,MAAM,MAAM,iBAAiB,GAAG;IAI9B,SAAS,EAAE,~~SAAS~~,CAAA;~~IAKpB~~,mBAAmB,EAAE,cAAc,EAAE,CAAA;CACtC,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAA;~~AAIlC~~,eAAO,MAAM,YAAY,kCAGvB,CAAA;AAEF;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAC,SAAuB,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAC,EAAE,iBAAiB,CAAC,kBAAkB,CAAC,~~qBAqBhH~~"}
1	+ {"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAmC,cAAc,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAGhG,oBAAY,cAAc;IACxB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,MAAM,MAAM,SAAS,GAAG,GAAG,cAAc,EAAE,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;AAC3D,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,KAAK,GAAG,cAAc,CAAC,IAAI,CAAA;AAW1E,MAAM,MAAM,iBAAiB,GAAG;IAI9B,SAAS,EAAE,iBAAiB,CAAA;IAK5B,mBAAmB,EAAE,cAAc,EAAE,CAAA;CACtC,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAA;AAGlC,eAAO,MAAM,YAAY,kCAGvB,CAAA;AAEF;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAC,SAAuB,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAC,EAAE,iBAAiB,CAAC,kBAAkB,CAAC,qBAmBhH"}

package/esm/ThemeProvider/ThemeProvider.js CHANGED Viewed

@@ -1,35 +1,38 @@
-import { createContext as e, useEffect as t, useMemo as n, useState as r } from "react";
+import e from "../hooks/useIsomorphicLayoutEffect.js";
+import { createContext as t, useMemo as n, useState as r } from "react";
 import { jsx as i } from "react/jsx-runtime";
 //#region src/ThemeProvider/ThemeProvider.tsx
 var a = /* @__PURE__ */ function(e) {
 	return e.LIGHT = "light", e.DARK = "dark", e.AUTO = "auto", e;
-}({}), o = "light", s = e({
-	colorMode: o,
+}({});
+function o(e) {
+	return e === "dark" || e.startsWith("dark_") ? "dark" : "light";
+}
+var s = "light", c = t({
+	colorMode: s,
 	availableColorModes: Object.values(a)
 });
-function c({ colorMode: e = o, children: c, ...l }) {
-	let [f, p] = r(e), m = n(() => Object.values(a), []);
-	return t(() => (e === "auto" ? p(u()) : f !== e && p(e), d(p)), [
-		e,
-		f,
-		p
-	]), /* @__PURE__ */ i(s.Provider, {
+function l({ colorMode: t = s, children: l, ...u }) {
+	let [p, m] = r(s), h = t === "auto" ? p : o(t), g = n(() => Object.values(a), []);
+	return e(() => {
+		if (t === "auto") return m(d()), f(m);
+	}, [t]), /* @__PURE__ */ i(c.Provider, {
 		value: {
-			colorMode: f,
-			availableColorModes: m
+			colorMode: h,
+			availableColorModes: g
 		},
 		children: /* @__PURE__ */ i("div", {
-			"data-color-mode": f,
-			...l,
-			children: c
+			"data-color-mode": h,
+			...u,
+			children: l
 		})
 	});
 }
-var l = () => window.matchMedia("(prefers-color-scheme: dark)"), u = () => l().matches ? "dark" : "light", d = (e) => {
-	let t = l(), n = (t) => e(t.matches ? "dark" : "light");
+var u = () => window.matchMedia("(prefers-color-scheme: dark)"), d = () => u().matches ? "dark" : "light", f = (e) => {
+	let t = u(), n = (t) => e(t.matches ? "dark" : "light");
 	return t.addEventListener("change", n), () => t.removeEventListener("change", n);
 };
 //#endregion
-export { a as ColorModesEnum, s as ThemeContext, c as ThemeProvider };
+export { a as ColorModesEnum, c as ThemeContext, l as ThemeProvider };
 //# sourceMappingURL=ThemeProvider.js.map

package/esm/ThemeProvider/ThemeProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ThemeProvider.js","names":[],"sources":["../../src/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["import React, {useState, useMemo, ~~useEffect,~~ createContext, HTMLAttributes, PropsWithChildren} from 'react'\n\nexport enum ColorModesEnum {\n LIGHT = 'light',\n DARK = 'dark',\n AUTO = 'auto',\n}\n\nexport type ColorMode = `${ColorModesEnum}`\n\nexport type ThemeContextProps = {\n /\n The active color mode of the parent ThemeProvider.\n /\n colorMode: ~~ColorMode~~\n\n /\n * List of available color modes.\n /\n availableColorModes: ColorModesEnum[]\n}\n\nexport type ThemeProviderProps = {\n colorMode?: ColorMode\n} & HTMLAttributes<HTMLDivElement>\n\nconst defaultMode = ColorModesEnum.LIGHT\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n colorMode: defaultMode,\n availableColorModes: Object.values(ColorModesEnum),\n})\n\n/\n ThemeProvider is used to provide theme-related context to its child components.\n */\nexport function ThemeProvider({colorMode = defaultMode, children, ...rest}: PropsWithChildren<ThemeProviderProps>) {\n const [~~activeMode~~, ~~setActiveMode~~] = useState(colorMode)\n const availableColorModes = useMemo(() => Object.values(ColorModesEnum), [])\n\n ~~useEffect~~(() => {\n if (colorMode ~~===~~ ColorModesEnum.AUTO) {\n ~~setActiveMode(getActiveAutoMode())~~\n ~~} else if~~ (~~activeMode !== colorMode) {\n setActiveMode~~(~~colorMode~~)\n ~~}\n\n~~ return handleSystemPreferenceChange(~~setActiveMode~~)\n }, [colorMode~~, activeMode, setActiveMode~~])\n\n return (\n <ThemeContext.Provider value={{colorMode: activeMode, availableColorModes}}>\n <div data-color-mode={activeMode} {...rest}>\n {children}\n </div>\n </ThemeContext.Provider>\n )\n}\n\nconst queryBrowserPreference = () => window.matchMedia(`(prefers-color-scheme: ${ColorModesEnum.DARK})`)\n\nconst getActiveAutoMode = () => {\n const mediaQueryList: MediaQueryList = queryBrowserPreference()\n return mediaQueryList.matches ? ColorModesEnum.DARK : ColorModesEnum.LIGHT\n}\n\nconst handleSystemPreferenceChange = callback => {\n const mediaQueryList = queryBrowserPreference()\n const changeHandler = event => callback(event.matches ? ColorModesEnum.DARK : ColorModesEnum.LIGHT)\n mediaQueryList.addEventListener('change', changeHandler)\n return () => mediaQueryList.removeEventListener('change', changeHandler)\n}\n"],"mappings":"~~;;;AAEA~~,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,QAAA,SACA,EAAA,OAAA,QACA,EAAA,OAAA;AACF,EAAA,CAAA,CAAA,~~GAoBM~~,IAAA,~~SAEO~~,IAAe,EAAiC;CAC3D,WAAW;CACX,qBAAqB,OAAO,OAAO,CAAc;AACnD,CAAC;AAKD,SAAgB,EAAc,EAAC,eAAY,GAAa,aAAU,GAAG,KAA8C;CACjH,IAAM,CAAC,~~GAAY~~,~~KAAiB~~,~~EAAS~~,CAAS,~~GAChD~~,IAAsB,QAAc,OAAO,OAAO,CAAc,GAAG,CAAC,CAAC;~~CAY3E~~,~~OAVA~~,~~SACM~~,~~MAAA~~,~~SACF~~,~~EAAc~~,EAAkB,CAAC,~~IACxB~~,~~MAAe~~,~~KACxB~~,~~EAAc~~,CAAS,~~GAGlB,EAA6B,CAAa,IAChD;EAAC;EAAW;EAAY;CAAa,~~CAAC,~~GAGvC~~,kBAAC,EAAa,UAAd;EAAuB,OAAO;GAAC,WAAW;GAAY;EAAmB;YACvE,kBAAC,OAAD;GAAK,mBAAiB;GAAY,GAAI;GACnC;EACE,CAAA;CACgB,CAAA;AAE3B;AAEA,IAAM,UAA+B,OAAO,WAAW,8BAAgD,GAEjG,UACmC,EAChC,CAAA,CAAe,UAAA,SAAA,SAGlB,~~KAA+B~~,~~MAAY~~;~~CAC/C~~,IAAM,IAAiB,EAAuB,GACxC,~~KAAgB~~,~~MAAS~~,EAAS,EAAM,UAAA,SAAA,OAAoD;~~CAElG~~,OADA,EAAe,iBAAiB,UAAU,CAAa,SAC1C,EAAe,oBAAoB,UAAU,CAAa;AACzE"}
1	+ {"version":3,"file":"ThemeProvider.js","names":[],"sources":["../../src/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["import React, {useState, useMemo, createContext, HTMLAttributes, PropsWithChildren} from 'react'\nimport useIsomorphicLayoutEffect from '../hooks/useIsomorphicLayoutEffect'\n\nexport enum ColorModesEnum {\n LIGHT = 'light',\n DARK = 'dark',\n AUTO = 'auto',\n}\n\nexport type ColorMode = `${ColorModesEnum}` \| (string & {})\nexport type ResolvedColorMode = ColorModesEnum.LIGHT \| ColorModesEnum.DARK\n\n/*\n Resolves a color mode to the light or dark theme it should use.\n /\nfunction resolveColorMode(mode: string): ResolvedColorMode {\n return mode === ColorModesEnum.DARK \|\| mode.startsWith(`${ColorModesEnum.DARK}_`)\n ? ColorModesEnum.DARK\n : ColorModesEnum.LIGHT\n}\n\nexport type ThemeContextProps = {\n /\n * The active color mode of the parent ThemeProvider.\n /\n colorMode: ResolvedColorMode\n\n /\n * List of available color modes.\n /\n availableColorModes: ColorModesEnum[]\n}\n\nexport type ThemeProviderProps = {\n colorMode?: ColorMode\n} & HTMLAttributes<HTMLDivElement>\n\nconst defaultMode = ColorModesEnum.LIGHT\nexport const ThemeContext = createContext<ThemeContextProps>({\n colorMode: defaultMode,\n availableColorModes: Object.values(ColorModesEnum),\n})\n\n/\n ThemeProvider is used to provide theme-related context to its child components.\n */\nexport function ThemeProvider({colorMode = defaultMode, children, ...rest}: PropsWithChildren<ThemeProviderProps>) {\n const [autoMode, setAutoMode] = useState<ResolvedColorMode>(defaultMode)\n const activeMode = colorMode === ColorModesEnum.AUTO ? autoMode : resolveColorMode(colorMode)\n const availableColorModes = useMemo(() => Object.values(ColorModesEnum), [])\n\n useIsomorphicLayoutEffect(() => {\n if (colorMode !== ColorModesEnum.AUTO) return\n\n setAutoMode(getActiveAutoMode())\n return handleSystemPreferenceChange(setAutoMode)\n }, [colorMode])\n\n return (\n <ThemeContext.Provider value={{colorMode: activeMode, availableColorModes}}>\n <div data-color-mode={activeMode} {...rest}>\n {children}\n </div>\n </ThemeContext.Provider>\n )\n}\n\nconst queryBrowserPreference = () => window.matchMedia(`(prefers-color-scheme: ${ColorModesEnum.DARK})`)\n\nconst getActiveAutoMode = (): ResolvedColorMode => {\n const mediaQueryList: MediaQueryList = queryBrowserPreference()\n return mediaQueryList.matches ? ColorModesEnum.DARK : ColorModesEnum.LIGHT\n}\n\nconst handleSystemPreferenceChange = (callback: (mode: ResolvedColorMode) => void) => {\n const mediaQueryList = queryBrowserPreference()\n const changeHandler = (event: MediaQueryListEvent) =>\n callback(event.matches ? ColorModesEnum.DARK : ColorModesEnum.LIGHT)\n mediaQueryList.addEventListener('change', changeHandler)\n return () => mediaQueryList.removeEventListener('change', changeHandler)\n}\n"],"mappings":";;;;AAGA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,QAAA,SACA,EAAA,OAAA,QACA,EAAA,OAAA;AACF,EAAA,CAAA,CAAA;AAQA,SAAS,EAAiB,GAAiC;CACzD,OAAO,MAAA,UAAgC,EAAK,WAAW,OAAyB,IAAA,SAAA;AAGlF;AAkBA,IAAM,IAAA,SACO,IAAe,EAAiC;CAC3D,WAAW;CACX,qBAAqB,OAAO,OAAO,CAAc;AACnD,CAAC;AAKD,SAAgB,EAAc,EAAC,eAAY,GAAa,aAAU,GAAG,KAA8C;CACjH,IAAM,CAAC,GAAU,KAAe,EAA4B,CAAW,GACjE,IAAa,MAAA,SAAoC,IAAW,EAAiB,CAAS,GACtF,IAAsB,QAAc,OAAO,OAAO,CAAc,GAAG,CAAC,CAAC;CAS3E,OAPA,QAAgC;EAC1B,UAAA,QAGJ,OADA,EAAY,EAAkB,CAAC,GACxB,EAA6B,CAAW;CACjD,GAAG,CAAC,CAAS,CAAC,GAGZ,kBAAC,EAAa,UAAd;EAAuB,OAAO;GAAC,WAAW;GAAY;EAAmB;YACvE,kBAAC,OAAD;GAAK,mBAAiB;GAAY,GAAI;GACnC;EACE,CAAA;CACgB,CAAA;AAE3B;AAEA,IAAM,UAA+B,OAAO,WAAW,8BAAgD,GAEjG,UACmC,EAChC,CAAA,CAAe,UAAA,SAAA,SAGlB,KAAgC,MAAgD;CACpF,IAAM,IAAiB,EAAuB,GACxC,KAAiB,MACrB,EAAS,EAAM,UAAA,SAAA,OAAoD;CAErE,OADA,EAAe,iBAAiB,UAAU,CAAa,SAC1C,EAAe,oBAAoB,UAAU,CAAa;AACzE"}

package/esm/index.esm.js CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__river-shared-module__River___PCP5W{grid-gap:var(--brand-River-spacing-inner);gap:var(--brand-River-spacing-inner);padding-inline:var(--brand-River-spacing-outerInline);padding-block:var(--brand-River-spacing-outerBlock);grid-auto-rows:min-content;display:grid;container-type:inline-size}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX{padding-inline:var(--brand-River-variant-gridline-spacing-outerInline);padding-block:var(--brand-River-variant-gridline-spacing-outerBlock);gap:var(--base-size-32);position:relative}@media screen and (width>=48rem){.Primer_Brand__river-shared-module__River--variant-gridline___e27QX{gap:var(--base-size-28)}}@media screen and (width>=80rem){.Primer_Brand__river-shared-module__River--variant-gridline___e27QX{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__river-shared-module__River--align-center___4igQp{text-align:center}.Primer_Brand__river-shared-module__River__content___udxiD{order:2}.Primer_Brand__river-shared-module__River__visual___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 CHANGED Viewed

@@ -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",