@primer/react-brand 0.68.0-rc.59bbed40 → 0.68.0-rc.5bd56cbb

package/esm/Hero/Hero.d.ts

@@ -0,0 +1,199 @@
+import React from 'react';
+import type { BaseProps } from '../component-helpers';
+import type { HeroAlign, HeroVariant } from './HeroContext';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/hero/base.css';
+export type HeroProps = BaseProps<HTMLElement> & {
+    align?: HeroAlign;
+    imageContainerClassName?: string;
+    imageContainerStyle?: React.CSSProperties;
+    imageContainerRef?: React.RefObject<HTMLDivElement | null>;
+    imageBackgroundColor?: 'default' | 'subtle';
+    variant?: HeroVariant;
+    enableAnimation?: boolean;
+    /**
+     * Escape-hatch for inserting custom React components.
+     * Warning:
+     *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.
+     *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.
+     */
+    trailingComponent?: React.FunctionComponent;
+    'data-testid'?: string;
+};
+export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<HeroProps>, "ref"> & React.RefAttributes<HTMLElement>> & {
+    Heading: React.ForwardRefExoticComponent<Omit<import("./sub-components").HeroHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<(Omit<{
+        size?: typeof import("..").TextSizes[number];
+        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
+    } & BaseProps<HTMLParagraphElement> & {
+        font?: import("..").TextFontVariants;
+        size?: typeof import("..").TextSizes[number];
+        variant?: typeof import("..").TextVariants[number];
+        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
+        align?: "start" | "center" | "end";
+        hasAntiAliasing?: boolean;
+    } & {
+        as?: typeof import("..").TextTags[number];
+    } & React.HTMLAttributes<HTMLParagraphElement> & {
+        as?: "p";
+    } & {
+        children?: React.ReactNode | undefined;
+    }, "ref"> | Omit<{
+        size?: typeof import("..").TextSizes[number];
+        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
+    } & BaseProps<HTMLParagraphElement> & {
+        font?: import("..").TextFontVariants;
+        size?: typeof import("..").TextSizes[number];
+        variant?: typeof import("..").TextVariants[number];
+        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
+        align?: "start" | "center" | "end";
+        hasAntiAliasing?: boolean;
+    } & {
+        as?: typeof import("..").TextTags[number];
+    } & React.HTMLAttributes<HTMLSpanElement> & BaseProps<HTMLSpanElement> & {
+        as?: "span";
+    } & {
+        children?: React.ReactNode | undefined;
+    }, "ref"> | Omit<{
+        size?: typeof import("..").TextSizes[number];
+        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
+    } & BaseProps<HTMLParagraphElement> & {
+        font?: import("..").TextFontVariants;
+        size?: typeof import("..").TextSizes[number];
+        variant?: typeof import("..").TextVariants[number];
+        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
+        align?: "start" | "center" | "end";
+        hasAntiAliasing?: boolean;
+    } & {
+        as?: typeof import("..").TextTags[number];
+    } & React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement> & {
+        as?: "div";
+    } & {
+        children?: React.ReactNode | undefined;
+    }, "ref"> | Omit<{
+        size?: typeof import("..").TextSizes[number];
+        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
+    } & BaseProps<HTMLParagraphElement> & {
+        font?: import("..").TextFontVariants;
+        size?: typeof import("..").TextSizes[number];
+        variant?: typeof import("..").TextVariants[number];
+        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
+        align?: "start" | "center" | "end";
+        hasAntiAliasing?: boolean;
+    } & {
+        as?: typeof import("..").TextTags[number];
+    } & React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement> & {
+        as?: "strong";
+    } & {
+        children?: React.ReactNode | undefined;
+    }, "ref"> | Omit<{
+        size?: typeof import("..").TextSizes[number];
+        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
+    } & BaseProps<HTMLParagraphElement> & {
+        font?: import("..").TextFontVariants;
+        size?: typeof import("..").TextSizes[number];
+        variant?: typeof import("..").TextVariants[number];
+        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
+        align?: "start" | "center" | "end";
+        hasAntiAliasing?: boolean;
+    } & {
+        as?: typeof import("..").TextTags[number];
+    } & React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement> & {
+        as?: "em";
+    } & {
+        children?: React.ReactNode | undefined;
+    }, "ref">) & React.RefAttributes<HTMLParagraphElement>>;
+    PrimaryAction: React.ForwardRefExoticComponent<(Omit<{
+        as?: "a" | "button";
+        href: string;
+    } & import("..").ButtonBaseProps & BaseProps<HTMLAnchorElement> & {
+        as?: "a";
+    } & {
+        children?: React.ReactNode | undefined;
+    }, "ref"> | Omit<{
+        as?: "a" | "button";
+        href: string;
+    } & import("..").ButtonBaseProps & BaseProps<HTMLButtonElement> & {
+        as?: "button";
+    } & {
+        children?: React.ReactNode | undefined;
+    }, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+    SecondaryAction: React.ForwardRefExoticComponent<(Omit<{
+        as?: "a" | "button";
+        href: string;
+    } & import("..").ButtonBaseProps & BaseProps<HTMLAnchorElement> & {
+        as?: "a";
+    } & {
+        children?: React.ReactNode | undefined;
+    }, "ref"> | Omit<{
+        as?: "a" | "button";
+        href: string;
+    } & import("..").ButtonBaseProps & BaseProps<HTMLButtonElement> & {
+        as?: "button";
+    } & {
+        children?: React.ReactNode | undefined;
+    }, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+    Image: React.ForwardRefExoticComponent<(Omit<{
+        position?: import("./HeroContext").HeroMediaPositions;
+        enableBorder?: boolean;
+    } & React.ImgHTMLAttributes<HTMLImageElement> & BaseProps<HTMLImageElement> & {
+        src: string;
+        alt: string;
+        aspectRatio?: import("..").ImageAspectRatio;
+        media?: string;
+        borderRadius?: import("..").ImageBorderRadiusOptions;
+        srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, "srcSet">;
+    } & {
+        as?: "img";
+        srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, "srcSet">;
+    }, "ref"> | Omit<{
+        position?: import("./HeroContext").HeroMediaPositions;
+        enableBorder?: boolean;
+    } & React.ImgHTMLAttributes<HTMLImageElement> & BaseProps<HTMLImageElement> & {
+        src: string;
+        alt: string;
+        aspectRatio?: import("..").ImageAspectRatio;
+        media?: string;
+        borderRadius?: import("..").ImageBorderRadiusOptions;
+        srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, "srcSet">;
+    } & {
+        as: "picture";
+        sources?: {
+            srcset: string;
+            media: string;
+        }[];
+        srcSet?: undefined;
+    }, "ref">) & React.RefAttributes<HTMLImageElement>>;
+    Video: React.ForwardRefExoticComponent<(Omit<{
+        position?: import("./HeroContext").HeroMediaPositions;
+        enableBorder?: boolean;
+        'data-testid'?: string;
+    } & BaseProps<HTMLDivElement> & {
+        children?: React.ReactNode | undefined;
+    } & {
+        poster?: never;
+        posterAltText?: never;
+        posterTitle?: never;
+    }, "ref"> | Omit<{
+        position?: import("./HeroContext").HeroMediaPositions;
+        enableBorder?: boolean;
+        'data-testid'?: string;
+    } & BaseProps<HTMLDivElement> & {
+        children?: React.ReactNode | undefined;
+    } & {
+        poster: string;
+        posterAltText: string;
+        posterTitle: string;
+    }, "ref">) & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<Omit<import("./sub-components").HeroLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Eyebrow: React.ForwardRefExoticComponent<Omit<import("./sub-components").HeroEyebrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    testIds: {
+        root: string;
+        readonly video: string;
+        readonly grid: string;
+        readonly imageWrapper: string;
+    };
+};
+//# sourceMappingURL=Hero.d.ts.map

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

@@ -0,0 +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;AAsQD,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUf,CAAA"}

package/esm/Hero/Hero.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Hero.figma.d.ts.map

package/esm/Hero/Hero.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hero.figma.d.ts","sourceRoot":"","sources":["../../src/Hero/Hero.figma.tsx"],"names":[],"mappings":""}

package/esm/Hero/Hero.js

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

package/esm/Hero/Hero.js.map

@@ -0,0 +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 = '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 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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"}

package/esm/Hero/Hero.module-b8OFm8Ci.css

@@ -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-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-bg-padded___Y_hah{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{background-color:var(--brand-color-canvas-subtle);align-items:stretch;display:flex}@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-bg-padded___Y_hah{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,.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);background-color:var(--brand-color-canvas-subtle);width:100%}.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--padded___cN4al{padding:var(--base-size-32)}.Primer_Brand__Hero-module__Hero-media--pos-block-end-padded___VdZlI{border-radius:var(--brand-borderRadius-medium)}@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--padded___cN4al{padding:var(--base-size-64)}}.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--pos-inline-padded___Uq4Xk),.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-padded___Uq4Xk{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:var(--base-size-16);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-32);display:flex}.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-32);border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);align-items:center;padding-block-end:var(--base-size-24);display:flex}.Primer_Brand__Hero-module__Hero-expressive-body-column___Beyq_{padding:var(--base-size-32);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,.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,.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-trailing____cadc{margin-block-start:var(--base-size-32)}}.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);background-color:var(--brand-color-canvas-subtle);width:100%}.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--padded___cN4al{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--padded___cN4al{padding:var(--base-size-64)}}.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,.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-image___GC10l:not(.Primer_Brand__Hero-module__Hero-media--pos-block-end-padded___VdZlI){border-radius:var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0}

