@chakra-ui/color-mode - npm Package Compare versions

Comparing version 1.3.0 to 1.3.1

CHANGELOG.md

 # Change Log
 
+## 1.3.1
+
+### Patch Changes
+
+- [#5075](https://github.com/chakra-ui/chakra-ui/pull/5075)
+  [`b28142946`](https://github.com/chakra-ui/chakra-ui/commit/b281429462a099b7fd7f9352e837cd28d1a2da0e)
+  Thanks [@cschroeter](https://github.com/cschroeter)! - Update babel config to
+  transpile soruces for older browsers. This fixes issues with CRA and
+  Storybook.
+- Updated dependencies
+  [[`b28142946`](https://github.com/chakra-ui/chakra-ui/commit/b281429462a099b7fd7f9352e837cd28d1a2da0e)]:
+  - @chakra-ui/react-env@1.1.1
+  - @chakra-ui/hooks@1.7.1
+  - @chakra-ui/utils@1.9.1
+
 ## 1.3.0
@@ -4,0 +19,0 @@

dist/chakra-ui-color-mode.cjs.dev.js

@@ -47,3 +47,3 @@ 'use strict';
 
-const classNames = {
+var classNames = {
   light: "chakra-ui-light",
@@ -56,3 +56,3 @@ dark: "chakra-ui-dark"
  */
-const mockBody = {
+var mockBody = {
   classList: {
@@ -64,3 +64,5 @@ add: utils.noop,
 
-const getBody = document => utils.isBrowser ? document.body : mockBody;
+var getBody = function getBody(document) {
+  return utils.isBrowser ? document.body : mockBody;
+};
 /**
@@ -72,3 +74,3 @@ * Function to add/remove class from `body` based on color mode
 function syncBodyClassName(isDark, document) {
-  const body = getBody(document);
+  var body = getBody(document);
   body.classList.add(isDark ? classNames.dark : classNames.light);
@@ -82,3 +84,3 @@ body.classList.remove(isDark ? classNames.light : classNames.dark);
 function getMediaQuery(query) {
-  const mediaQueryList = window.matchMedia?.(query);
+  var mediaQueryList = window.matchMedia == null ? void 0 : window.matchMedia(query);
 
@@ -92,3 +94,3 @@ if (!mediaQueryList) {
 
-const queries = {
+var queries = {
   light: "(prefers-color-scheme: light)",
@@ -99,3 +101,5 @@ dark: "(prefers-color-scheme: dark)"
 function getColorScheme(fallback) {
-  const isDark = getMediaQuery(queries.dark) ?? fallback === "dark";
+  var _getMediaQuery;
+
+  var isDark = (_getMediaQuery = getMediaQuery(queries.dark)) != null ? _getMediaQuery : fallback === "dark";
   return isDark ? "dark" : "light";
@@ -113,5 +117,5 @@ }
 
-  const mediaQueryList = window.matchMedia(queries.dark);
+  var mediaQueryList = window.matchMedia(queries.dark);
 
-  const listener = () => {
+  var listener = function listener() {
     fn(mediaQueryList.matches ? "dark" : "light", true);
@@ -121,9 +125,11 @@ };
   mediaQueryList.addEventListener("change", listener);
-  return () => {
+  return function () {
     mediaQueryList.removeEventListener("change", listener);
   };
 }
-const root = {
-  get: () => document.documentElement.style.getPropertyValue("--chakra-ui-color-mode"),
-  set: mode => {
+var root = {
+  get: function get() {
+    return document.documentElement.style.getPropertyValue("--chakra-ui-color-mode");
+  },
+  set: function set(mode) {
     if (utils.isBrowser) {
@@ -135,5 +141,7 @@ document.documentElement.style.setProperty("--chakra-ui-color-mode", mode);
 
-const hasSupport = () => typeof Storage !== "undefined";
+var hasSupport = function hasSupport() {
+  return typeof Storage !== "undefined";
+};
 
-const storageKey = "chakra-ui-color-mode";
+var storageKey = "chakra-ui-color-mode";
 
@@ -143,9 +151,10 @@ /**
  */
-const localStorageManager = {
-  get(init) {
+var localStorageManager = {
+  get: function get(init) {
     if (!hasSupport()) return init;
 
     try {
-      const value = localStorage.getItem(storageKey);
-      return value ?? init;
+      var _value = localStorage.getItem(storageKey);
+
+      return _value != null ? _value : init;
     } catch (error) {
@@ -159,4 +168,3 @@ if (utils.__DEV__) {
   },
-
-  set(value) {
+  set: function set(value) {
     if (!hasSupport()) return;
@@ -172,3 +180,2 @@
   },
-
   type: "localStorage"
@@ -180,22 +187,26 @@ };
 
-const cookieStorageManager = (cookies = "") => ({
-  get(init) {
-    const match = cookies.match(new RegExp(`(^| )${storageKey}=([^;]+)`));
+var cookieStorageManager = function cookieStorageManager(cookies) {
+  if (cookies === void 0) {
+    cookies = "";
+  }
 
-    if (match) {
-      return match[2];
-    }
+  return {
+    get: function get(init) {
+      var match = cookies.match(new RegExp("(^| )" + storageKey + "=([^;]+)"));
 
-    return init;
-  },
+      if (match) {
+        return match[2];
+      }
 
-  set(value) {
-    document.cookie = `${storageKey}=${value}; max-age=31536000; path=/`;
-  },
+      return init;
+    },
+    set: function set(value) {
+      document.cookie = storageKey + "=" + value + "; max-age=31536000; path=/";
+    },
+    type: "cookie"
+  };
+};
 
-  type: "cookie"
-});
+var ColorModeContext = /*#__PURE__*/React__namespace.createContext({});
 
-const ColorModeContext = /*#__PURE__*/React__namespace.createContext({});
-
 if (utils.__DEV__) {
@@ -210,4 +221,4 @@ ColorModeContext.displayName = "ColorModeContext";
 
-const useColorMode = () => {
-  const context = React__namespace.useContext(ColorModeContext);
+var useColorMode = function useColorMode() {
+  var context = React__namespace.useContext(ColorModeContext);
 
@@ -226,12 +237,10 @@ if (context === undefined) {
 function ColorModeProvider(props) {
-  const {
-    value,
-    children,
-    options: {
-      useSystemColorMode,
-      initialColorMode
-    },
-    colorModeManager = localStorageManager
-  } = props;
-  const defaultColorMode = initialColorMode === "dark" ? "dark" : "light";
+  var value = props.value,
+      children = props.children,
+      _props$options = props.options,
+      useSystemColorMode = _props$options.useSystemColorMode,
+      initialColorMode = _props$options.initialColorMode,
+      _props$colorModeManag = props.colorModeManager,
+      colorModeManager = _props$colorModeManag === void 0 ? localStorageManager : _props$colorModeManag;
+  var defaultColorMode = initialColorMode === "dark" ? "dark" : "light";
   /**
@@ -244,7 +253,10 @@ * Only attempt to retrieve if we're on the server. Else this will result
 
-  const [colorMode, rawSetColorMode] = React__namespace.useState(colorModeManager.type === "cookie" ? colorModeManager.get(defaultColorMode) : defaultColorMode);
-  const {
-    document
-  } = reactEnv.useEnvironment();
-  React__namespace.useEffect(() => {
+  var _React$useState = React__namespace.useState(colorModeManager.type === "cookie" ? colorModeManager.get(defaultColorMode) : defaultColorMode),
+      colorMode = _React$useState[0],
+      rawSetColorMode = _React$useState[1];
+
+  var _useEnvironment = reactEnv.useEnvironment(),
+      document = _useEnvironment.document;
+
+  React__namespace.useEffect(function () {
     /**
@@ -270,3 +282,3 @@ * Since we cannot initially retrieve localStorage to due above mentioned
     if (utils.isBrowser && colorModeManager.type === "localStorage") {
-      const systemColorWithFallback = getColorScheme(defaultColorMode);
+      var systemColorWithFallback = getColorScheme(defaultColorMode);
 
@@ -277,4 +289,4 @@ if (useSystemColorMode) {
 
-      const rootGet = root.get();
-      const colorManagerGet = colorModeManager.get();
+      var rootGet = root.get();
+      var colorManagerGet = colorModeManager.get();
 
@@ -296,8 +308,12 @@ if (rootGet) {
   }, [colorModeManager, useSystemColorMode, defaultColorMode, initialColorMode]);
-  React__namespace.useEffect(() => {
-    const isDark = colorMode === "dark";
+  React__namespace.useEffect(function () {
+    var isDark = colorMode === "dark";
     syncBodyClassName(isDark, document);
     root.set(isDark ? "dark" : "light");
   }, [colorMode, document]);
-  const setColorMode = React__namespace.useCallback((value, isListenerEvent = false) => {
+  var setColorMode = React__namespace.useCallback(function (value, isListenerEvent) {
+    if (isListenerEvent === void 0) {
+      isListenerEvent = false;
+    }
+
     if (!isListenerEvent) {
@@ -309,8 +325,8 @@ colorModeManager.set(value);
   }, [colorModeManager, useSystemColorMode]);
-  const toggleColorMode = React__namespace.useCallback(() => {
+  var toggleColorMode = React__namespace.useCallback(function () {
     setColorMode(colorMode === "light" ? "dark" : "light");
   }, [colorMode, setColorMode]);
-  React__namespace.useEffect(() => {
-    const shouldUseSystemListener = useSystemColorMode || initialColorMode === "system";
-    let removeListener;
+  React__namespace.useEffect(function () {
+    var shouldUseSystemListener = useSystemColorMode || initialColorMode === "system";
+    var removeListener;
 
@@ -321,3 +337,3 @@ if (shouldUseSystemListener) {
 
-    return () => {
+    return function () {
       if (removeListener && shouldUseSystemListener) {
@@ -329,7 +345,9 @@ removeListener();
 
-  const context = React__namespace.useMemo(() => ({
-    colorMode: value ?? colorMode,
-    toggleColorMode: value ? utils.noop : toggleColorMode,
-    setColorMode: value ? utils.noop : setColorMode
-  }), [colorMode, setColorMode, toggleColorMode, value]);
+  var context = React__namespace.useMemo(function () {
+    return {
+      colorMode: value != null ? value : colorMode,
+      toggleColorMode: value ? utils.noop : toggleColorMode,
+      setColorMode: value ? utils.noop : setColorMode
+    };
+  }, [colorMode, setColorMode, toggleColorMode, value]);
   return /*#__PURE__*/React__namespace.createElement(ColorModeContext.Provider, {
@@ -348,9 +366,11 @@ value: context
 
-const DarkMode = props => /*#__PURE__*/React__namespace.createElement(ColorModeContext.Provider, _extends({
-  value: {
-    colorMode: "dark",
-    toggleColorMode: utils.noop,
-    setColorMode: utils.noop
-  }
-}, props));
+var DarkMode = function DarkMode(props) {
+  return /*#__PURE__*/React__namespace.createElement(ColorModeContext.Provider, _extends({
+    value: {
+      colorMode: "dark",
+      toggleColorMode: utils.noop,
+      setColorMode: utils.noop
+    }
+  }, props));
+};
 
@@ -365,9 +385,11 @@ if (utils.__DEV__) {
 
-const LightMode = props => /*#__PURE__*/React__namespace.createElement(ColorModeContext.Provider, _extends({
-  value: {
-    colorMode: "light",
-    toggleColorMode: utils.noop,
-    setColorMode: utils.noop
-  }
-}, props));
+var LightMode = function LightMode(props) {
+  return /*#__PURE__*/React__namespace.createElement(ColorModeContext.Provider, _extends({
+    value: {
+      colorMode: "light",
+      toggleColorMode: utils.noop,
+      setColorMode: utils.noop
+    }
+  }, props));
+};
 
@@ -392,5 +414,5 @@ if (utils.__DEV__) {
 function useColorModeValue(light, dark) {
-  const {
-    colorMode
-  } = useColorMode();
+  var _useColorMode = useColorMode(),
+      colorMode = _useColorMode.colorMode;
+
   return colorMode === "dark" ? dark : light;
@@ -400,5 +422,5 @@ }
 function setScript(initialValue) {
-  const mql = window.matchMedia("(prefers-color-scheme: dark)");
-  const systemPreference = mql.matches ? "dark" : "light";
-  let persistedPreference;
+  var mql = window.matchMedia("(prefers-color-scheme: dark)");
+  var systemPreference = mql.matches ? "dark" : "light";
+  var persistedPreference;
 
@@ -411,4 +433,4 @@ try {
 
-  const isInStorage = typeof persistedPreference === "string";
-  let colorMode;
+  var isInStorage = typeof persistedPreference === "string";
+  var colorMode;
 
@@ -422,3 +444,3 @@ if (isInStorage) {
   if (colorMode) {
-    const root = document.documentElement;
+    var root = document.documentElement;
     root.style.setProperty("--chakra-ui-color-mode", colorMode);
@@ -432,7 +454,6 @@ }
  */
-const ColorModeScript = props => {
-  const {
-    initialColorMode = "light"
-  } = props;
-  const html = `(${String(setScript)})('${initialColorMode}')`;
+var ColorModeScript = function ColorModeScript(props) {
+  var _props$initialColorMo = props.initialColorMode,
+      initialColorMode = _props$initialColorMo === void 0 ? "light" : _props$initialColorMo;
+  var html = "(" + String(setScript) + ")('" + initialColorMode + "')";
   return /*#__PURE__*/React__namespace.createElement("script", {
@@ -439,0 +460,0 @@ nonce: props.nonce,

dist/chakra-ui-color-mode.cjs.prod.js

@@ -47,3 +47,3 @@ 'use strict';
 
-const classNames = {
+var classNames = {
   light: "chakra-ui-light",
@@ -56,3 +56,3 @@ dark: "chakra-ui-dark"
  */
-const mockBody = {
+var mockBody = {
   classList: {
@@ -64,3 +64,5 @@ add: utils.noop,
 
-const getBody = document => utils.isBrowser ? document.body : mockBody;
+var getBody = function getBody(document) {
+  return utils.isBrowser ? document.body : mockBody;
+};
 /**
@@ -72,3 +74,3 @@ * Function to add/remove class from `body` based on color mode
 function syncBodyClassName(isDark, document) {
-  const body = getBody(document);
+  var body = getBody(document);
   body.classList.add(isDark ? classNames.dark : classNames.light);
@@ -82,3 +84,3 @@ body.classList.remove(isDark ? classNames.light : classNames.dark);
 function getMediaQuery(query) {
-  const mediaQueryList = window.matchMedia?.(query);
+  var mediaQueryList = window.matchMedia == null ? void 0 : window.matchMedia(query);
 
@@ -92,3 +94,3 @@ if (!mediaQueryList) {
 
-const queries = {
+var queries = {
   light: "(prefers-color-scheme: light)",
@@ -99,3 +101,5 @@ dark: "(prefers-color-scheme: dark)"
 function getColorScheme(fallback) {
-  const isDark = getMediaQuery(queries.dark) ?? fallback === "dark";
+  var _getMediaQuery;
+
+  var isDark = (_getMediaQuery = getMediaQuery(queries.dark)) != null ? _getMediaQuery : fallback === "dark";
   return isDark ? "dark" : "light";
@@ -113,5 +117,5 @@ }
 
-  const mediaQueryList = window.matchMedia(queries.dark);
+  var mediaQueryList = window.matchMedia(queries.dark);
 
-  const listener = () => {
+  var listener = function listener() {
     fn(mediaQueryList.matches ? "dark" : "light", true);
@@ -121,9 +125,11 @@ };
   mediaQueryList.addEventListener("change", listener);
-  return () => {
+  return function () {
     mediaQueryList.removeEventListener("change", listener);
   };
 }
-const root = {
-  get: () => document.documentElement.style.getPropertyValue("--chakra-ui-color-mode"),
-  set: mode => {
+var root = {
+  get: function get() {
+    return document.documentElement.style.getPropertyValue("--chakra-ui-color-mode");
+  },
+  set: function set(mode) {
     if (utils.isBrowser) {
@@ -135,5 +141,7 @@ document.documentElement.style.setProperty("--chakra-ui-color-mode", mode);
 
-const hasSupport = () => typeof Storage !== "undefined";
+var hasSupport = function hasSupport() {
+  return typeof Storage !== "undefined";
+};
 
-const storageKey = "chakra-ui-color-mode";
+var storageKey = "chakra-ui-color-mode";
 
@@ -143,9 +151,10 @@ /**
  */
-const localStorageManager = {
-  get(init) {
+var localStorageManager = {
+  get: function get(init) {
     if (!hasSupport()) return init;
 
     try {
-      const value = localStorage.getItem(storageKey);
-      return value ?? init;
+      var _value = localStorage.getItem(storageKey);
+
+      return _value != null ? _value : init;
     } catch (error) {
@@ -159,4 +168,3 @@ if (utils.__DEV__) {
   },
-
-  set(value) {
+  set: function set(value) {
     if (!hasSupport()) return;
@@ -172,3 +180,2 @@
   },
-
   type: "localStorage"
@@ -180,22 +187,26 @@ };
 
-const cookieStorageManager = (cookies = "") => ({
-  get(init) {
-    const match = cookies.match(new RegExp(`(^| )${storageKey}=([^;]+)`));
+var cookieStorageManager = function cookieStorageManager(cookies) {
+  if (cookies === void 0) {
+    cookies = "";
+  }
 
-    if (match) {
-      return match[2];
-    }
+  return {
+    get: function get(init) {
+      var match = cookies.match(new RegExp("(^| )" + storageKey + "=([^;]+)"));
 
-    return init;
-  },
+      if (match) {
+        return match[2];
+      }
 
-  set(value) {
-    document.cookie = `${storageKey}=${value}; max-age=31536000; path=/`;
-  },
+      return init;
+    },
+    set: function set(value) {
+      document.cookie = storageKey + "=" + value + "; max-age=31536000; path=/";
+    },
+    type: "cookie"
+  };
+};
 
-  type: "cookie"
-});
+var ColorModeContext = /*#__PURE__*/React__namespace.createContext({});
 
-const ColorModeContext = /*#__PURE__*/React__namespace.createContext({});
-
 if (utils.__DEV__) {
@@ -210,4 +221,4 @@ ColorModeContext.displayName = "ColorModeContext";
 
-const useColorMode = () => {
-  const context = React__namespace.useContext(ColorModeContext);
+var useColorMode = function useColorMode() {
+  var context = React__namespace.useContext(ColorModeContext);
 
@@ -226,12 +237,10 @@ if (context === undefined) {
 function ColorModeProvider(props) {
-  const {
-    value,
-    children,
-    options: {
-      useSystemColorMode,
-      initialColorMode
-    },
-    colorModeManager = localStorageManager
-  } = props;
-  const defaultColorMode = initialColorMode === "dark" ? "dark" : "light";
+  var value = props.value,
+      children = props.children,
+      _props$options = props.options,
+      useSystemColorMode = _props$options.useSystemColorMode,
+      initialColorMode = _props$options.initialColorMode,
+      _props$colorModeManag = props.colorModeManager,
+      colorModeManager = _props$colorModeManag === void 0 ? localStorageManager : _props$colorModeManag;
+  var defaultColorMode = initialColorMode === "dark" ? "dark" : "light";
   /**
@@ -244,7 +253,10 @@ * Only attempt to retrieve if we're on the server. Else this will result
 
-  const [colorMode, rawSetColorMode] = React__namespace.useState(colorModeManager.type === "cookie" ? colorModeManager.get(defaultColorMode) : defaultColorMode);
-  const {
-    document
-  } = reactEnv.useEnvironment();
-  React__namespace.useEffect(() => {
+  var _React$useState = React__namespace.useState(colorModeManager.type === "cookie" ? colorModeManager.get(defaultColorMode) : defaultColorMode),
+      colorMode = _React$useState[0],
+      rawSetColorMode = _React$useState[1];
+
+  var _useEnvironment = reactEnv.useEnvironment(),
+      document = _useEnvironment.document;
+
+  React__namespace.useEffect(function () {
     /**
@@ -270,3 +282,3 @@ * Since we cannot initially retrieve localStorage to due above mentioned
     if (utils.isBrowser && colorModeManager.type === "localStorage") {
-      const systemColorWithFallback = getColorScheme(defaultColorMode);
+      var systemColorWithFallback = getColorScheme(defaultColorMode);
 
@@ -277,4 +289,4 @@ if (useSystemColorMode) {
 
-      const rootGet = root.get();
-      const colorManagerGet = colorModeManager.get();
+      var rootGet = root.get();
+      var colorManagerGet = colorModeManager.get();
 
@@ -296,8 +308,12 @@ if (rootGet) {
   }, [colorModeManager, useSystemColorMode, defaultColorMode, initialColorMode]);
-  React__namespace.useEffect(() => {
-    const isDark = colorMode === "dark";
+  React__namespace.useEffect(function () {
+    var isDark = colorMode === "dark";
     syncBodyClassName(isDark, document);
     root.set(isDark ? "dark" : "light");
   }, [colorMode, document]);
-  const setColorMode = React__namespace.useCallback((value, isListenerEvent = false) => {
+  var setColorMode = React__namespace.useCallback(function (value, isListenerEvent) {
+    if (isListenerEvent === void 0) {
+      isListenerEvent = false;
+    }
+
     if (!isListenerEvent) {
@@ -309,8 +325,8 @@ colorModeManager.set(value);
   }, [colorModeManager, useSystemColorMode]);
-  const toggleColorMode = React__namespace.useCallback(() => {
+  var toggleColorMode = React__namespace.useCallback(function () {
     setColorMode(colorMode === "light" ? "dark" : "light");
   }, [colorMode, setColorMode]);
-  React__namespace.useEffect(() => {
-    const shouldUseSystemListener = useSystemColorMode || initialColorMode === "system";
-    let removeListener;
+  React__namespace.useEffect(function () {
+    var shouldUseSystemListener = useSystemColorMode || initialColorMode === "system";
+    var removeListener;
 
@@ -321,3 +337,3 @@ if (shouldUseSystemListener) {
 
-    return () => {
+    return function () {
       if (removeListener && shouldUseSystemListener) {
@@ -329,7 +345,9 @@ removeListener();
 
-  const context = React__namespace.useMemo(() => ({
-    colorMode: value ?? colorMode,
-    toggleColorMode: value ? utils.noop : toggleColorMode,
-    setColorMode: value ? utils.noop : setColorMode
-  }), [colorMode, setColorMode, toggleColorMode, value]);
+  var context = React__namespace.useMemo(function () {
+    return {
+      colorMode: value != null ? value : colorMode,
+      toggleColorMode: value ? utils.noop : toggleColorMode,
+      setColorMode: value ? utils.noop : setColorMode
+    };
+  }, [colorMode, setColorMode, toggleColorMode, value]);
   return /*#__PURE__*/React__namespace.createElement(ColorModeContext.Provider, {
@@ -348,9 +366,11 @@ value: context
 
-const DarkMode = props => /*#__PURE__*/React__namespace.createElement(ColorModeContext.Provider, _extends({
-  value: {
-    colorMode: "dark",
-    toggleColorMode: utils.noop,
-    setColorMode: utils.noop
-  }
-}, props));
+var DarkMode = function DarkMode(props) {
+  return /*#__PURE__*/React__namespace.createElement(ColorModeContext.Provider, _extends({
+    value: {
+      colorMode: "dark",
+      toggleColorMode: utils.noop,
+      setColorMode: utils.noop
+    }
+  }, props));
+};
 
@@ -365,9 +385,11 @@ if (utils.__DEV__) {
 
-const LightMode = props => /*#__PURE__*/React__namespace.createElement(ColorModeContext.Provider, _extends({
-  value: {
-    colorMode: "light",
-    toggleColorMode: utils.noop,
-    setColorMode: utils.noop
-  }
-}, props));
+var LightMode = function LightMode(props) {
+  return /*#__PURE__*/React__namespace.createElement(ColorModeContext.Provider, _extends({
+    value: {
+      colorMode: "light",
+      toggleColorMode: utils.noop,
+      setColorMode: utils.noop
+    }
+  }, props));
+};
 
@@ -392,5 +414,5 @@ if (utils.__DEV__) {
 function useColorModeValue(light, dark) {
-  const {
-    colorMode
-  } = useColorMode();
+  var _useColorMode = useColorMode(),
+      colorMode = _useColorMode.colorMode;
+
   return colorMode === "dark" ? dark : light;
@@ -400,5 +422,5 @@ }
 function setScript(initialValue) {
-  const mql = window.matchMedia("(prefers-color-scheme: dark)");
-  const systemPreference = mql.matches ? "dark" : "light";
-  let persistedPreference;
+  var mql = window.matchMedia("(prefers-color-scheme: dark)");
+  var systemPreference = mql.matches ? "dark" : "light";
+  var persistedPreference;
 
@@ -411,4 +433,4 @@ try {
 
-  const isInStorage = typeof persistedPreference === "string";
-  let colorMode;
+  var isInStorage = typeof persistedPreference === "string";
+  var colorMode;
 
@@ -422,3 +444,3 @@ if (isInStorage) {
   if (colorMode) {
-    const root = document.documentElement;
+    var root = document.documentElement;
     root.style.setProperty("--chakra-ui-color-mode", colorMode);
@@ -432,7 +454,6 @@ }
  */
-const ColorModeScript = props => {
-  const {
-    initialColorMode = "light"
-  } = props;
-  const html = `(${String(setScript)})('${initialColorMode}')`;
+var ColorModeScript = function ColorModeScript(props) {
+  var _props$initialColorMo = props.initialColorMode,
+      initialColorMode = _props$initialColorMo === void 0 ? "light" : _props$initialColorMo;
+  var html = "(" + String(setScript) + ")('" + initialColorMode + "')";
   return /*#__PURE__*/React__namespace.createElement("script", {
@@ -439,0 +460,0 @@ nonce: props.nonce,

dist/chakra-ui-color-mode.esm.js

@@ -23,3 +23,3 @@ import { useEnvironment } from '@chakra-ui/react-env';
 
-const classNames = {
+var classNames = {
   light: "chakra-ui-light",
@@ -32,3 +32,3 @@ dark: "chakra-ui-dark"
  */
-const mockBody = {
+var mockBody = {
   classList: {
@@ -40,3 +40,5 @@ add: noop,
 
-const getBody = document => isBrowser ? document.body : mockBody;
+var getBody = function getBody(document) {
+  return isBrowser ? document.body : mockBody;
+};
 /**
@@ -48,3 +50,3 @@ * Function to add/remove class from `body` based on color mode
 function syncBodyClassName(isDark, document) {
-  const body = getBody(document);
+  var body = getBody(document);
   body.classList.add(isDark ? classNames.dark : classNames.light);
@@ -58,3 +60,3 @@ body.classList.remove(isDark ? classNames.light : classNames.dark);
 function getMediaQuery(query) {
-  const mediaQueryList = window.matchMedia?.(query);
+  var mediaQueryList = window.matchMedia == null ? void 0 : window.matchMedia(query);
 
@@ -68,3 +70,3 @@ if (!mediaQueryList) {
 
-const queries = {
+var queries = {
   light: "(prefers-color-scheme: light)",
@@ -75,3 +77,5 @@ dark: "(prefers-color-scheme: dark)"
 function getColorScheme(fallback) {
-  const isDark = getMediaQuery(queries.dark) ?? fallback === "dark";
+  var _getMediaQuery;
+
+  var isDark = (_getMediaQuery = getMediaQuery(queries.dark)) != null ? _getMediaQuery : fallback === "dark";
   return isDark ? "dark" : "light";
@@ -89,5 +93,5 @@ }
 
-  const mediaQueryList = window.matchMedia(queries.dark);
+  var mediaQueryList = window.matchMedia(queries.dark);
 
-  const listener = () => {
+  var listener = function listener() {
     fn(mediaQueryList.matches ? "dark" : "light", true);
@@ -97,9 +101,11 @@ };
   mediaQueryList.addEventListener("change", listener);
-  return () => {
+  return function () {
     mediaQueryList.removeEventListener("change", listener);
   };
 }
-const root = {
-  get: () => document.documentElement.style.getPropertyValue("--chakra-ui-color-mode"),
-  set: mode => {
+var root = {
+  get: function get() {
+    return document.documentElement.style.getPropertyValue("--chakra-ui-color-mode");
+  },
+  set: function set(mode) {
     if (isBrowser) {
@@ -111,5 +117,7 @@ document.documentElement.style.setProperty("--chakra-ui-color-mode", mode);
 
-const hasSupport = () => typeof Storage !== "undefined";
+var hasSupport = function hasSupport() {
+  return typeof Storage !== "undefined";
+};
 
-const storageKey = "chakra-ui-color-mode";
+var storageKey = "chakra-ui-color-mode";
 
@@ -119,9 +127,10 @@ /**
  */
-const localStorageManager = {
-  get(init) {
+var localStorageManager = {
+  get: function get(init) {
     if (!hasSupport()) return init;
 
     try {
-      const value = localStorage.getItem(storageKey);
-      return value ?? init;
+      var _value = localStorage.getItem(storageKey);
+
+      return _value != null ? _value : init;
     } catch (error) {
@@ -135,4 +144,3 @@ if (__DEV__) {
   },
-
-  set(value) {
+  set: function set(value) {
     if (!hasSupport()) return;
@@ -148,3 +156,2 @@
   },
-
   type: "localStorage"
@@ -156,22 +163,26 @@ };
 
-const cookieStorageManager = (cookies = "") => ({
-  get(init) {
-    const match = cookies.match(new RegExp(`(^| )${storageKey}=([^;]+)`));
+var cookieStorageManager = function cookieStorageManager(cookies) {
+  if (cookies === void 0) {
+    cookies = "";
+  }
 
-    if (match) {
-      return match[2];
-    }
+  return {
+    get: function get(init) {
+      var match = cookies.match(new RegExp("(^| )" + storageKey + "=([^;]+)"));
 
-    return init;
-  },
+      if (match) {
+        return match[2];
+      }
 
-  set(value) {
-    document.cookie = `${storageKey}=${value}; max-age=31536000; path=/`;
-  },
+      return init;
+    },
+    set: function set(value) {
+      document.cookie = storageKey + "=" + value + "; max-age=31536000; path=/";
+    },
+    type: "cookie"
+  };
+};
 
-  type: "cookie"
-});
+var ColorModeContext = /*#__PURE__*/React.createContext({});
 
-const ColorModeContext = /*#__PURE__*/React.createContext({});
-
 if (__DEV__) {
@@ -186,4 +197,4 @@ ColorModeContext.displayName = "ColorModeContext";
 
-const useColorMode = () => {
-  const context = React.useContext(ColorModeContext);
+var useColorMode = function useColorMode() {
+  var context = React.useContext(ColorModeContext);
 
@@ -202,12 +213,10 @@ if (context === undefined) {
 function ColorModeProvider(props) {
-  const {
-    value,
-    children,
-    options: {
-      useSystemColorMode,
-      initialColorMode
-    },
-    colorModeManager = localStorageManager
-  } = props;
-  const defaultColorMode = initialColorMode === "dark" ? "dark" : "light";
+  var value = props.value,
+      children = props.children,
+      _props$options = props.options,
+      useSystemColorMode = _props$options.useSystemColorMode,
+      initialColorMode = _props$options.initialColorMode,
+      _props$colorModeManag = props.colorModeManager,
+      colorModeManager = _props$colorModeManag === void 0 ? localStorageManager : _props$colorModeManag;
+  var defaultColorMode = initialColorMode === "dark" ? "dark" : "light";
   /**
@@ -220,7 +229,10 @@ * Only attempt to retrieve if we're on the server. Else this will result
 
-  const [colorMode, rawSetColorMode] = React.useState(colorModeManager.type === "cookie" ? colorModeManager.get(defaultColorMode) : defaultColorMode);
-  const {
-    document
-  } = useEnvironment();
-  React.useEffect(() => {
+  var _React$useState = React.useState(colorModeManager.type === "cookie" ? colorModeManager.get(defaultColorMode) : defaultColorMode),
+      colorMode = _React$useState[0],
+      rawSetColorMode = _React$useState[1];
+
+  var _useEnvironment = useEnvironment(),
+      document = _useEnvironment.document;
+
+  React.useEffect(function () {
     /**
@@ -246,3 +258,3 @@ * Since we cannot initially retrieve localStorage to due above mentioned
     if (isBrowser && colorModeManager.type === "localStorage") {
-      const systemColorWithFallback = getColorScheme(defaultColorMode);
+      var systemColorWithFallback = getColorScheme(defaultColorMode);
 
@@ -253,4 +265,4 @@ if (useSystemColorMode) {
 
-      const rootGet = root.get();
-      const colorManagerGet = colorModeManager.get();
+      var rootGet = root.get();
+      var colorManagerGet = colorModeManager.get();
 
@@ -272,8 +284,12 @@ if (rootGet) {
   }, [colorModeManager, useSystemColorMode, defaultColorMode, initialColorMode]);
-  React.useEffect(() => {
-    const isDark = colorMode === "dark";
+  React.useEffect(function () {
+    var isDark = colorMode === "dark";
     syncBodyClassName(isDark, document);
     root.set(isDark ? "dark" : "light");
   }, [colorMode, document]);
-  const setColorMode = React.useCallback((value, isListenerEvent = false) => {
+  var setColorMode = React.useCallback(function (value, isListenerEvent) {
+    if (isListenerEvent === void 0) {
+      isListenerEvent = false;
+    }
+
     if (!isListenerEvent) {
@@ -285,8 +301,8 @@ colorModeManager.set(value);
   }, [colorModeManager, useSystemColorMode]);
-  const toggleColorMode = React.useCallback(() => {
+  var toggleColorMode = React.useCallback(function () {
     setColorMode(colorMode === "light" ? "dark" : "light");
   }, [colorMode, setColorMode]);
-  React.useEffect(() => {
-    const shouldUseSystemListener = useSystemColorMode || initialColorMode === "system";
-    let removeListener;
+  React.useEffect(function () {
+    var shouldUseSystemListener = useSystemColorMode || initialColorMode === "system";
+    var removeListener;
 
@@ -297,3 +313,3 @@ if (shouldUseSystemListener) {
 
-    return () => {
+    return function () {
       if (removeListener && shouldUseSystemListener) {
@@ -305,7 +321,9 @@ removeListener();
 
-  const context = React.useMemo(() => ({
-    colorMode: value ?? colorMode,
-    toggleColorMode: value ? noop : toggleColorMode,
-    setColorMode: value ? noop : setColorMode
-  }), [colorMode, setColorMode, toggleColorMode, value]);
+  var context = React.useMemo(function () {
+    return {
+      colorMode: value != null ? value : colorMode,
+      toggleColorMode: value ? noop : toggleColorMode,
+      setColorMode: value ? noop : setColorMode
+    };
+  }, [colorMode, setColorMode, toggleColorMode, value]);
   return /*#__PURE__*/React.createElement(ColorModeContext.Provider, {
@@ -324,9 +342,11 @@ value: context
 
-const DarkMode = props => /*#__PURE__*/React.createElement(ColorModeContext.Provider, _extends({
-  value: {
-    colorMode: "dark",
-    toggleColorMode: noop,
-    setColorMode: noop
-  }
-}, props));
+var DarkMode = function DarkMode(props) {
+  return /*#__PURE__*/React.createElement(ColorModeContext.Provider, _extends({
+    value: {
+      colorMode: "dark",
+      toggleColorMode: noop,
+      setColorMode: noop
+    }
+  }, props));
+};
 
@@ -341,9 +361,11 @@ if (__DEV__) {
 
-const LightMode = props => /*#__PURE__*/React.createElement(ColorModeContext.Provider, _extends({
-  value: {
-    colorMode: "light",
-    toggleColorMode: noop,
-    setColorMode: noop
-  }
-}, props));
+var LightMode = function LightMode(props) {
+  return /*#__PURE__*/React.createElement(ColorModeContext.Provider, _extends({
+    value: {
+      colorMode: "light",
+      toggleColorMode: noop,
+      setColorMode: noop
+    }
+  }, props));
+};
 
@@ -368,5 +390,5 @@ if (__DEV__) {
 function useColorModeValue(light, dark) {
-  const {
-    colorMode
-  } = useColorMode();
+  var _useColorMode = useColorMode(),
+      colorMode = _useColorMode.colorMode;
+
   return colorMode === "dark" ? dark : light;
@@ -376,5 +398,5 @@ }
 function setScript(initialValue) {
-  const mql = window.matchMedia("(prefers-color-scheme: dark)");
-  const systemPreference = mql.matches ? "dark" : "light";
-  let persistedPreference;
+  var mql = window.matchMedia("(prefers-color-scheme: dark)");
+  var systemPreference = mql.matches ? "dark" : "light";
+  var persistedPreference;
 
@@ -387,4 +409,4 @@ try {
 
-  const isInStorage = typeof persistedPreference === "string";
-  let colorMode;
+  var isInStorage = typeof persistedPreference === "string";
+  var colorMode;
 
@@ -398,3 +420,3 @@ if (isInStorage) {
   if (colorMode) {
-    const root = document.documentElement;
+    var root = document.documentElement;
     root.style.setProperty("--chakra-ui-color-mode", colorMode);
@@ -408,7 +430,6 @@ }
  */
-const ColorModeScript = props => {
-  const {
-    initialColorMode = "light"
-  } = props;
-  const html = `(${String(setScript)})('${initialColorMode}')`;
+var ColorModeScript = function ColorModeScript(props) {
+  var _props$initialColorMo = props.initialColorMode,
+      initialColorMode = _props$initialColorMo === void 0 ? "light" : _props$initialColorMo;
+  var html = "(" + String(setScript) + ")('" + initialColorMode + "')";
   return /*#__PURE__*/React.createElement("script", {
@@ -415,0 +436,0 @@ nonce: props.nonce,

dist/declarations/src/color-mode-provider.d.ts

@@ -56,1 +56,2 @@ import * as React from "react";
 export declare function useColorModeValue<TLight = unknown, TDark = unknown>(light: TLight, dark: TDark): TLight | TDark;
+//# sourceMappingURL=color-mode-provider.d.ts.map

dist/declarations/src/color-mode-script.d.ts

@@ -17,1 +17,2 @@ /// <reference types="react" />
 export {};
+//# sourceMappingURL=color-mode-script.d.ts.map

dist/declarations/src/color-mode.utils.d.ts

@@ -22,1 +22,2 @@ export declare type ColorMode = "light" | "dark";
 };
+//# sourceMappingURL=color-mode.utils.d.ts.map

dist/declarations/src/index.d.ts

 export * from "./color-mode-provider";
 export * from "./storage-manager";
 export * from "./color-mode-script";
+//# sourceMappingURL=index.d.ts.map

dist/declarations/src/storage-manager.d.ts

@@ -18,1 +18,2 @@ import { ColorMode } from "./color-mode.utils";
 export {};
+//# sourceMappingURL=storage-manager.d.ts.map

package.json

 {
   "name": "@chakra-ui/color-mode",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "React component and hooks for handling light and dark mode.",
@@ -26,3 +26,4 @@ "keywords": [
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
@@ -41,5 +42,5 @@ "publishConfig": {
   "dependencies": {
-    "@chakra-ui/hooks": "1.7.0",
-    "@chakra-ui/react-env": "1.1.0",
-    "@chakra-ui/utils": "1.9.0"
+    "@chakra-ui/hooks": "1.7.1",
+    "@chakra-ui/react-env": "1.1.1",
+    "@chakra-ui/utils": "1.9.1"
   },
@@ -46,0 +47,0 @@ "peerDependencies": {

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

75235

increased by32.2%

Number of package files

23

increased by76.92%

Lines of code

1585

increased by36.64%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Added@chakra-ui/hooks@1.7.1(transitive)

• + Added@chakra-ui/react-env@1.1.1(transitive)

• + Added@chakra-ui/react-utils@1.2.1(transitive)

• + Added@chakra-ui/utils@1.9.1(transitive)

• - Removed@chakra-ui/hooks@1.7.0(transitive)

• - Removed@chakra-ui/react-env@1.1.0(transitive)

• - Removed@chakra-ui/react-utils@1.2.0(transitive)

• - Removed@chakra-ui/utils@1.9.0(transitive)

• Updated@chakra-ui/hooks@1.7.1

• Updated@chakra-ui/react-env@1.1.1

• Updated@chakra-ui/utils@1.9.1