@wise/components-theming 1.6.3 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +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 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;AACO,CAAA,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,OAAC,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,OAAC,CAAC;AACN;GACD,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;;;;"}
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 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;;;;"}
@@ -1 +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 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;AACO,CAAA,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,OAAC,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,OAAC,CAAC;AACN;GACD,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;;;;"}
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 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.d.ts CHANGED
@@ -1,7 +1,8 @@
1
- export declare const baseThemes: readonly ["light", "personal"];
1
+ export declare const baseThemes: readonly ["light", "personal", "business"];
2
2
  export declare const extraThemes: readonly ["forest-green", "bright-green"];
3
3
  export declare const screenModes: readonly ["light", "dark"];
4
- export declare const modernThemes: readonly ["personal", "forest-green", "bright-green"];
4
+ export declare const modernThemes: readonly ["personal", "business", "forest-green", "bright-green"];
5
+ export declare const businessThemes: readonly ["business", "business--forest-green", "business--bright-green"];
5
6
  export declare const platformThemes: readonly ["platform", "platform--forest-green"];
6
7
  export type ComponentTheme = (typeof baseThemes)[number];
7
8
  export type ModernTheme = (typeof modernThemes)[number];
@@ -12,10 +13,13 @@ export type ScreenMode = (typeof screenModes)[number];
12
13
  export type ScreenModeDark = (typeof screenModes)[1];
13
14
  export type PlatformTheme = (typeof platformThemes)[0];
14
15
  export type PlatformForestGreenTheme = (typeof platformThemes)[1];
16
+ export type BusinessTheme = (typeof businessThemes)[0];
17
+ export type BusinessForestGreenTheme = (typeof businessThemes)[1];
18
+ export type BusinessBrightGreenTheme = (typeof businessThemes)[2];
15
19
  export declare const DEFAULT_BASE_THEME = "light";
16
20
  export declare const DEFAULT_SCREEN_MODE = "light";
17
21
  export type Theming = {
18
- theme?: ComponentTheme | BaseTheme | ExtraTheme | PlatformTheme | PlatformForestGreenTheme;
22
+ theme?: ComponentTheme | BaseTheme | ExtraTheme | BusinessTheme | BusinessForestGreenTheme | BusinessBrightGreenTheme | PlatformTheme | PlatformForestGreenTheme;
19
23
  screenMode?: ScreenMode;
20
24
  isNotRootProvider?: boolean | undefined;
21
25
  };
@@ -1 +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"}
1
+ {"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../src/const.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,UAAU,4CAA6C,CAAC;AACrE,eAAO,MAAM,WAAW,2CAA4C,CAAC;AACrE,eAAO,MAAM,WAAW,4BAA6B,CAAC;AACtD,eAAO,MAAM,YAAY,mEAA0D,CAAC;AACpF,eAAO,MAAM,cAAc,2EAIjB,CAAC;AACX,eAAO,MAAM,cAAc,iDAAkD,CAAC;AAG9E,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AACzD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AACxD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AACpD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AACtD,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AACvD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AACvD,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAClE,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AACvD,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAClE,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAElE,eAAO,MAAM,kBAAkB,UAAU,CAAC;AAC1C,eAAO,MAAM,mBAAmB,UAAU,CAAC;AAE3C,MAAM,MAAM,OAAO,GAAG;IACpB,KAAK,CAAC,EACF,cAAc,GACd,SAAS,GACT,UAAU,GACV,aAAa,GACb,wBAAwB,GACxB,wBAAwB,GACxB,aAAa,GACb,wBAAwB,CAAC;IAC7B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACzC,CAAC"}
package/dist/const.js CHANGED
@@ -1,10 +1,10 @@
1
1
  'use strict';
2
2
 
3
3
  // TODO: Change 'light' with 'legacy' in the future
4
- const baseThemes = ['light', 'personal'];
4
+ const baseThemes = ['light', 'personal', 'business'];
5
5
  const extraThemes = ['forest-green', 'bright-green'];