package/esm/Hero/Hero.module.js

@@ -0,0 +1,57 @@
+import './Hero.module-b8OFm8Ci.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",
+	"Hero--align-center": "Primer_Brand__Hero-module__Hero--align-center___6FMoH",
+	"Hero-grid": "Primer_Brand__Hero-module__Hero-grid___gXNGW",
+	"Hero-grid--contained": "Primer_Brand__Hero-module__Hero-grid--contained___vfiGA",
+	"Hero-grid--block-end": "Primer_Brand__Hero-module__Hero-grid--block-end___jU6_V",
+	"Hero-grid--inline-end": "Primer_Brand__Hero-module__Hero-grid--inline-end___o8Dtq",
+	"Hero-actions": "Primer_Brand__Hero-module__Hero-actions___RUotq",
+	"Hero-content": "Primer_Brand__Hero-module__Hero-content___lpGj0",
+	"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-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--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-item--block-end": "Primer_Brand__Hero-module__Hero-media-item--block-end___RrUWM",
+	"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-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",
+	"Hero-label": "Primer_Brand__Hero-module__Hero-label___XJftM",
+	"Hero-heading": "Primer_Brand__Hero-module__Hero-heading___HMve3",
+	"Hero-heading--fullWidth": "Primer_Brand__Hero-module__Hero-heading--fullWidth___sJlnY",
+	"Hero-text-column--inline-gridline": "Primer_Brand__Hero-module__Hero-text-column--inline-gridline___gGhfi",
+	"Hero-description": "Primer_Brand__Hero-module__Hero-description___7raSC",
+	"Hero--variant-inline-gridline": "Primer_Brand__Hero-module__Hero--variant-inline-gridline___Jwjqy",
+	"Hero--variant-gridline-expressive": "Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3",
+	"Hero-trailing": "Primer_Brand__Hero-module__Hero-trailing____cadc",
+	"Hero-eyebrow": "Primer_Brand__Hero-module__Hero-eyebrow___mlxSE",
+	"Hero-video-poster-button": "Primer_Brand__Hero-module__Hero-video-poster-button___mtbvt",
+	"Hero-video-poster-image": "Primer_Brand__Hero-module__Hero-video-poster-image___ZP3Q5",
+	"Hero-video-poster-icon": "Primer_Brand__Hero-module__Hero-video-poster-icon___PfT4p",
+	"Hero-video-poster-header": "Primer_Brand__Hero-module__Hero-video-poster-header___13M9x",
+	"Hero-video-header-poster-icon": "Primer_Brand__Hero-module__Hero-video-header-poster-icon___tlEff",
+	"Hero-video-poster-text": "Primer_Brand__Hero-module__Hero-video-poster-text___4R755",
+	"Hero-grid--expressive": "Primer_Brand__Hero-module__Hero-grid--expressive___Lq5SC",
+	"Hero-expressive-header-column": "Primer_Brand__Hero-module__Hero-expressive-header-column___iq2TT",
+	"Hero-expressive-body-column": "Primer_Brand__Hero-module__Hero-expressive-body-column___Beyq_"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=Hero.module.js.map

