@primer/styled-react 1.1.0-rc.dc2cb3e06 → 1.1.0-rc.ee664b93c

package/dist/components/BaseStyles.js

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { useTheme } from './ThemeProvider.js';
+import { useTheme } from './useTheme.js';
 import 'focus-visible';
 import { createGlobalStyle } from 'styled-components';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/components/FeatureFlaggedTheming.d.ts

@@ -1,12 +1,8 @@
 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;
 //# 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","sourceRoot":"","sources":["../../src/components/FeatureFlaggedTheming.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,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,UAAU,CAAC,KAAK,EAAE,eAAe,qBAMhD"}

package/dist/components/FeatureFlaggedTheming.js

@@ -1,7 +1,6 @@
-import { BaseStyles as BaseStyles$1, ThemeProvider as ThemeProvider$1, useTheme as useTheme$2 } from '@primer/react';
+import { BaseStyles as BaseStyles$1, ThemeProvider as ThemeProvider$1 } 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 { ThemeProvider as ThemeProvider$2 } from './ThemeProvider.js';
 import { BaseStyles as BaseStyles$2 } from './BaseStyles.js';
 import { jsx } from 'react/jsx-runtime';
 
@@ -21,15 +20,6 @@ const ThemeProvider = ({
     children: 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(props) {
   const enabled = useFeatureFlag('primer_react_styled_react_use_primer_theme_providers');
   if (enabled) {
@@ -42,4 +32,4 @@ function BaseStyles(props) {
   });
 }
 
-export { BaseStyles, ThemeProvider, useTheme };
+export { BaseStyles, ThemeProvider };

package/dist/components/ThemeContext.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ColorMode, ColorModeWithAuto, Theme } from './ThemeProvider';
+export 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>>;
+}>;
+//# sourceMappingURL=ThemeContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/components/ThemeContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAC,SAAS,EAAE,iBAAiB,EAAE,KAAK,EAAC,MAAM,iBAAiB,CAAA;AAExE,eAAO,MAAM,YAAY;YACf,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;EAK5D,CAAA"}

package/dist/components/ThemeContext.js

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

package/dist/components/ThemeProvider.d.ts

@@ -3,7 +3,7 @@ export declare const defaultColorMode = "day";
 export type Theme = {
     [key: string]: any;
 };
-type ColorMode = 'day' | 'night' | 'light' | 'dark';
+export type ColorMode = 'day' | 'night' | 'light' | 'dark';
 export type ColorModeWithAuto = ColorMode | 'auto';
 export type ThemeProviderProps = {
     theme?: Theme;
@@ -18,18 +18,5 @@ export type ThemeProviderProps = {
     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;
 //# 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","sourceRoot":"","sources":["../../src/components/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,eAAO,MAAM,gBAAgB,QAAQ,CAAA;AAKrC,MAAM,MAAM,KAAK,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAC,CAAA;AACxC,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAA;AAC1D,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;AA6BD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAyE/E,CAAA;AAqED,eAAe,aAAa,CAAA"}

package/dist/components/ThemeProvider.js

@@ -2,6 +2,8 @@ import React from 'react';
 import { ThemeProvider as ThemeProvider$1 } from 'styled-components';
 import { theme, useId, useSyncedState } from '@primer/react';
 import deepmerge from 'deepmerge';
+import { ThemeContext } from './ThemeContext.js';
+import { useTheme } from './useTheme.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 const defaultColorMode = 'day';
@@ -10,12 +12,6 @@ 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();
 const emptyHandoff = {};
@@ -94,15 +90,6 @@ const ThemeProvider = ({
     })
   });
 };
-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)');
@@ -160,4 +147,4 @@ function applyColorScheme(theme, colorScheme) {
   };
 }
 
-export { ThemeProvider, defaultColorMode, useColorSchemeVar, useTheme };
+export { ThemeProvider, defaultColorMode };

package/dist/components/useFeatureFlaggedTheme.d.ts

@@ -0,0 +1,4 @@
+import { useTheme as primerUseTheme } from '@primer/react';
+export declare function useTheme(): ReturnType<typeof primerUseTheme>;
+export declare function useColorSchemeVar(values: Partial<Record<string, string>>, fallback: string): string;
+//# sourceMappingURL=useFeatureFlaggedTheme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFeatureFlaggedTheme.d.ts","sourceRoot":"","sources":["../../src/components/useFeatureFlaggedTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+C,QAAQ,IAAI,cAAc,EAAC,MAAM,eAAe,CAAA;AAItG,wBAAgB,QAAQ,IAAI,UAAU,CAAC,OAAO,cAAc,CAAC,CAQ5D;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,UAK1F"}

package/dist/components/useFeatureFlaggedTheme.js

@@ -0,0 +1,21 @@
+import { useColorSchemeVar as useColorSchemeVar$2, useTheme as useTheme$2 } from '@primer/react';
+import { useFeatureFlag } from '@primer/react/experimental';
+import { useColorSchemeVar as useColorSchemeVar$1, useTheme as useTheme$1 } from './useTheme.js';
+
+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 useColorSchemeVar(values, fallback) {
+  const enabled = useFeatureFlag('primer_react_styled_react_use_primer_theme_providers');
+  const styledValue = useColorSchemeVar$1(values, fallback);
+  const primerValue = useColorSchemeVar$2(values, fallback);
+  return enabled ? primerValue : styledValue;
+}
+
+export { useColorSchemeVar, useTheme };

