@primer/react 38.19.0-rc.c09ee891a → 38.19.0-rc.f678a3d2b

package/dist/TextInputWithTokens/TextInputWithTokens.js

@@ -3,7 +3,7 @@ import { FocusKeys } from '@primer/behaviors';
 import { isFocusable } from '@primer/behaviors/utils';
 import React, { useRef, useState } from 'react';
 import { isValidElementType } from 'react-is';
-import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
+import { useMergedRefs } from '../hooks/useMergedRefs.js';
 import { useFocusZone } from '../hooks/useFocusZone.js';
 import { useId } from '../hooks/useId.js';
 import Token from '../Token/Token.js';
@@ -25,7 +25,7 @@ const overflowCountClassMap = {
 
 // using forwardRef is important so that other components (ex. Autocomplete) can use the ref
 function TextInputWithTokensInnerComponent(t0, forwardedRef) {
-  const $ = c(151);
+  const $ = c(152);
   let IconComponent;
   let LeadingVisual;
   let TrailingVisual;
@@ -165,7 +165,7 @@ function TextInputWithTokensInnerComponent(t0, forwardedRef) {
   }
   const ref = useRef(null);
   const selectedValuesDescriptionId = useId();
-  useRefObjectAsForwardedRef(forwardedRef, ref);
+  const mergedRef = useMergedRefs(forwardedRef, ref);
   const [selectedTokenIndex, setSelectedTokenIndex] = useState();
   const [tokensAreTruncated, setTokensAreTruncated] = useState(Boolean(visibleTokenCount));
   let t6;
@@ -455,9 +455,9 @@ function TextInputWithTokensInnerComponent(t0, forwardedRef) {
   const t32 = validationStatus === "error" ? "true" : "false";
   const t33 = ariaDescribedBy || undefined;
   let t34;
-  if ($[80] !== disabled || $[81] !== handleInputBlur || $[82] !== handleInputFocus || $[83] !== handleInputKeyDown || $[84] !== inputPropsRest || $[85] !== role || $[86] !== t32 || $[87] !== t33) {
+  if ($[80] !== disabled || $[81] !== handleInputBlur || $[82] !== handleInputFocus || $[83] !== handleInputKeyDown || $[84] !== inputPropsRest || $[85] !== mergedRef || $[86] !== role || $[87] !== t32 || $[88] !== t33) {
     t34 = /*#__PURE__*/jsx(UnstyledTextInput, {
-      ref: ref,
+      ref: mergedRef,
       disabled: disabled,
       onFocus: handleInputFocus,
       onBlur: handleInputBlur,
@@ -474,42 +474,43 @@ function TextInputWithTokensInnerComponent(t0, forwardedRef) {
     $[82] = handleInputFocus;
     $[83] = handleInputKeyDown;
     $[84] = inputPropsRest;
-    $[85] = role;
-    $[86] = t32;
-    $[87] = t33;
-    $[88] = t34;
+    $[85] = mergedRef;
+    $[86] = role;
+    $[87] = t32;
+    $[88] = t33;
+    $[89] = t34;
   } else {
-    t34 = $[88];
+    t34 = $[89];
   }
   let t35;
-  if ($[89] !== selectedValuesDescription || $[90] !== selectedValuesDescriptionId || $[91] !== shouldExposeSelectedValuesDescription) {
+  if ($[90] !== selectedValuesDescription || $[91] !== selectedValuesDescriptionId || $[92] !== shouldExposeSelectedValuesDescription) {
     t35 = shouldExposeSelectedValuesDescription ? /*#__PURE__*/jsx(VisuallyHidden, {
       id: selectedValuesDescriptionId,
       children: selectedValuesDescription
     }) : null;
-    $[89] = selectedValuesDescription;
-    $[90] = selectedValuesDescriptionId;
-    $[91] = shouldExposeSelectedValuesDescription;
-    $[92] = t35;
+    $[90] = selectedValuesDescription;
+    $[91] = selectedValuesDescriptionId;
+    $[92] = shouldExposeSelectedValuesDescription;
+    $[93] = t35;
   } else {
-    t35 = $[92];
+    t35 = $[93];
   }
   let t36;
-  if ($[93] !== t34 || $[94] !== t35) {
+  if ($[94] !== t34 || $[95] !== t35) {
     t36 = /*#__PURE__*/jsxs("div", {
       className: styles.InputWrapper,
       children: [t34, t35]
     });
-    $[93] = t34;
-    $[94] = t35;
-    $[95] = t36;
+    $[94] = t34;
+    $[95] = t35;
+    $[96] = t36;
   } else {
-    t36 = $[95];
+    t36 = $[96];
   }
   let t37;
-  if ($[96] !== TokenComponent || $[97] !== disabled || $[98] !== handleTokenBlur || $[99] !== handleTokenFocus || $[100] !== handleTokenRemove || $[101] !== hideTokenRemoveButtons || $[102] !== selectedTokenIndex || $[103] !== size || $[104] !== visibleTokens) {
+  if ($[97] !== TokenComponent || $[98] !== disabled || $[99] !== handleTokenBlur || $[100] !== handleTokenFocus || $[101] !== handleTokenRemove || $[102] !== hideTokenRemoveButtons || $[103] !== selectedTokenIndex || $[104] !== size || $[105] !== visibleTokens) {
     let t38;
-    if ($[106] !== TokenComponent || $[107] !== disabled || $[108] !== handleTokenBlur || $[109] !== handleTokenFocus || $[110] !== handleTokenRemove || $[111] !== hideTokenRemoveButtons || $[112] !== selectedTokenIndex || $[113] !== size) {
+    if ($[107] !== TokenComponent || $[108] !== disabled || $[109] !== handleTokenBlur || $[110] !== handleTokenFocus || $[111] !== handleTokenRemove || $[112] !== hideTokenRemoveButtons || $[113] !== selectedTokenIndex || $[114] !== size) {
       t38 = (t39, i) => {
         const {
           id,
@@ -531,89 +532,89 @@ function TextInputWithTokensInnerComponent(t0, forwardedRef) {
           ...tokenRest
         }, id);
       };
-      $[106] = TokenComponent;
-      $[107] = disabled;
-      $[108] = handleTokenBlur;
-      $[109] = handleTokenFocus;
-      $[110] = handleTokenRemove;
-      $[111] = hideTokenRemoveButtons;
-      $[112] = selectedTokenIndex;
-      $[113] = size;
-      $[114] = t38;
+      $[107] = TokenComponent;
+      $[108] = disabled;
+      $[109] = handleTokenBlur;
+      $[110] = handleTokenFocus;
+      $[111] = handleTokenRemove;
+      $[112] = hideTokenRemoveButtons;
+      $[113] = selectedTokenIndex;
+      $[114] = size;
+      $[115] = t38;
     } else {
-      t38 = $[114];
+      t38 = $[115];
     }
     t37 = visibleTokens.map(t38);
-    $[96] = TokenComponent;
-    $[97] = disabled;
-    $[98] = handleTokenBlur;
-    $[99] = handleTokenFocus;
-    $[100] = handleTokenRemove;
-    $[101] = hideTokenRemoveButtons;
-    $[102] = selectedTokenIndex;
-    $[103] = size;
-    $[104] = visibleTokens;
-    $[105] = t37;
+    $[97] = TokenComponent;
+    $[98] = disabled;
+    $[99] = handleTokenBlur;
+    $[100] = handleTokenFocus;
+    $[101] = handleTokenRemove;
+    $[102] = hideTokenRemoveButtons;
+    $[103] = selectedTokenIndex;
+    $[104] = size;
+    $[105] = visibleTokens;
+    $[106] = t37;
   } else {
-    t37 = $[105];
+    t37 = $[106];
   }
   let t38;
-  if ($[115] !== size || $[116] !== tokens.length || $[117] !== tokensAreTruncated || $[118] !== visibleTokens.length) {
+  if ($[116] !== size || $[117] !== tokens.length || $[118] !== tokensAreTruncated || $[119] !== visibleTokens.length) {
     t38 = tokensAreTruncated && tokens.length - visibleTokens.length ? /*#__PURE__*/jsxs(Text, {
       className: overflowCountClassMap[size],
       children: ["+", tokens.length - visibleTokens.length]
     }) : null;
-    $[115] = size;
-    $[116] = tokens.length;
-    $[117] = tokensAreTruncated;
-    $[118] = visibleTokens.length;
-    $[119] = t38;
+    $[116] = size;
+    $[117] = tokens.length;
+    $[118] = tokensAreTruncated;
+    $[119] = visibleTokens.length;
+    $[120] = t38;
   } else {
-    t38 = $[119];
+    t38 = $[120];
   }
   let t39;
-  if ($[120] !== preventTokenWrapping || $[121] !== t31 || $[122] !== t36 || $[123] !== t37 || $[124] !== t38) {
+  if ($[121] !== preventTokenWrapping || $[122] !== t31 || $[123] !== t36 || $[124] !== t37 || $[125] !== t38) {
     t39 = /*#__PURE__*/jsxs("div", {
       ref: t31,
       className: styles.Container,
       "data-prevent-token-wrapping": preventTokenWrapping,
       children: [t36, t37, t38]
     });
-    $[120] = preventTokenWrapping;
-    $[121] = t31;
-    $[122] = t36;
-    $[123] = t37;
-    $[124] = t38;
-    $[125] = t39;
+    $[121] = preventTokenWrapping;
+    $[122] = t31;
+    $[123] = t36;
+    $[124] = t37;
+    $[125] = t38;
+    $[126] = t39;
   } else {
-    t39 = $[125];
+    t39 = $[126];
   }
   const t40 = typeof loading === "boolean";
   let t41;
-  if ($[126] !== TrailingVisual) {
+  if ($[127] !== TrailingVisual) {
     t41 = typeof TrailingVisual !== "string" && isValidElementType(TrailingVisual) ? /*#__PURE__*/jsx(TrailingVisual, {}) : TrailingVisual;
-    $[126] = TrailingVisual;
-    $[127] = t41;
+    $[127] = TrailingVisual;
+    $[128] = t41;
   } else {
-    t41 = $[127];
+    t41 = $[128];
   }
   let t42;
-  if ($[128] !== showTrailingLoadingIndicator || $[129] !== t40 || $[130] !== t41) {
+  if ($[129] !== showTrailingLoadingIndicator || $[130] !== t40 || $[131] !== t41) {
     t42 = /*#__PURE__*/jsx(TextInputInnerVisualSlot, {
       hasLoadingIndicator: t40,
       visualPosition: "trailing",
       showLoadingIndicator: showTrailingLoadingIndicator,
       children: t41
     });
-    $[128] = showTrailingLoadingIndicator;
-    $[129] = t40;
-    $[130] = t41;
-    $[131] = t42;
+    $[129] = showTrailingLoadingIndicator;
+    $[130] = t40;
+    $[131] = t41;
+    $[132] = t42;
   } else {
-    t42 = $[131];
+    t42 = $[132];
   }
   let t43;
-  if ($[132] !== block || $[133] !== contrast || $[134] !== disabled || $[135] !== maxWidthProp || $[136] !== minWidthProp || $[137] !== t21 || $[138] !== t22 || $[139] !== t23 || $[140] !== t24 || $[141] !== t25 || $[142] !== t26 || $[143] !== t27 || $[144] !== t30 || $[145] !== t39 || $[146] !== t42 || $[147] !== validationStatus || $[148] !== variantProp || $[149] !== widthProp) {
+  if ($[133] !== block || $[134] !== contrast || $[135] !== disabled || $[136] !== maxWidthProp || $[137] !== minWidthProp || $[138] !== t21 || $[139] !== t22 || $[140] !== t23 || $[141] !== t24 || $[142] !== t25 || $[143] !== t26 || $[144] !== t27 || $[145] !== t30 || $[146] !== t39 || $[147] !== t42 || $[148] !== validationStatus || $[149] !== variantProp || $[150] !== widthProp) {
     t43 = /*#__PURE__*/jsxs(TextInputWrapper, {
       block: block,
       contrast: contrast,
@@ -632,27 +633,27 @@ function TextInputWithTokensInnerComponent(t0, forwardedRef) {
       style: t26,
       children: [t27, t30, t39, t42]
     });
-    $[132] = block;
-    $[133] = contrast;
-    $[134] = disabled;
-    $[135] = maxWidthProp;
-    $[136] = minWidthProp;
-    $[137] = t21;
-    $[138] = t22;
-    $[139] = t23;
-    $[140] = t24;
-    $[141] = t25;
-    $[142] = t26;
-    $[143] = t27;
-    $[144] = t30;
-    $[145] = t39;
-    $[146] = t42;
-    $[147] = validationStatus;
-    $[148] = variantProp;
-    $[149] = widthProp;
-    $[150] = t43;
+    $[133] = block;
+    $[134] = contrast;
+    $[135] = disabled;
+    $[136] = maxWidthProp;
+    $[137] = minWidthProp;
+    $[138] = t21;
+    $[139] = t22;
+    $[140] = t23;
+    $[141] = t24;
+    $[142] = t25;
+    $[143] = t26;
+    $[144] = t27;
+    $[145] = t30;
+    $[146] = t39;
+    $[147] = t42;
+    $[148] = validationStatus;
+    $[149] = variantProp;
+    $[150] = widthProp;
+    $[151] = t43;
   } else {
-    t43 = $[150];
+    t43 = $[151];
   }
   return t43;
 }

package/dist/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/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,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,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B,CAAA;AA8BD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAsF/E,CAAA;AAED,wBAAgB,QAAQ;YAnHd,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;EA4G7D;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,UAG1F;AAqGD,eAAe,aAAa,CAAA"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,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,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B,CAAA;AA8CD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CA6E/E,CAAA;AAED,wBAAgB,QAAQ;YA1Hd,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;EAmH7D;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,UAG1F;AAqED,eAAe,aAAa,CAAA"}

package/dist/ThemeProvider.js

@@ -1,6 +1,5 @@
 import { c } from 'react-compiler-runtime';
 import React from 'react';
-import ReactDOM from 'react-dom';
 import theme from './theme.js';
 import deepmerge from 'deepmerge';
 import { useSyncedState } from './hooks/useSyncedState.js';
@@ -20,71 +19,115 @@ const ThemeContext = /*#__PURE__*/React.createContext({
 });
 
 // inspired from __NEXT_DATA__, we use application/json to avoid CSRF policy with inline scripts
+const serverHandoffCache = new Map();
+const emptyHandoff = {};
 const getServerHandoff = id => {
+  if (typeof document === 'undefined') return emptyHandoff;
+  const cached = serverHandoffCache.get(id);
+  if (cached !== undefined) return cached;
   try {
     var _document$getElementB;
     const serverData = (_document$getElementB = document.getElementById(`__PRIMER_DATA_${id}__`)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.textContent;
-    if (serverData) return JSON.parse(serverData);
+    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, suppress error
   }
-  return {};
+  const empty = {};
+  serverHandoffCache.set(id, empty);
+  return empty;
 };
-const ThemeProvider = ({
-  children,
-  ...props
-}) => {
+const emptySubscribe = () => () => {};
+const ThemeProvider = t0 => {
   var _ref, _props$colorMode, _ref2, _props$dayScheme, _ref3, _props$nightScheme;
-  // Get fallback values from parent ThemeProvider (if exists)
+  const $ = c(42);
+  let children;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      children,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = props;
+  } else {
+    children = $[1];
+    props = $[2];
+  }
   const {
     theme: fallbackTheme,
     colorMode: fallbackColorMode,
     dayScheme: fallbackDayScheme,
     nightScheme: fallbackNightScheme
   } = useTheme();
-
-  // Initialize state
   const theme$1 = fallbackTheme !== null && fallbackTheme !== void 0 ? fallbackTheme : theme;
   const uniqueDataId = useId();
-  const {
-    resolvedServerColorMode
-  } = getServerHandoff(uniqueDataId);
-  const resolvedColorModePassthrough = React.useRef(resolvedServerColorMode);
   const [colorMode, setColorMode] = useSyncedState((_ref = (_props$colorMode = props.colorMode) !== null && _props$colorMode !== void 0 ? _props$colorMode : fallbackColorMode) !== null && _ref !== void 0 ? _ref : defaultColorMode);
   const [dayScheme, setDayScheme] = useSyncedState((_ref2 = (_props$dayScheme = props.dayScheme) !== null && _props$dayScheme !== void 0 ? _props$dayScheme : fallbackDayScheme) !== null && _ref2 !== void 0 ? _ref2 : defaultDayScheme);
   const [nightScheme, setNightScheme] = useSyncedState((_ref3 = (_props$nightScheme = props.nightScheme) !== null && _props$nightScheme !== void 0 ? _props$nightScheme : fallbackNightScheme) !== null && _ref3 !== void 0 ? _ref3 : defaultNightScheme);
   const systemColorMode = useSystemColorMode();
-  // eslint-disable-next-line react-hooks/refs
-  const resolvedColorMode = resolvedColorModePassthrough.current || resolveColorMode(colorMode, systemColorMode);
-  const colorScheme = chooseColorScheme(resolvedColorMode, dayScheme, nightScheme);
+  let t1;
+  if ($[3] !== colorMode || $[4] !== systemColorMode) {
+    t1 = resolveColorMode(colorMode, systemColorMode);
+    $[3] = colorMode;
+    $[4] = systemColorMode;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  const clientColorMode = t1;
+  let t2;
+  if ($[6] !== clientColorMode) {
+    t2 = () => clientColorMode;
+    $[6] = clientColorMode;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  let t3;
+  if ($[8] !== clientColorMode || $[9] !== uniqueDataId) {
+    t3 = () => {
+      var _getServerHandoff$res;
+      return (_getServerHandoff$res = getServerHandoff(uniqueDataId).resolvedServerColorMode) !== null && _getServerHandoff$res !== void 0 ? _getServerHandoff$res : clientColorMode;
+    };
+    $[8] = clientColorMode;
+    $[9] = uniqueDataId;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  const resolvedColorMode = React.useSyncExternalStore(emptySubscribe, t2, t3);
+  let t4;
+  if ($[11] !== dayScheme || $[12] !== nightScheme || $[13] !== resolvedColorMode) {
+    t4 = chooseColorScheme(resolvedColorMode, dayScheme, nightScheme);
+    $[11] = dayScheme;
+    $[12] = nightScheme;
+    $[13] = resolvedColorMode;
+    $[14] = t4;
+  } else {
+    t4 = $[14];
+  }
+  const colorScheme = t4;
+  let t5;
+  if ($[15] !== colorScheme || $[16] !== theme$1) {
+    t5 = applyColorScheme(theme$1, colorScheme);
+    $[15] = colorScheme;
+    $[16] = theme$1;
+    $[17] = t5;
+  } else {
+    t5 = $[17];
+  }
   const {
     resolvedTheme,
     resolvedColorScheme
-  } = React.useMemo(() => applyColorScheme(theme$1, colorScheme), [theme$1, colorScheme]);
-
-  // this effect will only run on client
-  React.useEffect(function updateColorModeAfterServerPassthrough() {
-    const resolvedColorModeOnClient = resolveColorMode(colorMode, systemColorMode);
-    if (resolvedColorModePassthrough.current) {
-      // if the resolved color mode passed on from the server is not the resolved color mode on client, change it!
-      if (resolvedColorModePassthrough.current !== resolvedColorModeOnClient) {
-        window.setTimeout(() => {
-          // use ReactDOM.flushSync to prevent automatic batching of state updates since React 18
-          // ref: https://github.com/reactwg/react-18/discussions/21
-          ReactDOM.flushSync(() => {
-            // override colorMode to whatever is resolved on the client to get a re-render
-            setColorMode(resolvedColorModeOnClient);
-          });
-
-          // immediately after that, set the colorMode to what the user passed to respond to system color mode changes
-          setColorMode(colorMode);
-        });
-      }
-      resolvedColorModePassthrough.current = null;
-    }
-  }, [colorMode, systemColorMode, setColorMode]);
-  return /*#__PURE__*/jsx(ThemeContext.Provider, {
-    value: {
+  } = t5;
+  let t6;
+  if ($[18] !== colorMode || $[19] !== colorScheme || $[20] !== dayScheme || $[21] !== nightScheme || $[22] !== resolvedColorMode || $[23] !== resolvedColorScheme || $[24] !== resolvedTheme || $[25] !== setColorMode || $[26] !== setDayScheme || $[27] !== setNightScheme) {
+    t6 = {
       theme: resolvedTheme,
       colorScheme,
       colorMode,
@@ -95,24 +138,72 @@ const ThemeProvider = ({
       setColorMode,
       setDayScheme,
       setNightScheme
-    },
-    children: /*#__PURE__*/jsxs("div", {
-      "data-color-mode": colorMode === 'auto' ? 'auto' : colorScheme.includes('dark') ? 'dark' : 'light',
+    };
+    $[18] = colorMode;
+    $[19] = colorScheme;
+    $[20] = dayScheme;
+    $[21] = nightScheme;
+    $[22] = resolvedColorMode;
+    $[23] = resolvedColorScheme;
+    $[24] = resolvedTheme;
+    $[25] = setColorMode;
+    $[26] = setDayScheme;
+    $[27] = setNightScheme;
+    $[28] = t6;
+  } else {
+    t6 = $[28];
+  }
+  const contextValue = t6;
+  const t7 = colorMode === "auto" ? "auto" : colorScheme.includes("dark") ? "dark" : "light";
+  let t8;
+  if ($[29] !== props.preventSSRMismatch || $[30] !== resolvedColorMode || $[31] !== uniqueDataId) {
+    t8 = props.preventSSRMismatch ? /*#__PURE__*/jsx("script", {
+      type: "application/json",
+      id: `__PRIMER_DATA_${uniqueDataId}__`,
+      dangerouslySetInnerHTML: {
+        __html: JSON.stringify({
+          resolvedServerColorMode: resolvedColorMode
+        })
+      }
+    }) : null;
+    $[29] = props.preventSSRMismatch;
+    $[30] = resolvedColorMode;
+    $[31] = uniqueDataId;
+    $[32] = t8;
+  } else {
+    t8 = $[32];
+  }
+  let t9;
+  if ($[33] !== children || $[34] !== dayScheme || $[35] !== nightScheme || $[36] !== t7 || $[37] !== t8) {
+    t9 = /*#__PURE__*/jsxs("div", {
+      "data-color-mode": t7,
       "data-light-theme": dayScheme,
       "data-dark-theme": nightScheme,
-      children: [children, props.preventSSRMismatch ? /*#__PURE__*/jsx("script", {
-        type: "application/json",
-        id: `__PRIMER_DATA_${uniqueDataId}__`,
-        dangerouslySetInnerHTML: {
-          __html: JSON.stringify({
-            resolvedServerColorMode: resolvedColorMode
-          })
-        }
-      }) : null]
-    })
-  });
+      children: [children, t8]
+    });
+    $[33] = children;
+    $[34] = dayScheme;
+    $[35] = nightScheme;
+    $[36] = t7;
+    $[37] = t8;
+    $[38] = t9;
+  } else {
+    t9 = $[38];
+  }
+  let t10;
+  if ($[39] !== contextValue || $[40] !== t9) {
+    t10 = /*#__PURE__*/jsx(ThemeContext.Provider, {
+      value: contextValue,
+      children: t9
+    });
+    $[39] = contextValue;
+    $[40] = t9;
+    $[41] = t10;
+  } else {
+    t10 = $[41];
+  }
+  return t10;
 };
-ThemeProvider.displayName = "ThemeProvider";
 function useTheme() {
   return React.useContext(ThemeContext);
 }
@@ -124,57 +215,25 @@ function useColorSchemeVar(values, fallback) {
   const colorScheme = t0 === undefined ? "" : t0;
   return (_values$colorScheme = values[colorScheme]) !== null && _values$colorScheme !== void 0 ? _values$colorScheme : fallback;
 }
+function subscribeToSystemColorMode(callback) {
+  var _window, _window$matchMedia;
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  const media = (_window = window) === null || _window === void 0 ? void 0 : (_window$matchMedia = _window.matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, '(prefers-color-scheme: dark)');
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  media === null || media === void 0 ? void 0 : media.addEventListener('change', callback);
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  return () => media === null || media === void 0 ? void 0 : media.removeEventListener('change', callback);
+}
 function useSystemColorMode() {
-  const $ = c(2);
-  const [systemColorMode, setSystemColorMode] = React.useState(getSystemColorMode);
-  let t0;
-  let t1;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = () => {
-      var _window, _window$matchMedia;
-      const media = (_window = window) === null || _window === void 0 ? void 0 : (_window$matchMedia = _window.matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, "(prefers-color-scheme: dark)");
-      const matchesMediaToColorMode = function matchesMediaToColorMode(matches) {
-        return matches ? "night" : "day";
-      };
-      const handleChange = function handleChange(event) {
-        const isNight = event.matches;
-        setSystemColorMode(matchesMediaToColorMode(isNight));
-      };
-      if (media) {
-        const isNight_0 = media.matches;
-        setSystemColorMode(matchesMediaToColorMode(isNight_0));
-        if (media.addEventListener !== undefined) {
-          media.addEventListener("change", handleChange);
-          return function cleanup() {
-            media.removeEventListener("change", handleChange);
-          };
-        } else {
-          if (media.addListener !== undefined) {
-            media.addListener(handleChange);
-            return function cleanup() {
-              media.removeListener(handleChange);
-            };
-          }
-        }
-      }
-    };
-    t1 = [];
-    $[0] = t0;
-    $[1] = t1;
-  } else {
-    t0 = $[0];
-    t1 = $[1];
-  }
-  React.useEffect(t0, t1);
-  return systemColorMode;
+  return React.useSyncExternalStore(subscribeToSystemColorMode, getSystemColorMode, _temp);
+}
+function _temp() {
+  return "day";
 }
 function getSystemColorMode() {
-  var _window$matchMedia2, _window2, _window$matchMedia2$c;
+  var _window2, _window2$matchMedia, _window2$matchMedia$c;
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  if (typeof window !== 'undefined' && (_window$matchMedia2 = (_window2 = window).matchMedia) !== null && _window$matchMedia2 !== void 0 && (_window$matchMedia2$c = _window$matchMedia2.call(_window2, '(prefers-color-scheme: dark)')) !== null && _window$matchMedia2$c !== void 0 && _window$matchMedia2$c.matches) {
-    return 'night';
-  }
-  return 'day';
+  return (_window2 = window) !== null && _window2 !== void 0 && (_window2$matchMedia = _window2.matchMedia) !== null && _window2$matchMedia !== void 0 && (_window2$matchMedia$c = _window2$matchMedia.call(_window2, '(prefers-color-scheme: dark)')) !== null && _window2$matchMedia$c !== void 0 && _window2$matchMedia$c.matches ? 'night' : 'day';
 }
 function resolveColorMode(colorMode, systemColorMode) {
   switch (colorMode) {