npm - @primer/react-brand - Versions diffs - 0.68.0-rc.59bbed40 → 0.68.0-rc.5bd56cbb - Mend

@primer/react-brand 0.68.0-rc.59bbed40 → 0.68.0-rc.5bd56cbb

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

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

@@ -0,0 +1,27 @@
+import './CTABanner.module-BTMGYz51.css';var e = {
+	CTABanner: "Primer_Brand__CTABanner-module__CTABanner___osRag",
+	"CTABanner--shadow": "Primer_Brand__CTABanner-module__CTABanner--shadow___bUnyT",
+	"CTABanner-grid": "Primer_Brand__CTABanner-module__CTABanner-grid___Hm5rQ",
+	"CTABanner-grid-column--primary": "Primer_Brand__CTABanner-module__CTABanner-grid-column--primary___m1rvk",
+	"CTABanner-grid-column--secondary": "Primer_Brand__CTABanner-module__CTABanner-grid-column--secondary___C_Sft",
+	"CTABanner--variant-minimal": "Primer_Brand__CTABanner-module__CTABanner--variant-minimal___iWgoA",
+	"CTABanner--variant-balanced": "Primer_Brand__CTABanner-module__CTABanner--variant-balanced___C4a_5",
+	"CTABanner-outer-container--border": "Primer_Brand__CTABanner-module__CTABanner-outer-container--border___Rhoq4",
+	"CTABanner-container": "Primer_Brand__CTABanner-module__CTABanner-container___Tb9T1",
+	"CTABanner-content": "Primer_Brand__CTABanner-module__CTABanner-content___T0gW9",
+	"CTABanner-container--background": "Primer_Brand__CTABanner-module__CTABanner-container--background___p6ig8",
+	"CTABanner-container--border": "Primer_Brand__CTABanner-module__CTABanner-container--border___7xUNr",
+	"CTABanner-container--border-gridlines": "Primer_Brand__CTABanner-module__CTABanner-container--border-gridlines___aCdnk",
+	"CTABanner-content--center": "Primer_Brand__CTABanner-module__CTABanner-content--center___SCpf2",
+	"CTABanner-description": "Primer_Brand__CTABanner-module__CTABanner-description___pA_Hb",
+	"CTABanner-image": "Primer_Brand__CTABanner-module__CTABanner-image___Fsqin",
+	"CTABanner-logo": "Primer_Brand__CTABanner-module__CTABanner-logo___uysuX",
+	"CTABanner--variant-default": "Primer_Brand__CTABanner-module__CTABanner--variant-default___LX6Wi",
+	"CTABanner-link": "Primer_Brand__CTABanner-module__CTABanner-link___iY0Se",
+	"CTABanner-heading": "Primer_Brand__CTABanner-module__CTABanner-heading___tWytE",
+	"CTABanner--bgColor-default": "Primer_Brand__CTABanner-module__CTABanner--bgColor-default___HxU_W"
+};
+//#endregion
+export { e as default };
+//# sourceMappingURL=CTABanner.module.js.map

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

@@ -0,0 +1 @@

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

package/esm/CTABanner/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './CTABanner';
2	+ //# sourceMappingURL=index.d.ts.map

package/esm/CTABanner/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/CTABanner/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}

package/esm/CTAForm/CTAForm.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const CTAForm: React.ForwardRefExoticComponent<React.FormHTMLAttributes<HTMLFormElement> & React.RefAttributes<HTMLFormElement>> & {
+    Input: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Confirm: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Action: React.ForwardRefExoticComponent<Omit<Omit<import("../Button").ButtonProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+};
+//# sourceMappingURL=CTAForm.d.ts.map

package/esm/CTAForm/CTAForm.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"CTAForm.d.ts","sourceRoot":"","sources":["../../src/CTAForm/CTAForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAA;AAwEjD,eAAO,MAAM,OAAO;;;;CAA2E,CAAA"}

package/esm/CTAForm/CTAForm.js ADDED Viewed

