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

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (380) hide show

package/docs/components/Card/react.md CHANGED Viewed

@@ -147,46 +147,6 @@ Use the `Image` component to add an image to the `Card`. The `Image` component i
 </>
 ```
-### Full-bleed images
-When an image should stretch to fill the card width, set `padding="none"` on `Card.Image` and add `hasBorder` to the `Card` for visual containment. Display full-bleed cards in a regular `Grid` with clear gaps between them rather than in a shared gridline frame. Keep the image position and aspect ratio consistent across the group.
-```jsx
-<Grid>
-  {[
-    {
-      heading: 'Build with GitHub Copilot',
-      description: 'Write, review, and understand code with AI-powered assistance.',
-      image: '/images/placeholder-1.png',
-    },
-    {
-      heading: 'Automate your workflow',
-      description: 'Keep projects moving with tools that fit the way your team works.',
-      image: '/images/placeholder-2.png',
-    },
-    {
-      heading: 'Ship secure software',
-      description: 'Find and fix vulnerabilities throughout the development lifecycle.',
-      image: '/images/placeholder-3.png',
-    },
-  ].map(card => (
-    <Grid.Column key={card.heading} span={{xsmall: 12, large: 4}}>
-      <Card href="https://github.com" fullWidth hasBorder ctaVariant="arrow">
-        <Card.Heading>{card.heading}</Card.Heading>
-        <Card.Description>{card.description}</Card.Description>
-        <Card.Image
-          position="block-end"
-          padding="none"
-          src={card.image}
-          alt="Abstract gradient illustration"
-          aspectRatio="4:3"
-        />
-      </Card>
-    </Grid.Column>
-  ))}
-</Grid>
-```
 ### Tokens
 Use `Card.Tokens` to display more than one [Token](../Token/index.md).
@@ -239,11 +199,6 @@ Use `Card.Tokens` to display more than one [Token](../Token/index.md).
 Forwards all the props from the [Image component](../Image/index.md), including `src`, `alt`, and `aspectRatio`.
-| name       | type                           | default       | required | description                                                       |
-| ---------- | ------------------------------ | ------------- | -------- | ----------------------------------------------------------------- |
-| `padding`  | `'default' \| 'none'`          | `'default'`   | `false`  | Controls spacing around the image within the card                 |
-| `position` | `'block-start' \| 'block-end'` | `block-start` | `false`  | Places the image at the block-start or block-end edge of the card |
 ### Card.Icon
 | name            | type                                                                                                                                                                                                                                                         | default   | required | description                                  |

package/docs/index.md CHANGED Viewed

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.72.1-rc.8a8dc720)
+# Primer Brand docs (v0.72.1-rc.c3699332)
-These docs are bundled with `@primer/react-brand@0.72.1-rc.8a8dc720` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.72.1-rc.c3699332` and match your installed version.
 New here? Start with [Getting started](getting-started/index.md) for installation, global
 stylesheet and font setup. Component directories are named after their import (e.g.

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

@@ -12,7 +12,6 @@ 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";
@@ -22,7 +21,6 @@ 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;
 }>;
@@ -72,11 +70,10 @@ 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'>;
-export type CardImageProps = {
+type CardImageProps = {
     position?: 'block-start' | 'block-end';
-    padding?: CardImagePadding;
 } & ImageProps;
-declare function CardImage({ className, position, padding, ...rest }: CardImageProps): import("react/jsx-runtime").JSX.Element;
+declare function CardImage({ className, ...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 CHANGED Viewed

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

package/esm/Card/Card.js CHANGED Viewed

@@ -10,7 +10,7 @@ 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-DgOt50dE.css';/* empty css                                                                                     */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes-C43pQ5wc.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/card/base-BRKNIzyd.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 = ["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;
+], 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: s, 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;
 	P = u == null ? null : d(u) ? u.props.children ?? null : u;
-	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,
+	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,
 		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: w,
+			style: T,
 			ref: M,
 			...A,
 			children: [
@@ -74,35 +74,35 @@ var _ = ["default", "minimal"], v = [
 		})
 	});
 });
-function O({ className: t, children: n, style: r }) {
+function D({ className: t, children: n, style: r }) {
 	return /* @__PURE__ */ h("div", {
 		className: e(f.Card__outer, t),
 		style: r,
 		children: n
 	});
 }
-function k(t) {
+function O(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 A({ className: t, position: n = "block-start", padding: r = "default", ...i }) {
+function k({ className: e, ...t }) {
 	return /* @__PURE__ */ h("div", {
-		className: e(f.Card__image, f[`Card__image--position-${n}`], r === "none" && f["Card__image--padding-none"]),
+		className: f.Card__image,
 		children: /* @__PURE__ */ h(s, {
-			className: t,
-			...i
+			className: e,
+			...t
 		})
 	});
 }
-var j = ({ className: t, hasBackground: n = !0, ...r }) => /* @__PURE__ */ h(l, {
+var A = ({ className: t, hasBackground: n = !0, ...r }) => /* @__PURE__ */ h(l, {
 	className: e(f.Card__icon, t),
 	hasBackground: n,
 	...r
-}), M = m(({ children: t, className: n, position: r = "block-start", ...i }, a) => /* @__PURE__ */ h("div", {
+}), j = 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
-})), N = m(({ children: t, variant: n = E, className: r, ...a }, o) => n === "accent-text" ? /* @__PURE__ */ h(i, {
+})), M = m(({ children: t, variant: n = T, 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 j = ({ className: t, hasBackground: n = !0, ...r }) => /* @__PURE__ */ h(l,
 	className: e(f.Card__label, r),
 	...a,
 	children: t
-})), P = m(({ children: t, as: n = "h3", className: r, href: i, onMouseEnter: o, onMouseLeave: s, onBlur: c, onFocus: l, ...u }, d) => /* @__PURE__ */ h(a, {
+})), N = 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 j = ({ className: t, hasBackground: n = !0, ...r }) => /* @__PURE__ */ h(l,
 		onFocus: l,
 		children: t
 	})
-})), F = m(({ children: t, className: n, ...i }, a) => /* @__PURE__ */ h(r, {
+})), P = m(({ children: t, className: n, ...i }, a) => /* @__PURE__ */ h(r, {
 	variant: "muted",
 	ref: a,
 	size: "200",
@@ -136,15 +136,15 @@ var j = ({ className: t, hasBackground: n = !0, ...r }) => /* @__PURE__ */ h(l,
 	className: e(f.Card__description, n),
 	...i,
 	children: t
-})), 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
+})), 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
 });
 //#endregion
