@primer/styled-react 1.1.0-rc.aaa3a8993 → 1.1.0-rc.b8979ee01

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":";;;cAOa,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,119 @@
-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 { ThemeContext } from "./ThemeContext.js";
+import { useTheme as useTheme$1 } from "./useTheme.js";
+import { theme, 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$1 = props.theme ?? fallbackTheme ?? theme;
+	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$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]
+		})
+	});
 };
-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 "@primer/react";
+
+//#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"}

package/dist/components/useFeatureFlaggedTheme.js

@@ -0,0 +1,19 @@
+import { useColorSchemeVar as useColorSchemeVar$2, useTheme as useTheme$2 } from "./useTheme.js";
+import { useColorSchemeVar, useTheme } from "@primer/react";
+import { useFeatureFlag } from "@primer/react/experimental";
+//#region src/components/useFeatureFlaggedTheme.ts
+function useTheme$1() {
+	const enabled = useFeatureFlag("primer_react_styled_react_use_primer_theme_providers");
+	const styledTheme = useTheme$2();
+	const primerTheme = useTheme();
+	if (enabled) return primerTheme;
+	return styledTheme;
+}
+function useColorSchemeVar$1(values, fallback) {
+	const enabled = useFeatureFlag("primer_react_styled_react_use_primer_theme_providers");
+	const styledValue = useColorSchemeVar$2(values, fallback);
+	const primerValue = useColorSchemeVar(values, fallback);
+	return enabled ? primerValue : styledValue;
+}
+//#endregion
+export { useColorSchemeVar$1 as useColorSchemeVar, useTheme$1 as useTheme };

package/dist/components/useTheme.d.ts

@@ -0,0 +1,20 @@
+import { ColorMode, ColorModeWithAuto, Theme } from "./ThemeProvider.js";
+import React from "react";
+
+//#region src/components/useTheme.d.ts
+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>>;
+};
+declare function useColorSchemeVar(values: Partial<Record<string, string>>, fallback: string): string;
+//#endregion
+export { useColorSchemeVar, useTheme };
+//# sourceMappingURL=useTheme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.d.ts","names":[],"sources":["../../src/components/useTheme.ts"],"mappings":";;;;iBAGgB,QAAA;UAAQ,KAAA;;;;;;;;;;;iBAIR,iBAAA,CAAkB,MAAA,EAAQ,OAAO,CAAC,MAAA,mBAAyB,QAAA"}

package/dist/components/useTheme.js

@@ -0,0 +1,12 @@
+import { ThemeContext } from "./ThemeContext.js";
+import React from "react";
+//#region src/components/useTheme.ts
+function useTheme() {
+	return React.useContext(ThemeContext);
+}
+function useColorSchemeVar(values, fallback) {
+	const { colorScheme = "" } = useTheme();
+	return values[colorScheme] ?? fallback;
+}
+//#endregion
+export { useColorSchemeVar, useTheme };

package/dist/index.d.ts

