@atlaskit/app-provider 3.2.10 → 3.3.1

package/dist/cjs/theme-provider/utils/load-and-mount-themes.js

@@ -0,0 +1,130 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.loadAndMountThemes = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _browserApis = require("@atlaskit/browser-apis");
+var _tokens = require("@atlaskit/tokens");
+var _isThemeMounted = require("./is-theme-mounted");
+var loadThemeCss = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(themeId) {
+    var _yield$themeImportMap, themeCss;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (!(0, _isThemeMounted.isThemeMounted)(themeId)) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return");
+        case 2:
+          if (themeId) {
+            _context.next = 4;
+            break;
+          }
+          return _context.abrupt("return");
+        case 4:
+          _context.next = 6;
+          return _tokens.themeImportMap[themeId]();
+        case 6:
+          _yield$themeImportMap = _context.sent;
+          themeCss = _yield$themeImportMap.default;
+          return _context.abrupt("return", themeCss);
+        case 9:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function loadThemeCss(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var mountThemeCss = /*#__PURE__*/function () {
+  var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(css, themeId) {
+    var doc, style;
+    return _regenerator.default.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          // SSR-safe: Only mount on client side
+          doc = (0, _browserApis.getDocument)();
+          if (doc) {
+            _context2.next = 3;
+            break;
+          }
+          return _context2.abrupt("return");
+        case 3:
+          style = doc.createElement('style');
+          style.textContent = css;
+          style.dataset.theme = themeId;
+
+          // Prevent duplicate mounting of themes.
+          // It's possible the theme was already being loaded elsewhere.
+          if (!(0, _isThemeMounted.isThemeMounted)(themeId)) {
+            _context2.next = 8;
+            break;
+          }
+          return _context2.abrupt("return");
+        case 8:
+          doc.head.appendChild(style);
+        case 9:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return function mountThemeCss(_x2, _x3) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+var loadAndMountThemeCss = /*#__PURE__*/function () {
+  var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(themeId) {
+    var themeCss;
+    return _regenerator.default.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          _context3.next = 2;
+          return loadThemeCss(themeId);
+        case 2:
+          themeCss = _context3.sent;
+          if (themeCss) {
+            _context3.next = 5;
+            break;
+          }
+          return _context3.abrupt("return");
+        case 5:
+          mountThemeCss(themeCss, themeId);
+        case 6:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  }));
+  return function loadAndMountThemeCss(_x4) {
+    return _ref3.apply(this, arguments);
+  };
+}();
+var loadAndMountThemes = exports.loadAndMountThemes = /*#__PURE__*/function () {
+  var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(theme) {
+    var themesToLoad;
+    return _regenerator.default.wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          themesToLoad = Object.values(theme).filter(function (themeId) {
+            return !!themeId;
+          });
+          themesToLoad.forEach(loadAndMountThemeCss);
+        case 2:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  }));
+  return function loadAndMountThemes(_x5) {
+    return _ref4.apply(this, arguments);
+  };
+}();

package/dist/es2019/app-provider.js

@@ -1,7 +1,7 @@
-import React, { createContext, useContext } from 'react';
+import React from 'react';
+import { InsideAppProviderContext, useIsInsideAppProvider } from './context';
 import RouterLinkProvider from './router-link-provider';
 import ThemeProvider from './theme-provider';
-const InsideAppProviderContext = /*#__PURE__*/createContext(false);
 /**
  * __App provider__
  *
@@ -16,7 +16,7 @@ function AppProvider({
   routerLinkComponent,
   UNSAFE_isThemingDisabled
 }) {
-  const isInsideAppProvider = useContext(InsideAppProviderContext);
+  const isInsideAppProvider = useIsInsideAppProvider();
   if (isInsideAppProvider) {
     throw new Error('App provider should not be nested within another app provider.');
   }

package/dist/es2019/context.js

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react';
+
+/**
+ * __Inside app provider context__
+ *
+ * A context that indicates if the current component is inside an AppProvider.
+ */
+export const InsideAppProviderContext = /*#__PURE__*/createContext(false);
+export const useIsInsideAppProvider = () => {
+  return useContext(InsideAppProviderContext);
+};