package/dist/components/useTheme.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export declare function useTheme(): {
+    theme?: import("./ThemeProvider").Theme;
+    colorScheme?: string;
+    colorMode?: import("./ThemeProvider").ColorModeWithAuto;
+    resolvedColorMode?: import("./ThemeProvider").ColorMode;
+    resolvedColorScheme?: string;
+    dayScheme?: string;
+    nightScheme?: string;
+    setColorMode: React.Dispatch<React.SetStateAction<import("./ThemeProvider").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;
+//# sourceMappingURL=useTheme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/components/useTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,wBAAgB,QAAQ;;;;;;;;;;;EAEvB;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,UAG1F"}

package/dist/components/useTheme.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ThemeContext } from './ThemeContext.js';
+
+function useTheme() {
+  return React.useContext(ThemeContext);
+}
+function useColorSchemeVar(values, fallback) {
+  const {
+    colorScheme = ''
+  } = useTheme();
+  return values[colorScheme] ?? fallback;
+}
+
+export { useColorSchemeVar, useTheme };

package/dist/index.d.ts

@@ -8,17 +8,18 @@ ThemeProvider,
  * @deprecated Theming in JavaScript is no longer supported. Prefer using
  * `@primer/primitives` and CSS Modules instead.
  */
-useTheme, 
+type ThemeProviderProps, } from './components/FeatureFlaggedTheming';
+export { 
 /**
  * @deprecated Theming in JavaScript is no longer supported. Prefer using
  * `@primer/primitives` and CSS Modules instead.
  */
-useColorSchemeVar, 
+useTheme, 
 /**
  * @deprecated Theming in JavaScript is no longer supported. Prefer using
  * `@primer/primitives` and CSS Modules instead.
  */
-type ThemeProviderProps, } from './components/FeatureFlaggedTheming';
+useColorSchemeVar, } from './components/useFeatureFlaggedTheme';
 export { 
 /**
  * @deprecated Usage of the `sx` prop with this component is no longer

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO;AACL;;;GAGG;AACH,aAAa;AAEb;;;GAGG;AACH,QAAQ;AAER;;;GAGG;AACH,iBAAiB;AAEjB;;;GAGG;AACH,KAAK,kBAAkB,GACxB,MAAM,oCAAoC,CAAA;AAE3C,OAAO;AACL;;;GAGG;AACH,UAAU;AAEV;;;GAGG;AACH,KAAK,eAAe,GACrB,MAAM,oCAAoC,CAAA;AAE3C,OAAO;AACL;;;GAGG;AACH,KAAK,GACN,MAAM,eAAe,CAAA;AAEtB,OAAO;AACL;;;GAGG;AACH,GAAG,IAAI,QAAQ,GAChB,MAAM,aAAa,CAAA;AAEpB,OAAO;AACL;;;GAGG;AACH,KAAK;AAEL;;;GAGG;AACH,EAAE;AAEF;;;GAGG;AACH,KAAK,MAAM,GACZ,MAAM,MAAM,CAAA;AAEb,OAAO;AACL;;;GAGG;AACH,KAAK,uBAAuB,GAC7B,MAAM,MAAM,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO;AACL;;;GAGG;AACH,aAAa;AAEb;;;GAGG;AACH,KAAK,kBAAkB,GACxB,MAAM,oCAAoC,CAAA;AAE3C,OAAO;AACL;;;GAGG;AACH,QAAQ;AAER;;;GAGG;AACH,iBAAiB,GAClB,MAAM,qCAAqC,CAAA;AAE5C,OAAO;AACL;;;GAGG;AACH,UAAU;AAEV;;;GAGG;AACH,KAAK,eAAe,GACrB,MAAM,oCAAoC,CAAA;AAE3C,OAAO;AACL;;;GAGG;AACH,KAAK,GACN,MAAM,eAAe,CAAA;AAEtB,OAAO;AACL;;;GAGG;AACH,GAAG,IAAI,QAAQ,GAChB,MAAM,aAAa,CAAA;AAEpB,OAAO;AACL;;;GAGG;AACH,KAAK;AAEL;;;GAGG;AACH,EAAE;AAEF;;;GAGG;AACH,KAAK,MAAM,GACZ,MAAM,MAAM,CAAA;AAEb,OAAO;AACL;;;GAGG;AACH,KAAK,uBAAuB,GAC7B,MAAM,MAAM,CAAA"}

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
-export { BaseStyles, ThemeProvider, useTheme } from './components/FeatureFlaggedTheming.js';
+export { BaseStyles, ThemeProvider } from './components/FeatureFlaggedTheming.js';
+export { useColorSchemeVar, useTheme } from './components/useFeatureFlaggedTheme.js';
 export { theme } from '@primer/react';
 export { get as themeGet } from './theme-get.js';
 export { sx } from './sx.js';
 export { default as merge } from 'deepmerge';
-export { useColorSchemeVar } from './components/ThemeProvider.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/styled-react",
-  "version": "1.1.0-rc.dc2cb3e06",
+  "version": "1.1.0-rc.ee664b93c",
   "type": "module",
   "exports": {
     ".": {