@primer/react-brand 0.80.0-rc.93799279 → 0.80.0-rc.b232dc70

package/esm/CarouselPagination/CarouselPagination.js

@@ -0,0 +1,97 @@
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
+import t from "../hooks/useIsomorphicLayoutEffect.js";
+import { IconButton as n } from "../IconButton/IconButton.js";
+import { ChevronLeftIcon as r } from "../node_modules/@primer/octicons-react/dist/icons/ChevronLeftIcon.js";
+import { ChevronRightIcon as i } from "../node_modules/@primer/octicons-react/dist/icons/ChevronRightIcon.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/carousel-pagination/colors-with-modes-IFYKunDL.css';/* empty css                                                                                                                 */
+import a from "./CarouselPagination.module.js";
+import { createElement as o, forwardRef as s, useRef as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/CarouselPagination/CarouselPagination.tsx
+var d = { root: "CarouselPagination" }, f = {
+	previous: "Previous item",
+	next: "Next item",
+	item: "Go to item {current}"
+};
+function p({ itemCount: s, activeIndex: p, onChange: m, loop: h = !1, labels: g, itemAttributesBuilder: _, className: v, "data-testid": y, ...b }, x) {
+	let S = c(null), C = Math.max(0, Math.min(Number.isInteger(p) ? p : 0, s - 1)), w = (e, t) => e.replace(/\{(current|total)\}/g, (e, n) => String(n === "current" ? t + 1 : n === "total" ? s : e));
+	if (t(() => {
+		let e = S.current, t = e?.querySelector("[aria-current=\"true\"]");
+		if (!e || !t) return;
+		let n = () => {
+			if (e.clientWidth === 0) return;
+			let n = e.getBoundingClientRect(), r = t.getBoundingClientRect(), i = t.previousElementSibling?.getBoundingClientRect(), a = t.nextElementSibling?.getBoundingClientRect(), o = n.left + e.clientLeft, s = o + e.clientWidth, c = [r, ...a ? [a] : []], l = [...c, ...i ? [i] : []], u = Math.min(...l.map((e) => e.left)), d = Math.max(...l.map((e) => e.right));
+			d - u > e.clientWidth && (u = Math.min(...c.map((e) => e.left)), d = Math.max(...c.map((e) => e.right))), d - u > e.clientWidth && (u = r.left, d = r.right), u < o ? e.scrollLeft += u - o : d > s && (e.scrollLeft += d - s);
+		};
+		n();
+		let r = new ResizeObserver(n);
+		r.observe(e);
+		let i = (e) => {
+			e.target === t && e.propertyName === "width" && n();
+		};
+		return t.addEventListener("transitionend", i), () => {
+			r.disconnect(), t.removeEventListener("transitionend", i);
+		};
+	}, [C, s]), !Number.isInteger(s) || s <= 1) return null;
+	let T = !h && C === 0, E = !h && C === s - 1;
+	return /* @__PURE__ */ u("div", {
+		...b,
+		ref: x,
+		role: "group",
+		className: e(a.CarouselPagination, v),
+		"data-testid": y || d.root,
+		children: [
+			/* @__PURE__ */ l(n, {
+				type: "button",
+				icon: r,
+				size: "small",
+				variant: "secondary",
+				rounded: !0,
+				inactive: T,
+				className: e(a.CarouselPagination__arrowButton, a[`CarouselPagination__arrowButton--${T ? "inactive" : "available"}`]),
+				"aria-label": g?.previous ?? f.previous,
+				onClick: () => {
+					T || m(C === 0 ? s - 1 : C - 1);
+				}
+			}),
+			/* @__PURE__ */ l("div", {
+				ref: S,
+				className: a.CarouselPagination__indicators,
+				style: { "--carousel-pagination-item-count": s },
+				children: Array.from({ length: s }, (t, n) => {
+					let { className: r, onClick: i, ...s } = _?.(n) ?? {}, c = n === C;
+					return /* @__PURE__ */ o("button", {
+						...s,
+						key: n,
+						type: "button",
+						className: e(a.CarouselPagination__indicator, c && a["CarouselPagination__indicator--active"], r),
+						"aria-label": s["aria-label"] ?? w(g?.item ?? f.item, n),
+						"aria-current": c ? "true" : void 0,
+						"aria-disabled": c || void 0,
+						onClick: (e) => {
+							i?.(e), !e.defaultPrevented && !c && m(n);
+						}
+					});
+				})
+			}),
+			/* @__PURE__ */ l(n, {
+				type: "button",
+				icon: i,
+				size: "small",
+				variant: "secondary",
+				rounded: !0,
+				inactive: E,
+				className: e(a.CarouselPagination__arrowButton, a[`CarouselPagination__arrowButton--${E ? "inactive" : "available"}`]),
+				"aria-label": g?.next ?? f.next,
+				onClick: () => {
+					E || m(C === s - 1 ? 0 : C + 1);
+				}
+			})
+		]
+	});
+}
+var m = s(p), h = Object.assign(m, { testIds: d });
+//#endregion
+export { h as CarouselPagination };
+
+//# sourceMappingURL=CarouselPagination.js.map

package/esm/CarouselPagination/CarouselPagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselPagination.js","names":[],"sources":["../../src/CarouselPagination/CarouselPagination.tsx"],"sourcesContent":["import React, {forwardRef, useRef} from 'react'\nimport {clsx} from 'clsx'\nimport {ChevronLeftIcon, ChevronRightIcon} from '@primer/octicons-react'\nimport {IconButton} from '../IconButton'\nimport useIsomorphicLayoutEffect from '../hooks/useIsomorphicLayoutEffect'\nimport type {BaseProps} from '../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/carousel-pagination/colors-with-modes.css'\n/** Main Stylesheet (as a CSS Module) */\nimport styles from './CarouselPagination.module.css'\n\nconst testIds = {\n  root: 'CarouselPagination',\n}\n\nexport type CarouselPaginationItemAttributes = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'type' | 'disabled' | 'aria-disabled' | 'aria-current'\n> & {[attribute: `data-${string}`]: string | number | boolean | undefined}\n\nexport type CarouselPaginationLabels = {\n  previous?: string\n  next?: string\n  /** Complete selector label using {current} and {total}. */\n  item?: string\n}\n\nexport type CarouselPaginationProps = BaseProps<HTMLDivElement> &\n  Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> & {\n    /** Total number of carousel items. */\n    itemCount: number\n    /** The current active item */\n    activeIndex: number\n    /** Requests a new activeIndex; the parent updates selection. */\n    onChange: (activeIndex: number) => void\n    /** Enables looping navigation between the first and last items. */\n    loop?: boolean\n    /** Accessible control labels for localization. */\n    labels?: CarouselPaginationLabels\n    /** Builds attributes for each item selector. */\n    itemAttributesBuilder?: (index: number) => CarouselPaginationItemAttributes\n    /** Accessible name for the controls. */\n    'aria-label': string\n    'data-testid'?: string\n  }\n\nconst defaultLabels = {\n  previous: 'Previous item',\n  next: 'Next item',\n  item: 'Go to item {current}',\n}\n\nfunction CarouselPaginationBase(\n  {\n    itemCount,\n    activeIndex,\n    onChange,\n    loop = false,\n    labels,\n    itemAttributesBuilder,\n    className,\n    'data-testid': testId,\n    ...props\n  }: CarouselPaginationProps,\n  ref: React.ForwardedRef<HTMLDivElement>,\n) {\n  const indicatorsRef = useRef<HTMLDivElement>(null)\n  const currentIndex = Math.max(0, Math.min(Number.isInteger(activeIndex) ? activeIndex : 0, itemCount - 1))\n  const formatItemLabel = (template: string, index: number) =>\n    template.replace(/\\{(current|total)\\}/g, (placeholder, name) =>\n      String(name === 'current' ? index + 1 : name === 'total' ? itemCount : placeholder),\n    )\n\n  useIsomorphicLayoutEffect(() => {\n    const indicators = indicatorsRef.current\n    const activeIndicator = indicators?.querySelector<HTMLButtonElement>('[aria-current=\"true\"]')\n    if (!indicators || !activeIndicator) return\n\n    const keepActiveIndicatorVisible = () => {\n      if (indicators.clientWidth === 0) return\n      const containerBounds = indicators.getBoundingClientRect()\n      const indicatorBounds = activeIndicator.getBoundingClientRect()\n      const previousBounds = activeIndicator.previousElementSibling?.getBoundingClientRect()\n      const nextBounds = activeIndicator.nextElementSibling?.getBoundingClientRect()\n      const visibleLeft = containerBounds.left + indicators.clientLeft\n      const visibleRight = visibleLeft + indicators.clientWidth\n      const selectionBounds = [indicatorBounds, ...(nextBounds ? [nextBounds] : [])]\n      const surroundingBounds = [...selectionBounds, ...(previousBounds ? [previousBounds] : [])]\n      let targetLeft = Math.min(...surroundingBounds.map(bounds => bounds.left))\n      let targetRight = Math.max(...surroundingBounds.map(bounds => bounds.right))\n\n      if (targetRight - targetLeft > indicators.clientWidth) {\n        targetLeft = Math.min(...selectionBounds.map(bounds => bounds.left))\n        targetRight = Math.max(...selectionBounds.map(bounds => bounds.right))\n      }\n      if (targetRight - targetLeft > indicators.clientWidth) {\n        targetLeft = indicatorBounds.left\n        targetRight = indicatorBounds.right\n      }\n\n      if (targetLeft < visibleLeft) {\n        indicators.scrollLeft += targetLeft - visibleLeft\n      } else if (targetRight > visibleRight) {\n        indicators.scrollLeft += targetRight - visibleRight\n      }\n    }\n\n    keepActiveIndicatorVisible()\n    const observer = new ResizeObserver(keepActiveIndicatorVisible)\n    observer.observe(indicators)\n    const finishIndicatorTransition = (event: TransitionEvent) => {\n      if (event.target === activeIndicator && event.propertyName === 'width') keepActiveIndicatorVisible()\n    }\n    activeIndicator.addEventListener('transitionend', finishIndicatorTransition)\n    return () => {\n      observer.disconnect()\n      activeIndicator.removeEventListener('transitionend', finishIndicatorTransition)\n    }\n  }, [currentIndex, itemCount])\n\n  // Short circuit if the carousel has less than 2 items\n  if (!Number.isInteger(itemCount) || itemCount <= 1) return null\n\n  const previousUnavailable = !loop && currentIndex === 0\n  const nextUnavailable = !loop && currentIndex === itemCount - 1\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      role=\"group\"\n      className={clsx(styles.CarouselPagination, className)}\n      data-testid={testId || testIds.root}\n    >\n      <IconButton\n        type=\"button\"\n        icon={ChevronLeftIcon}\n        size=\"small\"\n        variant=\"secondary\"\n        rounded\n        inactive={previousUnavailable}\n        className={clsx(\n          styles.CarouselPagination__arrowButton,\n          styles[`CarouselPagination__arrowButton--${previousUnavailable ? 'inactive' : 'available'}`],\n        )}\n        aria-label={labels?.previous ?? defaultLabels.previous}\n        onClick={() => {\n          if (!previousUnavailable) onChange(currentIndex === 0 ? itemCount - 1 : currentIndex - 1)\n        }}\n      />\n      <div\n        ref={indicatorsRef}\n        className={styles.CarouselPagination__indicators}\n        style={{'--carousel-pagination-item-count': itemCount} as React.CSSProperties}\n      >\n        {Array.from({length: itemCount}, (_, index) => {\n          const attributes = itemAttributesBuilder?.(index)\n          const {className: itemClassName, onClick, ...itemAttributes} = attributes ?? {}\n          const isActive = index === currentIndex\n\n          return (\n            <button\n              {...itemAttributes}\n              key={index}\n              type=\"button\"\n              className={clsx(\n                styles.CarouselPagination__indicator,\n                isActive && styles['CarouselPagination__indicator--active'],\n                itemClassName,\n              )}\n              aria-label={itemAttributes['aria-label'] ?? formatItemLabel(labels?.item ?? defaultLabels.item, index)}\n              aria-current={isActive ? 'true' : undefined}\n              aria-disabled={isActive || undefined}\n              onClick={event => {\n                onClick?.(event)\n                if (!event.defaultPrevented && !isActive) onChange(index)\n              }}\n            />\n          )\n        })}\n      </div>\n      <IconButton\n        type=\"button\"\n        icon={ChevronRightIcon}\n        size=\"small\"\n        variant=\"secondary\"\n        rounded\n        inactive={nextUnavailable}\n        className={clsx(\n          styles.CarouselPagination__arrowButton,\n          styles[`CarouselPagination__arrowButton--${nextUnavailable ? 'inactive' : 'available'}`],\n        )}\n        aria-label={labels?.next ?? defaultLabels.next}\n        onClick={() => {\n          if (!nextUnavailable) onChange(currentIndex === itemCount - 1 ? 0 : currentIndex + 1)\n        }}\n      />\n    </div>\n  )\n}\n\nconst Root = forwardRef<HTMLDivElement, CarouselPaginationProps>(CarouselPaginationBase)\n\n/**\n * Use CarouselPagination to navigate a collection of items.\n * @see https://primer.style/brand/components/CarouselPagination/\n */\nexport const CarouselPagination = Object.assign(Root, {testIds})\n"],"mappings":"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"}

package/esm/CarouselPagination/CarouselPagination.module-F-qylhO7.css

@@ -0,0 +1 @@
+.Primer_Brand__CarouselPagination-module__CarouselPagination___PH90q{align-items:center;gap:calc(var(--base-size-8) + var(--base-size-2));width:max-content;min-width:0;max-width:100%;padding:var(--base-size-6);border-radius:var(--brand-borderRadius-full);background:var(--brand-CarouselPagination-bgColor);flex:0 auto;display:inline-flex}.Primer_Brand__CarouselPagination-module__CarouselPagination___PH90q .Primer_Brand__CarouselPagination-module__CarouselPagination__arrowButton___yQphd{width:calc(var(--base-size-28) + var(--base-size-2));min-width:calc(var(--base-size-28) + var(--base-size-2));height:calc(var(--base-size-28) + var(--base-size-2));min-height:calc(var(--base-size-28) + var(--base-size-2));color:var(--brand-CarouselPagination-arrowButton-fgColor);background:var(--brand-color-canvas-default);border:var(--brand-borderWidth-thin) solid var(--brand-CarouselPagination-arrowButton-borderColor);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0}.Primer_Brand__CarouselPagination-module__CarouselPagination___PH90q .Primer_Brand__CarouselPagination-module__CarouselPagination__arrowButton--inactive___euhyS,.Primer_Brand__CarouselPagination-module__CarouselPagination___PH90q .Primer_Brand__CarouselPagination-module__CarouselPagination__arrowButton--inactive___euhyS:hover{color:var(--brand-CarouselPagination-arrowButton-inactive-fgColor);background:var(--brand-color-canvas-default);border-color:#0000}.Primer_Brand__CarouselPagination-module__CarouselPagination___PH90q .Primer_Brand__CarouselPagination-module__CarouselPagination__arrowButton___yQphd svg{width:var(--base-size-16);height:var(--base-size-16)}@media (hover:hover) and (pointer:fine){.Primer_Brand__CarouselPagination-module__CarouselPagination___PH90q .Primer_Brand__CarouselPagination-module__CarouselPagination__arrowButton--available___fw1dN:hover{background:var(--brand-CarouselPagination-bgColor);border-color:var(--brand-CarouselPagination-arrowButton-borderColor);box-shadow:none}}.Primer_Brand__CarouselPagination-module__CarouselPagination__indicators___ReV_f{align-items:center;gap:var(--base-size-6);width:calc(var(--base-size-6) * (var(--carousel-pagination-item-count) * 2 + .5));min-width:0;height:calc(var(--base-size-28) + var(--base-size-2));scroll-behavior:smooth;scrollbar-width:none;display:flex;overflow-x:auto}.Primer_Brand__CarouselPagination-module__CarouselPagination__indicator___cq9Tv{width:var(--base-size-6);height:var(--base-size-6);border-radius:var(--brand-borderRadius-full);background:var(--brand-CarouselPagination-indicator-bgColor);cursor:pointer;transition:width var(--brand-animation-duration-fast) cubic-bezier(.4, 0, .2, 1), background-color var(--brand-animation-duration-fast) cubic-bezier(.4, 0, .2, 1);border:0;flex:none;padding:0;position:relative}.Primer_Brand__CarouselPagination-module__CarouselPagination__indicator___cq9Tv:before{width:calc(100% + var(--base-size-6));height:calc(var(--base-size-28) + var(--base-size-2));content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.Primer_Brand__CarouselPagination-module__CarouselPagination__indicator--active___vC6GZ{width:calc(var(--base-size-6) * 2.5);background:var(--brand-CarouselPagination-indicator-active-bgColor)}.Primer_Brand__CarouselPagination-module__CarouselPagination__indicator___cq9Tv:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-4)}.Primer_Brand__CarouselPagination-module__CarouselPagination__arrowButton___yQphd:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}@media (prefers-reduced-motion:reduce){.Primer_Brand__CarouselPagination-module__CarouselPagination__indicators___ReV_f{scroll-behavior:auto}.Primer_Brand__CarouselPagination-module__CarouselPagination__indicator___cq9Tv{transition:none}}@media (forced-colors:active){.Primer_Brand__CarouselPagination-module__CarouselPagination__indicator___cq9Tv{background:buttontext}.Primer_Brand__CarouselPagination-module__CarouselPagination__indicator--active___vC6GZ{forced-color-adjust:none;background:highlight}}

package/esm/CarouselPagination/CarouselPagination.module.js

@@ -0,0 +1,14 @@
+import './CarouselPagination.module-F-qylhO7.css';//#region src/CarouselPagination/CarouselPagination.module.css
+var e = "Primer_Brand__CarouselPagination-module__CarouselPagination___PH90q", t = "Primer_Brand__CarouselPagination-module__CarouselPagination__arrowButton___yQphd", n = "Primer_Brand__CarouselPagination-module__CarouselPagination__indicators___ReV_f", r = "Primer_Brand__CarouselPagination-module__CarouselPagination__indicator___cq9Tv", i = {
+	CarouselPagination: e,
+	CarouselPagination__arrowButton: t,
+	"CarouselPagination__arrowButton--inactive": "Primer_Brand__CarouselPagination-module__CarouselPagination__arrowButton--inactive___euhyS",
+	"CarouselPagination__arrowButton--available": "Primer_Brand__CarouselPagination-module__CarouselPagination__arrowButton--available___fw1dN",
+	CarouselPagination__indicators: n,
+	CarouselPagination__indicator: r,
+	"CarouselPagination__indicator--active": "Primer_Brand__CarouselPagination-module__CarouselPagination__indicator--active___vC6GZ"
+};
+//#endregion
+export { e as CarouselPagination, t as CarouselPagination__arrowButton, r as CarouselPagination__indicator, n as CarouselPagination__indicators, i as default };
+
+//# sourceMappingURL=CarouselPagination.module.js.map

package/esm/CarouselPagination/CarouselPagination.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselPagination.module.js","names":[],"sources":["../../src/CarouselPagination/CarouselPagination.module.css"],"sourcesContent":[".CarouselPagination {\n  display: inline-flex;\n  flex: 0 1 auto;\n  min-width: 0;\n  align-items: center;\n  gap: calc(var(--base-size-8) + var(--base-size-2));\n  width: max-content;\n  max-width: 100%;\n  padding: var(--base-size-6);\n  border-radius: var(--brand-borderRadius-full);\n  background: var(--brand-CarouselPagination-bgColor);\n}\n\n.CarouselPagination .CarouselPagination__arrowButton {\n  width: calc(var(--base-size-28) + var(--base-size-2));\n  min-width: calc(var(--base-size-28) + var(--base-size-2));\n  height: calc(var(--base-size-28) + var(--base-size-2));\n  min-height: calc(var(--base-size-28) + var(--base-size-2));\n  padding: 0;\n  color: var(--brand-CarouselPagination-arrowButton-fgColor);\n  background: var(--brand-color-canvas-default);\n  border: var(--brand-borderWidth-thin) solid var(--brand-CarouselPagination-arrowButton-borderColor);\n  box-shadow: none;\n  backdrop-filter: none;\n}\n\n.CarouselPagination .CarouselPagination__arrowButton--inactive,\n.CarouselPagination .CarouselPagination__arrowButton--inactive:hover {\n  color: var(--brand-CarouselPagination-arrowButton-inactive-fgColor);\n  background: var(--brand-color-canvas-default);\n  border-color: transparent;\n}\n\n.CarouselPagination .CarouselPagination__arrowButton svg {\n  width: var(--base-size-16);\n  height: var(--base-size-16);\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .CarouselPagination .CarouselPagination__arrowButton--available:hover {\n    background: var(--brand-CarouselPagination-bgColor);\n    border-color: var(--brand-CarouselPagination-arrowButton-borderColor);\n    box-shadow: none;\n  }\n}\n\n.CarouselPagination__indicators {\n  display: flex;\n  align-items: center;\n  gap: var(--base-size-6);\n  width: calc(var(--base-size-6) * (var(--carousel-pagination-item-count) * 2 + 0.5));\n  min-width: 0;\n  height: calc(var(--base-size-28) + var(--base-size-2));\n  overflow-x: auto;\n  scroll-behavior: smooth;\n  scrollbar-width: none;\n}\n\n.CarouselPagination__indicator {\n  position: relative;\n  flex: none;\n  width: var(--base-size-6);\n  height: var(--base-size-6);\n  padding: 0;\n  border: 0;\n  border-radius: var(--brand-borderRadius-full);\n  background: var(--brand-CarouselPagination-indicator-bgColor);\n  cursor: pointer;\n  transition: width var(--brand-animation-duration-fast) cubic-bezier(0.4, 0, 0.2, 1),\n    background-color var(--brand-animation-duration-fast) cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.CarouselPagination__indicator::before {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: calc(100% + var(--base-size-6));\n  height: calc(var(--base-size-28) + var(--base-size-2));\n  content: '';\n  transform: translate(-50%, -50%);\n}\n\n.CarouselPagination__indicator--active {\n  width: calc(var(--base-size-6) * 2.5);\n  background: var(--brand-CarouselPagination-indicator-active-bgColor);\n}\n\n.CarouselPagination__indicator:focus-visible {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-4);\n}\n\n.CarouselPagination__arrowButton:focus-visible {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-2);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .CarouselPagination__indicators {\n    scroll-behavior: auto;\n  }\n\n  .CarouselPagination__indicator {\n    transition: none;\n  }\n}\n\n@media (forced-colors: active) {\n  .CarouselPagination__indicator {\n    background: ButtonText;\n  }\n\n  .CarouselPagination__indicator--active {\n    background: Highlight;\n    forced-color-adjust: none;\n  }\n}\n"],"mappings":""}

package/esm/CarouselPagination/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CarouselPagination';
+//# sourceMappingURL=index.d.ts.map

package/esm/CarouselPagination/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/CarouselPagination/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA"}

package/esm/FeatureComparisonTable/FeatureComparisonTable.module-BH8n2Ttj.css

@@ -0,0 +1 @@
+.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable___dngKP{--brand-FeatureComparisonTable-itemCount:1;--brand-FeatureComparisonTable-featureColumnWidth:var(--brand-FeatureComparisonTable-default-featureColumnWidth);width:100%;color:var(--brand-color-text-default);background-color:var(--brand-color-canvas-default);container-type:inline-size}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable--items2___x2QKi{--brand-FeatureComparisonTable-itemCount:2}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable--items3___PBf2a{--brand-FeatureComparisonTable-itemCount:3}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable--items4___C1tK_{--brand-FeatureComparisonTable-itemCount:4;--brand-FeatureComparisonTable-featureColumnWidth:var(--brand-FeatureComparisonTable-fourItems-featureColumnWidth)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__narrowHeading___olgb8{padding:var(--base-size-60) var(--base-size-20);text-align:center}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__narrowHeading___olgb8:before{content:none}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__table___M6UcH{border-collapse:collapse;table-layout:fixed;width:100%;display:none}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableHeading___qntyG{text-align:start}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeading___lLU9H{align-items:center;gap:var(--base-size-8);display:inline-flex}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowDescription___aPLbp{margin-block-start:var(--base-size-8)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__cell___KoDID{justify-content:center;align-items:center;gap:var(--base-size-8);text-align:center;word-wrap:anywhere;max-width:100%;display:inline-flex}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__cellIcon___li3MO{flex:0 0 var(--base-size-24);width:var(--base-size-24);height:var(--base-size-24);justify-content:center;align-items:center;display:inline-flex}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__cellIcon--included___gb5E0,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__cellIcon--unlimited___6S4_o,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__cellIcon--refresh___VM2hn{border-radius:var(--brand-borderRadius-full)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__cellIcon--included___gb5E0{color:var(--brand-FeatureComparisonTable-includedIndicator-fgColor);background-color:var(--brand-FeatureComparisonTable-includedIndicator-bgColor)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__cellIcon--unlimited___6S4_o{color:var(--brand-FeatureComparisonTable-unlimitedIndicator-fgColor);background-color:var(--brand-FeatureComparisonTable-unlimitedIndicator-bgColor)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__cellIcon--refresh___VM2hn{color:var(--brand-FeatureComparisonTable-refreshIndicator-fgColor);background-color:var(--brand-FeatureComparisonTable-refreshIndicator-bgColor)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__group___XE2zK{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__group___XE2zK~.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__group___XE2zK{border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__summary___8PpmB{justify-content:space-between;align-items:center;gap:var(--base-size-12);min-height:var(--base-size-80);padding:var(--base-size-24) var(--base-size-20) var(--base-size-4);cursor:pointer;list-style:none;display:flex}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__summary___8PpmB::-webkit-details-marker{display:none}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__chevron___FtiUb{width:var(--base-size-16);height:var(--base-size-16);margin-inline:var(--base-size-6);flex-shrink:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__chevron--expanded___3WPYL{transform:rotate(180deg)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__narrow___OkfDy .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY{border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__narrow___OkfDy .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY:first-child{border-block-start:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__narrow___OkfDy .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeading___lLU9H{min-height:var(--base-size-48);padding:var(--base-size-12) var(--base-size-20);justify-content:space-between;display:flex}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__narrow___OkfDy .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeadingContent___KSfue{padding:var(--base-size-12) var(--base-size-20)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__narrow___OkfDy .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeadingContent___KSfue .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeading___lLU9H{min-height:auto;padding:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planName___DTywr{word-wrap:anywhere}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__narrow___OkfDy .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__cell___KoDID{text-align:end;justify-content:flex-end}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planValues___bZ2yv{grid-template-columns:minmax(0,1fr) minmax(0,2fr);margin:0;display:grid}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planTerm___mzmmH,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planValue___Ph_zM{min-width:0;min-height:calc(var(--base-size-28) + var(--base-size-24));padding-block:var(--base-size-12);margin:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planTerm___mzmmH{padding-inline:var(--base-size-20) var(--base-size-8)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planValue___Ph_zM{padding-inline:var(--base-size-8) var(--base-size-20);text-align:end}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__item___bayqC{grid-row:1/span 4;grid-template-rows:subgrid;border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);text-align:start;align-content:start;display:grid}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__item--hasLabel___hvCZl{border-block-start:0;grid-row-end:span 5}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__item--offset___WWEYj{grid-row-start:2}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__itemContent___xO24j{grid-row:1/span 4;grid-template-rows:subgrid;grid-template-columns:minmax(0, 1fr) fit-content(calc((100% - var(--base-size-8)) / 2));grid-column-gap:var(--base-size-8);-moz-column-gap:var(--base-size-8);column-gap:var(--base-size-8);min-width:0;padding:var(--base-size-16) var(--base-size-28);align-content:start;justify-self:stretch;display:grid}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__itemContent--hasLabel___YTcaZ{border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);grid-row:2/span 4}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__labelCell___5nPTu{padding:calc(var(--base-size-16) - var(--brand-borderWidth-thin)) var(--base-size-28) var(--base-size-16);border-block-start:var(--brand-borderWidth-thin) solid var(--brand-FeatureComparisonTable-label-accentColor);grid-row:1;justify-self:stretch;align-items:center;display:flex;position:relative}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__labelCell___5nPTu:before{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);content:"";pointer-events:none;position:absolute;inset:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__label___WoGfw{font-family:var(--brand-fontStack-monospace);font-size:var(--brand-text-size-100);font-weight:var(--base-text-weight-medium);letter-spacing:var(--brand-text-letterSpacing-100);line-height:var(--brand-text-lineHeight-200);text-transform:uppercase;display:inline-block}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__itemHeading___6bVkq{word-wrap:anywhere;grid-row:1;align-self:start}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__description___A5hme{grid-area:2/1/auto/-1;margin-block-start:var(--base-size-12)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__price___5a2qj{text-align:end;word-wrap:anywhere;grid-area:1/2;align-self:start;margin:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__actions___LF_4R{grid-gap:var(--base-size-12);gap:var(--base-size-12);width:100%;grid-area:4/1/auto/-1;align-self:start;margin-block-start:var(--base-size-12);display:grid}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planTerm___mzmmH,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planValue___Ph_zM,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeaderCell___r2pHn,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableCell___anJpx{transition:background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY:focus-within{background-color:var(--brand-FeatureComparisonTable-rowHighlight-bgColor)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY a:focus-visible,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY button:focus-visible{z-index:1;position:relative}@media (width>=48rem){.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__narrow___OkfDy{max-width:38.625rem;margin-inline:auto}}@media (width>=80rem){.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable___dngKP{padding-block-start:var(--base-size-60)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__table___M6UcH{display:table}:where(.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headerCell___Y2QpE,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeaderCell___r2pHn,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableCell___anJpx,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupDivider___tbGNF){padding:var(--base-size-12) var(--base-size-28);border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);vertical-align:top}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headerCell___Y2QpE,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeaderCell___r2pHn,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupDivider___tbGNF{text-align:start}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY:last-child>*,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupDivider--noVisibleRows____IfnP{border-block-end:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headingGrid___uc4oR:before,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupDivider___tbGNF:after{content:none}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableCell___anJpx{text-align:center;vertical-align:middle}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupBackground___pFWoJ>:first-child,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupBackground___pFWoJ>:last-child,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeaderCell___r2pHn,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableCell___anJpx:last-child,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__item___bayqC{position:relative}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupBackground___pFWoJ>:first-child:before,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupBackground___pFWoJ>:last-child:before,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeaderCell___r2pHn:before,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableCell___anJpx:last-child:before,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__item___bayqC:before{content:"";pointer-events:none;position:absolute;inset:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__item___bayqC:before{inset-block-end:var(--brand-borderWidth-thin)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeaderCell___r2pHn:before,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupBackground___pFWoJ>:first-child:before,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__item___bayqC:before{border-inline-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableCell___anJpx:last-child:before,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupBackground___pFWoJ>:last-child:before{border-inline-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__featureColumn___yPFyJ{width:var(--brand-FeatureComparisonTable-featureColumnWidth)}:where(.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable--stickyHeaders___Vg9gu) .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headerCell___Y2QpE{background-color:var(--brand-color-canvas-default)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable--stickyHeaders___Vg9gu .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headingGrid___uc4oR:before{content:"";border:0;-o-border-image:linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default)) 0;border-image:linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default)) fill 0;z-index:-1;border-image-outset:0 100vw;height:auto;inset:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable--stickyHeaders___Vg9gu .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headingGrid___uc4oR:after{z-index:4}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupDivider___tbGNF{padding-block:var(--base-size-48) var(--base-size-4);position:relative}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupBackground___pFWoJ,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headingGrid___uc4oR{grid-template-columns:minmax(0, var(--brand-FeatureComparisonTable-featureColumnWidth)) repeat(var(--brand-FeatureComparisonTable-itemCount), minmax(0, 1fr));display:grid}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupBackground___pFWoJ{pointer-events:none;position:absolute;inset:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupControl___srZUw{justify-content:flex-start;align-items:center;gap:var(--base-size-12);min-height:calc(var(--base-size-28) + var(--base-size-24));color:inherit;font:inherit;text-align:inherit;cursor:pointer;background:0 0;border:0;padding:0;display:inline-flex;position:relative}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__chevron___FtiUb{margin-inline:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headingGrid___uc4oR{grid-template-rows:repeat(4,auto);width:100cqw}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headingGrid--hasLabel___z1_Pw{grid-template-rows:repeat(5,auto)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable--stickyHeaders___Vg9gu .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__head___iGAPA{z-index:2;position:sticky;inset-block-start:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headerCell___Y2QpE{grid-row:1/span 4;grid-template-rows:subgrid;border-block:0;padding:0;display:grid}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headerCell--hasLabel___5QsYF{grid-row-end:span 5}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableHeading___qntyG{padding:var(--base-size-28);align-self:end}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headerCell___Y2QpE:last-child .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__item___bayqC:before{border-inline-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableHeading--hasLabel___mUlr7{grid-row:2/-1;align-self:start;padding-block:0;position:relative;inset-block-start:var(--base-size-16)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__highlightedColumn___RwptH{background-color:var(--brand-FeatureComparisonTable-highlightedColumn-bgColor)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY:focus-within>*{background-color:var(--brand-FeatureComparisonTable-rowHighlight-bgColor)}}@media (hover:hover) and (pointer:fine){.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY:hover{background-color:var(--brand-FeatureComparisonTable-rowHighlight-bgColor)}}@media (hover:hover) and (pointer:fine) and (width>=80rem){.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY:hover>*{background-color:var(--brand-FeatureComparisonTable-rowHighlight-bgColor)}}@media (prefers-reduced-motion:reduce){.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planTerm___mzmmH,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planValue___Ph_zM,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeaderCell___r2pHn,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableCell___anJpx{transition-duration:0s}}

package/esm/FeatureComparisonTable/FeatureComparisonTable.module.js

@@ -1,4 +1,4 @@
-import './FeatureComparisonTable.module-CGnj3YJu.css';//#region src/FeatureComparisonTable/FeatureComparisonTable.module.css
+import './FeatureComparisonTable.module-BH8n2Ttj.css';//#region src/FeatureComparisonTable/FeatureComparisonTable.module.css
 var e = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable___dngKP", t = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__narrowHeading___olgb8", n = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__table___M6UcH", r = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableHeading___qntyG", i = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeading___lLU9H", a = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowDescription___aPLbp", o = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__cell___KoDID", s = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__cellIcon___li3MO", c = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__group___XE2zK", l = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__summary___8PpmB", u = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__chevron___FtiUb", d = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__narrow___OkfDy", f = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY", p = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeadingContent___KSfue", m = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planName___DTywr", h = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planValues___bZ2yv", g = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planTerm___mzmmH", _ = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planValue___Ph_zM", v = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__item___bayqC", y = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__itemContent___xO24j", b = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__labelCell___5nPTu", x = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__label___WoGfw", S = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__itemHeading___6bVkq", C = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__description___A5hme", w = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__price___5a2qj", T = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__actions___LF_4R", E = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeaderCell___r2pHn", D = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableCell___anJpx", O = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headerCell___Y2QpE", k = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupDivider___tbGNF", A = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headingGrid___uc4oR", j = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupBackground___pFWoJ", M = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__featureColumn___yPFyJ", N = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupControl___srZUw", P = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__head___iGAPA", F = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__highlightedColumn___RwptH", I = {
 	FeatureComparisonTable: e,
 	"FeatureComparisonTable--items2": "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable--items2___x2QKi",
@@ -42,7 +42,6 @@ var e = "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable___d
 	FeatureComparisonTable__groupDivider: k,
 	"FeatureComparisonTable__groupDivider--noVisibleRows": "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupDivider--noVisibleRows____IfnP",
 	FeatureComparisonTable__headingGrid: A,
-	"FeatureComparisonTable__tableCell--hasVariant": "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableCell--hasVariant___a9jCs",
 	FeatureComparisonTable__groupBackground: j,
 	FeatureComparisonTable__featureColumn: M,
 	"FeatureComparisonTable--stickyHeaders": "Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable--stickyHeaders___Vg9gu",

package/esm/FeatureComparisonTable/FeatureComparisonTable.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureComparisonTable.module.js","names":[],"sources":["../../src/FeatureComparisonTable/FeatureComparisonTable.module.css"],"sourcesContent":[".FeatureComparisonTable {\n  --brand-FeatureComparisonTable-itemCount: 1;\n  --brand-FeatureComparisonTable-featureColumnWidth: var(--brand-FeatureComparisonTable-default-featureColumnWidth);\n\n  container-type: inline-size;\n  width: 100%;\n  color: var(--brand-color-text-default);\n}\n\n.FeatureComparisonTable--items2 {\n  --brand-FeatureComparisonTable-itemCount: 2;\n}\n\n.FeatureComparisonTable--items3 {\n  --brand-FeatureComparisonTable-itemCount: 3;\n}\n\n.FeatureComparisonTable--items4 {\n  --brand-FeatureComparisonTable-itemCount: 4;\n  --brand-FeatureComparisonTable-featureColumnWidth: var(--brand-FeatureComparisonTable-fourItems-featureColumnWidth);\n}\n\n.FeatureComparisonTable__narrowHeading {\n  padding: var(--base-size-60) var(--base-size-20);\n  text-align: center;\n}\n\n.FeatureComparisonTable__narrowHeading::before {\n  content: none;\n}\n\n.FeatureComparisonTable__table {\n  display: none;\n  width: 100%;\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n\n.FeatureComparisonTable__tableHeading {\n  text-align: start;\n}\n\n.FeatureComparisonTable__rowHeading {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--base-size-8);\n}\n\n.FeatureComparisonTable__rowDescription {\n  margin-block-start: var(--base-size-8);\n}\n\n.FeatureComparisonTable__cell {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--base-size-8);\n  max-width: 100%;\n  text-align: center;\n  overflow-wrap: anywhere;\n}\n\n.FeatureComparisonTable__cellIcon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 var(--base-size-24);\n  width: var(--base-size-24);\n  height: var(--base-size-24);\n}\n\n.FeatureComparisonTable__cellIcon--included,\n.FeatureComparisonTable__cellIcon--unlimited,\n.FeatureComparisonTable__cellIcon--refresh {\n  border-radius: var(--brand-borderRadius-full);\n}\n\n.FeatureComparisonTable__cellIcon--included {\n  color: var(--brand-FeatureComparisonTable-includedIndicator-fgColor);\n  background-color: var(--brand-FeatureComparisonTable-includedIndicator-bgColor);\n}\n\n.FeatureComparisonTable__cellIcon--unlimited {\n  color: var(--brand-FeatureComparisonTable-unlimitedIndicator-fgColor);\n  background-color: var(--brand-FeatureComparisonTable-unlimitedIndicator-bgColor);\n}\n\n.FeatureComparisonTable__cellIcon--refresh {\n  color: var(--brand-FeatureComparisonTable-refreshIndicator-fgColor);\n  background-color: var(--brand-FeatureComparisonTable-refreshIndicator-bgColor);\n}\n\n.FeatureComparisonTable__group {\n  border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.FeatureComparisonTable__group ~ .FeatureComparisonTable__group {\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.FeatureComparisonTable__summary {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--base-size-12);\n  min-height: var(--base-size-80);\n  padding: var(--base-size-24) var(--base-size-20) var(--base-size-4);\n  list-style: none;\n  cursor: pointer;\n}\n\n.FeatureComparisonTable__summary::-webkit-details-marker {\n  display: none;\n}\n\n.FeatureComparisonTable__chevron {\n  flex-shrink: 0;\n  width: var(--base-size-16);\n  height: var(--base-size-16);\n  margin-inline: var(--base-size-6);\n}\n\n.FeatureComparisonTable__chevron--expanded {\n  transform: rotate(180deg);\n}\n\n.FeatureComparisonTable__narrow .FeatureComparisonTable__row {\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.FeatureComparisonTable__narrow .FeatureComparisonTable__row:first-child {\n  border-block-start: 0;\n}\n\n.FeatureComparisonTable__narrow .FeatureComparisonTable__rowHeading {\n  display: flex;\n  justify-content: space-between;\n  min-height: var(--base-size-48);\n  padding: var(--base-size-12) var(--base-size-20);\n}\n\n.FeatureComparisonTable__narrow .FeatureComparisonTable__rowHeadingContent {\n  padding: var(--base-size-12) var(--base-size-20);\n}\n\n.FeatureComparisonTable__narrow .FeatureComparisonTable__rowHeadingContent .FeatureComparisonTable__rowHeading {\n  min-height: auto;\n  padding: 0;\n}\n\n.FeatureComparisonTable__planName {\n  overflow-wrap: anywhere;\n}\n\n.FeatureComparisonTable__narrow .FeatureComparisonTable__cell {\n  justify-content: flex-end;\n  text-align: end;\n}\n\n.FeatureComparisonTable__planValues {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);\n  margin: 0;\n}\n\n.FeatureComparisonTable__planTerm,\n.FeatureComparisonTable__planValue {\n  margin: 0;\n  min-width: 0;\n  min-height: calc(var(--base-size-28) + var(--base-size-24));\n  padding-block: var(--base-size-12);\n}\n\n.FeatureComparisonTable__planTerm {\n  padding-inline: var(--base-size-20) var(--base-size-8);\n}\n\n.FeatureComparisonTable__planValue {\n  padding-inline: var(--base-size-8) var(--base-size-20);\n  text-align: end;\n}\n\n.FeatureComparisonTable__item {\n  display: grid;\n  grid-row: 1 / span 4;\n  grid-template-rows: subgrid;\n  align-content: start;\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  text-align: start;\n}\n\n.FeatureComparisonTable__item--hasLabel {\n  grid-row-end: span 5;\n  border-block-start: 0;\n}\n\n.FeatureComparisonTable__item--offset {\n  grid-row-start: 2;\n}\n\n.FeatureComparisonTable__itemContent {\n  display: grid;\n  grid-row: 1 / span 4;\n  grid-template-rows: subgrid;\n  grid-template-columns: minmax(0, 1fr) fit-content(calc((100% - var(--base-size-8)) / 2));\n  column-gap: var(--base-size-8);\n  align-content: start;\n  justify-self: stretch;\n  min-width: 0;\n  padding: var(--base-size-16) var(--base-size-28);\n}\n\n.FeatureComparisonTable__itemContent--hasLabel {\n  grid-row: 2 / span 4;\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n}\n\n.FeatureComparisonTable__labelCell {\n  position: relative;\n  display: flex;\n  grid-row: 1;\n  align-items: center;\n  justify-self: stretch;\n  padding: calc(var(--base-size-16) - var(--brand-borderWidth-thin)) var(--base-size-28) var(--base-size-16);\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-FeatureComparisonTable-label-accentColor);\n}\n\n.FeatureComparisonTable__labelCell::before {\n  position: absolute;\n  inset: 0;\n  border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n  content: '';\n  pointer-events: none;\n}\n\n.FeatureComparisonTable__label {\n  display: inline-block;\n  font-family: var(--brand-fontStack-monospace);\n  font-size: var(--brand-text-size-100);\n  font-weight: var(--base-text-weight-medium);\n  letter-spacing: var(--brand-text-letterSpacing-100);\n  line-height: var(--brand-text-lineHeight-200);\n  text-transform: uppercase;\n}\n\n.FeatureComparisonTable__itemHeading {\n  grid-row: 1;\n  align-self: start;\n  overflow-wrap: anywhere;\n}\n\n.FeatureComparisonTable__description {\n  grid-row: 2;\n  grid-column: 1 / -1;\n  margin-block-start: var(--base-size-12);\n}\n\n.FeatureComparisonTable__price {\n  grid-row: 1;\n  grid-column: 2;\n  align-self: start;\n  margin: 0;\n  text-align: end;\n  overflow-wrap: anywhere;\n}\n\n.FeatureComparisonTable__actions {\n  display: grid;\n  grid-row: 4;\n  grid-column: 1 / -1;\n  gap: var(--base-size-12);\n  align-self: start;\n  width: 100%;\n  margin-block-start: var(--base-size-12);\n}\n\n.FeatureComparisonTable__row,\n.FeatureComparisonTable__planTerm,\n.FeatureComparisonTable__planValue,\n.FeatureComparisonTable__rowHeaderCell,\n.FeatureComparisonTable__tableCell {\n  transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.FeatureComparisonTable__row:focus-within {\n  background-color: var(--brand-FeatureComparisonTable-rowHighlight-bgColor);\n}\n\n.FeatureComparisonTable__row :is(a, button):focus-visible {\n  position: relative;\n  z-index: 1;\n}\n\n@media (min-width: 48rem) {\n  .FeatureComparisonTable__narrow {\n    max-width: 38.625rem;\n    margin-inline: auto;\n  }\n}\n\n@media (min-width: 80rem) {\n  .FeatureComparisonTable {\n    padding-block-start: var(--base-size-60);\n  }\n\n  .FeatureComparisonTable__table {\n    display: table;\n  }\n\n  :where(\n      .FeatureComparisonTable__headerCell,\n      .FeatureComparisonTable__rowHeaderCell,\n      .FeatureComparisonTable__tableCell,\n      .FeatureComparisonTable__groupDivider\n    ) {\n    padding: var(--base-size-12) var(--base-size-28);\n    border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n    vertical-align: top;\n  }\n\n  .FeatureComparisonTable__headerCell,\n  .FeatureComparisonTable__rowHeaderCell,\n  .FeatureComparisonTable__groupDivider {\n    text-align: start;\n  }\n\n  .FeatureComparisonTable__row:last-child > *,\n  .FeatureComparisonTable__groupDivider--noVisibleRows {\n    border-block-end: 0;\n  }\n\n  .FeatureComparisonTable__headingGrid::before,\n  .FeatureComparisonTable__groupDivider::after {\n    content: none;\n  }\n\n  .FeatureComparisonTable__tableCell {\n    text-align: center;\n  }\n\n  .FeatureComparisonTable__tableCell--hasVariant {\n    vertical-align: middle;\n  }\n\n  .FeatureComparisonTable__rowHeaderCell,\n  .FeatureComparisonTable__tableCell:last-child,\n  .FeatureComparisonTable__groupBackground > :is(:first-child, :last-child),\n  .FeatureComparisonTable__item {\n    position: relative;\n  }\n\n  .FeatureComparisonTable__rowHeaderCell::before,\n  .FeatureComparisonTable__tableCell:last-child::before,\n  .FeatureComparisonTable__groupBackground > :is(:first-child, :last-child)::before,\n  .FeatureComparisonTable__item::before {\n    position: absolute;\n    inset: 0;\n    content: '';\n    pointer-events: none;\n  }\n\n  .FeatureComparisonTable__item::before {\n    inset-block-end: var(--brand-borderWidth-thin);\n  }\n\n  .FeatureComparisonTable__rowHeaderCell::before,\n  .FeatureComparisonTable__groupBackground > :first-child::before,\n  .FeatureComparisonTable__item::before {\n    border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .FeatureComparisonTable__tableCell:last-child::before,\n  .FeatureComparisonTable__groupBackground > :last-child::before {\n    border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .FeatureComparisonTable__featureColumn {\n    width: var(--brand-FeatureComparisonTable-featureColumnWidth);\n  }\n\n  :where(.FeatureComparisonTable--stickyHeaders) .FeatureComparisonTable__headerCell {\n    background-color: var(--brand-color-canvas-default);\n  }\n\n  .FeatureComparisonTable--stickyHeaders .FeatureComparisonTable__headingGrid::after {\n    z-index: 4;\n  }\n\n  .FeatureComparisonTable__groupDivider {\n    position: relative;\n    padding-block: var(--base-size-48) var(--base-size-4);\n  }\n\n  .FeatureComparisonTable__groupBackground,\n  .FeatureComparisonTable__headingGrid {\n    display: grid;\n    grid-template-columns:\n      minmax(0, var(--brand-FeatureComparisonTable-featureColumnWidth))\n      repeat(var(--brand-FeatureComparisonTable-itemCount), minmax(0, 1fr));\n  }\n\n  .FeatureComparisonTable__groupBackground {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n  }\n\n  .FeatureComparisonTable__groupControl {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: var(--base-size-12);\n    min-height: calc(var(--base-size-28) + var(--base-size-24));\n    padding: 0;\n    color: inherit;\n    font: inherit;\n    text-align: inherit;\n    background: transparent;\n    border: 0;\n    cursor: pointer;\n  }\n\n  .FeatureComparisonTable__chevron {\n    margin-inline: 0;\n  }\n\n  .FeatureComparisonTable__headingGrid {\n    width: 100cqw;\n    grid-template-rows: repeat(4, auto);\n  }\n\n  .FeatureComparisonTable__headingGrid--hasLabel {\n    grid-template-rows: repeat(5, auto);\n  }\n\n  .FeatureComparisonTable--stickyHeaders .FeatureComparisonTable__head {\n    position: sticky;\n    z-index: 2;\n    inset-block-start: 0;\n  }\n\n  .FeatureComparisonTable__headerCell {\n    display: grid;\n    grid-row: 1 / span 4;\n    grid-template-rows: subgrid;\n    padding: 0;\n    border-block-start: 0;\n    border-block-end: 0;\n  }\n\n  .FeatureComparisonTable__headerCell--hasLabel {\n    grid-row-end: span 5;\n  }\n\n  .FeatureComparisonTable__tableHeading {\n    align-self: end;\n    padding: var(--base-size-28);\n  }\n\n  .FeatureComparisonTable__headerCell:last-child .FeatureComparisonTable__item::before {\n    border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .FeatureComparisonTable__tableHeading--hasLabel {\n    position: relative;\n    grid-row: 2 / -1;\n    align-self: start;\n    padding-block: 0;\n    inset-block-start: var(--base-size-16);\n  }\n\n  .FeatureComparisonTable__highlightedColumn {\n    background-color: var(--brand-FeatureComparisonTable-highlightedColumn-bgColor);\n  }\n\n  .FeatureComparisonTable__row:focus-within > * {\n    background-color: var(--brand-FeatureComparisonTable-rowHighlight-bgColor);\n  }\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .FeatureComparisonTable__row:hover {\n    background-color: var(--brand-FeatureComparisonTable-rowHighlight-bgColor);\n  }\n}\n\n@media (hover: hover) and (pointer: fine) and (min-width: 80rem) {\n  .FeatureComparisonTable__row:hover > * {\n    background-color: var(--brand-FeatureComparisonTable-rowHighlight-bgColor);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .FeatureComparisonTable__row,\n  .FeatureComparisonTable__planTerm,\n  .FeatureComparisonTable__planValue,\n  .FeatureComparisonTable__rowHeaderCell,\n  .FeatureComparisonTable__tableCell {\n    transition-duration: 0s;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"FeatureComparisonTable.module.js","names":[],"sources":["../../src/FeatureComparisonTable/FeatureComparisonTable.module.css"],"sourcesContent":[".FeatureComparisonTable {\n  --brand-FeatureComparisonTable-itemCount: 1;\n  --brand-FeatureComparisonTable-featureColumnWidth: var(--brand-FeatureComparisonTable-default-featureColumnWidth);\n\n  container-type: inline-size;\n  width: 100%;\n  color: var(--brand-color-text-default);\n  background-color: var(--brand-color-canvas-default);\n}\n\n.FeatureComparisonTable--items2 {\n  --brand-FeatureComparisonTable-itemCount: 2;\n}\n\n.FeatureComparisonTable--items3 {\n  --brand-FeatureComparisonTable-itemCount: 3;\n}\n\n.FeatureComparisonTable--items4 {\n  --brand-FeatureComparisonTable-itemCount: 4;\n  --brand-FeatureComparisonTable-featureColumnWidth: var(--brand-FeatureComparisonTable-fourItems-featureColumnWidth);\n}\n\n.FeatureComparisonTable__narrowHeading {\n  padding: var(--base-size-60) var(--base-size-20);\n  text-align: center;\n}\n\n.FeatureComparisonTable__narrowHeading::before {\n  content: none;\n}\n\n.FeatureComparisonTable__table {\n  display: none;\n  width: 100%;\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n\n.FeatureComparisonTable__tableHeading {\n  text-align: start;\n}\n\n.FeatureComparisonTable__rowHeading {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--base-size-8);\n}\n\n.FeatureComparisonTable__rowDescription {\n  margin-block-start: var(--base-size-8);\n}\n\n.FeatureComparisonTable__cell {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--base-size-8);\n  max-width: 100%;\n  text-align: center;\n  overflow-wrap: anywhere;\n}\n\n.FeatureComparisonTable__cellIcon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 var(--base-size-24);\n  width: var(--base-size-24);\n  height: var(--base-size-24);\n}\n\n.FeatureComparisonTable__cellIcon--included,\n.FeatureComparisonTable__cellIcon--unlimited,\n.FeatureComparisonTable__cellIcon--refresh {\n  border-radius: var(--brand-borderRadius-full);\n}\n\n.FeatureComparisonTable__cellIcon--included {\n  color: var(--brand-FeatureComparisonTable-includedIndicator-fgColor);\n  background-color: var(--brand-FeatureComparisonTable-includedIndicator-bgColor);\n}\n\n.FeatureComparisonTable__cellIcon--unlimited {\n  color: var(--brand-FeatureComparisonTable-unlimitedIndicator-fgColor);\n  background-color: var(--brand-FeatureComparisonTable-unlimitedIndicator-bgColor);\n}\n\n.FeatureComparisonTable__cellIcon--refresh {\n  color: var(--brand-FeatureComparisonTable-refreshIndicator-fgColor);\n  background-color: var(--brand-FeatureComparisonTable-refreshIndicator-bgColor);\n}\n\n.FeatureComparisonTable__group {\n  border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.FeatureComparisonTable__group ~ .FeatureComparisonTable__group {\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.FeatureComparisonTable__summary {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--base-size-12);\n  min-height: var(--base-size-80);\n  padding: var(--base-size-24) var(--base-size-20) var(--base-size-4);\n  list-style: none;\n  cursor: pointer;\n}\n\n.FeatureComparisonTable__summary::-webkit-details-marker {\n  display: none;\n}\n\n.FeatureComparisonTable__chevron {\n  flex-shrink: 0;\n  width: var(--base-size-16);\n  height: var(--base-size-16);\n  margin-inline: var(--base-size-6);\n}\n\n.FeatureComparisonTable__chevron--expanded {\n  transform: rotate(180deg);\n}\n\n.FeatureComparisonTable__narrow .FeatureComparisonTable__row {\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.FeatureComparisonTable__narrow .FeatureComparisonTable__row:first-child {\n  border-block-start: 0;\n}\n\n.FeatureComparisonTable__narrow .FeatureComparisonTable__rowHeading {\n  display: flex;\n  justify-content: space-between;\n  min-height: var(--base-size-48);\n  padding: var(--base-size-12) var(--base-size-20);\n}\n\n.FeatureComparisonTable__narrow .FeatureComparisonTable__rowHeadingContent {\n  padding: var(--base-size-12) var(--base-size-20);\n}\n\n.FeatureComparisonTable__narrow .FeatureComparisonTable__rowHeadingContent .FeatureComparisonTable__rowHeading {\n  min-height: auto;\n  padding: 0;\n}\n\n.FeatureComparisonTable__planName {\n  overflow-wrap: anywhere;\n}\n\n.FeatureComparisonTable__narrow .FeatureComparisonTable__cell {\n  justify-content: flex-end;\n  text-align: end;\n}\n\n.FeatureComparisonTable__planValues {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);\n  margin: 0;\n}\n\n.FeatureComparisonTable__planTerm,\n.FeatureComparisonTable__planValue {\n  margin: 0;\n  min-width: 0;\n  min-height: calc(var(--base-size-28) + var(--base-size-24));\n  padding-block: var(--base-size-12);\n}\n\n.FeatureComparisonTable__planTerm {\n  padding-inline: var(--base-size-20) var(--base-size-8);\n}\n\n.FeatureComparisonTable__planValue {\n  padding-inline: var(--base-size-8) var(--base-size-20);\n  text-align: end;\n}\n\n.FeatureComparisonTable__item {\n  display: grid;\n  grid-row: 1 / span 4;\n  grid-template-rows: subgrid;\n  align-content: start;\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  text-align: start;\n}\n\n.FeatureComparisonTable__item--hasLabel {\n  grid-row-end: span 5;\n  border-block-start: 0;\n}\n\n.FeatureComparisonTable__item--offset {\n  grid-row-start: 2;\n}\n\n.FeatureComparisonTable__itemContent {\n  display: grid;\n  grid-row: 1 / span 4;\n  grid-template-rows: subgrid;\n  grid-template-columns: minmax(0, 1fr) fit-content(calc((100% - var(--base-size-8)) / 2));\n  column-gap: var(--base-size-8);\n  align-content: start;\n  justify-self: stretch;\n  min-width: 0;\n  padding: var(--base-size-16) var(--base-size-28);\n}\n\n.FeatureComparisonTable__itemContent--hasLabel {\n  grid-row: 2 / span 4;\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n}\n\n.FeatureComparisonTable__labelCell {\n  position: relative;\n  display: flex;\n  grid-row: 1;\n  align-items: center;\n  justify-self: stretch;\n  padding: calc(var(--base-size-16) - var(--brand-borderWidth-thin)) var(--base-size-28) var(--base-size-16);\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-FeatureComparisonTable-label-accentColor);\n}\n\n.FeatureComparisonTable__labelCell::before {\n  position: absolute;\n  inset: 0;\n  border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n  content: '';\n  pointer-events: none;\n}\n\n.FeatureComparisonTable__label {\n  display: inline-block;\n  font-family: var(--brand-fontStack-monospace);\n  font-size: var(--brand-text-size-100);\n  font-weight: var(--base-text-weight-medium);\n  letter-spacing: var(--brand-text-letterSpacing-100);\n  line-height: var(--brand-text-lineHeight-200);\n  text-transform: uppercase;\n}\n\n.FeatureComparisonTable__itemHeading {\n  grid-row: 1;\n  align-self: start;\n  overflow-wrap: anywhere;\n}\n\n.FeatureComparisonTable__description {\n  grid-row: 2;\n  grid-column: 1 / -1;\n  margin-block-start: var(--base-size-12);\n}\n\n.FeatureComparisonTable__price {\n  grid-row: 1;\n  grid-column: 2;\n  align-self: start;\n  margin: 0;\n  text-align: end;\n  overflow-wrap: anywhere;\n}\n\n.FeatureComparisonTable__actions {\n  display: grid;\n  grid-row: 4;\n  grid-column: 1 / -1;\n  gap: var(--base-size-12);\n  align-self: start;\n  width: 100%;\n  margin-block-start: var(--base-size-12);\n}\n\n.FeatureComparisonTable__row,\n.FeatureComparisonTable__planTerm,\n.FeatureComparisonTable__planValue,\n.FeatureComparisonTable__rowHeaderCell,\n.FeatureComparisonTable__tableCell {\n  transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.FeatureComparisonTable__row:focus-within {\n  background-color: var(--brand-FeatureComparisonTable-rowHighlight-bgColor);\n}\n\n.FeatureComparisonTable__row :is(a, button):focus-visible {\n  position: relative;\n  z-index: 1;\n}\n\n@media (min-width: 48rem) {\n  .FeatureComparisonTable__narrow {\n    max-width: 38.625rem;\n    margin-inline: auto;\n  }\n}\n\n@media (min-width: 80rem) {\n  .FeatureComparisonTable {\n    padding-block-start: var(--base-size-60);\n  }\n\n  .FeatureComparisonTable__table {\n    display: table;\n  }\n\n  :where(\n      .FeatureComparisonTable__headerCell,\n      .FeatureComparisonTable__rowHeaderCell,\n      .FeatureComparisonTable__tableCell,\n      .FeatureComparisonTable__groupDivider\n    ) {\n    padding: var(--base-size-12) var(--base-size-28);\n    border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n    vertical-align: top;\n  }\n\n  .FeatureComparisonTable__headerCell,\n  .FeatureComparisonTable__rowHeaderCell,\n  .FeatureComparisonTable__groupDivider {\n    text-align: start;\n  }\n\n  .FeatureComparisonTable__row:last-child > *,\n  .FeatureComparisonTable__groupDivider--noVisibleRows {\n    border-block-end: 0;\n  }\n\n  .FeatureComparisonTable__headingGrid::before,\n  .FeatureComparisonTable__groupDivider::after {\n    content: none;\n  }\n\n  .FeatureComparisonTable__tableCell {\n    text-align: center;\n    vertical-align: middle;\n  }\n\n  .FeatureComparisonTable__rowHeaderCell,\n  .FeatureComparisonTable__tableCell:last-child,\n  .FeatureComparisonTable__groupBackground > :is(:first-child, :last-child),\n  .FeatureComparisonTable__item {\n    position: relative;\n  }\n\n  .FeatureComparisonTable__rowHeaderCell::before,\n  .FeatureComparisonTable__tableCell:last-child::before,\n  .FeatureComparisonTable__groupBackground > :is(:first-child, :last-child)::before,\n  .FeatureComparisonTable__item::before {\n    position: absolute;\n    inset: 0;\n    content: '';\n    pointer-events: none;\n  }\n\n  .FeatureComparisonTable__item::before {\n    inset-block-end: var(--brand-borderWidth-thin);\n  }\n\n  .FeatureComparisonTable__rowHeaderCell::before,\n  .FeatureComparisonTable__groupBackground > :first-child::before,\n  .FeatureComparisonTable__item::before {\n    border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .FeatureComparisonTable__tableCell:last-child::before,\n  .FeatureComparisonTable__groupBackground > :last-child::before {\n    border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .FeatureComparisonTable__featureColumn {\n    width: var(--brand-FeatureComparisonTable-featureColumnWidth);\n  }\n\n  :where(.FeatureComparisonTable--stickyHeaders) .FeatureComparisonTable__headerCell {\n    background-color: var(--brand-color-canvas-default);\n  }\n\n  .FeatureComparisonTable--stickyHeaders .FeatureComparisonTable__headingGrid::before {\n    content: '';\n    inset: 0;\n    height: auto;\n    border: 0;\n    border-image: linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default)) fill 0;\n    border-image-outset: 0 100vw;\n    z-index: -1;\n  }\n\n  .FeatureComparisonTable--stickyHeaders .FeatureComparisonTable__headingGrid::after {\n    z-index: 4;\n  }\n\n  .FeatureComparisonTable__groupDivider {\n    position: relative;\n    padding-block: var(--base-size-48) var(--base-size-4);\n  }\n\n  .FeatureComparisonTable__groupBackground,\n  .FeatureComparisonTable__headingGrid {\n    display: grid;\n    grid-template-columns:\n      minmax(0, var(--brand-FeatureComparisonTable-featureColumnWidth))\n      repeat(var(--brand-FeatureComparisonTable-itemCount), minmax(0, 1fr));\n  }\n\n  .FeatureComparisonTable__groupBackground {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n  }\n\n  .FeatureComparisonTable__groupControl {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: var(--base-size-12);\n    min-height: calc(var(--base-size-28) + var(--base-size-24));\n    padding: 0;\n    color: inherit;\n    font: inherit;\n    text-align: inherit;\n    background: transparent;\n    border: 0;\n    cursor: pointer;\n  }\n\n  .FeatureComparisonTable__chevron {\n    margin-inline: 0;\n  }\n\n  .FeatureComparisonTable__headingGrid {\n    width: 100cqw;\n    grid-template-rows: repeat(4, auto);\n  }\n\n  .FeatureComparisonTable__headingGrid--hasLabel {\n    grid-template-rows: repeat(5, auto);\n  }\n\n  .FeatureComparisonTable--stickyHeaders .FeatureComparisonTable__head {\n    position: sticky;\n    z-index: 2;\n    inset-block-start: 0;\n  }\n\n  .FeatureComparisonTable__headerCell {\n    display: grid;\n    grid-row: 1 / span 4;\n    grid-template-rows: subgrid;\n    padding: 0;\n    border-block-start: 0;\n    border-block-end: 0;\n  }\n\n  .FeatureComparisonTable__headerCell--hasLabel {\n    grid-row-end: span 5;\n  }\n\n  .FeatureComparisonTable__tableHeading {\n    align-self: end;\n    padding: var(--base-size-28);\n  }\n\n  .FeatureComparisonTable__headerCell:last-child .FeatureComparisonTable__item::before {\n    border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .FeatureComparisonTable__tableHeading--hasLabel {\n    position: relative;\n    grid-row: 2 / -1;\n    align-self: start;\n    padding-block: 0;\n    inset-block-start: var(--base-size-16);\n  }\n\n  .FeatureComparisonTable__highlightedColumn {\n    background-color: var(--brand-FeatureComparisonTable-highlightedColumn-bgColor);\n  }\n\n  .FeatureComparisonTable__row:focus-within > * {\n    background-color: var(--brand-FeatureComparisonTable-rowHighlight-bgColor);\n  }\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .FeatureComparisonTable__row:hover {\n    background-color: var(--brand-FeatureComparisonTable-rowHighlight-bgColor);\n  }\n}\n\n@media (hover: hover) and (pointer: fine) and (min-width: 80rem) {\n  .FeatureComparisonTable__row:hover > * {\n    background-color: var(--brand-FeatureComparisonTable-rowHighlight-bgColor);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .FeatureComparisonTable__row,\n  .FeatureComparisonTable__planTerm,\n  .FeatureComparisonTable__planValue,\n  .FeatureComparisonTable__rowHeaderCell,\n  .FeatureComparisonTable__tableCell {\n    transition-duration: 0s;\n  }\n}\n"],"mappings":""}

package/esm/FeatureComparisonTable/sub-components/FeatureComparisonTableRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureComparisonTableRow.d.ts","sourceRoot":"","sources":["../../../src/FeatureComparisonTable/sub-components/FeatureComparisonTableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,KAAK,iBAAiB,EAAY,MAAM,OAAO,CAAA;AAI9D,OAAO,EAAC,KAAK,+BAA+B,EAA2B,MAAM,kCAAkC,CAAA;AAO/G,MAAM,MAAM,8BAA8B,GAAG,iBAAiB,CAAC,+BAA+B,CAAC,cAAc,CAAC,CAAC,CAAA;AAE/G,eAAO,MAAM,yBAAyB,GAAI,yBAAuB,8BAA8B,sBAoF9F,CAAA"}
+{"version":3,"file":"FeatureComparisonTableRow.d.ts","sourceRoot":"","sources":["../../../src/FeatureComparisonTable/sub-components/FeatureComparisonTableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,KAAK,iBAAiB,EAAY,MAAM,OAAO,CAAA;AAI9D,OAAO,EAAC,KAAK,+BAA+B,EAA2B,MAAM,kCAAkC,CAAA;AAO/G,MAAM,MAAM,8BAA8B,GAAG,iBAAiB,CAAC,+BAA+B,CAAC,cAAc,CAAC,CAAC,CAAA;AAE/G,eAAO,MAAM,yBAAyB,GAAI,yBAAuB,8BAA8B,sBAmF9F,CAAA"}

package/esm/FeatureComparisonTable/sub-components/FeatureComparisonTableRow.js

@@ -28,7 +28,7 @@ var h = ({ children: h, className: g }) => {
 			"data-testid": n.rowHeading,
 			children: C
 		}), _.map((t, n) => /* @__PURE__ */ p("td", {
-			className: e(i.FeatureComparisonTable__tableCell, o(t) && i.FeatureComparisonTable__highlightedColumn, S[n]?.props.variant && i["FeatureComparisonTable__tableCell--hasVariant"]),
+			className: e(i.FeatureComparisonTable__tableCell, o(t) && i.FeatureComparisonTable__highlightedColumn),
 			children: S[n]
 		}, t.key))]
 	}) : /* @__PURE__ */ m("div", {

package/esm/FeatureComparisonTable/sub-components/FeatureComparisonTableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureComparisonTableRow.js","names":[],"sources":["../../../src/FeatureComparisonTable/sub-components/FeatureComparisonTableRow.tsx"],"sourcesContent":["import React, {type PropsWithChildren, useEffect} from 'react'\nimport {clsx} from 'clsx'\nimport {Text} from '../../Text'\nimport styles from '../FeatureComparisonTable.module.css'\nimport {type FeatureComparisonTableBaseProps, useTableContext, testIds} from '../FeatureComparisonTableContext'\nimport {getChildrenOfType, hasItemLabel} from '../FeatureComparisonTableHelpers'\nimport {FeatureComparisonTableRowHeading} from './FeatureComparisonTableRowHeading'\nimport {FeatureComparisonTableRowDescription} from './FeatureComparisonTableRowDescription'\nimport {FeatureComparisonTableCell} from './FeatureComparisonTableCell'\nimport {FeatureComparisonTableItemHeading} from './FeatureComparisonTableItemHeading'\n\nexport type FeatureComparisonTableRowProps = PropsWithChildren<FeatureComparisonTableBaseProps<HTMLDivElement>>\n\nexport const FeatureComparisonTableRow = ({children, className}: FeatureComparisonTableRowProps) => {\n  const {items, breakpoint} = useTableContext()\n  const rowChildren = React.Children.toArray(children)\n  const heading = getChildrenOfType(rowChildren, FeatureComparisonTableRowHeading).at(-1)\n  const description = getChildrenOfType(rowChildren, FeatureComparisonTableRowDescription).at(-1)\n  const cells = getChildrenOfType(rowChildren, FeatureComparisonTableCell)\n\n  useEffect(() => {\n    if (process.env.NODE_ENV !== 'production' && cells.length !== items.length) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        `FeatureComparisonTable.Row: expected ${items.length} Cell children to match the number of items, but received ${cells.length}. Missing cells render empty and extra cells are ignored.`,\n      )\n    }\n  }, [cells.length, items.length])\n\n  const rowHeading =\n    heading && description ? (\n      <div className={styles.FeatureComparisonTable__rowHeadingContent}>\n        {heading}\n        {description}\n      </div>\n    ) : (\n      heading\n    )\n\n  if (breakpoint === 'wide') {\n    return (\n      <tr className={clsx(styles.FeatureComparisonTable__row, className)} data-testid={testIds.row}>\n        <th className={styles.FeatureComparisonTable__rowHeaderCell} scope=\"row\" data-testid={testIds.rowHeading}>\n          {rowHeading}\n        </th>\n        {items.map((item, index) => (\n          <td\n            className={clsx(\n              styles.FeatureComparisonTable__tableCell,\n              hasItemLabel(item) && styles.FeatureComparisonTable__highlightedColumn,\n              cells[index]?.props.variant && styles['FeatureComparisonTable__tableCell--hasVariant'],\n            )}\n            key={item.key}\n          >\n            {cells[index]}\n          </td>\n        ))}\n      </tr>\n    )\n  }\n\n  return (\n    <div className={clsx(styles.FeatureComparisonTable__row, className)} data-testid={testIds.row}>\n      <div data-testid={testIds.rowHeading}>{rowHeading}</div>\n      <dl className={styles.FeatureComparisonTable__planValues}>\n        {items.map((item, index) => {\n          const itemHeading = getChildrenOfType(\n            React.Children.toArray(item.props.children),\n            FeatureComparisonTableItemHeading,\n          ).at(-1)\n          const hasLabel = hasItemLabel(item)\n          return (\n            <React.Fragment key={item.key}>\n              <dt\n                className={clsx(\n                  styles.FeatureComparisonTable__planTerm,\n                  hasLabel && styles.FeatureComparisonTable__highlightedColumn,\n                )}\n              >\n                <Text as=\"div\" size=\"200\" variant=\"muted\" className={styles.FeatureComparisonTable__planName}>\n                  {itemHeading ? itemHeading.props.children : index + 1}\n                </Text>\n              </dt>\n              <dd\n                className={clsx(\n                  styles.FeatureComparisonTable__planValue,\n                  hasLabel && styles.FeatureComparisonTable__highlightedColumn,\n                )}\n              >\n                {cells[index]}\n              </dd>\n            </React.Fragment>\n          )\n        })}\n      </dl>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAaA,IAAa,KAA6B,EAAC,aAAU,mBAA+C;CAClG,IAAM,EAAC,UAAO,kBAAc,EAAgB,GACtC,IAAc,EAAM,SAAS,QAAQ,CAAQ,GAC7C,IAAU,EAAkB,GAAa,CAAgC,CAAC,CAAC,GAAG,EAAE,GAChF,IAAc,EAAkB,GAAa,CAAoC,CAAC,CAAC,GAAG,EAAE,GACxF,IAAQ,EAAkB,GAAa,CAA0B;CAEvE,QAAgB;EACd,AAAA,QAAA,IAAA,aAA6B,gBAAgB,EAAM,WAAW,EAAM,UAElE,QAAQ,KACN,wCAAwC,EAAM,OAAO,4DAA4D,EAAM,OAAO,0DAChI;CAEJ,GAAG,CAAC,EAAM,QAAQ,EAAM,MAAM,CAAC;CAE/B,IAAM,IACJ,KAAW,IACT,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAvB,CACG,GACA,CACE;MAEL;CAyBJ,OAtBI,MAAe,SAEf,kBAAC,MAAD;EAAI,WAAW,EAAK,EAAO,6BAA6B,CAAS;EAAG,eAAa,EAAQ;YAAzF,CACE,kBAAC,MAAD;GAAI,WAAW,EAAO;GAAuC,OAAM;GAAM,eAAa,EAAQ;aAC3F;EACC,CAAA,GACH,EAAM,KAAK,GAAM,MAChB,kBAAC,MAAD;GACE,WAAW,EACT,EAAO,mCACP,EAAa,CAAI,KAAK,EAAO,2CAC7B,EAAM,EAAM,EAAE,MAAM,WAAW,EAAO,gDACxC;aAGC,EAAM;EACL,GAHG,EAAK,GAGR,CACL,CACC;MAKN,kBAAC,OAAD;EAAK,WAAW,EAAK,EAAO,6BAA6B,CAAS;EAAG,eAAa,EAAQ;YAA1F,CACE,kBAAC,OAAD;GAAK,eAAa,EAAQ;aAAa;EAAgB,CAAA,GACvD,kBAAC,MAAD;GAAI,WAAW,EAAO;aACnB,EAAM,KAAK,GAAM,MAAU;IAC1B,IAAM,IAAc,EAClB,EAAM,SAAS,QAAQ,EAAK,MAAM,QAAQ,GAC1C,CACF,CAAC,CAAC,GAAG,EAAE,GACD,IAAW,EAAa,CAAI;IAClC,OACE,kBAAC,EAAM,UAAP,EAAA,UAAA,CACE,kBAAC,MAAD;KACE,WAAW,EACT,EAAO,kCACP,KAAY,EAAO,yCACrB;eAEA,kBAAC,GAAD;MAAM,IAAG;MAAM,MAAK;MAAM,SAAQ;MAAQ,WAAW,EAAO;gBACzD,IAAc,EAAY,MAAM,WAAW,IAAQ;KAChD,CAAA;IACJ,CAAA,GACJ,kBAAC,MAAD;KACE,WAAW,EACT,EAAO,mCACP,KAAY,EAAO,yCACrB;eAEC,EAAM;IACL,CAAA,CACU,EAAA,GAnBK,EAAK,GAmBV;GAEpB,CAAC;EACC,CAAA,CACD;;AAET"}
+{"version":3,"file":"FeatureComparisonTableRow.js","names":[],"sources":["../../../src/FeatureComparisonTable/sub-components/FeatureComparisonTableRow.tsx"],"sourcesContent":["import React, {type PropsWithChildren, useEffect} from 'react'\nimport {clsx} from 'clsx'\nimport {Text} from '../../Text'\nimport styles from '../FeatureComparisonTable.module.css'\nimport {type FeatureComparisonTableBaseProps, useTableContext, testIds} from '../FeatureComparisonTableContext'\nimport {getChildrenOfType, hasItemLabel} from '../FeatureComparisonTableHelpers'\nimport {FeatureComparisonTableRowHeading} from './FeatureComparisonTableRowHeading'\nimport {FeatureComparisonTableRowDescription} from './FeatureComparisonTableRowDescription'\nimport {FeatureComparisonTableCell} from './FeatureComparisonTableCell'\nimport {FeatureComparisonTableItemHeading} from './FeatureComparisonTableItemHeading'\n\nexport type FeatureComparisonTableRowProps = PropsWithChildren<FeatureComparisonTableBaseProps<HTMLDivElement>>\n\nexport const FeatureComparisonTableRow = ({children, className}: FeatureComparisonTableRowProps) => {\n  const {items, breakpoint} = useTableContext()\n  const rowChildren = React.Children.toArray(children)\n  const heading = getChildrenOfType(rowChildren, FeatureComparisonTableRowHeading).at(-1)\n  const description = getChildrenOfType(rowChildren, FeatureComparisonTableRowDescription).at(-1)\n  const cells = getChildrenOfType(rowChildren, FeatureComparisonTableCell)\n\n  useEffect(() => {\n    if (process.env.NODE_ENV !== 'production' && cells.length !== items.length) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        `FeatureComparisonTable.Row: expected ${items.length} Cell children to match the number of items, but received ${cells.length}. Missing cells render empty and extra cells are ignored.`,\n      )\n    }\n  }, [cells.length, items.length])\n\n  const rowHeading =\n    heading && description ? (\n      <div className={styles.FeatureComparisonTable__rowHeadingContent}>\n        {heading}\n        {description}\n      </div>\n    ) : (\n      heading\n    )\n\n  if (breakpoint === 'wide') {\n    return (\n      <tr className={clsx(styles.FeatureComparisonTable__row, className)} data-testid={testIds.row}>\n        <th className={styles.FeatureComparisonTable__rowHeaderCell} scope=\"row\" data-testid={testIds.rowHeading}>\n          {rowHeading}\n        </th>\n        {items.map((item, index) => (\n          <td\n            className={clsx(\n              styles.FeatureComparisonTable__tableCell,\n              hasItemLabel(item) && styles.FeatureComparisonTable__highlightedColumn,\n            )}\n            key={item.key}\n          >\n            {cells[index]}\n          </td>\n        ))}\n      </tr>\n    )\n  }\n\n  return (\n    <div className={clsx(styles.FeatureComparisonTable__row, className)} data-testid={testIds.row}>\n      <div data-testid={testIds.rowHeading}>{rowHeading}</div>\n      <dl className={styles.FeatureComparisonTable__planValues}>\n        {items.map((item, index) => {\n          const itemHeading = getChildrenOfType(\n            React.Children.toArray(item.props.children),\n            FeatureComparisonTableItemHeading,\n          ).at(-1)\n          const hasLabel = hasItemLabel(item)\n          return (\n            <React.Fragment key={item.key}>\n              <dt\n                className={clsx(\n                  styles.FeatureComparisonTable__planTerm,\n                  hasLabel && styles.FeatureComparisonTable__highlightedColumn,\n                )}\n              >\n                <Text as=\"div\" size=\"200\" variant=\"muted\" className={styles.FeatureComparisonTable__planName}>\n                  {itemHeading ? itemHeading.props.children : index + 1}\n                </Text>\n              </dt>\n              <dd\n                className={clsx(\n                  styles.FeatureComparisonTable__planValue,\n                  hasLabel && styles.FeatureComparisonTable__highlightedColumn,\n                )}\n              >\n                {cells[index]}\n              </dd>\n            </React.Fragment>\n          )\n        })}\n      </dl>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAaA,IAAa,KAA6B,EAAC,aAAU,mBAA+C;CAClG,IAAM,EAAC,UAAO,kBAAc,EAAgB,GACtC,IAAc,EAAM,SAAS,QAAQ,CAAQ,GAC7C,IAAU,EAAkB,GAAa,CAAgC,CAAC,CAAC,GAAG,EAAE,GAChF,IAAc,EAAkB,GAAa,CAAoC,CAAC,CAAC,GAAG,EAAE,GACxF,IAAQ,EAAkB,GAAa,CAA0B;CAEvE,QAAgB;EACd,AAAA,QAAA,IAAA,aAA6B,gBAAgB,EAAM,WAAW,EAAM,UAElE,QAAQ,KACN,wCAAwC,EAAM,OAAO,4DAA4D,EAAM,OAAO,0DAChI;CAEJ,GAAG,CAAC,EAAM,QAAQ,EAAM,MAAM,CAAC;CAE/B,IAAM,IACJ,KAAW,IACT,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAvB,CACG,GACA,CACE;MAEL;CAwBJ,OArBI,MAAe,SAEf,kBAAC,MAAD;EAAI,WAAW,EAAK,EAAO,6BAA6B,CAAS;EAAG,eAAa,EAAQ;YAAzF,CACE,kBAAC,MAAD;GAAI,WAAW,EAAO;GAAuC,OAAM;GAAM,eAAa,EAAQ;aAC3F;EACC,CAAA,GACH,EAAM,KAAK,GAAM,MAChB,kBAAC,MAAD;GACE,WAAW,EACT,EAAO,mCACP,EAAa,CAAI,KAAK,EAAO,yCAC/B;aAGC,EAAM;EACL,GAHG,EAAK,GAGR,CACL,CACC;MAKN,kBAAC,OAAD;EAAK,WAAW,EAAK,EAAO,6BAA6B,CAAS;EAAG,eAAa,EAAQ;YAA1F,CACE,kBAAC,OAAD;GAAK,eAAa,EAAQ;aAAa;EAAgB,CAAA,GACvD,kBAAC,MAAD;GAAI,WAAW,EAAO;aACnB,EAAM,KAAK,GAAM,MAAU;IAC1B,IAAM,IAAc,EAClB,EAAM,SAAS,QAAQ,EAAK,MAAM,QAAQ,GAC1C,CACF,CAAC,CAAC,GAAG,EAAE,GACD,IAAW,EAAa,CAAI;IAClC,OACE,kBAAC,EAAM,UAAP,EAAA,UAAA,CACE,kBAAC,MAAD;KACE,WAAW,EACT,EAAO,kCACP,KAAY,EAAO,yCACrB;eAEA,kBAAC,GAAD;MAAM,IAAG;MAAM,MAAK;MAAM,SAAQ;MAAQ,WAAW,EAAO;gBACzD,IAAc,EAAY,MAAM,WAAW,IAAQ;KAChD,CAAA;IACJ,CAAA,GACJ,kBAAC,MAAD;KACE,WAAW,EACT,EAAO,mCACP,KAAY,EAAO,yCACrB;eAEC,EAAM;IACL,CAAA,CACU,EAAA,GAnBK,EAAK,GAmBV;GAEpB,CAAC;EACC,CAAA,CACD;;AAET"}

package/esm/Hero/Hero.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../src/Hero/Hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAK7E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAInD,OAAO,KAAK,EAA0B,SAAS,EAAE,WAAW,EAAC,MAAM,eAAe,CAAA;AAclF;;GAEG;AACH,OAAO,2FAA2F,CAAA;AAkBlG,MAAM,MAAM,SAAS,GAAG,SAAS,CAAC,WAAW,CAAC,GAAG;IAC/C,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,mBAAmB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACzC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC1D,oBAAoB,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC3C,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAqTD,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIf;;;OAGG;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOH,CAAA"}
+{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../src/Hero/Hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAK7E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAInD,OAAO,KAAK,EAA0B,SAAS,EAAE,WAAW,EAAC,MAAM,eAAe,CAAA;AAclF;;GAEG;AACH,OAAO,2FAA2F,CAAA;AAkBlG,MAAM,MAAM,SAAS,GAAG,SAAS,CAAC,WAAW,CAAC,GAAG;IAC/C,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,mBAAmB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACzC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC1D,oBAAoB,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC3C,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAiTD,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIf;;;OAGG;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOH,CAAA"}

package/esm/Hero/Hero.js

@@ -29,7 +29,8 @@ var S = {
 	get imageWrapper() {
 		return `${this.root}-imageWrapper`;
 	}
-}, C = _(({ className: _, align: C = "start", children: w, imageContainerClassName: T, imageContainerStyle: E, imageContainerRef: D, imageBackgroundColor: O, variant: k = "default", trailingComponent: A, enableAnimation: j = !1, "data-testid": ne, ...M }, N) => {
+};
+function C({ className: _, align: C = "start", children: w, imageContainerClassName: T, imageContainerStyle: E, imageContainerRef: D, imageBackgroundColor: O, variant: k = "default", trailingComponent: A, enableAnimation: j = !1, "data-testid": ne, ...M }, N) {
 	let { HeroActions: P, HeroButtonGroupChild: re, HeroChildren: ie, HeroImageChild: F, HeroVideoChild: I, HeroHeaderChildren: L, HeroDescriptionChild: R } = v(() => {
 		let e = g.Children.toArray(w).reduce((e, t) => (g.isValidElement(t) && (t.type === m || t.type === h ? e.HeroActions.push(t) : t.type === u ? e.HeroButtonGroupChild = t : t.type === d ? e.HeroImageChild = t : t.type === f ? e.HeroVideoChild = t : (e.HeroChildren.push(t), t.type === s || t.type === p || t.type === c ? e.HeroHeaderChildren.push(t) : t.type === l && (e.HeroDescriptionChild = t))), e), {
 			HeroActions: [],
@@ -163,7 +164,8 @@ var S = {
 			})
 		})
 	});
-}), w = Object.assign(C, {
+}
+var w = _(C), T = Object.assign(w, {
 	Heading: c,
 	Description: l,
 	ButtonGroup: u,
@@ -176,6 +178,6 @@ var S = {
 	testIds: S
 });
 //#endregion
-export { w as Hero };
+export { T as Hero };
 
 //# sourceMappingURL=Hero.js.map

package/esm/Hero/Hero.js.map

@@ -1 +1 @@
-{"version":3,"file":"Hero.js","names":[],"sources":["../../src/Hero/Hero.tsx"],"sourcesContent":["import React, {forwardRef, Fragment, PropsWithChildren, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport {Grid} from '../Grid'\nimport {Stack} from '../Stack'\nimport {Box} from '../Box'\nimport type {BaseProps} from '../component-helpers'\nimport {AnimationProvider} from '../animation'\n\nimport {HeroContext, HeroMediaInlinePositionOptions} from './HeroContext'\nimport type {HeroMediaInlinePosition, HeroAlign, HeroVariant} from './HeroContext'\nimport {\n  HeroLabel,\n  HeroHeading,\n  HeroDescription,\n  HeroButtonGroup,\n  HeroImage,\n  HeroVideo,\n  HeroEyebrow,\n  HeroPrimaryAction,\n  HeroSecondaryAction,\n} from './sub-components'\nimport type {HeroImageProps, HeroVideoProps} from './sub-components'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/hero/base.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Hero.module.css'\n\nconst testIds = {\n  root: 'Hero',\n  get video() {\n    return `${this.root}-video`\n  },\n  get grid() {\n    return `${this.root}-grid`\n  },\n  get imageWrapper() {\n    return `${this.root}-imageWrapper`\n  },\n}\n\nexport type HeroProps = BaseProps<HTMLElement> & {\n  align?: HeroAlign\n  imageContainerClassName?: string\n  imageContainerStyle?: React.CSSProperties\n  imageContainerRef?: React.RefObject<HTMLDivElement | null>\n  imageBackgroundColor?: 'default' | 'subtle'\n  variant?: HeroVariant\n  enableAnimation?: boolean\n  /**\n   * Escape-hatch for inserting custom React components.\n   * Warning:\n   *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n   *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n   */\n  trailingComponent?: React.FunctionComponent\n  'data-testid'?: string\n}\n\nconst Root = forwardRef<HTMLElement, PropsWithChildren<HeroProps>>(\n  (\n    {\n      className,\n      align: alignProp = 'start',\n      children,\n      imageContainerClassName,\n      imageContainerStyle,\n      imageContainerRef,\n      imageBackgroundColor,\n      variant = 'default',\n      trailingComponent: TrailingComponent,\n      enableAnimation = false,\n      'data-testid': testId,\n      ...rest\n    },\n    ref,\n  ) => {\n    const {\n      HeroActions,\n      HeroButtonGroupChild,\n      HeroChildren,\n      HeroImageChild,\n      HeroVideoChild,\n      HeroHeaderChildren,\n      HeroDescriptionChild,\n    } = useMemo(() => {\n      const result = React.Children.toArray(children).reduce<{\n        HeroActions: React.ReactElement[]\n        HeroButtonGroupChild?: React.ReactElement\n        HeroImageChild?: React.ReactElement<HeroImageProps>\n        HeroVideoChild?: React.ReactElement<HeroVideoProps>\n        HeroChildren: React.ReactElement[]\n        HeroHeaderChildren: React.ReactElement[]\n        HeroDescriptionChild?: React.ReactElement\n      }>(\n        (acc, child) => {\n          if (React.isValidElement(child)) {\n            if (child.type === HeroPrimaryAction || child.type === HeroSecondaryAction) {\n              acc.HeroActions.push(child)\n            } else if (child.type === HeroButtonGroup) {\n              acc.HeroButtonGroupChild = child\n            } else if (child.type === HeroImage) {\n              acc.HeroImageChild = child as React.ReactElement<HeroImageProps>\n            } else if (child.type === HeroVideo) {\n              acc.HeroVideoChild = child as React.ReactElement<HeroVideoProps>\n            } else {\n              acc.HeroChildren.push(child)\n              if (child.type === HeroLabel || child.type === HeroEyebrow || child.type === HeroHeading) {\n                acc.HeroHeaderChildren.push(child)\n              } else if (child.type === HeroDescription) {\n                acc.HeroDescriptionChild = child\n              }\n            }\n          }\n          return acc\n        },\n        {\n          HeroActions: [],\n          HeroButtonGroupChild: undefined,\n          HeroChildren: [],\n          HeroImageChild: undefined,\n          HeroVideoChild: undefined,\n          HeroHeaderChildren: [],\n          HeroDescriptionChild: undefined,\n        },\n      )\n\n      // Prefer Hero.Image - don't show both\n      if (result.HeroImageChild && result.HeroVideoChild) {\n        result.HeroVideoChild = undefined\n      }\n\n      return result\n    }, [children])\n\n    const mediaPositionProp = HeroImageChild?.props.position || HeroVideoChild?.props.position\n\n    const mediaPosition = (() => {\n      if (variant === 'gridline-expressive' && mediaPositionProp?.startsWith('inline-')) {\n        if (process.env.NODE_ENV !== 'production') {\n          // eslint-disable-next-line no-console\n          console.warn(\n            `Hero: \"gridline-expressive\" variant does not support \"${mediaPositionProp}\" position. Defaulting to \"block-end\".`,\n          )\n        }\n        return 'block-end'\n      }\n      return mediaPositionProp || 'block-end'\n    })()\n    const mediaWrapperHasBorder = HeroImageChild?.props.enableBorder ?? HeroVideoChild?.props.enableBorder ?? true\n    const mediaPadding = HeroImageChild?.props.padding ?? HeroVideoChild?.props.padding ?? 'default'\n    const hasInlineMedia = HeroMediaInlinePositionOptions.includes(mediaPosition as HeroMediaInlinePosition)\n    const mediaChild = HeroImageChild || HeroVideoChild\n    const isGridline = variant === 'gridline'\n    const isGridlineExpressive = variant === 'gridline-expressive'\n    const isBlockEndPosition = mediaPosition === 'block-end'\n\n    if (\n      variant === 'default' &&\n      mediaPadding !== 'default' &&\n      (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')\n    ) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        `Hero: media padding is only supported by the \"gridline\" and \"gridline-expressive\" variants; ignoring padding=\"${mediaPadding}\".`,\n      )\n    }\n\n    const isInvalidGridlineAlignment = isGridlineExpressive && alignProp === 'center'\n    const align: HeroAlign = isInvalidGridlineAlignment ? 'start' : alignProp\n\n    if (isInvalidGridlineAlignment && (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')) {\n      // eslint-disable-next-line no-console\n      console.warn('Hero: the \"gridline-expressive\" variant does not support align=\"center\"; using \"start\" instead.')\n    }\n\n    const Tag = (isGridline || isGridlineExpressive) && enableAnimation ? AnimationProvider : Fragment\n    const tagProps =\n      (isGridline || isGridlineExpressive) && enableAnimation\n        ? {\n            autoStaggerChildren: false,\n            animationTrigger: 'immediate' as const,\n          }\n        : {}\n\n    const useContainedLayout = (isGridline || isGridlineExpressive) && isBlockEndPosition\n    const useInlineGridline = isGridline && hasInlineMedia\n\n    const heroLayoutClass = HeroImageChild ? styles['Hero--layout-image'] : styles['Hero--layout-default']\n    const isInlineStart = mediaPosition === 'inline-start'\n\n    const renderTrailingComponent = (shouldAnimate: boolean) =>\n      TrailingComponent && (\n        <Box animate={shouldAnimate ? {variant: 'slide-in-up' as const, delay: 1000, duration: 1000} : undefined}>\n          <div className={styles['Hero-trailing']}>\n            <TrailingComponent />\n          </div>\n        </Box>\n      )\n\n    const renderActions = () => (\n      <>\n        {HeroButtonGroupChild}\n        {HeroActions.length > 0 && <div className={styles['Hero-actions']}>{HeroActions}</div>}\n      </>\n    )\n\n    return (\n      <Tag {...tagProps}>\n        <HeroContext.Provider value={{imagePosition: mediaPosition, variant, align, hasInlineMedia, enableAnimation}}>\n          <section\n            className={clsx(\n              styles.Hero,\n              styles[`Hero--variant-${variant}`],\n              !hasInlineMedia && styles[`Hero--align-${align}`],\n              heroLayoutClass,\n              (HeroImageChild || HeroVideoChild) && styles[`Hero--image-pos-${mediaPosition}`],\n              (HeroImageChild || HeroVideoChild) && hasInlineMedia && styles['Hero--image-pos-inline'],\n              useInlineGridline && styles['Hero--variant-inline-gridline'],\n              className,\n            )}\n            ref={ref}\n            aria-labelledby=\"hero-section-brand-heading\"\n            data-testid={testId || testIds.root}\n            {...rest}\n          >\n            <Grid\n              fullWidth={!useContainedLayout && !useInlineGridline}\n              data-testid={testIds.grid}\n              className={clsx(\n                styles['Hero-grid'],\n                styles[`Hero-grid--${mediaPosition}`],\n                useContainedLayout && !isGridlineExpressive && styles['Hero-grid--contained'],\n                useInlineGridline && styles['Hero-grid--bordered-inline'],\n                isGridlineExpressive && styles['Hero-grid--expressive'],\n              )}\n            >\n              {isGridlineExpressive ? (\n                <>\n                  {/* Expressive variant: header column (left) */}\n                  <Grid.Column\n                    span={{medium: 12, large: HeroDescriptionChild ? 7 : 6}}\n                    className={styles['Hero-expressive-header-column']}\n                  >\n                    <Stack direction=\"vertical\" gap=\"none\" padding=\"none\" alignItems=\"flex-start\">\n                      {HeroHeaderChildren}\n                    </Stack>\n                  </Grid.Column>\n                  {/* Expressive variant: body column (right) */}\n                  <Grid.Column\n                    span={{medium: 12, large: HeroDescriptionChild ? 5 : 6}}\n                    className={styles['Hero-expressive-body-column']}\n                  >\n                    <Stack direction=\"vertical\" gap=\"none\" padding=\"none\" alignItems=\"flex-start\">\n                      {HeroDescriptionChild}\n                      {renderActions()}\n                      {renderTrailingComponent(enableAnimation)}\n                    </Stack>\n                  </Grid.Column>\n                </>\n              ) : (\n                <>\n                  {/* Standard GridLine variant: text column */}\n                  {isInlineStart && mediaChild && !useContainedLayout && (\n                    <Grid.Column\n                      ref={imageContainerRef}\n                      span={{large: 6}}\n                      className={clsx(\n                        imageBackgroundColor &&\n                          mediaPadding !== 'none' &&\n                          styles[`Hero-imageContainer--bg-${imageBackgroundColor}`],\n                        useInlineGridline &&\n                          mediaPadding === 'all' &&\n                          styles['Hero-imageContainer--inline-padding-all'],\n                        useInlineGridline &&\n                          mediaPadding === 'none' &&\n                          styles['Hero-imageContainer--inline-padding-none'],\n                        useInlineGridline && styles['Hero-imageContainer--inline-bordered'],\n                      )}\n                    >\n                      <div\n                        className={clsx(styles['Hero-mediaContainer'], imageContainerClassName)}\n                        style={imageContainerStyle}\n                      >\n                        {mediaChild}\n                      </div>\n                    </Grid.Column>\n                  )}\n                  <Grid.Column span={{large: mediaChild && hasInlineMedia ? 6 : 12}}>\n                    <Stack\n                      className={clsx(\n                        useInlineGridline && styles['Hero-text-column--inline-gridline'],\n                        useInlineGridline && styles['Hero-contentColumn--bordered-inline'],\n                      )}\n                      direction=\"vertical\"\n                      gap=\"none\"\n                      padding=\"none\"\n                      alignItems={hasInlineMedia ? 'flex-start' : align === 'start' ? 'flex-start' : 'center'}\n                      justifyContent={hasInlineMedia ? undefined : align === 'start' ? 'flex-start' : 'center'}\n                    >\n                      {HeroChildren}\n                      {renderActions()}\n                      {renderTrailingComponent(isGridline && enableAnimation)}\n                    </Stack>\n                  </Grid.Column>\n                  {!isInlineStart && mediaChild && !useContainedLayout && (\n                    <Grid.Column\n                      ref={imageContainerRef}\n                      span={{large: hasInlineMedia ? 6 : 12}}\n                      className={clsx(\n                        imageBackgroundColor &&\n                          mediaPadding !== 'none' &&\n                          styles[`Hero-imageContainer--bg-${imageBackgroundColor}`],\n                        useInlineGridline &&\n                          mediaPadding === 'all' &&\n                          styles['Hero-imageContainer--inline-padding-all'],\n                        useInlineGridline &&\n                          mediaPadding === 'none' &&\n                          styles['Hero-imageContainer--inline-padding-none'],\n                        useInlineGridline && styles['Hero-imageContainer--inline-bordered'],\n                      )}\n                    >\n                      <div\n                        className={clsx(styles['Hero-mediaContainer'], imageContainerClassName)}\n                        style={imageContainerStyle}\n                      >\n                        {mediaChild}\n                      </div>\n                    </Grid.Column>\n                  )}\n                </>\n              )}\n            </Grid>\n            {mediaChild && useContainedLayout && (\n              <div\n                ref={imageContainerRef}\n                data-testid={testIds.imageWrapper}\n                className={clsx(\n                  styles['Hero-imageWrapper'],\n                  imageContainerClassName,\n                  imageBackgroundColor &&\n                    mediaPadding !== 'none' &&\n                    styles[`Hero-imageWrapper--bg-${imageBackgroundColor}`],\n                  mediaPadding === 'none' && styles['Hero-imageWrapper--padding-none'],\n                )}\n                style={imageContainerStyle}\n              >\n                <div\n                  className={clsx(\n                    styles['Hero-imageWrapper-inner'],\n                    mediaPadding === 'all' && styles['Hero-imageWrapper-inner--padding-all'],\n                    mediaPadding === 'none' && styles['Hero-imageWrapper-inner--padding-none'],\n                    mediaWrapperHasBorder && styles['Hero-imageWrapper-inner--with-gridline'],\n                  )}\n                >\n                  {mediaChild}\n                </div>\n              </div>\n            )}\n          </section>\n        </HeroContext.Provider>\n      </Tag>\n    )\n  },\n)\n\nexport const Hero = Object.assign(Root, {\n  Heading: HeroHeading,\n  Description: HeroDescription,\n  ButtonGroup: HeroButtonGroup,\n  /**\n   * @deprecated Use `Hero.ButtonGroup` with `Button` or `ActionMenu` children instead.\n   * This component will be removed in a future release.\n   */\n  PrimaryAction: HeroPrimaryAction,\n  /**\n   * @deprecated Use `Hero.ButtonGroup` with `Button` or `ActionMenu` children instead.\n   * This component will be removed in a future release.\n   */\n  SecondaryAction: HeroSecondaryAction,\n  Image: HeroImage,\n  Video: HeroVideo,\n  Label: HeroLabel,\n  Eyebrow: HeroEyebrow,\n  testIds,\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA+BA,IAAM,IAAU;CACd,MAAM;CACN,IAAI,QAAQ;EACV,OAAO,GAAG,KAAK,KAAK;CACtB;CACA,IAAI,OAAO;EACT,OAAO,GAAG,KAAK,KAAK;CACtB;CACA,IAAI,eAAe;EACjB,OAAO,GAAG,KAAK,KAAK;CACtB;AACF,GAoBM,IAAO,GAET,EACE,cACA,OAAO,IAAY,SACnB,aACA,4BACA,wBACA,sBACA,yBACA,aAAU,WACV,mBAAmB,GACnB,qBAAkB,IAClB,eAAe,IACf,GAAG,KAEL,MACG;CACH,IAAM,EACJ,gBACA,0BACA,kBACA,mBACA,mBACA,uBACA,4BACE,QAAc;EAChB,IAAM,IAAS,EAAM,SAAS,QAAQ,CAAQ,CAAC,CAAC,QAS7C,GAAK,OACA,EAAM,eAAe,CAAK,MACxB,EAAM,SAAS,KAAqB,EAAM,SAAS,IACrD,EAAI,YAAY,KAAK,CAAK,IACjB,EAAM,SAAS,IACxB,EAAI,uBAAuB,IAClB,EAAM,SAAS,IACxB,EAAI,iBAAiB,IACZ,EAAM,SAAS,IACxB,EAAI,iBAAiB,KAErB,EAAI,aAAa,KAAK,CAAK,GACvB,EAAM,SAAS,KAAa,EAAM,SAAS,KAAe,EAAM,SAAS,IAC3E,EAAI,mBAAmB,KAAK,CAAK,IACxB,EAAM,SAAS,MACxB,EAAI,uBAAuB,MAI1B,IAET;GACE,aAAa,CAAC;GACd,sBAAsB,KAAA;GACtB,cAAc,CAAC;GACf,gBAAgB,KAAA;GAChB,gBAAgB,KAAA;GAChB,oBAAoB,CAAC;GACrB,sBAAsB,KAAA;EACxB,CACF;EAOA,OAJI,EAAO,kBAAkB,EAAO,mBAClC,EAAO,iBAAiB,KAAA,IAGnB;CACT,GAAG,CAAC,CAAQ,CAAC,GAEP,IAAoB,GAAgB,MAAM,YAAY,GAAgB,MAAM,UAE5E,IACA,MAAY,yBAAyB,GAAmB,WAAW,SAAS,KAC9E,QAAA,IAAA,aAA6B,gBAE3B,QAAQ,KACN,yDAAyD,EAAkB,uCAC7E,GAEK,eAEF,KAAqB,aAExB,KAAwB,GAAgB,MAAM,gBAAgB,GAAgB,MAAM,gBAAgB,IACpG,IAAe,GAAgB,MAAM,WAAW,GAAgB,MAAM,WAAW,WACjF,IAAiB,EAA+B,SAAS,CAAwC,GACjG,IAAa,KAAkB,GAC/B,IAAa,MAAY,YACzB,IAAuB,MAAY,uBACnC,IAAqB,MAAkB;CAE7C,AACE,MAAY,aACZ,MAAiB,cAAA,QAAA,IAAA,aACS,iBAAA,QAAA,IAAA,aAA0C,WAGpE,QAAQ,KACN,iHAAiH,EAAa,GAChI;CAGF,IAAM,IAA6B,KAAwB,MAAc,UACnE,IAAmB,IAA6B,UAAU;CAEhE,AAAI,MAAA,QAAA,IAAA,aAAwD,iBAAA,QAAA,IAAA,aAA0C,WAEpG,QAAQ,KAAK,uGAAiG;CAGhH,IAAM,MAAO,KAAc,MAAyB,IAAkB,IAAoB,IACpF,MACH,KAAc,MAAyB,IACpC;EACE,qBAAqB;EACrB,kBAAkB;CACpB,IACA,CAAC,GAED,KAAsB,KAAc,MAAyB,GAC7D,IAAoB,KAAc,GAElC,KAAkB,IAAiB,EAAO,wBAAwB,EAAO,yBACzE,IAAgB,MAAkB,gBAElC,KAA2B,MAC/B,KACE,kBAAC,IAAD;EAAK,SAAS,IAAgB;GAAC,SAAS;GAAwB,OAAO;GAAM,UAAU;EAAI,IAAI,KAAA;YAC7F,kBAAC,OAAD;GAAK,WAAW,EAAO;aACrB,kBAAC,GAAD,CAAoB,CAAA;EACjB,CAAA;CACF,CAAA,GAGH,UACJ,kBAAA,GAAA,EAAA,UAAA,CACG,IACA,EAAY,SAAS,KAAK,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAkB;CAAiB,CAAA,CACrF,EAAA,CAAA;CAGJ,OACE,kBAAC,IAAD;EAAK,GAAI;YACP,kBAAC,EAAY,UAAb;GAAsB,OAAO;IAAC,eAAe;IAAe;IAAS;IAAO;IAAgB;GAAe;aACzG,kBAAC,WAAD;IACE,WAAW,EACT,EAAO,MACP,EAAO,iBAAiB,MACxB,CAAC,KAAkB,EAAO,eAAe,MACzC,KACC,KAAkB,MAAmB,EAAO,mBAAmB,OAC/D,KAAkB,MAAmB,KAAkB,EAAO,2BAC/D,KAAqB,EAAO,kCAC5B,CACF;IACK;IACL,mBAAgB;IAChB,eAAa,MAAU,EAAQ;IAC/B,GAAI;cAdN,CAgBE,kBAAC,GAAD;KACE,WAAW,CAAC,KAAsB,CAAC;KACnC,eAAa,EAAQ;KACrB,WAAW,EACT,EAAO,cACP,EAAO,cAAc,MACrB,KAAsB,CAAC,KAAwB,EAAO,yBACtD,KAAqB,EAAO,+BAC5B,KAAwB,EAAO,wBACjC;eAEC,IACC,kBAAA,GAAA,EAAA,UAAA,CAEE,kBAAC,EAAK,QAAN;MACE,MAAM;OAAC,QAAQ;OAAI,OAAO,IAAuB,IAAI;MAAC;MACtD,WAAW,EAAO;gBAElB,kBAAC,GAAD;OAAO,WAAU;OAAW,KAAI;OAAO,SAAQ;OAAO,YAAW;iBAC9D;MACI,CAAA;KACI,CAAA,GAEb,kBAAC,EAAK,QAAN;MACE,MAAM;OAAC,QAAQ;OAAI,OAAO,IAAuB,IAAI;MAAC;MACtD,WAAW,EAAO;gBAElB,kBAAC,GAAD;OAAO,WAAU;OAAW,KAAI;OAAO,SAAQ;OAAO,YAAW;iBAAjE;QACG;QACA,EAAc;QACd,EAAwB,CAAe;OACnC;;KACI,CAAA,CACb,EAAA,CAAA,IAEF,kBAAA,GAAA,EAAA,UAAA;MAEG,KAAiB,KAAc,CAAC,KAC/B,kBAAC,EAAK,QAAN;OACE,KAAK;OACL,MAAM,EAAC,OAAO,EAAC;OACf,WAAW,EACT,KACE,MAAiB,UACjB,EAAO,2BAA2B,MACpC,KACE,MAAiB,SACjB,EAAO,4CACT,KACE,MAAiB,UACjB,EAAO,6CACT,KAAqB,EAAO,uCAC9B;iBAEA,kBAAC,OAAD;QACE,WAAW,EAAK,EAAO,wBAAwB,CAAuB;QACtE,OAAO;kBAEN;OACE,CAAA;MACM,CAAA;MAEf,kBAAC,EAAK,QAAN;OAAa,MAAM,EAAC,OAAO,KAAc,IAAiB,IAAI,GAAE;iBAC9D,kBAAC,GAAD;QACE,WAAW,EACT,KAAqB,EAAO,sCAC5B,KAAqB,EAAO,sCAC9B;QACA,WAAU;QACV,KAAI;QACJ,SAAQ;QACR,YAAY,KAAgC,MAAU,UAAzB,eAAkD;QAC/E,gBAAgB,IAAiB,KAAA,IAAY,MAAU,UAAU,eAAe;kBATlF;SAWG;SACA,EAAc;SACd,EAAwB,KAAc,CAAe;QACjD;;MACI,CAAA;MACZ,CAAC,KAAiB,KAAc,CAAC,KAChC,kBAAC,EAAK,QAAN;OACE,KAAK;OACL,MAAM,EAAC,OAAO,IAAiB,IAAI,GAAE;OACrC,WAAW,EACT,KACE,MAAiB,UACjB,EAAO,2BAA2B,MACpC,KACE,MAAiB,SACjB,EAAO,4CACT,KACE,MAAiB,UACjB,EAAO,6CACT,KAAqB,EAAO,uCAC9B;iBAEA,kBAAC,OAAD;QACE,WAAW,EAAK,EAAO,wBAAwB,CAAuB;QACtE,OAAO;kBAEN;OACE,CAAA;MACM,CAAA;KAEf,EAAA,CAAA;IAEA,CAAA,GACL,KAAc,KACb,kBAAC,OAAD;KACE,KAAK;KACL,eAAa,EAAQ;KACrB,WAAW,EACT,EAAO,sBACP,GACA,KACE,MAAiB,UACjB,EAAO,yBAAyB,MAClC,MAAiB,UAAU,EAAO,kCACpC;KACA,OAAO;eAEP,kBAAC,OAAD;MACE,WAAW,EACT,EAAO,4BACP,MAAiB,SAAS,EAAO,yCACjC,MAAiB,UAAU,EAAO,0CAClC,MAAyB,EAAO,yCAClC;gBAEC;KACE,CAAA;IACF,CAAA,CAEA;;EACW,CAAA;CACnB,CAAA;AAET,CACF,GAEa,IAAO,OAAO,OAAO,GAAM;CACtC,SAAS;CACT,aAAa;CACb,aAAa;CAKb,eAAe;CAKf,iBAAiB;CACjB,OAAO;CACP,OAAO;CACP,OAAO;CACP,SAAS;CACT;AACF,CAAC"}
+{"version":3,"file":"Hero.js","names":[],"sources":["../../src/Hero/Hero.tsx"],"sourcesContent":["import React, {forwardRef, Fragment, PropsWithChildren, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport {Grid} from '../Grid'\nimport {Stack} from '../Stack'\nimport {Box} from '../Box'\nimport type {BaseProps} from '../component-helpers'\nimport {AnimationProvider} from '../animation'\n\nimport {HeroContext, HeroMediaInlinePositionOptions} from './HeroContext'\nimport type {HeroMediaInlinePosition, HeroAlign, HeroVariant} from './HeroContext'\nimport {\n  HeroLabel,\n  HeroHeading,\n  HeroDescription,\n  HeroButtonGroup,\n  HeroImage,\n  HeroVideo,\n  HeroEyebrow,\n  HeroPrimaryAction,\n  HeroSecondaryAction,\n} from './sub-components'\nimport type {HeroImageProps, HeroVideoProps} from './sub-components'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/hero/base.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Hero.module.css'\n\nconst testIds = {\n  root: 'Hero',\n  get video() {\n    return `${this.root}-video`\n  },\n  get grid() {\n    return `${this.root}-grid`\n  },\n  get imageWrapper() {\n    return `${this.root}-imageWrapper`\n  },\n}\n\nexport type HeroProps = BaseProps<HTMLElement> & {\n  align?: HeroAlign\n  imageContainerClassName?: string\n  imageContainerStyle?: React.CSSProperties\n  imageContainerRef?: React.RefObject<HTMLDivElement | null>\n  imageBackgroundColor?: 'default' | 'subtle'\n  variant?: HeroVariant\n  enableAnimation?: boolean\n  /**\n   * Escape-hatch for inserting custom React components.\n   * Warning:\n   *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n   *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n   */\n  trailingComponent?: React.FunctionComponent\n  'data-testid'?: string\n}\n\nfunction HeroBase(\n  {\n    className,\n    align: alignProp = 'start',\n    children,\n    imageContainerClassName,\n    imageContainerStyle,\n    imageContainerRef,\n    imageBackgroundColor,\n    variant = 'default',\n    trailingComponent: TrailingComponent,\n    enableAnimation = false,\n    'data-testid': testId,\n    ...rest\n  }: PropsWithChildren<HeroProps>,\n  ref: React.ForwardedRef<HTMLElement>,\n) {\n  const {\n    HeroActions,\n    HeroButtonGroupChild,\n    HeroChildren,\n    HeroImageChild,\n    HeroVideoChild,\n    HeroHeaderChildren,\n    HeroDescriptionChild,\n  } = useMemo(() => {\n    const result = React.Children.toArray(children).reduce<{\n      HeroActions: React.ReactElement[]\n      HeroButtonGroupChild?: React.ReactElement\n      HeroImageChild?: React.ReactElement<HeroImageProps>\n      HeroVideoChild?: React.ReactElement<HeroVideoProps>\n      HeroChildren: React.ReactElement[]\n      HeroHeaderChildren: React.ReactElement[]\n      HeroDescriptionChild?: React.ReactElement\n    }>(\n      (acc, child) => {\n        if (React.isValidElement(child)) {\n          if (child.type === HeroPrimaryAction || child.type === HeroSecondaryAction) {\n            acc.HeroActions.push(child)\n          } else if (child.type === HeroButtonGroup) {\n            acc.HeroButtonGroupChild = child\n          } else if (child.type === HeroImage) {\n            acc.HeroImageChild = child as React.ReactElement<HeroImageProps>\n          } else if (child.type === HeroVideo) {\n            acc.HeroVideoChild = child as React.ReactElement<HeroVideoProps>\n          } else {\n            acc.HeroChildren.push(child)\n            if (child.type === HeroLabel || child.type === HeroEyebrow || child.type === HeroHeading) {\n              acc.HeroHeaderChildren.push(child)\n            } else if (child.type === HeroDescription) {\n              acc.HeroDescriptionChild = child\n            }\n          }\n        }\n        return acc\n      },\n      {\n        HeroActions: [],\n        HeroButtonGroupChild: undefined,\n        HeroChildren: [],\n        HeroImageChild: undefined,\n        HeroVideoChild: undefined,\n        HeroHeaderChildren: [],\n        HeroDescriptionChild: undefined,\n      },\n    )\n\n    // Prefer Hero.Image - don't show both\n    if (result.HeroImageChild && result.HeroVideoChild) {\n      result.HeroVideoChild = undefined\n    }\n\n    return result\n  }, [children])\n\n  const mediaPositionProp = HeroImageChild?.props.position || HeroVideoChild?.props.position\n\n  const mediaPosition = (() => {\n    if (variant === 'gridline-expressive' && mediaPositionProp?.startsWith('inline-')) {\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.warn(\n          `Hero: \"gridline-expressive\" variant does not support \"${mediaPositionProp}\" position. Defaulting to \"block-end\".`,\n        )\n      }\n      return 'block-end'\n    }\n    return mediaPositionProp || 'block-end'\n  })()\n  const mediaWrapperHasBorder = HeroImageChild?.props.enableBorder ?? HeroVideoChild?.props.enableBorder ?? true\n  const mediaPadding = HeroImageChild?.props.padding ?? HeroVideoChild?.props.padding ?? 'default'\n  const hasInlineMedia = HeroMediaInlinePositionOptions.includes(mediaPosition as HeroMediaInlinePosition)\n  const mediaChild = HeroImageChild || HeroVideoChild\n  const isGridline = variant === 'gridline'\n  const isGridlineExpressive = variant === 'gridline-expressive'\n  const isBlockEndPosition = mediaPosition === 'block-end'\n\n  if (\n    variant === 'default' &&\n    mediaPadding !== 'default' &&\n    (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')\n  ) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `Hero: media padding is only supported by the \"gridline\" and \"gridline-expressive\" variants; ignoring padding=\"${mediaPadding}\".`,\n    )\n  }\n\n  const isInvalidGridlineAlignment = isGridlineExpressive && alignProp === 'center'\n  const align: HeroAlign = isInvalidGridlineAlignment ? 'start' : alignProp\n\n  if (isInvalidGridlineAlignment && (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')) {\n    // eslint-disable-next-line no-console\n    console.warn('Hero: the \"gridline-expressive\" variant does not support align=\"center\"; using \"start\" instead.')\n  }\n\n  const Tag = (isGridline || isGridlineExpressive) && enableAnimation ? AnimationProvider : Fragment\n  const tagProps =\n    (isGridline || isGridlineExpressive) && enableAnimation\n      ? {\n          autoStaggerChildren: false,\n          animationTrigger: 'immediate' as const,\n        }\n      : {}\n\n  const useContainedLayout = (isGridline || isGridlineExpressive) && isBlockEndPosition\n  const useInlineGridline = isGridline && hasInlineMedia\n\n  const heroLayoutClass = HeroImageChild ? styles['Hero--layout-image'] : styles['Hero--layout-default']\n  const isInlineStart = mediaPosition === 'inline-start'\n\n  const renderTrailingComponent = (shouldAnimate: boolean) =>\n    TrailingComponent && (\n      <Box animate={shouldAnimate ? {variant: 'slide-in-up' as const, delay: 1000, duration: 1000} : undefined}>\n        <div className={styles['Hero-trailing']}>\n          <TrailingComponent />\n        </div>\n      </Box>\n    )\n\n  const renderActions = () => (\n    <>\n      {HeroButtonGroupChild}\n      {HeroActions.length > 0 && <div className={styles['Hero-actions']}>{HeroActions}</div>}\n    </>\n  )\n\n  return (\n    <Tag {...tagProps}>\n      <HeroContext.Provider value={{imagePosition: mediaPosition, variant, align, hasInlineMedia, enableAnimation}}>\n        <section\n          className={clsx(\n            styles.Hero,\n            styles[`Hero--variant-${variant}`],\n            !hasInlineMedia && styles[`Hero--align-${align}`],\n            heroLayoutClass,\n            (HeroImageChild || HeroVideoChild) && styles[`Hero--image-pos-${mediaPosition}`],\n            (HeroImageChild || HeroVideoChild) && hasInlineMedia && styles['Hero--image-pos-inline'],\n            useInlineGridline && styles['Hero--variant-inline-gridline'],\n            className,\n          )}\n          ref={ref}\n          aria-labelledby=\"hero-section-brand-heading\"\n          data-testid={testId || testIds.root}\n          {...rest}\n        >\n          <Grid\n            fullWidth={!useContainedLayout && !useInlineGridline}\n            data-testid={testIds.grid}\n            className={clsx(\n              styles['Hero-grid'],\n              styles[`Hero-grid--${mediaPosition}`],\n              useContainedLayout && !isGridlineExpressive && styles['Hero-grid--contained'],\n              useInlineGridline && styles['Hero-grid--bordered-inline'],\n              isGridlineExpressive && styles['Hero-grid--expressive'],\n            )}\n          >\n            {isGridlineExpressive ? (\n              <>\n                {/* Expressive variant: header column (left) */}\n                <Grid.Column\n                  span={{medium: 12, large: HeroDescriptionChild ? 7 : 6}}\n                  className={styles['Hero-expressive-header-column']}\n                >\n                  <Stack direction=\"vertical\" gap=\"none\" padding=\"none\" alignItems=\"flex-start\">\n                    {HeroHeaderChildren}\n                  </Stack>\n                </Grid.Column>\n                {/* Expressive variant: body column (right) */}\n                <Grid.Column\n                  span={{medium: 12, large: HeroDescriptionChild ? 5 : 6}}\n                  className={styles['Hero-expressive-body-column']}\n                >\n                  <Stack direction=\"vertical\" gap=\"none\" padding=\"none\" alignItems=\"flex-start\">\n                    {HeroDescriptionChild}\n                    {renderActions()}\n                    {renderTrailingComponent(enableAnimation)}\n                  </Stack>\n                </Grid.Column>\n              </>\n            ) : (\n              <>\n                {/* Standard GridLine variant: text column */}\n                {isInlineStart && mediaChild && !useContainedLayout && (\n                  <Grid.Column\n                    ref={imageContainerRef}\n                    span={{large: 6}}\n                    className={clsx(\n                      imageBackgroundColor &&\n                        mediaPadding !== 'none' &&\n                        styles[`Hero-imageContainer--bg-${imageBackgroundColor}`],\n                      useInlineGridline && mediaPadding === 'all' && styles['Hero-imageContainer--inline-padding-all'],\n                      useInlineGridline &&\n                        mediaPadding === 'none' &&\n                        styles['Hero-imageContainer--inline-padding-none'],\n                      useInlineGridline && styles['Hero-imageContainer--inline-bordered'],\n                    )}\n                  >\n                    <div\n                      className={clsx(styles['Hero-mediaContainer'], imageContainerClassName)}\n                      style={imageContainerStyle}\n                    >\n                      {mediaChild}\n                    </div>\n                  </Grid.Column>\n                )}\n                <Grid.Column span={{large: mediaChild && hasInlineMedia ? 6 : 12}}>\n                  <Stack\n                    className={clsx(\n                      useInlineGridline && styles['Hero-text-column--inline-gridline'],\n                      useInlineGridline && styles['Hero-contentColumn--bordered-inline'],\n                    )}\n                    direction=\"vertical\"\n                    gap=\"none\"\n                    padding=\"none\"\n                    alignItems={hasInlineMedia ? 'flex-start' : align === 'start' ? 'flex-start' : 'center'}\n                    justifyContent={hasInlineMedia ? undefined : align === 'start' ? 'flex-start' : 'center'}\n                  >\n                    {HeroChildren}\n                    {renderActions()}\n                    {renderTrailingComponent(isGridline && enableAnimation)}\n                  </Stack>\n                </Grid.Column>\n                {!isInlineStart && mediaChild && !useContainedLayout && (\n                  <Grid.Column\n                    ref={imageContainerRef}\n                    span={{large: hasInlineMedia ? 6 : 12}}\n                    className={clsx(\n                      imageBackgroundColor &&\n                        mediaPadding !== 'none' &&\n                        styles[`Hero-imageContainer--bg-${imageBackgroundColor}`],\n                      useInlineGridline && mediaPadding === 'all' && styles['Hero-imageContainer--inline-padding-all'],\n                      useInlineGridline &&\n                        mediaPadding === 'none' &&\n                        styles['Hero-imageContainer--inline-padding-none'],\n                      useInlineGridline && styles['Hero-imageContainer--inline-bordered'],\n                    )}\n                  >\n                    <div\n                      className={clsx(styles['Hero-mediaContainer'], imageContainerClassName)}\n                      style={imageContainerStyle}\n                    >\n                      {mediaChild}\n                    </div>\n                  </Grid.Column>\n                )}\n              </>\n            )}\n          </Grid>\n          {mediaChild && useContainedLayout && (\n            <div\n              ref={imageContainerRef}\n              data-testid={testIds.imageWrapper}\n              className={clsx(\n                styles['Hero-imageWrapper'],\n                imageContainerClassName,\n                imageBackgroundColor &&\n                  mediaPadding !== 'none' &&\n                  styles[`Hero-imageWrapper--bg-${imageBackgroundColor}`],\n                mediaPadding === 'none' && styles['Hero-imageWrapper--padding-none'],\n              )}\n              style={imageContainerStyle}\n            >\n              <div\n                className={clsx(\n                  styles['Hero-imageWrapper-inner'],\n                  mediaPadding === 'all' && styles['Hero-imageWrapper-inner--padding-all'],\n                  mediaPadding === 'none' && styles['Hero-imageWrapper-inner--padding-none'],\n                  mediaWrapperHasBorder && styles['Hero-imageWrapper-inner--with-gridline'],\n                )}\n              >\n                {mediaChild}\n              </div>\n            </div>\n          )}\n        </section>\n      </HeroContext.Provider>\n    </Tag>\n  )\n}\n\nconst Root = forwardRef<HTMLElement, PropsWithChildren<HeroProps>>(HeroBase)\n\nexport const Hero = Object.assign(Root, {\n  Heading: HeroHeading,\n  Description: HeroDescription,\n  ButtonGroup: HeroButtonGroup,\n  /**\n   * @deprecated Use `Hero.ButtonGroup` with `Button` or `ActionMenu` children instead.\n   * This component will be removed in a future release.\n   */\n  PrimaryAction: HeroPrimaryAction,\n  /**\n   * @deprecated Use `Hero.ButtonGroup` with `Button` or `ActionMenu` children instead.\n   * This component will be removed in a future release.\n   */\n  SecondaryAction: HeroSecondaryAction,\n  Image: HeroImage,\n  Video: HeroVideo,\n  Label: HeroLabel,\n  Eyebrow: HeroEyebrow,\n  testIds,\n})\n"],"mappings":"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"}

package/esm/IconButton/IconButton.d.ts

@@ -13,7 +13,7 @@ export type IconButtonSize = (typeof IconButtonSizes)[number];
 type IconButtonBaseProps<C extends React.ElementType> = Omit<BaseProps<C>, 'ref'> & {
     as?: C;
     variant?: IconButtonVariant;
-    icon: Icon;
+    icon: Icon | React.ReactElement<React.SVGProps<SVGSVGElement>>;
     'aria-label': string;
     description?: string;
     inactive?: boolean;

package/esm/IconButton/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/IconButton/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAA6B,MAAM,OAAO,CAAA;AACjD,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAUhD,OAAO,EAA0B,KAAK,gBAAgB,EAAC,MAAM,YAAY,CAAA;AACzE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAGnD,OAAO,kGAAkG,CAAA;AACzG,OAAO,+GAA+G,CAAA;AAGtH,eAAO,MAAM,kBAAkB,oEAAsD,CAAA;AACrF,eAAO,MAAM,eAAe,uCAA4B,CAAA;AACxD,eAAO,MAAM,wBAAwB,aAAuB,CAAA;AAC5D,eAAO,MAAM,qBAAqB,UAAoB,CAAA;AAEtD,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AACnE,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7D,KAAK,mBAAmB,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG;IAClF,EAAE,CAAC,EAAE,CAAC,CAAA;IACN,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,IAAI,EAAE,IAAI,CAAA;IACV,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;CACpC,CAAA;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,mBAAmB,CAAC,CAAC,CAAC,GAC1F,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,mBAAmB,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAA;AAYpF,KAAK,mBAAmB,GAAG,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAChE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAC/D,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;AAwG9B,eAAO,MAAM,UAAU,EAAiC,mBAAmB,CAAA"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/IconButton/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAA6B,MAAM,OAAO,CAAA;AACjD,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAUhD,OAAO,EAA0B,KAAK,gBAAgB,EAAC,MAAM,YAAY,CAAA;AACzE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAGnD,OAAO,kGAAkG,CAAA;AACzG,OAAO,+GAA+G,CAAA;AAGtH,eAAO,MAAM,kBAAkB,oEAAsD,CAAA;AACrF,eAAO,MAAM,eAAe,uCAA4B,CAAA;AACxD,eAAO,MAAM,wBAAwB,aAAuB,CAAA;AAC5D,eAAO,MAAM,qBAAqB,UAAoB,CAAA;AAEtD,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AACnE,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7D,KAAK,mBAAmB,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG;IAClF,EAAE,CAAC,EAAE,CAAC,CAAA;IACN,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,IAAI,EAAE,IAAI,GAAG,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAA;IAC9D,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;CACpC,CAAA;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,mBAAmB,CAAC,CAAC,CAAC,GAC1F,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,mBAAmB,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAA;AAYpF,KAAK,mBAAmB,GAAG,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAChE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAC/D,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;AA4G9B,eAAO,MAAM,UAAU,EAAiC,mBAAmB,CAAA"}

package/esm/IconButton/IconButton.js

@@ -32,7 +32,7 @@ function b({ as: n, icon: r, "aria-label": i, description: a, loading: d = !1, l
 		accessibleLabel: null,
 		className: l.IconButton__spinner,
 		"data-testid": y.spinner
-	}) : /* @__PURE__ */ p(r, { className: l.IconButton__icon }), B = /* @__PURE__ */ p(t, {
+	}) : u.isValidElement(r) ? u.cloneElement(r, { className: e(r.props.className, l.IconButton__icon) }) : /* @__PURE__ */ p(r, { className: l.IconButton__icon }), B = /* @__PURE__ */ p(t, {
 		...j,
 		ref: I ? void 0 : M,
 		as: n,

package/esm/IconButton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","names":[],"sources":["../../src/IconButton/IconButton.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, type Ref} from 'react'\nimport type {Icon} from '@primer/octicons-react'\n\nimport {\n  Button,\n  ButtonSizes,\n  ButtonVariants,\n  defaultButtonSize,\n  defaultButtonVariant,\n  type ButtonVariant,\n} from '../Button'\nimport {Tooltip, TooltipContext, type TooltipDirection} from '../Tooltip'\nimport type {BaseProps} from '../component-helpers'\nimport {Spinner} from '../Spinner/Spinner'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/icon-button/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/icon-button/colors-with-modes.css'\nimport styles from './IconButton.module.css'\n\nexport const IconButtonVariants = [...ButtonVariants, 'danger', 'invisible'] as const\nexport const IconButtonSizes = [...ButtonSizes] as const\nexport const defaultIconButtonVariant = defaultButtonVariant\nexport const defaultIconButtonSize = defaultButtonSize\n\nexport type IconButtonVariant = (typeof IconButtonVariants)[number]\nexport type IconButtonSize = (typeof IconButtonSizes)[number]\n\ntype IconButtonBaseProps<C extends React.ElementType> = Omit<BaseProps<C>, 'ref'> & {\n  as?: C\n  variant?: IconButtonVariant\n  icon: Icon\n  'aria-label': string\n  description?: string\n  inactive?: boolean\n  loading?: boolean\n  loadingAnnouncement?: string\n  rounded?: boolean\n  size?: IconButtonSize\n  tooltipDirection?: TooltipDirection\n}\n\nexport type IconButtonProps<C extends React.ElementType = 'button'> = IconButtonBaseProps<C> &\n  Omit<React.ComponentPropsWithoutRef<C>, keyof IconButtonBaseProps<C> | 'children'>\n\nconst iconButtonTestIds = {\n  root: 'IconButton',\n  get spinner() {\n    return `${this.root}-spinner`\n  },\n  get loadingAnnouncement() {\n    return `${this.root}-loading-announcement`\n  },\n}\n\ntype IconButtonComponent = <C extends React.ElementType = 'button'>(\n  props: IconButtonProps<C> & React.RefAttributes<HTMLButtonElement>,\n) => React.ReactElement | null\n\nfunction IconButtonRoot(\n  {\n    as,\n    icon: IconComponent,\n    'aria-label': ariaLabel,\n    description,\n    loading = false,\n    loadingAnnouncement = 'Loading',\n    rounded = false,\n    tooltipDirection = 's',\n    size = defaultIconButtonSize,\n    variant = defaultIconButtonVariant,\n    inactive = false,\n    disabled,\n    className,\n    onClick,\n    'aria-disabled': ariaDisabled,\n    'aria-expanded': ariaExpanded,\n    'aria-haspopup': ariaHasPopup,\n    'data-testid': testId,\n    ...props\n  }: React.PropsWithoutRef<IconButtonProps<React.ElementType>>,\n  ref: Ref<HTMLButtonElement>,\n) {\n  const {tooltipId: externalTooltipId} = React.useContext(TooltipContext)\n  const isLoading = loading && !disabled\n  const isInactive = inactive && !disabled && !isLoading\n  const shouldRenderTooltip = !disabled && !externalTooltipId\n  const tooltipText = description || ariaLabel\n  const buttonVariant: ButtonVariant = variant === 'danger' ? 'secondary' : variant === 'invisible' ? 'subtle' : variant\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (!ariaLabel.trim()) {\n      // eslint-disable-next-line no-console\n      console.warn('IconButton requires a non-empty `aria-label`.')\n    }\n\n    if ([disabled, loading, inactive].filter(Boolean).length > 1) {\n      // eslint-disable-next-line no-console\n      console.warn('IconButton has conflicting props for `disabled`, `loading`, or `inactive` states.')\n    }\n  }\n\n  const ButtonIcon = isLoading ? (\n    <Spinner accessibleLabel={null} className={styles.IconButton__spinner} data-testid={iconButtonTestIds.spinner} />\n  ) : (\n    <IconComponent className={styles.IconButton__icon} />\n  )\n\n  const ButtonElement = (\n    <Button\n      {...props}\n      ref={shouldRenderTooltip ? undefined : ref}\n      as={as}\n      variant={buttonVariant}\n      size={size}\n      disabled={disabled}\n      aria-disabled={isLoading || isInactive ? true : ariaDisabled}\n      aria-expanded={ariaExpanded}\n      aria-haspopup={ariaHasPopup}\n      aria-label={!shouldRenderTooltip || description ? ariaLabel : undefined}\n      className={clsx(\n        styles.IconButton,\n        styles[`IconButton--${size}`],\n        styles[`IconButton--variant-${variant}`],\n        isInactive && styles['IconButton--inactive'],\n        rounded && styles['IconButton--rounded'],\n        className,\n      )}\n      data-testid={testId || iconButtonTestIds.root}\n      leadingVisual={ButtonIcon}\n      onClick={\n        isLoading\n          ? event => {\n              event.preventDefault()\n              event.stopPropagation()\n            }\n          : onClick\n      }\n    />\n  )\n\n  return (\n    <>\n      {shouldRenderTooltip ? (\n        <Tooltip ref={ref} direction={tooltipDirection} text={tooltipText} type={description ? 'description' : 'label'}>\n          {ButtonElement}\n        </Tooltip>\n      ) : (\n        ButtonElement\n      )}\n      <span\n        aria-live=\"polite\"\n        className={styles.IconButton__loadingAnnouncement}\n        data-testid={iconButtonTestIds.loadingAnnouncement}\n      >\n        {isLoading ? loadingAnnouncement : null}\n      </span>\n    </>\n  )\n}\n\nexport const IconButton = forwardRef(IconButtonRoot) as IconButtonComponent\n"],"mappings":";;;;;;;;;;AAoBA,IAAa,IAAqB;CAAC,GAAG;CAAgB;CAAU;AAAW,GAC9D,IAAkB,CAAC,GAAG,CAAW,GACjC,IAA2B,GAC3B,IAAwB,GAsB/B,IAAoB;CACxB,MAAM;CACN,IAAI,UAAU;EACZ,OAAO,GAAG,KAAK,KAAK;CACtB;CACA,IAAI,sBAAsB;EACxB,OAAO,GAAG,KAAK,KAAK;CACtB;AACF;AAMA,SAAS,EACP,EACE,OACA,MAAM,GACN,cAAc,GACd,gBACA,aAAU,IACV,yBAAsB,WACtB,aAAU,IACV,sBAAmB,KACnB,UAAO,GACP,aAAU,GACV,cAAW,IACX,aACA,cACA,YACA,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,eAAe,GACf,GAAG,KAEL,GACA;CACA,IAAM,EAAC,WAAW,MAAqB,EAAM,WAAW,CAAc,GAChE,IAAY,KAAW,CAAC,GACxB,IAAa,KAAY,CAAC,KAAY,CAAC,GACvC,IAAsB,CAAC,KAAY,CAAC,GACpC,IAAc,KAAe,GAC7B,IAA+B,MAAY,WAAW,cAAc,MAAY,cAAc,WAAW;CAE/G,AAAA,QAAA,IAAA,aAA6B,iBACtB,EAAU,KAAK,KAElB,QAAQ,KAAK,+CAA+C,GAG1D;EAAC;EAAU;EAAS;CAAQ,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,SAAS,KAEzD,QAAQ,KAAK,mFAAmF;CAIpG,IAAM,IAAa,IACjB,kBAAC,GAAD;EAAS,iBAAiB;EAAM,WAAW,EAAO;EAAqB,eAAa,EAAkB;CAAU,CAAA,IAEhH,kBAAC,GAAD,EAAe,WAAW,EAAO,iBAAmB,CAAA,GAGhD,IACJ,kBAAC,GAAD;EACE,GAAI;EACJ,KAAK,IAAsB,KAAA,IAAY;EACnC;EACJ,SAAS;EACH;EACI;EACV,iBAAe,KAAa,IAAa,KAAO;EAChD,iBAAe;EACf,iBAAe;EACf,cAAY,CAAC,KAAuB,IAAc,IAAY,KAAA;EAC9D,WAAW,EACT,EAAO,YACP,EAAO,eAAe,MACtB,EAAO,uBAAuB,MAC9B,KAAc,EAAO,yBACrB,KAAW,EAAO,wBAClB,CACF;EACA,eAAa,KAAU,EAAkB;EACzC,eAAe;EACf,SACE,KACI,MAAS;GAEP,AADA,EAAM,eAAe,GACrB,EAAM,gBAAgB;EACxB,IACA;CAEP,CAAA;CAGH,OACE,kBAAA,GAAA,EAAA,UAAA,CACG,IACC,kBAAC,GAAD;EAAc;EAAK,WAAW;EAAkB,MAAM;EAAa,MAAM,IAAc,gBAAgB;YACpG;CACM,CAAA,IAET,GAEF,kBAAC,QAAD;EACE,aAAU;EACV,WAAW,EAAO;EAClB,eAAa,EAAkB;YAE9B,IAAY,IAAsB;CAC/B,CAAA,CACN,EAAA,CAAA;AAEN;AAEA,IAAa,IAAa,EAAW,CAAc"}
+{"version":3,"file":"IconButton.js","names":[],"sources":["../../src/IconButton/IconButton.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, type Ref} from 'react'\nimport type {Icon} from '@primer/octicons-react'\n\nimport {\n  Button,\n  ButtonSizes,\n  ButtonVariants,\n  defaultButtonSize,\n  defaultButtonVariant,\n  type ButtonVariant,\n} from '../Button'\nimport {Tooltip, TooltipContext, type TooltipDirection} from '../Tooltip'\nimport type {BaseProps} from '../component-helpers'\nimport {Spinner} from '../Spinner/Spinner'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/icon-button/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/icon-button/colors-with-modes.css'\nimport styles from './IconButton.module.css'\n\nexport const IconButtonVariants = [...ButtonVariants, 'danger', 'invisible'] as const\nexport const IconButtonSizes = [...ButtonSizes] as const\nexport const defaultIconButtonVariant = defaultButtonVariant\nexport const defaultIconButtonSize = defaultButtonSize\n\nexport type IconButtonVariant = (typeof IconButtonVariants)[number]\nexport type IconButtonSize = (typeof IconButtonSizes)[number]\n\ntype IconButtonBaseProps<C extends React.ElementType> = Omit<BaseProps<C>, 'ref'> & {\n  as?: C\n  variant?: IconButtonVariant\n  icon: Icon | React.ReactElement<React.SVGProps<SVGSVGElement>>\n  'aria-label': string\n  description?: string\n  inactive?: boolean\n  loading?: boolean\n  loadingAnnouncement?: string\n  rounded?: boolean\n  size?: IconButtonSize\n  tooltipDirection?: TooltipDirection\n}\n\nexport type IconButtonProps<C extends React.ElementType = 'button'> = IconButtonBaseProps<C> &\n  Omit<React.ComponentPropsWithoutRef<C>, keyof IconButtonBaseProps<C> | 'children'>\n\nconst iconButtonTestIds = {\n  root: 'IconButton',\n  get spinner() {\n    return `${this.root}-spinner`\n  },\n  get loadingAnnouncement() {\n    return `${this.root}-loading-announcement`\n  },\n}\n\ntype IconButtonComponent = <C extends React.ElementType = 'button'>(\n  props: IconButtonProps<C> & React.RefAttributes<HTMLButtonElement>,\n) => React.ReactElement | null\n\nfunction IconButtonRoot(\n  {\n    as,\n    icon: IconComponent,\n    'aria-label': ariaLabel,\n    description,\n    loading = false,\n    loadingAnnouncement = 'Loading',\n    rounded = false,\n    tooltipDirection = 's',\n    size = defaultIconButtonSize,\n    variant = defaultIconButtonVariant,\n    inactive = false,\n    disabled,\n    className,\n    onClick,\n    'aria-disabled': ariaDisabled,\n    'aria-expanded': ariaExpanded,\n    'aria-haspopup': ariaHasPopup,\n    'data-testid': testId,\n    ...props\n  }: React.PropsWithoutRef<IconButtonProps<React.ElementType>>,\n  ref: Ref<HTMLButtonElement>,\n) {\n  const {tooltipId: externalTooltipId} = React.useContext(TooltipContext)\n  const isLoading = loading && !disabled\n  const isInactive = inactive && !disabled && !isLoading\n  const shouldRenderTooltip = !disabled && !externalTooltipId\n  const tooltipText = description || ariaLabel\n  const buttonVariant: ButtonVariant = variant === 'danger' ? 'secondary' : variant === 'invisible' ? 'subtle' : variant\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (!ariaLabel.trim()) {\n      // eslint-disable-next-line no-console\n      console.warn('IconButton requires a non-empty `aria-label`.')\n    }\n\n    if ([disabled, loading, inactive].filter(Boolean).length > 1) {\n      // eslint-disable-next-line no-console\n      console.warn('IconButton has conflicting props for `disabled`, `loading`, or `inactive` states.')\n    }\n  }\n\n  const ButtonIcon = isLoading ? (\n    <Spinner accessibleLabel={null} className={styles.IconButton__spinner} data-testid={iconButtonTestIds.spinner} />\n  ) : React.isValidElement<React.SVGProps<SVGSVGElement>>(IconComponent) ? (\n    React.cloneElement(IconComponent, {\n      className: clsx(IconComponent.props.className, styles.IconButton__icon),\n    })\n  ) : (\n    <IconComponent className={styles.IconButton__icon} />\n  )\n\n  const ButtonElement = (\n    <Button\n      {...props}\n      ref={shouldRenderTooltip ? undefined : ref}\n      as={as}\n      variant={buttonVariant}\n      size={size}\n      disabled={disabled}\n      aria-disabled={isLoading || isInactive ? true : ariaDisabled}\n      aria-expanded={ariaExpanded}\n      aria-haspopup={ariaHasPopup}\n      aria-label={!shouldRenderTooltip || description ? ariaLabel : undefined}\n      className={clsx(\n        styles.IconButton,\n        styles[`IconButton--${size}`],\n        styles[`IconButton--variant-${variant}`],\n        isInactive && styles['IconButton--inactive'],\n        rounded && styles['IconButton--rounded'],\n        className,\n      )}\n      data-testid={testId || iconButtonTestIds.root}\n      leadingVisual={ButtonIcon}\n      onClick={\n        isLoading\n          ? event => {\n              event.preventDefault()\n              event.stopPropagation()\n            }\n          : onClick\n      }\n    />\n  )\n\n  return (\n    <>\n      {shouldRenderTooltip ? (\n        <Tooltip ref={ref} direction={tooltipDirection} text={tooltipText} type={description ? 'description' : 'label'}>\n          {ButtonElement}\n        </Tooltip>\n      ) : (\n        ButtonElement\n      )}\n      <span\n        aria-live=\"polite\"\n        className={styles.IconButton__loadingAnnouncement}\n        data-testid={iconButtonTestIds.loadingAnnouncement}\n      >\n        {isLoading ? loadingAnnouncement : null}\n      </span>\n    </>\n  )\n}\n\nexport const IconButton = forwardRef(IconButtonRoot) as IconButtonComponent\n"],"mappings":";;;;;;;;;;AAoBA,IAAa,IAAqB;CAAC,GAAG;CAAgB;CAAU;AAAW,GAC9D,IAAkB,CAAC,GAAG,CAAW,GACjC,IAA2B,GAC3B,IAAwB,GAsB/B,IAAoB;CACxB,MAAM;CACN,IAAI,UAAU;EACZ,OAAO,GAAG,KAAK,KAAK;CACtB;CACA,IAAI,sBAAsB;EACxB,OAAO,GAAG,KAAK,KAAK;CACtB;AACF;AAMA,SAAS,EACP,EACE,OACA,MAAM,GACN,cAAc,GACd,gBACA,aAAU,IACV,yBAAsB,WACtB,aAAU,IACV,sBAAmB,KACnB,UAAO,GACP,aAAU,GACV,cAAW,IACX,aACA,cACA,YACA,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,eAAe,GACf,GAAG,KAEL,GACA;CACA,IAAM,EAAC,WAAW,MAAqB,EAAM,WAAW,CAAc,GAChE,IAAY,KAAW,CAAC,GACxB,IAAa,KAAY,CAAC,KAAY,CAAC,GACvC,IAAsB,CAAC,KAAY,CAAC,GACpC,IAAc,KAAe,GAC7B,IAA+B,MAAY,WAAW,cAAc,MAAY,cAAc,WAAW;CAE/G,AAAA,QAAA,IAAA,aAA6B,iBACtB,EAAU,KAAK,KAElB,QAAQ,KAAK,+CAA+C,GAG1D;EAAC;EAAU;EAAS;CAAQ,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,SAAS,KAEzD,QAAQ,KAAK,mFAAmF;CAIpG,IAAM,IAAa,IACjB,kBAAC,GAAD;EAAS,iBAAiB;EAAM,WAAW,EAAO;EAAqB,eAAa,EAAkB;CAAU,CAAA,IAC9G,EAAM,eAA8C,CAAa,IACnE,EAAM,aAAa,GAAe,EAChC,WAAW,EAAK,EAAc,MAAM,WAAW,EAAO,gBAAgB,EACxE,CAAC,IAED,kBAAC,GAAD,EAAe,WAAW,EAAO,iBAAmB,CAAA,GAGhD,IACJ,kBAAC,GAAD;EACE,GAAI;EACJ,KAAK,IAAsB,KAAA,IAAY;EACnC;EACJ,SAAS;EACH;EACI;EACV,iBAAe,KAAa,IAAa,KAAO;EAChD,iBAAe;EACf,iBAAe;EACf,cAAY,CAAC,KAAuB,IAAc,IAAY,KAAA;EAC9D,WAAW,EACT,EAAO,YACP,EAAO,eAAe,MACtB,EAAO,uBAAuB,MAC9B,KAAc,EAAO,yBACrB,KAAW,EAAO,wBAClB,CACF;EACA,eAAa,KAAU,EAAkB;EACzC,eAAe;EACf,SACE,KACI,MAAS;GAEP,AADA,EAAM,eAAe,GACrB,EAAM,gBAAgB;EACxB,IACA;CAEP,CAAA;CAGH,OACE,kBAAA,GAAA,EAAA,UAAA,CACG,IACC,kBAAC,GAAD;EAAc;EAAK,WAAW;EAAkB,MAAM;EAAa,MAAM,IAAc,gBAAgB;YACpG;CACM,CAAA,IAET,GAEF,kBAAC,QAAD;EACE,aAAU;EACV,WAAW,EAAO;EAClB,eAAa,EAAkB;YAE9B,IAAY,IAAsB;CAC/B,CAAA,CACN,EAAA,CAAA;AAEN;AAEA,IAAa,IAAa,EAAW,CAAc"}