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

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

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

package/esm/ThemeProvider/ThemeProvider.d.ts

@@ -0,0 +1,20 @@
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+export declare enum ColorModesEnum {
+    LIGHT = "light",
+    DARK = "dark",
+    AUTO = "auto"
+}
+export type ColorMode = `${ColorModesEnum}`;
+export type ThemeContextProps = {
+    colorMode: ColorMode;
+    availableColorModes: ColorModesEnum[];
+};
+export type ThemeProviderProps = {
+    colorMode?: ColorMode;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const ThemeContext: React.Context<ThemeContextProps>;
+/**
+ * ThemeProvider is used to provide theme-related context to its child components.
+ */
+export declare function ThemeProvider({ colorMode, children, ...rest }: PropsWithChildren<ThemeProviderProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ThemeProvider.d.ts.map

package/esm/ThemeProvider/ThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA8C,cAAc,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAE3G,oBAAY,cAAc;IACxB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,MAAM,MAAM,SAAS,GAAG,GAAG,cAAc,EAAE,CAAA;AAE3C,MAAM,MAAM,iBAAiB,GAAG;IAI9B,SAAS,EAAE,SAAS,CAAA;IAKpB,mBAAmB,EAAE,cAAc,EAAE,CAAA;CACtC,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAA;AAIlC,eAAO,MAAM,YAAY,kCAGvB,CAAA;AAEF;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAC,SAAuB,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAC,EAAE,iBAAiB,CAAC,kBAAkB,CAAC,2CAqBhH"}

package/esm/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,35 @@
+import { createContext as e, useEffect as t, useMemo as n, useState as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/ThemeProvider/ThemeProvider.tsx
+var a = /* @__PURE__ */ function(e) {
+	return e.LIGHT = "light", e.DARK = "dark", e.AUTO = "auto", e;
+}({}), o = a.LIGHT, s = e({
+	colorMode: o,
+	availableColorModes: Object.values(a)
+});
+function c({ colorMode: e = o, children: c, ...l }) {
+	let [f, p] = r(e), m = n(() => Object.values(a), []);
+	return t(() => (e === a.AUTO ? p(u()) : f !== e && p(e), d(p)), [
+		e,
+		f,
+		p
+	]), /* @__PURE__ */ i(s.Provider, {
+		value: {
+			colorMode: f,
+			availableColorModes: m
+		},
+		children: /* @__PURE__ */ i("div", {
+			"data-color-mode": f,
+			...l,
+			children: c
+		})
+	});
+}
+var l = () => window.matchMedia(`(prefers-color-scheme: ${a.DARK})`), u = () => l().matches ? a.DARK : a.LIGHT, d = (e) => {
+	let t = l(), n = (t) => e(t.matches ? a.DARK : a.LIGHT);
+	return t.addEventListener("change", n), () => t.removeEventListener("change", n);
+};
+//#endregion
+export { a as ColorModesEnum, s as ThemeContext, c as ThemeProvider };
+
+//# sourceMappingURL=ThemeProvider.js.map

package/esm/ThemeProvider/ThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.js","names":[],"sources":["../../src/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["import React, {useState, useMemo, useEffect, createContext, HTMLAttributes, PropsWithChildren} from 'react'\n\nexport enum ColorModesEnum {\n  LIGHT = 'light',\n  DARK = 'dark',\n  AUTO = 'auto',\n}\n\nexport type ColorMode = `${ColorModesEnum}`\n\nexport type ThemeContextProps = {\n  /*\n   * The active color mode of the parent ThemeProvider.\n   */\n  colorMode: ColorMode\n\n  /*\n   * List of available color modes.\n   */\n  availableColorModes: ColorModesEnum[]\n}\n\nexport type ThemeProviderProps = {\n  colorMode?: ColorMode\n} & HTMLAttributes<HTMLDivElement>\n\nconst defaultMode = ColorModesEnum.LIGHT\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n  colorMode: defaultMode,\n  availableColorModes: Object.values(ColorModesEnum),\n})\n\n/**\n * ThemeProvider is used to provide theme-related context to its child components.\n */\nexport function ThemeProvider({colorMode = defaultMode, children, ...rest}: PropsWithChildren<ThemeProviderProps>) {\n  const [activeMode, setActiveMode] = useState(colorMode)\n  const availableColorModes = useMemo(() => Object.values(ColorModesEnum), [])\n\n  useEffect(() => {\n    if (colorMode === ColorModesEnum.AUTO) {\n      setActiveMode(getActiveAutoMode())\n    } else if (activeMode !== colorMode) {\n      setActiveMode(colorMode)\n    }\n\n    return handleSystemPreferenceChange(setActiveMode)\n  }, [colorMode, activeMode, setActiveMode])\n\n  return (\n    <ThemeContext.Provider value={{colorMode: activeMode, availableColorModes}}>\n      <div data-color-mode={activeMode} {...rest}>\n        {children}\n      </div>\n    </ThemeContext.Provider>\n  )\n}\n\nconst queryBrowserPreference = () => window.matchMedia(`(prefers-color-scheme: ${ColorModesEnum.DARK})`)\n\nconst getActiveAutoMode = () => {\n  const mediaQueryList: MediaQueryList = queryBrowserPreference()\n  return mediaQueryList.matches ? ColorModesEnum.DARK : ColorModesEnum.LIGHT\n}\n\nconst handleSystemPreferenceChange = callback => {\n  const mediaQueryList = queryBrowserPreference()\n  const changeHandler = event => callback(event.matches ? ColorModesEnum.DARK : ColorModesEnum.LIGHT)\n  mediaQueryList.addEventListener('change', changeHandler)\n  return () => mediaQueryList.removeEventListener('change', changeHandler)\n}\n"],"mappings":";;;AAEA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,QAAQ,SACR,EAAA,OAAO,QACP,EAAA,OAAO;KACR,EAoBK,IAAc,EAAe,OAEtB,IAAe,EAAiC;CAC3D,WAAW;CACX,qBAAqB,OAAO,OAAO,EAAe;CACnD,CAAC;AAKF,SAAgB,EAAc,EAAC,eAAY,GAAa,aAAU,GAAG,KAA8C;CACjH,IAAM,CAAC,GAAY,KAAiB,EAAS,EAAU,EACjD,IAAsB,QAAc,OAAO,OAAO,EAAe,EAAE,EAAE,CAAC;AAY5E,QAVA,SACM,MAAc,EAAe,OAC/B,EAAc,GAAmB,CAAC,GACzB,MAAe,KACxB,EAAc,EAAU,EAGnB,EAA6B,EAAc,GACjD;EAAC;EAAW;EAAY;EAAc,CAAC,EAGxC,kBAAC,EAAa,UAAd;EAAuB,OAAO;GAAC,WAAW;GAAY;GAAoB;YACxE,kBAAC,OAAD;GAAK,mBAAiB;GAAY,GAAI;GACnC;GACG,CAAA;EACgB,CAAA;;AAI5B,IAAM,UAA+B,OAAO,WAAW,0BAA0B,EAAe,KAAK,GAAG,EAElG,UACmC,GAChC,CAAe,UAAU,EAAe,OAAO,EAAe,OAGjE,KAA+B,MAAY;CAC/C,IAAM,IAAiB,GAAwB,EACzC,KAAgB,MAAS,EAAS,EAAM,UAAU,EAAe,OAAO,EAAe,MAAM;AAEnG,QADA,EAAe,iBAAiB,UAAU,EAAc,QAC3C,EAAe,oBAAoB,UAAU,EAAc"}

package/esm/ThemeProvider/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ThemeProvider';
+export { useTheme } from './useTheme';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ThemeProvider/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAA"}

package/esm/ThemeProvider/useTheme.d.ts

@@ -0,0 +1,2 @@
+export declare const useTheme: () => import("./ThemeProvider").ThemeContextProps;
+//# sourceMappingURL=useTheme.d.ts.map

package/esm/ThemeProvider/useTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/ThemeProvider/useTheme.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,mDAAiC,CAAA"}

package/esm/ThemeProvider/useTheme.js

@@ -0,0 +1,8 @@
+import { ThemeContext as e } from "./ThemeProvider.js";
+import { useContext as t } from "react";
+//#region src/ThemeProvider/useTheme.ts
+var n = () => t(e);
+//#endregion
+export { n as useTheme };
+
+//# sourceMappingURL=useTheme.js.map

package/esm/ThemeProvider/useTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.js","names":[],"sources":["../../src/ThemeProvider/useTheme.ts"],"sourcesContent":["import {useContext} from 'react'\nimport {ThemeContext} from './ThemeProvider'\n\nexport const useTheme = () => useContext(ThemeContext)\n"],"mappings":";;;AAGA,IAAa,UAAiB,EAAW,EAAa"}

package/esm/Tiles/Tiles.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import type { BaseProps } from '../component-helpers';
+/** * Design Tokens */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tiles/colors-with-modes.css';
+type TilesVariant = 'default' | 'gridlines';
+type TilesLayout = 'default' | 'compact';
+export type TilesProps = {
+    /**
+     * The visual variant of the Tiles component.
+     */
+    variant?: TilesVariant;
+    /**
+     * The layout density of the Tiles grid.
+     */
+    layout?: TilesLayout;
+    /**
+     * Test id for the root Tiles element.
+     */
+    'data-testid'?: string;
+} & BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>;
+export type TilesItemProps = {
+    /**
+     * The accessible name for the tile item.
+     */
+    name: string;
+    /**
+     * Optional URL to link the tile to.
+     */
+    href?: string;
+    /**
+     * Test id for the tile item element.
+     */
+    'data-testid'?: string;
+} & BaseProps<HTMLLIElement> & Omit<React.HTMLAttributes<HTMLLIElement>, 'children'> & {
+    children: React.ReactNode;
+};
+/**
+ * Use Tiles to display a grid of logos or icons with optional links.
+ * @see https://primer.style/brand/components/Tiles
+ */
+export declare const Tiles: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<TilesProps>, "ref"> & React.RefAttributes<HTMLDivElement>> & {
+    Item: React.ForwardRefExoticComponent<Omit<TilesItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+    testIds: {
+        root: string;
+        readonly grid: string;
+        readonly item: string;
+    };
+};
+export {};
+//# sourceMappingURL=Tiles.d.ts.map

package/esm/Tiles/Tiles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tiles.d.ts","sourceRoot":"","sources":["../../src/Tiles/Tiles.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgF,MAAM,OAAO,CAAA;AAEpG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAGnD,sBAAsB;AACtB,OAAO,yGAAyG,CAAA;AAehH,KAAK,YAAY,GAAG,SAAS,GAAG,WAAW,CAAA;AAE3C,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,CAAA;AAIxC,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,SAAS,CAAC,cAAc,CAAC,GAC3B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAoCtC,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,SAAS,CAAC,aAAa,CAAC,GAC1B,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,UAAU,CAAC,GAAG;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAoCH;;;GAGG;AACH,eAAO,MAAM,KAAK;;;;;;;CAGhB,CAAA"}

package/esm/Tiles/Tiles.fixtures.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const tileItems: Array<{
+    name: string;
+    href?: string;
+    icon: React.ReactNode;
+}>;
+//# sourceMappingURL=Tiles.fixtures.d.ts.map

package/esm/Tiles/Tiles.fixtures.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tiles.fixtures.d.ts","sourceRoot":"","sources":["../../src/Tiles/Tiles.fixtures.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,CAyCjF,CAAA"}

package/esm/Tiles/Tiles.js

@@ -0,0 +1,69 @@
+import e from "../node_modules/clsx/dist/clsx.js";
+import { Text as t } from "../Text/Text.js";
+import { ArrowUpRightIcon as n } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/tiles/colors-with-modes-DTTqGOfy.css';/* empty css                                                                                                   */
+import r from "./Tiles.module.js";
+import { createContext as i, forwardRef as a, useContext as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/Tiles/Tiles.tsx
+var l = {
+	root: "Tiles",
+	get grid() {
+		return `${this.root}-grid`;
+	},
+	get item() {
+		return `${this.root}-item`;
+	}
+}, u = i("default"), d = a(({ variant: t = "default", layout: n = "default", children: i, className: a, "data-testid": o, ...c }, d) => /* @__PURE__ */ s(u.Provider, {
+	value: n,
+	children: /* @__PURE__ */ s("div", {
+		ref: d,
+		className: e(r.Tiles, r[`Tiles--variant-${t}`], r[`Tiles--layout-${n}`], a),
+		"data-testid": o || l.root,
+		...c,
+		children: /* @__PURE__ */ s("ul", {
+			className: r["Tiles-grid"],
+			"data-testid": l.grid,
+			children: i
+		})
+	})
+})), f = a(({ name: i, href: a, children: d, className: f, "data-testid": p, ...m }, h) => {
+	let g = o(u), _ = !!a, v = g === "compact" && !_, y = /* @__PURE__ */ c("span", {
+		className: r["Tiles-item-content"],
+		children: [/* @__PURE__ */ s("span", {
+			className: r["Tiles-item-media"],
+			"aria-hidden": "true",
+			children: d
+		}), /* @__PURE__ */ c("span", {
+			className: e(r["Tiles-item-label"], v && "visually-hidden"),
+			children: [/* @__PURE__ */ s(t, {
+				as: "span",
+				size: "100",
+				className: r["Tiles-item-name"],
+				children: i
+			}), _ && /* @__PURE__ */ s(n, {
+				size: 16,
+				className: r["Tiles-item-icon"],
+				"aria-hidden": "true"
+			})]
+		})]
+	});
+	return /* @__PURE__ */ s("li", {
+		ref: h,
+		className: e(r["Tiles-item"], f),
+		"data-testid": p || l.item,
+		...m,
+		children: _ ? /* @__PURE__ */ s("a", {
+			href: a,
+			className: r["Tiles-item-link"],
+			children: y
+		}) : y
+	});
+}), p = Object.assign(d, {
+	Item: f,
+	testIds: l
+});
+//#endregion
+export { p as Tiles };
+
+//# sourceMappingURL=Tiles.js.map

package/esm/Tiles/Tiles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tiles.js","names":[],"sources":["../../src/Tiles/Tiles.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {createContext, forwardRef, type PropsWithChildren, type Ref, useContext} from 'react'\nimport {ArrowUpRightIcon} from '@primer/octicons-react'\nimport type {BaseProps} from '../component-helpers'\nimport {Text} from '../Text'\n\n/** * Design Tokens */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tiles/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Tiles.module.css'\n\nconst testIds = {\n  root: 'Tiles',\n  get grid() {\n    return `${this.root}-grid`\n  },\n  get item() {\n    return `${this.root}-item`\n  },\n}\n\ntype TilesVariant = 'default' | 'gridlines'\n\ntype TilesLayout = 'default' | 'compact'\n\nconst TilesContext = createContext<TilesLayout>('default')\n\nexport type TilesProps = {\n  /**\n   * The visual variant of the Tiles component.\n   */\n  variant?: TilesVariant\n  /**\n   * The layout density of the Tiles grid.\n   */\n  layout?: TilesLayout\n  /**\n   * Test id for the root Tiles element.\n   */\n  'data-testid'?: string\n} & BaseProps<HTMLDivElement> &\n  React.HTMLAttributes<HTMLDivElement>\n\nconst TilesRoot = forwardRef(\n  (\n    {\n      variant = 'default',\n      layout = 'default',\n      children,\n      className,\n      'data-testid': testId,\n      ...rest\n    }: PropsWithChildren<TilesProps>,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    return (\n      <TilesContext.Provider value={layout}>\n        <div\n          ref={ref}\n          className={clsx(\n            styles.Tiles,\n            styles[`Tiles--variant-${variant}`],\n            styles[`Tiles--layout-${layout}`],\n            className,\n          )}\n          data-testid={testId || testIds.root}\n          {...rest}\n        >\n          <ul className={styles['Tiles-grid']} data-testid={testIds.grid}>\n            {children}\n          </ul>\n        </div>\n      </TilesContext.Provider>\n    )\n  },\n)\n\nexport type TilesItemProps = {\n  /**\n   * The accessible name for the tile item.\n   */\n  name: string\n  /**\n   * Optional URL to link the tile to.\n   */\n  href?: string\n  /**\n   * Test id for the tile item element.\n   */\n  'data-testid'?: string\n} & BaseProps<HTMLLIElement> &\n  Omit<React.HTMLAttributes<HTMLLIElement>, 'children'> & {\n    children: React.ReactNode\n  }\n\nconst _Item = forwardRef(\n  ({name, href, children, className, 'data-testid': testId, ...rest}: TilesItemProps, ref: Ref<HTMLLIElement>) => {\n    const layout = useContext(TilesContext)\n    const hasLink = Boolean(href)\n    const isLabelHidden = layout === 'compact' && !hasLink\n\n    const content = (\n      <span className={styles['Tiles-item-content']}>\n        <span className={styles['Tiles-item-media']} aria-hidden=\"true\">\n          {children}\n        </span>\n        <span className={clsx(styles['Tiles-item-label'], isLabelHidden && 'visually-hidden')}>\n          <Text as=\"span\" size=\"100\" className={styles['Tiles-item-name']}>\n            {name}\n          </Text>\n          {hasLink && <ArrowUpRightIcon size={16} className={styles['Tiles-item-icon']} aria-hidden=\"true\" />}\n        </span>\n      </span>\n    )\n\n    return (\n      <li ref={ref} className={clsx(styles['Tiles-item'], className)} data-testid={testId || testIds.item} {...rest}>\n        {hasLink ? (\n          <a href={href} className={styles['Tiles-item-link']}>\n            {content}\n          </a>\n        ) : (\n          content\n        )}\n      </li>\n    )\n  },\n)\n\n/**\n * Use Tiles to display a grid of logos or icons with optional links.\n * @see https://primer.style/brand/components/Tiles\n */\nexport const Tiles = Object.assign(TilesRoot, {\n  Item: _Item,\n  testIds,\n})\n"],"mappings":";;;;;;;;AAYA,IAAM,IAAU;CACd,MAAM;CACN,IAAI,OAAO;AACT,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,OAAO;AACT,SAAO,GAAG,KAAK,KAAK;;CAEvB,EAMK,IAAe,EAA2B,UAAU,EAkBpD,IAAY,GAEd,EACE,aAAU,WACV,YAAS,WACT,aACA,cACA,eAAe,GACf,GAAG,KAEL,MAGE,kBAAC,EAAa,UAAd;CAAuB,OAAO;WAC5B,kBAAC,OAAD;EACO;EACL,WAAW,EACT,EAAO,OACP,EAAO,kBAAkB,MACzB,EAAO,iBAAiB,MACxB,EACD;EACD,eAAa,KAAU,EAAQ;EAC/B,GAAI;YAEJ,kBAAC,MAAD;GAAI,WAAW,EAAO;GAAe,eAAa,EAAQ;GACvD;GACE,CAAA;EACD,CAAA;CACgB,CAAA,CAG7B,EAoBK,IAAQ,GACX,EAAC,SAAM,SAAM,aAAU,cAAW,eAAe,GAAQ,GAAG,KAAuB,MAA4B;CAC9G,IAAM,IAAS,EAAW,EAAa,EACjC,IAAU,EAAQ,GAClB,IAAgB,MAAW,aAAa,CAAC,GAEzC,IACJ,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB,CACE,kBAAC,QAAD;GAAM,WAAW,EAAO;GAAqB,eAAY;GACtD;GACI,CAAA,EACP,kBAAC,QAAD;GAAM,WAAW,EAAK,EAAO,qBAAqB,KAAiB,kBAAkB;aAArF,CACE,kBAAC,GAAD;IAAM,IAAG;IAAO,MAAK;IAAM,WAAW,EAAO;cAC1C;IACI,CAAA,EACN,KAAW,kBAAC,GAAD;IAAkB,MAAM;IAAI,WAAW,EAAO;IAAoB,eAAY;IAAS,CAAA,CAC9F;KACF;;AAGT,QACE,kBAAC,MAAD;EAAS;EAAK,WAAW,EAAK,EAAO,eAAe,EAAU;EAAE,eAAa,KAAU,EAAQ;EAAM,GAAI;YACtG,IACC,kBAAC,KAAD;GAAS;GAAM,WAAW,EAAO;aAC9B;GACC,CAAA,GAEJ;EAEC,CAAA;EAGV,EAMY,IAAQ,OAAO,OAAO,GAAW;CAC5C,MAAM;CACN;CACD,CAAC"}

package/esm/Tiles/Tiles.module-D7UJKhKM.css

@@ -0,0 +1 @@
+.Primer_Brand__Tiles-module__Tiles___RhWBm{width:100%;color:var(--brand-color-text-default)}.Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-columns:2;flex-wrap:wrap;justify-content:center;margin:0;padding:0;list-style:none;display:flex}@media screen and (width>=48rem){.Primer_Brand__Tiles-module__Tiles--layout-default___szHFY .Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-columns:4}}@media screen and (width>=63.25rem){.Primer_Brand__Tiles-module__Tiles--layout-default___szHFY .Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-columns:6}}@media screen and (width>=48rem){.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-columns:4}}@media screen and (width>=63.25rem){.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-columns:8}}.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP{position:relative}.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP:before,.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP:after{content:"";border-top:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);width:100vw;height:0;position:absolute;left:50%;transform:translate(-50%)}.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP:before{top:0}.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP:after{bottom:0}.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP .Primer_Brand__Tiles-module__Tiles-grid___lAoQw{padding-right:var(--brand-borderWidth-thin);padding-bottom:var(--brand-borderWidth-thin);position:relative}.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP .Primer_Brand__Tiles-module__Tiles-grid___lAoQw:before,.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP .Primer_Brand__Tiles-module__Tiles-grid___lAoQw:after{content:"";border-left:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);z-index:1;pointer-events:none;width:0;position:absolute;top:0;bottom:0}.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP .Primer_Brand__Tiles-module__Tiles-grid___lAoQw:before{left:0}.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP .Primer_Brand__Tiles-module__Tiles-grid___lAoQw:after{right:0}.Primer_Brand__Tiles-module__Tiles-item___YlnUj{--tiles-inset-shadow:inset 0 0 0 transparent;width:calc(100% / var(--tiles-columns));box-sizing:border-box;background-color:var(--brand-tiles-bgColor-rest);border-top:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);border-left:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);box-shadow:var(--brand-borderWidth-thin) 0 0 0 var(--brand-color-border-muted), 0 var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-muted), inset 0 0 0 transparent;box-shadow:var(--brand-borderWidth-thin) 0 0 0 var(--brand-color-border-muted), 0 var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-muted), var(--tiles-inset-shadow);transition:background-color var(--brand-animation-duration-faster) var(--brand-animation-easing-default), box-shadow var(--brand-animation-duration-faster) var(--brand-animation-easing-default);flex-direction:column;display:flex;position:relative}:is(.Primer_Brand__Tiles-module__Tiles-item___YlnUj:has(.Primer_Brand__Tiles-module__Tiles-item-link___NcK69):hover,.Primer_Brand__Tiles-module__Tiles-item___YlnUj:has(.Primer_Brand__Tiles-module__Tiles-item-link___NcK69):focus-within){--tiles-inset-shadow:inset 0 var(--base-size-2) 0 var(--brand-tiles-highlightColor);background-color:var(--brand-tiles-bgColor-hover)}.Primer_Brand__Tiles-module__Tiles-item-link___NcK69{width:100%;color:inherit;flex:1;-webkit-text-decoration:none;text-decoration:none;display:flex}.Primer_Brand__Tiles-module__Tiles-item-link___NcK69:focus-visible{outline:var(--base-size-4) solid var(--brand-color-focus);outline-offset:calc(-1 * var(--base-size-4));border-radius:var(--brand-borderRadius-small)}.Primer_Brand__Tiles-module__Tiles-item-content___YIq8M{aspect-ratio:1;justify-content:center;align-items:center;width:100%;display:flex;position:relative}.Primer_Brand__Tiles-module__Tiles-item-media___QH9l2{justify-content:center;align-items:center;display:flex}.Primer_Brand__Tiles-module__Tiles-item-media___QH9l2 svg,.Primer_Brand__Tiles-module__Tiles-item-media___QH9l2 img{width:auto;height:var(--base-size-40);max-width:100%}.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2 svg,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2 img{height:var(--base-size-32)}.Primer_Brand__Tiles-module__Tiles-item-label___L9BIA{justify-content:space-between;align-items:center;gap:var(--base-size-4);padding:var(--base-size-12) var(--base-size-16);display:flex;position:absolute;bottom:0;left:0;right:0}.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2{transition:transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default)}.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-link___NcK69:hover .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-link___NcK69:focus-visible .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2{transform:translateY(calc(-1 * var(--base-size-4)))}.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-label___L9BIA{opacity:0;transform:translateY(var(--base-size-4));transition:opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-default), transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);pointer-events:none}.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-link___NcK69:hover .Primer_Brand__Tiles-module__Tiles-item-label___L9BIA,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-link___NcK69:focus-visible .Primer_Brand__Tiles-module__Tiles-item-label___L9BIA{opacity:1;transform:translateY(0)}.Primer_Brand__Tiles-module__Tiles-item-name___47ZMU{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}.Primer_Brand__Tiles-module__Tiles-item-icon___2Hu6M{color:var(--brand-color-text-default);flex-shrink:0}@media (prefers-reduced-motion:reduce){.Primer_Brand__Tiles-module__Tiles-item___YlnUj,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-label___L9BIA{transition:none}}

