npm - @primer/react-brand - Versions diffs - 0.69.1-rc.0a4e5ff5 → 0.70.0-rc.11ae3568 - Mend

@primer/react-brand 0.69.1-rc.0a4e5ff5 → 0.70.0-rc.11ae3568

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

package/docs/typography/Text/react.md ADDED Viewed

@@ -0,0 +1,125 @@
+---
+title: Text
+description: Use the text component create a range of body text
+keywords: ['body', 'content', 'copy', 'paragraph']
+figma: 'https://www.figma.com/file/BJ95AjraesmRCWsKA013GS/Primer-Brand?node-id=354%3A9513'
+source: https://github.com/primer/brand/blob/main/packages/react/src/Text/Text.tsx
+storybook: '/brand/storybook/?path=/story/components-text--playground'
+---
+```js
+import {Text} from '@primer/react-brand'
+```
+## Examples
+### Default
+```jsx
+<Text>With GitHub Copilot, you’re always in charge.</Text>
+```
+### Scale
+```jsx
+<div>
+  {TextSizes.map(size => (
+    <Text key={size} size={size} as="p">
+      Text {size}
+    </Text>
+  ))}
+</div>
+```
+### Variants
+```jsx
+<div>
+  <Text as="p">With GitHub Copilot, you’re always in charge.</Text>
+  <Text as="p" variant="muted">
+    With GitHub Copilot, you’re always in charge.
+  </Text>
+</div>
+```
+### Alignment
+Use `align` to set the horizontal alignment of content inside a block element.
+```jsx
+<Stack direction="vertical">
+  <Text as="p" align="start">
+    Start
+  </Text>
+  <Text as="p" align="center">
+    Center
+  </Text>
+  <Text as="p" align="end">
+    End
+  </Text>
+</Stack>
+```
+### Polymorphism
+The `Text` component can render as a `span`, `p` or `div` HTML element.
+```jsx
+<Text as="p">With GitHub Copilot, you’re always in charge.</Text>
+```
+### Weight
+The recommended text weight is automatically applied through Text based on its position on the type scale.
+Use the `weight` prop to adjust the default visual appearance if required.
+```jsx
+<div>
+  <Text as="p" weight="heavy">
+    heavy
+  </Text>
+  <Text as="p" weight="extrabold">
+    extrabold
+  </Text>
+  <Text as="p" weight="bold">
+    bold
+  </Text>
+  <Text as="p" weight="semibold">
+    semibold
+  </Text>
+  <Text as="p" weight="medium">
+    medium
+  </Text>
+  <Text as="p" weight="regular">
+    regular
+  </Text>
+  <Text as="p" weight="light">
+    light
+  </Text>
+  {/* Responsive */}
+  <br />
+  <br />
+  <Text
+    as="p"
+    weight={{
+      narrow: 'heavy',
+      regular: 'semibold',
+      wide: 'light',
+    }}
+  >
+    Responsive
+  </Text>
+</div>
+```
+## Component props
+### Text
+| Name      | Type                                   |        Default       | Description                             |
+| :-------- | :------------------------------------- | :------------------: | :-------------------------------------- |
+| `as`      | `TextTags`                             |   `defaultTextTag`   | Applies the underlying HTML element     |
+| `size`    | `TextSizes`                            |   `defaultTextSize`  | Specify the text size                   |
+| `variant` | `TextVariants`                         | `defaultTextVariant` | Specify alternative text appearance     |
+| `weight`  | `TextWeights \| 'ResponsiveWeightMap'` |                      | Override the default visual text weight |

package/docs/typography/index.md ADDED Viewed

@@ -0,0 +1,8 @@
+---
+title: Typography
+---
+## In this section
+- [Heading](Heading/react.md): Use the heading component to render title or subtitle text.
+- [Text](Text/react.md): Use the text component create a range of body text

package/esm/Footnotes/{Footnotes.module-Du0yaz7E.css → Footnotes.module-DG9Vx76y.css} RENAMED Viewed

	@@ -1 +1 @@
