@wise/components-theming 0.8.2 → 0.8.3

package/dist/ThemeProvider.d.ts

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+import type { ComponentTheme, BaseTheme, ExtraTheme, ScreenMode, Theming } from './const';
+export declare const ThemeContext: import("react").Context<{
+    theme: ComponentTheme | BaseTheme | ExtraTheme;
+    screenMode: ScreenMode;
+} | undefined>;
+type ThemeProviderProps = PropsWithChildren<Theming> & {
+    className?: string;
+};
+export declare const ThemeProvider: ({ theme, screenMode, isNotRootProvider, children, className, }: ThemeProviderProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/ThemeProvider.d.ts.map

@@ -0,0 +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,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAI1F,eAAO,MAAM,YAAY;WAEZ,cAAc,GAAG,SAAS,GAAG,UAAU;gBAClC,UAAU;cAGhB,CAAC;AAEb,KAAK,kBAAkB,GAAG,iBAAiB,CAAC,OAAO,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9E,eAAO,MAAM,aAAa,mEAMvB,kBAAkB,gCA6BpB,CAAC"}

package/dist/ThemedChildren.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+type ThemedChildrenProps = {
+    className?: string;
+    children: ReactNode;
+};
+export declare const ThemedChildren: ({ className, children }: ThemedChildrenProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ThemedChildren.d.ts.map

package/dist/ThemedChildren.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemedChildren.d.ts","sourceRoot":"","sources":["../src/ThemedChildren.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,KAAK,mBAAmB,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,CAAC;AAEvE,eAAO,MAAM,cAAc,4BAAyC,mBAAmB,gCAItF,CAAC"}

package/dist/const.d.ts

@@ -0,0 +1,19 @@
+export declare const baseThemes: readonly ["light", "personal"];
+export declare const extraThemes: readonly ["forest-green", "bright-green"];
+export declare const screenModes: readonly ["light", "dark"];
+export declare const modernThemes: readonly ["personal", "forest-green", "bright-green"];
+export type ComponentTheme = (typeof baseThemes)[number];
+export type ModernTheme = (typeof modernThemes)[number];
+export type BaseTheme = (typeof baseThemes)[number];
+export type ExtraTheme = (typeof extraThemes)[number];
+export type ForestGreenTheme = (typeof extraThemes)[0];
+export type ScreenMode = (typeof screenModes)[number];
+export type ScreenModeDark = (typeof screenModes)[1];
+export declare const DEFAULT_BASE_THEME: "light";
+export declare const DEFAULT_SCREEN_MODE: "light";
+export type Theming = {
+    theme?: ComponentTheme | BaseTheme | ExtraTheme;
+    screenMode?: ScreenMode;
+    isNotRootProvider?: boolean | undefined;
+};
+//# sourceMappingURL=const.d.ts.map

package/dist/const.d.ts.map

@@ -0,0 +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;AAGrE,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;AAErD,eAAO,MAAM,kBAAkB,SAAmB,CAAC;AACnD,eAAO,MAAM,mBAAmB,SAAmB,CAAC;AAEpD,MAAM,MAAM,OAAO,GAAG;IACpB,KAAK,CAAC,EAAE,cAAc,GAAG,SAAS,GAAG,UAAU,CAAC;IAChD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACzC,CAAC"}

package/dist/helpers.d.ts

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

package/dist/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EAEd,SAAS,EACT,UAAU,EAEV,UAAU,EAEX,MAAM,SAAS,CAAC;AAGjB,eAAO,MAAM,aAAa,UACjB,cAAc,GAAG,SAAS,GAAG,UAAU,0DACsB,CAAC;AAEvE,eAAO,MAAM,YAAY,UAAW,cAAc,GAAG,SAAS,GAAG,UAAU,6CAChC,CAAC;AAE5C,eAAO,MAAM,kBAAkB,UACtB,cAAc,GAAG,SAAS,GAAG,UAAU,4BACQ,CAAC;AAEzD,eAAO,MAAM,gBAAgB,UACpB,cAAc,GAAG,SAAS,GAAG,UAAU,cAClC,UAAU,yBAE8C,CAAC;AAEvE,eAAO,MAAM,iBAAiB,UACrB,cAAc,GAAG,SAAS,GAAG,UAAU,cAClC,UAAU,WAevB,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export type { ComponentTheme, BaseTheme, ExtraTheme, ScreenMode, Theming } from './const';
+export { isThemeModern, isExtraTheme, isForestGreenTheme, isScreenModeDark, getThemeClassName, } from './helpers';
+export { ThemeProvider } from './ThemeProvider';
+export { useTheme } from './useTheme';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAC1F,OAAO,EACL,aAAa,EACb,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/index.esm.js

@@ -0,0 +1,113 @@
+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}`;
+  }
+  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);
+const ThemeProvider = ({
+  theme = DEFAULT_BASE_THEME,
+  screenMode = DEFAULT_SCREEN_MODE,
+  isNotRootProvider = false,
+  children,
+  className = undefined
+}) => {
+  const isContextRoot = useContext(ThemeContext) === undefined;
+  // RegEx to check for `np-theme-` class name
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const themeClass = new RegExp(/\bnp-theme-[a-z-]+\b/, 'g');
+  // 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, themeClass]);
+  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 };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../src/const.ts","../src/helpers.ts","../src/useTheme.ts","../src/ThemedChildren.tsx","../src/ThemeProvider.tsx"],"sourcesContent":[null,null,null,null,null],"names":["baseThemes","extraThemes","screenModes","modernThemes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE","isThemeModern","includes","theme","isExtraTheme","isForestGreenTheme","isScreenModeDark","screenMode","getThemeClassName","FALLBACK_VALUES","isNotProduction","ThemedChildren","className","undefined","children","themeClass","useTheme","_jsx","classNames","createContext","ThemeProvider","isNotRootProvider","useContext","ThemeContext","RegExp"],"mappings":";;;;AACA;AACO,MAAAA,UAAiB,GAAA,CAAA,OAAA,EAAA,UAAA,CAAA,CAAA;AACjB,MAAAC,WAAiB,GAAA,CAAA,cAAA,EAAA,cAAA,CAAA,CAAA;AACjB,MAAAC,WAAkB,GAAA,CAAA,OAAA,EAAA,MAAA,CAAA,CAAA;AAGnB,MAAoBC,YAAA,GAAA,CAAGH,kBAAkBC,WAAU,CAAA,CAAA;AACnD,MAAiBG,kBAAI,GAAO;AAC5B,MAAeC,mBAAW,UAAU;;ACEnC,MAAAC,qBACE,IAAAH,YAAA,CAAAI,QAAiB,CAASC,KAAA,EAAA;AAG5B,MAAAC,oBAA6B,IAAAR,WAAA,CAAAM,SAAiBC,KAAS,EAAA;AAGvD,MAAAE,0BACE,IAAAF,KAAA,KAAAP,WAAiB,CAAS,CAAA,EAAA;MAG5BU,gBAAsB,GAAAA,CAAAH,KAAA,EAAAI,UACN,KAAAN,aAAY,CAAAE,KAAA,CAAA,IAAaN,WAAA,CAAA,CAAA,CAAA,KAAAU,WACxB;MAIjBC,iBAAuB,GAAAA,CAAAL,KAAA,EAAAI,UACP,KAAA;;;;;;;;;;;;;MCnBbE,eAAS,GAAC;AAClBN,EAAAA,KAAkB,EAAAJ;AAClBQ,EAAAA,UAAgB,EAAAP,mBAAAA;;AAEjB,MAAAU,eAAA,GAAAA,MAAA;EAeD,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;ACxBsC,MAAAC,cAAU,GAAAA,CAAA;AAAAC,EAAAA,SAAA,GAAAC,SAAA;AAAAC,EAAAA,QAAAA;AAAA,CAAA,KAAA;EAAC,MAAQ;AAAAF,IAAAA,WAAWG,UAAAA;GAAA,GAAAC,QAAA,EAAA,CAAA;AAAG,EAAA,oBAAAC,GAAA,CAAA,KAAA,EAAA;AAAAL,IAAAA,SAAA,EAAAM,UAAA,CAAAH,UAAA,EAAAH,SAAA,CAAA;AAAAE,IAAAA,QAAA,EAAAA,QAAAA;AAAA,GAAA,CAAA,CAAA;AAEvE,CAAA;;kBCG4B,gBAAAK,aAAA,CAAAN,SAAA,CAAA,CAAA;mBAGf,GAAAO,CAAA;AAAAjB,EAAAA,KAAA,GAAAJ,kBAAA;AAAAQ,EAAAA,UAAA,GAAAP,mBAAA;AAAAqB,EAAAA,iBAAA,GAAA,KAAA;EAAAP,QAAA;AAAAF,EAAAA,SAAA,GAAAC,SAAAA;AAAA,CAAA,KAAA;AAEb,EAAA,mBAAuB,GAAGS,UAAA,CAAAC,YAAkB,CAAA,KAAWV,SAAA,CAAA;AAAE;AAAqB;EAE9E,MAAAE,UAAa,GAAA,IAAAS,MAAA,CAAa,sBAMvB,EAAA,GAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -0,0 +1,125 @@
+'use strict';
+
+var react = require('react');
+var classNames = require('classnames');
+var jsxRuntime = require('react/jsx-runtime');
+
+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}`;
+  }
+  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);
+const ThemeProvider = ({
+  theme = DEFAULT_BASE_THEME,
+  screenMode = DEFAULT_SCREEN_MODE,
+  isNotRootProvider = false,
+  children,
+  className = undefined
+}) => {
+  const isContextRoot = react.useContext(ThemeContext) === undefined;
+  // RegEx to check for `np-theme-` class name
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const themeClass = new RegExp(/\bnp-theme-[a-z-]+\b/, 'g');
+  // 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, themeClass]);
+  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;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/const.ts","../src/helpers.ts","../src/useTheme.ts","../src/ThemedChildren.tsx","../src/ThemeProvider.tsx"],"sourcesContent":[null,null,null,null,null],"names":["baseThemes","extraThemes","screenModes","modernThemes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE","isThemeModern","includes","theme","isExtraTheme","isForestGreenTheme","isScreenModeDark","screenMode","getThemeClassName","FALLBACK_VALUES","isNotProduction","ThemedChildren","className","undefined","children","themeClass","useTheme","_jsx","classNames","createContext","ThemeProvider","isNotRootProvider","useContext","ThemeContext","RegExp"],"mappings":";;;;;;;;;;AACA;AACO,MAAAA,UAAiB,GAAA,CAAA,OAAA,EAAA,UAAA,CAAA,CAAA;AACjB,MAAAC,WAAiB,GAAA,CAAA,cAAA,EAAA,cAAA,CAAA,CAAA;AACjB,MAAAC,WAAkB,GAAA,CAAA,OAAA,EAAA,MAAA,CAAA,CAAA;AAGnB,MAAoBC,YAAA,GAAA,CAAGH,kBAAkBC,WAAU,CAAA,CAAA;AACnD,MAAiBG,kBAAI,GAAO;AAC5B,MAAeC,mBAAW,UAAU;;ACEnC,MAAAC,qBACE,IAAAH,YAAA,CAAAI,QAAiB,CAASC,KAAA,EAAA;AAG5B,MAAAC,oBAA6B,IAAAR,WAAA,CAAAM,SAAiBC,KAAS,EAAA;AAGvD,MAAAE,0BACE,IAAAF,KAAA,KAAAP,WAAiB,CAAS,CAAA,EAAA;MAG5BU,gBAAsB,GAAAA,CAAAH,KAAA,EAAAI,UACN,KAAAN,aAAY,CAAAE,KAAA,CAAA,IAAaN,WAAA,CAAA,CAAA,CAAA,KAAAU,WACxB;MAIjBC,iBAAuB,GAAAA,CAAAL,KAAA,EAAAI,UACP,KAAA;;;;;;;;;;;;;MCnBbE,eAAS,GAAC;AAClBN,EAAAA,KAAkB,EAAAJ;AAClBQ,EAAAA,UAAgB,EAAAP,mBAAAA;;AAEjB,MAAAU,eAAA,GAAAA,MAAA;EAeD,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;ACxBsC,MAAAC,cAAU,GAAAA,CAAA;AAAAC,EAAAA,SAAA,GAAAC,SAAA;AAAAC,EAAAA,QAAAA;AAAA,CAAA,KAAA;EAAC,MAAQ;AAAAF,IAAAA,WAAWG,UAAAA;GAAA,GAAAC,QAAA,EAAA,CAAA;AAAG,EAAA,oBAAAC,cAAA,CAAA,KAAA,EAAA;AAAAL,IAAAA,SAAA,EAAAM,2BAAA,CAAAH,UAAA,EAAAH,SAAA,CAAA;AAAAE,IAAAA,QAAA,EAAAA,QAAAA;AAAA,GAAA,CAAA,CAAA;AAEvE,CAAA;;kBCG4B,gBAAAK,mBAAA,CAAAN,SAAA,CAAA,CAAA;mBAGf,GAAAO,CAAA;AAAAjB,EAAAA,KAAA,GAAAJ,kBAAA;AAAAQ,EAAAA,UAAA,GAAAP,mBAAA;AAAAqB,EAAAA,iBAAA,GAAA,KAAA;EAAAP,QAAA;AAAAF,EAAAA,SAAA,GAAAC,SAAAA;AAAA,CAAA,KAAA;AAEb,EAAA,mBAAuB,GAAGS,gBAAA,CAAAC,YAAkB,CAAA,KAAWV,SAAA,CAAA;AAAE;AAAqB;EAE9E,MAAAE,UAAa,GAAA,IAAAS,MAAA,CAAa,sBAMvB,EAAA,GAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/useTheme.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentTheme, BaseTheme, ScreenMode, ExtraTheme } from './const';
+interface ThemeHookValue {
+    theme: ComponentTheme | BaseTheme | ExtraTheme;
+    screenMode: ScreenMode;
+    isModern: boolean;
+    isForestGreenTheme: boolean;
+    isScreenModeDark: boolean;
+    className: string;
+}
+export declare const useTheme: () => ThemeHookValue;
+export {};
+//# sourceMappingURL=useTheme.d.ts.map

