@wise/components-theming 1.3.0 → 1.5.0

package/dist/ThemeProvider.d.ts

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
 import type { ScreenMode, Theming } from './const';
 export declare const ThemeContext: import("react").Context<{
-    theme: NonNullable<Theming['theme']>;
+    theme: NonNullable<Theming["theme"]>;
     screenMode: ScreenMode;
 } | undefined>;
 type ThemeProviderProps = PropsWithChildren<Theming> & {

package/dist/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,iBAAiB,EAAkC,MAAM,OAAO,CAAC;AAGzF,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAInD,eAAO,MAAM,YAAY;WAEZ,YAAY,OAAO,CAAC,OAAO,CAAC,CAAC;gBACxB,UAAU;cAGhB,CAAC;AAEb,KAAK,kBAAkB,GAAG,iBAAiB,CAAC,OAAO,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAK9E,eAAO,MAAM,aAAa,mEAMvB,kBAAkB,gCAyBpB,CAAC"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,iBAAiB,EAAkC,MAAM,OAAO,CAAC;AAGzF,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAInD,eAAO,MAAM,YAAY;WAEZ,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;gBACxB,UAAU;cAGhB,CAAC;AAEb,KAAK,kBAAkB,GAAG,iBAAiB,CAAC,OAAO,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAK9E,eAAO,MAAM,aAAa,mEAMvB,kBAAkB,gCAyBpB,CAAC"}

package/dist/ThemeProvider.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var react = require('react');
+var ThemedChildren = require('./ThemedChildren.js');
+var _const = require('./const.js');
+var helpers = require('./helpers.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+const ThemeContext = /*#__PURE__*/react.createContext(undefined);
+// RegEx to check for `np-theme-` class name
+const themeClass = /\bnp-theme-[a-z-]+\b/g;
+const ThemeProvider = ({
+  theme = _const.DEFAULT_BASE_THEME,
+  screenMode = _const.DEFAULT_SCREEN_MODE,
+  isNotRootProvider = false,
+  children,
+  className = undefined
+}) => {
+  const isContextRoot = react.useContext(ThemeContext) === undefined;
+  // useEffect hook used to apply the theme class to the HTML element
+  react.useEffect(() => {
+    if (!isNotRootProvider && isContextRoot) {
+      // Remove all the theme classes from the documentElement
+      document.documentElement.className.match(themeClass)?.forEach(item => {
+        document.documentElement.classList.remove(item);
+      });
+      helpers.getThemeClassName(theme, screenMode).split(' ').forEach(item => {
+        document.documentElement.classList.add(item);
+      });
+    }
+  }, [isNotRootProvider, isContextRoot, theme, screenMode]);
+  const contextValue = react.useMemo(() => ({
+    theme,
+    screenMode
+  }), [screenMode, theme]);
+  return /*#__PURE__*/jsxRuntime.jsx(ThemeContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/jsxRuntime.jsx(ThemedChildren.ThemedChildren, {
+      className: className,
+      children: children
+    })
+  });
+};
+
+exports.ThemeContext = ThemeContext;
+exports.ThemeProvider = ThemeProvider;
+//# sourceMappingURL=ThemeProvider.js.map

package/dist/ThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.js","sources":["../src/ThemeProvider.tsx"],"sourcesContent":["import { createContext, PropsWithChildren, useContext, useEffect, useMemo } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName } from './helpers';\n\nexport const ThemeContext = createContext<\n  | {\n      theme: NonNullable<Theming['theme']>;\n      screenMode: ScreenMode;\n    }\n  | undefined\n>(undefined);\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":["ThemeContext","createContext","undefined","themeClass","ThemeProvider","theme","DEFAULT_BASE_THEME","screenMode","DEFAULT_SCREEN_MODE","isNotRootProvider","children","className","isContextRoot","useContext","useEffect","document","documentElement","match","forEach","item","classList","remove","getThemeClassName","split","add","contextValue","useMemo","_jsx","Provider","value","ThemedChildren"],"mappings":";;;;;;;;MAOaA,YAAY,gBAAGC,mBAAa,CAMvCC,SAAS,EAAC;AAIZ;AACA,MAAMC,UAAU,GAAG,uBAAuB,CAAA;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,GAAGT,SAAAA;AACO,CAAA,KAAI;AACvB,EAAA,MAAMU,aAAa,GAAGC,gBAAU,CAACb,YAAY,CAAC,KAAKE,SAAS,CAAA;AAE5D;AACAY,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAI,CAACL,iBAAiB,IAAIG,aAAa,EAAE;AACvC;AACAG,MAAAA,QAAQ,CAACC,eAAe,CAACL,SAAS,CAACM,KAAK,CAACd,UAAU,CAAC,EAAEe,OAAO,CAAEC,IAAI,IAAI;QACrEJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACC,MAAM,CAACF,IAAI,CAAC,CAAA;AACjD,OAAC,CAAC,CAAA;AACFG,MAAAA,yBAAiB,CAACjB,KAAK,EAAEE,UAAU,CAAC,CACjCgB,KAAK,CAAC,GAAG,CAAC,CACVL,OAAO,CAAEC,IAAI,IAAI;QAChBJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACI,GAAG,CAACL,IAAI,CAAC,CAAA;AAC9C,OAAC,CAAC,CAAA;AACN,KAAA;GACD,EAAE,CAACV,iBAAiB,EAAEG,aAAa,EAAEP,KAAK,EAAEE,UAAU,CAAC,CAAC,CAAA;AAEzD,EAAA,MAAMkB,YAAY,GAAGC,aAAO,CAAC,OAAO;IAAErB,KAAK;AAAEE,IAAAA,UAAAA;AAAU,GAAE,CAAC,EAAE,CAACA,UAAU,EAAEF,KAAK,CAAC,CAAC,CAAA;AAEhF,EAAA,oBACEsB,cAAA,CAAC3B,YAAY,CAAC4B,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEJ,YAAa;IAAAf,QAAA,eACzCiB,cAAA,CAACG,6BAAc,EAAA;AAACnB,MAAAA,SAAS,EAAEA,SAAU;AAAAD,MAAAA,QAAA,EAAEA,QAAAA;KAAyB,CAAA;AAClE,GAAuB,CAAC,CAAA;AAE5B;;;;;"}

