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

package/esm/hooks/useRef.js

@@ -0,0 +1,26 @@
+import { useMemo as e, useRef as t } from "react";
+//#region src/hooks/useRef.ts
+function n(n) {
+	let r = t(null), i = t(null);
+	return e(() => {
+		if (typeof n == "function") {
+			if (!i.current) {
+				let e = null;
+				i.current = {
+					get current() {
+						return e;
+					},
+					set current(t) {
+						e = t, n(t);
+					}
+				};
+			}
+			return i.current;
+		}
+		return i.current = null, n && typeof n == "object" && n.current !== void 0 ? n : r;
+	}, [n, r]);
+}
+//#endregion
+export { n as useProvidedRefOrCreate };
+
+//# sourceMappingURL=useRef.js.map

package/esm/hooks/useRef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRef.js","names":[],"sources":["../../src/hooks/useRef.ts"],"sourcesContent":["import React, {useRef, useMemo} from 'react'\n\n/**\n * There are some situations where we only want to create a new ref if one is not provided to a component\n * or hook as a prop. However, due to the `rules-of-hooks`, we cannot conditionally make a call to `React.useRef`\n * only in the situations where the ref is not provided as a prop.\n * This hook aims to encapsulate that logic, so the consumer doesn't need to be concerned with violating `rules-of-hooks`.\n * @param providedRef The ref to use - can be a RefObject, RefCallback (functional ref), null or undefined.\n * @type TRef The type of the RefObject which should be created.\n * @returns A RefObject that either uses the provided ref, wraps a functional ref, or creates a new one\n */\nexport function useProvidedRefOrCreate<TRef>(\n  providedRef?: React.RefObject<TRef> | React.RefCallback<TRef> | null,\n): React.RefObject<TRef> {\n  const createdRef = useRef<TRef | null>(null)\n  const wrapperRef = useRef<React.MutableRefObject<TRef | null> | null>(null)\n\n  const finalRef = useMemo(() => {\n    // Handle function refs\n    // We wrap it in a MutableRefObject to ensure we can set the current value\n    // and also call the callback with the latest value\n    if (typeof providedRef === 'function') {\n      if (!wrapperRef.current) {\n        let currentVal: TRef | null = null\n\n        wrapperRef.current = {\n          get current() {\n            return currentVal\n          },\n          set current(value: TRef | null) {\n            currentVal = value\n\n            providedRef(value)\n          },\n        }\n      }\n      return wrapperRef.current\n    }\n\n    wrapperRef.current = null\n\n    // Return the provided ref if it's a RefObject\n    if (providedRef && typeof providedRef === 'object' && providedRef.current !== undefined) {\n      return providedRef\n    }\n\n    // Return a new ref if it's neither a function nor a RefObject\n    return createdRef\n  }, [providedRef, createdRef])\n\n  return finalRef as React.RefObject<TRef>\n}\n"],"mappings":";;AAWA,SAAgB,EACd,GACuB;CACvB,IAAM,IAAa,EAAoB,KAAK,EACtC,IAAa,EAAmD,KAAK;AAmC3E,QAjCiB,QAAc;AAI7B,MAAI,OAAO,KAAgB,YAAY;AACrC,OAAI,CAAC,EAAW,SAAS;IACvB,IAAI,IAA0B;AAE9B,MAAW,UAAU;KACnB,IAAI,UAAU;AACZ,aAAO;;KAET,IAAI,QAAQ,GAAoB;AAG9B,MAFA,IAAa,GAEb,EAAY,EAAM;;KAErB;;AAEH,UAAO,EAAW;;AAWpB,SARA,EAAW,UAAU,MAGjB,KAAe,OAAO,KAAgB,YAAY,EAAY,YAAY,KAAA,IACrE,IAIF;IACN,CAAC,GAAa,EAAW,CAErB"}

package/esm/hooks/useResizeObserver.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+export type ResizeObserverCallback = (entries: ResizeObserverEntry[]) => void;
+export interface ResizeObserverEntry {
+    contentRect: DOMRectReadOnly;
+}
+export declare function useResizeObserver<T extends HTMLElement>(callback: ResizeObserverCallback, target?: RefObject<T | null>): void;
+//# sourceMappingURL=useResizeObserver.d.ts.map

package/esm/hooks/useResizeObserver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizeObserver.d.ts","sourceRoot":"","sources":["../../src/hooks/useResizeObserver.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAoB,MAAM,OAAO,CAAA;AAElD,MAAM,MAAM,sBAAsB,GAAG,CAAC,OAAO,EAAE,mBAAmB,EAAE,KAAK,IAAI,CAAA;AAE7E,MAAM,WAAW,mBAAmB;IAClC,WAAW,EAAE,eAAe,CAAA;CAC7B;AAED,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,WAAW,EACrD,QAAQ,EAAE,sBAAsB,EAChC,MAAM,CAAC,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,QAwB7B"}

package/esm/hooks/useResizeObserver.js

@@ -0,0 +1,21 @@
+import { useEffect as e, useRef as t } from "react";
+//#region src/hooks/useResizeObserver.ts
+function n(n, r) {
+	let i = t(n);
+	e(() => {
+		i.current = n;
+	}), e(() => {
+		let e = r && "current" in r ? r.current : document.documentElement;
+		if (!e) return;
+		let t = new ResizeObserver((e) => {
+			i.current(e);
+		});
+		return t.observe(e), () => {
+			t.disconnect();
+		};
+	}, [r]);
+}
+//#endregion
+export { n as useResizeObserver };
+
+//# sourceMappingURL=useResizeObserver.js.map

package/esm/hooks/useResizeObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizeObserver.js","names":[],"sources":["../../src/hooks/useResizeObserver.ts"],"sourcesContent":["import {RefObject, useEffect, useRef} from 'react'\n\nexport type ResizeObserverCallback = (entries: ResizeObserverEntry[]) => void\n\nexport interface ResizeObserverEntry {\n  contentRect: DOMRectReadOnly\n}\n\nexport function useResizeObserver<T extends HTMLElement>(\n  callback: ResizeObserverCallback,\n  target?: RefObject<T | null>,\n) {\n  const savedCallback = useRef(callback)\n\n  useEffect(() => {\n    savedCallback.current = callback\n  })\n\n  useEffect(() => {\n    const targetEl = target && 'current' in target ? target.current : document.documentElement\n    if (!targetEl) {\n      return\n    }\n\n    const observer = new ResizeObserver(entries => {\n      savedCallback.current(entries)\n    })\n\n    observer.observe(targetEl)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [target])\n}\n"],"mappings":";;AAQA,SAAgB,EACd,GACA,GACA;CACA,IAAM,IAAgB,EAAO,EAAS;AAMtC,CAJA,QAAgB;AACd,IAAc,UAAU;GACxB,EAEF,QAAgB;EACd,IAAM,IAAW,KAAU,aAAa,IAAS,EAAO,UAAU,SAAS;AAC3E,MAAI,CAAC,EACH;EAGF,IAAM,IAAW,IAAI,gBAAe,MAAW;AAC7C,KAAc,QAAQ,EAAQ;IAC9B;AAIF,SAFA,EAAS,QAAQ,EAAS,QAEb;AACX,KAAS,YAAY;;IAEtB,CAAC,EAAO,CAAC"}

package/esm/hooks/useTabs.d.ts

@@ -0,0 +1,57 @@
+import { type KeyboardEvent, type Ref } from 'react';
+export type OnTabActivate = (id: string, activeTabRef?: HTMLElement) => void;
+type Orientation = 'horizontal' | 'vertical';
+type TabId = `tabs-${string}-tab-${string}`;
+type TabPanelId = `tabs-${string}-panel-${string}`;
+export type UseTabsOptions = {
+    defaultTab?: string;
+    autoActivate?: boolean;
+    onTabActivate?: OnTabActivate;
+    orientation?: Orientation;
+};
+export type TabState = {
+    activeTab: string | null;
+    focusedTab: string | null;
+    tabs: Set<string>;
+};
+type TabListProps = {
+    role: 'tablist';
+    'aria-orientation': Orientation;
+};
+type TabProps = {
+    role: 'tab';
+    id: TabId;
+    'aria-controls': TabPanelId;
+    'aria-selected': boolean;
+    tabIndex: 0 | -1;
+    onClick: () => void;
+    onKeyDown: (event: KeyboardEvent) => void;
+    onFocus: () => void;
+    ref: (element: HTMLElement | null) => void;
+};
+type TabPanelProps = {
+    role: 'tabpanel';
+    id: TabPanelId;
+    'aria-labelledby': TabId;
+    hidden: boolean;
+    tabIndex: 0;
+};
+type LabelOrLabelledBy = {
+    label: string;
+    labelledBy?: never;
+} | {
+    labelledBy: string;
+    label?: never;
+};
+export type UseTabs = {
+    activeTab: string | null;
+    focusedTab: string | null;
+    activateTab: (id: string) => void;
+    focusTab: (id: string) => void;
+    getTabListProps: (props: LabelOrLabelledBy) => TabListProps;
+    getTabProps: <T extends HTMLElement = HTMLElement>(id: string, externalRef?: Ref<T>) => TabProps;
+    getTabPanelProps: (id: string) => TabPanelProps;
+};
+export declare const useTabs: ({ defaultTab, autoActivate, orientation, onTabActivate, }?: UseTabsOptions) => UseTabs;
+export {};
+//# sourceMappingURL=useTabs.d.ts.map

package/esm/hooks/useTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabs.d.ts","sourceRoot":"","sources":["../../src/hooks/useTabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgC,KAAK,aAAa,EAAyB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAA;AAGxG,MAAM,MAAM,aAAa,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,WAAW,KAAK,IAAI,CAAA;AAE5E,KAAK,WAAW,GAAG,YAAY,GAAG,UAAU,CAAA;AAC5C,KAAK,KAAK,GAAG,QAAQ,MAAM,QAAQ,MAAM,EAAE,CAAA;AAC3C,KAAK,UAAU,GAAG,QAAQ,MAAM,UAAU,MAAM,EAAE,CAAA;AAElD,MAAM,MAAM,cAAc,GAAG;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG;IACrB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;CAClB,CAAA;AAED,KAAK,YAAY,GAAG;IAClB,IAAI,EAAE,SAAS,CAAA;IACf,kBAAkB,EAAE,WAAW,CAAA;CAChC,CAAA;AAED,KAAK,QAAQ,GAAG;IACd,IAAI,EAAE,KAAK,CAAA;IACX,EAAE,EAAE,KAAK,CAAA;IACT,eAAe,EAAE,UAAU,CAAA;IAC3B,eAAe,EAAE,OAAO,CAAA;IACxB,QAAQ,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;IAChB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IACzC,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,GAAG,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;CAC3C,CAAA;AAED,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,UAAU,CAAA;IAChB,EAAE,EAAE,UAAU,CAAA;IACd,iBAAiB,EAAE,KAAK,CAAA;IACxB,MAAM,EAAE,OAAO,CAAA;IACf,QAAQ,EAAE,CAAC,CAAA;CACZ,CAAA;AAED,KAAK,iBAAiB,GAAG;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,KAAK,CAAA;CAAC,GAAG;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAC,CAAA;AAElG,MAAM,MAAM,OAAO,GAAG;IACpB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,eAAe,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,YAAY,CAAA;IAC3D,WAAW,EAAE,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,KAAK,QAAQ,CAAA;IAChG,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,aAAa,CAAA;CAChD,CAAA;AAED,eAAO,MAAM,OAAO,GAAI,4DAKrB,cAAmB,KAAG,OAoMxB,CAAA"}

package/esm/hooks/useTabs.js

@@ -0,0 +1,129 @@
+import { useId as e } from "./useId.js";
+import { useCallback as t, useRef as n, useState as r } from "react";
+//#region src/hooks/useTabs.ts
+var i = ({ defaultTab: i, autoActivate: a = !0, orientation: o = "horizontal", onTabActivate: s } = {}) => {
+	let c = e(), [l, u] = r({
+		activeTab: i || null,
+		focusedTab: null,
+		tabs: /* @__PURE__ */ new Set()
+	}), d = t((e) => {
+		u((t) => {
+			let n = e(t);
+			return n.activeTab && n.activeTab !== t.activeTab && t.activeTab !== null && s?.(n.activeTab, f.current.get(n.activeTab)), n;
+		});
+	}, [s]), f = n(/* @__PURE__ */ new Map()), p = t((e) => `tabs-${c}-tab-${e}`, [c]), m = t((e) => `tabs-${c}-panel-${e}`, [c]), h = t((e, t) => {
+		f.current.has(e) || (f.current.set(e, t), d((t) => ({
+			...t,
+			tabs: new Set([...t.tabs, e]),
+			activeTab: t.activeTab || e
+		})));
+	}, [d]), g = t((e) => {
+		f.current.get(e)?.focus();
+	}, []), _ = t((e) => {
+		d((t) => ({
+			...t,
+			activeTab: e,
+			focusedTab: e
+		}));
+	}, [d]), v = t((e, t) => (e + 1) % t.length, []), y = t((e, t) => (e - 1 + t.length) % t.length, []), b = t((e, t) => {
+		let n = [...l.tabs], r = n.indexOf(t);
+		switch (!0) {
+			case e.key === "ArrowLeft" && o === "horizontal":
+			case e.key === "ArrowUp" && o === "vertical": {
+				e.preventDefault();
+				let t = n[y(r, n)];
+				g(t), a && _(t);
+				break;
+			}
+			case e.key === "ArrowRight" && o === "horizontal":
+			case e.key === "ArrowDown" && o === "vertical": {
+				e.preventDefault();
+				let t = n[v(r, n)];
+				g(t), a && _(t);
+				break;
+			}
+			case e.key === "Home":
+				e.preventDefault(), g(n[0]), a && _(n[0]);
+				break;
+			case e.key === "End":
+				e.preventDefault(), g(n[n.length - 1]), a && _(n[n.length - 1]);
+				break;
+			case e.key === " ":
+			case e.key === "Enter":
+				e.preventDefault(), a || _(t);
+				break;
+		}
+	}, [
+		l.tabs,
+		o,
+		y,
+		g,
+		a,
+		_,
+		v
+	]), x = t((e) => {
+		_(e);
+	}, [_]), S = t((e) => {
+		d((t) => t.focusedTab === e ? t : {
+			...t,
+			focusedTab: e
+		});
+	}, [d]), C = t(({ label: e, labelledBy: t }) => ({
+		role: "tablist",
+		"aria-orientation": o,
+		...e && { "aria-label": e },
+		...t && { "aria-labelledby": t }
+	}), [o]), w = t((e, t) => ({
+		role: "tab",
+		id: p(e),
+		"aria-controls": m(e),
+		"aria-selected": e === l.activeTab,
+		tabIndex: e === l.activeTab ? 0 : -1,
+		onClick: () => x(e),
+		onKeyDown: (t) => b(t, e),
+		onFocus: () => S(e),
+		ref: (n) => {
+			if (n && h(e, n), t) {
+				if (typeof t == "function") {
+					t(n);
+					return;
+				}
+				if ("current" in t) {
+					t.current = n;
+					return;
+				}
+			}
+		}
+	}), [
+		l.activeTab,
+		p,
+		m,
+		x,
+		b,
+		S,
+		h
+	]), T = t((e) => ({
+		role: "tabpanel",
+		id: m(e),
+		"aria-labelledby": p(e),
+		hidden: e !== l.activeTab,
+		tabIndex: 0
+	}), [
+		l.activeTab,
+		m,
+		p
+	]);
+	return {
+		activeTab: l.activeTab,
+		focusedTab: l.focusedTab,
+		activateTab: _,
+		focusTab: g,
+		getTabListProps: C,
+		getTabProps: w,
+		getTabPanelProps: T
+	};
+};
+//#endregion
+export { i as useTabs };
+
+//# sourceMappingURL=useTabs.js.map

package/esm/hooks/useTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabs.js","names":[],"sources":["../../src/hooks/useTabs.ts"],"sourcesContent":["import {useCallback, useState, useRef, type KeyboardEvent, type MutableRefObject, type Ref} from 'react'\nimport {useId} from '../hooks/useId'\n\nexport type OnTabActivate = (id: string, activeTabRef?: HTMLElement) => void\n\ntype Orientation = 'horizontal' | 'vertical'\ntype TabId = `tabs-${string}-tab-${string}`\ntype TabPanelId = `tabs-${string}-panel-${string}`\n\nexport type UseTabsOptions = {\n  defaultTab?: string\n  autoActivate?: boolean\n  onTabActivate?: OnTabActivate\n  orientation?: Orientation\n}\n\nexport type TabState = {\n  activeTab: string | null\n  focusedTab: string | null\n  tabs: Set<string>\n}\n\ntype TabListProps = {\n  role: 'tablist'\n  'aria-orientation': Orientation\n}\n\ntype TabProps = {\n  role: 'tab'\n  id: TabId\n  'aria-controls': TabPanelId\n  'aria-selected': boolean\n  tabIndex: 0 | -1\n  onClick: () => void\n  onKeyDown: (event: KeyboardEvent) => void\n  onFocus: () => void\n  ref: (element: HTMLElement | null) => void\n}\n\ntype TabPanelProps = {\n  role: 'tabpanel'\n  id: TabPanelId\n  'aria-labelledby': TabId\n  hidden: boolean\n  tabIndex: 0\n}\n\ntype LabelOrLabelledBy = {label: string; labelledBy?: never} | {labelledBy: string; label?: never}\n\nexport type UseTabs = {\n  activeTab: string | null\n  focusedTab: string | null\n  activateTab: (id: string) => void\n  focusTab: (id: string) => void\n  getTabListProps: (props: LabelOrLabelledBy) => TabListProps\n  getTabProps: <T extends HTMLElement = HTMLElement>(id: string, externalRef?: Ref<T>) => TabProps\n  getTabPanelProps: (id: string) => TabPanelProps\n}\n\nexport const useTabs = ({\n  defaultTab,\n  autoActivate = true,\n  orientation = 'horizontal',\n  onTabActivate,\n}: UseTabsOptions = {}): UseTabs => {\n  const uniqueId = useId()\n  const [tabState, _setTabState] = useState<TabState>({\n    activeTab: defaultTab || null,\n    focusedTab: null,\n    tabs: new Set(),\n  })\n\n  const setTabState = useCallback(\n    (updater: (state: TabState) => TabState) => {\n      _setTabState(prev => {\n        const nextState = updater(prev)\n\n        // Only call onTabActivate when activeTab changes from one tab to another (not on mount)\n        if (nextState.activeTab && nextState.activeTab !== prev.activeTab && prev.activeTab !== null) {\n          onTabActivate?.(nextState.activeTab, tabRefs.current.get(nextState.activeTab))\n        }\n\n        return nextState\n      })\n    },\n    [onTabActivate],\n  )\n\n  // Refs to store tab elements for focus management\n  const tabRefs = useRef<Map<string, HTMLElement>>(new Map())\n\n  const getTabId = useCallback<(id: string) => TabId>(id => `tabs-${uniqueId}-tab-${id}`, [uniqueId])\n  const getPanelId = useCallback<(id: string) => TabPanelId>(id => `tabs-${uniqueId}-panel-${id}`, [uniqueId])\n\n  const registerTab = useCallback(\n    (id: string, element: HTMLElement) => {\n      if (tabRefs.current.has(id)) {\n        return\n      }\n\n      tabRefs.current.set(id, element)\n      setTabState(prev => ({\n        ...prev,\n        tabs: new Set([...prev.tabs, id]),\n        activeTab: prev.activeTab || id, // Set as active if no active tab\n      }))\n    },\n    [setTabState],\n  )\n\n  const focusTab = useCallback((id: string) => {\n    tabRefs.current.get(id)?.focus()\n  }, [])\n\n  const activateTab = useCallback(\n    (id: string) => {\n      setTabState(prev => ({\n        ...prev,\n        activeTab: id,\n        focusedTab: id,\n      }))\n    },\n    [setTabState],\n  )\n\n  const getNextTabIndex = useCallback((index: number, tabs: string[]) => (index + 1) % tabs.length, [])\n  const getPrevTabIndex = useCallback((index: number, tabs: string[]) => (index - 1 + tabs.length) % tabs.length, [])\n\n  const onTabKeyDown = useCallback(\n    (event: KeyboardEvent, id: string) => {\n      const tabs = [...tabState.tabs]\n      const currentIndex = tabs.indexOf(id)\n\n      switch (true) {\n        case event.key === 'ArrowLeft' && orientation === 'horizontal':\n        case event.key === 'ArrowUp' && orientation === 'vertical': {\n          event.preventDefault()\n          const prevIndex = getPrevTabIndex(currentIndex, tabs)\n          const prevTab = tabs[prevIndex]\n          focusTab(prevTab)\n          if (autoActivate) activateTab(prevTab)\n          break\n        }\n\n        case event.key === 'ArrowRight' && orientation === 'horizontal':\n        case event.key === 'ArrowDown' && orientation === 'vertical': {\n          event.preventDefault()\n          const nextIndex = getNextTabIndex(currentIndex, tabs)\n          const nextTab = tabs[nextIndex]\n          focusTab(nextTab)\n          if (autoActivate) activateTab(nextTab)\n          break\n        }\n\n        case event.key === 'Home': {\n          event.preventDefault()\n          focusTab(tabs[0])\n          if (autoActivate) activateTab(tabs[0])\n          break\n        }\n\n        case event.key === 'End': {\n          event.preventDefault()\n          focusTab(tabs[tabs.length - 1])\n          if (autoActivate) activateTab(tabs[tabs.length - 1])\n          break\n        }\n\n        case event.key === ' ':\n        case event.key === 'Enter': {\n          event.preventDefault()\n          if (!autoActivate) activateTab(id)\n          break\n        }\n      }\n    },\n    [tabState.tabs, orientation, getPrevTabIndex, focusTab, autoActivate, activateTab, getNextTabIndex],\n  )\n\n  const onTabClick = useCallback(\n    (id: string) => {\n      activateTab(id)\n    },\n    [activateTab],\n  )\n\n  const onTabFocus = useCallback(\n    (id: string) => {\n      setTabState(prev => {\n        if (prev.focusedTab === id) {\n          return prev\n        }\n        return {\n          ...prev,\n          focusedTab: id,\n        }\n      })\n    },\n    [setTabState],\n  )\n\n  const getTabListProps = useCallback<UseTabs['getTabListProps']>(\n    ({label, labelledBy}) => ({\n      role: 'tablist',\n      'aria-orientation': orientation,\n      ...(label && {'aria-label': label}),\n      ...(labelledBy && {'aria-labelledby': labelledBy}),\n    }),\n    [orientation],\n  )\n\n  const getTabProps = useCallback<UseTabs['getTabProps']>(\n    <T extends HTMLElement = HTMLElement>(id: string, externalRef?: Ref<T>) => ({\n      role: 'tab',\n      id: getTabId(id),\n      'aria-controls': getPanelId(id),\n      'aria-selected': id === tabState.activeTab,\n      tabIndex: id === tabState.activeTab ? 0 : -1,\n      onClick: () => onTabClick(id),\n      onKeyDown: (event: KeyboardEvent) => onTabKeyDown(event, id),\n      onFocus: () => onTabFocus(id),\n      ref: (element: HTMLElement | null) => {\n        if (element) registerTab(id, element)\n\n        if (!externalRef) return\n        if (typeof externalRef === 'function') {\n          externalRef(element as T | null)\n          return\n        }\n        if ('current' in externalRef) {\n          ;(externalRef as MutableRefObject<T | null>).current = element as T | null\n          return\n        }\n      },\n    }),\n    [tabState.activeTab, getTabId, getPanelId, onTabClick, onTabKeyDown, onTabFocus, registerTab],\n  )\n\n  const getTabPanelProps = useCallback<UseTabs['getTabPanelProps']>(\n    (id: string) => ({\n      role: 'tabpanel',\n      id: getPanelId(id),\n      'aria-labelledby': getTabId(id),\n      hidden: id !== tabState.activeTab,\n      tabIndex: 0,\n    }),\n    [tabState.activeTab, getPanelId, getTabId],\n  )\n\n  return {\n    activeTab: tabState.activeTab,\n    focusedTab: tabState.focusedTab,\n\n    activateTab,\n    focusTab,\n\n    getTabListProps,\n    getTabProps,\n    getTabPanelProps,\n  }\n}\n"],"mappings":";;;AA2DA,IAAa,KAAW,EACtB,eACA,kBAAe,IACf,iBAAc,cACd,qBACkB,EAAE,KAAc;CAClC,IAAM,IAAW,GAAO,EAClB,CAAC,GAAU,KAAgB,EAAmB;EAClD,WAAW,KAAc;EACzB,YAAY;EACZ,sBAAM,IAAI,KAAK;EAChB,CAAC,EAEI,IAAc,GACjB,MAA2C;AAC1C,KAAa,MAAQ;GACnB,IAAM,IAAY,EAAQ,EAAK;AAO/B,UAJI,EAAU,aAAa,EAAU,cAAc,EAAK,aAAa,EAAK,cAAc,QACtF,IAAgB,EAAU,WAAW,EAAQ,QAAQ,IAAI,EAAU,UAAU,CAAC,EAGzE;IACP;IAEJ,CAAC,EAAc,CAChB,EAGK,IAAU,kBAAiC,IAAI,KAAK,CAAC,EAErD,IAAW,GAAmC,MAAM,QAAQ,EAAS,OAAO,KAAM,CAAC,EAAS,CAAC,EAC7F,IAAa,GAAwC,MAAM,QAAQ,EAAS,SAAS,KAAM,CAAC,EAAS,CAAC,EAEtG,IAAc,GACjB,GAAY,MAAyB;AAChC,IAAQ,QAAQ,IAAI,EAAG,KAI3B,EAAQ,QAAQ,IAAI,GAAI,EAAQ,EAChC,GAAY,OAAS;GACnB,GAAG;GACH,MAAM,IAAI,IAAI,CAAC,GAAG,EAAK,MAAM,EAAG,CAAC;GACjC,WAAW,EAAK,aAAa;GAC9B,EAAE;IAEL,CAAC,EAAY,CACd,EAEK,IAAW,GAAa,MAAe;AAC3C,IAAQ,QAAQ,IAAI,EAAG,EAAE,OAAO;IAC/B,EAAE,CAAC,EAEA,IAAc,GACjB,MAAe;AACd,KAAY,OAAS;GACnB,GAAG;GACH,WAAW;GACX,YAAY;GACb,EAAE;IAEL,CAAC,EAAY,CACd,EAEK,IAAkB,GAAa,GAAe,OAAoB,IAAQ,KAAK,EAAK,QAAQ,EAAE,CAAC,EAC/F,IAAkB,GAAa,GAAe,OAAoB,IAAQ,IAAI,EAAK,UAAU,EAAK,QAAQ,EAAE,CAAC,EAE7G,IAAe,GAClB,GAAsB,MAAe;EACpC,IAAM,IAAO,CAAC,GAAG,EAAS,KAAK,EACzB,IAAe,EAAK,QAAQ,EAAG;AAErC,UAAQ,IAAR;GACE,KAAK,EAAM,QAAQ,eAAe,MAAgB;GAClD,KAAK,EAAM,QAAQ,aAAa,MAAgB,YAAY;AAC1D,MAAM,gBAAgB;IAEtB,IAAM,IAAU,EADE,EAAgB,GAAc,EAC3B;AAErB,IADA,EAAS,EAAQ,EACb,KAAc,EAAY,EAAQ;AACtC;;GAGF,KAAK,EAAM,QAAQ,gBAAgB,MAAgB;GACnD,KAAK,EAAM,QAAQ,eAAe,MAAgB,YAAY;AAC5D,MAAM,gBAAgB;IAEtB,IAAM,IAAU,EADE,EAAgB,GAAc,EAC3B;AAErB,IADA,EAAS,EAAQ,EACb,KAAc,EAAY,EAAQ;AACtC;;GAGF,KAAK,EAAM,QAAQ;AAGjB,IAFA,EAAM,gBAAgB,EACtB,EAAS,EAAK,GAAG,EACb,KAAc,EAAY,EAAK,GAAG;AACtC;GAGF,KAAK,EAAM,QAAQ;AAGjB,IAFA,EAAM,gBAAgB,EACtB,EAAS,EAAK,EAAK,SAAS,GAAG,EAC3B,KAAc,EAAY,EAAK,EAAK,SAAS,GAAG;AACpD;GAGF,KAAK,EAAM,QAAQ;GACnB,KAAK,EAAM,QAAQ;AAEjB,IADA,EAAM,gBAAgB,EACjB,KAAc,EAAY,EAAG;AAClC;;IAIN;EAAC,EAAS;EAAM;EAAa;EAAiB;EAAU;EAAc;EAAa;EAAgB,CACpG,EAEK,IAAa,GAChB,MAAe;AACd,IAAY,EAAG;IAEjB,CAAC,EAAY,CACd,EAEK,IAAa,GAChB,MAAe;AACd,KAAY,MACN,EAAK,eAAe,IACf,IAEF;GACL,GAAG;GACH,YAAY;GACb,CACD;IAEJ,CAAC,EAAY,CACd,EAEK,IAAkB,GACrB,EAAC,UAAO,qBAAiB;EACxB,MAAM;EACN,oBAAoB;EACpB,GAAI,KAAS,EAAC,cAAc,GAAM;EAClC,GAAI,KAAc,EAAC,mBAAmB,GAAW;EAClD,GACD,CAAC,EAAY,CACd,EAEK,IAAc,GACoB,GAAY,OAA0B;EAC1E,MAAM;EACN,IAAI,EAAS,EAAG;EAChB,iBAAiB,EAAW,EAAG;EAC/B,iBAAiB,MAAO,EAAS;EACjC,UAAU,MAAO,EAAS,YAAY,IAAI;EAC1C,eAAe,EAAW,EAAG;EAC7B,YAAY,MAAyB,EAAa,GAAO,EAAG;EAC5D,eAAe,EAAW,EAAG;EAC7B,MAAM,MAAgC;AACpC,OAAI,KAAS,EAAY,GAAI,EAAQ,EAEhC,GACL;QAAI,OAAO,KAAgB,YAAY;AACrC,OAAY,EAAoB;AAChC;;AAEF,QAAI,aAAa,GAAa;AAC1B,OAA2C,UAAU;AACvD;;;;EAGL,GACD;EAAC,EAAS;EAAW;EAAU;EAAY;EAAY;EAAc;EAAY;EAAY,CAC9F,EAEK,IAAmB,GACtB,OAAgB;EACf,MAAM;EACN,IAAI,EAAW,EAAG;EAClB,mBAAmB,EAAS,EAAG;EAC/B,QAAQ,MAAO,EAAS;EACxB,UAAU;EACX,GACD;EAAC,EAAS;EAAW;EAAY;EAAS,CAC3C;AAED,QAAO;EACL,WAAW,EAAS;EACpB,YAAY,EAAS;EAErB;EACA;EAEA;EACA;EACA;EACD"}

package/esm/hooks/useWindowSize.d.ts

@@ -0,0 +1,22 @@
+export declare enum BreakpointSize {
+    XSMALL = "xsmall",
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large",
+    XLARGE = "xlarge",
+    XXLARGE = "xxlarge"
+}
+type WindowSize = {
+    width?: number;
+    height?: number;
+    isXSmall?: boolean;
+    isSmall?: boolean;
+    isMedium?: boolean;
+    isLarge?: boolean;
+    isXLarge?: boolean;
+    isXXLarge?: boolean;
+    currentBreakpointSize?: BreakpointSize;
+};
+export declare function useWindowSize(): WindowSize;
+export {};
+//# sourceMappingURL=useWindowSize.d.ts.map

package/esm/hooks/useWindowSize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWindowSize.d.ts","sourceRoot":"","sources":["../../src/hooks/useWindowSize.ts"],"names":[],"mappings":"AAEA,oBAAY,cAAc;IACxB,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,OAAO,YAAY;CACpB;AAED,KAAK,UAAU,GAAG;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qBAAqB,CAAC,EAAE,cAAc,CAAA;CACvC,CAAA;AAED,wBAAgB,aAAa,eA0C5B"}

package/esm/hooks/useWindowSize.js

@@ -0,0 +1,60 @@
+import { useEffect as e, useState as t } from "react";
+//#region src/hooks/useWindowSize.ts
+var n = /* @__PURE__ */ function(e) {
+	return e.XSMALL = "xsmall", e.SMALL = "small", e.MEDIUM = "medium", e.LARGE = "large", e.XLARGE = "xlarge", e.XXLARGE = "xxlarge", e;
+}({});
+function r() {
+	let [n, r] = t({
+		width: void 0,
+		height: void 0,
+		isXSmall: void 0,
+		isSmall: void 0,
+		isMedium: void 0,
+		isLarge: void 0,
+		isXLarge: void 0,
+		isXXLarge: void 0,
+		currentBreakpointSize: void 0
+	});
+	return e(() => {
+		function e() {
+			r({
+				width: window.innerWidth,
+				height: window.innerHeight,
+				isXSmall: window.innerWidth >= 320,
+				isSmall: window.innerWidth >= 544,
+				isMedium: window.innerWidth >= 768,
+				isLarge: window.innerWidth >= 1012,
+				isXLarge: window.innerWidth >= 1280,
+				isXXLarge: window.innerWidth >= 1440,
+				currentBreakpointSize: i(window.innerWidth)
+			});
+		}
+		return window.addEventListener("resize", e), e(), () => window.removeEventListener("resize", e);
+	}, []), n;
+}
+var i = (e) => {
+	let t = n.XXLARGE;
+	switch (!0) {
+		case e >= 320 && e < 544:
+			t = n.XSMALL;
+			break;
+		case e >= 544 && e < 768:
+			t = n.SMALL;
+			break;
+		case e >= 768 && e < 1012:
+			t = n.MEDIUM;
+			break;
+		case e >= 1012 && e < 1280:
+			t = n.LARGE;
+			break;
+		case e >= 1280 && e < 1440:
+			t = n.XLARGE;
+			break;
+		default: t = n.XXLARGE;
+	}
+	return t;
+};
+//#endregion
+export { n as BreakpointSize, r as useWindowSize };
+
+//# sourceMappingURL=useWindowSize.js.map

package/esm/hooks/useWindowSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWindowSize.js","names":[],"sources":["../../src/hooks/useWindowSize.ts"],"sourcesContent":["import {useState, useEffect} from 'react'\n\nexport enum BreakpointSize {\n  XSMALL = 'xsmall',\n  SMALL = 'small',\n  MEDIUM = 'medium',\n  LARGE = 'large',\n  XLARGE = 'xlarge',\n  XXLARGE = 'xxlarge',\n}\n\ntype WindowSize = {\n  width?: number\n  height?: number\n  isXSmall?: boolean\n  isSmall?: boolean\n  isMedium?: boolean\n  isLarge?: boolean\n  isXLarge?: boolean\n  isXXLarge?: boolean\n  currentBreakpointSize?: BreakpointSize\n}\n\nexport function useWindowSize() {\n  const [windowSize, setWindowSize] = useState<WindowSize>({\n    width: undefined, // undefined to avoid client/server mismatch on initial mount\n    height: undefined, // undefined to avoid client/server mismatch on initial mount,\n    isXSmall: undefined, // undefined to avoid client/server mismatch on initial mount,\n    isSmall: undefined, // undefined to avoid client/server mismatch on initial mount,\n    isMedium: undefined, // undefined to avoid client/server mismatch on initial mount,\n    isLarge: undefined, // undefined to avoid client/server mismatch on initial mount,\n    isXLarge: undefined, // undefined to avoid client/server mismatch on initial mount,\n    isXXLarge: undefined, // undefined to avoid client/server mismatch on initial mount,\n    currentBreakpointSize: undefined, // undefined to avoid client/server mismatch on initial mount,\n  })\n\n  useEffect(() => {\n    // should only execute all the code below on client\n    function handleResize() {\n      setWindowSize({\n        width: window.innerWidth,\n        height: window.innerHeight,\n        /*\n         * Maps to large breakpoint\n         * TODO: replace with design token. Requires remToPx util.\n         */\n        isXSmall: window.innerWidth >= 320,\n        isSmall: window.innerWidth >= 544,\n        isMedium: window.innerWidth >= 768,\n        isLarge: window.innerWidth >= 1012,\n        isXLarge: window.innerWidth >= 1280,\n        isXXLarge: window.innerWidth >= 1440,\n        currentBreakpointSize: breakpointSwitch(window.innerWidth),\n      })\n    }\n\n    // eslint-disable-next-line github/prefer-observers\n    window.addEventListener('resize', handleResize)\n\n    handleResize()\n\n    return () => window.removeEventListener('resize', handleResize)\n  }, [])\n\n  return windowSize\n}\n\nconst breakpointSwitch = (value: number) => {\n  let current = BreakpointSize.XXLARGE\n  switch (true) {\n    case value >= 320 && value < 544:\n      current = BreakpointSize.XSMALL\n      break\n    case value >= 544 && value < 768:\n      current = BreakpointSize.SMALL\n      break\n    case value >= 768 && value < 1012:\n      current = BreakpointSize.MEDIUM\n      break\n    case value >= 1012 && value < 1280:\n      current = BreakpointSize.LARGE\n      break\n    case value >= 1280 && value < 1440:\n      current = BreakpointSize.XLARGE\n      break\n    default:\n      current = BreakpointSize.XXLARGE\n  }\n  return current\n}\n"],"mappings":";;AAEA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,SAAS,UACT,EAAA,QAAQ,SACR,EAAA,SAAS,UACT,EAAA,QAAQ,SACR,EAAA,SAAS,UACT,EAAA,UAAU;KACX;AAcD,SAAgB,IAAgB;CAC9B,IAAM,CAAC,GAAY,KAAiB,EAAqB;EACvD,OAAO,KAAA;EACP,QAAQ,KAAA;EACR,UAAU,KAAA;EACV,SAAS,KAAA;EACT,UAAU,KAAA;EACV,SAAS,KAAA;EACT,UAAU,KAAA;EACV,WAAW,KAAA;EACX,uBAAuB,KAAA;EACxB,CAAC;AA8BF,QA5BA,QAAgB;EAEd,SAAS,IAAe;AACtB,KAAc;IACZ,OAAO,OAAO;IACd,QAAQ,OAAO;IAKf,UAAU,OAAO,cAAc;IAC/B,SAAS,OAAO,cAAc;IAC9B,UAAU,OAAO,cAAc;IAC/B,SAAS,OAAO,cAAc;IAC9B,UAAU,OAAO,cAAc;IAC/B,WAAW,OAAO,cAAc;IAChC,uBAAuB,EAAiB,OAAO,WAAW;IAC3D,CAAC;;AAQJ,SAJA,OAAO,iBAAiB,UAAU,EAAa,EAE/C,GAAc,QAED,OAAO,oBAAoB,UAAU,EAAa;IAC9D,EAAE,CAAC,EAEC;;AAGT,IAAM,KAAoB,MAAkB;CAC1C,IAAI,IAAU,EAAe;AAC7B,SAAQ,IAAR;EACE,KAAK,KAAS,OAAO,IAAQ;AAC3B,OAAU,EAAe;AACzB;EACF,KAAK,KAAS,OAAO,IAAQ;AAC3B,OAAU,EAAe;AACzB;EACF,KAAK,KAAS,OAAO,IAAQ;AAC3B,OAAU,EAAe;AACzB;EACF,KAAK,KAAS,QAAQ,IAAQ;AAC5B,OAAU,EAAe;AACzB;EACF,KAAK,KAAS,QAAQ,IAAQ;AAC5B,OAAU,EAAe;AACzB;EACF,QACE,KAAU,EAAe;;AAE7B,QAAO"}

package/esm/index.d.ts

@@ -0,0 +1,58 @@
+export * from './css/stylesheets';
+export * from './Hero';
+export * from './Text';
+export * from './Heading';
+export * from './ThemeProvider';
+export * from './Button';
+export * from './ButtonGroup';
+export * from './river';
+export * from './SubdomainNavBar';
+export * from './InlineLink';
+export * from './Link';
+export * from './Label';
+export * from './Token';
+export * from './EyebrowText';
+export * from './Accordion';
+export * from './FAQ';
+export * from './forms';
+export * from './Stack';
+export * from './Avatar';
+export * from './Testimonial';
+export * from './ComparisonTable';
+export * from './AnchorNav';
+export * from './CTABanner';
+export * from './list';
+export * from './CTAForm';
+export * from './MinimalFooter';
+export * from './Pillar';
+export * from './Card';
+export * from './SectionIntro';
+export * from './ActionMenu';
+export * from './Grid';
+export * from './Image';
+export * from './animation';
+export * from './Prose';
+export * from './Box';
+export * from './VideoPlayer';
+export * from './LogoSuite';
+export * from './Timeline';
+export * from './Bento';
+export * from './EyebrowBanner';
+export * from './PricingOptions';
+export * from './SubNav';
+export * from './IDE';
+export * from './Breadcrumbs';
+export * from './Pagination';
+export * from './Tooltip';
+export * from './Section';
+export * from './Statistic';
+export * from './BreakoutBanner';
+export * from './Footnotes';
+export * from './Icon';
+export * from './FrostedGlassVFX';
+export * from './SectionIntroStacked';
+export * from './Tabs';
+export * from './TextCursorAnimation';
+export * from './Tiles';
+export * from './hooks/useWindowSize';
+//# sourceMappingURL=index.d.ts.map

package/esm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AAEjC,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,mBAAmB,CAAA;AACjC,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,QAAQ,CAAA;AACtB,cAAc,uBAAuB,CAAA;AACrC,cAAc,SAAS,CAAA;AAGvB,cAAc,uBAAuB,CAAA"}

package/esm/index.esm.d.ts

@@ -0,0 +1,8 @@
+/**
+ * ESM entry point for @primer/react-brand.
+ *
+ * Re-exports everything from the main index, which includes
+ * stylesheets.ts (global CSS: reset, design tokens, utilities).
+ */
+export * from './index';
+//# sourceMappingURL=index.esm.d.ts.map

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

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

package/esm/index.esm.js

@@ -0,0 +1,77 @@
+import { _GLOBAL_STYLES as e } from "./css/stylesheets.js";
+import { Grid as t } from "./Grid/Grid.js";
+import { AnimationContext as n, AnimationProvider as r, AnimationVariants as i } from "./animation/AnimationProvider/AnimationProvider.js";
+import { Animate as a } from "./animation/Animate/Animate.js";
+import { useAnimation as o } from "./animation/useAnimation.js";
+import { TextRevealAnimation as s } from "./animation/TextRevealAnimation/TextRevealAnimation.js";
+import { Stack as c, StackAlignItemVariants as l, StackDirectionVariants as u, StackFlexWrapVariants as d, StackJustifyContentVariants as f, StackSpacingVariants as p, defaultStackDirection as m, defaultStackSpacing as h } from "./Stack/Stack.js";
+import { Box as g, BoxBackgroundColors as _, BoxBorderColorOptions as v, BoxBorderRadiusOptions as y, BoxBorderWidthOptions as b, BoxSpacingValues as x } from "./Box/Box.js";
+import { Text as S, TextFontVariants as C, TextSizes as w, TextTags as T, TextVariants as E, TextWeights as D, defaultFontVariant as O, defaultTextSize as k, defaultTextTag as A, defaultTextVariant as j } from "./Text/Text.js";
+import { EyebrowText as M, EyebrowTextVariants as N } from "./EyebrowText/EyebrowText.js";
+import { TextCursorAnimation as P, testIds as F } from "./TextCursorAnimation/TextCursorAnimation.js";
+import { Heading as I, HeadingFontVariants as L, HeadingLetterSpacing as R, HeadingSizes as z, HeadingStretch as B, HeadingTags as V, HeadingWeights as H, classMap as U, defaultHeadingFont as W, defaultHeadingTag as G } from "./Heading/Heading.js";
+import { Image as K, ImageBorderRadiusOptions as q } from "./Image/Image.js";
+import { Button as J, ButtonSizes as Y, ButtonVariants as X, _Button as Z, defaultButtonSize as Q, defaultButtonVariant as $ } from "./Button/Button.js";
+import { Hero as ee } from "./Hero/Hero.js";
+import { ColorModesEnum as te, ThemeContext as ne, ThemeProvider as re } from "./ThemeProvider/ThemeProvider.js";
+import { useTheme as ie } from "./ThemeProvider/useTheme.js";
+import { ButtonGroup as ae } from "./ButtonGroup/ButtonGroup.js";
+import { RiverAccordion as oe, RiverAccordionVariants as se } from "./river/RiverAccordion/RiverAccordion.js";
+import { Link as ce, LinkArrowDirections as le, LinkSizes as ue, LinkVariants as de } from "./Link/Link.js";
+import { Label as fe, LabelColors as pe, LabelSizes as me, defaultLabelColor as he, defaultLabelSize as ge } from "./Label/Label.js";
+import { River as _e, defaultRiverAlign as ve, defaultRiverImageTextRatio as ye, defaultRiverVariant as be } from "./river/River/River.js";
+import { RiverBreakout as xe, RiverBreakoutVariants as Se } from "./river/RiverBreakout/RiverBreakout.js";
+import { Icon as Ce, defaultIconColor as we, defaultIconSize as Te, iconColors as Ee, iconSizeMap as De, iconSizes as Oe, namedIconSizes as ke, numericIconSizes as Ae } from "./Icon/Icon.js";
+import { BreakpointSize as je, useWindowSize as Me } from "./hooks/useWindowSize.js";
+import { RiverBreakoutTabs as Ne } from "./river/RiverBreakoutTabs/RiverBreakoutTabs.js";
+import { RiverStoryScroll as Pe } from "./river/RiverStoryScroll/RiverStoryScroll.js";
+import { SubdomainNavBar as Fe } from "./SubdomainNavBar/SubdomainNavBar.js";
+import { InlineLink as Ie } from "./InlineLink/InlineLink.js";
+import { Token as Le, TokenVariants as Re, defaultTokenVariant as ze } from "./Token/Token.js";
+import { Accordion as Be, AccordionContent as Ve, AccordionHeading as He, AccordionRoot as Ue, AccordionToggleColors as We } from "./Accordion/Accordion.js";
+import { FAQ as Ge } from "./FAQ/FAQ.js";
+import { FAQGroup as Ke } from "./FAQ/FAQGroup.js";
+import { Checkbox as qe } from "./forms/Checkbox/Checkbox.js";
+import { DEFAULT_TEXTAREA_COLS as Je, DEFAULT_TEXTAREA_RESIZE as Ye, DEFAULT_TEXTAREA_ROWS as Xe, Textarea as Ze } from "./forms/Textarea/Textarea.js";
+import { TextInput as Qe } from "./forms/TextInput/TextInput.js";
+import { Select as $e } from "./forms/Select/Select.js";
+import { Radio as et } from "./forms/Radio/Radio.js";
+import { FormControl as tt } from "./forms/FormControl/FormControl.js";
+import { CheckboxGroup as nt } from "./forms/CheckboxGroup/CheckboxGroup.js";
+import { RadioGroup as rt } from "./forms/RadioGroup/RadioGroup.js";
+import { Avatar as it, AvatarShapes as at, AvatarSizes as ot } from "./Avatar/Avatar.js";
+import { Testimonial as st, TestimonialQuoteMarkColors as ct, TestimonialVariants as lt, defaultQuoteMarkColor as ut, defaultTestimonialVariant as dt } from "./Testimonial/Testimonial.js";
+import { ComparisonTable as ft, _ComparisonTable as pt } from "./ComparisonTable/ComparisonTable.js";
+import { AnchorNav as mt } from "./AnchorNav/AnchorNav.js";
+import { CTABanner as ht, CTABannerBackgroundColors as gt } from "./CTABanner/CTABanner.js";
+import { UnorderedList as _t } from "./list/UnorderedList/UnorderedList.js";
+import { OrderedList as vt } from "./list/OrderedList/OrderedList.js";
+import { CTAForm as yt } from "./CTAForm/CTAForm.js";
+import { MinimalFooter as bt } from "./MinimalFooter/MinimalFooter.js";
+import { Pillar as xt, defaultPillarIconColor as St, defaultPillarIconSize as Ct } from "./Pillar/Pillar.js";
+import { Card as wt, CardBackgroundColors as Tt, CardCTAVariants as Et, CardIconColors as Dt, CardLabelVariants as Ot, CardTokenPositions as kt, CardVariants as At, defaultCardCTAVariant as jt, defaultCardIconColor as Mt, defaultCardLabelVariant as Nt } from "./Card/Card.js";
+import { CardSkewEffect as Pt } from "./Card/CardSkewEffect.js";
+import { SectionIntro as Ft } from "./SectionIntro/SectionIntro.js";
+import { ActionMenu as It, ActionMenuButtonModes as Lt, ActionMenuProvider as Rt, ActionMenuSizes as zt, actionMenuOverlaySides as Bt, useActionMenuContext as Vt } from "./ActionMenu/ActionMenu.js";
+import { Prose as Ht } from "./Prose/Prose.js";
+import { useVideo as Ut } from "./VideoPlayer/hooks/useVideo.js";
+import { VideoPlayer as Wt } from "./VideoPlayer/VideoPlayer.js";
+import { LogoSuite as Gt } from "./LogoSuite/LogoSuite.js";
+import { Timeline as Kt } from "./Timeline/Timeline.js";
+import { Bento as qt } from "./Bento/Bento.js";
+import { EyebrowBanner as Jt, EyebrowBannerIconColors as Yt, EyebrowBannerLabelColors as Xt, defaultEyebrowBannerIconColor as Zt } from "./EyebrowBanner/EyebrowBanner.js";
+import { PricingOptions as Qt } from "./PricingOptions/PricingOptions.js";
+import { SubNav as $t, SubNavSubMenuVariants as en, useSubNavContext as tn } from "./SubNav/SubNav.js";
+import { IDE as nn, IDEDefaultIconMap as rn, IDEFileExtensions as an } from "./IDE/IDE.js";
+import { BreadcrumbVariants as on, Breadcrumbs as sn } from "./Breadcrumbs/Breadcrumbs.js";
+import { Pagination as cn } from "./Pagination/Pagination.js";
+import { Tooltip as ln, TooltipContext as un } from "./Tooltip/Tooltip.js";
+import { Section as dn, SectionBackgroundColors as fn, SectionPaddingVariants as pn } from "./Section/Section.js";
+import { Statistic as mn, StatisticSizes as hn, StatisticSpacingValues as gn } from "./Statistic/Statistic.js";
+import { BreakoutBanner as _n, BreakoutBannerBackgroundColors as vn } from "./BreakoutBanner/BreakoutBanner.js";
+import { Footnotes as yn, FootnotesItemTags as bn, FootnotesTags as xn } from "./Footnotes/Footnotes.js";
+import { FrostedGlassVFX as Sn, FrostedGlassVFXIntensity as Cn, defaultFrostedGlassVFXIntensity as wn } from "./FrostedGlassVFX/FrostedGlassVFX.js";
+import { SectionIntroStacked as Tn, SectionIntroStackedVariants as En } from "./SectionIntroStacked/SectionIntroStacked.js";
+import { Tabs as Dn } from "./Tabs/Tabs.js";
+import { Tiles as On } from "./Tiles/Tiles.js";
+export { Be as Accordion, Ve as AccordionContent, He as AccordionHeading, Ue as AccordionRoot, We as AccordionToggleColors, It as ActionMenu, Lt as ActionMenuButtonModes, Rt as ActionMenuProvider, zt as ActionMenuSizes, mt as AnchorNav, a as Animate, n as AnimationContext, r as AnimationProvider, i as AnimationVariants, it as Avatar, at as AvatarShapes, ot as AvatarSizes, qt as Bento, g as Box, _ as BoxBackgroundColors, v as BoxBorderColorOptions, y as BoxBorderRadiusOptions, b as BoxBorderWidthOptions, x as BoxSpacingValues, on as BreadcrumbVariants, sn as Breadcrumbs, _n as BreakoutBanner, vn as BreakoutBannerBackgroundColors, je as BreakpointSize, J as Button, ae as ButtonGroup, Y as ButtonSizes, X as ButtonVariants, ht as CTABanner, gt as CTABannerBackgroundColors, yt as CTAForm, wt as Card, Tt as CardBackgroundColors, Et as CardCTAVariants, Dt as CardIconColors, Ot as CardLabelVariants, Pt as CardSkewEffect, kt as CardTokenPositions, At as CardVariants, qe as Checkbox, nt as CheckboxGroup, te as ColorModesEnum, ft as ComparisonTable, Je as DEFAULT_TEXTAREA_COLS, Ye as DEFAULT_TEXTAREA_RESIZE, Xe as DEFAULT_TEXTAREA_ROWS, Jt as EyebrowBanner, Yt as EyebrowBannerIconColors, Xt as EyebrowBannerLabelColors, M as EyebrowText, N as EyebrowTextVariants, Ge as FAQ, Ke as FAQGroup, yn as Footnotes, bn as FootnotesItemTags, xn as FootnotesTags, tt as FormControl, Sn as FrostedGlassVFX, Cn as FrostedGlassVFXIntensity, t as Grid, I as Heading, L as HeadingFontVariants, R as HeadingLetterSpacing, z as HeadingSizes, B as HeadingStretch, V as HeadingTags, H as HeadingWeights, ee as Hero, nn as IDE, rn as IDEDefaultIconMap, an as IDEFileExtensions, Ce as Icon, K as Image, q as ImageBorderRadiusOptions, Ie as InlineLink, fe as Label, pe as LabelColors, me as LabelSizes, ce as Link, le as LinkArrowDirections, ue as LinkSizes, de as LinkVariants, Gt as LogoSuite, bt as MinimalFooter, vt as OrderedList, cn as Pagination, xt as Pillar, Qt as PricingOptions, Ht as Prose, et as Radio, rt as RadioGroup, _e as River, oe as RiverAccordion, se as RiverAccordionVariants, xe as RiverBreakout, Ne as RiverBreakoutTabs, Se as RiverBreakoutVariants, Pe as RiverStoryScroll, dn as Section, fn as SectionBackgroundColors, Ft as SectionIntro, Tn as SectionIntroStacked, En as SectionIntroStackedVariants, pn as SectionPaddingVariants, $e as Select, c as Stack, l as StackAlignItemVariants, u as StackDirectionVariants, d as StackFlexWrapVariants, f as StackJustifyContentVariants, p as StackSpacingVariants, mn as Statistic, hn as StatisticSizes, gn as StatisticSpacingValues, $t as SubNav, en as SubNavSubMenuVariants, Fe as SubdomainNavBar, Dn as Tabs, st as Testimonial, ct as TestimonialQuoteMarkColors, lt as TestimonialVariants, S as Text, P as TextCursorAnimation, C as TextFontVariants, Qe as TextInput, s as TextRevealAnimation, w as TextSizes, T as TextTags, E as TextVariants, D as TextWeights, Ze as Textarea, ne as ThemeContext, re as ThemeProvider, On as Tiles, Kt as Timeline, Le as Token, Re as TokenVariants, ln as Tooltip, un as TooltipContext, _t as UnorderedList, Wt as VideoPlayer, Z as _Button, pt as _ComparisonTable, e as _GLOBAL_STYLES, Bt as actionMenuOverlaySides, U as classMap, Q as defaultButtonSize, $ as defaultButtonVariant, jt as defaultCardCTAVariant, Mt as defaultCardIconColor, Nt as defaultCardLabelVariant, Zt as defaultEyebrowBannerIconColor, O as defaultFontVariant, wn as defaultFrostedGlassVFXIntensity, W as defaultHeadingFont, G as defaultHeadingTag, we as defaultIconColor, Te as defaultIconSize, he as defaultLabelColor, ge as defaultLabelSize, St as defaultPillarIconColor, Ct as defaultPillarIconSize, ut as defaultQuoteMarkColor, ve as defaultRiverAlign, ye as defaultRiverImageTextRatio, be as defaultRiverVariant, m as defaultStackDirection, h as defaultStackSpacing, dt as defaultTestimonialVariant, k as defaultTextSize, A as defaultTextTag, j as defaultTextVariant, ze as defaultTokenVariant, Ee as iconColors, De as iconSizeMap, Oe as iconSizes, ke as namedIconSizes, Ae as numericIconSizes, F as testIds, Vt as useActionMenuContext, o as useAnimation, tn as useSubNavContext, ie as useTheme, Ut as useVideo, Me as useWindowSize };

package/esm/list/ListItem/ListItem.d.ts

@@ -0,0 +1,19 @@
+import React, { type Ref } from 'react';
+import { type Icon, type IconProps } from '@primer/octicons-react';
+import { TextProps } from '../../Text';
+import type { BaseProps } from '../../component-helpers';
+export type ListItemProps = BaseProps<HTMLElement> & {
+    /**
+     * React.ReactNode and React.ReactNode[] are valid children.
+     */
+    children?: React.ReactNode | React.ReactNode[];
+    /**
+     * The ref object to be attached to the list item.
+     */
+    ref?: Ref<HTMLLIElement>;
+    leadingVisual?: Icon;
+    leadingVisualFill?: IconProps['fill'];
+    leadingVisualAriaLabel?: string;
+} & Pick<TextProps, 'variant'>;
+export declare const ListItem: any;
+//# sourceMappingURL=ListItem.d.ts.map

package/esm/list/ListItem/ListItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/list/ListItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,KAAK,GAAG,EAAa,MAAM,OAAO,CAAA;AAEjD,OAAO,EAAsB,KAAK,IAAI,EAAE,KAAK,SAAS,EAAQ,MAAM,wBAAwB,CAAA;AAC5F,OAAO,EAAO,SAAS,EAAC,MAAM,YAAY,CAAA;AAC1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AAKtD,MAAM,MAAM,aAAa,GAAG,SAAS,CAAC,WAAW,CAAC,GAAG;IACnD;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC9C;;OAEG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,CAAA;IAIxB,aAAa,CAAC,EAAE,IAAI,CAAA;IAIpB,iBAAiB,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAA;IAIrC,sBAAsB,CAAC,EAAE,MAAM,CAAA;CAChC,GAAG,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;AAkF9B,eAAO,MAAM,QAAQ,KAAsB,CAAA"}

package/esm/list/ListItem/ListItem.js

@@ -0,0 +1,51 @@
+import e from "../../node_modules/clsx/dist/clsx.js";
+import { Text as t } from "../../Text/Text.js";
+import { CheckIcon as n, DashIcon as r, XIcon as i } from "../../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { ListContext as a } from "../listContext.js";
+import o from "./ListItem.module.js";
+import { useContext as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/list/ListItem/ListItem.tsx
+function u({ className: u, children: d, leadingVisualFill: f, leadingVisual: p, leadingVisualAriaLabel: m, variant: h = "default", ...g }) {
+	let { variant: _ } = s(a), v = () => {
+		let t = {
+			fill: f,
+			"aria-label": m,
+			...f && { style: { fill: f } }
+		};
+		if (p) return /* @__PURE__ */ c(p, {
+			className: e(o["ListItem__leading-visual"], !f && o["ListItem__leading-visual--muted"]),
+			...t
+		});
+		switch (_) {
+			case "checked": return /* @__PURE__ */ c(n, {
+				className: e(o["ListItem__leading-visual"], o.ListItem__checked, !f && o["ListItem__leading-visual--muted"]),
+				...t
+			});
+			case "x": return /* @__PURE__ */ c(i, {
+				className: e(o["ListItem__leading-visual"], o.ListItem__x, !f && o["ListItem__leading-visual--muted"]),
+				...t
+			});
+			case "default": return /* @__PURE__ */ c(r, {
+				className: e(o["ListItem__leading-visual"], o.ListItem__default, !f && o["ListItem__leading-visual--muted"]),
+				...t
+			});
+			default: return null;
+		}
+	};
+	return /* @__PURE__ */ l("li", {
+		className: e(o.ListItem, !_ && o.OrderedList__item, u),
+		...g,
+		children: [v(), /* @__PURE__ */ c(t, {
+			as: "span",
+			variant: h,
+			className: e(o[`ListItem--${h}`]),
+			children: d
+		})]
+	});
+}
+var d = Object.assign(u);
+//#endregion
+export { d as ListItem };
+
+//# sourceMappingURL=ListItem.js.map