@@ -1,67 +1,6 @@
-export { 
-/**
- * @deprecated Theming in JavaScript is no longer supported. Prefer using
- * `@primer/primitives` and CSS Modules instead.
- */
-ThemeProvider, 
-/**
- * @deprecated Theming in JavaScript is no longer supported. Prefer using
- * `@primer/primitives` and CSS Modules instead.
- */
-useTheme, 
-/**
- * @deprecated Theming in JavaScript is no longer supported. Prefer using
- * `@primer/primitives` and CSS Modules instead.
- */
-useColorSchemeVar, 
-/**
- * @deprecated Theming in JavaScript is no longer supported. Prefer using
- * `@primer/primitives` and CSS Modules instead.
- */
-type ThemeProviderProps, } from './components/FeatureFlaggedTheming';
-export { 
-/**
- * @deprecated Usage of the `sx` prop with this component is no longer
- * supported. Use the component from `@primer/react` with CSS Modules instead.
- */
-BaseStyles, 
-/**
- * @deprecated Usage of the `sx` prop with this component is no longer
- * supported. Use the component from `@primer/react` with CSS Modules instead.
- */
-type BaseStylesProps, } from './components/FeatureFlaggedTheming';
-export { 
-/**
- * @deprecated Theming in JavaScript is no longer supported. Prefer using
- * `@primer/primitives` and CSS Modules instead.
- */
-theme, } from '@primer/react';
-export { 
-/**
- * @deprecated Theming in JavaScript is no longer supported. Prefer using
- * `@primer/primitives` and CSS Modules instead.
- */
-get as themeGet, } from './theme-get';
-export { 
-/**
- * @deprecated Theming in JavaScript is no longer supported. Prefer using
- * `@primer/primitives` and CSS Modules instead.
- */
-merge, 
-/**
- * @deprecated Styling with the `sx` prop is no longer supported. Use CSS
- * Modules instead
- */
-sx, 
-/**
- * @deprecated Styling with the `sx` prop is no longer supported. Use CSS
- * Modules instead
- */
-type SxProp, } from './sx';
-export { 
-/**
- * @deprecated Styling with the `sx` prop is no longer supported. Use CSS
- * Modules instead
- */
-type BetterSystemStyleObject, } from './sx';
-//# sourceMappingURL=index.d.ts.map
+import { BaseStyles, BaseStylesProps, ThemeProvider, ThemeProviderProps } from "./components/FeatureFlaggedTheming.js";
+import { useColorSchemeVar, useTheme } from "./components/useFeatureFlaggedTheme.js";
+import { get } from "./theme-get.js";
+import sx, { BetterSystemStyleObject, SxProp, merge } from "./sx.js";
+import { theme } from "@primer/react";
+export { BaseStyles, type BaseStylesProps, type BetterSystemStyleObject, type SxProp, ThemeProvider, type ThemeProviderProps, merge, sx, theme, get as themeGet, useColorSchemeVar, useTheme };

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
-export { BaseStyles, ThemeProvider, useTheme } from './components/FeatureFlaggedTheming.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';
+import { BaseStyles, ThemeProvider } from "./components/FeatureFlaggedTheming.js";
+import { useColorSchemeVar, useTheme } from "./components/useFeatureFlaggedTheme.js";
+import { get } from "./theme-get.js";
+import sx, { merge } from "./sx.js";
+import { theme } from "@primer/react";
+export { BaseStyles, ThemeProvider, merge, sx, theme, get as themeGet, useColorSchemeVar, useTheme };

package/dist/polymorphic.d.ts

@@ -1,11 +1,7 @@
-/**
- * This file is originally from `@radix-ui/react-polymorphic` before the package
- * was deprecated. The original source for this lived in the URL below.
- *
- * @see https://github.com/radix-ui/primitives/blob/17ffcb7aaa42cbd36b3c210ba86d7d73d218e5be/packages/react/polymorphic/src/polymorphic.ts
- */
-import * as React from 'react';
-import type { JSX } from 'react';
+import * as React$1 from "react";
+import { JSX } from "react";
+
+//#region src/polymorphic.d.ts
 type Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2;
 /**
  * Infers the OwnProps if E is a ForwardRefExoticComponentWithAs
@@ -15,25 +11,26 @@ type OwnProps<E> = E extends ForwardRefComponent<any, infer P> ? P : {};
  * Infers the JSX.IntrinsicElement if E is a ForwardRefExoticComponentWithAs
  */
 type IntrinsicElement<E> = E extends ForwardRefComponent<infer I, any> ? I : never;