6
6
  const screenModes = ['light', 'dark'];
7
- const modernThemes = [baseThemes[1], ...extraThemes];
7
+ const modernThemes = [baseThemes[1], baseThemes[2], ...extraThemes];
8
8
  const DEFAULT_BASE_THEME = 'light';
9
9
  const DEFAULT_SCREEN_MODE = 'light';
10
10
 
package/dist/const.js.map CHANGED
@@ -1 +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;;;;;;;;;"}
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;;;;;;;;;"}
package/dist/const.mjs CHANGED
@@ -1,8 +1,8 @@
1
1
  // TODO: Change 'light' with 'legacy' in the future
2
- const baseThemes = ['light', 'personal'];
2
+ const baseThemes = ['light', 'personal', 'business'];
3
3
  const extraThemes = ['forest-green', 'bright-green'];
4
4
  const screenModes = ['light', 'dark'];
5
- const modernThemes = [baseThemes[1], ...extraThemes];
5
+ const modernThemes = [baseThemes[1], baseThemes[2], ...extraThemes];
6
6
  const DEFAULT_BASE_THEME = 'light';
7
7
  const DEFAULT_SCREEN_MODE = 'light';
8
8
 
@@ -1 +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;;;;"}
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;;;;"}
package/dist/helpers.js CHANGED
@@ -10,7 +10,7 @@ const getThemeClassName = (theme, screenMode) => {
10
10
  if (!isThemeModern(theme)) {
11
11
  return `np-theme-${theme || 'personal'}`;
12
12
  }
13
- let classes = `np-theme-personal`;
13
+ let classes = `np-theme-${theme === 'business' ? 'business' : 'personal'}`;
14
14
  if (isExtraTheme(theme)) {
15
15
  classes += ` ${classes}--${theme}`;
16
16
  } else if (_const.screenModes[1] === screenMode) {
@@ -1 +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,CAAYA,SAAAA,EAAAA,KAAK,IAAI,UAAU,CAAE,CAAA;AAC1C;EAEA,IAAIU,OAAO,GAAG,CAAmB,iBAAA,CAAA;AAEjC,EAAA,IAAIP,YAAY,CAACH,KAAK,CAAC,EAAE;AACvBU,IAAAA,OAAO,IAAI,CAAA,CAAA,EAAIA,OAAO,CAAA,EAAA,EAAKV,KAAK,CAAE,CAAA;GACnC,MAAM,IAAIQ,kBAAW,CAAC,CAAC,CAAC,KAAKD,UAAU,EAAE;AACxCG,IAAAA,OAAO,IAAI,CAAA,CAAA,EAAIA,OAAO,CAAA,EAAA,EAAKH,UAAU,CAAE,CAAA;AACzC;AAEA,EAAA,OAAOG,OAAO;AAChB;;;;;;;;"}
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;;;;;;;;"}
package/dist/helpers.mjs CHANGED
@@ -8,7 +8,7 @@ const getThemeClassName = (theme, screenMode) => {
8
8
  if (!isThemeModern(theme)) {
9
9
  return `np-theme-${theme || 'personal'}`;
10
10
  }
11
- let classes = `np-theme-personal`;
11
+ let classes = `np-theme-${theme === 'business' ? 'business' : 'personal'}`;
12
12
  if (isExtraTheme(theme)) {
13
13
  classes += ` ${classes}--${theme}`;
14
14
  } else if (screenModes[1] === screenMode) {
@@ -1 +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,CAAYA,SAAAA,EAAAA,KAAK,IAAI,UAAU,CAAE,CAAA;AAC1C;EAEA,IAAIU,OAAO,GAAG,CAAmB,iBAAA,CAAA;AAEjC,EAAA,IAAIP,YAAY,CAACH,KAAK,CAAC,EAAE;AACvBU,IAAAA,OAAO,IAAI,CAAA,CAAA,EAAIA,OAAO,CAAA,EAAA,EAAKV,KAAK,CAAE,CAAA;GACnC,MAAM,IAAIQ,WAAW,CAAC,CAAC,CAAC,KAAKD,UAAU,EAAE;AACxCG,IAAAA,OAAO,IAAI,CAAA,CAAA,EAAIA,OAAO,CAAA,EAAA,EAAKH,UAAU,CAAE,CAAA;AACzC;AAEA,EAAA,OAAOG,OAAO;AAChB;;;;"}
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;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"useTheme.js","sources":["../src/useTheme.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProviderContext';\nimport type { ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n theme: NonNullable<Theming['theme']>;\n screenMode: ScreenMode;\n isModern: boolean;\n isForestGreenTheme: boolean;\n isScreenModeDark: boolean;\n className: string;\n}\n\nconst FALLBACK_VALUES = {\n theme: DEFAULT_BASE_THEME,\n screenMode: DEFAULT_SCREEN_MODE,\n} as const;\n\nconst isNotProduction = () => {\n try {\n return ['localhost', 'dev-wi.se'].includes(window.location.hostname);\n } catch {\n return false;\n }\n};\n\nexport const useTheme = (): ThemeHookValue => {\n const theming = useContext(ThemeContext);\n\n if (!theming && isNotProduction()) {\n // eslint-disable-next-line no-console\n console.warn('Call to useTheme outside a ThemeProvider');\n }\n\n const { theme, screenMode: contextScreenMode } = theming ?? FALLBACK_VALUES;\n\n const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;\n\n return useMemo(\n () => ({\n theme,\n screenMode,\n isModern: isThemeModern(theme),\n isForestGreenTheme: isForestGreenTheme(theme),\n isScreenModeDark: isScreenModeDark(theme, screenMode),\n className: getThemeClassName(theme, screenMode),\n }),\n [theme, screenMode],\n );\n};\n"],"names":["FALLBACK_VALUES","theme","DEFAULT_BASE_THEME","screenMode","DEFAULT_SCREEN_MODE","isNotProduction","includes","window","location","hostname","useTheme","theming","useContext","ThemeContext","console","warn","contextScreenMode","useMemo","isModern","isThemeModern","isForestGreenTheme","isScreenModeDark","className","getThemeClassName"],"mappings":";;;;;;;AAgBA,MAAMA,eAAe,GAAG;AACtBC,EAAAA,KAAK,EAAEC,yBAAkB;AACzBC,EAAAA,UAAU,EAAEC;CACJ;AAEV,MAAMC,eAAe,GAAGA,MAAK;EAC3B,IAAI;AACF,IAAA,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACC,MAAM,CAACC,QAAQ,CAACC,QAAQ,CAAC;AACtE,GAAC,CAAC,MAAM;AACN,IAAA,OAAO,KAAK;AACd;AACF,CAAC;AAEYC,MAAAA,QAAQ,GAAGA,MAAqB;AAC3C,EAAA,MAAMC,OAAO,GAAGC,gBAAU,CAACC,iCAAY,CAAC;AAExC,EAAA,IAAI,CAACF,OAAO,IAAIN,eAAe,EAAE,EAAE;AACjC;AACAS,IAAAA,OAAO,CAACC,IAAI,CAAC,0CAA0C,CAAC;AAC1D;EAEA,MAAM;IAAEd,KAAK;AAAEE,IAAAA,UAAU,EAAEa;GAAmB,GAAGL,OAAO,IAAIX,eAAe;EAE3E,MAAMG,UAAU,GAAGF,KAAK,KAAKC,yBAAkB,GAAGE,0BAAmB,GAAGY,iBAAiB;EAEzF,OAAOC,aAAO,CACZ,OAAO;IACLhB,KAAK;IACLE,UAAU;AACVe,IAAAA,QAAQ,EAAEC,qBAAa,CAAClB,KAAK,CAAC;AAC9BmB,IAAAA,kBAAkB,EAAEA,0BAAkB,CAACnB,KAAK,CAAC;AAC7CoB,IAAAA,gBAAgB,EAAEA,wBAAgB,CAACpB,KAAK,EAAEE,UAAU,CAAC;AACrDmB,IAAAA,SAAS,EAAEC,yBAAiB,CAACtB,KAAK,EAAEE,UAAU;AAC/C,GAAA,CAAC,EACF,CAACF,KAAK,EAAEE,UAAU,CAAC,CACpB;AACH;;;;"}
1
+ {"version":3,"file":"useTheme.js","sources":["../src/useTheme.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProviderContext';\nimport type { ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n theme: NonNullable<Theming['theme']>;\n screenMode: ScreenMode;\n isModern: boolean;\n isForestGreenTheme: boolean;\n isScreenModeDark: boolean;\n className: string;\n}\n\nconst FALLBACK_VALUES = {\n theme: DEFAULT_BASE_THEME,\n screenMode: DEFAULT_SCREEN_MODE,\n} as const;\n\nconst isNotProduction = () => {\n try {\n return ['localhost', 'dev-wi.se'].includes(window.location.hostname);\n } catch {\n return false;\n }\n};\n\nexport const useTheme = (): ThemeHookValue => {\n const theming = useContext(ThemeContext);\n\n if (!theming && isNotProduction()) {\n // eslint-disable-next-line no-console\n console.warn('Call to useTheme outside a ThemeProvider');\n }\n\n const { theme, screenMode: contextScreenMode } = theming ?? FALLBACK_VALUES;\n\n const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;\n\n return useMemo(\n () => ({\n theme,\n screenMode,\n isModern: isThemeModern(theme),\n isForestGreenTheme: isForestGreenTheme(theme),\n isScreenModeDark: isScreenModeDark(theme, screenMode),\n className: getThemeClassName(theme, screenMode),\n }),\n [theme, screenMode],\n );\n};\n"],"names":["FALLBACK_VALUES","theme","DEFAULT_BASE_THEME","screenMode","DEFAULT_SCREEN_MODE","isNotProduction","includes","window","location","hostname","useTheme","theming","useContext","ThemeContext","console","warn","contextScreenMode","useMemo","isModern","isThemeModern","isForestGreenTheme","isScreenModeDark","className","getThemeClassName"],"mappings":";;;;;;;AAgBA,MAAMA,eAAe,GAAG;AACtBC,EAAAA,KAAK,EAAEC,yBAAkB;AACzBC,EAAAA,UAAU,EAAEC;CACJ;AAEV,MAAMC,eAAe,GAAGA,MAAK;EAC3B,IAAI;AACF,IAAA,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACC,MAAM,CAACC,QAAQ,CAACC,QAAQ,CAAC;AACtE,EAAA,CAAC,CAAC,MAAM;AACN,IAAA,OAAO,KAAK;AACd,EAAA;AACF,CAAC;AAEM,MAAMC,QAAQ,GAAGA,MAAqB;AAC3C,EAAA,MAAMC,OAAO,GAAGC,gBAAU,CAACC,iCAAY,CAAC;AAExC,EAAA,IAAI,CAACF,OAAO,IAAIN,eAAe,EAAE,EAAE;AACjC;AACAS,IAAAA,OAAO,CAACC,IAAI,CAAC,0CAA0C,CAAC;AAC1D,EAAA;EAEA,MAAM;IAAEd,KAAK;AAAEE,IAAAA,UAAU,EAAEa;GAAmB,GAAGL,OAAO,IAAIX,eAAe;EAE3E,MAAMG,UAAU,GAAGF,KAAK,KAAKC,yBAAkB,GAAGE,0BAAmB,GAAGY,iBAAiB;EAEzF,OAAOC,aAAO,CACZ,OAAO;IACLhB,KAAK;IACLE,UAAU;AACVe,IAAAA,QAAQ,EAAEC,qBAAa,CAAClB,KAAK,CAAC;AAC9BmB,IAAAA,kBAAkB,EAAEA,0BAAkB,CAACnB,KAAK,CAAC;AAC7CoB,IAAAA,gBAAgB,EAAEA,wBAAgB,CAACpB,KAAK,EAAEE,UAAU,CAAC;AACrDmB,IAAAA,SAAS,EAAEC,yBAAiB,CAACtB,KAAK,EAAEE,UAAU;AAC/C,GAAA,CAAC,EACF,CAACF,KAAK,EAAEE,UAAU,CAAC,CACpB;AACH;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"useTheme.mjs","sources":["../src/useTheme.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProviderContext';\nimport type { ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n theme: NonNullable<Theming['theme']>;\n screenMode: ScreenMode;\n isModern: boolean;\n isForestGreenTheme: boolean;\n isScreenModeDark: boolean;\n className: string;\n}\n\nconst FALLBACK_VALUES = {\n theme: DEFAULT_BASE_THEME,\n screenMode: DEFAULT_SCREEN_MODE,\n} as const;\n\nconst isNotProduction = () => {\n try {\n return ['localhost', 'dev-wi.se'].includes(window.location.hostname);\n } catch {\n return false;\n }\n};\n\nexport const useTheme = (): ThemeHookValue => {\n const theming = useContext(ThemeContext);\n\n if (!theming && isNotProduction()) {\n // eslint-disable-next-line no-console\n console.warn('Call to useTheme outside a ThemeProvider');\n }\n\n const { theme, screenMode: contextScreenMode } = theming ?? FALLBACK_VALUES;\n\n const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;\n\n return useMemo(\n () => ({\n theme,\n screenMode,\n isModern: isThemeModern(theme),\n isForestGreenTheme: isForestGreenTheme(theme),\n isScreenModeDark: isScreenModeDark(theme, screenMode),\n className: getThemeClassName(theme, screenMode),\n }),\n [theme, screenMode],\n );\n};\n"],"names":["FALLBACK_VALUES","theme","DEFAULT_BASE_THEME","screenMode","DEFAULT_SCREEN_MODE","isNotProduction","includes","window","location","hostname","useTheme","theming","useContext","ThemeContext","console","warn","contextScreenMode","useMemo","isModern","isThemeModern","isForestGreenTheme","isScreenModeDark","className","getThemeClassName"],"mappings":";;;;;AAgBA,MAAMA,eAAe,GAAG;AACtBC,EAAAA,KAAK,EAAEC,kBAAkB;AACzBC,EAAAA,UAAU,EAAEC;CACJ;AAEV,MAAMC,eAAe,GAAGA,MAAK;EAC3B,IAAI;AACF,IAAA,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACC,MAAM,CAACC,QAAQ,CAACC,QAAQ,CAAC;AACtE,GAAC,CAAC,MAAM;AACN,IAAA,OAAO,KAAK;AACd;AACF,CAAC;AAEYC,MAAAA,QAAQ,GAAGA,MAAqB;AAC3C,EAAA,MAAMC,OAAO,GAAGC,UAAU,CAACC,YAAY,CAAC;AAExC,EAAA,IAAI,CAACF,OAAO,IAAIN,eAAe,EAAE,EAAE;AACjC;AACAS,IAAAA,OAAO,CAACC,IAAI,CAAC,0CAA0C,CAAC;AAC1D;EAEA,MAAM;IAAEd,KAAK;AAAEE,IAAAA,UAAU,EAAEa;GAAmB,GAAGL,OAAO,IAAIX,eAAe;EAE3E,MAAMG,UAAU,GAAGF,KAAK,KAAKC,kBAAkB,GAAGE,mBAAmB,GAAGY,iBAAiB;EAEzF,OAAOC,OAAO,CACZ,OAAO;IACLhB,KAAK;IACLE,UAAU;AACVe,IAAAA,QAAQ,EAAEC,aAAa,CAAClB,KAAK,CAAC;AAC9BmB,IAAAA,kBAAkB,EAAEA,kBAAkB,CAACnB,KAAK,CAAC;AAC7CoB,IAAAA,gBAAgB,EAAEA,gBAAgB,CAACpB,KAAK,EAAEE,UAAU,CAAC;AACrDmB,IAAAA,SAAS,EAAEC,iBAAiB,CAACtB,KAAK,EAAEE,UAAU;AAC/C,GAAA,CAAC,EACF,CAACF,KAAK,EAAEE,UAAU,CAAC,CACpB;AACH;;;;"}
1
+ {"version":3,"file":"useTheme.mjs","sources":["../src/useTheme.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProviderContext';\nimport type { ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n theme: NonNullable<Theming['theme']>;\n screenMode: ScreenMode;\n isModern: boolean;\n isForestGreenTheme: boolean;\n isScreenModeDark: boolean;\n className: string;\n}\n\nconst FALLBACK_VALUES = {\n theme: DEFAULT_BASE_THEME,\n screenMode: DEFAULT_SCREEN_MODE,\n} as const;\n\nconst isNotProduction = () => {\n try {\n return ['localhost', 'dev-wi.se'].includes(window.location.hostname);\n } catch {\n return false;\n }\n};\n\nexport const useTheme = (): ThemeHookValue => {\n const theming = useContext(ThemeContext);\n\n if (!theming && isNotProduction()) {\n // eslint-disable-next-line no-console\n console.warn('Call to useTheme outside a ThemeProvider');\n }\n\n const { theme, screenMode: contextScreenMode } = theming ?? FALLBACK_VALUES;\n\n const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;\n\n return useMemo(\n () => ({\n theme,\n screenMode,\n isModern: isThemeModern(theme),\n isForestGreenTheme: isForestGreenTheme(theme),\n isScreenModeDark: isScreenModeDark(theme, screenMode),\n className: getThemeClassName(theme, screenMode),\n }),\n [theme, screenMode],\n );\n};\n"],"names":["FALLBACK_VALUES","theme","DEFAULT_BASE_THEME","screenMode","DEFAULT_SCREEN_MODE","isNotProduction","includes","window","location","hostname","useTheme","theming","useContext","ThemeContext","console","warn","contextScreenMode","useMemo","isModern","isThemeModern","isForestGreenTheme","isScreenModeDark","className","getThemeClassName"],"mappings":";;;;;AAgBA,MAAMA,eAAe,GAAG;AACtBC,EAAAA,KAAK,EAAEC,kBAAkB;AACzBC,EAAAA,UAAU,EAAEC;CACJ;AAEV,MAAMC,eAAe,GAAGA,MAAK;EAC3B,IAAI;AACF,IAAA,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACC,MAAM,CAACC,QAAQ,CAACC,QAAQ,CAAC;AACtE,EAAA,CAAC,CAAC,MAAM;AACN,IAAA,OAAO,KAAK;AACd,EAAA;AACF,CAAC;AAEM,MAAMC,QAAQ,GAAGA,MAAqB;AAC3C,EAAA,MAAMC,OAAO,GAAGC,UAAU,CAACC,YAAY,CAAC;AAExC,EAAA,IAAI,CAACF,OAAO,IAAIN,eAAe,EAAE,EAAE;AACjC;AACAS,IAAAA,OAAO,CAACC,IAAI,CAAC,0CAA0C,CAAC;AAC1D,EAAA;EAEA,MAAM;IAAEd,KAAK;AAAEE,IAAAA,UAAU,EAAEa;GAAmB,GAAGL,OAAO,IAAIX,eAAe;EAE3E,MAAMG,UAAU,GAAGF,KAAK,KAAKC,kBAAkB,GAAGE,mBAAmB,GAAGY,iBAAiB;EAEzF,OAAOC,OAAO,CACZ,OAAO;IACLhB,KAAK;IACLE,UAAU;AACVe,IAAAA,QAAQ,EAAEC,aAAa,CAAClB,KAAK,CAAC;AAC9BmB,IAAAA,kBAAkB,EAAEA,kBAAkB,CAACnB,KAAK,CAAC;AAC7CoB,IAAAA,gBAAgB,EAAEA,gBAAgB,CAACpB,KAAK,EAAEE,UAAU,CAAC;AACrDmB,IAAAA,SAAS,EAAEC,iBAAiB,CAACtB,KAAK,EAAEE,UAAU;AAC/C,GAAA,CAAC,EACF,CAACF,KAAK,EAAEE,UAAU,CAAC,CACpB;AACH;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wise/components-theming",
3
- "version": "1.6.3",
3
+ "version": "1.7.0",
4
4
  "description": "Provides theming support for the Wise Design system components",
5
5
  "license": "Apache-2.0",
6
6
  "keywords": [
@@ -12,30 +12,30 @@
12
12
  "url": "git+https://github.com/transferwise/neptune-web.git"
13
13
  },
14
14
  "dependencies": {
15
- "@babel/runtime": "^7.27.3",
15
+ "@babel/runtime": "^7.28.3",
16
16
  "clsx": "^2.1.1"
17
17
  },
18
18
  "devDependencies": {
19
- "@babel/core": "^7.27.3",
20
- "@babel/plugin-transform-runtime": "^7.27.3",
21
- "@babel/preset-env": "^7.27.2",
19
+ "@babel/core": "^7.28.3",
20
+ "@babel/plugin-transform-runtime": "^7.28.3",
21
+ "@babel/preset-env": "^7.28.3",
22
22
  "@babel/preset-react": "^7.27.1",
23
23
  "@babel/preset-typescript": "^7.27.1",
24
24
  "@rollup/plugin-babel": "^6.0.4",
25
- "@rollup/plugin-typescript": "^12.1.2",
26
- "@testing-library/dom": "^10.4.0",
27
- "@testing-library/jest-dom": "^6.6.3",
25
+ "@rollup/plugin-typescript": "^12.1.4",
26
+ "@testing-library/dom": "^10.4.1",
27
+ "@testing-library/jest-dom": "^6.8.0",
28
28
  "@testing-library/react": "^16.3.0",
29
- "@tsconfig/recommended": "^1.0.8",
29
+ "@tsconfig/recommended": "^1.0.10",
30
30
  "@types/babel__core": "^7.20.5",
31
- "@types/jest": "^29.5.14",
32
- "@types/react": "^18.3.11",
33
- "@types/react-dom": "^18.3.1",
34
- "@wise/eslint-config": "^12.3.0",
35
- "eslint": "^9.27.0",
36
- "jest": "^29.7.0",
31
+ "@types/jest": "^30.0.0",
32
+ "@types/react": "^18.3.23",
33
+ "@types/react-dom": "^18.3.7",
34
+ "@wise/eslint-config": "^13.1.0",
35
+ "eslint": "^9.33.0",
36
+ "jest": "^30.0.5",
37
37
  "jest-environment-jsdom": "^29.7.0",
38
- "rollup": "^4.41.1",
38
+ "rollup": "^4.47.1",
39
39
  "rollup-preserve-directives": "^1.1.3",
40
40
  "@wise/wds-configs": "0.0.0"
41
41
  },
@@ -2,8 +2,6 @@ import { render, screen } from '@testing-library/react';
2
2
 
3
3
  import { ThemeProvider } from './ThemeProvider';
4
4
 
5
- import {} from './const';
6
-
7
5
  describe('ThemeProvider', () => {
8
6
  it('can nest theme providers', () => {
9
7
  render(
@@ -49,6 +47,36 @@ describe('ThemeProvider', () => {
49
47
  );
50
48
  });
51
49
 
50
+ it('sets business themes', () => {
51
+ render(
52
+ <ThemeProvider theme="business">
53
+ <div>business</div>
54
+ <ThemeProvider theme="business" screenMode="dark">
55
+ <div>business-dark</div>
56
+ </ThemeProvider>
57
+ <ThemeProvider theme="business--bright-green">
58
+ <div>business--bright-green</div>
59
+ </ThemeProvider>
60
+ <ThemeProvider theme="business--forest-green">
61
+ <div>business--forest-green</div>
62
+ </ThemeProvider>
63
+ </ThemeProvider>,
64
+ );
65
+
66
+ // eslint-disable-next-line testing-library/no-node-access
67
+ expect(screen.getByText('business').parentElement).toHaveClass('np-theme-business');
68
+ // eslint-disable-next-line testing-library/no-node-access
69
+ expect(screen.getByText('business-dark').parentElement).toHaveClass('np-theme-business--dark');
70
+ // eslint-disable-next-line testing-library/no-node-access
71
+ expect(screen.getByText('business--bright-green').parentElement).toHaveClass(
72
+ 'np-theme-business--bright-green',
73
+ );
74
+ // eslint-disable-next-line testing-library/no-node-access
75
+ expect(screen.getByText('business--forest-green').parentElement).toHaveClass(
76
+ 'np-theme-business--forest-green',
77
+ );
78
+ });
79
+
52
80
  it('matches snapshot', () => {
53
81
  const { asFragment } = render(
54
82
  <ThemeProvider theme="light">
package/src/const.ts CHANGED
@@ -1,8 +1,13 @@
1
1
  // TODO: Change 'light' with 'legacy' in the future
2
- export const baseThemes = ['light', 'personal'] as const;
2
+ export const baseThemes = ['light', 'personal', 'business'] as const;
3
3
  export const extraThemes = ['forest-green', 'bright-green'] as const;
4
4
  export const screenModes = ['light', 'dark'] as const;
5
- export const modernThemes = [baseThemes[1], ...extraThemes] as const;
5
+ export const modernThemes = [baseThemes[1], baseThemes[2], ...extraThemes] as const;
6
+ export const businessThemes = [
7
+ 'business',
8
+ 'business--forest-green',
9
+ 'business--bright-green',
10
+ ] as const;
6
11
  export const platformThemes = ['platform', 'platform--forest-green'] as const;
7
12
 
8
13
  // TODO: componentThemes returned back for backward compatibility, refactor this place in the future
@@ -15,12 +20,23 @@ export type ScreenMode = (typeof screenModes)[number];
15
20
  export type ScreenModeDark = (typeof screenModes)[1];
16
21
  export type PlatformTheme = (typeof platformThemes)[0];
17
22
  export type PlatformForestGreenTheme = (typeof platformThemes)[1];
23
+ export type BusinessTheme = (typeof businessThemes)[0];
24
+ export type BusinessForestGreenTheme = (typeof businessThemes)[1];
25
+ export type BusinessBrightGreenTheme = (typeof businessThemes)[2];
18
26
 
19
27
  export const DEFAULT_BASE_THEME = 'light';
20
28
  export const DEFAULT_SCREEN_MODE = 'light';
21
29
 
22
30
  export type Theming = {
23
- theme?: ComponentTheme | BaseTheme | ExtraTheme | PlatformTheme | PlatformForestGreenTheme;
31
+ theme?:
32
+ | ComponentTheme
33
+ | BaseTheme
34
+ | ExtraTheme
35
+ | BusinessTheme
36
+ | BusinessForestGreenTheme
37
+ | BusinessBrightGreenTheme
38
+ | PlatformTheme
39
+ | PlatformForestGreenTheme;
24
40
  screenMode?: ScreenMode;
25
41
  isNotRootProvider?: boolean | undefined;
26
42
  };
package/src/helpers.ts CHANGED
@@ -29,7 +29,7 @@ export const getThemeClassName = (theme: NonNullable<Theming['theme']>, screenMo
29
29
  return `np-theme-${theme || 'personal'}`;
30
30
  }
31
31
 
32
- let classes = `np-theme-personal`;
32
+ let classes = `np-theme-${theme === 'business' ? 'business' : 'personal'}`;
33
33
 
34
34
  if (isExtraTheme(theme)) {
35
35
  classes += ` ${classes}--${theme}`;