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

package/esm/Tabs/Tabs.js

@@ -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 { 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

@@ -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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"}
+{"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}

@@ -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)}}
+.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

@@ -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

@@ -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":""}
+{"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

@@ -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

@@ -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"}
+{"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"}