@wise/components-theming 1.9.3 → 1.10.0

package/dist/ThemeProvider.d.ts

@@ -3,5 +3,5 @@ import type { Theming } from './const';
 export type ThemeProviderProps = PropsWithChildren<Theming> & {
     className?: string;
 };
-export declare const ThemeProvider: ({ theme: initialTheme, screenMode: initialScreenMode, isNotRootProvider, children, className, }: ThemeProviderProps) => import("react").JSX.Element;
+export declare const ThemeProvider: ({ theme: initialTheme, screenMode: initialScreenMode, children, className, }: ThemeProviderProps) => import("react").JSX.Element;
 //# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA4C,MAAM,OAAO,CAAC;AAGpF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAKvC,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,OAAO,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAKrF,eAAO,MAAM,aAAa,GAAI,iGAM3B,kBAAkB,gCAuCpB,CAAC"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA4C,MAAM,OAAO,CAAC;AAGpF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAKvC,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,OAAO,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAKrF,eAAO,MAAM,aAAa,GAAI,8EAK3B,kBAAkB,gCAuCpB,CAAC"}

package/dist/ThemeProvider.js

@@ -11,23 +11,22 @@ const themeClass = /\bnp-theme-[a-z-]+\b/g;
 const ThemeProvider = ({
   theme: initialTheme = _const.DEFAULT_BASE_THEME,
   screenMode: initialScreenMode = _const.DEFAULT_SCREEN_MODE,
-  isNotRootProvider = false,
   children,
   className = undefined
 }) => {
   const isContextRoot = react.useContext(ThemeProviderContext.ThemeContext) === undefined;
-  const [theme, setTheme] = react.useState(initialTheme);
+  const [theme, setTheme] = react.useState(helpers.normalizeTheme(initialTheme));
   const [screenMode, setScreenMode] = react.useState(initialScreenMode);
   // Update state when props change (for controlled usage)
   react.useEffect(() => {
-    setTheme(initialTheme);
+    setTheme(helpers.normalizeTheme(initialTheme));
   }, [initialTheme]);
   react.useEffect(() => {
     setScreenMode(initialScreenMode);
   }, [initialScreenMode]);
   // useEffect hook used to apply the theme class to the HTML element
   react.useEffect(() => {
-    if (!isNotRootProvider && isContextRoot) {
+    if (isContextRoot) {
       // Remove all the theme classes from the documentElement
       document.documentElement.className.match(themeClass)?.forEach(item => {
         document.documentElement.classList.remove(item);
@@ -36,7 +35,7 @@ const ThemeProvider = ({
         document.documentElement.classList.add(item);
       });
     }
-  }, [isNotRootProvider, isContextRoot, theme, screenMode]);
+  }, [isContextRoot, theme, screenMode]);
   const contextValue = react.useMemo(() => ({
     theme,
     screenMode,

package/dist/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sources":["../src/ThemeProvider.tsx"],"sourcesContent":["import { PropsWithChildren, useContext, useEffect, useMemo, useState } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName } from './helpers';\nimport { ThemeContext } from './ThemeProviderContext';\n\nexport type ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };\n\n// RegEx to check for `np-theme-` class name\nconst themeClass = /\\bnp-theme-[a-z-]+\\b/g;\n\nexport const ThemeProvider = ({\n  theme: initialTheme = DEFAULT_BASE_THEME,\n  screenMode: initialScreenMode = DEFAULT_SCREEN_MODE,\n  isNotRootProvider = false,\n  children,\n  className = undefined,\n}: ThemeProviderProps) => {\n  const isContextRoot = useContext(ThemeContext) === undefined;\n  const [theme, setTheme] = useState(initialTheme);\n  const [screenMode, setScreenMode] = useState(initialScreenMode);\n\n  // Update state when props change (for controlled usage)\n  useEffect(() => {\n    setTheme(initialTheme);\n  }, [initialTheme]);\n\n  useEffect(() => {\n    setScreenMode(initialScreenMode);\n  }, [initialScreenMode]);\n\n  // useEffect hook used to apply the theme class to the HTML element\n  useEffect(() => {\n    if (!isNotRootProvider && isContextRoot) {\n      // Remove all the theme classes from the documentElement\n      document.documentElement.className.match(themeClass)?.forEach((item) => {\n        document.documentElement.classList.remove(item);\n      });\n      getThemeClassName(theme, screenMode)\n        .split(' ')\n        .forEach((item) => {\n          document.documentElement.classList.add(item);\n        });\n    }\n  }, [isNotRootProvider, isContextRoot, theme, screenMode]);\n\n  const contextValue = useMemo(\n    () => ({ theme, screenMode, setTheme, setScreenMode }),\n    [theme, screenMode, setTheme, setScreenMode],\n  );\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemedChildren className={className}>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["themeClass","ThemeProvider","theme","initialTheme","DEFAULT_BASE_THEME","screenMode","initialScreenMode","DEFAULT_SCREEN_MODE","isNotRootProvider","children","className","undefined","isContextRoot","useContext","ThemeContext","setTheme","useState","setScreenMode","useEffect","document","documentElement","match","forEach","item","classList","remove","getThemeClassName","split","add","contextValue","useMemo","_jsx","Provider","value","ThemedChildren"],"mappings":";;;;;;;;;AAWA,MAAMA,UAAU,GAAG,uBAAuB;AAEnC,MAAMC,aAAa,GAAGA,CAAC;EAC5BC,KAAK,EAAEC,YAAY,GAAGC,yBAAkB;EACxCC,UAAU,EAAEC,iBAAiB,GAAGC,0BAAmB;AACnDC,EAAAA,iBAAiB,GAAG,KAAK;EACzBC,QAAQ;AACRC,EAAAA,SAAS,GAAGC;AAAS,CACF,KAAI;AACvB,EAAA,MAAMC,aAAa,GAAGC,gBAAU,CAACC,iCAAY,CAAC,KAAKH,SAAS;EAC5D,MAAM,CAACT,KAAK,EAAEa,QAAQ,CAAC,GAAGC,cAAQ,CAACb,YAAY,CAAC;EAChD,MAAM,CAACE,UAAU,EAAEY,aAAa,CAAC,GAAGD,cAAQ,CAACV,iBAAiB,CAAC;AAE/D;AACAY,EAAAA,eAAS,CAAC,MAAK;IACbH,QAAQ,CAACZ,YAAY,CAAC;AACxB,EAAA,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;AAElBe,EAAAA,eAAS,CAAC,MAAK;IACbD,aAAa,CAACX,iBAAiB,CAAC;AAClC,EAAA,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;AAEvB;AACAY,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAI,CAACV,iBAAiB,IAAII,aAAa,EAAE;AACvC;AACAO,MAAAA,QAAQ,CAACC,eAAe,CAACV,SAAS,CAACW,KAAK,CAACrB,UAAU,CAAC,EAAEsB,OAAO,CAAEC,IAAI,IAAI;QACrEJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACC,MAAM,CAACF,IAAI,CAAC;AACjD,MAAA,CAAC,CAAC;AACFG,MAAAA,yBAAiB,CAACxB,KAAK,EAAEG,UAAU,CAAC,CACjCsB,KAAK,CAAC,GAAG,CAAC,CACVL,OAAO,CAAEC,IAAI,IAAI;QAChBJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACI,GAAG,CAACL,IAAI,CAAC;AAC9C,MAAA,CAAC,CAAC;AACN,IAAA;EACF,CAAC,EAAE,CAACf,iBAAiB,EAAEI,aAAa,EAAEV,KAAK,EAAEG,UAAU,CAAC,CAAC;AAEzD,EAAA,MAAMwB,YAAY,GAAGC,aAAO,CAC1B,OAAO;IAAE5B,KAAK;IAAEG,UAAU;IAAEU,QAAQ;AAAEE,IAAAA;GAAe,CAAC,EACtD,CAACf,KAAK,EAAEG,UAAU,EAAEU,QAAQ,EAAEE,aAAa,CAAC,CAC7C;AAED,EAAA,oBACEc,cAAA,CAACjB,iCAAY,CAACkB,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEJ,YAAa;IAAApB,QAAA,eACzCsB,cAAA,CAACG,6BAAc,EAAA;AAACxB,MAAAA,SAAS,EAAEA,SAAU;AAAAD,MAAAA,QAAA,EAAEA;KAAyB;AAClE,GAAuB,CAAC;AAE5B;;;;"}
+{"version":3,"file":"ThemeProvider.js","sources":["../src/ThemeProvider.tsx"],"sourcesContent":["import { PropsWithChildren, useContext, useEffect, useMemo, useState } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName, normalizeTheme } from './helpers';\nimport { ThemeContext } from './ThemeProviderContext';\n\nexport type ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };\n\n// RegEx to check for `np-theme-` class name\nconst themeClass = /\\bnp-theme-[a-z-]+\\b/g;\n\nexport const ThemeProvider = ({\n  theme: initialTheme = DEFAULT_BASE_THEME,\n  screenMode: initialScreenMode = DEFAULT_SCREEN_MODE,\n  children,\n  className = undefined,\n}: ThemeProviderProps) => {\n  const isContextRoot = useContext(ThemeContext) === undefined;\n  const [theme, setTheme] = useState(normalizeTheme(initialTheme));\n  const [screenMode, setScreenMode] = useState(initialScreenMode);\n\n  // Update state when props change (for controlled usage)\n  useEffect(() => {\n    setTheme(normalizeTheme(initialTheme));\n  }, [initialTheme]);\n\n  useEffect(() => {\n    setScreenMode(initialScreenMode);\n  }, [initialScreenMode]);\n\n  // useEffect hook used to apply the theme class to the HTML element\n  useEffect(() => {\n    if (isContextRoot) {\n      // Remove all the theme classes from the documentElement\n      document.documentElement.className.match(themeClass)?.forEach((item) => {\n        document.documentElement.classList.remove(item);\n      });\n      getThemeClassName(theme, screenMode)\n        .split(' ')\n        .forEach((item) => {\n          document.documentElement.classList.add(item);\n        });\n    }\n  }, [isContextRoot, theme, screenMode]);\n\n  const contextValue = useMemo(\n    () => ({ theme, screenMode, setTheme, setScreenMode }),\n    [theme, screenMode, setTheme, setScreenMode],\n  );\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemedChildren className={className}>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["themeClass","ThemeProvider","theme","initialTheme","DEFAULT_BASE_THEME","screenMode","initialScreenMode","DEFAULT_SCREEN_MODE","children","className","undefined","isContextRoot","useContext","ThemeContext","setTheme","useState","normalizeTheme","setScreenMode","useEffect","document","documentElement","match","forEach","item","classList","remove","getThemeClassName","split","add","contextValue","useMemo","_jsx","Provider","value","ThemedChildren"],"mappings":";;;;;;;;;AAWA,MAAMA,UAAU,GAAG,uBAAuB;AAEnC,MAAMC,aAAa,GAAGA,CAAC;EAC5BC,KAAK,EAAEC,YAAY,GAAGC,yBAAkB;EACxCC,UAAU,EAAEC,iBAAiB,GAAGC,0BAAmB;EACnDC,QAAQ;AACRC,EAAAA,SAAS,GAAGC;AAAS,CACF,KAAI;AACvB,EAAA,MAAMC,aAAa,GAAGC,gBAAU,CAACC,iCAAY,CAAC,KAAKH,SAAS;AAC5D,EAAA,MAAM,CAACR,KAAK,EAAEY,QAAQ,CAAC,GAAGC,cAAQ,CAACC,sBAAc,CAACb,YAAY,CAAC,CAAC;EAChE,MAAM,CAACE,UAAU,EAAEY,aAAa,CAAC,GAAGF,cAAQ,CAACT,iBAAiB,CAAC;AAE/D;AACAY,EAAAA,eAAS,CAAC,MAAK;AACbJ,IAAAA,QAAQ,CAACE,sBAAc,CAACb,YAAY,CAAC,CAAC;AACxC,EAAA,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;AAElBe,EAAAA,eAAS,CAAC,MAAK;IACbD,aAAa,CAACX,iBAAiB,CAAC;AAClC,EAAA,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;AAEvB;AACAY,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIP,aAAa,EAAE;AACjB;AACAQ,MAAAA,QAAQ,CAACC,eAAe,CAACX,SAAS,CAACY,KAAK,CAACrB,UAAU,CAAC,EAAEsB,OAAO,CAAEC,IAAI,IAAI;QACrEJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACC,MAAM,CAACF,IAAI,CAAC;AACjD,MAAA,CAAC,CAAC;AACFG,MAAAA,yBAAiB,CAACxB,KAAK,EAAEG,UAAU,CAAC,CACjCsB,KAAK,CAAC,GAAG,CAAC,CACVL,OAAO,CAAEC,IAAI,IAAI;QAChBJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACI,GAAG,CAACL,IAAI,CAAC;AAC9C,MAAA,CAAC,CAAC;AACN,IAAA;EACF,CAAC,EAAE,CAACZ,aAAa,EAAET,KAAK,EAAEG,UAAU,CAAC,CAAC;AAEtC,EAAA,MAAMwB,YAAY,GAAGC,aAAO,CAC1B,OAAO;IAAE5B,KAAK;IAAEG,UAAU;IAAES,QAAQ;AAAEG,IAAAA;GAAe,CAAC,EACtD,CAACf,KAAK,EAAEG,UAAU,EAAES,QAAQ,EAAEG,aAAa,CAAC,CAC7C;AAED,EAAA,oBACEc,cAAA,CAAClB,iCAAY,CAACmB,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEJ,YAAa;IAAArB,QAAA,eACzCuB,cAAA,CAACG,6BAAc,EAAA;AAACzB,MAAAA,SAAS,EAAEA,SAAU;AAAAD,MAAAA,QAAA,EAAEA;KAAyB;AAClE,GAAuB,CAAC;AAE5B;;;;"}

package/dist/ThemeProvider.mjs

@@ -1,7 +1,7 @@
 import { useContext, useState, useEffect, useMemo } from 'react';
 import { ThemedChildren } from './ThemedChildren.mjs';
 import { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const.mjs';
-import { getThemeClassName } from './helpers.mjs';
+import { normalizeTheme, getThemeClassName } from './helpers.mjs';
 import { ThemeContext } from './ThemeProviderContext.mjs';
 import { jsx } from 'react/jsx-runtime';
 
@@ -9,23 +9,22 @@ const themeClass = /\bnp-theme-[a-z-]+\b/g;
 const ThemeProvider = ({
   theme: initialTheme = DEFAULT_BASE_THEME,
   screenMode: initialScreenMode = DEFAULT_SCREEN_MODE,
-  isNotRootProvider = false,
   children,
   className = undefined
 }) => {
   const isContextRoot = useContext(ThemeContext) === undefined;
-  const [theme, setTheme] = useState(initialTheme);
+  const [theme, setTheme] = useState(normalizeTheme(initialTheme));
   const [screenMode, setScreenMode] = useState(initialScreenMode);
   // Update state when props change (for controlled usage)
   useEffect(() => {
-    setTheme(initialTheme);
+    setTheme(normalizeTheme(initialTheme));
   }, [initialTheme]);
   useEffect(() => {
     setScreenMode(initialScreenMode);
   }, [initialScreenMode]);
   // useEffect hook used to apply the theme class to the HTML element
   useEffect(() => {
-    if (!isNotRootProvider && isContextRoot) {
+    if (isContextRoot) {
       // Remove all the theme classes from the documentElement
       document.documentElement.className.match(themeClass)?.forEach(item => {
         document.documentElement.classList.remove(item);
@@ -34,7 +33,7 @@ const ThemeProvider = ({
         document.documentElement.classList.add(item);
       });
     }
-  }, [isNotRootProvider, isContextRoot, theme, screenMode]);
+  }, [isContextRoot, theme, screenMode]);
   const contextValue = useMemo(() => ({
     theme,
     screenMode,

package/dist/ThemeProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.mjs","sources":["../src/ThemeProvider.tsx"],"sourcesContent":["import { PropsWithChildren, useContext, useEffect, useMemo, useState } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName } from './helpers';\nimport { ThemeContext } from './ThemeProviderContext';\n\nexport type ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };\n\n// RegEx to check for `np-theme-` class name\nconst themeClass = /\\bnp-theme-[a-z-]+\\b/g;\n\nexport const ThemeProvider = ({\n  theme: initialTheme = DEFAULT_BASE_THEME,\n  screenMode: initialScreenMode = DEFAULT_SCREEN_MODE,\n  isNotRootProvider = false,\n  children,\n  className = undefined,\n}: ThemeProviderProps) => {\n  const isContextRoot = useContext(ThemeContext) === undefined;\n  const [theme, setTheme] = useState(initialTheme);\n  const [screenMode, setScreenMode] = useState(initialScreenMode);\n\n  // Update state when props change (for controlled usage)\n  useEffect(() => {\n    setTheme(initialTheme);\n  }, [initialTheme]);\n\n  useEffect(() => {\n    setScreenMode(initialScreenMode);\n  }, [initialScreenMode]);\n\n  // useEffect hook used to apply the theme class to the HTML element\n  useEffect(() => {\n    if (!isNotRootProvider && isContextRoot) {\n      // Remove all the theme classes from the documentElement\n      document.documentElement.className.match(themeClass)?.forEach((item) => {\n        document.documentElement.classList.remove(item);\n      });\n      getThemeClassName(theme, screenMode)\n        .split(' ')\n        .forEach((item) => {\n          document.documentElement.classList.add(item);\n        });\n    }\n  }, [isNotRootProvider, isContextRoot, theme, screenMode]);\n\n  const contextValue = useMemo(\n    () => ({ theme, screenMode, setTheme, setScreenMode }),\n    [theme, screenMode, setTheme, setScreenMode],\n  );\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemedChildren className={className}>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["themeClass","ThemeProvider","theme","initialTheme","DEFAULT_BASE_THEME","screenMode","initialScreenMode","DEFAULT_SCREEN_MODE","isNotRootProvider","children","className","undefined","isContextRoot","useContext","ThemeContext","setTheme","useState","setScreenMode","useEffect","document","documentElement","match","forEach","item","classList","remove","getThemeClassName","split","add","contextValue","useMemo","_jsx","Provider","value","ThemedChildren"],"mappings":";;;;;;;AAWA,MAAMA,UAAU,GAAG,uBAAuB;AAEnC,MAAMC,aAAa,GAAGA,CAAC;EAC5BC,KAAK,EAAEC,YAAY,GAAGC,kBAAkB;EACxCC,UAAU,EAAEC,iBAAiB,GAAGC,mBAAmB;AACnDC,EAAAA,iBAAiB,GAAG,KAAK;EACzBC,QAAQ;AACRC,EAAAA,SAAS,GAAGC;AAAS,CACF,KAAI;AACvB,EAAA,MAAMC,aAAa,GAAGC,UAAU,CAACC,YAAY,CAAC,KAAKH,SAAS;EAC5D,MAAM,CAACT,KAAK,EAAEa,QAAQ,CAAC,GAAGC,QAAQ,CAACb,YAAY,CAAC;EAChD,MAAM,CAACE,UAAU,EAAEY,aAAa,CAAC,GAAGD,QAAQ,CAACV,iBAAiB,CAAC;AAE/D;AACAY,EAAAA,SAAS,CAAC,MAAK;IACbH,QAAQ,CAACZ,YAAY,CAAC;AACxB,EAAA,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;AAElBe,EAAAA,SAAS,CAAC,MAAK;IACbD,aAAa,CAACX,iBAAiB,CAAC;AAClC,EAAA,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;AAEvB;AACAY,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAI,CAACV,iBAAiB,IAAII,aAAa,EAAE;AACvC;AACAO,MAAAA,QAAQ,CAACC,eAAe,CAACV,SAAS,CAACW,KAAK,CAACrB,UAAU,CAAC,EAAEsB,OAAO,CAAEC,IAAI,IAAI;QACrEJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACC,MAAM,CAACF,IAAI,CAAC;AACjD,MAAA,CAAC,CAAC;AACFG,MAAAA,iBAAiB,CAACxB,KAAK,EAAEG,UAAU,CAAC,CACjCsB,KAAK,CAAC,GAAG,CAAC,CACVL,OAAO,CAAEC,IAAI,IAAI;QAChBJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACI,GAAG,CAACL,IAAI,CAAC;AAC9C,MAAA,CAAC,CAAC;AACN,IAAA;EACF,CAAC,EAAE,CAACf,iBAAiB,EAAEI,aAAa,EAAEV,KAAK,EAAEG,UAAU,CAAC,CAAC;AAEzD,EAAA,MAAMwB,YAAY,GAAGC,OAAO,CAC1B,OAAO;IAAE5B,KAAK;IAAEG,UAAU;IAAEU,QAAQ;AAAEE,IAAAA;GAAe,CAAC,EACtD,CAACf,KAAK,EAAEG,UAAU,EAAEU,QAAQ,EAAEE,aAAa,CAAC,CAC7C;AAED,EAAA,oBACEc,GAAA,CAACjB,YAAY,CAACkB,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEJ,YAAa;IAAApB,QAAA,eACzCsB,GAAA,CAACG,cAAc,EAAA;AAACxB,MAAAA,SAAS,EAAEA,SAAU;AAAAD,MAAAA,QAAA,EAAEA;KAAyB;AAClE,GAAuB,CAAC;AAE5B;;;;"}
+{"version":3,"file":"ThemeProvider.mjs","sources":["../src/ThemeProvider.tsx"],"sourcesContent":["import { PropsWithChildren, useContext, useEffect, useMemo, useState } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName, normalizeTheme } from './helpers';\nimport { ThemeContext } from './ThemeProviderContext';\n\nexport type ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };\n\n// RegEx to check for `np-theme-` class name\nconst themeClass = /\\bnp-theme-[a-z-]+\\b/g;\n\nexport const ThemeProvider = ({\n  theme: initialTheme = DEFAULT_BASE_THEME,\n  screenMode: initialScreenMode = DEFAULT_SCREEN_MODE,\n  children,\n  className = undefined,\n}: ThemeProviderProps) => {\n  const isContextRoot = useContext(ThemeContext) === undefined;\n  const [theme, setTheme] = useState(normalizeTheme(initialTheme));\n  const [screenMode, setScreenMode] = useState(initialScreenMode);\n\n  // Update state when props change (for controlled usage)\n  useEffect(() => {\n    setTheme(normalizeTheme(initialTheme));\n  }, [initialTheme]);\n\n  useEffect(() => {\n    setScreenMode(initialScreenMode);\n  }, [initialScreenMode]);\n\n  // useEffect hook used to apply the theme class to the HTML element\n  useEffect(() => {\n    if (isContextRoot) {\n      // Remove all the theme classes from the documentElement\n      document.documentElement.className.match(themeClass)?.forEach((item) => {\n        document.documentElement.classList.remove(item);\n      });\n      getThemeClassName(theme, screenMode)\n        .split(' ')\n        .forEach((item) => {\n          document.documentElement.classList.add(item);\n        });\n    }\n  }, [isContextRoot, theme, screenMode]);\n\n  const contextValue = useMemo(\n    () => ({ theme, screenMode, setTheme, setScreenMode }),\n    [theme, screenMode, setTheme, setScreenMode],\n  );\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemedChildren className={className}>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["themeClass","ThemeProvider","theme","initialTheme","DEFAULT_BASE_THEME","screenMode","initialScreenMode","DEFAULT_SCREEN_MODE","children","className","undefined","isContextRoot","useContext","ThemeContext","setTheme","useState","normalizeTheme","setScreenMode","useEffect","document","documentElement","match","forEach","item","classList","remove","getThemeClassName","split","add","contextValue","useMemo","_jsx","Provider","value","ThemedChildren"],"mappings":";;;;;;;AAWA,MAAMA,UAAU,GAAG,uBAAuB;AAEnC,MAAMC,aAAa,GAAGA,CAAC;EAC5BC,KAAK,EAAEC,YAAY,GAAGC,kBAAkB;EACxCC,UAAU,EAAEC,iBAAiB,GAAGC,mBAAmB;EACnDC,QAAQ;AACRC,EAAAA,SAAS,GAAGC;AAAS,CACF,KAAI;AACvB,EAAA,MAAMC,aAAa,GAAGC,UAAU,CAACC,YAAY,CAAC,KAAKH,SAAS;AAC5D,EAAA,MAAM,CAACR,KAAK,EAAEY,QAAQ,CAAC,GAAGC,QAAQ,CAACC,cAAc,CAACb,YAAY,CAAC,CAAC;EAChE,MAAM,CAACE,UAAU,EAAEY,aAAa,CAAC,GAAGF,QAAQ,CAACT,iBAAiB,CAAC;AAE/D;AACAY,EAAAA,SAAS,CAAC,MAAK;AACbJ,IAAAA,QAAQ,CAACE,cAAc,CAACb,YAAY,CAAC,CAAC;AACxC,EAAA,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;AAElBe,EAAAA,SAAS,CAAC,MAAK;IACbD,aAAa,CAACX,iBAAiB,CAAC;AAClC,EAAA,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;AAEvB;AACAY,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIP,aAAa,EAAE;AACjB;AACAQ,MAAAA,QAAQ,CAACC,eAAe,CAACX,SAAS,CAACY,KAAK,CAACrB,UAAU,CAAC,EAAEsB,OAAO,CAAEC,IAAI,IAAI;QACrEJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACC,MAAM,CAACF,IAAI,CAAC;AACjD,MAAA,CAAC,CAAC;AACFG,MAAAA,iBAAiB,CAACxB,KAAK,EAAEG,UAAU,CAAC,CACjCsB,KAAK,CAAC,GAAG,CAAC,CACVL,OAAO,CAAEC,IAAI,IAAI;QAChBJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACI,GAAG,CAACL,IAAI,CAAC;AAC9C,MAAA,CAAC,CAAC;AACN,IAAA;EACF,CAAC,EAAE,CAACZ,aAAa,EAAET,KAAK,EAAEG,UAAU,CAAC,CAAC;AAEtC,EAAA,MAAMwB,YAAY,GAAGC,OAAO,CAC1B,OAAO;IAAE5B,KAAK;IAAEG,UAAU;IAAES,QAAQ;AAAEG,IAAAA;GAAe,CAAC,EACtD,CAACf,KAAK,EAAEG,UAAU,EAAES,QAAQ,EAAEG,aAAa,CAAC,CAC7C;AAED,EAAA,oBACEc,GAAA,CAAClB,YAAY,CAACmB,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEJ,YAAa;IAAArB,QAAA,eACzCuB,GAAA,CAACG,cAAc,EAAA;AAACzB,MAAAA,SAAS,EAAEA,SAAU;AAAAD,MAAAA,QAAA,EAAEA;KAAyB;AAClE,GAAuB,CAAC;AAE5B;;;;"}

package/dist/const.d.ts

@@ -1,10 +1,16 @@
 export declare const baseThemes: readonly ["light", "personal", "business"];
 export declare const extraThemes: readonly ["forest-green", "bright-green"];
 export declare const screenModes: readonly ["light", "dark"];
+/**
+ * @deprecated "modern" theme is released, you should not need check for "modern" theme anymore
+ */
 export declare const modernThemes: readonly ["personal", "business", "forest-green", "bright-green"];
 export declare const businessThemes: readonly ["business", "business--forest-green", "business--bright-green"];
 export declare const platformThemes: readonly ["platform", "platform--forest-green"];
 export type ComponentTheme = (typeof baseThemes)[number];
+/**
+ * @deprecated "modern" theme is released, you should not need check for "modern" theme anymore
+ */
 export type ModernTheme = (typeof modernThemes)[number];
 export type BaseTheme = (typeof baseThemes)[number];
 export type ExtraTheme = (typeof extraThemes)[number];
@@ -16,11 +22,14 @@ export type PlatformForestGreenTheme = (typeof platformThemes)[1];
 export type BusinessTheme = (typeof businessThemes)[0];
 export type BusinessForestGreenTheme = (typeof businessThemes)[1];
 export type BusinessBrightGreenTheme = (typeof businessThemes)[2];
-export declare const DEFAULT_BASE_THEME = "light";
+export declare const DEFAULT_BASE_THEME = "personal";
 export declare const DEFAULT_SCREEN_MODE = "light";
 export type Theming = {
     theme?: ComponentTheme | BaseTheme | ExtraTheme | BusinessTheme | BusinessForestGreenTheme | BusinessBrightGreenTheme | PlatformTheme | PlatformForestGreenTheme;
     screenMode?: ScreenMode;
+    /**
+     * @deprecated this property has not effect, safe to delete
+     */
     isNotRootProvider?: boolean | undefined;
 };
 //# sourceMappingURL=const.d.ts.map

package/dist/const.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../src/const.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,UAAU,4CAA6C,CAAC;AACrE,eAAO,MAAM,WAAW,2CAA4C,CAAC;AACrE,eAAO,MAAM,WAAW,4BAA6B,CAAC;AACtD,eAAO,MAAM,YAAY,mEAA0D,CAAC;AACpF,eAAO,MAAM,cAAc,2EAIjB,CAAC;AACX,eAAO,MAAM,cAAc,iDAAkD,CAAC;AAG9E,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AACzD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AACxD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AACpD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AACtD,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AACvD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AACvD,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAClE,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AACvD,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAClE,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAElE,eAAO,MAAM,kBAAkB,UAAU,CAAC;AAC1C,eAAO,MAAM,mBAAmB,UAAU,CAAC;AAE3C,MAAM,MAAM,OAAO,GAAG;IACpB,KAAK,CAAC,EACF,cAAc,GACd,SAAS,GACT,UAAU,GACV,aAAa,GACb,wBAAwB,GACxB,wBAAwB,GACxB,aAAa,GACb,wBAAwB,CAAC;IAC7B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACzC,CAAC"}
+{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../src/const.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,UAAU,4CAA6C,CAAC;AACrE,eAAO,MAAM,WAAW,2CAA4C,CAAC;AACrE,eAAO,MAAM,WAAW,4BAA6B,CAAC;AACtD;;GAEG;AACH,eAAO,MAAM,YAAY,mEAA0D,CAAC;AACpF,eAAO,MAAM,cAAc,2EAIjB,CAAC;AACX,eAAO,MAAM,cAAc,iDAAkD,CAAC;AAG9E,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AACzD;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AACxD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AACpD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AACtD,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AACvD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AACvD,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAClE,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AACvD,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAClE,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAElE,eAAO,MAAM,kBAAkB,aAAa,CAAC;AAC7C,eAAO,MAAM,mBAAmB,UAAU,CAAC;AAE3C,MAAM,MAAM,OAAO,GAAG;IACpB,KAAK,CAAC,EACF,cAAc,GACd,SAAS,GACT,UAAU,GACV,aAAa,GACb,wBAAwB,GACxB,wBAAwB,GACxB,aAAa,GACb,wBAAwB,CAAC;IAC7B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACzC,CAAC"}

package/dist/const.js

@@ -1,17 +1,13 @@
 'use strict';
 
 // TODO: Change 'light' with 'legacy' in the future
-const baseThemes = ['light', 'personal', 'business'];
 const extraThemes = ['forest-green', 'bright-green'];
 const screenModes = ['light', 'dark'];
-const modernThemes = [baseThemes[1], baseThemes[2], ...extraThemes];
-const DEFAULT_BASE_THEME = 'light';
+const DEFAULT_BASE_THEME = 'personal';
 const DEFAULT_SCREEN_MODE = 'light';
 
 exports.DEFAULT_BASE_THEME = DEFAULT_BASE_THEME;
 exports.DEFAULT_SCREEN_MODE = DEFAULT_SCREEN_MODE;
-exports.baseThemes = baseThemes;
 exports.extraThemes = extraThemes;
-exports.modernThemes = modernThemes;
 exports.screenModes = screenModes;
 //# sourceMappingURL=const.js.map

package/dist/const.js.map

@@ -1 +1 @@
-{"version":3,"file":"const.js","sources":["../src/const.ts"],"sourcesContent":["// TODO: Change 'light' with 'legacy' in the future\nexport const baseThemes = ['light', 'personal', 'business'] as const;\nexport const extraThemes = ['forest-green', 'bright-green'] as const;\nexport const screenModes = ['light', 'dark'] as const;\nexport const modernThemes = [baseThemes[1], baseThemes[2], ...extraThemes] as const;\nexport const businessThemes = [\n  'business',\n  'business--forest-green',\n  'business--bright-green',\n] as const;\nexport const platformThemes = ['platform', 'platform--forest-green'] as const;\n\n// TODO: componentThemes returned back for backward compatibility, refactor this place in the future\nexport type ComponentTheme = (typeof baseThemes)[number];\nexport type ModernTheme = (typeof modernThemes)[number];\nexport type BaseTheme = (typeof baseThemes)[number];\nexport type ExtraTheme = (typeof extraThemes)[number];\nexport type ForestGreenTheme = (typeof extraThemes)[0];\nexport type ScreenMode = (typeof screenModes)[number];\nexport type ScreenModeDark = (typeof screenModes)[1];\nexport type PlatformTheme = (typeof platformThemes)[0];\nexport type PlatformForestGreenTheme = (typeof platformThemes)[1];\nexport type BusinessTheme = (typeof businessThemes)[0];\nexport type BusinessForestGreenTheme = (typeof businessThemes)[1];\nexport type BusinessBrightGreenTheme = (typeof businessThemes)[2];\n\nexport const DEFAULT_BASE_THEME = 'light';\nexport const DEFAULT_SCREEN_MODE = 'light';\n\nexport type Theming = {\n  theme?:\n    | ComponentTheme\n    | BaseTheme\n    | ExtraTheme\n    | BusinessTheme\n    | BusinessForestGreenTheme\n    | BusinessBrightGreenTheme\n    | PlatformTheme\n    | PlatformForestGreenTheme;\n  screenMode?: ScreenMode;\n  isNotRootProvider?: boolean | undefined;\n};\n"],"names":["baseThemes","extraThemes","screenModes","modernThemes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE"],"mappings":";;AAAA;AACO,MAAMA,UAAU,GAAG,CAAC,OAAO,EAAE,UAAU,EAAE,UAAU;MAC7CC,WAAW,GAAG,CAAC,cAAc,EAAE,cAAc;MAC7CC,WAAW,GAAG,CAAC,OAAO,EAAE,MAAM;MAC9BC,YAAY,GAAG,CAACH,UAAU,CAAC,CAAC,CAAC,EAAEA,UAAU,CAAC,CAAC,CAAC,EAAE,GAAGC,WAAW;AAsBlE,MAAMG,kBAAkB,GAAG;AAC3B,MAAMC,mBAAmB,GAAG;;;;;;;;;"}
+{"version":3,"file":"const.js","sources":["../src/const.ts"],"sourcesContent":["// TODO: Change 'light' with 'legacy' in the future\nexport const baseThemes = ['light', 'personal', 'business'] as const;\nexport const extraThemes = ['forest-green', 'bright-green'] as const;\nexport const screenModes = ['light', 'dark'] as const;\n/**\n * @deprecated \"modern\" theme is released, you should not need check for \"modern\" theme anymore\n */\nexport const modernThemes = [baseThemes[1], baseThemes[2], ...extraThemes] as const;\nexport const businessThemes = [\n  'business',\n  'business--forest-green',\n  'business--bright-green',\n] as const;\nexport const platformThemes = ['platform', 'platform--forest-green'] as const;\n\n// TODO: componentThemes returned back for backward compatibility, refactor this place in the future\nexport type ComponentTheme = (typeof baseThemes)[number];\n/**\n * @deprecated \"modern\" theme is released, you should not need check for \"modern\" theme anymore\n */\nexport type ModernTheme = (typeof modernThemes)[number];\nexport type BaseTheme = (typeof baseThemes)[number];\nexport type ExtraTheme = (typeof extraThemes)[number];\nexport type ForestGreenTheme = (typeof extraThemes)[0];\nexport type ScreenMode = (typeof screenModes)[number];\nexport type ScreenModeDark = (typeof screenModes)[1];\nexport type PlatformTheme = (typeof platformThemes)[0];\nexport type PlatformForestGreenTheme = (typeof platformThemes)[1];\nexport type BusinessTheme = (typeof businessThemes)[0];\nexport type BusinessForestGreenTheme = (typeof businessThemes)[1];\nexport type BusinessBrightGreenTheme = (typeof businessThemes)[2];\n\nexport const DEFAULT_BASE_THEME = 'personal';\nexport const DEFAULT_SCREEN_MODE = 'light';\n\nexport type Theming = {\n  theme?:\n    | ComponentTheme\n    | BaseTheme\n    | ExtraTheme\n    | BusinessTheme\n    | BusinessForestGreenTheme\n    | BusinessBrightGreenTheme\n    | PlatformTheme\n    | PlatformForestGreenTheme;\n  screenMode?: ScreenMode;\n  /**\n   * @deprecated this property has not effect, safe to delete\n   */\n  isNotRootProvider?: boolean | undefined;\n};\n"],"names":["extraThemes","screenModes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE"],"mappings":";;AAAA;MAEaA,WAAW,GAAG,CAAC,cAAc,EAAE,cAAc;MAC7CC,WAAW,GAAG,CAAC,OAAO,EAAE,MAAM;AA6BpC,MAAMC,kBAAkB,GAAG;AAC3B,MAAMC,mBAAmB,GAAG;;;;;;;"}

package/dist/const.mjs

@@ -1,10 +1,8 @@
 // TODO: Change 'light' with 'legacy' in the future
-const baseThemes = ['light', 'personal', 'business'];
 const extraThemes = ['forest-green', 'bright-green'];
 const screenModes = ['light', 'dark'];
-const modernThemes = [baseThemes[1], baseThemes[2], ...extraThemes];
-const DEFAULT_BASE_THEME = 'light';
+const DEFAULT_BASE_THEME = 'personal';
 const DEFAULT_SCREEN_MODE = 'light';
 
-export { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE, baseThemes, extraThemes, modernThemes, screenModes };
+export { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE, extraThemes, screenModes };
 //# sourceMappingURL=const.mjs.map

package/dist/const.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"const.mjs","sources":["../src/const.ts"],"sourcesContent":["// TODO: Change 'light' with 'legacy' in the future\nexport const baseThemes = ['light', 'personal', 'business'] as const;\nexport const extraThemes = ['forest-green', 'bright-green'] as const;\nexport const screenModes = ['light', 'dark'] as const;\nexport const modernThemes = [baseThemes[1], baseThemes[2], ...extraThemes] as const;\nexport const businessThemes = [\n  'business',\n  'business--forest-green',\n  'business--bright-green',\n] as const;\nexport const platformThemes = ['platform', 'platform--forest-green'] as const;\n\n// TODO: componentThemes returned back for backward compatibility, refactor this place in the future\nexport type ComponentTheme = (typeof baseThemes)[number];\nexport type ModernTheme = (typeof modernThemes)[number];\nexport type BaseTheme = (typeof baseThemes)[number];\nexport type ExtraTheme = (typeof extraThemes)[number];\nexport type ForestGreenTheme = (typeof extraThemes)[0];\nexport type ScreenMode = (typeof screenModes)[number];\nexport type ScreenModeDark = (typeof screenModes)[1];\nexport type PlatformTheme = (typeof platformThemes)[0];\nexport type PlatformForestGreenTheme = (typeof platformThemes)[1];\nexport type BusinessTheme = (typeof businessThemes)[0];\nexport type BusinessForestGreenTheme = (typeof businessThemes)[1];\nexport type BusinessBrightGreenTheme = (typeof businessThemes)[2];\n\nexport const DEFAULT_BASE_THEME = 'light';\nexport const DEFAULT_SCREEN_MODE = 'light';\n\nexport type Theming = {\n  theme?:\n    | ComponentTheme\n    | BaseTheme\n    | ExtraTheme\n    | BusinessTheme\n    | BusinessForestGreenTheme\n    | BusinessBrightGreenTheme\n    | PlatformTheme\n    | PlatformForestGreenTheme;\n  screenMode?: ScreenMode;\n  isNotRootProvider?: boolean | undefined;\n};\n"],"names":["baseThemes","extraThemes","screenModes","modernThemes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE"],"mappings":"AAAA;AACO,MAAMA,UAAU,GAAG,CAAC,OAAO,EAAE,UAAU,EAAE,UAAU;MAC7CC,WAAW,GAAG,CAAC,cAAc,EAAE,cAAc;MAC7CC,WAAW,GAAG,CAAC,OAAO,EAAE,MAAM;MAC9BC,YAAY,GAAG,CAACH,UAAU,CAAC,CAAC,CAAC,EAAEA,UAAU,CAAC,CAAC,CAAC,EAAE,GAAGC,WAAW;AAsBlE,MAAMG,kBAAkB,GAAG;AAC3B,MAAMC,mBAAmB,GAAG;;;;"}
+{"version":3,"file":"const.mjs","sources":["../src/const.ts"],"sourcesContent":["// TODO: Change 'light' with 'legacy' in the future\nexport const baseThemes = ['light', 'personal', 'business'] as const;\nexport const extraThemes = ['forest-green', 'bright-green'] as const;\nexport const screenModes = ['light', 'dark'] as const;\n/**\n * @deprecated \"modern\" theme is released, you should not need check for \"modern\" theme anymore\n */\nexport const modernThemes = [baseThemes[1], baseThemes[2], ...extraThemes] as const;\nexport const businessThemes = [\n  'business',\n  'business--forest-green',\n  'business--bright-green',\n] as const;\nexport const platformThemes = ['platform', 'platform--forest-green'] as const;\n\n// TODO: componentThemes returned back for backward compatibility, refactor this place in the future\nexport type ComponentTheme = (typeof baseThemes)[number];\n/**\n * @deprecated \"modern\" theme is released, you should not need check for \"modern\" theme anymore\n */\nexport type ModernTheme = (typeof modernThemes)[number];\nexport type BaseTheme = (typeof baseThemes)[number];\nexport type ExtraTheme = (typeof extraThemes)[number];\nexport type ForestGreenTheme = (typeof extraThemes)[0];\nexport type ScreenMode = (typeof screenModes)[number];\nexport type ScreenModeDark = (typeof screenModes)[1];\nexport type PlatformTheme = (typeof platformThemes)[0];\nexport type PlatformForestGreenTheme = (typeof platformThemes)[1];\nexport type BusinessTheme = (typeof businessThemes)[0];\nexport type BusinessForestGreenTheme = (typeof businessThemes)[1];\nexport type BusinessBrightGreenTheme = (typeof businessThemes)[2];\n\nexport const DEFAULT_BASE_THEME = 'personal';\nexport const DEFAULT_SCREEN_MODE = 'light';\n\nexport type Theming = {\n  theme?:\n    | ComponentTheme\n    | BaseTheme\n    | ExtraTheme\n    | BusinessTheme\n    | BusinessForestGreenTheme\n    | BusinessBrightGreenTheme\n    | PlatformTheme\n    | PlatformForestGreenTheme;\n  screenMode?: ScreenMode;\n  /**\n   * @deprecated this property has not effect, safe to delete\n   */\n  isNotRootProvider?: boolean | undefined;\n};\n"],"names":["extraThemes","screenModes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE"],"mappings":"AAAA;MAEaA,WAAW,GAAG,CAAC,cAAc,EAAE,cAAc;MAC7CC,WAAW,GAAG,CAAC,OAAO,EAAE,MAAM;AA6BpC,MAAMC,kBAAkB,GAAG;AAC3B,MAAMC,mBAAmB,GAAG;;;;"}

package/dist/helpers.d.ts

@@ -1,7 +1,11 @@
 import type { ModernTheme, ExtraTheme, ForestGreenTheme, ScreenMode, ScreenModeDark, Theming } from './const';
+/**
+ * @deprecated "modern" theme is released, you should not need check for "modern" theme anymore
+ */
 export declare const isThemeModern: (theme: NonNullable<Theming["theme"]>) => theme is ModernTheme;
 export declare const isExtraTheme: (theme: NonNullable<Theming["theme"]>) => theme is ExtraTheme;
 export declare const isForestGreenTheme: (theme: NonNullable<Theming["theme"]>) => theme is ForestGreenTheme;
 export declare const isScreenModeDark: (theme: NonNullable<Theming["theme"]>, screenMode: ScreenMode) => screenMode is ScreenModeDark;
 export declare const getThemeClassName: (theme: NonNullable<Theming["theme"]>, screenMode: ScreenMode) => string;
+export declare const normalizeTheme: (theme: NonNullable<Theming["theme"]>) => NonNullable<Theming["theme"]>;
 //# sourceMappingURL=helpers.d.ts.map

package/dist/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,OAAO,EACR,MAAM,SAAS,CAAC;AAGjB,eAAO,MAAM,aAAa,GAAI,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAG,KAAK,IAAI,WACjC,CAAC;AAE9C,eAAO,MAAM,YAAY,GAAI,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAG,KAAK,IAAI,UAClC,CAAC;AAE5C,eAAO,MAAM,kBAAkB,GAC7B,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KACnC,KAAK,IAAI,gBAA4C,CAAC;AAEzD,eAAO,MAAM,gBAAgB,GAC3B,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EACpC,YAAY,UAAU,KACrB,UAAU,IAAI,cACqD,CAAC;AAEvE,eAAO,MAAM,iBAAiB,GAAI,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,YAAY,UAAU,WAuC7F,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,OAAO,EACR,MAAM,SAAS,CAAC;AAGjB;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAG,KAAK,IAAI,WAAmB,CAAC;AAElG,eAAO,MAAM,YAAY,GAAI,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAG,KAAK,IAAI,UAClC,CAAC;AAE5C,eAAO,MAAM,kBAAkB,GAC7B,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KACnC,KAAK,IAAI,gBAA4C,CAAC;AAEzD,eAAO,MAAM,gBAAgB,GAC3B,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EACpC,YAAY,UAAU,KACrB,UAAU,IAAI,cAA+C,CAAC;AAEjE,eAAO,MAAM,iBAAiB,GAAI,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,YAAY,UAAU,WAmC7F,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KACnC,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAA6C,CAAC"}

package/dist/helpers.js

@@ -2,14 +2,14 @@
 
 var _const = require('./const.js');
 
-const isThemeModern = theme => _const.modernThemes.includes(theme);
+/**
+ * @deprecated "modern" theme is released, you should not need check for "modern" theme anymore
+ */
+const isThemeModern = theme => true;
 const isExtraTheme = theme => _const.extraThemes.includes(theme);
 const isForestGreenTheme = theme => theme === _const.extraThemes[0];
-const isScreenModeDark = (theme, screenMode) => isThemeModern(theme) && _const.screenModes[1] === screenMode;
+const isScreenModeDark = (theme, screenMode) => _const.screenModes[1] === screenMode;
 const getThemeClassName = (theme, screenMode) => {
-  if (['light'].includes(theme)) {
-    return `np-theme-${theme}`;
-  }
   // Personal light is always there by default
   const themeClasses = ['np-theme-personal'];
   /* eslint-disable functional/immutable-data */
@@ -40,10 +40,12 @@ const getThemeClassName = (theme, screenMode) => {
   /* eslint-enable functional/immutable-data */
   return themeClasses.join(' ');
 };
+const normalizeTheme = theme => theme === 'light' ? 'personal' : theme;
 
 exports.getThemeClassName = getThemeClassName;
 exports.isExtraTheme = isExtraTheme;
 exports.isForestGreenTheme = isForestGreenTheme;
 exports.isScreenModeDark = isScreenModeDark;
 exports.isThemeModern = isThemeModern;
+exports.normalizeTheme = normalizeTheme;
 //# sourceMappingURL=helpers.js.map

package/dist/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","sources":["../src/helpers.ts"],"sourcesContent":["import type {\n  ModernTheme,\n  ExtraTheme,\n  ForestGreenTheme,\n  ScreenMode,\n  ScreenModeDark,\n  Theming,\n} from './const';\nimport { extraThemes, screenModes, modernThemes } from './const';\n\nexport const isThemeModern = (theme: NonNullable<Theming['theme']>): theme is ModernTheme =>\n  modernThemes.includes(theme as ModernTheme);\n\nexport const isExtraTheme = (theme: NonNullable<Theming['theme']>): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isForestGreenTheme = (\n  theme: NonNullable<Theming['theme']>,\n): theme is ForestGreenTheme => theme === extraThemes[0];\n\nexport const isScreenModeDark = (\n  theme: NonNullable<Theming['theme']>,\n  screenMode: ScreenMode,\n): screenMode is ScreenModeDark =>\n  isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;\n\nexport const getThemeClassName = (theme: NonNullable<Theming['theme']>, screenMode: ScreenMode) => {\n  if (['light'].includes(theme)) {\n    return `np-theme-${theme}`;\n  }\n\n  // Personal light is always there by default\n  const themeClasses = ['np-theme-personal'];\n\n  /* eslint-disable functional/immutable-data */\n  // Personal dark theme\n  if (theme === 'personal' && screenMode === 'dark') {\n    themeClasses.push(`np-theme-personal--${screenMode}`);\n  }\n\n  // Personal forest-green and bright-green themes\n  else if (['forest-green', 'bright-green'].includes(theme)) {\n    themeClasses.push(`np-theme-personal--${theme}`);\n  }\n\n  // Business light\n  else if (theme === 'business') {\n    themeClasses.push(`np-theme-business`);\n    // Business dark theme\n    if (screenMode === 'dark') {\n      themeClasses.push(`np-theme-business--${screenMode}`);\n    }\n  }\n\n  // Business forest-green and bright-green themes\n  else if (['business--forest-green', 'business--bright-green'].includes(theme)) {\n    themeClasses.push(`np-theme-${theme}`);\n  }\n\n  // Platform themes\n  else if (theme.startsWith('platform')) {\n    themeClasses.push(`np-theme-${theme}`);\n  }\n  /* eslint-enable functional/immutable-data */\n  return themeClasses.join(' ');\n};\n"],"names":["isThemeModern","theme","modernThemes","includes","isExtraTheme","extraThemes","isForestGreenTheme","isScreenModeDark","screenMode","screenModes","getThemeClassName","themeClasses","push","startsWith","join"],"mappings":";;;;AAUO,MAAMA,aAAa,GAAIC,KAAoC,IAChEC,mBAAY,CAACC,QAAQ,CAACF,KAAoB;AAErC,MAAMG,YAAY,GAAIH,KAAoC,IAC/DI,kBAAW,CAACF,QAAQ,CAACF,KAAmB;AAEnC,MAAMK,kBAAkB,GAC7BL,KAAoC,IACNA,KAAK,KAAKI,kBAAW,CAAC,CAAC;MAE1CE,gBAAgB,GAAGA,CAC9BN,KAAoC,EACpCO,UAAsB,KAEtBR,aAAa,CAACC,KAAoB,CAAC,IAAIQ,kBAAW,CAAC,CAAC,CAAC,KAAKD;MAE/CE,iBAAiB,GAAGA,CAACT,KAAoC,EAAEO,UAAsB,KAAI;EAChG,IAAI,CAAC,OAAO,CAAC,CAACL,QAAQ,CAACF,KAAK,CAAC,EAAE;IAC7B,OAAO,CAAA,SAAA,EAAYA,KAAK,CAAA,CAAE;AAC5B,EAAA;AAEA;AACA,EAAA,MAAMU,YAAY,GAAG,CAAC,mBAAmB,CAAC;AAE1C;AACA;AACA,EAAA,IAAIV,KAAK,KAAK,UAAU,IAAIO,UAAU,KAAK,MAAM,EAAE;AACjDG,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,EAAA;AAEA;OACK,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,CAACL,QAAQ,CAACF,KAAK,CAAC,EAAE;AACzDU,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBX,KAAK,EAAE,CAAC;AAClD,EAAA;AAEA;AAAA,OACK,IAAIA,KAAK,KAAK,UAAU,EAAE;AAC7BU,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,iBAAA,CAAmB,CAAC;AACtC;IACA,IAAIJ,UAAU,KAAK,MAAM,EAAE;AACzBG,MAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,IAAA;AACF,EAAA;AAEA;OACK,IAAI,CAAC,wBAAwB,EAAE,wBAAwB,CAAC,CAACL,QAAQ,CAACF,KAAK,CAAC,EAAE;AAC7EU,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYX,KAAK,EAAE,CAAC;AACxC,EAAA;AAEA;AAAA,OACK,IAAIA,KAAK,CAACY,UAAU,CAAC,UAAU,CAAC,EAAE;AACrCF,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYX,KAAK,EAAE,CAAC;AACxC,EAAA;AACA;AACA,EAAA,OAAOU,YAAY,CAACG,IAAI,CAAC,GAAG,CAAC;AAC/B;;;;;;;;"}
+{"version":3,"file":"helpers.js","sources":["../src/helpers.ts"],"sourcesContent":["import type {\n  ModernTheme,\n  ExtraTheme,\n  ForestGreenTheme,\n  ScreenMode,\n  ScreenModeDark,\n  Theming,\n} from './const';\nimport { extraThemes, screenModes, modernThemes } from './const';\n\n/**\n * @deprecated \"modern\" theme is released, you should not need check for \"modern\" theme anymore\n */\nexport const isThemeModern = (theme: NonNullable<Theming['theme']>): theme is ModernTheme => true;\n\nexport const isExtraTheme = (theme: NonNullable<Theming['theme']>): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isForestGreenTheme = (\n  theme: NonNullable<Theming['theme']>,\n): theme is ForestGreenTheme => theme === extraThemes[0];\n\nexport const isScreenModeDark = (\n  theme: NonNullable<Theming['theme']>,\n  screenMode: ScreenMode,\n): screenMode is ScreenModeDark => screenModes[1] === screenMode;\n\nexport const getThemeClassName = (theme: NonNullable<Theming['theme']>, screenMode: ScreenMode) => {\n  // Personal light is always there by default\n  const themeClasses = ['np-theme-personal'];\n\n  /* eslint-disable functional/immutable-data */\n  // Personal dark theme\n  if (theme === 'personal' && screenMode === 'dark') {\n    themeClasses.push(`np-theme-personal--${screenMode}`);\n  }\n\n  // Personal forest-green and bright-green themes\n  else if (['forest-green', 'bright-green'].includes(theme)) {\n    themeClasses.push(`np-theme-personal--${theme}`);\n  }\n\n  // Business light\n  else if (theme === 'business') {\n    themeClasses.push(`np-theme-business`);\n    // Business dark theme\n    if (screenMode === 'dark') {\n      themeClasses.push(`np-theme-business--${screenMode}`);\n    }\n  }\n\n  // Business forest-green and bright-green themes\n  else if (['business--forest-green', 'business--bright-green'].includes(theme)) {\n    themeClasses.push(`np-theme-${theme}`);\n  }\n\n  // Platform themes\n  else if (theme.startsWith('platform')) {\n    themeClasses.push(`np-theme-${theme}`);\n  }\n  /* eslint-enable functional/immutable-data */\n  return themeClasses.join(' ');\n};\n\nexport const normalizeTheme = (\n  theme: NonNullable<Theming['theme']>,\n): NonNullable<Theming['theme']> => (theme === 'light' ? 'personal' : theme);\n"],"names":["isThemeModern","theme","isExtraTheme","extraThemes","includes","isForestGreenTheme","isScreenModeDark","screenMode","screenModes","getThemeClassName","themeClasses","push","startsWith","join","normalizeTheme"],"mappings":";;;;AAUA;;AAEG;AACI,MAAMA,aAAa,GAAIC,KAAoC,IAA2B;AAEtF,MAAMC,YAAY,GAAID,KAAoC,IAC/DE,kBAAW,CAACC,QAAQ,CAACH,KAAmB;AAEnC,MAAMI,kBAAkB,GAC7BJ,KAAoC,IACNA,KAAK,KAAKE,kBAAW,CAAC,CAAC;AAEhD,MAAMG,gBAAgB,GAAGA,CAC9BL,KAAoC,EACpCM,UAAsB,KACWC,kBAAW,CAAC,CAAC,CAAC,KAAKD;MAEzCE,iBAAiB,GAAGA,CAACR,KAAoC,EAAEM,UAAsB,KAAI;AAChG;AACA,EAAA,MAAMG,YAAY,GAAG,CAAC,mBAAmB,CAAC;AAE1C;AACA;AACA,EAAA,IAAIT,KAAK,KAAK,UAAU,IAAIM,UAAU,KAAK,MAAM,EAAE;AACjDG,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,EAAA;AAEA;OACK,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,CAACH,QAAQ,CAACH,KAAK,CAAC,EAAE;AACzDS,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBV,KAAK,EAAE,CAAC;AAClD,EAAA;AAEA;AAAA,OACK,IAAIA,KAAK,KAAK,UAAU,EAAE;AAC7BS,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,iBAAA,CAAmB,CAAC;AACtC;IACA,IAAIJ,UAAU,KAAK,MAAM,EAAE;AACzBG,MAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,IAAA;AACF,EAAA;AAEA;OACK,IAAI,CAAC,wBAAwB,EAAE,wBAAwB,CAAC,CAACH,QAAQ,CAACH,KAAK,CAAC,EAAE;AAC7ES,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYV,KAAK,EAAE,CAAC;AACxC,EAAA;AAEA;AAAA,OACK,IAAIA,KAAK,CAACW,UAAU,CAAC,UAAU,CAAC,EAAE;AACrCF,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYV,KAAK,EAAE,CAAC;AACxC,EAAA;AACA;AACA,EAAA,OAAOS,YAAY,CAACG,IAAI,CAAC,GAAG,CAAC;AAC/B;AAEO,MAAMC,cAAc,GACzBb,KAAoC,IACDA,KAAK,KAAK,OAAO,GAAG,UAAU,GAAGA;;;;;;;;;"}

package/dist/helpers.mjs

@@ -1,13 +1,13 @@
-import { modernThemes, extraThemes, screenModes } from './const.mjs';
+import { extraThemes, screenModes } from './const.mjs';
 
-const isThemeModern = theme => modernThemes.includes(theme);
+/**
+ * @deprecated "modern" theme is released, you should not need check for "modern" theme anymore
+ */
+const isThemeModern = theme => true;
 const isExtraTheme = theme => extraThemes.includes(theme);
 const isForestGreenTheme = theme => theme === extraThemes[0];
-const isScreenModeDark = (theme, screenMode) => isThemeModern(theme) && screenModes[1] === screenMode;
+const isScreenModeDark = (theme, screenMode) => screenModes[1] === screenMode;
 const getThemeClassName = (theme, screenMode) => {
-  if (['light'].includes(theme)) {
-    return `np-theme-${theme}`;
-  }
   // Personal light is always there by default
   const themeClasses = ['np-theme-personal'];
   /* eslint-disable functional/immutable-data */
@@ -38,6 +38,7 @@ const getThemeClassName = (theme, screenMode) => {
   /* eslint-enable functional/immutable-data */
   return themeClasses.join(' ');
 };
+const normalizeTheme = theme => theme === 'light' ? 'personal' : theme;
 
-export { getThemeClassName, isExtraTheme, isForestGreenTheme, isScreenModeDark, isThemeModern };
+export { getThemeClassName, isExtraTheme, isForestGreenTheme, isScreenModeDark, isThemeModern, normalizeTheme };
 //# sourceMappingURL=helpers.mjs.map

package/dist/helpers.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.mjs","sources":["../src/helpers.ts"],"sourcesContent":["import type {\n  ModernTheme,\n  ExtraTheme,\n  ForestGreenTheme,\n  ScreenMode,\n  ScreenModeDark,\n  Theming,\n} from './const';\nimport { extraThemes, screenModes, modernThemes } from './const';\n\nexport const isThemeModern = (theme: NonNullable<Theming['theme']>): theme is ModernTheme =>\n  modernThemes.includes(theme as ModernTheme);\n\nexport const isExtraTheme = (theme: NonNullable<Theming['theme']>): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isForestGreenTheme = (\n  theme: NonNullable<Theming['theme']>,\n): theme is ForestGreenTheme => theme === extraThemes[0];\n\nexport const isScreenModeDark = (\n  theme: NonNullable<Theming['theme']>,\n  screenMode: ScreenMode,\n): screenMode is ScreenModeDark =>\n  isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;\n\nexport const getThemeClassName = (theme: NonNullable<Theming['theme']>, screenMode: ScreenMode) => {\n  if (['light'].includes(theme)) {\n    return `np-theme-${theme}`;\n  }\n\n  // Personal light is always there by default\n  const themeClasses = ['np-theme-personal'];\n\n  /* eslint-disable functional/immutable-data */\n  // Personal dark theme\n  if (theme === 'personal' && screenMode === 'dark') {\n    themeClasses.push(`np-theme-personal--${screenMode}`);\n  }\n\n  // Personal forest-green and bright-green themes\n  else if (['forest-green', 'bright-green'].includes(theme)) {\n    themeClasses.push(`np-theme-personal--${theme}`);\n  }\n\n  // Business light\n  else if (theme === 'business') {\n    themeClasses.push(`np-theme-business`);\n    // Business dark theme\n    if (screenMode === 'dark') {\n      themeClasses.push(`np-theme-business--${screenMode}`);\n    }\n  }\n\n  // Business forest-green and bright-green themes\n  else if (['business--forest-green', 'business--bright-green'].includes(theme)) {\n    themeClasses.push(`np-theme-${theme}`);\n  }\n\n  // Platform themes\n  else if (theme.startsWith('platform')) {\n    themeClasses.push(`np-theme-${theme}`);\n  }\n  /* eslint-enable functional/immutable-data */\n  return themeClasses.join(' ');\n};\n"],"names":["isThemeModern","theme","modernThemes","includes","isExtraTheme","extraThemes","isForestGreenTheme","isScreenModeDark","screenMode","screenModes","getThemeClassName","themeClasses","push","startsWith","join"],"mappings":";;AAUO,MAAMA,aAAa,GAAIC,KAAoC,IAChEC,YAAY,CAACC,QAAQ,CAACF,KAAoB;AAErC,MAAMG,YAAY,GAAIH,KAAoC,IAC/DI,WAAW,CAACF,QAAQ,CAACF,KAAmB;AAEnC,MAAMK,kBAAkB,GAC7BL,KAAoC,IACNA,KAAK,KAAKI,WAAW,CAAC,CAAC;MAE1CE,gBAAgB,GAAGA,CAC9BN,KAAoC,EACpCO,UAAsB,KAEtBR,aAAa,CAACC,KAAoB,CAAC,IAAIQ,WAAW,CAAC,CAAC,CAAC,KAAKD;MAE/CE,iBAAiB,GAAGA,CAACT,KAAoC,EAAEO,UAAsB,KAAI;EAChG,IAAI,CAAC,OAAO,CAAC,CAACL,QAAQ,CAACF,KAAK,CAAC,EAAE;IAC7B,OAAO,CAAA,SAAA,EAAYA,KAAK,CAAA,CAAE;AAC5B,EAAA;AAEA;AACA,EAAA,MAAMU,YAAY,GAAG,CAAC,mBAAmB,CAAC;AAE1C;AACA;AACA,EAAA,IAAIV,KAAK,KAAK,UAAU,IAAIO,UAAU,KAAK,MAAM,EAAE;AACjDG,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,EAAA;AAEA;OACK,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,CAACL,QAAQ,CAACF,KAAK,CAAC,EAAE;AACzDU,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBX,KAAK,EAAE,CAAC;AAClD,EAAA;AAEA;AAAA,OACK,IAAIA,KAAK,KAAK,UAAU,EAAE;AAC7BU,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,iBAAA,CAAmB,CAAC;AACtC;IACA,IAAIJ,UAAU,KAAK,MAAM,EAAE;AACzBG,MAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,IAAA;AACF,EAAA;AAEA;OACK,IAAI,CAAC,wBAAwB,EAAE,wBAAwB,CAAC,CAACL,QAAQ,CAACF,KAAK,CAAC,EAAE;AAC7EU,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYX,KAAK,EAAE,CAAC;AACxC,EAAA;AAEA;AAAA,OACK,IAAIA,KAAK,CAACY,UAAU,CAAC,UAAU,CAAC,EAAE;AACrCF,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYX,KAAK,EAAE,CAAC;AACxC,EAAA;AACA;AACA,EAAA,OAAOU,YAAY,CAACG,IAAI,CAAC,GAAG,CAAC;AAC/B;;;;"}
+{"version":3,"file":"helpers.mjs","sources":["../src/helpers.ts"],"sourcesContent":["import type {\n  ModernTheme,\n  ExtraTheme,\n  ForestGreenTheme,\n  ScreenMode,\n  ScreenModeDark,\n  Theming,\n} from './const';\nimport { extraThemes, screenModes, modernThemes } from './const';\n\n/**\n * @deprecated \"modern\" theme is released, you should not need check for \"modern\" theme anymore\n */\nexport const isThemeModern = (theme: NonNullable<Theming['theme']>): theme is ModernTheme => true;\n\nexport const isExtraTheme = (theme: NonNullable<Theming['theme']>): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isForestGreenTheme = (\n  theme: NonNullable<Theming['theme']>,\n): theme is ForestGreenTheme => theme === extraThemes[0];\n\nexport const isScreenModeDark = (\n  theme: NonNullable<Theming['theme']>,\n  screenMode: ScreenMode,\n): screenMode is ScreenModeDark => screenModes[1] === screenMode;\n\nexport const getThemeClassName = (theme: NonNullable<Theming['theme']>, screenMode: ScreenMode) => {\n  // Personal light is always there by default\n  const themeClasses = ['np-theme-personal'];\n\n  /* eslint-disable functional/immutable-data */\n  // Personal dark theme\n  if (theme === 'personal' && screenMode === 'dark') {\n    themeClasses.push(`np-theme-personal--${screenMode}`);\n  }\n\n  // Personal forest-green and bright-green themes\n  else if (['forest-green', 'bright-green'].includes(theme)) {\n    themeClasses.push(`np-theme-personal--${theme}`);\n  }\n\n  // Business light\n  else if (theme === 'business') {\n    themeClasses.push(`np-theme-business`);\n    // Business dark theme\n    if (screenMode === 'dark') {\n      themeClasses.push(`np-theme-business--${screenMode}`);\n    }\n  }\n\n  // Business forest-green and bright-green themes\n  else if (['business--forest-green', 'business--bright-green'].includes(theme)) {\n    themeClasses.push(`np-theme-${theme}`);\n  }\n\n  // Platform themes\n  else if (theme.startsWith('platform')) {\n    themeClasses.push(`np-theme-${theme}`);\n  }\n  /* eslint-enable functional/immutable-data */\n  return themeClasses.join(' ');\n};\n\nexport const normalizeTheme = (\n  theme: NonNullable<Theming['theme']>,\n): NonNullable<Theming['theme']> => (theme === 'light' ? 'personal' : theme);\n"],"names":["isThemeModern","theme","isExtraTheme","extraThemes","includes","isForestGreenTheme","isScreenModeDark","screenMode","screenModes","getThemeClassName","themeClasses","push","startsWith","join","normalizeTheme"],"mappings":";;AAUA;;AAEG;AACI,MAAMA,aAAa,GAAIC,KAAoC,IAA2B;AAEtF,MAAMC,YAAY,GAAID,KAAoC,IAC/DE,WAAW,CAACC,QAAQ,CAACH,KAAmB;AAEnC,MAAMI,kBAAkB,GAC7BJ,KAAoC,IACNA,KAAK,KAAKE,WAAW,CAAC,CAAC;AAEhD,MAAMG,gBAAgB,GAAGA,CAC9BL,KAAoC,EACpCM,UAAsB,KACWC,WAAW,CAAC,CAAC,CAAC,KAAKD;MAEzCE,iBAAiB,GAAGA,CAACR,KAAoC,EAAEM,UAAsB,KAAI;AAChG;AACA,EAAA,MAAMG,YAAY,GAAG,CAAC,mBAAmB,CAAC;AAE1C;AACA;AACA,EAAA,IAAIT,KAAK,KAAK,UAAU,IAAIM,UAAU,KAAK,MAAM,EAAE;AACjDG,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,EAAA;AAEA;OACK,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,CAACH,QAAQ,CAACH,KAAK,CAAC,EAAE;AACzDS,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBV,KAAK,EAAE,CAAC;AAClD,EAAA;AAEA;AAAA,OACK,IAAIA,KAAK,KAAK,UAAU,EAAE;AAC7BS,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,iBAAA,CAAmB,CAAC;AACtC;IACA,IAAIJ,UAAU,KAAK,MAAM,EAAE;AACzBG,MAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,IAAA;AACF,EAAA;AAEA;OACK,IAAI,CAAC,wBAAwB,EAAE,wBAAwB,CAAC,CAACH,QAAQ,CAACH,KAAK,CAAC,EAAE;AAC7ES,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYV,KAAK,EAAE,CAAC;AACxC,EAAA;AAEA;AAAA,OACK,IAAIA,KAAK,CAACW,UAAU,CAAC,UAAU,CAAC,EAAE;AACrCF,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYV,KAAK,EAAE,CAAC;AACxC,EAAA;AACA;AACA,EAAA,OAAOS,YAAY,CAACG,IAAI,CAAC,GAAG,CAAC;AAC/B;AAEO,MAAMC,cAAc,GACzBb,KAAoC,IACDA,KAAK,KAAK,OAAO,GAAG,UAAU,GAAGA;;;;"}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export type { ComponentTheme, BaseTheme, ExtraTheme, ScreenMode, Theming } from './const';
+export type { ComponentTheme, BaseTheme, ExtraTheme, ScreenMode, Theming, DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE, } from './const';
 export { isThemeModern, isExtraTheme, isForestGreenTheme, isScreenModeDark, getThemeClassName, } from './helpers';
 export { ThemeProvider, type ThemeProviderProps } from './ThemeProvider';
 export { useTheme } from './useTheme';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAC1F,OAAO,EACL,aAAa,EACb,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,YAAY,EACV,cAAc,EACd,SAAS,EACT,UAAU,EACV,UAAU,EACV,OAAO,EACP,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,SAAS,CAAC;AAEjB,OAAO,EACL,aAAa,EACb,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/useTheme.d.ts

@@ -2,6 +2,9 @@ import type { ScreenMode, Theming } from './const';
 interface ThemeHookValue {
     theme: NonNullable<Theming['theme']>;
     screenMode: ScreenMode;
+    /**
+     * @deprecated there is no more such thing as "modern" theme
+     */
     isModern: boolean;
     isForestGreenTheme: boolean;
     isScreenModeDark: boolean;

package/dist/useTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../src/useTheme.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAInD,UAAU,cAAc;IACtB,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IACrC,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,IAAI,CAAC;IACzD,aAAa,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;CACjD;AAiBD,eAAO,MAAM,QAAQ,QAAO,cA8B3B,CAAC"}
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../src/useTheme.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAInD,UAAU,cAAc;IACtB,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IACrC,UAAU,EAAE,UAAU,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,IAAI,CAAC;IACzD,aAAa,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;CACjD;AAiBD,eAAO,MAAM,QAAQ,QAAO,cA0B3B,CAAC"}

package/dist/useTheme.js

@@ -26,15 +26,17 @@ const useTheme = () => {
   }
   const {
     theme,
-    screenMode: contextScreenMode,
+    screenMode,
     setTheme,
     setScreenMode
   } = theming ?? FALLBACK_VALUES;
-  const screenMode = theme === _const.DEFAULT_BASE_THEME ? _const.DEFAULT_SCREEN_MODE : contextScreenMode;
   return react.useMemo(() => ({
     theme,
     screenMode,
-    isModern: helpers.isThemeModern(theme),
+    /**
+     * @deprecated there is no more such thing as "modern" theme
+     */
+    isModern: helpers.isThemeModern(),
     isForestGreenTheme: helpers.isForestGreenTheme(theme),
     isScreenModeDark: helpers.isScreenModeDark(theme, screenMode),
     className: helpers.getThemeClassName(theme, screenMode),

package/dist/useTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.js","sources":["../src/useTheme.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProviderContext';\nimport type { ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n  theme: NonNullable<Theming['theme']>;\n  screenMode: ScreenMode;\n  isModern: boolean;\n  isForestGreenTheme: boolean;\n  isScreenModeDark: boolean;\n  className: string;\n  setTheme: (theme: NonNullable<Theming['theme']>) => void;\n  setScreenMode: (screenMode: ScreenMode) => void;\n}\n\nconst FALLBACK_VALUES = {\n  theme: DEFAULT_BASE_THEME,\n  screenMode: DEFAULT_SCREEN_MODE,\n  setTheme: () => {},\n  setScreenMode: () => {},\n} as const;\n\nconst isNotProduction = () => {\n  try {\n    return ['localhost', 'dev-wi.se'].includes(window.location.hostname);\n  } catch {\n    return false;\n  }\n};\n\nexport const useTheme = (): ThemeHookValue => {\n  const theming = useContext(ThemeContext);\n\n  if (!theming && isNotProduction()) {\n    // eslint-disable-next-line no-console\n    console.warn('Call to useTheme outside a ThemeProvider');\n  }\n\n  const {\n    theme,\n    screenMode: contextScreenMode,\n    setTheme,\n    setScreenMode,\n  } = theming ?? FALLBACK_VALUES;\n\n  const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;\n\n  return useMemo(\n    () => ({\n      theme,\n      screenMode,\n      isModern: isThemeModern(theme),\n      isForestGreenTheme: isForestGreenTheme(theme),\n      isScreenModeDark: isScreenModeDark(theme, screenMode),\n      className: getThemeClassName(theme, screenMode),\n      setTheme,\n      setScreenMode,\n    }),\n    [theme, screenMode, setTheme, setScreenMode],\n  );\n};\n"],"names":["FALLBACK_VALUES","theme","DEFAULT_BASE_THEME","screenMode","DEFAULT_SCREEN_MODE","setTheme","setScreenMode","isNotProduction","includes","window","location","hostname","useTheme","theming","useContext","ThemeContext","console","warn","contextScreenMode","useMemo","isModern","isThemeModern","isForestGreenTheme","isScreenModeDark","className","getThemeClassName"],"mappings":";;;;;;;AAkBA,MAAMA,eAAe,GAAG;AACtBC,EAAAA,KAAK,EAAEC,yBAAkB;AACzBC,EAAAA,UAAU,EAAEC,0BAAmB;AAC/BC,EAAAA,QAAQ,EAAEA,MAAK,CAAE,CAAC;EAClBC,aAAa,EAAEA,MAAK,CAAE;CACd;AAEV,MAAMC,eAAe,GAAGA,MAAK;EAC3B,IAAI;AACF,IAAA,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACC,MAAM,CAACC,QAAQ,CAACC,QAAQ,CAAC;AACtE,EAAA,CAAC,CAAC,MAAM;AACN,IAAA,OAAO,KAAK;AACd,EAAA;AACF,CAAC;AAEM,MAAMC,QAAQ,GAAGA,MAAqB;AAC3C,EAAA,MAAMC,OAAO,GAAGC,gBAAU,CAACC,iCAAY,CAAC;AAExC,EAAA,IAAI,CAACF,OAAO,IAAIN,eAAe,EAAE,EAAE;AACjC;AACAS,IAAAA,OAAO,CAACC,IAAI,CAAC,0CAA0C,CAAC;AAC1D,EAAA;EAEA,MAAM;IACJhB,KAAK;AACLE,IAAAA,UAAU,EAAEe,iBAAiB;IAC7Bb,QAAQ;AACRC,IAAAA;GACD,GAAGO,OAAO,IAAIb,eAAe;EAE9B,MAAMG,UAAU,GAAGF,KAAK,KAAKC,yBAAkB,GAAGE,0BAAmB,GAAGc,iBAAiB;EAEzF,OAAOC,aAAO,CACZ,OAAO;IACLlB,KAAK;IACLE,UAAU;AACViB,IAAAA,QAAQ,EAAEC,qBAAa,CAACpB,KAAK,CAAC;AAC9BqB,IAAAA,kBAAkB,EAAEA,0BAAkB,CAACrB,KAAK,CAAC;AAC7CsB,IAAAA,gBAAgB,EAAEA,wBAAgB,CAACtB,KAAK,EAAEE,UAAU,CAAC;AACrDqB,IAAAA,SAAS,EAAEC,yBAAiB,CAACxB,KAAK,EAAEE,UAAU,CAAC;IAC/CE,QAAQ;AACRC,IAAAA;GACD,CAAC,EACF,CAACL,KAAK,EAAEE,UAAU,EAAEE,QAAQ,EAAEC,aAAa,CAAC,CAC7C;AACH;;;;"}
+{"version":3,"file":"useTheme.js","sources":["../src/useTheme.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProviderContext';\nimport type { ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n  theme: NonNullable<Theming['theme']>;\n  screenMode: ScreenMode;\n  /**\n   * @deprecated there is no more such thing as \"modern\" theme\n   */\n  isModern: boolean;\n  isForestGreenTheme: boolean;\n  isScreenModeDark: boolean;\n  className: string;\n  setTheme: (theme: NonNullable<Theming['theme']>) => void;\n  setScreenMode: (screenMode: ScreenMode) => void;\n}\n\nconst FALLBACK_VALUES = {\n  theme: DEFAULT_BASE_THEME,\n  screenMode: DEFAULT_SCREEN_MODE,\n  setTheme: () => {},\n  setScreenMode: () => {},\n} as const;\n\nconst isNotProduction = () => {\n  try {\n    return ['localhost', 'dev-wi.se'].includes(window.location.hostname);\n  } catch {\n    return false;\n  }\n};\n\nexport const useTheme = (): ThemeHookValue => {\n  const theming = useContext(ThemeContext);\n\n  if (!theming && isNotProduction()) {\n    // eslint-disable-next-line no-console\n    console.warn('Call to useTheme outside a ThemeProvider');\n  }\n\n  const { theme, screenMode, setTheme, setScreenMode } = theming ?? FALLBACK_VALUES;\n\n  return useMemo(\n    () => ({\n      theme,\n      screenMode,\n      /**\n       * @deprecated there is no more such thing as \"modern\" theme\n       */\n      isModern: isThemeModern(theme),\n      isForestGreenTheme: isForestGreenTheme(theme),\n      isScreenModeDark: isScreenModeDark(theme, screenMode),\n      className: getThemeClassName(theme, screenMode),\n      setTheme,\n      setScreenMode,\n    }),\n    [theme, screenMode, setTheme, setScreenMode],\n  );\n};\n"],"names":["FALLBACK_VALUES","theme","DEFAULT_BASE_THEME","screenMode","DEFAULT_SCREEN_MODE","setTheme","setScreenMode","isNotProduction","includes","window","location","hostname","useTheme","theming","useContext","ThemeContext","console","warn","useMemo","isModern","isThemeModern","isForestGreenTheme","isScreenModeDark","className","getThemeClassName"],"mappings":";;;;;;;AAqBA,MAAMA,eAAe,GAAG;AACtBC,EAAAA,KAAK,EAAEC,yBAAkB;AACzBC,EAAAA,UAAU,EAAEC,0BAAmB;AAC/BC,EAAAA,QAAQ,EAAEA,MAAK,CAAE,CAAC;EAClBC,aAAa,EAAEA,MAAK,CAAE;CACd;AAEV,MAAMC,eAAe,GAAGA,MAAK;EAC3B,IAAI;AACF,IAAA,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACC,MAAM,CAACC,QAAQ,CAACC,QAAQ,CAAC;AACtE,EAAA,CAAC,CAAC,MAAM;AACN,IAAA,OAAO,KAAK;AACd,EAAA;AACF,CAAC;AAEM,MAAMC,QAAQ,GAAGA,MAAqB;AAC3C,EAAA,MAAMC,OAAO,GAAGC,gBAAU,CAACC,iCAAY,CAAC;AAExC,EAAA,IAAI,CAACF,OAAO,IAAIN,eAAe,EAAE,EAAE;AACjC;AACAS,IAAAA,OAAO,CAACC,IAAI,CAAC,0CAA0C,CAAC;AAC1D,EAAA;EAEA,MAAM;IAAEhB,KAAK;IAAEE,UAAU;IAAEE,QAAQ;AAAEC,IAAAA;GAAe,GAAGO,OAAO,IAAIb,eAAe;EAEjF,OAAOkB,aAAO,CACZ,OAAO;IACLjB,KAAK;IACLE,UAAU;AACV;;AAEG;AACHgB,IAAAA,QAAQ,EAAEC,qBAAa,CAAM,CAAC;AAC9BC,IAAAA,kBAAkB,EAAEA,0BAAkB,CAACpB,KAAK,CAAC;AAC7CqB,IAAAA,gBAAgB,EAAEA,wBAAgB,CAACrB,KAAK,EAAEE,UAAU,CAAC;AACrDoB,IAAAA,SAAS,EAAEC,yBAAiB,CAACvB,KAAK,EAAEE,UAAU,CAAC;IAC/CE,QAAQ;AACRC,IAAAA;GACD,CAAC,EACF,CAACL,KAAK,EAAEE,UAAU,EAAEE,QAAQ,EAAEC,aAAa,CAAC,CAC7C;AACH;;;;"}

package/dist/useTheme.mjs

@@ -24,15 +24,17 @@ const useTheme = () => {
   }
   const {
     theme,
-    screenMode: contextScreenMode,
+    screenMode,
     setTheme,
     setScreenMode
   } = theming ?? FALLBACK_VALUES;
-  const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;
   return useMemo(() => ({
     theme,
     screenMode,
-    isModern: isThemeModern(theme),
+    /**
+     * @deprecated there is no more such thing as "modern" theme
+     */
+    isModern: isThemeModern(),
     isForestGreenTheme: isForestGreenTheme(theme),
     isScreenModeDark: isScreenModeDark(theme, screenMode),
     className: getThemeClassName(theme, screenMode),

package/dist/useTheme.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.mjs","sources":["../src/useTheme.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProviderContext';\nimport type { ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n  theme: NonNullable<Theming['theme']>;\n  screenMode: ScreenMode;\n  isModern: boolean;\n  isForestGreenTheme: boolean;\n  isScreenModeDark: boolean;\n  className: string;\n  setTheme: (theme: NonNullable<Theming['theme']>) => void;\n  setScreenMode: (screenMode: ScreenMode) => void;\n}\n\nconst FALLBACK_VALUES = {\n  theme: DEFAULT_BASE_THEME,\n  screenMode: DEFAULT_SCREEN_MODE,\n  setTheme: () => {},\n  setScreenMode: () => {},\n} as const;\n\nconst isNotProduction = () => {\n  try {\n    return ['localhost', 'dev-wi.se'].includes(window.location.hostname);\n  } catch {\n    return false;\n  }\n};\n\nexport const useTheme = (): ThemeHookValue => {\n  const theming = useContext(ThemeContext);\n\n  if (!theming && isNotProduction()) {\n    // eslint-disable-next-line no-console\n    console.warn('Call to useTheme outside a ThemeProvider');\n  }\n\n  const {\n    theme,\n    screenMode: contextScreenMode,\n    setTheme,\n    setScreenMode,\n  } = theming ?? FALLBACK_VALUES;\n\n  const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;\n\n  return useMemo(\n    () => ({\n      theme,\n      screenMode,\n      isModern: isThemeModern(theme),\n      isForestGreenTheme: isForestGreenTheme(theme),\n      isScreenModeDark: isScreenModeDark(theme, screenMode),\n      className: getThemeClassName(theme, screenMode),\n      setTheme,\n      setScreenMode,\n    }),\n    [theme, screenMode, setTheme, setScreenMode],\n  );\n};\n"],"names":["FALLBACK_VALUES","theme","DEFAULT_BASE_THEME","screenMode","DEFAULT_SCREEN_MODE","setTheme","setScreenMode","isNotProduction","includes","window","location","hostname","useTheme","theming","useContext","ThemeContext","console","warn","contextScreenMode","useMemo","isModern","isThemeModern","isForestGreenTheme","isScreenModeDark","className","getThemeClassName"],"mappings":";;;;;AAkBA,MAAMA,eAAe,GAAG;AACtBC,EAAAA,KAAK,EAAEC,kBAAkB;AACzBC,EAAAA,UAAU,EAAEC,mBAAmB;AAC/BC,EAAAA,QAAQ,EAAEA,MAAK,CAAE,CAAC;EAClBC,aAAa,EAAEA,MAAK,CAAE;CACd;AAEV,MAAMC,eAAe,GAAGA,MAAK;EAC3B,IAAI;AACF,IAAA,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACC,MAAM,CAACC,QAAQ,CAACC,QAAQ,CAAC;AACtE,EAAA,CAAC,CAAC,MAAM;AACN,IAAA,OAAO,KAAK;AACd,EAAA;AACF,CAAC;AAEM,MAAMC,QAAQ,GAAGA,MAAqB;AAC3C,EAAA,MAAMC,OAAO,GAAGC,UAAU,CAACC,YAAY,CAAC;AAExC,EAAA,IAAI,CAACF,OAAO,IAAIN,eAAe,EAAE,EAAE;AACjC;AACAS,IAAAA,OAAO,CAACC,IAAI,CAAC,0CAA0C,CAAC;AAC1D,EAAA;EAEA,MAAM;IACJhB,KAAK;AACLE,IAAAA,UAAU,EAAEe,iBAAiB;IAC7Bb,QAAQ;AACRC,IAAAA;GACD,GAAGO,OAAO,IAAIb,eAAe;EAE9B,MAAMG,UAAU,GAAGF,KAAK,KAAKC,kBAAkB,GAAGE,mBAAmB,GAAGc,iBAAiB;EAEzF,OAAOC,OAAO,CACZ,OAAO;IACLlB,KAAK;IACLE,UAAU;AACViB,IAAAA,QAAQ,EAAEC,aAAa,CAACpB,KAAK,CAAC;AAC9BqB,IAAAA,kBAAkB,EAAEA,kBAAkB,CAACrB,KAAK,CAAC;AAC7CsB,IAAAA,gBAAgB,EAAEA,gBAAgB,CAACtB,KAAK,EAAEE,UAAU,CAAC;AACrDqB,IAAAA,SAAS,EAAEC,iBAAiB,CAACxB,KAAK,EAAEE,UAAU,CAAC;IAC/CE,QAAQ;AACRC,IAAAA;GACD,CAAC,EACF,CAACL,KAAK,EAAEE,UAAU,EAAEE,QAAQ,EAAEC,aAAa,CAAC,CAC7C;AACH;;;;"}
+{"version":3,"file":"useTheme.mjs","sources":["../src/useTheme.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProviderContext';\nimport type { ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n  theme: NonNullable<Theming['theme']>;\n  screenMode: ScreenMode;\n  /**\n   * @deprecated there is no more such thing as \"modern\" theme\n   */\n  isModern: boolean;\n  isForestGreenTheme: boolean;\n  isScreenModeDark: boolean;\n  className: string;\n  setTheme: (theme: NonNullable<Theming['theme']>) => void;\n  setScreenMode: (screenMode: ScreenMode) => void;\n}\n\nconst FALLBACK_VALUES = {\n  theme: DEFAULT_BASE_THEME,\n  screenMode: DEFAULT_SCREEN_MODE,\n  setTheme: () => {},\n  setScreenMode: () => {},\n} as const;\n\nconst isNotProduction = () => {\n  try {\n    return ['localhost', 'dev-wi.se'].includes(window.location.hostname);\n  } catch {\n    return false;\n  }\n};\n\nexport const useTheme = (): ThemeHookValue => {\n  const theming = useContext(ThemeContext);\n\n  if (!theming && isNotProduction()) {\n    // eslint-disable-next-line no-console\n    console.warn('Call to useTheme outside a ThemeProvider');\n  }\n\n  const { theme, screenMode, setTheme, setScreenMode } = theming ?? FALLBACK_VALUES;\n\n  return useMemo(\n    () => ({\n      theme,\n      screenMode,\n      /**\n       * @deprecated there is no more such thing as \"modern\" theme\n       */\n      isModern: isThemeModern(theme),\n      isForestGreenTheme: isForestGreenTheme(theme),\n      isScreenModeDark: isScreenModeDark(theme, screenMode),\n      className: getThemeClassName(theme, screenMode),\n      setTheme,\n      setScreenMode,\n    }),\n    [theme, screenMode, setTheme, setScreenMode],\n  );\n};\n"],"names":["FALLBACK_VALUES","theme","DEFAULT_BASE_THEME","screenMode","DEFAULT_SCREEN_MODE","setTheme","setScreenMode","isNotProduction","includes","window","location","hostname","useTheme","theming","useContext","ThemeContext","console","warn","useMemo","isModern","isThemeModern","isForestGreenTheme","isScreenModeDark","className","getThemeClassName"],"mappings":";;;;;AAqBA,MAAMA,eAAe,GAAG;AACtBC,EAAAA,KAAK,EAAEC,kBAAkB;AACzBC,EAAAA,UAAU,EAAEC,mBAAmB;AAC/BC,EAAAA,QAAQ,EAAEA,MAAK,CAAE,CAAC;EAClBC,aAAa,EAAEA,MAAK,CAAE;CACd;AAEV,MAAMC,eAAe,GAAGA,MAAK;EAC3B,IAAI;AACF,IAAA,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACC,MAAM,CAACC,QAAQ,CAACC,QAAQ,CAAC;AACtE,EAAA,CAAC,CAAC,MAAM;AACN,IAAA,OAAO,KAAK;AACd,EAAA;AACF,CAAC;AAEM,MAAMC,QAAQ,GAAGA,MAAqB;AAC3C,EAAA,MAAMC,OAAO,GAAGC,UAAU,CAACC,YAAY,CAAC;AAExC,EAAA,IAAI,CAACF,OAAO,IAAIN,eAAe,EAAE,EAAE;AACjC;AACAS,IAAAA,OAAO,CAACC,IAAI,CAAC,0CAA0C,CAAC;AAC1D,EAAA;EAEA,MAAM;IAAEhB,KAAK;IAAEE,UAAU;IAAEE,QAAQ;AAAEC,IAAAA;GAAe,GAAGO,OAAO,IAAIb,eAAe;EAEjF,OAAOkB,OAAO,CACZ,OAAO;IACLjB,KAAK;IACLE,UAAU;AACV;;AAEG;AACHgB,IAAAA,QAAQ,EAAEC,aAAa,CAAM,CAAC;AAC9BC,IAAAA,kBAAkB,EAAEA,kBAAkB,CAACpB,KAAK,CAAC;AAC7CqB,IAAAA,gBAAgB,EAAEA,gBAAgB,CAACrB,KAAK,EAAEE,UAAU,CAAC;AACrDoB,IAAAA,SAAS,EAAEC,iBAAiB,CAACvB,KAAK,EAAEE,UAAU,CAAC;IAC/CE,QAAQ;AACRC,IAAAA;GACD,CAAC,EACF,CAACL,KAAK,EAAEE,UAAU,EAAEE,QAAQ,EAAEC,aAAa,CAAC,CAC7C;AACH;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/components-theming",
-  "version": "1.9.3",
+  "version": "1.10.0",
   "description": "Provides theming support for the Wise Design system components",
   "license": "Apache-2.0",
   "keywords": [

package/src/ThemeProvider.spec.tsx

@@ -4,25 +4,60 @@ import { ThemeProvider, ThemeProviderProps } from './ThemeProvider';
 import { useState } from 'react';
 
 describe('ThemeProvider', () => {
-  it('can nest theme providers', () => {
+  it('tests root provider set root theme (on html element) and it is not affected by nested provider(s)', () => {
+    render(
+      <ThemeProvider theme="personal" screenMode="dark">
+        <div>root-dark-theme</div>
+        <ThemeProvider theme="forest-green">
+          <div>nested-forest-green</div>
+        </ThemeProvider>
+        <ThemeProvider theme="personal" screenMode="light">
+          <div>nested-personal</div>
+        </ThemeProvider>
+      </ThemeProvider>,
+    );
+
+    // root provider set dark theme and it wasn't changed by two nested providers
+    expect(document.documentElement).toHaveClass('np-theme-personal np-theme-personal--dark');
+
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(screen.getByText('root-dark-theme').parentElement).toHaveClass(
+      'np-theme-personal np-theme-personal--dark',
+    );
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(screen.getByText('nested-forest-green').parentElement).toHaveClass(
+      'np-theme-personal np-theme-personal--forest-green',
+    );
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(screen.getByText('nested-personal').parentElement).toHaveClass('np-theme-personal');
+  });
+
+  it('tests deprecated light theme normalization', () => {
     render(
       <ThemeProvider theme="light">
         <div>light</div>
         <ThemeProvider theme="personal">
           <div>personal</div>
-          <ThemeProvider theme="light">
-            <div>light</div>
-          </ThemeProvider>
+        </ThemeProvider>
+        <ThemeProvider theme="personal" screenMode="dark">
+          <div>personal-dark</div>
         </ThemeProvider>
       </ThemeProvider>,
     );
 
-    // The first provider will not have a className attached to it
-    expect(screen.getAllByText('light')[0]).not.toHaveClass('np-theme-light');
+    // root 'light' theme is normalized to 'personal'
+    expect(document.documentElement).toHaveClass('np-theme-personal');
+
+    // 'light' theme is normalized to 'personal'
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(screen.getByText('light').parentElement).toHaveClass('np-theme-personal');
     // eslint-disable-next-line testing-library/no-node-access
     expect(screen.getByText('personal').parentElement).toHaveClass('np-theme-personal');
     // eslint-disable-next-line testing-library/no-node-access
-    expect(screen.getAllByText('light')[1].parentElement).toHaveClass('np-theme-light');
+    expect(screen.getByText('personal-dark').parentElement).toHaveClass(
+      'np-theme-personal',
+      'np-theme-personal--dark',
+    );
   });
 
   it('updates theming setting based of props updates', async () => {
@@ -137,20 +172,4 @@ describe('ThemeProvider', () => {
       'np-theme-business--forest-green',
     );
   });
-
-  it('matches snapshot', () => {
-    const { asFragment } = render(
-      <ThemeProvider theme="light">
-        <div>light</div>
-        <ThemeProvider theme="personal">
-          <div>personal</div>
-          <ThemeProvider theme="light">
-            <div>light</div>
-          </ThemeProvider>
-        </ThemeProvider>
-      </ThemeProvider>,
-    );
-
-    expect(asFragment()).toMatchSnapshot();
-  });
 });

package/src/ThemeProvider.tsx

@@ -3,7 +3,7 @@ import { PropsWithChildren, useContext, useEffect, useMemo, useState } from 'rea
 import { ThemedChildren } from './ThemedChildren';
 import type { Theming } from './const';
 import { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';
-import { getThemeClassName } from './helpers';
+import { getThemeClassName, normalizeTheme } from './helpers';
 import { ThemeContext } from './ThemeProviderContext';
 
 export type ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };
@@ -14,17 +14,16 @@ const themeClass = /\bnp-theme-[a-z-]+\b/g;
 export const ThemeProvider = ({
   theme: initialTheme = DEFAULT_BASE_THEME,
   screenMode: initialScreenMode = DEFAULT_SCREEN_MODE,
-  isNotRootProvider = false,
   children,
   className = undefined,
 }: ThemeProviderProps) => {
   const isContextRoot = useContext(ThemeContext) === undefined;
-  const [theme, setTheme] = useState(initialTheme);
+  const [theme, setTheme] = useState(normalizeTheme(initialTheme));
   const [screenMode, setScreenMode] = useState(initialScreenMode);
 
   // Update state when props change (for controlled usage)
   useEffect(() => {
-    setTheme(initialTheme);
+    setTheme(normalizeTheme(initialTheme));
   }, [initialTheme]);
 
   useEffect(() => {
@@ -33,7 +32,7 @@ export const ThemeProvider = ({
 
   // useEffect hook used to apply the theme class to the HTML element
   useEffect(() => {
-    if (!isNotRootProvider && isContextRoot) {
+    if (isContextRoot) {
       // Remove all the theme classes from the documentElement
       document.documentElement.className.match(themeClass)?.forEach((item) => {
         document.documentElement.classList.remove(item);
@@ -44,7 +43,7 @@ export const ThemeProvider = ({
           document.documentElement.classList.add(item);
         });
     }
-  }, [isNotRootProvider, isContextRoot, theme, screenMode]);
+  }, [isContextRoot, theme, screenMode]);
 
   const contextValue = useMemo(
     () => ({ theme, screenMode, setTheme, setScreenMode }),

package/src/const.ts

@@ -2,6 +2,9 @@
 export const baseThemes = ['light', 'personal', 'business'] as const;
 export const extraThemes = ['forest-green', 'bright-green'] as const;
 export const screenModes = ['light', 'dark'] as const;
+/**
+ * @deprecated "modern" theme is released, you should not need check for "modern" theme anymore
+ */
 export const modernThemes = [baseThemes[1], baseThemes[2], ...extraThemes] as const;
 export const businessThemes = [
   'business',
@@ -12,6 +15,9 @@ export const platformThemes = ['platform', 'platform--forest-green'] as const;
 
 // TODO: componentThemes returned back for backward compatibility, refactor this place in the future
 export type ComponentTheme = (typeof baseThemes)[number];
+/**
+ * @deprecated "modern" theme is released, you should not need check for "modern" theme anymore
+ */
 export type ModernTheme = (typeof modernThemes)[number];
 export type BaseTheme = (typeof baseThemes)[number];
 export type ExtraTheme = (typeof extraThemes)[number];
@@ -24,7 +30,7 @@ export type BusinessTheme = (typeof businessThemes)[0];
 export type BusinessForestGreenTheme = (typeof businessThemes)[1];
 export type BusinessBrightGreenTheme = (typeof businessThemes)[2];
 
-export const DEFAULT_BASE_THEME = 'light';
+export const DEFAULT_BASE_THEME = 'personal';
 export const DEFAULT_SCREEN_MODE = 'light';
 
 export type Theming = {
@@ -38,5 +44,8 @@ export type Theming = {
     | PlatformTheme
     | PlatformForestGreenTheme;
   screenMode?: ScreenMode;
+  /**
+   * @deprecated this property has not effect, safe to delete
+   */
   isNotRootProvider?: boolean | undefined;
 };

package/src/helpers.ts

@@ -8,8 +8,10 @@ import type {
 } from './const';
 import { extraThemes, screenModes, modernThemes } from './const';
 
-export const isThemeModern = (theme: NonNullable<Theming['theme']>): theme is ModernTheme =>
-  modernThemes.includes(theme as ModernTheme);
+/**
+ * @deprecated "modern" theme is released, you should not need check for "modern" theme anymore
+ */
+export const isThemeModern = (theme: NonNullable<Theming['theme']>): theme is ModernTheme => true;
 
 export const isExtraTheme = (theme: NonNullable<Theming['theme']>): theme is ExtraTheme =>
   extraThemes.includes(theme as ExtraTheme);
@@ -21,14 +23,9 @@ export const isForestGreenTheme = (
 export const isScreenModeDark = (
   theme: NonNullable<Theming['theme']>,
   screenMode: ScreenMode,
-): screenMode is ScreenModeDark =>
-  isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;
+): screenMode is ScreenModeDark => screenModes[1] === screenMode;
 
 export const getThemeClassName = (theme: NonNullable<Theming['theme']>, screenMode: ScreenMode) => {
-  if (['light'].includes(theme)) {
-    return `np-theme-${theme}`;
-  }
-
   // Personal light is always there by default
   const themeClasses = ['np-theme-personal'];
 
@@ -64,3 +61,7 @@ export const getThemeClassName = (theme: NonNullable<Theming['theme']>, screenMo
   /* eslint-enable functional/immutable-data */
   return themeClasses.join(' ');
 };
+
+export const normalizeTheme = (
+  theme: NonNullable<Theming['theme']>,
+): NonNullable<Theming['theme']> => (theme === 'light' ? 'personal' : theme);

package/src/index.ts

@@ -1,6 +1,15 @@
 'use client';
 
-export type { ComponentTheme, BaseTheme, ExtraTheme, ScreenMode, Theming } from './const';
+export type {
+  ComponentTheme,
+  BaseTheme,
+  ExtraTheme,
+  ScreenMode,
+  Theming,
+  DEFAULT_BASE_THEME,
+  DEFAULT_SCREEN_MODE,
+} from './const';
+
 export {
   isThemeModern,
   isExtraTheme,

package/src/useTheme.spec.tsx

@@ -15,10 +15,10 @@ describe('useTheme', () => {
     expect(current).toMatchObject({
       theme: DEFAULT_BASE_THEME,
       screenMode: DEFAULT_SCREEN_MODE,
-      isModern: false,
+      isModern: true,
       isForestGreenTheme: false,
       isScreenModeDark: false,
-      className: 'np-theme-light',
+      className: 'np-theme-personal',
     });
     expect(current.setTheme).toBeInstanceOf(Function);
     expect(current.setScreenMode).toBeInstanceOf(Function);
@@ -83,20 +83,39 @@ describe('useTheme', () => {
     expect(current.setScreenMode).toBeInstanceOf(Function);
   });
 
-  it('returns default screen mode if used default light theme', () => {
+  it('returns default screen mode if used light theme', () => {
     const {
       result: { current },
     } = renderHook(() => useTheme(), {
-      wrapper: (props) => <ThemeProvider theme={DEFAULT_BASE_THEME} screenMode="dark" {...props} />,
+      wrapper: (props) => <ThemeProvider theme="light" {...props} />,
     });
 
     expect(current).toMatchObject({
       theme: DEFAULT_BASE_THEME,
       screenMode: DEFAULT_SCREEN_MODE,
-      isModern: false,
+      isModern: true,
       isForestGreenTheme: false,
       isScreenModeDark: false,
-      className: 'np-theme-light',
+      className: 'np-theme-personal',
+    });
+    expect(current.setTheme).toBeInstanceOf(Function);
+    expect(current.setScreenMode).toBeInstanceOf(Function);
+  });
+
+  it('returns dark screen mode if used light theme + dark screen mode', () => {
+    const {
+      result: { current },
+    } = renderHook(() => useTheme(), {
+      wrapper: (props) => <ThemeProvider theme="light" screenMode="dark" {...props} />,
+    });
+
+    expect(current).toMatchObject({
+      theme: DEFAULT_BASE_THEME,
+      screenMode: 'dark',
+      isModern: true,
+      isForestGreenTheme: false,
+      isScreenModeDark: true,
+      className: 'np-theme-personal np-theme-personal--dark',
     });
     expect(current.setTheme).toBeInstanceOf(Function);
     expect(current.setScreenMode).toBeInstanceOf(Function);
@@ -137,10 +156,10 @@ describe('useTheme', () => {
     expect(productionValue).toMatchObject({
       theme: DEFAULT_BASE_THEME,
       screenMode: DEFAULT_SCREEN_MODE,
-      isModern: false,
+      isModern: true,
       isForestGreenTheme: false,
       isScreenModeDark: false,
-      className: 'np-theme-light',
+      className: 'np-theme-personal',
     });
     expect(productionValue.setTheme).toBeInstanceOf(Function);
     expect(productionValue.setScreenMode).toBeInstanceOf(Function);
@@ -162,10 +181,10 @@ describe('useTheme', () => {
     expect(stagingValue).toMatchObject({
       theme: DEFAULT_BASE_THEME,
       screenMode: DEFAULT_SCREEN_MODE,
-      isModern: false,
+      isModern: true,
       isForestGreenTheme: false,
       isScreenModeDark: false,
-      className: 'np-theme-light',
+      className: 'np-theme-personal',
     });
     expect(stagingValue.setTheme).toBeInstanceOf(Function);
     expect(stagingValue.setScreenMode).toBeInstanceOf(Function);
@@ -187,10 +206,10 @@ describe('useTheme', () => {
     expect(localhostValue).toMatchObject({
       theme: DEFAULT_BASE_THEME,
       screenMode: DEFAULT_SCREEN_MODE,
-      isModern: false,
+      isModern: true,
       isForestGreenTheme: false,
       isScreenModeDark: false,
-      className: 'np-theme-light',
+      className: 'np-theme-personal',
     });
     expect(localhostValue.setTheme).toBeInstanceOf(Function);
     expect(localhostValue.setScreenMode).toBeInstanceOf(Function);
@@ -210,10 +229,10 @@ describe('useTheme', () => {
     expect(noHostnameValue).toMatchObject({
       theme: DEFAULT_BASE_THEME,
       screenMode: DEFAULT_SCREEN_MODE,
-      isModern: false,
+      isModern: true,
       isForestGreenTheme: false,
       isScreenModeDark: false,
-      className: 'np-theme-light',
+      className: 'np-theme-personal',
     });
     expect(noHostnameValue.setTheme).toBeInstanceOf(Function);
     expect(noHostnameValue.setScreenMode).toBeInstanceOf(Function);

package/src/useTheme.ts

@@ -8,6 +8,9 @@ import { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName
 interface ThemeHookValue {
   theme: NonNullable<Theming['theme']>;
   screenMode: ScreenMode;
+  /**
+   * @deprecated there is no more such thing as "modern" theme
+   */
   isModern: boolean;
   isForestGreenTheme: boolean;
   isScreenModeDark: boolean;
@@ -39,19 +42,15 @@ export const useTheme = (): ThemeHookValue => {
     console.warn('Call to useTheme outside a ThemeProvider');
   }
 
-  const {
-    theme,
-    screenMode: contextScreenMode,
-    setTheme,
-    setScreenMode,
-  } = theming ?? FALLBACK_VALUES;
-
-  const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;
+  const { theme, screenMode, setTheme, setScreenMode } = theming ?? FALLBACK_VALUES;
 
   return useMemo(
     () => ({
       theme,
       screenMode,
+      /**
+       * @deprecated there is no more such thing as "modern" theme
+       */
       isModern: isThemeModern(theme),
       isForestGreenTheme: isForestGreenTheme(theme),
       isScreenModeDark: isScreenModeDark(theme, screenMode),

package/src/__snapshots__/ThemeProvider.spec.tsx.snap

@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`ThemeProvider matches snapshot 1`] = `
-<DocumentFragment>
-  <div
-    class="np-theme-light"
-  >
-    <div>
-      light
-    </div>
-    <div
-      class="np-theme-personal"
-    >
-      <div>
-        personal
-      </div>
-      <div
-        class="np-theme-light"
-      >
-        <div>
-          light
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;