npm - @primer/react-brand - Versions diffs - 0.79.1-rc.ed00156c → 0.80.0-rc.4bfa3a79 - Mend

@primer/react-brand 0.79.1-rc.ed00156c → 0.80.0-rc.4bfa3a79

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

package/esm/LogoSuite/LogoSuite.js CHANGED Viewed

@@ -5,8 +5,8 @@ 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 } 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                                                                                                       */
+import { PlayIcon as c } from "../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-BsfJ9fNj.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";
@@ -20,20 +20,20 @@ var y = {
 }, b = ({ align: n = "center", children: r, className: i, hasDivider: a = !0, variant: o = "default", "data-testid": s }) => {
 	let c = m(() => u.Children.toArray(r), [r]), d = c.find((e) => u.isValidElement(e) && e.type === x), f = c.find((e) => u.isValidElement(e) && e.type === S), p = c.find((e) => u.isValidElement(e) && e.type === w);
 	d || (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("LogoSuite: Heading child is required. You may use `visuallyHidden` to hide it from view.");
-	let h = u.isValidElement(d) && d.props.visuallyHidden, y = o === "gridline-expressive", b = y && (d && !h || f);
+	let h = u.isValidElement(d) && d.props.visuallyHidden, y = o === "gridline", b = o === "gridline-expressive", C = y || b, T = C && (d && !h || f);
 	return /* @__PURE__ */ _("div", {
 		className: e(l.LogoSuite, l[`LogoSuite--${n}`], a && l["LogoSuite--hasDivider"], l[`LogoSuite--${o}`], i),
 		"data-testid": s,
-		children: y ? /* @__PURE__ */ v(t, {
+		children: C ? /* @__PURE__ */ v(t, {
 			className: l.LogoSuite__content,
-			children: [b && /* @__PURE__ */ v(t.Column, {
-				span: { large: 3 },
+			children: [T && /* @__PURE__ */ v(t.Column, {
+				span: { large: b ? 3 : 12 },
 				className: l.LogoSuite__textContainer,
 				children: [d, f]
 			}), /* @__PURE__ */ v(t.Column, {
-				span: { large: b ? 9 : 12 },
+				span: { large: b && T ? 9 : 12 },
 				className: l.LogoSuite__logobarContainer,
-				children: [!b && h && d, p]
+				children: [!T && h && d, p]
 			})]
 		}) : /* @__PURE__ */ v(g, { children: [
 			d,
@@ -67,26 +67,29 @@ var y = {
 		"aria-label": e ? "Pause animation" : "Play animation",
 		children: _(e ? s : c, {})
 	});
-}, w = d(({ className: t, children: r, gap: i = "default", marquee: a = !1, marqueeSpeed: s = "normal", variant: c = "muted", takeoverButton: u, ...d }, m) => {
-	let g = n(), [b, x] = h(() => a && !g && s !== "idle");
+}, w = d(({ className: t, children: r, gap: i = "default", marquee: a = !1, marqueeSpeed: s = "normal", variant: c = "muted", takeoverButton: d, ...m }, g) => {
+	let b = n(), [x, S] = h(() => a && !b && s !== "idle");
 	p(() => {
-		x(a && !g && s !== "idle");
+		S(a && !b && s !== "idle");
 	}, [
 		a,
-		g,
+		b,
 		s
-	]), a && u && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("LogoSuite.Logobar: `takeoverButton` cant be used with `marquee` prop due to accessibility risks. Set `marquee={false}` to use the takeover feature.");
-	let S = {
-		ref: m,
-		className: e(l.LogoSuite__logobar, l[`LogoSuite__logobar--variant-${c}`], l[`LogoSuite__logobar--gap-${i}`], t),
-		...d
-	}, [w, T] = h(!1), E = f(() => {
-		T(!0);
-	}, []), D = f((e) => {
-		e.currentTarget.contains(e.relatedTarget) || T(!1);
-	}, []), O = () => {
-		if (!u) return null;
-		let { className: t, label: n, ref: r, ...i } = u;
+	]), a && d && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("LogoSuite.Logobar: `takeoverButton` cant be used with `marquee` prop due to accessibility risks. Set `marquee={false}` to use the takeover feature.");
+	let w = (e) => {
+		let t = u.Children.toArray(e);
+		return t.length > 0 && t.every((e) => u.isValidElement(e) ? e.type === "a" || e.type === u.Fragment && w(e.props.children) : !1);
+	}, T = w(r), E = {
+		ref: g,
+		className: e(l.LogoSuite__logobar, l[`LogoSuite__logobar--variant-${c}`], l[`LogoSuite__logobar--gap-${i}`], T && l["LogoSuite__logobar--has-linked-logos"], t),
+		...m
+	}, [D, O] = h(!1), k = f(() => {
+		O(!0);
+	}, []), A = f((e) => {
+		e.currentTarget.contains(e.relatedTarget) || O(!1);
+	}, []), j = () => {
+		if (!d) return null;
+		let { className: t, label: n, ref: r, ...i } = d;
 		return /* @__PURE__ */ _("div", {
 			className: l["LogoSuite__logobar-takeoverButtonContainer"],
 			children: /* @__PURE__ */ _(o, {
@@ -99,14 +102,14 @@ var y = {
 		});
 	};
 	if (a) {
-		let { className: t, ...n } = S, i = !b || g;
+		let { className: t, ...n } = E, i = !x || b;
 		return /* @__PURE__ */ v("div", {
 			...n,
 			className: e(l["LogoSuite__logobar--has-marquee"], t, i && l["LogoSuite__logobar--paused"]),
 			children: [/* @__PURE__ */ v("div", {
-				className: e(l["LogoSuite__logobar-marquee"], w && l["LogoSuite__logobar-marquee--focused"]),
-				onFocus: E,
-				onBlur: D,
+				className: e(l["LogoSuite__logobar-marquee"], D && l["LogoSuite__logobar-marquee--focused"]),
+				onFocus: k,
+				onBlur: A,
 				children: [/* @__PURE__ */ _("div", {
 					className: e(l["LogoSuite__logobar-marqueeGroup"], l[`LogoSuite__logobar-marqueeGroup--speed-${s}`]),
 					"data-testid": y.marqueeGroup,
@@ -118,21 +121,21 @@ var y = {
 					children: r
 				})]
 			}), /* @__PURE__ */ _(C, {
-				onPlayPause: x,
-				isPlaying: b
+				onPlayPause: S,
+				isPlaying: x
 			})]
 		});
 	}
-	if (u) {
-		let { className: t, ...n } = S;
+	if (d) {
+		let { className: t, ...n } = E;
 		return /* @__PURE__ */ v("div", {
 			...n,
 			className: e(t, l["LogoSuite__logobar--has-takeover"]),
-			children: [r, O()]
+			children: [r, j()]
 		});
 	}
 	return /* @__PURE__ */ _("div", {
-		...S,
+		...E,
 		children: r
 	});
 }), T = Object.assign(b, {

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} from '@primer/octicons-react'\nimport type {BaseProps} from '../component-helpers'\nimport {Heading, HeadingProps, defaultHeadingTag, Text, TextProps, Grid, Button} from '../'\nimport {PlayIcon} from '../PlayIcon'\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' \| '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 isGridline = variant === 'gridline'\n const isGridlineExpressive = variant === 'gridline-expressive'\n const hasGridlineLayout = isGridline \|\| isGridlineExpressive\n const hasVisibleTextContent = hasGridlineLayout && ((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 {hasGridlineLayout ? (\n <Grid className={styles['LogoSuite__content']}>\n {hasVisibleTextContent && (\n <Grid.Column span={{large: isGridlineExpressive ? 3 : 12}} className={styles['LogoSuite__textContainer']}>\n {HeadingChild}\n {DescriptionChild}\n </Grid.Column>\n )}\n <Grid.Column\n span={{large: isGridlineExpressive && hasVisibleTextContent ? 9 : 12}}\n className={styles['LogoSuite__logobarContainer']}\n >\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 /\n The logos to display in the LogoBar.\n * Accepts either SVG/Image elements or logos wrapped with links\n /\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 checkAllLogosAreLinks = (nodes: React.ReactNode): boolean => {\n const childNodes = React.Children.toArray(nodes)\n\n return (\n childNodes.length > 0 &&\n childNodes.every(child => {\n if (!React.isValidElement<PropsWithChildren>(child)) return false\n if (child.type === 'a') return true\n return child.type === React.Fragment && checkAllLogosAreLinks(child.props.children)\n })\n )\n }\n\n const hasLinkedLogos = checkAllLogosAreLinks(children)\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 hasLinkedLogos && styles['LogoSuite__logobar--has-linked-logos'],\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":";;;;;;;;;;;;;;AAiBA,IAAM,IAAU;CACd,MAAM;CACN,IAAI,eAAe;EACjB,OAAO,GAAG,KAAK,KAAK;CACtB;AACF,GAsBM,KAAiB,EACrB,WAAQ,UACR,aACA,cACA,gBAAa,IACb,aAAU,WACV,eAAe,QACwB;CACvC,IAAM,IAAgB,QAAc,EAAM,SAAS,QAAQ,CAAQ,GAAG,CAAC,CAAQ,CAAC,GAE1E,IAAe,EAAc,MAAK,MAC/B,EAAM,eAAe,CAAK,KAAK,EAAM,SAAS,CACtD,GAEK,IAAmB,EAAc,MAAK,MACnC,EAAM,eAAe,CAAK,KAAK,EAAM,SAAS,CACtD,GAEK,IAAe,EAAc,MAAK,MAC/B,EAAM,eAAe,CAAK,KAAK,EAAM,SAAS,CACtD;CAED,AAAK,+BAC0B,iBAAA,QAAA,IAAA,aAA0C,WAErE,QAAQ,KAAK,0FAA0F;CAI3G,IAAM,IACJ,EAAM,eAAsC,CAAY,KAAK,EAAa,MAAM,gBAC5E,IAAa,MAAY,YACzB,IAAuB,MAAY,uBACnC,IAAoB,KAAc,GAClC,IAAwB,MAAuB,KAAgB,CAAC,KAA4B;CAElG,OACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAO,WACP,EAAO,cAAc,MACrB,KAAc,EAAO,0BACrB,EAAO,cAAc,MACrB,CACF;EACA,eAAa;YAEZ,IACC,kBAAC,GAAD;GAAM,WAAW,EAAO;aAAxB,CACG,KACC,kBAAC,EAAK,QAAN;IAAa,MAAM,EAAC,OAAO,IAAuB,IAAI,GAAE;IAAG,WAAW,EAAO;cAA7E,CACG,GACA,CACU;OAEf,kBAAC,EAAK,QAAN;IACE,MAAM,EAAC,OAAO,KAAwB,IAAwB,IAAI,GAAE;IACpE,WAAW,EAAO;cAFpB,CAIG,CAAC,KAAyB,KAA2B,GACrD,CACU;KACT;OAEN,kBAAA,GAAA,EAAA,UAAA;GACG;GACA;GACA;EACD,EAAA,CAAA;CAED,CAAA;AAET,GAUM,IAAW,GAEb,EACE,QAAK,GACL,UAAO,iBACP,cACA,aACA,mBACA,GAAG,KAEL,MAGE,kBAAC,GAAD;CACO;CACL,WAAW,EACT,EAAO,oBACP,KAAkB,EAAO,wCACzB,KAAkB,mBAClB,CACF;CACM;CACF;CACJ,GAAI;CAEH;AACM,CAAA,CAGf,GAOM,IAAe,GAEjB,EAAC,cAAW,aAAU,UAAO,OAAO,aAAU,SAAS,GAAG,KAC1D,MAGE,kBAAC,GAAD;CACE,IAAG;CACE;CACC;CACG;CACT,WAAW,EAAK,EAAO,wBAA2B,CAAS;CAC3D,GAAI;CAEH;AACG,CAAA,CAGZ,GAOM,KAAmB,EAAC,eAAY,IAAM,qBAAuC;CACjF,IAAM,IAAU,QAAkB;EAChC,IAAc,CAAC,CAAS;CAC1B,GAAG,CAAC,GAAa,CAAS,CAAC;CAM3B,OACE,kBAAC,UAAD;EACE,WAAW,EAAO;EAClB,MAAK;EACI;EACT,cAAY,IAAY,oBAAoB;YAE/B,EAAZ,IAAa,IAAgB,GAAjB,CAAY,CAAe;CAClC,CAAA;AAEZ,GAiCM,IAAW,GAEb,EACE,cACA,aACA,SAAM,WACN,aAAU,IACV,kBAAe,UACf,aAAU,SACV,mBACA,GAAG,KAEL,MACG;CACH,IAAM,IAAuB,EAAiB,GACxC,CAAC,GAAW,KAAgB,QAAe,KAAW,CAAC,KAAwB,MAAiB,MAAM;CAM5G,AAJA,QAAgB;EACd,EAAa,KAAW,CAAC,KAAwB,MAAiB,MAAM;CAC1E,GAAG;EAAC;EAAS;EAAsB;CAAY,CAAC,GAE5C,KAAW,+BACgB,iBAAA,QAAA,IAAA,aAA0C,WAErE,QAAQ,KACN,qJACF;CAIJ,IAAM,KAAyB,MAAoC;EACjE,IAAM,IAAa,EAAM,SAAS,QAAQ,CAAK;EAE/C,OACE,EAAW,SAAS,KACpB,EAAW,OAAM,MACV,EAAM,eAAkC,CAAK,IAC9C,EAAM,SAAS,OACZ,EAAM,SAAS,EAAM,YAAY,EAAsB,EAAM,MAAM,QAAQ,IAFtB,EAG7D;CAEL,GAEM,IAAiB,EAAsB,CAAQ,GAE/C,IAAe;EACnB;EACA,WAAW,EACT,EAAO,oBACP,EAAO,+BAA+B,MACtC,EAAO,2BAA2B,MAClC,KAAkB,EAAO,yCACzB,CACF;EACA,GAAG;CACL,GAEM,CAAC,GAAe,KAAoB,EAAS,EAAK,GAElD,IAAc,QAAkB;EACpC,EAAiB,EAAI;CACvB,GAAG,CAAC,CAAC,GAEC,IAAa,GAAa,MAA4B;EAC1D,AAAK,EAAM,cAAc,SAAS,EAAM,aAAqB,KAC3D,EAAiB,EAAK;CAE1B,GAAG,CAAC,CAAC,GAEC,UAA6B;EACjC,IAAI,CAAC,GAAgB,OAAO;EAC5B,IAAM,EAAC,WAAW,GAAyB,UAAO,KAAK,GAAM,GAAG,MAAuB;EACvF,OACE,kBAAC,OAAD;GAAK,WAAW,EAAO;aACrB,kBAAC,GAAD;IACE,IAAG;IACH,SAAQ;IACR,WAAW,EAAK,EAAO,sCAAsC,CAAuB;IACpF,GAAI;cAEH;GACK,CAAA;EACL,CAAA;CAET;CAEA,IAAI,GAAS;EACX,IAAM,EAAC,WAAW,GAAyB,GAAG,MAAa,GACrD,IAAc,CAAC,KAAa;EAClC,OACE,kBAAC,OAAD;GACE,GAAI;GACJ,WAAW,EACT,EAAO,oCACP,GACA,KAAe,EAAO,6BACxB;aANF,CAQE,kBAAC,OAAD;IACE,WAAW,EACT,EAAO,+BACP,KAAiB,EAAO,sCAC1B;IACA,SAAS;IACT,QAAQ;cANV,CAQE,kBAAC,OAAD;KACE,WAAW,EACT,EAAO,oCACP,EAAO,0CAA0C,IACnD;KACA,eAAa,EAAQ;KAEpB;IACE,CAAA,GACL,kBAAC,OAAD;KACE,OAAA;KACA,eAAY;KACZ,WAAW,EACT,EAAO,oCACP,EAAO,0CAA0C,IACnD;KAEC;IACE,CAAA,CACF;OACL,kBAAC,GAAD;IAAiB,aAAa;IAAyB;GAAY,CAAA,CAChE;;CAET;CAEA,IAAI,GAAgB;EAClB,IAAM,EAAC,WAAW,GAAkB,GAAG,MAAa;EACpD,OACE,kBAAC,OAAD;GAAK,GAAI;GAAW,WAAW,EAAK,GAAkB,EAAO,mCAAmC;aAAhG,CACG,GACA,EAAqB,CACnB;;CAET;CAEA,OAAO,kBAAC,OAAD;EAAK,GAAI;EAAe;CAAc,CAAA;AAC/C,CACF,GAMa,IAAY,OAAO,OAAO,GAAe;CACpD,SAAS;CACT,aAAa;CACb,SAAS;CACT;AACF,CAAC"}

package/esm/LogoSuite/LogoSuite.module-BUJyNoZs.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ{padding-block-end:var(--brand-LogoSuite-logobar-rowGap)}.Primer_Brand__LogoSuite-module__LogoSuite--default___mbLiN+.Primer_Brand__LogoSuite-module__LogoSuite--default___mbLiN{padding-block-start:var(--brand-LogoSuite-logobar-rowGap)}.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ:not(:has(.Primer_Brand__LogoSuite-module__LogoSuite__description___J_Sms)) .Primer_Brand__LogoSuite-module__LogoSuite__heading___PsSGL{font-family:var(--brand-fontStack-monospace);font-weight:var(--brand-text-weight-100);font-size:var(--brand-text-size-100);line-height:var(--brand-text-lineHeight-100);letter-spacing:var(--brand-text-letterSpacing-100);text-transform:uppercase;color:var(--brand-color-text-muted)}.Primer_Brand__LogoSuite-module__LogoSuite__heading___PsSGL+.Primer_Brand__LogoSuite-module__LogoSuite__description___J_Sms{padding-block-start:var(--base-size-16)}.Primer_Brand__LogoSuite-module__LogoSuite--start___zqwlX{text-align:left}.Primer_Brand__LogoSuite-module__LogoSuite--center___j119b,.Primer_Brand__LogoSuite-module__LogoSuite--justify___MTk0u{text-align:center}.Primer_Brand__LogoSuite-module__LogoSuite--default___mbLiN:not(.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ+.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ) .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{padding-block-start:var(--base-size-32)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{row-gap:var(--brand-LogoSuite-logobar-rowGap);flex-wrap:wrap;justify-content:center;display:flex}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--gap-default___sGwUx{--marquee-gap:var(--brand-LogoSuite-logobar-marquee-gap-default);-moz-column-gap:var(--brand-LogoSuite-logobar-columnGap-default);column-gap:var(--brand-LogoSuite-logobar-columnGap-default)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--gap-condensed___T86E8{--marquee-gap:var(--brand-LogoSuite-logobar-marquee-gap-condensed);-moz-column-gap:var(--brand-LogoSuite-logobar-columnGap-condensed);column-gap:var(--brand-LogoSuite-logobar-columnGap-condensed)}.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ:not(.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ+.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ) .Primer_Brand__LogoSuite-module__LogoSuite__heading___PsSGL:not(.Primer_Brand__LogoSuite-module__LogoSuite__heading--visually-hidden___oZzlO)+.Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC,.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ:not(.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ+.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ) .Primer_Brand__LogoSuite-module__LogoSuite__description___J_Sms+.Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{margin-block-start:var(--base-size-44);padding-block-start:0}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru svg,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru img,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru a,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR svg,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR img,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR a{width:auto;height:var(--base-size-32)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC img{display:block}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-linked-logos___52pLk :where(a){color:var(--brand-color-text-default)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru:where(:not(.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-linked-logos___52pLk)) svg,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru:where(:not(.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-linked-logos___52pLk)) path{fill:var(--brand-LogoSuite-color-logo-muted)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru:where(:not(.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-linked-logos___52pLk)) img{filter:var(--brand-LogoSuite-color-logo-filter-muted)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR:where(:not(.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-linked-logos___52pLk)) svg,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR:where(:not(.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-linked-logos___52pLk)) path{fill:var(--brand-LogoSuite-color-logo-emphasis)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR:where(:not(.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-linked-logos___52pLk)) img{filter:var(--brand-LogoSuite-color-logo-filter-emphasis)}.Primer_Brand__LogoSuite-module__LogoSuite--start___zqwlX .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{justify-content:center}@media screen and (width>=48rem){.Primer_Brand__LogoSuite-module__LogoSuite--justify___MTk0u .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{justify-content:space-between}}.Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC a:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-2);border-radius:var(--base-size-4)}.Primer_Brand__LogoSuite-module__LogoSuite--hasDivider___Wj8u_{border-bottom:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-marquee___tyW6K{align-items:center;gap:var(--base-size-24);flex-direction:row;max-width:100vw;margin:auto;display:flex;position:relative}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup___bUhyS{justify-content:space-around;align-items:center;gap:var(--marquee-gap);min-width:100%;animation-name:Primer_Brand__LogoSuite-module__LogobarScrollX___eGhi4;animation-duration:var(--brand-LogoSuite-logobar-marquee-default);flex-shrink:0;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal;animation-play-state:running;animation-fill-mode:none;display:flex}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup--speed-default___nsm9D{animation-duration:var(--brand-LogoSuite-logobar-marquee-default)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup--speed-slow___NZHrb{animation-duration:var(--brand-LogoSuite-logobar-marquee-slow)}@keyframes Primer_Brand__LogoSuite-module__LogobarScrollX___eGhi4{0%{transform:translate(0)}to{transform:translateX(calc(-100% - var(--marquee-gap)))}}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marquee____s6pK:hover .Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup___bUhyS,.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marquee____s6pK:focus-within .Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup___bUhyS{animation-play-state:paused}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marquee____s6pK{padding-block:var(--base-size-4);-webkit-user-select:none;user-select:none;gap:var(--marquee-gap);flex:1;min-width:0;display:flex;overflow:hidden visible;-webkit-mask-image:linear-gradient(90deg,#0000,#000 20% 80%,#0000);mask-image:linear-gradient(90deg,#0000,#000 20% 80%,#0000)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--paused___7p9ka *{animation-play-state:paused!important}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marquee--focused___zizoE .Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup___bUhyS{animation-name:none}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-playPauseButton___KDfie{cursor:pointer;width:var(--base-size-32);height:var(--base-size-32);border-radius:var(--base-size-48);border:none;border:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);background-color:var(--brand-LogoSuite-color-control-rest);transition:background-color var(--brand-animation-duration-faster);flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;display:flex}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-playPauseButton___KDfie:hover{background-color:var(--brand-LogoSuite-color-control-hover)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-playPauseButton___KDfie:focus-visible{outline:var(--base-size-4) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-playPauseButton___KDfie svg{width:var(--base-size-16);height:var(--base-size-16);fill:var(--brand-color-text-muted)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-playPauseButton___KDfie path{fill:var(--brand-color-text-muted)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A,.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16{padding:0}.Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A .Primer_Brand__LogoSuite-module__LogoSuite__content____8K_Y,.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__content____8K_Y{gap:0;padding-inline:0}.Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A .Primer_Brand__LogoSuite-module__LogoSuite__textContainer___OB63e,.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__textContainer___OB63e,.Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A .Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC,.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC{flex-direction:column;justify-content:center;display:flex}.Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC,.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{margin-block-start:auto;padding-block-start:0}.Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A .Primer_Brand__LogoSuite-module__LogoSuite__heading___PsSGL+.Primer_Brand__LogoSuite-module__LogoSuite__description___J_Sms,.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__heading___PsSGL+.Primer_Brand__LogoSuite-module__LogoSuite__description___J_Sms{padding-block-start:var(--base-size-8)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC,.Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A .Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-marquee___tyW6K,.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC,.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-marquee___tyW6K{width:100%;max-width:none}.Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A .Primer_Brand__LogoSuite-module__LogoSuite__textContainer___OB63e{padding:var(--base-size-40) var(--base-size-20) 0}.Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A .Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC{padding:var(--base-size-40) var(--base-size-20) var(--base-size-48)}@media screen and (width>=48rem){.Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A .Primer_Brand__LogoSuite-module__LogoSuite__textContainer___OB63e{padding:var(--base-size-48) var(--base-size-40) 0}.Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A .Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC{padding:var(--base-size-40) var(--base-size-40) var(--base-size-64)}}@media screen and (width>=64rem){.Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A .Primer_Brand__LogoSuite-module__LogoSuite__textContainer___OB63e{padding:var(--base-size-48) var(--base-size-64) 0}.Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A .Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC{padding:var(--base-size-48) var(--base-size-64) var(--base-size-64)}}@media screen and (width>=80rem){.Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A .Primer_Brand__LogoSuite-module__LogoSuite__content____8K_Y{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__textContainer___OB63e{padding:var(--base-size-20)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC{padding:var(--base-size-32) var(--base-size-20) var(--base-size-32)}@media screen and (width>=48rem){.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16{padding-inline:91px}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC{padding:var(--base-size-40)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__content____8K_Y{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__textContainer___OB63e{border-inline-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}@media screen and (width>=64rem){.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16{padding-inline:0}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__content____8K_Y{max-width:1280px}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__textContainer___OB63e{text-align:left;padding:var(--base-size-64)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC{padding:var(--base-size-64)}}@media screen and (width>=1281px){.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__content____8K_Y{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC:first-child{border-inline-start:none}}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf{position:relative;overflow:visible}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:before{content:"";inset:calc(-1 * var(--base-size-16)) 0;z-index:1;pointer-events:none;opacity:0;-webkit-backdrop-filter:blur(var(--base-size-6));transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);position:absolute}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:hover:before,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:focus-within:before{opacity:1}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:hover svg,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:focus-within svg,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:hover img,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:focus-within img{opacity:.7;transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-takeoverButtonContainer___ehoEd{opacity:0;visibility:hidden;z-index:2;transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:hover .Primer_Brand__LogoSuite-module__LogoSuite__logobar-takeoverButtonContainer___ehoEd,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:focus-within .Primer_Brand__LogoSuite-module__LogoSuite__logobar-takeoverButtonContainer___ehoEd{opacity:1;visibility:visible}

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

@@ -1,4 +1,4 @@
-import './LogoSuite.module-BCbX-lfy.css';//#region src/LogoSuite/LogoSuite.module.css
+import './LogoSuite.module-BUJyNoZs.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",
@@ -13,6 +13,7 @@ var e = "Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ", t = "Primer_Brand__
 	"LogoSuite__heading--visually-hidden": "Primer_Brand__LogoSuite-module__LogoSuite__heading--visually-hidden___oZzlO",
 	"LogoSuite__logobar--variant-muted": "Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru",
 	"LogoSuite__logobar--variant-emphasis": "Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR",
+	"LogoSuite__logobar--has-linked-logos": "Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-linked-logos___52pLk",
 	"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",
@@ -23,6 +24,7 @@ var e = "Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ", t = "Primer_Brand__
 	"LogoSuite__logobar--paused": "Primer_Brand__LogoSuite-module__LogoSuite__logobar--paused___7p9ka",
 	"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": "Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A",
 	"LogoSuite--gridline-expressive": "Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16",
 	LogoSuite__content: a,
 	LogoSuite__textContainer: o,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"LogoSuite.module.js","names":[],"sources":["../../src/LogoSuite/LogoSuite.module.css"],"sourcesContent":[".LogoSuite {\n padding-block-end: var(--brand-LogoSuite-logobar-rowGap);\n}\n\n.LogoSuite--default + .LogoSuite--default {\n padding-block-start: var(--brand-LogoSuite-logobar-rowGap);\n}\n\n/* Small monospace heading when standalone (no description) /\n.LogoSuite:not(:has(.LogoSuite__description)) .LogoSuite__heading {\n font-family: var(--brand-fontStack-monospace);\n font-weight: var(--brand-text-weight-100);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n letter-spacing: var(--brand-text-letterSpacing-100);\n text-transform: uppercase;\n color: var(--brand-color-text-muted);\n}\n\n.LogoSuite__heading + .LogoSuite__description {\n padding-block-start: var(--base-size-16);\n}\n\n.LogoSuite--start {\n text-align: left;\n}\n\n.LogoSuite--center,\n.LogoSuite--justify {\n text-align: center;\n}\n\n.LogoSuite--default:not(.LogoSuite + .LogoSuite) .LogoSuite__logobar {\n padding-block-start: var(--base-size-32);\n}\n\n.LogoSuite__logobar {\n display: flex;\n flex-wrap: wrap;\n row-gap: var(--brand-LogoSuite-logobar-rowGap);\n justify-content: center;\n}\n\n.LogoSuite__logobar--gap-default {\n --marquee-gap: var(--brand-LogoSuite-logobar-marquee-gap-default);\n column-gap: var(--brand-LogoSuite-logobar-columnGap-default);\n}\n\n.LogoSuite__logobar--gap-condensed {\n --marquee-gap: var(--brand-LogoSuite-logobar-marquee-gap-condensed);\n column-gap: var(--brand-LogoSuite-logobar-columnGap-condensed);\n}\n\n.LogoSuite:not(.LogoSuite + .LogoSuite)\n .LogoSuite__heading:not(.LogoSuite__heading--visually-hidden)\n + .LogoSuite__logobar,\n.LogoSuite:not(.LogoSuite + .LogoSuite) .LogoSuite__description + .LogoSuite__logobar {\n padding-block-start: 0;\n margin-block-start: var(--base-size-44);\n}\n\n.LogoSuite__logobar--variant-muted svg,\n.LogoSuite__logobar--variant-muted img,\n.LogoSuite__logobar--variant-muted a,\n.LogoSuite__logobar--variant-emphasis svg,\n.LogoSuite__logobar--variant-emphasis img,\n.LogoSuite__logobar--variant-emphasis a {\n width: auto;\n height: var(--base-size-32);\n}\n\n.LogoSuite__logobar img {\n display: block;\n}\n\n.LogoSuite__logobar--variant-muted svg,\n.LogoSuite__logobar--variant-muted path {\n fill: var(--brand-LogoSuite-color-logo-muted);\n}\n\n.LogoSuite__logobar--variant-muted img {\n filter: var(--brand-LogoSuite-color-logo-filter-muted);\n}\n\n.LogoSuite__logobar--variant-emphasis svg,\n.LogoSuite__logobar--variant-emphasis path {\n fill: var(--brand-LogoSuite-color-logo-emphasis);\n}\n\n.LogoSuite__logobar--variant-emphasis img {\n filter: var(--brand-LogoSuite-color-logo-filter-emphasis);\n}\n\n.LogoSuite--start .LogoSuite__logobar {\n justify-content: center;\n}\n\n@media screen and (min-width: 48rem) {\n .LogoSuite--justify .LogoSuite__logobar {\n justify-content: space-between;\n }\n}\n\n.LogoSuite__logobar a:focus-visible {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n border-radius: var(--base-size-4);\n}\n\n.LogoSuite--hasDivider {\n border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.LogoSuite__logobar--has-marquee {\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--base-size-24);\n margin: auto;\n max-width: 100vw;\n}\n\n.LogoSuite__logobar-marqueeGroup {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: space-around;\n gap: var(--marquee-gap);\n min-width: 100%;\n animation-name: LogobarScrollX;\n animation-duration: var(--brand-LogoSuite-logobar-marquee-default);\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n animation-direction: normal;\n animation-fill-mode: none;\n animation-play-state: running;\n}\n\n.LogoSuite__logobar-marqueeGroup--speed-default {\n animation-duration: var(--brand-LogoSuite-logobar-marquee-default);\n}\n\n.LogoSuite__logobar-marqueeGroup--speed-slow {\n animation-duration: var(--brand-LogoSuite-logobar-marquee-slow);\n}\n\n@keyframes LogobarScrollX {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(calc(-100% - var(--marquee-gap)));\n }\n}\n\n.LogoSuite__logobar-marquee:hover .LogoSuite__logobar-marqueeGroup,\n.LogoSuite__logobar-marquee:focus-within .LogoSuite__logobar-marqueeGroup {\n animation-play-state: paused;\n}\n\n.LogoSuite__logobar-marquee {\n display: flex;\n overflow-x: hidden;\n overflow-y: visible;\n padding-block: var(--base-size-4);\n user-select: none;\n gap: var(--marquee-gap);\n flex: 1;\n min-width: 0;\n -webkit-mask-image: linear-gradient(\n to right,\n hsl(0 0% 0% / 0),\n hsl(0 0% 0% / 1) 20%,\n hsl(0 0% 0% / 1) 80%,\n hsl(0 0% 0% / 0)\n );\n mask-image: linear-gradient(to right, hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0));\n}\n\n.LogoSuite__logobar--paused {\n animation-play-state: paused !important;\n}\n\n.LogoSuite__logobar-marquee--focused .LogoSuite__logobar-marqueeGroup {\n animation-name: none;\n}\n\n.LogoSuite__logobar-playPauseButton {\n cursor: pointer;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--base-size-32);\n height: var(--base-size-32);\n margin: 0;\n padding: 0;\n border: none;\n border-radius: var(--base-size-48);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n background-color: var(--brand-LogoSuite-color-control-rest);\n transition: background-color var(--brand-animation-duration-faster);\n}\n\n.LogoSuite__logobar-playPauseButton:hover {\n background-color: var(--brand-LogoSuite-color-control-hover);\n}\n\n.LogoSuite__logobar-playPauseButton:focus-visible {\n outline: var(--base-size-4) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\n.LogoSuite__logobar-playPauseButton svg {\n width: var(--base-size-16);\n height: var(--base-size-16);\n fill: var(--brand-color-text-muted);\n}\n\n.LogoSuite__logobar-playPauseButton path {\n fill: var(--brand-color-text-muted);\n}\n\n/* Gridline expressive variant styles /\n.LogoSuite--gridline-expressive {\n padding: 0;\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__content {\n padding-inline: 0;\n gap: 0;\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__textContainer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: var(--base-size-20);\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__logobar {\n margin-block-start: auto;\n}\n.LogoSuite--gridline-expressive .LogoSuite__logobarContainer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: var(--base-size-32) var(--base-size-20) var(--base-size-32);\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__logobar,\n.LogoSuite--gridline-expressive .LogoSuite__logobar--has-marquee {\n max-width: none;\n width: 100%;\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__heading + .LogoSuite__description {\n padding-block-start: var(--base-size-8);\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__logobar {\n padding-block-start: 0;\n}\n\n@media screen and (min-width: 48rem) {\n .LogoSuite--gridline-expressive {\n padding-inline: 91px;\n }\n\n .LogoSuite--gridline-expressive .LogoSuite__logobarContainer {\n padding: var(--base-size-40);\n }\n .LogoSuite--gridline-expressive .LogoSuite__content {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n .LogoSuite--gridline-expressive .LogoSuite__textContainer {\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n@media screen and (min-width: 64rem) {\n .LogoSuite--gridline-expressive {\n padding-inline: 0;\n }\n\n .LogoSuite--gridline-expressive .LogoSuite__content {\n max-width: 1280px;\n }\n\n .LogoSuite--gridline-expressive .LogoSuite__textContainer {\n text-align: left;\n padding: var(--base-size-64);\n }\n\n .LogoSuite--gridline-expressive .LogoSuite__logobarContainer {\n padding: var(--base-size-64);\n }\n}\n\n@media screen and (min-width: 1281px) {\n .LogoSuite--gridline-expressive .LogoSuite__content {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n / When the logobar is the only column visible (no adjacent text), this removes start border /\n .LogoSuite--gridline-expressive .LogoSuite__logobarContainer:first-child {\n border-inline-start: none;\n }\n}\n\n.LogoSuite__logobar--has-takeover {\n position: relative;\n overflow: visible;\n}\n\n/ Glass blur overlay effect /\n.LogoSuite__logobar--has-takeover::before {\n content: '';\n position: absolute;\n inset: calc(-1 var(--base-size-16)) 0;\n z-index: 1;\n pointer-events: none;\n opacity: 0;\n backdrop-filter: blur(var(--base-size-6));\n -webkit-backdrop-filter: blur(var(--base-size-6));\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.LogoSuite__logobar--has-takeover:hover::before,\n.LogoSuite__logobar--has-takeover:focus-within::before {\n opacity: 1;\n}\n\n.LogoSuite__logobar--has-takeover:hover svg,\n.LogoSuite__logobar--has-takeover:focus-within svg,\n.LogoSuite__logobar--has-takeover:hover img,\n.LogoSuite__logobar--has-takeover:focus-within img {\n opacity: 0.7;\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.LogoSuite__logobar-takeoverButtonContainer {\n opacity: 0;\n visibility: hidden;\n z-index: 2;\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.LogoSuite__logobar--has-takeover:hover .LogoSuite__logobar-takeoverButtonContainer,\n.LogoSuite__logobar--has-takeover:focus-within .LogoSuite__logobar-takeoverButtonContainer {\n opacity: 1;\n visibility: visible;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"LogoSuite.module.js","names":[],"sources":["../../src/LogoSuite/LogoSuite.module.css"],"sourcesContent":[".LogoSuite {\n padding-block-end: var(--brand-LogoSuite-logobar-rowGap);\n}\n\n.LogoSuite--default + .LogoSuite--default {\n padding-block-start: var(--brand-LogoSuite-logobar-rowGap);\n}\n\n/* Small monospace heading when standalone (no description) /\n.LogoSuite:not(:has(.LogoSuite__description)) .LogoSuite__heading {\n font-family: var(--brand-fontStack-monospace);\n font-weight: var(--brand-text-weight-100);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n letter-spacing: var(--brand-text-letterSpacing-100);\n text-transform: uppercase;\n color: var(--brand-color-text-muted);\n}\n\n.LogoSuite__heading + .LogoSuite__description {\n padding-block-start: var(--base-size-16);\n}\n\n.LogoSuite--start {\n text-align: left;\n}\n\n.LogoSuite--center,\n.LogoSuite--justify {\n text-align: center;\n}\n\n.LogoSuite--default:not(.LogoSuite + .LogoSuite) .LogoSuite__logobar {\n padding-block-start: var(--base-size-32);\n}\n\n.LogoSuite__logobar {\n display: flex;\n flex-wrap: wrap;\n row-gap: var(--brand-LogoSuite-logobar-rowGap);\n justify-content: center;\n}\n\n.LogoSuite__logobar--gap-default {\n --marquee-gap: var(--brand-LogoSuite-logobar-marquee-gap-default);\n column-gap: var(--brand-LogoSuite-logobar-columnGap-default);\n}\n\n.LogoSuite__logobar--gap-condensed {\n --marquee-gap: var(--brand-LogoSuite-logobar-marquee-gap-condensed);\n column-gap: var(--brand-LogoSuite-logobar-columnGap-condensed);\n}\n\n.LogoSuite:not(.LogoSuite + .LogoSuite)\n .LogoSuite__heading:not(.LogoSuite__heading--visually-hidden)\n + .LogoSuite__logobar,\n.LogoSuite:not(.LogoSuite + .LogoSuite) .LogoSuite__description + .LogoSuite__logobar {\n padding-block-start: 0;\n margin-block-start: var(--base-size-44);\n}\n\n.LogoSuite__logobar--variant-muted svg,\n.LogoSuite__logobar--variant-muted img,\n.LogoSuite__logobar--variant-muted a,\n.LogoSuite__logobar--variant-emphasis svg,\n.LogoSuite__logobar--variant-emphasis img,\n.LogoSuite__logobar--variant-emphasis a {\n width: auto;\n height: var(--base-size-32);\n}\n\n.LogoSuite__logobar img {\n display: block;\n}\n\n.LogoSuite__logobar--has-linked-logos :where(a) {\n color: var(--brand-color-text-default);\n}\n\n.LogoSuite__logobar--variant-muted:where(:not(.LogoSuite__logobar--has-linked-logos)) svg,\n.LogoSuite__logobar--variant-muted:where(:not(.LogoSuite__logobar--has-linked-logos)) path {\n fill: var(--brand-LogoSuite-color-logo-muted);\n}\n\n.LogoSuite__logobar--variant-muted:where(:not(.LogoSuite__logobar--has-linked-logos)) img {\n filter: var(--brand-LogoSuite-color-logo-filter-muted);\n}\n\n.LogoSuite__logobar--variant-emphasis:where(:not(.LogoSuite__logobar--has-linked-logos)) svg,\n.LogoSuite__logobar--variant-emphasis:where(:not(.LogoSuite__logobar--has-linked-logos)) path {\n fill: var(--brand-LogoSuite-color-logo-emphasis);\n}\n\n.LogoSuite__logobar--variant-emphasis:where(:not(.LogoSuite__logobar--has-linked-logos)) img {\n filter: var(--brand-LogoSuite-color-logo-filter-emphasis);\n}\n\n.LogoSuite--start .LogoSuite__logobar {\n justify-content: center;\n}\n\n@media screen and (min-width: 48rem) {\n .LogoSuite--justify .LogoSuite__logobar {\n justify-content: space-between;\n }\n}\n\n.LogoSuite__logobar a:focus-visible {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n border-radius: var(--base-size-4);\n}\n\n.LogoSuite--hasDivider {\n border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.LogoSuite__logobar--has-marquee {\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--base-size-24);\n margin: auto;\n max-width: 100vw;\n}\n\n.LogoSuite__logobar-marqueeGroup {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: space-around;\n gap: var(--marquee-gap);\n min-width: 100%;\n animation-name: LogobarScrollX;\n animation-duration: var(--brand-LogoSuite-logobar-marquee-default);\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n animation-direction: normal;\n animation-fill-mode: none;\n animation-play-state: running;\n}\n\n.LogoSuite__logobar-marqueeGroup--speed-default {\n animation-duration: var(--brand-LogoSuite-logobar-marquee-default);\n}\n\n.LogoSuite__logobar-marqueeGroup--speed-slow {\n animation-duration: var(--brand-LogoSuite-logobar-marquee-slow);\n}\n\n@keyframes LogobarScrollX {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(calc(-100% - var(--marquee-gap)));\n }\n}\n\n.LogoSuite__logobar-marquee:hover .LogoSuite__logobar-marqueeGroup,\n.LogoSuite__logobar-marquee:focus-within .LogoSuite__logobar-marqueeGroup {\n animation-play-state: paused;\n}\n\n.LogoSuite__logobar-marquee {\n display: flex;\n overflow-x: hidden;\n overflow-y: visible;\n padding-block: var(--base-size-4);\n user-select: none;\n gap: var(--marquee-gap);\n flex: 1;\n min-width: 0;\n -webkit-mask-image: linear-gradient(\n to right,\n hsl(0 0% 0% / 0),\n hsl(0 0% 0% / 1) 20%,\n hsl(0 0% 0% / 1) 80%,\n hsl(0 0% 0% / 0)\n );\n mask-image: linear-gradient(to right, hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0));\n}\n\n.LogoSuite__logobar--paused {\n animation-play-state: paused !important;\n}\n\n.LogoSuite__logobar-marquee--focused .LogoSuite__logobar-marqueeGroup {\n animation-name: none;\n}\n\n.LogoSuite__logobar-playPauseButton {\n cursor: pointer;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--base-size-32);\n height: var(--base-size-32);\n margin: 0;\n padding: 0;\n border: none;\n border-radius: var(--base-size-48);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n background-color: var(--brand-LogoSuite-color-control-rest);\n transition: background-color var(--brand-animation-duration-faster);\n}\n\n.LogoSuite__logobar-playPauseButton:hover {\n background-color: var(--brand-LogoSuite-color-control-hover);\n}\n\n.LogoSuite__logobar-playPauseButton:focus-visible {\n outline: var(--base-size-4) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\n.LogoSuite__logobar-playPauseButton svg {\n width: var(--base-size-16);\n height: var(--base-size-16);\n fill: var(--brand-color-text-muted);\n}\n\n.LogoSuite__logobar-playPauseButton path {\n fill: var(--brand-color-text-muted);\n}\n\n/* Shared gridline variant styles /\n.LogoSuite--gridline,\n.LogoSuite--gridline-expressive {\n padding: 0;\n}\n\n.LogoSuite--gridline .LogoSuite__content,\n.LogoSuite--gridline-expressive .LogoSuite__content {\n padding-inline: 0;\n gap: 0;\n}\n\n.LogoSuite--gridline .LogoSuite__textContainer,\n.LogoSuite--gridline-expressive .LogoSuite__textContainer,\n.LogoSuite--gridline .LogoSuite__logobarContainer,\n.LogoSuite--gridline-expressive .LogoSuite__logobarContainer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n.LogoSuite--gridline .LogoSuite__logobar,\n.LogoSuite--gridline-expressive .LogoSuite__logobar {\n margin-block-start: auto;\n padding-block-start: 0;\n}\n\n.LogoSuite--gridline .LogoSuite__heading + .LogoSuite__description,\n.LogoSuite--gridline-expressive .LogoSuite__heading + .LogoSuite__description {\n padding-block-start: var(--base-size-8);\n}\n\n.LogoSuite--gridline .LogoSuite__logobar,\n.LogoSuite--gridline .LogoSuite__logobar--has-marquee,\n.LogoSuite--gridline-expressive .LogoSuite__logobar,\n.LogoSuite--gridline-expressive .LogoSuite__logobar--has-marquee {\n width: 100%;\n max-width: none;\n}\n\n/ Gridline variant styles /\n.LogoSuite--gridline .LogoSuite__textContainer {\n padding: var(--base-size-40) var(--base-size-20) 0;\n}\n\n.LogoSuite--gridline .LogoSuite__logobarContainer {\n padding: var(--base-size-40) var(--base-size-20) var(--base-size-48);\n}\n\n@media screen and (min-width: 48rem) {\n .LogoSuite--gridline .LogoSuite__textContainer {\n padding: var(--base-size-48) var(--base-size-40) 0;\n }\n\n .LogoSuite--gridline .LogoSuite__logobarContainer {\n padding: var(--base-size-40) var(--base-size-40) var(--base-size-64);\n }\n}\n\n@media screen and (min-width: 64rem) {\n .LogoSuite--gridline .LogoSuite__textContainer {\n padding: var(--base-size-48) var(--base-size-64) 0;\n }\n\n .LogoSuite--gridline .LogoSuite__logobarContainer {\n padding: var(--base-size-48) var(--base-size-64) var(--base-size-64);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .LogoSuite--gridline .LogoSuite__content {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n/ Gridline expressive variant styles /\n.LogoSuite--gridline-expressive .LogoSuite__textContainer {\n padding: var(--base-size-20);\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__logobarContainer {\n padding: var(--base-size-32) var(--base-size-20) var(--base-size-32);\n}\n\n@media screen and (min-width: 48rem) {\n .LogoSuite--gridline-expressive {\n padding-inline: 91px;\n }\n\n .LogoSuite--gridline-expressive .LogoSuite__logobarContainer {\n padding: var(--base-size-40);\n }\n .LogoSuite--gridline-expressive .LogoSuite__content {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n .LogoSuite--gridline-expressive .LogoSuite__textContainer {\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n@media screen and (min-width: 64rem) {\n .LogoSuite--gridline-expressive {\n padding-inline: 0;\n }\n\n .LogoSuite--gridline-expressive .LogoSuite__content {\n max-width: 1280px;\n }\n\n .LogoSuite--gridline-expressive .LogoSuite__textContainer {\n text-align: left;\n padding: var(--base-size-64);\n }\n\n .LogoSuite--gridline-expressive .LogoSuite__logobarContainer {\n padding: var(--base-size-64);\n }\n}\n\n@media screen and (min-width: 1281px) {\n .LogoSuite--gridline-expressive .LogoSuite__content {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n / When the logobar is the only column visible (no adjacent text), this removes start border /\n .LogoSuite--gridline-expressive .LogoSuite__logobarContainer:first-child {\n border-inline-start: none;\n }\n}\n\n.LogoSuite__logobar--has-takeover {\n position: relative;\n overflow: visible;\n}\n\n/ Glass blur overlay effect /\n.LogoSuite__logobar--has-takeover::before {\n content: '';\n position: absolute;\n inset: calc(-1 var(--base-size-16)) 0;\n z-index: 1;\n pointer-events: none;\n opacity: 0;\n backdrop-filter: blur(var(--base-size-6));\n -webkit-backdrop-filter: blur(var(--base-size-6));\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.LogoSuite__logobar--has-takeover:hover::before,\n.LogoSuite__logobar--has-takeover:focus-within::before {\n opacity: 1;\n}\n\n.LogoSuite__logobar--has-takeover:hover svg,\n.LogoSuite__logobar--has-takeover:focus-within svg,\n.LogoSuite__logobar--has-takeover:hover img,\n.LogoSuite__logobar--has-takeover:focus-within img {\n opacity: 0.7;\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.LogoSuite__logobar-takeoverButtonContainer {\n opacity: 0;\n visibility: hidden;\n z-index: 2;\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.LogoSuite__logobar--has-takeover:hover .LogoSuite__logobar-takeoverButtonContainer,\n.LogoSuite__logobar--has-takeover:focus-within .LogoSuite__logobar-takeoverButtonContainer {\n opacity: 1;\n visibility: visible;\n}\n"],"mappings":""}

package/esm/MediaPlaylist/MediaPlaylist.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { Heading as r } from "../Heading/Heading.js";
 import i from "../component-helpers/shared.module.js";
 import { Pagination as a } from "../Pagination/Pagination.js";
 import { useMediaPlaylist as o } from "./useMediaPlaylist.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/media-playlist/colors-with-modes-YId8eSZQ.css';/* empty css                                                                                                            */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/media-playlist/colors-with-modes-DTTUHiv1.css';/* empty css                                                                                                            */
 import s from "./MediaPlaylist.module.js";
 import { cloneElement as c, forwardRef as l } from "react";
 import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";

package/esm/MinimalFooter/MinimalFooter.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { useReducedMotion as t } from "../hooks/useReducedMotion.js";
 import { Text as n } from "../Text/Text.js";
 import { ArrowUpIcon as r } from "../node_modules/@primer/octicons-react/dist/icons/ArrowUpIcon.js";
 import { MarkGithubIcon as i } from "../node_modules/@primer/octicons-react/dist/icons/MarkGithubIcon.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/footer/base-C0fjI9_t.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/footer/colors-with-modes-CMFhnjfv.css';/* empty css                                                                                                    */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/footer/base-C0fjI9_t.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/footer/colors-with-modes-PKZWykxm.css';/* empty css                                                                                                    */
 /* empty css                                                                                       */
 import a from "./MinimalFooter.module.js";
 import o, { forwardRef as s, useCallback as c } from "react";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MinimalVideoPlayer.d.ts","sourceRoot":"","sources":["../../src/MinimalVideoPlayer/MinimalVideoPlayer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAa,KAAK,wBAAwB,EAAC,MAAM,OAAO,CAAA;~~AAMtE~~,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACxC,wBAAwB,CAAC,OAAO,CAAC,EACjC,UAAU,GAAG,UAAU,GAAG,cAAc,GAAG,OAAO,GAAG,gBAAgB,GAAG,aAAa,GAAG,OAAO,CAChG,GAAG;IACF;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,wBAAwB,CAAC,EAAE;QACzB,IAAI,EAAE,MAAM,CAAA;QACZ,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;IACD,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAiBD,eAAO,MAAM,mBAAmB;IAlC9B;;;OAGG;eACQ,OAAO;IAClB;;OAEG;WACI,MAAM;IACb;;OAEG;+BACwB;QACzB,IAAI,EAAE,MAAM,CAAA;QACZ,KAAK,EAAE,MAAM,CAAA;KACd;oBACiB,MAAM;~~0CAiGzB~~,CAAA;AAED,eAAO,MAAM,kBAAkB;~~IAnH7B~~;;;OAGG;eACQ,OAAO;IAClB;;OAEG;WACI,MAAM;IACb;;OAEG;+BACwB;QACzB,IAAI,EAAE,MAAM,CAAA;QACZ,KAAK,EAAE,MAAM,CAAA;KACd;oBACiB,MAAM;;;;;;;~~CAmGqD~~,CAAA"}
1	+ {"version":3,"file":"MinimalVideoPlayer.d.ts","sourceRoot":"","sources":["../../src/MinimalVideoPlayer/MinimalVideoPlayer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAa,KAAK,wBAAwB,EAAC,MAAM,OAAO,CAAA;AAOtE,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACxC,wBAAwB,CAAC,OAAO,CAAC,EACjC,UAAU,GAAG,UAAU,GAAG,cAAc,GAAG,OAAO,GAAG,gBAAgB,GAAG,aAAa,GAAG,OAAO,CAChG,GAAG;IACF;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,wBAAwB,CAAC,EAAE;QACzB,IAAI,EAAE,MAAM,CAAA;QACZ,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;IACD,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAiBD,eAAO,MAAM,mBAAmB;IAlC9B;;;OAGG;eACQ,OAAO;IAClB;;OAEG;WACI,MAAM;IACb;;OAEG;+BACwB;QACzB,IAAI,EAAE,MAAM,CAAA;QACZ,KAAK,EAAE,MAAM,CAAA;KACd;oBACiB,MAAM;0CAwFzB,CAAA;AAED,eAAO,MAAM,kBAAkB;IA1G7B;;;OAGG;eACQ,OAAO;IAClB;;OAEG;WACI,MAAM;IACb;;OAEG;+BACwB;QACzB,IAAI,EAAE,MAAM,CAAA;QACZ,KAAK,EAAE,MAAM,CAAA;KACd;oBACiB,MAAM;;;;;;;CA0FqD,CAAA"}

package/esm/MinimalVideoPlayer/MinimalVideoPlayer.js CHANGED Viewed

@@ -2,14 +2,15 @@ import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { useReducedMotion as t } from "../hooks/useReducedMotion.js";
 import { PauseIcon as n } from "../node_modules/@primer/octicons-react/dist/icons/PauseIcon.js";
 import { useMinimalVideoPlayback as r } from "./useMinimalVideoPlayback.js";
-import i from "./MinimalVideoPlayer.module.js";
-import { forwardRef as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { PlayIcon as i } from "../PlayIcon.js";
+import a from "./MinimalVideoPlayer.module.js";
+import { forwardRef as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/MinimalVideoPlayer/MinimalVideoPlayer.tsx
-var c = {
+var l = {
 	play: "Play video",
 	pause: "Pause video"
-}, l = {
+}, u = {
 	root: "MinimalVideoPlayer",
 	get video() {
 		return `${this.root}-video`;
@@ -17,61 +18,51 @@ var c = {
 	get control() {
 		return `${this.root}-control`;
 	}
-}, u = a(({ autoPlay: a = !0, children: u, className: d, "data-testid": f, internalAccessibleLabels: p = c, loop: m = !0, onEnded: h, onPause: g, onPlay: _, onPlaying: v, title: y, ...b }, x) => {
-	let { handlePlaybackEnded: S, handlePlaybackPaused: C, handlePlaybackStarted: w, isPlaying: T, togglePlayback: E, videoRef: D } = r({
-		autoPlay: a,
-		forwardedRef: x,
+}, d = o(({ autoPlay: o = !0, children: d, className: f, "data-testid": p, internalAccessibleLabels: m = l, loop: h = !0, onEnded: g, onPause: _, onPlay: v, onPlaying: y, title: b, ...x }, S) => {
+	let { handlePlaybackEnded: C, handlePlaybackPaused: w, handlePlaybackStarted: T, isPlaying: E, togglePlayback: D, videoRef: O } = r({
+		autoPlay: o,
+		forwardedRef: S,
 		prefersReducedMotion: t()
 	});
-	return /* @__PURE__ */ s("div", {
-		className: i.MinimalVideoPlayer,
-		"data-testid": f || l.root,
+	return /* @__PURE__ */ c("div", {
+		className: a.MinimalVideoPlayer,
+		"data-testid": p || u.root,
 		"data-video-player-container": !0,
-		children: [/* @__PURE__ */ o("video", {
-			...b,
-			ref: D,
+		children: [/* @__PURE__ */ s("video", {
+			...x,
+			ref: O,
 			autoPlay: !1,
-			className: e(i.MinimalVideoPlayer__video, d),
+			className: e(a.MinimalVideoPlayer__video, f),
 			controls: !1,
-			"data-testid": l.video,
-			loop: m,
+			"data-testid": u.video,
+			loop: h,
 			muted: !0,
 			onEnded: (e) => {
-				S(), h?.(e);
+				C(), g?.(e);
 			},
 			onPause: (e) => {
-				C(), g?.(e);
+				w(), _?.(e);
 			},
 			onPlay: (e) => {
-				w(), _?.(e);
+				T(), v?.(e);
 			},
 			onPlaying: (e) => {
-				w(), v?.(e);
+				T(), y?.(e);
 			},
 			playsInline: !0,
-			title: y,
-			children: u
-		}), /* @__PURE__ */ o("button", {
-			"aria-label": T ? p.pause : p.play,
-			className: i.MinimalVideoPlayer__control,
-			"data-testid": l.control,
-			onClick: E,
+			title: b,
+			children: d
+		}), /* @__PURE__ */ s("button", {
+			"aria-label": E ? m.pause : m.play,
+			className: a.MinimalVideoPlayer__control,
+			"data-testid": u.control,
+			onClick: D,
 			type: "button",
-			children: T ? /* @__PURE__ */ o(n, { "aria-hidden": "true" }) : /* @__PURE__ */ o("svg", {
-				width: "16",
-				height: "16",
-				viewBox: "0 0 16 16",
-				fill: "none",
-				xmlns: "http://www.w3.org/2000/svg",
-				children: /* @__PURE__ */ o("path", {
-					d: "M13.3777 6.94756C14.2069 7.40341 14.2069 8.59489 13.3777 9.05073L5.37808 13.4483C4.57834 13.8879 3.60001 13.3093 3.60001 12.3967L3.60001 3.60161C3.60001 2.689 4.57834 2.1104 5.37808 2.55003L13.3777 6.94756Z",
-					fill: "currentColor"
-				})
-			})
+			children: E ? /* @__PURE__ */ s(n, { "aria-hidden": "true" }) : /* @__PURE__ */ s(i, {})
 		})]
 	});
-}), d = Object.assign(u, { testIds: l });
+}), f = Object.assign(d, { testIds: u });
 //#endregion
-export { d as MinimalVideoPlayer, u as _MinimalVideoPlayer };
+export { f as MinimalVideoPlayer, d as _MinimalVideoPlayer };
 //# sourceMappingURL=MinimalVideoPlayer.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MinimalVideoPlayer.js","names":[],"sources":["../../src/MinimalVideoPlayer/MinimalVideoPlayer.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport {PauseIcon} from '@primer/octicons-react'\nimport React, {forwardRef, type ComponentPropsWithoutRef} from 'react'\n\nimport {useReducedMotion} from '../hooks/useReducedMotion'\nimport {useMinimalVideoPlayback} from './useMinimalVideoPlayback'\nimport styles from './MinimalVideoPlayer.module.css'\n\nexport type MinimalVideoPlayerProps = Omit<\n ComponentPropsWithoutRef<'video'>,\n 'autoPlay' \| 'controls' \| 'defaultMuted' \| 'muted' \| 'onVolumeChange' \| 'playsInline' \| 'title'\n> & {\n /*\n Plays the video when it is visible.\n * @default true\n /\n autoPlay?: boolean\n /\n Provides an accessible name for the video.\n /\n title: string\n /\n Customizable labels for the internal play and pause control.\n */\n internalAccessibleLabels?: {\n play: string\n pause: string\n }\n ['data-testid']?: string\n}\n\nconst defaultInternalAccessibleLabels = {\n play: 'Play video',\n pause: 'Pause video',\n}\n\nconst testIds = {\n root: 'MinimalVideoPlayer',\n get video() {\n return `${this.root}-video`\n },\n get control() {\n return `${this.root}-control`\n },\n}\n\nexport const _MinimalVideoPlayer = forwardRef<HTMLVideoElement, MinimalVideoPlayerProps>(\n (\n {\n autoPlay = true,\n children,\n className,\n 'data-testid': testId,\n internalAccessibleLabels = defaultInternalAccessibleLabels,\n loop = true,\n onEnded,\n onPause,\n onPlay,\n onPlaying,\n title,\n ...rest\n },\n forwardedRef,\n ) => {\n const prefersReducedMotion = useReducedMotion()\n const {handlePlaybackEnded, handlePlaybackPaused, handlePlaybackStarted, isPlaying, togglePlayback, videoRef} =\n useMinimalVideoPlayback({\n autoPlay,\n forwardedRef,\n prefersReducedMotion,\n })\n\n return (\n <div className={styles.MinimalVideoPlayer} data-testid={testId \|\| testIds.root} data-video-player-container>\n <video\n {...rest}\n ref={videoRef}\n autoPlay={false}\n className={clsx(styles.MinimalVideoPlayer__video, className)}\n controls={false}\n data-testid={testIds.video}\n loop={loop}\n muted\n onEnded={event => {\n handlePlaybackEnded()\n onEnded?.(event)\n }}\n onPause={event => {\n handlePlaybackPaused()\n onPause?.(event)\n }}\n onPlay={event => {\n handlePlaybackStarted()\n onPlay?.(event)\n }}\n onPlaying={event => {\n handlePlaybackStarted()\n onPlaying?.(event)\n }}\n playsInline\n title={title}\n >\n {children}\n </video>\n <button\n aria-label={isPlaying ? internalAccessibleLabels.pause : internalAccessibleLabels.play}\n className={styles.MinimalVideoPlayer__control}\n data-testid={testIds.control}\n onClick={togglePlayback}\n type=\"button\"\n >\n {isPlaying ? ~~(\n~~ <PauseIcon aria-hidden=\"true\" ~~/>\n )~~ : ~~(\n~~ <~~svg~~ width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.3777 6.94756C14.2069 7.40341 14.2069 8.59489 13.3777 9.05073L5.37808 13.4483C4.57834 13.8879 3.60001 13.3093 3.60001 12.3967L3.60001 3.60161C3.60001 2.689 4.57834 2.1104 5.37808 2.55003L13.3777 6.94756Z\"\n fill=\"currentColor\"\n />\n </svg>\n )}\n </button>\n </div>\n )\n },\n)\n\nexport const MinimalVideoPlayer = Object.assign(_MinimalVideoPlayer, {testIds})\n"],"mappings":"~~;;;;;;;;AA+BA~~,IAAM,IAAkC;CACtC,MAAM;CACN,OAAO;AACT,GAEM,IAAU;CACd,MAAM;CACN,IAAI,QAAQ;EACV,OAAO,GAAG,KAAK,KAAK;CACtB;CACA,IAAI,UAAU;EACZ,OAAO,GAAG,KAAK,KAAK;CACtB;AACF,GAEa,IAAsB,GAE/B,EACE,cAAW,IACX,aACA,cACA,eAAe,GACf,8BAA2B,GAC3B,UAAO,IACP,YACA,YACA,WACA,cACA,UACA,GAAG,KAEL,MACG;CAEH,IAAM,EAAC,wBAAqB,yBAAsB,0BAAuB,cAAW,mBAAgB,gBAClG,EAAwB;EACtB;EACA;EACA,sBALyB,EAKzB;CACF,CAAC;CAEH,OACE,kBAAC,OAAD;EAAK,WAAW,EAAO;EAAoB,eAAa,KAAU,EAAQ;EAAM,+BAAA;YAAhF,CACE,kBAAC,SAAD;GACE,GAAI;GACJ,KAAK;GACL,UAAU;GACV,WAAW,EAAK,EAAO,2BAA2B,CAAS;GAC3D,UAAU;GACV,eAAa,EAAQ;GACf;GACN,OAAA;GACA,UAAS,MAAS;IAEhB,AADA,EAAoB,GACpB,IAAU,CAAK;GACjB;GACA,UAAS,MAAS;IAEhB,AADA,EAAqB,GACrB,IAAU,CAAK;GACjB;GACA,SAAQ,MAAS;IAEf,AADA,EAAsB,GACtB,IAAS,CAAK;GAChB;GACA,YAAW,MAAS;IAElB,AADA,EAAsB,GACtB,IAAY,CAAK;GACnB;GACA,aAAA;GACO;GAEN;EACI,CAAA,GACP,kBAAC,UAAD;GACE,cAAY,IAAY,EAAyB,QAAQ,EAAyB;GAClF,WAAW,EAAO;GAClB,eAAa,EAAQ;GACrB,SAAS;GACT,MAAK;aAEJ,~~IACC~~,kBAAC,GAAD,EAAW,eAAY,OAAQ,CAAA,~~IAE/B~~,kBAAC,~~OAAD;IAAK~~,~~OAAM;IAAK~~,~~QAAO;IAAK,SAAQ;IAAY,MAAK;IAAO,OAAM;cAChE,kBAAC,QAAD;KACE,GAAE;KACF,MAAK;IACN,~~CAAA;~~GACE~~,CAAA~~;EAED~~,~~CAAA,~~CACL;;AAET,CACF,GAEa,IAAqB,OAAO,OAAO,GAAqB,EAAC,WAAO,CAAC"}
1	+ {"version":3,"file":"MinimalVideoPlayer.js","names":[],"sources":["../../src/MinimalVideoPlayer/MinimalVideoPlayer.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport {PauseIcon} from '@primer/octicons-react'\nimport React, {forwardRef, type ComponentPropsWithoutRef} from 'react'\n\nimport {useReducedMotion} from '../hooks/useReducedMotion'\nimport {useMinimalVideoPlayback} from './useMinimalVideoPlayback'\nimport {PlayIcon} from '../PlayIcon'\nimport styles from './MinimalVideoPlayer.module.css'\n\nexport type MinimalVideoPlayerProps = Omit<\n ComponentPropsWithoutRef<'video'>,\n 'autoPlay' \| 'controls' \| 'defaultMuted' \| 'muted' \| 'onVolumeChange' \| 'playsInline' \| 'title'\n> & {\n /*\n Plays the video when it is visible.\n * @default true\n /\n autoPlay?: boolean\n /\n Provides an accessible name for the video.\n /\n title: string\n /\n Customizable labels for the internal play and pause control.\n */\n internalAccessibleLabels?: {\n play: string\n pause: string\n }\n ['data-testid']?: string\n}\n\nconst defaultInternalAccessibleLabels = {\n play: 'Play video',\n pause: 'Pause video',\n}\n\nconst testIds = {\n root: 'MinimalVideoPlayer',\n get video() {\n return `${this.root}-video`\n },\n get control() {\n return `${this.root}-control`\n },\n}\n\nexport const _MinimalVideoPlayer = forwardRef<HTMLVideoElement, MinimalVideoPlayerProps>(\n (\n {\n autoPlay = true,\n children,\n className,\n 'data-testid': testId,\n internalAccessibleLabels = defaultInternalAccessibleLabels,\n loop = true,\n onEnded,\n onPause,\n onPlay,\n onPlaying,\n title,\n ...rest\n },\n forwardedRef,\n ) => {\n const prefersReducedMotion = useReducedMotion()\n const {handlePlaybackEnded, handlePlaybackPaused, handlePlaybackStarted, isPlaying, togglePlayback, videoRef} =\n useMinimalVideoPlayback({\n autoPlay,\n forwardedRef,\n prefersReducedMotion,\n })\n\n return (\n <div className={styles.MinimalVideoPlayer} data-testid={testId \|\| testIds.root} data-video-player-container>\n <video\n {...rest}\n ref={videoRef}\n autoPlay={false}\n className={clsx(styles.MinimalVideoPlayer__video, className)}\n controls={false}\n data-testid={testIds.video}\n loop={loop}\n muted\n onEnded={event => {\n handlePlaybackEnded()\n onEnded?.(event)\n }}\n onPause={event => {\n handlePlaybackPaused()\n onPause?.(event)\n }}\n onPlay={event => {\n handlePlaybackStarted()\n onPlay?.(event)\n }}\n onPlaying={event => {\n handlePlaybackStarted()\n onPlaying?.(event)\n }}\n playsInline\n title={title}\n >\n {children}\n </video>\n <button\n aria-label={isPlaying ? internalAccessibleLabels.pause : internalAccessibleLabels.play}\n className={styles.MinimalVideoPlayer__control}\n data-testid={testIds.control}\n onClick={togglePlayback}\n type=\"button\"\n >\n {isPlaying ? <PauseIcon aria-hidden=\"true\" /> : <PlayIcon />}\n </button>\n </div>\n )\n },\n)\n\nexport const MinimalVideoPlayer = Object.assign(_MinimalVideoPlayer, {testIds})\n"],"mappings":";;;;;;;;;AAgCA,IAAM,IAAkC;CACtC,MAAM;CACN,OAAO;AACT,GAEM,IAAU;CACd,MAAM;CACN,IAAI,QAAQ;EACV,OAAO,GAAG,KAAK,KAAK;CACtB;CACA,IAAI,UAAU;EACZ,OAAO,GAAG,KAAK,KAAK;CACtB;AACF,GAEa,IAAsB,GAE/B,EACE,cAAW,IACX,aACA,cACA,eAAe,GACf,8BAA2B,GAC3B,UAAO,IACP,YACA,YACA,WACA,cACA,UACA,GAAG,KAEL,MACG;CAEH,IAAM,EAAC,wBAAqB,yBAAsB,0BAAuB,cAAW,mBAAgB,gBAClG,EAAwB;EACtB;EACA;EACA,sBALyB,EAKzB;CACF,CAAC;CAEH,OACE,kBAAC,OAAD;EAAK,WAAW,EAAO;EAAoB,eAAa,KAAU,EAAQ;EAAM,+BAAA;YAAhF,CACE,kBAAC,SAAD;GACE,GAAI;GACJ,KAAK;GACL,UAAU;GACV,WAAW,EAAK,EAAO,2BAA2B,CAAS;GAC3D,UAAU;GACV,eAAa,EAAQ;GACf;GACN,OAAA;GACA,UAAS,MAAS;IAEhB,AADA,EAAoB,GACpB,IAAU,CAAK;GACjB;GACA,UAAS,MAAS;IAEhB,AADA,EAAqB,GACrB,IAAU,CAAK;GACjB;GACA,SAAQ,MAAS;IAEf,AADA,EAAsB,GACtB,IAAS,CAAK;GAChB;GACA,YAAW,MAAS;IAElB,AADA,EAAsB,GACtB,IAAY,CAAK;GACnB;GACA,aAAA;GACO;GAEN;EACI,CAAA,GACP,kBAAC,UAAD;GACE,cAAY,IAAY,EAAyB,QAAQ,EAAyB;GAClF,WAAW,EAAO;GAClB,eAAa,EAAQ;GACrB,SAAS;GACT,MAAK;aAEJ,IAAY,kBAAC,GAAD,EAAW,eAAY,OAAQ,CAAA,IAAI,kBAAC,GAAD,CAAW,CAAA;EACrD,CAAA,CACL;;AAET,CACF,GAEa,IAAqB,OAAO,OAAO,GAAqB,EAAC,WAAO,CAAC"}

package/esm/NavList/NavList.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { useId as t } from "../hooks/useId.js";
 import { TriangleDownIcon as n } from "../node_modules/@primer/octicons-react/dist/icons/TriangleDownIcon.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/nav-list/colors-with-modes-CGyt2t8f.css';/* empty css                                                                                                      */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/nav-list/colors-with-modes-BCIP0l57.css';/* empty css                                                                                                      */
 import r from "./NavList.module.js";
 import i, { Children as a, createContext as o, forwardRef as s, isValidElement as c, useCallback as l, useContext as u, useEffect as d, useMemo as f, useRef as p, useState as m } from "react";
 import { jsx as h, jsxs as g } from "react/jsx-runtime";