package/dist/ThemeProvider.mjs

@@ -0,0 +1,44 @@
+import { createContext, useContext, useEffect, useMemo } from 'react';
+import { ThemedChildren } from './ThemedChildren.mjs';
+import { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const.mjs';
+import { getThemeClassName } from './helpers.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const ThemeContext = /*#__PURE__*/createContext(undefined);
+// RegEx to check for `np-theme-` class name
+const themeClass = /\bnp-theme-[a-z-]+\b/g;
+const ThemeProvider = ({
+  theme = DEFAULT_BASE_THEME,
+  screenMode = DEFAULT_SCREEN_MODE,
+  isNotRootProvider = false,
+  children,
+  className = undefined
+}) => {
+  const isContextRoot = useContext(ThemeContext) === undefined;
+  // useEffect hook used to apply the theme class to the HTML element
+  useEffect(() => {
+    if (!isNotRootProvider && isContextRoot) {
+      // Remove all the theme classes from the documentElement
+      document.documentElement.className.match(themeClass)?.forEach(item => {
+        document.documentElement.classList.remove(item);
+      });
+      getThemeClassName(theme, screenMode).split(' ').forEach(item => {
+        document.documentElement.classList.add(item);
+      });
+    }
+  }, [isNotRootProvider, isContextRoot, theme, screenMode]);
+  const contextValue = useMemo(() => ({
+    theme,
+    screenMode
+  }), [screenMode, theme]);
+  return /*#__PURE__*/jsx(ThemeContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/jsx(ThemedChildren, {
+      className: className,
+      children: children
+    })
+  });
+};
+
+export { ThemeContext, ThemeProvider };
+//# sourceMappingURL=ThemeProvider.mjs.map

package/dist/ThemeProvider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.mjs","sources":["../src/ThemeProvider.tsx"],"sourcesContent":["import { createContext, PropsWithChildren, useContext, useEffect, useMemo } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName } from './helpers';\n\nexport const ThemeContext = createContext<\n  | {\n      theme: NonNullable<Theming['theme']>;\n      screenMode: ScreenMode;\n    }\n  | undefined\n>(undefined);\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":["ThemeContext","createContext","undefined","themeClass","ThemeProvider","theme","DEFAULT_BASE_THEME","screenMode","DEFAULT_SCREEN_MODE","isNotRootProvider","children","className","isContextRoot","useContext","useEffect","document","documentElement","match","forEach","item","classList","remove","getThemeClassName","split","add","contextValue","useMemo","_jsx","Provider","value","ThemedChildren"],"mappings":";;;;;;MAOaA,YAAY,gBAAGC,aAAa,CAMvCC,SAAS,EAAC;AAIZ;AACA,MAAMC,UAAU,GAAG,uBAAuB,CAAA;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,GAAGT,SAAAA;AACO,CAAA,KAAI;AACvB,EAAA,MAAMU,aAAa,GAAGC,UAAU,CAACb,YAAY,CAAC,KAAKE,SAAS,CAAA;AAE5D;AACAY,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAI,CAACL,iBAAiB,IAAIG,aAAa,EAAE;AACvC;AACAG,MAAAA,QAAQ,CAACC,eAAe,CAACL,SAAS,CAACM,KAAK,CAACd,UAAU,CAAC,EAAEe,OAAO,CAAEC,IAAI,IAAI;QACrEJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACC,MAAM,CAACF,IAAI,CAAC,CAAA;AACjD,OAAC,CAAC,CAAA;AACFG,MAAAA,iBAAiB,CAACjB,KAAK,EAAEE,UAAU,CAAC,CACjCgB,KAAK,CAAC,GAAG,CAAC,CACVL,OAAO,CAAEC,IAAI,IAAI;QAChBJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACI,GAAG,CAACL,IAAI,CAAC,CAAA;AAC9C,OAAC,CAAC,CAAA;AACN,KAAA;GACD,EAAE,CAACV,iBAAiB,EAAEG,aAAa,EAAEP,KAAK,EAAEE,UAAU,CAAC,CAAC,CAAA;AAEzD,EAAA,MAAMkB,YAAY,GAAGC,OAAO,CAAC,OAAO;IAAErB,KAAK;AAAEE,IAAAA,UAAAA;AAAU,GAAE,CAAC,EAAE,CAACA,UAAU,EAAEF,KAAK,CAAC,CAAC,CAAA;AAEhF,EAAA,oBACEsB,GAAA,CAAC3B,YAAY,CAAC4B,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEJ,YAAa;IAAAf,QAAA,eACzCiB,GAAA,CAACG,cAAc,EAAA;AAACnB,MAAAA,SAAS,EAAEA,SAAU;AAAAD,MAAAA,QAAA,EAAEA,QAAAA;KAAyB,CAAA;AAClE,GAAuB,CAAC,CAAA;AAE5B;;;;"}