package/dist/es2019/index.js

@@ -1,5 +1,14 @@
 export { default } from './app-provider';
+
+// Theme provider
+export { UNSAFE_useColorModeForMigration } from './theme-provider/hooks/use-color-mode-for-migration';
+export { useColorMode } from './theme-provider/hooks/use-color-mode';
+export { useSetColorMode } from './theme-provider/hooks/use-set-color-mode';
+export { useSetTheme } from './theme-provider/hooks/use-set-theme';
+export { useTheme } from './theme-provider/hooks/use-theme';
 export { default as ThemeProvider } from './theme-provider';
-export { UNSAFE_useColorModeForMigration, useColorMode, useSetColorMode, useSetTheme, useTheme } from './theme-provider';
+
+// Router link provider
+
 import useRouterLink from './router-link-provider/hooks/use-router-link';
 export { useRouterLink };

package/dist/es2019/theme-provider/context/color-mode.js

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+/**
+ * __Color mode context__
+ */
+export const ColorModeContext = /*#__PURE__*/createContext(undefined);
+
+/**
+ * __Set color mode context__
+ */
+export const SetColorModeContext = /*#__PURE__*/createContext(undefined);

package/dist/es2019/theme-provider/context/inside-theme-provider.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+
+/**
+ * __Inside theme provider context__
+ */
+export const InsideThemeProviderContext = /*#__PURE__*/createContext(false);

package/dist/es2019/theme-provider/context/theme.js

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+/**
+ * __Theme context__
+ */
+export const ThemeContext = /*#__PURE__*/createContext(undefined);
+
+/**
+ * __Set theme context__
+ */
+export const SetThemeContext = /*#__PURE__*/createContext(undefined);

package/dist/es2019/theme-provider/hooks/use-color-mode-for-migration.js

@@ -0,0 +1,14 @@
+import { useContext } from 'react';
+import { ColorModeContext } from '../context/color-mode';
+
+/**
+ * __UNSAFE_useColorModeForMigration()__
+ *
+ * Returns the current color mode when inside the app provider.
+ * Unlike useColorMode, this utility returns undefined, instead of throwing an error, when the app provider is missing.
+ * This allows it to be used by components that need to operate with and without an app provider.
+ */
+export function UNSAFE_useColorModeForMigration() {
+  const value = useContext(ColorModeContext);
+  return value;
+}

package/dist/es2019/theme-provider/hooks/use-color-mode.js

@@ -0,0 +1,29 @@
+import { useContext, useEffect, useState } from 'react';
+import { getGlobalTheme, ThemeMutationObserver } from '@atlaskit/tokens';
+import { ColorModeContext } from '../context/color-mode';
+
+/**
+ * __useColorMode()__
+ *
+ * Returns the current color mode when inside the app provider.
+ */
+export function useColorMode() {
+  const value = useContext(ColorModeContext);
+
+  // TODO: This will only return 'light' or 'dark' but never 'auto', which in some cases
+  // may be desirable. We should consider returning both the reconciled color mode (e.g. 'light' or 'dark') and the selected color mode ("auto").
+  const theme = getGlobalTheme();
+  const [resolvedColorMode, setResolvedColorMode] = useState((theme === null || theme === void 0 ? void 0 : theme.colorMode) || 'light');
+  useEffect(() => {
+    // We are using theme from context so no need to reference the DOM
+    if (value) {
+      return;
+    }
+    const observer = new ThemeMutationObserver(theme => {
+      setResolvedColorMode((theme === null || theme === void 0 ? void 0 : theme.colorMode) || 'light');
+    });
+    observer.observe();
+    return () => observer.disconnect();
+  }, [value]);
+  return value ? value : resolvedColorMode;
+}