-type ForwardRefExoticComponent<E, OwnProps> = React.ForwardRefExoticComponent<Merge<E extends React.ElementType ? React.ComponentPropsWithRef<E> : never, OwnProps & {
-    as?: E;
+type ForwardRefExoticComponent<E, OwnProps> = React$1.ForwardRefExoticComponent<Merge<E extends React$1.ElementType ? React$1.ComponentPropsWithRef<E> : never, OwnProps & {
+  as?: E;
 }>>;
 interface ForwardRefComponent<IntrinsicElementString, OwnProps = {}> extends ForwardRefExoticComponent<IntrinsicElementString, OwnProps> {
-    /**
-     * When `as` prop is passed, use this overload.
-     * Merges original own props (without DOM props) and the inferred props
-     * from `as` element with the own props taking precedence.
-     *
-     * We explicitly avoid `React.ElementType` and manually narrow the prop types
-     * so that events are typed when using JSX.IntrinsicElements.
-     */
-    <As = IntrinsicElementString>(props: As extends '' ? {
-        as: keyof JSX.IntrinsicElements;
-    } : As extends React.ComponentType<infer P> ? Merge<P, OwnProps & {
-        as: As;
-    }> : As extends keyof JSX.IntrinsicElements ? Merge<JSX.IntrinsicElements[As], OwnProps & {
-        as: As;
-    }> : never): React.ReactElement | null;
+  /**
+   * When `as` prop is passed, use this overload.
+   * Merges original own props (without DOM props) and the inferred props
+   * from `as` element with the own props taking precedence.
+   *
+   * We explicitly avoid `React.ElementType` and manually narrow the prop types
+   * so that events are typed when using JSX.IntrinsicElements.
+   */
+  <As = IntrinsicElementString>(props: As extends '' ? {
+    as: keyof JSX.IntrinsicElements;
+  } : As extends React$1.ComponentType<infer P> ? Merge<P, OwnProps & {
+    as: As;
+  }> : As extends keyof JSX.IntrinsicElements ? Merge<JSX.IntrinsicElements[As], OwnProps & {
+    as: As;
+  }> : never): React$1.ReactElement | null;
 }
-export type { ForwardRefComponent, OwnProps, IntrinsicElement, Merge };
+//#endregion
+export type { ForwardRefComponent, IntrinsicElement, Merge, OwnProps };
 //# sourceMappingURL=polymorphic.d.ts.map

package/dist/polymorphic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"polymorphic.d.ts","sourceRoot":"","sources":["../src/polymorphic.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,OAAO,CAAA;AAK9B,KAAK,KAAK,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,GAAG,EAAE,CAAA;AAEtD;;GAEG;AACH,KAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,SAAS,mBAAmB,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,CAAA;AAEvE;;GAEG;AACH,KAAK,gBAAgB,CAAC,CAAC,IAAI,CAAC,SAAS,mBAAmB,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;AAElF,KAAK,yBAAyB,CAAC,CAAC,EAAE,QAAQ,IAAI,KAAK,CAAC,yBAAyB,CAC3E,KAAK,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,QAAQ,GAAG;IAAC,EAAE,CAAC,EAAE,CAAC,CAAA;CAAC,CAAC,CACjG,CAAA;AAMD,UAAU,mBAAmB,CAC3B,sBAAsB,EACtB,QAAQ,GAAG,EAAE,CAKb,SAAQ,yBAAyB,CAAC,sBAAsB,EAAE,QAAQ,CAAC;IACnE;;;;;;;OAOG;IACH,CAAC,EAAE,GAAG,sBAAsB,EAC1B,KAAK,EAAE,EAAE,SAAS,EAAE,GAChB;QAAC,EAAE,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAA;KAAC,GACjC,EAAE,SAAS,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,GACrC,KAAK,CAAC,CAAC,EAAE,QAAQ,GAAG;QAAC,EAAE,EAAE,EAAE,CAAA;KAAC,CAAC,GAC7B,EAAE,SAAS,MAAM,GAAG,CAAC,iBAAiB,GACpC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,EAAE,CAAC,EAAE,QAAQ,GAAG;QAAC,EAAE,EAAE,EAAE,CAAA;KAAC,CAAC,GACrD,KAAK,GACZ,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;CAC7B;AAED,YAAY,EAAC,mBAAmB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,KAAK,EAAC,CAAA"}
+{"version":3,"file":"polymorphic.d.ts","names":[],"sources":["../src/polymorphic.ts"],"mappings":";;;;KAaK,KAAA,qBAA0B,IAAA,CAAK,EAAA,QAAU,EAAA,IAAM,EAAA;;;;KAK/C,QAAA,MAAc,CAAA,SAAU,mBAAmB,iBAAiB,CAAA;;;;KAK5D,gBAAA,MAAsB,CAAA,SAAU,mBAAmB,iBAAiB,CAAA;AAAA,KAEpE,yBAAA,gBAAyC,OAAA,CAAM,yBAAA,CAClD,KAAA,CAAM,CAAA,SAAU,OAAA,CAAM,WAAA,GAAc,OAAA,CAAM,qBAAA,CAAsB,CAAA,WAAY,QAAA;EAAY,EAAA,GAAK,CAAA;AAAA;AAAA,UAOrF,mBAAA,gDAOA,yBAAA,CAA0B,sBAAA,EAAwB,QAAA;EAtBvD;;;;;;;;EAAA,MA+BG,sBAAA,EACJ,KAAA,EAAO,EAAA;IACF,EAAA,QAAU,GAAA,CAAI,iBAAA;EAAA,IACf,EAAA,SAAW,OAAA,CAAM,aAAA,YACf,KAAA,CAAM,CAAA,EAAG,QAAA;IAAY,EAAA,EAAI,EAAA;EAAA,KACzB,EAAA,eAAiB,GAAA,CAAI,iBAAA,GACnB,KAAA,CAAM,GAAA,CAAI,iBAAA,CAAkB,EAAA,GAAK,QAAA;IAAY,EAAA,EAAI,EAAA;EAAA,aAExD,OAAA,CAAM,YAAA;AAAA"}

package/dist/styled-props.d.ts

@@ -1,4 +1,8 @@
-import type { BackgroundProps, BorderProps, ColorProps, FlexboxProps, GridProps, LayoutProps, PositionProps, ShadowProps, SpaceProps, TypographyProps } from 'styled-system';
-import type { SxProp } from './sx';
-export type StyledProps = SxProp & SpaceProps & ColorProps & TypographyProps & LayoutProps & FlexboxProps & GridProps & BackgroundProps & BorderProps & PositionProps & ShadowProps;
+import { SxProp } from "./sx.js";
+import { BackgroundProps, BorderProps, ColorProps, FlexboxProps, GridProps, LayoutProps, PositionProps, ShadowProps, SpaceProps, TypographyProps } from "styled-system";
+
+//#region src/styled-props.d.ts
+type StyledProps = SxProp & SpaceProps & ColorProps & TypographyProps & LayoutProps & FlexboxProps & GridProps & BackgroundProps & BorderProps & PositionProps & ShadowProps;
+//#endregion
+export { StyledProps };
 //# sourceMappingURL=styled-props.d.ts.map

package/dist/styled-props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styled-props.d.ts","sourceRoot":"","sources":["../src/styled-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EACf,WAAW,EACX,UAAU,EACV,YAAY,EACZ,SAAS,EACT,WAAW,EACX,aAAa,EACb,WAAW,EACX,UAAU,EACV,eAAe,EAChB,MAAM,eAAe,CAAA;AACtB,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,MAAM,CAAA;AAEhC,MAAM,MAAM,WAAW,GAAG,MAAM,GAC9B,UAAU,GACV,UAAU,GACV,eAAe,GACf,WAAW,GACX,YAAY,GACZ,SAAS,GACT,eAAe,GACf,WAAW,GACX,aAAa,GACb,WAAW,CAAA"}
+{"version":3,"file":"styled-props.d.ts","names":[],"sources":["../src/styled-props.ts"],"mappings":";;;;KAcY,WAAA,GAAc,MAAA,GACxB,UAAA,GACA,UAAA,GACA,eAAA,GACA,WAAA,GACA,YAAA,GACA,SAAA,GACA,eAAA,GACA,WAAA,GACA,aAAA,GACA,WAAA"}

package/dist/sx.d.ts

@@ -1,26 +1,26 @@
-import type { SystemCssProperties, SystemStyleObject } from '@styled-system/css';
-import type { ThemeColorPaths, ThemeShadowPaths } from '@primer/react';
-import type { ColorProps, BorderColorProps, ShadowProps } from 'styled-system';
-import merge from 'deepmerge';
-export type BetterCssProperties = {
-    [K in keyof SystemCssProperties]: K extends keyof ColorProps ? ThemeColorPaths | SystemCssProperties[K] : K extends keyof BorderColorProps ? ThemeColorPaths | SystemCssProperties[K] : K extends keyof ShadowProps ? ThemeShadowPaths | SystemCssProperties[K] : SystemCssProperties[K];
-};
-export type CSSCustomProperties = {
-    [key: `--${string}`]: string | number;
+import { BorderColorProps, ColorProps, ShadowProps } from "styled-system";
+import { ThemeColorPaths, ThemeShadowPaths } from "@primer/react";
+import { SystemCssProperties, SystemStyleObject } from "@styled-system/css";
+import merge from "deepmerge";
+
+//#region src/sx.d.ts
+type BetterCssProperties = { [K in keyof SystemCssProperties]: K extends keyof ColorProps ? ThemeColorPaths | SystemCssProperties[K] : K extends keyof BorderColorProps ? ThemeColorPaths | SystemCssProperties[K] : K extends keyof ShadowProps ? ThemeShadowPaths | SystemCssProperties[K] : SystemCssProperties[K] };
+type CSSCustomProperties = {
+  [key: `--${string}`]: string | number;
 };
 type CSSSelectorObject = {
-    [cssSelector: string]: SystemStyleObject | CSSCustomProperties;
+  [cssSelector: string]: SystemStyleObject | CSSCustomProperties;
 };
-export type BetterSystemStyleObject = BetterCssProperties | SystemStyleObject | CSSCustomProperties | CSSSelectorObject;
-export interface SxProp {
-    /**
-     * @deprecated The `sx` prop is deprecated. Replace with a `div` or
-     * appropriate HTML element instead, with a CSS class for styling.
-     * @see https://github.com/primer/react/blob/main/contributor-docs/migration-from-box.md
-     * */
-    sx?: BetterSystemStyleObject;
+type BetterSystemStyleObject = BetterCssProperties | SystemStyleObject | CSSCustomProperties | CSSSelectorObject;
+interface SxProp {
+  /**
+   * @deprecated The `sx` prop is deprecated. Replace with a `div` or
+   * appropriate HTML element instead, with a CSS class for styling.
+   * @see https://github.com/primer/react/blob/main/contributor-docs/migration-from-box.md
+   * */
+  sx?: BetterSystemStyleObject;
 }
 declare const sx: (props: SxProp) => import("@styled-system/css").CssFunctionReturnType;
-export default sx;
-export { merge, sx };
+//#endregion
+export { BetterCssProperties, BetterSystemStyleObject, CSSCustomProperties, SxProp, sx as default, sx, merge };
 //# sourceMappingURL=sx.d.ts.map

package/dist/sx.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sx.d.ts","sourceRoot":"","sources":["../src/sx.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,mBAAmB,EAAE,iBAAiB,EAAC,MAAM,oBAAoB,CAAA;AAE9E,OAAO,KAAK,EAAC,eAAe,EAAE,gBAAgB,EAAC,MAAM,eAAe,CAAA;AACpE,OAAO,KAAK,EAAC,UAAU,EAAE,gBAAgB,EAAE,WAAW,EAAC,MAAM,eAAe,CAAA;AAC5E,OAAO,KAAK,MAAM,WAAW,CAAA;AAE7B,MAAM,MAAM,mBAAmB,GAAG;KAC/B,CAAC,IAAI,MAAM,mBAAmB,GAAG,CAAC,SAAS,MAAM,UAAU,GACxD,eAAe,GAAG,mBAAmB,CAAC,CAAC,CAAC,GACxC,CAAC,SAAS,MAAM,gBAAgB,GAC9B,eAAe,GAAG,mBAAmB,CAAC,CAAC,CAAC,GACxC,CAAC,SAAS,MAAM,WAAW,GACzB,gBAAgB,GAAG,mBAAmB,CAAC,CAAC,CAAC,GACzC,mBAAmB,CAAC,CAAC,CAAC;CAC/B,CAAA;AAGD,MAAM,MAAM,mBAAmB,GAAG;IAChC,CAAC,GAAG,EAAE,KAAK,MAAM,EAAE,GAAG,MAAM,GAAG,MAAM,CAAA;CACtC,CAAA;AAED,KAAK,iBAAiB,GAAG;IACvB,CAAC,WAAW,EAAE,MAAM,GAAG,iBAAiB,GAAG,mBAAmB,CAAA;CAC/D,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,mBAAmB,GAAG,iBAAiB,GAAG,mBAAmB,GAAG,iBAAiB,CAAA;AAEvH,MAAM,WAAW,MAAM;IACrB;;;;SAIK;IACL,EAAE,CAAC,EAAE,uBAAuB,CAAA;CAC7B;AAED,QAAA,MAAM,EAAE,GAAI,OAAO,MAAM,uDAAkB,CAAA;AAE3C,eAAe,EAAE,CAAA;AAEjB,OAAO,EAAC,KAAK,EAAE,EAAE,EAAC,CAAA"}
+{"version":3,"file":"sx.d.ts","names":[],"sources":["../src/sx.ts"],"mappings":";;;;;;KAMY,mBAAA,iBACE,mBAAA,GAAsB,CAAA,eAAgB,UAAA,GAC9C,eAAA,GAAkB,mBAAA,CAAoB,CAAA,IACtC,CAAA,eAAgB,gBAAA,GACd,eAAA,GAAkB,mBAAA,CAAoB,CAAA,IACtC,CAAA,eAAgB,WAAA,GACd,gBAAA,GAAmB,mBAAA,CAAoB,CAAA,IACvC,mBAAA,CAAoB,CAAA;AAAA,KAIlB,mBAAA;EAAA,CACT,GAAkB;AAAA;AAAA,KAGhB,iBAAA;EAAA,CACF,WAAA,WAAsB,iBAAA,GAAoB,mBAAmB;AAAA;AAAA,KAGpD,uBAAA,GAA0B,mBAAA,GAAsB,iBAAA,GAAoB,mBAAA,GAAsB,iBAAA;AAAA,UAErF,MAAA;EAlBX;;;;;EAwBJ,EAAA,GAAK,uBAAuB;AAAA;AAAA,cAGxB,EAAA,GAAM,KAAA,EAAO,MAAM,kCAAA,qBAAA"}

package/dist/sx.js

@@ -1,8 +1,6 @@
-import css from '@styled-system/css';
-export { default as merge } from 'deepmerge';
-
-// Support CSS custom properties in the `sx` prop
-
-const sx = props => css(props.sx);
-
-export { sx };
+import merge from "deepmerge";
+import css from "@styled-system/css";
+//#region src/sx.ts
+const sx = (props) => css(props.sx);
+//#endregion
+export { sx as default, sx, merge };

package/dist/theme-get.d.ts

@@ -1,2 +1,5 @@
-export declare const get: (key: string) => (props: any) => any;
+//#region src/theme-get.d.ts
+declare const get: (key: string) => (props: any) => any;
+//#endregion
+export { get };
 //# sourceMappingURL=theme-get.d.ts.map

package/dist/theme-get.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-get.d.ts","sourceRoot":"","sources":["../src/theme-get.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,GAAG,GAAI,KAAK,MAAM,wBAAsC,CAAA"}
+{"version":3,"file":"theme-get.d.ts","names":[],"sources":["../src/theme-get.ts"],"mappings":";cAOa,GAAA,GAAO,GAAA,cAAW,KAAA"}

package/dist/theme-get.js

@@ -1,10 +1,8 @@
-import { themeGet } from '@styled-system/theme-get';
-import * as styledSystem from 'styled-system';
-import { theme } from '@primer/react';
-
-const {
-  get: getKey
-} = styledSystem;
-const get = key => themeGet(key, getKey(theme, key));
-
+import { theme } from "@primer/react";
+import { themeGet } from "@styled-system/theme-get";
+import * as styledSystem from "styled-system";
+//#region src/theme-get.ts
+const { get: getKey } = styledSystem;
+const get = (key) => themeGet(key, getKey(theme, key));
+//#endregion
 export { get };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/styled-react",
-  "version": "1.1.0-rc.aaa3a8993",
+  "version": "1.1.0-rc.b8979ee01",
   "type": "module",
   "exports": {
     ".": {
@@ -38,16 +38,18 @@
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
+    "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
     "@primer/primitives": "10.x || 11.x",
     "@primer/react": "^38.26.0",
-    "@rollup/plugin-babel": "^6.1.0",
-    "@storybook/react-vite": "^10.3.3",
+    "@rolldown/plugin-babel": "^0.2.3",
+    "@storybook/react-vite": "^10.4.2",
+    "@types/babel__core": "^7.20.5",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
     "@types/styled-components": "^5.1.26",
-    "@vitejs/plugin-react": "^4.3.3",
+    "@vitejs/plugin-react": "^6.0.2",
     "babel-plugin-react-compiler": "^1.0.0",
     "babel-plugin-styled-components": "2.1.4",
     "postcss-preset-primer": "^0.0.0",
@@ -56,8 +58,8 @@
     "react-compiler-runtime": "^1.0.0",
     "react-dom": "18.3.1",
     "rimraf": "^6.0.1",
-    "rollup": "4.59.0",
-    "rollup-plugin-typescript2": "^0.36.0",
+    "rolldown": "^1.1.2",
+    "rolldown-plugin-dts": "^0.26.0",
     "styled-components": "5.3.11",
     "typescript": "^6.0.3"
   },

package/dist/index.d.ts.map

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