package/dist/ThemedChildren.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var clsx = require('clsx');
+var useTheme = require('./useTheme.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+const ThemedChildren = ({
+  className = undefined,
+  children
+}) => {
+  const {
+    className: themeClass
+  } = useTheme.useTheme();
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: clsx.clsx(themeClass, className),
+    children: children
+  });
+};
+
+exports.ThemedChildren = ThemedChildren;
+//# sourceMappingURL=ThemedChildren.js.map

package/dist/ThemedChildren.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemedChildren.js","sources":["../src/ThemedChildren.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { useTheme } from './useTheme';\n\ntype ThemedChildrenProps = { className?: string; children: ReactNode };\n\nexport const ThemedChildren = ({ className = undefined, children }: ThemedChildrenProps) => {\n  const { className: themeClass } = useTheme();\n\n  return <div className={clsx(themeClass, className)}>{children}</div>;\n};\n"],"names":["ThemedChildren","className","undefined","children","themeClass","useTheme","_jsx","clsx"],"mappings":";;;;;;AAOO,MAAMA,cAAc,GAAGA,CAAC;AAAEC,EAAAA,SAAS,GAAGC,SAAS;AAAEC,EAAAA,QAAAA;AAAQ,CAAuB,KAAI;EACzF,MAAM;AAAEF,IAAAA,SAAS,EAAEG,UAAAA;GAAY,GAAGC,iBAAQ,EAAE,CAAA;AAE5C,EAAA,oBAAOC,cAAA,CAAA,KAAA,EAAA;AAAKL,IAAAA,SAAS,EAAEM,SAAI,CAACH,UAAU,EAAEH,SAAS,CAAE;AAAAE,IAAAA,QAAA,EAAEA,QAAAA;AAAQ,GAAM,CAAC,CAAA;AACtE;;;;"}

package/dist/ThemedChildren.mjs

@@ -0,0 +1,19 @@
+import { clsx } from 'clsx';
+import { useTheme } from './useTheme.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const ThemedChildren = ({
+  className = undefined,
+  children
+}) => {
+  const {
+    className: themeClass
+  } = useTheme();
+  return /*#__PURE__*/jsx("div", {
+    className: clsx(themeClass, className),
+    children: children
+  });
+};
+
+export { ThemedChildren };
+//# sourceMappingURL=ThemedChildren.mjs.map

package/dist/ThemedChildren.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemedChildren.mjs","sources":["../src/ThemedChildren.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { useTheme } from './useTheme';\n\ntype ThemedChildrenProps = { className?: string; children: ReactNode };\n\nexport const ThemedChildren = ({ className = undefined, children }: ThemedChildrenProps) => {\n  const { className: themeClass } = useTheme();\n\n  return <div className={clsx(themeClass, className)}>{children}</div>;\n};\n"],"names":["ThemedChildren","className","undefined","children","themeClass","useTheme","_jsx","clsx"],"mappings":";;;;AAOO,MAAMA,cAAc,GAAGA,CAAC;AAAEC,EAAAA,SAAS,GAAGC,SAAS;AAAEC,EAAAA,QAAAA;AAAQ,CAAuB,KAAI;EACzF,MAAM;AAAEF,IAAAA,SAAS,EAAEG,UAAAA;GAAY,GAAGC,QAAQ,EAAE,CAAA;AAE5C,EAAA,oBAAOC,GAAA,CAAA,KAAA,EAAA;AAAKL,IAAAA,SAAS,EAAEM,IAAI,CAACH,UAAU,EAAEH,SAAS,CAAE;AAAAE,IAAAA,QAAA,EAAEA,QAAAA;AAAQ,GAAM,CAAC,CAAA;AACtE;;;;"}

package/dist/const.js

@@ -0,0 +1,17 @@
+'use strict';
+
+// TODO: Change 'light' with 'legacy' in the future
+const baseThemes = ['light', 'personal'];
+const extraThemes = ['forest-green', 'bright-green'];
+const screenModes = ['light', 'dark'];
+const modernThemes = [baseThemes[1], ...extraThemes];
+const DEFAULT_BASE_THEME = 'light';
+const DEFAULT_SCREEN_MODE = 'light';
+
+exports.DEFAULT_BASE_THEME = DEFAULT_BASE_THEME;
+exports.DEFAULT_SCREEN_MODE = DEFAULT_SCREEN_MODE;
+exports.baseThemes = baseThemes;
+exports.extraThemes = extraThemes;
+exports.modernThemes = modernThemes;
+exports.screenModes = screenModes;
+//# sourceMappingURL=const.js.map

package/dist/const.js.map

@@ -0,0 +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,EAAU;MAC3CC,WAAW,GAAG,CAAC,cAAc,EAAE,cAAc,EAAU;MACvDC,WAAW,GAAG,CAAC,OAAO,EAAE,MAAM,EAAU;AAC9C,MAAMC,YAAY,GAAG,CAACH,UAAU,CAAC,CAAC,CAAC,EAAE,GAAGC,WAAW,EAAU;AAc7D,MAAMG,kBAAkB,GAAG,QAAO;AAClC,MAAMC,mBAAmB,GAAG;;;;;;;;;"}

package/dist/const.mjs

@@ -0,0 +1,10 @@
+// TODO: Change 'light' with 'legacy' in the future
+const baseThemes = ['light', 'personal'];
+const extraThemes = ['forest-green', 'bright-green'];
+const screenModes = ['light', 'dark'];
+const modernThemes = [baseThemes[1], ...extraThemes];
+const DEFAULT_BASE_THEME = 'light';
+const DEFAULT_SCREEN_MODE = 'light';
+
+export { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE, baseThemes, extraThemes, modernThemes, screenModes };
+//# sourceMappingURL=const.mjs.map

package/dist/const.mjs.map