1	- .Primer_Brand__Footnotes-module__Footnotes___Nejyn{padding-block:var(--base-size-80);gap:var(--base-size-24);flex-direction:column;display:flex}.Primer_Brand__Footnotes-module__Footnotes--variant-citations___CDvXV{font-family:var(--brand-body-fontFamily);font-weight:var(--brand-text-weight-100);font-size:var(--brand-text-size-100);line-height:var(--brand-text-lineHeight-100);letter-spacing:var(--brand-text-letterSpacing-100);color:var(--brand-color-text-muted);margin:0;padding-inline-start:var(--base-size-16)}.Primer_Brand__Footnotes-module__Footnotes--variant-citations___CDvXV .Primer_Brand__Footnotes-module__FootnotesItem___IfXmq{padding-inline-start:var(--base-size-12)}.Primer_Brand__Footnotes-module__FootnotesItem___IfXmq{scroll-margin-top:80px}.Primer_Brand__Footnotes-module__FootnotesItem__citationIcon___gBAZT{margin-inline-start:var(--base-size-4);transform:scaleY(-1)}.Primer_Brand__Footnotes-module__FootnotesItem__citationText___4Rjij{gap:var(--base-size-4);display:inline}
1	+ .Primer_Brand__Footnotes-module__Footnotes___Nejyn{padding-block:var(--base-size-80);gap:var(--base-size-12);flex-direction:column;display:flex}.Primer_Brand__Footnotes-module__Footnotes--variant-citations___CDvXV{font-family:var(--brand-body-fontFamily);font-weight:var(--brand-text-weight-100);font-size:var(--brand-text-size-100);line-height:var(--brand-text-lineHeight-100);letter-spacing:var(--brand-text-letterSpacing-100);color:var(--brand-color-text-muted);margin:0;padding-inline-start:var(--base-size-16)}.Primer_Brand__Footnotes-module__Footnotes--variant-citations___CDvXV .Primer_Brand__Footnotes-module__FootnotesItem___IfXmq{padding-inline-start:var(--base-size-12)}.Primer_Brand__Footnotes-module__FootnotesItem___IfXmq{scroll-margin-top:80px}.Primer_Brand__Footnotes-module__FootnotesItem__citationIcon___gBAZT{margin-inline-start:var(--base-size-4);transform:scaleY(-1)}.Primer_Brand__Footnotes-module__FootnotesItem__citationText___4Rjij{gap:var(--base-size-4);display:inline}

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

