@primer/react-brand 0.72.0-rc.f8b72452 → 0.72.1-rc.72b4db43

package/esm/ButtonGroup/ButtonGroup.js

@@ -1,24 +1,32 @@
 import e from "../node_modules/clsx/dist/clsx.js";
 import { Button as t } from "../Button/Button.js";
-import n from "./ButtonGroup.module.js";
-import r, { forwardRef as i } from "react";
-import { jsx as a } from "react/jsx-runtime";
+import { ActionMenu as n } from "../ActionMenu/ActionMenu.js";
+import r from "./ButtonGroup.module.js";
+import i, { forwardRef as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
 //#region src/ButtonGroup/ButtonGroup.tsx
-var o = i(({ buttonSize: i = "medium", buttonsAs: o, className: s, children: c, ...l }, u) => {
-	let d = r.Children.toArray(c).map((e, n) => r.isValidElement(e) && e.type === t ? r.cloneElement(e, {
-		size: i,
-		as: o,
-		variant: n === 0 ? "primary" : "subtle",
-		...e.props
-	}) : null).filter(Boolean).slice(0, 2);
-	return /* @__PURE__ */ a("section", {
-		ref: u,
-		...l,
-		className: e(n.ButtonGroup, s),
-		children: d
+var s = a(({ buttonSize: a = "medium", buttonsAs: s, className: c, children: l, ...u }, d) => {
+	let f = i.Children.toArray(l).filter((e) => i.isValidElement(e) && (e.type === t || e.type === n)).slice(0, 2).map((e, r) => {
+		let o = r === 0 ? "primary" : "secondary";
+		if (i.isValidElement(e) && e.type === t) return i.cloneElement(e, {
+			size: e.props.size ?? a,
+			as: e.props.as ?? s,
+			variant: e.props.variant ?? o
+		});
+		let c = e, l = a === "large" ? "medium" : a, u = i.Children.map(c.props.children, (e) => i.isValidElement(e) && e.type === n.Button ? i.cloneElement(e, { variant: e.props.variant ?? o }) : e);
+		return i.cloneElement(c, {
+			children: u,
+			size: c.props.size ?? l
+		});
+	});
+	return /* @__PURE__ */ o("section", {
+		ref: d,
+		...u,
+		className: e(r.ButtonGroup, c),
+		children: f
 	});
 });
 //#endregion
-export { o as ButtonGroup };
+export { s as ButtonGroup };
 
 //# sourceMappingURL=ButtonGroup.js.map

package/esm/ButtonGroup/ButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.js","names":[],"sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import React, {forwardRef, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\nimport {Button, ButtonProps} from '../Button'\nimport styles from './ButtonGroup.module.css'\n\nexport type PrimerBrandButtonType = React.ReactElement<ButtonProps<React.ElementType<'button' | 'a'>>>\n\nexport type ButtonGroupProps = BaseProps<HTMLDivElement> & {\n  children: PrimerBrandButtonType[] | PrimerBrandButtonType\n  buttonSize?: ButtonProps<'button' | 'a'>['size']\n  buttonsAs?: 'button' | 'a'\n}\n\nexport const ButtonGroup = forwardRef(\n  ({buttonSize = 'medium', buttonsAs, className, children, ...props}: ButtonGroupProps, ref: Ref<HTMLDivElement>) => {\n    const buttonsToRender = React.Children.toArray(children)\n      .map((child, index) => {\n        if (React.isValidElement<ButtonProps<'button' | 'a'>>(child) && child.type === Button) {\n          return React.cloneElement(child, {\n            size: buttonSize,\n            as: buttonsAs,\n            variant: index === 0 ? 'primary' : 'subtle',\n            ...child.props,\n          })\n        }\n        return null\n      })\n      .filter(Boolean)\n      .slice(0, 2)\n\n    return (\n      <section ref={ref} {...props} className={clsx(styles.ButtonGroup, className)}>\n        {buttonsToRender as React.ReactElement[]}\n      </section>\n    )\n  },\n)\n"],"mappings":";;;;;;AAcA,IAAa,IAAc,GACxB,EAAC,gBAAa,UAAU,cAAW,cAAW,aAAU,GAAG,KAA0B,MAA6B;CACjH,IAAM,IAAkB,EAAM,SAAS,QAAQ,EAAS,CACrD,KAAK,GAAO,MACP,EAAM,eAA4C,EAAM,IAAI,EAAM,SAAS,IACtE,EAAM,aAAa,GAAO;EAC/B,MAAM;EACN,IAAI;EACJ,SAAS,MAAU,IAAI,YAAY;EACnC,GAAG,EAAM;EACV,CAAC,GAEG,KACP,CACD,OAAO,QAAQ,CACf,MAAM,GAAG,EAAE;AAEd,QACE,kBAAC,WAAD;EAAc;EAAK,GAAI;EAAO,WAAW,EAAK,EAAO,aAAa,EAAU;YACzE;EACO,CAAA;EAGf"}
+{"version":3,"file":"ButtonGroup.js","names":[],"sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import React, {forwardRef, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\nimport {Button, ButtonProps} from '../Button'\nimport {ActionMenu, ActionMenuProps} from '../ActionMenu'\nimport styles from './ButtonGroup.module.css'\n\nexport type PrimerBrandButtonType = React.ReactElement<ButtonProps<React.ElementType<'button' | 'a'>>>\nexport type PrimerBrandActionMenuType = React.ReactElement<ActionMenuProps>\nexport type ButtonGroupChild = PrimerBrandButtonType | PrimerBrandActionMenuType | false | null | undefined\n\nexport type ButtonGroupProps = BaseProps<HTMLDivElement> & {\n  children: ButtonGroupChild | ButtonGroupChild[]\n  buttonSize?: ButtonProps<'button' | 'a'>['size']\n  buttonsAs?: 'button' | 'a'\n}\n\nexport const ButtonGroup = forwardRef(\n  ({buttonSize = 'medium', buttonsAs, className, children, ...props}: ButtonGroupProps, ref: Ref<HTMLDivElement>) => {\n    const buttonsToRender = React.Children.toArray(children)\n      .filter(\n        (child): child is React.ReactElement =>\n          React.isValidElement(child) && (child.type === Button || child.type === ActionMenu),\n      )\n      .slice(0, 2)\n      .map((child, index) => {\n        const variant = index === 0 ? 'primary' : 'secondary'\n\n        if (React.isValidElement<ButtonProps<'button' | 'a'>>(child) && child.type === Button) {\n          return React.cloneElement(child, {\n            size: child.props.size ?? buttonSize,\n            as: child.props.as ?? buttonsAs,\n            variant: child.props.variant ?? variant,\n          })\n        }\n\n        const actionMenu = child as PrimerBrandActionMenuType\n        const actionMenuSize = buttonSize === 'large' ? 'medium' : buttonSize\n        const actionMenuChildren = React.Children.map(actionMenu.props.children, actionMenuChild => {\n          if (\n            React.isValidElement<React.ComponentProps<typeof ActionMenu.Button>>(actionMenuChild) &&\n            actionMenuChild.type === ActionMenu.Button\n          ) {\n            return React.cloneElement(actionMenuChild, {\n              variant: actionMenuChild.props.variant ?? variant,\n            })\n          }\n          return actionMenuChild\n        })\n\n        return React.cloneElement(actionMenu, {\n          children: actionMenuChildren,\n          size: actionMenu.props.size ?? actionMenuSize,\n        })\n      })\n\n    return (\n      <section ref={ref} {...props} className={clsx(styles.ButtonGroup, className)}>\n        {buttonsToRender}\n      </section>\n    )\n  },\n)\n"],"mappings":";;;;;;;AAiBA,IAAa,IAAc,GACxB,EAAC,gBAAa,UAAU,cAAW,cAAW,aAAU,GAAG,KAA0B,MAA6B;CACjH,IAAM,IAAkB,EAAM,SAAS,QAAQ,EAAS,CACrD,QACE,MACC,EAAM,eAAe,EAAM,KAAK,EAAM,SAAS,KAAU,EAAM,SAAS,GAC3E,CACA,MAAM,GAAG,EAAE,CACX,KAAK,GAAO,MAAU;EACrB,IAAM,IAAU,MAAU,IAAI,YAAY;AAE1C,MAAI,EAAM,eAA4C,EAAM,IAAI,EAAM,SAAS,EAC7E,QAAO,EAAM,aAAa,GAAO;GAC/B,MAAM,EAAM,MAAM,QAAQ;GAC1B,IAAI,EAAM,MAAM,MAAM;GACtB,SAAS,EAAM,MAAM,WAAW;GACjC,CAAC;EAGJ,IAAM,IAAa,GACb,IAAiB,MAAe,UAAU,WAAW,GACrD,IAAqB,EAAM,SAAS,IAAI,EAAW,MAAM,WAAU,MAErE,EAAM,eAA+D,EAAgB,IACrF,EAAgB,SAAS,EAAW,SAE7B,EAAM,aAAa,GAAiB,EACzC,SAAS,EAAgB,MAAM,WAAW,GAC3C,CAAC,GAEG,EACP;AAEF,SAAO,EAAM,aAAa,GAAY;GACpC,UAAU;GACV,MAAM,EAAW,MAAM,QAAQ;GAChC,CAAC;GACF;AAEJ,QACE,kBAAC,WAAD;EAAc;EAAK,GAAI;EAAO,WAAW,EAAK,EAAO,aAAa,EAAU;YACzE;EACO,CAAA;EAGf"}

package/esm/CTABanner/CTABanner.js

@@ -2,8 +2,8 @@ import e from "../node_modules/clsx/dist/clsx.js";
 import { Grid as t } from "../Grid/Grid.js";
 import { Text as n } from "../Text/Text.js";
 import { Heading as r } from "../Heading/Heading.js";
-import { Image as i } from "../Image/Image.js";
-import { ButtonGroup as a } from "../ButtonGroup/ButtonGroup.js";
+import { ButtonGroup as i } from "../ButtonGroup/ButtonGroup.js";
+import { Image as a } from "../Image/Image.js";
 import { Link as o } from "../Link/Link.js";
 import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes-B9zRp3WA.css';/* empty css                                                                                                        */
 import s from "./CTABanner.module.js";
@@ -101,20 +101,20 @@ var m = ["default", "subtle"], h = l(({ align: n = "center", hasBorder: r = !1,
 	variant: i,
 	...a,
 	children: r
-})), b = l(({ className: t, buttonSize: n = "medium", buttonsAs: r, children: i, ...o }, c) => /* @__PURE__ */ f(a, {
+})), b = l(({ className: t, buttonSize: n = "medium", buttonsAs: r, children: a, ...o }, c) => /* @__PURE__ */ f(i, {
 	buttonSize: n,
 	buttonsAs: r,
 	className: e(s["CTABanner-buttonGroup"], t),
 	ref: c,
 	...o,
-	children: i
-})), x = l(({ className: t, src: n, alt: r, ...a }, o) => /* @__PURE__ */ f(i, {
+	children: a
+})), x = l(({ className: t, src: n, alt: r, ...i }, o) => /* @__PURE__ */ f(a, {
 	ref: o,
 	className: e(s["CTABanner-image"], t),
 	src: n,
 	alt: r,
 	borderRadius: "medium",
-	...a
+	...i
 })), S = l(({ className: t, children: n, ...r }, i) => /* @__PURE__ */ f("div", {
 	ref: i,
 	className: e(s["CTABanner-logo"], t),

package/esm/CTABanner/CTABanner.module-CDLOww8c.css

@@ -0,0 +1 @@
+.Primer_Brand__CTABanner-module__CTABanner___osRag{max-width:var(--brand-breakpoint-xlarge);width:100%;margin:0 auto;display:flex;position:relative}.Primer_Brand__CTABanner-module__CTABanner--shadow___bUnyT:before{content:"";inset:var(--base-size-16);filter:blur(var(--base-size-96));background:linear-gradient(to right, var(--brand-CTABanner-shadow-color-start), var(--brand-CTABanner-shadow-color-end));position:absolute;transform:translateZ(0)}.Primer_Brand__CTABanner-module__CTABanner-grid___Hm5rQ{--brand-Grid-spacing-row:0;row-gap:0;padding-inline:0}.Primer_Brand__CTABanner-module__CTABanner-grid-column--primary___m1rvk{align-items:center;display:flex}.Primer_Brand__CTABanner-module__CTABanner-grid-column--secondary___C_Sft{justify-content:center;align-items:center;display:flex}.Primer_Brand__CTABanner-module__CTABanner--variant-minimal___iWgoA .Primer_Brand__CTABanner-module__CTABanner-grid-column--secondary___C_Sft{justify-content:flex-end}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-grid-column--secondary___C_Sft{justify-content:flex-start}@media screen and (width>=63.25rem){.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-grid-column--secondary___C_Sft{justify-content:flex-end}}@media screen and (width<=63.24rem){.Primer_Brand__CTABanner-module__CTABanner--variant-minimal___iWgoA .Primer_Brand__CTABanner-module__CTABanner-grid-column--secondary___C_Sft{justify-content:flex-start}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-grid-column--secondary___C_Sft{order:-1;margin-block-start:0}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-grid-column--primary___m1rvk,.Primer_Brand__CTABanner-module__CTABanner-grid-column--secondary___C_Sft{margin-block-start:var(--base-size-24)}}.Primer_Brand__CTABanner-module__CTABanner-outer-container--border___Rhoq4{border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__CTABanner-module__CTABanner-container___Tb9T1{padding:var(--base-size-64) var(--base-size-20);z-index:1;box-sizing:border-box;width:100%}.Primer_Brand__CTABanner-module__CTABanner-container--rounded___atljT{border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-container___Tb9T1{padding-inline:var(--base-size-20);padding-block:var(--base-size-32)}.Primer_Brand__CTABanner-module__CTABanner--variant-minimal___iWgoA .Primer_Brand__CTABanner-module__CTABanner-container___Tb9T1{padding-inline:var(--base-size-20);padding-block:var(--base-size-40)}.Primer_Brand__CTABanner-module__CTABanner-content___T0gW9{--CTABanner-content-gap:var(--base-size-16);gap:var(--CTABanner-content-gap);flex-direction:column;align-items:flex-start;max-width:800px;margin:0 auto;display:flex}.Primer_Brand__CTABanner-module__CTABanner-content___T0gW9 img,.Primer_Brand__CTABanner-module__CTABanner-content___T0gW9 picture{display:block}.Primer_Brand__CTABanner-module__CTABanner--variant-minimal___iWgoA .Primer_Brand__CTABanner-module__CTABanner-content___T0gW9{--CTABanner-content-gap:0}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-content___T0gW9,.Primer_Brand__CTABanner-module__CTABanner--variant-minimal___iWgoA .Primer_Brand__CTABanner-module__CTABanner-content___T0gW9{max-width:576px;margin:0}.Primer_Brand__CTABanner-module__CTABanner-container--background___p6ig8{background-repeat:no-repeat;background-color:var(--brand-CTABanner-bgColor);background-image:var(--brand-CTABanner-narrow-background-image-src,var(--brand-CTABanner-background-image-src));background-size:var(--brand-CTABanner-narrow-background-image-size,var(--brand-CTABanner-background-image-size));background-position:50%;background-position:var(--brand-CTABanner-narrow-background-image-position,var(--brand-CTABanner-background-image-position,center))}.Primer_Brand__CTABanner-module__CTABanner-container--border___7xUNr{border:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__CTABanner-module__CTABanner-container--border-gridlines___aCdnk{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);max-width:534px;margin-inline:auto}.Primer_Brand__CTABanner-module__CTABanner-content--center___SCpf2{text-align:center;align-items:center}.Primer_Brand__CTABanner-module__CTABanner-description___pA_Hb{margin-bottom:var(--base-size-16)}@media screen and (width>=48rem){.Primer_Brand__CTABanner-module__CTABanner-container___Tb9T1{padding:var(--base-size-80) var(--base-size-36)}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-container___Tb9T1{padding:var(--base-size-36);padding-block-end:var(--base-size-48)}.Primer_Brand__CTABanner-module__CTABanner--variant-minimal___iWgoA .Primer_Brand__CTABanner-module__CTABanner-container___Tb9T1{padding:var(--base-size-36);padding-block:var(--base-size-48)}.Primer_Brand__CTABanner-module__CTABanner-container--background___p6ig8{background-color:var(--brand-CTABanner-regular-background-color,var(--brand-CTABanner-background-color));background-image:var(--brand-CTABanner-regular-background-image-src,var(--brand-CTABanner-background-image-src));background-size:var(--brand-CTABanner-regular-background-image-size,var(--brand-CTABanner-background-image-size));background-position:var(--brand-CTABanner-regular-background-image-position,var(--brand-CTABanner-background-image-position))}}@media screen and (width>=63.25rem){.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-content___T0gW9{--CTABanner-content-gap:var(--base-size-32)}.Primer_Brand__CTABanner-module__CTABanner-container___Tb9T1{padding:var(--base-size-96) var(--base-size-64);max-width:100%}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-container___Tb9T1,.Primer_Brand__CTABanner-module__CTABanner--variant-minimal___iWgoA .Primer_Brand__CTABanner-module__CTABanner-container___Tb9T1{padding:var(--base-size-64)}}@media screen and (width>=80rem){.Primer_Brand__CTABanner-module__CTABanner-container--background___p6ig8{background-color:var(--brand-CTABanner-wide-background-color,var(--brand-CTABanner-background-color));background-image:var(--brand-CTABanner-wide-background-image-src,var(--brand-CTABanner-background-image-src));background-size:var(--brand-CTABanner-wide-background-image-size,var(--brand-CTABanner-background-image-size));background-position:var(--brand-CTABanner-wide-background-image-position,var(--brand-CTABanner-background-image-position))}}.Primer_Brand__CTABanner-module__CTABanner-image___Fsqin{width:100%;height:auto}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-image___Fsqin{width:100%;max-width:476px;height:auto}@media screen and (width>=63.25rem){.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-image___Fsqin{max-width:100%;height:auto}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-grid-column--primary___m1rvk:has(.Primer_Brand__CTABanner-module__CTABanner-logo___uysuX){align-items:stretch}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-grid-column--primary___m1rvk:has(.Primer_Brand__CTABanner-module__CTABanner-logo___uysuX)>.Primer_Brand__CTABanner-module__CTABanner-content___T0gW9{flex:1}.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-content___T0gW9:has(>.Primer_Brand__CTABanner-module__CTABanner-logo___uysuX)>.Primer_Brand__CTABanner-module__CTABanner-logo___uysuX+*{margin-block-start:auto}}.Primer_Brand__CTABanner-module__CTABanner-logo___uysuX{align-items:center;gap:var(--base-size-8);width:100%;border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-block-end:var(--base-size-32);display:flex}.Primer_Brand__CTABanner-module__CTABanner-logo___uysuX>svg,.Primer_Brand__CTABanner-module__CTABanner-logo___uysuX>img{height:var(--base-size-40);width:auto;display:block}.Primer_Brand__CTABanner-module__CTABanner--variant-default___LX6Wi .Primer_Brand__CTABanner-module__CTABanner-logo___uysuX{border-block-end:none;width:auto;padding-block-end:0}.Primer_Brand__CTABanner-module__CTABanner--variant-minimal___iWgoA .Primer_Brand__CTABanner-module__CTABanner-logo___uysuX{margin-block-end:var(--base-size-24)}.Primer_Brand__CTABanner-module__CTABanner-link___iY0Se{align-self:auto}.Primer_Brand__CTABanner-module__CTABanner-heading___tWytE b{color:var(--brand-CTABanner-color-heading-emphasis);font-weight:inherit}.Primer_Brand__CTABanner-module__CTABanner-heading___tWytE code,.Primer_Brand__CTABanner-module__CTABanner-description___pA_Hb code{font-size:inherit;font-family:var(--brand-fontStack-monospace);background-color:var(--brand-color-canvas-default);padding:0 var(--base-size-4) 0;margin-inline:var(--base-size-2);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-small);box-shadow:var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default)}.Primer_Brand__CTABanner-module__CTABanner--bgColor-default___HxU_W .Primer_Brand__CTABanner-module__CTABanner-heading___tWytE code,.Primer_Brand__CTABanner-module__CTABanner--bgColor-default___HxU_W .Primer_Brand__CTABanner-module__CTABanner-description___pA_Hb code{background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__CTABanner-module__CTABanner-description___pA_Hb code{padding:0 var(--base-size-4) 0}.Primer_Brand__CTABanner-module__CTABanner-heading___tWytE.Primer_Brand__CTABanner-module__CTABanner-heading___tWytE:has(code){line-height:2lh}@media screen and (width>=63.25rem){.Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5 .Primer_Brand__CTABanner-module__CTABanner-heading___tWytE.Primer_Brand__CTABanner-module__CTABanner-heading___tWytE:has(code){line-height:2.8lh}}.Primer_Brand__CTABanner-module__CTABanner--variant-minimal___iWgoA .Primer_Brand__CTABanner-module__CTABanner-heading___tWytE.Primer_Brand__CTABanner-module__CTABanner-heading___tWytE:has(code){line-height:1.9lh}.Primer_Brand__CTABanner-module__CTABanner-description___pA_Hb.Primer_Brand__CTABanner-module__CTABanner-description___pA_Hb:has(code){line-height:1.25lh}.Primer_Brand__CTABanner-module__CTABanner-buttonGroup___5SMyK{margin-block-start:0;margin-block-start:calc(-1 * var(--CTABanner-content-gap,0px));padding-block-start:var(--base-size-12)}

package/esm/CTABanner/CTABanner.module.js

@@ -1,4 +1,4 @@
-import './CTABanner.module-DZUT186Y.css';var e = {
+import './CTABanner.module-CDLOww8c.css';var e = {
 	CTABanner: "Primer_Brand__CTABanner-module__CTABanner___osRag",
 	"CTABanner--shadow": "Primer_Brand__CTABanner-module__CTABanner--shadow___bUnyT",
 	"CTABanner-grid": "Primer_Brand__CTABanner-module__CTABanner-grid___Hm5rQ",

package/esm/CTABanner/CTABanner.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"CTABanner.module.js","names":[],"sources":["../../src/CTABanner/CTABanner.module.css"],"sourcesContent":[".CTABanner {\n  position: relative;\n  margin: 0 auto;\n  display: flex;\n  max-width: var(--brand-breakpoint-xlarge);\n  width: 100%;\n}\n\n.CTABanner--shadow::before {\n  content: '';\n  position: absolute;\n  inset: var(--base-size-16);\n  filter: blur(var(--base-size-96));\n  transform: translateZ(0);\n  background: linear-gradient(\n    to right,\n    var(--brand-CTABanner-shadow-color-start),\n    var(--brand-CTABanner-shadow-color-end)\n  );\n}\n\n.CTABanner-grid {\n  row-gap: 0;\n  --brand-Grid-spacing-row: 0;\n  padding-inline: 0;\n}\n\n.CTABanner-grid-column--primary {\n  display: flex;\n  align-items: center;\n}\n\n.CTABanner-grid-column--secondary {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.CTABanner--variant-minimal .CTABanner-grid-column--secondary {\n  justify-content: flex-end;\n}\n\n.CTABanner--variant-balanced .CTABanner-grid-column--secondary {\n  justify-content: flex-start;\n}\n\n@media screen and (min-width: 63.25rem) {\n  .CTABanner--variant-balanced .CTABanner-grid-column--secondary {\n    justify-content: flex-end;\n  }\n}\n\n/* Stack on narrow viewports */\n@media screen and (max-width: 63.24rem) {\n  .CTABanner--variant-minimal .CTABanner-grid-column--secondary {\n    justify-content: flex-start;\n  }\n\n  .CTABanner--variant-balanced .CTABanner-grid-column--secondary {\n    order: -1;\n    margin-block-start: 0;\n  }\n\n  .CTABanner--variant-balanced .CTABanner-grid-column--primary {\n    margin-block-start: var(--base-size-24);\n  }\n\n  .CTABanner-grid-column--secondary {\n    margin-block-start: var(--base-size-24);\n  }\n}\n\n.CTABanner-outer-container--border {\n  border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.CTABanner-container {\n  padding: var(--base-size-64) var(--base-size-20);\n  z-index: 1;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.CTABanner-container--rounded {\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.CTABanner--variant-balanced .CTABanner-container {\n  padding-inline: var(--base-size-20);\n  padding-block: var(--base-size-32);\n}\n\n.CTABanner--variant-minimal .CTABanner-container {\n  padding-inline: var(--base-size-20);\n  padding-block: var(--base-size-40);\n}\n\n.CTABanner-content {\n  --CTABanner-content-gap: var(--base-size-16);\n  display: flex;\n  flex-direction: column;\n  gap: var(--CTABanner-content-gap);\n  align-items: flex-start;\n  max-width: 800px;\n  margin: 0 auto;\n}\n\n.CTABanner--variant-minimal .CTABanner-content {\n  --CTABanner-content-gap: 0;\n}\n\n.CTABanner--variant-balanced .CTABanner-content,\n.CTABanner--variant-minimal .CTABanner-content {\n  max-width: 576px;\n  margin: 0;\n}\n\n.CTABanner-container--background {\n  background-repeat: no-repeat;\n  background-color: var(--brand-CTABanner-bgColor);\n  background-image: var(--brand-CTABanner-narrow-background-image-src, var(--brand-CTABanner-background-image-src));\n  background-size: var(--brand-CTABanner-narrow-background-image-size, var(--brand-CTABanner-background-image-size));\n\n  background-position: var(\n    --brand-CTABanner-narrow-background-image-position,\n    var(--brand-CTABanner-background-image-position, center)\n  );\n}\n\n.CTABanner-container--border {\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.CTABanner-container--border-gridlines {\n  border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  margin-inline: auto;\n  max-width: 534px; /* To match tablet for river */\n}\n\n.CTABanner-content--center {\n  align-items: center;\n  text-align: center;\n}\n\n.CTABanner-description {\n  margin-bottom: var(--base-size-16);\n}\n\n/* Medium breakpoint and up */\n@media screen and (min-width: 48rem) {\n  .CTABanner-container {\n    padding: var(--base-size-80) var(--base-size-36);\n  }\n\n  .CTABanner--variant-balanced .CTABanner-container {\n    padding: var(--base-size-36);\n    padding-block-end: var(--base-size-48);\n  }\n\n  .CTABanner--variant-minimal .CTABanner-container {\n    padding: var(--base-size-36);\n    padding-block: var(--base-size-48);\n  }\n\n  .CTABanner-container--background {\n    background-color: var(--brand-CTABanner-regular-background-color, var(--brand-CTABanner-background-color));\n    background-image: var(--brand-CTABanner-regular-background-image-src, var(--brand-CTABanner-background-image-src));\n    background-size: var(--brand-CTABanner-regular-background-image-size, var(--brand-CTABanner-background-image-size));\n    background-position: var(\n      --brand-CTABanner-regular-background-image-position,\n      var(--brand-CTABanner-background-image-position)\n    );\n  }\n}\n\n/* Large breakpoint and up */\n@media screen and (min-width: 63.25rem) {\n  .CTABanner--variant-balanced .CTABanner-content {\n    --CTABanner-content-gap: var(--base-size-32);\n  }\n  .CTABanner-container {\n    padding: var(--base-size-96) var(--base-size-64);\n    max-width: 100%;\n  }\n\n  .CTABanner--variant-balanced .CTABanner-container {\n    padding: var(--base-size-64);\n  }\n\n  .CTABanner--variant-minimal .CTABanner-container {\n    padding: var(--base-size-64);\n  }\n}\n\n/* Wide */\n@media screen and (min-width: 80rem) {\n  .CTABanner-container--background {\n    background-color: var(--brand-CTABanner-wide-background-color, var(--brand-CTABanner-background-color));\n    background-image: var(--brand-CTABanner-wide-background-image-src, var(--brand-CTABanner-background-image-src));\n    background-size: var(--brand-CTABanner-wide-background-image-size, var(--brand-CTABanner-background-image-size));\n\n    background-position: var(\n      --brand-CTABanner-wide-background-image-position,\n      var(--brand-CTABanner-background-image-position)\n    );\n  }\n}\n\n.CTABanner-image {\n  width: 100%;\n  height: auto;\n}\n\n.CTABanner--variant-balanced .CTABanner-image {\n  max-width: 476px;\n  width: 100%;\n  height: auto;\n}\n\n@media screen and (min-width: 63.25rem) {\n  .CTABanner--variant-balanced .CTABanner-image {\n    max-width: 100%;\n    height: auto;\n  }\n\n  .CTABanner--variant-balanced .CTABanner-grid-column--primary:has(.CTABanner-logo) {\n    align-items: stretch;\n  }\n\n  .CTABanner--variant-balanced .CTABanner-grid-column--primary:has(.CTABanner-logo) > .CTABanner-content {\n    flex: 1;\n  }\n\n  .CTABanner--variant-balanced .CTABanner-content:has(> .CTABanner-logo) > .CTABanner-logo + * {\n    margin-block-start: auto;\n  }\n}\n\n.CTABanner-logo {\n  display: flex;\n  align-items: center;\n  gap: var(--base-size-8);\n  width: 100%;\n  padding-block-end: var(--base-size-32);\n  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.CTABanner-logo > svg,\n.CTABanner-logo > img {\n  height: var(--base-size-40);\n  width: auto;\n  display: block;\n}\n\n.CTABanner--variant-default .CTABanner-logo {\n  width: auto;\n  padding-block-end: 0;\n  border-block-end: none;\n}\n\n.CTABanner--variant-minimal .CTABanner-logo {\n  margin-block-end: var(--base-size-24);\n}\n\n.CTABanner-link {\n  align-self: auto;\n}\n\n/*\n * We use a custom token here because text-emphasized doesn't reach 4.5 contrast\n * against the default banner bgColor in light mode.\n */\n.CTABanner-heading b {\n  color: var(--brand-CTABanner-color-heading-emphasis);\n  font-weight: inherit;\n}\n\n.CTABanner-heading code,\n.CTABanner-description code {\n  font-size: inherit;\n  font-family: var(--brand-fontStack-monospace);\n  background-color: var(--brand-color-canvas-default);\n  padding: 0 var(--base-size-4) 0;\n  margin-inline: var(--base-size-2);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-small);\n  box-shadow: var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default);\n}\n\n.CTABanner--bgColor-default .CTABanner-heading code,\n.CTABanner--bgColor-default .CTABanner-description code {\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n.CTABanner-description code {\n  padding: 0 var(--base-size-4) 0;\n}\n\n.CTABanner-heading.CTABanner-heading:has(code) {\n  line-height: calc(1lh * 2);\n}\n\n@media screen and (min-width: 63.25rem) {\n  .CTABanner--variant-balanced .CTABanner-heading.CTABanner-heading:has(code) {\n    line-height: calc(1lh * 2.8);\n  }\n}\n\n.CTABanner--variant-minimal .CTABanner-heading.CTABanner-heading:has(code) {\n  line-height: calc(1lh * 1.9);\n}\n\n.CTABanner-description.CTABanner-description:has(code) {\n  line-height: calc(1lh * 1.25);\n}\n\n.CTABanner-buttonGroup {\n  margin-block-start: calc(-1 * var(--CTABanner-content-gap, 0px));\n  padding-block-start: var(--base-size-12);\n}\n"],"mappings":""}
+{"version":3,"file":"CTABanner.module.js","names":[],"sources":["../../src/CTABanner/CTABanner.module.css"],"sourcesContent":[".CTABanner {\n  position: relative;\n  margin: 0 auto;\n  display: flex;\n  max-width: var(--brand-breakpoint-xlarge);\n  width: 100%;\n}\n\n.CTABanner--shadow::before {\n  content: '';\n  position: absolute;\n  inset: var(--base-size-16);\n  filter: blur(var(--base-size-96));\n  transform: translateZ(0);\n  background: linear-gradient(\n    to right,\n    var(--brand-CTABanner-shadow-color-start),\n    var(--brand-CTABanner-shadow-color-end)\n  );\n}\n\n.CTABanner-grid {\n  row-gap: 0;\n  --brand-Grid-spacing-row: 0;\n  padding-inline: 0;\n}\n\n.CTABanner-grid-column--primary {\n  display: flex;\n  align-items: center;\n}\n\n.CTABanner-grid-column--secondary {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.CTABanner--variant-minimal .CTABanner-grid-column--secondary {\n  justify-content: flex-end;\n}\n\n.CTABanner--variant-balanced .CTABanner-grid-column--secondary {\n  justify-content: flex-start;\n}\n\n@media screen and (min-width: 63.25rem) {\n  .CTABanner--variant-balanced .CTABanner-grid-column--secondary {\n    justify-content: flex-end;\n  }\n}\n\n/* Stack on narrow viewports */\n@media screen and (max-width: 63.24rem) {\n  .CTABanner--variant-minimal .CTABanner-grid-column--secondary {\n    justify-content: flex-start;\n  }\n\n  .CTABanner--variant-balanced .CTABanner-grid-column--secondary {\n    order: -1;\n    margin-block-start: 0;\n  }\n\n  .CTABanner--variant-balanced .CTABanner-grid-column--primary {\n    margin-block-start: var(--base-size-24);\n  }\n\n  .CTABanner-grid-column--secondary {\n    margin-block-start: var(--base-size-24);\n  }\n}\n\n.CTABanner-outer-container--border {\n  border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.CTABanner-container {\n  padding: var(--base-size-64) var(--base-size-20);\n  z-index: 1;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.CTABanner-container--rounded {\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.CTABanner--variant-balanced .CTABanner-container {\n  padding-inline: var(--base-size-20);\n  padding-block: var(--base-size-32);\n}\n\n.CTABanner--variant-minimal .CTABanner-container {\n  padding-inline: var(--base-size-20);\n  padding-block: var(--base-size-40);\n}\n\n.CTABanner-content {\n  --CTABanner-content-gap: var(--base-size-16);\n  display: flex;\n  flex-direction: column;\n  gap: var(--CTABanner-content-gap);\n  align-items: flex-start;\n  max-width: 800px;\n  margin: 0 auto;\n}\n\n.CTABanner-content :is(img, picture) {\n  display: block;\n}\n\n.CTABanner--variant-minimal .CTABanner-content {\n  --CTABanner-content-gap: 0;\n}\n\n.CTABanner--variant-balanced .CTABanner-content,\n.CTABanner--variant-minimal .CTABanner-content {\n  max-width: 576px;\n  margin: 0;\n}\n\n.CTABanner-container--background {\n  background-repeat: no-repeat;\n  background-color: var(--brand-CTABanner-bgColor);\n  background-image: var(--brand-CTABanner-narrow-background-image-src, var(--brand-CTABanner-background-image-src));\n  background-size: var(--brand-CTABanner-narrow-background-image-size, var(--brand-CTABanner-background-image-size));\n\n  background-position: var(\n    --brand-CTABanner-narrow-background-image-position,\n    var(--brand-CTABanner-background-image-position, center)\n  );\n}\n\n.CTABanner-container--border {\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.CTABanner-container--border-gridlines {\n  border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  margin-inline: auto;\n  max-width: 534px; /* To match tablet for river */\n}\n\n.CTABanner-content--center {\n  align-items: center;\n  text-align: center;\n}\n\n.CTABanner-description {\n  margin-bottom: var(--base-size-16);\n}\n\n/* Medium breakpoint and up */\n@media screen and (min-width: 48rem) {\n  .CTABanner-container {\n    padding: var(--base-size-80) var(--base-size-36);\n  }\n\n  .CTABanner--variant-balanced .CTABanner-container {\n    padding: var(--base-size-36);\n    padding-block-end: var(--base-size-48);\n  }\n\n  .CTABanner--variant-minimal .CTABanner-container {\n    padding: var(--base-size-36);\n    padding-block: var(--base-size-48);\n  }\n\n  .CTABanner-container--background {\n    background-color: var(--brand-CTABanner-regular-background-color, var(--brand-CTABanner-background-color));\n    background-image: var(--brand-CTABanner-regular-background-image-src, var(--brand-CTABanner-background-image-src));\n    background-size: var(--brand-CTABanner-regular-background-image-size, var(--brand-CTABanner-background-image-size));\n    background-position: var(\n      --brand-CTABanner-regular-background-image-position,\n      var(--brand-CTABanner-background-image-position)\n    );\n  }\n}\n\n/* Large breakpoint and up */\n@media screen and (min-width: 63.25rem) {\n  .CTABanner--variant-balanced .CTABanner-content {\n    --CTABanner-content-gap: var(--base-size-32);\n  }\n  .CTABanner-container {\n    padding: var(--base-size-96) var(--base-size-64);\n    max-width: 100%;\n  }\n\n  .CTABanner--variant-balanced .CTABanner-container {\n    padding: var(--base-size-64);\n  }\n\n  .CTABanner--variant-minimal .CTABanner-container {\n    padding: var(--base-size-64);\n  }\n}\n\n/* Wide */\n@media screen and (min-width: 80rem) {\n  .CTABanner-container--background {\n    background-color: var(--brand-CTABanner-wide-background-color, var(--brand-CTABanner-background-color));\n    background-image: var(--brand-CTABanner-wide-background-image-src, var(--brand-CTABanner-background-image-src));\n    background-size: var(--brand-CTABanner-wide-background-image-size, var(--brand-CTABanner-background-image-size));\n\n    background-position: var(\n      --brand-CTABanner-wide-background-image-position,\n      var(--brand-CTABanner-background-image-position)\n    );\n  }\n}\n\n.CTABanner-image {\n  width: 100%;\n  height: auto;\n}\n\n.CTABanner--variant-balanced .CTABanner-image {\n  max-width: 476px;\n  width: 100%;\n  height: auto;\n}\n\n@media screen and (min-width: 63.25rem) {\n  .CTABanner--variant-balanced .CTABanner-image {\n    max-width: 100%;\n    height: auto;\n  }\n\n  .CTABanner--variant-balanced .CTABanner-grid-column--primary:has(.CTABanner-logo) {\n    align-items: stretch;\n  }\n\n  .CTABanner--variant-balanced .CTABanner-grid-column--primary:has(.CTABanner-logo) > .CTABanner-content {\n    flex: 1;\n  }\n\n  .CTABanner--variant-balanced .CTABanner-content:has(> .CTABanner-logo) > .CTABanner-logo + * {\n    margin-block-start: auto;\n  }\n}\n\n.CTABanner-logo {\n  display: flex;\n  align-items: center;\n  gap: var(--base-size-8);\n  width: 100%;\n  padding-block-end: var(--base-size-32);\n  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.CTABanner-logo > svg,\n.CTABanner-logo > img {\n  height: var(--base-size-40);\n  width: auto;\n  display: block;\n}\n\n.CTABanner--variant-default .CTABanner-logo {\n  width: auto;\n  padding-block-end: 0;\n  border-block-end: none;\n}\n\n.CTABanner--variant-minimal .CTABanner-logo {\n  margin-block-end: var(--base-size-24);\n}\n\n.CTABanner-link {\n  align-self: auto;\n}\n\n/*\n * We use a custom token here because text-emphasized doesn't reach 4.5 contrast\n * against the default banner bgColor in light mode.\n */\n.CTABanner-heading b {\n  color: var(--brand-CTABanner-color-heading-emphasis);\n  font-weight: inherit;\n}\n\n.CTABanner-heading code,\n.CTABanner-description code {\n  font-size: inherit;\n  font-family: var(--brand-fontStack-monospace);\n  background-color: var(--brand-color-canvas-default);\n  padding: 0 var(--base-size-4) 0;\n  margin-inline: var(--base-size-2);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-small);\n  box-shadow: var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default);\n}\n\n.CTABanner--bgColor-default .CTABanner-heading code,\n.CTABanner--bgColor-default .CTABanner-description code {\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n.CTABanner-description code {\n  padding: 0 var(--base-size-4) 0;\n}\n\n.CTABanner-heading.CTABanner-heading:has(code) {\n  line-height: calc(1lh * 2);\n}\n\n@media screen and (min-width: 63.25rem) {\n  .CTABanner--variant-balanced .CTABanner-heading.CTABanner-heading:has(code) {\n    line-height: calc(1lh * 2.8);\n  }\n}\n\n.CTABanner--variant-minimal .CTABanner-heading.CTABanner-heading:has(code) {\n  line-height: calc(1lh * 1.9);\n}\n\n.CTABanner-description.CTABanner-description:has(code) {\n  line-height: calc(1lh * 1.25);\n}\n\n.CTABanner-buttonGroup {\n  margin-block-start: calc(-1 * var(--CTABanner-content-gap, 0px));\n  padding-block-start: var(--base-size-12);\n}\n"],"mappings":""}

package/esm/Card/Card.d.ts

@@ -12,6 +12,7 @@ export declare const CardCTAVariants: readonly ["text", "arrow", "none"];
 export declare const CardBackgroundColors: readonly ["default", "subtle", "none"];
 export declare const CardTokenPositions: readonly ["block-start", "block-end"];
 export declare const CardLabelVariants: readonly ["token", "accent-text"];
+export declare const CardImagePaddingOptions: readonly ["default", "none"];
 export declare const CardIconColors: readonly ["default", "blue", "coral", "green", "gray", "indigo", "lemon", "lime", "orange", "pink", "purple", "red", "teal", "yellow"];
 export declare const defaultCardIconColor: "default";
 export declare const defaultCardCTAVariant: "text";
@@ -21,6 +22,7 @@ export type CardCTAVariant = (typeof CardCTAVariants)[number];
 export type CardTokenPosition = (typeof CardTokenPositions)[number];
 export type CardLabelVariant = (typeof CardLabelVariants)[number];
 export type CardBackgroundColor = (typeof CardBackgroundColors)[number];
+export type CardImagePadding = (typeof CardImagePaddingOptions)[number];
 type CardLeadingVisual = React.ReactElement | React.ComponentType<{
     className?: string;
 }>;
@@ -34,7 +36,7 @@ export type CardProps = {
      */
     children: React.ReactNode | React.ReactElement<CardImageProps> | React.ReactElement<CardIconProps> | React.ReactElement<CardLabelProps> | React.ReactElement<CardTokensProps> | React.ReactElement<CardHeadingProps> | React.ReactElement<CardDescriptionProps>;
     /**
-     * Disable the default hover animation
+     * Disable transitions and animations within the Card
      */
     disableAnimation?: boolean;
     /**
@@ -70,10 +72,11 @@ export type CardProps = {
      */
     align?: 'start' | 'center';
 } & Omit<BaseProps<HTMLDivElement>, 'animate'> & Omit<React.ComponentPropsWithoutRef<'div'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'> & Pick<React.ComponentPropsWithoutRef<'a'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'>;
-type CardImageProps = {
+export type CardImageProps = {
     position?: 'block-start' | 'block-end';
+    padding?: CardImagePadding;
 } & ImageProps;
-declare function CardImage({ className, ...rest }: CardImageProps): import("react/jsx-runtime").JSX.Element;
+declare function CardImage({ className, position, padding, ...rest }: CardImageProps): import("react/jsx-runtime").JSX.Element;
 type CardIconProps = IconProps;
 type CardTokensProps = BaseProps<HTMLDivElement> & {
     children: React.ReactNode | React.ReactNode[];

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

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAGlD,OAAO,EAAU,YAAY,EAAe,KAAK,UAAU,EAAC,MAAM,IAAI,CAAA;AAEtE,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,SAAS,CAAA;AAG5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAKnD;;GAEG;AACH,OAAO,2FAA2F,CAAA;AAClG,OAAO,wGAAwG,CAAA;AAQ/G,eAAO,MAAM,YAAY,iCAAkC,CAAA;AAC3D,eAAO,MAAM,eAAe,oCAAqC,CAAA;AACjE,eAAO,MAAM,oBAAoB,wCAAyC,CAAA;AAC1E,eAAO,MAAM,kBAAkB,uCAAwC,CAAA;AACvE,eAAO,MAAM,iBAAiB,mCAAoC,CAAA;AAElE,eAAO,MAAM,cAAc,wIAAS,CAAA;AAEpC,eAAO,MAAM,oBAAoB,WAAoB,CAAA;AACrD,eAAO,MAAM,qBAAqB,QAAqB,CAAA;AACvD,eAAO,MAAM,uBAAuB,SAAuB,CAAA;AAE3D,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AACxD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AACnE,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAA;AACjE,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEvE,KAAK,iBAAiB,GAAG,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,aAAa,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAC,CAAC,CAAA;AAEvF,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB;;OAEG;IACH,QAAQ,EACJ,KAAK,CAAC,SAAS,GACf,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,GAClC,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,GACjC,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,GAClC,KAAK,CAAC,YAAY,CAAC,eAAe,CAAC,GACnC,KAAK,CAAC,YAAY,CAAC,gBAAgB,CAAC,GACpC,KAAK,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAA;IAC5C;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;SAEK;IACL,IAAI,EAAE,MAAM,CAAA;IACZ;;SAEK;IACL,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,UAAU,CAAC,EAAE,cAAc,CAAA;IAC3B;;OAEG;IACH,eAAe,CAAC,EAAE,mBAAmB,CAAA;IACrC;;OAEG;IACH,aAAa,CAAC,EAAE,iBAAiB,CAAA;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC3B,GAAG,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC,GAC5C,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAC,GACnG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,EAAE,cAAc,GAAG,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAC,CAAA;AAoLnG,KAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,EAAE,aAAa,GAAG,WAAW,CAAA;CACvC,GAAG,UAAU,CAAA;AAEd,iBAAS,SAAS,CAAC,EAAC,SAAS,EAAE,GAAG,IAAI,EAAC,EAAE,cAAc,2CAMtD;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"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"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"}

package/esm/Card/Card.js

@@ -4,13 +4,13 @@ import { useProvidedRefOrCreate as n } from "../hooks/useRef.js";
 import { Text as r } from "../Text/Text.js";
 import { EyebrowText as i } from "../EyebrowText/EyebrowText.js";
 import { Heading as a } from "../Heading/Heading.js";
-import { Image as o } from "../Image/Image.js";
-import { ExpandableArrow as s } from "../ExpandableArrow/ExpandableArrow.js";
+import { ExpandableArrow as o } from "../ExpandableArrow/ExpandableArrow.js";
+import { Image as s } from "../Image/Image.js";
 import c from "../Link/Link.module.js";
 import { Icon as l } from "../Icon/Icon.js";
 import { Token as u } from "../Token/Token.js";
 import { isFragmentElement as d } from "../utils/isFragmentElement.js";
-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-BRKNIzyd.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';/* empty css                                                                                     */
 /* empty css                                                                                                  */
 import f from "./Card.module.js";
 import p, { forwardRef as m } from "react";
@@ -24,18 +24,18 @@ var _ = ["default", "minimal"], v = [
 	"default",
 	"subtle",
 	"none"
-], b = ["block-start", "block-end"], x = ["token", "accent-text"], S = t, C = S[0], w = v[0], T = x[0], E = m(({ align: t = "start", onMouseEnter: i, onMouseLeave: a, onFocus: o, onBlur: l, children: u, className: m, ctaText: _ = "Learn more", ctaVariant: v = w, disableAnimation: y = !1, fullWidth: b = !1, href: x, hasBorder: S = !1, leadingVisual: C, style: T, variant: E = "default", backgroundColor: k, ...A }, j) => {
-	let M = n(j), N = k ?? (E === "minimal" || v === "arrow" ? "none" : "default"), P;
+], b = ["block-start", "block-end"], x = ["token", "accent-text"], S = ["default", "none"], C = t, w = C[0], T = v[0], E = x[0], D = m(({ align: t = "start", onMouseEnter: i, onMouseLeave: a, onFocus: s, onBlur: l, children: u, className: m, ctaText: _ = "Learn more", ctaVariant: v = T, disableAnimation: y = !1, fullWidth: b = !1, href: x, hasBorder: S = !1, leadingVisual: C, style: w, variant: E = "default", backgroundColor: D, ...A }, j) => {
+	let M = n(j), N = D ?? (E === "minimal" || v === "arrow" ? "none" : "default"), P;
 	P = u == null ? null : d(u) ? u.props.children ?? null : u;
-	let { cardImage: F, cardIcon: H, cardLabel: U, cardTokensBlockStart: W, cardTokensBlockEnd: G, cardHeading: K, cardDescription: q } = p.Children.toArray(P).reduce((e, t) => (B(t) ? e.cardHeading = p.cloneElement(t, { href: x }) : I(t) ? e.cardImage = t : L(t) ? e.cardIcon = t : R(t) ? e.cardLabel = t : z(t) ? t.props.position === "block-end" ? e.cardTokensBlockEnd = t : e.cardTokensBlockStart = t : V(t) && (e.cardDescription = t), e), {});
-	(process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && C && H && console.warn("Card: `leadingVisual` and `Card.Icon` cannot be used together. `Card.Icon` will not be rendered.");
-	let J = O(C), Y = J ? void 0 : H, X = F ? F.props.position || "block-start" : null, Z = !(t === "center" && v === "text");
-	return /* @__PURE__ */ h(D, {
-		style: T,
+	let { cardImage: F, cardIcon: I, cardLabel: U, cardTokensBlockStart: W, cardTokensBlockEnd: G, cardHeading: K, cardDescription: q } = p.Children.toArray(P).reduce((e, t) => (V(t) ? e.cardHeading = p.cloneElement(t, { href: x }) : L(t) ? e.cardImage = t : R(t) ? e.cardIcon = t : z(t) ? e.cardLabel = t : B(t) ? t.props.position === "block-end" ? e.cardTokensBlockEnd = t : e.cardTokensBlockStart = t : H(t) && (e.cardDescription = t), e), {});
+	(process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && C && I && console.warn("Card: `leadingVisual` and `Card.Icon` cannot be used together. `Card.Icon` will not be rendered.");
+	let J = k(C), Y = J ? void 0 : I, X = F ? F.props.position || "block-start" : null, Z = !(t === "center" && v === "text");
+	return /* @__PURE__ */ h(O, {
+		style: w,
 		className: e(b ? f["Card--fullWidth"] : f["Card--maxWidth"], f[`Card--align-${t}`]),
 		children: /* @__PURE__ */ g("div", {
 			className: e(f.Card, y && f["Card--disableAnimation"], J && f["Card--hasLeadingVisual"], v === "arrow" && f["Card--ctaVariant-arrow"], G && f["Card--tokensPosition-block-end"], E === "minimal" && f["Card--variant-minimal"], S && f["Card--border"], f[`Card--backgroundColor-${N}`], X && f[`Card--imagePos-${X}`], m),
-			style: T,
+			style: w,
 			ref: M,
 			...A,
 			children: [
@@ -64,7 +64,7 @@ var _ = ["default", "minimal"], v = [
 						})
 					}), Z ? /* @__PURE__ */ h("span", {
 						className: e(f.Card__actionIcon, v === "arrow" && f["Card__actionIcon--arrowOnly"]),
-						children: /* @__PURE__ */ h(s, {
+						children: /* @__PURE__ */ h(o, {
 							className: e(c["Link-arrow"], f["Card--expandableArrow"]),
 							"aria-hidden": "true"
 						})
@@ -74,35 +74,35 @@ var _ = ["default", "minimal"], v = [
 		})
 	});
 });
-function D({ className: t, children: n, style: r }) {
+function O({ className: t, children: n, style: r }) {
 	return /* @__PURE__ */ h("div", {
 		className: e(f.Card__outer, t),
 		style: r,
 		children: n
 	});
 }
-function O(t) {
+function k(t) {
 	return t ? typeof t == "function" ? p.createElement(t, { className: f.Card__leadingVisualItem }) : p.isValidElement(t) ? p.cloneElement(t, { className: e(f.Card__leadingVisualItem, t.props.className) }) : null : null;
 }
-function k({ className: e, ...t }) {
+function A({ className: t, position: n = "block-start", padding: r = "default", ...i }) {
 	return /* @__PURE__ */ h("div", {
-		className: f.Card__image,
-		children: /* @__PURE__ */ h(o, {
-			className: e,
-			...t
+		className: e(f.Card__image, f[`Card__image--position-${n}`], r === "none" && f["Card__image--padding-none"]),
+		children: /* @__PURE__ */ h(s, {
+			className: t,
+			...i
 		})
 	});
 }
-var A = ({ className: t, hasBackground: n = !0, ...r }) => /* @__PURE__ */ h(l, {
+var j = ({ className: t, hasBackground: n = !0, ...r }) => /* @__PURE__ */ h(l, {
 	className: e(f.Card__icon, t),
 	hasBackground: n,
 	...r
-}), j = m(({ children: t, className: n, position: r = "block-start", ...i }, a) => /* @__PURE__ */ h("div", {
+}), M = m(({ children: t, className: n, position: r = "block-start", ...i }, a) => /* @__PURE__ */ h("div", {
 	className: e(f.Card__tokens, r === "block-end" && f["Card__tokens--position-block-end"], n),
 	ref: a,
 	...i,
 	children: t
-})), M = m(({ children: t, variant: n = T, className: r, ...a }, o) => n === "accent-text" ? /* @__PURE__ */ h(i, {
+})), N = m(({ children: t, variant: n = E, className: r, ...a }, o) => n === "accent-text" ? /* @__PURE__ */ h(i, {
 	ref: o,
 	className: e(f.Card__label, r),
 	variant: "accent",
@@ -113,7 +113,7 @@ var A = ({ className: t, hasBackground: n = !0, ...r }) => /* @__PURE__ */ h(l,
 	className: e(f.Card__label, r),
 	...a,
 	children: t
-})), N = m(({ children: t, as: n = "h3", className: r, href: i, onMouseEnter: o, onMouseLeave: s, onBlur: c, onFocus: l, ...u }, d) => /* @__PURE__ */ h(a, {
+})), P = m(({ children: t, as: n = "h3", className: r, href: i, onMouseEnter: o, onMouseLeave: s, onBlur: c, onFocus: l, ...u }, d) => /* @__PURE__ */ h(a, {
 	size: "6",
 	className: e(f.Card__heading, r),
 	ref: d,
@@ -128,7 +128,7 @@ var A = ({ className: t, hasBackground: n = !0, ...r }) => /* @__PURE__ */ h(l,
 		onFocus: l,
 		children: t
 	})
-})), P = m(({ children: t, className: n, ...i }, a) => /* @__PURE__ */ h(r, {
+})), F = m(({ children: t, className: n, ...i }, a) => /* @__PURE__ */ h(r, {
 	variant: "muted",
 	ref: a,
 	size: "200",
@@ -136,15 +136,15 @@ var A = ({ className: t, hasBackground: n = !0, ...r }) => /* @__PURE__ */ h(l,
 	className: e(f.Card__description, n),
 	...i,
 	children: t
-})), F = (e) => (t) => p.isValidElement(t) && t.type === e, I = F(k), L = F(A), R = F(M), z = F(j), B = F(N), V = F(P), H = Object.assign(E, {
-	Image: k,
-	Icon: A,
-	Label: M,
-	Tokens: j,
-	Heading: N,
-	Description: P
+})), I = (e) => (t) => p.isValidElement(t) && t.type === e, L = I(A), R = I(j), z = I(N), B = I(M), V = I(P), H = I(F), U = Object.assign(D, {
+	Image: A,
+	Icon: j,
+	Label: N,
+	Tokens: M,
+	Heading: P,
+	Description: F
 });
 //#endregion
-export { H as Card, y as CardBackgroundColors, v as CardCTAVariants, S as CardIconColors, x as CardLabelVariants, b as CardTokenPositions, _ as CardVariants, w as defaultCardCTAVariant, C as defaultCardIconColor, T as defaultCardLabelVariant };
+export { U as Card, y as CardBackgroundColors, v as CardCTAVariants, C as CardIconColors, S as CardImagePaddingOptions, x as CardLabelVariants, b as CardTokenPositions, _ as CardVariants, T as defaultCardCTAVariant, w as defaultCardIconColor, E as defaultCardLabelVariant };
 
 //# sourceMappingURL=Card.js.map

package/esm/Card/Card.js.map

@@ -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/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\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]\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 the default hover animation\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\ntype CardImageProps = {\n  position?: 'block-start' | 'block-end'\n} & ImageProps\n\nfunction CardImage({className, ...rest}: CardImageProps) {\n  return (\n    <div className={styles.Card__image}>\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 * {@link https://primer.style/brand/components/Card/ See usage examples}.\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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"}
+{"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/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 * {@link https://primer.style/brand/components/Card/ See usage examples}.\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-4GGxtM9r.css

@@ -0,0 +1 @@
+.Primer_Brand__Card-module__Card___txAQX{--Card-grid-template-rows:auto auto auto auto auto auto 1fr auto;color:var(--brand-color-text-default);padding:var(--brand-Card-padding-block) var(--brand-Card-padding-inline);grid-template:"image image""leadingVisual leadingVisual""icon icon""tokens tokens""label label""heading heading""description description"1fr"action action"/1fr 1fr;grid-template-rows:var(--Card-grid-template-rows);border-radius:var(--brand-borderRadius-medium);flex:auto;height:100%;-webkit-text-decoration:none;text-decoration:none;display:grid;position:relative}@media screen and (width>=64rem){.Primer_Brand__Card-module__Card___txAQX{--brand-Card-padding-inline:var(--base-size-32)}}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card___txAQX{--brand-Card-padding-block:var(--base-size-64);--brand-Card-padding-inline:var(--base-size-40);text-align:center}@media screen and (width>=64rem){.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card___txAQX{--brand-Card-padding-inline:var(--base-size-80)}}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card___txAQX{grid-template-columns:1fr;grid-template-areas:"image""leadingVisual""icon""tokens""label""heading""description""action";justify-items:center}.Primer_Brand__Card-module__Card--backgroundColor-default___1JGan{background-color:var(--brand-Card-background-default)}.Primer_Brand__Card-module__Card--backgroundColor-subtle___0bVGO{background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__Card-module__Card--backgroundColor-none___GVX0n{background-color:#0000}.Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy{--Card-grid-template-rows:auto auto auto auto auto 1fr auto auto;grid-template-areas:"image image""leadingVisual leadingVisual""icon icon""label label""heading heading""description description""tokens tokens""action action"}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy{grid-template-areas:"image""leadingVisual""icon""label""heading""description""tokens""action"}.Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_{--Card-grid-template-rows:auto auto auto auto auto 1fr auto auto;grid-template-areas:"leadingVisual leadingVisual""icon icon""tokens tokens""label label""heading heading""description description""action action""image image"}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_{grid-template-areas:"leadingVisual""icon""tokens""label""heading""description""action""image"}.Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_.Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy{--Card-grid-template-rows:auto auto auto auto 1fr auto auto auto;grid-template-areas:"leadingVisual leadingVisual""icon icon""label label""heading heading""description description""tokens tokens""action action""image image"}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_.Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy{grid-template-areas:"leadingVisual""icon""label""heading""description""tokens""action""image"}.Primer_Brand__Card-module__Card--hasLeadingVisual___M8XW4{--brand-Card-padding-block:var(--base-size-64);--brand-Card-padding-inline:var(--base-size-40)}.Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_ .Primer_Brand__Card-module__Card__image___3J5wL{margin-bottom:0;margin-top:var(--base-size-28)}.Primer_Brand__Card-module__Card--maxWidth___vGoIk{max-width:var(--brand-Card-maxWidth)}.Primer_Brand__Card-module__Card--fullWidth___nh9Zq{max-width:none;max-width:initial}.Primer_Brand__Card-module__Card--variant-minimal___V3m21,.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--variant-minimal___V3m21{padding:0}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH{--Card-arrowAction-endInset:var(--base-size-40)}.Primer_Brand__Card-module__Card___txAQX:hover{-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__Card-module__Card__link___LyRm6{color:currentColor;-webkit-text-decoration:none!important;text-decoration:none!important}.Primer_Brand__Card-module__Card__link___LyRm6 code,.Primer_Brand__Card-module__Card__description___6RhVF code{font-size:inherit;font-family:var(--brand-fontStack-monospace);background-color:var(--brand-color-canvas-subtle);padding:0 var(--base-size-4) var(--base-size-2);margin-inline:var(--base-size-2);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-small);box-shadow:var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default)}.Primer_Brand__Card-module__Card__description___6RhVF code{padding:var(--base-size-2) var(--base-size-4) 0}.Primer_Brand__Card-module__Card__link___LyRm6:has(code){line-height:1.4lh}.Primer_Brand__Card-module__Card__description___6RhVF.Primer_Brand__Card-module__Card__description___6RhVF:has(code){line-height:1.25lh}.Primer_Brand__Card-module__Card--disableAnimation___wZ9Jc:hover .Primer_Brand__Card-module__Card__link___LyRm6{-webkit-text-decoration:underline!important;text-decoration:underline!important}.Primer_Brand__Card-module__Card__link___LyRm6:focus{outline:none}.Primer_Brand__Card-module__Card__link___LyRm6:before{content:"";position:absolute;inset:0}.Primer_Brand__Card-module__Card--border___7rvcG{border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__Card-module__Card__outer___FFzJY{height:100%}.Primer_Brand__Card-module__Card__outer___FFzJY:has(.Primer_Brand__Card-module__Card--variant-minimal___V3m21){border-radius:var(--brand-borderRadius-small)}.Primer_Brand__Card-module__Card__outer___FFzJY:focus-within{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__Card-module__Card__outer___FFzJY:has(.Primer_Brand__Card-module__Card--variant-minimal___V3m21):focus-within{outline-offset:var(--base-size-12)}.Primer_Brand__Card-module__Card__image___3J5wL{border-radius:var(--brand-borderRadius-medium);grid-area:image;margin-block-end:var(--base-size-28);overflow:hidden}.Primer_Brand__Card-module__Card__image--padding-none___Bh_kj{margin-inline:calc(var(--brand-Card-padding-inline) * -1)}.Primer_Brand__Card-module__Card__image--position-block-start___Tdkgr.Primer_Brand__Card-module__Card__image--padding-none___Bh_kj{margin-block-start:calc(var(--brand-Card-padding-block) * -1)}.Primer_Brand__Card-module__Card__image--position-block-end___E_0LZ.Primer_Brand__Card-module__Card__image--padding-none___Bh_kj{margin-block-end:calc(var(--brand-Card-padding-block) * -1)}.Primer_Brand__Card-module__Card--border___7rvcG .Primer_Brand__Card-module__Card__image--position-block-start___Tdkgr.Primer_Brand__Card-module__Card__image--padding-none___Bh_kj{border-end-end-radius:0;border-end-start-radius:0}.Primer_Brand__Card-module__Card--border___7rvcG .Primer_Brand__Card-module__Card__image--position-block-end___E_0LZ.Primer_Brand__Card-module__Card__image--padding-none___Bh_kj{border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);border-start-start-radius:0;border-start-end-radius:0}.Primer_Brand__Card-module__Card--variant-minimal___V3m21 .Primer_Brand__Card-module__Card__image--padding-none___Bh_kj{margin-inline:0}.Primer_Brand__Card-module__Card--variant-minimal___V3m21 .Primer_Brand__Card-module__Card__image--position-block-start___Tdkgr.Primer_Brand__Card-module__Card__image--padding-none___Bh_kj{margin-block-start:0}.Primer_Brand__Card-module__Card--variant-minimal___V3m21 .Primer_Brand__Card-module__Card__image--position-block-end___E_0LZ.Primer_Brand__Card-module__Card__image--padding-none___Bh_kj{margin-block-end:0}.Primer_Brand__Card-module__Card__image___3J5wL img,.Primer_Brand__Card-module__Card__image___3J5wL picture,.Primer_Brand__Card-module__Card__image___3J5wL span{display:block}.Primer_Brand__Card-module__Card__leadingVisual___l_R3_{grid-area:leadingVisual;align-items:center;margin-block-end:var(--base-size-36);display:flex}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card__leadingVisual___l_R3_{justify-content:center}.Primer_Brand__Card-module__Card__leadingVisualItem___ICuuV{max-width:100%;height:var(--base-size-40);width:auto;display:block}.Primer_Brand__Card-module__Card__icon___gPD1k{margin-bottom:var(--base-size-24);grid-area:icon}.Primer_Brand__Card-module__Card__tokens___9L_4a{gap:var(--base-size-8);margin-bottom:var(--base-size-20);flex-wrap:wrap;grid-area:tokens;display:flex}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card__tokens___9L_4a{justify-content:center}.Primer_Brand__Card-module__Card__tokens--position-block-end___TL4R0{margin-block-start:var(--base-size-20);margin-block-end:0}.Primer_Brand__Card-module__Card__label___q_cqg{grid-area:label;inline-size:fit-content;max-inline-size:100%;margin-block-end:var(--base-size-20)}.Primer_Brand__Card-module__Card__heading___vdQlj{grid-area:heading;margin-block-end:var(--base-size-12)}.Primer_Brand__Card-module__Card__description___6RhVF{grid-area:description;margin-block-end:var(--base-size-24)}.Primer_Brand__Card-module__Card__action___NKFQ0{pointer-events:none;grid-area:action;align-items:center;max-inline-size:100%;margin-block-start:auto;display:inline-flex}.Primer_Brand__Card-module__Card__actionIcon___KF4ar{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.Primer_Brand__Card-module__Card__actionLabel____icG0{text-overflow:clip;white-space:normal;min-inline-size:0;display:block;overflow:visible}.Primer_Brand__Card-module__Card___txAQX:not(.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH) .Primer_Brand__Card-module__Card__action___NKFQ0{inline-size:100%;min-inline-size:0}.Primer_Brand__Card-module__Card___txAQX:not(.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH) .Primer_Brand__Card-module__Card__action___NKFQ0>span:first-child{min-inline-size:0}.Primer_Brand__Card-module__Card___txAQX:not(.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH) .Primer_Brand__Card-module__Card__actionLabel____icG0{text-overflow:clip;white-space:normal;word-wrap:anywhere;overflow:visible}.Primer_Brand__Card-module__Card--align-center___zuZI_:not(.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH) .Primer_Brand__Card-module__Card__actionLabel____icG0{text-align:center}.Primer_Brand__Card-module__Card__actionLabelClip___kEth0{display:contents}.Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy .Primer_Brand__Card-module__Card__action___NKFQ0{margin-block-start:var(--base-size-20)}.Primer_Brand__Card-module__Card__action--arrowOnly___19e3M{--actionArrow-duration:.3s;min-height:var(--base-size-40);width:auto;min-inline-size:0;max-inline-size:calc(100% - var(--Card-arrowAction-endInset));-moz-column-gap:var(--base-size-8);justify-content:flex-start;column-gap:var(--base-size-8);padding-block:var(--base-size-4);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-full);background-color:var(--brand-Card-background-overlay);flex-shrink:0;margin-block-start:var(--base-size-20);padding-inline-start:var(--base-size-12);padding-inline-end:var(--base-size-4);overflow:hidden}.Primer_Brand__Card-module__Card__actionIcon--arrowOnly___vCck1{width:var(--base-size-32);min-width:var(--base-size-32);height:var(--base-size-32);min-height:var(--base-size-32);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-full);background-color:var(--brand-color-canvas-default)}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card__action___NKFQ0{justify-content:center}.Primer_Brand__Card-module__Card__action___NKFQ0,.Primer_Brand__Card-module__Card__action___NKFQ0 span{color:var(--brand-Link-color-accent)}.Primer_Brand__Card-module__Card__action___NKFQ0,.Primer_Brand__Card-module__Card__action___NKFQ0 *{cursor:inherit}.Primer_Brand__Card-module__Card--skew___k2nMy:focus-within{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus)}.Primer_Brand__Card-module__Card--skew___k2nMy:hover .Primer_Brand__Card-module__Card__torch___hdUqp{opacity:.85}.Primer_Brand__Card-module__Card__skew-bounding___g108S{border-radius:var(--brand-borderRadius-medium);z-index:1;background-color:var(--brand-Card-background-default);height:100%;position:relative;overflow:hidden}.Primer_Brand__Card-module__Card__torch___hdUqp{background-color:var(--brand-color-accent-primary);filter:blur(180px);opacity:0;mix-blend-mode:soft-light;will-change:transform;pointer-events:none;z-index:-1;border-radius:300px;width:650px;height:650px;transition:opacity 1.2s cubic-bezier(.16,1,.3,1);position:absolute;bottom:0;right:0}.Primer_Brand__Card-module__Card--expandableArrow____CfmY{margin-inline-start:var(--base-size-4)}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card--expandableArrow____CfmY{--ExpandableArrow-duration:var(--brand-Card-animation-duration);--ExpandableArrow-easing:var(--brand-Card-animation-easing)}.Primer_Brand__Card-module__Card__actionIcon--arrowOnly___vCck1 .Primer_Brand__Card-module__Card--expandableArrow____CfmY{margin-inline-start:0}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card__description___6RhVF{margin-bottom:var(--base-size-12)}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card__action___NKFQ0{justify-self:start;min-inline-size:0}@media (hover:hover){.Primer_Brand__Card-module__Card__action--arrowOnly___19e3M{-moz-column-gap:0;transition:border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out, column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out;transition:border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out, column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out, -moz-column-gap var(--actionArrow-duration) ease-out;background-color:#0000;border-color:#0000;column-gap:0;padding-inline:0}.Primer_Brand__Card-module__Card__actionLabelClip___kEth0{--actionLabelClip-duration:.4s;opacity:0;min-inline-size:0;max-inline-size:0;transform:translateX(calc(var(--base-size-12) * -1));transition:max-inline-size .4s var(--brand-Card-animation-easing), opacity .4s ease-out, transform .4s ease-out, margin-inline .4s ease-out, padding-inline .4s ease-out;transition:max-inline-size var(--actionLabelClip-duration) var(--brand-Card-animation-easing), opacity var(--actionLabelClip-duration) ease-out, transform var(--actionLabelClip-duration) ease-out, margin-inline var(--actionLabelClip-duration) ease-out, padding-inline var(--actionLabelClip-duration) ease-out;background-color:#0000;flex:auto;align-self:stretch;align-items:center;margin-inline:0;padding-inline:0;display:inline-flex;overflow:hidden}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card__actionLabel____icG0{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card__action___NKFQ0{justify-self:center}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:focus-within .Primer_Brand__Card-module__Card__action--arrowOnly___19e3M,.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:hover .Primer_Brand__Card-module__Card__action--arrowOnly___19e3M{-moz-column-gap:var(--base-size-8);column-gap:var(--base-size-8);border-color:var(--brand-color-border-default);background-color:var(--brand-Card-background-overlay);padding-inline-start:var(--base-size-12);padding-inline-end:var(--base-size-4)}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:focus-within .Primer_Brand__Card-module__Card__actionLabelClip___kEth0,.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:hover .Primer_Brand__Card-module__Card__actionLabelClip___kEth0{opacity:1;max-inline-size:100%;margin-inline-start:calc(var(--base-size-12) * -1);margin-inline-end:0;padding-inline-start:var(--base-size-12);padding-inline-end:var(--base-size-4);transform:translate(0)}.Primer_Brand__Card-module__Card___txAQX:focus-within .Primer_Brand__Card-module__Card--expandableArrow____CfmY,.Primer_Brand__Card-module__Card___txAQX:hover .Primer_Brand__Card-module__Card--expandableArrow____CfmY{transform:translateX(var(--base-size-2))}.Primer_Brand__Card-module__Card___txAQX:hover .Primer_Brand__Card-module__Card--expandableArrow____CfmY path:nth-of-type(2),.Primer_Brand__Card-module__Card___txAQX:focus-within .Primer_Brand__Card-module__Card--expandableArrow____CfmY path:nth-of-type(2){stroke-dashoffset:20px}.Primer_Brand__Card-module__Card--disableAnimation___wZ9Jc,.Primer_Brand__Card-module__Card--disableAnimation___wZ9Jc *{transition:none;animation:none}@media (prefers-reduced-motion:reduce){.Primer_Brand__Card-module__Card___txAQX,.Primer_Brand__Card-module__Card___txAQX:before,.Primer_Brand__Card-module__Card___txAQX:after,.Primer_Brand__Card-module__Card___txAQX *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

package/esm/Card/Card.module.js

@@ -1,4 +1,4 @@
-import './Card.module-B41BqbuX.css';var e = {
+import './Card.module-4GGxtM9r.css';var e = {
 	Card: "Primer_Brand__Card-module__Card___txAQX",
 	"Card--align-center": "Primer_Brand__Card-module__Card--align-center___zuZI_",
 	"Card--backgroundColor-default": "Primer_Brand__Card-module__Card--backgroundColor-default___1JGan",
@@ -17,6 +17,9 @@ import './Card.module-B41BqbuX.css';var e = {
 	"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__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",