@@ -0,0 +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,EAAU;MAC3CC,WAAW,GAAG,CAAC,cAAc,EAAE,cAAc,EAAU;MACvDC,WAAW,GAAG,CAAC,OAAO,EAAE,MAAM,EAAU;AAC9C,MAAMC,YAAY,GAAG,CAACH,UAAU,CAAC,CAAC,CAAC,EAAE,GAAGC,WAAW,EAAU;AAc7D,MAAMG,kBAAkB,GAAG,QAAO;AAClC,MAAMC,mBAAmB,GAAG;;;;"}

package/dist/helpers.d.ts

@@ -1,7 +1,7 @@
-import type { ScreenMode, Theming } from './const';
-export declare const isThemeModern: (theme: NonNullable<Theming['theme']>) => theme is "personal" | "forest-green" | "bright-green";
-export declare const isExtraTheme: (theme: NonNullable<Theming['theme']>) => theme is "forest-green" | "bright-green";
-export declare const isForestGreenTheme: (theme: NonNullable<Theming['theme']>) => theme is "forest-green";
-export declare const isScreenModeDark: (theme: NonNullable<Theming['theme']>, screenMode: ScreenMode) => screenMode is "dark";
-export declare const getThemeClassName: (theme: NonNullable<Theming['theme']>, screenMode: ScreenMode) => string;
+import type { ModernTheme, ExtraTheme, ForestGreenTheme, ScreenMode, ScreenModeDark, Theming } from './const';
+export declare const isThemeModern: (theme: NonNullable<Theming["theme"]>) => theme is ModernTheme;
+export declare const isExtraTheme: (theme: NonNullable<Theming["theme"]>) => theme is ExtraTheme;
+export declare const isForestGreenTheme: (theme: NonNullable<Theming["theme"]>) => theme is ForestGreenTheme;
+export declare const isScreenModeDark: (theme: NonNullable<Theming["theme"]>, screenMode: ScreenMode) => screenMode is ScreenModeDark;
+export declare const getThemeClassName: (theme: NonNullable<Theming["theme"]>, screenMode: ScreenMode) => string;
 //# sourceMappingURL=helpers.d.ts.map

package/dist/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAIV,UAAU,EAEV,OAAO,EACR,MAAM,SAAS,CAAC;AAGjB,eAAO,MAAM,aAAa,UAAW,YAAY,OAAO,CAAC,OAAO,CAAC,CAAC,0DACrB,CAAC;AAE9C,eAAO,MAAM,YAAY,UAAW,YAAY,OAAO,CAAC,OAAO,CAAC,CAAC,6CACtB,CAAC;AAE5C,eAAO,MAAM,kBAAkB,UACtB,YAAY,OAAO,CAAC,OAAO,CAAC,CAAC,4BACkB,CAAC;AAEzD,eAAO,MAAM,gBAAgB,UACpB,YAAY,OAAO,CAAC,OAAO,CAAC,CAAC,cACxB,UAAU,yBAE8C,CAAC;AAEvE,eAAO,MAAM,iBAAiB,UAAW,YAAY,OAAO,CAAC,OAAO,CAAC,CAAC,cAAc,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,UAAW,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAG,KAAK,IAAI,WACjC,CAAC;AAE9C,eAAO,MAAM,YAAY,UAAW,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAG,KAAK,IAAI,UAClC,CAAC;AAE5C,eAAO,MAAM,kBAAkB,UACtB,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KACnC,KAAK,IAAI,gBAA4C,CAAC;AAEzD,eAAO,MAAM,gBAAgB,UACpB,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,cACxB,UAAU,KACrB,UAAU,IAAI,cACqD,CAAC;AAEvE,eAAO,MAAM,iBAAiB,UAAW,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,cAAc,UAAU,WAc7F,CAAC"}

package/dist/helpers.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var _const = require('./const.js');
+
+const isThemeModern = theme => _const.modernThemes.includes(theme);
+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'}`;
+  }
+  let classes = `np-theme-personal`;
+  if (isExtraTheme(theme)) {
+    classes += ` ${classes}--${theme}`;
+  } else if (_const.screenModes[1] === screenMode) {
+    classes += ` ${classes}--${screenMode}`;
+  }
+  return classes;
+};
+
+exports.getThemeClassName = getThemeClassName;
+exports.isExtraTheme = isExtraTheme;
+exports.isForestGreenTheme = isForestGreenTheme;
+exports.isScreenModeDark = isScreenModeDark;
+exports.isThemeModern = isThemeModern;
+//# sourceMappingURL=helpers.js.map

package/dist/helpers.js.map

@@ -0,0 +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,EAAC;AAEtC,MAAMG,YAAY,GAAIH,KAAoC,IAC/DI,kBAAW,CAACF,QAAQ,CAACF,KAAmB,EAAC;AAEpC,MAAMK,kBAAkB,GAC7BL,KAAoC,IACNA,KAAK,KAAKI,kBAAW,CAAC,CAAC,EAAC;MAE3CE,gBAAgB,GAAGA,CAC9BN,KAAoC,EACpCO,UAAsB,KAEtBR,aAAa,CAACC,KAAoB,CAAC,IAAIQ,kBAAW,CAAC,CAAC,CAAC,KAAKD,WAAU;MAEzDE,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,CAAA;AAC1C,GAAA;EAEA,IAAIU,OAAO,GAAG,CAAmB,iBAAA,CAAA,CAAA;AAEjC,EAAA,IAAIP,YAAY,CAACH,KAAK,CAAC,EAAE;AACvBU,IAAAA,OAAO,IAAI,CAAA,CAAA,EAAIA,OAAO,CAAA,EAAA,EAAKV,KAAK,CAAE,CAAA,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,CAAA;AACzC,GAAA;AAEA,EAAA,OAAOG,OAAO,CAAA;AAChB;;;;;;;;"}

