@primer/styled-react 0.0.0-20260610121450 → 0.0.0-20260722001252

package/dist/components/BaseStyles.d.ts

@@ -1,17 +1,26 @@
-import type React from 'react';
-import { type CSSProperties, type PropsWithChildren, type JSX } from 'react';
-import type * as styledSystem from 'styled-system';
-import 'focus-visible';
-export interface SystemCommonProps extends styledSystem.ColorProps, styledSystem.SpaceProps, styledSystem.DisplayProps {
+import React, { CSSProperties, JSX, PropsWithChildren } from "react";
+import * as styledSystem from "styled-system";
+//#region src/components/BaseStyles.d.ts
+interface SystemCommonProps extends styledSystem.ColorProps, styledSystem.SpaceProps, styledSystem.DisplayProps {}
+interface SystemTypographyProps extends styledSystem.TypographyProps {
+  whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line';
 }
-export interface SystemTypographyProps extends styledSystem.TypographyProps {
-    whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line';
-}
-export type BaseStylesProps = PropsWithChildren & {
-    as?: React.ComponentType<any> | keyof JSX.IntrinsicElements;
-    className?: string;
-    style?: CSSProperties;
-    color?: string;
+type BaseStylesProps = PropsWithChildren & {
+  as?: React.ComponentType<any> | keyof JSX.IntrinsicElements;
+  className?: string;
+  style?: CSSProperties;
+  color?: string;
 } & SystemTypographyProps & SystemCommonProps;
-export declare function BaseStyles({ children, color, fontFamily, lineHeight, className, as: Component, style, ...rest }: BaseStylesProps): JSX.Element;
+declare function BaseStyles({
+  children,
+  color,
+  fontFamily,
+  lineHeight,
+  className,
+  as: Component,
+  style,
+  ...rest
+}: BaseStylesProps): JSX.Element;
+//#endregion
+export { BaseStyles, BaseStylesProps, SystemCommonProps, SystemTypographyProps };
 //# sourceMappingURL=BaseStyles.d.ts.map

package/dist/components/BaseStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseStyles.d.ts","sourceRoot":"","sources":["../../src/components/BaseStyles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAC,KAAK,aAAa,EAAE,KAAK,iBAAiB,EAAE,KAAK,GAAG,EAAC,MAAM,OAAO,CAAA;AAG1E,OAAO,KAAK,KAAK,YAAY,MAAM,eAAe,CAAA;AAGlD,OAAO,eAAe,CAAA;AAGtB,MAAM,WAAW,iBACf,SAAQ,YAAY,CAAC,UAAU,EAC7B,YAAY,CAAC,UAAU,EACvB,YAAY,CAAC,YAAY;CAAG;AAEhC,MAAM,WAAW,qBAAsB,SAAQ,YAAY,CAAC,eAAe;IACzE,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,KAAK,GAAG,UAAU,GAAG,UAAU,CAAA;CACnE;AA8ED,MAAM,MAAM,eAAe,GAAG,iBAAiB,GAAG;IAEhD,EAAE,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,MAAM,GAAG,CAAC,iBAAiB,CAAA;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,qBAAqB,GACvB,iBAAiB,CAAA;AAEnB,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,UAAU,EACV,UAAU,EACV,SAAS,EACT,EAAE,EAAE,SAAiB,EACrB,KAAK,EACL,GAAG,IAAI,EACR,EAAE,eAAe,eA+BjB"}
+{"version":3,"file":"BaseStyles.d.ts","names":[],"sources":["../../src/components/BaseStyles.tsx"],"mappings":";;;UAUiB,iBAAA,SACP,YAAA,CAAa,UAAA,EACnB,YAAA,CAAa,UAAA,EACb,YAAA,CAAa,YAAA;AAAA,UAEA,qBAAA,SAA8B,YAAA,CAAa,eAAe;EACzE,UAAA;AAAA;AAAA,KA+EU,eAAA,GAAkB,iBAAA;EAE5B,EAAA,GAAK,KAAA,CAAM,aAAA,cAA2B,GAAA,CAAI,iBAAA;EAC1C,SAAA;EACA,KAAA,GAAQ,aAAA;EACR,KAAA;AAAA,IACE,qBAAA,GACF,iBAAA;AAAA,iBAEc,UAAA;EACd,QAAA;EACA,KAAA;EACA,UAAA;EACA,UAAA;EACA,SAAA;EACA,EAAA,EAAI,SAAA;EACJ,KAAA;EAAA,GACG;AAAA,GACF,eAAA,GAAe,GAAA,CAAA,OAAA"}

package/dist/components/BaseStyles.js

@@ -1,51 +1,30 @@
-import { clsx } from 'clsx';
-import { useTheme } from './ThemeProvider.js';
-import 'focus-visible';
-import { createGlobalStyle } from 'styled-components';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
+import { useTheme } from "./useTheme.js";
+import { createGlobalStyle } from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import "focus-visible";
+//#region src/components/BaseStyles.tsx
 const GlobalStyle = createGlobalStyle(["*{box-sizing:border-box;}body{margin:0;}table{border-collapse:collapse;}[data-color-mode='light'] input{color-scheme:light;}[data-color-mode='dark'] input{color-scheme:dark;}@media (prefers-color-scheme:light){[data-color-mode='auto'][data-light-theme*='light']{color-scheme:light;}}@media (prefers-color-scheme:dark){[data-color-mode='auto'][data-dark-theme*='dark']{color-scheme:dark;}}[role='button']:focus:not(:focus-visible):not(:global(.focus-visible)),[role='tabpanel'][tabindex='0']:focus:not(:focus-visible):not(:global(.focus-visible)),button:focus:not(:focus-visible):not(:global(.focus-visible)),summary:focus:not(:focus-visible):not(:global(.focus-visible)),a:focus:not(:focus-visible):not(:global(.focus-visible)){outline:none;box-shadow:none;}[tabindex='0']:focus:not(:focus-visible):not(:global(.focus-visible)),details-dialog:focus:not(:focus-visible):not(:global(.focus-visible)){outline:none;}.BaseStyles{font-family:var(--BaseStyles-fontFamily,var(--fontStack-system));line-height:var(--BaseStyles-lineHeight,1.5);color:var(--BaseStyles-fgColor,var(--fgColor-default));:where(a:not([class*='prc-']):not([class*='PRC-']):not([class*='Primer_Brand__'])){color:var(--fgColor-accent,var(--color-accent-fg));text-decoration:none;&:hover{text-decoration:underline;}}}"]);
-function BaseStyles({
-  children,
-  color,
-  fontFamily,
-  lineHeight,
-  className,
-  as: Component = 'div',
-  style,
-  ...rest
-}) {
-  const {
-    colorMode,
-    colorScheme,
-    dayScheme,
-    nightScheme
-  } = useTheme();
-  const baseStyles = {
-    ['--BaseStyles-fgColor']: color,
-    ['--BaseStyles-fontFamily']: fontFamily,
-    ['--BaseStyles-lineHeight']: lineHeight
-  };
-  return /*#__PURE__*/jsxs(Component, {
-    className: clsx('BaseStyles', className),
-    "data-portal-root": true
-    /**
-     * We need to map valid primer/react color modes onto valid color modes for primer/primitives
-     * valid color modes for primer/primitives: auto | light | dark
-     * valid color modes for primer/primer: auto | day | night | light | dark
-     */,
-    "data-color-mode": colorMode === 'auto' ? 'auto' : colorScheme?.includes('dark') ? 'dark' : 'light',
-    "data-light-theme": dayScheme,
-    "data-dark-theme": nightScheme,
-    style: {
-      ...baseStyles,
-      ...style
-    },
-    ...rest,
-    children: [/*#__PURE__*/jsx(GlobalStyle, {
-      colorScheme: colorScheme?.includes('dark') ? 'dark' : 'light'
-    }), children]
-  });
+function BaseStyles({ children, color, fontFamily, lineHeight, className, as: Component = "div", style, ...rest }) {
+	const { colorMode, colorScheme, dayScheme, nightScheme } = useTheme();
+	const baseStyles = {
+		["--BaseStyles-fgColor"]: color,
+		["--BaseStyles-fontFamily"]: fontFamily,
+		["--BaseStyles-lineHeight"]: lineHeight
+	};
+	return /*#__PURE__*/ jsxs(Component, {
+		className: clsx("BaseStyles", className),
+		"data-portal-root": true,
+		"data-color-mode": colorMode === "auto" ? "auto" : colorScheme?.includes("dark") ? "dark" : "light",
+		"data-light-theme": dayScheme,
+		"data-dark-theme": nightScheme,
+		style: {
+			...baseStyles,
+			...style
+		},
+		...rest,
+		children: [/*#__PURE__*/ jsx(GlobalStyle, { colorScheme: colorScheme?.includes("dark") ? "dark" : "light" }), children]
+	});
 }
-
+//#endregion
 export { BaseStyles };

package/dist/components/FeatureFlaggedTheming.d.ts

@@ -1,12 +1,12 @@
-import type React from 'react';
-import { useTheme as primerUseTheme } from '@primer/react';
-import { useColorSchemeVar } from './ThemeProvider';
-import type { ThemeProviderProps as StyledThemeProviderProps } from './ThemeProvider';
-import type { BaseStylesProps as StyledBaseStylesProps } from './BaseStyles';
-export type ThemeProviderProps = StyledThemeProviderProps;
-export type BaseStylesProps = StyledBaseStylesProps;
-export declare const ThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>>;
-export declare function useTheme(): ReturnType<typeof primerUseTheme>;
-export { useColorSchemeVar };
-export declare function BaseStyles(props: BaseStylesProps): React.JSX.Element;
+import { BaseStylesProps as BaseStylesProps$1 } from "./BaseStyles.js";
+import { ThemeProviderProps as ThemeProviderProps$1 } from "./ThemeProvider.js";
+import React from "react";
+
+//#region src/components/FeatureFlaggedTheming.d.ts
+type ThemeProviderProps = ThemeProviderProps$1;
+type BaseStylesProps = BaseStylesProps$1;
+declare const ThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>>;
+declare function BaseStyles(props: BaseStylesProps): React.JSX.Element;
+//#endregion
+export { BaseStyles, BaseStylesProps, ThemeProvider, ThemeProviderProps };
 //# sourceMappingURL=FeatureFlaggedTheming.d.ts.map

package/dist/components/FeatureFlaggedTheming.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureFlaggedTheming.d.ts","sourceRoot":"","sources":["../../src/components/FeatureFlaggedTheming.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAEL,QAAQ,IAAI,cAAc,EAE3B,MAAM,eAAe,CAAA;AAMtB,OAAO,EAAmE,iBAAiB,EAAC,MAAM,iBAAiB,CAAA;AACnH,OAAO,KAAK,EAAC,kBAAkB,IAAI,wBAAwB,EAAC,MAAM,iBAAiB,CAAA;AAEnF,OAAO,KAAK,EAAC,eAAe,IAAI,qBAAqB,EAAC,MAAM,cAAc,CAAA;AAE1E,MAAM,MAAM,kBAAkB,GAAG,wBAAwB,CAAA;AAEzD,MAAM,MAAM,eAAe,GAAG,qBAAqB,CAAA;AAEnD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAM/E,CAAA;AAED,wBAAgB,QAAQ,IAAI,UAAU,CAAC,OAAO,cAAc,CAAC,CAQ5D;AAED,OAAO,EAAC,iBAAiB,EAAC,CAAA;AAE1B,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBAMhD"}
+{"version":3,"file":"FeatureFlaggedTheming.d.ts","names":[],"sources":["../../src/components/FeatureFlaggedTheming.tsx"],"mappings":";;;;;KAYY,kBAAA,GAAqB,oBAAwB;AAAA,KAE7C,eAAA,GAAkB,iBAAqB;AAAA,cAEtC,aAAA,EAAe,KAAA,CAAM,EAAA,CAAG,KAAA,CAAM,iBAAA,CAAkB,kBAAA;AAAA,iBAQ7C,UAAA,CAAW,KAAA,EAAO,eAAA,GAAe,KAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/FeatureFlaggedTheming.js

@@ -1,45 +1,22 @@
-import { BaseStyles as BaseStyles$1, ThemeProvider as ThemeProvider$1, useTheme as useTheme$2 } from '@primer/react';
-import { useFeatureFlag } from '@primer/react/experimental';
-import { ThemeProvider as ThemeProvider$2, useTheme as useTheme$1 } from './ThemeProvider.js';
-export { useColorSchemeVar } from './ThemeProvider.js';
-import { BaseStyles as BaseStyles$2 } from './BaseStyles.js';
-import { jsx } from 'react/jsx-runtime';
-
-const ThemeProvider = ({
-  children,
-  ...props
-}) => {
-  const enabled = useFeatureFlag('primer_react_styled_react_use_primer_theme_providers');
-  if (enabled) {
-    return /*#__PURE__*/jsx(ThemeProvider$1, {
-      ...props,
-      children: children
-    });
-  }
-  return /*#__PURE__*/jsx(ThemeProvider$2, {
-    ...props,
-    children: children
-  });
+import { ThemeProvider as ThemeProvider$2 } from "./ThemeProvider.js";
+import { BaseStyles as BaseStyles$2 } from "./BaseStyles.js";
+import { BaseStyles, ThemeProvider } from "@primer/react";
+import { useFeatureFlag } from "@primer/react/experimental";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/FeatureFlaggedTheming.tsx
+const ThemeProvider$1 = ({ children, ...props }) => {
+	if (useFeatureFlag("primer_react_styled_react_use_primer_theme_providers")) return /*#__PURE__*/ jsx(ThemeProvider, {
+		...props,
+		children
+	});
+	return /*#__PURE__*/ jsx(ThemeProvider$2, {
+		...props,
+		children
+	});
 };
-function useTheme() {
-  const enabled = useFeatureFlag('primer_react_styled_react_use_primer_theme_providers');
-  const styledTheme = useTheme$1();
-  const primerTheme = useTheme$2();
-  if (enabled) {
-    return primerTheme;
-  }
-  return styledTheme;
+function BaseStyles$1(props) {
+	if (useFeatureFlag("primer_react_styled_react_use_primer_theme_providers")) return /*#__PURE__*/ jsx(BaseStyles, { ...props });
+	return /*#__PURE__*/ jsx(BaseStyles$2, { ...props });
 }
-function BaseStyles(props) {
-  const enabled = useFeatureFlag('primer_react_styled_react_use_primer_theme_providers');
-  if (enabled) {
-    return /*#__PURE__*/jsx(BaseStyles$1, {
-      ...props
-    });
-  }
-  return /*#__PURE__*/jsx(BaseStyles$2, {
-    ...props
-  });
-}
-
-export { BaseStyles, ThemeProvider, useTheme };
+//#endregion
+export { BaseStyles$1 as BaseStyles, ThemeProvider$1 as ThemeProvider };

package/dist/components/ThemeContext.d.ts

@@ -0,0 +1,19 @@
+import { ColorMode, ColorModeWithAuto, Theme } from "./ThemeProvider.js";
+import React from "react";
+
+//#region src/components/ThemeContext.d.ts
+declare const ThemeContext: React.Context<{
+  theme?: Theme;
+  colorScheme?: string;
+  colorMode?: ColorModeWithAuto;
+  resolvedColorMode?: ColorMode;
+  resolvedColorScheme?: string;
+  dayScheme?: string;
+  nightScheme?: string;
+  setColorMode: React.Dispatch<React.SetStateAction<ColorModeWithAuto>>;
+  setDayScheme: React.Dispatch<React.SetStateAction<string>>;
+  setNightScheme: React.Dispatch<React.SetStateAction<string>>;
+}>;
+//#endregion
+export { ThemeContext };
+//# sourceMappingURL=ThemeContext.d.ts.map

package/dist/components/ThemeContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeContext.d.ts","names":[],"sources":["../../src/components/ThemeContext.ts"],"mappings":";;;;cAGa,YAAA,EAAY,KAAA,CAAA,OAAA;UACf,KAAA;;cAEI,iBAAA;sBACQ,SAAA;;;;gBAIN,KAAA,CAAM,QAAA,CAAS,KAAA,CAAM,cAAA,CAAe,iBAAA;gBACpC,KAAA,CAAM,QAAA,CAAS,KAAA,CAAM,cAAA;kBACnB,KAAA,CAAM,QAAA,CAAS,KAAA,CAAM,cAAA;AAAA"}

package/dist/components/ThemeContext.js

@@ -0,0 +1,9 @@
+import React from "react";
+//#region src/components/ThemeContext.ts
+const ThemeContext = /*#__PURE__*/ React.createContext({
+	setColorMode: () => null,
+	setDayScheme: () => null,
+	setNightScheme: () => null
+});
+//#endregion
+export { ThemeContext };

package/dist/components/ThemeProvider.d.ts

@@ -1,35 +1,25 @@
-import React from 'react';
-export declare const defaultColorMode = "day";
-export type Theme = {
-    [key: string]: any;
+import React from "react";
+
+//#region src/components/ThemeProvider.d.ts
+declare const defaultColorMode = "day";
+type Theme = {
+  [key: string]: any;
 };
 type ColorMode = 'day' | 'night' | 'light' | 'dark';
-export type ColorModeWithAuto = ColorMode | 'auto';
-export type ThemeProviderProps = {
-    theme?: Theme;
-    colorMode?: ColorModeWithAuto;
-    dayScheme?: string;
-    nightScheme?: string;
-    preventSSRMismatch?: boolean;
-    /**
-     * No-op. Exists solely to match @primer/react's ThemeProvider API.
-     * @default false
-     */
-    contextOnly?: boolean;
+type ColorModeWithAuto = ColorMode | 'auto';
+type ThemeProviderProps = {
+  theme?: Theme;
+  colorMode?: ColorModeWithAuto;
+  dayScheme?: string;
+  nightScheme?: string;
+  preventSSRMismatch?: boolean;
+  /**
+   * No-op. Exists solely to match @primer/react's ThemeProvider API.
+   * @default false
+   */
+  contextOnly?: boolean;
 };
-export declare const ThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>>;
-export declare function useTheme(): {
-    theme?: Theme;
-    colorScheme?: string;
-    colorMode?: ColorModeWithAuto;
-    resolvedColorMode?: ColorMode;
-    resolvedColorScheme?: string;
-    dayScheme?: string;
-    nightScheme?: string;
-    setColorMode: React.Dispatch<React.SetStateAction<ColorModeWithAuto>>;
-    setDayScheme: React.Dispatch<React.SetStateAction<string>>;
-    setNightScheme: React.Dispatch<React.SetStateAction<string>>;
-};
-export declare function useColorSchemeVar(values: Partial<Record<string, string>>, fallback: string): string;
-export default ThemeProvider;
+declare const ThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>>;
+//#endregion
+export { ColorMode, ColorModeWithAuto, Theme, ThemeProvider, ThemeProvider as default, ThemeProviderProps, defaultColorMode };
 //# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/components/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/components/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,eAAO,MAAM,gBAAgB,QAAQ,CAAA;AAKrC,MAAM,MAAM,KAAK,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAC,CAAA;AACxC,KAAK,SAAS,GAAG,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAA;AACnD,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,MAAM,CAAA;AAElD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AA8CD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAyE/E,CAAA;AAED,wBAAgB,QAAQ;YAtHd,KAAK;kBACC,MAAM;gBACR,iBAAiB;wBACT,SAAS;0BACP,MAAM;gBAChB,MAAM;kBACJ,MAAM;kBACN,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC;kBACvD,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;oBAC1C,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;EA+G7D;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,UAG1F;AAqED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"ThemeProvider.d.ts","names":[],"sources":["../../src/components/ThemeProvider.tsx"],"mappings":";;;cAQa,gBAAA;AAAA,KAKD,KAAA;EAAA,CAAU,GAAW;AAAA;AAAA,KACrB,SAAA;AAAA,KACA,iBAAA,GAAoB,SAAS;AAAA,KAE7B,kBAAA;EACV,KAAA,GAAQ,KAAA;EACR,SAAA,GAAY,iBAAiB;EAC7B,SAAA;EACA,WAAA;EACA,kBAAA;EARU;;;;EAaV,WAAA;AAAA;AAAA,cA8BW,aAAA,EAAe,KAAA,CAAM,EAAA,CAAG,KAAA,CAAM,iBAAA,CAAkB,kBAAA"}

package/dist/components/ThemeProvider.js

@@ -1,163 +1,120 @@
-import React from 'react';
-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';
-
-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
-});
-
-// inspired from __NEXT_DATA__, we use application/json to avoid CSRF policy with inline scripts
-const serverHandoffCache = new Map();
+import { theme as theme$1 } from "../theme.js";
+import { ThemeContext } from "./ThemeContext.js";
+import { useTheme as useTheme$1 } from "./useTheme.js";
+import { useId, useSyncedState } from "@primer/react";
+import React from "react";
+import { ThemeProvider as ThemeProvider$1 } from "styled-components";
+import deepmerge from "deepmerge";
+import { jsx, jsxs } from "react/jsx-runtime";
+const defaultDayScheme = "light";
+const defaultNightScheme = "dark";
+const serverHandoffCache = /* @__PURE__ */ new Map();
 const emptyHandoff = {};
-const getServerHandoff = id => {
-  if (typeof document === 'undefined') return emptyHandoff;
-  const cached = serverHandoffCache.get(id);
-  if (cached !== undefined) return cached;
-  try {
-    const serverData = document.getElementById(`__PRIMER_DATA_${id}__`)?.textContent;
-    if (serverData) {
-      const parsed = JSON.parse(serverData);
-      serverHandoffCache.set(id, parsed);
-      return parsed;
-    }
-  } catch (_error) {
-    // if document/element does not exist or JSON is invalid, supress error
-  }
-  const empty = {};
-  serverHandoffCache.set(id, empty);
-  return empty;
+const getServerHandoff = (id) => {
+	if (typeof document === "undefined") return emptyHandoff;
+	const cached = serverHandoffCache.get(id);
+	if (cached !== void 0) return cached;
+	try {
+		const serverData = document.getElementById(`__PRIMER_DATA_${id}__`)?.textContent;
+		if (serverData) {
+			const parsed = JSON.parse(serverData);
+			serverHandoffCache.set(id, parsed);
+			return parsed;
+		}
+	} catch (_error) {}
+	const empty = {};
+	serverHandoffCache.set(id, empty);
+	return empty;
 };
 const emptySubscribe = () => () => {};
-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 [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 clientColorMode = resolveColorMode(colorMode, systemColorMode);
-  // During SSR/hydration, use the server-rendered color mode from the handoff script tag
-  // to avoid mismatches. After hydration, resolve from client state.
-  const resolvedColorMode = React.useSyncExternalStore(emptySubscribe, () => clientColorMode, () => getServerHandoff(uniqueDataId).resolvedServerColorMode ?? clientColorMode);
-  const colorScheme = chooseColorScheme(resolvedColorMode, dayScheme, nightScheme);
-  const {
-    resolvedTheme,
-    resolvedColorScheme
-  } = React.useMemo(() => applyColorScheme(theme$1, colorScheme), [theme$1, colorScheme]);
-  const contextValue = React.useMemo(() => ({
-    theme: resolvedTheme,
-    colorScheme,
-    colorMode,
-    resolvedColorMode,
-    resolvedColorScheme,
-    dayScheme,
-    nightScheme,
-    setColorMode,
-    setDayScheme,
-    setNightScheme
-  }), [resolvedTheme, colorScheme, colorMode, resolvedColorMode, resolvedColorScheme, dayScheme, nightScheme, setColorMode, setDayScheme, setNightScheme]);
-  return /*#__PURE__*/jsx(ThemeContext.Provider, {
-    value: contextValue,
-    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$2 = ({ children, ...props }) => {
+	const { theme: fallbackTheme, colorMode: fallbackColorMode, dayScheme: fallbackDayScheme, nightScheme: fallbackNightScheme } = useTheme$1();
+	const theme = props.theme ?? fallbackTheme ?? theme$1;
+	const uniqueDataId = useId();
+	const [colorMode, setColorMode] = useSyncedState(props.colorMode ?? fallbackColorMode ?? "day");
+	const [dayScheme, setDayScheme] = useSyncedState(props.dayScheme ?? fallbackDayScheme ?? defaultDayScheme);
+	const [nightScheme, setNightScheme] = useSyncedState(props.nightScheme ?? fallbackNightScheme ?? defaultNightScheme);
+	const clientColorMode = resolveColorMode(colorMode, useSystemColorMode());
+	const resolvedColorMode = React.useSyncExternalStore(emptySubscribe, () => clientColorMode, () => getServerHandoff(uniqueDataId).resolvedServerColorMode ?? clientColorMode);
+	const colorScheme = chooseColorScheme(resolvedColorMode, dayScheme, nightScheme);
+	const { resolvedTheme, resolvedColorScheme } = React.useMemo(() => applyColorScheme(theme, colorScheme), [theme, colorScheme]);
+	const contextValue = React.useMemo(() => ({
+		theme: resolvedTheme,
+		colorScheme,
+		colorMode,
+		resolvedColorMode,
+		resolvedColorScheme,
+		dayScheme,
+		nightScheme,
+		setColorMode,
+		setDayScheme,
+		setNightScheme
+	}), [
+		resolvedTheme,
+		colorScheme,
+		colorMode,
+		resolvedColorMode,
+		resolvedColorScheme,
+		dayScheme,
+		nightScheme,
+		setColorMode,
+		setDayScheme,
+		setNightScheme
+	]);
+	return /*#__PURE__*/ jsx(ThemeContext.Provider, {
+		value: contextValue,
+		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]
+		})
+	});
 };
-function useTheme() {
-  return React.useContext(ThemeContext);
-}
-function useColorSchemeVar(values, fallback) {
-  const {
-    colorScheme = ''
-  } = useTheme();
-  return values[colorScheme] ?? fallback;
-}
 function subscribeToSystemColorMode(callback) {
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  const media = window?.matchMedia?.('(prefers-color-scheme: dark)');
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  media?.addEventListener('change', callback);
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  return () => media?.removeEventListener('change', callback);
+	const media = window?.matchMedia?.("(prefers-color-scheme: dark)");
+	media?.addEventListener("change", callback);
+	return () => media?.removeEventListener("change", callback);
 }
 function useSystemColorMode() {
-  return React.useSyncExternalStore(subscribeToSystemColorMode, getSystemColorMode, () => 'day');
+	return React.useSyncExternalStore(subscribeToSystemColorMode, getSystemColorMode, () => "day");
 }
 function getSystemColorMode() {
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  return window?.matchMedia?.('(prefers-color-scheme: dark)')?.matches ? 'night' : 'day';
+	return window?.matchMedia?.("(prefers-color-scheme: dark)")?.matches ? "night" : "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
-  };
+	if (!theme.colorSchemes) return {
+		resolvedTheme: theme,
+		resolvedColorScheme: void 0
+	};
+	if (!theme.colorSchemes[colorScheme]) {
+		console.error(`\`${colorScheme}\` scheme not defined in \`theme.colorSchemes\``);
+		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
+	};
 }
-
-export { ThemeProvider, defaultColorMode, useColorSchemeVar, useTheme };
+//#endregion
+export { ThemeProvider$2 as ThemeProvider, ThemeProvider$2 as default };

package/dist/components/useFeatureFlaggedTheme.d.ts

@@ -0,0 +1,8 @@
+import { useTheme as useTheme$1 } from "./useTheme.js";
+
+//#region src/components/useFeatureFlaggedTheme.d.ts
+declare function useTheme(): ReturnType<typeof useTheme$1>;
+declare function useColorSchemeVar(values: Partial<Record<string, string>>, fallback: string): string;
+//#endregion
+export { useColorSchemeVar, useTheme };
+//# sourceMappingURL=useFeatureFlaggedTheme.d.ts.map

package/dist/components/useFeatureFlaggedTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFeatureFlaggedTheme.d.ts","names":[],"sources":["../../src/components/useFeatureFlaggedTheme.ts"],"mappings":";;;iBAIgB,QAAA,IAAY,UAAU,QAAQ,UAAA;AAAA,iBAU9B,iBAAA,CAAkB,MAAA,EAAQ,OAAO,CAAC,MAAA,mBAAyB,QAAA"}