@@ -1,4 +1,4 @@
-import './Footnotes.module-Du0yaz7E.css';var e = {
+import './Footnotes.module-DG9Vx76y.css';var e = {
 	Footnotes: "Primer_Brand__Footnotes-module__Footnotes___Nejyn",
 	"Footnotes--variant-citations": "Primer_Brand__Footnotes-module__Footnotes--variant-citations___CDvXV",
 	FootnotesItem: "Primer_Brand__Footnotes-module__FootnotesItem___IfXmq",

package/esm/Footnotes/Footnotes.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Footnotes.module.js","names":[],"sources":["../../src/Footnotes/Footnotes.module.css"],"sourcesContent":[".Footnotes {\n padding-block: var(--base-size-80);\n display: flex;\n flex-direction: column;\n gap: var(--base-size-24);\n}\n\n.Footnotes--variant-citations {\n margin: 0;\n padding-inline-start: var(--base-size-16);\n font-family: var(--brand-body-fontFamily);\n font-weight: var(--brand-text-weight-100);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n letter-spacing: var(--brand-text-letterSpacing-100);\n color: var(--brand-color-text-muted);\n}\n\n.Footnotes--variant-citations .FootnotesItem {\n padding-inline-start: var(--base-size-12);\n}\n\n.FootnotesItem {\n scroll-margin-top: 80px;\n}\n\n.FootnotesItem__citationIcon {\n transform: scaleY(-1);\n margin-inline-start: var(--base-size-4);\n}\n\n.FootnotesItem__citationText {\n display: inline;\n gap: var(--base-size-4);\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Footnotes.module.js","names":[],"sources":["../../src/Footnotes/Footnotes.module.css"],"sourcesContent":[".Footnotes {\n padding-block: var(--base-size-80);\n display: flex;\n flex-direction: column;\n gap: var(--base-size-12);\n}\n\n.Footnotes--variant-citations {\n margin: 0;\n padding-inline-start: var(--base-size-16);\n font-family: var(--brand-body-fontFamily);\n font-weight: var(--brand-text-weight-100);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n letter-spacing: var(--brand-text-letterSpacing-100);\n color: var(--brand-color-text-muted);\n}\n\n.Footnotes--variant-citations .FootnotesItem {\n padding-inline-start: var(--base-size-12);\n}\n\n.FootnotesItem {\n scroll-margin-top: 80px;\n}\n\n.FootnotesItem__citationIcon {\n transform: scaleY(-1);\n margin-inline-start: var(--base-size-4);\n}\n\n.FootnotesItem__citationText {\n display: inline;\n gap: var(--base-size-4);\n}\n"],"mappings":""}

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

@@ -37,7 +37,14 @@ export declare const classMap: {
     h6: "6";
 };
 export type HeadingProps = {
+    /** Semantic heading level (`h1`–`h6`) only. Use `size` to apply the correct visual size. */
     as?: (typeof HeadingTags)[number];
+    /**
+     * Controls the visual size, independent of `as`. Should be used whenever as prop is used, as the defaults may not be ideal for all use-cases.
+     *
+     * @example
+     * <Heading as="h2" size="4">This h2 will appear visually identical to an h4</Heading>
+     */
     size?: (typeof HeadingSizes)[number];
     weight?: HeadingWeightVariants | ResponsiveWeightMap;
     stretch?: HeadingStretchVariants | ResponsiveStretchMap;
@@ -45,6 +52,9 @@ export type HeadingProps = {
     font?: HeadingFontVariants;
     textWrap?: HeadingTextWrapVariants;
 } & React.HTMLAttributes<HTMLHeadingElement> & BaseProps<HTMLHeadingElement>;
+/**
+ * Use the heading component to render titles or subtitle text.
+ */
 export declare const Heading: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<HeadingProps>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 export {};
 //# sourceMappingURL=Heading.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/Heading/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAA;AAGnE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAGnD,eAAO,MAAM,YAAY,uFAAwF,CAAA;AACjH,eAAO,MAAM,WAAW,+CAAgD,CAAA;AAExE,eAAO,MAAM,cAAc,gGASjB,CAAA;AACV,eAAO,MAAM,cAAc,8CAA+C,CAAA;AAC1E,eAAO,MAAM,oBAAoB,0CAA2C,CAAA;AAC5E,eAAO,MAAM,mBAAmB,mDAAoD,CAAA;AAEpF,eAAO,MAAM,iBAAiB,MAAiB,CAAA;AAC/C,eAAO,MAAM,kBAAkB,aAAyB,CAAA;AAExD,KAAK,qBAAqB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAC5D,KAAK,sBAAsB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,KAAK,4BAA4B,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAA;AACzE,KAAK,mBAAmB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC/D,KAAK,uBAAuB,GAAG,MAAM,GAAG,SAAS,CAAA;AAEjD,KAAK,oBAAoB,GAAG;IAC1B,MAAM,CAAC,EAAE,sBAAsB,CAAA;IAC/B,OAAO,CAAC,EAAE,sBAAsB,CAAA;IAChC,IAAI,CAAC,EAAE,sBAAsB,CAAA;CAC9B,CAAA;AAED,KAAK,0BAA0B,GAAG;IAChC,MAAM,CAAC,EAAE,4BAA4B,CAAA;IACrC,OAAO,CAAC,EAAE,4BAA4B,CAAA;IACtC,IAAI,CAAC,EAAE,4BAA4B,CAAA;CACpC,CAAA;AAED,KAAK,mBAAmB,GAAG;IACzB,MAAM,CAAC,EAAE,qBAAqB,CAAA;IAC9B,OAAO,CAAC,EAAE,qBAAqB,CAAA;IAC/B,IAAI,CAAC,EAAE,qBAAqB,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,QAAQ;;;;;;;CAOpB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,CAAC,EAAE,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;IACjC,IAAI,CAAC,EAAE,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;IACpC,MAAM,CAAC,EAAE,qBAAqB,GAAG,mBAAmB,CAAA;IACpD,OAAO,CAAC,EAAE,sBAAsB,GAAG,oBAAoB,CAAA;IACvD,aAAa,CAAC,EAAE,4BAA4B,GAAG,0BAA0B,CAAA;IACzE,IAAI,CAAC,EAAE,mBAAmB,CAAA;IAC1B,QAAQ,CAAC,EAAE,uBAAuB,CAAA;CACnC,GAAG,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,GAC1C,SAAS,CAAC,kBAAkB,CAAC,CAAA;AAE/B,eAAO,MAAM,OAAO,+HA4DnB,CAAA"}
1	+ {"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/Heading/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAA;AAGnE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAGnD,eAAO,MAAM,YAAY,uFAAwF,CAAA;AACjH,eAAO,MAAM,WAAW,+CAAgD,CAAA;AAExE,eAAO,MAAM,cAAc,gGASjB,CAAA;AACV,eAAO,MAAM,cAAc,8CAA+C,CAAA;AAC1E,eAAO,MAAM,oBAAoB,0CAA2C,CAAA;AAC5E,eAAO,MAAM,mBAAmB,mDAAoD,CAAA;AAEpF,eAAO,MAAM,iBAAiB,MAAiB,CAAA;AAC/C,eAAO,MAAM,kBAAkB,aAAyB,CAAA;AAExD,KAAK,qBAAqB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAC5D,KAAK,sBAAsB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,KAAK,4BAA4B,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAA;AACzE,KAAK,mBAAmB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC/D,KAAK,uBAAuB,GAAG,MAAM,GAAG,SAAS,CAAA;AAEjD,KAAK,oBAAoB,GAAG;IAC1B,MAAM,CAAC,EAAE,sBAAsB,CAAA;IAC/B,OAAO,CAAC,EAAE,sBAAsB,CAAA;IAChC,IAAI,CAAC,EAAE,sBAAsB,CAAA;CAC9B,CAAA;AAED,KAAK,0BAA0B,GAAG;IAChC,MAAM,CAAC,EAAE,4BAA4B,CAAA;IACrC,OAAO,CAAC,EAAE,4BAA4B,CAAA;IACtC,IAAI,CAAC,EAAE,4BAA4B,CAAA;CACpC,CAAA;AAED,KAAK,mBAAmB,GAAG;IACzB,MAAM,CAAC,EAAE,qBAAqB,CAAA;IAC9B,OAAO,CAAC,EAAE,qBAAqB,CAAA;IAC/B,IAAI,CAAC,EAAE,qBAAqB,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,QAAQ;;;;;;;CAOpB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,4FAA4F;IAC5F,EAAE,CAAC,EAAE,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;IACjC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;IACpC,MAAM,CAAC,EAAE,qBAAqB,GAAG,mBAAmB,CAAA;IACpD,OAAO,CAAC,EAAE,sBAAsB,GAAG,oBAAoB,CAAA;IACvD,aAAa,CAAC,EAAE,4BAA4B,GAAG,0BAA0B,CAAA;IACzE,IAAI,CAAC,EAAE,mBAAmB,CAAA;IAC1B,QAAQ,CAAC,EAAE,uBAAuB,CAAA;CACnC,GAAG,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,GAC1C,SAAS,CAAC,kBAAkB,CAAC,CAAA;AAE/B;;GAEG;AACH,eAAO,MAAM,OAAO,+HA4DnB,CAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Heading.js","names":[],"sources":["../../src/Heading/Heading.tsx"],"sourcesContent":["import React, {PropsWithChildren, forwardRef, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport styles from './Heading.module.css'\nimport type {BaseProps} from '../component-helpers'\nimport {useAnimation} from '../animation'\n\nexport const HeadingSizes = ['display', '1', '2', '3', '4', '5', '6', 'subhead-large', 'subhead-medium'] as const\nexport const HeadingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const\n\nexport const HeadingWeights = [\n 'heavy',\n 'extrabold',\n 'bold',\n 'semibold',\n 'medium',\n 'normal',\n 'light',\n 'extralight',\n] as const\nexport const HeadingStretch = ['condensed', 'normal', 'expanded'] as const\nexport const HeadingLetterSpacing = ['condensed', 'normal', 'none'] as const\nexport const HeadingFontVariants = ['mona-sans', 'hubot-sans', 'monospace'] as const\n\nexport const defaultHeadingTag = HeadingTags[1]\nexport const defaultHeadingFont = HeadingFontVariants[0]\n\ntype HeadingWeightVariants = (typeof HeadingWeights)[number]\ntype HeadingStretchVariants = (typeof HeadingStretch)[number]\ntype HeadingLetterSpacingVariants = (typeof HeadingLetterSpacing)[number]\ntype HeadingFontVariants = (typeof HeadingFontVariants)[number]\ntype HeadingTextWrapVariants = 'wrap' \| 'balance'\n\ntype ResponsiveStretchMap = {\n narrow?: HeadingStretchVariants\n regular?: HeadingStretchVariants\n wide?: HeadingStretchVariants\n}\n\ntype ResponsiveLetterSpacingMap = {\n narrow?: HeadingLetterSpacingVariants\n regular?: HeadingLetterSpacingVariants\n wide?: HeadingLetterSpacingVariants\n}\n\ntype ResponsiveWeightMap = {\n narrow?: HeadingWeightVariants\n regular?: HeadingWeightVariants\n wide?: HeadingWeightVariants\n}\n\nexport const classMap = {\n h1: HeadingSizes[1],\n h2: HeadingSizes[2],\n h3: HeadingSizes[3],\n h4: HeadingSizes[4],\n h5: HeadingSizes[5],\n h6: HeadingSizes[6],\n}\n\nexport type HeadingProps = {\n as?: (typeof HeadingTags)[number]\n size?: (typeof HeadingSizes)[number]\n weight?: HeadingWeightVariants \| ResponsiveWeightMap\n stretch?: HeadingStretchVariants \| ResponsiveStretchMap\n letterSpacing?: HeadingLetterSpacingVariants \| ResponsiveLetterSpacingMap\n font?: HeadingFontVariants\n textWrap?: HeadingTextWrapVariants\n} & React.HTMLAttributes<HTMLHeadingElement> &\n BaseProps<HTMLHeadingElement>\n\nexport const Heading = forwardRef<HTMLHeadingElement, PropsWithChildren<HeadingProps>>(\n (\n {\n animate,\n className,\n children,\n as: HeadingComponent = defaultHeadingTag,\n size,\n letterSpacing,\n weight,\n stretch,\n style,\n font = 'mona-sans',\n textWrap = 'balance',\n ...rest\n },\n ref,\n ) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const buildClass = (type: string, value) => {\n if (!value) return null\n return typeof value === 'string'\n ? styles[`Heading--${type}-${value}`]\n : Object.keys(value)\n .map(viewport => {\n return styles[`Heading-${viewport}--${type}-${value[viewport]}`]\n })\n .join(' ')\n }\n\n const weightClass = useMemo(() => buildClass('weight', weight), [weight])\n const stretchClass = useMemo(() => buildClass('stretch', stretch), [stretch])\n const letterSpacingClass = useMemo(() => buildClass('letter-spacing', letterSpacing), [letterSpacing])\n\n const headingClassNames = clsx(\n animationClasses,\n styles.Heading,\n styles[`Heading-font--${font}`],\n !size && styles[`Heading--${classMap[HeadingComponent]}`],\n size && styles[`Heading--${size}`],\n styles[`Heading--textWrap-${textWrap}`],\n weight && weightClass,\n stretch && stretchClass,\n letterSpacingClass && letterSpacingClass,\n className,\n )\n\n if (!HeadingTags.includes(HeadingComponent)) {\n // eslint-disable-next-line no-console\n console.error(`Heading: 'as' prop must be one of ${HeadingTags.join(', ')}`)\n return null\n }\n\n return (\n <HeadingComponent ref={ref} className={headingClassNames} style={{...animationInlineStyles, ...style}} {...rest}>\n {children}\n </HeadingComponent>\n )\n },\n)\n"],"mappings":";;;;;;AAMA,IAAa,IAAe;CAAC;CAAW;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAiB;CAAiB,EAC3F,IAAc;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;CAAK,EAElD,IAAiB;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACY,IAAiB;CAAC;CAAa;CAAU;CAAW,EACpD,IAAuB;CAAC;CAAa;CAAU;CAAO,EACtD,IAAsB;CAAC;CAAa;CAAc;CAAY,EAE9D,IAAoB,EAAY,IAChC,IAAqB,EAAoB,IA0BzC,IAAW;CACtB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;CAClB,~~EAaY~~,IAAU,GAEnB,EACE,YACA,cACA,aACA,IAAI,IAAmB,GACvB,SACA,kBACA,WACA,YACA,UACA,UAAO,aACP,cAAW,WACX,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,KAAc,GAAc,MAC3B,IACE,OAAO,KAAU,WACpB,EAAO,YAAY,EAAK,GAAG,OAC3B,OAAO,KAAK,EAAM,CACf,KAAI,MACI,EAAO,WAAW,EAAS,IAAI,EAAK,GAAG,EAAM,MACpD,CACD,KAAK,IAAI,GAPG,MAUf,IAAc,QAAc,EAAW,UAAU,EAAO,EAAE,CAAC,EAAO,CAAC,EACnE,IAAe,QAAc,EAAW,WAAW,EAAQ,EAAE,CAAC,EAAQ,CAAC,EACvE,IAAqB,QAAc,EAAW,kBAAkB,EAAc,EAAE,CAAC,EAAc,CAAC,EAEhG,IAAoB,EACxB,GACA,EAAO,SACP,EAAO,iBAAiB,MACxB,CAAC,KAAQ,EAAO,YAAY,EAAS,OACrC,KAAQ,EAAO,YAAY,MAC3B,EAAO,qBAAqB,MAC5B,KAAU,GACV,KAAW,GACX,KAAsB,GACtB,EACD;AAQD,QANK,EAAY,SAAS,EAAiB,GAOzC,kBAAC,GAAD;EAAuB;EAAK,WAAW;EAAmB,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAAE,GAAI;EACxG;EACgB,CAAA,IAPnB,QAAQ,MAAM,qCAAqC,EAAY,KAAK,KAAK,GAAG,EACrE;EASZ"}
1	+ {"version":3,"file":"Heading.js","names":[],"sources":["../../src/Heading/Heading.tsx"],"sourcesContent":["import React, {PropsWithChildren, forwardRef, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport styles from './Heading.module.css'\nimport type {BaseProps} from '../component-helpers'\nimport {useAnimation} from '../animation'\n\nexport const HeadingSizes = ['display', '1', '2', '3', '4', '5', '6', 'subhead-large', 'subhead-medium'] as const\nexport const HeadingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const\n\nexport const HeadingWeights = [\n 'heavy',\n 'extrabold',\n 'bold',\n 'semibold',\n 'medium',\n 'normal',\n 'light',\n 'extralight',\n] as const\nexport const HeadingStretch = ['condensed', 'normal', 'expanded'] as const\nexport const HeadingLetterSpacing = ['condensed', 'normal', 'none'] as const\nexport const HeadingFontVariants = ['mona-sans', 'hubot-sans', 'monospace'] as const\n\nexport const defaultHeadingTag = HeadingTags[1]\nexport const defaultHeadingFont = HeadingFontVariants[0]\n\ntype HeadingWeightVariants = (typeof HeadingWeights)[number]\ntype HeadingStretchVariants = (typeof HeadingStretch)[number]\ntype HeadingLetterSpacingVariants = (typeof HeadingLetterSpacing)[number]\ntype HeadingFontVariants = (typeof HeadingFontVariants)[number]\ntype HeadingTextWrapVariants = 'wrap' \| 'balance'\n\ntype ResponsiveStretchMap = {\n narrow?: HeadingStretchVariants\n regular?: HeadingStretchVariants\n wide?: HeadingStretchVariants\n}\n\ntype ResponsiveLetterSpacingMap = {\n narrow?: HeadingLetterSpacingVariants\n regular?: HeadingLetterSpacingVariants\n wide?: HeadingLetterSpacingVariants\n}\n\ntype ResponsiveWeightMap = {\n narrow?: HeadingWeightVariants\n regular?: HeadingWeightVariants\n wide?: HeadingWeightVariants\n}\n\nexport const classMap = {\n h1: HeadingSizes[1],\n h2: HeadingSizes[2],\n h3: HeadingSizes[3],\n h4: HeadingSizes[4],\n h5: HeadingSizes[5],\n h6: HeadingSizes[6],\n}\n\nexport type HeadingProps = {\n /** Semantic heading level (`h1`–`h6`) only. Use `size` to apply the correct visual size. /\n as?: (typeof HeadingTags)[number]\n /\n Controls the visual size, independent of `as`. Should be used whenever as prop is used, as the defaults may not be ideal for all use-cases.\n \n @example\n * <Heading as=\"h2\" size=\"4\">This h2 will appear visually identical to an h4</Heading>\n /\n size?: (typeof HeadingSizes)[number]\n weight?: HeadingWeightVariants \| ResponsiveWeightMap\n stretch?: HeadingStretchVariants \| ResponsiveStretchMap\n letterSpacing?: HeadingLetterSpacingVariants \| ResponsiveLetterSpacingMap\n font?: HeadingFontVariants\n textWrap?: HeadingTextWrapVariants\n} & React.HTMLAttributes<HTMLHeadingElement> &\n BaseProps<HTMLHeadingElement>\n\n/\n Use the heading component to render titles or subtitle text.\n */\nexport const Heading = forwardRef<HTMLHeadingElement, PropsWithChildren<HeadingProps>>(\n (\n {\n animate,\n className,\n children,\n as: HeadingComponent = defaultHeadingTag,\n size,\n letterSpacing,\n weight,\n stretch,\n style,\n font = 'mona-sans',\n textWrap = 'balance',\n ...rest\n },\n ref,\n ) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const buildClass = (type: string, value) => {\n if (!value) return null\n return typeof value === 'string'\n ? styles[`Heading--${type}-${value}`]\n : Object.keys(value)\n .map(viewport => {\n return styles[`Heading-${viewport}--${type}-${value[viewport]}`]\n })\n .join(' ')\n }\n\n const weightClass = useMemo(() => buildClass('weight', weight), [weight])\n const stretchClass = useMemo(() => buildClass('stretch', stretch), [stretch])\n const letterSpacingClass = useMemo(() => buildClass('letter-spacing', letterSpacing), [letterSpacing])\n\n const headingClassNames = clsx(\n animationClasses,\n styles.Heading,\n styles[`Heading-font--${font}`],\n !size && styles[`Heading--${classMap[HeadingComponent]}`],\n size && styles[`Heading--${size}`],\n styles[`Heading--textWrap-${textWrap}`],\n weight && weightClass,\n stretch && stretchClass,\n letterSpacingClass && letterSpacingClass,\n className,\n )\n\n if (!HeadingTags.includes(HeadingComponent)) {\n // eslint-disable-next-line no-console\n console.error(`Heading: 'as' prop must be one of ${HeadingTags.join(', ')}`)\n return null\n }\n\n return (\n <HeadingComponent ref={ref} className={headingClassNames} style={{...animationInlineStyles, ...style}} {...rest}>\n {children}\n </HeadingComponent>\n )\n },\n)\n"],"mappings":";;;;;;AAMA,IAAa,IAAe;CAAC;CAAW;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAiB;CAAiB,EAC3F,IAAc;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;CAAK,EAElD,IAAiB;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACY,IAAiB;CAAC;CAAa;CAAU;CAAW,EACpD,IAAuB;CAAC;CAAa;CAAU;CAAO,EACtD,IAAsB;CAAC;CAAa;CAAc;CAAY,EAE9D,IAAoB,EAAY,IAChC,IAAqB,EAAoB,IA0BzC,IAAW;CACtB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;CAClB,EAuBY,IAAU,GAEnB,EACE,YACA,cACA,aACA,IAAI,IAAmB,GACvB,SACA,kBACA,WACA,YACA,UACA,UAAO,aACP,cAAW,WACX,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,KAAc,GAAc,MAC3B,IACE,OAAO,KAAU,WACpB,EAAO,YAAY,EAAK,GAAG,OAC3B,OAAO,KAAK,EAAM,CACf,KAAI,MACI,EAAO,WAAW,EAAS,IAAI,EAAK,GAAG,EAAM,MACpD,CACD,KAAK,IAAI,GAPG,MAUf,IAAc,QAAc,EAAW,UAAU,EAAO,EAAE,CAAC,EAAO,CAAC,EACnE,IAAe,QAAc,EAAW,WAAW,EAAQ,EAAE,CAAC,EAAQ,CAAC,EACvE,IAAqB,QAAc,EAAW,kBAAkB,EAAc,EAAE,CAAC,EAAc,CAAC,EAEhG,IAAoB,EACxB,GACA,EAAO,SACP,EAAO,iBAAiB,MACxB,CAAC,KAAQ,EAAO,YAAY,EAAS,OACrC,KAAQ,EAAO,YAAY,MAC3B,EAAO,qBAAqB,MAC5B,KAAU,GACV,KAAW,GACX,KAAsB,GACtB,EACD;AAQD,QANK,EAAY,SAAS,EAAiB,GAOzC,kBAAC,GAAD;EAAuB;EAAK,WAAW;EAAmB,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAAE,GAAI;EACxG;EACgB,CAAA,IAPnB,QAAQ,MAAM,qCAAqC,EAAY,KAAK,KAAK,GAAG,EACrE;EASZ"}

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;~~AAsQD~~,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,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"}

package/esm/Hero/Hero.js CHANGED Viewed

@@ -1,20 +1,20 @@
 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 { 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 '../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 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";
 //#region src/Hero/Hero.tsx
 var b = {
@@ -28,9 +28,9 @@ var b = {
 	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), {
+}, 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), {
 			HeroActions: [],
 			HeroChildren: [],
 			HeroImageChild: void 0,
@@ -39,69 +39,71 @@ var b = {
 			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 ? {
+	}, [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;
+	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 ? {
 		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, {
+	} : {}, 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, {
 		animate: e ? {
 			variant: "slide-in-up",
 			delay: 1e3,
 			duration: 1e3
 		} : void 0,
 		children: /* @__PURE__ */ v("div", {
-			className: o["Hero-trailing"],
+			className: i["Hero-trailing"],
 			children: /* @__PURE__ */ v(O, {})
 		})
-	}), $ = () => M.length > 0 && /* @__PURE__ */ v("div", {
-		className: o["Hero-actions"],
-		children: M
+	}), $ = () => N.length > 0 && /* @__PURE__ */ v("div", {
+		className: i["Hero-actions"],
+		children: N
 	});
-	return /* @__PURE__ */ v(q, {
-		...J,
-		children: /* @__PURE__ */ v(i.Provider, {
+	return /* @__PURE__ */ v(ae, {
+		...oe,
+		children: /* @__PURE__ */ v(ne.Provider, {
 			value: {
-				imagePosition: R,
+				imagePosition: z,
 				variant: D,
-				align: x,
+				align: J,
 				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,
+				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,
 				"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"]),
+					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, {
 						span: {
 							medium: 12,
-							large: I ? 7 : 6
+							large: L ? 7 : 6
 						},
-						className: o["Hero-expressive-header-column"],
-						children: /* @__PURE__ */ v(r, {
+						className: i["Hero-expressive-header-column"],
+						children: /* @__PURE__ */ v(n, {
 							direction: "vertical",
 							gap: "none",
 							padding: "none",
 							alignItems: "flex-start",
-							children: ie
+							children: I
 						})
 					}), /* @__PURE__ */ v(t.Column, {
 						span: {
 							medium: 12,
-							large: I ? 5 : 6
+							large: L ? 5 : 6
 						},
-						className: o["Hero-expressive-body-column"],
-						children: /* @__PURE__ */ y(r, {
+						className: i["Hero-expressive-body-column"],
+						children: /* @__PURE__ */ y(n, {
 							direction: "vertical",
 							gap: "none",
 							padding: "none",
 							alignItems: "flex-start",
 							children: [
-								I,
+								L,
 								$(),
 								Q(k)
 							]
@@ -110,24 +112,24 @@ var b = {
 						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"]),
+							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(o["Hero-mediaContainer"], C),
+								className: e(i["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"]),
+							children: /* @__PURE__ */ y(n, {
+								className: e(X && i["Hero-text-column--inline-gridline"], X && i["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",
+								alignItems: B || J === "start" ? "flex-start" : "center",
+								justifyContent: B ? void 0 : J === "start" ? "flex-start" : "center",
 								children: [
-									N,
+									re,
 									$(),
 									Q(U && k)
 								]
@@ -136,9 +138,9 @@ var b = {
 						!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"]),
+							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(o["Hero-mediaContainer"], C),
+								className: e(i["Hero-mediaContainer"], C),
 								style: w,
 								children: H
 							})
@@ -147,10 +149,10 @@ var b = {
 				}), 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}`]),
+					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(o["Hero-imageWrapper-inner"], K && o["Hero-imageWrapper-inner--padded"], z && o["Hero-imageWrapper-inner--with-gridline"]),
+						className: e(i["Hero-imageWrapper-inner"], K && i["Hero-imageWrapper-inner--padded"], ie && i["Hero-imageWrapper-inner--with-gridline"]),
 						children: H
 					})
 				})]
@@ -158,14 +160,14 @@ var b = {
 		})
 	});
 }), S = Object.assign(x, {
-	Heading: c,
-	Description: l,
-	PrimaryAction: p,
-	SecondaryAction: m,
-	Image: u,
-	Video: d,
-	Label: s,
-	Eyebrow: f,
+	Heading: o,
+	Description: s,
+	PrimaryAction: d,
+	SecondaryAction: f,
+	Image: c,
+	Video: l,
+	Label: a,
+	Eyebrow: u,
 	testIds: b
 });
 //#endregion

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 = '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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"}
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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"}

package/esm/Hero/{Hero.module-Cy82CEW3.css → Hero.module-DqG5f0MT.css} RENAMED Viewed

	@@ -1 +1 @@
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: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--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{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-28)}.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);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}
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: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--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);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 CHANGED Viewed

@@ -1,4 +1,4 @@
-import './Hero.module-Cy82CEW3.css';var e = {
+import './Hero.module-DqG5f0MT.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",