package/esm/Hero/Hero.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hero.module.js","names":[],"sources":["../../src/Hero/Hero.module.css"],"sourcesContent":[".Hero {\n  display: flex;\n  flex-direction: column;\n}\n\n.Hero--variant-default {\n  padding: var(--brand-Hero-narrow-padding);\n}\n\n.Hero--align-start {\n  align-items: flex-start;\n  text-align: left;\n}\n\n.Hero--align-center {\n  justify-items: center;\n  align-items: center;\n  text-align: center;\n}\n\n.Hero-grid {\n  --brand-Grid-spacing-margin: 0;\n}\n\n.Hero-grid--contained {\n  width: 100%;\n  max-width: 1280px;\n  margin-inline: auto;\n  padding: var(--base-size-32);\n  background-color: var(--brand-Hero-bgColor-gridlineGridInner); /* Unset by default - users can override if needed */\n}\n\n/* Prevents double-borders. We only apply the inline borders when the parent container is wide enough to show the full width.  */\n@container (min-width: 1280px) {\n  .Hero-grid--contained {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.Hero-grid--block-end,\n.Hero-grid--inline-end {\n  --brand-Grid-spacing-row: var(--base-size-40);\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Hero-grid--contained {\n    padding: var(--base-size-64);\n  }\n\n  .Hero-grid--block-end {\n    --brand-Grid-spacing-row: var(--base-size-80);\n  }\n}\n\n.Hero--align-center .Hero-actions {\n  justify-content: center;\n}\n\n.Hero--align-center .Hero-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.Hero-image {\n  border-radius: var(--brand-borderRadius-medium);\n  width: 100%;\n}\n\n.Hero-mediaContainer {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex: 1;\n}\n\n.Hero-imageContainer--bg-subtle {\n  background-color: var(--brand-color-canvas-subtle);\n  padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n.Hero-imageContainer--inline-bg-padded {\n  padding: var(--base-size-32);\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n.Hero-imageWrapper {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n}\n\n.Hero-imageWrapper--bg-subtle {\n  border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  background-color: var(--brand-color-canvas-subtle);\n  padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n.Hero-imageContainer--inline-bordered {\n  background-color: var(--brand-color-canvas-subtle);\n  display: flex;\n  align-items: stretch;\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Hero-imageContainer--inline-bordered {\n    min-height: calc(600px - var(--base-size-24));\n  }\n\n  .Hero-imageWrapper--bg-subtle {\n    padding: var(--base-size-64) var(--base-size-64) 0;\n  }\n\n  .Hero-imageContainer--inline-bg-padded {\n    padding: var(--base-size-64);\n  }\n}\n\n.Hero--variant-gridline {\n  container-type: inline-size;\n  width: 100%;\n}\n\n/* Shared media styles for images and videos */\n.Hero--variant-gridline .Hero-media {\n  max-width: 1176px;\n  margin-inline: auto;\n  display: block;\n  overflow: hidden;\n}\n\n.Hero--variant-gridline .Hero-media--pos-block-end {\n  border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n\n/* Applied directly to video/iframe elements for block-end position */\n.Hero-media-item--block-end {\n  border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n\n.Hero--variant-gridline .Hero-imageWrapper {\n  border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  background-color: var(--brand-color-canvas-subtle);\n  width: 100%;\n}\n\n.Hero--variant-gridline .Hero-imageWrapper-inner {\n  width: 100%;\n  max-width: 1280px;\n  margin-inline: auto;\n  padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n@container (min-width: 1280px) {\n  .Hero--variant-gridline .Hero-imageWrapper-inner--with-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.Hero--variant-gridline .Hero-imageWrapper-inner--padded {\n  padding: var(--base-size-32);\n}\n\n.Hero-media--pos-block-end-padded {\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Hero--variant-gridline .Hero-imageWrapper-inner {\n    padding: var(--base-size-64) var(--base-size-64) 0;\n  }\n\n  .Hero--variant-gridline .Hero-imageWrapper-inner--padded {\n    padding: var(--base-size-64);\n  }\n}\n\n/* GridLine variant with inline (side-by-side) layout */\n.Hero-grid--bordered-inline {\n  width: 100%;\n  max-width: 1280px;\n  margin-inline: auto;\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Hero-grid--bordered-inline {\n    min-height: 440px;\n  }\n}\n\n@container (min-width: 1280px) {\n  .Hero-grid--bordered-inline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.Hero--variant-gridline.Hero--image-pos-inline {\n  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n/* Text column styling for gridline inline positions */\n.Hero-contentColumn--bordered-inline {\n  padding: var(--base-size-32);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Hero-contentColumn--bordered-inline {\n    padding: var(--base-size-64);\n  }\n}\n\n/* Media styling for gridline inline positions */\n\n/* Edge-to-edge inline media (no padding) - remove border radius */\n.Hero--variant-gridline .Hero-media--pos-inline:not(.Hero-media--pos-inline-padded) {\n  border-radius: 0;\n}\n\n/* Applied directly to video/iframe elements for inline position */\n.Hero-media-item--inline {\n  border-radius: 0;\n}\n\n/* Padded inline media - constrain size and center */\n.Hero--variant-gridline .Hero-media--pos-inline-padded {\n  max-width: 100%;\n  height: auto;\n  align-self: center;\n}\n\n/* Image column styling now handled by .Hero-imageContainer--inline-bordered */\n\n.Hero-video {\n  width: 100%;\n}\n\n/* Base styles for video/iframe media elements */\n.Hero-media-item {\n  width: 100%;\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.Hero-label {\n  text-transform: uppercase;\n  letter-spacing: 1px;\n  margin-block-end: var(--base-size-16);\n  display: flex;\n  align-items: center;\n}\n\n.Hero-heading {\n  margin: 0;\n  max-width: 924px;\n}\n\n.Hero-heading b {\n  color: var(--brand-color-accent-primary);\n  font-style: normal;\n  font-weight: inherit;\n}\n\n.Hero-heading--fullWidth {\n  max-width: unset;\n}\n\n.Hero-text-column--inline-gridline {\n  height: 100%;\n}\n\n.Hero-description {\n  margin: var(--base-size-24) 0 0;\n  max-width: 600px;\n}\n\n.Hero--variant-inline-gridline .Hero-description {\n  padding-block-start: var(--base-size-24);\n  margin-block-start: auto;\n}\n\n.Hero-actions {\n  margin-block-start: var(--base-size-32);\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--base-size-8) var(--base-size-16);\n}\n\n.Hero--variant-gridline-expressive .Hero-actions {\n  align-items: stretch;\n  gap: var(--base-size-8) var(--base-size-12);\n}\n\n.Hero-trailing {\n  margin-block-start: var(--base-size-32);\n}\n\n.Hero-eyebrow {\n  margin-block-end: var(--base-size-32);\n}\n\n/* Small breakpoint and up */\n@media screen and (min-width: 34rem) {\n  .Hero--variant-default {\n    padding: var(--brand-Hero-regular-padding);\n  }\n}\n\n.Hero-video-poster-button {\n  padding: 0;\n  border: none;\n  background: none;\n  cursor: pointer;\n  display: block;\n  height: 100%;\n  position: relative;\n  line-height: 0;\n  font-size: 0;\n  width: 100%;\n}\n\n.Hero-video-poster-image {\n  display: block;\n  height: auto;\n  width: 100%;\n}\n\n.Hero-video-poster-icon {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: var(--base-size-96);\n  height: var(--base-size-96);\n  z-index: 1;\n  color: var(--base-color-scale-white-0);\n}\n\n.Hero-video-poster-header {\n  position: absolute;\n  inset: 0 0 auto;\n  padding: var(--base-size-16) var(--base-size-24);\n  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0));\n  display: flex;\n  align-items: center;\n  gap: var(--base-size-16);\n  height: var(--base-size-80);\n}\n\n.Hero-video-header-poster-icon,\n.Hero-video-poster-text {\n  color: var(--base-color-scale-white-0);\n}\n\n/* ========================================\n   Gridline-Expressive Variant\n   ======================================== */\n\n.Hero--variant-gridline-expressive {\n  container-type: inline-size;\n  width: 100%;\n}\n\n/* Grid container for expressive variant */\n.Hero-grid--expressive {\n  width: 100%;\n  max-width: 1280px;\n  margin-inline: auto;\n  gap: 0;\n  --brand-Grid-spacing-row: 0;\n}\n\n@container (min-width: 1280px) {\n  .Hero-grid--expressive {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n/* Header column (eyebrow, heading) */\n.Hero-expressive-header-column {\n  padding: var(--base-size-32);\n  padding-block-end: var(--base-size-24);\n  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  display: flex;\n  align-items: center;\n}\n\n/* Body column (description, actions, trailing) */\n.Hero-expressive-body-column {\n  padding: var(--base-size-32);\n  padding-block-start: var(--base-size-24);\n}\n\n.Hero--variant-gridline-expressive .Hero-description {\n  margin-block-start: 0;\n}\n\n.Hero--variant-gridline-expressive .Hero-actions {\n  margin-block-start: var(--base-size-24);\n}\n\n.Hero--variant-gridline-expressive .Hero-trailing {\n  margin-block-start: var(--base-size-24);\n}\n\n/* Desktop: Side-by-side layout with vertical divider */\n@media screen and (min-width: 63.25rem) {\n  .Hero-expressive-header-column {\n    padding: var(--base-size-64);\n    padding-inline-end: var(--base-size-64);\n    border-block-end: none;\n    border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .Hero-expressive-body-column {\n    padding: var(--base-size-64);\n    padding-inline-start: var(--base-size-64);\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n  }\n\n  .Hero--variant-gridline-expressive .Hero-actions {\n    margin-block-start: var(--base-size-32);\n  }\n\n  .Hero--variant-gridline-expressive .Hero-trailing {\n    margin-block-start: var(--base-size-32);\n  }\n}\n\n/* Media wrapper styles for gridline-expressive (same as gridline) */\n.Hero--variant-gridline-expressive .Hero-imageWrapper {\n  border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  background-color: var(--brand-color-canvas-subtle);\n  width: 100%;\n}\n\n.Hero--variant-gridline-expressive .Hero-imageWrapper-inner {\n  width: 100%;\n  max-width: 1280px;\n  margin-inline: auto;\n  padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n@container (min-width: 1280px) {\n  .Hero--variant-gridline-expressive .Hero-imageWrapper-inner--with-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padded {\n  padding: var(--base-size-32);\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Hero--variant-gridline-expressive .Hero-imageWrapper-inner {\n    padding: var(--base-size-64) var(--base-size-64) 0;\n  }\n\n  .Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padded {\n    padding: var(--base-size-64);\n  }\n}\n\n/* Shared media styles for gridline-expressive */\n.Hero--variant-gridline-expressive .Hero-media {\n  max-width: 1176px;\n  margin-inline: auto;\n  display: block;\n  overflow: hidden;\n}\n\n.Hero--variant-gridline-expressive .Hero-media--pos-block-end,\n.Hero--variant-gridline-expressive .Hero-image:not(.Hero-media--pos-block-end-padded) {\n  border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n"],"mappings":""}

package/esm/Hero/HeroContext.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+export declare const HeroAlignOptions: readonly ["start", "center"];
+export type HeroAlign = (typeof HeroAlignOptions)[number];
+export declare const HeroVariantOptions: readonly ["default", "gridline", "gridline-expressive"];
+export type HeroVariant = (typeof HeroVariantOptions)[number];
+export declare const heroMediaPositions: readonly ["block-end", "block-end-padded", "inline-start", "inline-end", "inline-end-padded", "inline-start-padded"];
+export declare const heroMediaInlinePositions: ("inline-end" | "inline-start" | "block-end" | "block-end-padded" | "inline-end-padded" | "inline-start-padded")[];
+export type HeroMediaPositions = (typeof heroMediaPositions)[number];
+export type HeroMediaInlinePositions = (typeof heroMediaInlinePositions)[number];
+type HeroContextType = {
+    /**
+     * The active variant of the Hero component
+     */
+    variant: HeroVariant;
+    /**
+     * The alignment of the Hero content
+     */
+    align: HeroAlign;
+    /**
+     * Image position within the Hero
+     */
+    imagePosition: HeroMediaPositions;
+    /**
+     * Hero.Image is an inline media position
+     */
+    hasInlineMedia: boolean;
+    /**
+     * Whether animation is enabled for the Hero
+     */
+    enableAnimation: boolean;
+};
+export declare const HeroContext: React.Context<HeroContextType | undefined>;
+export declare const useHeroContext: () => HeroContextType;
+export {};
+//# sourceMappingURL=HeroContext.d.ts.map

package/esm/Hero/HeroContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroContext.d.ts","sourceRoot":"","sources":["../../src/Hero/HeroContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,eAAO,MAAM,gBAAgB,8BAA+B,CAAA;AAC5D,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEzD,eAAO,MAAM,kBAAkB,yDAA0D,CAAA;AACzF,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7D,eAAO,MAAM,kBAAkB,sHAOrB,CAAA;AACV,eAAO,MAAM,wBAAwB,oHAA8D,CAAA;AACnG,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AACpE,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEhF,KAAK,eAAe,GAAG;IACrB;;OAEG;IACH,OAAO,EAAE,WAAW,CAAA;IACpB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAA;IAChB;;OAEG;IACH,aAAa,EAAE,kBAAkB,CAAA;IACjC;;OAEG;IACH,cAAc,EAAE,OAAO,CAAA;IACvB;;OAEG;IACH,eAAe,EAAE,OAAO,CAAA;CACzB,CAAA;AAED,eAAO,MAAM,WAAW,4CAA8D,CAAA;AAEtF,eAAO,MAAM,cAAc,QAAO,eAOjC,CAAA"}

package/esm/Hero/HeroContext.js

@@ -0,0 +1,17 @@
+import e from "react";
+var t = [
+	"block-end",
+	"block-end-padded",
+	"inline-start",
+	"inline-end",
+	"inline-end-padded",
+	"inline-start-padded"
+].filter((e) => e.startsWith("inline-")), n = e.createContext(void 0), r = () => {
+	let t = e.useContext(n);
+	if (!t) throw Error("useHeroContext must be used within a HeroProvider");
+	return t;
+};
+//#endregion
+export { n as HeroContext, t as heroMediaInlinePositions, r as useHeroContext };
+
+//# sourceMappingURL=HeroContext.js.map

package/esm/Hero/HeroContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroContext.js","names":[],"sources":["../../src/Hero/HeroContext.ts"],"sourcesContent":["import React from 'react'\n\nexport const HeroAlignOptions = ['start', 'center'] as const\nexport type HeroAlign = (typeof HeroAlignOptions)[number]\n\nexport const HeroVariantOptions = ['default', 'gridline', 'gridline-expressive'] as const\nexport type HeroVariant = (typeof HeroVariantOptions)[number]\n\nexport const heroMediaPositions = [\n  'block-end',\n  'block-end-padded',\n  'inline-start',\n  'inline-end',\n  'inline-end-padded',\n  'inline-start-padded',\n] as const\nexport const heroMediaInlinePositions = heroMediaPositions.filter(pos => pos.startsWith('inline-'))\nexport type HeroMediaPositions = (typeof heroMediaPositions)[number]\nexport type HeroMediaInlinePositions = (typeof heroMediaInlinePositions)[number]\n\ntype HeroContextType = {\n  /**\n   * The active variant of the Hero component\n   */\n  variant: HeroVariant\n  /**\n   * The alignment of the Hero content\n   */\n  align: HeroAlign\n  /**\n   * Image position within the Hero\n   */\n  imagePosition: HeroMediaPositions\n  /**\n   * Hero.Image is an inline media position\n   */\n  hasInlineMedia: boolean\n  /**\n   * Whether animation is enabled for the Hero\n   */\n  enableAnimation: boolean\n}\n\nexport const HeroContext = React.createContext<HeroContextType | undefined>(undefined)\n\nexport const useHeroContext = (): HeroContextType => {\n  const context = React.useContext(HeroContext)\n  if (!context) {\n    throw new Error('useHeroContext must be used within a HeroProvider')\n  }\n\n  return context\n}\n"],"mappings":";AAgBA,IAAa,IAA2B;CAPtC;CACA;CACA;CACA;CACA;CACA;CAEsC,CAAmB,QAAO,MAAO,EAAI,WAAW,UAAU,CAAC,EA2BtF,IAAc,EAAM,cAA2C,KAAA,EAAU,EAEzE,UAAwC;CACnD,IAAM,IAAU,EAAM,WAAW,EAAY;AAC7C,KAAI,CAAC,EACH,OAAU,MAAM,oDAAoD;AAGtE,QAAO"}

package/esm/Hero/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Hero';
+//# sourceMappingURL=index.d.ts.map

package/esm/Hero/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Hero/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA"}