@primer/styled-react 0.0.0-20251205021328 → 0.0.0-20251205154953

package/dist/components/ThemeProvider.js

@@ -1,203 +1,150 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { ThemeProvider as ThemeProvider$1 } from 'styled-components';
-import { theme, useId, useSyncedState } from '@primer/react';
-import deepmerge from 'deepmerge';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { ThemeProvider } from "styled-components";
+import deepmerge from "deepmerge";
+import { theme, useId, useSyncedState } from "@primer/react";
+import React from "react";
+import ReactDOM from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
 
-const defaultColorMode = 'day';
-const defaultDayScheme = 'light';
-const defaultNightScheme = 'dark';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-const ThemeContext = /*#__PURE__*/React.createContext({
-  setColorMode: () => null,
-  setDayScheme: () => null,
-  setNightScheme: () => null
+//#region src/components/ThemeProvider.tsx
+const defaultColorMode = "day";
+const defaultDayScheme = "light";
+const defaultNightScheme = "dark";
+const ThemeContext = /* @__PURE__ */ React.createContext({
+	setColorMode: () => null,
+	setDayScheme: () => null,
+	setNightScheme: () => null
 });
-
-// inspired from __NEXT_DATA__, we use application/json to avoid CSRF policy with inline scripts
-const getServerHandoff = id => {
-  try {
-    const serverData = document.getElementById(`__PRIMER_DATA_${id}__`)?.textContent;
-    if (serverData) return JSON.parse(serverData);
-  } catch (_error) {
-    // if document/element does not exist or JSON is invalid, supress error
-  }
-  return {};
+const getServerHandoff = (id) => {
+	try {
+		const serverData = document.getElementById(`__PRIMER_DATA_${id}__`)?.textContent;
+		if (serverData) return JSON.parse(serverData);
+	} catch (_error) {}
+	return {};
 };
-const ThemeProvider = ({
-  children,
-  ...props
-}) => {
-  // Get fallback values from parent ThemeProvider (if exists)
-  const {
-    theme: fallbackTheme,
-    colorMode: fallbackColorMode,
-    dayScheme: fallbackDayScheme,
-    nightScheme: fallbackNightScheme
-  } = useTheme();
-
-  // Initialize state
-  const theme$1 = props.theme ?? fallbackTheme ?? theme;
-  const uniqueDataId = useId();
-  const {
-    resolvedServerColorMode
-  } = getServerHandoff(uniqueDataId);
-  const resolvedColorModePassthrough = React.useRef(resolvedServerColorMode);
-  const [colorMode, setColorMode] = useSyncedState(props.colorMode ?? fallbackColorMode ?? defaultColorMode);
-  const [dayScheme, setDayScheme] = useSyncedState(props.dayScheme ?? fallbackDayScheme ?? defaultDayScheme);
-  const [nightScheme, setNightScheme] = useSyncedState(props.nightScheme ?? fallbackNightScheme ?? defaultNightScheme);
-  const systemColorMode = useSystemColorMode();
-  // eslint-disable-next-line react-hooks/refs
-  const resolvedColorMode = resolvedColorModePassthrough.current || resolveColorMode(colorMode, systemColorMode);
-  const colorScheme = chooseColorScheme(resolvedColorMode, dayScheme, nightScheme);
-  const {
-    resolvedTheme,
-    resolvedColorScheme
-  } = React.useMemo(() => applyColorScheme(theme$1, colorScheme), [theme$1, colorScheme]);
-
-  // this effect will only run on client
-  React.useEffect(function updateColorModeAfterServerPassthrough() {
-    const resolvedColorModeOnClient = resolveColorMode(colorMode, systemColorMode);
-    if (resolvedColorModePassthrough.current) {
-      // if the resolved color mode passed on from the server is not the resolved color mode on client, change it!
-      if (resolvedColorModePassthrough.current !== resolvedColorModeOnClient) {
-        window.setTimeout(() => {
-          // use ReactDOM.flushSync to prevent automatic batching of state updates since React 18
-          // ref: https://github.com/reactwg/react-18/discussions/21
-          ReactDOM.flushSync(() => {
-            // override colorMode to whatever is resolved on the client to get a re-render
-            setColorMode(resolvedColorModeOnClient);
-          });
-
-          // immediately after that, set the colorMode to what the user passed to respond to system color mode changes
-          setColorMode(colorMode);
-        });
-      }
-      resolvedColorModePassthrough.current = null;
-    }
-  }, [colorMode, systemColorMode, setColorMode]);
-  return /*#__PURE__*/jsx(ThemeContext.Provider, {
-    value: {
-      theme: resolvedTheme,
-      colorScheme,
-      colorMode,
-      resolvedColorMode,
-      resolvedColorScheme,
-      dayScheme,
-      nightScheme,
-      setColorMode,
-      setDayScheme,
-      setNightScheme
-    },
-    children: /*#__PURE__*/jsxs(ThemeProvider$1, {
-      theme: resolvedTheme,
-      children: [children, props.preventSSRMismatch ? /*#__PURE__*/jsx("script", {
-        type: "application/json",
-        id: `__PRIMER_DATA_${uniqueDataId}__`,
-        dangerouslySetInnerHTML: {
-          __html: JSON.stringify({
-            resolvedServerColorMode: resolvedColorMode
-          })
-        }
-      }) : null]
-    })
-  });
+const ThemeProvider$1 = ({ children, ...props }) => {
+	const { theme: fallbackTheme, colorMode: fallbackColorMode, dayScheme: fallbackDayScheme, nightScheme: fallbackNightScheme } = useTheme();
+	const theme$1 = props.theme ?? fallbackTheme ?? theme;
+	const uniqueDataId = useId();
+	const { resolvedServerColorMode } = getServerHandoff(uniqueDataId);
+	const resolvedColorModePassthrough = React.useRef(resolvedServerColorMode);
+	const [colorMode, setColorMode] = useSyncedState(props.colorMode ?? fallbackColorMode ?? defaultColorMode);
+	const [dayScheme, setDayScheme] = useSyncedState(props.dayScheme ?? fallbackDayScheme ?? defaultDayScheme);
+	const [nightScheme, setNightScheme] = useSyncedState(props.nightScheme ?? fallbackNightScheme ?? defaultNightScheme);
+	const systemColorMode = useSystemColorMode();
+	const resolvedColorMode = resolvedColorModePassthrough.current || resolveColorMode(colorMode, systemColorMode);
+	const colorScheme = chooseColorScheme(resolvedColorMode, dayScheme, nightScheme);
+	const { resolvedTheme, resolvedColorScheme } = React.useMemo(() => applyColorScheme(theme$1, colorScheme), [theme$1, colorScheme]);
+	React.useEffect(function updateColorModeAfterServerPassthrough() {
+		const resolvedColorModeOnClient = resolveColorMode(colorMode, systemColorMode);
+		if (resolvedColorModePassthrough.current) {
+			if (resolvedColorModePassthrough.current !== resolvedColorModeOnClient) window.setTimeout(() => {
+				ReactDOM.flushSync(() => {
+					setColorMode(resolvedColorModeOnClient);
+				});
+				setColorMode(colorMode);
+			});
+			resolvedColorModePassthrough.current = null;
+		}
+	}, [
+		colorMode,
+		systemColorMode,
+		setColorMode
+	]);
+	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
+		value: {
+			theme: resolvedTheme,
+			colorScheme,
+			colorMode,
+			resolvedColorMode,
+			resolvedColorScheme,
+			dayScheme,
+			nightScheme,
+			setColorMode,
+			setDayScheme,
+			setNightScheme
+		},
+		children: /* @__PURE__ */ jsxs(ThemeProvider, {
+			theme: resolvedTheme,
+			children: [children, props.preventSSRMismatch ? /* @__PURE__ */ jsx("script", {
+				type: "application/json",
+				id: `__PRIMER_DATA_${uniqueDataId}__`,
+				dangerouslySetInnerHTML: { __html: JSON.stringify({ resolvedServerColorMode: resolvedColorMode }) }
+			}) : null]
+		})
+	});
 };
 function useTheme() {
-  return React.useContext(ThemeContext);
+	return React.useContext(ThemeContext);
 }
 function useColorSchemeVar(values, fallback) {
-  const {
-    colorScheme = ''
-  } = useTheme();
-  return values[colorScheme] ?? fallback;
+	const { colorScheme = "" } = useTheme();
+	return values[colorScheme] ?? fallback;
 }
 function useSystemColorMode() {
-  const [systemColorMode, setSystemColorMode] = React.useState(getSystemColorMode);
-  React.useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    const media = window?.matchMedia?.('(prefers-color-scheme: dark)');
-    function matchesMediaToColorMode(matches) {
-      return matches ? 'night' : 'day';
-    }
-    function handleChange(event) {
-      const isNight = event.matches;
-      setSystemColorMode(matchesMediaToColorMode(isNight));
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    if (media) {
-      // just in case the preference changed before the event listener was attached
-      const isNight = media.matches;
-      setSystemColorMode(matchesMediaToColorMode(isNight));
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      if (media.addEventListener !== undefined) {
-        media.addEventListener('change', handleChange);
-        return function cleanup() {
-          media.removeEventListener('change', handleChange);
-        };
-      }
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      else if (media.addListener !== undefined) {
-        media.addListener(handleChange);
-        return function cleanup() {
-          media.removeListener(handleChange);
-        };
-      }
-    }
-  }, []);
-  return systemColorMode;
+	const [systemColorMode, setSystemColorMode] = React.useState(getSystemColorMode);
+	React.useEffect(() => {
+		const media = window?.matchMedia?.("(prefers-color-scheme: dark)");
+		function matchesMediaToColorMode(matches) {
+			return matches ? "night" : "day";
+		}
+		function handleChange(event) {
+			const isNight = event.matches;
+			setSystemColorMode(matchesMediaToColorMode(isNight));
+		}
+		if (media) {
+			const isNight = media.matches;
+			setSystemColorMode(matchesMediaToColorMode(isNight));
+			if (media.addEventListener !== void 0) {
+				media.addEventListener("change", handleChange);
+				return function cleanup() {
+					media.removeEventListener("change", handleChange);
+				};
+			} else if (media.addListener !== void 0) {
+				media.addListener(handleChange);
+				return function cleanup() {
+					media.removeListener(handleChange);
+				};
+			}
+		}
+	}, []);
+	return systemColorMode;
 }
 function getSystemColorMode() {
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  if (typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)')?.matches) {
-    return 'night';
-  }
-  return 'day';
+	if (typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)")?.matches) return "night";
+	return "day";
 }
 function resolveColorMode(colorMode, systemColorMode) {
-  switch (colorMode) {
-    case 'auto':
-      return systemColorMode;
-    default:
-      return colorMode;
-  }
+	switch (colorMode) {
+		case "auto": return systemColorMode;
+		default: return colorMode;
+	}
 }
 function chooseColorScheme(colorMode, dayScheme, nightScheme) {
-  switch (colorMode) {
-    case 'day':
-    case 'light':
-      return dayScheme;
-    case 'dark':
-    case 'night':
-      return nightScheme;
-  }
+	switch (colorMode) {
+		case "day":
+		case "light": return dayScheme;
+		case "dark":
+		case "night": return nightScheme;
+	}
 }