@@ -0,0 +1,51 @@
+import e from "../node_modules/clsx/dist/clsx.js";
+import { Button as t } from "../Button/Button.js";
+import { FormControl as n } from "../forms/FormControl/FormControl.js";
+import r from "./CTAForm.module.js";
+import i, { forwardRef as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/CTAForm/CTAForm.tsx
+var s = a(({ className: t, ...n }, i) => /* @__PURE__ */ o("form", {
+	ref: i,
+	className: e(r.CTAForm, t),
+	...n
+})), c = a(({ className: t, children: a, ...s }, c) => {
+	let l = i.Children.toArray(a).map((e) => i.isValidElement(e) && e.type === n ? i.cloneElement(e, {
+		fullWidth: !0,
+		required: !0,
+		...e.props
+	}) : e);
+	return /* @__PURE__ */ o("div", {
+		ref: c,
+		className: e(r["CTAForm-input"], t),
+		...s,
+		children: l
+	});
+}), l = a(({ className: t, children: a, ...s }, c) => {
+	let l = i.Children.toArray(a).map((e) => i.isValidElement(e) && e.type === n ? i.cloneElement(e, {
+		fullWidth: !0,
+		size: "large",
+		...e.props
+	}) : e);
+	return /* @__PURE__ */ o("div", {
+		ref: c,
+		className: e(r["CTAForm-confirm"], t),
+		...s,
+		children: l
+	});
+}), u = a(({ className: n, children: i, ...a }, s) => /* @__PURE__ */ o(t, {
+	type: "submit",
+	variant: "secondary",
+	className: e(r["CTAForm-button"], n),
+	ref: s,
+	...a,
+	children: i
+})), d = Object.assign(s, {
+	Input: c,
+	Confirm: l,
+	Action: u
+});
+//#endregion
+export { d as CTAForm };
+//# sourceMappingURL=CTAForm.js.map

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

@@ -0,0 +1 @@

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

package/esm/CTAForm/CTAForm.module-Nf5sHaJq.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__CTAForm-module__CTAForm___f2NXs{grid-gap:var(--base-size-16);gap:var(--base-size-16);grid-template-columns:2fr auto;align-items:flex-end;display:grid}.Primer_Brand__CTAForm-module__CTAForm___f2NXs>*{grid-column:span 2;width:100%}.Primer_Brand__CTAForm-module__CTAForm-input___Jig33{order:1}.Primer_Brand__CTAForm-module__CTAForm-confirm___AqjVn{order:2;grid-column:span 2}.Primer_Brand__CTAForm-module__CTAForm-button___JyHUP{order:4}.Primer_Brand__CTAForm-module__CTAForm___f2NXs>:not(.Primer_Brand__CTAForm-module__CTAForm-input___Jig33):not(.Primer_Brand__CTAForm-module__CTAForm-button___JyHUP):not(.Primer_Brand__CTAForm-module__CTAForm-confirm___AqjVn){order:3;grid-column:span 2}@media screen and (width>=48rem){.Primer_Brand__CTAForm-module__CTAForm___f2NXs>*{grid-column:span 1}.Primer_Brand__CTAForm-module__CTAForm-confirm___AqjVn{order:3;grid-column:span 2}.Primer_Brand__CTAForm-module__CTAForm-button___JyHUP{order:2}.Primer_Brand__CTAForm-module__CTAForm___f2NXs>:not(.Primer_Brand__CTAForm-module__CTAForm-input___Jig33):not(.Primer_Brand__CTAForm-module__CTAForm-button___JyHUP):not(.Primer_Brand__CTAForm-module__CTAForm-confirm___AqjVn){order:4}}

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

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

package/esm/CTAForm/CTAForm.module.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CTAForm.module.js","names":[],"sources":["../../src/CTAForm/CTAForm.module.css"],"sourcesContent":[".CTAForm {\n display: grid;\n gap: var(--base-size-16);\n grid-template-columns: 2fr auto;\n align-items: flex-end;\n}\n\n.CTAForm > * {\n grid-column: span 2;\n width: 100%;\n}\n\n.CTAForm-input {\n order: 1;\n}\n\n.CTAForm-confirm {\n order: 2;\n grid-column: span 2;\n}\n\n.CTAForm-button {\n order: 4;\n}\n\n.CTAForm > *:not(.CTAForm-input, .CTAForm-button, .CTAForm-confirm) {\n order: 3;\n grid-column: span 2;\n}\n\n@media screen and (min-width: 48rem) {\n .CTAForm > * {\n grid-column: span 1;\n }\n\n .CTAForm-confirm {\n order: 3;\n grid-column: span 2;\n }\n\n .CTAForm-button {\n order: 2;\n }\n\n .CTAForm > *:not(.CTAForm-input, .CTAForm-button, .CTAForm-confirm) {\n order: 4;\n }\n}\n"],"mappings":""}

package/esm/CTAForm/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './CTAForm';
2	+ //# sourceMappingURL=index.d.ts.map

package/esm/CTAForm/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/CTAForm/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA"}

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

@@ -0,0 +1,107 @@
+import React from 'react';
+import { HeadingProps, type ImageProps } from '..';
+import { type IconProps } from '../Icon';
+import type { BaseProps } from '../component-helpers';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/base.css';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes.css';
+export declare const CardVariants: readonly ["default", "minimal"];
+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 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";
+export declare const defaultCardLabelVariant: "token";
+export type CardVariants = (typeof CardVariants)[number];
+export type CardCTAVariant = (typeof CardCTAVariants)[number];
+export type CardTokenPosition = (typeof CardTokenPositions)[number];
+export type CardLabelVariant = (typeof CardLabelVariants)[number];
+export type CardBackgroundColor = (typeof CardBackgroundColors)[number];
+type CardLeadingVisual = React.ReactElement | React.ComponentType<{
+    className?: string;
+}>;
+export type CardProps = {
+    /**
+     * Specify alternative card appearance
+     */
+    variant?: CardVariants;
+    /**
+     * Valid children include Card.Image, Card.Icon, Card.Label, Card.Tokens, Card.Heading, and Card.Description
+     */
+    children: React.ReactNode | React.ReactElement<CardImageProps> | React.ReactElement<CardIconProps> | React.ReactElement<CardLabelProps> | React.ReactElement<CardTokensProps> | React.ReactElement<CardHeadingProps> | React.ReactElement<CardDescriptionProps>;
+    /**
+     * Disable the default hover animation
+     */
+    disableAnimation?: boolean;
+    /**
+     * The href of the link
+     * */
+    href: string;
+    /**
+     * Changes the cta text of the card
+     * */
+    ctaText?: string;
+    /**
+     * Specifies the presentation of the call-to-action area
+     */
+    ctaVariant?: CardCTAVariant;
+    /**
+     * Optional, custom background color.
+     */
+    backgroundColor?: CardBackgroundColor;
+    /**
+     * A visual that appears before the heading, commonly used for a logo or brand mark
+     */
+    leadingVisual?: CardLeadingVisual;
+    /**
+     * Adds a border to the card.
+     */
+    hasBorder?: boolean;
+    /**
+     * Fills the width of the parent container and removes the default max-width.
+     */
+    fullWidth?: boolean;
+    /**
+     * Aligns the card content
+     */
+    align?: 'start' | 'center';
+} & Omit<BaseProps<HTMLDivElement>, 'animate'> & Omit<React.ComponentPropsWithoutRef<'div'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'> & Pick<React.ComponentPropsWithoutRef<'a'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'>;
+type CardImageProps = {
+    position?: 'block-start' | 'block-end';
+} & ImageProps;
+declare function CardImage({ className, ...rest }: CardImageProps): import("react/jsx-runtime").JSX.Element;
+type CardIconProps = IconProps;
+type CardTokensProps = BaseProps<HTMLDivElement> & {
+    children: React.ReactNode | React.ReactNode[];
+    position?: CardTokenPosition;
+};
+type CardLabelProps = Omit<BaseProps<HTMLSpanElement>, 'animate'> & Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> & {
+    children: React.ReactNode | React.ReactNode[];
+    variant?: CardLabelVariant;
+};
+type CardHeadingProps = BaseProps<HTMLHeadingElement> & {
+    children: React.ReactNode | React.ReactNode[];
+    as?: Exclude<HeadingProps['as'], 'h1'>;
+    href?: string;
+} & Omit<HeadingProps, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'> & React.ComponentPropsWithoutRef<'a'>;
+type CardDescriptionProps = BaseProps<HTMLParagraphElement> & {
+    children: React.ReactNode | React.ReactNode[];
+};
+/**
+ * Card component:
+ * {@link https://primer.style/brand/components/Card/ See usage examples}.
+ */
+export declare const Card: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
+    Image: typeof CardImage;
+    Icon: ({ className, hasBackground, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    Label: React.ForwardRefExoticComponent<Omit<CardLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Tokens: React.ForwardRefExoticComponent<Omit<CardTokensProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Heading: React.ForwardRefExoticComponent<Omit<CardHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<CardDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+};
+export {};
+//# sourceMappingURL=Card.d.ts.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"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"}

package/esm/Card/Card.js ADDED Viewed

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

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

@@ -0,0 +1 @@

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

package/esm/Card/Card.module-OxFQdnTA.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);transition:transform var(--brand-Card-animation-duration) var(--brand-Card-animation-easing);padding:var(--base-size-32);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}.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___txAQX:not(.Primer_Brand__Card-module__Card--disableAnimation___wZ9Jc):hover{transform:scale(1.025)}.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-20)}.Primer_Brand__Card-module__Card__description___6RhVF{grid-area:description;margin-block-end:var(--base-size-32)}.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:ellipsis;white-space:nowrap;min-inline-size:0;display:block;overflow:hidden}.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{--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;display:inline-flex;overflow:hidden}.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:fit-content;min-inline-size:0;max-inline-size:calc(100% - var(--Card-arrowAction-endInset));-moz-column-gap:0;padding-block:var(--base-size-4);border:var(--brand-borderWidth-thin) solid transparent;border-radius:var(--brand-borderRadius-full);transition:border-color .3s ease-out,background-color .3s ease-out,column-gap .3s ease-out,padding-inline .3s ease-out,-moz-column-gap .3s 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;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;flex-shrink:0;justify-content:flex-start;column-gap:0;margin-block-start:var(--base-size-20);padding-inline:0;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:not(.Primer_Brand__Card-module__Card--disableAnimation___wZ9Jc):hover{transform:none}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card__action___NKFQ0{justify-self:start;min-inline-size:0}.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}@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 ADDED Viewed