package/dist/helpers.mjs

@@ -0,0 +1,21 @@
+import { modernThemes, extraThemes, screenModes } from './const.mjs';
+
+const isThemeModern = theme => modernThemes.includes(theme);
+const isExtraTheme = theme => extraThemes.includes(theme);
+const isForestGreenTheme = theme => theme === extraThemes[0];
+const isScreenModeDark = (theme, screenMode) => isThemeModern(theme) && screenModes[1] === screenMode;
+const getThemeClassName = (theme, screenMode) => {
+  if (!isThemeModern(theme)) {
+    return `np-theme-${theme || 'personal'}`;
+  }
+  let classes = `np-theme-personal`;
+  if (isExtraTheme(theme)) {
+    classes += ` ${classes}--${theme}`;
+  } else if (screenModes[1] === screenMode) {
+    classes += ` ${classes}--${screenMode}`;
+  }
+  return classes;
+};
+
+export { getThemeClassName, isExtraTheme, isForestGreenTheme, isScreenModeDark, isThemeModern };
+//# sourceMappingURL=helpers.mjs.map

package/dist/helpers.mjs.map

@@ -0,0 +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,EAAC;AAEtC,MAAMG,YAAY,GAAIH,KAAoC,IAC/DI,WAAW,CAACF,QAAQ,CAACF,KAAmB,EAAC;AAEpC,MAAMK,kBAAkB,GAC7BL,KAAoC,IACNA,KAAK,KAAKI,WAAW,CAAC,CAAC,EAAC;MAE3CE,gBAAgB,GAAGA,CAC9BN,KAAoC,EACpCO,UAAsB,KAEtBR,aAAa,CAACC,KAAoB,CAAC,IAAIQ,WAAW,CAAC,CAAC,CAAC,KAAKD,WAAU;MAEzDE,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,CAAA;AAC1C,GAAA;EAEA,IAAIU,OAAO,GAAG,CAAmB,iBAAA,CAAA,CAAA;AAEjC,EAAA,IAAIP,YAAY,CAACH,KAAK,CAAC,EAAE;AACvBU,IAAAA,OAAO,IAAI,CAAA,CAAA,EAAIA,OAAO,CAAA,EAAA,EAAKV,KAAK,CAAE,CAAA,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,CAAA;AACzC,GAAA;AAEA,EAAA,OAAOG,OAAO,CAAA;AAChB;;;;"}

package/dist/index.js

@@ -1,124 +1,16 @@
 'use strict';
 