-function applyColorScheme(theme, colorScheme) {
-  if (!theme.colorSchemes) {
-    return {
-      resolvedTheme: theme,
-      resolvedColorScheme: undefined
-    };
-  }
-  if (!theme.colorSchemes[colorScheme]) {
-    // eslint-disable-next-line no-console
-    console.error(`\`${colorScheme}\` scheme not defined in \`theme.colorSchemes\``);
-
-    // Apply the first defined color scheme
-    const defaultColorScheme = Object.keys(theme.colorSchemes)[0];
-    return {
-      resolvedTheme: deepmerge(theme, theme.colorSchemes[defaultColorScheme]),
-      resolvedColorScheme: defaultColorScheme
-    };
-  }
-  return {
-    resolvedTheme: deepmerge(theme, theme.colorSchemes[colorScheme]),
-    resolvedColorScheme: colorScheme
-  };
+function applyColorScheme(theme$1, colorScheme) {
+	if (!theme$1.colorSchemes) return {
+		resolvedTheme: theme$1,
+		resolvedColorScheme: void 0
+	};
+	if (!theme$1.colorSchemes[colorScheme]) {
+		console.error(`\`${colorScheme}\` scheme not defined in \`theme.colorSchemes\``);
+		const defaultColorScheme = Object.keys(theme$1.colorSchemes)[0];
+		return {
+			resolvedTheme: deepmerge(theme$1, theme$1.colorSchemes[defaultColorScheme]),
+			resolvedColorScheme: defaultColorScheme
+		};
+	}
+	return {
+		resolvedTheme: deepmerge(theme$1, theme$1.colorSchemes[colorScheme]),
+		resolvedColorScheme: colorScheme
+	};
 }
 
-export { ThemeProvider, ThemeProvider as default, defaultColorMode, useColorSchemeVar, useTheme };
+//#endregion
+export { ThemeProvider$1 as ThemeProvider, useColorSchemeVar, useTheme };

package/dist/components/Timeline.js

@@ -1,47 +1,49 @@
-import { Timeline as Timeline$1 } from '@primer/react';
-import Box from './Box.js';
-import { forwardRef } from 'react';
-import { jsx } from 'react/jsx-runtime';
+import { Box } from "./Box.js";
+import { Timeline } from "@primer/react";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 
-const TimelineImpl = /*#__PURE__*/forwardRef(function Timeline(props, ref) {
-  return /*#__PURE__*/jsx(Box, {
-    as: Timeline$1,
-    ref: ref,
-    ...props
-  });
+//#region src/components/Timeline.tsx
+const TimelineImpl = /* @__PURE__ */ forwardRef(function Timeline$2(props, ref) {
+	return /* @__PURE__ */ jsx(Box, {
+		as: Timeline,
+		ref,
+		...props
+	});
 });
-const TimelineItem = /*#__PURE__*/forwardRef(function TimelineItem(props, ref) {
-  return /*#__PURE__*/jsx(Box, {
-    as: Timeline$1.Item,
-    ref: ref,
-    ...props
-  });
+const TimelineItem = /* @__PURE__ */ forwardRef(function TimelineItem$1(props, ref) {
+	return /* @__PURE__ */ jsx(Box, {
+		as: Timeline.Item,
+		ref,
+		...props
+	});
 });
 function TimelineBadge(props) {
-  return /*#__PURE__*/jsx(Box, {
-    as: Timeline$1.Badge,
-    ...props
-  });
+	return /* @__PURE__ */ jsx(Box, {
+		as: Timeline.Badge,
+		...props
+	});
 }
-const TimelineBody = /*#__PURE__*/forwardRef(function TimelineBody(props, ref) {
-  return /*#__PURE__*/jsx(Box, {
-    as: Timeline$1.Body,
-    ref: ref,
-    ...props
-  });
+const TimelineBody = /* @__PURE__ */ forwardRef(function TimelineBody$1(props, ref) {
+	return /* @__PURE__ */ jsx(Box, {
+		as: Timeline.Body,
+		ref,
+		...props
+	});
 });
-const TimelineBreak = /*#__PURE__*/forwardRef(function TimelineBreak(props, ref) {
-  return /*#__PURE__*/jsx(Box, {
-    as: Timeline$1.Break,
-    ref: ref,
-    ...props
-  });
+const TimelineBreak = /* @__PURE__ */ forwardRef(function TimelineBreak$1(props, ref) {
+	return /* @__PURE__ */ jsx(Box, {
+		as: Timeline.Break,
+		ref,
+		...props
+	});
 });
-const Timeline = Object.assign(TimelineImpl, {
-  Item: TimelineItem,
-  Badge: TimelineBadge,
-  Body: TimelineBody,
-  Break: TimelineBreak
+const Timeline$1 = Object.assign(TimelineImpl, {
+	Item: TimelineItem,
+	Badge: TimelineBadge,
+	Body: TimelineBody,
+	Break: TimelineBreak
 });
 
-export { Timeline };
+//#endregion
+export { Timeline$1 as Timeline };

package/dist/components/ToggleSwitch.js

@@ -1,14 +1,16 @@
-import { ToggleSwitch as ToggleSwitch$1 } from '@primer/react';
-import { forwardRef } from 'react';
-import Box from './Box.js';
-import { jsx } from 'react/jsx-runtime';
+import { Box } from "./Box.js";
+import { ToggleSwitch } from "@primer/react";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 
-const ToggleSwitch = /*#__PURE__*/forwardRef(function ToggleSwitch(props, ref) {
-  return /*#__PURE__*/jsx(Box, {
-    as: ToggleSwitch$1,
-    ref: ref,
-    ...props
-  });
+//#region src/components/ToggleSwitch.tsx
+const ToggleSwitch$1 = /* @__PURE__ */ forwardRef(function ToggleSwitch$2(props, ref) {
+	return /* @__PURE__ */ jsx(Box, {
+		as: ToggleSwitch,
+		ref,
+		...props
+	});
 });
 
-export { ToggleSwitch };
+//#endregion
+export { ToggleSwitch$1 as ToggleSwitch };

package/dist/components/Token.js

@@ -1,26 +1,21 @@
-import { forwardRef } from 'react';
-import { Token as Token$1 } from '@primer/react';
-import sx from '../sx.js';
-import styled from 'styled-components';
-import { jsx } from 'react/jsx-runtime';
+import { sx } from "../sx.js";
+import styled from "styled-components";
+import { Token } from "@primer/react";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 
-const StyledToken = styled(Token$1).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "Token__StyledToken",
-  componentId: "sc-ldn0r8-0"
+//#region src/components/Token.tsx
+const StyledToken = styled(Token).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
+	displayName: "Token__StyledToken",
+	componentId: "sc-ldn0r8-0"
 })(["", ""], sx);
-const Token = /*#__PURE__*/forwardRef(({
-  as,
-  ...props
-}, ref) => {
-  return /*#__PURE__*/jsx(StyledToken, {
-    ...props,
-    ...(as ? {
-      forwardedAs: as
-    } : {}),
-    ref: ref
-  });
+const Token$1 = /* @__PURE__ */ forwardRef(({ as, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(StyledToken, {
+		...props,
+		...as ? { forwardedAs: as } : {},
+		ref
+	});
 });
 
-export { Token };
+//#endregion
+export { Token$1 as Token };

package/dist/components/Tooltip.js

@@ -1,15 +1,17 @@
-import { Tooltip as Tooltip$1 } from '@primer/react';
-import Box from './Box.js';
-import { forwardRef } from 'react';
-import { jsx } from 'react/jsx-runtime';
+import { Box } from "./Box.js";
+import { Tooltip } from "@primer/react";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 
-const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, ref) {
-  return /*#__PURE__*/jsx(Box, {
-    as: Tooltip$1,
-    ref: ref,
-    ...props
-  });
+//#region src/components/Tooltip.tsx
+const Tooltip$1 = /* @__PURE__ */ forwardRef(function Tooltip$2(props, ref) {
+	return /* @__PURE__ */ jsx(Box, {
+		as: Tooltip,
+		ref,
+		...props
+	});
 });
-Tooltip.__SLOT__ = Tooltip$1.__SLOT__;
+Tooltip$1.__SLOT__ = Tooltip.__SLOT__;
 
-export { Tooltip };
+//#endregion
+export { Tooltip$1 as Tooltip };

package/dist/components/Truncate.js

@@ -1,12 +1,12 @@
-import { Truncate as Truncate$1 } from '@primer/react';
-import sx from '../sx.js';
-import styled from 'styled-components';
+import { sx } from "../sx.js";
+import styled from "styled-components";
+import { Truncate } from "@primer/react";
 
-const Truncate = styled(Truncate$1).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "Truncate",
-  componentId: "sc-x3i4it-0"
+//#region src/components/Truncate.tsx
+const Truncate$1 = styled(Truncate).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
+	displayName: "Truncate",
+	componentId: "sc-x3i4it-0"
 })(["", ""], sx);
 
-export { Truncate };
+//#endregion
+export { Truncate$1 as Truncate };

package/dist/components/UnderlineNav.js

@@ -1,45 +1,33 @@
-import { UnderlineNav as UnderlineNav$1 } from '@primer/react';
-import Box from './Box.js';
-import { forwardRef } from 'react';
-import styled from 'styled-components';
-import sx from '../sx.js';
-import { jsx } from 'react/jsx-runtime';
+import { sx } from "../sx.js";
+import { Box } from "./Box.js";
+import styled from "styled-components";
+import { UnderlineNav } from "@primer/react";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 
-const StyledUnderlineNav = /*#__PURE__*/forwardRef(function UnderlineNav(props, ref) {
-  return /*#__PURE__*/jsx(Box, {
-    as: UnderlineNav$1,
-    ref: ref,
-    ...props
-  });
+//#region src/components/UnderlineNav.tsx
+const StyledUnderlineNav = /* @__PURE__ */ forwardRef(function UnderlineNav$2(props, ref) {
+	return /* @__PURE__ */ jsx(Box, {
+		as: UnderlineNav,
+		ref,
+		...props
+	});
 });
-const UnderlineNavImpl = /*#__PURE__*/forwardRef(({
-  as,
-  ...props
-}, ref) => /*#__PURE__*/jsx(StyledUnderlineNav, {
-  ...props,
-  ...(as ? {
-    forwardedAs: as
-  } : {}),
-  ref: ref
+const UnderlineNavImpl = /* @__PURE__ */ forwardRef(({ as, ...props }, ref) => /* @__PURE__ */ jsx(StyledUnderlineNav, {
+	...props,
+	...as ? { forwardedAs: as } : {},
+	ref
 }));
-const StyledUnderlineNavItem = styled(UnderlineNav$1.Item).withConfig({
-  shouldForwardProp: prop => prop !== 'sx'
-}).withConfig({
-  displayName: "UnderlineNav__StyledUnderlineNavItem",
-  componentId: "sc-dx6br2-0"
+const StyledUnderlineNavItem = styled(UnderlineNav.Item).withConfig({ shouldForwardProp: (prop) => prop !== "sx" }).withConfig({
+	displayName: "UnderlineNav__StyledUnderlineNavItem",
+	componentId: "sc-dx6br2-0"
 })(["", ""], sx);
-const UnderlineNavItem = /*#__PURE__*/forwardRef(({
-  as,
-  ...props
-}, ref) => /*#__PURE__*/jsx(StyledUnderlineNavItem, {
-  ...props,
-  ...(as ? {
-    forwardedAs: as
-  } : {}),
-  ref: ref
+const UnderlineNavItem = /* @__PURE__ */ forwardRef(({ as, ...props }, ref) => /* @__PURE__ */ jsx(StyledUnderlineNavItem, {
+	...props,
+	...as ? { forwardedAs: as } : {},
+	ref
 }));
-const UnderlineNav = Object.assign(UnderlineNavImpl, {
-  Item: UnderlineNavItem
-});
+const UnderlineNav$1 = Object.assign(UnderlineNavImpl, { Item: UnderlineNavItem });
 
-export { UnderlineNav, UnderlineNavImpl, UnderlineNavItem };
+//#endregion
+export { UnderlineNav$1 as UnderlineNav };