package/esm/Tiles/Tiles.module.js

@@ -0,0 +1,18 @@
+import './Tiles.module-D7UJKhKM.css';var e = {
+	Tiles: "Primer_Brand__Tiles-module__Tiles___RhWBm",
+	"Tiles-grid": "Primer_Brand__Tiles-module__Tiles-grid___lAoQw",
+	"Tiles--layout-default": "Primer_Brand__Tiles-module__Tiles--layout-default___szHFY",
+	"Tiles--layout-compact": "Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD",
+	"Tiles--variant-gridlines": "Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP",
+	"Tiles-item": "Primer_Brand__Tiles-module__Tiles-item___YlnUj",
+	"Tiles-item-link": "Primer_Brand__Tiles-module__Tiles-item-link___NcK69",
+	"Tiles-item-content": "Primer_Brand__Tiles-module__Tiles-item-content___YIq8M",
+	"Tiles-item-media": "Primer_Brand__Tiles-module__Tiles-item-media___QH9l2",
+	"Tiles-item-label": "Primer_Brand__Tiles-module__Tiles-item-label___L9BIA",
+	"Tiles-item-name": "Primer_Brand__Tiles-module__Tiles-item-name___47ZMU",
+	"Tiles-item-icon": "Primer_Brand__Tiles-module__Tiles-item-icon___2Hu6M"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=Tiles.module.js.map

package/esm/Tiles/Tiles.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tiles.module.js","names":[],"sources":["../../src/Tiles/Tiles.module.css"],"sourcesContent":[".Tiles {\n  width: 100%;\n  color: var(--brand-color-text-default);\n}\n\n.Tiles-grid {\n  --tiles-columns: 2;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n@media screen and (min-width: 48rem) {\n  .Tiles--layout-default .Tiles-grid {\n    --tiles-columns: 4;\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Tiles--layout-default .Tiles-grid {\n    --tiles-columns: 6;\n  }\n}\n\n@media screen and (min-width: 48rem) {\n  .Tiles--layout-compact .Tiles-grid {\n    --tiles-columns: 4;\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Tiles--layout-compact .Tiles-grid {\n    --tiles-columns: 8;\n  }\n}\n\n.Tiles--variant-gridlines {\n  position: relative;\n}\n\n.Tiles--variant-gridlines::before,\n.Tiles--variant-gridlines::after {\n  content: '';\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 100vw;\n  height: 0;\n  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.Tiles--variant-gridlines::before {\n  top: 0;\n}\n\n.Tiles--variant-gridlines::after {\n  bottom: 0;\n}\n\n.Tiles--variant-gridlines .Tiles-grid {\n  position: relative;\n  padding-right: var(--brand-borderWidth-thin);\n  padding-bottom: var(--brand-borderWidth-thin);\n}\n\n.Tiles--variant-gridlines .Tiles-grid::before,\n.Tiles--variant-gridlines .Tiles-grid::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 0;\n  border-left: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  z-index: 1;\n  pointer-events: none;\n}\n\n.Tiles--variant-gridlines .Tiles-grid::before {\n  left: 0;\n}\n\n.Tiles--variant-gridlines .Tiles-grid::after {\n  right: 0;\n}\n\n.Tiles-item {\n  --tiles-inset-shadow: inset 0 0 0 transparent;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: calc(100% / var(--tiles-columns));\n  box-sizing: border-box;\n  background-color: var(--brand-tiles-bgColor-rest);\n  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  border-left: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  box-shadow: var(--brand-borderWidth-thin) 0 0 0 var(--brand-color-border-muted),\n    0 var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-muted), var(--tiles-inset-shadow);\n  transition: background-color var(--brand-animation-duration-faster) var(--brand-animation-easing-default),\n    box-shadow var(--brand-animation-duration-faster) var(--brand-animation-easing-default);\n}\n\n.Tiles-item:has(.Tiles-item-link):hover,\n.Tiles-item:has(.Tiles-item-link):focus-within {\n  --tiles-inset-shadow: inset 0 var(--base-size-2) 0 var(--brand-tiles-highlightColor);\n  background-color: var(--brand-tiles-bgColor-hover);\n}\n\n.Tiles-item-link {\n  display: flex;\n  width: 100%;\n  flex: 1;\n  text-decoration: none;\n  color: inherit;\n}\n\n.Tiles-item-link:focus-visible {\n  outline: var(--base-size-4) solid var(--brand-color-focus);\n  outline-offset: calc(-1 * var(--base-size-4));\n  border-radius: var(--brand-borderRadius-small);\n}\n\n.Tiles-item-content {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  aspect-ratio: 1;\n}\n\n.Tiles-item-media {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.Tiles-item-media svg,\n.Tiles-item-media img {\n  width: auto;\n  height: var(--base-size-40);\n  max-width: 100%;\n}\n\n.Tiles--layout-compact .Tiles-item-media svg,\n.Tiles--layout-compact .Tiles-item-media img {\n  height: var(--base-size-32);\n}\n\n.Tiles-item-label {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--base-size-4);\n  padding: var(--base-size-12) var(--base-size-16);\n}\n\n.Tiles--layout-compact .Tiles-item-media {\n  transition: transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.Tiles--layout-compact .Tiles-item-link:hover .Tiles-item-media,\n.Tiles--layout-compact .Tiles-item-link:focus-visible .Tiles-item-media {\n  transform: translateY(calc(-1 * var(--base-size-4)));\n}\n\n.Tiles--layout-compact .Tiles-item-label {\n  opacity: 0;\n  transform: translateY(var(--base-size-4));\n  transition: opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-default),\n    transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n  pointer-events: none;\n}\n\n.Tiles--layout-compact .Tiles-item-link:hover .Tiles-item-label,\n.Tiles--layout-compact .Tiles-item-link:focus-visible .Tiles-item-label {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.Tiles-item-name {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n.Tiles-item-icon {\n  flex-shrink: 0;\n  color: var(--brand-color-text-default);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .Tiles-item {\n    transition: none;\n  }\n\n  .Tiles--layout-compact .Tiles-item-media {\n    transition: none;\n  }\n\n  .Tiles--layout-compact .Tiles-item-label {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/esm/Tiles/index.d.ts

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

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

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

package/esm/Timeline/Timeline.d.ts

@@ -0,0 +1,19 @@
+import { PropsWithChildren } from 'react';
+import { BaseProps } from '../component-helpers';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/timeline/colors-with-modes.css';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/timeline/base.css';
+export type TimelineProps = {
+    fullWidth?: boolean;
+} & BaseProps<HTMLUListElement>;
+export type TimelineItemProps = BaseProps<HTMLLIElement>;
+/**
+ * Use Timeline to display a list of connected items as a vertical timeline.
+ * @see https://primer.style/brand/components/Timeline
+ */
+export declare const Timeline: (({ animate, className, children, fullWidth, ...rest }: PropsWithChildren<TimelineProps>) => import("react/jsx-runtime").JSX.Element) & {
+    Item: ({ className, children, ...rest }: PropsWithChildren<TimelineItemProps>) => import("react/jsx-runtime").JSX.Element;
+};
+//# sourceMappingURL=Timeline.d.ts.map

package/esm/Timeline/Timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../src/Timeline/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,iBAAiB,EAAuB,MAAM,OAAO,CAAA;AAGpE,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAI9C;;GAEG;AACH,OAAO,4GAA4G,CAAA;AACnH,OAAO,+FAA+F,CAAA;AAEtG,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAmB/B,MAAM,MAAM,iBAAiB,GAAG,SAAS,CAAC,aAAa,CAAC,CAAA;AAwBxD;;;GAGG;AACH,eAAO,MAAM,QAAQ,0DA7C6D,iBAAiB,CAAC,aAAa,CAAC;6CAmBpE,iBAAiB,CAAC,iBAAiB,CAAC;CA4BhF,CAAA"}

package/esm/Timeline/Timeline.js

@@ -0,0 +1,33 @@
+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 r from "./Timeline.module.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/timeline/colors-with-modes-DDIdeMJX.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/timeline/base-CXOJfjx4.css';/* empty css                                                                                                      */
+/* empty css                                                                                         */
+import i, { useCallback as a, useMemo as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+var c = Object.assign(({ animate: n, className: i, children: a, fullWidth: o = !1, ...c }) => {
+	let { classes: l, styles: u } = t(n);
+	return /* @__PURE__ */ s("ul", {
+		className: e(l, r.Timeline, o && r["Timeline--full-width"], i),
+		style: { ...u },
+		...c,
+		children: a
+	});
+}, { Item: ({ className: t, children: c, ...l }) => {
+	let u = e(r.Timeline__item, t), d = o(() => i.Children.toArray(c), [c]), f = a(() => d.some((e) => i.isValidElement(e) && (e.type === "b" || e.type === "em")) ? "muted" : "default", [d]), p = d.length === 1 ? "default" : f();
+	return /* @__PURE__ */ s("li", {
+		className: u,
+		...l,
+		children: /* @__PURE__ */ s(n, {
+			className: r["Timeline__item-text"],
+			size: "200",
+			variant: p,
+			children: c
+		})
+	});
+} });
+//#endregion
+export { c as Timeline };
+
+//# sourceMappingURL=Timeline.js.map

package/esm/Timeline/Timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.js","names":[],"sources":["../../src/Timeline/Timeline.tsx"],"sourcesContent":["import React, {PropsWithChildren, useMemo, useCallback} from 'react'\nimport {clsx} from 'clsx'\nimport styles from './Timeline.module.css'\nimport {BaseProps} from '../component-helpers'\nimport {useAnimation} from '../animation'\nimport {Text} from '../Text'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/timeline/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/timeline/base.css'\n\nexport type TimelineProps = {\n  fullWidth?: boolean\n} & BaseProps<HTMLUListElement>\n\nconst TimelineBase = ({animate, className, children, fullWidth = false, ...rest}: PropsWithChildren<TimelineProps>) => {\n  const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n  const timelineClassName = clsx(\n    animationClasses,\n    styles.Timeline,\n    fullWidth && styles['Timeline--full-width'],\n    className,\n  )\n\n  return (\n    <ul className={timelineClassName} style={{...animationInlineStyles}} {...rest}>\n      {children}\n    </ul>\n  )\n}\n\nexport type TimelineItemProps = BaseProps<HTMLLIElement>\n\nconst Item = ({className, children, ...rest}: PropsWithChildren<TimelineItemProps>) => {\n  const itemClassName = clsx(styles['Timeline__item'], className)\n  const childrenArray = useMemo(() => React.Children.toArray(children), [children])\n\n  const getConditionalVariant = useCallback(() => {\n    if (childrenArray.some(child => React.isValidElement(child) && (child.type === 'b' || child.type === 'em'))) {\n      return 'muted'\n    }\n    return 'default'\n  }, [childrenArray])\n\n  const defaultColor = childrenArray.length === 1 ? 'default' : getConditionalVariant()\n\n  return (\n    <li className={itemClassName} {...rest}>\n      <Text className={styles['Timeline__item-text']} size=\"200\" variant={defaultColor}>\n        {children}\n      </Text>\n    </li>\n  )\n}\n\n/**\n * Use Timeline to display a list of connected items as a vertical timeline.\n * @see https://primer.style/brand/components/Timeline\n */\nexport const Timeline = Object.assign(TimelineBase, {\n  Item,\n})\n"],"mappings":";;;;;;;;AA8DA,IAAa,IAAW,OAAO,QA7CT,EAAC,YAAS,cAAW,aAAU,eAAY,IAAO,GAAG,QAA4C;CACrH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ;AASxF,QACE,kBAAC,MAAD;EAAI,WARoB,EACxB,GACA,EAAO,UACP,KAAa,EAAO,yBACpB,EAIe;EAAmB,OAAO,EAAC,GAAG,GAAsB;EAAE,GAAI;EACtE;EACE,CAAA;GAgC2C,EAClD,OA3BY,EAAC,cAAW,aAAU,GAAG,QAAgD;CACrF,IAAM,IAAgB,EAAK,EAAO,gBAAmB,EAAU,EACzD,IAAgB,QAAc,EAAM,SAAS,QAAQ,EAAS,EAAE,CAAC,EAAS,CAAC,EAE3E,IAAwB,QACxB,EAAc,MAAK,MAAS,EAAM,eAAe,EAAM,KAAK,EAAM,SAAS,OAAO,EAAM,SAAS,MAAM,GAClG,UAEF,WACN,CAAC,EAAc,CAAC,EAEb,IAAe,EAAc,WAAW,IAAI,YAAY,GAAuB;AAErF,QACE,kBAAC,MAAD;EAAI,WAAW;EAAe,GAAI;YAChC,kBAAC,GAAD;GAAM,WAAW,EAAO;GAAwB,MAAK;GAAM,SAAS;GACjE;GACI,CAAA;EACJ,CAAA;GAUR,CAAC"}

package/esm/Timeline/Timeline.module-CQrQaD-z.css

@@ -0,0 +1 @@
+.Primer_Brand__Timeline-module__Timeline___BK9r7{--bulletY:calc(var(--base-size-8) / 2 - var(--brand-Timeline-bullet-size) / 2 + var(--base-size-8));margin:0;padding:0;list-style:none}.Primer_Brand__Timeline-module__Timeline__item___1RcCO{max-width:var(--brand-Timeline-lineLength);color:var(--brand-color-text-default);line-height:var(--brand-Timeline-lineHeight);padding-inline-start:calc(var(--brand-Timeline-bullet-size) + var(--brand-Timeline-spacing));position:relative}.Primer_Brand__Timeline-module__Timeline--full-width___ezRqP .Primer_Brand__Timeline-module__Timeline__item___1RcCO{max-width:none}.Primer_Brand__Timeline-module__Timeline__item___1RcCO:not(:last-child){padding-bottom:var(--base-size-32)}.Primer_Brand__Timeline-module__Timeline__item___1RcCO:before,.Primer_Brand__Timeline-module__Timeline__item___1RcCO:after{content:"";position:absolute}.Primer_Brand__Timeline-module__Timeline__item___1RcCO:before{width:var(--brand-Timeline-bullet-size);height:var(--brand-Timeline-bullet-size);top:var(--bulletY);border-style:solid;border-width:var(--brand-Timeline-strokeWidth);border-color:var(--brand-Timeline-line-color);border-radius:var(--brand-borderRadius-full);left:0}.Primer_Brand__Timeline-module__Timeline__item___1RcCO:not(:last-child):after{top:calc(var(--bulletY) + var(--brand-Timeline-bullet-size) + var(--brand-Timeline-bullet-spacing));left:calc(var(--brand-Timeline-bullet-size) / 2 - var(--brand-Timeline-strokeWidth) / 2);width:var(--brand-Timeline-strokeWidth);height:calc(100% - var(--brand-Timeline-bullet-size) - var(--brand-Timeline-bullet-spacing) * 2);background-color:var(--brand-Timeline-line-color);border-radius:var(--brand-borderRadius-full)}.Primer_Brand__Timeline-module__Timeline__item-text___5BcIe em,.Primer_Brand__Timeline-module__Timeline__item-text___5BcIe b{color:var(--brand-color-text-default);font-style:normal;font-weight:var(--base-text-weight-medium)}.Primer_Brand__Timeline-module__Timeline__item___1RcCO a{color:var(--brand-InlineLink-color-rest);-webkit-text-decoration:underline;text-decoration:underline;-webkit-text-decoration-color:var(--brand-InlineLink-color-rest);text-decoration-color:var(--brand-InlineLink-color-rest);text-decoration-thickness:var(--brand-borderWidth-thin);text-underline-position:under;transition:var(--brand-InlineLink-transition-timing) text-decoration;position:relative}.Primer_Brand__Timeline-module__Timeline__item___1RcCO a:hover{text-decoration-thickness:var(--brand-borderWidth-thick)}.Primer_Brand__Timeline-module__Timeline__item___1RcCO a{font-weight:inherit;color:var(--brand-InlineLink-color-rest)}.Primer_Brand__Timeline-module__Timeline__item___1RcCO a:active{color:var(--brand-InlineLink-color-pressed)}.Primer_Brand__Timeline-module__Timeline__item___1RcCO a: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__Timeline-module__Timeline__item___1RcCO,.Primer_Brand__Timeline-module__Timeline__item___1RcCO:before,.Primer_Brand__Timeline-module__Timeline__item___1RcCO:after,.Primer_Brand__Timeline-module__Timeline__item___1RcCO *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

package/esm/Timeline/Timeline.module.js

@@ -0,0 +1,10 @@
+import './Timeline.module-CQrQaD-z.css';var e = {
+	Timeline: "Primer_Brand__Timeline-module__Timeline___BK9r7",
+	Timeline__item: "Primer_Brand__Timeline-module__Timeline__item___1RcCO",
+	"Timeline--full-width": "Primer_Brand__Timeline-module__Timeline--full-width___ezRqP",
+	"Timeline__item-text": "Primer_Brand__Timeline-module__Timeline__item-text___5BcIe"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=Timeline.module.js.map

package/esm/Timeline/Timeline.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.module.js","names":[],"sources":["../../src/Timeline/Timeline.module.css"],"sourcesContent":[".Timeline {\n  --bulletY: calc(var(--base-size-8) / 2 - var(--brand-Timeline-bullet-size) / 2 + var(--base-size-8));\n\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.Timeline__item {\n  position: relative;\n  max-width: var(--brand-Timeline-lineLength);\n  padding-inline-start: calc(var(--brand-Timeline-bullet-size) + var(--brand-Timeline-spacing));\n  color: var(--brand-color-text-default);\n  line-height: var(--brand-Timeline-lineHeight);\n}\n\n.Timeline--full-width .Timeline__item {\n  max-width: none;\n}\n\n.Timeline__item:not(:last-child) {\n  padding-bottom: var(--base-size-32);\n}\n\n.Timeline__item::before,\n.Timeline__item::after {\n  content: '';\n  position: absolute;\n}\n\n.Timeline__item::before {\n  width: var(--brand-Timeline-bullet-size);\n  height: var(--brand-Timeline-bullet-size);\n  top: var(--bulletY);\n  left: 0;\n  border-style: solid;\n  border-width: var(--brand-Timeline-strokeWidth);\n  border-color: var(--brand-Timeline-line-color);\n  border-radius: var(--brand-borderRadius-full);\n}\n\n.Timeline__item:not(:last-child)::after {\n  top: calc(var(--bulletY) + var(--brand-Timeline-bullet-size) + var(--brand-Timeline-bullet-spacing));\n  left: calc(var(--brand-Timeline-bullet-size) / 2 - var(--brand-Timeline-strokeWidth) / 2);\n  width: var(--brand-Timeline-strokeWidth);\n  height: calc(100% - var(--brand-Timeline-bullet-size) - var(--brand-Timeline-bullet-spacing) * 2);\n  background-color: var(--brand-Timeline-line-color);\n  border-radius: var(--brand-borderRadius-full);\n}\n\n.Timeline__item-text em,\n.Timeline__item-text b {\n  color: var(--brand-color-text-default);\n  font-style: normal;\n  font-weight: var(--base-text-weight-medium);\n}\n\n.Timeline__item a {\n  color: var(--brand-InlineLink-color-rest);\n  position: relative;\n  text-decoration: underline;\n  text-decoration-color: var(--brand-InlineLink-color-rest);\n  text-decoration-thickness: var(--brand-borderWidth-thin);\n  text-underline-position: under;\n  transition: var(--brand-InlineLink-transition-timing) text-decoration;\n}\n\n.Timeline__item a:hover {\n  text-decoration-thickness: var(--brand-borderWidth-thick);\n}\n\n.Timeline__item a {\n  font-weight: inherit;\n  color: var(--brand-InlineLink-color-rest);\n}\n\n.Timeline__item a:active {\n  color: var(--brand-InlineLink-color-pressed);\n}\n\n.Timeline__item a:focus-visible {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-2);\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .Timeline__item,\n  .Timeline__item::before,\n  .Timeline__item::after,\n  .Timeline__item * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}

package/esm/Timeline/index.d.ts

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

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

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

package/esm/Token/Token.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import type { BaseProps } from '../component-helpers';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/token/colors-with-modes.css';
+export declare const TokenVariants: readonly ["default", "accent", "outline", "invisible"];
+export declare const defaultTokenVariant: "default";
+type TokenLeadingVisual = React.ReactElement | React.ComponentType<{
+    className?: string;
+}>;
+type TokenSharedProps = {
+    /**
+     * The leading visual appears before the Token content.
+     * Pass an element to supply custom props, or a component type that accepts an optional className.
+     */
+    leadingVisual?: TokenLeadingVisual;
+    /**
+     * The variant variations available in Token.
+     */
+    variant?: (typeof TokenVariants)[number];
+    /**
+     * The HTML element rendered by Token.
+     */
+    as?: 'span' | 'a';
+    ['data-testid']?: string;
+};
+type TokenSpanProps = BaseProps<HTMLSpanElement> & TokenSharedProps & {
+    as?: 'span';
+} & React.ComponentPropsWithoutRef<'span'>;
+type TokenAnchorProps = BaseProps<HTMLAnchorElement> & TokenSharedProps & {
+    as: 'a';
+    href: string;
+} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>;
+export type TokenProps = TokenSpanProps | TokenAnchorProps;
+/**
+ * Use a Token to group short metadata or categories, with optional leading visuals.
+ * @see https://primer.style/brand
+ */
+export declare const Token: React.ForwardRefExoticComponent<(Omit<TokenSpanProps, "ref"> | Omit<TokenAnchorProps, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLSpanElement>> & {
+    testIds: {
+        root: string;
+        readonly leadingVisual: string;
+    };
+};
+export {};
+//# sourceMappingURL=Token.d.ts.map

package/esm/Token/Token.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Token.d.ts","sourceRoot":"","sources":["../../src/Token/Token.tsx"],"names":[],"mappings":"AACA,OAAO,KAA6B,MAAM,OAAO,CAAA;AAIjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD;;GAEG;AACH,OAAO,yGAAyG,CAAA;AAIhH,eAAO,MAAM,aAAa,wDAAyD,CAAA;AAEnF,eAAO,MAAM,mBAAmB,WAAmB,CAAA;AAEnD,KAAK,kBAAkB,GAAG,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,aAAa,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAC,CAAC,CAAA;AAExF,KAAK,gBAAgB,GAAG;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAA;IAClC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAA;IACxC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,CAAA;IACjB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,KAAK,cAAc,GAAG,SAAS,CAAC,eAAe,CAAC,GAC9C,gBAAgB,GAAG;IACjB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,GAAG,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,CAAA;AAE5C,KAAK,gBAAgB,GAAG,SAAS,CAAC,iBAAiB,CAAC,GAClD,gBAAgB,GAAG;IACjB,EAAE,EAAE,GAAG,CAAA;IACP,IAAI,EAAE,MAAM,CAAA;CACb,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,CAAA;AAEjE,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,gBAAgB,CAAA;AAmF1D;;;GAGG;AACH,eAAO,MAAM,KAAK;;;;;CAAmC,CAAA"}

package/esm/Token/Token.js

@@ -0,0 +1,47 @@
+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 '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/token/colors-with-modes-5VT1x9eF.css';/* empty css                                                                                                   */
+import r from "./Token.module.js";
+import i, { forwardRef as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/Token/Token.tsx
+var l = [
+	"default",
+	"accent",
+	"outline",
+	"invisible"
+], u = l[0], d = {
+	root: "Token",
+	get leadingVisual() {
+		return `${this.root}-leading-visual`;
+	}
+}, f = a(({ animate: a, variant: l = u, as: f = "span", children: p, className: m, "data-testid": h, leadingVisual: g, style: _, ...v }, y) => {
+	let { classes: b, styles: x } = t(a), S = e(b, r.Token, g && r["Token--hasLeadingVisual"], f === "a" && r["Token--interactive"], r[`Token--variant-${l}`], m), C = /* @__PURE__ */ c(o, { children: [g && /* @__PURE__ */ s("span", {
+		className: r["Token__leading-visual"],
+		"data-testid": d.leadingVisual,
+		"aria-hidden": "true",
+		children: typeof g == "function" ? /* @__PURE__ */ s(g, { className: r.Token__visual }) : i.isValidElement(g) && i.cloneElement(g, { className: e(r.Token__visual, g.props.className) })
+	}), /* @__PURE__ */ s(n, {
+		as: "span",
+		size: "100",
+		font: "monospace",
+		className: r.Token__label,
+		children: p
+	})] });
+	return s(f === "a" ? "a" : "span", {
+		ref: y,
+		className: S,
+		"data-testid": h || d.root,
+		style: {
+			...x,
+			..._
+		},
+		...v,
+		children: C
+	});
+}), p = Object.assign(f, { testIds: d });
+//#endregion
+export { p as Token, l as TokenVariants, u as defaultTokenVariant };
+
+//# sourceMappingURL=Token.js.map

package/esm/Token/Token.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Token.js","names":[],"sources":["../../src/Token/Token.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, type Ref} from 'react'\n\nimport {Text} from '../Text'\nimport {useAnimation} from '../animation'\nimport type {BaseProps} from '../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/token/colors-with-modes.css'\n\nimport styles from './Token.module.css'\n\nexport const TokenVariants = ['default', 'accent', 'outline', 'invisible'] as const\n\nexport const defaultTokenVariant = TokenVariants[0]\n\ntype TokenLeadingVisual = React.ReactElement | React.ComponentType<{className?: string}>\n\ntype TokenSharedProps = {\n  /**\n   * The leading visual appears before the Token content.\n   * Pass an element to supply custom props, or a component type that accepts an optional className.\n   */\n  leadingVisual?: TokenLeadingVisual\n  /**\n   * The variant variations available in Token.\n   */\n  variant?: (typeof TokenVariants)[number]\n  /**\n   * The HTML element rendered by Token.\n   */\n  as?: 'span' | 'a'\n  ['data-testid']?: string\n}\n\ntype TokenSpanProps = BaseProps<HTMLSpanElement> &\n  TokenSharedProps & {\n    as?: 'span'\n  } & React.ComponentPropsWithoutRef<'span'>\n\ntype TokenAnchorProps = BaseProps<HTMLAnchorElement> &\n  TokenSharedProps & {\n    as: 'a'\n    href: string\n  } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>\n\nexport type TokenProps = TokenSpanProps | TokenAnchorProps\n\nconst testIds = {\n  root: 'Token',\n  get leadingVisual() {\n    return `${this.root}-leading-visual`\n  },\n}\n\nconst _Token = forwardRef<HTMLSpanElement | HTMLAnchorElement, TokenProps>(\n  (\n    {\n      animate,\n      variant = defaultTokenVariant,\n      as = 'span',\n      children,\n      className,\n      'data-testid': testId,\n      leadingVisual: LeadingVisual,\n      style,\n      ...props\n    },\n    ref: Ref<HTMLSpanElement | HTMLAnchorElement>,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const tokenClassName = clsx(\n      animationClasses,\n      styles.Token,\n      LeadingVisual && styles['Token--hasLeadingVisual'],\n      as === 'a' && styles['Token--interactive'],\n      styles[`Token--variant-${variant}`],\n      className,\n    )\n\n    const tokenChildren = (\n      <>\n        {LeadingVisual && (\n          <span className={styles['Token__leading-visual']} data-testid={testIds.leadingVisual} aria-hidden=\"true\">\n            {typeof LeadingVisual === 'function' ? (\n              <LeadingVisual className={styles['Token__visual']} />\n            ) : (\n              React.isValidElement<{className?: string}>(LeadingVisual) &&\n              React.cloneElement(LeadingVisual, {\n                className: clsx(styles['Token__visual'], LeadingVisual.props.className),\n              })\n            )}\n          </span>\n        )}\n        <Text as=\"span\" size=\"100\" font=\"monospace\" className={styles['Token__label']}>\n          {children}\n        </Text>\n      </>\n    )\n\n    if (as === 'a') {\n      return (\n        <a\n          ref={ref as Ref<HTMLAnchorElement>}\n          className={tokenClassName}\n          data-testid={testId || testIds.root}\n          style={{...animationInlineStyles, ...style}}\n          {...props}\n        >\n          {tokenChildren}\n        </a>\n      )\n    }\n\n    return (\n      <span\n        ref={ref as Ref<HTMLSpanElement>}\n        className={tokenClassName}\n        data-testid={testId || testIds.root}\n        style={{...animationInlineStyles, ...style}}\n        {...props}\n      >\n        {tokenChildren}\n      </span>\n    )\n  },\n)\n\n/**\n * Use a Token to group short metadata or categories, with optional leading visuals.\n * @see https://primer.style/brand\n */\nexport const Token = Object.assign(_Token, {testIds})\n"],"mappings":";;;;;;;;AAcA,IAAa,IAAgB;CAAC;CAAW;CAAU;CAAW;CAAY,EAE7D,IAAsB,EAAc,IAkC3C,IAAU;CACd,MAAM;CACN,IAAI,gBAAgB;AAClB,SAAO,GAAG,KAAK,KAAK;;CAEvB,EAEK,IAAS,GAEX,EACE,YACA,aAAU,GACV,QAAK,QACL,aACA,cACA,eAAe,GACf,eAAe,GACf,UACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAiB,EACrB,GACA,EAAO,OACP,KAAiB,EAAO,4BACxB,MAAO,OAAO,EAAO,uBACrB,EAAO,kBAAkB,MACzB,EACD,EAEK,IACJ,kBAAA,GAAA,EAAA,UAAA,CACG,KACC,kBAAC,QAAD;EAAM,WAAW,EAAO;EAA0B,eAAa,EAAQ;EAAe,eAAY;YAC/F,OAAO,KAAkB,aACxB,kBAAC,GAAD,EAAe,WAAW,EAAO,eAAoB,CAAA,GAErD,EAAM,eAAqC,EAAc,IACzD,EAAM,aAAa,GAAe,EAChC,WAAW,EAAK,EAAO,eAAkB,EAAc,MAAM,UAAU,EACxE,CAAC;EAEC,CAAA,EAET,kBAAC,GAAD;EAAM,IAAG;EAAO,MAAK;EAAM,MAAK;EAAY,WAAW,EAAO;EAC3D;EACI,CAAA,CACN,EAAA,CAAA;AAiBL,QAZI,EAFA,MAAO,MAEN,MAaF,QAbC;EACO;EACL,WAAW;EACX,eAAa,KAAU,EAAQ;EAC/B,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,GAAI;YAEH;EACC,CAAA;EAgBX,EAMY,IAAQ,OAAO,OAAO,GAAQ,EAAC,YAAQ,CAAC"}

package/esm/Token/Token.module-BcKU1KwK.css

@@ -0,0 +1 @@
+.Primer_Brand__Token-module__Token___nJxhW{border:var(--brand-borderWidth-thin) solid transparent;border-radius:var(--brand-borderRadius-small);align-items:center;gap:var(--base-size-8);min-width:0;max-width:100%;padding-inline:var(--base-size-8);padding-block:var(--base-size-6);vertical-align:middle;padding-block-end:var(--base-size-6);display:inline-flex}.Primer_Brand__Token-module__Token--hasLeadingVisual___Erv8L{padding-inline:calc((var(--base-size-4) + var(--base-size-8)) / 2);padding-block:calc((var(--base-size-4) + var(--base-size-8)) / 2)}.Primer_Brand__Token-module__Token--interactive___ZpgTX{cursor:pointer;-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__Token-module__Token--interactive___ZpgTX:focus-visible{outline:var(--base-size-4) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}[data-color-mode=dark] .Primer_Brand__Token-module__Token___nJxhW{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:auto}.Primer_Brand__Token-module__Token--variant-default___eMkcM{background-color:var(--brand-Token-bgColor-default);color:var(--brand-Token-fgColor-default)}.Primer_Brand__Token-module__Token--interactive___ZpgTX.Primer_Brand__Token-module__Token--variant-default___eMkcM:hover{background-color:var(--brand-Token-bgColor-hover-default)}.Primer_Brand__Token-module__Token--variant-accent___fSxf7{background-color:var(--brand-Token-bgColor-accent);color:var(--brand-Token-fgColor-accent)}.Primer_Brand__Token-module__Token--interactive___ZpgTX.Primer_Brand__Token-module__Token--variant-accent___fSxf7:hover{background-color:var(--brand-Token-bgColor-hover-accent)}.Primer_Brand__Token-module__Token--variant-outline___GTmIy{background-color:var(--brand-Token-bgColor-outline);border-color:var(--brand-Token-border-outline);color:var(--brand-Token-fgColor-outline)}.Primer_Brand__Token-module__Token--interactive___ZpgTX.Primer_Brand__Token-module__Token--variant-outline___GTmIy:hover{background-color:var(--brand-Token-bgColor-hover-outline)}.Primer_Brand__Token-module__Token--variant-invisible___IR7Ki{color:var(--brand-Token-fgColor-invisible);background-color:#0000}.Primer_Brand__Token-module__Token--interactive___ZpgTX.Primer_Brand__Token-module__Token--variant-invisible___IR7Ki:hover{background-color:var(--brand-Token-bgColor-hover-invisible)}.Primer_Brand__Token-module__Token__label___e3Cx3{text-overflow:ellipsis;text-transform:uppercase;min-width:0;font-weight:var(--base-text-weight-normal);white-space:nowrap;letter-spacing:var(--brand-text-letterSpacing-100);flex:auto;line-height:.85;display:block;overflow:hidden}.Primer_Brand__Token-module__Token___nJxhW>.Primer_Brand__Token-module__Token__label___e3Cx3{color:inherit}.Primer_Brand__Token-module__Token__leading-visual____uvYs{width:calc((var(--base-size-16) + var(--base-size-20)) / 2);height:calc((var(--base-size-16) + var(--base-size-20)) / 2);flex-shrink:0;justify-content:center;align-items:center;display:flex}.Primer_Brand__Token-module__Token__visual___Nlxfv{display:block}.Primer_Brand__Token-module__Token__leading-visual____uvYs>.Primer_Brand__Token-module__Token__visual___Nlxfv{width:calc((var(--base-size-16) + var(--base-size-20)) / 2);height:calc((var(--base-size-16) + var(--base-size-20)) / 2);max-width:calc((var(--base-size-16) + var(--base-size-20)) / 2);max-height:calc((var(--base-size-16) + var(--base-size-20)) / 2);border-radius:2px}.Primer_Brand__Token-module__Token__leading-visual____uvYs>.Primer_Brand__Token-module__Token__visual___Nlxfv svg,.Primer_Brand__Token-module__Token__leading-visual____uvYs>.Primer_Brand__Token-module__Token__visual___Nlxfv img{width:100%;height:100%}@media (forced-colors:active){.Primer_Brand__Token-module__Token___nJxhW{outline:var(--brand-borderWidth-thin) solid transparent}.Primer_Brand__Token-module__Token--interactive___ZpgTX:focus-visible{outline-color:highlight}}

package/esm/Token/Token.module.js

@@ -0,0 +1,16 @@
+import './Token.module-BcKU1KwK.css';var e = {
+	Token: "Primer_Brand__Token-module__Token___nJxhW",
+	"Token--hasLeadingVisual": "Primer_Brand__Token-module__Token--hasLeadingVisual___Erv8L",
+	"Token--interactive": "Primer_Brand__Token-module__Token--interactive___ZpgTX",
+	"Token--variant-default": "Primer_Brand__Token-module__Token--variant-default___eMkcM",
+	"Token--variant-accent": "Primer_Brand__Token-module__Token--variant-accent___fSxf7",
+	"Token--variant-outline": "Primer_Brand__Token-module__Token--variant-outline___GTmIy",
+	"Token--variant-invisible": "Primer_Brand__Token-module__Token--variant-invisible___IR7Ki",
+	Token__label: "Primer_Brand__Token-module__Token__label___e3Cx3",
+	"Token__leading-visual": "Primer_Brand__Token-module__Token__leading-visual____uvYs",
+	Token__visual: "Primer_Brand__Token-module__Token__visual___Nlxfv"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=Token.module.js.map

package/esm/Token/Token.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Token.module.js","names":[],"sources":["../../src/Token/Token.module.css"],"sourcesContent":[".Token {\n  align-items: center;\n  border: var(--brand-borderWidth-thin) solid transparent;\n  border-radius: var(--brand-borderRadius-small);\n  display: inline-flex;\n  gap: var(--base-size-8);\n  min-width: 0;\n  max-width: 100%;\n  padding-inline: var(--base-size-8);\n  padding-block: var(--base-size-6);\n  padding-block-end: var(--base-size-6);\n  vertical-align: middle;\n}\n\n.Token--hasLeadingVisual {\n  padding-inline: calc((var(--base-size-4) + var(--base-size-8)) / 2);\n  padding-block: calc((var(--base-size-4) + var(--base-size-8)) / 2);\n}\n\n.Token--interactive {\n  cursor: pointer;\n  text-decoration: none;\n}\n\n.Token--interactive:focus-visible {\n  outline: var(--base-size-4) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-2);\n}\n\n[data-color-mode='dark'] .Token {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: auto;\n}\n\n.Token--variant-default {\n  background-color: var(--brand-Token-bgColor-default);\n  color: var(--brand-Token-fgColor-default);\n}\n\n.Token--interactive.Token--variant-default:hover {\n  background-color: var(--brand-Token-bgColor-hover-default);\n}\n\n.Token--variant-accent {\n  background-color: var(--brand-Token-bgColor-accent);\n  color: var(--brand-Token-fgColor-accent);\n}\n\n.Token--interactive.Token--variant-accent:hover {\n  background-color: var(--brand-Token-bgColor-hover-accent);\n}\n\n.Token--variant-outline {\n  background-color: var(--brand-Token-bgColor-outline);\n  border-color: var(--brand-Token-border-outline);\n  color: var(--brand-Token-fgColor-outline);\n}\n\n.Token--interactive.Token--variant-outline:hover {\n  background-color: var(--brand-Token-bgColor-hover-outline);\n}\n\n.Token--variant-invisible {\n  background-color: transparent;\n  color: var(--brand-Token-fgColor-invisible);\n}\n\n.Token--interactive.Token--variant-invisible:hover {\n  background-color: var(--brand-Token-bgColor-hover-invisible);\n}\n\n.Token__label {\n  display: block;\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-transform: uppercase;\n  font-weight: var(--base-text-weight-normal);\n  line-height: 0.85;\n  white-space: nowrap;\n  letter-spacing: var(--brand-text-letterSpacing-100);\n}\n\n.Token > .Token__label {\n  color: inherit;\n}\n\n.Token__leading-visual {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: calc((var(--base-size-16) + var(--base-size-20)) / 2);\n  height: calc((var(--base-size-16) + var(--base-size-20)) / 2);\n}\n\n.Token__visual {\n  display: block;\n}\n\n/* Keep leading visuals inside a fixed 18x18 slot so larger children like Avatar dont increase Token height. */\n.Token__leading-visual > .Token__visual {\n  width: calc((var(--base-size-16) + var(--base-size-20)) / 2);\n  height: calc((var(--base-size-16) + var(--base-size-20)) / 2);\n  max-width: calc((var(--base-size-16) + var(--base-size-20)) / 2);\n  max-height: calc((var(--base-size-16) + var(--base-size-20)) / 2);\n  border-radius: 2px;\n}\n\n.Token__leading-visual > .Token__visual svg,\n.Token__leading-visual > .Token__visual img {\n  width: 100%;\n  height: 100%;\n}\n\n@media (forced-colors: active) {\n  .Token {\n    outline: var(--brand-borderWidth-thin) solid transparent;\n  }\n\n  .Token--interactive:focus-visible {\n    outline-color: Highlight;\n  }\n}\n"],"mappings":""}

package/esm/Token/index.d.ts

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

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

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

package/esm/Tooltip/Tooltip.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tooltip/colors-with-modes.css';
+import { BaseProps } from '../component-helpers';
+type TooltipDirection = 'n' | 'e' | 's' | 'w';
+export type TooltipProps = {
+    direction?: TooltipDirection;
+    text: string;
+    type?: 'label' | 'description';
+    children?: React.ReactNode;
+} & BaseProps<HTMLDivElement>;
+export type TriggerPropsType = {
+    'aria-describedby'?: string;
+    'aria-labelledby'?: string;
+    'aria-label'?: string;
+    onBlur?: React.FocusEventHandler;
+    onFocus?: React.FocusEventHandler;
+    onMouseEnter?: React.MouseEventHandler;
+    onMouseLeave?: React.MouseEventHandler;
+    ref?: React.RefObject<HTMLElement | null>;
+};
+export declare const TooltipContext: React.Context<{
+    tooltipId?: string;
+}>;
+export declare const Tooltip: React.ForwardRefExoticComponent<Omit<TooltipProps, "ref"> & React.RefAttributes<unknown>>;
+export {};
+//# sourceMappingURL=Tooltip.d.ts.map