npm - @primer/react-brand - Versions diffs - 0.80.0-rc.e1dc6447 → 0.80.0 - Mend

@primer/react-brand 0.80.0-rc.e1dc6447 → 0.80.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 (695) hide show

package/esm/Tabs/Tabs.js CHANGED Viewed

@@ -2,18 +2,15 @@ import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { AnimationProvider as t } from "../animation/AnimationProvider/AnimationProvider.js";
 import { Animate as n } from "../animation/Animate/Animate.js";
 import { useProvidedRefOrCreate as r } from "../hooks/useRef.js";
-import { Stack as i } from "../Stack/Stack.js";
-import { Text as a } from "../Text/Text.js";
-import { ChevronLeftIcon as o } from "../node_modules/@primer/octicons-react/dist/icons/ChevronLeftIcon.js";
-import { ChevronRightIcon as s } from "../node_modules/@primer/octicons-react/dist/icons/ChevronRightIcon.js";
-import { useTabs as c } from "../hooks/useTabs.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/tabs/colors-with-modes-DCEDN6wM.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/tabs/base-T7ABwZVf.css';/* empty css                                                                                     */
+import { useTabs as i } from "../hooks/useTabs.js";
+import { CarouselPagination as a } from "../CarouselPagination/CarouselPagination.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/tabs/colors-with-modes-D9l5QVGg.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/tabs/base-T7ABwZVf.css';/* empty css                                                                                     */
 /* empty css                                                                                                  */
