@wise/components-theming 0.0.0-experimental-c043dab → 0.0.0-experimental-10d0572

package/dist/ThemeProvider.d.ts

@@ -3,6 +3,6 @@ import type { Theming } from './const';
 type ThemeProviderProps = PropsWithChildren<Theming> & {
     className?: string;
 };
-export declare const ThemeProvider: ({ theme, screenMode, children, className, isNotRootProvider, }: ThemeProviderProps) => import("react").JSX.Element;
+export declare const ThemeProvider: ({ theme, screenMode, isNotRootProvider, children, className, }: ThemeProviderProps) => import("react").JSX.Element;
 export {};
 //# 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,EAAkC,MAAM,OAAO,CAAC;AAG1E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAKvC,KAAK,kBAAkB,GAAG,iBAAiB,CAAC,OAAO,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAK9E,eAAO,MAAM,aAAa,GAAI,gEAM3B,kBAAkB,gCAqCpB,CAAC"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAkC,MAAM,OAAO,CAAC;AAG1E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAKvC,KAAK,kBAAkB,GAAG,iBAAiB,CAAC,OAAO,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAK9E,eAAO,MAAM,aAAa,GAAI,gEAM3B,kBAAkB,gCAyBpB,CAAC"}

package/dist/ThemeProvider.js

