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

package/docs/components/Section/react.md

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

package/docs/index.md

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

package/esm/Section/Section.d.ts

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

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

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

package/esm/Section/Section.js

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

package/esm/Section/Section.js.map

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

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

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

package/esm/Section/Section.module.js

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

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

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

package/esm/index.esm.js

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

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

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

package/lib/Section/Section.d.ts

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