@wise/components-theming 1.6.4 → 1.7.1

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';

package/dist/const.d.ts

@@ -1,7 +1,8 @@
-export declare const baseThemes: readonly ["light", "personal"];
+export declare const baseThemes: readonly ["light", "personal", "business"];
 export declare const extraThemes: readonly ["forest-green", "bright-green"];
 export declare const screenModes: readonly ["light", "dark"];
-export declare const modernThemes: readonly ["personal", "forest-green", "bright-green"];
+export declare const modernThemes: readonly ["personal", "business", "forest-green", "bright-green"];
+export declare const businessThemes: readonly ["business", "business--forest-green", "business--bright-green"];
 export declare const platformThemes: readonly ["platform", "platform--forest-green"];
 export type ComponentTheme = (typeof baseThemes)[number];
 export type ModernTheme = (typeof modernThemes)[number];
@@ -12,10 +13,13 @@ export type ScreenMode = (typeof screenModes)[number];
 export type ScreenModeDark = (typeof screenModes)[1];
 export type PlatformTheme = (typeof platformThemes)[0];
 export type PlatformForestGreenTheme = (typeof platformThemes)[1];
+export type BusinessTheme = (typeof businessThemes)[0];
+export type BusinessForestGreenTheme = (typeof businessThemes)[1];
+export type BusinessBrightGreenTheme = (typeof businessThemes)[2];
 export declare const DEFAULT_BASE_THEME = "light";
 export declare const DEFAULT_SCREEN_MODE = "light";
 export type Theming = {
-    theme?: ComponentTheme | BaseTheme | ExtraTheme | PlatformTheme | PlatformForestGreenTheme;
+    theme?: ComponentTheme | BaseTheme | ExtraTheme | BusinessTheme | BusinessForestGreenTheme | BusinessBrightGreenTheme | PlatformTheme | PlatformForestGreenTheme;
     screenMode?: ScreenMode;
     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,gCAAiC,CAAC;AACzD,eAAO,MAAM,WAAW,2CAA4C,CAAC;AACrE,eAAO,MAAM,WAAW,4BAA6B,CAAC;AACtD,eAAO,MAAM,YAAY,uDAA2C,CAAC;AACrE,eAAO,MAAM,cAAc,iDAAkD,CAAC;AAG9E,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AACzD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AACxD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AACpD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AACtD,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AACvD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AACvD,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAElE,eAAO,MAAM,kBAAkB,UAAU,CAAC;AAC1C,eAAO,MAAM,mBAAmB,UAAU,CAAC;AAE3C,MAAM,MAAM,OAAO,GAAG;IACpB,KAAK,CAAC,EAAE,cAAc,GAAG,SAAS,GAAG,UAAU,GAAG,aAAa,GAAG,wBAAwB,CAAC;IAC3F,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACzC,CAAC"}
+{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../src/const.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,UAAU,4CAA6C,CAAC;AACrE,eAAO,MAAM,WAAW,2CAA4C,CAAC;AACrE,eAAO,MAAM,WAAW,4BAA6B,CAAC;AACtD,eAAO,MAAM,YAAY,mEAA0D,CAAC;AACpF,eAAO,MAAM,cAAc,2EAIjB,CAAC;AACX,eAAO,MAAM,cAAc,iDAAkD,CAAC;AAG9E,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AACzD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AACxD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AACpD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AACtD,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AACvD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AACvD,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAClE,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AACvD,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAClE,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAElE,eAAO,MAAM,kBAAkB,UAAU,CAAC;AAC1C,eAAO,MAAM,mBAAmB,UAAU,CAAC;AAE3C,MAAM,MAAM,OAAO,GAAG;IACpB,KAAK,CAAC,EACF,cAAc,GACd,SAAS,GACT,UAAU,GACV,aAAa,GACb,wBAAwB,GACxB,wBAAwB,GACxB,aAAa,GACb,wBAAwB,CAAC;IAC7B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACzC,CAAC"}

package/dist/const.js

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

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'] as const;\nexport const extraThemes = ['forest-green', 'bright-green'] as const;\nexport const screenModes = ['light', 'dark'] as const;\nexport const modernThemes = [baseThemes[1], ...extraThemes] 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];\n\nexport const DEFAULT_BASE_THEME = 'light';\nexport const DEFAULT_SCREEN_MODE = 'light';\n\nexport type Theming = {\n  theme?: ComponentTheme | BaseTheme | ExtraTheme | PlatformTheme | PlatformForestGreenTheme;\n  screenMode?: ScreenMode;\n  isNotRootProvider?: boolean | undefined;\n};\n"],"names":["baseThemes","extraThemes","screenModes","modernThemes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE"],"mappings":";;AAAA;MACaA,UAAU,GAAG,CAAC,OAAO,EAAE,UAAU;MACjCC,WAAW,GAAG,CAAC,cAAc,EAAE,cAAc;MAC7CC,WAAW,GAAG,CAAC,OAAO,EAAE,MAAM;AACpC,MAAMC,YAAY,GAAG,CAACH,UAAU,CAAC,CAAC,CAAC,EAAE,GAAGC,WAAW;AAcnD,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","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;;;;;;;;;"}

package/dist/const.mjs

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

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'] as const;\nexport const extraThemes = ['forest-green', 'bright-green'] as const;\nexport const screenModes = ['light', 'dark'] as const;\nexport const modernThemes = [baseThemes[1], ...extraThemes] 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];\n\nexport const DEFAULT_BASE_THEME = 'light';\nexport const DEFAULT_SCREEN_MODE = 'light';\n\nexport type Theming = {\n  theme?: ComponentTheme | BaseTheme | ExtraTheme | PlatformTheme | PlatformForestGreenTheme;\n  screenMode?: ScreenMode;\n  isNotRootProvider?: boolean | undefined;\n};\n"],"names":["baseThemes","extraThemes","screenModes","modernThemes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE"],"mappings":"AAAA;MACaA,UAAU,GAAG,CAAC,OAAO,EAAE,UAAU;MACjCC,WAAW,GAAG,CAAC,cAAc,EAAE,cAAc;MAC7CC,WAAW,GAAG,CAAC,OAAO,EAAE,MAAM;AACpC,MAAMC,YAAY,GAAG,CAACH,UAAU,CAAC,CAAC,CAAC,EAAE,GAAGC,WAAW;AAcnD,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","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;;;;"}

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":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,OAAO,EACR,MAAM,SAAS,CAAC;AAGjB,eAAO,MAAM,aAAa,GAAI,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAG,KAAK,IAAI,WACjC,CAAC;AAE9C,eAAO,MAAM,YAAY,GAAI,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAG,KAAK,IAAI,UAClC,CAAC;AAE5C,eAAO,MAAM,kBAAkB,GAC7B,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KACnC,KAAK,IAAI,gBAA4C,CAAC;AAEzD,eAAO,MAAM,gBAAgB,GAC3B,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EACpC,YAAY,UAAU,KACrB,UAAU,IAAI,cACqD,CAAC;AAEvE,eAAO,MAAM,iBAAiB,GAAI,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,YAAY,UAAU,WAuC7F,CAAC"}

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'}`;
+  if (['light'].includes(theme)) {
+    return `np-theme-${theme}`;
   }
-  let classes = `np-theme-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'];
+  /* eslint-disable functional/immutable-data */
+  // Personal dark theme
+  if (theme === 'personal' && screenMode === 'dark') {
+    themeClasses.push(`np-theme-personal--${screenMode}`);
   }
-  return classes;
+  // Personal forest-green and bright-green themes
+  else if (['forest-green', 'bright-green'].includes(theme)) {
+    themeClasses.push(`np-theme-personal--${theme}`);
+  }
+  // Business light
+  else if (theme === 'business') {
+    themeClasses.push(`np-theme-business`);
+    // Business dark theme
+    if (screenMode === 'dark') {
+      themeClasses.push(`np-theme-business--${screenMode}`);
+    }
+  }
+  // Business forest-green and bright-green themes
+  else if (['business--forest-green', 'business--bright-green'].includes(theme)) {
+    themeClasses.push(`np-theme-${theme}`);
+  }
+  // Platform themes
+  else if (theme.startsWith('platform')) {
+    themeClasses.push(`np-theme-${theme}`);
+  }
+  /* eslint-enable functional/immutable-data */
+  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-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,iBAAA,CAAmB;AAEjC,EAAA,IAAIP,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":["import type {\n  ModernTheme,\n  ExtraTheme,\n  ForestGreenTheme,\n  ScreenMode,\n  ScreenModeDark,\n  Theming,\n} from './const';\nimport { extraThemes, screenModes, modernThemes } from './const';\n\nexport const isThemeModern = (theme: NonNullable<Theming['theme']>): theme is ModernTheme =>\n  modernThemes.includes(theme as ModernTheme);\n\nexport const isExtraTheme = (theme: NonNullable<Theming['theme']>): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isForestGreenTheme = (\n  theme: NonNullable<Theming['theme']>,\n): theme is ForestGreenTheme => theme === extraThemes[0];\n\nexport const isScreenModeDark = (\n  theme: NonNullable<Theming['theme']>,\n  screenMode: ScreenMode,\n): screenMode is ScreenModeDark =>\n  isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;\n\nexport const getThemeClassName = (theme: NonNullable<Theming['theme']>, screenMode: ScreenMode) => {\n  if (['light'].includes(theme)) {\n    return `np-theme-${theme}`;\n  }\n\n  // Personal light is always there by default\n  const themeClasses = ['np-theme-personal'];\n\n  /* eslint-disable functional/immutable-data */\n  // Personal dark theme\n  if (theme === 'personal' && screenMode === 'dark') {\n    themeClasses.push(`np-theme-personal--${screenMode}`);\n  }\n\n  // Personal forest-green and bright-green themes\n  else if (['forest-green', 'bright-green'].includes(theme)) {\n    themeClasses.push(`np-theme-personal--${theme}`);\n  }\n\n  // Business light\n  else if (theme === 'business') {\n    themeClasses.push(`np-theme-business`);\n    // Business dark theme\n    if (screenMode === 'dark') {\n      themeClasses.push(`np-theme-business--${screenMode}`);\n    }\n  }\n\n  // Business forest-green and bright-green themes\n  else if (['business--forest-green', 'business--bright-green'].includes(theme)) {\n    themeClasses.push(`np-theme-${theme}`);\n  }\n\n  // Platform themes\n  else if (theme.startsWith('platform')) {\n    themeClasses.push(`np-theme-${theme}`);\n  }\n  /* eslint-enable functional/immutable-data */\n  return themeClasses.join(' ');\n};\n"],"names":["isThemeModern","theme","modernThemes","includes","isExtraTheme","extraThemes","isForestGreenTheme","isScreenModeDark","screenMode","screenModes","getThemeClassName","themeClasses","push","startsWith","join"],"mappings":";;;;AAUO,MAAMA,aAAa,GAAIC,KAAoC,IAChEC,mBAAY,CAACC,QAAQ,CAACF,KAAoB;AAErC,MAAMG,YAAY,GAAIH,KAAoC,IAC/DI,kBAAW,CAACF,QAAQ,CAACF,KAAmB;AAEnC,MAAMK,kBAAkB,GAC7BL,KAAoC,IACNA,KAAK,KAAKI,kBAAW,CAAC,CAAC;MAE1CE,gBAAgB,GAAGA,CAC9BN,KAAoC,EACpCO,UAAsB,KAEtBR,aAAa,CAACC,KAAoB,CAAC,IAAIQ,kBAAW,CAAC,CAAC,CAAC,KAAKD;MAE/CE,iBAAiB,GAAGA,CAACT,KAAoC,EAAEO,UAAsB,KAAI;EAChG,IAAI,CAAC,OAAO,CAAC,CAACL,QAAQ,CAACF,KAAK,CAAC,EAAE;IAC7B,OAAO,CAAA,SAAA,EAAYA,KAAK,CAAA,CAAE;AAC5B,EAAA;AAEA;AACA,EAAA,MAAMU,YAAY,GAAG,CAAC,mBAAmB,CAAC;AAE1C;AACA;AACA,EAAA,IAAIV,KAAK,KAAK,UAAU,IAAIO,UAAU,KAAK,MAAM,EAAE;AACjDG,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,EAAA;AAEA;OACK,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,CAACL,QAAQ,CAACF,KAAK,CAAC,EAAE;AACzDU,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBX,KAAK,EAAE,CAAC;AAClD,EAAA;AAEA;AAAA,OACK,IAAIA,KAAK,KAAK,UAAU,EAAE;AAC7BU,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,iBAAA,CAAmB,CAAC;AACtC;IACA,IAAIJ,UAAU,KAAK,MAAM,EAAE;AACzBG,MAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,IAAA;AACF,EAAA;AAEA;OACK,IAAI,CAAC,wBAAwB,EAAE,wBAAwB,CAAC,CAACL,QAAQ,CAACF,KAAK,CAAC,EAAE;AAC7EU,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYX,KAAK,EAAE,CAAC;AACxC,EAAA;AAEA;AAAA,OACK,IAAIA,KAAK,CAACY,UAAU,CAAC,UAAU,CAAC,EAAE;AACrCF,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYX,KAAK,EAAE,CAAC;AACxC,EAAA;AACA;AACA,EAAA,OAAOU,YAAY,CAACG,IAAI,CAAC,GAAG,CAAC;AAC/B;;;;;;;;"}

package/dist/helpers.mjs

@@ -5,16 +5,38 @@ 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'}`;
+  if (['light'].includes(theme)) {
+    return `np-theme-${theme}`;
   }
-  let classes = `np-theme-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'];
+  /* eslint-disable functional/immutable-data */
+  // Personal dark theme
+  if (theme === 'personal' && screenMode === 'dark') {
+    themeClasses.push(`np-theme-personal--${screenMode}`);
   }
-  return classes;
+  // Personal forest-green and bright-green themes
+  else if (['forest-green', 'bright-green'].includes(theme)) {
+    themeClasses.push(`np-theme-personal--${theme}`);
+  }
+  // Business light
+  else if (theme === 'business') {
+    themeClasses.push(`np-theme-business`);
+    // Business dark theme
+    if (screenMode === 'dark') {
+      themeClasses.push(`np-theme-business--${screenMode}`);
+    }
+  }
+  // Business forest-green and bright-green themes
+  else if (['business--forest-green', 'business--bright-green'].includes(theme)) {
+    themeClasses.push(`np-theme-${theme}`);
+  }
+  // Platform themes
+  else if (theme.startsWith('platform')) {
+    themeClasses.push(`np-theme-${theme}`);
+  }
+  /* eslint-enable functional/immutable-data */
+  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-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,iBAAA,CAAmB;AAEjC,EAAA,IAAIP,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":["import type {\n  ModernTheme,\n  ExtraTheme,\n  ForestGreenTheme,\n  ScreenMode,\n  ScreenModeDark,\n  Theming,\n} from './const';\nimport { extraThemes, screenModes, modernThemes } from './const';\n\nexport const isThemeModern = (theme: NonNullable<Theming['theme']>): theme is ModernTheme =>\n  modernThemes.includes(theme as ModernTheme);\n\nexport const isExtraTheme = (theme: NonNullable<Theming['theme']>): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isForestGreenTheme = (\n  theme: NonNullable<Theming['theme']>,\n): theme is ForestGreenTheme => theme === extraThemes[0];\n\nexport const isScreenModeDark = (\n  theme: NonNullable<Theming['theme']>,\n  screenMode: ScreenMode,\n): screenMode is ScreenModeDark =>\n  isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;\n\nexport const getThemeClassName = (theme: NonNullable<Theming['theme']>, screenMode: ScreenMode) => {\n  if (['light'].includes(theme)) {\n    return `np-theme-${theme}`;\n  }\n\n  // Personal light is always there by default\n  const themeClasses = ['np-theme-personal'];\n\n  /* eslint-disable functional/immutable-data */\n  // Personal dark theme\n  if (theme === 'personal' && screenMode === 'dark') {\n    themeClasses.push(`np-theme-personal--${screenMode}`);\n  }\n\n  // Personal forest-green and bright-green themes\n  else if (['forest-green', 'bright-green'].includes(theme)) {\n    themeClasses.push(`np-theme-personal--${theme}`);\n  }\n\n  // Business light\n  else if (theme === 'business') {\n    themeClasses.push(`np-theme-business`);\n    // Business dark theme\n    if (screenMode === 'dark') {\n      themeClasses.push(`np-theme-business--${screenMode}`);\n    }\n  }\n\n  // Business forest-green and bright-green themes\n  else if (['business--forest-green', 'business--bright-green'].includes(theme)) {\n    themeClasses.push(`np-theme-${theme}`);\n  }\n\n  // Platform themes\n  else if (theme.startsWith('platform')) {\n    themeClasses.push(`np-theme-${theme}`);\n  }\n  /* eslint-enable functional/immutable-data */\n  return themeClasses.join(' ');\n};\n"],"names":["isThemeModern","theme","modernThemes","includes","isExtraTheme","extraThemes","isForestGreenTheme","isScreenModeDark","screenMode","screenModes","getThemeClassName","themeClasses","push","startsWith","join"],"mappings":";;AAUO,MAAMA,aAAa,GAAIC,KAAoC,IAChEC,YAAY,CAACC,QAAQ,CAACF,KAAoB;AAErC,MAAMG,YAAY,GAAIH,KAAoC,IAC/DI,WAAW,CAACF,QAAQ,CAACF,KAAmB;AAEnC,MAAMK,kBAAkB,GAC7BL,KAAoC,IACNA,KAAK,KAAKI,WAAW,CAAC,CAAC;MAE1CE,gBAAgB,GAAGA,CAC9BN,KAAoC,EACpCO,UAAsB,KAEtBR,aAAa,CAACC,KAAoB,CAAC,IAAIQ,WAAW,CAAC,CAAC,CAAC,KAAKD;MAE/CE,iBAAiB,GAAGA,CAACT,KAAoC,EAAEO,UAAsB,KAAI;EAChG,IAAI,CAAC,OAAO,CAAC,CAACL,QAAQ,CAACF,KAAK,CAAC,EAAE;IAC7B,OAAO,CAAA,SAAA,EAAYA,KAAK,CAAA,CAAE;AAC5B,EAAA;AAEA;AACA,EAAA,MAAMU,YAAY,GAAG,CAAC,mBAAmB,CAAC;AAE1C;AACA;AACA,EAAA,IAAIV,KAAK,KAAK,UAAU,IAAIO,UAAU,KAAK,MAAM,EAAE;AACjDG,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,EAAA;AAEA;OACK,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,CAACL,QAAQ,CAACF,KAAK,CAAC,EAAE;AACzDU,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBX,KAAK,EAAE,CAAC;AAClD,EAAA;AAEA;AAAA,OACK,IAAIA,KAAK,KAAK,UAAU,EAAE;AAC7BU,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,iBAAA,CAAmB,CAAC;AACtC;IACA,IAAIJ,UAAU,KAAK,MAAM,EAAE;AACzBG,MAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,IAAA;AACF,EAAA;AAEA;OACK,IAAI,CAAC,wBAAwB,EAAE,wBAAwB,CAAC,CAACL,QAAQ,CAACF,KAAK,CAAC,EAAE;AAC7EU,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYX,KAAK,EAAE,CAAC;AACxC,EAAA;AAEA;AAAA,OACK,IAAIA,KAAK,CAACY,UAAU,CAAC,UAAU,CAAC,EAAE;AACrCF,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYX,KAAK,EAAE,CAAC;AACxC,EAAA;AACA;AACA,EAAA,OAAOU,YAAY,CAACG,IAAI,CAAC,GAAG,CAAC;AAC/B;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/components-theming",
-  "version": "1.6.4",
+  "version": "1.7.1",
   "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.27.6",
+    "@babel/runtime": "^7.28.3",
     "clsx": "^2.1.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.0",
-    "@babel/plugin-transform-runtime": "^7.28.0",
-    "@babel/preset-env": "^7.28.0",
+    "@babel/core": "^7.28.3",
+    "@babel/plugin-transform-runtime": "^7.28.3",
+    "@babel/preset-env": "^7.28.3",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-typescript": "^12.1.4",
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
     "@tsconfig/recommended": "^1.0.10",
     "@types/babel__core": "^7.20.5",
     "@types/jest": "^30.0.0",
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
-    "@wise/eslint-config": "^12.4.0",
-    "eslint": "^9.30.1",
-    "jest": "^30.0.4",
+    "@wise/eslint-config": "^13.1.0",
+    "eslint": "^9.33.0",
+    "jest": "^30.0.5",
     "jest-environment-jsdom": "^29.7.0",
-    "rollup": "^4.44.2",
+    "rollup": "^4.47.1",
     "rollup-preserve-directives": "^1.1.3",
     "@wise/wds-configs": "0.0.0"
   },

package/src/ThemeProvider.spec.tsx

@@ -40,13 +40,56 @@ describe('ThemeProvider', () => {
     // eslint-disable-next-line testing-library/no-node-access
     expect(screen.getByText('personal').parentElement).toHaveClass('np-theme-personal');
     // eslint-disable-next-line testing-library/no-node-access
-    expect(screen.getByText('platform').parentElement).toHaveClass('np-theme-platform');
+    expect(screen.getByText('platform').parentElement).toHaveClass(
+      'np-theme-personal',
+      'np-theme-platform',
+    );
     // eslint-disable-next-line testing-library/no-node-access
     expect(screen.getByText('platform--forest-green').parentElement).toHaveClass(
+      'np-theme-personal',
       'np-theme-platform--forest-green',
     );
   });
 
+  it('sets business themes', () => {
+    render(
+      <ThemeProvider theme="business">
+        <div>business</div>
+        <ThemeProvider theme="business" screenMode="dark">
+          <div>business-dark</div>
+        </ThemeProvider>
+        <ThemeProvider theme="business--bright-green">
+          <div>business--bright-green</div>
+        </ThemeProvider>
+        <ThemeProvider theme="business--forest-green">
+          <div>business--forest-green</div>
+        </ThemeProvider>
+      </ThemeProvider>,
+    );
+
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(screen.getByText('business').parentElement).toHaveClass(
+      'np-theme-personal',
+      'np-theme-business',
+    );
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(screen.getByText('business-dark').parentElement).toHaveClass(
+      'np-theme-personal',
+      'np-theme-business',
+      'np-theme-business--dark',
+    );
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(screen.getByText('business--bright-green').parentElement).toHaveClass(
+      'np-theme-personal',
+      'np-theme-business--bright-green',
+    );
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(screen.getByText('business--forest-green').parentElement).toHaveClass(
+      'np-theme-personal',
+      'np-theme-business--forest-green',
+    );
+  });
+
   it('matches snapshot', () => {
     const { asFragment } = render(
       <ThemeProvider theme="light">

package/src/const.ts

@@ -1,8 +1,13 @@
 // TODO: Change 'light' with 'legacy' in the future
-export const baseThemes = ['light', 'personal'] as const;
+export const baseThemes = ['light', 'personal', 'business'] as const;
 export const extraThemes = ['forest-green', 'bright-green'] as const;
 export const screenModes = ['light', 'dark'] as const;
-export const modernThemes = [baseThemes[1], ...extraThemes] as const;
+export const modernThemes = [baseThemes[1], baseThemes[2], ...extraThemes] as const;
+export const businessThemes = [
+  'business',
+  'business--forest-green',
+  'business--bright-green',
+] as const;
 export const platformThemes = ['platform', 'platform--forest-green'] as const;
 
 // TODO: componentThemes returned back for backward compatibility, refactor this place in the future
@@ -15,12 +20,23 @@ export type ScreenMode = (typeof screenModes)[number];
 export type ScreenModeDark = (typeof screenModes)[1];
 export type PlatformTheme = (typeof platformThemes)[0];
 export type PlatformForestGreenTheme = (typeof platformThemes)[1];
+export type BusinessTheme = (typeof businessThemes)[0];
+export type BusinessForestGreenTheme = (typeof businessThemes)[1];
+export type BusinessBrightGreenTheme = (typeof businessThemes)[2];
 
 export const DEFAULT_BASE_THEME = 'light';
 export const DEFAULT_SCREEN_MODE = 'light';
 
 export type Theming = {
-  theme?: ComponentTheme | BaseTheme | ExtraTheme | PlatformTheme | PlatformForestGreenTheme;
+  theme?:
+    | ComponentTheme
+    | BaseTheme
+    | ExtraTheme
+    | BusinessTheme
+    | BusinessForestGreenTheme
+    | BusinessBrightGreenTheme
+    | PlatformTheme
+    | PlatformForestGreenTheme;
   screenMode?: ScreenMode;
   isNotRootProvider?: boolean | undefined;
 };

package/src/helpers.ts

@@ -25,17 +25,42 @@ 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'}`;
+  if (['light'].includes(theme)) {
+    return `np-theme-${theme}`;
   }
 
-  let classes = `np-theme-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}`;
+  /* eslint-disable functional/immutable-data */
+  // Personal dark theme
+  if (theme === 'personal' && screenMode === 'dark') {
+    themeClasses.push(`np-theme-personal--${screenMode}`);
   }
 
-  return classes;
+  // Personal forest-green and bright-green themes
+  else if (['forest-green', 'bright-green'].includes(theme)) {
+    themeClasses.push(`np-theme-personal--${theme}`);
+  }
+
+  // Business light
+  else if (theme === 'business') {
+    themeClasses.push(`np-theme-business`);
+    // Business dark theme
+    if (screenMode === 'dark') {
+      themeClasses.push(`np-theme-business--${screenMode}`);
+    }
+  }
+
+  // Business forest-green and bright-green themes
+  else if (['business--forest-green', 'business--bright-green'].includes(theme)) {
+    themeClasses.push(`np-theme-${theme}`);
+  }
+
+  // Platform themes
+  else if (theme.startsWith('platform')) {
+    themeClasses.push(`np-theme-${theme}`);
+  }
+  /* eslint-enable functional/immutable-data */
+  return themeClasses.join(' ');
 };