package/dist/useTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../src/useTheme.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIjF,UAAU,cAAc;IACtB,KAAK,EAAE,cAAc,GAAG,SAAS,GAAG,UAAU,CAAC;IAC/C,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;CACnB;AAeD,eAAO,MAAM,QAAQ,QAAO,cAuB3B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/components-theming",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "description": "Provides theming support for the Wise Design system components",
   "license": "Apache-2.0",
   "keywords": [
@@ -12,16 +12,24 @@
     "url": "git+https://github.com/transferwise/neptune-web.git"
   },
   "dependencies": {
+    "@babel/runtime": "^7.22.15",
     "classnames": "^2.3.2"
   },
   "devDependencies": {
-    "@babel/plugin-syntax-import-assertions": "7.20.0",
-    "@rollup/plugin-typescript": "11.0.0",
+    "@babel/core": "^7.22.15",
+    "@babel/plugin-transform-runtime": "^7.22.15",
+    "@babel/preset-env": "^7.22.15",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.22.15",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-typescript": "^11.1.3",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^8.0.0",
     "@transferwise/eslint-config": "^7.4.0",
     "@transferwise/test-config": "^5.0.2",
+    "@tsconfig/recommended": "^1.0.2",
+    "@types/babel__core": "^7.20.1",
     "@types/jest": "^27.5.2",
     "@types/node": "^18.15.12",
     "@types/react": "^17.0.59",
@@ -29,26 +37,23 @@
     "@types/testing-library__jest-dom": "^5.14.5",
     "classnames": "^2.3.2",
     "jest": "^27.0.6",
-    "rollup": "3.2.3",
-    "rollup-plugin-ts": "3.0.2",
+    "rollup": "^3.28.1",
     "typescript": "4.9.4"
   },
   "peerDependencies": {
     "react": ">=16.14",
     "react-dom": ">=16.14"
   },