package/dist/es2019/theme-provider/hooks/use-is-inside-theme-provider.js

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { InsideThemeProviderContext } from '../context/inside-theme-provider';
+
+/**
+ * __useIsInsideThemeProvider()__
+ *
+ * Returns true if the current component is inside a ThemeProvider.
+ */
+export const useIsInsideThemeProvider = () => {
+  var _useContext;
+  return (_useContext = useContext(InsideThemeProviderContext)) !== null && _useContext !== void 0 ? _useContext : false;
+};

package/dist/es2019/theme-provider/hooks/use-set-color-mode.js

@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+import { SetColorModeContext } from '../context/color-mode';
+
+/**
+ * __useSetColorMode()__
+ *
+ * Returns the color mode setter when inside the app provider.
+ */
+export function useSetColorMode() {
+  const value = useContext(SetColorModeContext);
+  if (!value) {
+    throw new Error('useSetColorMode must be used within ThemeProvider.');
+  }
+  return value;
+}

package/dist/es2019/theme-provider/hooks/use-set-theme.js

@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+import { SetThemeContext } from '../context/theme';
+
+/**
+ * __useSetTheme()__
+ *
+ * Returns the theme setter when inside the app provider.
+ */
+export function useSetTheme() {
+  const value = useContext(SetThemeContext);
+  if (!value) {
+    throw new Error('useSetTheme must be used within ThemeProvider.');
+  }
+  return value;
+}

package/dist/es2019/theme-provider/hooks/use-theme.js

@@ -0,0 +1,23 @@
+import { useContext, useEffect, useState } from 'react';
+import { getGlobalTheme, ThemeMutationObserver } from '@atlaskit/tokens';
+import { ThemeContext } from '../context/theme';
+
+/**
+ * __useTheme()__
+ *
+ * Returns the current theme settings when inside the app provider.
+ */
+export function useTheme() {
+  const theme = useContext(ThemeContext);
+  const [resolvedTheme, setResolvedTheme] = useState(theme || getGlobalTheme());
+  useEffect(() => {
+    // We are using theme from context so no need to reference the DOM
+    if (theme) {
+      return;
+    }
+    const observer = new ThemeMutationObserver(setResolvedTheme);
+    observer.observe();
+    return () => observer.disconnect();
+  }, [theme]);
+  return theme ? theme : resolvedTheme;
+}

package/dist/es2019/theme-provider/index.js