-var react = require('react');
-var classNames = require('classnames');
-var jsxRuntime = require('react/jsx-runtime');
+var helpers = require('./helpers.js');
+var ThemeProvider = require('./ThemeProvider.js');
+var useTheme = require('./useTheme.js');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 
-// TODO: Change 'light' with 'legacy' in the future
-const baseThemes = ['light', 'personal'];
-const extraThemes = ['forest-green', 'bright-green'];
-const screenModes = ['light', 'dark'];
-const modernThemes = [baseThemes[1], ...extraThemes];
-const DEFAULT_BASE_THEME = 'light';
-const DEFAULT_SCREEN_MODE = 'light';
-
-const isThemeModern = theme => modernThemes.includes(theme);
-const isExtraTheme = theme => extraThemes.includes(theme);
-const isForestGreenTheme = theme => theme === extraThemes[0];
-const isScreenModeDark = (theme, screenMode) => isThemeModern(theme) && screenModes[1] === screenMode;
-const getThemeClassName = (theme, screenMode) => {
-  if (!isThemeModern(theme)) {
-    return `np-theme-${theme || 'personal'}`;
-  }
-  let classes = `np-theme-personal`;
-  if (isExtraTheme(theme)) {
-    classes += ` ${classes}--${theme}`;
-  } else if (screenModes[1] === screenMode) {
-    classes += ` ${classes}--${screenMode}`;
-  }
-  return classes;
-};
-
-const FALLBACK_VALUES = {
-  theme: DEFAULT_BASE_THEME,
-  screenMode: DEFAULT_SCREEN_MODE
-};
-const isNotProduction = () => {
-  try {
-    return ['localhost', 'dev-wi.se'].includes(window.location.hostname);
-  } catch {
-    return false;
-  }
-};
-const useTheme = () => {
-  const theming = react.useContext(ThemeContext);
-  if (!theming && isNotProduction()) {
-    // eslint-disable-next-line no-console
-    console.warn('Call to useTheme outside a ThemeProvider');
-  }
-  const {
-    theme,
-    screenMode: contextScreenMode
-  } = theming ?? FALLBACK_VALUES;
-  const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;
-  return react.useMemo(() => ({
-    theme,
-    screenMode,
-    isModern: isThemeModern(theme),
-    isForestGreenTheme: isForestGreenTheme(theme),
-    isScreenModeDark: isScreenModeDark(theme, screenMode),
-    className: getThemeClassName(theme, screenMode)
-  }), [theme, screenMode]);
-};
-
-const ThemedChildren = ({
-  className = undefined,
-  children
-}) => {
-  const {
-    className: themeClass
-  } = useTheme();
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: classNames__default.default(themeClass, className),
-    children: children
-  });
-};
-
-const ThemeContext = /*#__PURE__*/react.createContext(undefined);
-// RegEx to check for `np-theme-` class name
-const themeClass = /\bnp-theme-[a-z-]+\b/g;
-const ThemeProvider = ({
-  theme = DEFAULT_BASE_THEME,
-  screenMode = DEFAULT_SCREEN_MODE,
-  isNotRootProvider = false,
-  children,
-  className = undefined
-}) => {
-  const isContextRoot = react.useContext(ThemeContext) === undefined;
-  // useEffect hook used to apply the theme class to the HTML element
-  react.useEffect(() => {
-    if (!isNotRootProvider && isContextRoot) {
-      // Remove all the theme classes from the documentElement
-      document.documentElement.className.match(themeClass)?.forEach(item => {
-        document.documentElement.classList.remove(item);
-      });
-      getThemeClassName(theme, screenMode).split(' ').forEach(item => {
-        document.documentElement.classList.add(item);
-      });
-    }
-  }, [isNotRootProvider, isContextRoot, theme, screenMode]);
-  const contextValue = react.useMemo(() => ({
-    theme,
-    screenMode
-  }), [screenMode, theme]);
-  return /*#__PURE__*/jsxRuntime.jsx(ThemeContext.Provider, {
-    value: contextValue,
-    children: /*#__PURE__*/jsxRuntime.jsx(ThemedChildren, {
-      className: className,
-      children: children
-    })
-  });
-};
-
-exports.ThemeProvider = ThemeProvider;
-exports.getThemeClassName = getThemeClassName;
-exports.isExtraTheme = isExtraTheme;
-exports.isForestGreenTheme = isForestGreenTheme;
-exports.isScreenModeDark = isScreenModeDark;
-exports.isThemeModern = isThemeModern;
-exports.useTheme = useTheme;
+exports.getThemeClassName = helpers.getThemeClassName;
+exports.isExtraTheme = helpers.isExtraTheme;
+exports.isForestGreenTheme = helpers.isForestGreenTheme;
+exports.isScreenModeDark = helpers.isScreenModeDark;
+exports.isThemeModern = helpers.isThemeModern;
+exports.ThemeProvider = ThemeProvider.ThemeProvider;
+exports.useTheme = useTheme.useTheme;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/const.ts","../src/helpers.ts","../src/useTheme.ts","../src/ThemedChildren.tsx","../src/ThemeProvider.tsx"],"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","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","import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\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","import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport { useTheme } from './useTheme';\n\ntype ThemedChildrenProps = { className?: string; children: ReactNode };\n\nexport const ThemedChildren = ({ className = undefined, children }: ThemedChildrenProps) => {\n  const { className: themeClass } = useTheme();\n\n  return <div className={classNames(themeClass, className)}>{children}</div>;\n};\n","import { createContext, PropsWithChildren, useContext, useEffect, useMemo } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName } from './helpers';\n\nexport const ThemeContext = createContext<\n  | {\n      theme: NonNullable<Theming['theme']>;\n      screenMode: ScreenMode;\n    }\n  | undefined\n>(undefined);\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":["baseThemes","extraThemes","screenModes","modernThemes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE","isThemeModern","theme","includes","isExtraTheme","isForestGreenTheme","isScreenModeDark","screenMode","getThemeClassName","classes","FALLBACK_VALUES","isNotProduction","window","location","hostname","useTheme","theming","useContext","ThemeContext","console","warn","contextScreenMode","useMemo","isModern","className","ThemedChildren","undefined","children","themeClass","_jsx","classNames","createContext","ThemeProvider","isNotRootProvider","isContextRoot","useEffect","document","documentElement","match","forEach","item","classList","remove","split","add","contextValue","Provider","value"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/dist/index.mjs