-  "exports": {
-    ".": {
-      "import": "./dist/es/index.js",
-      "require": "./dist/cjs/index.js"
-    }
-  },
-  "main": "./dist/cjs/index.js",
-  "module": "./dist/es/index.js",
-  "types": "./dist/es/index.d.ts",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist/",
-    "src/"
+    "src/",
+    "!**/*.tsbuildinfo"
   ],
   "publishConfig": {
     "access": "public"

package/dist/cjs/index.d.ts

@@ -1,44 +0,0 @@
-import { PropsWithChildren } from "react";
-// TODO: Change 'light' with 'legacy' in the future
-declare const baseThemes: readonly [
-    "light",
-    "personal"
-];
-declare const extraThemes: readonly [
-    "forest-green",
-    "bright-green"
-];
-declare const screenModes: readonly [
-    "light",
-    "dark"
-];
-// TODO: componentThemes returned back for backward compatibility, refactor this place in the future
-type ComponentTheme = (typeof baseThemes)[number];
-type BaseTheme = (typeof baseThemes)[number];
-type ExtraTheme = (typeof extraThemes)[number];
-type ScreenMode = (typeof screenModes)[number];
-type Theming = {
-    theme?: ComponentTheme | BaseTheme | ExtraTheme;
-    screenMode?: ScreenMode;
-    isNotRootProvider?: boolean | undefined;
-};
-declare const isThemeModern: (theme: ComponentTheme | BaseTheme | ExtraTheme) => theme is "personal" | "forest-green" | "bright-green";
-declare const isExtraTheme: (theme: ComponentTheme | BaseTheme | ExtraTheme) => theme is "forest-green" | "bright-green";
-declare const isForestGreenTheme: (theme: ComponentTheme | BaseTheme | ExtraTheme) => theme is "forest-green";
-declare const isScreenModeDark: (theme: ComponentTheme | BaseTheme | ExtraTheme, screenMode: ScreenMode) => screenMode is "dark";
-declare const getThemeClassName: (theme: ComponentTheme | BaseTheme | ExtraTheme, screenMode: ScreenMode) => string;
-type ThemeProviderProps = PropsWithChildren<Theming> & {
-    className?: string;
-};
-declare const ThemeProvider: ({ theme, screenMode, isNotRootProvider, children, className }: ThemeProviderProps) => JSX.Element;
-interface ThemeHookValue {
-    theme: ComponentTheme | BaseTheme | ExtraTheme;
-    screenMode: ScreenMode;
-    isModern: boolean;
-    isForestGreenTheme: boolean;
-    isScreenModeDark: boolean;
-    className: string;
-}
-declare const useTheme: () => ThemeHookValue;
-export type { ComponentTheme, BaseTheme, ExtraTheme, ScreenMode, Theming };
-export { isThemeModern, isExtraTheme, isForestGreenTheme, isScreenModeDark, getThemeClassName, ThemeProvider, useTheme };

package/dist/cjs/index.js

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

package/dist/cjs/index.js.map

@@ -1 +0,0 @@
-{"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;\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];\n\nexport const DEFAULT_BASE_THEME = 'light' as const;\nexport const DEFAULT_SCREEN_MODE = 'light' as const;\n\nexport type Theming = {\n  theme?: ComponentTheme | BaseTheme | ExtraTheme;\n  screenMode?: ScreenMode;\n  isNotRootProvider?: boolean | undefined;\n};\n","import type {\n  ComponentTheme,\n  ModernTheme,\n  BaseTheme,\n  ExtraTheme,\n  ForestGreenTheme,\n  ScreenMode,\n  ScreenModeDark,\n} from './const';\nimport { extraThemes, screenModes, modernThemes } from './const';\n\nexport const isThemeModern = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n): theme is ModernTheme => modernThemes.includes(theme as ModernTheme);\n\nexport const isExtraTheme = (theme: ComponentTheme | BaseTheme | ExtraTheme): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isForestGreenTheme = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n): theme is ForestGreenTheme => theme === extraThemes[0];\n\nexport const isScreenModeDark = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n): screenMode is ScreenModeDark =>\n  isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;\n\nexport const getThemeClassName = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n) => {\n  if (!isThemeModern(theme)) {\n    return `np-theme-${theme}`;\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 { ComponentTheme, BaseTheme, ScreenMode, ExtraTheme } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n  theme: ComponentTheme | BaseTheme | ExtraTheme;\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};\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 { ComponentTheme, BaseTheme, ExtraTheme, 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: ComponentTheme | BaseTheme | ExtraTheme;\n      screenMode: ScreenMode;\n    }\n  | undefined\n>(undefined);\n\ntype ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };\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  // RegEx to check for `np-theme-` class name\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const themeClass = new RegExp(/\\bnp-theme-[a-z-]+\\b/, 'g');\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, themeClass]);\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","concat","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE","isThemeModern","theme","includes","isExtraTheme","isForestGreenTheme","isScreenModeDark","screenMode","getThemeClassName","classes","FALLBACK_VALUES","isNotProduction","window","location","hostname","_unused","useTheme","theming","useContext","ThemeContext","console","warn","_ref","contextScreenMode","useMemo","isModern","className","ThemedChildren","_ref$className","undefined","children","_useTheme","themeClass","_jsx","classNames","createContext","ThemeProvider","_ref$theme","_ref$screenMode","_ref$isNotRootProvide","isNotRootProvider","isContextRoot","RegExp","useEffect","_document$documentEle","document","documentElement","match","forEach","item","classList","remove","split","add","contextValue","Provider","value"],"mappings":"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"}