-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 };
+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 };
 //# sourceMappingURL=Card.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.js","names":[],"sources":["../../src/Card/Card.tsx"],"sourcesContent":["import React, {RefObject, forwardRef} from 'react'\n\nimport {clsx} from 'clsx'\nimport {Heading, HeadingProps, Text, Image, type ImageProps} from '..'\nimport {EyebrowText} from '../EyebrowText'\nimport {Icon, type IconProps} from '../Icon'\nimport {Token} from '../Token'\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport type {BaseProps} from '../component-helpers'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\nimport {Colors} from '../constants'\nimport {isFragmentElement} from '../utils/isFragmentElement'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/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":";;;;;;;;;;;;;;;;;;AAyBA,IAAa,IAAe,CAAC,WAAW,UAAU,EACrC,IAAkB;CAAC;CAAQ;CAAS;CAAO,EAC3C,IAAuB;CAAC;CAAW;CAAU;CAAO,EACpD,IAAqB,CAAC,eAAe,YAAY,EACjD,IAAoB,CAAC,SAAS,cAAc,EAC5C,IAA0B,CAAC,WAAW,OAAO,EAE7C,IAAiB,GAEjB,IAAuB,EAAe,IACtC,IAAwB,EAAgB,IACxC,IAA0B,EAAkB,IAmEnD,IAAW,GAEb,EACE,WAAQ,SACR,iBACA,iBACA,YACA,WACA,UAAU,GACV,cACA,aAAU,cACV,gBAAa,GACb,sBAAmB,IACnB,eAAY,IACZ,SACA,eAAY,IACZ,kBACA,UACA,aAAU,WACV,oBACA,GAAG,KAEL,MACG;CACH,IAAM,IAAU,EAAuB,EAAiC,EAClE,IACJ,MAAoB,MAAY,aAAa,MAAe,UAAU,SAAS,YAE7E;AAEJ,CAKE,IALE,KAAkC,OACzB,OACF,EAAkB,EAA+B,GAC/C,EAA+B,MAAM,YAAY,OAEjD;CAGb,IAAM,EAAC,cAAW,aAAU,cAAW,yBAAsB,uBAAoB,gBAAa,uBAC5F,EAAM,SAAS,QAAQ,EAAS,CAAC,QAQ7B,GAAK,OACH,EAAc,EAAM,GACtB,EAAI,cAAc,EAAM,aAAa,GAAO,EAC1C,SACD,CAAC,GACO,EAAY,EAAM,GAC3B,EAAI,YAAY,IACP,EAAW,EAAM,GAC1B,EAAI,WAAW,IACN,EAAY,EAAM,GAC3B,EAAI,YAAY,IACP,EAAa,EAAM,GACxB,EAAM,MAAM,aAAa,cAC3B,EAAI,qBAAqB,IAEzB,EAAI,uBAAuB,IAEpB,EAAkB,EAAM,KACjC,EAAI,kBAAkB,IAGjB,IACN,EAAE,CAAC;AAER,EAAA,QAAA,IAAA,aAA8B,iBAAA,QAAA,IAAA,aAA0C,WAAW,KAAiB,KAElG,QAAQ,KAAK,mGAAmG;CAGlH,IAAM,IAAwB,EAA2B,EAAc,EACjE,IAAmB,IAAwB,KAAA,IAAY,GACvD,IAAgB,IAAY,EAAU,MAAM,YAAY,gBAAgB,MACxE,IAAwB,EAAE,MAAU,YAAY,MAAe;AAErE,QACE,kBAAC,GAAD;EACS;EACP,WAAW,EACT,IAAY,EAAO,qBAAqB,EAAO,mBAC/C,EAAO,eAAe,KACvB;YAED,kBAAC,OAAD;GACE,WAAW,EACT,EAAO,MACP,KAAoB,EAAO,2BAC3B,KAAyB,EAAO,2BAChC,MAAe,WAAW,EAAO,2BACjC,KAAsB,EAAO,mCAC7B,MAAY,aAAa,EAAO,0BAChC,KAAa,EAAO,iBACpB,EAAO,yBAAyB,MAChC,KAAiB,EAAO,kBAAkB,MAC1C,EACD;GACM;GACP,KAAK;GACL,GAAI;aAfN;IAiBG,MAAkB,gBAAgB,IAAY;IAC9C,IAAwB,kBAAC,OAAD;KAAK,WAAW,EAAO;eAAsB;KAA4B,CAAA,GAAG;IACpG;IACA;IACA;IACA;IACA;IACA;IACA,MAAkB,cAAc,IAAY;IAE5C,MAAe,SAwBZ,OAvBF,kBAAC,OAAD;KACE,WAAW,EAAK,EAAO,cAAc,MAAe,WAAW,EAAO,2BAA2B;KACjG,eAAa,MAAe,UAAU,KAAO,KAAA;eAF/C,CAIE,kBAAC,QAAD;MAAM,WAAW,EAAK,MAAe,WAAW,EAAO,sBAAsB;gBAC3E,kBAAC,GAAD;OAAM,IAAG;OAAO,MAAK;OAAM,WAAW,EAAK,EAAW,gBAAgB,EAAO,kBAAkB;iBAC5F;OACI,CAAA;MACF,CAAA,EACN,IACC,kBAAC,QAAD;MACE,WAAW,EACT,EAAO,kBACP,MAAe,WAAW,EAAO,+BAClC;gBAED,kBAAC,GAAD;OACE,WAAW,EAAK,EAAW,eAAe,EAAO,yBAAyB;OAC1E,eAAY;OACZ,CAAA;MACG,CAAA,GACL,KACA;;IAEJ;;EACsB,CAAA;EAGnC;AAOD,SAAS,EAA4B,EAAC,cAAW,aAAU,YAA0C;AACnG,QACE,kBAAC,OAAD;EAAK,WAAW,EAAK,EAAO,aAAgB,EAAU;EAAS;EAC5D;EACG,CAAA;;AAIV,SAAS,EAA2B,GAAmC;AAerE,QAdK,IAID,OAAO,KAAkB,aACpB,EAAM,cAAc,GAAe,EAAC,WAAW,EAAO,yBAA2B,CAAC,GAGvF,EAAM,eAAqC,EAAc,GACpD,EAAM,aAAa,GAAe,EACvC,WAAW,EAAK,EAAO,yBAA4B,EAAc,MAAM,UAAU,EAClF,CAAC,GAGG,OAbE;;AAqBX,SAAS,EAAU,EAAC,cAAW,cAAW,eAAe,aAAU,WAAW,GAAG,KAAuB;AACtG,QACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAO,aACP,EAAO,yBAAyB,MAChC,MAAY,UAAU,EAAO,6BAC9B;YAED,kBAAC,GAAD;GAAkB;GAAW,GAAI;GAAQ,CAAA;EACrC,CAAA;;AAMV,IAAM,KAAY,EAAC,cAAW,mBAAgB,IAAM,GAAG,QACrD,kBAAC,GAAD;CAAM,WAAW,EAAK,EAAO,YAAY,EAAU;CAAiB;CAAe,GAAI;CAAS,CAAA,EAQ5F,IAAa,GAChB,EAAC,aAAU,cAAW,cAAW,eAAe,GAAG,KAAO,MAEvD,kBAAC,OAAD;CACE,WAAW,EACT,EAAO,cACP,MAAa,eAAe,EAAO,qCACnC,EACD;CACI;CACL,GAAI;CAEH;CACG,CAAA,CAGX,EAQK,IAAY,GACf,EAAC,aAAU,aAAU,GAAyB,cAAW,GAAG,KAAO,MAC9D,MAAY,gBAEZ,kBAAC,GAAD;CAAkB;CAAK,WAAW,EAAK,EAAO,aAAa,EAAU;CAAE,SAAQ;CAAS,GAAI;CACzF;CACW,CAAA,GAKhB,kBAAC,GAAD;CACO;CACL,WAAW,EAAK,EAAO,aAAa,EAAU;CAC9C,GAAI;CAEH;CACK,CAAA,CAGb,EASK,IAAc,GACjB,EAAC,aAAU,QAAK,MAAM,cAAW,SAAM,iBAAc,iBAAc,WAAQ,YAAS,GAAG,KAAO,MAE3F,kBAAC,GAAD;CAAS,MAAK;CAAI,WAAW,EAAK,EAAO,eAAe,EAAU;CAAO;CAAS;CAAI,GAAI;WACxF,kBAAC,KAAD;EACQ;EACN,WAAW,EAAK,EAAO,WAAW;EACpB;EACA;EACN;EACC;EAER;EACC,CAAA;CACI,CAAA,CAGf,EAMK,IAAkB,GACrB,EAAC,aAAU,cAAW,GAAG,KAAO,MAE7B,kBAAC,GAAD;CAAM,SAAQ;CAAa;CAAK,MAAK;CAAM,IAAG;CAAI,WAAW,EAAK,EAAO,mBAAmB,EAAU;CAAE,GAAI;CACzG;CACI,CAAA,CAGZ,EAEK,KACC,OACJ,MACC,EAAM,eAAe,EAAQ,IAAI,EAAQ,SAAS,GAEhD,IAAc,EAAyB,EAAU,EACjD,IAAa,EAAyB,EAAS,EAC/C,IAAc,EAAyB,EAAU,EACjD,IAAe,EAAyB,EAAW,EACnD,IAAgB,EAAyB,EAAY,EACrD,IAAoB,EAAyB,EAAgB,EAMtD,IAAO,OAAO,OAAO,GAAU;CAC1C,OAAO;CACP,MAAM;CACN,OAAO;CACP,QAAQ;CACR,SAAS;CACT,aAAa;CACd,CAAC"}
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 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\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":";;;;;;;;;;;;;;;;;;AAyBA,IAAa,IAAe,CAAC,WAAW,UAAU,EACrC,IAAkB;CAAC;CAAQ;CAAS;CAAO,EAC3C,IAAuB;CAAC;CAAW;CAAU;CAAO,EACpD,IAAqB,CAAC,eAAe,YAAY,EACjD,IAAoB,CAAC,SAAS,cAAc,EAE5C,IAAiB,GAEjB,IAAuB,EAAe,IACtC,IAAwB,EAAgB,IACxC,IAA0B,EAAkB,IAkEnD,IAAW,GAEb,EACE,WAAQ,SACR,iBACA,iBACA,YACA,WACA,UAAU,GACV,cACA,aAAU,cACV,gBAAa,GACb,sBAAmB,IACnB,eAAY,IACZ,SACA,eAAY,IACZ,kBACA,UACA,aAAU,WACV,oBACA,GAAG,KAEL,MACG;CACH,IAAM,IAAU,EAAuB,EAAiC,EAClE,IACJ,MAAoB,MAAY,aAAa,MAAe,UAAU,SAAS,YAE7E;AAEJ,CAKE,IALE,KAAkC,OACzB,OACF,EAAkB,EAA+B,GAC/C,EAA+B,MAAM,YAAY,OAEjD;CAGb,IAAM,EAAC,cAAW,aAAU,cAAW,yBAAsB,uBAAoB,gBAAa,uBAC5F,EAAM,SAAS,QAAQ,EAAS,CAAC,QAQ7B,GAAK,OACH,EAAc,EAAM,GACtB,EAAI,cAAc,EAAM,aAAa,GAAO,EAC1C,SACD,CAAC,GACO,EAAY,EAAM,GAC3B,EAAI,YAAY,IACP,EAAW,EAAM,GAC1B,EAAI,WAAW,IACN,EAAY,EAAM,GAC3B,EAAI,YAAY,IACP,EAAa,EAAM,GACxB,EAAM,MAAM,aAAa,cAC3B,EAAI,qBAAqB,IAEzB,EAAI,uBAAuB,IAEpB,EAAkB,EAAM,KACjC,EAAI,kBAAkB,IAGjB,IACN,EAAE,CAAC;AAER,EAAA,QAAA,IAAA,aAA8B,iBAAA,QAAA,IAAA,aAA0C,WAAW,KAAiB,KAElG,QAAQ,KAAK,mGAAmG;CAGlH,IAAM,IAAwB,EAA2B,EAAc,EACjE,IAAmB,IAAwB,KAAA,IAAY,GACvD,IAAgB,IAAY,EAAU,MAAM,YAAY,gBAAgB,MACxE,IAAwB,EAAE,MAAU,YAAY,MAAe;AAErE,QACE,kBAAC,GAAD;EACS;EACP,WAAW,EACT,IAAY,EAAO,qBAAqB,EAAO,mBAC/C,EAAO,eAAe,KACvB;YAED,kBAAC,OAAD;GACE,WAAW,EACT,EAAO,MACP,KAAoB,EAAO,2BAC3B,KAAyB,EAAO,2BAChC,MAAe,WAAW,EAAO,2BACjC,KAAsB,EAAO,mCAC7B,MAAY,aAAa,EAAO,0BAChC,KAAa,EAAO,iBACpB,EAAO,yBAAyB,MAChC,KAAiB,EAAO,kBAAkB,MAC1C,EACD;GACM;GACP,KAAK;GACL,GAAI;aAfN;IAiBG,MAAkB,gBAAgB,IAAY;IAC9C,IAAwB,kBAAC,OAAD;KAAK,WAAW,EAAO;eAAsB;KAA4B,CAAA,GAAG;IACpG;IACA;IACA;IACA;IACA;IACA;IACA,MAAkB,cAAc,IAAY;IAE5C,MAAe,SAwBZ,OAvBF,kBAAC,OAAD;KACE,WAAW,EAAK,EAAO,cAAc,MAAe,WAAW,EAAO,2BAA2B;KACjG,eAAa,MAAe,UAAU,KAAO,KAAA;eAF/C,CAIE,kBAAC,QAAD;MAAM,WAAW,EAAK,MAAe,WAAW,EAAO,sBAAsB;gBAC3E,kBAAC,GAAD;OAAM,IAAG;OAAO,MAAK;OAAM,WAAW,EAAK,EAAW,gBAAgB,EAAO,kBAAkB;iBAC5F;OACI,CAAA;MACF,CAAA,EACN,IACC,kBAAC,QAAD;MACE,WAAW,EACT,EAAO,kBACP,MAAe,WAAW,EAAO,+BAClC;gBAED,kBAAC,GAAD;OACE,WAAW,EAAK,EAAW,eAAe,EAAO,yBAAyB;OAC1E,eAAY;OACZ,CAAA;MACG,CAAA,GACL,KACA;;IAEJ;;EACsB,CAAA;EAGnC;AAOD,SAAS,EAA4B,EAAC,cAAW,aAAU,YAA0C;AACnG,QACE,kBAAC,OAAD;EAAK,WAAW,EAAK,EAAO,aAAgB,EAAU;EAAS;EAC5D;EACG,CAAA;;AAIV,SAAS,EAA2B,GAAmC;AAerE,QAdK,IAID,OAAO,KAAkB,aACpB,EAAM,cAAc,GAAe,EAAC,WAAW,EAAO,yBAA2B,CAAC,GAGvF,EAAM,eAAqC,EAAc,GACpD,EAAM,aAAa,GAAe,EACvC,WAAW,EAAK,EAAO,yBAA4B,EAAc,MAAM,UAAU,EAClF,CAAC,GAGG,OAbE;;AAoBX,SAAS,EAAU,EAAC,cAAW,GAAG,KAAuB;AACvD,QACE,kBAAC,OAAD;EAAK,WAAW,EAAO;YACrB,kBAAC,GAAD;GAAkB;GAAW,GAAI;GAAQ,CAAA;EACrC,CAAA;;AAMV,IAAM,KAAY,EAAC,cAAW,mBAAgB,IAAM,GAAG,QACrD,kBAAC,GAAD;CAAM,WAAW,EAAK,EAAO,YAAY,EAAU;CAAiB;CAAe,GAAI;CAAS,CAAA,EAQ5F,IAAa,GAChB,EAAC,aAAU,cAAW,cAAW,eAAe,GAAG,KAAO,MAEvD,kBAAC,OAAD;CACE,WAAW,EACT,EAAO,cACP,MAAa,eAAe,EAAO,qCACnC,EACD;CACI;CACL,GAAI;CAEH;CACG,CAAA,CAGX,EAQK,IAAY,GACf,EAAC,aAAU,aAAU,GAAyB,cAAW,GAAG,KAAO,MAC9D,MAAY,gBAEZ,kBAAC,GAAD;CAAkB;CAAK,WAAW,EAAK,EAAO,aAAa,EAAU;CAAE,SAAQ;CAAS,GAAI;CACzF;CACW,CAAA,GAKhB,kBAAC,GAAD;CACO;CACL,WAAW,EAAK,EAAO,aAAa,EAAU;CAC9C,GAAI;CAEH;CACK,CAAA,CAGb,EASK,IAAc,GACjB,EAAC,aAAU,QAAK,MAAM,cAAW,SAAM,iBAAc,iBAAc,WAAQ,YAAS,GAAG,KAAO,MAE3F,kBAAC,GAAD;CAAS,MAAK;CAAI,WAAW,EAAK,EAAO,eAAe,EAAU;CAAO;CAAS;CAAI,GAAI;WACxF,kBAAC,KAAD;EACQ;EACN,WAAW,EAAK,EAAO,WAAW;EACpB;EACA;EACN;EACC;EAER;EACC,CAAA;CACI,CAAA,CAGf,EAMK,IAAkB,GACrB,EAAC,aAAU,cAAW,GAAG,KAAO,MAE7B,kBAAC,GAAD;CAAM,SAAQ;CAAa;CAAK,MAAK;CAAM,IAAG;CAAI,WAAW,EAAK,EAAO,mBAAmB,EAAU;CAAE,GAAI;CACzG;CACI,CAAA,CAGZ,EAEK,KACC,OACJ,MACC,EAAM,eAAe,EAAQ,IAAI,EAAQ,SAAS,GAEhD,IAAc,EAAyB,EAAU,EACjD,IAAa,EAAyB,EAAS,EAC/C,IAAc,EAAyB,EAAU,EACjD,IAAe,EAAyB,EAAW,EACnD,IAAgB,EAAyB,EAAY,EACrD,IAAoB,EAAyB,EAAgB,EAMtD,IAAO,OAAO,OAAO,GAAU;CAC1C,OAAO;CACP,MAAM;CACN,OAAO;CACP,QAAQ;CACR,SAAS;CACT,aAAa;CACd,CAAC"}

