@primer/react-brand 0.68.0-rc.59bbed40 → 0.68.0-rc.5bd56cbb

package/esm/Card/CardSkewEffect.js

@@ -0,0 +1,42 @@
+import e from "../node_modules/clsx/dist/clsx.js";
+import { useTheme as t } from "../ThemeProvider/useTheme.js";
+import n from "./Card.module.js";
+import { useEffect as r, useRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/Card/CardSkewEffect.tsx
+var s = ({ color: s, children: c, className: l, perspective: u = 700, disableSkew: d = !1, ...f }) => {
+	let { colorMode: p } = t(), m = i(null), h = i(null);
+	return r(() => {
+		if (p === "light" || d) return;
+		let e = window.matchMedia("(prefers-reduced-motion: reduce)"), t = m.current, n = h.current;
+		if (!t) return;
+		let r = () => {
+			e.matches ? t.removeEventListener("mousemove", i) : t.addEventListener("mousemove", i);
+		}, i = (e) => {
+			let r = t.getBoundingClientRect(), i = n ? r.width - (e.clientX - r.left) - n.offsetWidth / 2 : 0, a = n ? r.height - (e.clientY - r.top) - n.offsetHeight / 2 : 0, o = -((e.clientX - r.left - r.width / 2) / r.width) * 3, s = (e.clientY - r.top - r.height / 2) / r.height * 2;
+			n && (n.style.transform = `translate(${-i}px, ${-a / 2}px)`), t.style.transform = `perspective(${u}px) rotateX(${Math.round(s * 100) / 100}deg) rotateY(${Math.round(o * 100) / 100}deg)`;
+		};
+		return e.addEventListener("change", r), t.addEventListener("mousemove", i), r(), () => {
+			t.removeEventListener("mousemove", i), n?.removeEventListener("mousemove", i), e.removeEventListener("change", r);
+		};
+	}, [
+		d,
+		u,
+		p
+	]), /* @__PURE__ */ a("div", {
+		ref: m,
+		className: e(n["Card--skew"], l),
+		...f,
+		children: /* @__PURE__ */ o("div", {
+			className: n["Card__skew-bounding"],
+			children: [c, /* @__PURE__ */ a("div", {
+				ref: h,
+				className: e(!d && n.Card__torch, n[`Card--skew-colorMode-${p}`])
+			})]
+		})
+	});
+};
+//#endregion
+export { s as CardSkewEffect };
+
+//# sourceMappingURL=CardSkewEffect.js.map

package/esm/Card/CardSkewEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardSkewEffect.js","names":[],"sources":["../../src/Card/CardSkewEffect.tsx"],"sourcesContent":["import React, {useRef, useEffect, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\n\nimport {useTheme} from '../'\nimport {BaseProps} from '../component-helpers'\n\nimport styles from './Card.module.css'\n\ntype CardSkewEffectProps = {\n  perspective?: number\n  disableSkew?: boolean\n} & BaseProps<HTMLDivElement> &\n  React.HTMLAttributes<HTMLDivElement>\n\nexport const CardSkewEffect = ({\n  color,\n  children,\n  className,\n  perspective = 700,\n  disableSkew = false,\n  ...rest\n}: PropsWithChildren<CardSkewEffectProps>) => {\n  const {colorMode} = useTheme()\n  const boundingRef = useRef<HTMLDivElement | null>(null)\n  const torchRef = useRef<HTMLDivElement | null>(null)\n\n  useEffect(() => {\n    if (colorMode === 'light' || disableSkew) return\n\n    const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)')\n\n    const boundingElement = boundingRef.current\n    const torchElement = torchRef.current\n\n    if (!boundingElement) {\n      return\n    }\n\n    const handleReducedMotionChange = () => {\n      if (motionQuery.matches) {\n        boundingElement.removeEventListener('mousemove', handleMouseMove)\n      } else {\n        boundingElement.addEventListener('mousemove', handleMouseMove)\n      }\n    }\n\n    const handleMouseMove = e => {\n      const rect = boundingElement.getBoundingClientRect()\n      const x = torchElement ? rect.width - (e.clientX - rect.left) - torchElement.offsetWidth / 2 : 0\n      const y = torchElement ? rect.height - (e.clientY - rect.top) - torchElement.offsetHeight / 2 : 0\n      const skewY = -((e.clientX - rect.left - rect.width / 2) / rect.width) * 3\n      const skewX = ((e.clientY - rect.top - rect.height / 2) / rect.height) * 2\n\n      if (torchElement) {\n        torchElement.style.transform = `translate(${-x}px, ${-y / 2}px)`\n      }\n\n      boundingElement.style.transform = `perspective(${perspective}px) rotateX(${\n        Math.round(skewX * 100) / 100\n      }deg) rotateY(${Math.round(skewY * 100) / 100}deg)`\n    }\n\n    motionQuery.addEventListener('change', handleReducedMotionChange)\n    boundingElement.addEventListener('mousemove', handleMouseMove)\n\n    handleReducedMotionChange()\n\n    return () => {\n      boundingElement.removeEventListener('mousemove', handleMouseMove)\n      torchElement?.removeEventListener('mousemove', handleMouseMove)\n      motionQuery.removeEventListener('change', handleReducedMotionChange)\n    }\n  }, [disableSkew, perspective, colorMode])\n\n  return (\n    <div ref={boundingRef} className={clsx(styles['Card--skew'], className)} {...rest}>\n      <div className={styles['Card__skew-bounding']}>\n        {children}\n        <div\n          ref={torchRef}\n          className={clsx(!disableSkew && styles.Card__torch, styles[`Card--skew-colorMode-${colorMode}`])}\n        />\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;AAcA,IAAa,KAAkB,EAC7B,UACA,aACA,cACA,iBAAc,KACd,iBAAc,IACd,GAAG,QACyC;CAC5C,IAAM,EAAC,iBAAa,GAAU,EACxB,IAAc,EAA8B,KAAK,EACjD,IAAW,EAA8B,KAAK;AAkDpD,QAhDA,QAAgB;AACd,MAAI,MAAc,WAAW,EAAa;EAE1C,IAAM,IAAc,OAAO,WAAW,mCAAmC,EAEnE,IAAkB,EAAY,SAC9B,IAAe,EAAS;AAE9B,MAAI,CAAC,EACH;EAGF,IAAM,UAAkC;AACtC,GAAI,EAAY,UACd,EAAgB,oBAAoB,aAAa,EAAgB,GAEjE,EAAgB,iBAAiB,aAAa,EAAgB;KAI5D,KAAkB,MAAK;GAC3B,IAAM,IAAO,EAAgB,uBAAuB,EAC9C,IAAI,IAAe,EAAK,SAAS,EAAE,UAAU,EAAK,QAAQ,EAAa,cAAc,IAAI,GACzF,IAAI,IAAe,EAAK,UAAU,EAAE,UAAU,EAAK,OAAO,EAAa,eAAe,IAAI,GAC1F,IAAQ,GAAG,EAAE,UAAU,EAAK,OAAO,EAAK,QAAQ,KAAK,EAAK,SAAS,GACnE,KAAU,EAAE,UAAU,EAAK,MAAM,EAAK,SAAS,KAAK,EAAK,SAAU;AAMzE,GAJI,MACF,EAAa,MAAM,YAAY,aAAa,CAAC,EAAE,MAAM,CAAC,IAAI,EAAE,OAG9D,EAAgB,MAAM,YAAY,eAAe,EAAY,cAC3D,KAAK,MAAM,IAAQ,IAAI,GAAG,IAC3B,eAAe,KAAK,MAAM,IAAQ,IAAI,GAAG,IAAI;;AAQhD,SALA,EAAY,iBAAiB,UAAU,EAA0B,EACjE,EAAgB,iBAAiB,aAAa,EAAgB,EAE9D,GAA2B,QAEd;AAGX,GAFA,EAAgB,oBAAoB,aAAa,EAAgB,EACjE,GAAc,oBAAoB,aAAa,EAAgB,EAC/D,EAAY,oBAAoB,UAAU,EAA0B;;IAErE;EAAC;EAAa;EAAa;EAAU,CAAC,EAGvC,kBAAC,OAAD;EAAK,KAAK;EAAa,WAAW,EAAK,EAAO,eAAe,EAAU;EAAE,GAAI;YAC3E,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB,CACG,GACD,kBAAC,OAAD;IACE,KAAK;IACL,WAAW,EAAK,CAAC,KAAe,EAAO,aAAa,EAAO,wBAAwB,KAAa;IAChG,CAAA,CACE;;EACF,CAAA"}

package/esm/Card/index.d.ts

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

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

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

package/esm/ComparisonTable/ComparisonTable.d.ts

@@ -0,0 +1,34 @@
+import React, { PropsWithChildren } from 'react';
+import type { BaseProps } from '../component-helpers';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/comparison-table/colors-with-modes.css';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/comparison-table/comparison-table.css';
+export type ComparisonTableProps<C extends React.ElementType> = BaseProps<C> & {
+    as?: C;
+    heading?: string;
+    variant?: 'default' | 'minimal';
+    featuredColumn?: number;
+} & React.ComponentPropsWithoutRef<C>;
+export declare const _ComparisonTable: React.ForwardRefExoticComponent<Omit<ComparisonTableProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type RowProps = React.HTMLAttributes<HTMLTableRowElement> & {
+    header?: boolean;
+};
+export type CellProps = BaseProps<HTMLTableCellElement> & React.HTMLAttributes<HTMLTableCellElement> & {
+    as?: 'td' | 'th';
+};
+export type FootnoteProps = BaseProps<HTMLParagraphElement>;
+/**
+ * @description
+ *  Comparison tables are used to aid decision-making by displaying a list of features and their associated qualities side-by-side.
+ *  They are useful for comparing products, plans, or features in marketing pages.
+ * @see https://primer.style/brand/components/ComparisonTable
+ */
+export declare const ComparisonTable: React.ForwardRefExoticComponent<Omit<ComparisonTableProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<HTMLDivElement>> & {
+    Row: ({ children, ...rest }: PropsWithChildren<RowProps>) => import("react/jsx-runtime").JSX.Element;
+    Cell: ({ as, children, ...props }: PropsWithChildren<CellProps>) => import("react/jsx-runtime").JSX.Element;
+    Footnote: ({ children, ...props }: PropsWithChildren<FootnoteProps>) => import("react/jsx-runtime").JSX.Element;
+};
+export {};
+//# sourceMappingURL=ComparisonTable.d.ts.map

package/esm/ComparisonTable/ComparisonTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComparisonTable.d.ts","sourceRoot":"","sources":["../../src/ComparisonTable/ComparisonTable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAgC,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAG7E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD;;GAEG;AACH,OAAO,oHAAoH,CAAA;AAC3H,OAAO,mHAAmH,CAAA;AAK1H,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,SAAS,CAAC,CAAC,CAAC,GAAG;IAC7E,EAAE,CAAC,EAAE,CAAC,CAAA;IACN,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,GAAG,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAA;AAErC,eAAO,MAAM,gBAAgB,qKA4J5B,CAAA;AAED,KAAK,QAAQ,GAAG,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC,GAAG;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAMD,MAAM,MAAM,SAAS,GAAG,SAAS,CAAC,oBAAoB,CAAC,GACrD,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAAG;IAC3C,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;CACjB,CAAA;AAOH,MAAM,MAAM,aAAa,GAAG,SAAS,CAAC,oBAAoB,CAAC,CAAA;AAa3D;;;;;GAKG;AACH,eAAO,MAAM,eAAe;iCAjCM,iBAAiB,CAAC,QAAQ,CAAC;uCASrB,iBAAiB,CAAC,SAAS,CAAC;uCAO5B,iBAAiB,CAAC,aAAa,CAAC;CAqBtE,CAAA"}

package/esm/ComparisonTable/ComparisonTable.js

@@ -0,0 +1,102 @@
+import e from "../node_modules/clsx/dist/clsx.js";
+import { useAnimation as t } from "../animation/useAnimation.js";
+import { Text as n } from "../Text/Text.js";
+import { Heading as r } from "../Heading/Heading.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/comparison-table/comparison-table-L50b0Mii.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/comparison-table/colors-with-modes-D2oNfyDt.css';/* empty css                                                                                                              */
+/* empty css                                                                                                             */
+import i from "./ComparisonTable.module.js";
+import a, { forwardRef as o, useMemo as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/ComparisonTable/ComparisonTable.tsx
+var u = o(({ as: n, animate: o, children: u, className: m, heading: h, featuredColumn: g = 1, visuallyHiddenFeaturedLabel: _ = "featured", variant: v = "default", style: y, ...b }, x) => {
+	let { classes: S, styles: C } = t(o), w = n || "section", T = s(() => a.Children.toArray(u).filter((e) => a.isValidElement(e) && typeof e.type != "string"), [u]), E = T.filter((e) => e.type === d), D = E.map((t, n) => n === 0 ? a.cloneElement(t, {
+		className: e(i["ComparisonTable-row"], t.props.className),
+		children: a.Children.map(t.props.children, (n, r) => {
+			if (a.isValidElement(n) && n.type === f) {
+				let o = r === g;
+				return a.cloneElement(n, {
+					as: n.props.children ? "th" : "td",
+					className: e(i["ComparisonTable-cell"], i["ComparisonTable-cell-heading"], i[`ComparisonTable-cell-heading--${v}`], r === 0 && i["ComparisonTable-cell-heading--first"], o && i["ComparisonTable-cell-heading--featured"], t.props.className),
+					children: /* @__PURE__ */ l("span", {
+						className: e(r === g && i["ComparisonTable-cell-heading-label--featured"]),
+						children: [n.props.children, o && /* @__PURE__ */ l("span", {
+							className: "visually-hidden",
+							children: [
+								"(",
+								_,
+								")"
+							]
+						})]
+					})
+				});
+			}
+			return null;
+		})
+	}) : null).filter(Boolean), O = s(() => {
+		let e = E.at(0);
+		return e && a.Children.map(e.props.children, (e) => {
+			if (a.isValidElement(e)) return e.props.children;
+		}) || [];
+	}, [E]), [, ...k] = E, A = k.map((t, n) => a.cloneElement(t, {
+		className: e(i["ComparisonTable-row"], `ComparisonTable-row--${n}`, t.props.className),
+		children: a.Children.map(t.props.children, (r, o) => a.isValidElement(r) && r.type === f ? /* @__PURE__ */ l(f, {
+			...r.props,
+			as: o === 0 ? "th" : "td",
+			className: e(i["ComparisonTable-cell"], i[`ComparisonTable-cell--${v}`], o === 0 && i["ComparisonTable-cell-heading"], o === 0 && i[`ComparisonTable-cell-heading--${v}`], o === g && i["ComparisonTable-cell--featured"], k.length - 1 === n && i["ComparisonTable-cell--lastrow"], t.props.className),
+			children: [o >= 1 && /* @__PURE__ */ c("span", {
+				className: e(i["ComparisonTable-inline-cell-label"], i["ComparisonTable--hide-element-on-narrow"], o === g && i["ComparisonTable-cell-heading-label--featured"]),
+				children: O[o]
+			}), /* @__PURE__ */ c("span", {
+				className: e(i["ComparisonTable-cell-container"], o === g && i["ComparisonTable-cell-container--featured"]),
+				children: r.props.children
+			})]
+		}) : null)
+	})), j = T.find((e) => e.type === p);
+	return /* @__PURE__ */ l(w, {
+		ref: x,
+		className: e(S, m),
+		style: {
+			...C,
+			...y
+		},
+		...b,
+		children: [
+			h && /* @__PURE__ */ c(r, {
+				className: i["ComparisonTable--heading"],
+				as: "h3",
+				size: "4",
+				children: h
+			}),
+			/* @__PURE__ */ l("table", {
+				className: e(i.ComparisonTable, `ComparisonTable--${v}`),
+				children: [D.length && /* @__PURE__ */ c("thead", { children: D }), A.length && /* @__PURE__ */ c("tbody", { children: A })]
+			}),
+			j && /* @__PURE__ */ c("footer", {
+				className: i["ComparisonTable-footnote"],
+				children: j
+			})
+		]
+	});
+}), d = ({ children: e, ...t }) => /* @__PURE__ */ c("tr", {
+	...t,
+	children: e
+}), f = ({ as: e, children: t, ...n }) => /* @__PURE__ */ c(e || "td", {
+	...n,
+	children: t
+}), p = ({ children: e, ...t }) => typeof e == "string" ? /* @__PURE__ */ c(n, {
+	as: "p",
+	size: "100",
+	variant: "muted",
+	children: e
+}) : /* @__PURE__ */ c("div", {
+	...t,
+	children: e
+}), m = Object.assign(u, {
+	Row: d,
+	Cell: f,
+	Footnote: p
+});
+//#endregion
+export { m as ComparisonTable, u as _ComparisonTable };
+
+//# sourceMappingURL=ComparisonTable.js.map

package/esm/ComparisonTable/ComparisonTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComparisonTable.js","names":[],"sources":["../../src/ComparisonTable/ComparisonTable.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, type Ref, useMemo, PropsWithChildren} from 'react'\nimport {Heading, Text, useAnimation} from '../'\n\nimport type {BaseProps} from '../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/comparison-table/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/comparison-table/comparison-table.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './ComparisonTable.module.css'\n\nexport type ComparisonTableProps<C extends React.ElementType> = BaseProps<C> & {\n  as?: C\n  heading?: string\n  variant?: 'default' | 'minimal'\n  featuredColumn?: number\n} & React.ComponentPropsWithoutRef<C>\n\nexport const _ComparisonTable = forwardRef(\n  <C extends React.ElementType>(\n    {\n      as,\n      animate,\n      children,\n      className,\n      heading,\n      featuredColumn = 1,\n      visuallyHiddenFeaturedLabel = 'featured',\n      variant = 'default',\n      style,\n      ...props\n    }: ComparisonTableProps<C>,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const Component = as || 'section'\n\n    const Children = useMemo(\n      () =>\n        React.Children.toArray(children).filter(\n          (child): child is React.ReactElement => React.isValidElement(child) && typeof child.type !== 'string',\n        ),\n      [children],\n    )\n\n    const rowChildren = Children.filter(\n      (child): child is React.ReactElement<PropsWithChildren<RowProps>> => child.type === Row,\n    )\n\n    const HeaderRow = rowChildren\n      .map((child, index) => {\n        if (index === 0) {\n          return React.cloneElement(child, {\n            className: clsx(styles['ComparisonTable-row'], child.props.className),\n            children: React.Children.map(child.props.children, (rowChild, rowChildIndex) => {\n              if (React.isValidElement<CellProps>(rowChild) && rowChild.type === Cell) {\n                const isFeatured = rowChildIndex === featuredColumn\n                return React.cloneElement(rowChild, {\n                  as: rowChild.props.children ? 'th' : 'td',\n                  className: clsx(\n                    styles['ComparisonTable-cell'],\n                    styles[`ComparisonTable-cell-heading`],\n                    styles[`ComparisonTable-cell-heading--${variant}`],\n                    rowChildIndex === 0 && styles[`ComparisonTable-cell-heading--first`],\n                    isFeatured && styles[`ComparisonTable-cell-heading--featured`],\n                    child.props.className,\n                  ),\n                  children: (\n                    <span\n                      className={clsx(\n                        rowChildIndex === featuredColumn && styles['ComparisonTable-cell-heading-label--featured'],\n                      )}\n                    >\n                      {rowChild.props.children}\n                      {isFeatured && <span className=\"visually-hidden\">({visuallyHiddenFeaturedLabel})</span>}\n                    </span>\n                  ),\n                })\n              }\n              return null\n            }),\n          })\n        }\n        return null\n      })\n      .filter(Boolean)\n\n    const headerRowNames = useMemo(() => {\n      const firstRow = rowChildren.at(0)\n      if (!firstRow) return []\n\n      return (\n        React.Children.map(firstRow.props.children, child => {\n          if (React.isValidElement<CellProps>(child)) {\n            return child.props.children\n          }\n          return undefined\n        }) || []\n      )\n    }, [rowChildren])\n\n    const [, ...regularRows] = rowChildren\n\n    const RegularRows = regularRows.map((child, index) => {\n      return React.cloneElement(child, {\n        className: clsx(styles['ComparisonTable-row'], `ComparisonTable-row--${index}`, child.props.className),\n        children: React.Children.map(child.props.children, (rowChild, cellIndex) => {\n          if (React.isValidElement<CellProps>(rowChild) && rowChild.type === Cell) {\n            return (\n              <Cell\n                {...rowChild.props}\n                as={cellIndex === 0 ? 'th' : 'td'}\n                className={clsx(\n                  styles['ComparisonTable-cell'],\n                  styles[`ComparisonTable-cell--${variant}`],\n                  cellIndex === 0 && styles[`ComparisonTable-cell-heading`],\n                  cellIndex === 0 && styles[`ComparisonTable-cell-heading--${variant}`],\n                  cellIndex === featuredColumn && styles[`ComparisonTable-cell--featured`],\n                  regularRows.length - 1 === index && styles['ComparisonTable-cell--lastrow'],\n                  child.props.className,\n                )}\n              >\n                {cellIndex >= 1 && (\n                  <span\n                    className={clsx(\n                      styles['ComparisonTable-inline-cell-label'],\n                      styles['ComparisonTable--hide-element-on-narrow'],\n                      cellIndex === featuredColumn && styles['ComparisonTable-cell-heading-label--featured'],\n                    )}\n                  >\n                    {headerRowNames[cellIndex]}\n                  </span>\n                )}\n                <span\n                  className={clsx(\n                    styles['ComparisonTable-cell-container'],\n                    cellIndex === featuredColumn && styles['ComparisonTable-cell-container--featured'],\n                  )}\n                >\n                  {rowChild.props.children}\n                </span>\n              </Cell>\n            )\n          }\n          return null\n        }),\n      })\n    })\n\n    const FootnoteChild = Children.find(\n      (child): child is React.ReactElement<PropsWithChildren<FootnoteProps>> => child.type === Footnote,\n    )\n\n    return (\n      <Component\n        ref={ref}\n        className={clsx(animationClasses, className)}\n        style={{...animationInlineStyles, ...style}}\n        {...props}\n      >\n        {heading && (\n          <Heading className={styles['ComparisonTable--heading']} as=\"h3\" size=\"4\">\n            {heading}\n          </Heading>\n        )}\n        <table className={clsx(styles.ComparisonTable, `ComparisonTable--${variant}`)}>\n          {HeaderRow.length && <thead>{HeaderRow}</thead>}\n          {RegularRows.length && <tbody>{RegularRows}</tbody>}\n        </table>\n        {FootnoteChild && <footer className={styles['ComparisonTable-footnote']}>{FootnoteChild}</footer>}\n      </Component>\n    )\n  },\n)\n\ntype RowProps = React.HTMLAttributes<HTMLTableRowElement> & {\n  header?: boolean\n}\n\nconst Row = ({children, ...rest}: PropsWithChildren<RowProps>) => {\n  return <tr {...rest}>{children}</tr>\n}\n\nexport type CellProps = BaseProps<HTMLTableCellElement> &\n  React.HTMLAttributes<HTMLTableCellElement> & {\n    as?: 'td' | 'th'\n  }\n\nconst Cell = ({as, children, ...props}: PropsWithChildren<CellProps>) => {\n  const Tag = as || 'td'\n  return <Tag {...props}>{children}</Tag>\n}\n\nexport type FootnoteProps = BaseProps<HTMLParagraphElement>\n\nconst Footnote = ({children, ...props}: PropsWithChildren<FootnoteProps>) => {\n  if (typeof children === 'string') {\n    return (\n      <Text as=\"p\" size=\"100\" variant=\"muted\">\n        {children}\n      </Text>\n    )\n  }\n  return <div {...props}>{children}</div>\n}\n\n/**\n * @description\n *  Comparison tables are used to aid decision-making by displaying a list of features and their associated qualities side-by-side.\n *  They are useful for comparing products, plans, or features in marketing pages.\n * @see https://primer.style/brand/components/ComparisonTable\n */\nexport const ComparisonTable = Object.assign(_ComparisonTable, {\n  Row,\n  Cell,\n  Footnote,\n})\n"],"mappings":"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"}

package/esm/ComparisonTable/ComparisonTable.module-CUq68rV0.css

@@ -0,0 +1 @@
+.Primer_Brand__ComparisonTable-module__ComparisonTable--heading___hSsMK{text-align:left;max-width:18ch;margin-bottom:var(--brand-ComparisonTable-heading-marginBottom)}@media screen and (width>=34rem){.Primer_Brand__ComparisonTable-module__ComparisonTable--heading___hSsMK{text-align:center;margin-left:auto;margin-right:auto}}.Primer_Brand__ComparisonTable-module__ComparisonTable-footnote___VE0Vy{text-align:left;margin:var(--base-size-24) 0}@media screen and (width>=34rem){.Primer_Brand__ComparisonTable-module__ComparisonTable-footnote___VE0Vy{text-align:center}}.Primer_Brand__ComparisonTable-module__ComparisonTable___ZxT9n{border-collapse:collapse;border-spacing:0;font-family:var(--brand-body-fontFamily);width:100%}.Primer_Brand__ComparisonTable-module__ComparisonTable___ZxT9n tr{text-align:left;flex-direction:column;width:100%;display:flex}.Primer_Brand__ComparisonTable-module__ComparisonTable-cell___4CiEs{color:var(--brand-color-text-default);font-weight:var(--brand-text-weight-200);font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200);padding-bottom:var(--base-size-24)}.Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___GoDXQ{font-weight:var(--base-text-weight-medium);font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200)}.Primer_Brand__ComparisonTable-module__ComparisonTable-cell-container___NtAjB{padding-top:var(--base-size-8);display:block}@media screen and (width<=34rem){.Primer_Brand__ComparisonTable-module__ComparisonTable___ZxT9n thead .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___GoDXQ{display:none}.Primer_Brand__ComparisonTable-module__ComparisonTable-cell___4CiEs{margin-bottom:var(--base-size-32);padding-bottom:0}.Primer_Brand__ComparisonTable-module__ComparisonTable___ZxT9n tbody tr{border-top:var(--brand-borderWidth-thin) solid var(--brand-color-border-default)}.Primer_Brand__ComparisonTable-module__ComparisonTable-inline-cell-label___ymZgc{font-weight:var(--brand-heading-weight-400);font-size:var(--brand-text-size-400);line-height:var(--brand-heading-lineHeight-400)}.Primer_Brand__ComparisonTable-module__ComparisonTable___ZxT9n tbody .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___GoDXQ{margin-top:var(--base-size-24);margin-bottom:var(--base-size-16);font-weight:var(--brand-heading-weight-300);font-size:var(--brand-text-size-300);line-height:var(--brand-heading-lineHeight-300)}}@media screen and (width>=34rem){.Primer_Brand__ComparisonTable-module__ComparisonTable___ZxT9n tr{flex-direction:row}.Primer_Brand__ComparisonTable-module__ComparisonTable-cell-container___NtAjB{padding-top:var(--base-size-24)}.Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___GoDXQ{text-align:left}.Primer_Brand__ComparisonTable-module__ComparisonTable___ZxT9n .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___GoDXQ:first-child{width:25%;margin-right:40px}.Primer_Brand__ComparisonTable-module__ComparisonTable___ZxT9n tr td:first-of-type:not(.Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___GoDXQ),.Primer_Brand__ComparisonTable-module__ComparisonTable___ZxT9n tr:first-of-type .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___GoDXQ:nth-child(2){width:40%}.Primer_Brand__ComparisonTable-module__ComparisonTable___ZxT9n tr td:nth-of-type(2):not(.Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___GoDXQ),.Primer_Brand__ComparisonTable-module__ComparisonTable___ZxT9n tr:first-of-type .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___GoDXQ:nth-child(3){width:35%;margin-left:40px}.Primer_Brand__ComparisonTable-module__ComparisonTable--hide-element-on-narrow___mI7kt{display:none}.Primer_Brand__ComparisonTable-module__ComparisonTable-cell-container___NtAjB{border-top:var(--brand-borderWidth-thick) solid var(--brand-color-border-default)}}.ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading--first___MaZ10{color:var(--brand-color-text-muted)}.ComparisonTable--default thead .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___GoDXQ{padding:var(--base-size-24) 0 var(--base-size-16)}.ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading-label--featured___bySQY{z-index:2;position:relative}@media screen and (width<=34rem){.ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell___4CiEs:not(.Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___GoDXQ){padding-left:25px;position:relative}.ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell___4CiEs:before{content:"";background:var(--brand-color-border-default);width:5px;position:absolute;top:0;bottom:0;left:0}.ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell--featured___ND9Zj:before{background:linear-gradient(180deg, var(--brand-ComparisonTable-featured-color-start), var(--brand-ComparisonTable-featured-color-end))}}@media screen and (width>=34rem){.ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading-label--featured___bySQY{color:#0000;background:linear-gradient(89.46deg, var(--brand-ComparisonTable-featured-color-start) 0.87%, var(--brand-ComparisonTable-featured-color-end) 75.12%);-webkit-background-clip:text;background-clip:text}.ComparisonTable--default thead .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___GoDXQ{font-weight:var(--brand-heading-weight-400);font-size:var(--brand-text-size-400);line-height:var(--brand-heading-lineHeight-400);align-items:flex-end;display:inline-flex}.ComparisonTable--default thead .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading--first___MaZ10{font-weight:var(--brand-heading-weight-400);font-size:var(--brand-text-size-400);line-height:var(--brand-heading-lineHeight-400)}.ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell--featured___ND9Zj,.ComparisonTable--default thead .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading--featured___m0kpq{padding-left:var(--base-size-24);padding-right:var(--base-size-24);border-right:2px solid var(--brand-ComparisonTable-featured-color-end);border-left:2px solid var(--brand-ComparisonTable-featured-color-start)}.ComparisonTable--default thead .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading--featured___m0kpq{background:var(--brand-color-canvas-default);border-top-left-radius:.45rem;border-top-right-radius:.45rem;position:relative}.ComparisonTable--default thead .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading--featured___m0kpq:before,.ComparisonTable--default thead .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading--featured___m0kpq:after{z-index:0;content:"";background:linear-gradient(90deg, var(--brand-ComparisonTable-featured-color-start), var(--brand-ComparisonTable-featured-color-end));border-top-left-radius:.45rem;border-top-right-radius:.45rem;position:absolute;inset:-2px -2px 0}.ComparisonTable--default thead .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading--featured___m0kpq:after{z-index:1;background:var(--brand-color-canvas-default);border-top-left-radius:.35rem;border-top-right-radius:.35rem;top:0;left:0;right:0}.ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell--featured___ND9Zj.Primer_Brand__ComparisonTable-module__ComparisonTable-cell--lastrow___yABeN{background:var(--brand-color-canvas-default);border-bottom-right-radius:.45rem;border-bottom-left-radius:.45rem;position:relative}.ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell--featured___ND9Zj.Primer_Brand__ComparisonTable-module__ComparisonTable-cell--lastrow___yABeN:after,.ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell--featured___ND9Zj.Primer_Brand__ComparisonTable-module__ComparisonTable-cell--lastrow___yABeN:before{z-index:0;content:"";background:linear-gradient(90deg, var(--brand-ComparisonTable-featured-color-start), var(--brand-ComparisonTable-featured-color-end));border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem;position:absolute;inset:0 -2px}.ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell--featured___ND9Zj.Primer_Brand__ComparisonTable-module__ComparisonTable-cell--lastrow___yABeN:after{z-index:1;background:var(--brand-color-canvas-default);border-bottom-right-radius:.35rem;border-bottom-left-radius:.35rem;bottom:2px;left:0;right:0}.ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-container--featured___ezdmW{z-index:2;position:relative}}

package/esm/ComparisonTable/ComparisonTable.module.js

@@ -0,0 +1,20 @@
+import './ComparisonTable.module-CUq68rV0.css';var e = {
+	"ComparisonTable--heading": "Primer_Brand__ComparisonTable-module__ComparisonTable--heading___hSsMK",
+	"ComparisonTable-footnote": "Primer_Brand__ComparisonTable-module__ComparisonTable-footnote___VE0Vy",
+	ComparisonTable: "Primer_Brand__ComparisonTable-module__ComparisonTable___ZxT9n",
+	"ComparisonTable-cell": "Primer_Brand__ComparisonTable-module__ComparisonTable-cell___4CiEs",
+	"ComparisonTable-cell-heading": "Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___GoDXQ",
+	"ComparisonTable-cell-container": "Primer_Brand__ComparisonTable-module__ComparisonTable-cell-container___NtAjB",
+	"ComparisonTable-inline-cell-label": "Primer_Brand__ComparisonTable-module__ComparisonTable-inline-cell-label___ymZgc",
+	"ComparisonTable--hide-element-on-narrow": "Primer_Brand__ComparisonTable-module__ComparisonTable--hide-element-on-narrow___mI7kt",
+	"ComparisonTable-cell-heading--first": "Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading--first___MaZ10",
+	"ComparisonTable-cell-heading-label--featured": "Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading-label--featured___bySQY",
+	"ComparisonTable-cell--featured": "Primer_Brand__ComparisonTable-module__ComparisonTable-cell--featured___ND9Zj",
+	"ComparisonTable-cell-heading--featured": "Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading--featured___m0kpq",
+	"ComparisonTable-cell--lastrow": "Primer_Brand__ComparisonTable-module__ComparisonTable-cell--lastrow___yABeN",
+	"ComparisonTable-cell-container--featured": "Primer_Brand__ComparisonTable-module__ComparisonTable-cell-container--featured___ezdmW"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=ComparisonTable.module.js.map

package/esm/ComparisonTable/ComparisonTable.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComparisonTable.module.js","names":[],"sources":["../../src/ComparisonTable/ComparisonTable.module.css"],"sourcesContent":["/*\n* Heading\n*/\n.ComparisonTable--heading {\n  text-align: left;\n  max-width: 18ch;\n  margin-bottom: var(--brand-ComparisonTable-heading-marginBottom);\n}\n\n/* Narrow breakpoint */\n\n@media screen and (min-width: 34rem) {\n  .ComparisonTable--heading {\n    margin-left: auto;\n    margin-right: auto;\n    text-align: center;\n  }\n}\n\n/**\n * Footnotes\n */\n\n.ComparisonTable-footnote {\n  text-align: left;\n  margin: var(--base-size-24) 0;\n}\n\n@media screen and (min-width: 34rem) {\n  .ComparisonTable-footnote {\n    text-align: center;\n  }\n}\n\n/*\n* Table\n*/\n\n.ComparisonTable {\n  border-collapse: collapse;\n  border-spacing: 0;\n  font-family: var(--brand-body-fontFamily);\n  width: 100%;\n}\n\n.ComparisonTable tr {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  text-align: left;\n}\n\n.ComparisonTable-cell {\n  color: var(--brand-color-text-default);\n  font-weight: var(--brand-text-weight-200);\n  font-size: var(--brand-text-size-200);\n  line-height: var(--brand-text-lineHeight-200);\n  padding-bottom: var(--base-size-24);\n}\n\n.ComparisonTable-cell-heading {\n  font-weight: var(--base-text-weight-medium);\n  font-size: var(--brand-text-size-200);\n  line-height: var(--brand-text-lineHeight-200);\n}\n\n.ComparisonTable-cell-container {\n  display: block;\n  padding-top: var(--base-size-8);\n}\n\n/*\n * Narrow viewport-only styles\n*/\n@media screen and (max-width: 34rem) {\n  .ComparisonTable thead .ComparisonTable-cell-heading {\n    display: none;\n  }\n\n  .ComparisonTable-cell {\n    margin-bottom: var(--base-size-32);\n    padding-bottom: 0;\n  }\n\n  .ComparisonTable tbody tr {\n    border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  }\n\n  .ComparisonTable-inline-cell-label {\n    font-weight: var(--brand-heading-weight-400);\n    font-size: var(--brand-text-size-400);\n    line-height: var(--brand-heading-lineHeight-400);\n  }\n\n  .ComparisonTable tbody .ComparisonTable-cell-heading {\n    margin-top: var(--base-size-24);\n    margin-bottom: var(--base-size-16);\n    font-weight: var(--brand-heading-weight-300);\n    font-size: var(--brand-text-size-300);\n    line-height: var(--brand-heading-lineHeight-300);\n  }\n}\n\n/*\n * Narrow landscape and above viewport styles\n*/\n@media screen and (min-width: 34rem) {\n  .ComparisonTable tr {\n    flex-direction: row;\n  }\n\n  .ComparisonTable-cell-container {\n    padding-top: var(--base-size-24);\n  }\n\n  .ComparisonTable-cell-heading {\n    text-align: left;\n  }\n\n  .ComparisonTable .ComparisonTable-cell-heading:first-child {\n    width: 25%;\n    margin-right: 40px;\n  }\n\n  .ComparisonTable tr td:nth-of-type(1):not(.ComparisonTable-cell-heading),\n  .ComparisonTable tr:nth-of-type(1) .ComparisonTable-cell-heading:nth-child(2) {\n    width: 40%;\n  }\n  .ComparisonTable tr td:nth-of-type(2):not(.ComparisonTable-cell-heading),\n  .ComparisonTable tr:nth-of-type(1) .ComparisonTable-cell-heading:nth-child(3) {\n    width: 35%;\n    margin-left: 40px;\n  }\n\n  .ComparisonTable--hide-element-on-narrow {\n    display: none;\n  }\n\n  .ComparisonTable-cell-container {\n    border-top: var(--brand-borderWidth-thick) solid var(--brand-color-border-default);\n  }\n}\n\n/*\n * Default presentation\n */\n:global(.ComparisonTable--default) .ComparisonTable-cell-heading--first {\n  color: var(--brand-color-text-muted);\n}\n\n:global(.ComparisonTable--default) thead .ComparisonTable-cell-heading {\n  padding: var(--base-size-24) 0 var(--base-size-16);\n}\n\n:global(.ComparisonTable--default) .ComparisonTable-cell-heading-label--featured {\n  position: relative;\n  z-index: 2;\n}\n\n/*\n * Narrow viewport-only styles\n*/\n@media screen and (max-width: 34rem) {\n  :global(.ComparisonTable--default) .ComparisonTable-cell:not(.ComparisonTable-cell-heading) {\n    position: relative;\n    padding-left: 25px;\n  }\n  :global(.ComparisonTable--default) .ComparisonTable-cell::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    width: 5px;\n    background: var(--brand-color-border-default);\n  }\n  :global(.ComparisonTable--default) .ComparisonTable-cell--featured::before {\n    background: linear-gradient(\n      180deg,\n      var(--brand-ComparisonTable-featured-color-start),\n      var(--brand-ComparisonTable-featured-color-end)\n    );\n  }\n}\n\n/*\n * Narrow landscape and above viewport styles\n*/\n@media screen and (min-width: 34rem) {\n  :global(.ComparisonTable--default) .ComparisonTable-cell-heading-label--featured {\n    color: transparent;\n    background: linear-gradient(\n      89.46deg,\n      var(--brand-ComparisonTable-featured-color-start) 0.87%,\n      var(--brand-ComparisonTable-featured-color-end) 75.12%\n    );\n    -webkit-background-clip: text;\n    background-clip: text;\n  }\n  :global(.ComparisonTable--default) thead .ComparisonTable-cell-heading {\n    font-weight: var(--brand-heading-weight-400);\n    font-size: var(--brand-text-size-400);\n    line-height: var(--brand-heading-lineHeight-400);\n    display: inline-flex;\n    align-items: flex-end;\n  }\n  :global(.ComparisonTable--default) thead .ComparisonTable-cell-heading--first {\n    font-weight: var(--brand-heading-weight-400);\n    font-size: var(--brand-text-size-400);\n    line-height: var(--brand-heading-lineHeight-400);\n  }\n\n  :global(.ComparisonTable--default) .ComparisonTable-cell--featured,\n  :global(.ComparisonTable--default) thead .ComparisonTable-cell-heading--featured {\n    padding-left: var(--base-size-24);\n    padding-right: var(--base-size-24);\n    border-right: 2px solid var(--brand-ComparisonTable-featured-color-end);\n    border-left: 2px solid var(--brand-ComparisonTable-featured-color-start);\n  }\n  :global(.ComparisonTable--default) thead .ComparisonTable-cell-heading--featured {\n    position: relative;\n    border-top-left-radius: 0.45rem;\n    border-top-right-radius: 0.45rem;\n    background: var(--brand-color-canvas-default);\n  }\n  :global(.ComparisonTable--default) thead .ComparisonTable-cell-heading--featured::before,\n  :global(.ComparisonTable--default) thead .ComparisonTable-cell-heading--featured::after {\n    position: absolute;\n    top: -2px;\n    right: -2px;\n    bottom: 0;\n    left: -2px;\n    z-index: 0;\n    content: '';\n    background: linear-gradient(\n      90deg,\n      var(--brand-ComparisonTable-featured-color-start),\n      var(--brand-ComparisonTable-featured-color-end)\n    );\n    border-top-left-radius: 0.45rem;\n    border-top-right-radius: 0.45rem;\n  }\n\n  :global(.ComparisonTable--default) thead .ComparisonTable-cell-heading--featured::after {\n    z-index: 1;\n    background: var(--brand-color-canvas-default);\n    top: 0px;\n    left: 0;\n    right: 0;\n    border-top-right-radius: 0.35rem;\n    border-top-left-radius: 0.35rem;\n  }\n  :global(.ComparisonTable--default) .ComparisonTable-cell--featured.ComparisonTable-cell--lastrow {\n    position: relative;\n    background: var(--brand-color-canvas-default);\n    border-bottom-right-radius: 0.45rem;\n    border-bottom-left-radius: 0.45rem;\n  }\n  :global(.ComparisonTable--default) .ComparisonTable-cell--featured.ComparisonTable-cell--lastrow::after,\n  :global(.ComparisonTable--default) .ComparisonTable-cell--featured.ComparisonTable-cell--lastrow::before {\n    position: absolute;\n    top: 0;\n    right: -2px;\n    bottom: 0;\n    left: -2px;\n    z-index: 0;\n    content: '';\n    background: linear-gradient(\n      90deg,\n      var(--brand-ComparisonTable-featured-color-start),\n      var(--brand-ComparisonTable-featured-color-end)\n    );\n    border-bottom-right-radius: 0.5rem;\n    border-bottom-left-radius: 0.5rem;\n  }\n  :global(.ComparisonTable--default) .ComparisonTable-cell--featured.ComparisonTable-cell--lastrow::after {\n    z-index: 1;\n    background: var(--brand-color-canvas-default);\n    bottom: 2px;\n    left: 0;\n    right: 0;\n    border-bottom-right-radius: 0.35rem;\n    border-bottom-left-radius: 0.35rem;\n  }\n\n  :global(.ComparisonTable--default) .ComparisonTable-cell-container--featured {\n    position: relative;\n    z-index: 2;\n  }\n}\n"],"mappings":""}

package/esm/ComparisonTable/index.d.ts

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

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

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

package/esm/ExpandableArrow/ExpandableArrow.d.ts

@@ -0,0 +1,10 @@
+type ExpandableArrowProps = {
+    className?: string;
+    /** Animate between a chevron arrow and an arrow with a stem by toggling the value of `expanded` */
+    expanded?: boolean;
+    hidden?: boolean;
+    reverse?: boolean;
+};
+export declare function ExpandableArrow({ className, expanded, reverse, hidden, ...rest }: ExpandableArrowProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ExpandableArrow.d.ts.map

package/esm/ExpandableArrow/ExpandableArrow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableArrow.d.ts","sourceRoot":"","sources":["../../src/ExpandableArrow/ExpandableArrow.tsx"],"names":[],"mappings":"AAIA,KAAK,oBAAoB,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mGAAmG;IACnG,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,wBAAgB,eAAe,CAAC,EAAC,SAAS,EAAE,QAAgB,EAAE,OAAe,EAAE,MAAM,EAAE,GAAG,IAAI,EAAC,EAAE,oBAAoB,2CA8BpH"}

package/esm/ExpandableArrow/ExpandableArrow.js

@@ -0,0 +1,31 @@
+import e from "../node_modules/clsx/dist/clsx.js";
+import t from "./ExpandableArrow.module.js";
+import "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/ExpandableArrow/ExpandableArrow.tsx
+function i({ className: i, expanded: a = !1, reverse: o = !1, hidden: s, ...c }) {
+	return /* @__PURE__ */ r("svg", {
+		className: e(t.ExpandableArrow, a && t["ExpandableArrow--expanded"], o && t["ExpandableArrow--reversed"], i),
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		"aria-hidden": s,
+		focusable: s ? "false" : void 0,
+		...c,
+		children: [/* @__PURE__ */ n("path", {
+			fill: "currentColor",
+			d: "M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"
+		}), /* @__PURE__ */ n("path", {
+			className: e(t["ExpandableArrow-stem"], a && t["ExpandableArrow-stem--expanded"]),
+			stroke: "currentColor",
+			d: "M1.75 8H11",
+			strokeWidth: "1.5",
+			strokeLinecap: "round"
+		})]
+	});
+}
+//#endregion
+export { i as ExpandableArrow };
+
+//# sourceMappingURL=ExpandableArrow.js.map

package/esm/ExpandableArrow/ExpandableArrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableArrow.js","names":[],"sources":["../../src/ExpandableArrow/ExpandableArrow.tsx"],"sourcesContent":["import React from 'react'\nimport {clsx} from 'clsx'\nimport styles from './ExpandableArrow.module.css'\n\ntype ExpandableArrowProps = {\n  className?: string\n  /** Animate between a chevron arrow and an arrow with a stem by toggling the value of `expanded` */\n  expanded?: boolean\n  hidden?: boolean\n  reverse?: boolean\n}\n\nexport function ExpandableArrow({className, expanded = false, reverse = false, hidden, ...rest}: ExpandableArrowProps) {\n  return (\n    <svg\n      className={clsx(\n        styles.ExpandableArrow,\n        expanded && styles['ExpandableArrow--expanded'],\n        reverse && styles['ExpandableArrow--reversed'],\n        className,\n      )}\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      aria-hidden={hidden}\n      focusable={hidden ? 'false' : undefined}\n      {...rest}\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z\"\n      />\n      <path\n        className={clsx(styles['ExpandableArrow-stem'], expanded && styles['ExpandableArrow-stem--expanded'])}\n        stroke=\"currentColor\"\n        d=\"M1.75 8H11\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  )\n}\n"],"mappings":";;;;;AAYA,SAAgB,EAAgB,EAAC,cAAW,cAAW,IAAO,aAAU,IAAO,WAAQ,GAAG,KAA6B;AACrH,QACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAO,iBACP,KAAY,EAAO,8BACnB,KAAW,EAAO,8BAClB,EACD;EACD,OAAM;EACN,QAAO;EACP,SAAQ;EACR,MAAK;EACL,eAAa;EACb,WAAW,IAAS,UAAU,KAAA;EAC9B,GAAI;YAbN,CAeE,kBAAC,QAAD;GACE,MAAK;GACL,GAAE;GACF,CAAA,EACF,kBAAC,QAAD;GACE,WAAW,EAAK,EAAO,yBAAyB,KAAY,EAAO,kCAAkC;GACrG,QAAO;GACP,GAAE;GACF,aAAY;GACZ,eAAc;GACd,CAAA,CACE"}

package/esm/ExpandableArrow/ExpandableArrow.module-hRhRe88K.css

@@ -0,0 +1 @@
+.Primer_Brand__ExpandableArrow-module__ExpandableArrow___aaZs9{--ExpandableArrow-duration:.2s;--ExpandableArrow-easing:ease;transition:transform .2s;transition:transform var(--ExpandableArrow-duration) var(--ExpandableArrow-easing);transform:translate(0)}.Primer_Brand__ExpandableArrow-module__ExpandableArrow--expanded____FeTD{transform:translate(4px)}.Primer_Brand__ExpandableArrow-module__ExpandableArrow-stem___0K8Hz{stroke-dasharray:10;stroke-dashoffset:10px;transition:stroke-dashoffset var(--ExpandableArrow-duration) var(--ExpandableArrow-easing)}.Primer_Brand__ExpandableArrow-module__ExpandableArrow-stem--expanded___uG15m{stroke-dashoffset:20px}.Primer_Brand__ExpandableArrow-module__ExpandableArrow--reversed___ekIkv{transform:rotate(180deg)}.Primer_Brand__ExpandableArrow-module__ExpandableArrow--reversed___ekIkv.Primer_Brand__ExpandableArrow-module__ExpandableArrow--expanded____FeTD{transform:rotate(180deg)translate(4px)}

package/esm/ExpandableArrow/ExpandableArrow.module.js

@@ -0,0 +1,11 @@
+import './ExpandableArrow.module-hRhRe88K.css';var e = {
+	ExpandableArrow: "Primer_Brand__ExpandableArrow-module__ExpandableArrow___aaZs9",
+	"ExpandableArrow--expanded": "Primer_Brand__ExpandableArrow-module__ExpandableArrow--expanded____FeTD",
+	"ExpandableArrow-stem": "Primer_Brand__ExpandableArrow-module__ExpandableArrow-stem___0K8Hz",
+	"ExpandableArrow-stem--expanded": "Primer_Brand__ExpandableArrow-module__ExpandableArrow-stem--expanded___uG15m",
+	"ExpandableArrow--reversed": "Primer_Brand__ExpandableArrow-module__ExpandableArrow--reversed___ekIkv"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=ExpandableArrow.module.js.map

package/esm/ExpandableArrow/ExpandableArrow.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableArrow.module.js","names":[],"sources":["../../src/ExpandableArrow/ExpandableArrow.module.css"],"sourcesContent":[".ExpandableArrow {\n  --ExpandableArrow-duration: 200ms;\n  --ExpandableArrow-easing: ease;\n\n  transition: transform var(--ExpandableArrow-duration) var(--ExpandableArrow-easing);\n  transform: translateX(0);\n}\n\n.ExpandableArrow--expanded {\n  transform: translateX(4px);\n}\n\n.ExpandableArrow-stem {\n  stroke-dasharray: 10;\n  stroke-dashoffset: 10;\n  transition: stroke-dashoffset var(--ExpandableArrow-duration) var(--ExpandableArrow-easing);\n}\n\n.ExpandableArrow-stem--expanded {\n  stroke-dashoffset: 20;\n}\n\n.ExpandableArrow--reversed {\n  transform: rotate(180deg);\n}\n\n.ExpandableArrow--reversed.ExpandableArrow--expanded {\n  transform: rotate(180deg) translateX(4px);\n}\n"],"mappings":""}

package/esm/ExpandableArrow/index.d.ts

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

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

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

package/esm/EyebrowBanner/EyebrowBanner.d.ts

@@ -0,0 +1,50 @@
+import React, { PropsWithChildren } from 'react';
+import { type Icon as IconProps } from '@primer/octicons-react';
+import type { BaseProps } from '../component-helpers';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/eyebrow-banner.css';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/colors-with-modes.css';
+export type EyebrowBannerProps = BaseProps<HTMLAnchorElement> & {
+    href: string;
+    ['data-testid']?: string;
+} & React.HTMLAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement>;
+type EyebrowBannerHeadingProps = PropsWithChildren<BaseProps<HTMLSpanElement>>;
+type EyebrowBannerSubHeadingProps = PropsWithChildren<BaseProps<HTMLSpanElement>>;
+export declare const EyebrowBannerIconColors: readonly ["default", "blue", "coral", "green", "gray", "indigo", "lemon", "lime", "orange", "pink", "purple", "red", "teal", "yellow"];
+export declare const defaultEyebrowBannerIconColor: "default";
+type EyebrowBannerVisual = BaseProps<HTMLSpanElement> & {
+    icon?: React.ReactNode | IconProps;
+    color?: (typeof EyebrowBannerIconColors)[number];
+    hasBackground?: boolean;
+    ['aria-hidden']?: boolean;
+    children?: React.ReactNode;
+};
+declare const EyebrowBannerVisual: React.ForwardRefExoticComponent<Omit<EyebrowBannerVisual, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const EyebrowBannerLabelColors: readonly ["blue-purple", "green-blue", "pink-blue", "purple-red", "red-orange", "default", "blue", "coral", "green", "gray", "indigo", "lemon", "lime", "orange", "pink", "purple", "red", "teal", "yellow"];
+type EyebrowBannerLabel = BaseProps<HTMLSpanElement> & {
+    /**
+     * The color variations available in EyebrowBanner.Label
+     */
+    color?: (typeof EyebrowBannerLabelColors)[number];
+};
+declare const EyebrowBannerLabel: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<EyebrowBannerLabel>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * Use EyebrowBanner to display a short message at the top of a page.
+ * @see https://primer.style/brand/components/EyebrowBanner
+ */
+export declare const EyebrowBanner: React.ForwardRefExoticComponent<Omit<EyebrowBannerProps, "ref"> & React.RefAttributes<HTMLAnchorElement>> & {
+    Visual: React.ForwardRefExoticComponent<Omit<EyebrowBannerVisual, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Label: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<EyebrowBannerLabel>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Heading: React.ForwardRefExoticComponent<Omit<EyebrowBannerHeadingProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    SubHeading: React.ForwardRefExoticComponent<Omit<EyebrowBannerSubHeadingProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    testIds: {
+        root: string;
+        visual: string;
+        label: string;
+        expandableArrow: string;
+    };
+};
+export {};
+//# sourceMappingURL=EyebrowBanner.d.ts.map

package/esm/EyebrowBanner/EyebrowBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EyebrowBanner.d.ts","sourceRoot":"","sources":["../../src/EyebrowBanner/EyebrowBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,iBAAiB,EAA0B,MAAM,OAAO,CAAA;AAEvE,OAAO,EAAC,KAAK,IAAI,IAAI,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAK7D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAGnD;;GAEG;AACH,OAAO,+GAA+G,CAAA;AACtH,OAAO,kHAAkH,CAAA;AAKzH,MAAM,MAAM,kBAAkB,GAAG,SAAS,CAAC,iBAAiB,CAAC,GAAG;IAC9D,IAAI,EAAE,MAAM,CAAA;IACZ,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAA;CACzB,GAAG,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,GACzC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAA;AA0G/C,KAAK,yBAAyB,GAAG,iBAAiB,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAA;AAmB9E,KAAK,4BAA4B,GAAG,iBAAiB,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAA;AAkBjF,eAAO,MAAM,uBAAuB,wIAAS,CAAA;AAE7C,eAAO,MAAM,6BAA6B,WAA6B,CAAA;AAEvE,KAAK,mBAAmB,GAAG,SAAS,CAAC,eAAe,CAAC,GAAG;IACtD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAA;IAClC,KAAK,CAAC,EAAE,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,CAAA;IAChD,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,CAAC,aAAa,CAAC,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED,QAAA,MAAM,mBAAmB,0GA+BxB,CAAA;AAED,eAAO,MAAM,wBAAwB,8MAA4C,CAAA;AAEjF,KAAK,kBAAkB,GAAG,SAAS,CAAC,eAAe,CAAC,GAAG;IACrD;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,OAAO,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAA;CAClD,CAAA;AAED,QAAA,MAAM,kBAAkB,kIAiBvB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;CAMxB,CAAA"}

package/esm/EyebrowBanner/EyebrowBanner.js

@@ -0,0 +1,120 @@
+import e from "../node_modules/clsx/dist/clsx.js";
+import { BiColorGradients as t, Colors as n } from "../constants.js";
+import { Text as r } from "../Text/Text.js";
+import { ExpandableArrow as i } from "../ExpandableArrow/ExpandableArrow.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/eyebrow-banner-CPW2Ri4S.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/colors-with-modes-BzV3LYhH.css';/* empty css                                                                                                         */
+/* empty css                                                                                                            */
+import a from "./EyebrowBanner.module.js";
+import o, { forwardRef as s, useCallback as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/EyebrowBanner/EyebrowBanner.tsx
+var f = {
+	root: "EyebrowBanner",
+	visual: "EyebrowBanner__visual",
+	label: "EyebrowBanner__label",
+	expandableArrow: "EyebrowBanner__expandableArrow"
+}, p = s(({ className: t, children: n, "data-testid": r, href: s, onMouseEnter: p, onMouseLeave: g, onFocus: _, onBlur: y, ...x }, S) => {
+	let [C, w] = o.useState(!1), [T, E] = o.useState(!1), D = c((e) => {
+		w(!C), p?.(e);
+	}, [p, C]), O = c((e) => {
+		w(!C), g?.(e);
+	}, [g, C]), k = c((e) => {
+		E(!T), _?.(e);
+	}, [_, T]), A = c((e) => {
+		E(!T), y?.(e);
+	}, [y, T]), j = o.Children.toArray(n).filter((e) => {
+		if (o.isValidElement(e)) return e.type === m;
+	}), M = o.Children.toArray(n).filter((e) => {
+		if (o.isValidElement(e)) return e.type === h;
+	}), N = o.Children.toArray(n).find((e) => {
+		if (o.isValidElement(e)) return e.type === v;
+	}), P = o.Children.toArray(n).find((e) => {
+		if (o.isValidElement(e)) return e.type === b;
+	});
+	return /* @__PURE__ */ u("a", {
+		href: s,
+		ref: S,
+		className: e(a.EyebrowBanner, t),
+		onMouseEnter: D,
+		onMouseLeave: O,
+		onFocus: k,
+		onBlur: A,
+		"data-testid": r || f.root,
+		...x,
+		children: /* @__PURE__ */ d("span", {
+			className: a.EyebrowBanner__inner,
+			children: [
+				N && /* @__PURE__ */ u("span", {
+					className: a.EyebrowBanner__leadingVisual,
+					children: N
+				}),
+				/* @__PURE__ */ u("span", {
+					className: "visually-hidden",
+					children: "\xA0"
+				}),
+				P && !N && /* @__PURE__ */ u(l, { children: P }),
+				/* @__PURE__ */ u("span", {
+					className: "visually-hidden",
+					children: "\xA0"
+				}),
+				/* @__PURE__ */ d("span", {
+					className: a.EyebrowBanner__headings,
+					children: [
+						j,
+						/* @__PURE__ */ u("span", {
+							className: "visually-hidden",
+							children: "\xA0"
+						}),
+						M
+					]
+				}),
+				/* @__PURE__ */ u("span", {
+					className: a.EyebrowBanner__trailingVisual,
+					children: /* @__PURE__ */ u(i, {
+						className: a["EyebrowBanner__trailingVisual-icon"],
+						expanded: C || T,
+						"data-testid": f.expandableArrow
+					})
+				})
+			]
+		})
+	});
+}), m = s(({ className: t, children: n, ...i }, o) => /* @__PURE__ */ u(r, {
+	size: "100",
+	variant: "default",
+	weight: "medium",
+	ref: o,
+	className: e(a.EyebrowBanner__heading, t),
+	...i,
+	children: n
+})), h = s(({ className: t, children: n, ...i }, o) => /* @__PURE__ */ u(r, {
+	size: "100",
+	variant: "muted",
+	ref: o,
+	className: e(a.EyebrowBanner__subHeading, t),
+	...i,
+	children: n
+})), g = n, _ = g[0], v = s(({ className: t, children: n, "aria-hidden": r, icon: i, color: o = _, hasBackground: s = !1, ...c }, l) => /* @__PURE__ */ u("span", {
+	ref: l,
+	className: e(a.EyebrowBanner__visual, i && a.EyebrowBanner__icon, i && a[`EyebrowBanner__icon--color-${o}`], s && a["EyebrowBanner__icon--badge"], t),
+	"data-testid": f.visual,
+	"aria-hidden": r || typeof i != "function",
+	...c,
+	children: i ? typeof i == "function" ? /* @__PURE__ */ u(i, {}) : i : n
+})), y = [...t, ...n], b = s(({ className: t, children: n, color: r, ...i }, o) => /* @__PURE__ */ u("span", {
+	ref: o,
+	className: e(a.EyebrowBanner__leadingLabel, r && a[`EyebrowBanner__leadingLabel--color-${r}`], t),
+	"data-testid": f.label,
+	...i,
+	children: n
+})), x = Object.assign(p, {
+	Visual: v,
+	Label: b,
+	Heading: m,
+	SubHeading: h,
+	testIds: f
+});
+//#endregion
+export { x as EyebrowBanner, g as EyebrowBannerIconColors, y as EyebrowBannerLabelColors, _ as defaultEyebrowBannerIconColor };
+
+//# sourceMappingURL=EyebrowBanner.js.map

package/esm/EyebrowBanner/EyebrowBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EyebrowBanner.js","names":[],"sources":["../../src/EyebrowBanner/EyebrowBanner.tsx"],"sourcesContent":["import React, {PropsWithChildren, forwardRef, useCallback} from 'react'\nimport {clsx} from 'clsx'\nimport {type Icon as IconProps} from '@primer/octicons-react'\n\nimport {Text} from '../Text'\nimport {Colors, BiColorGradients} from '../constants'\n\nimport type {BaseProps} from '../component-helpers'\nimport {ExpandableArrow} from '../ExpandableArrow'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/eyebrow-banner.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './EyebrowBanner.module.css'\n\nexport type EyebrowBannerProps = BaseProps<HTMLAnchorElement> & {\n  href: string\n  ['data-testid']?: string\n} & React.HTMLAttributes<HTMLAnchorElement> &\n  React.AnchorHTMLAttributes<HTMLAnchorElement>\n\nconst testIds = {\n  root: 'EyebrowBanner',\n  visual: 'EyebrowBanner__visual',\n  label: 'EyebrowBanner__label',\n  expandableArrow: 'EyebrowBanner__expandableArrow',\n}\n\nconst _EyebrowBanner = forwardRef<HTMLAnchorElement, EyebrowBannerProps>(\n  ({className, children, 'data-testid': testId, href, onMouseEnter, onMouseLeave, onFocus, onBlur, ...rest}, ref) => {\n    const [isHovered, setIsHovered] = React.useState(false)\n    const [isFocused, setIsFocused] = React.useState(false)\n\n    const handleMouseEnter = useCallback(\n      (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n        setIsHovered(!isHovered)\n        onMouseEnter?.(event)\n      },\n      [onMouseEnter, isHovered],\n    )\n\n    const handleMouseLeave = useCallback(\n      (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n        setIsHovered(!isHovered)\n        onMouseLeave?.(event)\n      },\n      [onMouseLeave, isHovered],\n    )\n\n    const handleOnFocus = useCallback(\n      (event: React.FocusEvent<HTMLAnchorElement, Element>) => {\n        setIsFocused(!isFocused)\n        onFocus?.(event)\n      },\n      [onFocus, isFocused],\n    )\n\n    const handleOnBlur = useCallback(\n      (event: React.FocusEvent<HTMLAnchorElement, Element>) => {\n        setIsFocused(!isFocused)\n        onBlur?.(event)\n      },\n      [onBlur, isFocused],\n    )\n\n    const HeadingChild = React.Children.toArray(children).filter(child => {\n      if (React.isValidElement(child)) {\n        return child.type === EyebrowBannerHeading\n      }\n    })\n\n    const SubHeadingChild = React.Children.toArray(children).filter(child => {\n      if (React.isValidElement(child)) {\n        return child.type === EyebrowBannerSubHeading\n      }\n    })\n\n    const VisualChild = React.Children.toArray(children).find(child => {\n      if (React.isValidElement(child)) {\n        return child.type === EyebrowBannerVisual\n      }\n    })\n\n    const LabelChild = React.Children.toArray(children).find(child => {\n      if (React.isValidElement(child)) {\n        return child.type === EyebrowBannerLabel\n      }\n    })\n\n    return (\n      <a\n        href={href}\n        ref={ref}\n        className={clsx(styles.EyebrowBanner, className)}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        onFocus={handleOnFocus}\n        onBlur={handleOnBlur}\n        data-testid={testId || testIds.root}\n        {...rest}\n      >\n        <span className={styles['EyebrowBanner__inner']}>\n          {VisualChild && <span className={styles['EyebrowBanner__leadingVisual']}>{VisualChild}</span>}\n          <span className=\"visually-hidden\">&nbsp;</span>\n          {LabelChild && !VisualChild && <>{LabelChild}</>}\n          <span className=\"visually-hidden\">&nbsp;</span>\n          <span className={styles['EyebrowBanner__headings']}>\n            {HeadingChild}\n            <span className=\"visually-hidden\">&nbsp;</span>\n            {SubHeadingChild}\n          </span>\n\n          <span className={styles['EyebrowBanner__trailingVisual']}>\n            <ExpandableArrow\n              className={styles['EyebrowBanner__trailingVisual-icon']}\n              expanded={isHovered || isFocused}\n              data-testid={testIds.expandableArrow}\n            />\n          </span>\n        </span>\n      </a>\n    )\n  },\n)\n\ntype EyebrowBannerHeadingProps = PropsWithChildren<BaseProps<HTMLSpanElement>>\n\nconst EyebrowBannerHeading = forwardRef<HTMLSpanElement, EyebrowBannerHeadingProps>(\n  ({className, children, ...rest}, ref) => {\n    return (\n      <Text\n        size=\"100\"\n        variant=\"default\"\n        weight=\"medium\"\n        ref={ref}\n        className={clsx(styles[`EyebrowBanner__heading`], className)}\n        {...rest}\n      >\n        {children}\n      </Text>\n    )\n  },\n)\n\ntype EyebrowBannerSubHeadingProps = PropsWithChildren<BaseProps<HTMLSpanElement>>\n\nconst EyebrowBannerSubHeading = forwardRef<HTMLSpanElement, EyebrowBannerSubHeadingProps>(\n  ({className, children, ...rest}, ref) => {\n    return (\n      <Text\n        size=\"100\"\n        variant=\"muted\"\n        ref={ref}\n        className={clsx(styles[`EyebrowBanner__subHeading`], className)}\n        {...rest}\n      >\n        {children}\n      </Text>\n    )\n  },\n)\n\nexport const EyebrowBannerIconColors = Colors\n\nexport const defaultEyebrowBannerIconColor = EyebrowBannerIconColors[0]\n\ntype EyebrowBannerVisual = BaseProps<HTMLSpanElement> & {\n  icon?: React.ReactNode | IconProps\n  color?: (typeof EyebrowBannerIconColors)[number]\n  hasBackground?: boolean\n  ['aria-hidden']?: boolean\n  children?: React.ReactNode\n}\n\nconst EyebrowBannerVisual = forwardRef<HTMLSpanElement, EyebrowBannerVisual>(\n  (\n    {\n      className,\n      children,\n      'aria-hidden': ariaHidden,\n      icon: Icon,\n      color = defaultEyebrowBannerIconColor,\n      hasBackground = false,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <span\n        ref={ref}\n        className={clsx(\n          styles[`EyebrowBanner__visual`],\n          Icon && styles.EyebrowBanner__icon,\n          Icon && styles[`EyebrowBanner__icon--color-${color}`],\n          hasBackground && styles['EyebrowBanner__icon--badge'],\n          className,\n        )}\n        data-testid={testIds.visual}\n        aria-hidden={ariaHidden || typeof Icon !== 'function'}\n        {...rest}\n      >\n        {Icon ? typeof Icon === 'function' ? <Icon /> : Icon : children}\n      </span>\n    )\n  },\n)\n\nexport const EyebrowBannerLabelColors = [...BiColorGradients, ...Colors] as const\n\ntype EyebrowBannerLabel = BaseProps<HTMLSpanElement> & {\n  /**\n   * The color variations available in EyebrowBanner.Label\n   */\n  color?: (typeof EyebrowBannerLabelColors)[number]\n}\n\nconst EyebrowBannerLabel = forwardRef<HTMLSpanElement, PropsWithChildren<EyebrowBannerLabel>>(\n  ({className, children, color, ...rest}, ref) => {\n    return (\n      <span\n        ref={ref}\n        className={clsx(\n          styles[`EyebrowBanner__leadingLabel`],\n          color && styles[`EyebrowBanner__leadingLabel--color-${color}`],\n          className,\n        )}\n        data-testid={testIds.label}\n        {...rest}\n      >\n        {children}\n      </span>\n    )\n  },\n)\n\n/**\n * Use EyebrowBanner to display a short message at the top of a page.\n * @see https://primer.style/brand/components/EyebrowBanner\n */\nexport const EyebrowBanner = Object.assign(_EyebrowBanner, {\n  Visual: EyebrowBannerVisual,\n  Label: EyebrowBannerLabel,\n  Heading: EyebrowBannerHeading,\n  SubHeading: EyebrowBannerSubHeading,\n  testIds,\n})\n"],"mappings":"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"}