@wise/components-theming 1.10.0 → 1.10.2

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, children, className, }: ThemeProviderProps) => import("react").JSX.Element;
+export declare const ThemeProvider: ({ theme: initialTheme, screenMode: initialScreenMode, isNotRootProvider: isLocal, 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,8EAK3B,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,0GAM3B,kBAAkB,gCAuCpB,CAAC"}

package/dist/ThemeProvider.js

@@ -11,6 +11,7 @@ const themeClass = /\bnp-theme-[a-z-]+\b/g;
 const ThemeProvider = ({
   theme: initialTheme = _const.DEFAULT_BASE_THEME,
   screenMode: initialScreenMode = _const.DEFAULT_SCREEN_MODE,
+  isNotRootProvider: isLocal = false,
   children,
   className = undefined
 }) => {
@@ -26,7 +27,7 @@ const ThemeProvider = ({
   }, [initialScreenMode]);
   // useEffect hook used to apply the theme class to the HTML element
   react.useEffect(() => {
-    if (isContextRoot) {
+    if (!isLocal && isContextRoot) {
       // Remove all the theme classes from the documentElement
       document.documentElement.className.match(themeClass)?.forEach(item => {
         document.documentElement.classList.remove(item);
@@ -35,7 +36,7 @@ const ThemeProvider = ({
         document.documentElement.classList.add(item);
       });
     }
-  }, [isContextRoot, theme, screenMode]);
+  }, [isLocal, 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, 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;;;;"}
+{"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  isNotRootProvider: isLocal = false,\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 (!isLocal && 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  }, [isLocal, 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","isLocal","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,iBAAiB,EAAEC,OAAO,GAAG,KAAK;EAClCC,QAAQ;AACRC,EAAAA,SAAS,GAAGC;AAAS,CACF,KAAI;AACvB,EAAA,MAAMC,aAAa,GAAGC,gBAAU,CAACC,iCAAY,CAAC,KAAKH,SAAS;AAC5D,EAAA,MAAM,CAACV,KAAK,EAAEc,QAAQ,CAAC,GAAGC,cAAQ,CAACC,sBAAc,CAACf,YAAY,CAAC,CAAC;EAChE,MAAM,CAACE,UAAU,EAAEc,aAAa,CAAC,GAAGF,cAAQ,CAACX,iBAAiB,CAAC;AAE/D;AACAc,EAAAA,eAAS,CAAC,MAAK;AACbJ,IAAAA,QAAQ,CAACE,sBAAc,CAACf,YAAY,CAAC,CAAC;AACxC,EAAA,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;AAElBiB,EAAAA,eAAS,CAAC,MAAK;IACbD,aAAa,CAACb,iBAAiB,CAAC;AAClC,EAAA,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;AAEvB;AACAc,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAI,CAACX,OAAO,IAAII,aAAa,EAAE;AAC7B;AACAQ,MAAAA,QAAQ,CAACC,eAAe,CAACX,SAAS,CAACY,KAAK,CAACvB,UAAU,CAAC,EAAEwB,OAAO,CAAEC,IAAI,IAAI;QACrEJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACC,MAAM,CAACF,IAAI,CAAC;AACjD,MAAA,CAAC,CAAC;AACFG,MAAAA,yBAAiB,CAAC1B,KAAK,EAAEG,UAAU,CAAC,CACjCwB,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,CAAChB,OAAO,EAAEI,aAAa,EAAEX,KAAK,EAAEG,UAAU,CAAC,CAAC;AAE/C,EAAA,MAAM0B,YAAY,GAAGC,aAAO,CAC1B,OAAO;IAAE9B,KAAK;IAAEG,UAAU;IAAEW,QAAQ;AAAEG,IAAAA;GAAe,CAAC,EACtD,CAACjB,KAAK,EAAEG,UAAU,EAAEW,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,6 +1,6 @@
 import { useContext, useState, useEffect, useMemo } from 'react';
 import { ThemedChildren } from './ThemedChildren.mjs';
-import { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const.mjs';
+import { DEFAULT_SCREEN_MODE, DEFAULT_BASE_THEME } from './const.mjs';
 import { normalizeTheme, getThemeClassName } from './helpers.mjs';
 import { ThemeContext } from './ThemeProviderContext.mjs';
 import { jsx } from 'react/jsx-runtime';
@@ -9,6 +9,7 @@ const themeClass = /\bnp-theme-[a-z-]+\b/g;
 const ThemeProvider = ({
   theme: initialTheme = DEFAULT_BASE_THEME,
   screenMode: initialScreenMode = DEFAULT_SCREEN_MODE,
+  isNotRootProvider: isLocal = false,
   children,
   className = undefined
 }) => {
@@ -24,7 +25,7 @@ const ThemeProvider = ({
   }, [initialScreenMode]);
   // useEffect hook used to apply the theme class to the HTML element
   useEffect(() => {
-    if (isContextRoot) {
+    if (!isLocal && isContextRoot) {
       // Remove all the theme classes from the documentElement
       document.documentElement.className.match(themeClass)?.forEach(item => {
         document.documentElement.classList.remove(item);
@@ -33,7 +34,7 @@ const ThemeProvider = ({
         document.documentElement.classList.add(item);
       });
     }
-  }, [isContextRoot, theme, screenMode]);
+  }, [isLocal, 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, 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;;;;"}
+{"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  isNotRootProvider: isLocal = false,\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 (!isLocal && 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  }, [isLocal, 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","isLocal","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,iBAAiB,EAAEC,OAAO,GAAG,KAAK;EAClCC,QAAQ;AACRC,EAAAA,SAAS,GAAGC;AAAS,CACF,KAAI;AACvB,EAAA,MAAMC,aAAa,GAAGC,UAAU,CAACC,YAAY,CAAC,KAAKH,SAAS;AAC5D,EAAA,MAAM,CAACV,KAAK,EAAEc,QAAQ,CAAC,GAAGC,QAAQ,CAACC,cAAc,CAACf,YAAY,CAAC,CAAC;EAChE,MAAM,CAACE,UAAU,EAAEc,aAAa,CAAC,GAAGF,QAAQ,CAACX,iBAAiB,CAAC;AAE/D;AACAc,EAAAA,SAAS,CAAC,MAAK;AACbJ,IAAAA,QAAQ,CAACE,cAAc,CAACf,YAAY,CAAC,CAAC;AACxC,EAAA,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;AAElBiB,EAAAA,SAAS,CAAC,MAAK;IACbD,aAAa,CAACb,iBAAiB,CAAC;AAClC,EAAA,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;AAEvB;AACAc,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAI,CAACX,OAAO,IAAII,aAAa,EAAE;AAC7B;AACAQ,MAAAA,QAAQ,CAACC,eAAe,CAACX,SAAS,CAACY,KAAK,CAACvB,UAAU,CAAC,EAAEwB,OAAO,CAAEC,IAAI,IAAI;QACrEJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACC,MAAM,CAACF,IAAI,CAAC;AACjD,MAAA,CAAC,CAAC;AACFG,MAAAA,iBAAiB,CAAC1B,KAAK,EAAEG,UAAU,CAAC,CACjCwB,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,CAAChB,OAAO,EAAEI,aAAa,EAAEX,KAAK,EAAEG,UAAU,CAAC,CAAC;AAE/C,EAAA,MAAM0B,YAAY,GAAGC,OAAO,CAC1B,OAAO;IAAE9B,KAAK;IAAEG,UAAU;IAAEW,QAAQ;AAAEG,IAAAA;GAAe,CAAC,EACtD,CAACjB,KAAK,EAAEG,UAAU,EAAEW,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

@@ -28,7 +28,15 @@ export type Theming = {
     theme?: ComponentTheme | BaseTheme | ExtraTheme | BusinessTheme | BusinessForestGreenTheme | BusinessBrightGreenTheme | PlatformTheme | PlatformForestGreenTheme;
     screenMode?: ScreenMode;
     /**
-     * @deprecated this property has not effect, safe to delete
+     * **global / root theme provider** - one that sets theming globally (at `html` element) + locally (over children);
+     *
+     * **not root provider / local provider** - one that sets theming only locally (over children)
+     *
+     * note: in most cases you won't need this property
+     *
+     * use this property to explicitly define local themes when components in components package set local themes
+     * while their global theme provider in defined somewhere far / or even unknown (e.g in another consumer package or different repos)
+     * so to avoid global theming misconfiguration you can protect it with this property
      */
     isNotRootProvider?: boolean | undefined;
 };

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;;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"}
+{"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;;;;;;;;;;OAUG;IACH,iBAAiB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACzC,CAAC"}

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;\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;;;;;;;"}
+{"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   * **global / root theme provider** - one that sets theming globally (at `html` element) + locally (over children);\n   *\n   * **not root provider / local provider** - one that sets theming only locally (over children)\n   *\n   * note: in most cases you won't need this property\n   *\n   * use this property to explicitly define local themes when components in components package set local themes\n   * while their global theme provider in defined somewhere far / or even unknown (e.g in another consumer package or different repos)\n   * so to avoid global theming misconfiguration you can protect it with this property\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.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;\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;;;;"}
+{"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   * **global / root theme provider** - one that sets theming globally (at `html` element) + locally (over children);\n   *\n   * **not root provider / local provider** - one that sets theming only locally (over children)\n   *\n   * note: in most cases you won't need this property\n   *\n   * use this property to explicitly define local themes when components in components package set local themes\n   * while their global theme provider in defined somewhere far / or even unknown (e.g in another consumer package or different repos)\n   * so to avoid global theming misconfiguration you can protect it with this property\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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/components-theming",
-  "version": "1.10.0",
+  "version": "1.10.2",
   "description": "Provides theming support for the Wise Design system components",
   "license": "Apache-2.0",
   "keywords": [
@@ -12,30 +12,30 @@
     "url": "git+https://github.com/transferwise/neptune-web.git"
   },
   "dependencies": {
-    "@babel/runtime": "^7.28.4",
+    "@babel/runtime": "^7.29.2",
     "clsx": "^2.1.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.5",
-    "@babel/plugin-transform-runtime": "^7.28.5",
-    "@babel/preset-env": "^7.28.5",
+    "@babel/core": "^7.29.0",
+    "@babel/plugin-transform-runtime": "^7.29.0",
+    "@babel/preset-env": "^7.29.3",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
-    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-babel": "^7.0.0",
     "@rollup/plugin-typescript": "^12.3.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.1",
+    "@testing-library/react": "^16.3.2",
     "@tsconfig/recommended": "^1.0.13",
     "@types/babel__core": "^7.20.5",
     "@types/jest": "^30.0.0",
-    "@types/react": "^18.3.23",
+    "@types/react": "^18.3.28",
     "@types/react-dom": "^18.3.7",
     "@wise/eslint-config": "^13.3.0",
-    "eslint": "^9.39.2",
-    "jest": "^30.2.0",
+    "eslint": "^9.39.4",
+    "jest": "^30.3.0",
     "jest-environment-jsdom": "^29.7.0",
-    "rollup": "^4.54.0",
+    "rollup": "^4.60.2",
     "rollup-preserve-directives": "^1.1.3",
     "@wise/wds-configs": "0.0.0"
   },

package/src/{ThemeProvider.spec.tsx → ThemeProvider.test.tsx}

@@ -1,9 +1,29 @@
-import { render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 
 import { ThemeProvider, ThemeProviderProps } from './ThemeProvider';
 import { useState } from 'react';
 
 describe('ThemeProvider', () => {
+  it('tests local theme provider (isNotRootProvider) has not affect on root theme (on html element)', () => {
+    render(
+      <ThemeProvider theme="personal" screenMode="dark" isNotRootProvider>
+        <div>local-theme-provider</div>
+      </ThemeProvider>,
+    );
+
+    // global theme isn't affected (in this case isn't set)
+    expect(document.documentElement).not.toHaveClass(
+      'np-theme-personal',
+      'np-theme-personal--dark',
+    );
+
+    // only local theme being set
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(screen.getByText('local-theme-provider').parentElement).toHaveClass(
+      'np-theme-personal np-theme-personal--dark',
+    );
+  });
+
   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">
@@ -86,7 +106,7 @@ describe('ThemeProvider', () => {
     expect(screen.getByText('content').parentElement).toHaveClass('np-theme-personal');
 
     // Change to business theme
-    screen.getByText('Change to business').click();
+    fireEvent.click(screen.getByText('Change to business'));
     await waitFor(() => {
       // eslint-disable-next-line testing-library/no-node-access
       expect(screen.getByText('content').parentElement).toHaveClass(
@@ -96,7 +116,7 @@ describe('ThemeProvider', () => {
     });
 
     // Change to dark mode
-    screen.getByText('Change to dark').click();
+    fireEvent.click(screen.getByText('Change to dark'));
     await waitFor(() => {
       // eslint-disable-next-line testing-library/no-node-access
       expect(screen.getByText('content').parentElement).toHaveClass(

package/src/ThemeProvider.tsx

@@ -14,6 +14,7 @@ const themeClass = /\bnp-theme-[a-z-]+\b/g;
 export const ThemeProvider = ({
   theme: initialTheme = DEFAULT_BASE_THEME,
   screenMode: initialScreenMode = DEFAULT_SCREEN_MODE,
+  isNotRootProvider: isLocal = false,
   children,
   className = undefined,
 }: ThemeProviderProps) => {
@@ -32,7 +33,7 @@ export const ThemeProvider = ({
 
   // useEffect hook used to apply the theme class to the HTML element
   useEffect(() => {
-    if (isContextRoot) {
+    if (!isLocal && isContextRoot) {
       // Remove all the theme classes from the documentElement
       document.documentElement.className.match(themeClass)?.forEach((item) => {
         document.documentElement.classList.remove(item);
@@ -43,7 +44,7 @@ export const ThemeProvider = ({
           document.documentElement.classList.add(item);
         });
     }
-  }, [isContextRoot, theme, screenMode]);
+  }, [isLocal, isContextRoot, theme, screenMode]);
 
   const contextValue = useMemo(
     () => ({ theme, screenMode, setTheme, setScreenMode }),

package/src/const.ts

@@ -45,7 +45,15 @@ export type Theming = {
     | PlatformForestGreenTheme;
   screenMode?: ScreenMode;
   /**
-   * @deprecated this property has not effect, safe to delete
+   * **global / root theme provider** - one that sets theming globally (at `html` element) + locally (over children);
+   *
+   * **not root provider / local provider** - one that sets theming only locally (over children)
+   *
+   * note: in most cases you won't need this property
+   *
+   * use this property to explicitly define local themes when components in components package set local themes
+   * while their global theme provider in defined somewhere far / or even unknown (e.g in another consumer package or different repos)
+   * so to avoid global theming misconfiguration you can protect it with this property
    */
   isNotRootProvider?: boolean | undefined;
 };