npm - @primer/react-brand - Versions diffs - 0.75.0-rc.c3abcc84 → 0.75.0 - Mend

@primer/react-brand 0.75.0-rc.c3abcc84 → 0.75.0

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CTABanner.js","names":[],"sources":["../../src/CTABanner/CTABanner.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, useMemo, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\nimport {Grid} from '../Grid'\nimport {Heading, HeadingProps} from '../Heading'\nimport {Text, TextProps} from '../Text'\nimport {ButtonGroup} from '../ButtonGroup'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './CTABanner.module.css'\nimport {Image} from '../Image'\nimport {Link, type LinkProps} from '../Link'\n\nexport const CTABannerBackgroundColors = ['default', 'subtle'] as const\n\ntype ResponsiveMap<T> = {\n narrow?: T\n regular?: T\n wide?: T\n}\n\ntype ResponsiveBackgroundImageSrcMap = ResponsiveMap<string \| string[]>\ntype BackgroundColors = (typeof CTABannerBackgroundColors)[number] \| AnyString\ntype ResponsiveBackgroundColorMap = ResponsiveMap<BackgroundColors>\ntype ResponsiveBackgroundImagePositionMap = ResponsiveMap<string \| string[]>\ntype ResponsiveBackgroundImageSizeMap = ResponsiveMap<string \| string[]>\n\nexport type CTABannerProps = BaseProps<HTMLElement> &\n React.HTMLAttributes<HTMLElement> & {\n /\n Alternative presentations\n /\n variant?: 'default' \| 'balanced' \| 'minimal'\n /\n The alignment of the content within the banner.\n /\n align?: 'start' \| 'center'\n /\n A flag to add a border to the banner.\n /\n hasBorder?: boolean\n /\n Enable optional grid lines\n /\n hasGridLines?: boolean\n /\n A flag to remove the shadow from the banner.\n * @deprecated - hasShadow will be removed in a future release.\n /\n hasShadow?: boolean\n /\n A flag to remove the background from the banner.\n /\n hasBackground?: boolean\n /\n Optional, custom background color.\n /\n backgroundColor?: BackgroundColors \| ResponsiveBackgroundColorMap\n /\n Optional, custom background image.\n /\n backgroundImageSrc?: string \| ResponsiveBackgroundImageSrcMap\n /\n Optional, custom background position.\n /\n backgroundImagePosition?: string \| ResponsiveBackgroundImagePositionMap\n /\n Optional, custom background size.\n /\n backgroundImageSize?: string \| ResponsiveBackgroundImageSizeMap\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 leadingComponent?: React.FunctionComponent\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 }\n\nconst Root = forwardRef(\n (\n {\n align = 'center',\n hasBorder = false,\n hasGridLines = false,\n hasShadow = false,\n hasBackground = true,\n backgroundColor = 'var(--brand-CTABanner-bgColor)',\n backgroundImageSrc,\n backgroundImagePosition = 'center',\n backgroundImageSize = 'cover',\n className,\n children,\n leadingComponent: LeadingComponent,\n trailingComponent: TrailingComponent,\n style,\n variant = 'default',\n ...props\n }: CTABannerProps,\n ref: Ref<HTMLElement>,\n ) => {\n const processBackgroundValue = useCallback((value: string \| string[], property) => {\n if (property === 'background-image-src') {\n return `url(${value})`\n }\n\n if (property === 'background-color' && typeof value === 'string') {\n return CTABannerBackgroundColors.includes(value as (typeof CTABannerBackgroundColors)[number])\n ? `var(--brand-color-canvas-${value})`\n : value\n }\n\n return value\n }, [])\n\n const createStyles = useCallback(\n (property, value) =>\n typeof value === 'string' \|\| Array.isArray(value)\n ? {[`--brand-CTABanner-${property}`]: processBackgroundValue(value, property)}\n : {\n [`--brand-CTABanner-narrow-${property}`]: processBackgroundValue(value?.narrow, property),\n [`--brand-CTABanner-regular-${property}`]: processBackgroundValue(value?.regular, property),\n [`--brand-CTABanner-wide-${property}`]: processBackgroundValue(value?.wide, property),\n },\n [processBackgroundValue],\n )\n\n const backgroundStyles = useMemo(() => {\n const allStyles = {}\n\n const addStyle = (property, value) => {\n if (value) {\n Object.assign(allStyles, createStyles(property, value))\n }\n }\n\n addStyle('background-color', backgroundColor)\n addStyle('background-image-src', backgroundImageSrc)\n addStyle('background-image-position', backgroundImagePosition)\n addStyle('background-image-size', backgroundImageSize)\n\n return allStyles\n }, [backgroundColor, backgroundImageSrc, backgroundImagePosition, backgroundImageSize, createStyles])\n\n const {ImageChild, ButtonGroupChild, restChildren, hasImageChild} = useMemo(() => {\n const result = React.Children.toArray(children).reduce<{\n ImageChild?: React.ReactElement\n ButtonGroupChild?: React.ReactElement\n restChildren: React.ReactElement[]\n hasImageChild: boolean\n }>(\n (acc, child) => {\n if (React.isValidElement(child)) {\n if (child.type === _Image) {\n acc.hasImageChild = true\n if (variant === 'balanced') {\n acc.ImageChild = child\n } else if (variant !== 'minimal') {\n acc.restChildren.push(child)\n }\n // minimal variant: image is intentionally excluded from rendering\n } else if (variant === 'minimal' && child.type === _ButtonGroup) {\n acc.ButtonGroupChild = child\n } else if (child.type === _Heading) {\n const headingChild = child as React.ReactElement<CTABannerHeadingProps>\n acc.restChildren.push(\n headingChild.props.size === undefined\n ? React.cloneElement(headingChild, {\n size: variant === 'minimal' ? '6' : defaultHeadingSize,\n })\n : headingChild,\n )\n } else {\n acc.restChildren.push(child)\n }\n }\n return acc\n },\n {ImageChild: undefined, ButtonGroupChild: undefined, restChildren: [], hasImageChild: false},\n )\n return result\n }, [children, variant])\n\n const hasSideColumn = (variant === 'balanced' && ImageChild) \|\| (variant === 'minimal' && ButtonGroupChild)\n\n const Tag: React.FC<React.PropsWithChildren> = hasGridLines\n ? ({children: inner}) => <div className={styles['CTABanner-outer-container--border']}>{inner}</div>\n : React.Fragment\n\n const defaultAlign = variant === 'balanced' \|\| variant === 'minimal' ? 'start' : align\n\n if (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test') {\n if (variant === 'balanced' && !ImageChild) {\n // eslint-disable-next-line no-console\n console.warn(\n 'CTABanner: The \"balanced\" variant requires a CTABanner.Image child to display the two-column layout correctly.',\n )\n }\n if (variant === 'minimal' && hasImageChild) {\n // eslint-disable-next-line no-console\n console.warn('CTABanner: Image child is not supported in minimal variant and will not be rendered.')\n }\n }\n\n return (\n <Tag>\n <section\n ref={ref}\n className={clsx(\n styles.CTABanner,\n hasShadow && styles['CTABanner--shadow'],\n styles[`CTABanner--variant-${variant}`],\n className,\n )}\n style={{...backgroundStyles, ...style}}\n {...props}\n >\n <div\n className={clsx(\n styles['CTABanner-container'],\n hasBorder && styles['CTABanner-container--border'],\n hasGridLines && styles['CTABanner-container--border-gridlines'],\n !hasGridLines && styles['CTABanner-container--rounded'],\n hasBackground && styles['CTABanner-container--background'],\n )}\n >\n {hasSideColumn ? (\n <Grid className={styles['CTABanner-grid']}>\n <Grid.Column span={{xsmall: 12, large: 6}} className={styles['CTABanner-grid-column--primary']}>\n <div\n className={clsx(\n styles['CTABanner-content'],\n defaultAlign === 'center' && styles['CTABanner-content--center'],\n )}\n >\n {LeadingComponent && <LeadingComponent />}\n {restChildren}\n {TrailingComponent && <TrailingComponent />}\n </div>\n </Grid.Column>\n <Grid.Column span={{xsmall: 12, large: 6}} className={styles['CTABanner-grid-column--secondary']}>\n {ImageChild \|\| ButtonGroupChild}\n </Grid.Column>\n </Grid>\n ) : (\n <div\n className={clsx(\n styles['CTABanner-content'],\n defaultAlign === 'center' && styles['CTABanner-content--center'],\n )}\n >\n {LeadingComponent && <LeadingComponent />}\n {restChildren}\n {TrailingComponent && <TrailingComponent />}\n </div>\n )}\n </div>\n </section>\n </Tag>\n )\n },\n)\n\nconst defaultHeadingLevel = 'h3'\n\ntype CTABannerHeadingProps = BaseProps<HTMLHeadingElement> & {\n children: React.ReactNode \| React.ReactNode[]\n} & HeadingProps\n\nconst defaultHeadingSize: HeadingProps['size'] = '3'\n\nconst _Heading = forwardRef(\n (\n {as = defaultHeadingLevel, size = defaultHeadingSize, className, children, ...props}: CTABannerHeadingProps,\n ref: Ref<HTMLHeadingElement>,\n ) => {\n return (\n <Heading ref={ref} className={clsx(styles['CTABanner-heading'], className)} size={size} as={as} {...props}>\n {children}\n </Heading>\n )\n },\n)\n\ntype CTABannerDescriptionProps = React.HtmlHTMLAttributes<HTMLParagraphElement> &\n BaseProps<HTMLParagraphElement> & {\n variant?: TextProps['variant']\n }\n\nconst Description = forwardRef(\n ({className, children, variant = 'muted', ...props}: CTABannerDescriptionProps, ref: Ref<HTMLParagraphElement>) => {\n return (\n <Text ref={ref} className={clsx(styles['CTABanner-description'], className)} as=\"p\" variant={variant} {...props}>\n {children}\n </Text>\n )\n },\n)\n\nconst _ButtonGroup = forwardRef(\n (\n {className, buttonSize = 'medium', buttonsAs, children, ...props}: React.ComponentProps<typeof ButtonGroup>,\n ref: Ref<HTMLDivElement>,\n ) => {\n return (\n <ButtonGroup\n buttonSize={buttonSize}\n buttonsAs={buttonsAs}\n className={clsx(styles['CTABanner-buttonGroup'], className)}\n ref={ref}\n {...props}\n >\n {children}\n </ButtonGroup>\n )\n },\n)\n\ntype CTABannerImageProps = BaseProps<HTMLImageElement> &\n Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' \| 'alt'> & {\n src: string\n alt: string\n }\n\nconst _Image = forwardRef(({className, src, alt, ...props}: CTABannerImageProps, ref: Ref<HTMLImageElement>) => {\n return (\n <Image\n ref={ref}\n className={clsx(styles['CTABanner-image'], className)}\n src={src}\n alt={alt}\n borderRadius=\"medium\"\n {...props}\n />\n )\n})\n\ntype CTABannerLogoProps = BaseProps<HTMLDivElement> &\n React.HTMLAttributes<HTMLDivElement> & {\n children: React.ReactNode\n }\n\nconst _Logo = forwardRef(({className, children, ...props}: CTABannerLogoProps, ref: Ref<HTMLDivElement>) => (\n <div ref={ref} className={clsx(styles['CTABanner-logo'], className)} {...props}>\n {children}\n </div>\n))\n\nconst _Link = ({className, children, variant = 'accent', ...props}: LinkProps) => (\n <Link variant={variant} className={clsx(styles['CTABanner-link'], className)} {...props}>\n {children}\n </Link>\n)\n\nexport const CTABanner = Object.assign(Root, {\n Heading: _Heading,\n Description,\n ButtonGroup: _ButtonGroup,\n Image: _Image,\n Logo: _Logo,\n Link: _Link,\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"CTABanner.js","names":[],"sources":["../../src/CTABanner/CTABanner.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, useMemo, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\nimport {Grid} from '../Grid'\nimport {Heading, HeadingProps} from '../Heading'\nimport {Text, TextProps} from '../Text'\nimport {ButtonGroup} from '../ButtonGroup'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './CTABanner.module.css'\nimport {Image} from '../Image'\nimport {Link, type LinkProps} from '../Link'\n\nexport const CTABannerBackgroundColors = ['default', 'subtle'] as const\n\ntype ResponsiveMap<T> = {\n narrow?: T\n regular?: T\n wide?: T\n}\n\ntype ResponsiveBackgroundImageSrcMap = ResponsiveMap<string \| string[]>\ntype BackgroundColors = (typeof CTABannerBackgroundColors)[number] \| AnyString\ntype ResponsiveBackgroundColorMap = ResponsiveMap<BackgroundColors>\ntype ResponsiveBackgroundImagePositionMap = ResponsiveMap<string \| string[]>\ntype ResponsiveBackgroundImageSizeMap = ResponsiveMap<string \| string[]>\n\nexport type CTABannerProps = BaseProps<HTMLElement> &\n React.HTMLAttributes<HTMLElement> & {\n /\n Alternative presentations\n /\n variant?: 'default' \| 'balanced' \| 'minimal'\n /\n The alignment of the content within the banner.\n /\n align?: 'start' \| 'center'\n /\n A flag to add a border to the banner.\n /\n hasBorder?: boolean\n /\n Enable optional grid lines\n /\n hasGridLines?: boolean\n /\n A flag to remove the shadow from the banner.\n * @deprecated - hasShadow will be removed in a future release.\n /\n hasShadow?: boolean\n /\n A flag to remove the background from the banner.\n /\n hasBackground?: boolean\n /\n Optional, custom background color.\n /\n backgroundColor?: BackgroundColors \| ResponsiveBackgroundColorMap\n /\n Optional, custom background image.\n /\n backgroundImageSrc?: string \| ResponsiveBackgroundImageSrcMap\n /\n Optional, custom background position.\n /\n backgroundImagePosition?: string \| ResponsiveBackgroundImagePositionMap\n /\n Optional, custom background size.\n /\n backgroundImageSize?: string \| ResponsiveBackgroundImageSizeMap\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 leadingComponent?: React.FunctionComponent\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 }\n\nconst Root = forwardRef(\n (\n {\n align = 'center',\n hasBorder = false,\n hasGridLines = false,\n hasShadow = false,\n hasBackground = true,\n backgroundColor = 'var(--brand-CTABanner-bgColor)',\n backgroundImageSrc,\n backgroundImagePosition = 'center',\n backgroundImageSize = 'cover',\n className,\n children,\n leadingComponent: LeadingComponent,\n trailingComponent: TrailingComponent,\n style,\n variant = 'default',\n ...props\n }: CTABannerProps,\n ref: Ref<HTMLElement>,\n ) => {\n const processBackgroundValue = useCallback((value: string \| string[], property) => {\n if (property === 'background-image-src') {\n return `url(${value})`\n }\n\n if (property === 'background-color' && typeof value === 'string') {\n return CTABannerBackgroundColors.includes(value as (typeof CTABannerBackgroundColors)[number])\n ? `var(--brand-color-canvas-${value})`\n : value\n }\n\n return value\n }, [])\n\n const createStyles = useCallback(\n (property, value) =>\n typeof value === 'string' \|\| Array.isArray(value)\n ? {[`--brand-CTABanner-${property}`]: processBackgroundValue(value, property)}\n : {\n [`--brand-CTABanner-narrow-${property}`]: processBackgroundValue(value?.narrow, property),\n [`--brand-CTABanner-regular-${property}`]: processBackgroundValue(value?.regular, property),\n [`--brand-CTABanner-wide-${property}`]: processBackgroundValue(value?.wide, property),\n },\n [processBackgroundValue],\n )\n\n const backgroundStyles = useMemo(() => {\n const allStyles = {}\n\n const addStyle = (property, value) => {\n if (value) {\n Object.assign(allStyles, createStyles(property, value))\n }\n }\n\n addStyle('background-color', backgroundColor)\n addStyle('background-image-src', backgroundImageSrc)\n addStyle('background-image-position', backgroundImagePosition)\n addStyle('background-image-size', backgroundImageSize)\n\n return allStyles\n }, [backgroundColor, backgroundImageSrc, backgroundImagePosition, backgroundImageSize, createStyles])\n\n const {ImageChild, ButtonGroupChild, restChildren, hasImageChild} = useMemo(() => {\n const result = React.Children.toArray(children).reduce<{\n ImageChild?: React.ReactElement\n ButtonGroupChild?: React.ReactElement\n restChildren: React.ReactElement[]\n hasImageChild: boolean\n }>(\n (acc, child) => {\n if (React.isValidElement(child)) {\n if (child.type === _Image) {\n acc.hasImageChild = true\n if (variant === 'balanced') {\n acc.ImageChild = child\n } else if (variant !== 'minimal') {\n acc.restChildren.push(child)\n }\n // minimal variant: image is intentionally excluded from rendering\n } else if (variant === 'minimal' && child.type === _ButtonGroup) {\n acc.ButtonGroupChild = child\n } else if (child.type === _Heading) {\n const headingChild = child as React.ReactElement<CTABannerHeadingProps>\n acc.restChildren.push(\n headingChild.props.size === undefined\n ? React.cloneElement(headingChild, {\n size: variant === 'minimal' ? '6' : defaultHeadingSize,\n })\n : headingChild,\n )\n } else {\n acc.restChildren.push(child)\n }\n }\n return acc\n },\n {ImageChild: undefined, ButtonGroupChild: undefined, restChildren: [], hasImageChild: false},\n )\n return result\n }, [children, variant])\n\n const hasSideColumn = (variant === 'balanced' && ImageChild) \|\| (variant === 'minimal' && ButtonGroupChild)\n\n const Tag: React.FC<React.PropsWithChildren> = hasGridLines\n ? ({children: inner}) => <div className={styles['CTABanner-outer-container--border']}>{inner}</div>\n : React.Fragment\n\n const defaultAlign = variant === 'balanced' \|\| variant === 'minimal' ? 'start' : align\n\n if (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test') {\n if (variant === 'balanced' && !ImageChild) {\n // eslint-disable-next-line no-console\n console.warn(\n 'CTABanner: The \"balanced\" variant requires a CTABanner.Image child to display the two-column layout correctly.',\n )\n }\n if (variant === 'minimal' && hasImageChild) {\n // eslint-disable-next-line no-console\n console.warn('CTABanner: Image child is not supported in minimal variant and will not be rendered.')\n }\n }\n\n return (\n <Tag>\n <section\n ref={ref}\n className={clsx(\n styles.CTABanner,\n hasShadow && styles['CTABanner--shadow'],\n styles[`CTABanner--variant-${variant}`],\n className,\n )}\n style={{...backgroundStyles, ...style}}\n {...props}\n >\n <div\n className={clsx(\n styles['CTABanner-container'],\n hasBorder && styles['CTABanner-container--border'],\n hasGridLines && styles['CTABanner-container--border-gridlines'],\n !hasGridLines && styles['CTABanner-container--rounded'],\n hasBackground && styles['CTABanner-container--background'],\n )}\n >\n {hasSideColumn ? (\n <Grid className={styles['CTABanner-grid']}>\n <Grid.Column span={{xsmall: 12, large: 6}} className={styles['CTABanner-grid-column--primary']}>\n <div\n className={clsx(\n styles['CTABanner-content'],\n defaultAlign === 'center' && styles['CTABanner-content--center'],\n )}\n >\n {LeadingComponent && <LeadingComponent />}\n {restChildren}\n {TrailingComponent && <TrailingComponent />}\n </div>\n </Grid.Column>\n <Grid.Column span={{xsmall: 12, large: 6}} className={styles['CTABanner-grid-column--secondary']}>\n {ImageChild \|\| ButtonGroupChild}\n </Grid.Column>\n </Grid>\n ) : (\n <div\n className={clsx(\n styles['CTABanner-content'],\n defaultAlign === 'center' && styles['CTABanner-content--center'],\n )}\n >\n {LeadingComponent && <LeadingComponent />}\n {restChildren}\n {TrailingComponent && <TrailingComponent />}\n </div>\n )}\n </div>\n </section>\n </Tag>\n )\n },\n)\n\nconst defaultHeadingLevel = 'h3'\n\ntype CTABannerHeadingProps = BaseProps<HTMLHeadingElement> & {\n children: React.ReactNode \| React.ReactNode[]\n} & HeadingProps\n\nconst defaultHeadingSize: HeadingProps['size'] = '3'\n\nconst _Heading = forwardRef(\n (\n {as = defaultHeadingLevel, size = defaultHeadingSize, className, children, ...props}: CTABannerHeadingProps,\n ref: Ref<HTMLHeadingElement>,\n ) => {\n return (\n <Heading ref={ref} className={clsx(styles['CTABanner-heading'], className)} size={size} as={as} {...props}>\n {children}\n </Heading>\n )\n },\n)\n\ntype CTABannerDescriptionProps = React.HtmlHTMLAttributes<HTMLParagraphElement> &\n BaseProps<HTMLParagraphElement> & {\n variant?: TextProps['variant']\n }\n\nconst Description = forwardRef(\n ({className, children, variant = 'muted', ...props}: CTABannerDescriptionProps, ref: Ref<HTMLParagraphElement>) => {\n return (\n <Text ref={ref} className={clsx(styles['CTABanner-description'], className)} as=\"p\" variant={variant} {...props}>\n {children}\n </Text>\n )\n },\n)\n\nconst _ButtonGroup = forwardRef(\n (\n {className, buttonSize = 'medium', buttonsAs, children, ...props}: React.ComponentProps<typeof ButtonGroup>,\n ref: Ref<HTMLDivElement>,\n ) => {\n return (\n <ButtonGroup\n buttonSize={buttonSize}\n buttonsAs={buttonsAs}\n className={clsx(styles['CTABanner-buttonGroup'], className)}\n ref={ref}\n {...props}\n >\n {children}\n </ButtonGroup>\n )\n },\n)\n\ntype CTABannerImageProps = BaseProps<HTMLImageElement> &\n Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' \| 'alt'> & {\n src: string\n alt: string\n }\n\nconst _Image = forwardRef(({className, src, alt, ...props}: CTABannerImageProps, ref: Ref<HTMLImageElement>) => {\n return (\n <Image\n ref={ref}\n className={clsx(styles['CTABanner-image'], className)}\n src={src}\n alt={alt}\n borderRadius=\"medium\"\n {...props}\n />\n )\n})\n\ntype CTABannerLogoProps = BaseProps<HTMLDivElement> &\n React.HTMLAttributes<HTMLDivElement> & {\n children: React.ReactNode\n }\n\nconst _Logo = forwardRef(({className, children, ...props}: CTABannerLogoProps, ref: Ref<HTMLDivElement>) => (\n <div ref={ref} className={clsx(styles['CTABanner-logo'], className)} {...props}>\n {children}\n </div>\n))\n\nconst _Link = ({className, children, variant = 'accent', ...props}: LinkProps) => (\n <Link variant={variant} className={clsx(styles['CTABanner-link'], className)} {...props}>\n {children}\n </Link>\n)\n\nexport const CTABanner = Object.assign(Root, {\n Heading: _Heading,\n Description,\n ButtonGroup: _ButtonGroup,\n Image: _Image,\n Logo: _Logo,\n Link: _Link,\n})\n"],"mappings":"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"}

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

@@ -1,5 +1,6 @@
-import './CTABanner.module-D4pYR4mY.css';var e = {
-	CTABanner: "Primer_Brand__CTABanner-module__CTABanner___osRag",
+import './CTABanner.module-D4pYR4mY.css';//#region src/CTABanner/CTABanner.module.css
+var e = "Primer_Brand__CTABanner-module__CTABanner___osRag", t = {
+	CTABanner: e,
 	"CTABanner--shadow": "Primer_Brand__CTABanner-module__CTABanner--shadow___bUnyT",
 	"CTABanner-grid": "Primer_Brand__CTABanner-module__CTABanner-grid___Hm5rQ",
 	"CTABanner-grid-column--primary": "Primer_Brand__CTABanner-module__CTABanner-grid-column--primary___m1rvk",
@@ -23,6 +24,6 @@ import './CTABanner.module-D4pYR4mY.css';var e = {
 	"CTABanner-buttonGroup": "Primer_Brand__CTABanner-module__CTABanner-buttonGroup___5SMyK"
 };
 //#endregion
-export { e as default };
+export { e as CTABanner, t as default };
 //# sourceMappingURL=CTABanner.module.js.map

package/esm/CTAForm/CTAForm.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { Button as t } from "../Button/Button.js";
 import { FormControl as n } from "../forms/FormControl/FormControl.js";
 import r from "./CTAForm.module.js";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CTAForm.js","names":[],"sources":["../../src/CTAForm/CTAForm.tsx"],"sourcesContent":["import React, {forwardRef, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport {Button, FormControl} from '../'\n\nimport styles from './CTAForm.module.css'\n\nconst Root = forwardRef(\n ({className, ...rest}: React.FormHTMLAttributes<HTMLFormElement>, ref: Ref<HTMLFormElement>) => {\n return <form ref={ref} className={clsx(styles.CTAForm, className)} {...rest} />\n },\n)\n\nconst _Input = forwardRef(\n ({className, children, ...rest}: React.HTMLAttributes<HTMLDivElement>, ref: Ref<HTMLDivElement>) => {\n const transformedChildren = React.Children.toArray(children).map(child => {\n if (React.isValidElement<React.ComponentProps<typeof FormControl>>(child) && child.type === FormControl) {\n return React.cloneElement(child, {\n fullWidth: true,\n required: true,\n ...child.props,\n })\n }\n return child\n })\n\n return (\n <div ref={ref} className={clsx(styles['CTAForm-input'], className)} {...rest}>\n {transformedChildren}\n </div>\n )\n },\n)\n\nconst _Confirm = forwardRef(\n ({className, children, ...rest}: React.HTMLAttributes<HTMLDivElement>, ref: Ref<HTMLDivElement>) => {\n const transformedChildren = React.Children.toArray(children).map(child => {\n if (React.isValidElement<React.ComponentProps<typeof FormControl>>(child) && child.type === FormControl) {\n return React.cloneElement(child, {\n fullWidth: true,\n size: 'large',\n ...child.props,\n })\n }\n return child\n })\n return (\n <div ref={ref} className={clsx(styles['CTAForm-confirm'], className)} {...rest}>\n {transformedChildren}\n </div>\n )\n },\n)\n\nconst _Action = forwardRef(\n (\n {className, children, ...rest}: Omit<React.ComponentProps<typeof Button>, 'variant' \| 'type'>,\n ref: Ref<HTMLButtonElement>,\n ) => {\n return (\n <Button\n type=\"submit\"\n variant=\"secondary\"\n className={clsx(styles['CTAForm-button'], className)}\n ref={ref}\n {...rest}\n >\n {children}\n </Button>\n )\n },\n)\n\nexport const CTAForm = Object.assign(Root, {Input: _Input, Confirm: _Confirm, Action: _Action})\n"],"mappings":";;;;;;;AAMA,IAAM,IAAO,GACV,EAAC,cAAW,GAAG,KAAkD,MACzD,kBAAC,QAAD;CAAW;CAAK,WAAW,EAAK,EAAO,SAAS,~~EAAU~~;~~CAAE~~,GAAI;~~CAAQ~~,CAAA,CAElF,~~EAEK~~,IAAS,GACZ,EAAC,cAAW,aAAU,GAAG,KAA6C,MAA6B;CAClG,IAAM,IAAsB,EAAM,SAAS,QAAQ,~~EAAS~~,CAAC,KAAI,MAC3D,EAAM,eAAyD,~~EAAM~~,~~IAAI~~,EAAM,SAAS,IACnF,EAAM,aAAa,GAAO;EAC/B,WAAW;EACX,UAAU;EACV,GAAG,EAAM;~~EACV~~,CAAC,~~GAEG~~,~~EACP~~;~~AAEF~~,~~QACE~~,kBAAC,OAAD;EAAU;EAAK,WAAW,EAAK,EAAO,kBAAkB,~~EAAU~~;~~EAAE~~,GAAI;YACrE;~~EACG~~,CAAA;~~EAGX~~,~~EAEK~~,IAAW,GACd,EAAC,cAAW,aAAU,GAAG,KAA6C,MAA6B;CAClG,IAAM,IAAsB,EAAM,SAAS,QAAQ,~~EAAS~~,CAAC,KAAI,MAC3D,EAAM,eAAyD,~~EAAM~~,~~IAAI~~,EAAM,SAAS,IACnF,EAAM,aAAa,GAAO;EAC/B,WAAW;EACX,MAAM;EACN,GAAG,EAAM;~~EACV~~,CAAC,~~GAEG~~,~~EACP~~;~~AACF~~,~~QACE~~,kBAAC,OAAD;EAAU;EAAK,WAAW,EAAK,EAAO,oBAAoB,~~EAAU~~;~~EAAE~~,GAAI;YACvE;~~EACG~~,CAAA;~~EAGX~~,~~EAEK~~,IAAU,GAEZ,EAAC,cAAW,aAAU,GAAG,KACzB,MAGE,kBAAC,GAAD;CACE,MAAK;CACL,SAAQ;CACR,WAAW,EAAK,EAAO,mBAAmB,~~EAAU~~;~~CAC/C~~;CACL,GAAI;CAEH;~~CACM~~,CAAA,CAGd,~~EAEY~~,IAAU,OAAO,OAAO,GAAM;CAAC,OAAO;CAAQ,SAAS;CAAU,QAAQ;~~CAAQ~~,CAAC"}
1	+ {"version":3,"file":"CTAForm.js","names":[],"sources":["../../src/CTAForm/CTAForm.tsx"],"sourcesContent":["import React, {forwardRef, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport {Button, FormControl} from '../'\n\nimport styles from './CTAForm.module.css'\n\nconst Root = forwardRef(\n ({className, ...rest}: React.FormHTMLAttributes<HTMLFormElement>, ref: Ref<HTMLFormElement>) => {\n return <form ref={ref} className={clsx(styles.CTAForm, className)} {...rest} />\n },\n)\n\nconst _Input = forwardRef(\n ({className, children, ...rest}: React.HTMLAttributes<HTMLDivElement>, ref: Ref<HTMLDivElement>) => {\n const transformedChildren = React.Children.toArray(children).map(child => {\n if (React.isValidElement<React.ComponentProps<typeof FormControl>>(child) && child.type === FormControl) {\n return React.cloneElement(child, {\n fullWidth: true,\n required: true,\n ...child.props,\n })\n }\n return child\n })\n\n return (\n <div ref={ref} className={clsx(styles['CTAForm-input'], className)} {...rest}>\n {transformedChildren}\n </div>\n )\n },\n)\n\nconst _Confirm = forwardRef(\n ({className, children, ...rest}: React.HTMLAttributes<HTMLDivElement>, ref: Ref<HTMLDivElement>) => {\n const transformedChildren = React.Children.toArray(children).map(child => {\n if (React.isValidElement<React.ComponentProps<typeof FormControl>>(child) && child.type === FormControl) {\n return React.cloneElement(child, {\n fullWidth: true,\n size: 'large',\n ...child.props,\n })\n }\n return child\n })\n return (\n <div ref={ref} className={clsx(styles['CTAForm-confirm'], className)} {...rest}>\n {transformedChildren}\n </div>\n )\n },\n)\n\nconst _Action = forwardRef(\n (\n {className, children, ...rest}: Omit<React.ComponentProps<typeof Button>, 'variant' \| 'type'>,\n ref: Ref<HTMLButtonElement>,\n ) => {\n return (\n <Button\n type=\"submit\"\n variant=\"secondary\"\n className={clsx(styles['CTAForm-button'], className)}\n ref={ref}\n {...rest}\n >\n {children}\n </Button>\n )\n },\n)\n\nexport const CTAForm = Object.assign(Root, {Input: _Input, Confirm: _Confirm, Action: _Action})\n"],"mappings":";;;;;;;AAMA,IAAM,IAAO,GACV,EAAC,cAAW,GAAG,KAAkD,MACzD,kBAAC,QAAD;CAAW;CAAK,WAAW,EAAK,EAAO,SAAS,CAAS;CAAG,GAAI;AAAO,CAAA,CAElF,GAEM,IAAS,GACZ,EAAC,cAAW,aAAU,GAAG,KAA6C,MAA6B;CAClG,IAAM,IAAsB,EAAM,SAAS,QAAQ,CAAQ,CAAC,CAAC,KAAI,MAC3D,EAAM,eAAyD,CAAK,KAAK,EAAM,SAAS,IACnF,EAAM,aAAa,GAAO;EAC/B,WAAW;EACX,UAAU;EACV,GAAG,EAAM;CACX,CAAC,IAEI,CACR;CAED,OACE,kBAAC,OAAD;EAAU;EAAK,WAAW,EAAK,EAAO,kBAAkB,CAAS;EAAG,GAAI;YACrE;CACE,CAAA;AAET,CACF,GAEM,IAAW,GACd,EAAC,cAAW,aAAU,GAAG,KAA6C,MAA6B;CAClG,IAAM,IAAsB,EAAM,SAAS,QAAQ,CAAQ,CAAC,CAAC,KAAI,MAC3D,EAAM,eAAyD,CAAK,KAAK,EAAM,SAAS,IACnF,EAAM,aAAa,GAAO;EAC/B,WAAW;EACX,MAAM;EACN,GAAG,EAAM;CACX,CAAC,IAEI,CACR;CACD,OACE,kBAAC,OAAD;EAAU;EAAK,WAAW,EAAK,EAAO,oBAAoB,CAAS;EAAG,GAAI;YACvE;CACE,CAAA;AAET,CACF,GAEM,IAAU,GAEZ,EAAC,cAAW,aAAU,GAAG,KACzB,MAGE,kBAAC,GAAD;CACE,MAAK;CACL,SAAQ;CACR,WAAW,EAAK,EAAO,mBAAmB,CAAS;CAC9C;CACL,GAAI;CAEH;AACK,CAAA,CAGd,GAEa,IAAU,OAAO,OAAO,GAAM;CAAC,OAAO;CAAQ,SAAS;CAAU,QAAQ;AAAO,CAAC"}

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

@@ -1,10 +1,11 @@
-import './CTAForm.module-Nf5sHaJq.css';var e = {
-	CTAForm: "Primer_Brand__CTAForm-module__CTAForm___f2NXs",
+import './CTAForm.module-Nf5sHaJq.css';//#region src/CTAForm/CTAForm.module.css
+var e = "Primer_Brand__CTAForm-module__CTAForm___f2NXs", t = {
+	CTAForm: e,
 	"CTAForm-input": "Primer_Brand__CTAForm-module__CTAForm-input___Jig33",
 	"CTAForm-confirm": "Primer_Brand__CTAForm-module__CTAForm-confirm___AqjVn",
 	"CTAForm-button": "Primer_Brand__CTAForm-module__CTAForm-button___JyHUP"
 };
 //#endregion
-export { e as default };
+export { e as CTAForm, t as default };
 //# sourceMappingURL=CTAForm.module.js.map

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

@@ -77,7 +77,7 @@ export type CardImageProps = {
     position?: 'block-start' | 'block-end';
     padding?: CardImagePadding;
 } & ImageProps;
-declare function CardImage({ className, position, padding, ...rest }: CardImageProps): import("react/jsx-runtime").JSX.Element;
+declare function CardImage({ className, position, padding, ...rest }: CardImageProps): React.JSX.Element;
 type CardIconProps = IconProps;
 type CardTokensProps = BaseProps<HTMLDivElement> & {
     children: React.ReactNode | React.ReactNode[];
@@ -101,7 +101,7 @@ type CardDescriptionProps = BaseProps<HTMLParagraphElement> & {
  */
 export declare const Card: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
     Image: typeof CardImage;
-    Icon: ({ className, hasBackground, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    Icon: ({ className, hasBackground, ...props }: IconProps) => React.JSX.Element;
     Label: React.ForwardRefExoticComponent<Omit<CardLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
     Tokens: React.ForwardRefExoticComponent<Omit<CardTokensProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Heading: React.ForwardRefExoticComponent<Omit<CardHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"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~~2CAYrG~~;AAED,KAAK,aAAa,GAAG,SAAS,CAAA;AAM9B,KAAK,eAAe,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C,QAAQ,CAAC,EAAE,iBAAiB,CAAA;CAC7B,CAAA;AAoBD,KAAK,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,EAAE,SAAS,CAAC,GAC/D,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACzD,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C,OAAO,CAAC,EAAE,gBAAgB,CAAA;CAC3B,CAAA;AAwBH,KAAK,gBAAgB,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAAG;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C,EAAE,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAA;IACtC,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,GAAG,IAAI,CAAC,YAAY,EAAE,cAAc,GAAG,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAC,GAC5E,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAA;AAqBrC,KAAK,oBAAoB,GAAG,SAAS,CAAC,oBAAoB,CAAC,GAAG;IAC5D,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC9C,CAAA;AAwBD;;;GAGG;AACH,eAAO,MAAM,IAAI;;mDA/G8C,SAAS;;;;;CAsHtE,CAAA"}
1	+ {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"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"}

package/esm/Card/Card.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { Colors as t } from "../constants.js";
 import { useProvidedRefOrCreate as n } from "../hooks/useRef.js";
 import { Text as r } from "../Text/Text.js";
@@ -7,7 +7,7 @@ import { Heading as a } from "../Heading/Heading.js";
 import { ExpandableArrow as o } from "../ExpandableArrow/ExpandableArrow.js";
 import { Image as s } from "../Image/Image.js";
 import c from "../Link/Link.module.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes-Bj7XtHMY.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes-C43pQ5wc.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/card/base-DgOt50dE.css';/* empty css                                                                                                         */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes-C43pQ5wc.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/card/base-DgOt50dE.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes-Bj7XtHMY.css';/* empty css                                                                                                         */
 import { Icon as l } from "../Icon/Icon.js";
 import { Token as u } from "../Token/Token.js";
 import { isFragmentElement as d } from "../utils/isFragmentElement.js";
@@ -54,7 +54,7 @@ var _ = ["default", "minimal"], v = [
 				X === "block-end" ? F : null,
 				v === "none" ? null : /* @__PURE__ */ g("div", {
 					className: e(f.Card__action, v === "arrow" && f["Card__action--arrowOnly"]),
-					"aria-hidden": v === "arrow" ? !0 : void 0,
+					"aria-hidden": v === "arrow" || void 0,
 					children: [/* @__PURE__ */ h("span", {
 						className: e(v === "arrow" && f.Card__actionLabelClip),
 						children: /* @__PURE__ */ h(r, {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.js","names":[],"sources":["../../src/Card/Card.tsx"],"sourcesContent":["import React, {RefObject, forwardRef} from 'react'\n\nimport {clsx} from 'clsx'\nimport {Heading, HeadingProps, Text, Image, type ImageProps} from '..'\nimport {EyebrowText} from '../EyebrowText'\nimport {Icon, type IconProps} from '../Icon'\nimport {Token} from '../Token'\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport type {BaseProps} from '../component-helpers'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\nimport {Colors} from '../constants'\nimport {isFragmentElement} from '../utils/isFragmentElement'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes.css'\n\n/\n Main stylesheet (as a CSS Module)\n /\nimport styles from './Card.module.css'\nimport stylesLink from '../Link/Link.module.css'\n\nexport const CardVariants = ['default', 'minimal'] as const\nexport const CardCTAVariants = ['text', 'arrow', 'none'] as const\nexport const CardBackgroundColors = ['default', 'subtle', 'none'] as const\nexport const CardTokenPositions = ['block-start', 'block-end'] as const\nexport const CardLabelVariants = ['token', 'accent-text'] as const\nexport const CardImagePaddingOptions = ['default', 'none'] as const\n\nexport const CardIconColors = Colors\n\nexport const defaultCardIconColor = CardIconColors[0]\nexport const defaultCardCTAVariant = CardCTAVariants[0]\nexport const defaultCardLabelVariant = CardLabelVariants[0]\n\nexport type CardVariants = (typeof CardVariants)[number]\nexport type CardCTAVariant = (typeof CardCTAVariants)[number]\nexport type CardTokenPosition = (typeof CardTokenPositions)[number]\nexport type CardLabelVariant = (typeof CardLabelVariants)[number]\nexport type CardBackgroundColor = (typeof CardBackgroundColors)[number]\nexport type CardImagePadding = (typeof CardImagePaddingOptions)[number]\n\ntype CardLeadingVisual = React.ReactElement \| React.ComponentType<{className?: string}>\n\nexport type CardProps = {\n /\n Specify alternative card appearance\n /\n variant?: CardVariants\n /\n Valid children include Card.Image, Card.Icon, Card.Label, Card.Tokens, Card.Heading, and Card.Description\n /\n children:\n \| React.ReactNode\n \| React.ReactElement<CardImageProps>\n \| React.ReactElement<CardIconProps>\n \| React.ReactElement<CardLabelProps>\n \| React.ReactElement<CardTokensProps>\n \| React.ReactElement<CardHeadingProps>\n \| React.ReactElement<CardDescriptionProps>\n /\n Disable transitions and animations within the Card\n /\n disableAnimation?: boolean\n /\n The href of the link\n * /\n href: string\n /\n Changes the cta text of the card\n * /\n ctaText?: string\n /\n Specifies the presentation of the call-to-action area\n /\n ctaVariant?: CardCTAVariant\n /\n Optional, custom background color.\n /\n backgroundColor?: CardBackgroundColor\n /\n A visual that appears before the heading, commonly used for a logo or brand mark\n /\n leadingVisual?: CardLeadingVisual\n /\n Adds a border to the card.\n /\n hasBorder?: boolean\n /\n Fills the width of the parent container and removes the default max-width.\n /\n fullWidth?: boolean\n /\n Aligns the card content\n /\n align?: 'start' \| 'center'\n} & Omit<BaseProps<HTMLDivElement>, 'animate'> &\n Omit<React.ComponentPropsWithoutRef<'div'>, 'onMouseEnter' \| 'onMouseLeave' \| 'onFocus' \| 'onBlur'> &\n Pick<React.ComponentPropsWithoutRef<'a'>, 'onMouseEnter' \| 'onMouseLeave' \| 'onFocus' \| 'onBlur'>\n\nconst CardRoot = forwardRef<HTMLDivElement, CardProps>(\n (\n {\n align = 'start',\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n children: childrenMaybeWrappedInFragment,\n className,\n ctaText = 'Learn more',\n ctaVariant = defaultCardCTAVariant,\n disableAnimation = false,\n fullWidth = false,\n href,\n hasBorder = false,\n leadingVisual,\n style,\n variant = 'default',\n backgroundColor,\n ...props\n },\n ref,\n ) => {\n const cardRef = useProvidedRefOrCreate(ref as RefObject<HTMLDivElement>)\n const resolvedBackgroundColor =\n backgroundColor ?? (variant === 'minimal' \|\| ctaVariant === 'arrow' ? 'none' : 'default')\n\n let children: React.ReactNode \| null\n\n if (childrenMaybeWrappedInFragment == null) {\n children = null\n } else if (isFragmentElement(childrenMaybeWrappedInFragment)) {\n children = childrenMaybeWrappedInFragment.props.children ?? null\n } else {\n children = childrenMaybeWrappedInFragment\n }\n\n const {cardImage, cardIcon, cardLabel, cardTokensBlockStart, cardTokensBlockEnd, cardHeading, cardDescription} =\n React.Children.toArray(children).reduce<{\n cardHeading?: ReturnType<typeof CardHeading>\n cardImage?: ReturnType<typeof CardImage>\n cardIcon?: ReturnType<typeof CardIcon>\n cardLabel?: ReturnType<typeof CardLabel>\n cardTokensBlockStart?: ReturnType<typeof CardTokens>\n cardTokensBlockEnd?: ReturnType<typeof CardTokens>\n cardDescription?: ReturnType<typeof CardDescription>\n }>((acc, child) => {\n if (isCardHeading(child)) {\n acc.cardHeading = React.cloneElement(child, {\n href,\n })\n } else if (isCardImage(child)) {\n acc.cardImage = child\n } else if (isCardIcon(child)) {\n acc.cardIcon = child\n } else if (isCardLabel(child)) {\n acc.cardLabel = child\n } else if (isCardTokens(child)) {\n if (child.props.position === 'block-end') {\n acc.cardTokensBlockEnd = child\n } else {\n acc.cardTokensBlockStart = child\n }\n } else if (isCardDescription(child)) {\n acc.cardDescription = child\n }\n\n return acc\n }, {})\n\n if ((process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test') && leadingVisual && cardIcon) {\n // eslint-disable-next-line no-console\n console.warn('Card: `leadingVisual` and `Card.Icon` cannot be used together. `Card.Icon` will not be rendered.')\n }\n\n const renderedLeadingVisual = getRenderableLeadingVisual(leadingVisual)\n const renderedCardIcon = renderedLeadingVisual ? undefined : cardIcon\n const imagePosition = cardImage ? cardImage.props.position \|\| 'block-start' : null\n const shouldRenderLinkArrow = !(align === 'center' && ctaVariant === 'text')\n\n return (\n <DefaultCardWrapperComponent\n style={style}\n className={clsx(\n fullWidth ? styles['Card--fullWidth'] : styles['Card--maxWidth'],\n styles[`Card--align-${align}`],\n )}\n >\n <div\n className={clsx(\n styles.Card,\n disableAnimation && styles['Card--disableAnimation'],\n renderedLeadingVisual && styles['Card--hasLeadingVisual'],\n ctaVariant === 'arrow' && styles['Card--ctaVariant-arrow'],\n cardTokensBlockEnd && styles['Card--tokensPosition-block-end'],\n variant === 'minimal' && styles['Card--variant-minimal'],\n hasBorder && styles['Card--border'],\n styles[`Card--backgroundColor-${resolvedBackgroundColor}`],\n imagePosition && styles[`Card--imagePos-${imagePosition}`],\n className,\n )}\n style={style}\n ref={cardRef}\n {...props}\n >\n {imagePosition === 'block-start' ? cardImage : null}\n {renderedLeadingVisual ? <div className={styles.Card__leadingVisual}>{renderedLeadingVisual}</div> : null}\n {renderedCardIcon}\n {cardTokensBlockStart}\n {cardLabel}\n {cardHeading}\n {cardDescription}\n {cardTokensBlockEnd}\n {imagePosition === 'block-end' ? cardImage : null}\n\n {ctaVariant !== 'none' ? (\n <div\n className={clsx(styles.Card__action, ctaVariant === 'arrow' && styles['Card__action--arrowOnly'])}\n aria-hidden={ctaVariant === 'arrow' ? true : undefined}\n >\n <span className={clsx(ctaVariant === 'arrow' && styles.Card__actionLabelClip)}>\n <Text as=\"span\" size=\"200\" className={clsx(stylesLink['Link--label'], styles.Card__actionLabel)}>\n {ctaText}\n </Text>\n </span>\n {shouldRenderLinkArrow ? (\n <span\n className={clsx(\n styles.Card__actionIcon,\n ctaVariant === 'arrow' && styles['Card__actionIcon--arrowOnly'],\n )}\n >\n <ExpandableArrow\n className={clsx(stylesLink['Link-arrow'], styles['Card--expandableArrow'])}\n aria-hidden=\"true\"\n />\n </span>\n ) : null}\n </div>\n ) : null}\n </div>\n </DefaultCardWrapperComponent>\n )\n },\n)\n\ntype DefaultCardWrapperComponentProps = React.PropsWithChildren<{\n className?: string\n style?: React.CSSProperties\n}>\n\nfunction DefaultCardWrapperComponent({className, children, style}: DefaultCardWrapperComponentProps) {\n return (\n <div className={clsx(styles['Card__outer'], className)} style={style}>\n {children}\n </div>\n )\n}\n\nfunction getRenderableLeadingVisual(leadingVisual?: CardLeadingVisual) {\n if (!leadingVisual) {\n return null\n }\n\n if (typeof leadingVisual === 'function') {\n return React.createElement(leadingVisual, {className: styles['Card__leadingVisualItem']})\n }\n\n if (React.isValidElement<{className?: string}>(leadingVisual)) {\n return React.cloneElement(leadingVisual, {\n className: clsx(styles['Card__leadingVisualItem'], leadingVisual.props.className),\n })\n }\n\n return null\n}\n\nexport type CardImageProps = {\n position?: 'block-start' \| 'block-end'\n padding?: CardImagePadding\n} & ImageProps\n\nfunction CardImage({className, position = 'block-start', padding = 'default', ...rest}: CardImageProps) {\n return (\n <div\n className={clsx(\n styles.Card__image,\n styles[`Card__image--position-${position}`],\n padding === 'none' && styles['Card__image--padding-none'],\n )}\n >\n <Image className={className} {...rest} />\n </div>\n )\n}\n\ntype CardIconProps = IconProps\n\nconst CardIcon = ({className, hasBackground = true, ...props}: IconProps) => (\n <Icon className={clsx(styles.Card__icon, className)} hasBackground={hasBackground} {...props} />\n)\n\ntype CardTokensProps = BaseProps<HTMLDivElement> & {\n children: React.ReactNode \| React.ReactNode[]\n position?: CardTokenPosition\n}\n\nconst CardTokens = forwardRef<HTMLDivElement, CardTokensProps>(\n ({children, className, position = 'block-start', ...rest}, ref) => {\n return (\n <div\n className={clsx(\n styles.Card__tokens,\n position === 'block-end' && styles['Card__tokens--position-block-end'],\n className,\n )}\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n )\n },\n)\n\ntype CardLabelProps = Omit<BaseProps<HTMLSpanElement>, 'animate'> &\n Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> & {\n children: React.ReactNode \| React.ReactNode[]\n variant?: CardLabelVariant\n }\n\nconst CardLabel = forwardRef<HTMLSpanElement, CardLabelProps>(\n ({children, variant = defaultCardLabelVariant, className, ...rest}, ref) => {\n if (variant === 'accent-text') {\n return (\n <EyebrowText ref={ref} className={clsx(styles.Card__label, className)} variant=\"accent\" {...rest}>\n {children}\n </EyebrowText>\n )\n }\n\n return (\n <Token\n ref={ref as React.Ref<HTMLSpanElement \| HTMLAnchorElement>}\n className={clsx(styles.Card__label, className)}\n {...rest}\n >\n {children}\n </Token>\n )\n },\n)\n\ntype CardHeadingProps = BaseProps<HTMLHeadingElement> & {\n children: React.ReactNode \| React.ReactNode[]\n as?: Exclude<HeadingProps['as'], 'h1'>\n href?: string\n} & Omit<HeadingProps, 'onMouseEnter' \| 'onMouseLeave' \| 'onFocus' \| 'onBlur'> &\n React.ComponentPropsWithoutRef<'a'>\n\nconst CardHeading = forwardRef<HTMLHeadingElement, CardHeadingProps>(\n ({children, as = 'h3', className, href, onMouseEnter, onMouseLeave, onBlur, onFocus, ...rest}, ref) => {\n return (\n <Heading size=\"6\" className={clsx(styles.Card__heading, className)} ref={ref} as={as} {...rest}>\n <a\n href={href}\n className={clsx(styles.Card__link)}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onBlur={onBlur}\n onFocus={onFocus}\n >\n {children}\n </a>\n </Heading>\n )\n },\n)\n\ntype CardDescriptionProps = BaseProps<HTMLParagraphElement> & {\n children: React.ReactNode \| React.ReactNode[]\n}\n\nconst CardDescription = forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n ({children, className, ...rest}, ref) => {\n return (\n <Text variant=\"muted\" ref={ref} size=\"200\" as=\"p\" className={clsx(styles.Card__description, className)} {...rest}>\n {children}\n </Text>\n )\n },\n)\n\nconst createComponentTypeGuard =\n <T,>(componentType: React.ComponentType<T>) =>\n (element: unknown): element is React.ReactElement<T> =>\n React.isValidElement(element) && element.type === componentType\n\nconst isCardImage = createComponentTypeGuard(CardImage)\nconst isCardIcon = createComponentTypeGuard(CardIcon)\nconst isCardLabel = createComponentTypeGuard(CardLabel)\nconst isCardTokens = createComponentTypeGuard(CardTokens)\nconst isCardHeading = createComponentTypeGuard(CardHeading)\nconst isCardDescription = createComponentTypeGuard(CardDescription)\n\n/\n Card component:\n * @see https://primer.style/brand/components/Card\n */\nexport const Card = Object.assign(CardRoot, {\n Image: CardImage,\n Icon: CardIcon,\n Label: CardLabel,\n Tokens: CardTokens,\n Heading: CardHeading,\n Description: CardDescription,\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"Card.js","names":[],"sources":["../../src/Card/Card.tsx"],"sourcesContent":["import React, {RefObject, forwardRef} from 'react'\n\nimport {clsx} from 'clsx'\nimport {Heading, HeadingProps, Text, Image, type ImageProps} from '..'\nimport {EyebrowText} from '../EyebrowText'\nimport {Icon, type IconProps} from '../Icon'\nimport {Token} from '../Token'\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport type {BaseProps} from '../component-helpers'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\nimport {Colors} from '../constants'\nimport {isFragmentElement} from '../utils/isFragmentElement'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes.css'\n\n/\n Main stylesheet (as a CSS Module)\n /\nimport styles from './Card.module.css'\nimport stylesLink from '../Link/Link.module.css'\n\nexport const CardVariants = ['default', 'minimal'] as const\nexport const CardCTAVariants = ['text', 'arrow', 'none'] as const\nexport const CardBackgroundColors = ['default', 'subtle', 'none'] as const\nexport const CardTokenPositions = ['block-start', 'block-end'] as const\nexport const CardLabelVariants = ['token', 'accent-text'] as const\nexport const CardImagePaddingOptions = ['default', 'none'] as const\n\nexport const CardIconColors = Colors\n\nexport const defaultCardIconColor = CardIconColors[0]\nexport const defaultCardCTAVariant = CardCTAVariants[0]\nexport const defaultCardLabelVariant = CardLabelVariants[0]\n\nexport type CardVariants = (typeof CardVariants)[number]\nexport type CardCTAVariant = (typeof CardCTAVariants)[number]\nexport type CardTokenPosition = (typeof CardTokenPositions)[number]\nexport type CardLabelVariant = (typeof CardLabelVariants)[number]\nexport type CardBackgroundColor = (typeof CardBackgroundColors)[number]\nexport type CardImagePadding = (typeof CardImagePaddingOptions)[number]\n\ntype CardLeadingVisual = React.ReactElement \| React.ComponentType<{className?: string}>\n\nexport type CardProps = {\n /\n Specify alternative card appearance\n /\n variant?: CardVariants\n /\n Valid children include Card.Image, Card.Icon, Card.Label, Card.Tokens, Card.Heading, and Card.Description\n /\n children:\n \| React.ReactNode\n \| React.ReactElement<CardImageProps>\n \| React.ReactElement<CardIconProps>\n \| React.ReactElement<CardLabelProps>\n \| React.ReactElement<CardTokensProps>\n \| React.ReactElement<CardHeadingProps>\n \| React.ReactElement<CardDescriptionProps>\n /\n Disable transitions and animations within the Card\n /\n disableAnimation?: boolean\n /\n The href of the link\n * /\n href: string\n /\n Changes the cta text of the card\n * /\n ctaText?: string\n /\n Specifies the presentation of the call-to-action area\n /\n ctaVariant?: CardCTAVariant\n /\n Optional, custom background color.\n /\n backgroundColor?: CardBackgroundColor\n /\n A visual that appears before the heading, commonly used for a logo or brand mark\n /\n leadingVisual?: CardLeadingVisual\n /\n Adds a border to the card.\n /\n hasBorder?: boolean\n /\n Fills the width of the parent container and removes the default max-width.\n /\n fullWidth?: boolean\n /\n Aligns the card content\n /\n align?: 'start' \| 'center'\n} & Omit<BaseProps<HTMLDivElement>, 'animate'> &\n Omit<React.ComponentPropsWithoutRef<'div'>, 'onMouseEnter' \| 'onMouseLeave' \| 'onFocus' \| 'onBlur'> &\n Pick<React.ComponentPropsWithoutRef<'a'>, 'onMouseEnter' \| 'onMouseLeave' \| 'onFocus' \| 'onBlur'>\n\nconst CardRoot = forwardRef<HTMLDivElement, CardProps>(\n (\n {\n align = 'start',\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n children: childrenMaybeWrappedInFragment,\n className,\n ctaText = 'Learn more',\n ctaVariant = defaultCardCTAVariant,\n disableAnimation = false,\n fullWidth = false,\n href,\n hasBorder = false,\n leadingVisual,\n style,\n variant = 'default',\n backgroundColor,\n ...props\n },\n ref,\n ) => {\n const cardRef = useProvidedRefOrCreate(ref as RefObject<HTMLDivElement>)\n const resolvedBackgroundColor =\n backgroundColor ?? (variant === 'minimal' \|\| ctaVariant === 'arrow' ? 'none' : 'default')\n\n let children: React.ReactNode \| null\n\n if (childrenMaybeWrappedInFragment == null) {\n children = null\n } else if (isFragmentElement(childrenMaybeWrappedInFragment)) {\n children = childrenMaybeWrappedInFragment.props.children ?? null\n } else {\n children = childrenMaybeWrappedInFragment\n }\n\n const {cardImage, cardIcon, cardLabel, cardTokensBlockStart, cardTokensBlockEnd, cardHeading, cardDescription} =\n React.Children.toArray(children).reduce<{\n cardHeading?: ReturnType<typeof CardHeading>\n cardImage?: ReturnType<typeof CardImage>\n cardIcon?: ReturnType<typeof CardIcon>\n cardLabel?: ReturnType<typeof CardLabel>\n cardTokensBlockStart?: ReturnType<typeof CardTokens>\n cardTokensBlockEnd?: ReturnType<typeof CardTokens>\n cardDescription?: ReturnType<typeof CardDescription>\n }>((acc, child) => {\n if (isCardHeading(child)) {\n acc.cardHeading = React.cloneElement(child, {\n href,\n })\n } else if (isCardImage(child)) {\n acc.cardImage = child\n } else if (isCardIcon(child)) {\n acc.cardIcon = child\n } else if (isCardLabel(child)) {\n acc.cardLabel = child\n } else if (isCardTokens(child)) {\n if (child.props.position === 'block-end') {\n acc.cardTokensBlockEnd = child\n } else {\n acc.cardTokensBlockStart = child\n }\n } else if (isCardDescription(child)) {\n acc.cardDescription = child\n }\n\n return acc\n }, {})\n\n if ((process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test') && leadingVisual && cardIcon) {\n // eslint-disable-next-line no-console\n console.warn('Card: `leadingVisual` and `Card.Icon` cannot be used together. `Card.Icon` will not be rendered.')\n }\n\n const renderedLeadingVisual = getRenderableLeadingVisual(leadingVisual)\n const renderedCardIcon = renderedLeadingVisual ? undefined : cardIcon\n const imagePosition = cardImage ? cardImage.props.position \|\| 'block-start' : null\n const shouldRenderLinkArrow = !(align === 'center' && ctaVariant === 'text')\n\n return (\n <DefaultCardWrapperComponent\n style={style}\n className={clsx(\n fullWidth ? styles['Card--fullWidth'] : styles['Card--maxWidth'],\n styles[`Card--align-${align}`],\n )}\n >\n <div\n className={clsx(\n styles.Card,\n disableAnimation && styles['Card--disableAnimation'],\n renderedLeadingVisual && styles['Card--hasLeadingVisual'],\n ctaVariant === 'arrow' && styles['Card--ctaVariant-arrow'],\n cardTokensBlockEnd && styles['Card--tokensPosition-block-end'],\n variant === 'minimal' && styles['Card--variant-minimal'],\n hasBorder && styles['Card--border'],\n styles[`Card--backgroundColor-${resolvedBackgroundColor}`],\n imagePosition && styles[`Card--imagePos-${imagePosition}`],\n className,\n )}\n style={style}\n ref={cardRef}\n {...props}\n >\n {imagePosition === 'block-start' ? cardImage : null}\n {renderedLeadingVisual ? <div className={styles.Card__leadingVisual}>{renderedLeadingVisual}</div> : null}\n {renderedCardIcon}\n {cardTokensBlockStart}\n {cardLabel}\n {cardHeading}\n {cardDescription}\n {cardTokensBlockEnd}\n {imagePosition === 'block-end' ? cardImage : null}\n\n {ctaVariant !== 'none' ? (\n <div\n className={clsx(styles.Card__action, ctaVariant === 'arrow' && styles['Card__action--arrowOnly'])}\n aria-hidden={ctaVariant === 'arrow' ? true : undefined}\n >\n <span className={clsx(ctaVariant === 'arrow' && styles.Card__actionLabelClip)}>\n <Text as=\"span\" size=\"200\" className={clsx(stylesLink['Link--label'], styles.Card__actionLabel)}>\n {ctaText}\n </Text>\n </span>\n {shouldRenderLinkArrow ? (\n <span\n className={clsx(\n styles.Card__actionIcon,\n ctaVariant === 'arrow' && styles['Card__actionIcon--arrowOnly'],\n )}\n >\n <ExpandableArrow\n className={clsx(stylesLink['Link-arrow'], styles['Card--expandableArrow'])}\n aria-hidden=\"true\"\n />\n </span>\n ) : null}\n </div>\n ) : null}\n </div>\n </DefaultCardWrapperComponent>\n )\n },\n)\n\ntype DefaultCardWrapperComponentProps = React.PropsWithChildren<{\n className?: string\n style?: React.CSSProperties\n}>\n\nfunction DefaultCardWrapperComponent({className, children, style}: DefaultCardWrapperComponentProps) {\n return (\n <div className={clsx(styles['Card__outer'], className)} style={style}>\n {children}\n </div>\n )\n}\n\nfunction getRenderableLeadingVisual(leadingVisual?: CardLeadingVisual) {\n if (!leadingVisual) {\n return null\n }\n\n if (typeof leadingVisual === 'function') {\n return React.createElement(leadingVisual, {className: styles['Card__leadingVisualItem']})\n }\n\n if (React.isValidElement<{className?: string}>(leadingVisual)) {\n return React.cloneElement(leadingVisual, {\n className: clsx(styles['Card__leadingVisualItem'], leadingVisual.props.className),\n })\n }\n\n return null\n}\n\nexport type CardImageProps = {\n position?: 'block-start' \| 'block-end'\n padding?: CardImagePadding\n} & ImageProps\n\nfunction CardImage({className, position = 'block-start', padding = 'default', ...rest}: CardImageProps) {\n return (\n <div\n className={clsx(\n styles.Card__image,\n styles[`Card__image--position-${position}`],\n padding === 'none' && styles['Card__image--padding-none'],\n )}\n >\n <Image className={className} {...rest} />\n </div>\n )\n}\n\ntype CardIconProps = IconProps\n\nconst CardIcon = ({className, hasBackground = true, ...props}: IconProps) => (\n <Icon className={clsx(styles.Card__icon, className)} hasBackground={hasBackground} {...props} />\n)\n\ntype CardTokensProps = BaseProps<HTMLDivElement> & {\n children: React.ReactNode \| React.ReactNode[]\n position?: CardTokenPosition\n}\n\nconst CardTokens = forwardRef<HTMLDivElement, CardTokensProps>(\n ({children, className, position = 'block-start', ...rest}, ref) => {\n return (\n <div\n className={clsx(\n styles.Card__tokens,\n position === 'block-end' && styles['Card__tokens--position-block-end'],\n className,\n )}\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n )\n },\n)\n\ntype CardLabelProps = Omit<BaseProps<HTMLSpanElement>, 'animate'> &\n Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> & {\n children: React.ReactNode \| React.ReactNode[]\n variant?: CardLabelVariant\n }\n\nconst CardLabel = forwardRef<HTMLSpanElement, CardLabelProps>(\n ({children, variant = defaultCardLabelVariant, className, ...rest}, ref) => {\n if (variant === 'accent-text') {\n return (\n <EyebrowText ref={ref} className={clsx(styles.Card__label, className)} variant=\"accent\" {...rest}>\n {children}\n </EyebrowText>\n )\n }\n\n return (\n <Token\n ref={ref as React.Ref<HTMLSpanElement \| HTMLAnchorElement>}\n className={clsx(styles.Card__label, className)}\n {...rest}\n >\n {children}\n </Token>\n )\n },\n)\n\ntype CardHeadingProps = BaseProps<HTMLHeadingElement> & {\n children: React.ReactNode \| React.ReactNode[]\n as?: Exclude<HeadingProps['as'], 'h1'>\n href?: string\n} & Omit<HeadingProps, 'onMouseEnter' \| 'onMouseLeave' \| 'onFocus' \| 'onBlur'> &\n React.ComponentPropsWithoutRef<'a'>\n\nconst CardHeading = forwardRef<HTMLHeadingElement, CardHeadingProps>(\n ({children, as = 'h3', className, href, onMouseEnter, onMouseLeave, onBlur, onFocus, ...rest}, ref) => {\n return (\n <Heading size=\"6\" className={clsx(styles.Card__heading, className)} ref={ref} as={as} {...rest}>\n <a\n href={href}\n className={clsx(styles.Card__link)}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onBlur={onBlur}\n onFocus={onFocus}\n >\n {children}\n </a>\n </Heading>\n )\n },\n)\n\ntype CardDescriptionProps = BaseProps<HTMLParagraphElement> & {\n children: React.ReactNode \| React.ReactNode[]\n}\n\nconst CardDescription = forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n ({children, className, ...rest}, ref) => {\n return (\n <Text variant=\"muted\" ref={ref} size=\"200\" as=\"p\" className={clsx(styles.Card__description, className)} {...rest}>\n {children}\n </Text>\n )\n },\n)\n\nconst createComponentTypeGuard =\n <T,>(componentType: React.ComponentType<T>) =>\n (element: unknown): element is React.ReactElement<T> =>\n React.isValidElement(element) && element.type === componentType\n\nconst isCardImage = createComponentTypeGuard(CardImage)\nconst isCardIcon = createComponentTypeGuard(CardIcon)\nconst isCardLabel = createComponentTypeGuard(CardLabel)\nconst isCardTokens = createComponentTypeGuard(CardTokens)\nconst isCardHeading = createComponentTypeGuard(CardHeading)\nconst isCardDescription = createComponentTypeGuard(CardDescription)\n\n/\n Card component:\n * @see https://primer.style/brand/components/Card\n */\nexport const Card = Object.assign(CardRoot, {\n Image: CardImage,\n Icon: CardIcon,\n Label: CardLabel,\n Tokens: CardTokens,\n Heading: CardHeading,\n Description: CardDescription,\n})\n"],"mappings":"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"}

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

@@ -1,5 +1,6 @@
-import './Card.module-Svi04dp7.css';var e = {
-	Card: "Primer_Brand__Card-module__Card___txAQX",
+import './Card.module-Svi04dp7.css';//#region src/Card/Card.module.css
+var e = "Primer_Brand__Card-module__Card___txAQX", t = "Primer_Brand__Card-module__Card__image___3J5wL", n = "Primer_Brand__Card-module__Card__link___LyRm6", r = "Primer_Brand__Card-module__Card__description___6RhVF", i = "Primer_Brand__Card-module__Card__outer___FFzJY", a = "Primer_Brand__Card-module__Card__leadingVisual___l_R3_", o = "Primer_Brand__Card-module__Card__leadingVisualItem___ICuuV", s = "Primer_Brand__Card-module__Card__icon___gPD1k", c = "Primer_Brand__Card-module__Card__tokens___9L_4a", l = "Primer_Brand__Card-module__Card__label___q_cqg", u = "Primer_Brand__Card-module__Card__heading___vdQlj", d = "Primer_Brand__Card-module__Card__action___NKFQ0", f = "Primer_Brand__Card-module__Card__actionIcon___KF4ar", p = "Primer_Brand__Card-module__Card__actionLabel____icG0", m = "Primer_Brand__Card-module__Card__actionLabelClip___kEth0", h = {
+	Card: e,
 	"Card--align-center": "Primer_Brand__Card-module__Card--align-center___zuZI_",
 	"Card--backgroundColor-default": "Primer_Brand__Card-module__Card--backgroundColor-default___1JGan",
 	"Card--backgroundColor-subtle": "Primer_Brand__Card-module__Card--backgroundColor-subtle___0bVGO",
@@ -7,35 +8,35 @@ import './Card.module-Svi04dp7.css';var e = {
 	"Card--tokensPosition-block-end": "Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy",
 	"Card--imagePos-block-end": "Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_",
 	"Card--hasLeadingVisual": "Primer_Brand__Card-module__Card--hasLeadingVisual___M8XW4",
-	Card__image: "Primer_Brand__Card-module__Card__image___3J5wL",
+	Card__image: t,
 	"Card--maxWidth": "Primer_Brand__Card-module__Card--maxWidth___vGoIk",
 	"Card--fullWidth": "Primer_Brand__Card-module__Card--fullWidth___nh9Zq",
 	"Card--variant-minimal": "Primer_Brand__Card-module__Card--variant-minimal___V3m21",
 	"Card--ctaVariant-arrow": "Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH",
-	Card__link: "Primer_Brand__Card-module__Card__link___LyRm6",
-	Card__description: "Primer_Brand__Card-module__Card__description___6RhVF",
+	Card__link: n,
+	Card__description: r,
 	"Card--disableAnimation": "Primer_Brand__Card-module__Card--disableAnimation___wZ9Jc",
 	"Card--border": "Primer_Brand__Card-module__Card--border___7rvcG",
-	Card__outer: "Primer_Brand__Card-module__Card__outer___FFzJY",
+	Card__outer: i,
 	"Card__image--padding-none": "Primer_Brand__Card-module__Card__image--padding-none___Bh_kj",
 	"Card__image--position-block-start": "Primer_Brand__Card-module__Card__image--position-block-start___Tdkgr",
 	"Card__image--position-block-end": "Primer_Brand__Card-module__Card__image--position-block-end___E_0LZ",
-	Card__leadingVisual: "Primer_Brand__Card-module__Card__leadingVisual___l_R3_",
-	Card__leadingVisualItem: "Primer_Brand__Card-module__Card__leadingVisualItem___ICuuV",
-	Card__icon: "Primer_Brand__Card-module__Card__icon___gPD1k",
-	Card__tokens: "Primer_Brand__Card-module__Card__tokens___9L_4a",
+	Card__leadingVisual: a,
+	Card__leadingVisualItem: o,
+	Card__icon: s,
+	Card__tokens: c,
 	"Card__tokens--position-block-end": "Primer_Brand__Card-module__Card__tokens--position-block-end___TL4R0",
-	Card__label: "Primer_Brand__Card-module__Card__label___q_cqg",
-	Card__heading: "Primer_Brand__Card-module__Card__heading___vdQlj",
-	Card__action: "Primer_Brand__Card-module__Card__action___NKFQ0",
-	Card__actionIcon: "Primer_Brand__Card-module__Card__actionIcon___KF4ar",
-	Card__actionLabel: "Primer_Brand__Card-module__Card__actionLabel____icG0",
-	Card__actionLabelClip: "Primer_Brand__Card-module__Card__actionLabelClip___kEth0",
+	Card__label: l,
+	Card__heading: u,
+	Card__action: d,
+	Card__actionIcon: f,
+	Card__actionLabel: p,
+	Card__actionLabelClip: m,
 	"Card__action--arrowOnly": "Primer_Brand__Card-module__Card__action--arrowOnly___19e3M",
 	"Card__actionIcon--arrowOnly": "Primer_Brand__Card-module__Card__actionIcon--arrowOnly___vCck1",
 	"Card--expandableArrow": "Primer_Brand__Card-module__Card--expandableArrow____CfmY"
 };
 //#endregion
-export { e as default };
+export { e as Card, d as Card__action, f as Card__actionIcon, p as Card__actionLabel, m as Card__actionLabelClip, r as Card__description, u as Card__heading, s as Card__icon, t as Card__image, l as Card__label, a as Card__leadingVisual, o as Card__leadingVisualItem, n as Card__link, i as Card__outer, c as Card__tokens, h as default };
 //# sourceMappingURL=Card.module.js.map

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

@@ -26,9 +26,9 @@ export type FootnoteProps = BaseProps<HTMLParagraphElement>;
  * @see https://primer.style/brand/components/ComparisonTable
  */
 export declare const ComparisonTable: React.ForwardRefExoticComponent<Omit<ComparisonTableProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<HTMLDivElement>> & {
-    Row: ({ children, ...rest }: PropsWithChildren<RowProps>) => import("react/jsx-runtime").JSX.Element;
-    Cell: ({ as, children, ...props }: PropsWithChildren<CellProps>) => import("react/jsx-runtime").JSX.Element;
-    Footnote: ({ children, ...props }: PropsWithChildren<FootnoteProps>) => import("react/jsx-runtime").JSX.Element;
+    Row: ({ children, ...rest }: PropsWithChildren<RowProps>) => React.JSX.Element;
+    Cell: ({ as, children, ...props }: PropsWithChildren<CellProps>) => React.JSX.Element;
+    Footnote: ({ children, ...props }: PropsWithChildren<FootnoteProps>) => React.JSX.Element;
 };
 export {};
 //# sourceMappingURL=ComparisonTable.d.ts.map

package/esm/ComparisonTable/ComparisonTable.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { useAnimation as t } from "../animation/useAnimation.js";
 import { Text as n } from "../Text/Text.js";
 import { Heading as r } from "../Heading/Heading.js";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ComparisonTable.js","names":[],"sources":["../../src/ComparisonTable/ComparisonTable.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, type Ref, useMemo, PropsWithChildren} from 'react'\nimport {Heading, Text, useAnimation} from '../'\n\nimport type {BaseProps} from '../component-helpers'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/comparison-table/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/comparison-table/comparison-table.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './ComparisonTable.module.css'\n\nexport type ComparisonTableProps<C extends React.ElementType> = BaseProps<C> & {\n as?: C\n heading?: string\n variant?: 'default' \| 'minimal'\n featuredColumn?: number\n} & React.ComponentPropsWithoutRef<C>\n\nexport const _ComparisonTable = forwardRef(\n <C extends React.ElementType>(\n {\n as,\n animate,\n children,\n className,\n heading,\n featuredColumn = 1,\n visuallyHiddenFeaturedLabel = 'featured',\n variant = 'default',\n style,\n ...props\n }: ComparisonTableProps<C>,\n ref: Ref<HTMLDivElement>,\n ) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const Component = as \|\| 'section'\n\n const Children = useMemo(\n () =>\n React.Children.toArray(children).filter(\n (child): child is React.ReactElement => React.isValidElement(child) && typeof child.type !== 'string',\n ),\n [children],\n )\n\n const rowChildren = Children.filter(\n (child): child is React.ReactElement<PropsWithChildren<RowProps>> => child.type === Row,\n )\n\n const HeaderRow = rowChildren\n .map((child, index) => {\n if (index === 0) {\n return React.cloneElement(child, {\n className: clsx(styles['ComparisonTable-row'], child.props.className),\n children: React.Children.map(child.props.children, (rowChild, rowChildIndex) => {\n if (React.isValidElement<CellProps>(rowChild) && rowChild.type === Cell) {\n const isFeatured = rowChildIndex === featuredColumn\n return React.cloneElement(rowChild, {\n as: rowChild.props.children ? 'th' : 'td',\n className: clsx(\n styles['ComparisonTable-cell'],\n styles[`ComparisonTable-cell-heading`],\n styles[`ComparisonTable-cell-heading--${variant}`],\n rowChildIndex === 0 && styles[`ComparisonTable-cell-heading--first`],\n isFeatured && styles[`ComparisonTable-cell-heading--featured`],\n child.props.className,\n ),\n children: (\n <span\n className={clsx(\n rowChildIndex === featuredColumn && styles['ComparisonTable-cell-heading-label--featured'],\n )}\n >\n {rowChild.props.children}\n {isFeatured && <span className=\"visually-hidden\">({visuallyHiddenFeaturedLabel})</span>}\n </span>\n ),\n })\n }\n return null\n }),\n })\n }\n return null\n })\n .filter(Boolean)\n\n const headerRowNames = useMemo(() => {\n const firstRow = rowChildren.at(0)\n if (!firstRow) return []\n\n return (\n React.Children.map(firstRow.props.children, child => {\n if (React.isValidElement<CellProps>(child)) {\n return child.props.children\n }\n return undefined\n }) \|\| []\n )\n }, [rowChildren])\n\n const [, ...regularRows] = rowChildren\n\n const RegularRows = regularRows.map((child, index) => {\n return React.cloneElement(child, {\n className: clsx(styles['ComparisonTable-row'], `ComparisonTable-row--${index}`, child.props.className),\n children: React.Children.map(child.props.children, (rowChild, cellIndex) => {\n if (React.isValidElement<CellProps>(rowChild) && rowChild.type === Cell) {\n return (\n <Cell\n {...rowChild.props}\n as={cellIndex === 0 ? 'th' : 'td'}\n className={clsx(\n styles['ComparisonTable-cell'],\n styles[`ComparisonTable-cell--${variant}`],\n cellIndex === 0 && styles[`ComparisonTable-cell-heading`],\n cellIndex === 0 && styles[`ComparisonTable-cell-heading--${variant}`],\n cellIndex === featuredColumn && styles[`ComparisonTable-cell--featured`],\n regularRows.length - 1 === index && styles['ComparisonTable-cell--lastrow'],\n child.props.className,\n )}\n >\n {cellIndex >= 1 && (\n <span\n className={clsx(\n styles['ComparisonTable-inline-cell-label'],\n styles['ComparisonTable--hide-element-on-narrow'],\n cellIndex === featuredColumn && styles['ComparisonTable-cell-heading-label--featured'],\n )}\n >\n {headerRowNames[cellIndex]}\n </span>\n )}\n <span\n className={clsx(\n styles['ComparisonTable-cell-container'],\n cellIndex === featuredColumn && styles['ComparisonTable-cell-container--featured'],\n )}\n >\n {rowChild.props.children}\n </span>\n </Cell>\n )\n }\n return null\n }),\n })\n })\n\n const FootnoteChild = Children.find(\n (child): child is React.ReactElement<PropsWithChildren<FootnoteProps>> => child.type === Footnote,\n )\n\n return (\n <Component\n ref={ref}\n className={clsx(animationClasses, className)}\n style={{...animationInlineStyles, ...style}}\n {...props}\n >\n {heading && (\n <Heading className={styles['ComparisonTable--heading']} as=\"h3\" size=\"4\">\n {heading}\n </Heading>\n )}\n <table className={clsx(styles.ComparisonTable, `ComparisonTable--${variant}`)}>\n {HeaderRow.length && <thead>{HeaderRow}</thead>}\n {RegularRows.length && <tbody>{RegularRows}</tbody>}\n </table>\n {FootnoteChild && <footer className={styles['ComparisonTable-footnote']}>{FootnoteChild}</footer>}\n </Component>\n )\n },\n)\n\ntype RowProps = React.HTMLAttributes<HTMLTableRowElement> & {\n header?: boolean\n}\n\nconst Row = ({children, ...rest}: PropsWithChildren<RowProps>) => {\n return <tr {...rest}>{children}</tr>\n}\n\nexport type CellProps = BaseProps<HTMLTableCellElement> &\n React.HTMLAttributes<HTMLTableCellElement> & {\n as?: 'td' \| 'th'\n }\n\nconst Cell = ({as, children, ...props}: PropsWithChildren<CellProps>) => {\n const Tag = as \|\| 'td'\n return <Tag {...props}>{children}</Tag>\n}\n\nexport type FootnoteProps = BaseProps<HTMLParagraphElement>\n\nconst Footnote = ({children, ...props}: PropsWithChildren<FootnoteProps>) => {\n if (typeof children === 'string') {\n return (\n <Text as=\"p\" size=\"100\" variant=\"muted\">\n {children}\n </Text>\n )\n }\n return <div {...props}>{children}</div>\n}\n\n/\n @description\n * Comparison tables are used to aid decision-making by displaying a list of features and their associated qualities side-by-side.\n * They are useful for comparing products, plans, or features in marketing pages.\n * @see https://primer.style/brand/components/ComparisonTable\n */\nexport const ComparisonTable = Object.assign(_ComparisonTable, {\n Row,\n Cell,\n Footnote,\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"ComparisonTable.js","names":[],"sources":["../../src/ComparisonTable/ComparisonTable.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, type Ref, useMemo, PropsWithChildren} from 'react'\nimport {Heading, Text, useAnimation} from '../'\n\nimport type {BaseProps} from '../component-helpers'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/comparison-table/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/comparison-table/comparison-table.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './ComparisonTable.module.css'\n\nexport type ComparisonTableProps<C extends React.ElementType> = BaseProps<C> & {\n as?: C\n heading?: string\n variant?: 'default' \| 'minimal'\n featuredColumn?: number\n} & React.ComponentPropsWithoutRef<C>\n\nexport const _ComparisonTable = forwardRef(\n <C extends React.ElementType>(\n {\n as,\n animate,\n children,\n className,\n heading,\n featuredColumn = 1,\n visuallyHiddenFeaturedLabel = 'featured',\n variant = 'default',\n style,\n ...props\n }: ComparisonTableProps<C>,\n ref: Ref<HTMLDivElement>,\n ) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const Component = as \|\| 'section'\n\n const Children = useMemo(\n () =>\n React.Children.toArray(children).filter(\n (child): child is React.ReactElement => React.isValidElement(child) && typeof child.type !== 'string',\n ),\n [children],\n )\n\n const rowChildren = Children.filter(\n (child): child is React.ReactElement<PropsWithChildren<RowProps>> => child.type === Row,\n )\n\n const HeaderRow = rowChildren\n .map((child, index) => {\n if (index === 0) {\n return React.cloneElement(child, {\n className: clsx(styles['ComparisonTable-row'], child.props.className),\n children: React.Children.map(child.props.children, (rowChild, rowChildIndex) => {\n if (React.isValidElement<CellProps>(rowChild) && rowChild.type === Cell) {\n const isFeatured = rowChildIndex === featuredColumn\n return React.cloneElement(rowChild, {\n as: rowChild.props.children ? 'th' : 'td',\n className: clsx(\n styles['ComparisonTable-cell'],\n styles[`ComparisonTable-cell-heading`],\n styles[`ComparisonTable-cell-heading--${variant}`],\n rowChildIndex === 0 && styles[`ComparisonTable-cell-heading--first`],\n isFeatured && styles[`ComparisonTable-cell-heading--featured`],\n child.props.className,\n ),\n children: (\n <span\n className={clsx(\n rowChildIndex === featuredColumn && styles['ComparisonTable-cell-heading-label--featured'],\n )}\n >\n {rowChild.props.children}\n {isFeatured && <span className=\"visually-hidden\">({visuallyHiddenFeaturedLabel})</span>}\n </span>\n ),\n })\n }\n return null\n }),\n })\n }\n return null\n })\n .filter(Boolean)\n\n const headerRowNames = useMemo(() => {\n const firstRow = rowChildren.at(0)\n if (!firstRow) return []\n\n return (\n React.Children.map(firstRow.props.children, child => {\n if (React.isValidElement<CellProps>(child)) {\n return child.props.children\n }\n return undefined\n }) \|\| []\n )\n }, [rowChildren])\n\n const [, ...regularRows] = rowChildren\n\n const RegularRows = regularRows.map((child, index) => {\n return React.cloneElement(child, {\n className: clsx(styles['ComparisonTable-row'], `ComparisonTable-row--${index}`, child.props.className),\n children: React.Children.map(child.props.children, (rowChild, cellIndex) => {\n if (React.isValidElement<CellProps>(rowChild) && rowChild.type === Cell) {\n return (\n <Cell\n {...rowChild.props}\n as={cellIndex === 0 ? 'th' : 'td'}\n className={clsx(\n styles['ComparisonTable-cell'],\n styles[`ComparisonTable-cell--${variant}`],\n cellIndex === 0 && styles[`ComparisonTable-cell-heading`],\n cellIndex === 0 && styles[`ComparisonTable-cell-heading--${variant}`],\n cellIndex === featuredColumn && styles[`ComparisonTable-cell--featured`],\n regularRows.length - 1 === index && styles['ComparisonTable-cell--lastrow'],\n child.props.className,\n )}\n >\n {cellIndex >= 1 && (\n <span\n className={clsx(\n styles['ComparisonTable-inline-cell-label'],\n styles['ComparisonTable--hide-element-on-narrow'],\n cellIndex === featuredColumn && styles['ComparisonTable-cell-heading-label--featured'],\n )}\n >\n {headerRowNames[cellIndex]}\n </span>\n )}\n <span\n className={clsx(\n styles['ComparisonTable-cell-container'],\n cellIndex === featuredColumn && styles['ComparisonTable-cell-container--featured'],\n )}\n >\n {rowChild.props.children}\n </span>\n </Cell>\n )\n }\n return null\n }),\n })\n })\n\n const FootnoteChild = Children.find(\n (child): child is React.ReactElement<PropsWithChildren<FootnoteProps>> => child.type === Footnote,\n )\n\n return (\n <Component\n ref={ref}\n className={clsx(animationClasses, className)}\n style={{...animationInlineStyles, ...style}}\n {...props}\n >\n {heading && (\n <Heading className={styles['ComparisonTable--heading']} as=\"h3\" size=\"4\">\n {heading}\n </Heading>\n )}\n <table className={clsx(styles.ComparisonTable, `ComparisonTable--${variant}`)}>\n {HeaderRow.length && <thead>{HeaderRow}</thead>}\n {RegularRows.length && <tbody>{RegularRows}</tbody>}\n </table>\n {FootnoteChild && <footer className={styles['ComparisonTable-footnote']}>{FootnoteChild}</footer>}\n </Component>\n )\n },\n)\n\ntype RowProps = React.HTMLAttributes<HTMLTableRowElement> & {\n header?: boolean\n}\n\nconst Row = ({children, ...rest}: PropsWithChildren<RowProps>) => {\n return <tr {...rest}>{children}</tr>\n}\n\nexport type CellProps = BaseProps<HTMLTableCellElement> &\n React.HTMLAttributes<HTMLTableCellElement> & {\n as?: 'td' \| 'th'\n }\n\nconst Cell = ({as, children, ...props}: PropsWithChildren<CellProps>) => {\n const Tag = as \|\| 'td'\n return <Tag {...props}>{children}</Tag>\n}\n\nexport type FootnoteProps = BaseProps<HTMLParagraphElement>\n\nconst Footnote = ({children, ...props}: PropsWithChildren<FootnoteProps>) => {\n if (typeof children === 'string') {\n return (\n <Text as=\"p\" size=\"100\" variant=\"muted\">\n {children}\n </Text>\n )\n }\n return <div {...props}>{children}</div>\n}\n\n/\n @description\n * Comparison tables are used to aid decision-making by displaying a list of features and their associated qualities side-by-side.\n * They are useful for comparing products, plans, or features in marketing pages.\n * @see https://primer.style/brand/components/ComparisonTable\n */\nexport const ComparisonTable = Object.assign(_ComparisonTable, {\n Row,\n Cell,\n Footnote,\n})\n"],"mappings":"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"}

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

@@ -1,7 +1,8 @@
-import './ComparisonTable.module-CUq68rV0.css';var e = {
+import './ComparisonTable.module-CUq68rV0.css';//#region src/ComparisonTable/ComparisonTable.module.css
+var e = "Primer_Brand__ComparisonTable-module__ComparisonTable___ZxT9n", t = {
 	"ComparisonTable--heading": "Primer_Brand__ComparisonTable-module__ComparisonTable--heading___hSsMK",
 	"ComparisonTable-footnote": "Primer_Brand__ComparisonTable-module__ComparisonTable-footnote___VE0Vy",
-	ComparisonTable: "Primer_Brand__ComparisonTable-module__ComparisonTable___ZxT9n",
+	ComparisonTable: e,
 	"ComparisonTable-cell": "Primer_Brand__ComparisonTable-module__ComparisonTable-cell___4CiEs",
 	"ComparisonTable-cell-heading": "Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___GoDXQ",
 	"ComparisonTable-cell-container": "Primer_Brand__ComparisonTable-module__ComparisonTable-cell-container___NtAjB",
@@ -15,6 +16,6 @@ import './ComparisonTable.module-CUq68rV0.css';var e = {
 	"ComparisonTable-cell-container--featured": "Primer_Brand__ComparisonTable-module__ComparisonTable-cell-container--featured___ezdmW"
 };
 //#endregion
-export { e as default };
+export { e as ComparisonTable, t as default };
 //# sourceMappingURL=ComparisonTable.module.js.map

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

@@ -1,3 +1,4 @@
+import React from 'react';
 type ExpandableArrowProps = {
     className?: string;
     /** Animate between a chevron arrow and an arrow with a stem by toggling the value of `expanded` */
@@ -5,6 +6,6 @@ type ExpandableArrowProps = {
     hidden?: boolean;
     reverse?: boolean;
 };
-export declare function ExpandableArrow({ className, expanded, reverse, hidden, ...rest }: ExpandableArrowProps): import("react/jsx-runtime").JSX.Element;
+export declare function ExpandableArrow({ className, expanded, reverse, hidden, ...rest }: ExpandableArrowProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=ExpandableArrow.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpandableArrow.d.ts","sourceRoot":"","sources":["../../src/ExpandableArrow/ExpandableArrow.tsx"],"names":[],"mappings":"~~AAIA~~,KAAK,oBAAoB,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mGAAmG;IACnG,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,wBAAgB,eAAe,CAAC,EAAC,SAAS,EAAE,QAAgB,EAAE,OAAe,EAAE,MAAM,EAAE,GAAG,IAAI,EAAC,EAAE,oBAAoB,~~2CA8BpH~~"}
1	+ {"version":3,"file":"ExpandableArrow.d.ts","sourceRoot":"","sources":["../../src/ExpandableArrow/ExpandableArrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,KAAK,oBAAoB,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mGAAmG;IACnG,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,wBAAgB,eAAe,CAAC,EAAC,SAAS,EAAE,QAAgB,EAAE,OAAe,EAAE,MAAM,EAAE,GAAG,IAAI,EAAC,EAAE,oBAAoB,qBA8BpH"}

package/esm/ExpandableArrow/ExpandableArrow.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import t from "./ExpandableArrow.module.js";
 import "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpandableArrow.js","names":[],"sources":["../../src/ExpandableArrow/ExpandableArrow.tsx"],"sourcesContent":["import React from 'react'\nimport {clsx} from 'clsx'\nimport styles from './ExpandableArrow.module.css'\n\ntype ExpandableArrowProps = {\n className?: string\n /** Animate between a chevron arrow and an arrow with a stem by toggling the value of `expanded` */\n expanded?: boolean\n hidden?: boolean\n reverse?: boolean\n}\n\nexport function ExpandableArrow({className, expanded = false, reverse = false, hidden, ...rest}: ExpandableArrowProps) {\n return (\n <svg\n className={clsx(\n styles.ExpandableArrow,\n expanded && styles['ExpandableArrow--expanded'],\n reverse && styles['ExpandableArrow--reversed'],\n className,\n )}\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n aria-hidden={hidden}\n focusable={hidden ? 'false' : undefined}\n {...rest}\n >\n <path\n fill=\"currentColor\"\n d=\"M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z\"\n />\n <path\n className={clsx(styles['ExpandableArrow-stem'], expanded && styles['ExpandableArrow-stem--expanded'])}\n stroke=\"currentColor\"\n d=\"M1.75 8H11\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n />\n </svg>\n )\n}\n"],"mappings":";;;;;AAYA,SAAgB,EAAgB,EAAC,cAAW,cAAW,IAAO,aAAU,IAAO,WAAQ,GAAG,KAA6B;~~AACrH~~,~~QACE~~,kBAAC,OAAD;EACE,WAAW,EACT,EAAO,iBACP,KAAY,EAAO,8BACnB,KAAW,EAAO,8BAClB,~~EACD~~;~~EACD~~,OAAM;EACN,QAAO;EACP,SAAQ;EACR,MAAK;EACL,eAAa;EACb,WAAW,IAAS,UAAU,KAAA;EAC9B,GAAI;YAbN,CAeE,kBAAC,QAAD;GACE,MAAK;GACL,GAAE;~~GACF~~,CAAA,~~EACF~~,kBAAC,QAAD;GACE,WAAW,EAAK,EAAO,yBAAyB,KAAY,EAAO,~~kCAAkC~~;~~GACrG~~,QAAO;GACP,GAAE;GACF,aAAY;GACZ,eAAc;~~GACd~~,CAAA,CACE"}
1	+ {"version":3,"file":"ExpandableArrow.js","names":[],"sources":["../../src/ExpandableArrow/ExpandableArrow.tsx"],"sourcesContent":["import React from 'react'\nimport {clsx} from 'clsx'\nimport styles from './ExpandableArrow.module.css'\n\ntype ExpandableArrowProps = {\n className?: string\n /** Animate between a chevron arrow and an arrow with a stem by toggling the value of `expanded` */\n expanded?: boolean\n hidden?: boolean\n reverse?: boolean\n}\n\nexport function ExpandableArrow({className, expanded = false, reverse = false, hidden, ...rest}: ExpandableArrowProps) {\n return (\n <svg\n className={clsx(\n styles.ExpandableArrow,\n expanded && styles['ExpandableArrow--expanded'],\n reverse && styles['ExpandableArrow--reversed'],\n className,\n )}\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n aria-hidden={hidden}\n focusable={hidden ? 'false' : undefined}\n {...rest}\n >\n <path\n fill=\"currentColor\"\n d=\"M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z\"\n />\n <path\n className={clsx(styles['ExpandableArrow-stem'], expanded && styles['ExpandableArrow-stem--expanded'])}\n stroke=\"currentColor\"\n d=\"M1.75 8H11\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n />\n </svg>\n )\n}\n"],"mappings":";;;;;AAYA,SAAgB,EAAgB,EAAC,cAAW,cAAW,IAAO,aAAU,IAAO,WAAQ,GAAG,KAA6B;CACrH,OACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAO,iBACP,KAAY,EAAO,8BACnB,KAAW,EAAO,8BAClB,CACF;EACA,OAAM;EACN,QAAO;EACP,SAAQ;EACR,MAAK;EACL,eAAa;EACb,WAAW,IAAS,UAAU,KAAA;EAC9B,GAAI;YAbN,CAeE,kBAAC,QAAD;GACE,MAAK;GACL,GAAE;EACH,CAAA,GACD,kBAAC,QAAD;GACE,WAAW,EAAK,EAAO,yBAAyB,KAAY,EAAO,iCAAiC;GACpG,QAAO;GACP,GAAE;GACF,aAAY;GACZ,eAAc;EACf,CAAA,CACE;;AAET"}

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

@@ -1,11 +1,12 @@
-import './ExpandableArrow.module-hRhRe88K.css';var e = {
-	ExpandableArrow: "Primer_Brand__ExpandableArrow-module__ExpandableArrow___aaZs9",
+import './ExpandableArrow.module-hRhRe88K.css';//#region src/ExpandableArrow/ExpandableArrow.module.css
+var e = "Primer_Brand__ExpandableArrow-module__ExpandableArrow___aaZs9", t = {
+	ExpandableArrow: e,
 	"ExpandableArrow--expanded": "Primer_Brand__ExpandableArrow-module__ExpandableArrow--expanded____FeTD",
 	"ExpandableArrow-stem": "Primer_Brand__ExpandableArrow-module__ExpandableArrow-stem___0K8Hz",
 	"ExpandableArrow-stem--expanded": "Primer_Brand__ExpandableArrow-module__ExpandableArrow-stem--expanded___uG15m",
 	"ExpandableArrow--reversed": "Primer_Brand__ExpandableArrow-module__ExpandableArrow--reversed___ekIkv"
 };
 //#endregion
-export { e as default };
+export { e as ExpandableArrow, t as default };
 //# sourceMappingURL=ExpandableArrow.module.js.map

package/esm/EyebrowBanner/EyebrowBanner.js CHANGED Viewed

@@ -1,8 +1,8 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { BiColorGradients as t, Colors as n } from "../constants.js";
 import { Text as r } from "../Text/Text.js";
 import { ExpandableArrow as i } from "../ExpandableArrow/ExpandableArrow.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/eyebrow-banner-CPW2Ri4S.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/colors-with-modes-BzV3LYhH.css';/* empty css                                                                                                         */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/colors-with-modes-BzV3LYhH.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/eyebrow-banner-CPW2Ri4S.css';/* empty css                                                                                                         */
 /* empty css                                                                                                            */
 import a from "./EyebrowBanner.module.js";
 import o, { forwardRef as s, useCallback as c } from "react";