@@ -1,112 +1,4 @@
-import { useContext, useMemo, createContext, useEffect } from 'react';
-import classNames from 'classnames';
-import { jsx } from 'react/jsx-runtime';
-
-// TODO: Change 'light' with 'legacy' in the future
-const baseThemes = ['light', 'personal'];
-const extraThemes = ['forest-green', 'bright-green'];
-const screenModes = ['light', 'dark'];
-const modernThemes = [baseThemes[1], ...extraThemes];
-const DEFAULT_BASE_THEME = 'light';
-const DEFAULT_SCREEN_MODE = 'light';
-
-const isThemeModern = theme => modernThemes.includes(theme);
-const isExtraTheme = theme => extraThemes.includes(theme);
-const isForestGreenTheme = theme => theme === extraThemes[0];
-const isScreenModeDark = (theme, screenMode) => isThemeModern(theme) && screenModes[1] === screenMode;
-const getThemeClassName = (theme, screenMode) => {
-  if (!isThemeModern(theme)) {
-    return `np-theme-${theme || 'personal'}`;
-  }
-  let classes = `np-theme-personal`;
-  if (isExtraTheme(theme)) {
-    classes += ` ${classes}--${theme}`;
-  } else if (screenModes[1] === screenMode) {
-    classes += ` ${classes}--${screenMode}`;
-  }
-  return classes;
-};
-
-const FALLBACK_VALUES = {
-  theme: DEFAULT_BASE_THEME,
-  screenMode: DEFAULT_SCREEN_MODE
-};
-const isNotProduction = () => {
-  try {
-    return ['localhost', 'dev-wi.se'].includes(window.location.hostname);
-  } catch {
-    return false;
-  }
-};
-const useTheme = () => {
-  const theming = useContext(ThemeContext);
-  if (!theming && isNotProduction()) {
-    // eslint-disable-next-line no-console
-    console.warn('Call to useTheme outside a ThemeProvider');
-  }
-  const {
-    theme,
-    screenMode: contextScreenMode
-  } = theming ?? FALLBACK_VALUES;
-  const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;
-  return useMemo(() => ({
-    theme,
-    screenMode,
-    isModern: isThemeModern(theme),
-    isForestGreenTheme: isForestGreenTheme(theme),
-    isScreenModeDark: isScreenModeDark(theme, screenMode),
-    className: getThemeClassName(theme, screenMode)
-  }), [theme, screenMode]);
-};
-
-const ThemedChildren = ({
-  className = undefined,
-  children
-}) => {
-  const {
-    className: themeClass
-  } = useTheme();
-  return /*#__PURE__*/jsx("div", {
-    className: classNames(themeClass, className),
-    children: children
-  });
-};
-
-const ThemeContext = /*#__PURE__*/createContext(undefined);
-// RegEx to check for `np-theme-` class name
-const themeClass = /\bnp-theme-[a-z-]+\b/g;
-const ThemeProvider = ({
-  theme = DEFAULT_BASE_THEME,
-  screenMode = DEFAULT_SCREEN_MODE,
-  isNotRootProvider = false,
-  children,
-  className = undefined
-}) => {
-  const isContextRoot = useContext(ThemeContext) === undefined;
-  // useEffect hook used to apply the theme class to the HTML element
-  useEffect(() => {
-    if (!isNotRootProvider && isContextRoot) {
-      // Remove all the theme classes from the documentElement
-      document.documentElement.className.match(themeClass)?.forEach(item => {
-        document.documentElement.classList.remove(item);
-      });
-      getThemeClassName(theme, screenMode).split(' ').forEach(item => {
-        document.documentElement.classList.add(item);
-      });
-    }
-  }, [isNotRootProvider, isContextRoot, theme, screenMode]);
-  const contextValue = useMemo(() => ({
-    theme,
-    screenMode
-  }), [screenMode, theme]);
-  return /*#__PURE__*/jsx(ThemeContext.Provider, {
-    value: contextValue,
-    children: /*#__PURE__*/jsx(ThemedChildren, {
-      className: className,
-      children: children
-    })
-  });
-};
-
-export { ThemeProvider, getThemeClassName, isExtraTheme, isForestGreenTheme, isScreenModeDark, isThemeModern, useTheme };
+export { getThemeClassName, isExtraTheme, isForestGreenTheme, isScreenModeDark, isThemeModern } from './helpers.mjs';
+export { ThemeProvider } from './ThemeProvider.mjs';
+export { useTheme } from './useTheme.mjs';
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../src/const.ts","../src/helpers.ts","../src/useTheme.ts","../src/ThemedChildren.tsx","../src/ThemeProvider.tsx"],"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","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","import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\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","import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport { useTheme } from './useTheme';\n\ntype ThemedChildrenProps = { className?: string; children: ReactNode };\n\nexport const ThemedChildren = ({ className = undefined, children }: ThemedChildrenProps) => {\n  const { className: themeClass } = useTheme();\n\n  return <div className={classNames(themeClass, className)}>{children}</div>;\n};\n","import { createContext, PropsWithChildren, useContext, useEffect, useMemo } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName } from './helpers';\n\nexport const ThemeContext = createContext<\n  | {\n      theme: NonNullable<Theming['theme']>;\n      screenMode: ScreenMode;\n    }\n  | undefined\n>(undefined);\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":["baseThemes","extraThemes","screenModes","modernThemes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE","isThemeModern","theme","includes","isExtraTheme","isForestGreenTheme","isScreenModeDark","screenMode","getThemeClassName","classes","FALLBACK_VALUES","isNotProduction","window","location","hostname","useTheme","theming","useContext","ThemeContext","console","warn","contextScreenMode","useMemo","isModern","className","ThemedChildren","undefined","children","themeClass","_jsx","classNames","createContext","ThemeProvider","isNotRootProvider","isContextRoot","useEffect","document","documentElement","match","forEach","item","classList","remove","split","add","contextValue","Provider","value"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/useTheme.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var react = require('react');
+var ThemeProvider = require('./ThemeProvider.js');
+var _const = require('./const.js');
+var helpers = require('./helpers.js');
+
+const FALLBACK_VALUES = {
+  theme: _const.DEFAULT_BASE_THEME,
+  screenMode: _const.DEFAULT_SCREEN_MODE
+};
+const isNotProduction = () => {
+  try {
+    return ['localhost', 'dev-wi.se'].includes(window.location.hostname);
+  } catch {
+    return false;
+  }
+};
+const useTheme = () => {
+  const theming = react.useContext(ThemeProvider.ThemeContext);
+  if (!theming && isNotProduction()) {
+    // eslint-disable-next-line no-console
+    console.warn('Call to useTheme outside a ThemeProvider');
+  }
+  const {
+    theme,
+    screenMode: contextScreenMode
+  } = theming ?? FALLBACK_VALUES;
+  const screenMode = theme === _const.DEFAULT_BASE_THEME ? _const.DEFAULT_SCREEN_MODE : contextScreenMode;
+  return react.useMemo(() => ({
+    theme,
+    screenMode,
+    isModern: helpers.isThemeModern(theme),
+    isForestGreenTheme: helpers.isForestGreenTheme(theme),
+    isScreenModeDark: helpers.isScreenModeDark(theme, screenMode),
+    className: helpers.getThemeClassName(theme, screenMode)
+  }), [theme, screenMode]);
+};
+
+exports.useTheme = useTheme;
+//# sourceMappingURL=useTheme.js.map