@@ -0,0 +1,163 @@
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { bind } from 'bind-event-listener';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { getThemeHtmlAttrs, setGlobalTheme, SUBTREE_THEME_ATTRIBUTE } from '@atlaskit/tokens';
+import { useIsInsideAppProvider } from '../context';
+import { ColorModeContext, SetColorModeContext } from './context/color-mode';
+import { InsideThemeProviderContext } from './context/inside-theme-provider';
+import { SetThemeContext, ThemeContext } from './context/theme';
+import { useIsInsideThemeProvider } from './hooks/use-is-inside-theme-provider';
+import { loadAndMountThemes } from './utils/load-and-mount-themes';
+const defaultThemeSettings = {
+  dark: 'dark',
+  light: 'light',
+  spacing: 'spacing',
+  typography: 'typography'
+};
+const isMatchMediaAvailable = typeof window !== 'undefined' && 'matchMedia' in window;
+const prefersDarkModeMql = isMatchMediaAvailable ? window.matchMedia('(prefers-color-scheme: dark)') : undefined;
+
+// TODO: currently 'auto' color mode will always return 'light' in SSR.
+// Additional work required: https://product-fabric.atlassian.net/browse/DSP-9781
+function getReconciledColorMode(colorMode) {
+  if (colorMode === 'auto') {
+    return prefersDarkModeMql !== null && prefersDarkModeMql !== void 0 && prefersDarkModeMql.matches ? 'dark' : 'light';
+  }
+  return colorMode;
+}
+const contentStyles = {
+  body: "_1e0c1bgi"
+};
+/**
+ * __Theme provider__
+ *
+ * Provides global theming configuration.
+ */
+function ThemeProvider({
+  children,
+  defaultColorMode = 'auto',
+  defaultTheme
+}) {
+  const [chosenColorMode, setChosenColorMode] = useState(defaultColorMode);
+  const [reconciledColorMode, setReconciledColorMode] = useState(getReconciledColorMode(defaultColorMode));
+  const [theme, setTheme] = useState(() => ({
+    ...defaultThemeSettings,
+    ...defaultTheme
+  }));
+  const setColorMode = useCallback(colorMode => {
+    setChosenColorMode(colorMode);
+    setReconciledColorMode(getReconciledColorMode(colorMode));
+  }, []);
+  const setPartialTheme = useCallback(nextTheme => {
+    setTheme(theme => ({
+      ...theme,
+      ...nextTheme
+    }));
+  }, []);
+  const lastSetGlobalThemePromiseRef = useRef(null);
+  const isInsideAppProvider = useIsInsideAppProvider();
+  const isInsideThemeProvider = useIsInsideThemeProvider();
+  const isRootThemeProvider = isInsideAppProvider && !isInsideThemeProvider;
+  useEffect(() => {
+    if (
+    /**
+     * A top-level ThemeProvider is detected by being the first ThemeProvider inside an AppProvider.
+     *
+     * This will not use sub-tree theming but instead set the global theme state using the
+     * `@atlaskit/tokens` APIs, as it's required for styling root `html` and `body` elements
+     * for compatibility with `@atlaskit/css-reset`.
+     *
+     * In the future we could consider moving away from DOM mutations and require AppProvider to wrap
+     * `html` in order to apply global theme state, which would allow a more consistent approach to
+     * theme loading.
+     */
+    isRootThemeProvider || (
+    /**
+     * Or when not behind feature flag, partially revert to legacy behavior.
+     * This only affects theme providers that are not inside an AppProvider or a ThemeProvider,
+     * as we still need to set global theme state to prevent breaking existing apps,
+     * but also prevent multiple theme providers from loading conflicting theme states.
+     *
+     * After we roll out the feature flag, this will be removed as we will
+     * only support sub-tree theming when used outside of AppProvider.
+     */
+    !isInsideAppProvider && !isInsideThemeProvider && !fg('platform_dst_subtree_theming'))) {
+      /**
+       * We need to wait for any previous `setGlobalTheme` calls to finish before calling it again.
+       * This is to prevent race conditions as `setGlobalTheme` is async and mutates the DOM (e.g. sets the
+       * `data-color-mode` attribute on the root element).
+       *
+       * Since we can't safely abort the `setGlobalTheme` execution, we need to wait for it to properly finish before
+       * applying the new theme.
+       *
+       * Without this, we can end up in the following scenario:
+       * 1. app loads with the default 'light' theme, kicking off `setGlobalTheme`
+       * 2. app switches to 'dark' theme after retrieving value persisted in local storage, calling `setGlobalTheme` again
+       * 3. `setGlobalTheme` function execution for `dark` finishes before the initial `light` execution
+       * 4. `setGlobalTheme` function execution for `light` then finishes, resulting in the 'light' theme being applied.
+       */
+      const cleanupLastFnCall = async () => {
+        if (lastSetGlobalThemePromiseRef.current) {
+          const unbindFn = await lastSetGlobalThemePromiseRef.current;
+          unbindFn();
+          lastSetGlobalThemePromiseRef.current = null;
+        }
+      };
+      const safelySetGlobalTheme = async () => {
+        await cleanupLastFnCall();
+        const promise = setGlobalTheme({
+          ...theme,
+          colorMode: reconciledColorMode
+        });
+        lastSetGlobalThemePromiseRef.current = promise;
+      };
+      safelySetGlobalTheme();
+      return function cleanup() {
+        cleanupLastFnCall();
+      };
+    } else {
+      // For other theme providers (whether outside AppProvider or nested inside a ThemeProvider),
+      // we treat them as sub-tree themes that do not load global theme state.
+      loadAndMountThemes(theme);
+    }
+  }, [isInsideAppProvider, isInsideThemeProvider, isRootThemeProvider, reconciledColorMode, theme]);
+  useEffect(() => {
+    if (!prefersDarkModeMql) {
+      return;
+    }
+    const unbindListener = bind(prefersDarkModeMql, {
+      type: 'change',
+      listener: event => {
+        if (chosenColorMode === 'auto') {
+          setReconciledColorMode(event.matches ? 'dark' : 'light');
+        }
+      }
+    });
+    return unbindListener;
+  }, [chosenColorMode]);
+  const attrs = {
+    ...getThemeHtmlAttrs({
+      ...theme,
+      colorMode: reconciledColorMode
+    }),
+    [SUBTREE_THEME_ATTRIBUTE]: true
+  };
+  return /*#__PURE__*/React.createElement(InsideThemeProviderContext.Provider, {
+    value: true
+  }, /*#__PURE__*/React.createElement(ColorModeContext.Provider, {
+    value: reconciledColorMode
+  }, /*#__PURE__*/React.createElement(SetColorModeContext.Provider, {
+    value: setColorMode
+  }, /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+    value: theme
+  }, /*#__PURE__*/React.createElement(SetThemeContext.Provider, {
+    value: setPartialTheme
+  }, fg('platform_dst_subtree_theming') ? /*#__PURE__*/React.createElement("div", _extends({}, attrs, {
+    className: ax([contentStyles.body])
+  }), children) : children)))));
+}
+export default ThemeProvider;