package/esm/Card/Card.module-DZ_okl01.css ADDED Viewed

@@ -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(--base-size-32) var(--base-size-20);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{padding-inline:var(--base-size-32)}}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card___txAQX{text-align:center;padding:var(--base-size-64) var(--base-size-40)}@media screen and (width>=64rem){.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card___txAQX{padding:var(--base-size-64) 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{padding:var(--base-size-64) 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___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 CHANGED Viewed

@@ -1,4 +1,4 @@
-import './Card.module-4GGxtM9r.css';var e = {
+import './Card.module-DZ_okl01.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,9 +17,6 @@ import './Card.module-4GGxtM9r.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",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.module.js","names":[],"sources":["../../src/Card/Card.module.css"],"sourcesContent":[".Card {\n /* Keeps the dynamic height row on the description slot in the default layout so variable-height content fills the card body. /\n --Card-grid-template-rows: auto auto auto auto auto auto 1fr auto;\n\n text-decoration: none;\n color: var(--brand-color-text-default);\n\n padding: var(--brand-Card-padding-block) var(--brand-Card-padding-inline);\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-template-areas:\n 'image image'\n 'leadingVisual leadingVisual'\n 'icon icon'\n 'tokens tokens'\n 'label label'\n 'heading heading'\n 'description description'\n 'action action';\n flex: auto;\n grid-template-rows: var(--Card-grid-template-rows);\n position: relative;\n height: 100%;\n border-radius: var(--brand-borderRadius-medium);\n}\n\n@media screen and (min-width: 64rem) {\n .Card {\n --brand-Card-padding-inline: var(--base-size-32);\n }\n}\n\n.Card--align-center .Card {\n --brand-Card-padding-block: var(--base-size-64);\n --brand-Card-padding-inline: var(--base-size-40);\n\n text-align: center;\n}\n\n@media screen and (min-width: 64rem) {\n .Card--align-center .Card {\n --brand-Card-padding-inline: var(--base-size-80);\n }\n}\n\n.Card--align-center .Card {\n grid-template-columns: 1fr;\n grid-template-areas:\n 'image'\n 'leadingVisual'\n 'icon'\n 'tokens'\n 'label'\n 'heading'\n 'description'\n 'action';\n justify-items: center;\n}\n\n.Card--backgroundColor-default {\n background-color: var(--brand-Card-background-default);\n}\n\n.Card--backgroundColor-subtle {\n background-color: var(--brand-color-canvas-subtle);\n}\n\n.Card--backgroundColor-none {\n background-color: transparent;\n}\n\n.Card--tokensPosition-block-end {\n / Moves the dynamic height row from tokens back to description because the block-end layout places tokens below the body copy. /\n --Card-grid-template-rows: auto auto auto auto auto 1fr auto auto;\n\n grid-template-areas:\n 'image image'\n 'leadingVisual leadingVisual'\n 'icon icon'\n 'label label'\n 'heading heading'\n 'description description'\n 'tokens tokens'\n 'action action';\n}\n\n.Card--align-center .Card--tokensPosition-block-end {\n grid-template-areas:\n 'image'\n 'leadingVisual'\n 'icon'\n 'label'\n 'heading'\n 'description'\n 'tokens'\n 'action';\n}\n\n/* Block end image position option /\n.Card--imagePos-block-end {\n / Moves the dynamic height row from action back to description because the image is rendered after the content in this layout. /\n --Card-grid-template-rows: auto auto auto auto auto 1fr auto auto;\n\n grid-template-areas:\n 'leadingVisual leadingVisual'\n 'icon icon'\n 'tokens tokens'\n 'label label'\n 'heading heading'\n 'description description'\n 'action action'\n 'image image';\n}\n\n.Card--align-center .Card--imagePos-block-end {\n grid-template-areas:\n 'leadingVisual'\n 'icon'\n 'tokens'\n 'label'\n 'heading'\n 'description'\n 'action'\n 'image';\n}\n\n.Card--imagePos-block-end.Card--tokensPosition-block-end {\n / Moves the dynamic height row from tokens back to description because both the tokens and image are rendered after the body copy here. /\n --Card-grid-template-rows: auto auto auto auto 1fr auto auto auto;\n\n grid-template-areas:\n 'leadingVisual leadingVisual'\n 'icon icon'\n 'label label'\n 'heading heading'\n 'description description'\n 'tokens tokens'\n 'action action'\n 'image image';\n}\n\n.Card--align-center .Card--imagePos-block-end.Card--tokensPosition-block-end {\n grid-template-areas:\n 'leadingVisual'\n 'icon'\n 'label'\n 'heading'\n 'description'\n 'tokens'\n 'action'\n 'image';\n}\n\n.Card--hasLeadingVisual {\n --brand-Card-padding-block: var(--base-size-64);\n --brand-Card-padding-inline: var(--base-size-40);\n}\n\n.Card--imagePos-block-end .Card__image {\n margin-bottom: 0;\n margin-top: var(--base-size-28);\n}\n\n.Card--maxWidth {\n max-width: var(--brand-Card-maxWidth);\n}\n\n.Card--fullWidth {\n max-width: unset;\n}\n\n.Card--variant-minimal {\n padding: 0;\n}\n\n.Card--align-center .Card--variant-minimal {\n padding: 0;\n}\n\n.Card--ctaVariant-arrow {\n --Card-arrowAction-endInset: var(--base-size-40);\n}\n\n.Card:hover {\n text-decoration: none;\n}\n\n.Card__link {\n color: currentColor;\n text-decoration: none !important;\n}\n\n.Card__link code,\n.Card__description code {\n font-size: inherit;\n font-family: var(--brand-fontStack-monospace);\n background-color: var(--brand-color-canvas-subtle);\n padding: 0 var(--base-size-4) var(--base-size-2);\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.Card__description code {\n padding: var(--base-size-2) var(--base-size-4) 0;\n}\n.Card__link:has(code) {\n line-height: calc(1lh 1.4);\n}\n\n.Card__description.Card__description:has(code) {\n line-height: calc(1lh * 1.25);\n}\n\n.Card--disableAnimation:hover .Card__link {\n text-decoration: underline !important;\n}\n\n/* The focus outline will appear around the entire card, not just the title /\n.Card__link:focus {\n outline: none;\n}\n\n.Card__link::before {\n content: '';\n position: absolute;\n inset: 0;\n}\n\n.Card--border {\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card__outer {\n height: 100%;\n}\n\n.Card__outer:has(.Card--variant-minimal) {\n border-radius: var(--brand-borderRadius-small);\n}\n\n.Card__outer:focus-within {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card__outer:has(.Card--variant-minimal):focus-within {\n outline-offset: var(\n --base-size-12\n ); / This value is adjusted so that, when combined with the container's border radius, the total border radius equals `var(--brand-borderRadius-medium)` /\n}\n\n.Card__image {\n margin-block-end: var(--base-size-28);\n border-radius: var(--brand-borderRadius-medium);\n overflow: hidden;\n grid-area: image;\n}\n\n.Card__image--padding-none {\n margin-inline: calc(var(--brand-Card-padding-inline) -1);\n}\n\n.Card__image--position-block-start.Card__image--padding-none {\n margin-block-start: calc(var(--brand-Card-padding-block) * -1);\n}\n\n.Card__image--position-block-end.Card__image--padding-none {\n margin-block-end: calc(var(--brand-Card-padding-block) * -1);\n}\n\n.Card--border .Card__image--position-block-start.Card__image--padding-none {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n}\n\n.Card--border .Card__image--position-block-end.Card__image--padding-none {\n border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n}\n\n.Card--variant-minimal .Card__image--padding-none {\n margin-inline: 0;\n}\n\n.Card--variant-minimal .Card__image--position-block-start.Card__image--padding-none {\n margin-block-start: 0;\n}\n\n.Card--variant-minimal .Card__image--position-block-end.Card__image--padding-none {\n margin-block-end: 0;\n}\n\n.Card__image img,\n.Card__image picture,\n.Card__image span {\n display: block;\n}\n\n.Card__leadingVisual {\n margin-block-end: var(--base-size-36);\n display: flex;\n align-items: center;\n grid-area: leadingVisual;\n}\n\n.Card--align-center .Card__leadingVisual {\n justify-content: center;\n}\n\n.Card__leadingVisualItem {\n display: block;\n max-width: 100%;\n height: var(--base-size-40);\n width: auto;\n}\n\n.Card__icon {\n margin-bottom: var(--base-size-24);\n grid-area: icon;\n}\n\n.Card__tokens {\n display: flex;\n flex-wrap: wrap;\n gap: var(--base-size-8);\n grid-area: tokens;\n margin-bottom: var(--base-size-20);\n}\n\n.Card--align-center .Card__tokens {\n justify-content: center;\n}\n\n.Card__tokens--position-block-end {\n margin-block-start: var(--base-size-20);\n margin-block-end: 0;\n}\n\n.Card__label {\n margin-block-end: var(--base-size-20);\n grid-area: label;\n inline-size: fit-content;\n max-inline-size: 100%;\n}\n\n.Card__heading {\n margin-block-end: var(--base-size-12);\n grid-area: heading;\n}\n\n.Card__description {\n margin-block-end: var(--base-size-24);\n grid-area: description;\n}\n\n.Card__action {\n grid-area: action;\n margin-block-start: auto;\n display: inline-flex;\n align-items: center;\n max-inline-size: 100%;\n pointer-events: none;\n}\n\n.Card__actionIcon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.Card__actionLabel {\n display: block;\n min-inline-size: 0;\n overflow: visible;\n text-overflow: clip;\n white-space: normal;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__action {\n inline-size: 100%;\n min-inline-size: 0;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__action > span:first-child {\n min-inline-size: 0;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__actionLabel {\n overflow: visible;\n text-overflow: clip;\n white-space: normal;\n overflow-wrap: anywhere;\n}\n\n.Card--align-center:not(.Card--ctaVariant-arrow) .Card__actionLabel {\n text-align: center;\n}\n\n.Card__actionLabelClip {\n display: contents;\n}\n\n.Card--tokensPosition-block-end .Card__action {\n margin-block-start: var(--base-size-20);\n}\n\n.Card__action--arrowOnly {\n --actionArrow-duration: 300ms;\n\n margin-block-start: var(--base-size-20);\n min-height: var(--base-size-40);\n width: auto;\n min-inline-size: 0;\n max-inline-size: calc(100% - var(--Card-arrowAction-endInset));\n justify-content: flex-start;\n column-gap: var(--base-size-8);\n padding-block: var(--base-size-4);\n padding-inline-start: var(--base-size-12);\n padding-inline-end: var(--base-size-4);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n border-radius: var(--brand-borderRadius-full);\n background-color: var(--brand-Card-background-overlay);\n flex-shrink: 0;\n overflow: hidden;\n}\n\n.Card__actionIcon--arrowOnly {\n width: var(--base-size-32);\n min-width: var(--base-size-32);\n height: var(--base-size-32);\n min-height: var(--base-size-32);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n border-radius: var(--brand-borderRadius-full);\n background-color: var(--brand-color-canvas-default);\n}\n\n.Card--align-center .Card__action {\n justify-content: center;\n}\n\n.Card__action,\n.Card__action span {\n color: var(--brand-Link-color-accent);\n}\n\n.Card__action,\n.Card__action * {\n cursor: inherit;\n}\n\n.Card--skew:focus-within {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n}\n\n.Card--skew:hover .Card__torch {\n opacity: 0.85;\n}\n\n.Card__skew-bounding {\n border-radius: var(--brand-borderRadius-medium);\n position: relative;\n overflow: hidden;\n z-index: 1;\n height: 100%;\n background-color: var(--brand-Card-background-default);\n}\n\n.Card__torch {\n width: 650px;\n height: 650px;\n background-color: var(--brand-color-accent-primary);\n filter: blur(180px);\n border-radius: 300px;\n opacity: 0;\n transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);\n mix-blend-mode: soft-light;\n will-change: transform;\n pointer-events: none;\n position: absolute;\n bottom: 0;\n right: 0;\n z-index: -1;\n}\n\n.Card--expandableArrow {\n margin-inline-start: var(--base-size-4);\n}\n\n.Card--ctaVariant-arrow .Card--expandableArrow {\n --ExpandableArrow-duration: var(--brand-Card-animation-duration);\n --ExpandableArrow-easing: var(--brand-Card-animation-easing);\n}\n\n.Card__actionIcon--arrowOnly .Card--expandableArrow {\n margin-inline-start: 0;\n}\n\n.Card--ctaVariant-arrow .Card__description {\n margin-bottom: var(--base-size-12);\n}\n\n.Card--ctaVariant-arrow .Card__action {\n min-inline-size: 0;\n justify-self: start;\n}\n\n@media (hover: hover) {\n .Card__action--arrowOnly {\n column-gap: 0;\n padding-inline: 0;\n border-color: transparent;\n background-color: transparent;\n transition: border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out,\n column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out;\n }\n\n .Card__actionLabelClip {\n --actionLabelClip-duration: 400ms;\n\n display: inline-flex;\n flex: 1 1 auto;\n align-items: center;\n align-self: stretch;\n min-inline-size: 0;\n overflow: hidden;\n max-inline-size: 0;\n background-color: transparent;\n opacity: 0;\n transform: translateX(calc(var(--base-size-12) * -1));\n margin-inline: 0;\n padding-inline: 0;\n transition: max-inline-size var(--actionLabelClip-duration) var(--brand-Card-animation-easing),\n opacity var(--actionLabelClip-duration) ease-out, transform var(--actionLabelClip-duration) ease-out,\n margin-inline var(--actionLabelClip-duration) ease-out, padding-inline var(--actionLabelClip-duration) ease-out;\n }\n\n .Card--ctaVariant-arrow .Card__actionLabel {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n\n.Card--align-center .Card--ctaVariant-arrow .Card__action {\n justify-self: center;\n}\n\n.Card--ctaVariant-arrow:is(:hover, :focus-within) .Card__action--arrowOnly {\n column-gap: var(--base-size-8);\n padding-inline-start: var(--base-size-12);\n padding-inline-end: var(--base-size-4);\n border-color: var(--brand-color-border-default);\n background-color: var(--brand-Card-background-overlay);\n}\n\n.Card--ctaVariant-arrow:is(:hover, :focus-within) .Card__actionLabelClip {\n max-inline-size: 100%;\n opacity: 1;\n transform: translateX(0);\n margin-inline-start: calc(var(--base-size-12) * -1);\n margin-inline-end: 0;\n padding-inline-start: var(--base-size-12);\n padding-inline-end: var(--base-size-4);\n}\n\n.Card:is(:hover, :focus-within) .Card--expandableArrow {\n transform: translateX(var(--base-size-2));\n}\n\n.Card:is(:hover, :focus-within) .Card--expandableArrow path:nth-of-type(2) {\n stroke-dashoffset: 20;\n}\n\n.Card--disableAnimation,\n.Card--disableAnimation * {\n animation: none;\n transition: none;\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them /\n@media (prefers-reduced-motion: reduce) {\n .Card,\n .Card::before,\n .Card::after,\n .Card {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Card.module.js","names":[],"sources":["../../src/Card/Card.module.css"],"sourcesContent":[".Card {\n /* Keeps the dynamic height row on the description slot in the default layout so variable-height content fills the card body. /\n --Card-grid-template-rows: auto auto auto auto auto auto 1fr auto;\n\n text-decoration: none;\n color: var(--brand-color-text-default);\n\n padding: var(--base-size-32) var(--base-size-20);\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-template-areas:\n 'image image'\n 'leadingVisual leadingVisual'\n 'icon icon'\n 'tokens tokens'\n 'label label'\n 'heading heading'\n 'description description'\n 'action action';\n flex: auto;\n grid-template-rows: var(--Card-grid-template-rows);\n position: relative;\n height: 100%;\n border-radius: var(--brand-borderRadius-medium);\n}\n\n@media screen and (min-width: 64rem) {\n .Card {\n padding-inline: var(--base-size-32);\n }\n}\n\n.Card--align-center .Card {\n text-align: center;\n padding: var(--base-size-64) var(--base-size-40);\n}\n\n@media screen and (min-width: 64rem) {\n .Card--align-center .Card {\n padding: var(--base-size-64) var(--base-size-80);\n }\n}\n\n.Card--align-center .Card {\n grid-template-columns: 1fr;\n grid-template-areas:\n 'image'\n 'leadingVisual'\n 'icon'\n 'tokens'\n 'label'\n 'heading'\n 'description'\n 'action';\n justify-items: center;\n}\n\n.Card--backgroundColor-default {\n background-color: var(--brand-Card-background-default);\n}\n\n.Card--backgroundColor-subtle {\n background-color: var(--brand-color-canvas-subtle);\n}\n\n.Card--backgroundColor-none {\n background-color: transparent;\n}\n\n.Card--tokensPosition-block-end {\n / Moves the dynamic height row from tokens back to description because the block-end layout places tokens below the body copy. /\n --Card-grid-template-rows: auto auto auto auto auto 1fr auto auto;\n\n grid-template-areas:\n 'image image'\n 'leadingVisual leadingVisual'\n 'icon icon'\n 'label label'\n 'heading heading'\n 'description description'\n 'tokens tokens'\n 'action action';\n}\n\n.Card--align-center .Card--tokensPosition-block-end {\n grid-template-areas:\n 'image'\n 'leadingVisual'\n 'icon'\n 'label'\n 'heading'\n 'description'\n 'tokens'\n 'action';\n}\n\n/* Block end image position option /\n.Card--imagePos-block-end {\n / Moves the dynamic height row from action back to description because the image is rendered after the content in this layout. /\n --Card-grid-template-rows: auto auto auto auto auto 1fr auto auto;\n\n grid-template-areas:\n 'leadingVisual leadingVisual'\n 'icon icon'\n 'tokens tokens'\n 'label label'\n 'heading heading'\n 'description description'\n 'action action'\n 'image image';\n}\n\n.Card--align-center .Card--imagePos-block-end {\n grid-template-areas:\n 'leadingVisual'\n 'icon'\n 'tokens'\n 'label'\n 'heading'\n 'description'\n 'action'\n 'image';\n}\n\n.Card--imagePos-block-end.Card--tokensPosition-block-end {\n / Moves the dynamic height row from tokens back to description because both the tokens and image are rendered after the body copy here. /\n --Card-grid-template-rows: auto auto auto auto 1fr auto auto auto;\n\n grid-template-areas:\n 'leadingVisual leadingVisual'\n 'icon icon'\n 'label label'\n 'heading heading'\n 'description description'\n 'tokens tokens'\n 'action action'\n 'image image';\n}\n\n.Card--align-center .Card--imagePos-block-end.Card--tokensPosition-block-end {\n grid-template-areas:\n 'leadingVisual'\n 'icon'\n 'label'\n 'heading'\n 'description'\n 'tokens'\n 'action'\n 'image';\n}\n\n.Card--hasLeadingVisual {\n padding: var(--base-size-64) var(--base-size-40);\n}\n\n.Card--imagePos-block-end .Card__image {\n margin-bottom: 0;\n margin-top: var(--base-size-28);\n}\n\n.Card--maxWidth {\n max-width: var(--brand-Card-maxWidth);\n}\n\n.Card--fullWidth {\n max-width: unset;\n}\n\n.Card--variant-minimal {\n padding: 0;\n}\n\n.Card--align-center .Card--variant-minimal {\n padding: 0;\n}\n\n.Card--ctaVariant-arrow {\n --Card-arrowAction-endInset: var(--base-size-40);\n}\n\n.Card:hover {\n text-decoration: none;\n}\n\n.Card__link {\n color: currentColor;\n text-decoration: none !important;\n}\n\n.Card__link code,\n.Card__description code {\n font-size: inherit;\n font-family: var(--brand-fontStack-monospace);\n background-color: var(--brand-color-canvas-subtle);\n padding: 0 var(--base-size-4) var(--base-size-2);\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.Card__description code {\n padding: var(--base-size-2) var(--base-size-4) 0;\n}\n.Card__link:has(code) {\n line-height: calc(1lh 1.4);\n}\n\n.Card__description.Card__description:has(code) {\n line-height: calc(1lh * 1.25);\n}\n\n.Card--disableAnimation:hover .Card__link {\n text-decoration: underline !important;\n}\n\n/* The focus outline will appear around the entire card, not just the title /\n.Card__link:focus {\n outline: none;\n}\n\n.Card__link::before {\n content: '';\n position: absolute;\n inset: 0;\n}\n\n.Card--border {\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card__outer {\n height: 100%;\n}\n\n.Card__outer:has(.Card--variant-minimal) {\n border-radius: var(--brand-borderRadius-small);\n}\n\n.Card__outer:focus-within {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card__outer:has(.Card--variant-minimal):focus-within {\n outline-offset: var(\n --base-size-12\n ); / This value is adjusted so that, when combined with the container's border radius, the total border radius equals `var(--brand-borderRadius-medium)` /\n}\n\n.Card__image {\n margin-block-end: var(--base-size-28);\n border-radius: var(--brand-borderRadius-medium);\n overflow: hidden;\n grid-area: image;\n}\n\n.Card__image img,\n.Card__image picture,\n.Card__image span {\n display: block;\n}\n\n.Card__leadingVisual {\n margin-block-end: var(--base-size-36);\n display: flex;\n align-items: center;\n grid-area: leadingVisual;\n}\n\n.Card--align-center .Card__leadingVisual {\n justify-content: center;\n}\n\n.Card__leadingVisualItem {\n display: block;\n max-width: 100%;\n height: var(--base-size-40);\n width: auto;\n}\n\n.Card__icon {\n margin-bottom: var(--base-size-24);\n grid-area: icon;\n}\n\n.Card__tokens {\n display: flex;\n flex-wrap: wrap;\n gap: var(--base-size-8);\n grid-area: tokens;\n margin-bottom: var(--base-size-20);\n}\n\n.Card--align-center .Card__tokens {\n justify-content: center;\n}\n\n.Card__tokens--position-block-end {\n margin-block-start: var(--base-size-20);\n margin-block-end: 0;\n}\n\n.Card__label {\n margin-block-end: var(--base-size-20);\n grid-area: label;\n inline-size: fit-content;\n max-inline-size: 100%;\n}\n\n.Card__heading {\n margin-block-end: var(--base-size-12);\n grid-area: heading;\n}\n\n.Card__description {\n margin-block-end: var(--base-size-24);\n grid-area: description;\n}\n\n.Card__action {\n grid-area: action;\n margin-block-start: auto;\n display: inline-flex;\n align-items: center;\n max-inline-size: 100%;\n pointer-events: none;\n}\n\n.Card__actionIcon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.Card__actionLabel {\n display: block;\n min-inline-size: 0;\n overflow: visible;\n text-overflow: clip;\n white-space: normal;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__action {\n inline-size: 100%;\n min-inline-size: 0;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__action > span:first-child {\n min-inline-size: 0;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__actionLabel {\n overflow: visible;\n text-overflow: clip;\n white-space: normal;\n overflow-wrap: anywhere;\n}\n\n.Card--align-center:not(.Card--ctaVariant-arrow) .Card__actionLabel {\n text-align: center;\n}\n\n.Card__actionLabelClip {\n display: contents;\n}\n\n.Card--tokensPosition-block-end .Card__action {\n margin-block-start: var(--base-size-20);\n}\n\n.Card__action--arrowOnly {\n --actionArrow-duration: 300ms;\n\n margin-block-start: var(--base-size-20);\n min-height: var(--base-size-40);\n width: auto;\n min-inline-size: 0;\n max-inline-size: calc(100% - var(--Card-arrowAction-endInset));\n justify-content: flex-start;\n column-gap: var(--base-size-8);\n padding-block: var(--base-size-4);\n padding-inline-start: var(--base-size-12);\n padding-inline-end: var(--base-size-4);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n border-radius: var(--brand-borderRadius-full);\n background-color: var(--brand-Card-background-overlay);\n flex-shrink: 0;\n overflow: hidden;\n}\n\n.Card__actionIcon--arrowOnly {\n width: var(--base-size-32);\n min-width: var(--base-size-32);\n height: var(--base-size-32);\n min-height: var(--base-size-32);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n border-radius: var(--brand-borderRadius-full);\n background-color: var(--brand-color-canvas-default);\n}\n\n.Card--align-center .Card__action {\n justify-content: center;\n}\n\n.Card__action,\n.Card__action span {\n color: var(--brand-Link-color-accent);\n}\n\n.Card__action,\n.Card__action {\n cursor: inherit;\n}\n\n.Card--skew:focus-within {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n}\n\n.Card--skew:hover .Card__torch {\n opacity: 0.85;\n}\n\n.Card__skew-bounding {\n border-radius: var(--brand-borderRadius-medium);\n position: relative;\n overflow: hidden;\n z-index: 1;\n height: 100%;\n background-color: var(--brand-Card-background-default);\n}\n\n.Card__torch {\n width: 650px;\n height: 650px;\n background-color: var(--brand-color-accent-primary);\n filter: blur(180px);\n border-radius: 300px;\n opacity: 0;\n transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);\n mix-blend-mode: soft-light;\n will-change: transform;\n pointer-events: none;\n position: absolute;\n bottom: 0;\n right: 0;\n z-index: -1;\n}\n\n.Card--expandableArrow {\n margin-inline-start: var(--base-size-4);\n}\n\n.Card--ctaVariant-arrow .Card--expandableArrow {\n --ExpandableArrow-duration: var(--brand-Card-animation-duration);\n --ExpandableArrow-easing: var(--brand-Card-animation-easing);\n}\n\n.Card__actionIcon--arrowOnly .Card--expandableArrow {\n margin-inline-start: 0;\n}\n\n.Card--ctaVariant-arrow .Card__description {\n margin-bottom: var(--base-size-12);\n}\n\n.Card--ctaVariant-arrow .Card__action {\n min-inline-size: 0;\n justify-self: start;\n}\n\n@media (hover: hover) {\n .Card__action--arrowOnly {\n column-gap: 0;\n padding-inline: 0;\n border-color: transparent;\n background-color: transparent;\n transition: border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out,\n column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out;\n }\n\n .Card__actionLabelClip {\n --actionLabelClip-duration: 400ms;\n\n display: inline-flex;\n flex: 1 1 auto;\n align-items: center;\n align-self: stretch;\n min-inline-size: 0;\n overflow: hidden;\n max-inline-size: 0;\n background-color: transparent;\n opacity: 0;\n transform: translateX(calc(var(--base-size-12) * -1));\n margin-inline: 0;\n padding-inline: 0;\n transition: max-inline-size var(--actionLabelClip-duration) var(--brand-Card-animation-easing),\n opacity var(--actionLabelClip-duration) ease-out, transform var(--actionLabelClip-duration) ease-out,\n margin-inline var(--actionLabelClip-duration) ease-out, padding-inline var(--actionLabelClip-duration) ease-out;\n }\n\n .Card--ctaVariant-arrow .Card__actionLabel {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n\n.Card--align-center .Card--ctaVariant-arrow .Card__action {\n justify-self: center;\n}\n\n.Card--ctaVariant-arrow:is(:hover, :focus-within) .Card__action--arrowOnly {\n column-gap: var(--base-size-8);\n padding-inline-start: var(--base-size-12);\n padding-inline-end: var(--base-size-4);\n border-color: var(--brand-color-border-default);\n background-color: var(--brand-Card-background-overlay);\n}\n\n.Card--ctaVariant-arrow:is(:hover, :focus-within) .Card__actionLabelClip {\n max-inline-size: 100%;\n opacity: 1;\n transform: translateX(0);\n margin-inline-start: calc(var(--base-size-12) * -1);\n margin-inline-end: 0;\n padding-inline-start: var(--base-size-12);\n padding-inline-end: var(--base-size-4);\n}\n\n.Card:is(:hover, :focus-within) .Card--expandableArrow {\n transform: translateX(var(--base-size-2));\n}\n\n.Card:is(:hover, :focus-within) .Card--expandableArrow path:nth-of-type(2) {\n stroke-dashoffset: 20;\n}\n\n.Card--disableAnimation,\n.Card--disableAnimation * {\n animation: none;\n transition: none;\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them /\n@media (prefers-reduced-motion: reduce) {\n .Card,\n .Card::before,\n .Card::after,\n .Card {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}

package/esm/index.esm.js CHANGED Viewed

@@ -53,28 +53,28 @@ import { OrderedList as kt } from "./list/OrderedList/OrderedList.js";
 import { CTAForm as At } from "./CTAForm/CTAForm.js";
 import { MinimalFooter as jt } from "./MinimalFooter/MinimalFooter.js";
 import { Pillar as Mt, defaultPillarIconColor as Nt, defaultPillarIconSize as Pt } from "./Pillar/Pillar.js";
-import { Card as Ft, CardBackgroundColors as It, CardCTAVariants as Lt, CardIconColors as Rt, CardImagePaddingOptions as zt, CardLabelVariants as Bt, CardTokenPositions as Vt, CardVariants as Ht, defaultCardCTAVariant as Ut, defaultCardIconColor as Wt, defaultCardLabelVariant as Gt } from "./Card/Card.js";
-import { CardSkewEffect as Kt } from "./Card/CardSkewEffect.js";
-import { SectionIntro as qt } from "./SectionIntro/SectionIntro.js";
-import { Prose as Jt } from "./Prose/Prose.js";
-import { useVideo as Yt } from "./VideoPlayer/hooks/useVideo.js";
-import { VideoPlayer as Xt } from "./VideoPlayer/VideoPlayer.js";
-import { LogoSuite as Zt } from "./LogoSuite/LogoSuite.js";
-import { Timeline as Qt } from "./Timeline/Timeline.js";
-import { Bento as $t } from "./Bento/Bento.js";
-import { EyebrowBanner as en, EyebrowBannerIconColors as tn, EyebrowBannerLabelColors as nn, defaultEyebrowBannerIconColor as rn } from "./EyebrowBanner/EyebrowBanner.js";
-import { Tooltip as an, TooltipContext as on } from "./Tooltip/Tooltip.js";
-import { PricingOptions as sn } from "./PricingOptions/PricingOptions.js";
-import { SubNav as cn, SubNavSubMenuVariants as ln, useSubNavContext as un } from "./SubNav/SubNav.js";
-import { NavList as dn } from "./NavList/NavList.js";
-import { IDE as fn, IDEDefaultIconMap as pn, IDEFileExtensions as mn } from "./IDE/IDE.js";
-import { BreadcrumbVariants as hn, Breadcrumbs as gn } from "./Breadcrumbs/Breadcrumbs.js";
-import { Section as _n, SectionBackgroundColors as vn, SectionPaddingVariants as yn } from "./Section/Section.js";
-import { Statistic as bn, StatisticSizes as xn, StatisticSpacingValues as Sn } from "./Statistic/Statistic.js";
-import { BreakoutBanner as Cn, BreakoutBannerBackgroundColors as wn } from "./BreakoutBanner/BreakoutBanner.js";
-import { Footnotes as Tn, FootnotesItemTags as En, FootnotesTags as Dn } from "./Footnotes/Footnotes.js";
-import { FrostedGlassVFX as On, FrostedGlassVFXIntensity as kn, defaultFrostedGlassVFXIntensity as An } from "./FrostedGlassVFX/FrostedGlassVFX.js";
-import { SectionIntroStacked as jn, SectionIntroStackedVariants as Mn } from "./SectionIntroStacked/SectionIntroStacked.js";
-import { Tabs as Nn } from "./Tabs/Tabs.js";
-import { Tiles as Pn } from "./Tiles/Tiles.js";
-export { Ze as Accordion, Qe as AccordionContent, $e as AccordionHeading, et as AccordionRoot, tt as AccordionToggleColors, ne as ActionMenu, re as ActionMenuButtonModes, ie as ActionMenuProvider, ae as ActionMenuSizes, Tt as AnchorNav, a as Animate, n as AnimationContext, r as AnimationProvider, i as AnimationVariants, ht as Avatar, gt as AvatarShapes, _t as AvatarSizes, $t as Bento, g as Box, _ as BoxBackgroundColors, v as BoxBorderColorOptions, y as BoxBorderRadiusOptions, b as BoxBorderWidthOptions, x as BoxSpacingValues, hn as BreadcrumbVariants, gn as Breadcrumbs, Cn as BreakoutBanner, wn as BreakoutBannerBackgroundColors, ze as BreakpointSize, K as Button, ce as ButtonGroup, q as ButtonSizes, J as ButtonVariants, Et as CTABanner, Dt as CTABannerBackgroundColors, At as CTAForm, Ft as Card, It as CardBackgroundColors, Lt as CardCTAVariants, Rt as CardIconColors, zt as CardImagePaddingOptions, Bt as CardLabelVariants, Kt as CardSkewEffect, Vt as CardTokenPositions, Ht as CardVariants, it as Checkbox, pt as CheckboxGroup, Q as ColorModesEnum, Ct as ComparisonTable, at as DEFAULT_TEXTAREA_COLS, ot as DEFAULT_TEXTAREA_RESIZE, st as DEFAULT_TEXTAREA_ROWS, en as EyebrowBanner, tn as EyebrowBannerIconColors, nn as EyebrowBannerLabelColors, M as EyebrowText, N as EyebrowTextVariants, nt as FAQ, rt as FAQGroup, Tn as Footnotes, En as FootnotesItemTags, Dn as FootnotesTags, ft as FormControl, On as FrostedGlassVFX, kn as FrostedGlassVFXIntensity, t as Grid, I as Heading, L as HeadingFontVariants, R as HeadingLetterSpacing, z as HeadingSizes, B as HeadingStretch, V as HeadingTags, H as HeadingWeights, de as Hero, fn as IDE, pn as IDEDefaultIconMap, mn as IDEFileExtensions, je as Icon, le as Image, ue as ImageBorderRadiusOptions, qe as InlineLink, ve as Label, ye as LabelColors, be as LabelSizes, me as Link, he as LinkArrowDirections, ge as LinkSizes, _e as LinkVariants, Zt as LogoSuite, We as MediaPlaylist, jt as MinimalFooter, dn as NavList, kt as OrderedList, Ue as Pagination, Mt as Pillar, sn as PricingOptions, Jt as Prose, dt as Radio, mt as RadioGroup, Ce as River, fe as RiverAccordion, pe as RiverAccordionVariants, ke as RiverBreakout, Ve as RiverBreakoutTabs, Ae as RiverBreakoutVariants, He as RiverStoryScroll, we as RiverVisualPaddingOptions, Te as RiverVisualPositionOptions, _n as Section, vn as SectionBackgroundColors, qt as SectionIntro, jn as SectionIntroStacked, Mn as SectionIntroStackedVariants, yn as SectionPaddingVariants, ut as Select, c as Stack, l as StackAlignItemVariants, u as StackDirectionVariants, d as StackFlexWrapVariants, f as StackJustifyContentVariants, p as StackSpacingVariants, bn as Statistic, xn as StatisticSizes, Sn as StatisticSpacingValues, cn as SubNav, ln as SubNavSubMenuVariants, Ke as SubdomainNavBar, Nn as Tabs, vt as Testimonial, yt as TestimonialQuoteMarkColors, bt as TestimonialVariants, S as Text, P as TextCursorAnimation, C as TextFontVariants, lt as TextInput, s as TextRevealAnimation, w as TextSizes, T as TextTags, E as TextVariants, D as TextWeights, ct as Textarea, $ as ThemeContext, ee as ThemeProvider, Pn as Tiles, Qt as Timeline, Je as Token, Ye as TokenVariants, an as Tooltip, on as TooltipContext, Ot as UnorderedList, Xt as VideoPlayer, Y as _Button, wt as _ComparisonTable, e as _GLOBAL_STYLES, oe as actionMenuOverlaySides, U as classMap, X as defaultButtonSize, Z as defaultButtonVariant, Ut as defaultCardCTAVariant, Wt as defaultCardIconColor, Gt as defaultCardLabelVariant, rn as defaultEyebrowBannerIconColor, O as defaultFontVariant, An as defaultFrostedGlassVFXIntensity, W as defaultHeadingFont, G as defaultHeadingTag, Me as defaultIconColor, Ne as defaultIconSize, xe as defaultLabelColor, Se as defaultLabelSize, Nt as defaultPillarIconColor, Pt as defaultPillarIconSize, xt as defaultQuoteMarkColor, Ee as defaultRiverAlign, De as defaultRiverImageTextRatio, Oe as defaultRiverVariant, m as defaultStackDirection, h as defaultStackSpacing, St as defaultTestimonialVariant, k as defaultTextSize, A as defaultTextTag, j as defaultTextVariant, Xe as defaultTokenVariant, Pe as iconColors, Fe as iconSizeMap, Ie as iconSizes, Le as namedIconSizes, Re as numericIconSizes, F as testIds, se as useActionMenuContext, o as useAnimation, Ge as useFocusTrap, un as useSubNavContext, te as useTheme, Yt as useVideo, Be as useWindowSize };
+import { Card as Ft, CardBackgroundColors as It, CardCTAVariants as Lt, CardIconColors as Rt, CardLabelVariants as zt, CardTokenPositions as Bt, CardVariants as Vt, defaultCardCTAVariant as Ht, defaultCardIconColor as Ut, defaultCardLabelVariant as Wt } from "./Card/Card.js";
+import { CardSkewEffect as Gt } from "./Card/CardSkewEffect.js";
+import { SectionIntro as Kt } from "./SectionIntro/SectionIntro.js";
+import { Prose as qt } from "./Prose/Prose.js";
+import { useVideo as Jt } from "./VideoPlayer/hooks/useVideo.js";
+import { VideoPlayer as Yt } from "./VideoPlayer/VideoPlayer.js";
+import { LogoSuite as Xt } from "./LogoSuite/LogoSuite.js";
+import { Timeline as Zt } from "./Timeline/Timeline.js";
+import { Bento as Qt } from "./Bento/Bento.js";
+import { EyebrowBanner as $t, EyebrowBannerIconColors as en, EyebrowBannerLabelColors as tn, defaultEyebrowBannerIconColor as nn } from "./EyebrowBanner/EyebrowBanner.js";
+import { Tooltip as rn, TooltipContext as an } from "./Tooltip/Tooltip.js";
+import { PricingOptions as on } from "./PricingOptions/PricingOptions.js";
+import { SubNav as sn, SubNavSubMenuVariants as cn, useSubNavContext as ln } from "./SubNav/SubNav.js";
+import { NavList as un } from "./NavList/NavList.js";
+import { IDE as dn, IDEDefaultIconMap as fn, IDEFileExtensions as pn } from "./IDE/IDE.js";
+import { BreadcrumbVariants as mn, Breadcrumbs as hn } from "./Breadcrumbs/Breadcrumbs.js";
+import { Section as gn, SectionBackgroundColors as _n, SectionPaddingVariants as vn } from "./Section/Section.js";
+import { Statistic as yn, StatisticSizes as bn, StatisticSpacingValues as xn } from "./Statistic/Statistic.js";
+import { BreakoutBanner as Sn, BreakoutBannerBackgroundColors as Cn } from "./BreakoutBanner/BreakoutBanner.js";
+import { Footnotes as wn, FootnotesItemTags as Tn, FootnotesTags as En } from "./Footnotes/Footnotes.js";
+import { FrostedGlassVFX as Dn, FrostedGlassVFXIntensity as On, defaultFrostedGlassVFXIntensity as kn } from "./FrostedGlassVFX/FrostedGlassVFX.js";
+import { SectionIntroStacked as An, SectionIntroStackedVariants as jn } from "./SectionIntroStacked/SectionIntroStacked.js";
+import { Tabs as Mn } from "./Tabs/Tabs.js";
+import { Tiles as Nn } from "./Tiles/Tiles.js";
+export { Ze as Accordion, Qe as AccordionContent, $e as AccordionHeading, et as AccordionRoot, tt as AccordionToggleColors, ne as ActionMenu, re as ActionMenuButtonModes, ie as ActionMenuProvider, ae as ActionMenuSizes, Tt as AnchorNav, a as Animate, n as AnimationContext, r as AnimationProvider, i as AnimationVariants, ht as Avatar, gt as AvatarShapes, _t as AvatarSizes, Qt as Bento, g as Box, _ as BoxBackgroundColors, v as BoxBorderColorOptions, y as BoxBorderRadiusOptions, b as BoxBorderWidthOptions, x as BoxSpacingValues, mn as BreadcrumbVariants, hn as Breadcrumbs, Sn as BreakoutBanner, Cn as BreakoutBannerBackgroundColors, ze as BreakpointSize, K as Button, ce as ButtonGroup, q as ButtonSizes, J as ButtonVariants, Et as CTABanner, Dt as CTABannerBackgroundColors, At as CTAForm, Ft as Card, It as CardBackgroundColors, Lt as CardCTAVariants, Rt as CardIconColors, zt as CardLabelVariants, Gt as CardSkewEffect, Bt as CardTokenPositions, Vt as CardVariants, it as Checkbox, pt as CheckboxGroup, Q as ColorModesEnum, Ct as ComparisonTable, at as DEFAULT_TEXTAREA_COLS, ot as DEFAULT_TEXTAREA_RESIZE, st as DEFAULT_TEXTAREA_ROWS, $t as EyebrowBanner, en as EyebrowBannerIconColors, tn as EyebrowBannerLabelColors, M as EyebrowText, N as EyebrowTextVariants, nt as FAQ, rt as FAQGroup, wn as Footnotes, Tn as FootnotesItemTags, En as FootnotesTags, ft as FormControl, Dn as FrostedGlassVFX, On as FrostedGlassVFXIntensity, t as Grid, I as Heading, L as HeadingFontVariants, R as HeadingLetterSpacing, z as HeadingSizes, B as HeadingStretch, V as HeadingTags, H as HeadingWeights, de as Hero, dn as IDE, fn as IDEDefaultIconMap, pn as IDEFileExtensions, je as Icon, le as Image, ue as ImageBorderRadiusOptions, qe as InlineLink, ve as Label, ye as LabelColors, be as LabelSizes, me as Link, he as LinkArrowDirections, ge as LinkSizes, _e as LinkVariants, Xt as LogoSuite, We as MediaPlaylist, jt as MinimalFooter, un as NavList, kt as OrderedList, Ue as Pagination, Mt as Pillar, on as PricingOptions, qt as Prose, dt as Radio, mt as RadioGroup, Ce as River, fe as RiverAccordion, pe as RiverAccordionVariants, ke as RiverBreakout, Ve as RiverBreakoutTabs, Ae as RiverBreakoutVariants, He as RiverStoryScroll, we as RiverVisualPaddingOptions, Te as RiverVisualPositionOptions, gn as Section, _n as SectionBackgroundColors, Kt as SectionIntro, An as SectionIntroStacked, jn as SectionIntroStackedVariants, vn as SectionPaddingVariants, ut as Select, c as Stack, l as StackAlignItemVariants, u as StackDirectionVariants, d as StackFlexWrapVariants, f as StackJustifyContentVariants, p as StackSpacingVariants, yn as Statistic, bn as StatisticSizes, xn as StatisticSpacingValues, sn as SubNav, cn as SubNavSubMenuVariants, Ke as SubdomainNavBar, Mn as Tabs, vt as Testimonial, yt as TestimonialQuoteMarkColors, bt as TestimonialVariants, S as Text, P as TextCursorAnimation, C as TextFontVariants, lt as TextInput, s as TextRevealAnimation, w as TextSizes, T as TextTags, E as TextVariants, D as TextWeights, ct as Textarea, $ as ThemeContext, ee as ThemeProvider, Nn as Tiles, Zt as Timeline, Je as Token, Ye as TokenVariants, rn as Tooltip, an as TooltipContext, Ot as UnorderedList, Yt as VideoPlayer, Y as _Button, wt as _ComparisonTable, e as _GLOBAL_STYLES, oe as actionMenuOverlaySides, U as classMap, X as defaultButtonSize, Z as defaultButtonVariant, Ht as defaultCardCTAVariant, Ut as defaultCardIconColor, Wt as defaultCardLabelVariant, nn as defaultEyebrowBannerIconColor, O as defaultFontVariant, kn as defaultFrostedGlassVFXIntensity, W as defaultHeadingFont, G as defaultHeadingTag, Me as defaultIconColor, Ne as defaultIconSize, xe as defaultLabelColor, Se as defaultLabelSize, Nt as defaultPillarIconColor, Pt as defaultPillarIconSize, xt as defaultQuoteMarkColor, Ee as defaultRiverAlign, De as defaultRiverImageTextRatio, Oe as defaultRiverVariant, m as defaultStackDirection, h as defaultStackSpacing, St as defaultTestimonialVariant, k as defaultTextSize, A as defaultTextTag, j as defaultTextVariant, Xe as defaultTokenVariant, Pe as iconColors, Fe as iconSizeMap, Ie as iconSizes, Le as namedIconSizes, Re as numericIconSizes, F as testIds, se as useActionMenuContext, o as useAnimation, Ge as useFocusTrap, ln as useSubNavContext, te as useTheme, Jt as useVideo, Be as useWindowSize };

package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/card/base-BRKNIzyd.css ADDED Viewed

	@@ -0,0 +1 @@
1	+ :root{--brand-Card-animation-easing:cubic-bezier(.01, .73, .08, .93);--brand-Card-animation-duration:.4s;--brand-Card-maxWidth:26.25rem}

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

@@ -12,7 +12,6 @@ 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";
@@ -22,7 +21,6 @@ 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;
 }>;
@@ -72,11 +70,10 @@ 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'>;
-export type CardImageProps = {
+type CardImageProps = {
     position?: 'block-start' | 'block-end';
-    padding?: CardImagePadding;
 } & ImageProps;
-declare function CardImage({ className, position, padding, ...rest }: CardImageProps): import("react/jsx-runtime").JSX.Element;
+declare function CardImage({ className, ...rest }: CardImageProps): import("react/jsx-runtime").JSX.Element;
 type CardIconProps = IconProps;
 type CardTokensProps = BaseProps<HTMLDivElement> & {
     children: React.ReactNode | React.ReactNode[];