package/dist/useTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.js","sources":["../src/useTheme.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\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,0BAAAA;CACJ,CAAA;AAEV,MAAMC,eAAe,GAAGA,MAAK;EAC3B,IAAI;AACF,IAAA,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACC,MAAM,CAACC,QAAQ,CAACC,QAAQ,CAAC,CAAA;AACtE,GAAC,CAAC,MAAM;AACN,IAAA,OAAO,KAAK,CAAA;AACd,GAAA;AACF,CAAC,CAAA;AAEYC,MAAAA,QAAQ,GAAGA,MAAqB;AAC3C,EAAA,MAAMC,OAAO,GAAGC,gBAAU,CAACC,0BAAY,CAAC,CAAA;AAExC,EAAA,IAAI,CAACF,OAAO,IAAIN,eAAe,EAAE,EAAE;AACjC;AACAS,IAAAA,OAAO,CAACC,IAAI,CAAC,0CAA0C,CAAC,CAAA;AAC1D,GAAA;EAEA,MAAM;IAAEd,KAAK;AAAEE,IAAAA,UAAU,EAAEa,iBAAAA;GAAmB,GAAGL,OAAO,IAAIX,eAAe,CAAA;EAE3E,MAAMG,UAAU,GAAGF,KAAK,KAAKC,yBAAkB,GAAGE,0BAAmB,GAAGY,iBAAiB,CAAA;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,CAAA;AAC/C,GAAA,CAAC,EACF,CAACF,KAAK,EAAEE,UAAU,CAAC,CACpB,CAAA;AACH;;;;"}

package/dist/useTheme.mjs

@@ -0,0 +1,39 @@
+import { useContext, useMemo } from 'react';
+import { ThemeContext } from './ThemeProvider.mjs';
+import { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const.mjs';
+import { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers.mjs';
+
+const FALLBACK_VALUES = {
+  theme: DEFAULT_BASE_THEME,
+  screenMode: DEFAULT_SCREEN_MODE
+};
+const isNotProduction = () => {
+  try {
+    return ['localhost', 'dev-wi.se'].includes(window.location.hostname);
+  } catch {
+    return false;
+  }
+};
+const useTheme = () => {
+  const theming = useContext(ThemeContext);
+  if (!theming && isNotProduction()) {
+    // eslint-disable-next-line no-console
+    console.warn('Call to useTheme outside a ThemeProvider');
+  }
+  const {
+    theme,
+    screenMode: contextScreenMode
+  } = theming ?? FALLBACK_VALUES;
+  const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;
+  return useMemo(() => ({
+    theme,
+    screenMode,
+    isModern: isThemeModern(theme),
+    isForestGreenTheme: isForestGreenTheme(theme),
+    isScreenModeDark: isScreenModeDark(theme, screenMode),
+    className: getThemeClassName(theme, screenMode)
+  }), [theme, screenMode]);
+};
+
+export { useTheme };
+//# sourceMappingURL=useTheme.mjs.map

package/dist/useTheme.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.mjs","sources":["../src/useTheme.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\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,mBAAAA;CACJ,CAAA;AAEV,MAAMC,eAAe,GAAGA,MAAK;EAC3B,IAAI;AACF,IAAA,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACC,MAAM,CAACC,QAAQ,CAACC,QAAQ,CAAC,CAAA;AACtE,GAAC,CAAC,MAAM;AACN,IAAA,OAAO,KAAK,CAAA;AACd,GAAA;AACF,CAAC,CAAA;AAEYC,MAAAA,QAAQ,GAAGA,MAAqB;AAC3C,EAAA,MAAMC,OAAO,GAAGC,UAAU,CAACC,YAAY,CAAC,CAAA;AAExC,EAAA,IAAI,CAACF,OAAO,IAAIN,eAAe,EAAE,EAAE;AACjC;AACAS,IAAAA,OAAO,CAACC,IAAI,CAAC,0CAA0C,CAAC,CAAA;AAC1D,GAAA;EAEA,MAAM;IAAEd,KAAK;AAAEE,IAAAA,UAAU,EAAEa,iBAAAA;GAAmB,GAAGL,OAAO,IAAIX,eAAe,CAAA;EAE3E,MAAMG,UAAU,GAAGF,KAAK,KAAKC,kBAAkB,GAAGE,mBAAmB,GAAGY,iBAAiB,CAAA;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,CAAA;AAC/C,GAAA,CAAC,EACF,CAACF,KAAK,EAAEE,UAAU,CAAC,CACpB,CAAA;AACH;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/components-theming",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "Provides theming support for the Wise Design system components",
   "license": "Apache-2.0",
   "keywords": [
@@ -12,30 +12,29 @@
     "url": "git+https://github.com/transferwise/neptune-web.git"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.5",
-    "classnames": "^2.5.1"
+    "@babel/runtime": "^7.24.8",
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.5",
-    "@babel/plugin-transform-runtime": "^7.24.3",
-    "@babel/preset-env": "^7.24.5",
-    "@babel/preset-react": "^7.24.1",
-    "@babel/preset-typescript": "^7.24.1",
+    "@babel/core": "^7.24.8",
+    "@babel/plugin-transform-runtime": "^7.24.7",
+    "@babel/preset-env": "^7.24.8",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
-    "@tsconfig/recommended": "^1.0.6",
+    "@testing-library/dom": "^10.3.1",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
+    "@tsconfig/recommended": "^1.0.7",
     "@types/babel__core": "^7.20.5",
     "@types/jest": "^29.5.12",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@types/testing-library__jest-dom": "^5.14.9",
-    "classnames": "^2.5.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "rollup": "^4.17.2",
-    "typescript": "4.9.5"
+    "rollup": "^4.18.1",
+    "rollup-preserve-directives": "^1.1.1"
   },
   "peerDependencies": {
     "react": ">=18",

package/src/ThemedChildren.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { ReactNode } from 'react';
 
 import { useTheme } from './useTheme';
@@ -8,5 +8,5 @@ type ThemedChildrenProps = { className?: string; children: ReactNode };
 export const ThemedChildren = ({ className = undefined, children }: ThemedChildrenProps) => {
   const { className: themeClass } = useTheme();
 
-  return <div className={classNames(themeClass, className)}>{children}</div>;
+  return <div className={clsx(themeClass, className)}>{children}</div>;
 };