package/dist/es/index.d.ts

@@ -1,44 +0,0 @@
-import { PropsWithChildren } from "react";
-// TODO: Change 'light' with 'legacy' in the future
-declare const baseThemes: readonly [
-    "light",
-    "personal"
-];
-declare const extraThemes: readonly [
-    "forest-green",
-    "bright-green"
-];
-declare const screenModes: readonly [
-    "light",
-    "dark"
-];
-// TODO: componentThemes returned back for backward compatibility, refactor this place in the future
-type ComponentTheme = (typeof baseThemes)[number];
-type BaseTheme = (typeof baseThemes)[number];
-type ExtraTheme = (typeof extraThemes)[number];
-type ScreenMode = (typeof screenModes)[number];
-type Theming = {
-    theme?: ComponentTheme | BaseTheme | ExtraTheme;
-    screenMode?: ScreenMode;
-    isNotRootProvider?: boolean | undefined;
-};
-declare const isThemeModern: (theme: ComponentTheme | BaseTheme | ExtraTheme) => theme is "personal" | "forest-green" | "bright-green";
-declare const isExtraTheme: (theme: ComponentTheme | BaseTheme | ExtraTheme) => theme is "forest-green" | "bright-green";
-declare const isForestGreenTheme: (theme: ComponentTheme | BaseTheme | ExtraTheme) => theme is "forest-green";
-declare const isScreenModeDark: (theme: ComponentTheme | BaseTheme | ExtraTheme, screenMode: ScreenMode) => screenMode is "dark";
-declare const getThemeClassName: (theme: ComponentTheme | BaseTheme | ExtraTheme, screenMode: ScreenMode) => string;
-type ThemeProviderProps = PropsWithChildren<Theming> & {
-    className?: string;
-};
-declare const ThemeProvider: ({ theme, screenMode, isNotRootProvider, children, className }: ThemeProviderProps) => JSX.Element;
-interface ThemeHookValue {
-    theme: ComponentTheme | BaseTheme | ExtraTheme;
-    screenMode: ScreenMode;
-    isModern: boolean;
-    isForestGreenTheme: boolean;
-    isScreenModeDark: boolean;
-    className: string;
-}
-declare const useTheme: () => ThemeHookValue;
-export type { ComponentTheme, BaseTheme, ExtraTheme, ScreenMode, Theming };
-export { isThemeModern, isExtraTheme, isForestGreenTheme, isScreenModeDark, getThemeClassName, ThemeProvider, useTheme };

