@wise/components-theming 1.9.0 → 1.9.1

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,gCA8BpB,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,iGAM3B,kBAAkB,gCAuCpB,CAAC"}

package/dist/ThemeProvider.js

@@ -18,6 +18,13 @@ const ThemeProvider = ({
   const isContextRoot = react.useContext(ThemeProviderContext.ThemeContext) === undefined;
   const [theme, setTheme] = react.useState(initialTheme);
   const [screenMode, setScreenMode] = react.useState(initialScreenMode);
+  // Update state when props change (for controlled usage)
+  react.useEffect(() => {
+    setTheme(initialTheme);
+  }, [initialTheme]);
+  react.useEffect(() => {
+    setScreenMode(initialScreenMode);
+  }, [initialScreenMode]);
   // useEffect hook used to apply the theme class to the HTML element
   react.useEffect(() => {
     if (!isNotRootProvider && isContextRoot) {

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  // 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;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 } 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;;;;"}

package/dist/ThemeProvider.mjs

@@ -16,6 +16,13 @@ const ThemeProvider = ({
   const isContextRoot = useContext(ThemeContext) === undefined;
   const [theme, setTheme] = useState(initialTheme);
   const [screenMode, setScreenMode] = useState(initialScreenMode);
+  // Update state when props change (for controlled usage)
+  useEffect(() => {
+    setTheme(initialTheme);
+  }, [initialTheme]);
+  useEffect(() => {
+    setScreenMode(initialScreenMode);
+  }, [initialScreenMode]);
   // useEffect hook used to apply the theme class to the HTML element
   useEffect(() => {
     if (!isNotRootProvider && isContextRoot) {

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  // 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;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 } 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;;;;"}

package/package.json

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

package/src/ThemeProvider.spec.tsx

@@ -1,6 +1,7 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 
-import { ThemeProvider } from './ThemeProvider';
+import { ThemeProvider, ThemeProviderProps } from './ThemeProvider';
+import { useState } from 'react';
 
 describe('ThemeProvider', () => {
   it('can nest theme providers', () => {
@@ -24,6 +25,53 @@ describe('ThemeProvider', () => {
     expect(screen.getAllByText('light')[1].parentElement).toHaveClass('np-theme-light');
   });
 
+  it('updates theming setting based of props updates', async () => {
+    const TestComponent = () => {
+      const [theme, setTheme] = useState<ThemeProviderProps['theme']>('personal');
+      const [screenMode, setScreenMode] = useState<ThemeProviderProps['screenMode']>('light');
+
+      return (
+        <>
+          <button type="button" onClick={() => setTheme('business')}>
+            Change to business
+          </button>
+          <button type="button" onClick={() => setScreenMode('dark')}>
+            Change to dark
+          </button>
+          <ThemeProvider theme={theme} screenMode={screenMode}>
+            <div>content</div>
+          </ThemeProvider>
+        </>
+      );
+    };
+
+    render(<TestComponent />);
+
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(screen.getByText('content').parentElement).toHaveClass('np-theme-personal');
+
+    // Change to business theme
+    screen.getByText('Change to business').click();
+    await waitFor(() => {
+      // eslint-disable-next-line testing-library/no-node-access
+      expect(screen.getByText('content').parentElement).toHaveClass(
+        'np-theme-personal',
+        'np-theme-business',
+      );
+    });
+
+    // Change to dark mode
+    screen.getByText('Change to dark').click();
+    await waitFor(() => {
+      // eslint-disable-next-line testing-library/no-node-access
+      expect(screen.getByText('content').parentElement).toHaveClass(
+        'np-theme-personal',
+        'np-theme-business',
+        'np-theme-business--dark',
+      );
+    });
+  });
+
   it('sets platform themes', () => {
     render(
       <ThemeProvider theme="personal">

package/src/ThemeProvider.tsx

@@ -22,6 +22,15 @@ export const ThemeProvider = ({
   const [theme, setTheme] = useState(initialTheme);
   const [screenMode, setScreenMode] = useState(initialScreenMode);
 
+  // Update state when props change (for controlled usage)
+  useEffect(() => {
+    setTheme(initialTheme);
+  }, [initialTheme]);
+
+  useEffect(() => {
+    setScreenMode(initialScreenMode);
+  }, [initialScreenMode]);
+
   // useEffect hook used to apply the theme class to the HTML element
   useEffect(() => {
     if (!isNotRootProvider && isContextRoot) {