@primer/react-brand 0.74.0 → 0.75.0-rc.89e3cadf

package/esm/ThemeProvider/ThemeProvider.js

@@ -3,13 +3,13 @@ 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({
+}({}), o = "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)), [
+	return t(() => (e === "auto" ? p(u()) : f !== e && p(e), d(p)), [
 		e,
 		f,
 		p
@@ -25,8 +25,8 @@ function c({ colorMode: e = o, children: c, ...l }) {
 		})
 	});
 }
-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);
+var l = () => window.matchMedia("(prefers-color-scheme: dark)"), u = () => l().matches ? "dark" : "light", d = (e) => {
+	let t = l(), n = (t) => e(t.matches ? "dark" : "light");
 	return t.addEventListener("change", n), () => t.removeEventListener("change", n);
 };
 //#endregion

package/esm/ThemeProvider/ThemeProvider.js.map

@@ -1 +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"}
+{"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,QAAA,SACA,EAAA,OAAA,QACA,EAAA,OAAA;AACF,EAAA,CAAA,CAAA,GAoBM,IAAA,SAEO,IAAe,EAAiC;CAC3D,WAAW;CACX,qBAAqB,OAAO,OAAO,CAAc;AACnD,CAAC;AAKD,SAAgB,EAAc,EAAC,eAAY,GAAa,aAAU,GAAG,KAA8C;CACjH,IAAM,CAAC,GAAY,KAAiB,EAAS,CAAS,GAChD,IAAsB,QAAc,OAAO,OAAO,CAAc,GAAG,CAAC,CAAC;CAY3E,OAVA,SACM,MAAA,SACF,EAAc,EAAkB,CAAC,IACxB,MAAe,KACxB,EAAc,CAAS,GAGlB,EAA6B,CAAa,IAChD;EAAC;EAAW;EAAY;CAAa,CAAC,GAGvC,kBAAC,EAAa,UAAd;EAAuB,OAAO;GAAC,WAAW;GAAY;EAAmB;YACvE,kBAAC,OAAD;GAAK,mBAAiB;GAAY,GAAI;GACnC;EACE,CAAA;CACgB,CAAA;AAE3B;AAEA,IAAM,UAA+B,OAAO,WAAW,8BAAgD,GAEjG,UACmC,EAChC,CAAA,CAAe,UAAA,SAAA,SAGlB,KAA+B,MAAY;CAC/C,IAAM,IAAiB,EAAuB,GACxC,KAAgB,MAAS,EAAS,EAAM,UAAA,SAAA,OAAoD;CAElG,OADA,EAAe,iBAAiB,UAAU,CAAa,SAC1C,EAAe,oBAAoB,UAAU,CAAa;AACzE"}

package/esm/ThemeProvider/useTheme.js.map

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

package/esm/Tiles/Tiles.js

@@ -1,6 +1,6 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as 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 { ArrowUpRightIcon as n } from "../node_modules/@primer/octicons-react/dist/icons/ArrowUpRightIcon.js";
 import r from "../component-helpers/shared.module.js";
 import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/tiles/colors-with-modes-DTTqGOfy.css';/* empty css                                                                                                   */
 import i from "./Tiles.module.js";

package/esm/Tiles/Tiles.js.map

@@ -1 +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 gridlineStyles from '../component-helpers/shared.module.css'\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            variant === 'gridlines' && gridlineStyles.gridline,\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":";;;;;;;;;AAaA,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,MAAY,eAAe,EAAe,UAC1C,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"}
+{"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 gridlineStyles from '../component-helpers/shared.module.css'\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            variant === 'gridlines' && gridlineStyles.gridline,\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":";;;;;;;;;AAaA,IAAM,IAAU;CACd,MAAM;CACN,IAAI,OAAO;EACT,OAAO,GAAG,KAAK,KAAK;CACtB;CACA,IAAI,OAAO;EACT,OAAO,GAAG,KAAK,KAAK;CACtB;AACF,GAMM,IAAe,EAA2B,SAAS,GAkBnD,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,MAAY,eAAe,EAAe,UAC1C,CACF;EACA,eAAa,KAAU,EAAQ;EAC/B,GAAI;YAEJ,kBAAC,MAAD;GAAI,WAAW,EAAO;GAAe,eAAa,EAAQ;GACvD;EACC,CAAA;CACD,CAAA;AACgB,CAAA,CAG7B,GAoBM,IAAQ,GACX,EAAC,SAAM,SAAM,aAAU,cAAW,eAAe,GAAQ,GAAG,KAAuB,MAA4B;CAC9G,IAAM,IAAS,EAAW,CAAY,GAChC,IAAU,EAAQ,GAClB,IAAgB,MAAW,aAAa,CAAC,GAEzC,IACJ,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB,CACE,kBAAC,QAAD;GAAM,WAAW,EAAO;GAAqB,eAAY;GACtD;EACG,CAAA,GACN,kBAAC,QAAD;GAAM,WAAW,EAAK,EAAO,qBAAqB,KAAiB,iBAAiB;aAApF,CACE,kBAAC,GAAD;IAAM,IAAG;IAAO,MAAK;IAAM,WAAW,EAAO;cAC1C;GACG,CAAA,GACL,KAAW,kBAAC,GAAD;IAAkB,MAAM;IAAI,WAAW,EAAO;IAAoB,eAAY;GAAQ,CAAA,CAC9F;IACF;;CAGR,OACE,kBAAC,MAAD;EAAS;EAAK,WAAW,EAAK,EAAO,eAAe,CAAS;EAAG,eAAa,KAAU,EAAQ;EAAM,GAAI;YACtG,IACC,kBAAC,KAAD;GAAS;GAAM,WAAW,EAAO;aAC9B;EACA,CAAA,IAEH;CAEA,CAAA;AAER,CACF,GAMa,IAAQ,OAAO,OAAO,GAAW;CAC5C,MAAM;CACN;AACF,CAAC"}

package/esm/Tiles/Tiles.module.js

