@primer/react-brand 0.80.2-rc.93619886 → 0.81.0-rc.1b89e69c

package/docs/index.md

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.80.2-rc.93619886)
+# Primer Brand docs (v0.81.0-rc.1b89e69c)
 
-These docs are bundled with `@primer/react-brand@0.80.2-rc.93619886` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.81.0-rc.1b89e69c` 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/Avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD,eAAO,MAAM,WAAW,+BAAgC,CAAA;AACxD,eAAO,MAAM,YAAY,+BAAgC,CAAA;AAEzD,KAAK,kBAAkB,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAEtD,KAAK,iBAAiB,GAAG;IACvB,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B,IAAI,CAAC,EAAE,kBAAkB,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,SAAS,CAAC,gBAAgB,CAAC,GAAG;IACtD,IAAI,CAAC,EAAE,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,GAAG,iBAAiB,CAAA;IACvD,KAAK,CAAC,EAAE,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;IACrC,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAA;CACzB,GAAG,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAA;AAiC7C,eAAO,MAAM,MAAM;;;;;CAAoC,CAAA"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD,eAAO,MAAM,WAAW,+BAAgC,CAAA;AACxD,eAAO,MAAM,YAAY,+BAAgC,CAAA;AAEzD,KAAK,kBAAkB,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAEtD,KAAK,iBAAiB,GAAG;IACvB,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B,IAAI,CAAC,EAAE,kBAAkB,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,SAAS,CAAC,gBAAgB,CAAC,GAAG;IACtD,IAAI,CAAC,EAAE,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,GAAG,iBAAiB,CAAA;IACvD,KAAK,CAAC,EAAE,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;IACrC,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAA;CACzB,GAAG,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAA;AAuC7C,eAAO,MAAM,MAAM;;;;;CAAoC,CAAA"}

package/esm/Avatar/Avatar.js

@@ -17,10 +17,10 @@ var a = [
 }, c = n(({ alt: n, className: c, size: l = a[1], shape: u = o[0], "data-testid": d, src: f, ...p }, m) => {
 	let h = r(() => typeof l == "number" ? t[`Avatar--size-${l}`] : Object.keys(l).map((e) => t[`Avatar-${e}--size-${l[e]}`]).join(" "), [l]);
 	return /* @__PURE__ */ i("span", {
-		ref: m,
 		className: e(t.Avatar, h, t[`Avatar--shape-${u}`], c),
 		"data-testid": d || s.root,
 		children: /* @__PURE__ */ i("img", {
+			ref: m,
 			className: e(t.Avatar__image),
 			src: f,
 			alt: n,

package/esm/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":[],"sources":["../../src/Avatar/Avatar.tsx"],"sourcesContent":["import React, {forwardRef, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport styles from './Avatar.module.css'\n\nimport type {BaseProps} from '../component-helpers'\n\nexport const AvatarSizes = [32, 40, 48, 64, 80] as const\nexport const AvatarShapes = ['circle', 'square'] as const\n\ntype AvatarSizeVariants = (typeof AvatarSizes)[number]\n\ntype ResponsiveSizeMap = {\n  narrow?: AvatarSizeVariants\n  regular?: AvatarSizeVariants\n  wide?: AvatarSizeVariants\n}\n\nexport type AvatarProps = BaseProps<HTMLImageElement> & {\n  size?: (typeof AvatarSizes)[number] | ResponsiveSizeMap\n  shape?: (typeof AvatarShapes)[number]\n  src: string\n  alt: string\n  ['data-testid']?: string\n} & React.ImgHTMLAttributes<HTMLImageElement>\n\nconst testIds = {\n  root: 'Avatar',\n  get image() {\n    return `${this.root}__image`\n  },\n}\n\nconst _Avatar = forwardRef<HTMLImageElement, AvatarProps>(\n  ({alt, className, size = AvatarSizes[1], shape = AvatarShapes[0], 'data-testid': testId, src, ...props}, ref) => {\n    const sizeClass = useMemo(() => {\n      return typeof size === 'number'\n        ? styles[`Avatar--size-${size}`]\n        : Object.keys(size)\n            .map(viewport => {\n              return styles[`Avatar-${viewport}--size-${size[viewport]}`]\n            })\n            .join(' ')\n    }, [size])\n\n    return (\n      <span\n        ref={ref}\n        className={clsx(styles.Avatar, sizeClass, styles[`Avatar--shape-${shape}`], className)}\n        data-testid={testId || testIds.root}\n      >\n        <img className={clsx(styles.Avatar__image)} src={src} alt={alt} data-testid={testIds.image} {...props} />\n      </span>\n    )\n  },\n)\n\nexport const Avatar = Object.assign(_Avatar, {testIds})\n"],"mappings":";;;;;AAMA,IAAa,IAAc;CAAC;CAAI;CAAI;CAAI;CAAI;AAAE,GACjC,IAAe,CAAC,UAAU,QAAQ,GAkBzC,IAAU;CACd,MAAM;CACN,IAAI,QAAQ;EACV,OAAO,GAAG,KAAK,KAAK;CACtB;AACF,GAEM,IAAU,GACb,EAAC,QAAK,cAAW,UAAO,EAAY,IAAI,WAAQ,EAAa,IAAI,eAAe,GAAQ,QAAK,GAAG,KAAQ,MAAQ;CAC/G,IAAM,IAAY,QACT,OAAO,KAAS,WACnB,EAAO,gBAAgB,OACvB,OAAO,KAAK,CAAI,CAAC,CACd,KAAI,MACI,EAAO,UAAU,EAAS,SAAS,EAAK,KAChD,CAAC,CACD,KAAK,GAAG,GACd,CAAC,CAAI,CAAC;CAET,OACE,kBAAC,QAAD;EACO;EACL,WAAW,EAAK,EAAO,QAAQ,GAAW,EAAO,iBAAiB,MAAU,CAAS;EACrF,eAAa,KAAU,EAAQ;YAE/B,kBAAC,OAAD;GAAK,WAAW,EAAK,EAAO,aAAa;GAAQ;GAAU;GAAK,eAAa,EAAQ;GAAO,GAAI;EAAQ,CAAA;CACpG,CAAA;AAEV,CACF,GAEa,IAAS,OAAO,OAAO,GAAS,EAAC,WAAO,CAAC"}
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../src/Avatar/Avatar.tsx"],"sourcesContent":["import React, {forwardRef, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport styles from './Avatar.module.css'\n\nimport type {BaseProps} from '../component-helpers'\n\nexport const AvatarSizes = [32, 40, 48, 64, 80] as const\nexport const AvatarShapes = ['circle', 'square'] as const\n\ntype AvatarSizeVariants = (typeof AvatarSizes)[number]\n\ntype ResponsiveSizeMap = {\n  narrow?: AvatarSizeVariants\n  regular?: AvatarSizeVariants\n  wide?: AvatarSizeVariants\n}\n\nexport type AvatarProps = BaseProps<HTMLImageElement> & {\n  size?: (typeof AvatarSizes)[number] | ResponsiveSizeMap\n  shape?: (typeof AvatarShapes)[number]\n  src: string\n  alt: string\n  ['data-testid']?: string\n} & React.ImgHTMLAttributes<HTMLImageElement>\n\nconst testIds = {\n  root: 'Avatar',\n  get image() {\n    return `${this.root}__image`\n  },\n}\n\nconst _Avatar = forwardRef<HTMLImageElement, AvatarProps>(\n  ({alt, className, size = AvatarSizes[1], shape = AvatarShapes[0], 'data-testid': testId, src, ...props}, ref) => {\n    const sizeClass = useMemo(() => {\n      return typeof size === 'number'\n        ? styles[`Avatar--size-${size}`]\n        : Object.keys(size)\n            .map(viewport => {\n              return styles[`Avatar-${viewport}--size-${size[viewport]}`]\n            })\n            .join(' ')\n    }, [size])\n\n    return (\n      <span\n        className={clsx(styles.Avatar, sizeClass, styles[`Avatar--shape-${shape}`], className)}\n        data-testid={testId || testIds.root}\n      >\n        <img\n          ref={ref}\n          className={clsx(styles.Avatar__image)}\n          src={src}\n          alt={alt}\n          data-testid={testIds.image}\n          {...props}\n        />\n      </span>\n    )\n  },\n)\n\nexport const Avatar = Object.assign(_Avatar, {testIds})\n"],"mappings":";;;;;AAMA,IAAa,IAAc;CAAC;CAAI;CAAI;CAAI;CAAI;AAAE,GACjC,IAAe,CAAC,UAAU,QAAQ,GAkBzC,IAAU;CACd,MAAM;CACN,IAAI,QAAQ;EACV,OAAO,GAAG,KAAK,KAAK;CACtB;AACF,GAEM,IAAU,GACb,EAAC,QAAK,cAAW,UAAO,EAAY,IAAI,WAAQ,EAAa,IAAI,eAAe,GAAQ,QAAK,GAAG,KAAQ,MAAQ;CAC/G,IAAM,IAAY,QACT,OAAO,KAAS,WACnB,EAAO,gBAAgB,OACvB,OAAO,KAAK,CAAI,CAAC,CACd,KAAI,MACI,EAAO,UAAU,EAAS,SAAS,EAAK,KAChD,CAAC,CACD,KAAK,GAAG,GACd,CAAC,CAAI,CAAC;CAET,OACE,kBAAC,QAAD;EACE,WAAW,EAAK,EAAO,QAAQ,GAAW,EAAO,iBAAiB,MAAU,CAAS;EACrF,eAAa,KAAU,EAAQ;YAE/B,kBAAC,OAAD;GACO;GACL,WAAW,EAAK,EAAO,aAAa;GAC/B;GACA;GACL,eAAa,EAAQ;GACrB,GAAI;EACL,CAAA;CACG,CAAA;AAEV,CACF,GAEa,IAAS,OAAO,OAAO,GAAS,EAAC,WAAO,CAAC"}

package/esm/Link/Link.d.ts

@@ -21,9 +21,22 @@ export type LinkProps = {
      */
     variant?: (typeof LinkVariants)[number];
 } & React.ComponentPropsWithoutRef<'a'>;
-/**
- * Links connect users to related content.
- * These are not intended to be used as a call-to-action.
- */
-export declare function Link({ size, variant, className, children, isExternal, onMouseEnter, onMouseLeave, onFocus, onBlur, arrowDirection, ...props }: LinkProps): React.JSX.Element;
+export declare const Link: React.ForwardRefExoticComponent<{
+    /**
+     * The size variations available in Link
+     */
+    size?: (typeof LinkSizes)[number];
+    /**
+     * Position of the arrow.
+     */
+    arrowDirection?: (typeof LinkArrowDirections)[number];
+    /**
+     * Show an external link icon
+     */
+    isExternal?: boolean;
+    /**
+     * Specify alternative link appearance
+     */
+    variant?: (typeof LinkVariants)[number];
+} & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 //# sourceMappingURL=Link.d.ts.map

package/esm/Link/Link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAMxC,OAAO,wGAAwG,CAAA;AAE/G,eAAO,MAAM,YAAY,gCAAiC,CAAA;AAC1D,eAAO,MAAM,SAAS,uCAAwC,CAAA;AAC9D,eAAO,MAAM,mBAAmB,mCAAoC,CAAA;AAcpE,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;IACjC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;IACrD;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;CACxC,GAAG,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAA;AAEvC;;;GAGG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAe,EACf,OAAmB,EACnB,SAAS,EACT,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,cAAsB,EACtB,GAAG,KAAK,EACT,EAAE,SAAS,qBAkEX"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgC,MAAM,OAAO,CAAA;AAMpD,OAAO,wGAAwG,CAAA;AAE/G,eAAO,MAAM,YAAY,gCAAiC,CAAA;AAC1D,eAAO,MAAM,SAAS,uCAAwC,CAAA;AAC9D,eAAO,MAAM,mBAAmB,mCAAoC,CAAA;AAcpE,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;IACjC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;IACrD;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;CACxC,GAAG,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAA;AA0FvC,eAAO,MAAM,IAAI;IA1Gf;;OAEG;WACI,CAAC,OAAO,SAAS,EAAE,MAAM,CAAC;IACjC;;OAEG;qBACc,CAAC,OAAO,mBAAmB,EAAE,MAAM,CAAC;IACrD;;OAEG;iBACU,OAAO;IACpB;;OAEG;cACO,CAAC,OAAO,YAAY,EAAE,MAAM,CAAC;oJA2FD,CAAA"}

package/esm/Link/Link.js

@@ -4,69 +4,71 @@ import { ExpandableArrow as n } from "../ExpandableArrow/ExpandableArrow.js";
 import { LinkExternalIcon as r } from "../node_modules/@primer/octicons-react/dist/icons/LinkExternalIcon.js";
 import i from "./Link.module.js";
 import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/link/colors-with-modes-JvDrymoz.css';/* empty css                                                                                                  */
-import a, { useCallback as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import a, { forwardRef as o, useCallback as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/Link/Link.tsx
-var l = ["default", "accent"], u = [
+var u = ["default", "accent"], d = [
 	"small",
 	"medium",
 	"large"
-], d = [
+], f = [
 	"start",
 	"end",
 	"none"
-], f = {
+], p = {
 	small: "100",
 	medium: "200",
 	large: "300"
-}, p = {
+}, m = {
 	small: 16,
 	medium: 16,
 	large: 20
 };
-function m({ size: l = "medium", variant: u = "default", className: d, children: m, isExternal: h, onMouseEnter: g, onMouseLeave: _, onFocus: v, onBlur: y, arrowDirection: b = "end", ...x }) {
-	let [S, C] = a.useState(!1), [w, T] = a.useState(!1), E = o((e) => {
-		C(!S), g?.(e);
-	}, [g, S]), D = o((e) => {
-		C(!S), _?.(e);
-	}, [_, S]), O = o((e) => {
-		T(!w), v?.(e);
-	}, [v, w]), k = o((e) => {
-		T(!w), y?.(e);
-	}, [y, w]);
-	return /* @__PURE__ */ c("a", {
-		className: e(i.Link, i[`Link--${l}`], i[`Link--${u}`], h ? i["Link--is-external"] : i[`Link--arrow-${b}`], d),
-		onMouseEnter: E,
-		onMouseLeave: D,
-		onFocus: O,
-		onBlur: k,
+function h({ size: o = "medium", variant: u = "default", className: d, children: f, isExternal: h, onMouseEnter: g, onMouseLeave: _, onFocus: v, onBlur: y, arrowDirection: b = "end", ...x }, S) {
+	let [C, w] = a.useState(!1), [T, E] = a.useState(!1), D = s((e) => {
+		w(!C), g?.(e);
+	}, [g, C]), O = s((e) => {
+		w(!C), _?.(e);
+	}, [_, C]), k = s((e) => {
+		E(!T), v?.(e);
+	}, [v, T]), A = s((e) => {
+		E(!T), y?.(e);
+	}, [y, T]);
+	return /* @__PURE__ */ l("a", {
+		ref: S,
+		className: e(i.Link, i[`Link--${o}`], i[`Link--${u}`], h ? i["Link--is-external"] : i[`Link--arrow-${b}`], d),
+		onMouseEnter: D,
+		onMouseLeave: O,
+		onFocus: k,
+		onBlur: A,
 		...x,
 		children: [
-			b === "start" && !h && /* @__PURE__ */ s(n, {
+			b === "start" && !h && /* @__PURE__ */ c(n, {
 				className: i["Link-arrow"],
-				expanded: S || w,
+				expanded: C || T,
 				reverse: !0,
 				hidden: !0
 			}),
-			/* @__PURE__ */ s(t, {
+			/* @__PURE__ */ c(t, {
 				as: "span",
-				size: f[l],
+				size: p[o],
 				className: e(i["Link--label"]),
-				children: m
+				children: f
 			}),
-			b === "end" && !h && /* @__PURE__ */ s(n, {
+			b === "end" && !h && /* @__PURE__ */ c(n, {
 				className: i["Link-arrow"],
-				expanded: S || w,
+				expanded: C || T,
 				hidden: !0
 			}),
-			h && /* @__PURE__ */ s(r, {
-				size: p[l],
+			h && /* @__PURE__ */ c(r, {
+				size: m[o],
 				"aria-label": "External link"
 			})
 		]
 	});
 }
+var g = o(h);
 //#endregion
-export { m as Link, d as LinkArrowDirections, u as LinkSizes, l as LinkVariants };
+export { g as Link, f as LinkArrowDirections, d as LinkSizes, u as LinkVariants };
 
 //# sourceMappingURL=Link.js.map

package/esm/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","names":[],"sources":["../../src/Link/Link.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {useCallback} from 'react'\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport {LinkExternalIcon} from '@primer/octicons-react'\nimport {Text} from '../Text'\n\nimport styles from './Link.module.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/link/colors-with-modes.css'\n\nexport const LinkVariants = ['default', 'accent'] as const\nexport const LinkSizes = ['small', 'medium', 'large'] as const\nexport const LinkArrowDirections = ['start', 'end', 'none'] as const\n\nconst LinkTextSizes = {\n  small: '100',\n  medium: '200',\n  large: '300',\n} as const\n\nconst LinkExternalIconSizes = {\n  small: 16,\n  medium: 16,\n  large: 20,\n} as const\n\nexport type LinkProps = {\n  /**\n   * The size variations available in Link\n   */\n  size?: (typeof LinkSizes)[number]\n  /**\n   * Position of the arrow.\n   */\n  arrowDirection?: (typeof LinkArrowDirections)[number]\n  /**\n   * Show an external link icon\n   */\n  isExternal?: boolean\n  /**\n   * Specify alternative link appearance\n   */\n  variant?: (typeof LinkVariants)[number]\n} & React.ComponentPropsWithoutRef<'a'>\n\n/**\n * Links connect users to related content.\n * These are not intended to be used as a call-to-action.\n */\nexport function Link({\n  size = 'medium',\n  variant = 'default',\n  className,\n  children,\n  isExternal,\n  onMouseEnter,\n  onMouseLeave,\n  onFocus,\n  onBlur,\n  arrowDirection = 'end',\n  ...props\n}: LinkProps) {\n  const [isHovered, setIsHovered] = React.useState(false)\n  const [isFocused, setIsFocused] = React.useState(false)\n\n  const handleMouseEnter = useCallback(\n    (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n      setIsHovered(!isHovered)\n      onMouseEnter?.(event)\n    },\n    [onMouseEnter, isHovered],\n  )\n\n  const handleMouseLeave = useCallback(\n    (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n      setIsHovered(!isHovered)\n      onMouseLeave?.(event)\n    },\n    [onMouseLeave, isHovered],\n  )\n\n  const handleOnFocus = useCallback(\n    (event: React.FocusEvent<HTMLAnchorElement, Element>) => {\n      setIsFocused(!isFocused)\n      onFocus?.(event)\n    },\n    [onFocus, isFocused],\n  )\n\n  const handleOnBlur = useCallback(\n    (event: React.FocusEvent<HTMLAnchorElement, Element>) => {\n      setIsFocused(!isFocused)\n      onBlur?.(event)\n    },\n    [onBlur, isFocused],\n  )\n\n  return (\n    <a\n      className={clsx(\n        styles.Link,\n        styles[`Link--${size}`],\n        styles[`Link--${variant}`],\n        isExternal ? styles['Link--is-external'] : styles[`Link--arrow-${arrowDirection}`],\n        className,\n      )}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onFocus={handleOnFocus}\n      onBlur={handleOnBlur}\n      {...props}\n    >\n      {arrowDirection === 'start' && !isExternal && (\n        <ExpandableArrow className={styles['Link-arrow']} expanded={isHovered || isFocused} reverse hidden />\n      )}\n\n      <Text as=\"span\" size={LinkTextSizes[size]} className={clsx(styles['Link--label'])}>\n        {children}\n      </Text>\n\n      {arrowDirection === 'end' && !isExternal && (\n        <ExpandableArrow className={styles['Link-arrow']} expanded={isHovered || isFocused} hidden />\n      )}\n\n      {isExternal && <LinkExternalIcon size={LinkExternalIconSizes[size]} aria-label=\"External link\" />}\n    </a>\n  )\n}\n"],"mappings":";;;;;;;;;AASA,IAAa,IAAe,CAAC,WAAW,QAAQ,GACnC,IAAY;CAAC;CAAS;CAAU;AAAO,GACvC,IAAsB;CAAC;CAAS;CAAO;AAAM,GAEpD,IAAgB;CACpB,OAAO;CACP,QAAQ;CACR,OAAO;AACT,GAEM,IAAwB;CAC5B,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAyBA,SAAgB,EAAK,EACnB,UAAO,UACP,aAAU,WACV,cACA,aACA,eACA,iBACA,iBACA,YACA,WACA,oBAAiB,OACjB,GAAG,KACS;CACZ,IAAM,CAAC,GAAW,KAAgB,EAAM,SAAS,EAAK,GAChD,CAAC,GAAW,KAAgB,EAAM,SAAS,EAAK,GAEhD,IAAmB,GACtB,MAA2D;EAE1D,AADA,EAAa,CAAC,CAAS,GACvB,IAAe,CAAK;CACtB,GACA,CAAC,GAAc,CAAS,CAC1B,GAEM,IAAmB,GACtB,MAA2D;EAE1D,AADA,EAAa,CAAC,CAAS,GACvB,IAAe,CAAK;CACtB,GACA,CAAC,GAAc,CAAS,CAC1B,GAEM,IAAgB,GACnB,MAAwD;EAEvD,AADA,EAAa,CAAC,CAAS,GACvB,IAAU,CAAK;CACjB,GACA,CAAC,GAAS,CAAS,CACrB,GAEM,IAAe,GAClB,MAAwD;EAEvD,AADA,EAAa,CAAC,CAAS,GACvB,IAAS,CAAK;CAChB,GACA,CAAC,GAAQ,CAAS,CACpB;CAEA,OACE,kBAAC,KAAD;EACE,WAAW,EACT,EAAO,MACP,EAAO,SAAS,MAChB,EAAO,SAAS,MAChB,IAAa,EAAO,uBAAuB,EAAO,eAAe,MACjE,CACF;EACA,cAAc;EACd,cAAc;EACd,SAAS;EACT,QAAQ;EACR,GAAI;YAZN;GAcG,MAAmB,WAAW,CAAC,KAC9B,kBAAC,GAAD;IAAiB,WAAW,EAAO;IAAe,UAAU,KAAa;IAAW,SAAA;IAAQ,QAAA;GAAQ,CAAA;GAGtG,kBAAC,GAAD;IAAM,IAAG;IAAO,MAAM,EAAc;IAAO,WAAW,EAAK,EAAO,cAAc;IAC7E;GACG,CAAA;GAEL,MAAmB,SAAS,CAAC,KAC5B,kBAAC,GAAD;IAAiB,WAAW,EAAO;IAAe,UAAU,KAAa;IAAW,QAAA;GAAQ,CAAA;GAG7F,KAAc,kBAAC,GAAD;IAAkB,MAAM,EAAsB;IAAO,cAAW;GAAiB,CAAA;EAC/F;;AAEP"}
+{"version":3,"file":"Link.js","names":[],"sources":["../../src/Link/Link.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, useCallback} from 'react'\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport {LinkExternalIcon} from '@primer/octicons-react'\nimport {Text} from '../Text'\n\nimport styles from './Link.module.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/link/colors-with-modes.css'\n\nexport const LinkVariants = ['default', 'accent'] as const\nexport const LinkSizes = ['small', 'medium', 'large'] as const\nexport const LinkArrowDirections = ['start', 'end', 'none'] as const\n\nconst LinkTextSizes = {\n  small: '100',\n  medium: '200',\n  large: '300',\n} as const\n\nconst LinkExternalIconSizes = {\n  small: 16,\n  medium: 16,\n  large: 20,\n} as const\n\nexport type LinkProps = {\n  /**\n   * The size variations available in Link\n   */\n  size?: (typeof LinkSizes)[number]\n  /**\n   * Position of the arrow.\n   */\n  arrowDirection?: (typeof LinkArrowDirections)[number]\n  /**\n   * Show an external link icon\n   */\n  isExternal?: boolean\n  /**\n   * Specify alternative link appearance\n   */\n  variant?: (typeof LinkVariants)[number]\n} & React.ComponentPropsWithoutRef<'a'>\n\n/**\n * Links connect users to related content.\n * These are not intended to be used as a call-to-action.\n */\nfunction LinkBase(\n  {\n    size = 'medium',\n    variant = 'default',\n    className,\n    children,\n    isExternal,\n    onMouseEnter,\n    onMouseLeave,\n    onFocus,\n    onBlur,\n    arrowDirection = 'end',\n    ...props\n  }: LinkProps,\n  ref: React.ForwardedRef<HTMLAnchorElement>,\n) {\n  const [isHovered, setIsHovered] = React.useState(false)\n  const [isFocused, setIsFocused] = React.useState(false)\n\n  const handleMouseEnter = useCallback(\n    (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n      setIsHovered(!isHovered)\n      onMouseEnter?.(event)\n    },\n    [onMouseEnter, isHovered],\n  )\n\n  const handleMouseLeave = useCallback(\n    (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n      setIsHovered(!isHovered)\n      onMouseLeave?.(event)\n    },\n    [onMouseLeave, isHovered],\n  )\n\n  const handleOnFocus = useCallback(\n    (event: React.FocusEvent<HTMLAnchorElement, Element>) => {\n      setIsFocused(!isFocused)\n      onFocus?.(event)\n    },\n    [onFocus, isFocused],\n  )\n\n  const handleOnBlur = useCallback(\n    (event: React.FocusEvent<HTMLAnchorElement, Element>) => {\n      setIsFocused(!isFocused)\n      onBlur?.(event)\n    },\n    [onBlur, isFocused],\n  )\n\n  return (\n    <a\n      ref={ref}\n      className={clsx(\n        styles.Link,\n        styles[`Link--${size}`],\n        styles[`Link--${variant}`],\n        isExternal ? styles['Link--is-external'] : styles[`Link--arrow-${arrowDirection}`],\n        className,\n      )}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onFocus={handleOnFocus}\n      onBlur={handleOnBlur}\n      {...props}\n    >\n      {arrowDirection === 'start' && !isExternal && (\n        <ExpandableArrow className={styles['Link-arrow']} expanded={isHovered || isFocused} reverse hidden />\n      )}\n\n      <Text as=\"span\" size={LinkTextSizes[size]} className={clsx(styles['Link--label'])}>\n        {children}\n      </Text>\n\n      {arrowDirection === 'end' && !isExternal && (\n        <ExpandableArrow className={styles['Link-arrow']} expanded={isHovered || isFocused} hidden />\n      )}\n\n      {isExternal && <LinkExternalIcon size={LinkExternalIconSizes[size]} aria-label=\"External link\" />}\n    </a>\n  )\n}\n\nexport const Link = forwardRef(LinkBase)\n"],"mappings":";;;;;;;;;AASA,IAAa,IAAe,CAAC,WAAW,QAAQ,GACnC,IAAY;CAAC;CAAS;CAAU;AAAO,GACvC,IAAsB;CAAC;CAAS;CAAO;AAAM,GAEpD,IAAgB;CACpB,OAAO;CACP,QAAQ;CACR,OAAO;AACT,GAEM,IAAwB;CAC5B,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAyBA,SAAS,EACP,EACE,UAAO,UACP,aAAU,WACV,cACA,aACA,eACA,iBACA,iBACA,YACA,WACA,oBAAiB,OACjB,GAAG,KAEL,GACA;CACA,IAAM,CAAC,GAAW,KAAgB,EAAM,SAAS,EAAK,GAChD,CAAC,GAAW,KAAgB,EAAM,SAAS,EAAK,GAEhD,IAAmB,GACtB,MAA2D;EAE1D,AADA,EAAa,CAAC,CAAS,GACvB,IAAe,CAAK;CACtB,GACA,CAAC,GAAc,CAAS,CAC1B,GAEM,IAAmB,GACtB,MAA2D;EAE1D,AADA,EAAa,CAAC,CAAS,GACvB,IAAe,CAAK;CACtB,GACA,CAAC,GAAc,CAAS,CAC1B,GAEM,IAAgB,GACnB,MAAwD;EAEvD,AADA,EAAa,CAAC,CAAS,GACvB,IAAU,CAAK;CACjB,GACA,CAAC,GAAS,CAAS,CACrB,GAEM,IAAe,GAClB,MAAwD;EAEvD,AADA,EAAa,CAAC,CAAS,GACvB,IAAS,CAAK;CAChB,GACA,CAAC,GAAQ,CAAS,CACpB;CAEA,OACE,kBAAC,KAAD;EACO;EACL,WAAW,EACT,EAAO,MACP,EAAO,SAAS,MAChB,EAAO,SAAS,MAChB,IAAa,EAAO,uBAAuB,EAAO,eAAe,MACjE,CACF;EACA,cAAc;EACd,cAAc;EACd,SAAS;EACT,QAAQ;EACR,GAAI;YAbN;GAeG,MAAmB,WAAW,CAAC,KAC9B,kBAAC,GAAD;IAAiB,WAAW,EAAO;IAAe,UAAU,KAAa;IAAW,SAAA;IAAQ,QAAA;GAAQ,CAAA;GAGtG,kBAAC,GAAD;IAAM,IAAG;IAAO,MAAM,EAAc;IAAO,WAAW,EAAK,EAAO,cAAc;IAC7E;GACG,CAAA;GAEL,MAAmB,SAAS,CAAC,KAC5B,kBAAC,GAAD;IAAiB,WAAW,EAAO;IAAe,UAAU,KAAa;IAAW,QAAA;GAAQ,CAAA;GAG7F,KAAc,kBAAC,GAAD;IAAkB,MAAM,EAAsB;IAAO,cAAW;GAAiB,CAAA;EAC/F;;AAEP;AAEA,IAAa,IAAO,EAAW,CAAQ"}

package/esm/Testimonial/Testimonial.d.ts

@@ -1,6 +1,9 @@
 import React, { HTMLAttributes, SVGProps } from 'react';
 import { BaseProps } from '../component-helpers';
 import type { AvatarProps } from '../';
+/**
+ * Design tokens
+ */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/testimonial/base.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/testimonial/colors-with-modes.css';
 type TestimonialSize = 'small' | 'large';
@@ -11,7 +14,7 @@ type TestimonialVariant = (typeof TestimonialVariants)[number];
 export declare const defaultTestimonialVariant: TestimonialVariant;
 export type TestimonialProps = {
     /**
-     * Sets alternative appearance for the testimonial
+     * Sets alternative visual appearance
      */
     variant?: TestimonialVariant;
     /**
@@ -19,9 +22,9 @@ export type TestimonialProps = {
      */
     hasBorder?: boolean;
     /**
-     * Valid children include Testimonial.Name, Testimonial.Avatar, and Testimonial.Name
+     * Valid children
      */
-    children: React.ReactNode | React.ReactElement<QuoteProps> | React.ReactElement<NameProps> | React.ReactElement<AvatarProps> | React.ReactElement<LogoProps>[];
+    children: React.ReactNode;
     /**
      * Sets the testimonial text size
      */
@@ -32,46 +35,48 @@ export type TestimonialProps = {
     quoteMarkClassName?: string;
     /** Class applied to the attribution wrapper. */
     mediaClassName?: string;
+    ['data-testid']?: string;
 } & BaseProps<HTMLElement> & React.HTMLAttributes<HTMLElement>;
 /**
  * Testimonial quote child element
  * <Testimonial.Quote>
  */
-type QuoteProps = React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement>;
+type TestimonialQuoteProps = React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement>;
 /**
  * Testimonial name child element
  * <Testimonial.Name>
  */
-type NameProps = {
+type TestimonialNameProps = {
     position?: string;
 } & React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement>;
 /**
  * Testimonial logo child element
  * <Testimonial.Logo>
  */
-type LogoProps = {
+type TestimonialLogoProps = {
     children: React.ReactElement<SVGProps<SVGSVGElement>> | React.ReactElement<HTMLAttributes<HTMLImageElement>>;
 } & React.HTMLAttributes<HTMLImageElement> & BaseProps<HTMLImageElement>;
-/**
- * Testimonial avatar child element
- * <Testimonial.Avatar>
- */
-declare function _Avatar({ size, className, ...rest }: AvatarProps): React.JSX.Element;
 /**
  * Use Testimonial to display a quote from a customer or user.
  * @see https://primer.style/brand/components/Testimonial
  */
-export declare const Testimonial: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<TestimonialProps>, "ref"> & React.RefAttributes<unknown>> & {
-    Quote: React.ForwardRefExoticComponent<Omit<QuoteProps, "ref"> & React.RefAttributes<unknown>>;
-    Name: React.ForwardRefExoticComponent<Omit<NameProps, "ref"> & React.RefAttributes<unknown>>;
-    Avatar: typeof _Avatar;
-    Logo: React.ForwardRefExoticComponent<Omit<LogoProps, "ref"> & React.RefAttributes<unknown>>;
+export declare const Testimonial: React.ForwardRefExoticComponent<Omit<TestimonialProps, "ref"> & React.RefAttributes<HTMLElement>> & {
+    Quote: React.ForwardRefExoticComponent<Omit<TestimonialQuoteProps, "ref"> & React.RefAttributes<HTMLElement>>;
+    Name: React.ForwardRefExoticComponent<Omit<TestimonialNameProps, "ref"> & React.RefAttributes<HTMLElement>>;
+    Avatar: React.ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
+    Logo: React.ForwardRefExoticComponent<Omit<TestimonialLogoProps, "ref"> & React.RefAttributes<unknown>>;
     Link: React.ForwardRefExoticComponent<{
         size?: typeof import("../Link").LinkSizes[number];
         arrowDirection?: typeof import("../Link").LinkArrowDirections[number];
         isExternal?: boolean;
         variant?: typeof import("../Link").LinkVariants[number];
-    } & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & React.RefAttributes<unknown>>;
+    } & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+    testIds: {
+        root: string;
+        readonly quoteMark: string;
+        readonly quoteWrapper: string;
+        readonly media: string;
+    };
 };
 export {};
 //# sourceMappingURL=Testimonial.d.ts.map

package/esm/Testimonial/Testimonial.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Testimonial.d.ts","sourceRoot":"","sources":["../../src/Testimonial/Testimonial.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,EAGd,QAAQ,EAGT,MAAM,OAAO,CAAA;AAEd,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAE9C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,KAAK,CAAA;AAIpC,OAAO,kGAAkG,CAAA;AACzG,OAAO,+GAA+G,CAAA;AAKtH,KAAK,eAAe,GAAG,OAAO,GAAG,OAAO,CAAA;AAExC,eAAO,MAAM,0BAA0B,wIAAuB,CAAA;AAC9D,eAAO,MAAM,qBAAqB,UAAU,CAAA;AAE5C,eAAO,MAAM,mBAAmB,yDAA0D,CAAA;AAC1F,KAAK,kBAAkB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC9D,eAAO,MAAM,yBAAyB,EAAE,kBAA8B,CAAA;AAEtE,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,QAAQ,EACJ,KAAK,CAAC,SAAS,GACf,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,GAC9B,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,GAC7B,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,GAC/B,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,CAAA;IACnC;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,uCAAuC;IACvC,cAAc,CAAC,EAAE,CAAC,OAAO,0BAA0B,CAAC,CAAC,MAAM,CAAC,CAAA;IAC5D,uCAAuC;IACvC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,gDAAgD;IAChD,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,GAAG,SAAS,CAAC,WAAW,CAAC,GACxB,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAmGnC;;;GAGG;AACH,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC,WAAW,CAAC,CAAA;AAY5E;;;GAGG;AACH,KAAK,SAAS,GAAG;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GACnC,SAAS,CAAC,WAAW,CAAC,CAAA;AAmBxB;;;GAGG;AACH,KAAK,SAAS,GAAG;IACf,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAA;CAC7G,GAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GACxC,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAwB7B;;;GAGG;AAEH,iBAAS,OAAO,CAAC,EAAC,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,EAAC,EAAE,WAAW,qBAEvD;AAcD;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;CAMtB,CAAA"}
+{"version":3,"file":"Testimonial.d.ts","sourceRoot":"","sources":["../../src/Testimonial/Testimonial.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,cAAc,EAAc,QAAQ,EAAuC,MAAM,OAAO,CAAA;AAEvG,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAE9C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,KAAK,CAAA;AAKpC;;GAEG;AAEH,OAAO,kGAAkG,CAAA;AACzG,OAAO,+GAA+G,CAAA;AAKtH,KAAK,eAAe,GAAG,OAAO,GAAG,OAAO,CAAA;AAExC,eAAO,MAAM,0BAA0B,wIAAuB,CAAA;AAC9D,eAAO,MAAM,qBAAqB,UAAU,CAAA;AAE5C,eAAO,MAAM,mBAAmB,yDAA0D,CAAA;AAC1F,KAAK,kBAAkB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC9D,eAAO,MAAM,yBAAyB,EAAE,kBAA8B,CAAA;AAetE,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,uCAAuC;IACvC,cAAc,CAAC,EAAE,CAAC,OAAO,0BAA0B,CAAC,CAAC,MAAM,CAAC,CAAA;IAC5D,uCAAuC;IACvC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,gDAAgD;IAChD,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAA;CACzB,GAAG,SAAS,CAAC,WAAW,CAAC,GACxB,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAsGnC;;;GAGG;AACH,KAAK,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC,WAAW,CAAC,CAAA;AAavF;;;GAGG;AACH,KAAK,oBAAoB,GAAG;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GACnC,SAAS,CAAC,WAAW,CAAC,CAAA;AAqBxB;;;GAGG;AACH,KAAK,oBAAoB,GAAG;IAC1B,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAA;CAC7G,GAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GACxC,SAAS,CAAC,gBAAgB,CAAC,CAAA;AA8C7B;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;CAOtB,CAAA"}

package/esm/Testimonial/Testimonial.js

@@ -5,7 +5,7 @@ import { Text as r } from "../Text/Text.js";
 import { TextCursorAnimation as i } from "../TextCursorAnimation/TextCursorAnimation.js";
 import { Link as a } from "../Link/Link.js";
 import { Avatar as o } from "../Avatar/Avatar.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/testimonial/colors-with-modes-BEiXR7-X.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/testimonial/base-h_olG8bi.css';/* empty css                                                                                            */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/testimonial/colors-with-modes-BEiXR7-X.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/testimonial/base-uEcPTyOn.css';/* empty css                                                                                            */
 /* empty css                                                                                                         */
 import s from "./Testimonial.module.js";
 import c, { forwardRef as l } from "react";
@@ -16,65 +16,82 @@ var f = [...t], p = "green", m = [
 	"default",
 	"minimal",
 	"expressive"
-], h = "minimal";
-function g({ quoteMarkColor: t = p, quoteMarkClassName: r, mediaClassName: a, animate: o, className: l, children: m, variant: g = h, hasBorder: _ = !0, size: v, style: b, ...S }, w) {
-	let { classes: E, styles: O } = n(o), k = f.includes(t) ? t : p, A = /* @__PURE__ */ u("div", {
+], h = "minimal", g = {
+	root: "Testimonial",
+	get quoteMark() {
+		return `${this.root}__quoteMark`;
+	},
+	get quoteWrapper() {
+		return `${this.root}__quoteWrapper`;
+	},
+	get media() {
+		return `${this.root}__media`;
+	}
+};
+function _({ quoteMarkColor: t = p, quoteMarkClassName: r, mediaClassName: a, animate: o, className: l, children: m, variant: _ = h, hasBorder: v = !0, size: y, style: x, "data-testid": C, ...T }, D) {
+	let { classes: k, styles: A } = n(o), j = f.includes(t) ? t : p, M = /* @__PURE__ */ u("div", {
 		"aria-hidden": "true",
-		className: e(s.Testimonial__quoteMark, s[`Testimonial__quoteMark--${k}`], r),
+		"data-testid": g.quoteMark,
+		className: e(s.Testimonial__quoteMark, s[`Testimonial__quoteMark--${j}`], r),
 		children: /* @__PURE__ */ u("span", {
 			className: s.Testimonial__quoteMarkGlyph,
 			children: "“"
 		})
-	}), j = c.Children.toArray(m), M = (e) => j.find((t) => c.isValidElement(t) && t.type === e), N = M(y), P = M(D), F = M(T), I = M(C), L = M(x), R = L && g === "expressive" && typeof L.props.children == "string" ? c.cloneElement(L, { children: /* @__PURE__ */ u(i, {
+	}), N = c.Children.toArray(m), P = (e) => N.find((t) => c.isValidElement(t) && t.type === e), F = P(b), I = P(O), L = P(E), R = P(w), z = P(S), B = z && _ === "expressive" && typeof z.props.children == "string" ? c.cloneElement(z, { children: /* @__PURE__ */ u(i, {
 		animate: !0,
 		animationTrigger: "on-visible",
 		variant: "default",
-		children: L.props.children
-	}) }) : L;
+		children: z.props.children
+	}) }) : z;
 	return /* @__PURE__ */ d("figure", {
-		ref: w,
-		className: e(E, s.Testimonial, s[`Testimonial--variant-${g}`], v && s[`Testimonial--size-${v}`], _ && s["Testimonial--border"], g === "expressive" && P && s["Testimonial--hasLink"], l),
+		ref: D,
+		"data-testid": C || g.root,
+		className: e(k, s.Testimonial, s[`Testimonial--variant-${_}`], y && s[`Testimonial--size-${y}`], v && s["Testimonial--border"], _ === "expressive" && I && s["Testimonial--hasLink"], l),
 		style: {
-			...O,
-			...b,
-			"--testimonial-accent-color": k
+			...A,
+			...x,
+			"--testimonial-accent-color": j
 		},
-		...S,
+		...T,
 		children: [
 			/* @__PURE__ */ d("div", {
 				className: s.Testimonial__quoteWrapper,
+				"data-testid": g.quoteWrapper,
 				children: [
-					A,
-					N,
-					g !== "expressive" && P
+					M,
+					F,
+					_ !== "expressive" && I
 				]
 			}),
 			/* @__PURE__ */ d("div", {
 				className: e(s.Testimonial__media, a),
+				"data-testid": g.media,
 				children: [
-					F,
-					I,
-					R
+					L,
+					R,
+					B
 				]
 			}),
-			g === "expressive" && P
+			_ === "expressive" && I
 		]
 	});
 }
-var _ = l(g);
-function v({ children: t, className: n }, i) {
+var v = l(_);
+function y({ children: t, className: n, ...i }, a) {
 	return /* @__PURE__ */ u("blockquote", {
-		ref: i,
+		...i,
+		ref: a,
 		children: /* @__PURE__ */ u(r, {
 			className: e(s["Testimonial-quote"], n),
 			children: t
 		})
 	});
 }
-var y = l(v);
-function b({ children: t, className: n, position: i }, a) {
+var b = l(y);
+function x({ children: t, className: n, position: i, ...a }, o) {
 	return /* @__PURE__ */ d("figcaption", {
-		ref: a,
+		...a,
+		ref: o,
 		className: e(s["Testimonial-caption"], n),
 		children: [/* @__PURE__ */ u(r, {
 			size: "200",
@@ -89,47 +106,47 @@ function b({ children: t, className: n, position: i }, a) {
 		})]
 	});
 }
-var x = l(b);
-function S({ children: t, ...n }, r) {
+var S = l(x);
+function C({ children: t, ...n }, r) {
 	return /* @__PURE__ */ u("div", {
 		className: s["Testimonial-logo"],
 		...n,
 		children: c.Children.map(t, (t) => {
-			if (c.isValidElement(t) && t.type === "img") {
-				let n = t, i = {
-					className: e(s["Testimonial-logo-image"], n.props.className),
-					ref: r
-				};
-				return c.cloneElement(n, i);
-			}
+			if (c.isValidElement(t) && t.type === "img" || c.isValidElement(t)) return c.cloneElement(t, {
+				className: e(s["Testimonial-logo-image"], t.props.className),
+				...r ? { ref: r } : {}
+			});
 		})
 	});
 }
-var C = l(S);
-function w({ size: t, className: n, ...r }) {
+var w = l(C);
+function T({ size: t, className: n, ...r }, i) {
 	return /* @__PURE__ */ u(o, {
+		ref: i,
 		className: e(s["Testimonial-avatar"], n),
 		size: 48,
 		...r
 	});
 }
-var T = w;
-function E({ className: t, ...n }, r) {
+var E = l(T);
+function D({ className: t, ...n }, r) {
 	return /* @__PURE__ */ u(a, {
+		ref: r,
 		className: e(s["Testimonial-link"], t),
 		...n,
 		size: "medium",
 		variant: "accent"
 	});
 }
-var D = l(E), O = Object.assign(_, {
-	Quote: y,
-	Name: x,
-	Avatar: T,
-	Logo: C,
-	Link: D
+var O = l(D), k = Object.assign(v, {
+	Quote: b,
+	Name: S,
+	Avatar: E,
+	Logo: w,
+	Link: O,
+	testIds: g
 });
 //#endregion
-export { O as Testimonial, f as TestimonialQuoteMarkColors, m as TestimonialVariants, p as defaultQuoteMarkColor, h as defaultTestimonialVariant };
+export { k as Testimonial, f as TestimonialQuoteMarkColors, m as TestimonialVariants, p as defaultQuoteMarkColor, h as defaultTestimonialVariant };
 
 //# sourceMappingURL=Testimonial.js.map

package/esm/Testimonial/Testimonial.js.map

@@ -1 +1 @@
-{"version":3,"file":"Testimonial.js","names":[],"sources":["../../src/Testimonial/Testimonial.tsx"],"sourcesContent":["import React, {\n  HTMLAttributes,\n  PropsWithChildren,\n  forwardRef,\n  SVGProps,\n  CSSProperties,\n  ComponentPropsWithRef,\n} from 'react'\nimport {clsx} from 'clsx'\nimport {BaseProps} from '../component-helpers'\nimport {Text, Avatar as BaseAvatar, useAnimation} from '../'\nimport type {AvatarProps} from '../'\nimport {Link, type LinkProps} from '../Link'\nimport {TextCursorAnimation} from '../TextCursorAnimation'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/testimonial/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/testimonial/colors-with-modes.css'\n\nimport styles from './Testimonial.module.css'\nimport {Colors} from '../constants'\n\ntype TestimonialSize = 'small' | 'large'\n\nexport const TestimonialQuoteMarkColors = [...Colors] as const\nexport const defaultQuoteMarkColor = 'green'\n\nexport const TestimonialVariants = ['subtle', 'default', 'minimal', 'expressive'] as const\ntype TestimonialVariant = (typeof TestimonialVariants)[number]\nexport const defaultTestimonialVariant: TestimonialVariant = 'minimal'\n\nexport type TestimonialProps = {\n  /**\n   * Sets alternative appearance for the testimonial\n   */\n  variant?: TestimonialVariant\n  /**\n   * Applies an optional border where a variant supports it\n   */\n  hasBorder?: boolean\n  /**\n   * Valid children include Testimonial.Name, Testimonial.Avatar, and Testimonial.Name\n   */\n  children:\n    | React.ReactNode\n    | React.ReactElement<QuoteProps>\n    | React.ReactElement<NameProps>\n    | React.ReactElement<AvatarProps>\n    | React.ReactElement<LogoProps>[]\n  /**\n   * Sets the testimonial text size\n   */\n  size?: TestimonialSize\n  /** Sets the color of the quote mark */\n  quoteMarkColor?: (typeof TestimonialQuoteMarkColors)[number]\n  /** Class applied to the quote mark. */\n  quoteMarkClassName?: string\n  /** Class applied to the attribution wrapper. */\n  mediaClassName?: string\n} & BaseProps<HTMLElement> &\n  React.HTMLAttributes<HTMLElement>\n\n/**\n * Testimonial parent element\n * <Testimonial>\n */\nfunction TestimonialBase(\n  {\n    quoteMarkColor = defaultQuoteMarkColor,\n    quoteMarkClassName,\n    mediaClassName,\n    animate,\n    className,\n    children,\n    variant = defaultTestimonialVariant,\n    hasBorder = true,\n    size,\n    style,\n    ...rest\n  }: PropsWithChildren<TestimonialProps>,\n  ref,\n) {\n  const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n  const resolvedQuoteMarkColor = TestimonialQuoteMarkColors.includes(quoteMarkColor)\n    ? quoteMarkColor\n    : defaultQuoteMarkColor\n\n  const quoteMark = (\n    <div\n      aria-hidden=\"true\"\n      className={clsx(\n        styles['Testimonial__quoteMark'],\n        styles[`Testimonial__quoteMark--${resolvedQuoteMarkColor}`],\n        quoteMarkClassName,\n      )}\n    >\n      <span className={styles.Testimonial__quoteMarkGlyph}>&ldquo;</span>\n    </div>\n  )\n\n  const childrenArray = React.Children.toArray(children)\n  const findChild = <Props,>(type: React.ElementType): React.ReactElement<Props> | undefined =>\n    childrenArray.find(\n      (child): child is React.ReactElement<Props> => React.isValidElement<Props>(child) && child.type === type,\n    )\n\n  const quoteChild = findChild<QuoteProps>(Quote)\n  const actionChild = findChild<LinkProps>(_Link)\n  const avatarChild = findChild<AvatarProps>(Avatar)\n  const logoChild = findChild<LogoProps>(Logo)\n  const nameChild = findChild<NameProps>(Name)\n\n  const name =\n    nameChild && variant === 'expressive' && typeof nameChild.props.children === 'string'\n      ? React.cloneElement(nameChild, {\n          children: (\n            <TextCursorAnimation animate animationTrigger=\"on-visible\" variant=\"default\">\n              {nameChild.props.children}\n            </TextCursorAnimation>\n          ),\n        })\n      : nameChild\n\n  return (\n    <figure\n      ref={ref}\n      className={clsx(\n        animationClasses,\n        styles['Testimonial'],\n        styles[`Testimonial--variant-${variant}`],\n        size && styles[`Testimonial--size-${size}`],\n        hasBorder && styles['Testimonial--border'],\n        variant === 'expressive' && actionChild && styles['Testimonial--hasLink'],\n        className,\n      )}\n      style={{\n        ...animationInlineStyles,\n        ...style,\n        ['--testimonial-accent-color' as keyof CSSProperties]: resolvedQuoteMarkColor,\n      }}\n      {...rest}\n    >\n      <div className={styles['Testimonial__quoteWrapper']}>\n        {quoteMark}\n        {quoteChild}\n        {variant !== 'expressive' && actionChild}\n      </div>\n      <div className={clsx(styles['Testimonial__media'], mediaClassName)}>\n        {avatarChild}\n        {logoChild}\n        {name}\n      </div>\n      {variant === 'expressive' && actionChild}\n    </figure>\n  )\n}\n\nconst Root = forwardRef(TestimonialBase)\n\n/**\n * Testimonial quote child element\n * <Testimonial.Quote>\n */\ntype QuoteProps = React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement>\n\nfunction QuoteBase({children, className}: QuoteProps, ref) {\n  return (\n    <blockquote ref={ref}>\n      <Text className={clsx(styles['Testimonial-quote'], className)}>{children}</Text>\n    </blockquote>\n  )\n}\n\nconst Quote = forwardRef(QuoteBase)\n\n/**\n * Testimonial name child element\n * <Testimonial.Name>\n */\ntype NameProps = {\n  position?: string\n} & React.HTMLAttributes<HTMLElement> &\n  BaseProps<HTMLElement>\n\nfunction _Name({children, className, position}: NameProps, ref) {\n  return (\n    <figcaption ref={ref} className={clsx(styles['Testimonial-caption'], className)}>\n      <Text size=\"200\" className={styles['Testimonial-from']} font=\"monospace\">\n        {children}\n      </Text>\n      {position && (\n        <Text size=\"200\" className={clsx(styles['Testimonial-position'])} variant=\"muted\">\n          {position}\n        </Text>\n      )}\n    </figcaption>\n  )\n}\n\nconst Name = forwardRef(_Name)\n\n/**\n * Testimonial logo child element\n * <Testimonial.Logo>\n */\ntype LogoProps = {\n  children: React.ReactElement<SVGProps<SVGSVGElement>> | React.ReactElement<HTMLAttributes<HTMLImageElement>>\n} & React.HTMLAttributes<HTMLImageElement> &\n  BaseProps<HTMLImageElement>\n\nfunction _Logo({children, ...rest}: LogoProps, ref) {\n  return (\n    <div className={styles['Testimonial-logo']} {...rest}>\n      {React.Children.map(children, child => {\n        if (React.isValidElement(child)) {\n          if (child.type === 'img') {\n            const imageChild = child as React.ReactElement<ComponentPropsWithRef<'img'>>\n            const imageProps: ComponentPropsWithRef<'img'> = {\n              className: clsx(styles['Testimonial-logo-image'], imageChild.props.className),\n              ref: ref as ComponentPropsWithRef<'img'>['ref'],\n            }\n\n            return React.cloneElement(imageChild, imageProps)\n          }\n        }\n      })}\n    </div>\n  )\n}\n\nconst Logo = forwardRef(_Logo)\n\n/**\n * Testimonial avatar child element\n * <Testimonial.Avatar>\n */\n\nfunction _Avatar({size, className, ...rest}: AvatarProps) {\n  return <BaseAvatar className={clsx(styles['Testimonial-avatar'], className)} size={48} {...rest} />\n}\n\nconst Avatar = _Avatar\n\n/**\n * Testimonial link child element\n * <Testimonial.Link>\n */\nfunction _LinkBase({className, ...rest}: LinkProps, _ref) {\n  return <Link className={clsx(styles['Testimonial-link'], className)} {...rest} size=\"medium\" variant=\"accent\" />\n}\n\nconst _Link = forwardRef(_LinkBase)\n\n/**\n * Use Testimonial to display a quote from a customer or user.\n * @see https://primer.style/brand/components/Testimonial\n */\nexport const Testimonial = Object.assign(Root, {\n  Quote,\n  Name,\n  Avatar,\n  Logo,\n  Link: _Link,\n})\n"],"mappings":"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"}
+{"version":3,"file":"Testimonial.js","names":[],"sources":["../../src/Testimonial/Testimonial.tsx"],"sourcesContent":["import React, {HTMLAttributes, forwardRef, SVGProps, CSSProperties, ComponentPropsWithRef} from 'react'\nimport {clsx} from 'clsx'\nimport {BaseProps} from '../component-helpers'\nimport {Text, Avatar, useAnimation} from '../'\nimport type {AvatarProps} from '../'\nimport {Link, type LinkProps} from '../Link'\nimport {TextCursorAnimation} from '../TextCursorAnimation'\nimport {Colors} from '../constants'\n\n/**\n * Design tokens\n */\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/testimonial/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/testimonial/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Testimonial.module.css'\n\ntype TestimonialSize = 'small' | 'large'\n\nexport const TestimonialQuoteMarkColors = [...Colors] as const\nexport const defaultQuoteMarkColor = 'green'\n\nexport const TestimonialVariants = ['subtle', 'default', 'minimal', 'expressive'] as const\ntype TestimonialVariant = (typeof TestimonialVariants)[number]\nexport const defaultTestimonialVariant: TestimonialVariant = 'minimal'\n\nconst testIds = {\n  root: 'Testimonial',\n  get quoteMark() {\n    return `${this.root}__quoteMark`\n  },\n  get quoteWrapper() {\n    return `${this.root}__quoteWrapper`\n  },\n  get media() {\n    return `${this.root}__media`\n  },\n}\n\nexport type TestimonialProps = {\n  /**\n   * Sets alternative visual appearance\n   */\n  variant?: TestimonialVariant\n  /**\n   * Applies an optional border where a variant supports it\n   */\n  hasBorder?: boolean\n  /**\n   * Valid children\n   */\n  children: React.ReactNode\n  /**\n   * Sets the testimonial text size\n   */\n  size?: TestimonialSize\n  /** Sets the color of the quote mark */\n  quoteMarkColor?: (typeof TestimonialQuoteMarkColors)[number]\n  /** Class applied to the quote mark. */\n  quoteMarkClassName?: string\n  /** Class applied to the attribution wrapper. */\n  mediaClassName?: string\n  ['data-testid']?: string\n} & BaseProps<HTMLElement> &\n  React.HTMLAttributes<HTMLElement>\n\n/**\n * Testimonial parent element\n * <Testimonial>\n */\nfunction TestimonialRootBase(\n  {\n    quoteMarkColor = defaultQuoteMarkColor,\n    quoteMarkClassName,\n    mediaClassName,\n    animate,\n    className,\n    children,\n    variant = defaultTestimonialVariant,\n    hasBorder = true,\n    size,\n    style,\n    'data-testid': testId,\n    ...rest\n  }: TestimonialProps,\n  ref: React.ForwardedRef<HTMLElement>,\n) {\n  const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n  const resolvedQuoteMarkColor = TestimonialQuoteMarkColors.includes(quoteMarkColor)\n    ? quoteMarkColor\n    : defaultQuoteMarkColor\n\n  const quoteMark = (\n    <div\n      aria-hidden=\"true\"\n      data-testid={testIds.quoteMark}\n      className={clsx(\n        styles['Testimonial__quoteMark'],\n        styles[`Testimonial__quoteMark--${resolvedQuoteMarkColor}`],\n        quoteMarkClassName,\n      )}\n    >\n      <span className={styles.Testimonial__quoteMarkGlyph}>&ldquo;</span>\n    </div>\n  )\n\n  const childrenArray = React.Children.toArray(children)\n  const findChild = <Props,>(type: React.ElementType): React.ReactElement<Props> | undefined =>\n    childrenArray.find(\n      (child): child is React.ReactElement<Props> => React.isValidElement<Props>(child) && child.type === type,\n    )\n\n  const quoteChild = findChild<TestimonialQuoteProps>(TestimonialQuote)\n  const actionChild = findChild<LinkProps>(TestimonialLink)\n  const avatarChild = findChild<AvatarProps>(TestimonialAvatar)\n  const logoChild = findChild<TestimonialLogoProps>(TestimonialLogo)\n  const nameChild = findChild<TestimonialNameProps>(TestimonialName)\n\n  const name =\n    nameChild && variant === 'expressive' && typeof nameChild.props.children === 'string'\n      ? React.cloneElement(nameChild, {\n          children: (\n            <TextCursorAnimation animate animationTrigger=\"on-visible\" variant=\"default\">\n              {nameChild.props.children}\n            </TextCursorAnimation>\n          ),\n        })\n      : nameChild\n\n  return (\n    <figure\n      ref={ref}\n      data-testid={testId || testIds.root}\n      className={clsx(\n        animationClasses,\n        styles['Testimonial'],\n        styles[`Testimonial--variant-${variant}`],\n        size && styles[`Testimonial--size-${size}`],\n        hasBorder && styles['Testimonial--border'],\n        variant === 'expressive' && actionChild && styles['Testimonial--hasLink'],\n        className,\n      )}\n      style={{\n        ...animationInlineStyles,\n        ...style,\n        ['--testimonial-accent-color' as keyof CSSProperties]: resolvedQuoteMarkColor,\n      }}\n      {...rest}\n    >\n      <div className={styles['Testimonial__quoteWrapper']} data-testid={testIds.quoteWrapper}>\n        {quoteMark}\n        {quoteChild}\n        {variant !== 'expressive' && actionChild}\n      </div>\n      <div className={clsx(styles['Testimonial__media'], mediaClassName)} data-testid={testIds.media}>\n        {avatarChild}\n        {logoChild}\n        {name}\n      </div>\n      {variant === 'expressive' && actionChild}\n    </figure>\n  )\n}\n\nconst TestimonialRoot = forwardRef(TestimonialRootBase)\n\n/**\n * Testimonial quote child element\n * <Testimonial.Quote>\n */\ntype TestimonialQuoteProps = React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement>\nfunction TestimonialQuoteBase(\n  {children, className, ...rest}: TestimonialQuoteProps,\n  ref: React.ForwardedRef<HTMLElement>,\n) {\n  return (\n    <blockquote {...rest} ref={ref as React.Ref<HTMLQuoteElement>}>\n      <Text className={clsx(styles['Testimonial-quote'], className)}>{children}</Text>\n    </blockquote>\n  )\n}\nconst TestimonialQuote = forwardRef(TestimonialQuoteBase)\n\n/**\n * Testimonial name child element\n * <Testimonial.Name>\n */\ntype TestimonialNameProps = {\n  position?: string\n} & React.HTMLAttributes<HTMLElement> &\n  BaseProps<HTMLElement>\n\nfunction TestimonialNameBase(\n  {children, className, position, ...rest}: TestimonialNameProps,\n  ref: React.ForwardedRef<HTMLElement>,\n) {\n  return (\n    <figcaption {...rest} ref={ref} className={clsx(styles['Testimonial-caption'], className)}>\n      <Text size=\"200\" className={styles['Testimonial-from']} font=\"monospace\">\n        {children}\n      </Text>\n      {position && (\n        <Text size=\"200\" className={clsx(styles['Testimonial-position'])} variant=\"muted\">\n          {position}\n        </Text>\n      )}\n    </figcaption>\n  )\n}\nconst TestimonialName = forwardRef(TestimonialNameBase)\n\n/**\n * Testimonial logo child element\n * <Testimonial.Logo>\n */\ntype TestimonialLogoProps = {\n  children: React.ReactElement<SVGProps<SVGSVGElement>> | React.ReactElement<HTMLAttributes<HTMLImageElement>>\n} & React.HTMLAttributes<HTMLImageElement> &\n  BaseProps<HTMLImageElement>\n\nfunction TestimonialLogoBase({children, ...rest}: TestimonialLogoProps, ref: React.ForwardedRef<unknown>) {\n  return (\n    <div className={styles['Testimonial-logo']} {...rest}>\n      {React.Children.map(children, child => {\n        if (React.isValidElement<ComponentPropsWithRef<'img'>>(child) && child.type === 'img') {\n          return React.cloneElement(child, {\n            className: clsx(styles['Testimonial-logo-image'], child.props.className),\n            ...(ref ? {ref: ref as ComponentPropsWithRef<'img'>['ref']} : {}),\n          })\n        }\n\n        if (React.isValidElement<SVGProps<SVGSVGElement>>(child)) {\n          return React.cloneElement(child, {\n            className: clsx(styles['Testimonial-logo-image'], child.props.className),\n            ...(ref ? {ref: ref as React.Ref<SVGSVGElement>} : {}),\n          })\n        }\n      })}\n    </div>\n  )\n}\nconst TestimonialLogo = forwardRef(TestimonialLogoBase)\n\n/**\n * Testimonial avatar child element\n * <Testimonial.Avatar>\n */\n\nfunction TestimonialAvatarBase({size, className, ...rest}: AvatarProps, ref: React.ForwardedRef<HTMLImageElement>) {\n  return <Avatar ref={ref} className={clsx(styles['Testimonial-avatar'], className)} size={48} {...rest} />\n}\nconst TestimonialAvatar = forwardRef(TestimonialAvatarBase)\n\n/**\n * Testimonial link child element\n * <Testimonial.Link>\n */\nfunction TestimonialLinkBase({className, ...rest}: LinkProps, ref: React.ForwardedRef<HTMLAnchorElement>) {\n  return (\n    <Link ref={ref} className={clsx(styles['Testimonial-link'], className)} {...rest} size=\"medium\" variant=\"accent\" />\n  )\n}\nconst TestimonialLink = forwardRef(TestimonialLinkBase)\n\n/**\n * Use Testimonial to display a quote from a customer or user.\n * @see https://primer.style/brand/components/Testimonial\n */\nexport const Testimonial = Object.assign(TestimonialRoot, {\n  Quote: TestimonialQuote,\n  Name: TestimonialName,\n  Avatar: TestimonialAvatar,\n  Logo: TestimonialLogo,\n  Link: TestimonialLink,\n  testIds,\n})\n"],"mappings":"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"}

package/esm/Testimonial/Testimonial.module-C15wxD-l.css

@@ -0,0 +1 @@
+.Primer_Brand__Testimonial-module__Testimonial___kxB6R{color:var(--brand-color-text-default);font-family:var(--brand-fontStack-sansSerif)}.Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe,.Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S{border-radius:var(--brand-borderRadius-xlarge);padding:var(--base-size-48) var(--base-size-32);position:relative}@media screen and (width>=48rem){.Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe,.Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S{padding:var(--base-size-48)}}@media screen and (width>=63.25rem){.Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe.Primer_Brand__Testimonial-module__Testimonial--size-large___NH7Vg,.Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S.Primer_Brand__Testimonial-module__Testimonial--size-large___NH7Vg{padding:var(--base-size-96) var(--base-size-128)}}.Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe{background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S{background-color:var(--brand-color-canvas-default)}.Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe:before,.Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S:before{pointer-events:none;content:"";border-radius:inherit;position:absolute;inset:0}.Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe.Primer_Brand__Testimonial-module__Testimonial--border___pbUPS:before{-webkit-mask-image:var(--brand-Testimonial-borderMask-subtle);-webkit-mask-image:var(--brand-Testimonial-borderMask-subtle);mask-image:var(--brand-Testimonial-borderMask-subtle);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default)}.Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S.Primer_Brand__Testimonial-module__Testimonial--border___pbUPS:before{-webkit-mask-image:var(--brand-Testimonial-borderMask-default);-webkit-mask-image:var(--brand-Testimonial-borderMask-default);mask-image:var(--brand-Testimonial-borderMask-default);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default)}.Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe .Primer_Brand__Testimonial-module__Testimonial__quoteWrapper___vcgUf,.Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S .Primer_Brand__Testimonial-module__Testimonial__quoteWrapper___vcgUf{gap:var(--base-size-40);flex-direction:column;display:flex}.Primer_Brand__Testimonial-module__Testimonial__quoteMark___sC3I2{width:calc(var(--base-size-48) + var(--base-size-8));height:calc(var(--base-size-48) + var(--base-size-8));border-radius:var(--base-size-12);color:var(--brand-Testimonial-quoteMarkColor,currentColor);background-color:var(--brand-Testimonial-quoteMarkBackground,var(--base-color-scale-gray-0));font-family:var(--brand-fontStack-monospace);font-size:4rem;font-weight:var(--base-text-weight-normal);flex:none;justify-content:center;align-items:center;line-height:1;display:inline-flex;position:relative}.Primer_Brand__Testimonial-module__Testimonial__quoteMarkGlyph___1eZ5L{transform:translateY(var(--base-size-12));display:block}.Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S .Primer_Brand__Testimonial-module__Testimonial__quoteMark___sC3I2,.Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe .Primer_Brand__Testimonial-module__Testimonial__quoteMark___sC3I2{width:var(--base-size-40);height:var(--base-size-40);border-radius:var(--base-size-8);font-size:3rem}.Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S .Primer_Brand__Testimonial-module__Testimonial__quoteMarkGlyph___1eZ5L,.Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe .Primer_Brand__Testimonial-module__Testimonial__quoteMarkGlyph___1eZ5L{transform:translateY(var(--base-size-8))}.Primer_Brand__Testimonial-module__Testimonial-quote___xbxri{font-family:var(--brand-fontStack-sansSerif);font-size:var(--brand-Testimonial-quote-fontSize-default);font-weight:var(--brand-Testimonial-quote-fontWeight-default);letter-spacing:var(--brand-Testimonial-quote-letterSpacing-default);line-height:var(--brand-text-lineHeight-700);display:block}.Primer_Brand__Testimonial-module__Testimonial--size-large___NH7Vg .Primer_Brand__Testimonial-module__Testimonial-quote___xbxri{font-size:var(--brand-Testimonial-quote-fontSize-large);font-weight:var(--brand-Testimonial-quote-fontWeight-large);letter-spacing:var(--brand-Testimonial-quote-letterSpacing-large)}.Primer_Brand__Testimonial-module__Testimonial-quote___xbxri em,.Primer_Brand__Testimonial-module__Testimonial-quote___xbxri b{color:var(--brand-Testimonial-quote-color-emphasis);font-style:normal;font-weight:inherit}.Primer_Brand__Testimonial-module__Testimonial__media___rvn7k{gap:var(--base-size-16);align-items:center;margin-block-start:var(--base-size-24);display:flex}.Primer_Brand__Testimonial-module__Testimonial-logo-image___rpGVd{display:block}.Primer_Brand__Testimonial-module__Testimonial--size-large___NH7Vg .Primer_Brand__Testimonial-module__Testimonial__media___rvn7k{margin-block-start:var(--base-size-64)}.Primer_Brand__Testimonial-module__Testimonial-caption___8c_KF{flex-direction:column;display:flex}.Primer_Brand__Testimonial-module__Testimonial-avatar___kWqMQ{flex:none}.Primer_Brand__Testimonial-module__Testimonial-from___XLpqj{font-weight:var(--base-text-weight-normal);text-transform:uppercase}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY{gap:var(--base-size-36);width:100%;max-width:var(--brand-Testimonial-expressive-maxWidth);padding-inline:var(--base-size-20);padding-block:var(--base-size-40);flex-direction:column;display:flex}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial__quoteWrapper___vcgUf{align-items:flex-start;gap:var(--base-size-36);flex-direction:column;min-width:0;display:flex}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial__media___rvn7k{align-items:flex-start;gap:var(--base-size-28);width:var(--brand-Testimonial-expressive-media-width);flex-direction:column;margin-block-start:0}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial-avatar___kWqMQ{width:var(--base-size-40);height:var(--base-size-40)}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial-caption___8c_KF{border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);gap:var(--base-size-6);width:100%;padding-block-start:var(--base-size-20)}@media screen and (width>=48rem){.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial__quoteWrapper___vcgUf{gap:var(--base-size-40)}}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial-from___XLpqj{font-family:var(--brand-fontStack-monospace);font-size:var(--brand-text-size-100);font-weight:var(--brand-heading-weight-500);line-height:var(--brand-text-lineHeight-100);text-transform:uppercase;letter-spacing:var(--brand-Testimonial-expressive-name-letterSpacing);align-items:center;display:flex}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial-position____jQ17{font-size:var(--brand-text-size-200);font-weight:var(--base-text-weight-normal);line-height:var(--brand-Testimonial-expressive-position-lineHeight);letter-spacing:var(--brand-Testimonial-expressive-position-letterSpacing)}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial-quote___xbxri{font-family:var(--brand-fontStack-monospace);font-size:var(--brand-Testimonial-expressive-quote-fontSize);font-weight:var(--brand-Testimonial-expressive-quote-fontWeight);letter-spacing:var(--brand-Testimonial-expressive-quote-letterSpacing);line-height:var(--brand-text-lineHeight-100);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media screen and (width>=48rem){.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY{padding-inline:var(--base-size-36);padding-block:var(--base-size-44);margin-inline:auto}}@media screen and (width>=63.25rem){.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY{grid-template-columns:minmax(0, var(--brand-Testimonial-expressive-quote-maxWidth)) var(--brand-Testimonial-expressive-media-width);grid-column-gap:calc(var(--base-size-96) + var(--base-size-24));-moz-column-gap:calc(var(--base-size-96) + var(--base-size-24));column-gap:calc(var(--base-size-96) + var(--base-size-24));padding-inline:var(--base-size-48);padding-block:var(--base-size-88);align-items:end;margin-inline:auto;display:grid}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY.Primer_Brand__Testimonial-module__Testimonial--hasLink___U6yF2{row-gap:var(--base-size-48)}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial__quoteWrapper___vcgUf{gap:var(--base-size-48);grid-area:1/1}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial__media___rvn7k{gap:var(--base-size-32);grid-area:1/2}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY.Primer_Brand__Testimonial-module__Testimonial--hasLink___U6yF2 .Primer_Brand__Testimonial-module__Testimonial__media___rvn7k{grid-row:1/span 2}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial-caption___8c_KF{padding-block-start:var(--base-size-24)}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial-link___kK8cZ{grid-area:2/1}}@media screen and (width>=80rem){.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY{padding-inline:0}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial-avatar___kWqMQ{width:var(--base-size-48);height:var(--base-size-48)}}.Primer_Brand__Testimonial-module__Testimonial-link___kK8cZ{margin-block-start:var(--base-size-8)}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial-link___kK8cZ{align-self:flex-start;width:fit-content;margin-block-start:0}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--default___wRFiA{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-default);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-default)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--blue___65lEG{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-blue);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-blue)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--coral___zCLpT{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-coral);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-coral)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--green___zmlvZ{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-green);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-green)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--gray___18cS4{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-gray);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-gray)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--indigo___GDdwu{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-indigo);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-indigo)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--lemon___SbBQ4{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-lemon);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-lemon)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--lime___jzEWj{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-lime);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-lime)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--orange___Mk2Ix{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-orange);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-orange)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--pink____Y7MC{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-pink);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-pink)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--purple___TMw0P{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-purple);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-purple)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--red___rbO_z{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-red);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-red)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--teal___S_1eT{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-teal);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-teal)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--yellow___W8v__{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-yellow);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-yellow)}.Primer_Brand__Testimonial-module__Testimonial--variant-minimal___TFtAO{width:100%;margin:0}.Primer_Brand__Testimonial-module__Testimonial--variant-minimal___TFtAO .Primer_Brand__Testimonial-module__Testimonial__quoteWrapper___vcgUf{align-items:flex-start;gap:var(--base-size-40);flex-direction:column;display:flex}.Primer_Brand__Testimonial-module__Testimonial--variant-minimal___TFtAO.Primer_Brand__Testimonial-module__Testimonial--size-large___NH7Vg .Primer_Brand__Testimonial-module__Testimonial__quoteWrapper___vcgUf{gap:var(--base-size-48)}.Primer_Brand__Testimonial-module__Testimonial--variant-minimal___TFtAO blockquote{margin:0}.Primer_Brand__Testimonial-module__Testimonial--variant-minimal___TFtAO .Primer_Brand__Testimonial-module__Testimonial-quote___xbxri{font-size:var(--brand-Testimonial-quote-fontSize-default);font-weight:var(--brand-Testimonial-quote-fontWeight-default);line-height:var(--brand-text-lineHeight-700);letter-spacing:var(--brand-text-letterSpacing-400)}.Primer_Brand__Testimonial-module__Testimonial--variant-minimal___TFtAO.Primer_Brand__Testimonial-module__Testimonial--size-large___NH7Vg .Primer_Brand__Testimonial-module__Testimonial-quote___xbxri{font-size:var(--brand-text-size-600);font-weight:var(--brand-heading-weight-500);line-height:var(--brand-Testimonial-minimal-quote-lineHeight)}.Primer_Brand__Testimonial-module__Testimonial--variant-minimal___TFtAO .Primer_Brand__Testimonial-module__Testimonial__media___rvn7k{gap:var(--base-size-16);margin-block-start:var(--base-size-40);padding-block-start:0}.Primer_Brand__Testimonial-module__Testimonial--variant-minimal___TFtAO.Primer_Brand__Testimonial-module__Testimonial--size-large___NH7Vg .Primer_Brand__Testimonial-module__Testimonial__media___rvn7k{margin-block-start:var(--base-size-32);padding-block-start:var(--base-size-8)}.Primer_Brand__Testimonial-module__Testimonial--variant-minimal___TFtAO .Primer_Brand__Testimonial-module__Testimonial-caption___8c_KF{gap:var(--base-size-2);min-width:0}.Primer_Brand__Testimonial-module__Testimonial--variant-minimal___TFtAO .Primer_Brand__Testimonial-module__Testimonial-from___XLpqj,.Primer_Brand__Testimonial-module__Testimonial--variant-minimal___TFtAO .Primer_Brand__Testimonial-module__Testimonial-position____jQ17{font-family:var(--brand-fontStack-sansSerif);font-size:var(--brand-text-size-200);font-weight:var(--base-text-weight-normal);line-height:var(--brand-text-lineHeight-200);letter-spacing:var(--brand-text-letterSpacing-200);text-transform:none}.Primer_Brand__Testimonial-module__Testimonial--variant-minimal___TFtAO .Primer_Brand__Testimonial-module__Testimonial-avatar___kWqMQ{width:var(--base-size-64);height:var(--base-size-64)}@media screen and (width>=63.25rem){.Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe .Primer_Brand__Testimonial-module__Testimonial__quoteWrapper___vcgUf,.Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S .Primer_Brand__Testimonial-module__Testimonial__quoteWrapper___vcgUf,.Primer_Brand__Testimonial-module__Testimonial--variant-minimal___TFtAO .Primer_Brand__Testimonial-module__Testimonial__quoteWrapper___vcgUf{gap:var(--base-size-48)}.Primer_Brand__Testimonial-module__Testimonial--variant-minimal___TFtAO.Primer_Brand__Testimonial-module__Testimonial--size-large___NH7Vg .Primer_Brand__Testimonial-module__Testimonial-quote___xbxri{font-size:var(--brand-Testimonial-minimal-quote-fontSize-large)}}@media screen and (width>=34rem) and (width<=47.99rem){.Primer_Brand__Testimonial-module__Testimonial--variant-minimal___TFtAO.Primer_Brand__Testimonial-module__Testimonial--size-large___NH7Vg .Primer_Brand__Testimonial-module__Testimonial-quote___xbxri{font-size:var(--brand-text-size-700)}}

package/esm/Testimonial/Testimonial.module.js

@@ -1,4 +1,4 @@
-import './Testimonial.module-BqMYuLeo.css';//#region src/Testimonial/Testimonial.module.css
+import './Testimonial.module-C15wxD-l.css';//#region src/Testimonial/Testimonial.module.css
 var e = "Primer_Brand__Testimonial-module__Testimonial___kxB6R", t = "Primer_Brand__Testimonial-module__Testimonial__quoteWrapper___vcgUf", n = "Primer_Brand__Testimonial-module__Testimonial__quoteMark___sC3I2", r = "Primer_Brand__Testimonial-module__Testimonial__quoteMarkGlyph___1eZ5L", i = "Primer_Brand__Testimonial-module__Testimonial__media___rvn7k", a = {
 	Testimonial: e,
 	"Testimonial--variant-subtle": "Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe",