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

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

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

Files changed (940) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Image.js","names":[],"sources":["../../src/Image/Image.tsx"],"sourcesContent":["import React from 'react'\nimport {clsx} from 'clsx'\nimport styles from './Image.module.css'\nimport {BaseProps} from '../component-helpers'\nimport {useAnimation} from '../animation'\n\nexport const ImageBorderRadiusOptions = ['small', 'medium', 'large', 'xlarge', 'full'] as const\nexport type ImageBorderRadiusOptions = (typeof ImageBorderRadiusOptions)[number]\nexport type ImageAspectRatio = '1:1' \| '16:9' \| '16:10' \| '4:3' \| 'custom'\n\nexport type ImageProps = React.ImgHTMLAttributes<HTMLImageElement> &\n BaseProps<HTMLImageElement> & {\n src: string\n alt: string\n aspectRatio?: ImageAspectRatio\n media?: string\n /\n Apply a system-level border radius value\n */\n borderRadius?: ImageBorderRadiusOptions\n srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'srcSet'>\n } & (\n \| {\n as?: 'img' // assuming this is true for others to be required\n srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'srcSet'>\n }\n \| {\n as: 'picture' // assuming this is true for others to be required\n sources?: {\n srcset: string\n media: string\n }[]\n srcSet?: undefined\n }\n )\n\nconst aspectRatioResolver = (ratio?: ImageAspectRatio) => {\n if (typeof ratio === 'string') {\n if (ratio === 'custom') return 'custom'\n const [width, height] = ratio.split(':').map(Number)\n return `${width}-${height}`\n }\n}\n\nconst objectWithoutKey = (object, key) => {\n const {[key]: deletedKey, ...otherKeys} = object\n return otherKeys\n}\n\nexport const Image = ({\n animate,\n aspectRatio,\n className,\n as = 'img',\n ref,\n alt,\n width,\n height,\n media,\n srcSet,\n style,\n borderRadius,\n ...rest\n}: ImageProps) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n if (as === 'picture') {\n return (\n <picture\n className={clsx(\n animationClasses,\n styles['Image__container'],\n aspectRatio && styles[`Image--aspect-ratio-${aspectRatioResolver(aspectRatio)}`],\n borderRadius && styles[`Image--borderRadius-${borderRadius}`],\n className,\n )}\n style={{...animationInlineStyles, ...style}}\n >\n {rest['sources'] &&\n rest['sources'].map((source, index) => <source key={index} srcSet={source.srcset} media={source.media} />)}\n {srcSet && <source srcSet={srcSet} media={media} />}\n <img\n ref={ref}\n alt={alt}\n width={width ?? '100%'}\n height={height ?? '100%'}\n className={clsx(styles.Image, borderRadius && styles[`Image--borderRadius-${borderRadius}`])}\n {...objectWithoutKey(rest, 'sources')}\n />\n </picture>\n )\n }\n if (aspectRatio) {\n return (\n <span\n className={clsx(styles['Image__container'], styles[`Image--aspect-ratio-${aspectRatioResolver(aspectRatio)}`])}\n >\n <img\n ref={ref}\n alt={alt}\n width={width ? width : '100%'}\n height={height ? height : '100%'}\n className={clsx(\n animationClasses,\n styles.Image,\n borderRadius && styles[`Image--borderRadius-${borderRadius}`],\n className,\n )}\n srcSet={srcSet}\n style={{...animationInlineStyles, ...style}}\n {...rest}\n />\n </span>\n )\n }\n return (\n <img\n ref={ref}\n alt={alt}\n className={clsx(\n animationClasses,\n styles.Image,\n borderRadius && styles[`Image--borderRadius-${borderRadius}`],\n className,\n )}\n width={width && width}\n height={height && height}\n srcSet={srcSet}\n style={{...animationInlineStyles, ...style}}\n {...rest}\n />\n )\n}\n"],"mappings":";;;;;;AAMA,IAAa,IAA2B;CAAC;CAAS;CAAU;CAAS;CAAU;~~CAAO~~,~~EA8BhF~~,KAAuB,MAA6B;~~AACxD~~,~~KAAI~~,OAAO,KAAU,UAAU;~~AAC7B~~,~~MAAI~~,MAAU,~~SAAU~~,~~QAAO~~;EAC/B,IAAM,CAAC,GAAO,KAAU,EAAM,MAAM,~~IAAI~~,CAAC,IAAI,~~OAAO~~;~~AACpD~~,~~SAAO~~,GAAG,EAAM,GAAG~~;;GAIjB~~,KAAoB,GAAQ,MAAQ;CACxC,IAAM,GAAE,IAAM,GAAY,GAAG,MAAa;~~AAC1C~~,~~QAAO~~;~~GAGI~~,KAAS,EACpB,YACA,gBACA,cACA,QAAK,OACL,QACA,QACA,UACA,WACA,UACA,WACA,UACA,iBACA,GAAG,QACa;CAChB,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,~~EAAQ~~;~~AAkDxF~~,~~QAjDI~~,MAAO,YAEP,kBAAC,WAAD;EACE,WAAW,EACT,GACA,EAAO,kBACP,KAAe,EAAO,uBAAuB,EAAoB,~~EAAY~~,~~KAC7E~~,KAAgB,EAAO,uBAAuB,MAC9C,~~EACD~~;~~EACD~~,OAAO;GAAC,GAAG;GAAuB,GAAG;~~GAAM~~;~~YAR7C~~;GAUG,EAAK,WACJ,EAAK,QAAW,KAAK,GAAQ,MAAU,kBAAC,UAAD;IAAoB,QAAQ,EAAO;IAAQ,OAAO,EAAO;~~IAAS~~,~~EAArD~~,~~EAAqD~~,CAAC;~~GAC3G~~,KAAU,kBAAC,UAAD;IAAgB;IAAe;~~IAAS~~,CAAA;~~GACnD~~,kBAAC,OAAD;IACO;IACA;IACL,OAAO,KAAS;IAChB,QAAQ,KAAU;IAClB,WAAW,EAAK,EAAO,OAAO,KAAgB,EAAO,uBAAuB,~~KAAgB~~;~~IAC5F~~,GAAI,EAAiB,GAAM,~~UAAU~~;~~IACrC~~,CAAA;~~GACM~~;~~MAGV~~,IAEA,kBAAC,QAAD;EACE,WAAW,EAAK,EAAO,kBAAqB,EAAO,uBAAuB,EAAoB,~~EAAY~~,IAAI;~~YAE9G~~,kBAAC,OAAD;GACO;GACA;GACL,OAAO,KAAgB;GACvB,QAAQ,KAAkB;GAC1B,WAAW,EACT,GACA,EAAO,OACP,KAAgB,EAAO,uBAAuB,MAC9C,~~EACD~~;~~GACO~~;GACR,OAAO;IAAC,GAAG;IAAuB,GAAG;~~IAAM~~;~~GAC3C~~,GAAI;~~GACJ~~,CAAA;~~EACG~~,CAAA,~~GAIT~~,kBAAC,OAAD;EACO;EACA;EACL,WAAW,EACT,GACA,EAAO,OACP,KAAgB,EAAO,uBAAuB,MAC9C,~~EACD~~;~~EACD~~,OAAO,KAAS;EAChB,QAAQ,KAAU;EACV;EACR,OAAO;GAAC,GAAG;GAAuB,GAAG;~~GAAM~~;~~EAC3C~~,GAAI;~~EACJ~~,CAAA"}
1	+ {"version":3,"file":"Image.js","names":[],"sources":["../../src/Image/Image.tsx"],"sourcesContent":["import React from 'react'\nimport {clsx} from 'clsx'\nimport styles from './Image.module.css'\nimport {BaseProps} from '../component-helpers'\nimport {useAnimation} from '../animation'\n\nexport const ImageBorderRadiusOptions = ['small', 'medium', 'large', 'xlarge', 'full'] as const\nexport type ImageBorderRadiusOptions = (typeof ImageBorderRadiusOptions)[number]\nexport type ImageAspectRatio = '1:1' \| '16:9' \| '16:10' \| '4:3' \| 'custom'\n\nexport type ImageProps = React.ImgHTMLAttributes<HTMLImageElement> &\n BaseProps<HTMLImageElement> & {\n src: string\n alt: string\n aspectRatio?: ImageAspectRatio\n media?: string\n /\n Apply a system-level border radius value\n */\n borderRadius?: ImageBorderRadiusOptions\n srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'srcSet'>\n } & (\n \| {\n as?: 'img' // assuming this is true for others to be required\n srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'srcSet'>\n }\n \| {\n as: 'picture' // assuming this is true for others to be required\n sources?: {\n srcset: string\n media: string\n }[]\n srcSet?: undefined\n }\n )\n\nconst aspectRatioResolver = (ratio?: ImageAspectRatio) => {\n if (typeof ratio === 'string') {\n if (ratio === 'custom') return 'custom'\n const [width, height] = ratio.split(':').map(Number)\n return `${width}-${height}`\n }\n}\n\nconst objectWithoutKey = (object, key) => {\n const {[key]: deletedKey, ...otherKeys} = object\n return otherKeys\n}\n\nexport const Image = ({\n animate,\n aspectRatio,\n className,\n as = 'img',\n ref,\n alt,\n width,\n height,\n media,\n srcSet,\n style,\n borderRadius,\n ...rest\n}: ImageProps) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n if (as === 'picture') {\n return (\n <picture\n className={clsx(\n animationClasses,\n styles['Image__container'],\n aspectRatio && styles[`Image--aspect-ratio-${aspectRatioResolver(aspectRatio)}`],\n borderRadius && styles[`Image--borderRadius-${borderRadius}`],\n className,\n )}\n style={{...animationInlineStyles, ...style}}\n >\n {rest['sources'] &&\n rest['sources'].map((source, index) => <source key={index} srcSet={source.srcset} media={source.media} />)}\n {srcSet && <source srcSet={srcSet} media={media} />}\n <img\n ref={ref}\n alt={alt}\n width={width ?? '100%'}\n height={height ?? '100%'}\n className={clsx(styles.Image, borderRadius && styles[`Image--borderRadius-${borderRadius}`])}\n {...objectWithoutKey(rest, 'sources')}\n />\n </picture>\n )\n }\n if (aspectRatio) {\n return (\n <span\n className={clsx(styles['Image__container'], styles[`Image--aspect-ratio-${aspectRatioResolver(aspectRatio)}`])}\n >\n <img\n ref={ref}\n alt={alt}\n width={width ? width : '100%'}\n height={height ? height : '100%'}\n className={clsx(\n animationClasses,\n styles.Image,\n borderRadius && styles[`Image--borderRadius-${borderRadius}`],\n className,\n )}\n srcSet={srcSet}\n style={{...animationInlineStyles, ...style}}\n {...rest}\n />\n </span>\n )\n }\n return (\n <img\n ref={ref}\n alt={alt}\n className={clsx(\n animationClasses,\n styles.Image,\n borderRadius && styles[`Image--borderRadius-${borderRadius}`],\n className,\n )}\n width={width && width}\n height={height && height}\n srcSet={srcSet}\n style={{...animationInlineStyles, ...style}}\n {...rest}\n />\n )\n}\n"],"mappings":";;;;;;AAMA,IAAa,IAA2B;CAAC;CAAS;CAAU;CAAS;CAAU;AAAM,GA8B/E,KAAuB,MAA6B;CACxD,IAAI,OAAO,KAAU,UAAU;EAC7B,IAAI,MAAU,UAAU,OAAO;EAC/B,IAAM,CAAC,GAAO,KAAU,EAAM,MAAM,GAAG,CAAC,CAAC,IAAI,MAAM;EACnD,OAAO,GAAG,EAAM,GAAG;CACrB;AACF,GAEM,KAAoB,GAAQ,MAAQ;CACxC,IAAM,GAAE,IAAM,GAAY,GAAG,MAAa;CAC1C,OAAO;AACT,GAEa,KAAS,EACpB,YACA,gBACA,cACA,QAAK,OACL,QACA,QACA,UACA,WACA,UACA,WACA,UACA,iBACA,GAAG,QACa;CAChB,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,CAAO;CAkDvF,OAjDI,MAAO,YAEP,kBAAC,WAAD;EACE,WAAW,EACT,GACA,EAAO,kBACP,KAAe,EAAO,uBAAuB,EAAoB,CAAW,MAC5E,KAAgB,EAAO,uBAAuB,MAC9C,CACF;EACA,OAAO;GAAC,GAAG;GAAuB,GAAG;EAAK;YAR5C;GAUG,EAAK,WACJ,EAAK,QAAW,KAAK,GAAQ,MAAU,kBAAC,UAAD;IAAoB,QAAQ,EAAO;IAAQ,OAAO,EAAO;GAAQ,GAApD,CAAoD,CAAC;GAC1G,KAAU,kBAAC,UAAD;IAAgB;IAAe;GAAQ,CAAA;GAClD,kBAAC,OAAD;IACO;IACA;IACL,OAAO,KAAS;IAChB,QAAQ,KAAU;IAClB,WAAW,EAAK,EAAO,OAAO,KAAgB,EAAO,uBAAuB,IAAe;IAC3F,GAAI,EAAiB,GAAM,SAAS;GACrC,CAAA;EACM;MAGT,IAEA,kBAAC,QAAD;EACE,WAAW,EAAK,EAAO,kBAAqB,EAAO,uBAAuB,EAAoB,CAAW,IAAI;YAE7G,kBAAC,OAAD;GACO;GACA;GACL,OAAO,KAAgB;GACvB,QAAQ,KAAkB;GAC1B,WAAW,EACT,GACA,EAAO,OACP,KAAgB,EAAO,uBAAuB,MAC9C,CACF;GACQ;GACR,OAAO;IAAC,GAAG;IAAuB,GAAG;GAAK;GAC1C,GAAI;EACL,CAAA;CACG,CAAA,IAIR,kBAAC,OAAD;EACO;EACA;EACL,WAAW,EACT,GACA,EAAO,OACP,KAAgB,EAAO,uBAAuB,MAC9C,CACF;EACA,OAAO,KAAS;EAChB,QAAQ,KAAU;EACV;EACR,OAAO;GAAC,GAAG;GAAuB,GAAG;EAAK;EAC1C,GAAI;CACL,CAAA;AAEL"}

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

@@ -1,6 +1,7 @@
-import './Image.module-BPflj1a0.css';var e = {
-	Image__container: "Primer_Brand__Image-module__Image__container___CEHRD",
-	Image: "Primer_Brand__Image-module__Image___JSzlx",
+import './Image.module-BPflj1a0.css';//#region src/Image/Image.module.css
+var e = "Primer_Brand__Image-module__Image__container___CEHRD", t = "Primer_Brand__Image-module__Image___JSzlx", n = {
+	Image__container: e,
+	Image: t,
 	"Image--aspect-ratio-custom": "Primer_Brand__Image-module__Image--aspect-ratio-custom___38Uyb",
 	"Image--aspect-ratio-1-1": "Primer_Brand__Image-module__Image--aspect-ratio-1-1___PcQBn",
 	"Image--aspect-ratio-16-9": "Primer_Brand__Image-module__Image--aspect-ratio-16-9___hneti",
@@ -13,6 +14,6 @@ import './Image.module-BPflj1a0.css';var e = {
 	"Image--borderRadius-full": "Primer_Brand__Image-module__Image--borderRadius-full___hQJEn"
 };
 //#endregion
-export { e as default };
+export { t as Image, e as Image__container, n as default };
 //# sourceMappingURL=Image.module.js.map

package/esm/InlineCode/InlineCode.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes-Bj7XtHMY.css';/* empty css                                                                                                         */
 import t from "./InlineCode.module.js";
 import { forwardRef as n } from "react";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InlineCode.js","names":[],"sources":["../../src/InlineCode/InlineCode.tsx"],"sourcesContent":["import React, {forwardRef} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './InlineCode.module.css'\n\nexport type InlineCodeProps = React.ComponentPropsWithoutRef<'code'> &\n BaseProps<HTMLElement> & {\n /\n Controls whether the code fragment can wrap.\n * Disable only for short fragments that must remain together.\n * @default true\n /\n wrap?: boolean\n }\n\nfunction InlineCodeRoot(\n {className, children, wrap = true, ...rest}: InlineCodeProps,\n ref: React.ForwardedRef<HTMLElement>,\n) {\n return (\n <code ref={ref} className={clsx(styles.InlineCode, !wrap && styles['InlineCode--nowrap'], className)} {...rest}>\n <span className={styles.InlineCode__text}>{children}</span>\n </code>\n )\n}\n\n/\n Use InlineCode to render a short inline code fragment.\n */\nexport const InlineCode = forwardRef<HTMLElement, InlineCodeProps>(InlineCodeRoot)\n"],"mappings":";;;;;;AAsBA,SAAS,EACP,EAAC,cAAW,aAAU,UAAO,IAAM,GAAG,KACtC,GACA;~~AACA~~,~~QACE~~,kBAAC,QAAD;EAAW;EAAK,WAAW,EAAK,EAAO,YAAY,CAAC,KAAQ,EAAO,uBAAuB,~~EAAU~~;~~EAAE~~,GAAI;YACxG,kBAAC,QAAD;GAAM,WAAW,EAAO;GAAmB;~~GAAgB~~,CAAA;~~EACtD~~,CAAA~~;;AAOX~~,IAAa,IAAa,EAAyC,~~EAAe~~"}
1	+ {"version":3,"file":"InlineCode.js","names":[],"sources":["../../src/InlineCode/InlineCode.tsx"],"sourcesContent":["import React, {forwardRef} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './InlineCode.module.css'\n\nexport type InlineCodeProps = React.ComponentPropsWithoutRef<'code'> &\n BaseProps<HTMLElement> & {\n /\n Controls whether the code fragment can wrap.\n * Disable only for short fragments that must remain together.\n * @default true\n /\n wrap?: boolean\n }\n\nfunction InlineCodeRoot(\n {className, children, wrap = true, ...rest}: InlineCodeProps,\n ref: React.ForwardedRef<HTMLElement>,\n) {\n return (\n <code ref={ref} className={clsx(styles.InlineCode, !wrap && styles['InlineCode--nowrap'], className)} {...rest}>\n <span className={styles.InlineCode__text}>{children}</span>\n </code>\n )\n}\n\n/\n Use InlineCode to render a short inline code fragment.\n */\nexport const InlineCode = forwardRef<HTMLElement, InlineCodeProps>(InlineCodeRoot)\n"],"mappings":";;;;;;AAsBA,SAAS,EACP,EAAC,cAAW,aAAU,UAAO,IAAM,GAAG,KACtC,GACA;CACA,OACE,kBAAC,QAAD;EAAW;EAAK,WAAW,EAAK,EAAO,YAAY,CAAC,KAAQ,EAAO,uBAAuB,CAAS;EAAG,GAAI;YACxG,kBAAC,QAAD;GAAM,WAAW,EAAO;GAAmB;EAAe,CAAA;CACtD,CAAA;AAEV;AAKA,IAAa,IAAa,EAAyC,CAAc"}

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

@@ -1,9 +1,10 @@
-import './InlineCode.module-Br3-YmSA.css';var e = {
-	InlineCode: "Primer_Brand__InlineCode-module__InlineCode___CY8l3",
+import './InlineCode.module-Br3-YmSA.css';//#region src/InlineCode/InlineCode.module.css
+var e = "Primer_Brand__InlineCode-module__InlineCode___CY8l3", t = "Primer_Brand__InlineCode-module__InlineCode__text___Hn_4j", n = {
+	InlineCode: e,
 	"InlineCode--nowrap": "Primer_Brand__InlineCode-module__InlineCode--nowrap___YpKts",
-	InlineCode__text: "Primer_Brand__InlineCode-module__InlineCode__text___Hn_4j"
+	InlineCode__text: t
 };
 //#endregion
-export { e as default };
+export { e as InlineCode, t as InlineCode__text, n as default };
 //# sourceMappingURL=InlineCode.module.js.map

package/esm/InlineLink/InlineLink.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import e from "../node_modules/clsx/dist/clsx.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/inline-link/colors-with-modes-DujakhtG.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/inline-link/base-BJeYaOpB.css';/* empty css                                                                                                         */
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/inline-link/base-BJeYaOpB.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/inline-link/colors-with-modes-DujakhtG.css';/* empty css                                                                                                         */
 /* empty css                                                                                            */
 import t from "./InlineLink.module.js";
 import { forwardRef as n } from "react";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InlineLink.js","names":[],"sources":["../../src/InlineLink/InlineLink.tsx"],"sourcesContent":["import React, {PropsWithChildren, forwardRef, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-link/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-link/base.css'\n\n/\n Main stylesheet (as a CSS Module)\n /\nimport styles from './InlineLink.module.css'\n\nexport type InlineLinkProps = BaseProps<HTMLAnchorElement> & {\n /\n Specify the links destination\n /\n href: string\n} & React.AnchorHTMLAttributes<HTMLAnchorElement> &\n React.HTMLAttributes<HTMLAnchorElement>\n\n/\n A HTML anchor link component that renders inline with adjacent text.\n */\nexport const InlineLink = forwardRef(\n ({className, children, href, ...rest}: PropsWithChildren<InlineLinkProps>, ref: Ref<HTMLAnchorElement>) => {\n const classes = clsx(styles.InlineLink, className)\n\n return (\n <a ref={ref} href={href} className={classes} {...rest}>\n {children}\n </a>\n )\n },\n)\n"],"mappings":";;;;;;;AA0BA,IAAa,IAAa,GACvB,EAAC,cAAW,aAAU,SAAM,GAAG,KAA2C,MAIvE,kBAAC,KAAD;CAAQ;CAAW;CAAM,WAHX,EAAK,EAAO,YAAY,~~EAGF~~;CAAS,GAAI;CAC9C;~~CACC~~,CAAA,CAGT"}
1	+ {"version":3,"file":"InlineLink.js","names":[],"sources":["../../src/InlineLink/InlineLink.tsx"],"sourcesContent":["import React, {PropsWithChildren, forwardRef, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-link/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-link/base.css'\n\n/\n Main stylesheet (as a CSS Module)\n /\nimport styles from './InlineLink.module.css'\n\nexport type InlineLinkProps = BaseProps<HTMLAnchorElement> & {\n /\n Specify the links destination\n /\n href: string\n} & React.AnchorHTMLAttributes<HTMLAnchorElement> &\n React.HTMLAttributes<HTMLAnchorElement>\n\n/\n A HTML anchor link component that renders inline with adjacent text.\n */\nexport const InlineLink = forwardRef(\n ({className, children, href, ...rest}: PropsWithChildren<InlineLinkProps>, ref: Ref<HTMLAnchorElement>) => {\n const classes = clsx(styles.InlineLink, className)\n\n return (\n <a ref={ref} href={href} className={classes} {...rest}>\n {children}\n </a>\n )\n },\n)\n"],"mappings":";;;;;;;AA0BA,IAAa,IAAa,GACvB,EAAC,cAAW,aAAU,SAAM,GAAG,KAA2C,MAIvE,kBAAC,KAAD;CAAQ;CAAW;CAAM,WAHX,EAAK,EAAO,YAAY,CAGF;CAAS,GAAI;CAC9C;AACA,CAAA,CAGT"}

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

@@ -1,5 +1,6 @@
-import './InlineLink.module-6R63us8B.css';var e = { InlineLink: "Primer_Brand__InlineLink-module__InlineLink___AAGDi" };
+import './InlineLink.module-6R63us8B.css';//#region src/InlineLink/InlineLink.module.css
+var e = "Primer_Brand__InlineLink-module__InlineLink___AAGDi", t = { InlineLink: e };
 //#endregion
-export { e as default };
+export { e as InlineLink, t as default };
 //# sourceMappingURL=InlineLink.module.js.map

package/esm/Label/Label.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { BiColorGradients as t, Colors as n, TriColorGradients as r } from "../constants.js";
 import { useAnimation as i } from "../animation/useAnimation.js";
 import { Text as a } from "../Text/Text.js";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Label.js","names":[],"sources":["../../src/Label/Label.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, useMemo, type Ref} from 'react'\nimport {Text} from '../Text'\n\nimport {useAnimation} from '../animation'\n\nimport type {BaseProps} from '../component-helpers'\nimport {Colors, BiColorGradients, TriColorGradients} from '../constants'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/label/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './Label.module.css'\nimport type {Icon} from '@primer/octicons-react'\n\nconst Gradients = [...BiColorGradients, ...TriColorGradients] as const\n\nexport const LabelColors = [...Colors, ...Gradients] as const\nexport const LabelSizes = ['small', 'medium', 'large'] as const\n\nexport const defaultLabelColor = LabelColors[0]\nexport const defaultLabelSize = LabelSizes[1]\n\nexport type LabelProps = BaseProps<HTMLSpanElement> & {\n /\n The leading visual appears before the Label content\n /\n leadingVisual?: React.ReactNode \| Icon\n /\n The color variations available in Label\n /\n color?: (typeof LabelColors)[number]\n /\n The size variations available in Label\n /\n size?: (typeof LabelSizes)[number]\n ['data-testid']?: string\n} & React.ComponentPropsWithoutRef<'span'>\n\nconst testIds = {\n root: 'Label',\n get leadingVisual() {\n return `${this.root}-leading-visual`\n },\n}\n\nconst _Label = forwardRef<HTMLSpanElement, LabelProps>(\n (\n {\n animate,\n className,\n size = defaultLabelSize,\n color = defaultLabelColor,\n children,\n 'data-testid': testId,\n leadingVisual: LeadingVisual,\n style,\n ...props\n },\n ref: Ref<HTMLSpanElement>,\n ) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const isGradient = useMemo(() => Gradients.find(gradient => gradient === color), [color])\n\n return (\n <span\n ref={ref}\n className={clsx(\n animationClasses,\n styles.Label,\n styles[`Label--color-${color}`],\n styles[`Label--size-${size}`],\n isGradient && styles['Label--gradient'],\n className,\n )}\n data-testid={testId \|\| testIds.root}\n style={{...animationInlineStyles, ...style}}\n {...props}\n >\n {LeadingVisual && (\n <span className={styles['Label__leading-visual']} data-testid={testIds.leadingVisual} aria-hidden=\"true\">\n {typeof LeadingVisual === 'function' ? (\n <LeadingVisual />\n ) : (\n React.isValidElement<{className?: string}>(LeadingVisual) &&\n React.cloneElement(LeadingVisual, {\n className: clsx(styles['Label__icon-visual']),\n })\n )}\n </span>\n )}\n <span className={clsx(styles['Label__text'])}>\n <Text as=\"span\" size={size === 'large' ? '200' : '100'} className={clsx(styles['Label__label'])}>\n {children}\n </Text>\n </span>\n </span>\n )\n },\n)\n\n/\n Use Label to display short status or metadata attached to an object in product-like UI\n * Prefer Token for general-purpose compact metadata, categories, statuses, and short pre-heading markers.\n \n @see https://primer.style/brand/components/Label\n */\nexport const Label = Object.assign(_Label, {testIds})\n"],"mappings":";;;;;;;;;AAkBA,IAAM,IAAY,CAAC,GAAG,GAAkB,GAAG,~~EAAkB~~,~~EAEhD~~,IAAc,CAAC,GAAG,GAAQ,GAAG,~~EAAU~~,~~EACvC~~,IAAa;CAAC;CAAS;CAAU;~~CAAQ~~,~~EAEzC~~,IAAoB,EAAY,IAChC,IAAmB,EAAW,IAkBrC,IAAU;CACd,MAAM;CACN,IAAI,gBAAgB;~~AAClB~~,~~SAAO~~,GAAG,KAAK,KAAK~~;;CAEvB~~,~~EAEK~~,IAAS,GAEX,EACE,YACA,cACA,UAAO,GACP,WAAQ,GACR,aACA,eAAe,GACf,eAAe,GACf,UACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,~~EAAQ~~,~~EAElF~~,IAAa,QAAc,EAAU,MAAK,MAAY,MAAa,~~EAAM~~,~~EAAE~~,CAAC,~~EAAM~~,CAAC;~~AAEzF~~,~~QACE~~,kBAAC,QAAD;EACO;EACL,WAAW,EACT,GACA,EAAO,OACP,EAAO,gBAAgB,MACvB,EAAO,eAAe,MACtB,KAAc,EAAO,oBACrB,~~EACD~~;~~EACD~~,eAAa,KAAU,EAAQ;EAC/B,OAAO;GAAC,GAAG;GAAuB,GAAG;~~GAAM~~;~~EAC3C~~,GAAI;YAZN,CAcG,KACC,kBAAC,QAAD;GAAM,WAAW,EAAO;GAA0B,eAAa,EAAQ;GAAe,eAAY;aAC/F,OAAO,KAAkB,aACxB,kBAAC,GAAD,~~EAAiB~~,CAAA,~~GAEjB~~,EAAM,eAAqC,~~EAAc~~,~~IACzD~~,EAAM,aAAa,GAAe,EAChC,WAAW,EAAK,EAAO,~~sBAAsB~~,EAC9C,CAAC;~~GAEC~~,CAAA,~~EAET~~,kBAAC,QAAD;GAAM,WAAW,EAAK,EAAO,~~YAAe~~;~~aAC1C~~,kBAAC,GAAD;IAAM,IAAG;IAAO,MAAM,MAAS,UAAU,QAAQ;IAAO,WAAW,EAAK,EAAO,~~aAAgB~~;~~IAC5F~~;~~IACI~~,CAAA;~~GACF~~,CAAA,CACF;;~~EAGZ~~,~~EAQY~~,IAAQ,OAAO,OAAO,GAAQ,EAAC,~~YAAQ~~,CAAC"}
1	+ {"version":3,"file":"Label.js","names":[],"sources":["../../src/Label/Label.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, useMemo, type Ref} from 'react'\nimport {Text} from '../Text'\n\nimport {useAnimation} from '../animation'\n\nimport type {BaseProps} from '../component-helpers'\nimport {Colors, BiColorGradients, TriColorGradients} from '../constants'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/label/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './Label.module.css'\nimport type {Icon} from '@primer/octicons-react'\n\nconst Gradients = [...BiColorGradients, ...TriColorGradients] as const\n\nexport const LabelColors = [...Colors, ...Gradients] as const\nexport const LabelSizes = ['small', 'medium', 'large'] as const\n\nexport const defaultLabelColor = LabelColors[0]\nexport const defaultLabelSize = LabelSizes[1]\n\nexport type LabelProps = BaseProps<HTMLSpanElement> & {\n /\n The leading visual appears before the Label content\n /\n leadingVisual?: React.ReactNode \| Icon\n /\n The color variations available in Label\n /\n color?: (typeof LabelColors)[number]\n /\n The size variations available in Label\n /\n size?: (typeof LabelSizes)[number]\n ['data-testid']?: string\n} & React.ComponentPropsWithoutRef<'span'>\n\nconst testIds = {\n root: 'Label',\n get leadingVisual() {\n return `${this.root}-leading-visual`\n },\n}\n\nconst _Label = forwardRef<HTMLSpanElement, LabelProps>(\n (\n {\n animate,\n className,\n size = defaultLabelSize,\n color = defaultLabelColor,\n children,\n 'data-testid': testId,\n leadingVisual: LeadingVisual,\n style,\n ...props\n },\n ref: Ref<HTMLSpanElement>,\n ) => {\n const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n const isGradient = useMemo(() => Gradients.find(gradient => gradient === color), [color])\n\n return (\n <span\n ref={ref}\n className={clsx(\n animationClasses,\n styles.Label,\n styles[`Label--color-${color}`],\n styles[`Label--size-${size}`],\n isGradient && styles['Label--gradient'],\n className,\n )}\n data-testid={testId \|\| testIds.root}\n style={{...animationInlineStyles, ...style}}\n {...props}\n >\n {LeadingVisual && (\n <span className={styles['Label__leading-visual']} data-testid={testIds.leadingVisual} aria-hidden=\"true\">\n {typeof LeadingVisual === 'function' ? (\n <LeadingVisual />\n ) : (\n React.isValidElement<{className?: string}>(LeadingVisual) &&\n React.cloneElement(LeadingVisual, {\n className: clsx(styles['Label__icon-visual']),\n })\n )}\n </span>\n )}\n <span className={clsx(styles['Label__text'])}>\n <Text as=\"span\" size={size === 'large' ? '200' : '100'} className={clsx(styles['Label__label'])}>\n {children}\n </Text>\n </span>\n </span>\n )\n },\n)\n\n/\n Use Label to display short status or metadata attached to an object in product-like UI\n * Prefer Token for general-purpose compact metadata, categories, statuses, and short pre-heading markers.\n \n @see https://primer.style/brand/components/Label\n */\nexport const Label = Object.assign(_Label, {testIds})\n"],"mappings":";;;;;;;;;AAkBA,IAAM,IAAY,CAAC,GAAG,GAAkB,GAAG,CAAiB,GAE/C,IAAc,CAAC,GAAG,GAAQ,GAAG,CAAS,GACtC,IAAa;CAAC;CAAS;CAAU;AAAO,GAExC,IAAoB,EAAY,IAChC,IAAmB,EAAW,IAkBrC,IAAU;CACd,MAAM;CACN,IAAI,gBAAgB;EAClB,OAAO,GAAG,KAAK,KAAK;CACtB;AACF,GAEM,IAAS,GAEX,EACE,YACA,cACA,UAAO,GACP,WAAQ,GACR,aACA,eAAe,GACf,eAAe,GACf,UACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,CAAO,GAEjF,IAAa,QAAc,EAAU,MAAK,MAAY,MAAa,CAAK,GAAG,CAAC,CAAK,CAAC;CAExF,OACE,kBAAC,QAAD;EACO;EACL,WAAW,EACT,GACA,EAAO,OACP,EAAO,gBAAgB,MACvB,EAAO,eAAe,MACtB,KAAc,EAAO,oBACrB,CACF;EACA,eAAa,KAAU,EAAQ;EAC/B,OAAO;GAAC,GAAG;GAAuB,GAAG;EAAK;EAC1C,GAAI;YAZN,CAcG,KACC,kBAAC,QAAD;GAAM,WAAW,EAAO;GAA0B,eAAa,EAAQ;GAAe,eAAY;aAC/F,OAAO,KAAkB,aACxB,kBAAC,GAAD,CAAgB,CAAA,IAEhB,EAAM,eAAqC,CAAa,KACxD,EAAM,aAAa,GAAe,EAChC,WAAW,EAAK,EAAO,qBAAqB,EAC9C,CAAC;EAEC,CAAA,GAER,kBAAC,QAAD;GAAM,WAAW,EAAK,EAAO,WAAc;aACzC,kBAAC,GAAD;IAAM,IAAG;IAAO,MAAM,MAAS,UAAU,QAAQ;IAAO,WAAW,EAAK,EAAO,YAAe;IAC3F;GACG,CAAA;EACF,CAAA,CACF;;AAEV,CACF,GAQa,IAAQ,OAAO,OAAO,GAAQ,EAAC,WAAO,CAAC"}

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

@@ -1,7 +1,8 @@
-import './Label.module-DDkalJAE.css';var e = {
-	Label: "Primer_Brand__Label-module__Label___RWs_8",
+import './Label.module-DDkalJAE.css';//#region src/Label/Label.module.css
+var e = "Primer_Brand__Label-module__Label___RWs_8", t = "Primer_Brand__Label-module__Label__label___nUKUt", n = "Primer_Brand__Label-module__Label__text___YCBde", r = {
+	Label: e,
 	"Label--size-small": "Primer_Brand__Label-module__Label--size-small___QxC5y",
-	Label__label: "Primer_Brand__Label-module__Label__label___nUKUt",
+	Label__label: t,
 	"Label--size-medium": "Primer_Brand__Label-module__Label--size-medium___QxFgp",
 	"Label--size-large": "Primer_Brand__Label-module__Label--size-large___AEmn9",
 	"Label--color-default": "Primer_Brand__Label-module__Label--color-default___Y9nDM",
@@ -24,12 +25,12 @@ import './Label.module-DDkalJAE.css';var e = {
 	"Label--color-red-orange": "Primer_Brand__Label-module__Label--color-red-orange___d4Om3",
 	"Label--color-teal": "Primer_Brand__Label-module__Label--color-teal___AC7RS",
 	"Label--color-yellow": "Primer_Brand__Label-module__Label--color-yellow___QjHgW",
-	Label__text: "Primer_Brand__Label-module__Label__text___YCBde",
+	Label__text: n,
 	"Label--gradient": "Primer_Brand__Label-module__Label--gradient___r4d_A",
 	"Label__icon-visual": "Primer_Brand__Label-module__Label__icon-visual___Cq0aX",
 	"Label__leading-visual": "Primer_Brand__Label-module__Label__leading-visual___2wAbr"
 };
 //#endregion
-export { e as default };
+export { e as Label, t as Label__label, n as Label__text, r as default };
 //# sourceMappingURL=Label.module.js.map

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

@@ -25,5 +25,5 @@ export type LinkProps = {
  * 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): import("react/jsx-runtime").JSX.Element;
+export declare function Link({ size, variant, className, children, isExternal, onMouseEnter, onMouseLeave, onFocus, onBlur, arrowDirection, ...props }: LinkProps): React.JSX.Element;
 //# sourceMappingURL=Link.d.ts.map

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

	@@ -1 +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,~~2CAkEX~~"}
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"}

package/esm/Link/Link.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { Text as t } from "../Text/Text.js";
 import { ExpandableArrow as n } from "../ExpandableArrow/ExpandableArrow.js";
-import { LinkExternalIcon as r } from "../node_modules/@primer/octicons-react/dist/index.esm.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-Dh1w7a05.css';/* empty css                                                                                                  */
 import a, { useCallback as o } from "react";

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

	@@ -1 +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,~~SAAS~~,~~EACpC~~,IAAY;CAAC;CAAS;CAAU;~~CAAQ~~,~~EACxC~~,IAAsB;CAAC;CAAS;CAAO;~~CAAO~~,~~EAErD~~,IAAgB;CACpB,OAAO;CACP,QAAQ;CACR,OAAO;~~CACR~~,~~EAEK~~,IAAwB;CAC5B,OAAO;CACP,QAAQ;CACR,OAAO;~~CACR~~;~~AAyBD~~,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,~~GAAM~~,~~EACjD~~,CAAC,GAAW,KAAgB,EAAM,SAAS,~~GAAM~~,~~EAEjD~~,IAAmB,GACtB,MAA2D;~~AAE1D~~,~~EADA~~,EAAa,CAAC,~~EAAU~~,~~EACxB~~,IAAe,~~EAAM~~;~~IAEvB~~,CAAC,GAAc,~~EAAU~~,CAC1B,~~EAEK~~,IAAmB,GACtB,MAA2D;~~AAE1D~~,~~EADA~~,EAAa,CAAC,~~EAAU~~,~~EACxB~~,IAAe,~~EAAM~~;~~IAEvB~~,CAAC,GAAc,~~EAAU~~,CAC1B,~~EAEK~~,IAAgB,GACnB,MAAwD;~~AAEvD~~,~~EADA~~,EAAa,CAAC,~~EAAU~~,~~EACxB~~,IAAU,~~EAAM~~;~~IAElB~~,CAAC,GAAS,~~EAAU~~,CACrB,~~EAEK~~,IAAe,GAClB,MAAwD;~~AAEvD~~,~~EADA~~,EAAa,CAAC,~~EAAU~~,~~EACxB~~,IAAS,~~EAAM~~;~~IAEjB~~,CAAC,GAAQ,~~EAAU~~,CACpB;~~AAED~~,~~QACE~~,kBAAC,KAAD;EACE,WAAW,EACT,EAAO,MACP,EAAO,SAAS,MAChB,EAAO,SAAS,MAChB,IAAa,EAAO,uBAAuB,EAAO,eAAe,MACjE,~~EACD~~;~~EACD~~,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;~~IAAS~~,CAAA;~~GAGvG~~,kBAAC,GAAD;IAAM,IAAG;IAAO,MAAM,EAAc;IAAO,WAAW,EAAK,EAAO,~~eAAe~~;~~IAC9E~~;~~IACI~~,CAAA;~~GAEN~~,MAAmB,SAAS,CAAC,KAC5B,kBAAC,GAAD;IAAiB,WAAW,EAAO;IAAe,UAAU,KAAa;IAAW,QAAA;~~IAAS~~,CAAA;~~GAG9F~~,KAAc,kBAAC,GAAD;IAAkB,MAAM,EAAsB;IAAO,cAAW;~~IAAkB~~,CAAA;~~GAC~~/F"}
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"}

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

@@ -1,5 +1,6 @@
-import './Link.module-CiGiy5gk.css';var e = {
-	Link: "Primer_Brand__Link-module__Link___lF11y",
+import './Link.module-CiGiy5gk.css';//#region src/Link/Link.module.css
+var e = "Primer_Brand__Link-module__Link___lF11y", t = {
+	Link: e,
 	"Link--arrow-start": "Primer_Brand__Link-module__Link--arrow-start___Cyw51",
 	"Link--arrow-end": "Primer_Brand__Link-module__Link--arrow-end___esdN8",
 	"Link--large": "Primer_Brand__Link-module__Link--large___mTWWi",
@@ -10,6 +11,6 @@ import './Link.module-CiGiy5gk.css';var e = {
 	"Link-arrow": "Primer_Brand__Link-module__Link-arrow___yd78i"
 };
 //#endregion
-export { e as default };
+export { e as Link, t as default };
 //# sourceMappingURL=Link.module.js.map

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

@@ -62,7 +62,7 @@ export type LogoSuiteLogoBarProps = BaseProps<HTMLDivElement> & {
  * Use LogoSuite to present a list of logos, such as sponsors or vendors.
  * @see https://primer.style/brand/components/LogoSuite
  */
-export declare const LogoSuite: (({ align, children, className, hasDivider, variant, "data-testid": testId, }: PropsWithChildren<LogoSuiteProps>) => import("react/jsx-runtime").JSX.Element) & {
+export declare const LogoSuite: (({ align, children, className, hasDivider, variant, "data-testid": testId, }: PropsWithChildren<LogoSuiteProps>) => React.JSX.Element) & {
     Heading: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<LogoSuiteHeadingProps>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
     Description: React.ForwardRefExoticComponent<(Omit<BaseProps<HTMLParagraphElement> & {
         font?: import("../Text").TextFontVariants;

package/esm/LogoSuite/LogoSuite.js CHANGED Viewed

@@ -1,11 +1,12 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { Grid as t } from "../Grid/Grid.js";
 import { useReducedMotion as n } from "../hooks/useReducedMotion.js";
 import { Text as r } from "../Text/Text.js";
 import { Heading as i, defaultHeadingTag as a } from "../Heading/Heading.js";
 import { Button as o } from "../Button/Button.js";
-import { PauseIcon as s, PlayIcon as c } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/logosuite/colors-with-modes-B8ia26TA.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/logosuite/base-DTi5Rx4y.css';/* empty css                                                                                                       */
+import { PauseIcon as s } from "../node_modules/@primer/octicons-react/dist/icons/PauseIcon.js";
+import { PlayIcon as c } from "../node_modules/@primer/octicons-react/dist/icons/PlayIcon.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/logosuite/base-DTi5Rx4y.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/logosuite/colors-with-modes-B8ia26TA.css';/* empty css                                                                                                       */
 /* empty css                                                                                          */
 import l from "./LogoSuite.module.js";
 import u, { forwardRef as d, useCallback as f, useEffect as p, useMemo as m, useState as h } from "react";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"LogoSuite.js","names":[],"sources":["../../src/LogoSuite/LogoSuite.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {type PropsWithChildren, type Ref, forwardRef, useCallback, useEffect, useMemo, useState} from 'react'\nimport {useReducedMotion} from '../hooks/useReducedMotion'\nimport {PauseIcon, PlayIcon} from '@primer/octicons-react'\nimport type {BaseProps} from '../component-helpers'\nimport {Heading, HeadingProps, defaultHeadingTag, Text, TextProps, Grid, Button} from '../'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/logosuite/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/logosuite/base.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './LogoSuite.module.css'\n\nconst testIds = {\n root: 'LogoSuite',\n get marqueeGroup() {\n return `${this.root}-marqueeGroup`\n },\n}\n\nexport type LogoSuiteProps = {\n /\n The horizontal alignment of the LogoSuite.\n /\n align?: 'start' \| 'center' \| 'justify'\n /\n Whether to render a divider immediately after the LogoSuite.\n /\n hasDivider?: boolean\n /\n Test id for the root LogoSuite element.\n /\n 'data-testid'?: string\n /\n Alternative presentation\n /\n variant?: 'default' \| 'gridline-expressive'\n} & BaseProps<HTMLDivElement> &\n React.HTMLAttributes<HTMLDivElement>\n\nconst LogoSuiteBase = ({\n align = 'center',\n children,\n className,\n hasDivider = true,\n variant = 'default',\n 'data-testid': testId,\n}: PropsWithChildren<LogoSuiteProps>) => {\n const childrenArray = useMemo(() => React.Children.toArray(children), [children])\n\n const HeadingChild = childrenArray.find(child => {\n return React.isValidElement(child) && child.type === _Heading\n })\n\n const DescriptionChild = childrenArray.find(child => {\n return React.isValidElement(child) && child.type === _Description\n })\n\n const LogobarChild = childrenArray.find(child => {\n return React.isValidElement(child) && child.type === _LogoBar\n })\n\n if (!HeadingChild) {\n if (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test') {\n // eslint-disable-next-line no-console\n console.warn('LogoSuite: Heading child is required. You may use `visuallyHidden` to hide it from view.')\n }\n }\n\n const isHeadingVisuallyHidden =\n React.isValidElement<LogoSuiteHeadingProps>(HeadingChild) && HeadingChild.props.visuallyHidden\n const isGridlineExpressive = variant === 'gridline-expressive'\n const hasVisibleTextContent = isGridlineExpressive && ((HeadingChild && !isHeadingVisuallyHidden) \|\| DescriptionChild)\n\n return (\n <div\n className={clsx(\n styles.LogoSuite,\n styles[`LogoSuite--${align}`],\n hasDivider && styles['LogoSuite--hasDivider'],\n styles[`LogoSuite--${variant}`],\n className,\n )}\n data-testid={testId}\n >\n {isGridlineExpressive ? (\n <Grid className={styles['LogoSuite__content']}>\n {hasVisibleTextContent && (\n <Grid.Column span={{large: 3}} className={styles['LogoSuite__textContainer']}>\n {HeadingChild}\n {DescriptionChild}\n </Grid.Column>\n )}\n <Grid.Column span={{large: hasVisibleTextContent ? 9 : 12}} className={styles['LogoSuite__logobarContainer']}>\n {!hasVisibleTextContent && isHeadingVisuallyHidden && HeadingChild}\n {LogobarChild}\n </Grid.Column>\n </Grid>\n ) : (\n <>\n {HeadingChild}\n {DescriptionChild}\n {LogobarChild}\n </>\n )}\n </div>\n )\n}\n\nexport type LogoSuiteHeadingProps = BaseProps<HTMLHeadingElement> &\n HeadingProps & {\n /\n Whether to visually hide the heading.\n /\n visuallyHidden?: boolean\n }\n\nconst _Heading = forwardRef(\n (\n {\n as = defaultHeadingTag,\n size = 'subhead-large',\n className,\n children,\n visuallyHidden,\n ...props\n }: PropsWithChildren<LogoSuiteHeadingProps>,\n ref: Ref<HTMLHeadingElement>,\n ) => {\n return (\n <Heading\n ref={ref}\n className={clsx(\n styles['LogoSuite__heading'],\n visuallyHidden && styles['LogoSuite__heading--visually-hidden'],\n visuallyHidden && 'visually-hidden',\n className,\n )}\n size={size}\n as={as}\n {...props}\n >\n {children}\n </Heading>\n )\n },\n)\n\nexport type LogoSuiteDescriptionProps = BaseProps<HTMLParagraphElement> &\n TextProps & {\n children: React.ReactNode \| React.ReactNode[]\n }\n\nconst _Description = forwardRef(\n (\n {className, children, size = '200', variant = 'muted', ...props}: LogoSuiteDescriptionProps,\n ref: Ref<HTMLParagraphElement>,\n ) => {\n return (\n <Text\n as=\"p\"\n ref={ref}\n size={size}\n variant={variant}\n className={clsx(styles['LogoSuite__description'], className)}\n {...props}\n >\n {children}\n </Text>\n )\n },\n)\n\ntype PlayPauseButtonProps = {\n isPlaying?: boolean\n onPlayPause?: (isPlaying: boolean) => void\n}\n\nconst PlayPauseButton = ({isPlaying = true, onPlayPause}: PlayPauseButtonProps) => {\n const onClick = useCallback(() => {\n onPlayPause?.(!isPlaying)\n }, [onPlayPause, isPlaying])\n\n /\n aria-pressed is intentionally not used here to prevent potentially confusing screen reader announcements\n * eg \"Play animation on\" or \"Pause animation off\"\n /\n return (\n <button\n className={styles['LogoSuite__logobar-playPauseButton']}\n type=\"button\"\n onClick={onClick}\n aria-label={isPlaying ? 'Pause animation' : 'Play animation'}\n >\n {isPlaying ? <PauseIcon /> : <PlayIcon />}\n </button>\n )\n}\n\nexport type LogoSuiteLogoBarProps = BaseProps<HTMLDivElement> & {\n children: React.ReactNode \| React.ReactNode[]\n /\n The gap between logos\n /\n gap?: 'default' \| 'condensed'\n /\n Enables an optional marquee effect\n /\n marquee?: boolean\n /\n The speed of the marquee effect\n /\n marqueeSpeed?: 'slow' \| 'normal' \| 'idle'\n /\n The stylistic variant of the LogoBar.\n /\n variant?: 'muted' \| 'emphasis'\n /\n Displays an optional takeover button (as an anchor) on hover/focus.\n /\n takeoverButton?: {\n label: string\n } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> &\n BaseProps<HTMLAnchorElement>\n}\n\nconst _LogoBar = forwardRef(\n (\n {\n className,\n children,\n gap = 'default',\n marquee = false,\n marqueeSpeed = 'normal',\n variant = 'muted',\n takeoverButton,\n ...props\n }: LogoSuiteLogoBarProps,\n ref: Ref<HTMLDivElement>,\n ) => {\n const prefersReducedMotion = useReducedMotion()\n const [isPlaying, setIsPlaying] = useState(() => marquee && !prefersReducedMotion && marqueeSpeed !== 'idle')\n\n useEffect(() => {\n setIsPlaying(marquee && !prefersReducedMotion && marqueeSpeed !== 'idle')\n }, [marquee, prefersReducedMotion, marqueeSpeed])\n\n if (marquee && takeoverButton) {\n if (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test') {\n // eslint-disable-next-line no-console\n console.warn(\n 'LogoSuite.Logobar: `takeoverButton` cant be used with `marquee` prop due to accessibility risks. Set `marquee={false}` to use the takeover feature.',\n )\n }\n }\n\n const defaultProps = {\n ref,\n className: clsx(\n styles['LogoSuite__logobar'],\n styles[`LogoSuite__logobar--variant-${variant}`],\n styles[`LogoSuite__logobar--gap-${gap}`],\n className,\n ),\n ...props,\n }\n\n const [isFocusWithin, setIsFocusWithin] = useState(false)\n\n const handleFocus = useCallback(() => {\n setIsFocusWithin(true)\n }, [])\n\n const handleBlur = useCallback((event: React.FocusEvent) => {\n if (!event.currentTarget.contains(event.relatedTarget as Node)) {\n setIsFocusWithin(false)\n }\n }, [])\n\n const renderTakeoverButton = () => {\n if (!takeoverButton) return null\n const {className: takeoverButtonClassName, label, ref: _ref, ...takeoverButtonProps} = takeoverButton\n return (\n <div className={styles['LogoSuite__logobar-takeoverButtonContainer']}>\n <Button\n as=\"a\"\n variant=\"primary\"\n className={clsx(styles['LogoSuite__logobar-takeoverButton'], takeoverButtonClassName)}\n {...takeoverButtonProps}\n >\n {label}\n </Button>\n </div>\n )\n }\n\n if (marquee) {\n const {className: marqueeDefaultClassName, ...restProps} = defaultProps\n const shouldPause = !isPlaying \|\| prefersReducedMotion\n return (\n <div\n {...restProps}\n className={clsx(\n styles['LogoSuite__logobar--has-marquee'],\n marqueeDefaultClassName,\n shouldPause && styles['LogoSuite__logobar--paused'],\n )}\n >\n <div\n className={clsx(\n styles['LogoSuite__logobar-marquee'],\n isFocusWithin && styles['LogoSuite__logobar-marquee--focused'],\n )}\n onFocus={handleFocus}\n onBlur={handleBlur}\n >\n <div\n className={clsx(\n styles['LogoSuite__logobar-marqueeGroup'],\n styles[`LogoSuite__logobar-marqueeGroup--speed-${marqueeSpeed}`],\n )}\n data-testid={testIds.marqueeGroup}\n >\n {children}\n </div>\n <div\n inert\n aria-hidden=\"true\"\n className={clsx(\n styles['LogoSuite__logobar-marqueeGroup'],\n styles[`LogoSuite__logobar-marqueeGroup--speed-${marqueeSpeed}`],\n )}\n >\n {children}\n </div>\n </div>\n <PlayPauseButton onPlayPause={setIsPlaying} isPlaying={isPlaying} />\n </div>\n )\n }\n\n if (takeoverButton) {\n const {className: defaultClassName, ...restProps} = defaultProps\n return (\n <div {...restProps} className={clsx(defaultClassName, styles['LogoSuite__logobar--has-takeover'])}>\n {children}\n {renderTakeoverButton()}\n </div>\n )\n }\n\n return <div {...defaultProps}>{children}</div>\n },\n)\n\n/\n Use LogoSuite to present a list of logos, such as sponsors or vendors.\n * @see https://primer.style/brand/components/LogoSuite\n */\nexport const LogoSuite = Object.assign(LogoSuiteBase, {\n Heading: _Heading,\n Description: _Description,\n Logobar: _LogoBar,\n testIds,\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"LogoSuite.js","names":[],"sources":["../../src/LogoSuite/LogoSuite.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {type PropsWithChildren, type Ref, forwardRef, useCallback, useEffect, useMemo, useState} from 'react'\nimport {useReducedMotion} from '../hooks/useReducedMotion'\nimport {PauseIcon, PlayIcon} from '@primer/octicons-react'\nimport type {BaseProps} from '../component-helpers'\nimport {Heading, HeadingProps, defaultHeadingTag, Text, TextProps, Grid, Button} from '../'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/logosuite/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/logosuite/base.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './LogoSuite.module.css'\n\nconst testIds = {\n root: 'LogoSuite',\n get marqueeGroup() {\n return `${this.root}-marqueeGroup`\n },\n}\n\nexport type LogoSuiteProps = {\n /\n The horizontal alignment of the LogoSuite.\n /\n align?: 'start' \| 'center' \| 'justify'\n /\n Whether to render a divider immediately after the LogoSuite.\n /\n hasDivider?: boolean\n /\n Test id for the root LogoSuite element.\n /\n 'data-testid'?: string\n /\n Alternative presentation\n /\n variant?: 'default' \| 'gridline-expressive'\n} & BaseProps<HTMLDivElement> &\n React.HTMLAttributes<HTMLDivElement>\n\nconst LogoSuiteBase = ({\n align = 'center',\n children,\n className,\n hasDivider = true,\n variant = 'default',\n 'data-testid': testId,\n}: PropsWithChildren<LogoSuiteProps>) => {\n const childrenArray = useMemo(() => React.Children.toArray(children), [children])\n\n const HeadingChild = childrenArray.find(child => {\n return React.isValidElement(child) && child.type === _Heading\n })\n\n const DescriptionChild = childrenArray.find(child => {\n return React.isValidElement(child) && child.type === _Description\n })\n\n const LogobarChild = childrenArray.find(child => {\n return React.isValidElement(child) && child.type === _LogoBar\n })\n\n if (!HeadingChild) {\n if (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test') {\n // eslint-disable-next-line no-console\n console.warn('LogoSuite: Heading child is required. You may use `visuallyHidden` to hide it from view.')\n }\n }\n\n const isHeadingVisuallyHidden =\n React.isValidElement<LogoSuiteHeadingProps>(HeadingChild) && HeadingChild.props.visuallyHidden\n const isGridlineExpressive = variant === 'gridline-expressive'\n const hasVisibleTextContent = isGridlineExpressive && ((HeadingChild && !isHeadingVisuallyHidden) \|\| DescriptionChild)\n\n return (\n <div\n className={clsx(\n styles.LogoSuite,\n styles[`LogoSuite--${align}`],\n hasDivider && styles['LogoSuite--hasDivider'],\n styles[`LogoSuite--${variant}`],\n className,\n )}\n data-testid={testId}\n >\n {isGridlineExpressive ? (\n <Grid className={styles['LogoSuite__content']}>\n {hasVisibleTextContent && (\n <Grid.Column span={{large: 3}} className={styles['LogoSuite__textContainer']}>\n {HeadingChild}\n {DescriptionChild}\n </Grid.Column>\n )}\n <Grid.Column span={{large: hasVisibleTextContent ? 9 : 12}} className={styles['LogoSuite__logobarContainer']}>\n {!hasVisibleTextContent && isHeadingVisuallyHidden && HeadingChild}\n {LogobarChild}\n </Grid.Column>\n </Grid>\n ) : (\n <>\n {HeadingChild}\n {DescriptionChild}\n {LogobarChild}\n </>\n )}\n </div>\n )\n}\n\nexport type LogoSuiteHeadingProps = BaseProps<HTMLHeadingElement> &\n HeadingProps & {\n /\n Whether to visually hide the heading.\n /\n visuallyHidden?: boolean\n }\n\nconst _Heading = forwardRef(\n (\n {\n as = defaultHeadingTag,\n size = 'subhead-large',\n className,\n children,\n visuallyHidden,\n ...props\n }: PropsWithChildren<LogoSuiteHeadingProps>,\n ref: Ref<HTMLHeadingElement>,\n ) => {\n return (\n <Heading\n ref={ref}\n className={clsx(\n styles['LogoSuite__heading'],\n visuallyHidden && styles['LogoSuite__heading--visually-hidden'],\n visuallyHidden && 'visually-hidden',\n className,\n )}\n size={size}\n as={as}\n {...props}\n >\n {children}\n </Heading>\n )\n },\n)\n\nexport type LogoSuiteDescriptionProps = BaseProps<HTMLParagraphElement> &\n TextProps & {\n children: React.ReactNode \| React.ReactNode[]\n }\n\nconst _Description = forwardRef(\n (\n {className, children, size = '200', variant = 'muted', ...props}: LogoSuiteDescriptionProps,\n ref: Ref<HTMLParagraphElement>,\n ) => {\n return (\n <Text\n as=\"p\"\n ref={ref}\n size={size}\n variant={variant}\n className={clsx(styles['LogoSuite__description'], className)}\n {...props}\n >\n {children}\n </Text>\n )\n },\n)\n\ntype PlayPauseButtonProps = {\n isPlaying?: boolean\n onPlayPause?: (isPlaying: boolean) => void\n}\n\nconst PlayPauseButton = ({isPlaying = true, onPlayPause}: PlayPauseButtonProps) => {\n const onClick = useCallback(() => {\n onPlayPause?.(!isPlaying)\n }, [onPlayPause, isPlaying])\n\n /\n aria-pressed is intentionally not used here to prevent potentially confusing screen reader announcements\n * eg \"Play animation on\" or \"Pause animation off\"\n /\n return (\n <button\n className={styles['LogoSuite__logobar-playPauseButton']}\n type=\"button\"\n onClick={onClick}\n aria-label={isPlaying ? 'Pause animation' : 'Play animation'}\n >\n {isPlaying ? <PauseIcon /> : <PlayIcon />}\n </button>\n )\n}\n\nexport type LogoSuiteLogoBarProps = BaseProps<HTMLDivElement> & {\n children: React.ReactNode \| React.ReactNode[]\n /\n The gap between logos\n /\n gap?: 'default' \| 'condensed'\n /\n Enables an optional marquee effect\n /\n marquee?: boolean\n /\n The speed of the marquee effect\n /\n marqueeSpeed?: 'slow' \| 'normal' \| 'idle'\n /\n The stylistic variant of the LogoBar.\n /\n variant?: 'muted' \| 'emphasis'\n /\n Displays an optional takeover button (as an anchor) on hover/focus.\n /\n takeoverButton?: {\n label: string\n } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> &\n BaseProps<HTMLAnchorElement>\n}\n\nconst _LogoBar = forwardRef(\n (\n {\n className,\n children,\n gap = 'default',\n marquee = false,\n marqueeSpeed = 'normal',\n variant = 'muted',\n takeoverButton,\n ...props\n }: LogoSuiteLogoBarProps,\n ref: Ref<HTMLDivElement>,\n ) => {\n const prefersReducedMotion = useReducedMotion()\n const [isPlaying, setIsPlaying] = useState(() => marquee && !prefersReducedMotion && marqueeSpeed !== 'idle')\n\n useEffect(() => {\n setIsPlaying(marquee && !prefersReducedMotion && marqueeSpeed !== 'idle')\n }, [marquee, prefersReducedMotion, marqueeSpeed])\n\n if (marquee && takeoverButton) {\n if (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test') {\n // eslint-disable-next-line no-console\n console.warn(\n 'LogoSuite.Logobar: `takeoverButton` cant be used with `marquee` prop due to accessibility risks. Set `marquee={false}` to use the takeover feature.',\n )\n }\n }\n\n const defaultProps = {\n ref,\n className: clsx(\n styles['LogoSuite__logobar'],\n styles[`LogoSuite__logobar--variant-${variant}`],\n styles[`LogoSuite__logobar--gap-${gap}`],\n className,\n ),\n ...props,\n }\n\n const [isFocusWithin, setIsFocusWithin] = useState(false)\n\n const handleFocus = useCallback(() => {\n setIsFocusWithin(true)\n }, [])\n\n const handleBlur = useCallback((event: React.FocusEvent) => {\n if (!event.currentTarget.contains(event.relatedTarget as Node)) {\n setIsFocusWithin(false)\n }\n }, [])\n\n const renderTakeoverButton = () => {\n if (!takeoverButton) return null\n const {className: takeoverButtonClassName, label, ref: _ref, ...takeoverButtonProps} = takeoverButton\n return (\n <div className={styles['LogoSuite__logobar-takeoverButtonContainer']}>\n <Button\n as=\"a\"\n variant=\"primary\"\n className={clsx(styles['LogoSuite__logobar-takeoverButton'], takeoverButtonClassName)}\n {...takeoverButtonProps}\n >\n {label}\n </Button>\n </div>\n )\n }\n\n if (marquee) {\n const {className: marqueeDefaultClassName, ...restProps} = defaultProps\n const shouldPause = !isPlaying \|\| prefersReducedMotion\n return (\n <div\n {...restProps}\n className={clsx(\n styles['LogoSuite__logobar--has-marquee'],\n marqueeDefaultClassName,\n shouldPause && styles['LogoSuite__logobar--paused'],\n )}\n >\n <div\n className={clsx(\n styles['LogoSuite__logobar-marquee'],\n isFocusWithin && styles['LogoSuite__logobar-marquee--focused'],\n )}\n onFocus={handleFocus}\n onBlur={handleBlur}\n >\n <div\n className={clsx(\n styles['LogoSuite__logobar-marqueeGroup'],\n styles[`LogoSuite__logobar-marqueeGroup--speed-${marqueeSpeed}`],\n )}\n data-testid={testIds.marqueeGroup}\n >\n {children}\n </div>\n <div\n inert\n aria-hidden=\"true\"\n className={clsx(\n styles['LogoSuite__logobar-marqueeGroup'],\n styles[`LogoSuite__logobar-marqueeGroup--speed-${marqueeSpeed}`],\n )}\n >\n {children}\n </div>\n </div>\n <PlayPauseButton onPlayPause={setIsPlaying} isPlaying={isPlaying} />\n </div>\n )\n }\n\n if (takeoverButton) {\n const {className: defaultClassName, ...restProps} = defaultProps\n return (\n <div {...restProps} className={clsx(defaultClassName, styles['LogoSuite__logobar--has-takeover'])}>\n {children}\n {renderTakeoverButton()}\n </div>\n )\n }\n\n return <div {...defaultProps}>{children}</div>\n },\n)\n\n/\n Use LogoSuite to present a list of logos, such as sponsors or vendors.\n * @see https://primer.style/brand/components/LogoSuite\n */\nexport const LogoSuite = Object.assign(LogoSuiteBase, {\n Heading: _Heading,\n Description: _Description,\n Logobar: _LogoBar,\n testIds,\n})\n"],"mappings":"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"}

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

@@ -1,12 +1,13 @@
-import './LogoSuite.module-BCbX-lfy.css';var e = {
-	LogoSuite: "Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ",
+import './LogoSuite.module-BCbX-lfy.css';//#region src/LogoSuite/LogoSuite.module.css
+var e = "Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ", t = "Primer_Brand__LogoSuite-module__LogoSuite__description___J_Sms", n = "Primer_Brand__LogoSuite-module__LogoSuite__heading___PsSGL", r = "Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC", i = "Primer_Brand__LogoSuite-module__LogobarScrollX___eGhi4", a = "Primer_Brand__LogoSuite-module__LogoSuite__content____8K_Y", o = "Primer_Brand__LogoSuite-module__LogoSuite__textContainer___OB63e", s = "Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC", c = {
+	LogoSuite: e,
 	"LogoSuite--default": "Primer_Brand__LogoSuite-module__LogoSuite--default___mbLiN",
-	LogoSuite__description: "Primer_Brand__LogoSuite-module__LogoSuite__description___J_Sms",
-	LogoSuite__heading: "Primer_Brand__LogoSuite-module__LogoSuite__heading___PsSGL",
+	LogoSuite__description: t,
+	LogoSuite__heading: n,
 	"LogoSuite--start": "Primer_Brand__LogoSuite-module__LogoSuite--start___zqwlX",
 	"LogoSuite--center": "Primer_Brand__LogoSuite-module__LogoSuite--center___j119b",
 	"LogoSuite--justify": "Primer_Brand__LogoSuite-module__LogoSuite--justify___MTk0u",
-	LogoSuite__logobar: "Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC",
+	LogoSuite__logobar: r,
 	"LogoSuite__logobar--gap-default": "Primer_Brand__LogoSuite-module__LogoSuite__logobar--gap-default___sGwUx",
 	"LogoSuite__logobar--gap-condensed": "Primer_Brand__LogoSuite-module__LogoSuite__logobar--gap-condensed___T86E8",
 	"LogoSuite__heading--visually-hidden": "Primer_Brand__LogoSuite-module__LogoSuite__heading--visually-hidden___oZzlO",
@@ -15,7 +16,7 @@ import './LogoSuite.module-BCbX-lfy.css';var e = {
 	"LogoSuite--hasDivider": "Primer_Brand__LogoSuite-module__LogoSuite--hasDivider___Wj8u_",
 	"LogoSuite__logobar--has-marquee": "Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-marquee___tyW6K",
 	"LogoSuite__logobar-marqueeGroup": "Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup___bUhyS",
-	LogobarScrollX: "Primer_Brand__LogoSuite-module__LogobarScrollX___eGhi4",
+	LogobarScrollX: i,
 	"LogoSuite__logobar-marqueeGroup--speed-default": "Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup--speed-default___nsm9D",
 	"LogoSuite__logobar-marqueeGroup--speed-slow": "Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup--speed-slow___NZHrb",
 	"LogoSuite__logobar-marquee": "Primer_Brand__LogoSuite-module__LogoSuite__logobar-marquee____s6pK",
@@ -23,13 +24,13 @@ import './LogoSuite.module-BCbX-lfy.css';var e = {
 	"LogoSuite__logobar-marquee--focused": "Primer_Brand__LogoSuite-module__LogoSuite__logobar-marquee--focused___zizoE",
 	"LogoSuite__logobar-playPauseButton": "Primer_Brand__LogoSuite-module__LogoSuite__logobar-playPauseButton___KDfie",
 	"LogoSuite--gridline-expressive": "Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16",
-	LogoSuite__content: "Primer_Brand__LogoSuite-module__LogoSuite__content____8K_Y",
-	LogoSuite__textContainer: "Primer_Brand__LogoSuite-module__LogoSuite__textContainer___OB63e",
-	LogoSuite__logobarContainer: "Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC",
+	LogoSuite__content: a,
+	LogoSuite__textContainer: o,
+	LogoSuite__logobarContainer: s,
 	"LogoSuite__logobar--has-takeover": "Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf",
 	"LogoSuite__logobar-takeoverButtonContainer": "Primer_Brand__LogoSuite-module__LogoSuite__logobar-takeoverButtonContainer___ehoEd"
 };
 //#endregion
-export { e as default };
+export { e as LogoSuite, a as LogoSuite__content, t as LogoSuite__description, n as LogoSuite__heading, r as LogoSuite__logobar, s as LogoSuite__logobarContainer, o as LogoSuite__textContainer, i as LogobarScrollX, c as default };
 //# sourceMappingURL=LogoSuite.module.js.map

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

@@ -27,22 +27,22 @@ type MediaPlaylistHeadingInternalProps = {
     activeIndex?: number | null;
     itemCount?: number;
 };
-declare function MediaPlaylistHeading({ activeIndex, as, children, className, id, itemCount, ...props }: MediaPlaylistHeadingProps & MediaPlaylistHeadingInternalProps): import("react/jsx-runtime").JSX.Element;
+declare function MediaPlaylistHeading({ activeIndex, as, children, className, id, itemCount, ...props }: MediaPlaylistHeadingProps & MediaPlaylistHeadingInternalProps): React.JSX.Element;
 export type MediaPlaylistItemProps = React.PropsWithChildren<{
     /**
      * An optional thumbnail to be shown in the playlist for this item.
      */
     thumbnail?: React.ReactNode;
 } & BaseProps<HTMLDivElement>>;
-declare function MediaPlaylistItem({ children }: MediaPlaylistItemProps): import("react/jsx-runtime").JSX.Element;
+declare function MediaPlaylistItem({ children }: MediaPlaylistItemProps): React.JSX.Element;
 export type MediaPlaylistItemHeadingProps = Omit<TextProps, 'as' | 'children' | 'title'> & {
     children?: React.ReactNode;
     description?: React.ReactNode;
     title?: React.ReactNode;
 };
-declare function MediaPlaylistItemHeading({ children, className, description, font, size, title, variant, weight, ...props }: MediaPlaylistItemHeadingProps): import("react/jsx-runtime").JSX.Element;
+declare function MediaPlaylistItemHeading({ children, className, description, font, size, title, variant, weight, ...props }: MediaPlaylistItemHeadingProps): React.JSX.Element;
 export type MediaPlaylistItemContentProps = React.HTMLAttributes<HTMLDivElement>;
-declare function MediaPlaylistItemContent({ children, className, ...props }: MediaPlaylistItemContentProps): import("react/jsx-runtime").JSX.Element;
+declare function MediaPlaylistItemContent({ children, className, ...props }: MediaPlaylistItemContentProps): React.JSX.Element;
 export type MediaPlaylistItemMediaProps = React.HTMLAttributes<HTMLDivElement>;
 /**
  * Use MediaPlaylist to pair media playback with an itemized, thumbnail-backed playlist.

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MediaPlaylist.d.ts","sourceRoot":"","sources":["../../src/MediaPlaylist/MediaPlaylist.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiC,MAAM,OAAO,CAAA;AAGrD,OAAO,EAAgB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAC,MAAM,IAAI,CAAA;AAKnE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AACnD;;GAEG;AACH,OAAO,kHAAkH,CAAA;AAOzH,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACvD;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAC,GACA,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAA;AA6HxD,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC9D,EAAE,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAA;CACvC,CAAC,GACA,SAAS,CAAC,cAAc,CAAC,CAAA;AAE3B,KAAK,iCAAiC,GAAG;IACvC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,iBAAS,oBAAoB,CAAC,EAC5B,WAAkB,EAClB,EAAS,EACT,QAAQ,EACR,SAAS,EACT,EAAE,EACF,SAAa,EACb,GAAG,KAAK,EACT,EAAE,yBAAyB,GAAG,iCAAiC,~~2CAa~~/D;AAED,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,iBAAiB,CAC1D;IACE;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B,GAAG,SAAS,CAAC,cAAc,CAAC,CAC9B,CAAA;AAED,iBAAS,iBAAiB,CAAC,EAAC,QAAQ,EAAC,EAAE,sBAAsB,~~2CAE5D~~;AAED,MAAM,MAAM,6BAA6B,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,UAAU,GAAG,OAAO,CAAC,GAAG;IACzF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB,CAAA;AAED,iBAAS,wBAAwB,CAAC,EAChC,QAAQ,EACR,SAAS,EACT,WAAW,EACX,IAAkB,EAClB,IAAY,EACZ,KAAK,EACL,OAAmB,EACnB,MAAiB,EACjB,GAAG,KAAK,EACT,EAAE,6BAA6B,~~2CA4B~~/B;AAED,MAAM,MAAM,6BAA6B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAEhF,iBAAS,wBAAwB,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,6BAA6B,~~2CAM~~/F;AAED,MAAM,MAAM,2BAA2B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;~~AAyB9E~~;;GAEG;AACH,eAAO,MAAM,aAAa;~~IA7QxB~~;;OAEG;2BACoB,MAAM;IAC7B;;OAEG;oBACa,MAAM;IACtB;;OAEG;eACQ,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI;oBAC1B,MAAM;;;;;;;;;;;;~~CAwQtB~~,CAAA"}
1	+ {"version":3,"file":"MediaPlaylist.d.ts","sourceRoot":"","sources":["../../src/MediaPlaylist/MediaPlaylist.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiC,MAAM,OAAO,CAAA;AAGrD,OAAO,EAAgB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAC,MAAM,IAAI,CAAA;AAKnE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AACnD;;GAEG;AACH,OAAO,kHAAkH,CAAA;AAOzH,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACvD;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAC,GACA,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAA;AA6HxD,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC9D,EAAE,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAA;CACvC,CAAC,GACA,SAAS,CAAC,cAAc,CAAC,CAAA;AAE3B,KAAK,iCAAiC,GAAG;IACvC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,iBAAS,oBAAoB,CAAC,EAC5B,WAAkB,EAClB,EAAS,EACT,QAAQ,EACR,SAAS,EACT,EAAE,EACF,SAAa,EACb,GAAG,KAAK,EACT,EAAE,yBAAyB,GAAG,iCAAiC,qBAa/D;AAED,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,iBAAiB,CAC1D;IACE;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B,GAAG,SAAS,CAAC,cAAc,CAAC,CAC9B,CAAA;AAED,iBAAS,iBAAiB,CAAC,EAAC,QAAQ,EAAC,EAAE,sBAAsB,qBAE5D;AAED,MAAM,MAAM,6BAA6B,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,UAAU,GAAG,OAAO,CAAC,GAAG;IACzF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB,CAAA;AAED,iBAAS,wBAAwB,CAAC,EAChC,QAAQ,EACR,SAAS,EACT,WAAW,EACX,IAAkB,EAClB,IAAY,EACZ,KAAK,EACL,OAAmB,EACnB,MAAiB,EACjB,GAAG,KAAK,EACT,EAAE,6BAA6B,qBA4B/B;AAED,MAAM,MAAM,6BAA6B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAEhF,iBAAS,wBAAwB,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,6BAA6B,qBAM/F;AAED,MAAM,MAAM,2BAA2B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAwB9E;;GAEG;AACH,eAAO,MAAM,aAAa;IA5QxB;;OAEG;2BACoB,MAAM;IAC7B;;OAEG;oBACa,MAAM;IACtB;;OAEG;eACQ,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI;oBAC1B,MAAM;;;;;;;;;;;;CAuQtB,CAAA"}

package/esm/MediaPlaylist/MediaPlaylist.js CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MediaPlaylist.js","names":[],"sources":["../../src/MediaPlaylist/MediaPlaylist.tsx"],"sourcesContent":["import React, {cloneElement, forwardRef} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Heading, Text, type HeadingProps, type TextProps} from '..'\nimport {Pagination} from '../Pagination'\nimport {useId} from '../hooks/useId'\n\nimport {type MediaPlaylistComponentTypes, useMediaPlaylist} from './useMediaPlaylist'\nimport type {BaseProps} from '../component-helpers'\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/media-playlist/colors-with-modes.css'\n\n/* Main Stylesheet (as a CSS Module) /\n\nimport styles from './MediaPlaylist.module.css'\nimport gridlineStyles from '../component-helpers/shared.module.css'\n\nexport type MediaPlaylistProps = React.PropsWithChildren<{\n /\n The index of the item to be selected by default. This is ignored if `selectedIndex` is provided.\n /\n defaultSelectedIndex?: number\n /\n The index of the currently selected item. This makes the component controlled.\n /\n selectedIndex?: number\n /\n Callback fired when the selected index changes.\n /\n onChange?: (selectedIndex: number) => void\n 'data-testid'?: string\n}> &\n Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>\n\nconst MediaPlaylistRoot = forwardRef<HTMLDivElement, MediaPlaylistProps>(\n ({children, className, defaultSelectedIndex = 0, onChange, selectedIndex, 'data-testid': testId, ...props}, ref) => {\n const uniqueId = useId()\n\n const {\n activeIndex,\n currentItemPage,\n getPaginationAttributes,\n getTabListProps,\n getTabPanelProps,\n getTabProps,\n handlePageChange,\n hasOverflowItems,\n headingChild,\n isItemSelected,\n items,\n setItemRef,\n tabListRef,\n } = useMediaPlaylist({\n children,\n components: mediaPlaylistComponents,\n defaultSelectedIndex,\n onChange,\n selectedIndex,\n })\n\n const headingId = headingChild?.props.id ?? `${uniqueId}-heading`\n\n if (!headingChild && (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test')) {\n // eslint-disable-next-line no-console\n console.warn(\n 'MediaPlaylist: Heading child is required. This element labels the playlist for assistive technologies.',\n )\n }\n\n const tabListProps = headingChild\n ? getTabListProps({labelledBy: headingId})\n : getTabListProps({label: 'Media playlist'})\n\n return (\n <div\n ref={ref}\n className={clsx(\n styles.MediaPlaylist,\n gridlineStyles.gridline,\n hasOverflowItems && styles['MediaPlaylist--overflowItems'],\n className,\n )}\n data-testid={testId \|\| testIds.root}\n {...props}\n >\n <div className={styles.MediaPlaylist__layout}>\n <div className={styles.MediaPlaylist__playlist}>\n {headingChild &&\n cloneElement(headingChild, {\n activeIndex,\n id: headingId,\n itemCount: items.length,\n })}\n <div {...tabListProps} ref={tabListRef} className={styles.MediaPlaylist__tablist}>\n {items.map((item, index) => {\n const tabProps = getTabProps<HTMLButtonElement>(String(index))\n\n return (\n <div\n key={index}\n ref={element => {\n setItemRef(index, element)\n }}\n className={clsx(\n styles.MediaPlaylist__item,\n isItemSelected(index) && styles['MediaPlaylist__item--selected'],\n item.className,\n )}\n >\n <button type=\"button\" {...tabProps} className={styles.MediaPlaylist__tab}>\n <span className={styles.MediaPlaylist__tabContent}>\n {item.thumbnail && <span className={styles.MediaPlaylist__thumbnail}>{item.thumbnail}</span>}\n <span className={styles.MediaPlaylist__itemHeadingContent}>{item.heading}</span>\n </span>\n </button>\n </div>\n )\n })}\n </div>\n\n {hasOverflowItems && (\n <Pagination\n className={styles.MediaPlaylist__pagination}\n pageCount={items.length}\n currentPage={currentItemPage}\n onPageChange={handlePageChange}\n hrefBuilder={() => '#'}\n pageAttributesBuilder={getPaginationAttributes}\n aria-label=\"Media playlist items\"\n showPages={false}\n />\n )}\n </div>\n\n <div className={styles.MediaPlaylist__mediaPanels}>\n {items.map((item, index) => {\n const panelProps = getTabPanelProps(String(index))\n\n return (\n <div\n key={index}\n {...panelProps}\n tabIndex={-1}\n className={clsx(styles.MediaPlaylist__mediaPanel, styles.MediaPlaylist__panel)}\n >\n {item.media}\n <div className={styles.MediaPlaylist__panelContent}>{item.content}</div>\n </div>\n )\n })}\n </div>\n </div>\n </div>\n )\n },\n)\n\nexport type MediaPlaylistHeadingProps = React.PropsWithChildren<{\n as?: Exclude<HeadingProps['as'], 'h1'>\n}> &\n BaseProps<HTMLDivElement>\n\ntype MediaPlaylistHeadingInternalProps = {\n activeIndex?: number \| null\n itemCount?: number\n}\n\nfunction MediaPlaylistHeading({\n activeIndex = null,\n as = 'h3',\n children,\n className,\n id,\n itemCount = 0,\n ...props\n}: MediaPlaylistHeadingProps & MediaPlaylistHeadingInternalProps) {\n return (\n <div className={clsx(styles.MediaPlaylist__heading, className)} {...props}>\n <Heading as={as} id={id} className={styles.MediaPlaylist__headingLabel}>\n {children}\n </Heading>\n {itemCount > 0 && activeIndex !== null && (\n <span className={styles.MediaPlaylist__headingCounter} aria-live=\"polite\">\n {activeIndex + 1}/{itemCount}\n </span>\n )}\n </div>\n )\n}\n\nexport type MediaPlaylistItemProps = React.PropsWithChildren<\n {\n /\n An optional thumbnail to be shown in the playlist for this item.\n /\n thumbnail?: React.ReactNode\n } & BaseProps<HTMLDivElement>\n>\n\nfunction MediaPlaylistItem({children}: MediaPlaylistItemProps) {\n return <>{children}</>\n}\n\nexport type MediaPlaylistItemHeadingProps = Omit<TextProps, 'as' \| 'children' \| 'title'> & {\n children?: React.ReactNode\n description?: React.ReactNode\n title?: React.ReactNode\n}\n\nfunction MediaPlaylistItemHeading({\n children,\n className,\n description,\n font = 'mona-sans',\n size = '200',\n title,\n variant = 'default',\n weight = 'medium',\n ...props\n}: MediaPlaylistItemHeadingProps) {\n const hasStructuredContent = title !== undefined \|\| description !== undefined\n const headingTitle = title ?? children\n\n return (\n <Text\n {...props}\n as=\"span\"\n className={clsx(styles.MediaPlaylist__itemHeading, className)}\n font={font}\n size={size}\n variant={variant}\n weight={weight}\n >\n {hasStructuredContent ? (\n <span className={styles.MediaPlaylist__itemHeadingDetails}>\n {headingTitle && <span className={styles.MediaPlaylist__itemHeadingTitle}>{headingTitle}</span>}\n {description && (\n <Text as=\"span\" font=\"monospace\" size=\"100\" variant=\"muted\">\n {description}\n </Text>\n )}\n </span>\n ) : (\n children\n )}\n </Text>\n )\n}\n\nexport type MediaPlaylistItemContentProps = React.HTMLAttributes<HTMLDivElement>\n\nfunction MediaPlaylistItemContent({children, className, ...props}: MediaPlaylistItemContentProps) {\n return (\n <div className={clsx(styles.MediaPlaylist__content, className)} {...props}>\n {children}\n </div>\n )\n}\n\nexport type MediaPlaylistItemMediaProps = React.HTMLAttributes<HTMLDivElement>\n\nconst MediaPlaylistItemMedia = forwardRef<HTMLDivElement, MediaPlaylistItemMediaProps>(function MediaPlaylistItemMedia(\n {children, className, ...props},\n ref,\n) {\n return (\n <div ref={ref} className={clsx(styles.MediaPlaylist__media, className)} {...props}>\n {children}\n </div>\n )\n})\n\nconst mediaPlaylistComponents = {\n Heading: MediaPlaylistHeading,\n Item: MediaPlaylistItem,\n ItemHeading: MediaPlaylistItemHeading,\n ItemContent: MediaPlaylistItemContent,\n ItemMedia: MediaPlaylistItemMedia,\n} satisfies MediaPlaylistComponentTypes\n\nconst testIds = {\n root: 'MediaPlaylist',\n}\n\n/\n Use MediaPlaylist to pair media playback with an itemized, thumbnail-backed playlist.\n */\nexport const MediaPlaylist = Object.assign(MediaPlaylistRoot, {\n Heading: MediaPlaylistHeading,\n Item: MediaPlaylistItem,\n ItemHeading: MediaPlaylistItemHeading,\n ItemContent: MediaPlaylistItemContent,\n ItemMedia: MediaPlaylistItemMedia,\n testIds,\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"MediaPlaylist.js","names":[],"sources":["../../src/MediaPlaylist/MediaPlaylist.tsx"],"sourcesContent":["import React, {cloneElement, forwardRef} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Heading, Text, type HeadingProps, type TextProps} from '..'\nimport {Pagination} from '../Pagination'\nimport {useId} from '../hooks/useId'\n\nimport {type MediaPlaylistComponentTypes, useMediaPlaylist} from './useMediaPlaylist'\nimport type {BaseProps} from '../component-helpers'\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/media-playlist/colors-with-modes.css'\n\n/* Main Stylesheet (as a CSS Module) /\n\nimport styles from './MediaPlaylist.module.css'\nimport gridlineStyles from '../component-helpers/shared.module.css'\n\nexport type MediaPlaylistProps = React.PropsWithChildren<{\n /\n The index of the item to be selected by default. This is ignored if `selectedIndex` is provided.\n /\n defaultSelectedIndex?: number\n /\n The index of the currently selected item. This makes the component controlled.\n /\n selectedIndex?: number\n /\n Callback fired when the selected index changes.\n /\n onChange?: (selectedIndex: number) => void\n 'data-testid'?: string\n}> &\n Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>\n\nconst MediaPlaylistRoot = forwardRef<HTMLDivElement, MediaPlaylistProps>(\n ({children, className, defaultSelectedIndex = 0, onChange, selectedIndex, 'data-testid': testId, ...props}, ref) => {\n const uniqueId = useId()\n\n const {\n activeIndex,\n currentItemPage,\n getPaginationAttributes,\n getTabListProps,\n getTabPanelProps,\n getTabProps,\n handlePageChange,\n hasOverflowItems,\n headingChild,\n isItemSelected,\n items,\n setItemRef,\n tabListRef,\n } = useMediaPlaylist({\n children,\n components: mediaPlaylistComponents,\n defaultSelectedIndex,\n onChange,\n selectedIndex,\n })\n\n const headingId = headingChild?.props.id ?? `${uniqueId}-heading`\n\n if (!headingChild && (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test')) {\n // eslint-disable-next-line no-console\n console.warn(\n 'MediaPlaylist: Heading child is required. This element labels the playlist for assistive technologies.',\n )\n }\n\n const tabListProps = headingChild\n ? getTabListProps({labelledBy: headingId})\n : getTabListProps({label: 'Media playlist'})\n\n return (\n <div\n ref={ref}\n className={clsx(\n styles.MediaPlaylist,\n gridlineStyles.gridline,\n hasOverflowItems && styles['MediaPlaylist--overflowItems'],\n className,\n )}\n data-testid={testId \|\| testIds.root}\n {...props}\n >\n <div className={styles.MediaPlaylist__layout}>\n <div className={styles.MediaPlaylist__playlist}>\n {headingChild &&\n cloneElement(headingChild, {\n activeIndex,\n id: headingId,\n itemCount: items.length,\n })}\n <div {...tabListProps} ref={tabListRef} className={styles.MediaPlaylist__tablist}>\n {items.map((item, index) => {\n const tabProps = getTabProps<HTMLButtonElement>(String(index))\n\n return (\n <div\n key={index}\n ref={element => {\n setItemRef(index, element)\n }}\n className={clsx(\n styles.MediaPlaylist__item,\n isItemSelected(index) && styles['MediaPlaylist__item--selected'],\n item.className,\n )}\n >\n <button type=\"button\" {...tabProps} className={styles.MediaPlaylist__tab}>\n <span className={styles.MediaPlaylist__tabContent}>\n {item.thumbnail && <span className={styles.MediaPlaylist__thumbnail}>{item.thumbnail}</span>}\n <span className={styles.MediaPlaylist__itemHeadingContent}>{item.heading}</span>\n </span>\n </button>\n </div>\n )\n })}\n </div>\n\n {hasOverflowItems && (\n <Pagination\n className={styles.MediaPlaylist__pagination}\n pageCount={items.length}\n currentPage={currentItemPage}\n onPageChange={handlePageChange}\n hrefBuilder={() => '#'}\n pageAttributesBuilder={getPaginationAttributes}\n aria-label=\"Media playlist items\"\n showPages={false}\n />\n )}\n </div>\n\n <div className={styles.MediaPlaylist__mediaPanels}>\n {items.map((item, index) => {\n const panelProps = getTabPanelProps(String(index))\n\n return (\n <div\n key={index}\n {...panelProps}\n tabIndex={-1}\n className={clsx(styles.MediaPlaylist__mediaPanel, styles.MediaPlaylist__panel)}\n >\n {item.media}\n <div className={styles.MediaPlaylist__panelContent}>{item.content}</div>\n </div>\n )\n })}\n </div>\n </div>\n </div>\n )\n },\n)\n\nexport type MediaPlaylistHeadingProps = React.PropsWithChildren<{\n as?: Exclude<HeadingProps['as'], 'h1'>\n}> &\n BaseProps<HTMLDivElement>\n\ntype MediaPlaylistHeadingInternalProps = {\n activeIndex?: number \| null\n itemCount?: number\n}\n\nfunction MediaPlaylistHeading({\n activeIndex = null,\n as = 'h3',\n children,\n className,\n id,\n itemCount = 0,\n ...props\n}: MediaPlaylistHeadingProps & MediaPlaylistHeadingInternalProps) {\n return (\n <div className={clsx(styles.MediaPlaylist__heading, className)} {...props}>\n <Heading as={as} id={id} className={styles.MediaPlaylist__headingLabel}>\n {children}\n </Heading>\n {itemCount > 0 && activeIndex !== null && (\n <span className={styles.MediaPlaylist__headingCounter} aria-live=\"polite\">\n {activeIndex + 1}/{itemCount}\n </span>\n )}\n </div>\n )\n}\n\nexport type MediaPlaylistItemProps = React.PropsWithChildren<\n {\n /\n An optional thumbnail to be shown in the playlist for this item.\n /\n thumbnail?: React.ReactNode\n } & BaseProps<HTMLDivElement>\n>\n\nfunction MediaPlaylistItem({children}: MediaPlaylistItemProps) {\n return <>{children}</>\n}\n\nexport type MediaPlaylistItemHeadingProps = Omit<TextProps, 'as' \| 'children' \| 'title'> & {\n children?: React.ReactNode\n description?: React.ReactNode\n title?: React.ReactNode\n}\n\nfunction MediaPlaylistItemHeading({\n children,\n className,\n description,\n font = 'mona-sans',\n size = '200',\n title,\n variant = 'default',\n weight = 'medium',\n ...props\n}: MediaPlaylistItemHeadingProps) {\n const hasStructuredContent = title !== undefined \|\| description !== undefined\n const headingTitle = title ?? children\n\n return (\n <Text\n {...props}\n as=\"span\"\n className={clsx(styles.MediaPlaylist__itemHeading, className)}\n font={font}\n size={size}\n variant={variant}\n weight={weight}\n >\n {hasStructuredContent ? (\n <span className={styles.MediaPlaylist__itemHeadingDetails}>\n {headingTitle && <span className={styles.MediaPlaylist__itemHeadingTitle}>{headingTitle}</span>}\n {description && (\n <Text as=\"span\" font=\"monospace\" size=\"100\" variant=\"muted\">\n {description}\n </Text>\n )}\n </span>\n ) : (\n children\n )}\n </Text>\n )\n}\n\nexport type MediaPlaylistItemContentProps = React.HTMLAttributes<HTMLDivElement>\n\nfunction MediaPlaylistItemContent({children, className, ...props}: MediaPlaylistItemContentProps) {\n return (\n <div className={clsx(styles.MediaPlaylist__content, className)} {...props}>\n {children}\n </div>\n )\n}\n\nexport type MediaPlaylistItemMediaProps = React.HTMLAttributes<HTMLDivElement>\n\nconst MediaPlaylistItemMedia = forwardRef<HTMLDivElement, MediaPlaylistItemMediaProps>(\n function MediaPlaylistItemMediaWithRef({children, className, ...props}, ref) {\n return (\n <div ref={ref} className={clsx(styles.MediaPlaylist__media, className)} {...props}>\n {children}\n </div>\n )\n },\n)\n\nconst mediaPlaylistComponents = {\n Heading: MediaPlaylistHeading,\n Item: MediaPlaylistItem,\n ItemHeading: MediaPlaylistItemHeading,\n ItemContent: MediaPlaylistItemContent,\n ItemMedia: MediaPlaylistItemMedia,\n} satisfies MediaPlaylistComponentTypes\n\nconst testIds = {\n root: 'MediaPlaylist',\n}\n\n/\n Use MediaPlaylist to pair media playback with an itemized, thumbnail-backed playlist.\n */\nexport const MediaPlaylist = Object.assign(MediaPlaylistRoot, {\n Heading: MediaPlaylistHeading,\n Item: MediaPlaylistItem,\n ItemHeading: MediaPlaylistItemHeading,\n ItemContent: MediaPlaylistItemContent,\n ItemMedia: MediaPlaylistItemMedia,\n testIds,\n})\n"],"mappings":"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"}