@@ -1,5 +1,6 @@
-import './Tiles.module-BzHaDJV8.css';var e = {
-	Tiles: "Primer_Brand__Tiles-module__Tiles___RhWBm",
+import './Tiles.module-BzHaDJV8.css';//#region src/Tiles/Tiles.module.css
+var e = "Primer_Brand__Tiles-module__Tiles___RhWBm", t = {
+	Tiles: e,
 	"Tiles-grid": "Primer_Brand__Tiles-module__Tiles-grid___lAoQw",
 	"Tiles--layout-compact": "Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD",
 	"Tiles--layout-default": "Primer_Brand__Tiles-module__Tiles--layout-default___szHFY",
@@ -13,6 +14,6 @@ import './Tiles.module-BzHaDJV8.css';var e = {
 	"Tiles-item-icon": "Primer_Brand__Tiles-module__Tiles-item-icon___2Hu6M"
 };
 //#endregion
-export { e as default };
+export { e as Tiles, t as default };
 
 //# sourceMappingURL=Tiles.module.js.map

package/esm/Timeline/Timeline.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import React, { PropsWithChildren } from 'react';
 import { BaseProps } from '../component-helpers';
 /**
  * Design tokens
@@ -13,7 +13,7 @@ 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;
+export declare const Timeline: (({ animate, className, children, fullWidth, ...rest }: PropsWithChildren<TimelineProps>) => React.JSX.Element) & {
+    Item: ({ className, children, ...rest }: PropsWithChildren<TimelineItemProps>) => React.JSX.Element;
 };
 //# sourceMappingURL=Timeline.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../src/Timeline/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,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

@@ -1,8 +1,8 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as 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                                                                                                      */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/timeline/base-CXOJfjx4.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/timeline/colors-with-modes-DDIdeMJX.css';/* empty css                                                                                                      */
 /* empty css                                                                                         */
 import i, { useCallback as a, useMemo as o } from "react";
 import { jsx as s } from "react/jsx-runtime";

package/esm/Timeline/Timeline.js.map

@@ -1 +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"}
+{"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,CAAO;CASvF,OACE,kBAAC,MAAD;EAAI,WARoB,EACxB,GACA,EAAO,UACP,KAAa,EAAO,yBACpB,CAIe;EAAmB,OAAO,EAAC,GAAG,EAAqB;EAAG,GAAI;EACtE;CACC,CAAA;AAER,GA8BoD,EAClD,OA3BY,EAAC,cAAW,aAAU,GAAG,QAAgD;CACrF,IAAM,IAAgB,EAAK,EAAO,gBAAmB,CAAS,GACxD,IAAgB,QAAc,EAAM,SAAS,QAAQ,CAAQ,GAAG,CAAC,CAAQ,CAAC,GAE1E,IAAwB,QACxB,EAAc,MAAK,MAAS,EAAM,eAAe,CAAK,MAAM,EAAM,SAAS,OAAO,EAAM,SAAS,KAAK,IACjG,UAEF,WACN,CAAC,CAAa,CAAC,GAEZ,IAAe,EAAc,WAAW,IAAI,YAAY,EAAsB;CAEpF,OACE,kBAAC,MAAD;EAAI,WAAW;EAAe,GAAI;YAChC,kBAAC,GAAD;GAAM,WAAW,EAAO;GAAwB,MAAK;GAAM,SAAS;GACjE;EACG,CAAA;CACJ,CAAA;AAER,EAQA,CAAC"}

package/esm/Timeline/Timeline.module.js

@@ -1,10 +1,11 @@
-import './Timeline.module-CQrQaD-z.css';var e = {
-	Timeline: "Primer_Brand__Timeline-module__Timeline___BK9r7",
-	Timeline__item: "Primer_Brand__Timeline-module__Timeline__item___1RcCO",
+import './Timeline.module-CQrQaD-z.css';//#region src/Timeline/Timeline.module.css
+var e = "Primer_Brand__Timeline-module__Timeline___BK9r7", t = "Primer_Brand__Timeline-module__Timeline__item___1RcCO", n = {
+	Timeline: e,
+	Timeline__item: t,
 	"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 };
+export { e as Timeline, t as Timeline__item, n as default };
 
 //# sourceMappingURL=Timeline.module.js.map

package/esm/Token/Token.js

@@ -1,4 +1,4 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as 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                                                                                                   */

package/esm/Token/Token.js.map

@@ -1 +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\" 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 Token to display compact metadata that describes or supports adjacent content.\n * @see https://primer.style/brand/components/Token\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,WAAW,EAAO;EAC1C;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"}
+{"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\" 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 Token to display compact metadata that describes or supports adjacent content.\n * @see https://primer.style/brand/components/Token\n */\nexport const Token = Object.assign(_Token, {testIds})\n"],"mappings":";;;;;;;;AAcA,IAAa,IAAgB;CAAC;CAAW;CAAU;CAAW;AAAW,GAE5D,IAAsB,EAAc,IAkC3C,IAAU;CACd,MAAM;CACN,IAAI,gBAAgB;EAClB,OAAO,GAAG,KAAK,KAAK;CACtB;AACF,GAEM,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,CAAO,GAEjF,IAAiB,EACrB,GACA,EAAO,OACP,KAAiB,EAAO,4BACxB,MAAO,OAAO,EAAO,uBACrB,EAAO,kBAAkB,MACzB,CACF,GAEM,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,cAAmB,CAAA,IAEpD,EAAM,eAAqC,CAAa,KACxD,EAAM,aAAa,GAAe,EAChC,WAAW,EAAK,EAAO,eAAkB,EAAc,MAAM,SAAS,EACxE,CAAC;CAEC,CAAA,GAER,kBAAC,GAAD;EAAM,IAAG;EAAO,MAAK;EAAM,WAAW,EAAO;EAC1C;CACG,CAAA,CACN,EAAA,CAAA;CAiBJ,OAZI,EAFA,MAAO,MAEN,MAaF,QAbC;EACO;EACL,WAAW;EACX,eAAa,KAAU,EAAQ;EAC/B,OAAO;GAAC,GAAG;GAAuB,GAAG;EAAK;EAC1C,GAAI;YAEH;CACA,CAAA;AAeT,CACF,GAMa,IAAQ,OAAO,OAAO,GAAQ,EAAC,WAAO,CAAC"}

package/esm/Token/Token.module.js

@@ -1,16 +1,17 @@
-import './Token.module-DtWE9IPI.css';var e = {
-	Token: "Primer_Brand__Token-module__Token___nJxhW",
+import './Token.module-DtWE9IPI.css';//#region src/Token/Token.module.css
+var e = "Primer_Brand__Token-module__Token___nJxhW", t = "Primer_Brand__Token-module__Token__label___e3Cx3", n = "Primer_Brand__Token-module__Token__visual___Nlxfv", r = {
+	Token: e,
 	"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__label: t,
 	"Token__leading-visual": "Primer_Brand__Token-module__Token__leading-visual____uvYs",
-	Token__visual: "Primer_Brand__Token-module__Token__visual___Nlxfv"
+	Token__visual: n
 };
 //#endregion
-export { e as default };
+export { e as Token, t as Token__label, n as Token__visual, r as default };
 
 //# sourceMappingURL=Token.module.js.map

package/esm/Tooltip/Tooltip.js

@@ -1,4 +1,4 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { useId as t } from "../hooks/useId.js";
 import { useProvidedRefOrCreate as n } from "../hooks/useRef.js";
 import r from "./Tooltip.module.js";
@@ -99,7 +99,7 @@ var m = {
 			"data-direction": j,
 			...w,
 			role: b === "description" ? "tooltip" : void 0,
-			"aria-hidden": b === "label" ? !0 : void 0,
+			"aria-hidden": b === "label" || void 0,
 			id: E,
 			onMouseEnter: N,
 			onMouseLeave: P,

package/esm/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":[],"sources":["../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, {Children, useEffect, useRef, useState} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../hooks/useId'\nimport {getAnchoredPosition} from '@primer/behaviors'\nimport type {AnchorSide, AnchorAlignment} from '@primer/behaviors'\nimport {isSupported, apply} from '@oddbird/popover-polyfill/fn'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Tooltip.module.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tooltip/colors-with-modes.css'\nimport {BaseProps} from '../component-helpers'\n\ntype TooltipDirection = 'n' | 'e' | 's' | 'w'\nexport type TooltipProps = {\n  direction?: TooltipDirection\n  text: string\n  type?: 'label' | 'description'\n  children?: React.ReactNode\n} & BaseProps<HTMLDivElement>\n\nexport type TriggerPropsType = {\n  'aria-describedby'?: string\n  'aria-labelledby'?: string\n  'aria-label'?: string\n  onBlur?: React.FocusEventHandler\n  onFocus?: React.FocusEventHandler\n  onMouseEnter?: React.MouseEventHandler\n  onMouseLeave?: React.MouseEventHandler\n  ref?: React.RefObject<HTMLElement | null>\n}\n\n// map tooltip direction to anchoredPosition props\nconst directionToPosition: Record<TooltipDirection, {side: AnchorSide; align: AnchorAlignment}> = {\n  n: {side: 'outside-top', align: 'center'},\n  e: {side: 'outside-right', align: 'center'},\n  s: {side: 'outside-bottom', align: 'center'},\n  w: {side: 'outside-left', align: 'center'},\n}\n\n// map anchoredPosition props to tooltip direction\nconst positionToDirection: Record<string, TooltipDirection> = {\n  'outside-top-center': 'n',\n  'outside-right-center': 'e',\n  'outside-bottom-center': 's',\n  'outside-left-center': 'w',\n}\n\n// The list is from GitHub's custom-axe-rules https://github.com/github/github/blob/master/app/assets/modules/github/axe-custom-rules.ts#L3\nconst interactiveElements = [\n  'a[href]',\n  'button:not(:disabled)',\n  'summary',\n  'select',\n  'input:not([type=hidden])',\n  'textarea',\n]\n\nconst isInteractive = (element: HTMLElement) => {\n  return (\n    interactiveElements.some(selector => element.matches(selector)) ||\n    (element.hasAttribute('role') && element.getAttribute('role') === 'button')\n  )\n}\nexport const TooltipContext = React.createContext<{tooltipId?: string}>({})\n\nexport const Tooltip = React.forwardRef(\n  ({direction = 's', text, type = 'description', children, id, className, ...rest}: TooltipProps, forwardedRef) => {\n    const tooltipId = useId(id)\n    const child = (Children.only(children) as React.ReactElement<TriggerPropsType> | null) ?? null\n    const triggerRef = useProvidedRefOrCreate(forwardedRef as React.RefObject<HTMLElement | null> | null)\n    const tooltipElRef = useRef<HTMLDivElement>(null)\n    // Used to delay the closing of the tooltip to make sure the user can move the mouse from the trigger to the tooltip\n    const closeTooltipTimeoutRef = useRef<NodeJS.Timeout | null>(null)\n    const tooltipCloseTimeout = 200\n\n    const [calculatedDirection, setCalculatedDirection] = useState<TooltipDirection>(direction)\n\n    const openTooltip = React.useCallback(() => {\n      if (closeTooltipTimeoutRef.current) {\n        clearTimeout(closeTooltipTimeoutRef.current)\n        closeTooltipTimeoutRef.current = null\n      }\n\n      if (tooltipElRef.current && triggerRef.current && !tooltipElRef.current.matches(':popover-open')) {\n        tooltipElRef.current.showPopover()\n      }\n    }, [tooltipElRef, triggerRef])\n\n    const closeTooltip = React.useCallback(() => {\n      closeTooltipTimeoutRef.current = setTimeout(() => {\n        if (tooltipElRef.current && triggerRef.current && tooltipElRef.current.matches(':popover-open')) {\n          tooltipElRef.current.hidePopover()\n        }\n      }, tooltipCloseTimeout)\n    }, [tooltipElRef, triggerRef])\n\n    useEffect(() => {\n      return () => {\n        if (closeTooltipTimeoutRef.current) {\n          clearTimeout(closeTooltipTimeoutRef.current)\n        }\n      }\n    }, [closeTooltipTimeoutRef])\n\n    useEffect(() => {\n      if (!tooltipElRef.current || !triggerRef.current) return\n      /*\n       * ACCESSIBILITY CHECKS\n       */\n      // Has trigger element or any of its children interactive elements?\n      const isTriggerInteractive = isInteractive(triggerRef.current)\n      const triggerChildren = triggerRef.current.childNodes\n      const hasInteractiveChild = Array.from(triggerChildren).some(triggerChild => {\n        return triggerChild instanceof HTMLElement && isInteractive(triggerChild)\n      })\n\n      if (\n        !(isTriggerInteractive || hasInteractiveChild) &&\n        (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')\n      ) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          'The `Tooltip` component expects a single React element that contains interactive content. Consider using a `<button>` or equivalent interactive element instead.',\n        )\n      }\n\n      // If the tooltip is used for labelling the interactive element, the trigger element or any of its children should not have aria-label\n      if (type === 'label') {\n        const hasAriaLabel = triggerRef.current.hasAttribute('aria-label')\n        const hasAriaLabelInChildren = Array.from(triggerRef.current.childNodes).some(\n          triggerChild => triggerChild instanceof HTMLElement && triggerChild.hasAttribute('aria-label'),\n        )\n\n        if (\n          (hasAriaLabel || hasAriaLabelInChildren) &&\n          (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')\n        ) {\n          // eslint-disable-next-line no-console\n          console.warn(\n            'The label type `Tooltip` is going to be used here to label the trigger element. Please remove the aria-label from the trigger element.',\n          )\n        }\n      }\n\n      // SSR safe polyfill apply\n      if (typeof window !== 'undefined') {\n        if (!isSupported()) {\n          apply()\n        }\n      }\n\n      /*\n       * TOOLTIP POSITIONING\n       */\n      const tooltip = tooltipElRef.current\n      const trigger = triggerRef.current\n      tooltip.setAttribute('popover', 'auto')\n      const settings = {\n        side: directionToPosition[direction].side,\n        align: directionToPosition[direction].align,\n        anchorOffset: 8,\n      }\n\n      const positionSet = () => {\n        const {top, left, anchorAlign, anchorSide} = getAnchoredPosition(tooltip, trigger, settings)\n\n        tooltip.style.top = `${top}px`\n        tooltip.style.left = `${left}px`\n        // This is required to make sure the popover is positioned correctly i.e. when there is not enough space on the specified direction, we set a new direction to position the ::after\n        const calculatedDirectionString = positionToDirection[`${anchorSide}-${anchorAlign}` as string]\n        setCalculatedDirection(calculatedDirectionString)\n      }\n\n      tooltip.addEventListener('toggle', positionSet)\n\n      return () => {\n        tooltip.removeEventListener('toggle', positionSet)\n      }\n    }, [tooltipElRef, triggerRef, direction, type])\n\n    return (\n      <TooltipContext.Provider value={{tooltipId}}>\n        {child &&\n          React.cloneElement(child, {\n            ref: triggerRef,\n            // If it is a type description, we use tooltip to describe the trigger\n            'aria-describedby': type === 'description' ? tooltipId : child.props['aria-describedby'],\n            // If it is a label type, we use tooltip to label the trigger\n            'aria-labelledby': type === 'label' ? tooltipId : child.props['aria-labelledby'],\n            onBlur: (event: React.FocusEvent) => {\n              closeTooltip()\n              child.props.onBlur?.(event)\n            },\n            onFocus: (event: React.FocusEvent) => {\n              openTooltip()\n              child.props.onFocus?.(event)\n            },\n            onMouseEnter: (event: React.MouseEvent) => {\n              openTooltip()\n              child.props.onMouseEnter?.(event)\n            },\n            onMouseLeave: (event: React.MouseEvent) => {\n              closeTooltip()\n              child.props.onMouseLeave?.(event)\n            },\n          })}\n        <div\n          className={clsx(styles.Tooltip, className)}\n          ref={tooltipElRef}\n          data-direction={calculatedDirection}\n          {...rest}\n          // Only need tooltip role if the tooltip is a description for supplementary information\n          role={type === 'description' ? 'tooltip' : undefined}\n          // stop AT from announcing the tooltip twice when it is a label type because it will be announced with \"aria-labelledby\"\n          aria-hidden={type === 'label' ? true : undefined}\n          id={tooltipId}\n          // mouse leave and enter on the tooltip itself is needed to keep the tooltip open when the mouse is over the tooltip\n          onMouseEnter={openTooltip}\n          onMouseLeave={closeTooltip}\n        >\n          {text}\n        </div>\n      </TooltipContext.Provider>\n    )\n  },\n)\n"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","names":[],"sources":["../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, {Children, useEffect, useRef, useState} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../hooks/useId'\nimport {getAnchoredPosition} from '@primer/behaviors'\nimport type {AnchorSide, AnchorAlignment} from '@primer/behaviors'\nimport {isSupported, apply} from '@oddbird/popover-polyfill/fn'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Tooltip.module.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tooltip/colors-with-modes.css'\nimport {BaseProps} from '../component-helpers'\n\ntype TooltipDirection = 'n' | 'e' | 's' | 'w'\nexport type TooltipProps = {\n  direction?: TooltipDirection\n  text: string\n  type?: 'label' | 'description'\n  children?: React.ReactNode\n} & BaseProps<HTMLDivElement>\n\nexport type TriggerPropsType = {\n  'aria-describedby'?: string\n  'aria-labelledby'?: string\n  'aria-label'?: string\n  onBlur?: React.FocusEventHandler\n  onFocus?: React.FocusEventHandler\n  onMouseEnter?: React.MouseEventHandler\n  onMouseLeave?: React.MouseEventHandler\n  ref?: React.RefObject<HTMLElement | null>\n}\n\n// map tooltip direction to anchoredPosition props\nconst directionToPosition: Record<TooltipDirection, {side: AnchorSide; align: AnchorAlignment}> = {\n  n: {side: 'outside-top', align: 'center'},\n  e: {side: 'outside-right', align: 'center'},\n  s: {side: 'outside-bottom', align: 'center'},\n  w: {side: 'outside-left', align: 'center'},\n}\n\n// map anchoredPosition props to tooltip direction\nconst positionToDirection: Record<string, TooltipDirection> = {\n  'outside-top-center': 'n',\n  'outside-right-center': 'e',\n  'outside-bottom-center': 's',\n  'outside-left-center': 'w',\n}\n\n// The list is from GitHub's custom-axe-rules https://github.com/github/github/blob/master/app/assets/modules/github/axe-custom-rules.ts#L3\nconst interactiveElements = [\n  'a[href]',\n  'button:not(:disabled)',\n  'summary',\n  'select',\n  'input:not([type=hidden])',\n  'textarea',\n]\n\nconst isInteractive = (element: HTMLElement) => {\n  return (\n    interactiveElements.some(selector => element.matches(selector)) ||\n    (element.hasAttribute('role') && element.getAttribute('role') === 'button')\n  )\n}\nexport const TooltipContext = React.createContext<{tooltipId?: string}>({})\n\nexport const Tooltip = React.forwardRef(\n  ({direction = 's', text, type = 'description', children, id, className, ...rest}: TooltipProps, forwardedRef) => {\n    const tooltipId = useId(id)\n    const child = (Children.only(children) as React.ReactElement<TriggerPropsType> | null) ?? null\n    const triggerRef = useProvidedRefOrCreate(forwardedRef as React.RefObject<HTMLElement | null> | null)\n    const tooltipElRef = useRef<HTMLDivElement>(null)\n    // Used to delay the closing of the tooltip to make sure the user can move the mouse from the trigger to the tooltip\n    const closeTooltipTimeoutRef = useRef<NodeJS.Timeout | null>(null)\n    const tooltipCloseTimeout = 200\n\n    const [calculatedDirection, setCalculatedDirection] = useState<TooltipDirection>(direction)\n\n    const openTooltip = React.useCallback(() => {\n      if (closeTooltipTimeoutRef.current) {\n        clearTimeout(closeTooltipTimeoutRef.current)\n        closeTooltipTimeoutRef.current = null\n      }\n\n      if (tooltipElRef.current && triggerRef.current && !tooltipElRef.current.matches(':popover-open')) {\n        tooltipElRef.current.showPopover()\n      }\n    }, [tooltipElRef, triggerRef])\n\n    const closeTooltip = React.useCallback(() => {\n      closeTooltipTimeoutRef.current = setTimeout(() => {\n        if (tooltipElRef.current && triggerRef.current && tooltipElRef.current.matches(':popover-open')) {\n          tooltipElRef.current.hidePopover()\n        }\n      }, tooltipCloseTimeout)\n    }, [tooltipElRef, triggerRef])\n\n    useEffect(() => {\n      return () => {\n        if (closeTooltipTimeoutRef.current) {\n          clearTimeout(closeTooltipTimeoutRef.current)\n        }\n      }\n    }, [closeTooltipTimeoutRef])\n\n    useEffect(() => {\n      if (!tooltipElRef.current || !triggerRef.current) return\n      /*\n       * ACCESSIBILITY CHECKS\n       */\n      // Has trigger element or any of its children interactive elements?\n      const isTriggerInteractive = isInteractive(triggerRef.current)\n      const triggerChildren = triggerRef.current.childNodes\n      const hasInteractiveChild = Array.from(triggerChildren).some(triggerChild => {\n        return triggerChild instanceof HTMLElement && isInteractive(triggerChild)\n      })\n\n      if (\n        !(isTriggerInteractive || hasInteractiveChild) &&\n        (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')\n      ) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          'The `Tooltip` component expects a single React element that contains interactive content. Consider using a `<button>` or equivalent interactive element instead.',\n        )\n      }\n\n      // If the tooltip is used for labelling the interactive element, the trigger element or any of its children should not have aria-label\n      if (type === 'label') {\n        const hasAriaLabel = triggerRef.current.hasAttribute('aria-label')\n        const hasAriaLabelInChildren = Array.from(triggerRef.current.childNodes).some(\n          triggerChild => triggerChild instanceof HTMLElement && triggerChild.hasAttribute('aria-label'),\n        )\n\n        if (\n          (hasAriaLabel || hasAriaLabelInChildren) &&\n          (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')\n        ) {\n          // eslint-disable-next-line no-console\n          console.warn(\n            'The label type `Tooltip` is going to be used here to label the trigger element. Please remove the aria-label from the trigger element.',\n          )\n        }\n      }\n\n      // SSR safe polyfill apply\n      if (typeof window !== 'undefined') {\n        if (!isSupported()) {\n          apply()\n        }\n      }\n\n      /*\n       * TOOLTIP POSITIONING\n       */\n      const tooltip = tooltipElRef.current\n      const trigger = triggerRef.current\n      tooltip.setAttribute('popover', 'auto')\n      const settings = {\n        side: directionToPosition[direction].side,\n        align: directionToPosition[direction].align,\n        anchorOffset: 8,\n      }\n\n      const positionSet = () => {\n        const {top, left, anchorAlign, anchorSide} = getAnchoredPosition(tooltip, trigger, settings)\n\n        tooltip.style.top = `${top}px`\n        tooltip.style.left = `${left}px`\n        // This is required to make sure the popover is positioned correctly i.e. when there is not enough space on the specified direction, we set a new direction to position the ::after\n        const calculatedDirectionString = positionToDirection[`${anchorSide}-${anchorAlign}` as string]\n        setCalculatedDirection(calculatedDirectionString)\n      }\n\n      tooltip.addEventListener('toggle', positionSet)\n\n      return () => {\n        tooltip.removeEventListener('toggle', positionSet)\n      }\n    }, [tooltipElRef, triggerRef, direction, type])\n\n    return (\n      <TooltipContext.Provider value={{tooltipId}}>\n        {child &&\n          React.cloneElement(child, {\n            ref: triggerRef,\n            // If it is a type description, we use tooltip to describe the trigger\n            'aria-describedby': type === 'description' ? tooltipId : child.props['aria-describedby'],\n            // If it is a label type, we use tooltip to label the trigger\n            'aria-labelledby': type === 'label' ? tooltipId : child.props['aria-labelledby'],\n            onBlur: (event: React.FocusEvent) => {\n              closeTooltip()\n              child.props.onBlur?.(event)\n            },\n            onFocus: (event: React.FocusEvent) => {\n              openTooltip()\n              child.props.onFocus?.(event)\n            },\n            onMouseEnter: (event: React.MouseEvent) => {\n              openTooltip()\n              child.props.onMouseEnter?.(event)\n            },\n            onMouseLeave: (event: React.MouseEvent) => {\n              closeTooltip()\n              child.props.onMouseLeave?.(event)\n            },\n          })}\n        <div\n          className={clsx(styles.Tooltip, className)}\n          ref={tooltipElRef}\n          data-direction={calculatedDirection}\n          {...rest}\n          // Only need tooltip role if the tooltip is a description for supplementary information\n          role={type === 'description' ? 'tooltip' : undefined}\n          // stop AT from announcing the tooltip twice when it is a label type because it will be announced with \"aria-labelledby\"\n          aria-hidden={type === 'label' ? true : undefined}\n          id={tooltipId}\n          // mouse leave and enter on the tooltip itself is needed to keep the tooltip open when the mouse is over the tooltip\n          onMouseEnter={openTooltip}\n          onMouseLeave={closeTooltip}\n        >\n          {text}\n        </div>\n      </TooltipContext.Provider>\n    )\n  },\n)\n"],"mappings":"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"}

package/esm/Tooltip/Tooltip.module.js

@@ -1,9 +1,10 @@
-import './Tooltip.module-5Km7qGR5.css';var e = {
-	Tooltip: "Primer_Brand__Tooltip-module__Tooltip___0Eipx",
+import './Tooltip.module-5Km7qGR5.css';//#region src/Tooltip/Tooltip.module.css
+var e = "Primer_Brand__Tooltip-module__Tooltip___0Eipx", t = {
+	Tooltip: e,
 	":popover-open": "Primer_Brand__Tooltip-module__:popover-open___GpZlX",
 	"tooltip-appear": "Primer_Brand__Tooltip-module__tooltip-appear___hAyFD"
 };
 //#endregion
-export { e as default };
+export { e as Tooltip, t as default };
 
 //# sourceMappingURL=Tooltip.module.js.map

package/esm/VideoPlayer/VideoPlayer.d.ts

@@ -19,8 +19,8 @@ type VideoPlayerProps = {
     playIcon?: FunctionComponent;
 } & HTMLProps<HTMLVideoElement>;
 export declare const VideoPlayer: React.ForwardRefExoticComponent<Omit<VideoPlayerProps, "ref"> & React.RefAttributes<HTMLVideoElement>> & {
-    Source: (props: React.HTMLProps<HTMLSourceElement>) => import("react/jsx-runtime").JSX.Element;
-    Track: ({ kind, ...rest }: React.HTMLProps<HTMLTrackElement>) => import("react/jsx-runtime").JSX.Element;
+    Source: (props: React.HTMLProps<HTMLSourceElement>) => React.JSX.Element;
+    Track: ({ kind, ...rest }: React.HTMLProps<HTMLTrackElement>) => React.JSX.Element;
     Provider: React.ForwardRefExoticComponent<{
         children?: React.ReactNode | undefined;
     } & React.RefAttributes<HTMLVideoElement>>;

package/esm/VideoPlayer/VideoPlayer.js

@@ -1,7 +1,7 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { useProvidedRefOrCreate as t } from "../hooks/useRef.js";
 import { Text as n } from "../Text/Text.js";
-import { MarkGithubIcon as r } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { MarkGithubIcon as r } from "../node_modules/@primer/octicons-react/dist/icons/MarkGithubIcon.js";
 import { PlayIcon as i } from "./components/PlayIcon/PlayIcon.js";
 import a from "./VideoPlayer.module.js";
 import { VideoContext as o, VideoProvider as s, useVideo as c } from "./hooks/useVideo.js";

package/esm/VideoPlayer/VideoPlayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoPlayer.js","names":[],"sources":["../../src/VideoPlayer/VideoPlayer.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, useContext, type HTMLProps, type FunctionComponent} from 'react'\nimport {clsx} from 'clsx'\nimport {Text} from '../Text'\nimport {type AnimateProps} from '../animation'\nimport {\n  Captions,\n  CCButton,\n  ControlsBar,\n  FullScreenButton,\n  MuteButton,\n  PlayIcon as DefaultPlayIcon,\n  PlayPauseButton,\n  SeekControl,\n  VolumeControl,\n} from './components'\nimport {MarkGithubIcon} from '@primer/octicons-react'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/video-player/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/video-player/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './VideoPlayer.module.css'\nimport {useVideoResizeObserver} from './hooks/'\nimport {useVideo, VideoContext, VideoProvider} from './hooks/useVideo'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\n\ntype VideoPlayerProps = {\n  title: string\n  visuallyHiddenTitle?: boolean\n  showBranding?: boolean\n  animate?: AnimateProps\n  showPlayPauseButton?: boolean\n  showSeekControl?: boolean\n  showCCButton?: boolean\n  showMuteButton?: boolean\n  showVolumeControl?: boolean\n  showFullScreenButton?: boolean\n  playIcon?: FunctionComponent\n} & HTMLProps<HTMLVideoElement>\n\nconst Root = forwardRef<HTMLVideoElement, VideoPlayerProps>(\n  (\n    {\n      title,\n      visuallyHiddenTitle,\n      showBranding = true,\n      children,\n      className,\n      showPlayPauseButton = true,\n      showSeekControl = true,\n      showCCButton = true,\n      showMuteButton = true,\n      showVolumeControl = true,\n      showFullScreenButton = true,\n      playIcon: PlayIcon = () => <DefaultPlayIcon className={styles.VideoPlayer__playButton} />,\n      ...rest\n    }: VideoPlayerProps,\n    forwardedRef,\n  ) => {\n    const videoContext = useVideo()\n    const {ccEnabled, fullscreenRef, isPlaying, ref, togglePlaying} = videoContext\n    const forwardedRefCallback = useCallback(\n      (node: HTMLVideoElement | null) => {\n        assignRef(forwardedRef, node)\n      },\n      [forwardedRef],\n    )\n    const providedRef = useProvidedRefOrCreate<HTMLVideoElement>(forwardedRefCallback)\n\n    const setVideoElementRef = useCallback(\n      (node: HTMLVideoElement | null) => {\n        assignRef(ref, node)\n        assignRef(providedRef, node)\n      },\n      [ref, providedRef],\n    )\n\n    const isSmall = useVideoResizeObserver({\n      videoWrapperRef: fullscreenRef,\n      className: styles['VideoPlayer__container--small'],\n    })\n\n    const showControlsRow1 = showPlayPauseButton || showSeekControl\n    const showControlsRow2 = showCCButton || showMuteButton || showVolumeControl || showFullScreenButton\n    const showControlsBar = showControlsRow1 || showControlsRow2\n\n    return (\n      <div data-video-player-container className={styles.VideoPlayer__container} ref={fullscreenRef}>\n        <div className={styles.VideoPlayer__overlayContainer}>\n          <video\n            ref={setVideoElementRef}\n            title={title}\n            controls={false}\n            className={clsx(styles.VideoPlayer, className)}\n            {...rest}\n          >\n            {children}\n            <track kind=\"captions\" />\n          </video>\n          {showBranding || !visuallyHiddenTitle ? (\n            <div className={clsx(styles.VideoPlayer__title, isPlaying && styles['VideoPlayer__title--hidden'])}>\n              {showBranding && <MarkGithubIcon size={40} aria-label=\"GitHub logo\" />}\n              {!visuallyHiddenTitle && (\n                <Text size=\"400\" weight=\"medium\" className={styles.VideoPlayer__controlTextColor}>\n                  {title}\n                </Text>\n              )}\n            </div>\n          ) : null}\n          <button\n            className={clsx(\n              styles.VideoPlayer__playButtonOverlay,\n              isPlaying && styles['VideoPlayer__playButtonOverlay--transparent'],\n            )}\n            onClick={togglePlaying}\n            aria-label={isPlaying ? 'Pause' : 'Play'}\n          >\n            {!isPlaying && <PlayIcon />}\n          </button>\n        </div>\n\n        {ccEnabled && <Captions />}\n        {showControlsBar && (\n          <ControlsBar>\n            {showControlsRow1 && (\n              <div className={styles['VideoPlayer__controlsBar__row1']}>\n                {showPlayPauseButton && <PlayPauseButton />}\n                {showSeekControl && <SeekControl />}\n              </div>\n            )}\n            {showControlsRow2 && (\n              <div className={styles['VideoPlayer__controlsBar__row2']}>\n                {showCCButton && <CCButton />}\n                {showMuteButton && <MuteButton />}\n                {showVolumeControl && !isSmall && <VolumeControl />}\n                {showFullScreenButton && <FullScreenButton />}\n              </div>\n            )}\n          </ControlsBar>\n        )}\n      </div>\n    )\n  },\n)\n\nfunction assignRef<T>(targetRef: React.RefObject<T> | React.Ref<T> | null | undefined, value: T | null) {\n  if (!targetRef) return\n\n  if (typeof targetRef === 'function') {\n    targetRef(value)\n    return\n  }\n\n  ;(targetRef as React.MutableRefObject<T | null>).current = value\n}\n\nconst VideoPlayerSource = (props: React.HTMLProps<HTMLSourceElement>) => <source {...props} />\n\nconst VideoPlayerTrack = ({kind = 'captions', ...rest}: React.HTMLProps<HTMLTrackElement>) => (\n  <track kind={kind} {...rest} />\n)\n\nconst RootWithProvider = forwardRef<HTMLVideoElement, VideoPlayerProps>((props, ref) => {\n  const context = useContext(VideoContext)\n\n  return context ? (\n    <Root ref={ref} {...props} />\n  ) : (\n    <VideoProvider>\n      <Root ref={ref} {...props} />\n    </VideoProvider>\n  )\n})\n\nexport const VideoPlayer = Object.assign(RootWithProvider, {\n  Source: VideoPlayerSource,\n  Track: VideoPlayerTrack,\n  Provider: VideoProvider,\n})\n"],"mappings":"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"}
+{"version":3,"file":"VideoPlayer.js","names":[],"sources":["../../src/VideoPlayer/VideoPlayer.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, useContext, type HTMLProps, type FunctionComponent} from 'react'\nimport {clsx} from 'clsx'\nimport {Text} from '../Text'\nimport {type AnimateProps} from '../animation'\nimport {\n  Captions,\n  CCButton,\n  ControlsBar,\n  FullScreenButton,\n  MuteButton,\n  PlayIcon as DefaultPlayIcon,\n  PlayPauseButton,\n  SeekControl,\n  VolumeControl,\n} from './components'\nimport {MarkGithubIcon} from '@primer/octicons-react'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/video-player/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/video-player/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './VideoPlayer.module.css'\nimport {useVideoResizeObserver} from './hooks/'\nimport {useVideo, VideoContext, VideoProvider} from './hooks/useVideo'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\n\ntype VideoPlayerProps = {\n  title: string\n  visuallyHiddenTitle?: boolean\n  showBranding?: boolean\n  animate?: AnimateProps\n  showPlayPauseButton?: boolean\n  showSeekControl?: boolean\n  showCCButton?: boolean\n  showMuteButton?: boolean\n  showVolumeControl?: boolean\n  showFullScreenButton?: boolean\n  playIcon?: FunctionComponent\n} & HTMLProps<HTMLVideoElement>\n\nconst Root = forwardRef<HTMLVideoElement, VideoPlayerProps>(\n  (\n    {\n      title,\n      visuallyHiddenTitle,\n      showBranding = true,\n      children,\n      className,\n      showPlayPauseButton = true,\n      showSeekControl = true,\n      showCCButton = true,\n      showMuteButton = true,\n      showVolumeControl = true,\n      showFullScreenButton = true,\n      playIcon: PlayIcon = () => <DefaultPlayIcon className={styles.VideoPlayer__playButton} />,\n      ...rest\n    }: VideoPlayerProps,\n    forwardedRef,\n  ) => {\n    const videoContext = useVideo()\n    const {ccEnabled, fullscreenRef, isPlaying, ref, togglePlaying} = videoContext\n    const forwardedRefCallback = useCallback(\n      (node: HTMLVideoElement | null) => {\n        assignRef(forwardedRef, node)\n      },\n      [forwardedRef],\n    )\n    const providedRef = useProvidedRefOrCreate<HTMLVideoElement>(forwardedRefCallback)\n\n    const setVideoElementRef = useCallback(\n      (node: HTMLVideoElement | null) => {\n        assignRef(ref, node)\n        assignRef(providedRef, node)\n      },\n      [ref, providedRef],\n    )\n\n    const isSmall = useVideoResizeObserver({\n      videoWrapperRef: fullscreenRef,\n      className: styles['VideoPlayer__container--small'],\n    })\n\n    const showControlsRow1 = showPlayPauseButton || showSeekControl\n    const showControlsRow2 = showCCButton || showMuteButton || showVolumeControl || showFullScreenButton\n    const showControlsBar = showControlsRow1 || showControlsRow2\n\n    return (\n      <div data-video-player-container className={styles.VideoPlayer__container} ref={fullscreenRef}>\n        <div className={styles.VideoPlayer__overlayContainer}>\n          <video\n            ref={setVideoElementRef}\n            title={title}\n            controls={false}\n            className={clsx(styles.VideoPlayer, className)}\n            {...rest}\n          >\n            {children}\n            <track kind=\"captions\" />\n          </video>\n          {showBranding || !visuallyHiddenTitle ? (\n            <div className={clsx(styles.VideoPlayer__title, isPlaying && styles['VideoPlayer__title--hidden'])}>\n              {showBranding && <MarkGithubIcon size={40} aria-label=\"GitHub logo\" />}\n              {!visuallyHiddenTitle && (\n                <Text size=\"400\" weight=\"medium\" className={styles.VideoPlayer__controlTextColor}>\n                  {title}\n                </Text>\n              )}\n            </div>\n          ) : null}\n          <button\n            className={clsx(\n              styles.VideoPlayer__playButtonOverlay,\n              isPlaying && styles['VideoPlayer__playButtonOverlay--transparent'],\n            )}\n            onClick={togglePlaying}\n            aria-label={isPlaying ? 'Pause' : 'Play'}\n          >\n            {!isPlaying && <PlayIcon />}\n          </button>\n        </div>\n\n        {ccEnabled && <Captions />}\n        {showControlsBar && (\n          <ControlsBar>\n            {showControlsRow1 && (\n              <div className={styles['VideoPlayer__controlsBar__row1']}>\n                {showPlayPauseButton && <PlayPauseButton />}\n                {showSeekControl && <SeekControl />}\n              </div>\n            )}\n            {showControlsRow2 && (\n              <div className={styles['VideoPlayer__controlsBar__row2']}>\n                {showCCButton && <CCButton />}\n                {showMuteButton && <MuteButton />}\n                {showVolumeControl && !isSmall && <VolumeControl />}\n                {showFullScreenButton && <FullScreenButton />}\n              </div>\n            )}\n          </ControlsBar>\n        )}\n      </div>\n    )\n  },\n)\n\nfunction assignRef<T>(targetRef: React.RefObject<T> | React.Ref<T> | null | undefined, value: T | null) {\n  if (!targetRef) return\n\n  if (typeof targetRef === 'function') {\n    targetRef(value)\n    return\n  }\n\n  ;(targetRef as React.MutableRefObject<T | null>).current = value\n}\n\nconst VideoPlayerSource = (props: React.HTMLProps<HTMLSourceElement>) => <source {...props} />\n\nconst VideoPlayerTrack = ({kind = 'captions', ...rest}: React.HTMLProps<HTMLTrackElement>) => (\n  <track kind={kind} {...rest} />\n)\n\nconst RootWithProvider = forwardRef<HTMLVideoElement, VideoPlayerProps>((props, ref) => {\n  const context = useContext(VideoContext)\n\n  return context ? (\n    <Root ref={ref} {...props} />\n  ) : (\n    <VideoProvider>\n      <Root ref={ref} {...props} />\n    </VideoProvider>\n  )\n})\n\nexport const VideoPlayer = Object.assign(RootWithProvider, {\n  Source: VideoPlayerSource,\n  Track: VideoPlayerTrack,\n  Provider: VideoProvider,\n})\n"],"mappings":"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"}

package/esm/VideoPlayer/VideoPlayer.module.js

@@ -1,37 +1,38 @@
-import './VideoPlayer.module-BpVcE2WB.css';var e = {
-	VideoPlayer__container: "Primer_Brand__VideoPlayer-module__VideoPlayer__container___zr6Iu",
-	VideoPlayer__overlayContainer: "Primer_Brand__VideoPlayer-module__VideoPlayer__overlayContainer___KADCQ",
-	VideoPlayer: "Primer_Brand__VideoPlayer-module__VideoPlayer___GJSo9",
+import './VideoPlayer.module-BpVcE2WB.css';//#region src/VideoPlayer/VideoPlayer.module.css
+var e = "Primer_Brand__VideoPlayer-module__VideoPlayer__container___zr6Iu", t = "Primer_Brand__VideoPlayer-module__VideoPlayer__overlayContainer___KADCQ", n = "Primer_Brand__VideoPlayer-module__VideoPlayer___GJSo9", r = "Primer_Brand__VideoPlayer-module__VideoPlayer__playButtonOverlay___uXPU2", i = "Primer_Brand__VideoPlayer-module__VideoPlayer__playButton___UmSvY", a = "Primer_Brand__VideoPlayer-module__VideoPlayer__title___3e5F_", o = "Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar___B_mfd", s = "Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar__row1___Vz_Zo", c = "Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar__row2___pzzds", l = "Primer_Brand__VideoPlayer-module__VideoPlayer__controls___FYZtO", u = "Primer_Brand__VideoPlayer-module__VideoPlayer__iconControl____tvm5", d = "Primer_Brand__VideoPlayer-module__VideoPlayer__closedCaption___ODIq4", f = "Primer_Brand__VideoPlayer-module__VideoPlayer__seek___OwcjI", p = "Primer_Brand__VideoPlayer-module__VideoPlayer__progressTime___9p6bX", m = "Primer_Brand__VideoPlayer-module__VideoPlayer__totalTime___5JBGC", h = "Primer_Brand__VideoPlayer-module__VideoPlayer__progressBar___86Eto", g = "Primer_Brand__VideoPlayer-module__VideoPlayer__ccOff___NHsg6", _ = "Primer_Brand__VideoPlayer-module__VideoPlayer__ccText___7TAGa", v = "Primer_Brand__VideoPlayer-module__VideoPlayer__range___h4_en", y = "Primer_Brand__VideoPlayer-module__VideoPlayer__rangeInput___ma_RQ", b = "Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr", x = "Primer_Brand__VideoPlayer-module__VideoPlayer__tooltip___QrVwV", S = "Primer_Brand__VideoPlayer-module__VideoPlayer__tooltipContent___IOBAO", C = "Primer_Brand__VideoPlayer-module__VideoPlayer__tooltipText___SPfNc", w = "Primer_Brand__VideoPlayer-module__VideoPlayer__controlTextColor___Ih3yg", T = "Primer_Brand__VideoPlayer-module__VideoPlayer__seekTime___Wb0Ol", E = {
+	VideoPlayer__container: e,
+	VideoPlayer__overlayContainer: t,
+	VideoPlayer: n,
 	"VideoPlayer__container--fullscreen": "Primer_Brand__VideoPlayer-module__VideoPlayer__container--fullscreen___MChxa",
-	VideoPlayer__playButtonOverlay: "Primer_Brand__VideoPlayer-module__VideoPlayer__playButtonOverlay___uXPU2",
+	VideoPlayer__playButtonOverlay: r,
 	"VideoPlayer__playButtonOverlay--transparent": "Primer_Brand__VideoPlayer-module__VideoPlayer__playButtonOverlay--transparent___0UmfX",
-	VideoPlayer__playButton: "Primer_Brand__VideoPlayer-module__VideoPlayer__playButton___UmSvY",
-	VideoPlayer__title: "Primer_Brand__VideoPlayer-module__VideoPlayer__title___3e5F_",
+	VideoPlayer__playButton: i,
+	VideoPlayer__title: a,
 	"VideoPlayer__title--hidden": "Primer_Brand__VideoPlayer-module__VideoPlayer__title--hidden___t7cGG",
-	VideoPlayer__controlsBar: "Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar___B_mfd",
-	VideoPlayer__controlsBar__row1: "Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar__row1___Vz_Zo",
-	VideoPlayer__controlsBar__row2: "Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar__row2___pzzds",
-	VideoPlayer__controls: "Primer_Brand__VideoPlayer-module__VideoPlayer__controls___FYZtO",
-	VideoPlayer__iconControl: "Primer_Brand__VideoPlayer-module__VideoPlayer__iconControl____tvm5",
-	VideoPlayer__closedCaption: "Primer_Brand__VideoPlayer-module__VideoPlayer__closedCaption___ODIq4",
-	VideoPlayer__seek: "Primer_Brand__VideoPlayer-module__VideoPlayer__seek___OwcjI",
-	VideoPlayer__progressTime: "Primer_Brand__VideoPlayer-module__VideoPlayer__progressTime___9p6bX",
+	VideoPlayer__controlsBar: o,
+	VideoPlayer__controlsBar__row1: s,
+	VideoPlayer__controlsBar__row2: c,
+	VideoPlayer__controls: l,
+	VideoPlayer__iconControl: u,
+	VideoPlayer__closedCaption: d,
+	VideoPlayer__seek: f,
+	VideoPlayer__progressTime: p,
 	"VideoPlayer__container--small": "Primer_Brand__VideoPlayer-module__VideoPlayer__container--small___aQE4d",
-	VideoPlayer__totalTime: "Primer_Brand__VideoPlayer-module__VideoPlayer__totalTime___5JBGC",
-	VideoPlayer__progressBar: "Primer_Brand__VideoPlayer-module__VideoPlayer__progressBar___86Eto",
-	VideoPlayer__ccOff: "Primer_Brand__VideoPlayer-module__VideoPlayer__ccOff___NHsg6",
-	VideoPlayer__ccText: "Primer_Brand__VideoPlayer-module__VideoPlayer__ccText___7TAGa",
-	VideoPlayer__range: "Primer_Brand__VideoPlayer-module__VideoPlayer__range___h4_en",
-	VideoPlayer__rangeInput: "Primer_Brand__VideoPlayer-module__VideoPlayer__rangeInput___ma_RQ",
-	VideoPlayer__rangeProgress: "Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr",
-	VideoPlayer__tooltip: "Primer_Brand__VideoPlayer-module__VideoPlayer__tooltip___QrVwV",
-	VideoPlayer__tooltipContent: "Primer_Brand__VideoPlayer-module__VideoPlayer__tooltipContent___IOBAO",
-	VideoPlayer__tooltipText: "Primer_Brand__VideoPlayer-module__VideoPlayer__tooltipText___SPfNc",
+	VideoPlayer__totalTime: m,
+	VideoPlayer__progressBar: h,
+	VideoPlayer__ccOff: g,
+	VideoPlayer__ccText: _,
+	VideoPlayer__range: v,
+	VideoPlayer__rangeInput: y,
+	VideoPlayer__rangeProgress: b,
+	VideoPlayer__tooltip: x,
+	VideoPlayer__tooltipContent: S,
+	VideoPlayer__tooltipText: C,
 	"VideoPlayer__tooltip-visible": "Primer_Brand__VideoPlayer-module__VideoPlayer__tooltip-visible___nqoFm",
-	VideoPlayer__controlTextColor: "Primer_Brand__VideoPlayer-module__VideoPlayer__controlTextColor___Ih3yg",
-	VideoPlayer__seekTime: "Primer_Brand__VideoPlayer-module__VideoPlayer__seekTime___Wb0Ol"
+	VideoPlayer__controlTextColor: w,
+	VideoPlayer__seekTime: T
 };
 //#endregion
-export { e as default };
+export { n as VideoPlayer, g as VideoPlayer__ccOff, _ as VideoPlayer__ccText, d as VideoPlayer__closedCaption, e as VideoPlayer__container, w as VideoPlayer__controlTextColor, l as VideoPlayer__controls, o as VideoPlayer__controlsBar, s as VideoPlayer__controlsBar__row1, c as VideoPlayer__controlsBar__row2, u as VideoPlayer__iconControl, t as VideoPlayer__overlayContainer, i as VideoPlayer__playButton, r as VideoPlayer__playButtonOverlay, h as VideoPlayer__progressBar, p as VideoPlayer__progressTime, v as VideoPlayer__range, y as VideoPlayer__rangeInput, b as VideoPlayer__rangeProgress, f as VideoPlayer__seek, T as VideoPlayer__seekTime, a as VideoPlayer__title, x as VideoPlayer__tooltip, S as VideoPlayer__tooltipContent, C as VideoPlayer__tooltipText, m as VideoPlayer__totalTime, E as default };
 
 //# sourceMappingURL=VideoPlayer.module.js.map

package/esm/VideoPlayer/components/CCButton/CCButton.d.ts

@@ -1,3 +1,3 @@
-import { type HTMLAttributes } from 'react';
-export declare const CCButton: ({ className, ...props }: HTMLAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
+import React, { type HTMLAttributes } from 'react';
+export declare const CCButton: ({ className, ...props }: HTMLAttributes<HTMLButtonElement>) => React.JSX.Element;
 //# sourceMappingURL=CCButton.d.ts.map

package/esm/VideoPlayer/components/CCButton/CCButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CCButton.d.ts","sourceRoot":"","sources":["../../../../src/VideoPlayer/components/CCButton/CCButton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,KAAK,cAAc,EAAC,MAAM,OAAO,CAAA;AAQhD,eAAO,MAAM,QAAQ,GAAI,yBAAuB,cAAc,CAAC,iBAAiB,CAAC,4CAoBhF,CAAA"}
+{"version":3,"file":"CCButton.d.ts","sourceRoot":"","sources":["../../../../src/VideoPlayer/components/CCButton/CCButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,KAAK,cAAc,EAAC,MAAM,OAAO,CAAA;AAQhD,eAAO,MAAM,QAAQ,GAAI,yBAAuB,cAAc,CAAC,iBAAiB,CAAC,sBAoBhF,CAAA"}

package/esm/VideoPlayer/components/CCButton/CCButton.js

@@ -1,4 +1,4 @@
-import e from "../../../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../../../node_modules/clsx/dist/clsx.js";
 import { Text as t } from "../../../Text/Text.js";
 import n from "../../VideoPlayer.module.js";
 import { useVideo as r } from "../../hooks/useVideo.js";

package/esm/VideoPlayer/components/CCButton/CCButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CCButton.js","names":[],"sources":["../../../../src/VideoPlayer/components/CCButton/CCButton.tsx"],"sourcesContent":["import React, {type HTMLAttributes} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Text} from '../../../Text'\nimport styles from '../../VideoPlayer.module.css'\nimport {VideoTooltip} from '../'\nimport {useVideo} from '../../hooks/useVideo'\n\nexport const CCButton = ({className, ...props}: HTMLAttributes<HTMLButtonElement>) => {\n  const {ccEnabled, toggleCC} = useVideo()\n\n  return (\n    <button\n      className={clsx(\n        className,\n        styles.VideoPlayer__iconControl,\n        styles.VideoPlayer__closedCaption,\n        !ccEnabled && styles.VideoPlayer__ccOff,\n      )}\n      onClick={toggleCC}\n      {...props}\n    >\n      <Text className={styles.VideoPlayer__ccText} aria-hidden=\"true\">\n        CC\n      </Text>\n      <VideoTooltip>{ccEnabled ? 'Disable captions' : 'Enable captions'}</VideoTooltip>\n    </button>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,IAAa,KAAY,EAAC,cAAW,GAAG,QAA8C;CACpF,IAAM,EAAC,cAAW,gBAAY,GAAU;AAExC,QACE,kBAAC,UAAD;EACE,WAAW,EACT,GACA,EAAO,0BACP,EAAO,4BACP,CAAC,KAAa,EAAO,mBACtB;EACD,SAAS;EACT,GAAI;YARN,CAUE,kBAAC,GAAD;GAAM,WAAW,EAAO;GAAqB,eAAY;aAAO;GAEzD,CAAA,EACP,kBAAC,GAAD,EAAA,UAAe,IAAY,qBAAqB,mBAAiC,CAAA,CAC1E"}
+{"version":3,"file":"CCButton.js","names":[],"sources":["../../../../src/VideoPlayer/components/CCButton/CCButton.tsx"],"sourcesContent":["import React, {type HTMLAttributes} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Text} from '../../../Text'\nimport styles from '../../VideoPlayer.module.css'\nimport {VideoTooltip} from '../'\nimport {useVideo} from '../../hooks/useVideo'\n\nexport const CCButton = ({className, ...props}: HTMLAttributes<HTMLButtonElement>) => {\n  const {ccEnabled, toggleCC} = useVideo()\n\n  return (\n    <button\n      className={clsx(\n        className,\n        styles.VideoPlayer__iconControl,\n        styles.VideoPlayer__closedCaption,\n        !ccEnabled && styles.VideoPlayer__ccOff,\n      )}\n      onClick={toggleCC}\n      {...props}\n    >\n      <Text className={styles.VideoPlayer__ccText} aria-hidden=\"true\">\n        CC\n      </Text>\n      <VideoTooltip>{ccEnabled ? 'Disable captions' : 'Enable captions'}</VideoTooltip>\n    </button>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,IAAa,KAAY,EAAC,cAAW,GAAG,QAA8C;CACpF,IAAM,EAAC,cAAW,gBAAY,EAAS;CAEvC,OACE,kBAAC,UAAD;EACE,WAAW,EACT,GACA,EAAO,0BACP,EAAO,4BACP,CAAC,KAAa,EAAO,kBACvB;EACA,SAAS;EACT,GAAI;YARN,CAUE,kBAAC,GAAD;GAAM,WAAW,EAAO;GAAqB,eAAY;aAAO;EAE1D,CAAA,GACN,kBAAC,GAAD,EAAA,UAAe,IAAY,qBAAqB,kBAAgC,CAAA,CAC1E;;AAEZ"}

package/esm/VideoPlayer/components/Captions/Captions.d.ts

@@ -1,3 +1,3 @@
-import { type HTMLAttributes } from 'react';
-export declare const Captions: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element | null;
+import React, { type HTMLAttributes } from 'react';
+export declare const Captions: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => React.JSX.Element | null;
 //# sourceMappingURL=Captions.d.ts.map

package/esm/VideoPlayer/components/Captions/Captions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Captions.d.ts","sourceRoot":"","sources":["../../../../src/VideoPlayer/components/Captions/Captions.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,KAAK,cAAc,EAAsB,MAAM,OAAO,CAAA;AAOrE,eAAO,MAAM,QAAQ,GAAI,yBAAuB,cAAc,CAAC,cAAc,CAAC,mDA6C7E,CAAA"}
+{"version":3,"file":"Captions.d.ts","sourceRoot":"","sources":["../../../../src/VideoPlayer/components/Captions/Captions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,KAAK,cAAc,EAAsB,MAAM,OAAO,CAAA;AAOrE,eAAO,MAAM,QAAQ,GAAI,yBAAuB,cAAc,CAAC,cAAc,CAAC,6BA6C7E,CAAA"}

package/esm/VideoPlayer/components/Captions/Captions.js

@@ -1,4 +1,4 @@
-import e from "../../../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../../../node_modules/clsx/dist/clsx.js";
 import { Text as t } from "../../../Text/Text.js";
 import n from "./Captions.module.js";
 import { useVideo as r } from "../../hooks/useVideo.js";

package/esm/VideoPlayer/components/Captions/Captions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Captions.js","names":[],"sources":["../../../../src/VideoPlayer/components/Captions/Captions.tsx"],"sourcesContent":["import React, {type HTMLAttributes, useEffect, useState} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Text} from '../../../Text'\nimport styles from './Captions.module.css'\nimport {useVideo} from '../../hooks/useVideo'\n\nexport const Captions = ({className, ...props}: HTMLAttributes<HTMLDivElement>) => {\n  const [caption, setCaption] = useState('')\n  const {ref} = useVideo()\n\n  const videoRef = ref?.current\n  const trackInformation = videoRef?.textTracks[0]?.cues\n\n  useEffect(() => {\n    if (!videoRef) {\n      return\n    }\n\n    const compareAndSetCaption = () => {\n      if (!trackInformation) {\n        return\n      }\n\n      for (let i = 0; i < trackInformation.length; i++) {\n        const cue = trackInformation[i]\n\n        if (videoRef.currentTime >= cue.startTime && videoRef.currentTime < cue.endTime) {\n          setCaption(cue['text'])\n          break\n        }\n\n        setCaption('')\n      }\n    }\n\n    videoRef.addEventListener('timeupdate', compareAndSetCaption)\n\n    return () => videoRef.removeEventListener('timeupdate', compareAndSetCaption)\n  }, [videoRef, trackInformation])\n\n  if (!trackInformation) {\n    return null\n  }\n\n  return (\n    <div className={clsx(className, styles.Captions)} {...props}>\n      <Text as=\"p\" className={styles.Captions__text} align=\"center\">\n        {caption}\n      </Text>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAOA,IAAa,KAAY,EAAC,cAAW,GAAG,QAA2C;CACjF,IAAM,CAAC,GAAS,KAAc,EAAS,GAAG,EACpC,EAAC,WAAO,GAAU,EAElB,IAAW,GAAK,SAChB,IAAmB,GAAU,WAAW,IAAI;AAiClD,QA/BA,QAAgB;AACd,MAAI,CAAC,EACH;EAGF,IAAM,UAA6B;AAC5B,SAIL,MAAK,IAAI,IAAI,GAAG,IAAI,EAAiB,QAAQ,KAAK;IAChD,IAAM,IAAM,EAAiB;AAE7B,QAAI,EAAS,eAAe,EAAI,aAAa,EAAS,cAAc,EAAI,SAAS;AAC/E,OAAW,EAAI,KAAQ;AACvB;;AAGF,MAAW,GAAG;;;AAMlB,SAFA,EAAS,iBAAiB,cAAc,EAAqB,QAEhD,EAAS,oBAAoB,cAAc,EAAqB;IAC5E,CAAC,GAAU,EAAiB,CAAC,EAE3B,IAKH,kBAAC,OAAD;EAAK,WAAW,EAAK,GAAW,EAAO,SAAS;EAAE,GAAI;YACpD,kBAAC,GAAD;GAAM,IAAG;GAAI,WAAW,EAAO;GAAgB,OAAM;aAClD;GACI,CAAA;EACH,CAAA,GARC"}
+{"version":3,"file":"Captions.js","names":[],"sources":["../../../../src/VideoPlayer/components/Captions/Captions.tsx"],"sourcesContent":["import React, {type HTMLAttributes, useEffect, useState} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Text} from '../../../Text'\nimport styles from './Captions.module.css'\nimport {useVideo} from '../../hooks/useVideo'\n\nexport const Captions = ({className, ...props}: HTMLAttributes<HTMLDivElement>) => {\n  const [caption, setCaption] = useState('')\n  const {ref} = useVideo()\n\n  const videoRef = ref?.current\n  const trackInformation = videoRef?.textTracks[0]?.cues\n\n  useEffect(() => {\n    if (!videoRef) {\n      return\n    }\n\n    const compareAndSetCaption = () => {\n      if (!trackInformation) {\n        return\n      }\n\n      for (let i = 0; i < trackInformation.length; i++) {\n        const cue = trackInformation[i]\n\n        if (videoRef.currentTime >= cue.startTime && videoRef.currentTime < cue.endTime) {\n          setCaption(cue['text'])\n          break\n        }\n\n        setCaption('')\n      }\n    }\n\n    videoRef.addEventListener('timeupdate', compareAndSetCaption)\n\n    return () => videoRef.removeEventListener('timeupdate', compareAndSetCaption)\n  }, [videoRef, trackInformation])\n\n  if (!trackInformation) {\n    return null\n  }\n\n  return (\n    <div className={clsx(className, styles.Captions)} {...props}>\n      <Text as=\"p\" className={styles.Captions__text} align=\"center\">\n        {caption}\n      </Text>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAOA,IAAa,KAAY,EAAC,cAAW,GAAG,QAA2C;CACjF,IAAM,CAAC,GAAS,KAAc,EAAS,EAAE,GACnC,EAAC,WAAO,EAAS,GAEjB,IAAW,GAAK,SAChB,IAAmB,GAAU,WAAW,EAAE,EAAE;CAiClD,OA/BA,QAAgB;EACd,IAAI,CAAC,GACH;EAGF,IAAM,UAA6B;GAC5B,OAIL,KAAK,IAAI,IAAI,GAAG,IAAI,EAAiB,QAAQ,KAAK;IAChD,IAAM,IAAM,EAAiB;IAE7B,IAAI,EAAS,eAAe,EAAI,aAAa,EAAS,cAAc,EAAI,SAAS;KAC/E,EAAW,EAAI,IAAO;KACtB;IACF;IAEA,EAAW,EAAE;GACf;EACF;EAIA,OAFA,EAAS,iBAAiB,cAAc,CAAoB,SAE/C,EAAS,oBAAoB,cAAc,CAAoB;CAC9E,GAAG,CAAC,GAAU,CAAgB,CAAC,GAE1B,IAKH,kBAAC,OAAD;EAAK,WAAW,EAAK,GAAW,EAAO,QAAQ;EAAG,GAAI;YACpD,kBAAC,GAAD;GAAM,IAAG;GAAI,WAAW,EAAO;GAAgB,OAAM;aAClD;EACG,CAAA;CACH,CAAA,IARE;AAUX"}

package/esm/VideoPlayer/components/Captions/Captions.module.js

@@ -1,8 +1,9 @@
-import './Captions.module-CvaHeR3V.css';var e = {
-	Captions: "Primer_Brand__Captions-module__Captions___5Wpoz",
-	Captions__text: "Primer_Brand__Captions-module__Captions__text___lrxrJ"
+import './Captions.module-CvaHeR3V.css';//#region src/VideoPlayer/components/Captions/Captions.module.css
+var e = "Primer_Brand__Captions-module__Captions___5Wpoz", t = "Primer_Brand__Captions-module__Captions__text___lrxrJ", n = {
+	Captions: e,
+	Captions__text: t
 };
 //#endregion
-export { e as default };
+export { e as Captions, t as Captions__text, n as default };
 
 //# sourceMappingURL=Captions.module.js.map

package/esm/VideoPlayer/components/ControlsBar/ControlsBar.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes } from 'react';
+import React, { type HTMLAttributes } from 'react';
 export type ControlsBarProps = HTMLAttributes<HTMLDivElement>;
-export declare const ControlsBar: ({ className, ...rest }: ControlsBarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ControlsBar: ({ className, ...rest }: ControlsBarProps) => React.JSX.Element;
 //# sourceMappingURL=ControlsBar.d.ts.map