npm - @primer/react-brand - Versions diffs - 0.72.0-rc.44ea78b6 → 0.72.0-rc.4db5fc89 - Mend

@primer/react-brand 0.72.0-rc.44ea78b6 → 0.72.0-rc.4db5fc89

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

package/esm/Card/Card.js CHANGED Viewed

@@ -4,8 +4,8 @@ import { useProvidedRefOrCreate as n } from "../hooks/useRef.js";
 import { Text as r } from "../Text/Text.js";
 import { EyebrowText as i } from "../EyebrowText/EyebrowText.js";
 import { Heading as a } from "../Heading/Heading.js";
-import { Image as o } from "../Image/Image.js";
-import { ExpandableArrow as s } from "../ExpandableArrow/ExpandableArrow.js";
+import { ExpandableArrow as o } from "../ExpandableArrow/ExpandableArrow.js";
+import { Image as s } from "../Image/Image.js";
 import c from "../Link/Link.module.js";
 import { Icon as l } from "../Icon/Icon.js";
 import { Token as u } from "../Token/Token.js";
@@ -24,7 +24,7 @@ var _ = ["default", "minimal"], v = [
 	"default",
 	"subtle",
 	"none"
-], b = ["block-start", "block-end"], x = ["token", "accent-text"], S = t, C = S[0], w = v[0], T = x[0], E = m(({ align: t = "start", onMouseEnter: i, onMouseLeave: a, onFocus: o, onBlur: l, children: u, className: m, ctaText: _ = "Learn more", ctaVariant: v = w, disableAnimation: y = !1, fullWidth: b = !1, href: x, hasBorder: S = !1, leadingVisual: C, style: T, variant: E = "default", backgroundColor: k, ...A }, j) => {
+], b = ["block-start", "block-end"], x = ["token", "accent-text"], S = t, C = S[0], w = v[0], T = x[0], E = m(({ align: t = "start", onMouseEnter: i, onMouseLeave: a, onFocus: s, onBlur: l, children: u, className: m, ctaText: _ = "Learn more", ctaVariant: v = w, disableAnimation: y = !1, fullWidth: b = !1, href: x, hasBorder: S = !1, leadingVisual: C, style: T, variant: E = "default", backgroundColor: k, ...A }, j) => {
 	let M = n(j), N = k ?? (E === "minimal" || v === "arrow" ? "none" : "default"), P;
 	P = u == null ? null : d(u) ? u.props.children ?? null : u;
 	let { cardImage: F, cardIcon: H, cardLabel: U, cardTokensBlockStart: W, cardTokensBlockEnd: G, cardHeading: K, cardDescription: q } = p.Children.toArray(P).reduce((e, t) => (B(t) ? e.cardHeading = p.cloneElement(t, { href: x }) : I(t) ? e.cardImage = t : L(t) ? e.cardIcon = t : R(t) ? e.cardLabel = t : z(t) ? t.props.position === "block-end" ? e.cardTokensBlockEnd = t : e.cardTokensBlockStart = t : V(t) && (e.cardDescription = t), e), {});
@@ -64,7 +64,7 @@ var _ = ["default", "minimal"], v = [
 						})
 					}), Z ? /* @__PURE__ */ h("span", {
 						className: e(f.Card__actionIcon, v === "arrow" && f["Card__actionIcon--arrowOnly"]),
-						children: /* @__PURE__ */ h(s, {
+						children: /* @__PURE__ */ h(o, {
 							className: e(c["Link-arrow"], f["Card--expandableArrow"]),
 							"aria-hidden": "true"
 						})
@@ -87,7 +87,7 @@ function O(t) {
 function k({ className: e, ...t }) {
 	return /* @__PURE__ */ h("div", {
 		className: f.Card__image,
-		children: /* @__PURE__ */ h(o, {
+		children: /* @__PURE__ */ h(s, {
 			className: e,
 			...t
 		})

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

@@ -105,6 +105,11 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
     } & {
         children?: React.ReactNode | undefined;
     }, "ref">) & React.RefAttributes<HTMLParagraphElement>>;
+    ButtonGroup: React.ForwardRefExoticComponent<Omit<Omit<import("..").ButtonGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * @deprecated Use `Hero.ButtonGroup` with `Button` or `ActionMenu` children instead.
+     * This component will be removed in a future release.
+     */
     PrimaryAction: React.ForwardRefExoticComponent<(Omit<{
         as?: "a" | "button";
         href: string;
@@ -120,6 +125,10 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
     } & {
         children?: React.ReactNode | undefined;
     }, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+    /**
+     * @deprecated Use `Hero.ButtonGroup` with `Button` or `ActionMenu` children instead.
+     * This component will be removed in a future release.
+     */
     SecondaryAction: React.ForwardRefExoticComponent<(Omit<{
         as?: "a" | "button";
         href: string;
@@ -136,7 +145,8 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
         children?: React.ReactNode | undefined;
     }, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
     Image: React.ForwardRefExoticComponent<(Omit<{
-        position?: import("./HeroContext").HeroMediaPositions;
+        position?: import("./HeroContext").HeroMediaPosition;
+        padding?: import("./HeroContext").HeroMediaPadding;
         enableBorder?: boolean;
     } & React.ImgHTMLAttributes<HTMLImageElement> & BaseProps<HTMLImageElement> & {
         src: string;
@@ -149,7 +159,8 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
         as?: "img";
         srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, "srcSet">;
     }, "ref"> | Omit<{
-        position?: import("./HeroContext").HeroMediaPositions;
+        position?: import("./HeroContext").HeroMediaPosition;
+        padding?: import("./HeroContext").HeroMediaPadding;
         enableBorder?: boolean;
     } & React.ImgHTMLAttributes<HTMLImageElement> & BaseProps<HTMLImageElement> & {
         src: string;
@@ -167,7 +178,8 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
         srcSet?: undefined;
     }, "ref">) & React.RefAttributes<HTMLImageElement>>;
     Video: React.ForwardRefExoticComponent<(Omit<{
-        position?: import("./HeroContext").HeroMediaPositions;
+        position?: import("./HeroContext").HeroMediaPosition;
+        padding?: import("./HeroContext").HeroMediaPadding;
         enableBorder?: boolean;
         'data-testid'?: string;
     } & BaseProps<HTMLDivElement> & {
@@ -177,7 +189,8 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
         posterAltText?: never;
         posterTitle?: never;
     }, "ref"> | Omit<{
-        position?: import("./HeroContext").HeroMediaPositions;
+        position?: import("./HeroContext").HeroMediaPosition;
+        padding?: import("./HeroContext").HeroMediaPadding;
         enableBorder?: boolean;
         'data-testid'?: string;
     } & BaseProps<HTMLDivElement> & {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../src/Hero/Hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAK7E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAInD,OAAO,KAAK,~~EAA2B~~,SAAS,EAAE,WAAW,EAAC,MAAM,eAAe,CAAA;~~AAanF~~;;GAEG;AACH,OAAO,2FAA2F,CAAA;AAkBlG,MAAM,MAAM,SAAS,GAAG,SAAS,CAAC,WAAW,CAAC,GAAG;IAC/C,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,mBAAmB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACzC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC1D,oBAAoB,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC3C,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;~~AA8QD~~,eAAO,MAAM,IAAI~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUf~~,CAAA"}
1	+ {"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../src/Hero/Hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAK7E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAInD,OAAO,KAAK,EAA0B,SAAS,EAAE,WAAW,EAAC,MAAM,eAAe,CAAA;AAclF;;GAEG;AACH,OAAO,2FAA2F,CAAA;AAkBlG,MAAM,MAAM,SAAS,GAAG,SAAS,CAAC,WAAW,CAAC,GAAG;IAC/C,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,mBAAmB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACzC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC1D,oBAAoB,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC3C,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAqTD,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIf;;;OAGG;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOH,CAAA"}

package/esm/Hero/Hero.js CHANGED Viewed

@@ -1,23 +1,24 @@
 import e from "../node_modules/clsx/dist/clsx.js";
 import { Grid as t } from "../Grid/Grid.js";
-import { AnimationProvider as ee } from "../animation/AnimationProvider/AnimationProvider.js";
-import { Stack as n } from "../Stack/Stack.js";
-import { Box as te } from "../Box/Box.js";
-import { HeroContext as ne, heroMediaInlinePositions as r } from "./HeroContext.js";
-import i from "./Hero.module.js";
-import { HeroLabel as a } from "./sub-components/HeroLabel.js";
-import { HeroHeading as o } from "./sub-components/HeroHeading.js";
-import { HeroDescription as s } from "./sub-components/HeroDescription.js";
-import { HeroImage as c } from "./sub-components/HeroImage.js";
-import { HeroVideo as l } from "./sub-components/HeroVideo.js";
-import { HeroEyebrow as u } from "./sub-components/HeroEyebrow.js";
-import { HeroPrimaryAction as d } from "./sub-components/HeroPrimaryAction.js";
-import { HeroSecondaryAction as f } from "./sub-components/HeroSecondaryAction.js";
+import { AnimationProvider as n } from "../animation/AnimationProvider/AnimationProvider.js";
+import { Stack as r } from "../Stack/Stack.js";
+import { Box as ee } from "../Box/Box.js";
+import { HeroContext as i, HeroMediaInlinePositionOptions as a } from "./HeroContext.js";
+import o from "./Hero.module.js";
+import { HeroLabel as s } from "./sub-components/HeroLabel.js";
+import { HeroHeading as c } from "./sub-components/HeroHeading.js";
+import { HeroDescription as l } from "./sub-components/HeroDescription.js";
+import { HeroButtonGroup as u } from "./sub-components/HeroButtonGroup.js";
+import { HeroImage as d } from "./sub-components/HeroImage.js";
+import { HeroVideo as f } from "./sub-components/HeroVideo.js";
+import { HeroEyebrow as p } from "./sub-components/HeroEyebrow.js";
+import { HeroPrimaryAction as m } from "./sub-components/HeroPrimaryAction.js";
+import { HeroSecondaryAction as h } from "./sub-components/HeroSecondaryAction.js";
 import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/hero/base-BDi-g8vJ.css';/* empty css                                                                                     */
-import p, { Fragment as m, forwardRef as h, useMemo as g } from "react";
-import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+import g, { Fragment as te, forwardRef as _, useMemo as v } from "react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
 //#region src/Hero/Hero.tsx
-var b = {
+var S = {
 	root: "Hero",
 	get video() {
 		return `${this.root}-video`;
@@ -28,10 +29,11 @@ var b = {
 	get imageWrapper() {
 		return `${this.root}-imageWrapper`;
 	}
-}, x = h(({ className: h, align: x = "start", children: S, imageContainerClassName: C, imageContainerStyle: w, imageContainerRef: T, imageBackgroundColor: E, variant: D = "default", trailingComponent: O, enableAnimation: k = !1, "data-testid": A, ...j }, M) => {
-	let { HeroActions: N, HeroChildren: re, HeroImageChild: P, HeroVideoChild: F, HeroHeaderChildren: I, HeroDescriptionChild: L } = g(() => {
-		let e = p.Children.toArray(S).reduce((e, t) => (p.isValidElement(t) && (t.type === d || t.type === f ? e.HeroActions.push(t) : t.type === c ? e.HeroImageChild = t : t.type === l ? e.HeroVideoChild = t : (e.HeroChildren.push(t), t.type === a || t.type === u || t.type === o ? e.HeroHeaderChildren.push(t) : t.type === s && (e.HeroDescriptionChild = t))), e), {
+}, C = _(({ className: _, align: C = "start", children: w, imageContainerClassName: T, imageContainerStyle: E, imageContainerRef: D, imageBackgroundColor: O, variant: k = "default", trailingComponent: A, enableAnimation: j = !1, "data-testid": ne, ...M }, N) => {
+	let { HeroActions: P, HeroButtonGroupChild: re, HeroChildren: ie, HeroImageChild: F, HeroVideoChild: I, HeroHeaderChildren: L, HeroDescriptionChild: R } = v(() => {
+		let e = g.Children.toArray(w).reduce((e, t) => (g.isValidElement(t) && (t.type === m || t.type === h ? e.HeroActions.push(t) : t.type === u ? e.HeroButtonGroupChild = t : t.type === d ? e.HeroImageChild = t : t.type === f ? e.HeroVideoChild = t : (e.HeroChildren.push(t), t.type === s || t.type === p || t.type === c ? e.HeroHeaderChildren.push(t) : t.type === l && (e.HeroDescriptionChild = t))), e), {
 			HeroActions: [],
+			HeroButtonGroupChild: void 0,
 			HeroChildren: [],
 			HeroImageChild: void 0,
 			HeroVideoChild: void 0,
@@ -39,138 +41,141 @@ var b = {
 			HeroDescriptionChild: void 0
 		});
 		return e.HeroImageChild && e.HeroVideoChild && (e.HeroVideoChild = void 0), e;
-	}, [S]), R = P?.props.position || F?.props.position, z = D === "gridline-expressive" && R?.startsWith("inline-") ? (process.env.NODE_ENV !== "production" && console.warn(`Hero: "gridline-expressive" variant does not support "${R}" position. Defaulting to "block-end".`), "block-end") : R || "block-end", ie = P?.props.enableBorder ?? F?.props.enableBorder ?? !0, B = r.includes(z), V = B ? z : void 0, H = P || F, U = D === "gridline", W = D === "gridline-expressive", G = z === "block-end" || z === "block-end-padded", K = z === "block-end-padded", q = W && x === "center", J = q ? "start" : x;
+	}, [w]), z = F?.props.position || I?.props.position, B = k === "gridline-expressive" && z?.startsWith("inline-") ? (process.env.NODE_ENV !== "production" && console.warn(`Hero: "gridline-expressive" variant does not support "${z}" position. Defaulting to "block-end".`), "block-end") : z || "block-end", ae = F?.props.enableBorder ?? I?.props.enableBorder ?? !0, V = F?.props.padding ?? I?.props.padding ?? "default", H = a.includes(B), U = F || I, W = k === "gridline", G = k === "gridline-expressive", K = B === "block-end";
+	k === "default" && V !== "default" && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn(`Hero: media padding is only supported by the "gridline" and "gridline-expressive" variants; ignoring padding="${V}".`);
+	let q = G && C === "center", J = q ? "start" : C;
 	q && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("Hero: the \"gridline-expressive\" variant does not support align=\"center\"; using \"start\" instead.");
-	let ae = (U || W) && k ? ee : m, oe = (U || W) && k ? {
+	let oe = (W || G) && j ? n : te, se = (W || G) && j ? {
 		autoStaggerChildren: !1,
 		animationTrigger: "immediate"
-	} : {}, Y = (U || W) && G, X = U && B, se = P ? i["Hero--layout-image"] : i["Hero--layout-default"], Z = z === "inline-start" || z === "inline-start-padded", Q = (e) => O && /* @__PURE__ */ v(te, {
+	} : {}, Y = (W || G) && K, X = W && H, ce = F ? o["Hero--layout-image"] : o["Hero--layout-default"], Z = B === "inline-start", Q = (e) => A && /* @__PURE__ */ b(ee, {
 		animate: e ? {
 			variant: "slide-in-up",
 			delay: 1e3,
 			duration: 1e3
 		} : void 0,
-		children: /* @__PURE__ */ v("div", {
-			className: i["Hero-trailing"],
-			children: /* @__PURE__ */ v(O, {})
+		children: /* @__PURE__ */ b("div", {
+			className: o["Hero-trailing"],
+			children: /* @__PURE__ */ b(A, {})
 		})
-	}), $ = () => N.length > 0 && /* @__PURE__ */ v("div", {
-		className: i["Hero-actions"],
-		children: N
-	});
-	return /* @__PURE__ */ v(ae, {
-		...oe,
-		children: /* @__PURE__ */ v(ne.Provider, {
+	}), $ = () => /* @__PURE__ */ x(y, { children: [re, P.length > 0 && /* @__PURE__ */ b("div", {
+		className: o["Hero-actions"],
+		children: P
+	})] });
+	return /* @__PURE__ */ b(oe, {
+		...se,
+		children: /* @__PURE__ */ b(i.Provider, {
 			value: {
-				imagePosition: z,
-				variant: D,
+				imagePosition: B,
+				variant: k,
 				align: J,
-				hasInlineMedia: B,
-				enableAnimation: k
+				hasInlineMedia: H,
+				enableAnimation: j
 			},
-			children: /* @__PURE__ */ y("section", {
-				className: e(i.Hero, i[`Hero--variant-${D}`], !B && i[`Hero--align-${J}`], se, (P || F) && i[`Hero--image-pos-${z}`], (P || F) && B && i["Hero--image-pos-inline"], X && i["Hero--variant-inline-gridline"], h),
-				ref: M,
+			children: /* @__PURE__ */ x("section", {
+				className: e(o.Hero, o[`Hero--variant-${k}`], !H && o[`Hero--align-${J}`], ce, (F || I) && o[`Hero--image-pos-${B}`], (F || I) && H && o["Hero--image-pos-inline"], X && o["Hero--variant-inline-gridline"], _),
+				ref: N,
 				"aria-labelledby": "hero-section-brand-heading",
-				"data-testid": A || b.root,
-				...j,
-				children: [/* @__PURE__ */ v(t, {
+				"data-testid": ne || S.root,
+				...M,
+				children: [/* @__PURE__ */ b(t, {
 					fullWidth: !Y && !X,
-					"data-testid": b.grid,
-					className: e(i["Hero-grid"], i[`Hero-grid--${z}`], Y && !W && i["Hero-grid--contained"], X && i["Hero-grid--bordered-inline"], W && i["Hero-grid--expressive"]),
-					children: W ? /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(t.Column, {
+					"data-testid": S.grid,
+					className: e(o["Hero-grid"], o[`Hero-grid--${B}`], Y && !G && o["Hero-grid--contained"], X && o["Hero-grid--bordered-inline"], G && o["Hero-grid--expressive"]),
+					children: G ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(t.Column, {
 						span: {
 							medium: 12,
-							large: L ? 7 : 6
+							large: R ? 7 : 6
 						},
-						className: i["Hero-expressive-header-column"],
-						children: /* @__PURE__ */ v(n, {
+						className: o["Hero-expressive-header-column"],
+						children: /* @__PURE__ */ b(r, {
 							direction: "vertical",
 							gap: "none",
 							padding: "none",
 							alignItems: "flex-start",
-							children: I
+							children: L
 						})
-					}), /* @__PURE__ */ v(t.Column, {
+					}), /* @__PURE__ */ b(t.Column, {
 						span: {
 							medium: 12,
-							large: L ? 5 : 6
+							large: R ? 5 : 6
 						},
-						className: i["Hero-expressive-body-column"],
-						children: /* @__PURE__ */ y(n, {
+						className: o["Hero-expressive-body-column"],
+						children: /* @__PURE__ */ x(r, {
 							direction: "vertical",
 							gap: "none",
 							padding: "none",
 							alignItems: "flex-start",
 							children: [
-								L,
+								R,
 								$(),
-								Q(k)
+								Q(j)
 							]
 						})
-					})] }) : /* @__PURE__ */ y(_, { children: [
-						Z && H && !Y && /* @__PURE__ */ v(t.Column, {
-							ref: T,
+					})] }) : /* @__PURE__ */ x(y, { children: [
+						Z && U && !Y && /* @__PURE__ */ b(t.Column, {
+							ref: D,
 							span: { large: 6 },
-							className: e(E && i[`Hero-imageContainer--bg-${E}`], X && V?.includes("padded") && i["Hero-imageContainer--inline-bg-padded"], X && i["Hero-imageContainer--inline-bordered"]),
-							children: /* @__PURE__ */ v("div", {
-								className: e(i["Hero-mediaContainer"], C),
-								style: w,
-								children: H
+							className: e(O && V !== "none" && o[`Hero-imageContainer--bg-${O}`], X && V === "all" && o["Hero-imageContainer--inline-padding-all"], X && V === "none" && o["Hero-imageContainer--inline-padding-none"], X && o["Hero-imageContainer--inline-bordered"]),
+							children: /* @__PURE__ */ b("div", {
+								className: e(o["Hero-mediaContainer"], T),
+								style: E,
+								children: U
 							})
 						}),
-						/* @__PURE__ */ v(t.Column, {
-							span: { large: H && B ? 6 : 12 },
-							children: /* @__PURE__ */ y(n, {
-								className: e(X && i["Hero-text-column--inline-gridline"], X && i["Hero-contentColumn--bordered-inline"]),
+						/* @__PURE__ */ b(t.Column, {
+							span: { large: U && H ? 6 : 12 },
+							children: /* @__PURE__ */ x(r, {
+								className: e(X && o["Hero-text-column--inline-gridline"], X && o["Hero-contentColumn--bordered-inline"]),
 								direction: "vertical",
 								gap: "none",
 								padding: "none",
-								alignItems: B || J === "start" ? "flex-start" : "center",
-								justifyContent: B ? void 0 : J === "start" ? "flex-start" : "center",
+								alignItems: H || J === "start" ? "flex-start" : "center",
+								justifyContent: H ? void 0 : J === "start" ? "flex-start" : "center",
 								children: [
-									re,
+									ie,
 									$(),
-									Q(U && k)
+									Q(W && j)
 								]
 							})
 						}),
-						!Z && H && !Y && /* @__PURE__ */ v(t.Column, {
-							ref: T,
-							span: { large: B ? 6 : 12 },
-							className: e(E && i[`Hero-imageContainer--bg-${E}`], X && V?.includes("padded") && i["Hero-imageContainer--inline-bg-padded"], X && i["Hero-imageContainer--inline-bordered"]),
-							children: /* @__PURE__ */ v("div", {
-								className: e(i["Hero-mediaContainer"], C),
-								style: w,
-								children: H
+						!Z && U && !Y && /* @__PURE__ */ b(t.Column, {
+							ref: D,
+							span: { large: H ? 6 : 12 },
+							className: e(O && V !== "none" && o[`Hero-imageContainer--bg-${O}`], X && V === "all" && o["Hero-imageContainer--inline-padding-all"], X && V === "none" && o["Hero-imageContainer--inline-padding-none"], X && o["Hero-imageContainer--inline-bordered"]),
+							children: /* @__PURE__ */ b("div", {
+								className: e(o["Hero-mediaContainer"], T),
+								style: E,
+								children: U
 							})
 						})
 					] })
-				}), H && Y && /* @__PURE__ */ v("div", {
-					ref: T,
-					"data-testid": b.imageWrapper,
-					className: e(i["Hero-imageWrapper"], K && i["Hero-imageWrapper--block-end-padded"], C, E && i[`Hero-imageWrapper--bg-${E}`]),
-					style: w,
-					children: /* @__PURE__ */ v("div", {
-						className: e(i["Hero-imageWrapper-inner"], K && i["Hero-imageWrapper-inner--padded"], ie && i["Hero-imageWrapper-inner--with-gridline"]),
-						children: H
+				}), U && Y && /* @__PURE__ */ b("div", {
+					ref: D,
+					"data-testid": S.imageWrapper,
+					className: e(o["Hero-imageWrapper"], T, O && V !== "none" && o[`Hero-imageWrapper--bg-${O}`], V === "none" && o["Hero-imageWrapper--padding-none"]),
+					style: E,
+					children: /* @__PURE__ */ b("div", {
+						className: e(o["Hero-imageWrapper-inner"], V === "all" && o["Hero-imageWrapper-inner--padding-all"], V === "none" && o["Hero-imageWrapper-inner--padding-none"], ae && o["Hero-imageWrapper-inner--with-gridline"]),
+						children: U
 					})
 				})]
 			})
 		})
 	});
-}), S = Object.assign(x, {
-	Heading: o,
-	Description: s,
-	PrimaryAction: d,
-	SecondaryAction: f,
-	Image: c,
-	Video: l,
-	Label: a,
-	Eyebrow: u,
-	testIds: b
+}), w = Object.assign(C, {
+	Heading: c,
+	Description: l,
+	ButtonGroup: u,
+	PrimaryAction: m,
+	SecondaryAction: h,
+	Image: d,
+	Video: f,
+	Label: s,
+	Eyebrow: p,
+	testIds: S
 });
 //#endregion
-export { S as Hero };
+export { w as Hero };
 //# sourceMappingURL=Hero.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Hero.js","names":[],"sources":["../../src/Hero/Hero.tsx"],"sourcesContent":["import React, {forwardRef, Fragment, PropsWithChildren, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport {Grid} from '../Grid'\nimport {Stack} from '../Stack'\nimport {Box} from '../Box'\nimport type {BaseProps} from '../component-helpers'\nimport {AnimationProvider} from '../animation'\n\nimport {HeroContext, heroMediaInlinePositions} from './HeroContext'\nimport type {HeroMediaInlinePositions, HeroAlign, HeroVariant} from './HeroContext'\nimport {\n HeroLabel,\n HeroHeading,\n HeroDescription,\n HeroImage,\n HeroVideo,\n HeroEyebrow,\n HeroPrimaryAction,\n HeroSecondaryAction,\n} from './sub-components'\nimport type {HeroImageProps, HeroVideoProps} from './sub-components'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/hero/base.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './Hero.module.css'\n\nconst testIds = {\n root: 'Hero',\n get video() {\n return `${this.root}-video`\n },\n get grid() {\n return `${this.root}-grid`\n },\n get imageWrapper() {\n return `${this.root}-imageWrapper`\n },\n}\n\nexport type HeroProps = BaseProps<HTMLElement> & {\n align?: HeroAlign\n imageContainerClassName?: string\n imageContainerStyle?: React.CSSProperties\n imageContainerRef?: React.RefObject<HTMLDivElement \| null>\n imageBackgroundColor?: 'default' \| 'subtle'\n variant?: HeroVariant\n enableAnimation?: boolean\n /\n Escape-hatch for inserting custom React components.\n * Warning:\n * This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n * Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n /\n trailingComponent?: React.FunctionComponent\n 'data-testid'?: string\n}\n\nconst Root = forwardRef<HTMLElement, PropsWithChildren<HeroProps>>(\n (\n {\n className,\n align: alignProp = 'start',\n children,\n imageContainerClassName,\n imageContainerStyle,\n imageContainerRef,\n imageBackgroundColor,\n variant = 'default',\n trailingComponent: TrailingComponent,\n enableAnimation = false,\n 'data-testid': testId,\n ...rest\n },\n ref,\n ) => {\n const {HeroActions, HeroChildren, HeroImageChild, HeroVideoChild, HeroHeaderChildren, HeroDescriptionChild} =\n useMemo(() => {\n const result = React.Children.toArray(children).reduce<{\n HeroActions: React.ReactElement[]\n HeroImageChild?: React.ReactElement<HeroImageProps>\n HeroVideoChild?: React.ReactElement<HeroVideoProps>\n HeroChildren: React.ReactElement[]\n HeroHeaderChildren: React.ReactElement[]\n HeroDescriptionChild?: React.ReactElement\n }>(\n (acc, child) => {\n if (React.isValidElement(child)) {\n if (child.type === HeroPrimaryAction \|\| child.type === HeroSecondaryAction) {\n acc.HeroActions.push(child)\n } else if (child.type === HeroImage) {\n acc.HeroImageChild = child as React.ReactElement<HeroImageProps>\n } else if (child.type === HeroVideo) {\n acc.HeroVideoChild = child as React.ReactElement<HeroVideoProps>\n } else {\n acc.HeroChildren.push(child)\n if (child.type === HeroLabel \|\| child.type === HeroEyebrow \|\| child.type === HeroHeading) {\n acc.HeroHeaderChildren.push(child)\n } else if (child.type === HeroDescription) {\n acc.HeroDescriptionChild = child\n }\n }\n }\n return acc\n },\n {\n HeroActions: [],\n HeroChildren: [],\n HeroImageChild: undefined,\n HeroVideoChild: undefined,\n HeroHeaderChildren: [],\n HeroDescriptionChild: undefined,\n },\n )\n\n // Prefer Hero.Image - don't show both\n if (result.HeroImageChild && result.HeroVideoChild) {\n result.HeroVideoChild = undefined\n }\n\n return result\n }, [children])\n\n const mediaPositionProp = HeroImageChild?.props.position \|\| HeroVideoChild?.props.position\n\n const mediaPosition = (() => {\n if (variant === 'gridline-expressive' && mediaPositionProp?.startsWith('inline-')) {\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.warn(\n `Hero: \"gridline-expressive\" variant does not support \"${mediaPositionProp}\" position. Defaulting to \"block-end\".`,\n )\n }\n return 'block-end'\n }\n return mediaPositionProp \|\| 'block-end'\n })()\n const mediaWrapperHasBorder = HeroImageChild?.props.enableBorder ?? HeroVideoChild?.props.enableBorder ?? true\n const hasInlineMedia = heroMediaInlinePositions.includes(mediaPosition as HeroMediaInlinePositions)\n const inlineMediaPosition = hasInlineMedia ? mediaPosition : undefined\n const mediaChild = HeroImageChild \|\| HeroVideoChild\n const isGridline = variant === 'gridline'\n const isGridlineExpressive = variant === 'gridline-expressive'\n const isBlockEndPosition = mediaPosition === 'block-end' \|\| mediaPosition === 'block-end-padded'\n const isBlockEndPadded = mediaPosition === 'block-end-padded'\n\n const isInvalidGridlineAlignment = isGridlineExpressive && alignProp === 'center'\n const align: HeroAlign = isInvalidGridlineAlignment ? 'start' : alignProp\n\n if (isInvalidGridlineAlignment && (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test')) {\n // eslint-disable-next-line no-console\n console.warn('Hero: the \"gridline-expressive\" variant does not support align=\"center\"; using \"start\" instead.')\n }\n\n const Tag = (isGridline \|\| isGridlineExpressive) && enableAnimation ? AnimationProvider : Fragment\n const tagProps =\n (isGridline \|\| isGridlineExpressive) && enableAnimation\n ? {\n autoStaggerChildren: false,\n animationTrigger: 'immediate' as const,\n }\n : {}\n\n const useContainedLayout = (isGridline \|\| isGridlineExpressive) && isBlockEndPosition\n const useInlineGridline = isGridline && hasInlineMedia\n\n const heroLayoutClass = HeroImageChild ? styles['Hero--layout-image'] : styles['Hero--layout-default']\n const isInlineStart = mediaPosition === 'inline-start' \|\| mediaPosition === 'inline-start-padded'\n\n const renderTrailingComponent = (shouldAnimate: boolean) =>\n TrailingComponent && (\n <Box animate={shouldAnimate ? {variant: 'slide-in-up' as const, delay: 1000, duration: 1000} : undefined}>\n <div className={styles['Hero-trailing']}>\n <TrailingComponent />\n </div>\n </Box>\n )\n\n const renderActions = () => HeroActions.length > 0 && <div className={styles['Hero-actions']}>{HeroActions}</div>\n\n return (\n <Tag {...tagProps}>\n <HeroContext.Provider value={{imagePosition: mediaPosition, variant, align, hasInlineMedia, enableAnimation}}>\n <section\n className={clsx(\n styles.Hero,\n styles[`Hero--variant-${variant}`],\n !hasInlineMedia && styles[`Hero--align-${align}`],\n heroLayoutClass,\n (HeroImageChild \|\| HeroVideoChild) && styles[`Hero--image-pos-${mediaPosition}`],\n (HeroImageChild \|\| HeroVideoChild) && hasInlineMedia && styles['Hero--image-pos-inline'],\n useInlineGridline && styles['Hero--variant-inline-gridline'],\n className,\n )}\n ref={ref}\n aria-labelledby=\"hero-section-brand-heading\"\n data-testid={testId \|\| testIds.root}\n {...rest}\n >\n <Grid\n fullWidth={!useContainedLayout && !useInlineGridline}\n data-testid={testIds.grid}\n className={clsx(\n styles['Hero-grid'],\n styles[`Hero-grid--${mediaPosition}`],\n useContainedLayout && !isGridlineExpressive && styles['Hero-grid--contained'],\n useInlineGridline && styles['Hero-grid--bordered-inline'],\n isGridlineExpressive && styles['Hero-grid--expressive'],\n )}\n >\n {isGridlineExpressive ? (\n <>\n {/ Expressive variant: header column (left) /}\n <Grid.Column\n span={{medium: 12, large: HeroDescriptionChild ? 7 : 6}}\n className={styles['Hero-expressive-header-column']}\n >\n <Stack direction=\"vertical\" gap=\"none\" padding=\"none\" alignItems=\"flex-start\">\n {HeroHeaderChildren}\n </Stack>\n </Grid.Column>\n {/ Expressive variant: body column (right) /}\n <Grid.Column\n span={{medium: 12, large: HeroDescriptionChild ? 5 : 6}}\n className={styles['Hero-expressive-body-column']}\n >\n <Stack direction=\"vertical\" gap=\"none\" padding=\"none\" alignItems=\"flex-start\">\n {HeroDescriptionChild}\n {renderActions()}\n {renderTrailingComponent(enableAnimation)}\n </Stack>\n </Grid.Column>\n </>\n ) : (\n <>\n {/ Standard GridLine variant: text column */}\n {isInlineStart && mediaChild && !useContainedLayout && (\n <Grid.Column\n ref={imageContainerRef}\n span={{large: 6}}\n className={clsx(\n imageBackgroundColor && styles[`Hero-imageContainer--bg-${imageBackgroundColor}`],\n useInlineGridline &&\n inlineMediaPosition?.includes('padded') &&\n styles['Hero-imageContainer--inline-bg-padded'],\n useInlineGridline && styles['Hero-imageContainer--inline-bordered'],\n )}\n >\n <div\n className={clsx(styles['Hero-mediaContainer'], imageContainerClassName)}\n style={imageContainerStyle}\n >\n {mediaChild}\n </div>\n </Grid.Column>\n )}\n <Grid.Column span={{large: mediaChild && hasInlineMedia ? 6 : 12}}>\n <Stack\n className={clsx(\n useInlineGridline && styles['Hero-text-column--inline-gridline'],\n useInlineGridline && styles['Hero-contentColumn--bordered-inline'],\n )}\n direction=\"vertical\"\n gap=\"none\"\n padding=\"none\"\n alignItems={hasInlineMedia ? 'flex-start' : align === 'start' ? 'flex-start' : 'center'}\n justifyContent={hasInlineMedia ? undefined : align === 'start' ? 'flex-start' : 'center'}\n >\n {HeroChildren}\n {renderActions()}\n {renderTrailingComponent(isGridline && enableAnimation)}\n </Stack>\n </Grid.Column>\n {!isInlineStart && mediaChild && !useContainedLayout && (\n <Grid.Column\n ref={imageContainerRef}\n span={{large: hasInlineMedia ? 6 : 12}}\n className={clsx(\n imageBackgroundColor && styles[`Hero-imageContainer--bg-${imageBackgroundColor}`],\n useInlineGridline &&\n inlineMediaPosition?.includes('padded') &&\n styles['Hero-imageContainer--inline-bg-padded'],\n useInlineGridline && styles['Hero-imageContainer--inline-bordered'],\n )}\n >\n <div\n className={clsx(styles['Hero-mediaContainer'], imageContainerClassName)}\n style={imageContainerStyle}\n >\n {mediaChild}\n </div>\n </Grid.Column>\n )}\n </>\n )}\n </Grid>\n {mediaChild && useContainedLayout && (\n <div\n ref={imageContainerRef}\n data-testid={testIds.imageWrapper}\n className={clsx(\n styles['Hero-imageWrapper'],\n isBlockEndPadded && styles['Hero-imageWrapper--block-end-padded'],\n imageContainerClassName,\n imageBackgroundColor && styles[`Hero-imageWrapper--bg-${imageBackgroundColor}`],\n )}\n style={imageContainerStyle}\n >\n <div\n className={clsx(\n styles['Hero-imageWrapper-inner'],\n isBlockEndPadded && styles['Hero-imageWrapper-inner--padded'],\n mediaWrapperHasBorder && styles['Hero-imageWrapper-inner--with-gridline'],\n )}\n >\n {mediaChild}\n </div>\n </div>\n )}\n </section>\n </HeroContext.Provider>\n </Tag>\n )\n },\n)\n\nexport const Hero = Object.assign(Root, {\n Heading: HeroHeading,\n Description: HeroDescription,\n PrimaryAction: HeroPrimaryAction,\n SecondaryAction: HeroSecondaryAction,\n Image: HeroImage,\n Video: HeroVideo,\n Label: HeroLabel,\n Eyebrow: HeroEyebrow,\n testIds,\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"Hero.js","names":[],"sources":["../../src/Hero/Hero.tsx"],"sourcesContent":["import React, {forwardRef, Fragment, PropsWithChildren, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport {Grid} from '../Grid'\nimport {Stack} from '../Stack'\nimport {Box} from '../Box'\nimport type {BaseProps} from '../component-helpers'\nimport {AnimationProvider} from '../animation'\n\nimport {HeroContext, HeroMediaInlinePositionOptions} from './HeroContext'\nimport type {HeroMediaInlinePosition, HeroAlign, HeroVariant} from './HeroContext'\nimport {\n HeroLabel,\n HeroHeading,\n HeroDescription,\n HeroButtonGroup,\n HeroImage,\n HeroVideo,\n HeroEyebrow,\n HeroPrimaryAction,\n HeroSecondaryAction,\n} from './sub-components'\nimport type {HeroImageProps, HeroVideoProps} from './sub-components'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/hero/base.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './Hero.module.css'\n\nconst testIds = {\n root: 'Hero',\n get video() {\n return `${this.root}-video`\n },\n get grid() {\n return `${this.root}-grid`\n },\n get imageWrapper() {\n return `${this.root}-imageWrapper`\n },\n}\n\nexport type HeroProps = BaseProps<HTMLElement> & {\n align?: HeroAlign\n imageContainerClassName?: string\n imageContainerStyle?: React.CSSProperties\n imageContainerRef?: React.RefObject<HTMLDivElement \| null>\n imageBackgroundColor?: 'default' \| 'subtle'\n variant?: HeroVariant\n enableAnimation?: boolean\n /\n Escape-hatch for inserting custom React components.\n * Warning:\n * This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n * Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n /\n trailingComponent?: React.FunctionComponent\n 'data-testid'?: string\n}\n\nconst Root = forwardRef<HTMLElement, PropsWithChildren<HeroProps>>(\n (\n {\n className,\n align: alignProp = 'start',\n children,\n imageContainerClassName,\n imageContainerStyle,\n imageContainerRef,\n imageBackgroundColor,\n variant = 'default',\n trailingComponent: TrailingComponent,\n enableAnimation = false,\n 'data-testid': testId,\n ...rest\n },\n ref,\n ) => {\n const {\n HeroActions,\n HeroButtonGroupChild,\n HeroChildren,\n HeroImageChild,\n HeroVideoChild,\n HeroHeaderChildren,\n HeroDescriptionChild,\n } = useMemo(() => {\n const result = React.Children.toArray(children).reduce<{\n HeroActions: React.ReactElement[]\n HeroButtonGroupChild?: React.ReactElement\n HeroImageChild?: React.ReactElement<HeroImageProps>\n HeroVideoChild?: React.ReactElement<HeroVideoProps>\n HeroChildren: React.ReactElement[]\n HeroHeaderChildren: React.ReactElement[]\n HeroDescriptionChild?: React.ReactElement\n }>(\n (acc, child) => {\n if (React.isValidElement(child)) {\n if (child.type === HeroPrimaryAction \|\| child.type === HeroSecondaryAction) {\n acc.HeroActions.push(child)\n } else if (child.type === HeroButtonGroup) {\n acc.HeroButtonGroupChild = child\n } else if (child.type === HeroImage) {\n acc.HeroImageChild = child as React.ReactElement<HeroImageProps>\n } else if (child.type === HeroVideo) {\n acc.HeroVideoChild = child as React.ReactElement<HeroVideoProps>\n } else {\n acc.HeroChildren.push(child)\n if (child.type === HeroLabel \|\| child.type === HeroEyebrow \|\| child.type === HeroHeading) {\n acc.HeroHeaderChildren.push(child)\n } else if (child.type === HeroDescription) {\n acc.HeroDescriptionChild = child\n }\n }\n }\n return acc\n },\n {\n HeroActions: [],\n HeroButtonGroupChild: undefined,\n HeroChildren: [],\n HeroImageChild: undefined,\n HeroVideoChild: undefined,\n HeroHeaderChildren: [],\n HeroDescriptionChild: undefined,\n },\n )\n\n // Prefer Hero.Image - don't show both\n if (result.HeroImageChild && result.HeroVideoChild) {\n result.HeroVideoChild = undefined\n }\n\n return result\n }, [children])\n\n const mediaPositionProp = HeroImageChild?.props.position \|\| HeroVideoChild?.props.position\n\n const mediaPosition = (() => {\n if (variant === 'gridline-expressive' && mediaPositionProp?.startsWith('inline-')) {\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.warn(\n `Hero: \"gridline-expressive\" variant does not support \"${mediaPositionProp}\" position. Defaulting to \"block-end\".`,\n )\n }\n return 'block-end'\n }\n return mediaPositionProp \|\| 'block-end'\n })()\n const mediaWrapperHasBorder = HeroImageChild?.props.enableBorder ?? HeroVideoChild?.props.enableBorder ?? true\n const mediaPadding = HeroImageChild?.props.padding ?? HeroVideoChild?.props.padding ?? 'default'\n const hasInlineMedia = HeroMediaInlinePositionOptions.includes(mediaPosition as HeroMediaInlinePosition)\n const mediaChild = HeroImageChild \|\| HeroVideoChild\n const isGridline = variant === 'gridline'\n const isGridlineExpressive = variant === 'gridline-expressive'\n const isBlockEndPosition = mediaPosition === 'block-end'\n\n if (\n variant === 'default' &&\n mediaPadding !== 'default' &&\n (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test')\n ) {\n // eslint-disable-next-line no-console\n console.warn(\n `Hero: media padding is only supported by the \"gridline\" and \"gridline-expressive\" variants; ignoring padding=\"${mediaPadding}\".`,\n )\n }\n\n const isInvalidGridlineAlignment = isGridlineExpressive && alignProp === 'center'\n const align: HeroAlign = isInvalidGridlineAlignment ? 'start' : alignProp\n\n if (isInvalidGridlineAlignment && (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test')) {\n // eslint-disable-next-line no-console\n console.warn('Hero: the \"gridline-expressive\" variant does not support align=\"center\"; using \"start\" instead.')\n }\n\n const Tag = (isGridline \|\| isGridlineExpressive) && enableAnimation ? AnimationProvider : Fragment\n const tagProps =\n (isGridline \|\| isGridlineExpressive) && enableAnimation\n ? {\n autoStaggerChildren: false,\n animationTrigger: 'immediate' as const,\n }\n : {}\n\n const useContainedLayout = (isGridline \|\| isGridlineExpressive) && isBlockEndPosition\n const useInlineGridline = isGridline && hasInlineMedia\n\n const heroLayoutClass = HeroImageChild ? styles['Hero--layout-image'] : styles['Hero--layout-default']\n const isInlineStart = mediaPosition === 'inline-start'\n\n const renderTrailingComponent = (shouldAnimate: boolean) =>\n TrailingComponent && (\n <Box animate={shouldAnimate ? {variant: 'slide-in-up' as const, delay: 1000, duration: 1000} : undefined}>\n <div className={styles['Hero-trailing']}>\n <TrailingComponent />\n </div>\n </Box>\n )\n\n const renderActions = () => (\n <>\n {HeroButtonGroupChild}\n {HeroActions.length > 0 && <div className={styles['Hero-actions']}>{HeroActions}</div>}\n </>\n )\n\n return (\n <Tag {...tagProps}>\n <HeroContext.Provider value={{imagePosition: mediaPosition, variant, align, hasInlineMedia, enableAnimation}}>\n <section\n className={clsx(\n styles.Hero,\n styles[`Hero--variant-${variant}`],\n !hasInlineMedia && styles[`Hero--align-${align}`],\n heroLayoutClass,\n (HeroImageChild \|\| HeroVideoChild) && styles[`Hero--image-pos-${mediaPosition}`],\n (HeroImageChild \|\| HeroVideoChild) && hasInlineMedia && styles['Hero--image-pos-inline'],\n useInlineGridline && styles['Hero--variant-inline-gridline'],\n className,\n )}\n ref={ref}\n aria-labelledby=\"hero-section-brand-heading\"\n data-testid={testId \|\| testIds.root}\n {...rest}\n >\n <Grid\n fullWidth={!useContainedLayout && !useInlineGridline}\n data-testid={testIds.grid}\n className={clsx(\n styles['Hero-grid'],\n styles[`Hero-grid--${mediaPosition}`],\n useContainedLayout && !isGridlineExpressive && styles['Hero-grid--contained'],\n useInlineGridline && styles['Hero-grid--bordered-inline'],\n isGridlineExpressive && styles['Hero-grid--expressive'],\n )}\n >\n {isGridlineExpressive ? (\n <>\n {/ Expressive variant: header column (left) /}\n <Grid.Column\n span={{medium: 12, large: HeroDescriptionChild ? 7 : 6}}\n className={styles['Hero-expressive-header-column']}\n >\n <Stack direction=\"vertical\" gap=\"none\" padding=\"none\" alignItems=\"flex-start\">\n {HeroHeaderChildren}\n </Stack>\n </Grid.Column>\n {/ Expressive variant: body column (right) /}\n <Grid.Column\n span={{medium: 12, large: HeroDescriptionChild ? 5 : 6}}\n className={styles['Hero-expressive-body-column']}\n >\n <Stack direction=\"vertical\" gap=\"none\" padding=\"none\" alignItems=\"flex-start\">\n {HeroDescriptionChild}\n {renderActions()}\n {renderTrailingComponent(enableAnimation)}\n </Stack>\n </Grid.Column>\n </>\n ) : (\n <>\n {/ Standard GridLine variant: text column /}\n {isInlineStart && mediaChild && !useContainedLayout && (\n <Grid.Column\n ref={imageContainerRef}\n span={{large: 6}}\n className={clsx(\n imageBackgroundColor &&\n mediaPadding !== 'none' &&\n styles[`Hero-imageContainer--bg-${imageBackgroundColor}`],\n useInlineGridline &&\n mediaPadding === 'all' &&\n styles['Hero-imageContainer--inline-padding-all'],\n useInlineGridline &&\n mediaPadding === 'none' &&\n styles['Hero-imageContainer--inline-padding-none'],\n useInlineGridline && styles['Hero-imageContainer--inline-bordered'],\n )}\n >\n <div\n className={clsx(styles['Hero-mediaContainer'], imageContainerClassName)}\n style={imageContainerStyle}\n >\n {mediaChild}\n </div>\n </Grid.Column>\n )}\n <Grid.Column span={{large: mediaChild && hasInlineMedia ? 6 : 12}}>\n <Stack\n className={clsx(\n useInlineGridline && styles['Hero-text-column--inline-gridline'],\n useInlineGridline && styles['Hero-contentColumn--bordered-inline'],\n )}\n direction=\"vertical\"\n gap=\"none\"\n padding=\"none\"\n alignItems={hasInlineMedia ? 'flex-start' : align === 'start' ? 'flex-start' : 'center'}\n justifyContent={hasInlineMedia ? undefined : align === 'start' ? 'flex-start' : 'center'}\n >\n {HeroChildren}\n {renderActions()}\n {renderTrailingComponent(isGridline && enableAnimation)}\n </Stack>\n </Grid.Column>\n {!isInlineStart && mediaChild && !useContainedLayout && (\n <Grid.Column\n ref={imageContainerRef}\n span={{large: hasInlineMedia ? 6 : 12}}\n className={clsx(\n imageBackgroundColor &&\n mediaPadding !== 'none' &&\n styles[`Hero-imageContainer--bg-${imageBackgroundColor}`],\n useInlineGridline &&\n mediaPadding === 'all' &&\n styles['Hero-imageContainer--inline-padding-all'],\n useInlineGridline &&\n mediaPadding === 'none' &&\n styles['Hero-imageContainer--inline-padding-none'],\n useInlineGridline && styles['Hero-imageContainer--inline-bordered'],\n )}\n >\n <div\n className={clsx(styles['Hero-mediaContainer'], imageContainerClassName)}\n style={imageContainerStyle}\n >\n {mediaChild}\n </div>\n </Grid.Column>\n )}\n </>\n )}\n </Grid>\n {mediaChild && useContainedLayout && (\n <div\n ref={imageContainerRef}\n data-testid={testIds.imageWrapper}\n className={clsx(\n styles['Hero-imageWrapper'],\n imageContainerClassName,\n imageBackgroundColor &&\n mediaPadding !== 'none' &&\n styles[`Hero-imageWrapper--bg-${imageBackgroundColor}`],\n mediaPadding === 'none' && styles['Hero-imageWrapper--padding-none'],\n )}\n style={imageContainerStyle}\n >\n <div\n className={clsx(\n styles['Hero-imageWrapper-inner'],\n mediaPadding === 'all' && styles['Hero-imageWrapper-inner--padding-all'],\n mediaPadding === 'none' && styles['Hero-imageWrapper-inner--padding-none'],\n mediaWrapperHasBorder && styles['Hero-imageWrapper-inner--with-gridline'],\n )}\n >\n {mediaChild}\n </div>\n </div>\n )}\n </section>\n </HeroContext.Provider>\n </Tag>\n )\n },\n)\n\nexport const Hero = Object.assign(Root, {\n Heading: HeroHeading,\n Description: HeroDescription,\n ButtonGroup: HeroButtonGroup,\n /\n @deprecated Use `Hero.ButtonGroup` with `Button` or `ActionMenu` children instead.\n * This component will be removed in a future release.\n /\n PrimaryAction: HeroPrimaryAction,\n /\n @deprecated Use `Hero.ButtonGroup` with `Button` or `ActionMenu` children instead.\n * This component will be removed in a future release.\n */\n SecondaryAction: HeroSecondaryAction,\n Image: HeroImage,\n Video: HeroVideo,\n Label: HeroLabel,\n Eyebrow: HeroEyebrow,\n testIds,\n})\n"],"mappings":"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"}

package/esm/Hero/Hero.module-DH253w6y.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__Hero-module__Hero___It6gj{flex-direction:column;display:flex}.Primer_Brand__Hero-module__Hero--variant-default___lNgHw{padding:var(--brand-Hero-narrow-padding)}.Primer_Brand__Hero-module__Hero--align-start___ouSp3{text-align:left;align-items:flex-start}.Primer_Brand__Hero-module__Hero--align-center___6FMoH{text-align:center;place-items:center}.Primer_Brand__Hero-module__Hero-grid___gXNGW{--brand-Grid-spacing-margin:0}.Primer_Brand__Hero-module__Hero-grid--contained___vfiGA{width:100%;max-width:1280px;padding:var(--base-size-32);background-color:var(--brand-Hero-bgColor-gridlineGridInner);margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero-grid--contained___vfiGA{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero-grid--block-end___jU6_V,.Primer_Brand__Hero-module__Hero-grid--inline-end___o8Dtq{--brand-Grid-spacing-row:var(--base-size-40)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-grid--contained___vfiGA{padding:var(--base-size-64)}.Primer_Brand__Hero-module__Hero-grid--block-end___jU6_V{--brand-Grid-spacing-row:var(--base-size-80)}}.Primer_Brand__Hero-module__Hero--align-center___6FMoH .Primer_Brand__Hero-module__Hero-actions___RUotq{justify-content:center}.Primer_Brand__Hero-module__Hero--align-center___6FMoH .Primer_Brand__Hero-module__Hero-content___lpGj0{flex-direction:column;align-items:center;display:flex}.Primer_Brand__Hero-module__Hero-image___GC10l{border-radius:var(--brand-borderRadius-medium);width:100%}.Primer_Brand__Hero-module__Hero-image___GC10l>img{border-radius:inherit}.Primer_Brand__Hero-module__Hero-mediaContainer___DWFUR{flex:1;width:100%;height:100%;display:flex}.Primer_Brand__Hero-module__Hero-imageContainer--bg-subtle___RFNq3{background-color:var(--brand-color-canvas-subtle);padding:var(--base-size-32) var(--base-size-32) 0}.Primer_Brand__Hero-module__Hero-imageContainer--inline-padding-all___rgfxJ{padding:var(--base-size-32);background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__Hero-module__Hero-imageWrapper___CscCA{justify-content:center;width:100%;display:flex}.Primer_Brand__Hero-module__Hero-imageWrapper--bg-subtle___8xPH_{border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);background-color:var(--brand-color-canvas-subtle);padding:var(--base-size-32) var(--base-size-32) 0}.Primer_Brand__Hero-module__Hero-imageContainer--inline-bordered___g8hqZ{align-items:stretch;display:flex}.Primer_Brand__Hero-module__Hero-imageContainer--inline-bordered___g8hqZ:not(.Primer_Brand__Hero-module__Hero-imageContainer--inline-padding-none___sx3sH){background-color:var(--brand-color-canvas-subtle)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-imageContainer--inline-bordered___g8hqZ{min-height:calc(600px - var(--base-size-24))}.Primer_Brand__Hero-module__Hero-imageWrapper--bg-subtle___8xPH_{padding:var(--base-size-64) var(--base-size-64) 0}.Primer_Brand__Hero-module__Hero-imageContainer--inline-padding-all___rgfxJ{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh{width:100%;container-type:inline-size}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media___rM3qR{max-width:1176px;margin-inline:auto;display:block;overflow:hidden}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media--pos-block-end___6QShk:not(.Primer_Brand__Hero-module__Hero-media--padding-all___OCI0b):not(.Primer_Brand__Hero-module__Hero-media--padding-none___RyrAT){border-radius:var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0}.Primer_Brand__Hero-module__Hero-media--pos-block-end___6QShk.Primer_Brand__Hero-module__Hero-media--padding-all___OCI0b{border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__Hero-module__Hero-media-item--block-end___RrUWM{border-radius:var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper___CscCA{border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);width:100%}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper___CscCA:not(.Primer_Brand__Hero-module__Hero-imageWrapper--padding-none___aUnoB){background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{width:100%;max-width:1280px;padding:var(--base-size-32) var(--base-size-32) 0;margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner--with-gridline___fixm4{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padding-all____dGWL{padding:var(--base-size-32)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{padding:var(--base-size-64) var(--base-size-64) 0}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padding-all____dGWL{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padding-none___KoLzw{padding:0}.Primer_Brand__Hero-module__Hero-grid--bordered-inline___e_HR8{width:100%;max-width:1280px;margin-inline:auto}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-grid--bordered-inline___e_HR8{min-height:440px}}@container (width>=1280px){.Primer_Brand__Hero-module__Hero-grid--bordered-inline___e_HR8{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh.Primer_Brand__Hero-module__Hero--image-pos-inline___fwJAZ{border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__Hero-module__Hero-contentColumn--bordered-inline___2Dfrd{padding:var(--base-size-32);flex-direction:column;justify-content:center;display:flex}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-contentColumn--bordered-inline___2Dfrd{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media--pos-inline___TD4jr:not(.Primer_Brand__Hero-module__Hero-media--padding-all___OCI0b),.Primer_Brand__Hero-module__Hero-media-item--inline___3XHJG{border-radius:0}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media--pos-inline___TD4jr.Primer_Brand__Hero-module__Hero-media--padding-all___OCI0b{align-self:center;max-width:100%;height:auto}.Primer_Brand__Hero-module__Hero-video___Ne5zN{width:100%}.Primer_Brand__Hero-module__Hero-media-item___Ia3pn{border-radius:var(--brand-borderRadius-large);width:100%}.Primer_Brand__Hero-module__Hero-label___XJftM{text-transform:uppercase;letter-spacing:1px;align-items:center;margin-block-end:calc(var(--base-size-16) - var(--base-size-2));display:flex}.Primer_Brand__Hero-module__Hero-heading___HMve3{max-width:924px;margin:0}.Primer_Brand__Hero-module__Hero-heading___HMve3 b{color:var(--brand-color-accent-primary);font-style:normal;font-weight:inherit}.Primer_Brand__Hero-module__Hero-heading--fullWidth___sJlnY{max-width:none;max-width:initial}.Primer_Brand__Hero-module__Hero-text-column--inline-gridline___gGhfi{height:100%}.Primer_Brand__Hero-module__Hero-description___7raSC{margin:var(--base-size-24) 0 0;max-width:600px}.Primer_Brand__Hero-module__Hero--variant-inline-gridline___Jwjqy .Primer_Brand__Hero-module__Hero-description___7raSC{margin-block-start:auto;padding-block-start:var(--base-size-24)}.Primer_Brand__Hero-module__Hero-actions___RUotq{align-items:center;gap:var(--base-size-8) var(--base-size-16);flex-wrap:wrap;margin-block-start:var(--base-size-28);display:flex}.Primer_Brand__Hero-module__Hero___It6gj .Primer_Brand__Hero-module__Hero-actions___RUotq>*{flex-grow:0}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-actions___RUotq{align-items:stretch;gap:var(--base-size-8) var(--base-size-12)}.Primer_Brand__Hero-module__Hero-trailing____cadc{margin-block-start:var(--base-size-32)}.Primer_Brand__Hero-module__Hero-eyebrow___mlxSE{margin-block-end:var(--base-size-32)}@media screen and (width>=34rem){.Primer_Brand__Hero-module__Hero--variant-default___lNgHw{padding:var(--brand-Hero-regular-padding)}}.Primer_Brand__Hero-module__Hero-video-poster-button___mtbvt{cursor:pointer;background:0 0;border:none;width:100%;height:100%;padding:0;font-size:0;line-height:0;display:block;position:relative}.Primer_Brand__Hero-module__Hero-video-poster-image___ZP3Q5{width:100%;height:auto;display:block}.Primer_Brand__Hero-module__Hero-video-poster-icon___PfT4p{width:var(--base-size-96);height:var(--base-size-96);z-index:1;color:var(--base-color-scale-white-0);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.Primer_Brand__Hero-module__Hero-video-poster-header___13M9x{padding:var(--base-size-16) var(--base-size-24);align-items:center;gap:var(--base-size-16);height:var(--base-size-80);background:linear-gradient(#000000b3 60%,#0000);display:flex;position:absolute;inset:0 0 auto}.Primer_Brand__Hero-module__Hero-video-header-poster-icon___tlEff,.Primer_Brand__Hero-module__Hero-video-poster-text___4R755{color:var(--base-color-scale-white-0)}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3{width:100%;container-type:inline-size}.Primer_Brand__Hero-module__Hero-grid--expressive___Lq5SC{--brand-Grid-spacing-row:0;gap:0;width:100%;max-width:1280px;margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero-grid--expressive___Lq5SC{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero-expressive-header-column___iq2TT{padding:var(--base-size-36);padding-inline:var(--base-size-20);border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);align-items:center;padding-block-end:var(--base-size-28);display:flex}.Primer_Brand__Hero-module__Hero-expressive-body-column___Beyq_{padding:var(--base-size-32);padding-inline:var(--base-size-20);padding-block-start:var(--base-size-24)}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-description___7raSC{margin-block-start:0}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-actions___RUotq{margin-block-start:var(--base-size-28)}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-trailing____cadc{margin-block-start:var(--base-size-24)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-expressive-header-column___iq2TT{padding:var(--base-size-64);border-block-end:none;border-inline-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-inline-end:var(--base-size-64)}.Primer_Brand__Hero-module__Hero-expressive-body-column___Beyq_{padding:var(--base-size-64);flex-direction:column;justify-content:flex-end;padding-inline-start:var(--base-size-64);display:flex}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-actions___RUotq{margin-block-start:var(--base-size-24)}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-trailing____cadc{margin-block-start:var(--base-size-20)}}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper___CscCA{border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);width:100%}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper___CscCA:not(.Primer_Brand__Hero-module__Hero-imageWrapper--padding-none___aUnoB){background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{width:100%;max-width:1280px;padding:var(--base-size-32) var(--base-size-32) 0;margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner--with-gridline___fixm4{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padding-all____dGWL{padding:var(--base-size-32)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{padding:var(--base-size-64) var(--base-size-64) 0}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padding-all____dGWL{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padding-none___KoLzw{padding:0}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-media___rM3qR{max-width:1176px;margin-inline:auto;display:block;overflow:hidden}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-media--pos-block-end___6QShk:not(.Primer_Brand__Hero-module__Hero-media--padding-all___OCI0b):not(.Primer_Brand__Hero-module__Hero-media--padding-none___RyrAT){border-radius:var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media--padding-none___RyrAT,.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-media--padding-none___RyrAT{border-radius:0;max-width:100%}

package/esm/Hero/Hero.module.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import './Hero.module-DqG5f0MT.css';var e = {
+import './Hero.module-DH253w6y.css';var e = {
 	Hero: "Primer_Brand__Hero-module__Hero___It6gj",
 	"Hero--variant-default": "Primer_Brand__Hero-module__Hero--variant-default___lNgHw",
 	"Hero--align-start": "Primer_Brand__Hero-module__Hero--align-start___ouSp3",
@@ -12,23 +12,26 @@ import './Hero.module-DqG5f0MT.css';var e = {
 	"Hero-image": "Primer_Brand__Hero-module__Hero-image___GC10l",
 	"Hero-mediaContainer": "Primer_Brand__Hero-module__Hero-mediaContainer___DWFUR",
 	"Hero-imageContainer--bg-subtle": "Primer_Brand__Hero-module__Hero-imageContainer--bg-subtle___RFNq3",
-	"Hero-imageContainer--inline-bg-padded": "Primer_Brand__Hero-module__Hero-imageContainer--inline-bg-padded___Y_hah",
+	"Hero-imageContainer--inline-padding-all": "Primer_Brand__Hero-module__Hero-imageContainer--inline-padding-all___rgfxJ",
 	"Hero-imageWrapper": "Primer_Brand__Hero-module__Hero-imageWrapper___CscCA",
 	"Hero-imageWrapper--bg-subtle": "Primer_Brand__Hero-module__Hero-imageWrapper--bg-subtle___8xPH_",
 	"Hero-imageContainer--inline-bordered": "Primer_Brand__Hero-module__Hero-imageContainer--inline-bordered___g8hqZ",
+	"Hero-imageContainer--inline-padding-none": "Primer_Brand__Hero-module__Hero-imageContainer--inline-padding-none___sx3sH",
 	"Hero--variant-gridline": "Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh",
 	"Hero-media": "Primer_Brand__Hero-module__Hero-media___rM3qR",
 	"Hero-media--pos-block-end": "Primer_Brand__Hero-module__Hero-media--pos-block-end___6QShk",
+	"Hero-media--padding-all": "Primer_Brand__Hero-module__Hero-media--padding-all___OCI0b",
+	"Hero-media--padding-none": "Primer_Brand__Hero-module__Hero-media--padding-none___RyrAT",
 	"Hero-media-item--block-end": "Primer_Brand__Hero-module__Hero-media-item--block-end___RrUWM",
+	"Hero-imageWrapper--padding-none": "Primer_Brand__Hero-module__Hero-imageWrapper--padding-none___aUnoB",
 	"Hero-imageWrapper-inner": "Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg",
 	"Hero-imageWrapper-inner--with-gridline": "Primer_Brand__Hero-module__Hero-imageWrapper-inner--with-gridline___fixm4",
-	"Hero-imageWrapper-inner--padded": "Primer_Brand__Hero-module__Hero-imageWrapper-inner--padded___cN4al",
-	"Hero-media--pos-block-end-padded": "Primer_Brand__Hero-module__Hero-media--pos-block-end-padded___VdZlI",
+	"Hero-imageWrapper-inner--padding-all": "Primer_Brand__Hero-module__Hero-imageWrapper-inner--padding-all____dGWL",
+	"Hero-imageWrapper-inner--padding-none": "Primer_Brand__Hero-module__Hero-imageWrapper-inner--padding-none___KoLzw",
 	"Hero-grid--bordered-inline": "Primer_Brand__Hero-module__Hero-grid--bordered-inline___e_HR8",
 	"Hero--image-pos-inline": "Primer_Brand__Hero-module__Hero--image-pos-inline___fwJAZ",
 	"Hero-contentColumn--bordered-inline": "Primer_Brand__Hero-module__Hero-contentColumn--bordered-inline___2Dfrd",
 	"Hero-media--pos-inline": "Primer_Brand__Hero-module__Hero-media--pos-inline___TD4jr",
-	"Hero-media--pos-inline-padded": "Primer_Brand__Hero-module__Hero-media--pos-inline-padded___Uq4Xk",
 	"Hero-media-item--inline": "Primer_Brand__Hero-module__Hero-media-item--inline___3XHJG",
 	"Hero-video": "Primer_Brand__Hero-module__Hero-video___Ne5zN",
 	"Hero-media-item": "Primer_Brand__Hero-module__Hero-media-item___Ia3pn",