@@ -0,0 +1,41 @@
+import './Card.module-OxFQdnTA.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",
+	"Card--backgroundColor-subtle": "Primer_Brand__Card-module__Card--backgroundColor-subtle___0bVGO",
+	"Card--backgroundColor-none": "Primer_Brand__Card-module__Card--backgroundColor-none___GVX0n",
+	"Card--tokensPosition-block-end": "Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy",
+	"Card--imagePos-block-end": "Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_",
+	"Card--hasLeadingVisual": "Primer_Brand__Card-module__Card--hasLeadingVisual___M8XW4",
+	Card__image: "Primer_Brand__Card-module__Card__image___3J5wL",
+	"Card--maxWidth": "Primer_Brand__Card-module__Card--maxWidth___vGoIk",
+	"Card--fullWidth": "Primer_Brand__Card-module__Card--fullWidth___nh9Zq",
+	"Card--variant-minimal": "Primer_Brand__Card-module__Card--variant-minimal___V3m21",
+	"Card--ctaVariant-arrow": "Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH",
+	Card__link: "Primer_Brand__Card-module__Card__link___LyRm6",
+	Card__description: "Primer_Brand__Card-module__Card__description___6RhVF",
+	"Card--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__leadingVisual: "Primer_Brand__Card-module__Card__leadingVisual___l_R3_",
+	Card__leadingVisualItem: "Primer_Brand__Card-module__Card__leadingVisualItem___ICuuV",
+	Card__icon: "Primer_Brand__Card-module__Card__icon___gPD1k",
+	Card__tokens: "Primer_Brand__Card-module__Card__tokens___9L_4a",
+	"Card__tokens--position-block-end": "Primer_Brand__Card-module__Card__tokens--position-block-end___TL4R0",
+	Card__label: "Primer_Brand__Card-module__Card__label___q_cqg",
+	Card__heading: "Primer_Brand__Card-module__Card__heading___vdQlj",
+	Card__action: "Primer_Brand__Card-module__Card__action___NKFQ0",
+	Card__actionIcon: "Primer_Brand__Card-module__Card__actionIcon___KF4ar",
+	Card__actionLabel: "Primer_Brand__Card-module__Card__actionLabel____icG0",
+	Card__actionLabelClip: "Primer_Brand__Card-module__Card__actionLabelClip___kEth0",
+	"Card__action--arrowOnly": "Primer_Brand__Card-module__Card__action--arrowOnly___19e3M",
+	"Card__actionIcon--arrowOnly": "Primer_Brand__Card-module__Card__actionIcon--arrowOnly___vCck1",
+	"Card--skew": "Primer_Brand__Card-module__Card--skew___k2nMy",
+	Card__torch: "Primer_Brand__Card-module__Card__torch___hdUqp",
+	"Card__skew-bounding": "Primer_Brand__Card-module__Card__skew-bounding___g108S",
+	"Card--expandableArrow": "Primer_Brand__Card-module__Card--expandableArrow____CfmY"
+};
+//#endregion
+export { e as default };
+//# sourceMappingURL=Card.module.js.map

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