package/dist/es/index.js

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

package/dist/es/index.js.map

@@ -1 +0,0 @@
-{"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;\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];\n\nexport const DEFAULT_BASE_THEME = 'light' as const;\nexport const DEFAULT_SCREEN_MODE = 'light' as const;\n\nexport type Theming = {\n  theme?: ComponentTheme | BaseTheme | ExtraTheme;\n  screenMode?: ScreenMode;\n  isNotRootProvider?: boolean | undefined;\n};\n","import type {\n  ComponentTheme,\n  ModernTheme,\n  BaseTheme,\n  ExtraTheme,\n  ForestGreenTheme,\n  ScreenMode,\n  ScreenModeDark,\n} from './const';\nimport { extraThemes, screenModes, modernThemes } from './const';\n\nexport const isThemeModern = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n): theme is ModernTheme => modernThemes.includes(theme as ModernTheme);\n\nexport const isExtraTheme = (theme: ComponentTheme | BaseTheme | ExtraTheme): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isForestGreenTheme = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n): theme is ForestGreenTheme => theme === extraThemes[0];\n\nexport const isScreenModeDark = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n): screenMode is ScreenModeDark =>\n  isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;\n\nexport const getThemeClassName = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n) => {\n  if (!isThemeModern(theme)) {\n    return `np-theme-${theme}`;\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 { ComponentTheme, BaseTheme, ScreenMode, ExtraTheme } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n  theme: ComponentTheme | BaseTheme | ExtraTheme;\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};\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 { ComponentTheme, BaseTheme, ExtraTheme, 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: ComponentTheme | BaseTheme | ExtraTheme;\n      screenMode: ScreenMode;\n    }\n  | undefined\n>(undefined);\n\ntype ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };\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  // RegEx to check for `np-theme-` class name\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const themeClass = new RegExp(/\\bnp-theme-[a-z-]+\\b/, 'g');\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, themeClass]);\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","concat","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE","isThemeModern","theme","includes","isExtraTheme","isForestGreenTheme","isScreenModeDark","screenMode","getThemeClassName","classes","FALLBACK_VALUES","isNotProduction","window","location","hostname","_unused","useTheme","theming","useContext","ThemeContext","console","warn","_ref","contextScreenMode","useMemo","isModern","className","ThemedChildren","_ref$className","undefined","children","_useTheme","themeClass","_jsx","classNames","createContext","ThemeProvider","_ref$theme","_ref$screenMode","_ref$isNotRootProvide","isNotRootProvider","isContextRoot","RegExp","useEffect","_document$documentEle","document","documentElement","match","forEach","item","classList","remove","split","add","contextValue","Provider","value"],"mappings":"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"}