npm - @primer/react-brand - Versions diffs - 0.72.0-rc.f8b72452 → 0.72.1-rc.8a8dc720 - Mend

@primer/react-brand 0.72.0-rc.f8b72452 → 0.72.1-rc.8a8dc720

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

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

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

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

@@ -0,0 +1 @@

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

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

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

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

	@@ -1 +1 @@
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-image > img {\n border-radius: inherit;\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: calc(var(--base-size-16) - var(--base-size-2));\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-28);\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-36);\n padding-inline: var(--base-size-20);\n padding-block-end: var(--base-size-28);\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-inline: var(--base-size-20);\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-28);\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-24);\n }\n\n .Hero--variant-gridline-expressive .Hero-trailing {\n margin-block-start: var(--base-size-20);\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":""}
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-image > img {\n border-radius: inherit;\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-padding-all {\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 display: flex;\n align-items: stretch;\n}\n\n.Hero-imageContainer--inline-bordered:not(.Hero-imageContainer--inline-padding-none) {\n background-color: var(--brand-color-canvas-subtle);\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-padding-all {\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:not(.Hero-media--padding-all):not(.Hero-media--padding-none) {\n border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n\n.Hero-media--pos-block-end.Hero-media--padding-all {\n border-radius: var(--brand-borderRadius-medium);\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 width: 100%;\n}\n\n.Hero--variant-gridline .Hero-imageWrapper:not(.Hero-imageWrapper--padding-none) {\n background-color: var(--brand-color-canvas-subtle);\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--padding-all {\n padding: var(--base-size-32);\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--padding-all {\n padding: var(--base-size-64);\n }\n}\n\n.Hero--variant-gridline .Hero-imageWrapper-inner--padding-none {\n padding: 0;\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--padding-all) {\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.Hero-media--padding-all {\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: calc(var(--base-size-16) - var(--base-size-2));\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-28);\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 .Hero-actions > {\n flex-grow: 0;\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-trailing :is(img, picture) {\n display: block;\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-36);\n padding-inline: var(--base-size-20);\n padding-block-end: var(--base-size-28);\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-inline: var(--base-size-20);\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-28);\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-24);\n }\n\n .Hero--variant-gridline-expressive .Hero-trailing {\n margin-block-start: var(--base-size-20);\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 width: 100%;\n}\n\n.Hero--variant-gridline-expressive .Hero-imageWrapper:not(.Hero-imageWrapper--padding-none) {\n background-color: var(--brand-color-canvas-subtle);\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--padding-all {\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--padding-all {\n padding: var(--base-size-64);\n }\n}\n\n.Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padding-none {\n padding: 0;\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\n .Hero-media--pos-block-end:not(.Hero-media--padding-all):not(.Hero-media--padding-none) {\n border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n\n.Hero--variant-gridline .Hero-media--padding-none,\n.Hero--variant-gridline-expressive .Hero-media--padding-none {\n border-radius: 0;\n max-width: 100%;\n}\n"],"mappings":""}

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

@@ -3,10 +3,12 @@ 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];
+export declare const HeroMediaPaddingOptions: readonly ["default", "none", "all"];
+export type HeroMediaPadding = (typeof HeroMediaPaddingOptions)[number];
+export declare const HeroMediaPositionOptions: readonly ["block-end", "inline-start", "inline-end"];
+export declare const HeroMediaInlinePositionOptions: readonly ["inline-start", "inline-end"];
+export type HeroMediaPosition = (typeof HeroMediaPositionOptions)[number];
+export type HeroMediaInlinePosition = (typeof HeroMediaInlinePositionOptions)[number];
 type HeroContextType = {
     /**
      * The active variant of the Hero component
@@ -19,7 +21,7 @@ type HeroContextType = {
     /**
      * Image position within the Hero
      */
-    imagePosition: HeroMediaPositions;
+    imagePosition: HeroMediaPosition;
     /**
      * Hero.Image is an inline media position
      */

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

	@@ -1 +1 @@
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"}
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,uBAAuB,qCAAsC,CAAA;AAC1E,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEvE,eAAO,MAAM,wBAAwB,sDAAuD,CAAA;AAC5F,eAAO,MAAM,8BAA8B,yCAA0C,CAAA;AACrF,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAA;AACzE,MAAM,MAAM,uBAAuB,GAAG,CAAC,OAAO,8BAA8B,CAAC,CAAC,MAAM,CAAC,CAAA;AAErF,KAAK,eAAe,GAAG;IACrB;;OAEG;IACH,OAAO,EAAE,WAAW,CAAA;IACpB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAA;IAChB;;OAEG;IACH,aAAa,EAAE,iBAAiB,CAAA;IAChC;;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 CHANGED Viewed

@@ -1,17 +1,11 @@
 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 = () => {
+//#region src/Hero/HeroContext.ts
+var t = ["inline-start", "inline-end"], 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 };
+export { n as HeroContext, t as HeroMediaInlinePositionOptions, r as useHeroContext };
 //# sourceMappingURL=HeroContext.js.map

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

	@@ -1 +1 @@
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"}
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 HeroMediaPaddingOptions = ['default', 'none', 'all'] as const\nexport type HeroMediaPadding = (typeof HeroMediaPaddingOptions)[number]\n\nexport const HeroMediaPositionOptions = ['block-end', 'inline-start', 'inline-end'] as const\nexport const HeroMediaInlinePositionOptions = ['inline-start', 'inline-end'] as const\nexport type HeroMediaPosition = (typeof HeroMediaPositionOptions)[number]\nexport type HeroMediaInlinePosition = (typeof HeroMediaInlinePositionOptions)[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: HeroMediaPosition\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":";;AAYA,IAAa,IAAiC,CAAC,gBAAgB,aAAa,EA2B/D,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/sub-components/HeroButtonGroup.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ButtonGroup } from '../../ButtonGroup';
+export type HeroButtonGroupProps = React.ComponentProps<typeof ButtonGroup>;
+export declare const HeroButtonGroup: React.ForwardRefExoticComponent<Omit<Omit<import("../..").ButtonGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=HeroButtonGroup.d.ts.map

package/esm/Hero/sub-components/HeroButtonGroup.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"HeroButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/Hero/sub-components/HeroButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAA;AAK7C,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,CAAA;AAE3E,eAAO,MAAM,eAAe,yKAyB3B,CAAA"}

package/esm/Hero/sub-components/HeroButtonGroup.js ADDED Viewed

@@ -0,0 +1,28 @@
+import e from "../../node_modules/clsx/dist/clsx.js";
+import { Box as t } from "../../Box/Box.js";
+import { useHeroContext as n } from "../HeroContext.js";
+import r from "../Hero.module.js";
+import { ButtonGroup as i } from "../../ButtonGroup/ButtonGroup.js";
+import a, { forwardRef as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/Hero/sub-components/HeroButtonGroup.tsx
+var c = o(({ className: o, children: c, ...l }, u) => {
+	let { variant: d, enableAnimation: f } = n(), p = d === "gridline" || d === "gridline-expressive";
+	return /* @__PURE__ */ s(p ? t : a.Fragment, {
+		...p ? { animate: f ? {
+			variant: "slide-in-up",
+			delay: 750,
+			duration: 1e3
+		} : void 0 } : {},
+		children: /* @__PURE__ */ s(i, {
+			ref: u,
+			className: e(r["Hero-actions"], o),
+			...l,
+			children: c
+		})
+	});
+});
+//#endregion
+export { c as HeroButtonGroup };
+//# sourceMappingURL=HeroButtonGroup.js.map

package/esm/Hero/sub-components/HeroButtonGroup.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"HeroButtonGroup.js","names":[],"sources":["../../../src/Hero/sub-components/HeroButtonGroup.tsx"],"sourcesContent":["import React, {forwardRef} from 'react'\nimport {clsx} from 'clsx'\nimport {Box} from '../../Box'\nimport {ButtonGroup} from '../../ButtonGroup'\nimport {useHeroContext} from '../HeroContext'\n\nimport styles from '../Hero.module.css'\n\nexport type HeroButtonGroupProps = React.ComponentProps<typeof ButtonGroup>\n\nexport const HeroButtonGroup = forwardRef<HTMLDivElement, HeroButtonGroupProps>(\n ({className, children, ...props}, ref) => {\n const {variant, enableAnimation} = useHeroContext()\n const isGridline = variant === 'gridline' || variant === 'gridline-expressive'\n const Tag = isGridline ? Box : React.Fragment\n const tagProps = isGridline\n ? {\n animate: enableAnimation\n ? {\n variant: 'slide-in-up' as const,\n delay: 750,\n duration: 1000,\n }\n : undefined,\n }\n : {}\n\n return (\n <Tag {...tagProps}>\n <ButtonGroup ref={ref} className={clsx(styles['Hero-actions'], className)} {...props}>\n {children}\n </ButtonGroup>\n </Tag>\n )\n },\n)\n"],"mappings":";;;;;;;;AAUA,IAAa,IAAkB,GAC5B,EAAC,cAAW,aAAU,GAAG,KAAQ,MAAQ;CACxC,IAAM,EAAC,YAAS,uBAAmB,GAAgB,EAC7C,IAAa,MAAY,cAAc,MAAY;AAczD,QACE,kBAdU,IAAa,IAAM,EAAM,UAcnC;EAAK,GAbU,IACb,EACE,SAAS,IACL;GACE,SAAS;GACT,OAAO;GACP,UAAU;GACX,GACD,KAAA,GACL,GACD,EAAE;YAIF,kBAAC,GAAD;GAAkB;GAAK,WAAW,EAAK,EAAO,iBAAiB,EAAU;GAAE,GAAI;GAC5E;GACW,CAAA;EACV,CAAA;EAGX"}

package/esm/Hero/sub-components/HeroImage.d.ts CHANGED Viewed

@@ -1,12 +1,14 @@
 import { ImageProps } from '../../Image';
 import type { BaseProps } from '../../component-helpers';
-import { type HeroMediaPositions } from '../HeroContext';
+import { type HeroMediaPadding, type HeroMediaPosition } from '../HeroContext';
 export type HeroImageProps = {
-    position?: HeroMediaPositions;
+    position?: HeroMediaPosition;
+    padding?: HeroMediaPadding;
     enableBorder?: boolean;
 } & ImageProps & BaseProps<HTMLImageElement>;
 export declare const HeroImage: import("react").ForwardRefExoticComponent<(Omit<{
-    position?: HeroMediaPositions;
+    position?: HeroMediaPosition;
+    padding?: HeroMediaPadding;
     enableBorder?: boolean;
 } & import("react").ImgHTMLAttributes<HTMLImageElement> & BaseProps<HTMLImageElement> & {
     src: string;
@@ -19,7 +21,8 @@ export declare const HeroImage: import("react").ForwardRefExoticComponent<(Omit<
     as?: "img";
     srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, "srcSet">;
 }, "ref"> | Omit<{
-    position?: HeroMediaPositions;
+    position?: HeroMediaPosition;
+    padding?: HeroMediaPadding;
     enableBorder?: boolean;
 } & import("react").ImgHTMLAttributes<HTMLImageElement> & BaseProps<HTMLImageElement> & {
     src: string;

package/esm/Hero/sub-components/HeroImage.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HeroImage.d.ts","sourceRoot":"","sources":["../../../src/Hero/sub-components/HeroImage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,UAAU,EAAC,MAAM,aAAa,CAAA;AAC7C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,EAAiB,KAAK,~~kBAAkB~~,EAAC,MAAM,gBAAgB,CAAA;~~AAItE~~,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,~~kBAAkB~~,CAAA;~~IAC7B~~,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,GAAG,UAAU,GACZ,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAE7B,eAAO,MAAM,SAAS;~~eALT~~,~~kBAAkB~~;~~mBACd~~,OAAO;;;;;;;;;;;;~~eADX~~,~~kBAAkB~~;~~mBACd~~,OAAO;;;;;;;;;;;;;;;6DAiCvB,CAAA"}
1	+ {"version":3,"file":"HeroImage.d.ts","sourceRoot":"","sources":["../../../src/Hero/sub-components/HeroImage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,UAAU,EAAC,MAAM,aAAa,CAAA;AAC7C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,EAAiB,KAAK,gBAAgB,EAAE,KAAK,iBAAiB,EAAC,MAAM,gBAAgB,CAAA;AAI5F,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,iBAAiB,CAAA;IAC5B,OAAO,CAAC,EAAE,gBAAgB,CAAA;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,GAAG,UAAU,GACZ,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAE7B,eAAO,MAAM,SAAS;eANT,iBAAiB;cAClB,gBAAgB;mBACX,OAAO;;;;;;;;;;;;eAFX,iBAAiB;cAClB,gBAAgB;mBACX,OAAO;;;;;;;;;;;;;;;6DAiCvB,CAAA"}

package/esm/Hero/sub-components/HeroImage.js CHANGED Viewed

@@ -5,17 +5,17 @@ import { Image as r } from "../../Image/Image.js";
 import { forwardRef as i } from "react";
 import { jsx as a } from "react/jsx-runtime";
 //#region src/Hero/sub-components/HeroImage.tsx
-var o = i(({ position: i = "block-end", className: o, enableBorder: s, ...c }, l) => {
-	let { variant: u, enableAnimation: d } = t(), f = i.startsWith("inline"), p = i.endsWith("-padded");
+var o = i(({ position: i = "block-end", padding: o = "default", className: s, enableBorder: c, ...l }, u) => {
+	let { variant: d, enableAnimation: f } = t(), p = i.startsWith("inline");
 	return /* @__PURE__ */ a(r, {
-		animate: u === "gridline" && d ? {
+		animate: d === "gridline" && f ? {
 			variant: "slide-in-up",
 			delay: 0,
 			duration: 1e3
 		} : void 0,
-		ref: l,
-		className: e(n["Hero-image"], n["Hero-media"], n[`Hero-media--pos-${i}`], f && n["Hero-media--pos-inline"], f && p && n["Hero-media--pos-inline-padded"], o),
-		...c
+		ref: u,
+		className: e(n["Hero-image"], n["Hero-media"], n[`Hero-media--pos-${i}`], p && n["Hero-media--pos-inline"], o === "all" && n["Hero-media--padding-all"], o === "none" && n["Hero-media--padding-none"], s),
+		...l
 	});
 });
 //#endregion

package/esm/Hero/sub-components/HeroImage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HeroImage.js","names":[],"sources":["../../../src/Hero/sub-components/HeroImage.tsx"],"sourcesContent":["import {forwardRef~~, PropsWithChildren~~} from 'react'\nimport {clsx} from 'clsx'\nimport {Image, ImageProps} from '../../Image'\nimport type {BaseProps} from '../../component-helpers'\nimport {useHeroContext, type ~~HeroMediaPositions~~} from '../HeroContext'\n\nimport styles from '../Hero.module.css'\n\nexport type HeroImageProps = {\n position?: ~~HeroMediaPositions~~\n enableBorder?: boolean\n} & ImageProps &\n BaseProps<HTMLImageElement>\n\nexport const HeroImage = forwardRef<HTMLImageElement, HeroImageProps>(\n ({position = 'block-end', className, enableBorder, ...rest}: ~~PropsWithChildren<~~HeroImageProps>, ref) => {\n const {variant: heroVariant, enableAnimation} = useHeroContext()\n const isInlinePosition = position.startsWith('inline')\n ~~const isInlinePadded = position.endsWith('-padded')\n~~ return (\n <Image\n animate={\n heroVariant === 'gridline' && enableAnimation\n ? {\n variant: 'slide-in-up',\n delay: 0,\n duration: 1000,\n }\n : undefined\n }\n ref={ref}\n className={clsx(\n styles['Hero-image'],\n styles['Hero-media'],\n styles[`Hero-media--pos-${position}`],\n isInlinePosition && styles['Hero-media--pos-inline'],\n ~~isInlinePosition~~ && ~~isInlinePadded~~ && styles['Hero-media--~~pos~~-~~inline-padded~~'],\n className,\n )}\n {...rest}\n />\n )\n },\n)\n"],"mappings":";;;;;;;~~AAcA~~,IAAa,IAAY,GACtB,EAAC,cAAW,aAAa,cAAW,iBAAc,GAAG,~~KAA0C~~,MAAQ;~~CACtG~~,IAAM,EAAC,SAAS,GAAa,uBAAmB,GAAgB,EAC1D,IAAmB,EAAS,WAAW,SAAS~~,EAChD,IAAiB,EAAS,SAAS,UAAU~~;~~AACnD~~,QACE,kBAAC,GAAD;EACE,SACE,MAAgB,cAAc,IAC1B;GACE,SAAS;GACT,OAAO;GACP,UAAU;GACX,GACD,KAAA;EAED;EACL,WAAW,EACT,EAAO,eACP,EAAO,eACP,EAAO,mBAAmB,MAC1B,KAAoB,EAAO,2BAC3B,~~KAAoB~~,~~KAAkB~~,EAAO,~~kCAC7C~~,EACD;EACD,GAAI;EACJ,CAAA;EAGP"}
1	+ {"version":3,"file":"HeroImage.js","names":[],"sources":["../../../src/Hero/sub-components/HeroImage.tsx"],"sourcesContent":["import {forwardRef} from 'react'\nimport {clsx} from 'clsx'\nimport {Image, ImageProps} from '../../Image'\nimport type {BaseProps} from '../../component-helpers'\nimport {useHeroContext, type HeroMediaPadding, type HeroMediaPosition} from '../HeroContext'\n\nimport styles from '../Hero.module.css'\n\nexport type HeroImageProps = {\n position?: HeroMediaPosition\n padding?: HeroMediaPadding\n enableBorder?: boolean\n} & ImageProps &\n BaseProps<HTMLImageElement>\n\nexport const HeroImage = forwardRef<HTMLImageElement, HeroImageProps>(\n ({position = 'block-end', padding = 'default', className, enableBorder, ...rest}: HeroImageProps, ref) => {\n const {variant: heroVariant, enableAnimation} = useHeroContext()\n const isInlinePosition = position.startsWith('inline')\n return (\n <Image\n animate={\n heroVariant === 'gridline' && enableAnimation\n ? {\n variant: 'slide-in-up',\n delay: 0,\n duration: 1000,\n }\n : undefined\n }\n ref={ref}\n className={clsx(\n styles['Hero-image'],\n styles['Hero-media'],\n styles[`Hero-media--pos-${position}`],\n isInlinePosition && styles['Hero-media--pos-inline'],\n padding === 'all' && styles['Hero-media--padding-all'],\n padding === 'none' && styles['Hero-media--padding-none'],\n className,\n )}\n {...rest}\n />\n )\n },\n)\n"],"mappings":";;;;;;;AAeA,IAAa,IAAY,GACtB,EAAC,cAAW,aAAa,aAAU,WAAW,cAAW,iBAAc,GAAG,KAAuB,MAAQ;CACxG,IAAM,EAAC,SAAS,GAAa,uBAAmB,GAAgB,EAC1D,IAAmB,EAAS,WAAW,SAAS;AACtD,QACE,kBAAC,GAAD;EACE,SACE,MAAgB,cAAc,IAC1B;GACE,SAAS;GACT,OAAO;GACP,UAAU;GACX,GACD,KAAA;EAED;EACL,WAAW,EACT,EAAO,eACP,EAAO,eACP,EAAO,mBAAmB,MAC1B,KAAoB,EAAO,2BAC3B,MAAY,SAAS,EAAO,4BAC5B,MAAY,UAAU,EAAO,6BAC7B,EACD;EACD,GAAI;EACJ,CAAA;EAGP"}

package/esm/Hero/sub-components/HeroVideo.d.ts CHANGED Viewed

@@ -1,8 +1,12 @@
 import React, { PropsWithChildren } from 'react';
 import type { BaseProps } from '../../component-helpers';
-import type { HeroMediaPositions } from '../HeroContext';
+import type { HeroMediaPadding, HeroMediaPosition } from '../HeroContext';
 type HeroVideoBaseProps = {
-    position?: HeroMediaPositions;
+    position?: HeroMediaPosition;
+    /**
+     * Controls the padding around media in gridline layouts. `default` preserves the padding recommended for the position.
+     */
+    padding?: HeroMediaPadding;
     enableBorder?: boolean;
     'data-testid'?: string;
 } & PropsWithChildren<BaseProps<HTMLDivElement>>;
@@ -17,7 +21,11 @@ type PosterProps = {
 };
 export type HeroVideoProps = HeroVideoBaseProps & PosterProps;
 export declare const HeroVideo: React.ForwardRefExoticComponent<(Omit<{
-    position?: HeroMediaPositions;
+    position?: HeroMediaPosition;
+    /**
+     * Controls the padding around media in gridline layouts. `default` preserves the padding recommended for the position.
+     */
+    padding?: HeroMediaPadding;
     enableBorder?: boolean;
     'data-testid'?: string;
 } & BaseProps<HTMLDivElement> & {
@@ -27,7 +35,11 @@ export declare const HeroVideo: React.ForwardRefExoticComponent<(Omit<{
     posterAltText?: never;
     posterTitle?: never;
 }, "ref"> | Omit<{
-    position?: HeroMediaPositions;
+    position?: HeroMediaPosition;
+    /**
+     * Controls the padding around media in gridline layouts. `default` preserves the padding recommended for the position.
+     */
+    padding?: HeroMediaPadding;
     enableBorder?: boolean;
     'data-testid'?: string;
 } & BaseProps<HTMLDivElement> & {

package/esm/Hero/sub-components/HeroVideo.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HeroVideo.d.ts","sourceRoot":"","sources":["../../../src/Hero/sub-components/HeroVideo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAE1D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,~~kBAAkB~~,EAAC,MAAM,gBAAgB,CAAA;~~AAQtD~~,KAAK,kBAAkB,GAAG;IACxB,QAAQ,CAAC,EAAE,~~kBAAkB~~,CAAA;~~IAC7B~~,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,iBAAiB,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAA;AAGhD,KAAK,WAAW,GACZ;IAAC,MAAM,CAAC,EAAE,KAAK,CAAC;IAAC,aAAa,CAAC,EAAE,KAAK,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAC,GAC5D;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAC,CAAA;AAEhE,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,WAAW,CAAA;AAE7D,eAAO,MAAM,SAAS;~~eAZT~~,~~kBAAkB~~;~~mBACd~~,OAAO;oBACN,MAAM;;;;aAKV,KAAK;oBAAkB,KAAK;kBAAgB,KAAK;;~~eAPlD~~,~~kBAAkB~~;~~mBACd~~,OAAO;oBACN,MAAM;;;;YAMX,MAAM;mBAAiB,MAAM;iBAAe,MAAM;~~iDAuD9D~~,CAAA"}
1	+ {"version":3,"file":"HeroVideo.d.ts","sourceRoot":"","sources":["../../../src/Hero/sub-components/HeroVideo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAE1D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,gBAAgB,EAAE,iBAAiB,EAAC,MAAM,gBAAgB,CAAA;AAQvE,KAAK,kBAAkB,GAAG;IACxB,QAAQ,CAAC,EAAE,iBAAiB,CAAA;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAA;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,iBAAiB,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAA;AAGhD,KAAK,WAAW,GACZ;IAAC,MAAM,CAAC,EAAE,KAAK,CAAC;IAAC,aAAa,CAAC,EAAE,KAAK,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAC,GAC5D;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAC,CAAA;AAEhE,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,WAAW,CAAA;AAE7D,eAAO,MAAM,SAAS;eAhBT,iBAAiB;IAC5B;;OAEG;cACO,gBAAgB;mBACX,OAAO;oBACN,MAAM;;;;aAKV,KAAK;oBAAkB,KAAK;kBAAgB,KAAK;;eAXlD,iBAAiB;IAC5B;;OAEG;cACO,gBAAgB;mBACX,OAAO;oBACN,MAAM;;;;YAMX,MAAM;mBAAiB,MAAM;iBAAe,MAAM;iDAwD9D,CAAA"}

package/esm/Hero/sub-components/HeroVideo.js CHANGED Viewed

@@ -3,24 +3,24 @@ import { useProvidedRefOrCreate as t } from "../../hooks/useRef.js";
 import { Box as n } from "../../Box/Box.js";
 import { Text as r } from "../../Text/Text.js";
 import i from "../Hero.module.js";
-import { Image as a } from "../../Image/Image.js";
-import { PlayIcon as o } from "../../VideoPlayer/components/PlayIcon/PlayIcon.js";
-import { MarkGithubIcon as s } from "../../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { MarkGithubIcon as a } from "../../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { Image as o } from "../../Image/Image.js";
+import { PlayIcon as s } from "../../VideoPlayer/components/PlayIcon/PlayIcon.js";
 import c, { forwardRef as l } from "react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/Hero/sub-components/HeroVideo.tsx
-var f = l(({ className: n, children: r, position: a = "block-end", poster: o, posterTitle: s, posterAltText: l, enableBorder: d, "data-testid": f, ...m }, h) => {
-	let [g, _] = c.useState(!o), v = t(h), y = a.startsWith("inline"), b = a.endsWith("-padded"), x = e(i["Hero-video"], i["Hero-media"], i[`Hero-media--pos-${a}`], y && i["Hero-media--pos-inline"], y && b && i["Hero-media--pos-inline-padded"], n), S = () => _(!0), C = /* @__PURE__ */ u("div", {
+var f = l(({ className: n, children: r, position: a = "block-end", padding: o = "default", poster: s, posterTitle: l, posterAltText: d, enableBorder: f, "data-testid": m, ...h }, g) => {
+	let [_, v] = c.useState(!s), y = t(g), b = a.startsWith("inline"), x = e(i["Hero-video"], i["Hero-media"], i[`Hero-media--pos-${a}`], b && i["Hero-media--pos-inline"], o === "all" && i["Hero-media--padding-all"], o === "none" && i["Hero-media--padding-none"], n), S = () => v(!0), C = /* @__PURE__ */ u("div", {
 		className: x,
-		ref: v,
-		"data-testid": f || "Hero-video",
-		...m,
+		ref: y,
+		"data-testid": m || "Hero-video",
+		...h,
 		children: r
 	});
-	return g ? C : /* @__PURE__ */ u(p, {
-		posterSrc: o,
-		posterAlt: l,
-		posterTitle: s,
+	return _ ? C : /* @__PURE__ */ u(p, {
+		posterSrc: s,
+		posterAlt: d,
+		posterTitle: l,
 		onClick: S,
 		className: x
 	});
@@ -33,15 +33,15 @@ function p({ posterSrc: e, posterAlt: t, posterTitle: c, onClick: l, className:
 			onClick: l,
 			className: i["Hero-video-poster-button"],
 			children: [
-				/* @__PURE__ */ u(a, {
+				/* @__PURE__ */ u(o, {
 					src: e,
 					alt: t,
 					className: i["Hero-video-poster-image"]
 				}),
-				/* @__PURE__ */ u(o, { className: i["Hero-video-poster-icon"] }),
+				/* @__PURE__ */ u(s, { className: i["Hero-video-poster-icon"] }),
 				/* @__PURE__ */ d("span", {
 					className: i["Hero-video-poster-header"],
-					children: [/* @__PURE__ */ u(s, {
+					children: [/* @__PURE__ */ u(a, {
 						size: 48,
 						className: i["Hero-video-header-poster-icon"]
 					}), /* @__PURE__ */ u(r, {

package/esm/Hero/sub-components/HeroVideo.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HeroVideo.js","names":[],"sources":["../../../src/Hero/sub-components/HeroVideo.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../../component-helpers'\nimport type {~~HeroMediaPositions~~} from '../HeroContext'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\n\nimport styles from '../Hero.module.css'\nimport {Box, Image, Text} from '../..'\nimport {PlayIcon} from '../../VideoPlayer/components/PlayIcon'\nimport {MarkGithubIcon} from '@primer/octicons-react'\n\ntype HeroVideoBaseProps = {\n position?: ~~HeroMediaPositions~~\n enableBorder?: boolean\n 'data-testid'?: string\n} & PropsWithChildren<BaseProps<HTMLDivElement>>\n\n// discriminated union to ensure that if one poster* prop is set, all are required\ntype PosterProps =\n \| {poster?: never; posterAltText?: never; posterTitle?: never}\n \| {poster: string; posterAltText: string; posterTitle: string}\n\nexport type HeroVideoProps = HeroVideoBaseProps & PosterProps\n\nexport const HeroVideo = forwardRef<HTMLDivElement, HeroVideoProps>(\n (\n {\n className,\n children,\n position = 'block-end',\n poster,\n posterTitle,\n posterAltText,\n enableBorder,\n 'data-testid': testId,\n ...rest\n }: HeroVideoProps,\n ref,\n ) => {\n const [showVideo, setShowVideo] = React.useState(poster ? false : true)\n const containerRef = useProvidedRefOrCreate(ref as React.RefObject<HTMLDivElement>)\n const isInlinePosition = position.startsWith('inline')\n ~~const isInlinePadded = position.endsWith('-padded')~~\n\n const mediaClasses = clsx(\n styles['Hero-video'],\n styles['Hero-media'],\n styles[`Hero-media--pos-${position}`],\n isInlinePosition && styles['Hero-media--pos-inline'],\n ~~isInlinePosition~~ && ~~isInlinePadded~~ && styles['Hero-media--~~pos~~-~~inline-padded~~'],\n className,\n )\n\n const handlePosterClick = () => setShowVideo(true)\n\n const videoContent = (\n <div className={mediaClasses} ref={containerRef} data-testid={testId \|\| 'Hero-video'} {...rest}>\n {children}\n </div>\n )\n\n if (showVideo) {\n return videoContent\n }\n\n return (\n <PosterImage\n posterSrc={poster!}\n posterAlt={posterAltText!}\n posterTitle={posterTitle!}\n onClick={handlePosterClick}\n className={mediaClasses}\n />\n )\n },\n)\n\ntype PosterImageProps = {\n posterSrc: string\n posterAlt: string\n posterTitle: string\n onClick: () => void\n className?: string\n}\n\nfunction PosterImage({posterSrc, posterAlt, posterTitle, onClick, className}: PosterImageProps) {\n return (\n <Box className={className}>\n <button aria-label=\"Play video\" onClick={onClick} className={styles['Hero-video-poster-button']}>\n <Image src={posterSrc} alt={posterAlt} className={styles['Hero-video-poster-image']} />\n <PlayIcon className={styles['Hero-video-poster-icon']} />\n <span className={styles['Hero-video-poster-header']}>\n <MarkGithubIcon size={48} className={styles['Hero-video-header-poster-icon']} />\n <Text size=\"350\" className={styles['Hero-video-poster-text']}>\n {posterTitle}\n </Text>\n </span>\n </button>\n </Box>\n )\n}\n"],"mappings":";;;;;;;;;;;~~AAwBA~~,IAAa,IAAY,GAErB,EACE,cACA,aACA,cAAW,aACX,WACA,gBACA,kBACA,iBACA,eAAe,GACf,GAAG,KAEL,MACG;CACH,IAAM,CAAC,GAAW,KAAgB,EAAM,SAAS,GAAsB,EACjE,IAAe,EAAuB,EAAuC,EAC7E,IAAmB,EAAS,WAAW,SAAS,~~EAChD~~,~~IAAiB,EAAS,SAAS,UAAU,EAE7C,~~IAAe,EACnB,EAAO,eACP,EAAO,eACP,EAAO,mBAAmB,MAC1B,KAAoB,EAAO,2BAC3B,~~KAAoB~~,~~KAAkB~~,EAAO,~~kCAC7C~~,EACD,EAEK,UAA0B,EAAa,GAAK,EAE5C,IACJ,kBAAC,OAAD;EAAK,WAAW;EAAc,KAAK;EAAc,eAAa,KAAU;EAAc,GAAI;EACvF;EACG,CAAA;AAOR,QAJI,IACK,IAIP,kBAAC,GAAD;EACE,WAAW;EACX,WAAW;EACE;EACb,SAAS;EACT,WAAW;EACX,CAAA;EAGP;AAUD,SAAS,EAAY,EAAC,cAAW,cAAW,gBAAa,YAAS,gBAA8B;AAC9F,QACE,kBAAC,GAAD;EAAgB;YACd,kBAAC,UAAD;GAAQ,cAAW;GAAsB;GAAS,WAAW,EAAO;aAApE;IACE,kBAAC,GAAD;KAAO,KAAK;KAAW,KAAK;KAAW,WAAW,EAAO;KAA8B,CAAA;IACvF,kBAAC,GAAD,EAAU,WAAW,EAAO,2BAA6B,CAAA;IACzD,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAxB,CACE,kBAAC,GAAD;MAAgB,MAAM;MAAI,WAAW,EAAO;MAAoC,CAAA,EAChF,kBAAC,GAAD;MAAM,MAAK;MAAM,WAAW,EAAO;gBAChC;MACI,CAAA,CACF;;IACA;;EACL,CAAA"}
1	+ {"version":3,"file":"HeroVideo.js","names":[],"sources":["../../../src/Hero/sub-components/HeroVideo.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../../component-helpers'\nimport type {HeroMediaPadding, HeroMediaPosition} from '../HeroContext'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\n\nimport styles from '../Hero.module.css'\nimport {Box, Image, Text} from '../..'\nimport {PlayIcon} from '../../VideoPlayer/components/PlayIcon'\nimport {MarkGithubIcon} from '@primer/octicons-react'\n\ntype HeroVideoBaseProps = {\n position?: HeroMediaPosition\n /*\n Controls the padding around media in gridline layouts. `default` preserves the padding recommended for the position.\n /\n padding?: HeroMediaPadding\n enableBorder?: boolean\n 'data-testid'?: string\n} & PropsWithChildren<BaseProps<HTMLDivElement>>\n\n// discriminated union to ensure that if one poster prop is set, all are required\ntype PosterProps =\n \| {poster?: never; posterAltText?: never; posterTitle?: never}\n \| {poster: string; posterAltText: string; posterTitle: string}\n\nexport type HeroVideoProps = HeroVideoBaseProps & PosterProps\n\nexport const HeroVideo = forwardRef<HTMLDivElement, HeroVideoProps>(\n (\n {\n className,\n children,\n position = 'block-end',\n padding = 'default',\n poster,\n posterTitle,\n posterAltText,\n enableBorder,\n 'data-testid': testId,\n ...rest\n }: HeroVideoProps,\n ref,\n ) => {\n const [showVideo, setShowVideo] = React.useState(poster ? false : true)\n const containerRef = useProvidedRefOrCreate(ref as React.RefObject<HTMLDivElement>)\n const isInlinePosition = position.startsWith('inline')\n\n const mediaClasses = clsx(\n styles['Hero-video'],\n styles['Hero-media'],\n styles[`Hero-media--pos-${position}`],\n isInlinePosition && styles['Hero-media--pos-inline'],\n padding === 'all' && styles['Hero-media--padding-all'],\n padding === 'none' && styles['Hero-media--padding-none'],\n className,\n )\n\n const handlePosterClick = () => setShowVideo(true)\n\n const videoContent = (\n <div className={mediaClasses} ref={containerRef} data-testid={testId \|\| 'Hero-video'} {...rest}>\n {children}\n </div>\n )\n\n if (showVideo) {\n return videoContent\n }\n\n return (\n <PosterImage\n posterSrc={poster!}\n posterAlt={posterAltText!}\n posterTitle={posterTitle!}\n onClick={handlePosterClick}\n className={mediaClasses}\n />\n )\n },\n)\n\ntype PosterImageProps = {\n posterSrc: string\n posterAlt: string\n posterTitle: string\n onClick: () => void\n className?: string\n}\n\nfunction PosterImage({posterSrc, posterAlt, posterTitle, onClick, className}: PosterImageProps) {\n return (\n <Box className={className}>\n <button aria-label=\"Play video\" onClick={onClick} className={styles['Hero-video-poster-button']}>\n <Image src={posterSrc} alt={posterAlt} className={styles['Hero-video-poster-image']} />\n <PlayIcon className={styles['Hero-video-poster-icon']} />\n <span className={styles['Hero-video-poster-header']}>\n <MarkGithubIcon size={48} className={styles['Hero-video-header-poster-icon']} />\n <Text size=\"350\" className={styles['Hero-video-poster-text']}>\n {posterTitle}\n </Text>\n </span>\n </button>\n </Box>\n )\n}\n"],"mappings":";;;;;;;;;;;AA4BA,IAAa,IAAY,GAErB,EACE,cACA,aACA,cAAW,aACX,aAAU,WACV,WACA,gBACA,kBACA,iBACA,eAAe,GACf,GAAG,KAEL,MACG;CACH,IAAM,CAAC,GAAW,KAAgB,EAAM,SAAS,GAAsB,EACjE,IAAe,EAAuB,EAAuC,EAC7E,IAAmB,EAAS,WAAW,SAAS,EAEhD,IAAe,EACnB,EAAO,eACP,EAAO,eACP,EAAO,mBAAmB,MAC1B,KAAoB,EAAO,2BAC3B,MAAY,SAAS,EAAO,4BAC5B,MAAY,UAAU,EAAO,6BAC7B,EACD,EAEK,UAA0B,EAAa,GAAK,EAE5C,IACJ,kBAAC,OAAD;EAAK,WAAW;EAAc,KAAK;EAAc,eAAa,KAAU;EAAc,GAAI;EACvF;EACG,CAAA;AAOR,QAJI,IACK,IAIP,kBAAC,GAAD;EACE,WAAW;EACX,WAAW;EACE;EACb,SAAS;EACT,WAAW;EACX,CAAA;EAGP;AAUD,SAAS,EAAY,EAAC,cAAW,cAAW,gBAAa,YAAS,gBAA8B;AAC9F,QACE,kBAAC,GAAD;EAAgB;YACd,kBAAC,UAAD;GAAQ,cAAW;GAAsB;GAAS,WAAW,EAAO;aAApE;IACE,kBAAC,GAAD;KAAO,KAAK;KAAW,KAAK;KAAW,WAAW,EAAO;KAA8B,CAAA;IACvF,kBAAC,GAAD,EAAU,WAAW,EAAO,2BAA6B,CAAA;IACzD,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAxB,CACE,kBAAC,GAAD;MAAgB,MAAM;MAAI,WAAW,EAAO;MAAoC,CAAA,EAChF,kBAAC,GAAD;MAAM,MAAK;MAAM,WAAW,EAAO;gBAChC;MACI,CAAA,CACF;;IACA;;EACL,CAAA"}

package/esm/Hero/sub-components/index.d.ts CHANGED Viewed

@@ -4,6 +4,8 @@ export { HeroHeading } from './HeroHeading';
 export type { HeroHeadingProps } from './HeroHeading';
 export { HeroDescription } from './HeroDescription';
 export type { HeroDescriptionProps } from './HeroDescription';
+export { HeroButtonGroup } from './HeroButtonGroup';
+export type { HeroButtonGroupProps } from './HeroButtonGroup';
 export { HeroImage } from './HeroImage';
 export type { HeroImageProps } from './HeroImage';
 export { HeroVideo } from './HeroVideo';

package/esm/Hero/sub-components/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Hero/sub-components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAA;AACrC,YAAY,EAAC,cAAc,EAAC,MAAM,aAAa,CAAA;AAE/C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAA;AACzC,YAAY,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAA;AAEnD,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAA;AACjD,YAAY,EAAC,oBAAoB,EAAC,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAA;AACrC,YAAY,EAAC,cAAc,EAAC,MAAM,aAAa,CAAA;AAE/C,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAA;AACrC,YAAY,EAAC,cAAc,EAAC,MAAM,aAAa,CAAA;AAE/C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAA;AACzC,YAAY,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAA;AAEnD,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAA;AACrD,YAAY,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAA;AAE/D,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAA;AACzD,YAAY,EAAC,wBAAwB,EAAC,MAAM,uBAAuB,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Hero/sub-components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAA;AACrC,YAAY,EAAC,cAAc,EAAC,MAAM,aAAa,CAAA;AAE/C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAA;AACzC,YAAY,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAA;AAEnD,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAA;AACjD,YAAY,EAAC,oBAAoB,EAAC,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAA;AACjD,YAAY,EAAC,oBAAoB,EAAC,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAA;AACrC,YAAY,EAAC,cAAc,EAAC,MAAM,aAAa,CAAA;AAE/C,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAA;AACrC,YAAY,EAAC,cAAc,EAAC,MAAM,aAAa,CAAA;AAE/C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAA;AACzC,YAAY,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAA;AAEnD,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAA;AACrD,YAAY,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAA;AAE/D,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAA;AACzD,YAAY,EAAC,wBAAwB,EAAC,MAAM,uBAAuB,CAAA"}