@@ -0,0 +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 transition: transform var(--brand-Card-animation-duration) var(--brand-Card-animation-easing);\n padding: var(--base-size-32);\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.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:not(.Card--disableAnimation):hover {\n transform: scale3d(1.025, 1.025, 1);\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-20);\n grid-area: heading;\n}\n\n.Card__description {\n margin-block-end: var(--base-size-32);\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: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\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 --actionLabelClip-duration: 400ms;\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 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--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: fit-content;\n min-inline-size: 0;\n max-inline-size: calc(100% - var(--Card-arrowAction-endInset));\n justify-content: flex-start;\n column-gap: 0;\n padding-block: var(--base-size-4);\n padding-inline: 0;\n border: var(--brand-borderWidth-thin) solid transparent;\n border-radius: var(--brand-borderRadius-full);\n background-color: transparent;\n flex-shrink: 0;\n overflow: hidden;\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__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:not(.Card--disableAnimation):hover {\n transform: none;\n}\n\n.Card--ctaVariant-arrow .Card__action {\n min-inline-size: 0;\n justify-self: start;\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/* 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/Card/CardSkewEffect.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import React, { PropsWithChildren } from 'react';
+import { BaseProps } from '../component-helpers';
+type CardSkewEffectProps = {
+    perspective?: number;
+    disableSkew?: boolean;
+} & BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>;
+export declare const CardSkewEffect: ({ color, children, className, perspective, disableSkew, ...rest }: PropsWithChildren<CardSkewEffectProps>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CardSkewEffect.d.ts.map

package/esm/Card/CardSkewEffect.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CardSkewEffect.d.ts","sourceRoot":"","sources":["../../src/Card/CardSkewEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAoB,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAIjE,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAI9C,KAAK,mBAAmB,GAAG;IACzB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,GAAG,SAAS,CAAC,cAAc,CAAC,GAC3B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAEtC,eAAO,MAAM,cAAc,GAAI,mEAO5B,iBAAiB,CAAC,mBAAmB,CAAC,4CAgExC,CAAA"}