package/dist/es2019/theme-provider/utils/is-theme-mounted.js

@@ -0,0 +1,16 @@
+import { getDocument } from '@atlaskit/browser-apis';
+import { THEME_DATA_ATTRIBUTE } from '@atlaskit/tokens';
+
+/**
+ * Checks if a theme is mounted in the document head.
+ *
+ * Eventually this won't be necessary as we'll utilise AppProvider context
+ * to track theme loading.
+ */
+export function isThemeMounted(themeId) {
+  const doc = getDocument();
+  if (!doc) {
+    return false;
+  }
+  return doc.head.querySelector(`style[${THEME_DATA_ATTRIBUTE}="${themeId}"]`);
+}

package/dist/es2019/theme-provider/utils/load-and-mount-themes.js

@@ -0,0 +1,47 @@
+import { getDocument } from '@atlaskit/browser-apis';
+import { themeImportMap } from '@atlaskit/tokens';
+import { isThemeMounted } from './is-theme-mounted';
+const loadThemeCss = async themeId => {
+  // Prevent duplicate loading of themes
+  if (isThemeMounted(themeId)) {
+    return;
+  }
+
+  // Gracefully handles falsy values like `null` and `undefined` when makers ignore
+  // TS to avoid loading default themes.
+  if (!themeId) {
+    return;
+  }
+  const {
+    default: themeCss
+  } = await themeImportMap[themeId]();
+  return themeCss;
+};
+const mountThemeCss = async (css, themeId) => {
+  // SSR-safe: Only mount on client side
+  const doc = getDocument();
+  if (!doc) {
+    return;
+  }
+  const style = doc.createElement('style');
+  style.textContent = css;
+  style.dataset.theme = themeId;
+
+  // Prevent duplicate mounting of themes.
+  // It's possible the theme was already being loaded elsewhere.
+  if (isThemeMounted(themeId)) {
+    return;
+  }
+  doc.head.appendChild(style);
+};
+const loadAndMountThemeCss = async themeId => {
+  const themeCss = await loadThemeCss(themeId);
+  if (!themeCss) {
+    return;
+  }
+  mountThemeCss(themeCss, themeId);
+};
+export const loadAndMountThemes = async theme => {
+  const themesToLoad = Object.values(theme).filter(themeId => !!themeId);
+  themesToLoad.forEach(loadAndMountThemeCss);
+};