@@ -11,9 +11,9 @@ const themeClass = /\bnp-theme-[a-z-]+\b/g;
 const ThemeProvider = ({
   theme = _const.DEFAULT_BASE_THEME,
   screenMode = _const.DEFAULT_SCREEN_MODE,
+  isNotRootProvider = false,
   children,
-  className = undefined,
-  isNotRootProvider = false
+  className = undefined
 }) => {
   const isContextRoot = react.useContext(ThemeProviderContext.ThemeContext) === undefined;
   // useEffect hook used to apply the theme class to the HTML element
@@ -23,19 +23,9 @@ const ThemeProvider = ({
       document.documentElement.className.match(themeClass)?.forEach(item => {
         document.documentElement.classList.remove(item);
       });
-      const themeClasses = helpers.getThemeClassName(theme, screenMode).split(' ');
-      // Auto-detection: Add np-theme-personal for business and platform themes when this is a root provider (page wrapper)
-      const isBusinessTheme = theme === 'business' || theme?.startsWith('business');
-      const isPlatformTheme = theme === 'platform' || theme?.startsWith('platform');
-      const shouldAddPersonalClass = (isBusinessTheme || isPlatformTheme) && !isNotRootProvider;
-      // Apply theme classes
-      themeClasses.forEach(item => {
+      helpers.getThemeClassName(theme, screenMode).split(' ').forEach(item => {
         document.documentElement.classList.add(item);
       });
-      // Add np-theme-personal for business and platform themes only in root provider (page wrapper)
-      if (shouldAddPersonalClass) {
-        document.documentElement.classList.add('np-theme-personal');
-      }
     }
   }, [isNotRootProvider, isContextRoot, theme, screenMode]);
   const contextValue = react.useMemo(() => ({

package/dist/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sources":["../src/ThemeProvider.tsx"],"sourcesContent":["import { PropsWithChildren, useContext, useEffect, useMemo } 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\ntype 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 = DEFAULT_BASE_THEME,\n  screenMode = DEFAULT_SCREEN_MODE,\n  children,\n  className = undefined,\n  isNotRootProvider = false,\n}: ThemeProviderProps) => {\n  const isContextRoot = useContext(ThemeContext) === undefined;\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\n      const themeClasses = getThemeClassName(theme, screenMode).split(' ');\n\n      // Auto-detection: Add np-theme-personal for business and platform themes when this is a root provider (page wrapper)\n      const isBusinessTheme = theme === 'business' || theme?.startsWith('business');\n      const isPlatformTheme = theme === 'platform' || theme?.startsWith('platform');\n      const shouldAddPersonalClass = (isBusinessTheme || isPlatformTheme) && !isNotRootProvider;\n\n      // Apply theme classes\n      themeClasses.forEach((item) => {\n        document.documentElement.classList.add(item);\n      });\n\n      // Add np-theme-personal for business and platform themes only in root provider (page wrapper)\n      if (shouldAddPersonalClass) {\n        document.documentElement.classList.add('np-theme-personal');\n      }\n    }\n  }, [isNotRootProvider, isContextRoot, theme, screenMode]);\n\n  const contextValue = useMemo(() => ({ theme, screenMode }), [screenMode, theme]);\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemedChildren className={className}>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["themeClass","ThemeProvider","theme","DEFAULT_BASE_THEME","screenMode","DEFAULT_SCREEN_MODE","children","className","undefined","isNotRootProvider","isContextRoot","useContext","ThemeContext","useEffect","document","documentElement","match","forEach","item","classList","remove","themeClasses","getThemeClassName","split","isBusinessTheme","startsWith","isPlatformTheme","shouldAddPersonalClass","add","contextValue","useMemo","_jsx","Provider","value","ThemedChildren"],"mappings":";;;;;;;;;AAWA,MAAMA,UAAU,GAAG,uBAAuB;AAEnC,MAAMC,aAAa,GAAGA,CAAC;AAC5BC,EAAAA,KAAK,GAAGC,yBAAkB;AAC1BC,EAAAA,UAAU,GAAGC,0BAAmB;EAChCC,QAAQ;AACRC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,iBAAiB,GAAG;AAAK,CACN,KAAI;AACvB,EAAA,MAAMC,aAAa,GAAGC,gBAAU,CAACC,iCAAY,CAAC,KAAKJ,SAAS;AAE5D;AACAK,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAI,CAACJ,iBAAiB,IAAIC,aAAa,EAAE;AACvC;AACAI,MAAAA,QAAQ,CAACC,eAAe,CAACR,SAAS,CAACS,KAAK,CAAChB,UAAU,CAAC,EAAEiB,OAAO,CAAEC,IAAI,IAAI;QACrEJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACC,MAAM,CAACF,IAAI,CAAC;AACjD,MAAA,CAAC,CAAC;AAEF,MAAA,MAAMG,YAAY,GAAGC,yBAAiB,CAACpB,KAAK,EAAEE,UAAU,CAAC,CAACmB,KAAK,CAAC,GAAG,CAAC;AAEpE;MACA,MAAMC,eAAe,GAAGtB,KAAK,KAAK,UAAU,IAAIA,KAAK,EAAEuB,UAAU,CAAC,UAAU,CAAC;MAC7E,MAAMC,eAAe,GAAGxB,KAAK,KAAK,UAAU,IAAIA,KAAK,EAAEuB,UAAU,CAAC,UAAU,CAAC;MAC7E,MAAME,sBAAsB,GAAG,CAACH,eAAe,IAAIE,eAAe,KAAK,CAACjB,iBAAiB;AAEzF;AACAY,MAAAA,YAAY,CAACJ,OAAO,CAAEC,IAAI,IAAI;QAC5BJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACS,GAAG,CAACV,IAAI,CAAC;AAC9C,MAAA,CAAC,CAAC;AAEF;AACA,MAAA,IAAIS,sBAAsB,EAAE;QAC1Bb,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACS,GAAG,CAAC,mBAAmB,CAAC;AAC7D,MAAA;AACF,IAAA;EACF,CAAC,EAAE,CAACnB,iBAAiB,EAAEC,aAAa,EAAER,KAAK,EAAEE,UAAU,CAAC,CAAC;AAEzD,EAAA,MAAMyB,YAAY,GAAGC,aAAO,CAAC,OAAO;IAAE5B,KAAK;AAAEE,IAAAA;AAAU,GAAE,CAAC,EAAE,CAACA,UAAU,EAAEF,KAAK,CAAC,CAAC;AAEhF,EAAA,oBACE6B,cAAA,CAACnB,iCAAY,CAACoB,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEJ,YAAa;IAAAvB,QAAA,eACzCyB,cAAA,CAACG,6BAAc,EAAA;AAAC3B,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 } 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\ntype 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 = DEFAULT_BASE_THEME,\n  screenMode = DEFAULT_SCREEN_MODE,\n  isNotRootProvider = false,\n  children,\n  className = undefined,\n}: ThemeProviderProps) => {\n  const isContextRoot = useContext(ThemeContext) === undefined;\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(() => ({ theme, screenMode }), [screenMode, theme]);\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemedChildren className={className}>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["themeClass","ThemeProvider","theme","DEFAULT_BASE_THEME","screenMode","DEFAULT_SCREEN_MODE","isNotRootProvider","children","className","undefined","isContextRoot","useContext","ThemeContext","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;AAC5BC,EAAAA,KAAK,GAAGC,yBAAkB;AAC1BC,EAAAA,UAAU,GAAGC,0BAAmB;AAChCC,EAAAA,iBAAiB,GAAG,KAAK;EACzBC,QAAQ;AACRC,EAAAA,SAAS,GAAGC;AAAS,CACF,KAAI;AACvB,EAAA,MAAMC,aAAa,GAAGC,gBAAU,CAACC,iCAAY,CAAC,KAAKH,SAAS;AAE5D;AACAI,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAI,CAACP,iBAAiB,IAAII,aAAa,EAAE;AACvC;AACAI,MAAAA,QAAQ,CAACC,eAAe,CAACP,SAAS,CAACQ,KAAK,CAAChB,UAAU,CAAC,EAAEiB,OAAO,CAAEC,IAAI,IAAI;QACrEJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACC,MAAM,CAACF,IAAI,CAAC;AACjD,MAAA,CAAC,CAAC;AACFG,MAAAA,yBAAiB,CAACnB,KAAK,EAAEE,UAAU,CAAC,CACjCkB,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,iBAAiB,EAAEI,aAAa,EAAER,KAAK,EAAEE,UAAU,CAAC,CAAC;AAEzD,EAAA,MAAMoB,YAAY,GAAGC,aAAO,CAAC,OAAO;IAAEvB,KAAK;AAAEE,IAAAA;AAAU,GAAE,CAAC,EAAE,CAACA,UAAU,EAAEF,KAAK,CAAC,CAAC;AAEhF,EAAA,oBACEwB,cAAA,CAACd,iCAAY,CAACe,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEJ,YAAa;IAAAjB,QAAA,eACzCmB,cAAA,CAACG,6BAAc,EAAA;AAACrB,MAAAA,SAAS,EAAEA,SAAU;AAAAD,MAAAA,QAAA,EAAEA;KAAyB;AAClE,GAAuB,CAAC;AAE5B;;;;"}

package/dist/ThemeProvider.mjs

@@ -1,6 +1,6 @@
 import { useContext, 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 { getThemeClassName } from './helpers.mjs';
 import { ThemeContext } from './ThemeProviderContext.mjs';
 import { jsx } from 'react/jsx-runtime';
@@ -9,9 +9,9 @@ const themeClass = /\bnp-theme-[a-z-]+\b/g;
 const ThemeProvider = ({
   theme = DEFAULT_BASE_THEME,
   screenMode = DEFAULT_SCREEN_MODE,
+  isNotRootProvider = false,
   children,
-  className = undefined,
-  isNotRootProvider = false
+  className = undefined
 }) => {
   const isContextRoot = useContext(ThemeContext) === undefined;
   // useEffect hook used to apply the theme class to the HTML element
@@ -21,19 +21,9 @@ const ThemeProvider = ({
       document.documentElement.className.match(themeClass)?.forEach(item => {
         document.documentElement.classList.remove(item);
       });
-      const themeClasses = getThemeClassName(theme, screenMode).split(' ');
-      // Auto-detection: Add np-theme-personal for business and platform themes when this is a root provider (page wrapper)
-      const isBusinessTheme = theme === 'business' || theme?.startsWith('business');
-      const isPlatformTheme = theme === 'platform' || theme?.startsWith('platform');
-      const shouldAddPersonalClass = (isBusinessTheme || isPlatformTheme) && !isNotRootProvider;
-      // Apply theme classes
-      themeClasses.forEach(item => {
+      getThemeClassName(theme, screenMode).split(' ').forEach(item => {
         document.documentElement.classList.add(item);
       });
-      // Add np-theme-personal for business and platform themes only in root provider (page wrapper)
-      if (shouldAddPersonalClass) {
-        document.documentElement.classList.add('np-theme-personal');
-      }
     }
   }, [isNotRootProvider, isContextRoot, theme, screenMode]);
   const contextValue = useMemo(() => ({

package/dist/ThemeProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.mjs","sources":["../src/ThemeProvider.tsx"],"sourcesContent":["import { PropsWithChildren, useContext, useEffect, useMemo } 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\ntype 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 = DEFAULT_BASE_THEME,\n  screenMode = DEFAULT_SCREEN_MODE,\n  children,\n  className = undefined,\n  isNotRootProvider = false,\n}: ThemeProviderProps) => {\n  const isContextRoot = useContext(ThemeContext) === undefined;\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\n      const themeClasses = getThemeClassName(theme, screenMode).split(' ');\n\n      // Auto-detection: Add np-theme-personal for business and platform themes when this is a root provider (page wrapper)\n      const isBusinessTheme = theme === 'business' || theme?.startsWith('business');\n      const isPlatformTheme = theme === 'platform' || theme?.startsWith('platform');\n      const shouldAddPersonalClass = (isBusinessTheme || isPlatformTheme) && !isNotRootProvider;\n\n      // Apply theme classes\n      themeClasses.forEach((item) => {\n        document.documentElement.classList.add(item);\n      });\n\n      // Add np-theme-personal for business and platform themes only in root provider (page wrapper)\n      if (shouldAddPersonalClass) {\n        document.documentElement.classList.add('np-theme-personal');\n      }\n    }\n  }, [isNotRootProvider, isContextRoot, theme, screenMode]);\n\n  const contextValue = useMemo(() => ({ theme, screenMode }), [screenMode, theme]);\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemedChildren className={className}>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["themeClass","ThemeProvider","theme","DEFAULT_BASE_THEME","screenMode","DEFAULT_SCREEN_MODE","children","className","undefined","isNotRootProvider","isContextRoot","useContext","ThemeContext","useEffect","document","documentElement","match","forEach","item","classList","remove","themeClasses","getThemeClassName","split","isBusinessTheme","startsWith","isPlatformTheme","shouldAddPersonalClass","add","contextValue","useMemo","_jsx","Provider","value","ThemedChildren"],"mappings":";;;;;;;AAWA,MAAMA,UAAU,GAAG,uBAAuB;AAEnC,MAAMC,aAAa,GAAGA,CAAC;AAC5BC,EAAAA,KAAK,GAAGC,kBAAkB;AAC1BC,EAAAA,UAAU,GAAGC,mBAAmB;EAChCC,QAAQ;AACRC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,iBAAiB,GAAG;AAAK,CACN,KAAI;AACvB,EAAA,MAAMC,aAAa,GAAGC,UAAU,CAACC,YAAY,CAAC,KAAKJ,SAAS;AAE5D;AACAK,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAI,CAACJ,iBAAiB,IAAIC,aAAa,EAAE;AACvC;AACAI,MAAAA,QAAQ,CAACC,eAAe,CAACR,SAAS,CAACS,KAAK,CAAChB,UAAU,CAAC,EAAEiB,OAAO,CAAEC,IAAI,IAAI;QACrEJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACC,MAAM,CAACF,IAAI,CAAC;AACjD,MAAA,CAAC,CAAC;AAEF,MAAA,MAAMG,YAAY,GAAGC,iBAAiB,CAACpB,KAAK,EAAEE,UAAU,CAAC,CAACmB,KAAK,CAAC,GAAG,CAAC;AAEpE;MACA,MAAMC,eAAe,GAAGtB,KAAK,KAAK,UAAU,IAAIA,KAAK,EAAEuB,UAAU,CAAC,UAAU,CAAC;MAC7E,MAAMC,eAAe,GAAGxB,KAAK,KAAK,UAAU,IAAIA,KAAK,EAAEuB,UAAU,CAAC,UAAU,CAAC;MAC7E,MAAME,sBAAsB,GAAG,CAACH,eAAe,IAAIE,eAAe,KAAK,CAACjB,iBAAiB;AAEzF;AACAY,MAAAA,YAAY,CAACJ,OAAO,CAAEC,IAAI,IAAI;QAC5BJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACS,GAAG,CAACV,IAAI,CAAC;AAC9C,MAAA,CAAC,CAAC;AAEF;AACA,MAAA,IAAIS,sBAAsB,EAAE;QAC1Bb,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACS,GAAG,CAAC,mBAAmB,CAAC;AAC7D,MAAA;AACF,IAAA;EACF,CAAC,EAAE,CAACnB,iBAAiB,EAAEC,aAAa,EAAER,KAAK,EAAEE,UAAU,CAAC,CAAC;AAEzD,EAAA,MAAMyB,YAAY,GAAGC,OAAO,CAAC,OAAO;IAAE5B,KAAK;AAAEE,IAAAA;AAAU,GAAE,CAAC,EAAE,CAACA,UAAU,EAAEF,KAAK,CAAC,CAAC;AAEhF,EAAA,oBACE6B,GAAA,CAACnB,YAAY,CAACoB,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEJ,YAAa;IAAAvB,QAAA,eACzCyB,GAAA,CAACG,cAAc,EAAA;AAAC3B,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 } 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\ntype 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 = DEFAULT_BASE_THEME,\n  screenMode = DEFAULT_SCREEN_MODE,\n  isNotRootProvider = false,\n  children,\n  className = undefined,\n}: ThemeProviderProps) => {\n  const isContextRoot = useContext(ThemeContext) === undefined;\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(() => ({ theme, screenMode }), [screenMode, theme]);\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemedChildren className={className}>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["themeClass","ThemeProvider","theme","DEFAULT_BASE_THEME","screenMode","DEFAULT_SCREEN_MODE","isNotRootProvider","children","className","undefined","isContextRoot","useContext","ThemeContext","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;AAC5BC,EAAAA,KAAK,GAAGC,kBAAkB;AAC1BC,EAAAA,UAAU,GAAGC,mBAAmB;AAChCC,EAAAA,iBAAiB,GAAG,KAAK;EACzBC,QAAQ;AACRC,EAAAA,SAAS,GAAGC;AAAS,CACF,KAAI;AACvB,EAAA,MAAMC,aAAa,GAAGC,UAAU,CAACC,YAAY,CAAC,KAAKH,SAAS;AAE5D;AACAI,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAI,CAACP,iBAAiB,IAAII,aAAa,EAAE;AACvC;AACAI,MAAAA,QAAQ,CAACC,eAAe,CAACP,SAAS,CAACQ,KAAK,CAAChB,UAAU,CAAC,EAAEiB,OAAO,CAAEC,IAAI,IAAI;QACrEJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACC,MAAM,CAACF,IAAI,CAAC;AACjD,MAAA,CAAC,CAAC;AACFG,MAAAA,iBAAiB,CAACnB,KAAK,EAAEE,UAAU,CAAC,CACjCkB,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,iBAAiB,EAAEI,aAAa,EAAER,KAAK,EAAEE,UAAU,CAAC,CAAC;AAEzD,EAAA,MAAMoB,YAAY,GAAGC,OAAO,CAAC,OAAO;IAAEvB,KAAK;AAAEE,IAAAA;AAAU,GAAE,CAAC,EAAE,CAACA,UAAU,EAAEF,KAAK,CAAC,CAAC;AAEhF,EAAA,oBACEwB,GAAA,CAACd,YAAY,CAACe,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEJ,YAAa;IAAAjB,QAAA,eACzCmB,GAAA,CAACG,cAAc,EAAA;AAACrB,MAAAA,SAAS,EAAEA,SAAU;AAAAD,MAAAA,QAAA,EAAEA;KAAyB;AAClE,GAAuB,CAAC;AAE5B;;;;"}

package/dist/const.js

@@ -5,12 +5,14 @@ const baseThemes = ['light', 'personal', 'business'];
 const extraThemes = ['forest-green', 'bright-green'];
 const screenModes = ['light', 'dark'];
 const modernThemes = [baseThemes[1], baseThemes[2], ...extraThemes];
+const businessThemes = ['business', 'business--forest-green', 'business--bright-green'];
 const DEFAULT_BASE_THEME = 'light';
 const DEFAULT_SCREEN_MODE = 'light';
 
 exports.DEFAULT_BASE_THEME = DEFAULT_BASE_THEME;
 exports.DEFAULT_SCREEN_MODE = DEFAULT_SCREEN_MODE;
 exports.baseThemes = baseThemes;
+exports.businessThemes = businessThemes;
 exports.extraThemes = extraThemes;
 exports.modernThemes = modernThemes;
 exports.screenModes = screenModes;

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;\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","businessThemes","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;AAClE,MAAMG,cAAc,GAAG,CAC5B,UAAU,EACV,wBAAwB,EACxB,wBAAwB;AAkBnB,MAAMC,kBAAkB,GAAG;AAC3B,MAAMC,mBAAmB,GAAG;;;;;;;;;;"}

package/dist/const.mjs

@@ -3,8 +3,9 @@ const baseThemes = ['light', 'personal', 'business'];
 const extraThemes = ['forest-green', 'bright-green'];
 const screenModes = ['light', 'dark'];
 const modernThemes = [baseThemes[1], baseThemes[2], ...extraThemes];
+const businessThemes = ['business', 'business--forest-green', 'business--bright-green'];
 const DEFAULT_BASE_THEME = 'light';
 const DEFAULT_SCREEN_MODE = 'light';
 
-export { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE, baseThemes, extraThemes, modernThemes, screenModes };
+export { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE, baseThemes, businessThemes, extraThemes, modernThemes, 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;\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","businessThemes","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;AAClE,MAAMG,cAAc,GAAG,CAC5B,UAAU,EACV,wBAAwB,EACxB,wBAAwB;AAkBnB,MAAMC,kBAAkB,GAAG;AAC3B,MAAMC,mBAAmB,GAAG;;;;"}

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,WAc7F,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"AACA,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,WAwC7F,CAAC"}

package/dist/helpers.js

@@ -7,16 +7,38 @@ 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 getThemeClassName = (theme, screenMode) => {
-  if (!isThemeModern(theme)) {
-    return `np-theme-${theme || 'personal'}`;
+  // Legacy themes
+  if (theme === 'light') {
+    return `np-theme-${theme}`;
   }
-  let classes = `np-theme-${theme === 'business' ? 'business' : 'personal'}`;
-  if (isExtraTheme(theme)) {
-    classes += ` ${classes}--${theme}`;
-  } else if (_const.screenModes[1] === screenMode) {
-    classes += ` ${classes}--${screenMode}`;
+  // Personal light is always there by default
+  const themeClasses = ['np-theme-personal'];
+  // Personal dark theme
+  if (theme === 'personal' && _const.screenModes[1] === screenMode) {
+    themeClasses.push(`np-theme-personal--${screenMode}`);
   }
-  return classes;
+  // Personal forest-green and bright-green themes
+  else if (isExtraTheme(theme)) {
+    themeClasses.push(`np-theme-personal--${theme}`);
+  }
+  // Business light
+  else if (_const.businessThemes[0] === theme) {
+    themeClasses.push(`np-theme-business`);
+    // Business dark theme
+    if (_const.screenModes[1] === screenMode) {
+      themeClasses.push(`np-theme-business--${screenMode}`);
+    }
+  }
+  // Business forest-green and bright-green themes
+  // @ts-expect-error relax TS
+  else if ([_const.businessThemes[1], _const.businessThemes[2]].includes(theme)) {
+    themeClasses.push(`np-theme-${theme}`);
+  }
+  // Platform themes
+  else if (theme.startsWith('platform')) {
+    themeClasses.push(`np-theme-${theme}`);
+  }
+  return themeClasses.join(' ');
 };
 
 exports.getThemeClassName = getThemeClassName;

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 (!isThemeModern(theme)) {\n    return `np-theme-${theme || 'personal'}`;\n  }\n\n  let classes = `np-theme-${theme === 'business' ? 'business' : 'personal'}`;\n\n  if (isExtraTheme(theme)) {\n    classes += ` ${classes}--${theme}`;\n  } else if (screenModes[1] === screenMode) {\n    classes += ` ${classes}--${screenMode}`;\n  }\n\n  return classes;\n};\n"],"names":["isThemeModern","theme","modernThemes","includes","isExtraTheme","extraThemes","isForestGreenTheme","isScreenModeDark","screenMode","screenModes","getThemeClassName","classes"],"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;AAChG,EAAA,IAAI,CAACR,aAAa,CAACC,KAAK,CAAC,EAAE;AACzB,IAAA,OAAO,CAAA,SAAA,EAAYA,KAAK,IAAI,UAAU,CAAA,CAAE;AAC1C,EAAA;EAEA,IAAIU,OAAO,GAAG,CAAA,SAAA,EAAYV,KAAK,KAAK,UAAU,GAAG,UAAU,GAAG,UAAU,CAAA,CAAE;AAE1E,EAAA,IAAIG,YAAY,CAACH,KAAK,CAAC,EAAE;AACvBU,IAAAA,OAAO,IAAI,CAAA,CAAA,EAAIA,OAAO,CAAA,EAAA,EAAKV,KAAK,CAAA,CAAE;EACpC,CAAC,MAAM,IAAIQ,kBAAW,CAAC,CAAC,CAAC,KAAKD,UAAU,EAAE;AACxCG,IAAAA,OAAO,IAAI,CAAA,CAAA,EAAIA,OAAO,CAAA,EAAA,EAAKH,UAAU,CAAA,CAAE;AACzC,EAAA;AAEA,EAAA,OAAOG,OAAO;AAChB;;;;;;;;"}
+{"version":3,"file":"helpers.js","sources":["../src/helpers.ts"],"sourcesContent":["/* eslint-disable functional/immutable-data */\nimport type {\n  ModernTheme,\n  ExtraTheme,\n  ForestGreenTheme,\n  ScreenMode,\n  ScreenModeDark,\n  Theming,\n} from './const';\nimport { extraThemes, screenModes, modernThemes, businessThemes } 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  // Legacy themes\n  if (theme === 'light') {\n    return `np-theme-${theme}`;\n  }\n\n  // Personal light is always there by default\n  const themeClasses = ['np-theme-personal'];\n\n  // Personal dark theme\n  if (theme === 'personal' && screenModes[1] === screenMode) {\n    themeClasses.push(`np-theme-personal--${screenMode}`);\n  }\n\n  // Personal forest-green and bright-green themes\n  else if (isExtraTheme(theme)) {\n    themeClasses.push(`np-theme-personal--${theme}`);\n  }\n\n  // Business light\n  else if (businessThemes[0] === theme) {\n    themeClasses.push(`np-theme-business`);\n    // Business dark theme\n    if (screenModes[1] === screenMode) {\n      themeClasses.push(`np-theme-business--${screenMode}`);\n    }\n  }\n\n  // Business forest-green and bright-green themes\n  // @ts-expect-error relax TS\n  else if ([businessThemes[1], businessThemes[2]].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\n  return themeClasses.join(' ');\n};\n"],"names":["isThemeModern","theme","modernThemes","includes","isExtraTheme","extraThemes","isForestGreenTheme","isScreenModeDark","screenMode","screenModes","getThemeClassName","themeClasses","push","businessThemes","startsWith","join"],"mappings":";;;;AAWO,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;AAChG;EACA,IAAIP,KAAK,KAAK,OAAO,EAAE;IACrB,OAAO,CAAA,SAAA,EAAYA,KAAK,CAAA,CAAE;AAC5B,EAAA;AAEA;AACA,EAAA,MAAMU,YAAY,GAAG,CAAC,mBAAmB,CAAC;AAE1C;EACA,IAAIV,KAAK,KAAK,UAAU,IAAIQ,kBAAW,CAAC,CAAC,CAAC,KAAKD,UAAU,EAAE;AACzDG,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,EAAA;AAEA;AAAA,OACK,IAAIJ,YAAY,CAACH,KAAK,CAAC,EAAE;AAC5BU,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBX,KAAK,EAAE,CAAC;AAClD,EAAA;AAEA;AAAA,OACK,IAAIY,qBAAc,CAAC,CAAC,CAAC,KAAKZ,KAAK,EAAE;AACpCU,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,iBAAA,CAAmB,CAAC;AACtC;AACA,IAAA,IAAIH,kBAAW,CAAC,CAAC,CAAC,KAAKD,UAAU,EAAE;AACjCG,MAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,IAAA;AACF,EAAA;AAEA;AACA;AAAA,OACK,IAAI,CAACK,qBAAc,CAAC,CAAC,CAAC,EAAEA,qBAAc,CAAC,CAAC,CAAC,CAAC,CAACV,QAAQ,CAACF,KAAK,CAAC,EAAE;AAC/DU,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYX,KAAK,EAAE,CAAC;AACxC,EAAA;AAEA;AAAA,OACK,IAAIA,KAAK,CAACa,UAAU,CAAC,UAAU,CAAC,EAAE;AACrCH,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYX,KAAK,EAAE,CAAC;AACxC,EAAA;AAEA,EAAA,OAAOU,YAAY,CAACI,IAAI,CAAC,GAAG,CAAC;AAC/B;;;;;;;;"}

package/dist/helpers.mjs

@@ -1,20 +1,42 @@
-import { modernThemes, extraThemes, screenModes } from './const.mjs';
+import { modernThemes, extraThemes, screenModes, businessThemes } from './const.mjs';
 
 const isThemeModern = theme => modernThemes.includes(theme);
 const isExtraTheme = theme => extraThemes.includes(theme);
 const isForestGreenTheme = theme => theme === extraThemes[0];
 const isScreenModeDark = (theme, screenMode) => isThemeModern(theme) && screenModes[1] === screenMode;
 const getThemeClassName = (theme, screenMode) => {
-  if (!isThemeModern(theme)) {
-    return `np-theme-${theme || 'personal'}`;
+  // Legacy themes
+  if (theme === 'light') {
+    return `np-theme-${theme}`;
   }
-  let classes = `np-theme-${theme === 'business' ? 'business' : 'personal'}`;
-  if (isExtraTheme(theme)) {
-    classes += ` ${classes}--${theme}`;
-  } else if (screenModes[1] === screenMode) {
-    classes += ` ${classes}--${screenMode}`;
+  // Personal light is always there by default
+  const themeClasses = ['np-theme-personal'];
+  // Personal dark theme
+  if (theme === 'personal' && screenModes[1] === screenMode) {
+    themeClasses.push(`np-theme-personal--${screenMode}`);
   }
-  return classes;
+  // Personal forest-green and bright-green themes
+  else if (isExtraTheme(theme)) {
+    themeClasses.push(`np-theme-personal--${theme}`);
+  }
+  // Business light
+  else if (businessThemes[0] === theme) {
+    themeClasses.push(`np-theme-business`);
+    // Business dark theme
+    if (screenModes[1] === screenMode) {
+      themeClasses.push(`np-theme-business--${screenMode}`);
+    }
+  }
+  // Business forest-green and bright-green themes
+  // @ts-expect-error relax TS
+  else if ([businessThemes[1], businessThemes[2]].includes(theme)) {
+    themeClasses.push(`np-theme-${theme}`);
+  }
+  // Platform themes
+  else if (theme.startsWith('platform')) {
+    themeClasses.push(`np-theme-${theme}`);
+  }
+  return themeClasses.join(' ');
 };
 
 export { getThemeClassName, isExtraTheme, isForestGreenTheme, isScreenModeDark, isThemeModern };

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 (!isThemeModern(theme)) {\n    return `np-theme-${theme || 'personal'}`;\n  }\n\n  let classes = `np-theme-${theme === 'business' ? 'business' : 'personal'}`;\n\n  if (isExtraTheme(theme)) {\n    classes += ` ${classes}--${theme}`;\n  } else if (screenModes[1] === screenMode) {\n    classes += ` ${classes}--${screenMode}`;\n  }\n\n  return classes;\n};\n"],"names":["isThemeModern","theme","modernThemes","includes","isExtraTheme","extraThemes","isForestGreenTheme","isScreenModeDark","screenMode","screenModes","getThemeClassName","classes"],"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;AAChG,EAAA,IAAI,CAACR,aAAa,CAACC,KAAK,CAAC,EAAE;AACzB,IAAA,OAAO,CAAA,SAAA,EAAYA,KAAK,IAAI,UAAU,CAAA,CAAE;AAC1C,EAAA;EAEA,IAAIU,OAAO,GAAG,CAAA,SAAA,EAAYV,KAAK,KAAK,UAAU,GAAG,UAAU,GAAG,UAAU,CAAA,CAAE;AAE1E,EAAA,IAAIG,YAAY,CAACH,KAAK,CAAC,EAAE;AACvBU,IAAAA,OAAO,IAAI,CAAA,CAAA,EAAIA,OAAO,CAAA,EAAA,EAAKV,KAAK,CAAA,CAAE;EACpC,CAAC,MAAM,IAAIQ,WAAW,CAAC,CAAC,CAAC,KAAKD,UAAU,EAAE;AACxCG,IAAAA,OAAO,IAAI,CAAA,CAAA,EAAIA,OAAO,CAAA,EAAA,EAAKH,UAAU,CAAA,CAAE;AACzC,EAAA;AAEA,EAAA,OAAOG,OAAO;AAChB;;;;"}
+{"version":3,"file":"helpers.mjs","sources":["../src/helpers.ts"],"sourcesContent":["/* eslint-disable functional/immutable-data */\nimport type {\n  ModernTheme,\n  ExtraTheme,\n  ForestGreenTheme,\n  ScreenMode,\n  ScreenModeDark,\n  Theming,\n} from './const';\nimport { extraThemes, screenModes, modernThemes, businessThemes } 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  // Legacy themes\n  if (theme === 'light') {\n    return `np-theme-${theme}`;\n  }\n\n  // Personal light is always there by default\n  const themeClasses = ['np-theme-personal'];\n\n  // Personal dark theme\n  if (theme === 'personal' && screenModes[1] === screenMode) {\n    themeClasses.push(`np-theme-personal--${screenMode}`);\n  }\n\n  // Personal forest-green and bright-green themes\n  else if (isExtraTheme(theme)) {\n    themeClasses.push(`np-theme-personal--${theme}`);\n  }\n\n  // Business light\n  else if (businessThemes[0] === theme) {\n    themeClasses.push(`np-theme-business`);\n    // Business dark theme\n    if (screenModes[1] === screenMode) {\n      themeClasses.push(`np-theme-business--${screenMode}`);\n    }\n  }\n\n  // Business forest-green and bright-green themes\n  // @ts-expect-error relax TS\n  else if ([businessThemes[1], businessThemes[2]].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\n  return themeClasses.join(' ');\n};\n"],"names":["isThemeModern","theme","modernThemes","includes","isExtraTheme","extraThemes","isForestGreenTheme","isScreenModeDark","screenMode","screenModes","getThemeClassName","themeClasses","push","businessThemes","startsWith","join"],"mappings":";;AAWO,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;AAChG;EACA,IAAIP,KAAK,KAAK,OAAO,EAAE;IACrB,OAAO,CAAA,SAAA,EAAYA,KAAK,CAAA,CAAE;AAC5B,EAAA;AAEA;AACA,EAAA,MAAMU,YAAY,GAAG,CAAC,mBAAmB,CAAC;AAE1C;EACA,IAAIV,KAAK,KAAK,UAAU,IAAIQ,WAAW,CAAC,CAAC,CAAC,KAAKD,UAAU,EAAE;AACzDG,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,EAAA;AAEA;AAAA,OACK,IAAIJ,YAAY,CAACH,KAAK,CAAC,EAAE;AAC5BU,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBX,KAAK,EAAE,CAAC;AAClD,EAAA;AAEA;AAAA,OACK,IAAIY,cAAc,CAAC,CAAC,CAAC,KAAKZ,KAAK,EAAE;AACpCU,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,iBAAA,CAAmB,CAAC;AACtC;AACA,IAAA,IAAIH,WAAW,CAAC,CAAC,CAAC,KAAKD,UAAU,EAAE;AACjCG,MAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,IAAA;AACF,EAAA;AAEA;AACA;AAAA,OACK,IAAI,CAACK,cAAc,CAAC,CAAC,CAAC,EAAEA,cAAc,CAAC,CAAC,CAAC,CAAC,CAACV,QAAQ,CAACF,KAAK,CAAC,EAAE;AAC/DU,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYX,KAAK,EAAE,CAAC;AACxC,EAAA;AAEA;AAAA,OACK,IAAIA,KAAK,CAACa,UAAU,CAAC,UAAU,CAAC,EAAE;AACrCH,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYX,KAAK,EAAE,CAAC;AACxC,EAAA;AAEA,EAAA,OAAOU,YAAY,CAACI,IAAI,CAAC,GAAG,CAAC;AAC/B;;;;"}

package/package.json

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

package/src/ThemeProvider.tsx

@@ -14,9 +14,9 @@ const themeClass = /\bnp-theme-[a-z-]+\b/g;
 export const ThemeProvider = ({
   theme = DEFAULT_BASE_THEME,
   screenMode = DEFAULT_SCREEN_MODE,
+  isNotRootProvider = false,
   children,
   className = undefined,
-  isNotRootProvider = false,
 }: ThemeProviderProps) => {
   const isContextRoot = useContext(ThemeContext) === undefined;
 
@@ -27,23 +27,11 @@ export const ThemeProvider = ({
       document.documentElement.className.match(themeClass)?.forEach((item) => {
         document.documentElement.classList.remove(item);
       });
-
-      const themeClasses = getThemeClassName(theme, screenMode).split(' ');
-
-      // Auto-detection: Add np-theme-personal for business and platform themes when this is a root provider (page wrapper)
-      const isBusinessTheme = theme === 'business' || theme?.startsWith('business');
-      const isPlatformTheme = theme === 'platform' || theme?.startsWith('platform');
-      const shouldAddPersonalClass = (isBusinessTheme || isPlatformTheme) && !isNotRootProvider;
-
-      // Apply theme classes
-      themeClasses.forEach((item) => {
-        document.documentElement.classList.add(item);
-      });
-
-      // Add np-theme-personal for business and platform themes only in root provider (page wrapper)
-      if (shouldAddPersonalClass) {
-        document.documentElement.classList.add('np-theme-personal');
-      }
+      getThemeClassName(theme, screenMode)
+        .split(' ')
+        .forEach((item) => {
+          document.documentElement.classList.add(item);
+        });
     }
   }, [isNotRootProvider, isContextRoot, theme, screenMode]);
 

package/src/helpers.ts

@@ -1,3 +1,4 @@
+/* eslint-disable functional/immutable-data */
 import type {
   ModernTheme,
   ExtraTheme,
@@ -6,7 +7,7 @@ import type {
   ScreenModeDark,
   Theming,
 } from './const';
-import { extraThemes, screenModes, modernThemes } from './const';
+import { extraThemes, screenModes, modernThemes, businessThemes } from './const';
 
 export const isThemeModern = (theme: NonNullable<Theming['theme']>): theme is ModernTheme =>
   modernThemes.includes(theme as ModernTheme);
@@ -25,17 +26,43 @@ export const isScreenModeDark = (
   isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;
 
 export const getThemeClassName = (theme: NonNullable<Theming['theme']>, screenMode: ScreenMode) => {
-  if (!isThemeModern(theme)) {
-    return `np-theme-${theme || 'personal'}`;
+  // Legacy themes
+  if (theme === 'light') {
+    return `np-theme-${theme}`;
   }
 
-  let classes = `np-theme-${theme === 'business' ? 'business' : 'personal'}`;
+  // Personal light is always there by default
+  const themeClasses = ['np-theme-personal'];
 
-  if (isExtraTheme(theme)) {
-    classes += ` ${classes}--${theme}`;
-  } else if (screenModes[1] === screenMode) {
-    classes += ` ${classes}--${screenMode}`;
+  // Personal dark theme
+  if (theme === 'personal' && screenModes[1] === screenMode) {
+    themeClasses.push(`np-theme-personal--${screenMode}`);
   }
 
-  return classes;
+  // Personal forest-green and bright-green themes
+  else if (isExtraTheme(theme)) {
+    themeClasses.push(`np-theme-personal--${theme}`);
+  }
+
+  // Business light
+  else if (businessThemes[0] === theme) {
+    themeClasses.push(`np-theme-business`);
+    // Business dark theme
+    if (screenModes[1] === screenMode) {
+      themeClasses.push(`np-theme-business--${screenMode}`);
+    }
+  }
+
+  // Business forest-green and bright-green themes
+  // @ts-expect-error relax TS
+  else if ([businessThemes[1], businessThemes[2]].includes(theme)) {
+    themeClasses.push(`np-theme-${theme}`);
+  }
+
+  // Platform themes
+  else if (theme.startsWith('platform')) {
+    themeClasses.push(`np-theme-${theme}`);
+  }
+
+  return themeClasses.join(' ');
 };