-import l from "./Tabs.module.js";
-import { Children as u, cloneElement as d, forwardRef as f, isValidElement as p, memo as m, useCallback as h, useEffect as g, useRef as _ } from "react";
-import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import o from "./Tabs.module.js";
+import { Children as s, cloneElement as c, forwardRef as l, isValidElement as u, memo as d, useEffect as f, useRef as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/Tabs/Tabs.tsx
-var b = {
+var g = {
 	root: "Tabs",
 	get tab() {
 		return `${this.root}-tab`;
@@ -24,39 +21,41 @@ var b = {
 	get indicators() {
 		return `${this.root}-indicators`;
 	}
-}, x = {
+}, _ = {
 	controlsNext: "Next tab",
-	controlsPrev: "Previous tab"
-}, S = f(({ align: t = "center", children: n, defaultActiveTab: r, onChange: f, variant: m = "default", className: S, "aria-label": T, "aria-labelledby": E, internalAccessibleLabels: D = x, ...O }, k) => {
-	let { activeTab: A, activateTab: j, getTabListProps: M, getTabProps: N, getTabPanelProps: P } = c({
+	controlsPrev: "Previous tab",
+	controlsIndicator: "Go to tab {current}",
+	controlsNavigation: "Tab navigation"
+}, v = l(({ align: t = "center", children: n, defaultActiveTab: r, onChange: l, variant: d = "default", className: v, "aria-label": x, "aria-labelledby": S, internalAccessibleLabels: C = _, ...w }, T) => {
+	let { activeTab: E, activateTab: D, getTabListProps: O, getTabProps: k, getTabPanelProps: A } = i({
 		defaultTab: r,
-		onTabActivate: f
-	}), F = _(null), I = _(null), L = _(null), R = u.toArray(n), z = R.filter((e) => p(e) && e.type === C).map((e, t) => {
-		let n = String(t), r = e.ref, i = N(n, r);
-		return d(e, {
+		onTabActivate: l
+	}), j = p(null), M = p(null), N = p(null), P = s.toArray(n), F = P.filter((e) => u(e) && e.type === y).map((e, t) => {
+		let n = String(t), r = e.ref, i = k(n, r);
+		return c(e, {
 			...i,
 			id: e.props.id ?? i.id,
 			"aria-controls": e.props["aria-controls"] ?? i["aria-controls"],
 			value: n,
 			key: i.id,
-			isActive: A === n,
-			variant: m
+			isActive: E === n,
+			variant: d
 		});
-	}), B = R.filter((e) => p(e) && e.type === w).map((e, t) => {
-		let n = P(String(t));
-		return d(e, {
+	}), I = P.filter((e) => u(e) && e.type === b).map((e, t) => {
+		let n = A(String(t));
+		return c(e, {
 			...n,
 			id: e.props.id ?? n.id,
 			key: String(t)
 		});
 	});
-	g(() => {
+	f(() => {
 		/* istanbul ignore next */
-		if (!F.current || !L.current) return;
-		let e = F.current.querySelector("[aria-selected=\"true\"]");
-		if (!A) return;
+		if (!j.current || !N.current) return;
+		let e = j.current.querySelector("[aria-selected=\"true\"]");
+		if (!E) return;
 		let t = () => {
-			let t = L.current, n = F.current;
+			let t = N.current, n = j.current;
 			/* istanbul ignore next */
 			if (!t || !n) return;
 			let r = window.getComputedStyle(n).getPropertyValue("--brand-Tabs-container-padding"), i = parseFloat(r) * 16, a = e.offsetLeft - i, o = e.offsetWidth;
@@ -64,16 +63,16 @@ var b = {
 		};
 		t();
 		let n = new ResizeObserver(t);
-		n.observe(F.current);
-		let r = F.current, i = r.clientWidth, a = window.getComputedStyle(r).getPropertyValue("--brand-Tabs-container-padding"), o = parseFloat(a) * 16, s = e.offsetLeft - o + e.offsetWidth / 2 - i / 2, c = r.scrollWidth - i, l = Math.max(0, Math.min(s, c));
+		n.observe(j.current);
+		let r = j.current, i = r.clientWidth, a = window.getComputedStyle(r).getPropertyValue("--brand-Tabs-container-padding"), o = parseFloat(a) * 16, s = e.offsetLeft - o + e.offsetWidth / 2 - i / 2, c = r.scrollWidth - i, l = Math.max(0, Math.min(s, c));
 		return r.scrollTo({
 			left: l,
 			behavior: "smooth"
 		}), () => {
 			n.disconnect();
 		};
-	}, [A]), g(() => {
-		let e = F.current, t = I.current;
+	}, [E]), f(() => {
+		let e = j.current, t = M.current;
 		/* istanbul ignore next */
 		if (!e || !t) return;
 		/* istanbul ignore next */
@@ -86,112 +85,77 @@ var b = {
 		return r.observe(e), e.addEventListener("scroll", n), () => {
 			e.removeEventListener("scroll", n), r.disconnect();
 		};
-	}, [z]);
-	let V = M(typeof T == "string" ? { label: T } : { labelledBy: E }), H = h(() => {
-		A && A !== String(z.length - 1) && j(String(Number(A) + 1));
-	}, [
-		A,
-		j,
-		z
-	]), U = h(() => {
-		A && A !== "0" && j(String(Number(A) - 1));
-	}, [A, j]), W = z.length >= 3, G = String(z.length - 1) === A;
-	return /* @__PURE__ */ y("div", {
-		className: e(l["Tabs-container"], l[`Tabs-container--align-${t}`], G && l["Tabs-container--lastTabIsActive"], S),
-		ref: k,
-		"data-testid": b.root,
-		...O,
+	}, [F]);
+	let L = O(typeof x == "string" ? { label: x } : { labelledBy: S }), R = F.length >= 3, z = String(F.length - 1) === E;
+	return /* @__PURE__ */ h("div", {
+		className: e(o["Tabs-container"], o[`Tabs-container--align-${t}`], z && o["Tabs-container--lastTabIsActive"], v),
+		ref: T,
+		"data-testid": g.root,
+		...w,
 		children: [
-			z.length >= 3 && /* @__PURE__ */ v("div", {
-				className: l.Tabs__controls,
-				"data-testid": b.indicators,
-				children: /* @__PURE__ */ y(i, {
-					direction: "horizontal",
-					padding: "none",
-					justifyContent: "space-between",
-					children: [
-						/* @__PURE__ */ v("button", {
-							onClick: U,
-							className: l.Tabs__control,
-							"aria-label": D.controlsPrev,
-							children: /* @__PURE__ */ v(a, {
-								size: "100",
-								children: /* @__PURE__ */ v(o, {
-									size: 16,
-									className: l["Tabs__control-icon"]
-								})
-							})
-						}),
-						/* @__PURE__ */ v(i, {
-							direction: "horizontal",
-							gap: 4,
-							padding: "none",
-							justifyContent: "space-between",
-							alignItems: "center",
-							children: z.map((t, n) => /* @__PURE__ */ v("div", { className: e(l.Tabs__indicator, A && Number(A) === n && l["Tabs__indicator--active"]) }, n))
-						}),
-						/* @__PURE__ */ v("button", {
-							onClick: H,
-							className: l.Tabs__control,
-							"aria-label": D.controlsNext,
-							children: /* @__PURE__ */ v(a, {
-								size: "100",
-								children: /* @__PURE__ */ v(s, {
-									size: 16,
-									className: l["Tabs__control-icon"]
-								})
-							})
-						})
-					]
+			F.length >= 3 && /* @__PURE__ */ m("div", {
+				className: o.Tabs__controls,
+				"data-testid": g.indicators,
+				children: /* @__PURE__ */ m(a, {
+					itemCount: F.length,
+					activeIndex: Number(E ?? 0),
+					"aria-label": C.controlsNavigation ?? _.controlsNavigation,
+					labels: {
+						previous: C.controlsPrev,
+						next: C.controlsNext,
+						item: C.controlsIndicator ?? _.controlsIndicator
+					},
+					itemAttributesBuilder: (e) => ({ "aria-controls": F[e].props["aria-controls"] }),
+					onChange: (e) => D(String(e))
 				})
 			}),
-			/* @__PURE__ */ v("div", {
-				ref: I,
-				className: e(l.Tablist__wrapper, l[`Tablist__wrapper--${m}`], G && l["Tablist__wrapper--lastTabIsActive"]),
-				children: /* @__PURE__ */ y("div", {
-					ref: F,
-					...V,
-					className: e(l.Tabs, l[`Tabs--${m}`], W && l["Tabs--hasMoreThanTwoTabs"]),
-					children: [/* @__PURE__ */ v("div", {
-						ref: L,
-						className: l.Tabs__slider,
+			/* @__PURE__ */ m("div", {
+				ref: M,
+				className: e(o.Tablist__wrapper, o[`Tablist__wrapper--${d}`], z && o["Tablist__wrapper--lastTabIsActive"]),
+				children: /* @__PURE__ */ h("div", {
+					ref: j,
+					...L,
+					className: e(o.Tabs, o[`Tabs--${d}`], R && o["Tabs--hasMoreThanTwoTabs"]),
+					children: [/* @__PURE__ */ m("div", {
+						ref: N,
+						className: o.Tabs__slider,
 						"aria-hidden": !0
-					}), z]
+					}), F]
 				})
 			}),
-			B.length > 0 && /* @__PURE__ */ v("div", {
-				className: l.Tabs__panelContainer,
-				children: B
+			I.length > 0 && /* @__PURE__ */ m("div", {
+				className: o.Tabs__panelContainer,
+				children: I
 			})
 		]
 	});
-}), C = f(({ children: t, className: n, isActive: i, variant: a, ...o }, s) => /* @__PURE__ */ v("button", {
-	ref: r(s),
-	className: e(l.Tabs__item, i && l["Tabs__item--active"], a && l[`Tabs__item--${a}`], n),
-	"data-testid": b.tab,
-	...o,
+}), y = l(({ children: t, className: n, isActive: i, variant: a, ...s }, c) => /* @__PURE__ */ m("button", {
+	ref: r(c),
+	className: e(o.Tabs__item, i && o["Tabs__item--active"], a && o[`Tabs__item--${a}`], n),
+	"data-testid": g.tab,
+	...s,
 	children: t
-})), w = m(function({ children: r, animation: i = !1, className: a, hidden: o, ...s }) {
-	let c = i ? /* @__PURE__ */ v(t, {
+})), b = d(function({ children: r, animation: i = !1, className: a, hidden: s, ...c }) {
+	let l = i ? /* @__PURE__ */ m(t, {
 		autoStaggerChildren: !1,
-		children: /* @__PURE__ */ v(n, {
+		children: /* @__PURE__ */ m(n, {
 			animate: i,
 			children: r
 		})
 	}) : r;
-	return /* @__PURE__ */ v("div", {
-		className: e(l.Tabs__panel, a),
-		"data-testid": b.panel,
-		hidden: o,
-		...s,
-		children: c
+	return /* @__PURE__ */ m("div", {
+		className: e(o.Tabs__panel, a),
+		"data-testid": g.panel,
+		hidden: s,
+		...c,
+		children: l
 	});
-}), T = Object.assign(S, {
-	Item: C,
-	Panel: w,
-	testIds: b
+}), x = Object.assign(v, {
+	Item: y,
+	Panel: b,
+	testIds: g
 });
 //#endregion
-export { T as Tabs };
+export { x as Tabs };
 //# sourceMappingURL=Tabs.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.js","names":[],"sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["import React, {\n memo,\n ReactNode,\n forwardRef,\n Children,\n isValidElement,\n cloneElement,\n useRef,\n useEffect,\n HTMLAttributes,\n useCallback,\n} from 'react'\nimport {clsx} from 'clsx'\nimport {ChevronLeftIcon, ChevronRightIcon} from '@primer/octicons-react'\nimport {useTabs} from '../hooks/useTabs'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\nimport {BaseProps} from '../component-helpers'\nimport {Animate, AnimationProvider, AnimationVariants} from '../animation'\nimport {Text} from '../Text'\nimport {Stack} from '../Stack'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tabs/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tabs/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './Tabs.module.css'\n\nconst testIds = {\n root: 'Tabs',\n get tab() {\n return `${this.root}-tab`\n },\n get panel() {\n return `${this.root}-panel`\n },\n get indicators() {\n return `${this.root}-indicators`\n },\n}\n\n/\n Accessible label for the entire tabs component, used by screen readers to describe the tab group.\n * Note: Only use one of `aria-label` or `aria-labelled` by. Not both or neither.\n /\ntype LabelOrLabelledBy =\n \| {'aria-label': string; 'aria-labelledby'?: never}\n \| {'aria-labelledby': string; 'aria-label'?: never}\n\nexport type TabsProps = {\n /\n Visual style variant of the tabs. Affects the appearance and styling theme.\n /\n variant?: 'default' \| 'accent' \| 'underline'\n /\n Horizontal alignment of the tab navigation. Defaults to 'start'.\n /\n align?: 'start' \| 'center'\n /\n Named children to be rendered as tab items and panels.\n /\n children: ReactNode\n /\n Sets the default active tab. \"0\" (first tab) by default.\n /\n defaultActiveTab?: string\n /\n Callback function triggered when the active tab changes. Receives the new active tab identifier.\n /\n onChange?: (activeTab: string) => void\n\n /\n Additional CSS class names to apply to the tabs container for custom styling.\n /\n className?: string\n /\n @param internalAccessibleLabels - Customizable labels for screen readers to improve accessibility. These are applied internally using the aria-label attribute.\n * @param internalAccessibleLabels.controlsNext - Label for the \"next tab\" control button, used by screen readers. Default is \"Next tab\".\n * @param internalAccessibleLabels.controlsPrev - Label for the \"previous tab\" control button, used by screen readers. Default is \"Previous tab\".\n /\n internalAccessibleLabels?: {\n controlsNext: string\n controlsPrev: string\n }\n} & LabelOrLabelledBy &\n BaseProps<HTMLDivElement> &\n Omit<HTMLAttributes<HTMLDivElement>, 'onChange' \| 'aria-label' \| 'aria-labelledby'>\n\nconst defaultInternalAccessibleLabels = {\n controlsNext: 'Next tab',\n controlsPrev: 'Previous tab',\n}\n\nconst _TabsRoot = forwardRef<HTMLDivElement, TabsProps>(\n (\n {\n align = 'center',\n children,\n defaultActiveTab,\n onChange,\n variant = 'default',\n className,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n internalAccessibleLabels = defaultInternalAccessibleLabels,\n ...props\n },\n ref,\n ) => {\n const {activeTab, activateTab, getTabListProps, getTabProps, getTabPanelProps} = useTabs({\n defaultTab: defaultActiveTab,\n onTabActivate: onChange,\n })\n const tabsContainerRef = useRef<HTMLDivElement>(null)\n const tabsWrapperRef = useRef<HTMLDivElement>(null)\n const sliderRef = useRef<HTMLDivElement>(null)\n\n const childrenArray = Children.toArray(children)\n\n type TabsItemElement = React.ReactElement<TabsItemProps> & {ref?: React.Ref<HTMLButtonElement>}\n\n const tabs = childrenArray\n .filter((child): child is TabsItemElement => isValidElement<TabsItemProps>(child) && child.type === TabsItem)\n .map((tab, index) => {\n const tabId = String(index)\n const originalRef = tab.ref\n const tabProps = getTabProps<HTMLButtonElement>(tabId, originalRef)\n\n return cloneElement(tab, {\n ...tabProps,\n id: tab.props.id ?? tabProps.id,\n 'aria-controls': tab.props['aria-controls'] ?? tabProps['aria-controls'],\n value: tabId,\n key: tabProps.id,\n isActive: activeTab === tabId,\n variant,\n })\n })\n\n const panels = childrenArray\n .filter(\n (child): child is React.ReactElement<TabsPanelProps> =>\n isValidElement<TabsPanelProps>(child) && child.type === TabsPanel,\n )\n .map((child, index) => {\n const panelId = String(index)\n const tabPanelProps = getTabPanelProps(panelId)\n\n return cloneElement(child, {\n ...tabPanelProps,\n id: child.props.id ?? tabPanelProps.id,\n key: String(index),\n })\n })\n\n useEffect(() => {\n / istanbul ignore next /\n if (!tabsContainerRef.current \|\| !sliderRef.current) return\n\n const activeTabButton = tabsContainerRef.current.querySelector(`[aria-selected=\"true\"]`) as HTMLButtonElement\n\n if (!activeTab) return\n\n const updateSliderPosition = () => {\n const sliderElement = sliderRef.current\n const tabsContainer = tabsContainerRef.current\n / istanbul ignore next /\n if (!sliderElement \|\| !tabsContainer) return\n\n const containerPaddingRem = window\n .getComputedStyle(tabsContainer)\n .getPropertyValue('--brand-Tabs-container-padding')\n\n const containerPadding = parseFloat(containerPaddingRem) 16 // base size\n\n const offsetX = activeTabButton.offsetLeft - containerPadding\n const width = activeTabButton.offsetWidth\n\n sliderElement.style.setProperty('--brand-Tabs-slider-x', `${offsetX}px`)\n sliderElement.style.setProperty('--brand-Tabs-slider-width', `${width}px`)\n }\n\n updateSliderPosition()\n\n const resizeObserver = new ResizeObserver(updateSliderPosition)\n resizeObserver.observe(tabsContainerRef.current)\n\n // On narrow viewports this will scroll the active tab into the center.\n // Important because we show a gradient in dark mode.\n const tabsContainer = tabsContainerRef.current\n const containerWidth = tabsContainer.clientWidth\n const containerPaddingRem = window\n .getComputedStyle(tabsContainer)\n .getPropertyValue('--brand-Tabs-container-padding')\n const containerPadding = parseFloat(containerPaddingRem) * 16\n const tabLeft = activeTabButton.offsetLeft - containerPadding\n const tabWidth = activeTabButton.offsetWidth\n const tabCenter = tabLeft + tabWidth / 2\n\n const targetScrollLeft = tabCenter - containerWidth / 2\n\n const maxScrollLeft = tabsContainer.scrollWidth - containerWidth // defines boudnary\n const finalScrollLeft = Math.max(0, Math.min(targetScrollLeft, maxScrollLeft))\n\n tabsContainer.scrollTo({\n left: finalScrollLeft,\n behavior: 'smooth',\n })\n\n return () => {\n resizeObserver.disconnect()\n }\n }, [activeTab])\n\n // Tracks the overflow state for mobile gradient visibility\n // Should only appear when enough items trigger an overflow\n // Related to gradient functionality\n useEffect(() => {\n const tabsContainer = tabsContainerRef.current\n const wrapperElement = tabsWrapperRef.current\n /* istanbul ignore next /\n if (!tabsContainer \|\| !wrapperElement) return\n\n // This relies heavily on layout and measurement and, as such, isn't practical to test\n / istanbul ignore next /\n const updateScrollState = () => {\n const {scrollLeft, scrollWidth, clientWidth} = tabsContainer\n const hasOverflow = scrollWidth > clientWidth\n\n const canScrollRight = hasOverflow && scrollLeft < scrollWidth - clientWidth - 1\n\n // Set CSS variables on the wrapper element for the gradient\n wrapperElement.style.setProperty('--scroll-offset', `${scrollLeft}px`)\n wrapperElement.style.setProperty('--has-overflow', hasOverflow ? '1' : '0')\n wrapperElement.style.setProperty('--can-scroll-right', canScrollRight ? '1' : '0')\n }\n\n updateScrollState()\n const resizeObserver = new ResizeObserver(updateScrollState)\n resizeObserver.observe(tabsContainer)\n\n // eslint-disable-next-line github/prefer-observers\n tabsContainer.addEventListener('scroll', updateScrollState)\n\n return () => {\n tabsContainer.removeEventListener('scroll', updateScrollState)\n resizeObserver.disconnect()\n }\n }, [tabs])\n\n /\n The LabelOrLabelledBy type guarantees that, if ariaLabel isn't a string,\n * then ariaLabelledBy is guaranteed to be a string, and vice versa.\n /\n const accessibleLabel = typeof ariaLabel === 'string' ? {label: ariaLabel} : {labelledBy: ariaLabelledBy}\n const tabListProps = getTabListProps(accessibleLabel)\n\n const handleNextTabControl = useCallback(() => {\n if (activeTab && activeTab !== String(tabs.length - 1)) {\n activateTab(String(Number(activeTab) + 1))\n }\n }, [activeTab, activateTab, tabs])\n\n const handlePrevTabControl = useCallback(() => {\n if (activeTab && activeTab !== '0') {\n activateTab(String(Number(activeTab) - 1))\n }\n }, [activeTab, activateTab])\n\n const hasMoreThanTwoTabs = tabs.length >= 3\n const isLastTabActive = String(tabs.length - 1) === activeTab\n\n return (\n <div\n className={clsx(\n styles['Tabs-container'],\n styles[`Tabs-container--align-${align}`],\n isLastTabActive && styles['Tabs-container--lastTabIsActive'],\n className,\n )}\n ref={ref}\n data-testid={testIds.root}\n {...props}\n >\n {/ Narrow only indicators and controls /}\n {tabs.length >= 3 && (\n <div className={styles.Tabs__controls} data-testid={testIds.indicators}>\n <Stack direction=\"horizontal\" padding=\"none\" justifyContent=\"space-between\">\n <button\n onClick={handlePrevTabControl}\n className={styles.Tabs__control}\n aria-label={internalAccessibleLabels.controlsPrev}\n >\n <Text size=\"100\">\n <ChevronLeftIcon size={16} className={styles['Tabs__control-icon']} />\n </Text>\n </button>\n <Stack direction=\"horizontal\" gap={4} padding=\"none\" justifyContent=\"space-between\" alignItems=\"center\">\n {tabs.map((_, index) => {\n return (\n <div\n key={index}\n className={clsx(\n styles.Tabs__indicator,\n activeTab && Number(activeTab) === index && styles['Tabs__indicator--active'],\n )}\n />\n )\n })}\n </Stack>\n <button\n onClick={handleNextTabControl}\n className={styles.Tabs__control}\n aria-label={internalAccessibleLabels.controlsNext}\n >\n <Text size=\"100\">\n <ChevronRightIcon size={16} className={styles['Tabs__control-icon']} />\n </Text>\n </button>\n </Stack>\n </div>\n )}\n\n <div\n ref={tabsWrapperRef}\n className={clsx(\n styles['Tablist__wrapper'],\n styles[`Tablist__wrapper--${variant}`],\n isLastTabActive && styles['Tablist__wrapper--lastTabIsActive'],\n )}\n >\n <div\n ref={tabsContainerRef}\n {...tabListProps}\n className={clsx(\n styles.Tabs,\n styles[`Tabs--${variant}`],\n hasMoreThanTwoTabs && styles['Tabs--hasMoreThanTwoTabs'],\n )}\n >\n <div ref={sliderRef} className={styles.Tabs__slider} aria-hidden />\n {tabs}\n </div>\n </div>\n\n {panels.length > 0 && <div className={styles['Tabs__panelContainer']}>{panels}</div>}\n </div>\n )\n },\n)\n\nexport type TabsItemProps = {\n children: ReactNode\n className?: string\n isActive?: boolean\n variant?: 'default' \| 'accent' \| 'underline'\n /\n ⚠️ WARNING: Setting a custom id will override the automatically generated ARIA attributes\n * (aria-controls, aria-labelledby). You will need to manually implement proper accessibility\n * relationships between tabs and panels.\n * @see https://primer.style/brand/components/Tabs/#custom-panels\n /\n id?: string\n} & Omit<React.ComponentPropsWithoutRef<'button'>, 'id'>\n\nconst TabsItem = forwardRef<HTMLButtonElement, TabsItemProps>(\n ({children, className, isActive, variant, ...props}, ref) => {\n const tabRef = useProvidedRefOrCreate(ref)\n\n return (\n <button\n ref={tabRef}\n className={clsx(\n styles.Tabs__item,\n isActive && styles['Tabs__item--active'],\n variant && styles[`Tabs__item--${variant}`],\n className,\n )}\n data-testid={testIds.tab}\n {...props}\n >\n {children}\n </button>\n )\n },\n)\n\nexport type TabsPanelProps = {\n children: ReactNode\n className?: string\n animation?: (typeof AnimationVariants)[number] \| false\n hidden?: boolean\n /\n ⚠️ WARNING: Setting a custom id will override the automatically generated ARIA attributes\n * (aria-controls, aria-labelledby). You will need to manually implement proper accessibility\n * relationships between tabs and panels.\n * @see https://primer.style/brand/components/Tabs/#custom-panels\n /\n id?: string\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'id'>\n\nconst TabsPanel = memo(function TabsPanelComponent({\n children,\n animation = false,\n className,\n\n hidden,\n ...rest\n}: TabsPanelProps) {\n const conditionalRender = animation ? (\n <AnimationProvider autoStaggerChildren={false}>\n <Animate animate={animation}>{children}</Animate>\n </AnimationProvider>\n ) : (\n children\n )\n\n return (\n <div className={clsx(styles['Tabs__panel'], className)} data-testid={testIds.panel} hidden={hidden} {...rest}>\n {conditionalRender}\n </div>\n )\n})\n\n/\n Use Tabs to display a list of tabs with associated content panels.\n * @see https://primer.style/brand/components/Tabs\n */\nexport const Tabs = Object.assign(_TabsRoot, {\n Item: TabsItem,\n Panel: TabsPanel,\n testIds,\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"Tabs.js","names":[],"sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["import React, {\n memo,\n ReactNode,\n forwardRef,\n Children,\n isValidElement,\n cloneElement,\n useRef,\n useEffect,\n HTMLAttributes,\n} from 'react'\nimport {clsx} from 'clsx'\nimport {useTabs} from '../hooks/useTabs'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\nimport {BaseProps} from '../component-helpers'\nimport {Animate, AnimationProvider, AnimationVariants} from '../animation'\nimport {CarouselPagination} from '../CarouselPagination'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tabs/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tabs/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './Tabs.module.css'\n\nconst testIds = {\n root: 'Tabs',\n get tab() {\n return `${this.root}-tab`\n },\n get panel() {\n return `${this.root}-panel`\n },\n get indicators() {\n return `${this.root}-indicators`\n },\n}\n\n/\n Accessible label for the entire tabs component, used by screen readers to describe the tab group.\n * Note: Only use one of `aria-label` or `aria-labelled` by. Not both or neither.\n /\ntype LabelOrLabelledBy =\n \| {'aria-label': string; 'aria-labelledby'?: never}\n \| {'aria-labelledby': string; 'aria-label'?: never}\n\nexport type TabsProps = {\n /\n Visual style variant of the tabs. Affects the appearance and styling theme.\n /\n variant?: 'default' \| 'accent' \| 'underline'\n /\n Horizontal alignment of the tab navigation. Defaults to 'start'.\n /\n align?: 'start' \| 'center'\n /\n Named children to be rendered as tab items and panels.\n /\n children: ReactNode\n /\n Sets the default active tab. \"0\" (first tab) by default.\n /\n defaultActiveTab?: string\n /\n Callback function triggered when the active tab changes. Receives the new active tab identifier.\n /\n onChange?: (activeTab: string) => void\n\n /\n Additional CSS class names to apply to the tabs container for custom styling.\n /\n className?: string\n /\n @param internalAccessibleLabels - Customizable labels for screen readers to improve accessibility. These are applied internally using the aria-label attribute.\n * @param internalAccessibleLabels.controlsNext - Label for the \"next tab\" control button, used by screen readers. Default is \"Next tab\".\n * @param internalAccessibleLabels.controlsPrev - Label for the \"previous tab\" control button, used by screen readers. Default is \"Previous tab\".\n * @param internalAccessibleLabels.controlsIndicator - Complete selector label using {current}. Default is \"Go to tab {current}\".\n * @param internalAccessibleLabels.controlsNavigation - Label for the complete mobile control group. Default is \"Tab navigation\".\n /\n internalAccessibleLabels?: {\n controlsNext: string\n controlsPrev: string\n controlsIndicator?: string\n controlsNavigation?: string\n }\n} & LabelOrLabelledBy &\n BaseProps<HTMLDivElement> &\n Omit<HTMLAttributes<HTMLDivElement>, 'onChange' \| 'aria-label' \| 'aria-labelledby'>\n\nconst defaultInternalAccessibleLabels = {\n controlsNext: 'Next tab',\n controlsPrev: 'Previous tab',\n controlsIndicator: 'Go to tab {current}',\n controlsNavigation: 'Tab navigation',\n}\n\nconst _TabsRoot = forwardRef<HTMLDivElement, TabsProps>(\n (\n {\n align = 'center',\n children,\n defaultActiveTab,\n onChange,\n variant = 'default',\n className,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n internalAccessibleLabels = defaultInternalAccessibleLabels,\n ...props\n },\n ref,\n ) => {\n const {activeTab, activateTab, getTabListProps, getTabProps, getTabPanelProps} = useTabs({\n defaultTab: defaultActiveTab,\n onTabActivate: onChange,\n })\n const tabsContainerRef = useRef<HTMLDivElement>(null)\n const tabsWrapperRef = useRef<HTMLDivElement>(null)\n const sliderRef = useRef<HTMLDivElement>(null)\n\n const childrenArray = Children.toArray(children)\n\n type TabsItemElement = React.ReactElement<TabsItemProps> & {ref?: React.Ref<HTMLButtonElement>}\n\n const tabs = childrenArray\n .filter((child): child is TabsItemElement => isValidElement<TabsItemProps>(child) && child.type === TabsItem)\n .map((tab, index) => {\n const tabId = String(index)\n const originalRef = tab.ref\n const tabProps = getTabProps<HTMLButtonElement>(tabId, originalRef)\n\n return cloneElement(tab, {\n ...tabProps,\n id: tab.props.id ?? tabProps.id,\n 'aria-controls': tab.props['aria-controls'] ?? tabProps['aria-controls'],\n value: tabId,\n key: tabProps.id,\n isActive: activeTab === tabId,\n variant,\n })\n })\n\n const panels = childrenArray\n .filter(\n (child): child is React.ReactElement<TabsPanelProps> =>\n isValidElement<TabsPanelProps>(child) && child.type === TabsPanel,\n )\n .map((child, index) => {\n const panelId = String(index)\n const tabPanelProps = getTabPanelProps(panelId)\n\n return cloneElement(child, {\n ...tabPanelProps,\n id: child.props.id ?? tabPanelProps.id,\n key: String(index),\n })\n })\n\n useEffect(() => {\n / istanbul ignore next /\n if (!tabsContainerRef.current \|\| !sliderRef.current) return\n\n const activeTabButton = tabsContainerRef.current.querySelector(`[aria-selected=\"true\"]`) as HTMLButtonElement\n\n if (!activeTab) return\n\n const updateSliderPosition = () => {\n const sliderElement = sliderRef.current\n const tabsContainer = tabsContainerRef.current\n / istanbul ignore next /\n if (!sliderElement \|\| !tabsContainer) return\n\n const containerPaddingRem = window\n .getComputedStyle(tabsContainer)\n .getPropertyValue('--brand-Tabs-container-padding')\n\n const containerPadding = parseFloat(containerPaddingRem) 16 // base size\n\n const offsetX = activeTabButton.offsetLeft - containerPadding\n const width = activeTabButton.offsetWidth\n\n sliderElement.style.setProperty('--brand-Tabs-slider-x', `${offsetX}px`)\n sliderElement.style.setProperty('--brand-Tabs-slider-width', `${width}px`)\n }\n\n updateSliderPosition()\n\n const resizeObserver = new ResizeObserver(updateSliderPosition)\n resizeObserver.observe(tabsContainerRef.current)\n\n // On narrow viewports this will scroll the active tab into the center.\n // Important because we show a gradient in dark mode.\n const tabsContainer = tabsContainerRef.current\n const containerWidth = tabsContainer.clientWidth\n const containerPaddingRem = window\n .getComputedStyle(tabsContainer)\n .getPropertyValue('--brand-Tabs-container-padding')\n const containerPadding = parseFloat(containerPaddingRem) * 16\n const tabLeft = activeTabButton.offsetLeft - containerPadding\n const tabWidth = activeTabButton.offsetWidth\n const tabCenter = tabLeft + tabWidth / 2\n\n const targetScrollLeft = tabCenter - containerWidth / 2\n\n const maxScrollLeft = tabsContainer.scrollWidth - containerWidth // defines boudnary\n const finalScrollLeft = Math.max(0, Math.min(targetScrollLeft, maxScrollLeft))\n\n tabsContainer.scrollTo({\n left: finalScrollLeft,\n behavior: 'smooth',\n })\n\n return () => {\n resizeObserver.disconnect()\n }\n }, [activeTab])\n\n // Tracks the overflow state for mobile gradient visibility\n // Should only appear when enough items trigger an overflow\n // Related to gradient functionality\n useEffect(() => {\n const tabsContainer = tabsContainerRef.current\n const wrapperElement = tabsWrapperRef.current\n /* istanbul ignore next /\n if (!tabsContainer \|\| !wrapperElement) return\n\n // This relies heavily on layout and measurement and, as such, isn't practical to test\n / istanbul ignore next /\n const updateScrollState = () => {\n const {scrollLeft, scrollWidth, clientWidth} = tabsContainer\n const hasOverflow = scrollWidth > clientWidth\n\n const canScrollRight = hasOverflow && scrollLeft < scrollWidth - clientWidth - 1\n\n // Set CSS variables on the wrapper element for the gradient\n wrapperElement.style.setProperty('--scroll-offset', `${scrollLeft}px`)\n wrapperElement.style.setProperty('--has-overflow', hasOverflow ? '1' : '0')\n wrapperElement.style.setProperty('--can-scroll-right', canScrollRight ? '1' : '0')\n }\n\n updateScrollState()\n const resizeObserver = new ResizeObserver(updateScrollState)\n resizeObserver.observe(tabsContainer)\n\n // eslint-disable-next-line github/prefer-observers\n tabsContainer.addEventListener('scroll', updateScrollState)\n\n return () => {\n tabsContainer.removeEventListener('scroll', updateScrollState)\n resizeObserver.disconnect()\n }\n }, [tabs])\n\n /\n The LabelOrLabelledBy type guarantees that, if ariaLabel isn't a string,\n * then ariaLabelledBy is guaranteed to be a string, and vice versa.\n /\n const accessibleLabel = typeof ariaLabel === 'string' ? {label: ariaLabel} : {labelledBy: ariaLabelledBy}\n const tabListProps = getTabListProps(accessibleLabel)\n\n const hasMoreThanTwoTabs = tabs.length >= 3\n const isLastTabActive = String(tabs.length - 1) === activeTab\n\n return (\n <div\n className={clsx(\n styles['Tabs-container'],\n styles[`Tabs-container--align-${align}`],\n isLastTabActive && styles['Tabs-container--lastTabIsActive'],\n className,\n )}\n ref={ref}\n data-testid={testIds.root}\n {...props}\n >\n {/ Narrow only indicators and controls /}\n {tabs.length >= 3 && (\n <div className={styles.Tabs__controls} data-testid={testIds.indicators}>\n <CarouselPagination\n itemCount={tabs.length}\n activeIndex={Number(activeTab ?? 0)}\n aria-label={\n internalAccessibleLabels.controlsNavigation ?? defaultInternalAccessibleLabels.controlsNavigation\n }\n labels={{\n previous: internalAccessibleLabels.controlsPrev,\n next: internalAccessibleLabels.controlsNext,\n item: internalAccessibleLabels.controlsIndicator ?? defaultInternalAccessibleLabels.controlsIndicator,\n }}\n itemAttributesBuilder={index => ({'aria-controls': tabs[index].props['aria-controls']})}\n onChange={index => activateTab(String(index))}\n />\n </div>\n )}\n\n <div\n ref={tabsWrapperRef}\n className={clsx(\n styles['Tablist__wrapper'],\n styles[`Tablist__wrapper--${variant}`],\n isLastTabActive && styles['Tablist__wrapper--lastTabIsActive'],\n )}\n >\n <div\n ref={tabsContainerRef}\n {...tabListProps}\n className={clsx(\n styles.Tabs,\n styles[`Tabs--${variant}`],\n hasMoreThanTwoTabs && styles['Tabs--hasMoreThanTwoTabs'],\n )}\n >\n <div ref={sliderRef} className={styles.Tabs__slider} aria-hidden />\n {tabs}\n </div>\n </div>\n\n {panels.length > 0 && <div className={styles['Tabs__panelContainer']}>{panels}</div>}\n </div>\n )\n },\n)\n\nexport type TabsItemProps = {\n children: ReactNode\n className?: string\n isActive?: boolean\n variant?: 'default' \| 'accent' \| 'underline'\n /\n ⚠️ WARNING: Setting a custom id will override the automatically generated ARIA attributes\n * (aria-controls, aria-labelledby). You will need to manually implement proper accessibility\n * relationships between tabs and panels.\n * @see https://primer.style/brand/components/Tabs/#custom-panels\n /\n id?: string\n} & Omit<React.ComponentPropsWithoutRef<'button'>, 'id'>\n\nconst TabsItem = forwardRef<HTMLButtonElement, TabsItemProps>(\n ({children, className, isActive, variant, ...props}, ref) => {\n const tabRef = useProvidedRefOrCreate(ref)\n\n return (\n <button\n ref={tabRef}\n className={clsx(\n styles.Tabs__item,\n isActive && styles['Tabs__item--active'],\n variant && styles[`Tabs__item--${variant}`],\n className,\n )}\n data-testid={testIds.tab}\n {...props}\n >\n {children}\n </button>\n )\n },\n)\n\nexport type TabsPanelProps = {\n children: ReactNode\n className?: string\n animation?: (typeof AnimationVariants)[number] \| false\n hidden?: boolean\n /\n ⚠️ WARNING: Setting a custom id will override the automatically generated ARIA attributes\n * (aria-controls, aria-labelledby). You will need to manually implement proper accessibility\n * relationships between tabs and panels.\n * @see https://primer.style/brand/components/Tabs/#custom-panels\n /\n id?: string\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'id'>\n\nconst TabsPanel = memo(function TabsPanelComponent({\n children,\n animation = false,\n className,\n\n hidden,\n ...rest\n}: TabsPanelProps) {\n const conditionalRender = animation ? (\n <AnimationProvider autoStaggerChildren={false}>\n <Animate animate={animation}>{children}</Animate>\n </AnimationProvider>\n ) : (\n children\n )\n\n return (\n <div className={clsx(styles['Tabs__panel'], className)} data-testid={testIds.panel} hidden={hidden} {...rest}>\n {conditionalRender}\n </div>\n )\n})\n\n/\n Use Tabs to display a list of tabs with associated content panels.\n * @see https://primer.style/brand/components/Tabs\n */\nexport const Tabs = Object.assign(_TabsRoot, {\n Item: TabsItem,\n Panel: TabsPanel,\n testIds,\n})\n"],"mappings":"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"}

package/esm/Tabs/{Tabs.module-CK_p1qwC.css → Tabs.module-B-E_MTke.css} RENAMED Viewed

	@@ -1 +1 @@
1	- .Primer_Brand__Tabs-module__Tabs___zia5x{gap:var(--base-size-4);background-color:var(--brand-color-canvas-backdrop);border-radius:var(--brand-borderRadius-large);padding:var(--brand-Tabs-container-padding);width:fit-content;min-height:var(--base-size-48);display:flex;position:relative}.Primer_Brand__Tabs-module__Tabs-container___wuq7I{display:grid}@media screen and (width<=48rem){.Primer_Brand__Tabs-module__Tabs-container___wuq7I{flex-direction:column;align-items:center;width:100%;display:flex;position:relative}.Primer_Brand__Tabs-module__Tabs-container--align-start___n0cXk{align-items:flex-start}.Primer_Brand__Tabs-module__Tabs-container--align-center___LjUrd{align-items:center}.Primer_Brand__Tabs-module__Tablist__wrapper___MDIB8{width:fit-content;max-width:100%;position:relative;overflow:hidden}.Primer_Brand__Tabs-module__Tablist__wrapper___MDIB8:after{content:"";right:var(--brand-Tabs-list-borderWidth-active);top:var(--base-size-2);bottom:var(--base-size-2);background:linear-gradient(to left, var(--brand-color-canvas-default) 30%, transparent);width:var(--base-size-48);z-index:2;pointer-events:none;transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default), visibility var(--brand-animation-duration-default) var(--brand-animation-easing-default);opacity:0;opacity:calc(var(--has-overflow,0) * var(--can-scroll-right,0));border-radius:inherit;position:absolute}.Primer_Brand__Tabs-module__Tablist__wrapper--default___Wdb55:after,.Primer_Brand__Tabs-module__Tablist__wrapper--accent___QV6Jx:after{border-radius:var(--brand-borderRadius-full)}.Primer_Brand__Tabs-module__Tablist__wrapper--underline___IZ_zV:after{border-radius:var(--brand-borderRadius-large)}.Primer_Brand__Tabs-module__Tablist__wrapper--lastTabIsActive___jCePF:after{opacity:0;visibility:hidden}.Primer_Brand__Tabs-module__Tabs___zia5x{scrollbar-width:none;-ms-overflow-style:none;max-width:100%;overflow:auto hidden}.Primer_Brand__Tabs-module__Tabs___zia5x::-webkit-scrollbar{display:none}}.Primer_Brand__Tabs-module__Tabs-container--align-start___n0cXk{justify-items:flex-start}.Primer_Brand__Tabs-module__Tabs-container--align-center___LjUrd{justify-items:center}.Primer_Brand__Tabs-module__Tabs--default___MUcm6,.Primer_Brand__Tabs-module__Tabs--accent___p1SQc{border:var(--brand-Tabs-list-borderWidth-active) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-full)}.Primer_Brand__Tabs-module__Tabs--underline___CAXqd{gap:var(--base-size-24)}.Primer_Brand__Tabs-module__Tabs__item___4V44f{z-index:1;cursor:pointer;padding:var(--base-size-8) var(--base-size-16);border-radius:var(--brand-borderRadius-full);transition:color var(--brand-animation-duration-fast) ease-in-out;white-space:nowrap;font-family:var(--brand-fontStack-sansSerif);font-weight:var(--brand-text-weight-600);font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200);letter-spacing:var(--brand-text-letterSpacing-200);color:var(--brand-color-text-default);background:0 0;border:0;position:relative}.Primer_Brand__Tabs-module__Tabs__slider___tkaHu{top:var(--base-size-4);bottom:var(--base-size-4);transition:all var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);z-index:0;transform:translate(0);transform:translateX(var(--brand-Tabs-slider-x,0px));width:var(--brand-Tabs-slider-width);position:absolute}.Primer_Brand__Tabs-module__Tabs--default___MUcm6 .Primer_Brand__Tabs-module__Tabs__slider___tkaHu{border-radius:var(--brand-borderRadius-full);border:var(--brand-borderWidth-thin) solid var(--brand-Tabs-item-default-borderColor-active);background:var(--brand-Tabs-item-default-bgColor-active)}.Primer_Brand__Tabs-module__Tabs--accent___p1SQc .Primer_Brand__Tabs-module__Tabs__slider___tkaHu{border-radius:var(--brand-borderRadius-full);border:var(--brand-borderWidth-thin) solid transparent;background:var(--brand-Tabs-item-accent-bgColor-rest)}.Primer_Brand__Tabs-module__Tabs--underline___CAXqd .Primer_Brand__Tabs-module__Tabs__slider___tkaHu{border-bottom:var(--brand-borderWidth-thick) solid var(--brand-Tabs-item-underline-rest)}.Primer_Brand__Tabs-module__Tabs__item___4V44f:focus-visible{outline:var(--base-size-2) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}.Primer_Brand__Tabs-module__Tabs__item--active___Guj0b{color:var(--brand-color-text-default)}.Primer_Brand__Tabs-module__Tabs--underline___CAXqd .Primer_Brand__Tabs-module__Tabs__item___4V44f{padding:var(--base-size-8);border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__Tabs-module__Tabs--accent___p1SQc .Primer_Brand__Tabs-module__Tabs__item___4V44f{transition:color var(--brand-animation-duration-faster) ease}.Primer_Brand__Tabs-module__Tabs--accent___p1SQc .Primer_Brand__Tabs-module__Tabs__item--active___Guj0b{color:var(--brand-Tabs-item-accent-fgColor-rest)}.Primer_Brand__Tabs-module__Tabs__panelContainer___WhkhR{margin-~~top~~:var(--base-size-16)}.Primer_Brand__Tabs-module__Tabs__panel___UdoZQ{color:var(--brand-color-text-default)}.Primer_Brand__Tabs-module__Tabs__controls___Cg7GX{margin-block-end:var(--base-size-12)}.Primer_Brand__Tabs-module__Tabs__indicator___Tmwuv{width:var(--base-size-6);border-radius:var(--brand-borderRadius-full);background-color:var(--brand-color-text-muted);height:var(--base-size-6);transition:width var(--brand-animation-duration-default) var(--brand-animation-easing-default)}.Primer_Brand__Tabs-module__Tabs__indicator--active___h_TV1{background-color:var(--brand-color-text-default);width:var(--base-size-24)}.Primer_Brand__Tabs-module__Tabs__control___xG_4C{cursor:pointer;height:var(--base-size-24);width:var(--base-size-24);background-color:#0000;border:none;align-content:center;display:flex}.Primer_Brand__Tabs-module__Tabs__control-icon___V9mNe{top:calc(var(--base-size-2) / -2);position:relative;vertical-align:middle!important}@media screen and (width>=48rem){.Primer_Brand__Tabs-module__Tabs__controls___Cg7GX{display:none}.Primer_Brand__Tabs-module__Tabs__item___4V44f{padding-inline:var(--base-size-24)}}
1	+ .Primer_Brand__Tabs-module__Tabs___zia5x{gap:var(--base-size-4);background-color:var(--brand-color-canvas-backdrop);border-radius:var(--brand-borderRadius-large);padding:var(--brand-Tabs-container-padding);width:fit-content;min-height:var(--base-size-48);display:flex;position:relative}.Primer_Brand__Tabs-module__Tabs-container___wuq7I{display:grid}@media screen and (width<=48rem){.Primer_Brand__Tabs-module__Tabs-container___wuq7I{flex-direction:column;align-items:center;width:100%;display:flex;position:relative}.Primer_Brand__Tabs-module__Tabs-container--align-start___n0cXk{align-items:flex-start}.Primer_Brand__Tabs-module__Tabs-container--align-center___LjUrd{align-items:center}.Primer_Brand__Tabs-module__Tablist__wrapper___MDIB8{width:fit-content;max-width:100%;position:relative;overflow:hidden}.Primer_Brand__Tabs-module__Tablist__wrapper___MDIB8:after{content:"";right:var(--brand-Tabs-list-borderWidth-active);top:var(--base-size-2);bottom:var(--base-size-2);background:linear-gradient(to left, var(--brand-color-canvas-default) 30%, transparent);width:var(--base-size-48);z-index:2;pointer-events:none;transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default), visibility var(--brand-animation-duration-default) var(--brand-animation-easing-default);opacity:0;opacity:calc(var(--has-overflow,0) * var(--can-scroll-right,0));border-radius:inherit;position:absolute}.Primer_Brand__Tabs-module__Tablist__wrapper--default___Wdb55:after,.Primer_Brand__Tabs-module__Tablist__wrapper--accent___QV6Jx:after{border-radius:var(--brand-borderRadius-full)}.Primer_Brand__Tabs-module__Tablist__wrapper--underline___IZ_zV:after{border-radius:var(--brand-borderRadius-large)}.Primer_Brand__Tabs-module__Tablist__wrapper--lastTabIsActive___jCePF:after{opacity:0;visibility:hidden}.Primer_Brand__Tabs-module__Tabs___zia5x{scrollbar-width:none;-ms-overflow-style:none;max-width:100%;overflow:auto hidden}.Primer_Brand__Tabs-module__Tabs___zia5x::-webkit-scrollbar{display:none}}.Primer_Brand__Tabs-module__Tabs-container--align-start___n0cXk{justify-items:flex-start}.Primer_Brand__Tabs-module__Tabs-container--align-center___LjUrd{justify-items:center}.Primer_Brand__Tabs-module__Tabs--default___MUcm6,.Primer_Brand__Tabs-module__Tabs--accent___p1SQc{border:var(--brand-Tabs-list-borderWidth-active) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-full)}.Primer_Brand__Tabs-module__Tabs--underline___CAXqd{gap:var(--base-size-24)}.Primer_Brand__Tabs-module__Tabs__item___4V44f{z-index:1;cursor:pointer;padding:var(--base-size-8) var(--base-size-16);border-radius:var(--brand-borderRadius-full);transition:color var(--brand-animation-duration-fast) ease-in-out;white-space:nowrap;font-family:var(--brand-fontStack-sansSerif);font-weight:var(--brand-text-weight-600);font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200);letter-spacing:var(--brand-text-letterSpacing-200);color:var(--brand-color-text-default);background:0 0;border:0;position:relative}.Primer_Brand__Tabs-module__Tabs__slider___tkaHu{top:var(--base-size-4);bottom:var(--base-size-4);transition:all var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);z-index:0;transform:translate(0);transform:translateX(var(--brand-Tabs-slider-x,0px));width:var(--brand-Tabs-slider-width);position:absolute}.Primer_Brand__Tabs-module__Tabs--default___MUcm6 .Primer_Brand__Tabs-module__Tabs__slider___tkaHu{border-radius:var(--brand-borderRadius-full);border:var(--brand-borderWidth-thin) solid var(--brand-Tabs-item-default-borderColor-active);background:var(--brand-Tabs-item-default-bgColor-active)}.Primer_Brand__Tabs-module__Tabs--accent___p1SQc .Primer_Brand__Tabs-module__Tabs__slider___tkaHu{border-radius:var(--brand-borderRadius-full);border:var(--brand-borderWidth-thin) solid transparent;background:var(--brand-Tabs-item-accent-bgColor-rest)}.Primer_Brand__Tabs-module__Tabs--underline___CAXqd .Primer_Brand__Tabs-module__Tabs__slider___tkaHu{border-bottom:var(--brand-borderWidth-thick) solid var(--brand-Tabs-item-underline-rest)}.Primer_Brand__Tabs-module__Tabs__item___4V44f:focus-visible{outline:var(--base-size-2) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}.Primer_Brand__Tabs-module__Tabs__item--active___Guj0b{color:var(--brand-color-text-default)}.Primer_Brand__Tabs-module__Tabs--underline___CAXqd .Primer_Brand__Tabs-module__Tabs__item___4V44f{padding:var(--base-size-8);border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__Tabs-module__Tabs--accent___p1SQc .Primer_Brand__Tabs-module__Tabs__item___4V44f{transition:color var(--brand-animation-duration-faster) ease}.Primer_Brand__Tabs-module__Tabs--accent___p1SQc .Primer_Brand__Tabs-module__Tabs__item--active___Guj0b{color:var(--brand-Tabs-item-accent-fgColor-rest)}.Primer_Brand__Tabs-module__Tabs__panelContainer___WhkhR{margin-block-start:var(--base-size-16)}.Primer_Brand__Tabs-module__Tabs__panel___UdoZQ{color:var(--brand-color-text-default)}.Primer_Brand__Tabs-module__Tabs__controls___Cg7GX{margin-block-end:var(--base-size-12)}@media screen and (width>=48rem){.Primer_Brand__Tabs-module__Tabs__controls___Cg7GX{display:none}.Primer_Brand__Tabs-module__Tabs__item___4V44f{padding-inline:var(--base-size-24)}}

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

@@ -1,5 +1,5 @@
-import './Tabs.module-CK_p1qwC.css';//#region src/Tabs/Tabs.module.css
-var e = "Primer_Brand__Tabs-module__Tabs___zia5x", t = "Primer_Brand__Tabs-module__Tablist__wrapper___MDIB8", n = "Primer_Brand__Tabs-module__Tabs__item___4V44f", r = "Primer_Brand__Tabs-module__Tabs__slider___tkaHu", i = "Primer_Brand__Tabs-module__Tabs__panelContainer___WhkhR", a = "Primer_Brand__Tabs-module__Tabs__panel___UdoZQ", o = "Primer_Brand__Tabs-module__Tabs__controls___Cg7GX", s = "Primer_Brand__Tabs-module__Tabs__indicator___Tmwuv", c = "Primer_Brand__Tabs-module__Tabs__control___xG_4C", l = {
+import './Tabs.module-B-E_MTke.css';//#region src/Tabs/Tabs.module.css
+var e = "Primer_Brand__Tabs-module__Tabs___zia5x", t = "Primer_Brand__Tabs-module__Tablist__wrapper___MDIB8", n = "Primer_Brand__Tabs-module__Tabs__item___4V44f", r = "Primer_Brand__Tabs-module__Tabs__slider___tkaHu", i = "Primer_Brand__Tabs-module__Tabs__panelContainer___WhkhR", a = "Primer_Brand__Tabs-module__Tabs__panel___UdoZQ", o = "Primer_Brand__Tabs-module__Tabs__controls___Cg7GX", s = {
 	Tabs: e,
 	"Tabs-container": "Primer_Brand__Tabs-module__Tabs-container___wuq7I",
 	"Tabs-container--align-start": "Primer_Brand__Tabs-module__Tabs-container--align-start___n0cXk",
@@ -17,13 +17,9 @@ var e = "Primer_Brand__Tabs-module__Tabs___zia5x", t = "Primer_Brand__Tabs-modul
 	"Tabs__item--active": "Primer_Brand__Tabs-module__Tabs__item--active___Guj0b",
 	Tabs__panelContainer: i,
 	Tabs__panel: a,
-	Tabs__controls: o,
-	Tabs__indicator: s,
-	"Tabs__indicator--active": "Primer_Brand__Tabs-module__Tabs__indicator--active___h_TV1",
-	Tabs__control: c,
-	"Tabs__control-icon": "Primer_Brand__Tabs-module__Tabs__control-icon___V9mNe"
+	Tabs__controls: o
 };
 //#endregion
-export { t as Tablist__wrapper, e as Tabs, c as Tabs__control, o as Tabs__controls, s as Tabs__indicator, n as Tabs__item, a as Tabs__panel, i as Tabs__panelContainer, r as Tabs__slider, l as default };
+export { t as Tablist__wrapper, e as Tabs, o as Tabs__controls, n as Tabs__item, a as Tabs__panel, i as Tabs__panelContainer, r as Tabs__slider, s as default };
 //# sourceMappingURL=Tabs.module.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.module.js","names":[],"sources":["../../src/Tabs/Tabs.module.css"],"sourcesContent":[".Tabs {\n position: relative;\n display: flex;\n gap: var(--base-size-4);\n background-color: var(--brand-color-canvas-backdrop);\n border-radius: var(--brand-borderRadius-large);\n padding: var(--brand-Tabs-container-padding);\n width: fit-content;\n min-height: var(--base-size-48);\n}\n\n.Tabs-container {\n display: grid;\n}\n\n@media screen and (max-width: 48rem) {\n .Tabs-container {\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n position: relative;\n }\n\n .Tabs-container--align-start {\n align-items: flex-start;\n }\n\n .Tabs-container--align-center {\n align-items: center;\n }\n\n .Tablist__wrapper {\n position: relative;\n width: fit-content;\n max-width: 100%;\n overflow: hidden;\n }\n\n .Tablist__wrapper::after {\n content: '';\n position: absolute;\n right: var(--brand-Tabs-list-borderWidth-active);\n top: var(--base-size-2);\n bottom: var(--base-size-2);\n background: linear-gradient(to left, var(--brand-color-canvas-default) 30%, transparent);\n width: var(--base-size-48);\n z-index: 2;\n pointer-events: none;\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n visibility var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n opacity: calc(var(--has-overflow, 0) * var(--can-scroll-right, 0));\n border-radius: inherit;\n }\n\n .Tablist__wrapper--default::after,\n .Tablist__wrapper--accent::after {\n border-radius: var(--brand-borderRadius-full);\n }\n\n .Tablist__wrapper--underline::after {\n border-radius: var(--brand-borderRadius-large);\n }\n\n .Tablist__wrapper--lastTabIsActive::after {\n opacity: 0;\n visibility: hidden;\n }\n\n .Tabs {\n max-width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: none;\n -ms-overflow-style: none;\n }\n\n .Tabs::-webkit-scrollbar {\n display: none;\n }\n}\n\n.Tabs-container--align-start {\n justify-items: flex-start;\n}\n\n.Tabs-container--align-center {\n justify-items: center;\n}\n\n.Tabs--default,\n.Tabs--accent {\n border: var(--brand-Tabs-list-borderWidth-active) solid var(--brand-color-border-default);\n border-radius: var(--brand-borderRadius-full);\n}\n\n.Tabs--underline {\n gap: var(--base-size-24);\n}\n\n.Tabs__item {\n position: relative;\n z-index: 1;\n border: 0;\n background: transparent;\n cursor: pointer;\n padding: var(--base-size-8) var(--base-size-16);\n border-radius: var(--brand-borderRadius-full);\n transition: color var(--brand-animation-duration-fast) ease-in-out;\n white-space: nowrap;\n font-family: var(--brand-fontStack-sansSerif);\n font-weight: var(--brand-text-weight-600);\n font-size: var(--brand-text-size-200);\n line-height: var(--brand-text-lineHeight-200);\n letter-spacing: var(--brand-text-letterSpacing-200);\n color: var(--brand-color-text-default);\n}\n\n.Tabs__slider {\n position: absolute;\n top: var(--base-size-4);\n bottom: var(--base-size-4);\n transition: all var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n z-index: 0;\n transform: translateX(var(--brand-Tabs-slider-x, 0px));\n width: var(--brand-Tabs-slider-width);\n}\n\n.Tabs--default .Tabs__slider {\n border-radius: var(--brand-borderRadius-full);\n border: var(--brand-borderWidth-thin) solid var(--brand-Tabs-item-default-borderColor-active);\n background: var(--brand-Tabs-item-default-bgColor-active);\n}\n\n.Tabs--accent .Tabs__slider {\n border-radius: var(--brand-borderRadius-full);\n border: var(--brand-borderWidth-thin) solid transparent;\n background: var(--brand-Tabs-item-accent-bgColor-rest);\n}\n\n.Tabs--underline .Tabs__slider {\n border-bottom: var(--brand-borderWidth-thick) solid var(--brand-Tabs-item-underline-rest);\n}\n\n.Tabs__item:focus-visible {\n outline: var(--base-size-2) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\n.Tabs__item--active {\n color: var(--brand-color-text-default);\n}\n\n.Tabs--underline .Tabs__item {\n padding: var(--base-size-8);\n\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.Tabs--accent .Tabs__item {\n transition: color var(--brand-animation-duration-faster) ease;\n}\n\n.Tabs--accent .Tabs__item--active {\n color: var(--brand-Tabs-item-accent-fgColor-rest);\n}\n\n.Tabs__panelContainer {\n margin-~~top~~: var(--base-size-16);\n}\n\n.Tabs__panel {\n color: var(--brand-color-text-default);\n}\n\n.Tabs__controls {\n margin-block-end: var(--base-size-12);\n}\n\n.Tabs__indicator {\n width: var(--base-size-6);\n border-radius: var(--brand-borderRadius-full);\n background-color: var(--brand-color-text-muted);\n height: var(--base-size-6);\n transition: width var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.Tabs__indicator--active {\n background-color: var(--brand-color-text-default);\n width: var(--base-size-24);\n}\n\n.Tabs__control {\n background-color: transparent;\n border: none;\n cursor: pointer;\n height: var(--base-size-24);\n width: var(--base-size-24);\n display: flex;\n align-content: center;\n}\n\n.Tabs__control-icon {\n vertical-align: middle !important; /* Required to override dotcom styles */\n position: relative;\n top: calc(var(--base-size-2) / -2);\n}\n\n@media screen and (min-width: 48rem) {\n .Tabs__controls {\n display: none;\n }\n\n .Tabs__item {\n padding-inline: var(--base-size-24);\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Tabs.module.js","names":[],"sources":["../../src/Tabs/Tabs.module.css"],"sourcesContent":[".Tabs {\n position: relative;\n display: flex;\n gap: var(--base-size-4);\n background-color: var(--brand-color-canvas-backdrop);\n border-radius: var(--brand-borderRadius-large);\n padding: var(--brand-Tabs-container-padding);\n width: fit-content;\n min-height: var(--base-size-48);\n}\n\n.Tabs-container {\n display: grid;\n}\n\n@media screen and (max-width: 48rem) {\n .Tabs-container {\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n position: relative;\n }\n\n .Tabs-container--align-start {\n align-items: flex-start;\n }\n\n .Tabs-container--align-center {\n align-items: center;\n }\n\n .Tablist__wrapper {\n position: relative;\n width: fit-content;\n max-width: 100%;\n overflow: hidden;\n }\n\n .Tablist__wrapper::after {\n content: '';\n position: absolute;\n right: var(--brand-Tabs-list-borderWidth-active);\n top: var(--base-size-2);\n bottom: var(--base-size-2);\n background: linear-gradient(to left, var(--brand-color-canvas-default) 30%, transparent);\n width: var(--base-size-48);\n z-index: 2;\n pointer-events: none;\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n visibility var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n opacity: calc(var(--has-overflow, 0) * var(--can-scroll-right, 0));\n border-radius: inherit;\n }\n\n .Tablist__wrapper--default::after,\n .Tablist__wrapper--accent::after {\n border-radius: var(--brand-borderRadius-full);\n }\n\n .Tablist__wrapper--underline::after {\n border-radius: var(--brand-borderRadius-large);\n }\n\n .Tablist__wrapper--lastTabIsActive::after {\n opacity: 0;\n visibility: hidden;\n }\n\n .Tabs {\n max-width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: none;\n -ms-overflow-style: none;\n }\n\n .Tabs::-webkit-scrollbar {\n display: none;\n }\n}\n\n.Tabs-container--align-start {\n justify-items: flex-start;\n}\n\n.Tabs-container--align-center {\n justify-items: center;\n}\n\n.Tabs--default,\n.Tabs--accent {\n border: var(--brand-Tabs-list-borderWidth-active) solid var(--brand-color-border-default);\n border-radius: var(--brand-borderRadius-full);\n}\n\n.Tabs--underline {\n gap: var(--base-size-24);\n}\n\n.Tabs__item {\n position: relative;\n z-index: 1;\n border: 0;\n background: transparent;\n cursor: pointer;\n padding: var(--base-size-8) var(--base-size-16);\n border-radius: var(--brand-borderRadius-full);\n transition: color var(--brand-animation-duration-fast) ease-in-out;\n white-space: nowrap;\n font-family: var(--brand-fontStack-sansSerif);\n font-weight: var(--brand-text-weight-600);\n font-size: var(--brand-text-size-200);\n line-height: var(--brand-text-lineHeight-200);\n letter-spacing: var(--brand-text-letterSpacing-200);\n color: var(--brand-color-text-default);\n}\n\n.Tabs__slider {\n position: absolute;\n top: var(--base-size-4);\n bottom: var(--base-size-4);\n transition: all var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n z-index: 0;\n transform: translateX(var(--brand-Tabs-slider-x, 0px));\n width: var(--brand-Tabs-slider-width);\n}\n\n.Tabs--default .Tabs__slider {\n border-radius: var(--brand-borderRadius-full);\n border: var(--brand-borderWidth-thin) solid var(--brand-Tabs-item-default-borderColor-active);\n background: var(--brand-Tabs-item-default-bgColor-active);\n}\n\n.Tabs--accent .Tabs__slider {\n border-radius: var(--brand-borderRadius-full);\n border: var(--brand-borderWidth-thin) solid transparent;\n background: var(--brand-Tabs-item-accent-bgColor-rest);\n}\n\n.Tabs--underline .Tabs__slider {\n border-bottom: var(--brand-borderWidth-thick) solid var(--brand-Tabs-item-underline-rest);\n}\n\n.Tabs__item:focus-visible {\n outline: var(--base-size-2) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\n.Tabs__item--active {\n color: var(--brand-color-text-default);\n}\n\n.Tabs--underline .Tabs__item {\n padding: var(--base-size-8);\n\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.Tabs--accent .Tabs__item {\n transition: color var(--brand-animation-duration-faster) ease;\n}\n\n.Tabs--accent .Tabs__item--active {\n color: var(--brand-Tabs-item-accent-fgColor-rest);\n}\n\n.Tabs__panelContainer {\n margin-block-start: var(--base-size-16);\n}\n\n.Tabs__panel {\n color: var(--brand-color-text-default);\n}\n\n.Tabs__controls {\n margin-block-end: var(--base-size-12);\n}\n\n@media screen and (min-width: 48rem) {\n .Tabs__controls {\n display: none;\n }\n\n .Tabs__item {\n padding-inline: var(--base-size-24);\n }\n}\n"],"mappings":""}

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

@@ -4,8 +4,8 @@ import type { AvatarProps } from '../';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/testimonial/base.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/testimonial/colors-with-modes.css';
 type TestimonialSize = 'small' | 'large';
-export declare const TestimonialQuoteMarkColors: readonly ["default", "blue", "coral", "green", "gray", "indigo", "lemon", "lime", "orange", "pink", "purple", "red", "teal", "yellow", "blue-purple", "green-blue", "pink-blue", "purple-red", "red-orange"];
-export declare const defaultQuoteMarkColor: "default";
+export declare const TestimonialQuoteMarkColors: readonly ["default", "blue", "coral", "green", "gray", "indigo", "lemon", "lime", "orange", "pink", "purple", "red", "teal", "yellow"];
+export declare const defaultQuoteMarkColor = "green";
 export declare const TestimonialVariants: readonly ["subtle", "default", "minimal", "expressive"];
 type TestimonialVariant = (typeof TestimonialVariants)[number];
 export declare const defaultTestimonialVariant: TestimonialVariant;
@@ -28,6 +28,10 @@ export type TestimonialProps = {
     size?: TestimonialSize;
     /** Sets the color of the quote mark */
     quoteMarkColor?: (typeof TestimonialQuoteMarkColors)[number];
+    /** Class applied to the quote mark. */
+    quoteMarkClassName?: string;
+    /** Class applied to the attribution wrapper. */
+    mediaClassName?: string;
 } & BaseProps<HTMLElement> & React.HTMLAttributes<HTMLElement>;
 /**
  * Testimonial quote child element
@@ -52,7 +56,7 @@ type LogoProps = {
  * Testimonial avatar child element
  * <Testimonial.Avatar>
  */
-declare function _Avatar({ size, ...rest }: AvatarProps): React.JSX.Element;
+declare function _Avatar({ size, className, ...rest }: AvatarProps): React.JSX.Element;
 /**
  * Use Testimonial to display a quote from a customer or user.
  * @see https://primer.style/brand/components/Testimonial

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

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