package/dist/esm/app-provider.js

@@ -1,7 +1,7 @@
-import React, { createContext, useContext } from 'react';
+import React from 'react';
+import { InsideAppProviderContext, useIsInsideAppProvider } from './context';
 import RouterLinkProvider from './router-link-provider';
 import ThemeProvider from './theme-provider';
-var InsideAppProviderContext = /*#__PURE__*/createContext(false);
 /**
  * __App provider__
  *
@@ -16,7 +16,7 @@ function AppProvider(_ref) {
     defaultTheme = _ref.defaultTheme,
     routerLinkComponent = _ref.routerLinkComponent,
     UNSAFE_isThemingDisabled = _ref.UNSAFE_isThemingDisabled;
-  var isInsideAppProvider = useContext(InsideAppProviderContext);
+  var isInsideAppProvider = useIsInsideAppProvider();
   if (isInsideAppProvider) {
     throw new Error('App provider should not be nested within another app provider.');
   }

package/dist/esm/context.js

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react';
+
+/**
+ * __Inside app provider context__
+ *
+ * A context that indicates if the current component is inside an AppProvider.
+ */
+export var InsideAppProviderContext = /*#__PURE__*/createContext(false);
+export var useIsInsideAppProvider = function useIsInsideAppProvider() {
+  return useContext(InsideAppProviderContext);
+};

package/dist/esm/index.js

@@ -1,5 +1,14 @@
 export { default } from './app-provider';
+
+// Theme provider
+export { UNSAFE_useColorModeForMigration } from './theme-provider/hooks/use-color-mode-for-migration';
+export { useColorMode } from './theme-provider/hooks/use-color-mode';
+export { useSetColorMode } from './theme-provider/hooks/use-set-color-mode';
+export { useSetTheme } from './theme-provider/hooks/use-set-theme';
+export { useTheme } from './theme-provider/hooks/use-theme';
 export { default as ThemeProvider } from './theme-provider';
-export { UNSAFE_useColorModeForMigration, useColorMode, useSetColorMode, useSetTheme, useTheme } from './theme-provider';
+
+// Router link provider
+
 import useRouterLink from './router-link-provider/hooks/use-router-link';
 export { useRouterLink };

package/dist/esm/theme-provider/context/color-mode.js

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+/**
+ * __Color mode context__
+ */
+export var ColorModeContext = /*#__PURE__*/createContext(undefined);
+
+/**
+ * __Set color mode context__
+ */
+export var SetColorModeContext = /*#__PURE__*/createContext(undefined);

package/dist/esm/theme-provider/context/inside-theme-provider.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+
+/**
+ * __Inside theme provider context__
+ */
+export var InsideThemeProviderContext = /*#__PURE__*/createContext(false);

package/dist/esm/theme-provider/context/theme.js

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+/**
+ * __Theme context__
+ */
+export var ThemeContext = /*#__PURE__*/createContext(undefined);
+
+/**
+ * __Set theme context__
+ */
+export var SetThemeContext = /*#__PURE__*/createContext(undefined);

package/dist/esm/theme-provider/hooks/use-color-mode-for-migration.js

@@ -0,0 +1,14 @@
+import { useContext } from 'react';
+import { ColorModeContext } from '../context/color-mode';
+
+/**
+ * __UNSAFE_useColorModeForMigration()__
+ *
+ * Returns the current color mode when inside the app provider.
+ * Unlike useColorMode, this utility returns undefined, instead of throwing an error, when the app provider is missing.
+ * This allows it to be used by components that need to operate with and without an app provider.
+ */
+export function UNSAFE_useColorModeForMigration() {
+  var value = useContext(ColorModeContext);
+  return value;
+}