@wise/components-theming 0.0.0-experimental-84d9516 → 0.0.0-experimental-010a0a4

package/dist/ThemeProvider.d.ts

@@ -3,6 +3,6 @@ import type { Theming } from './const';
 type ThemeProviderProps = PropsWithChildren<Theming> & {
     className?: string;
 };
-export declare const ThemeProvider: ({ theme, screenMode, isNotRootProvider, children, className, }: ThemeProviderProps) => import("react").JSX.Element;
+export declare const ThemeProvider: ({ theme, screenMode, children, className, }: ThemeProviderProps) => import("react").JSX.Element;
 export {};
 //# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAkC,MAAM,OAAO,CAAC;AAG1E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAKvC,KAAK,kBAAkB,GAAG,iBAAiB,CAAC,OAAO,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAK9E,eAAO,MAAM,aAAa,GAAI,gEAM3B,kBAAkB,gCAyBpB,CAAC"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAGnD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAIvC,KAAK,kBAAkB,GAAG,iBAAiB,CAAC,OAAO,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9E,eAAO,MAAM,aAAa,gDAKvB,kBAAkB,gCAQpB,CAAC"}

package/dist/ThemeProvider.js

@@ -1,40 +1,24 @@
 'use strict';
 
 var react = require('react');
-var ThemedChildren = require('./ThemedChildren.js');
+var ThemedLayer = require('./ThemedLayer.js');
 var _const = require('./const.js');
-var helpers = require('./helpers.js');
 var ThemeProviderContext = require('./ThemeProviderContext.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-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(ThemeProviderContext.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(ThemeProviderContext.ThemeContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/jsxRuntime.jsx(ThemedChildren.ThemedChildren, {
+    children: /*#__PURE__*/jsxRuntime.jsx(ThemedLayer.ThemedLayer, {
       className: className,
       children: children
     })

package/dist/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sources":["../src/ThemeProvider.tsx"],"sourcesContent":["import { PropsWithChildren, useContext, useEffect, useMemo } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName } from './helpers';\nimport { ThemeContext } from './ThemeProviderContext';\n\ntype ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };\n\n// RegEx to check for `np-theme-` class name\nconst themeClass = /\\bnp-theme-[a-z-]+\\b/g;\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_BASE_THEME,\n  screenMode = DEFAULT_SCREEN_MODE,\n  isNotRootProvider = false,\n  children,\n  className = undefined,\n}: ThemeProviderProps) => {\n  const isContextRoot = useContext(ThemeContext) === undefined;\n\n  // useEffect hook used to apply the theme class to the HTML element\n  useEffect(() => {\n    if (!isNotRootProvider && isContextRoot) {\n      // Remove all the theme classes from the documentElement\n      document.documentElement.className.match(themeClass)?.forEach((item) => {\n        document.documentElement.classList.remove(item);\n      });\n      getThemeClassName(theme, screenMode)\n        .split(' ')\n        .forEach((item) => {\n          document.documentElement.classList.add(item);\n        });\n    }\n  }, [isNotRootProvider, isContextRoot, theme, screenMode]);\n\n  const contextValue = useMemo(() => ({ theme, screenMode }), [screenMode, theme]);\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemedChildren className={className}>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["themeClass","ThemeProvider","theme","DEFAULT_BASE_THEME","screenMode","DEFAULT_SCREEN_MODE","isNotRootProvider","children","className","undefined","isContextRoot","useContext","ThemeContext","useEffect","document","documentElement","match","forEach","item","classList","remove","getThemeClassName","split","add","contextValue","useMemo","_jsx","Provider","value","ThemedChildren"],"mappings":";;;;;;;;;AAWA,MAAMA,UAAU,GAAG,uBAAuB;AAEnC,MAAMC,aAAa,GAAGA,CAAC;AAC5BC,EAAAA,KAAK,GAAGC,yBAAkB;AAC1BC,EAAAA,UAAU,GAAGC,0BAAmB;AAChCC,EAAAA,iBAAiB,GAAG,KAAK;EACzBC,QAAQ;AACRC,EAAAA,SAAS,GAAGC;AACO,CAAA,KAAI;AACvB,EAAA,MAAMC,aAAa,GAAGC,gBAAU,CAACC,iCAAY,CAAC,KAAKH,SAAS;AAE5D;AACAI,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAI,CAACP,iBAAiB,IAAII,aAAa,EAAE;AACvC;AACAI,MAAAA,QAAQ,CAACC,eAAe,CAACP,SAAS,CAACQ,KAAK,CAAChB,UAAU,CAAC,EAAEiB,OAAO,CAAEC,IAAI,IAAI;QACrEJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACC,MAAM,CAACF,IAAI,CAAC;AACjD,OAAC,CAAC;AACFG,MAAAA,yBAAiB,CAACnB,KAAK,EAAEE,UAAU,CAAC,CACjCkB,KAAK,CAAC,GAAG,CAAC,CACVL,OAAO,CAAEC,IAAI,IAAI;QAChBJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACI,GAAG,CAACL,IAAI,CAAC;AAC9C,OAAC,CAAC;AACN;GACD,EAAE,CAACZ,iBAAiB,EAAEI,aAAa,EAAER,KAAK,EAAEE,UAAU,CAAC,CAAC;AAEzD,EAAA,MAAMoB,YAAY,GAAGC,aAAO,CAAC,OAAO;IAAEvB,KAAK;AAAEE,IAAAA;AAAU,GAAE,CAAC,EAAE,CAACA,UAAU,EAAEF,KAAK,CAAC,CAAC;AAEhF,EAAA,oBACEwB,cAAA,CAACd,iCAAY,CAACe,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEJ,YAAa;IAAAjB,QAAA,eACzCmB,cAAA,CAACG,6BAAc,EAAA;AAACrB,MAAAA,SAAS,EAAEA,SAAU;AAAAD,MAAAA,QAAA,EAAEA;KAAyB;AAClE,GAAuB,CAAC;AAE5B;;;;"}
+{"version":3,"file":"ThemeProvider.js","sources":["../src/ThemeProvider.tsx"],"sourcesContent":["import { PropsWithChildren, useMemo } from 'react';\n\nimport { ThemedLayer } from './ThemedLayer';\nimport type { Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { ThemeContext } from './ThemeProviderContext';\n\ntype ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_BASE_THEME,\n  screenMode = DEFAULT_SCREEN_MODE,\n  children,\n  className = undefined,\n}: ThemeProviderProps) => {\n  const contextValue = useMemo(() => ({ theme, screenMode }), [screenMode, theme]);\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemedLayer className={className}>{children}</ThemedLayer>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["ThemeProvider","theme","DEFAULT_BASE_THEME","screenMode","DEFAULT_SCREEN_MODE","children","className","undefined","contextValue","useMemo","_jsx","ThemeContext","Provider","value","ThemedLayer"],"mappings":";;;;;;;;AASO,MAAMA,aAAa,GAAGA,CAAC;AAC5BC,EAAAA,KAAK,GAAGC,yBAAkB;AAC1BC,EAAAA,UAAU,GAAGC,0BAAmB;EAChCC,QAAQ;AACRC,EAAAA,SAAS,GAAGC,SAAAA;AACO,CAAA,KAAI;AACvB,EAAA,MAAMC,YAAY,GAAGC,aAAO,CAAC,OAAO;IAAER,KAAK;AAAEE,IAAAA,UAAAA;AAAU,GAAE,CAAC,EAAE,CAACA,UAAU,EAAEF,KAAK,CAAC,CAAC,CAAA;AAEhF,EAAA,oBACES,cAAA,CAACC,iCAAY,CAACC,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEL,YAAa;IAAAH,QAAA,eACzCK,cAAA,CAACI,uBAAW,EAAA;AAACR,MAAAA,SAAS,EAAEA,SAAU;AAAAD,MAAAA,QAAA,EAAEA,QAAAA;KAAsB,CAAA;AAC5D,GAAuB,CAAC,CAAA;AAE5B;;;;"}

package/dist/ThemeProvider.mjs

@@ -1,38 +1,22 @@
-import { useContext, useEffect, useMemo } from 'react';
-import { ThemedChildren } from './ThemedChildren.mjs';
+import { useMemo } from 'react';
+import { ThemedLayer } from './ThemedLayer.mjs';
 import { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const.mjs';
-import { getThemeClassName } from './helpers.mjs';
 import { ThemeContext } from './ThemeProviderContext.mjs';
 import { jsx } from 'react/jsx-runtime';
 
-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, {
+    children: /*#__PURE__*/jsx(ThemedLayer, {
       className: className,
       children: children
     })

package/dist/ThemeProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.mjs","sources":["../src/ThemeProvider.tsx"],"sourcesContent":["import { PropsWithChildren, useContext, useEffect, useMemo } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName } from './helpers';\nimport { ThemeContext } from './ThemeProviderContext';\n\ntype ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };\n\n// RegEx to check for `np-theme-` class name\nconst themeClass = /\\bnp-theme-[a-z-]+\\b/g;\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_BASE_THEME,\n  screenMode = DEFAULT_SCREEN_MODE,\n  isNotRootProvider = false,\n  children,\n  className = undefined,\n}: ThemeProviderProps) => {\n  const isContextRoot = useContext(ThemeContext) === undefined;\n\n  // useEffect hook used to apply the theme class to the HTML element\n  useEffect(() => {\n    if (!isNotRootProvider && isContextRoot) {\n      // Remove all the theme classes from the documentElement\n      document.documentElement.className.match(themeClass)?.forEach((item) => {\n        document.documentElement.classList.remove(item);\n      });\n      getThemeClassName(theme, screenMode)\n        .split(' ')\n        .forEach((item) => {\n          document.documentElement.classList.add(item);\n        });\n    }\n  }, [isNotRootProvider, isContextRoot, theme, screenMode]);\n\n  const contextValue = useMemo(() => ({ theme, screenMode }), [screenMode, theme]);\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemedChildren className={className}>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["themeClass","ThemeProvider","theme","DEFAULT_BASE_THEME","screenMode","DEFAULT_SCREEN_MODE","isNotRootProvider","children","className","undefined","isContextRoot","useContext","ThemeContext","useEffect","document","documentElement","match","forEach","item","classList","remove","getThemeClassName","split","add","contextValue","useMemo","_jsx","Provider","value","ThemedChildren"],"mappings":";;;;;;;AAWA,MAAMA,UAAU,GAAG,uBAAuB;AAEnC,MAAMC,aAAa,GAAGA,CAAC;AAC5BC,EAAAA,KAAK,GAAGC,kBAAkB;AAC1BC,EAAAA,UAAU,GAAGC,mBAAmB;AAChCC,EAAAA,iBAAiB,GAAG,KAAK;EACzBC,QAAQ;AACRC,EAAAA,SAAS,GAAGC;AACO,CAAA,KAAI;AACvB,EAAA,MAAMC,aAAa,GAAGC,UAAU,CAACC,YAAY,CAAC,KAAKH,SAAS;AAE5D;AACAI,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAI,CAACP,iBAAiB,IAAII,aAAa,EAAE;AACvC;AACAI,MAAAA,QAAQ,CAACC,eAAe,CAACP,SAAS,CAACQ,KAAK,CAAChB,UAAU,CAAC,EAAEiB,OAAO,CAAEC,IAAI,IAAI;QACrEJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACC,MAAM,CAACF,IAAI,CAAC;AACjD,OAAC,CAAC;AACFG,MAAAA,iBAAiB,CAACnB,KAAK,EAAEE,UAAU,CAAC,CACjCkB,KAAK,CAAC,GAAG,CAAC,CACVL,OAAO,CAAEC,IAAI,IAAI;QAChBJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACI,GAAG,CAACL,IAAI,CAAC;AAC9C,OAAC,CAAC;AACN;GACD,EAAE,CAACZ,iBAAiB,EAAEI,aAAa,EAAER,KAAK,EAAEE,UAAU,CAAC,CAAC;AAEzD,EAAA,MAAMoB,YAAY,GAAGC,OAAO,CAAC,OAAO;IAAEvB,KAAK;AAAEE,IAAAA;AAAU,GAAE,CAAC,EAAE,CAACA,UAAU,EAAEF,KAAK,CAAC,CAAC;AAEhF,EAAA,oBACEwB,GAAA,CAACd,YAAY,CAACe,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEJ,YAAa;IAAAjB,QAAA,eACzCmB,GAAA,CAACG,cAAc,EAAA;AAACrB,MAAAA,SAAS,EAAEA,SAAU;AAAAD,MAAAA,QAAA,EAAEA;KAAyB;AAClE,GAAuB,CAAC;AAE5B;;;;"}
+{"version":3,"file":"ThemeProvider.mjs","sources":["../src/ThemeProvider.tsx"],"sourcesContent":["import { PropsWithChildren, useMemo } from 'react';\n\nimport { ThemedLayer } from './ThemedLayer';\nimport type { Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { ThemeContext } from './ThemeProviderContext';\n\ntype ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_BASE_THEME,\n  screenMode = DEFAULT_SCREEN_MODE,\n  children,\n  className = undefined,\n}: ThemeProviderProps) => {\n  const contextValue = useMemo(() => ({ theme, screenMode }), [screenMode, theme]);\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemedLayer className={className}>{children}</ThemedLayer>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["ThemeProvider","theme","DEFAULT_BASE_THEME","screenMode","DEFAULT_SCREEN_MODE","children","className","undefined","contextValue","useMemo","_jsx","ThemeContext","Provider","value","ThemedLayer"],"mappings":";;;;;;AASO,MAAMA,aAAa,GAAGA,CAAC;AAC5BC,EAAAA,KAAK,GAAGC,kBAAkB;AAC1BC,EAAAA,UAAU,GAAGC,mBAAmB;EAChCC,QAAQ;AACRC,EAAAA,SAAS,GAAGC,SAAAA;AACO,CAAA,KAAI;AACvB,EAAA,MAAMC,YAAY,GAAGC,OAAO,CAAC,OAAO;IAAER,KAAK;AAAEE,IAAAA,UAAAA;AAAU,GAAE,CAAC,EAAE,CAACA,UAAU,EAAEF,KAAK,CAAC,CAAC,CAAA;AAEhF,EAAA,oBACES,GAAA,CAACC,YAAY,CAACC,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEL,YAAa;IAAAH,QAAA,eACzCK,GAAA,CAACI,WAAW,EAAA;AAACR,MAAAA,SAAS,EAAEA,SAAU;AAAAD,MAAAA,QAAA,EAAEA,QAAAA;KAAsB,CAAA;AAC5D,GAAuB,CAAC,CAAA;AAE5B;;;;"}

package/dist/ThemedLayer.d.ts

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

package/dist/ThemedLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemedLayer.d.ts","sourceRoot":"","sources":["../src/ThemedLayer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlC,KAAK,gBAAgB,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,CAAC;AAEpE,eAAO,MAAM,WAAW,4BAA6B,gBAAgB,gCAKpE,CAAC"}

package/dist/{ThemedChildren.js → ThemedLayer.js}

@@ -2,20 +2,23 @@
 
 var clsx = require('clsx');
 var useTheme = require('./useTheme.js');
+var helpers = require('./helpers.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-const ThemedChildren = ({
-  className = undefined,
+const ThemedLayer = ({
+  className,
   children
 }) => {
   const {
-    className: themeClass
+    theme,
+    screenMode
   } = useTheme.useTheme();
+  const themeClass = helpers.getThemeClassName(theme, screenMode);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: clsx.clsx(themeClass, className),
     children: children
   });
 };
 
-exports.ThemedChildren = ThemedChildren;
-//# sourceMappingURL=ThemedChildren.js.map
+exports.ThemedLayer = ThemedLayer;
+//# sourceMappingURL=ThemedLayer.js.map

package/dist/ThemedLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemedLayer.js","sources":["../src/ThemedLayer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { useTheme } from './useTheme';\nimport { getThemeClassName } from './helpers';\n\ntype ThemedLayerProps = { className?: string; children: ReactNode };\n\nexport const ThemedLayer = ({ className, children }: ThemedLayerProps) => {\n  const { theme, screenMode } = useTheme();\n  const themeClass = getThemeClassName(theme, screenMode);\n\n  return <div className={clsx(themeClass, className)}>{children}</div>;\n};\n"],"names":["ThemedLayer","className","children","theme","screenMode","useTheme","themeClass","getThemeClassName","_jsx","clsx"],"mappings":";;;;;;;AAQO,MAAMA,WAAW,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,QAAAA;AAA4B,CAAA,KAAI;EACvE,MAAM;IAAEC,KAAK;AAAEC,IAAAA,UAAAA;GAAY,GAAGC,iBAAQ,EAAE,CAAA;AACxC,EAAA,MAAMC,UAAU,GAAGC,yBAAiB,CAACJ,KAAK,EAAEC,UAAU,CAAC,CAAA;AAEvD,EAAA,oBAAOI,cAAA,CAAA,KAAA,EAAA;AAAKP,IAAAA,SAAS,EAAEQ,SAAI,CAACH,UAAU,EAAEL,SAAS,CAAE;AAAAC,IAAAA,QAAA,EAAEA,QAAAA;AAAQ,GAAM,CAAC,CAAA;AACtE;;;;"}

package/dist/{ThemedChildren.mjs → ThemedLayer.mjs}

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

package/dist/ThemedLayer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemedLayer.mjs","sources":["../src/ThemedLayer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { useTheme } from './useTheme';\nimport { getThemeClassName } from './helpers';\n\ntype ThemedLayerProps = { className?: string; children: ReactNode };\n\nexport const ThemedLayer = ({ className, children }: ThemedLayerProps) => {\n  const { theme, screenMode } = useTheme();\n  const themeClass = getThemeClassName(theme, screenMode);\n\n  return <div className={clsx(themeClass, className)}>{children}</div>;\n};\n"],"names":["ThemedLayer","className","children","theme","screenMode","useTheme","themeClass","getThemeClassName","_jsx","clsx"],"mappings":";;;;;AAQO,MAAMA,WAAW,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,QAAAA;AAA4B,CAAA,KAAI;EACvE,MAAM;IAAEC,KAAK;AAAEC,IAAAA,UAAAA;GAAY,GAAGC,QAAQ,EAAE,CAAA;AACxC,EAAA,MAAMC,UAAU,GAAGC,iBAAiB,CAACJ,KAAK,EAAEC,UAAU,CAAC,CAAA;AAEvD,EAAA,oBAAOI,GAAA,CAAA,KAAA,EAAA;AAAKP,IAAAA,SAAS,EAAEQ,IAAI,CAACH,UAAU,EAAEL,SAAS,CAAE;AAAAC,IAAAA,QAAA,EAAEA,QAAAA;AAAQ,GAAM,CAAC,CAAA;AACtE;;;;"}

package/dist/const.d.ts

@@ -17,6 +17,7 @@ export declare const DEFAULT_SCREEN_MODE = "light";
 export type Theming = {
     theme?: ComponentTheme | BaseTheme | ExtraTheme | PlatformTheme | PlatformForestGreenTheme;
     screenMode?: ScreenMode;
+    /** @deprecated no-op */
     isNotRootProvider?: boolean | undefined;
 };
 //# sourceMappingURL=const.d.ts.map

package/dist/const.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../src/const.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,UAAU,gCAAiC,CAAC;AACzD,eAAO,MAAM,WAAW,2CAA4C,CAAC;AACrE,eAAO,MAAM,WAAW,4BAA6B,CAAC;AACtD,eAAO,MAAM,YAAY,uDAA2C,CAAC;AACrE,eAAO,MAAM,cAAc,iDAAkD,CAAC;AAG9E,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AACzD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AACxD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AACpD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AACtD,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AACvD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AACvD,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAElE,eAAO,MAAM,kBAAkB,UAAU,CAAC;AAC1C,eAAO,MAAM,mBAAmB,UAAU,CAAC;AAE3C,MAAM,MAAM,OAAO,GAAG;IACpB,KAAK,CAAC,EAAE,cAAc,GAAG,SAAS,GAAG,UAAU,GAAG,aAAa,GAAG,wBAAwB,CAAC;IAC3F,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACzC,CAAC"}
+{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../src/const.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,UAAU,gCAAiC,CAAC;AACzD,eAAO,MAAM,WAAW,2CAA4C,CAAC;AACrE,eAAO,MAAM,WAAW,4BAA6B,CAAC;AACtD,eAAO,MAAM,YAAY,uDAA2C,CAAC;AACrE,eAAO,MAAM,cAAc,iDAAkD,CAAC;AAG9E,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AACzD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AACxD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AACpD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AACtD,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AACvD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AACvD,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAElE,eAAO,MAAM,kBAAkB,UAAU,CAAC;AAC1C,eAAO,MAAM,mBAAmB,UAAU,CAAC;AAE3C,MAAM,MAAM,OAAO,GAAG;IACpB,KAAK,CAAC,EAAE,cAAc,GAAG,SAAS,GAAG,UAAU,GAAG,aAAa,GAAG,wBAAwB,CAAC;IAC3F,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,wBAAwB;IACxB,iBAAiB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACzC,CAAC"}

package/dist/const.js.map

@@ -1 +1 @@
-{"version":3,"file":"const.js","sources":["../src/const.ts"],"sourcesContent":["// TODO: Change 'light' with 'legacy' in the future\nexport const baseThemes = ['light', 'personal'] as const;\nexport const extraThemes = ['forest-green', 'bright-green'] as const;\nexport const screenModes = ['light', 'dark'] as const;\nexport const modernThemes = [baseThemes[1], ...extraThemes] as const;\nexport const platformThemes = ['platform', 'platform--forest-green'] as const;\n\n// TODO: componentThemes returned back for backward compatibility, refactor this place in the future\nexport type ComponentTheme = (typeof baseThemes)[number];\nexport type ModernTheme = (typeof modernThemes)[number];\nexport type BaseTheme = (typeof baseThemes)[number];\nexport type ExtraTheme = (typeof extraThemes)[number];\nexport type ForestGreenTheme = (typeof extraThemes)[0];\nexport type ScreenMode = (typeof screenModes)[number];\nexport type ScreenModeDark = (typeof screenModes)[1];\nexport type PlatformTheme = (typeof platformThemes)[0];\nexport type PlatformForestGreenTheme = (typeof platformThemes)[1];\n\nexport const DEFAULT_BASE_THEME = 'light';\nexport const DEFAULT_SCREEN_MODE = 'light';\n\nexport type Theming = {\n  theme?: ComponentTheme | BaseTheme | ExtraTheme | PlatformTheme | PlatformForestGreenTheme;\n  screenMode?: ScreenMode;\n  isNotRootProvider?: boolean | undefined;\n};\n"],"names":["baseThemes","extraThemes","screenModes","modernThemes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE"],"mappings":";;AAAA;MACaA,UAAU,GAAG,CAAC,OAAO,EAAE,UAAU;MACjCC,WAAW,GAAG,CAAC,cAAc,EAAE,cAAc;MAC7CC,WAAW,GAAG,CAAC,OAAO,EAAE,MAAM;AACpC,MAAMC,YAAY,GAAG,CAACH,UAAU,CAAC,CAAC,CAAC,EAAE,GAAGC,WAAW;AAcnD,MAAMG,kBAAkB,GAAG;AAC3B,MAAMC,mBAAmB,GAAG;;;;;;;;;"}
+{"version":3,"file":"const.js","sources":["../src/const.ts"],"sourcesContent":["// TODO: Change 'light' with 'legacy' in the future\nexport const baseThemes = ['light', 'personal'] 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  /** @deprecated no-op */\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.map

@@ -1 +1 @@
-{"version":3,"file":"const.mjs","sources":["../src/const.ts"],"sourcesContent":["// TODO: Change 'light' with 'legacy' in the future\nexport const baseThemes = ['light', 'personal'] as const;\nexport const extraThemes = ['forest-green', 'bright-green'] as const;\nexport const screenModes = ['light', 'dark'] as const;\nexport const modernThemes = [baseThemes[1], ...extraThemes] as const;\nexport const platformThemes = ['platform', 'platform--forest-green'] as const;\n\n// TODO: componentThemes returned back for backward compatibility, refactor this place in the future\nexport type ComponentTheme = (typeof baseThemes)[number];\nexport type ModernTheme = (typeof modernThemes)[number];\nexport type BaseTheme = (typeof baseThemes)[number];\nexport type ExtraTheme = (typeof extraThemes)[number];\nexport type ForestGreenTheme = (typeof extraThemes)[0];\nexport type ScreenMode = (typeof screenModes)[number];\nexport type ScreenModeDark = (typeof screenModes)[1];\nexport type PlatformTheme = (typeof platformThemes)[0];\nexport type PlatformForestGreenTheme = (typeof platformThemes)[1];\n\nexport const DEFAULT_BASE_THEME = 'light';\nexport const DEFAULT_SCREEN_MODE = 'light';\n\nexport type Theming = {\n  theme?: ComponentTheme | BaseTheme | ExtraTheme | PlatformTheme | PlatformForestGreenTheme;\n  screenMode?: ScreenMode;\n  isNotRootProvider?: boolean | undefined;\n};\n"],"names":["baseThemes","extraThemes","screenModes","modernThemes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE"],"mappings":"AAAA;MACaA,UAAU,GAAG,CAAC,OAAO,EAAE,UAAU;MACjCC,WAAW,GAAG,CAAC,cAAc,EAAE,cAAc;MAC7CC,WAAW,GAAG,CAAC,OAAO,EAAE,MAAM;AACpC,MAAMC,YAAY,GAAG,CAACH,UAAU,CAAC,CAAC,CAAC,EAAE,GAAGC,WAAW;AAcnD,MAAMG,kBAAkB,GAAG;AAC3B,MAAMC,mBAAmB,GAAG;;;;"}
+{"version":3,"file":"const.mjs","sources":["../src/const.ts"],"sourcesContent":["// TODO: Change 'light' with 'legacy' in the future\nexport const baseThemes = ['light', 'personal'] 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  /** @deprecated no-op */\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,11 @@
 import type { ModernTheme, ExtraTheme, ForestGreenTheme, ScreenMode, ScreenModeDark, Theming } from './const';
+/** @deprecated */
 export declare const isThemeModern: (theme: NonNullable<Theming["theme"]>) => theme is ModernTheme;
+/** @deprecated */
 export declare const isExtraTheme: (theme: NonNullable<Theming["theme"]>) => theme is ExtraTheme;
+/** @deprecated */
 export declare const isForestGreenTheme: (theme: NonNullable<Theming["theme"]>) => theme is ForestGreenTheme;
+/** @deprecated */
 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,EACV,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,OAAO,EACR,MAAM,SAAS,CAAC;AAGjB,eAAO,MAAM,aAAa,GAAI,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAG,KAAK,IAAI,WACjC,CAAC;AAE9C,eAAO,MAAM,YAAY,GAAI,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAG,KAAK,IAAI,UAClC,CAAC;AAE5C,eAAO,MAAM,kBAAkB,GAC7B,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KACnC,KAAK,IAAI,gBAA4C,CAAC;AAEzD,eAAO,MAAM,gBAAgB,GAC3B,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EACpC,YAAY,UAAU,KACrB,UAAU,IAAI,cACqD,CAAC;AAEvE,eAAO,MAAM,iBAAiB,GAAI,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,YAAY,UAAU,WAc7F,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,OAAO,EACR,MAAM,SAAS,CAAC;AAGjB,kBAAkB;AAClB,eAAO,MAAM,aAAa,UAAW,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAG,KAAK,IAAI,WACjC,CAAC;AAE9C,kBAAkB;AAClB,eAAO,MAAM,YAAY,UAAW,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAG,KAAK,IAAI,UAClC,CAAC;AAE5C,kBAAkB;AAClB,eAAO,MAAM,kBAAkB,UACtB,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KACnC,KAAK,IAAI,gBAA4C,CAAC;AAEzD,kBAAkB;AAClB,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

@@ -2,9 +2,13 @@
 
 var _const = require('./const.js');
 
+/** @deprecated */
 const isThemeModern = theme => _const.modernThemes.includes(theme);
+/** @deprecated */
 const isExtraTheme = theme => _const.extraThemes.includes(theme);
+/** @deprecated */
 const isForestGreenTheme = theme => theme === _const.extraThemes[0];
+/** @deprecated */
 const isScreenModeDark = (theme, screenMode) => isThemeModern(theme) && _const.screenModes[1] === screenMode;
 const getThemeClassName = (theme, screenMode) => {
   if (!isThemeModern(theme)) {

package/dist/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","sources":["../src/helpers.ts"],"sourcesContent":["import type {\n  ModernTheme,\n  ExtraTheme,\n  ForestGreenTheme,\n  ScreenMode,\n  ScreenModeDark,\n  Theming,\n} from './const';\nimport { extraThemes, screenModes, modernThemes } from './const';\n\nexport const isThemeModern = (theme: NonNullable<Theming['theme']>): theme is ModernTheme =>\n  modernThemes.includes(theme as ModernTheme);\n\nexport const isExtraTheme = (theme: NonNullable<Theming['theme']>): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isForestGreenTheme = (\n  theme: NonNullable<Theming['theme']>,\n): theme is ForestGreenTheme => theme === extraThemes[0];\n\nexport const isScreenModeDark = (\n  theme: NonNullable<Theming['theme']>,\n  screenMode: ScreenMode,\n): screenMode is ScreenModeDark =>\n  isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;\n\nexport const getThemeClassName = (theme: NonNullable<Theming['theme']>, screenMode: ScreenMode) => {\n  if (!isThemeModern(theme)) {\n    return `np-theme-${theme || 'personal'}`;\n  }\n\n  let classes = `np-theme-personal`;\n\n  if (isExtraTheme(theme)) {\n    classes += ` ${classes}--${theme}`;\n  } else if (screenModes[1] === screenMode) {\n    classes += ` ${classes}--${screenMode}`;\n  }\n\n  return classes;\n};\n"],"names":["isThemeModern","theme","modernThemes","includes","isExtraTheme","extraThemes","isForestGreenTheme","isScreenModeDark","screenMode","screenModes","getThemeClassName","classes"],"mappings":";;;;AAUO,MAAMA,aAAa,GAAIC,KAAoC,IAChEC,mBAAY,CAACC,QAAQ,CAACF,KAAoB;AAErC,MAAMG,YAAY,GAAIH,KAAoC,IAC/DI,kBAAW,CAACF,QAAQ,CAACF,KAAmB;AAEnC,MAAMK,kBAAkB,GAC7BL,KAAoC,IACNA,KAAK,KAAKI,kBAAW,CAAC,CAAC;MAE1CE,gBAAgB,GAAGA,CAC9BN,KAAoC,EACpCO,UAAsB,KAEtBR,aAAa,CAACC,KAAoB,CAAC,IAAIQ,kBAAW,CAAC,CAAC,CAAC,KAAKD;MAE/CE,iBAAiB,GAAGA,CAACT,KAAoC,EAAEO,UAAsB,KAAI;AAChG,EAAA,IAAI,CAACR,aAAa,CAACC,KAAK,CAAC,EAAE;AACzB,IAAA,OAAO,CAAYA,SAAAA,EAAAA,KAAK,IAAI,UAAU,CAAE,CAAA;AAC1C;EAEA,IAAIU,OAAO,GAAG,CAAmB,iBAAA,CAAA;AAEjC,EAAA,IAAIP,YAAY,CAACH,KAAK,CAAC,EAAE;AACvBU,IAAAA,OAAO,IAAI,CAAA,CAAA,EAAIA,OAAO,CAAA,EAAA,EAAKV,KAAK,CAAE,CAAA;GACnC,MAAM,IAAIQ,kBAAW,CAAC,CAAC,CAAC,KAAKD,UAAU,EAAE;AACxCG,IAAAA,OAAO,IAAI,CAAA,CAAA,EAAIA,OAAO,CAAA,EAAA,EAAKH,UAAU,CAAE,CAAA;AACzC;AAEA,EAAA,OAAOG,OAAO;AAChB;;;;;;;;"}
+{"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\n/** @deprecated */\nexport const isThemeModern = (theme: NonNullable<Theming['theme']>): theme is ModernTheme =>\n  modernThemes.includes(theme as ModernTheme);\n\n/** @deprecated */\nexport const isExtraTheme = (theme: NonNullable<Theming['theme']>): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\n/** @deprecated */\nexport const isForestGreenTheme = (\n  theme: NonNullable<Theming['theme']>,\n): theme is ForestGreenTheme => theme === extraThemes[0];\n\n/** @deprecated */\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":";;;;AAUA;AACO,MAAMA,aAAa,GAAIC,KAAoC,IAChEC,mBAAY,CAACC,QAAQ,CAACF,KAAoB,EAAC;AAE7C;AACO,MAAMG,YAAY,GAAIH,KAAoC,IAC/DI,kBAAW,CAACF,QAAQ,CAACF,KAAmB,EAAC;AAE3C;AACO,MAAMK,kBAAkB,GAC7BL,KAAoC,IACNA,KAAK,KAAKI,kBAAW,CAAC,CAAC,EAAC;AAExD;MACaE,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

@@ -1,8 +1,12 @@
 import { modernThemes, extraThemes, screenModes } from './const.mjs';
 
+/** @deprecated */
 const isThemeModern = theme => modernThemes.includes(theme);
+/** @deprecated */
 const isExtraTheme = theme => extraThemes.includes(theme);
+/** @deprecated */
 const isForestGreenTheme = theme => theme === extraThemes[0];
+/** @deprecated */
 const isScreenModeDark = (theme, screenMode) => isThemeModern(theme) && screenModes[1] === screenMode;
 const getThemeClassName = (theme, screenMode) => {
   if (!isThemeModern(theme)) {

package/dist/helpers.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.mjs","sources":["../src/helpers.ts"],"sourcesContent":["import type {\n  ModernTheme,\n  ExtraTheme,\n  ForestGreenTheme,\n  ScreenMode,\n  ScreenModeDark,\n  Theming,\n} from './const';\nimport { extraThemes, screenModes, modernThemes } from './const';\n\nexport const isThemeModern = (theme: NonNullable<Theming['theme']>): theme is ModernTheme =>\n  modernThemes.includes(theme as ModernTheme);\n\nexport const isExtraTheme = (theme: NonNullable<Theming['theme']>): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isForestGreenTheme = (\n  theme: NonNullable<Theming['theme']>,\n): theme is ForestGreenTheme => theme === extraThemes[0];\n\nexport const isScreenModeDark = (\n  theme: NonNullable<Theming['theme']>,\n  screenMode: ScreenMode,\n): screenMode is ScreenModeDark =>\n  isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;\n\nexport const getThemeClassName = (theme: NonNullable<Theming['theme']>, screenMode: ScreenMode) => {\n  if (!isThemeModern(theme)) {\n    return `np-theme-${theme || 'personal'}`;\n  }\n\n  let classes = `np-theme-personal`;\n\n  if (isExtraTheme(theme)) {\n    classes += ` ${classes}--${theme}`;\n  } else if (screenModes[1] === screenMode) {\n    classes += ` ${classes}--${screenMode}`;\n  }\n\n  return classes;\n};\n"],"names":["isThemeModern","theme","modernThemes","includes","isExtraTheme","extraThemes","isForestGreenTheme","isScreenModeDark","screenMode","screenModes","getThemeClassName","classes"],"mappings":";;AAUO,MAAMA,aAAa,GAAIC,KAAoC,IAChEC,YAAY,CAACC,QAAQ,CAACF,KAAoB;AAErC,MAAMG,YAAY,GAAIH,KAAoC,IAC/DI,WAAW,CAACF,QAAQ,CAACF,KAAmB;AAEnC,MAAMK,kBAAkB,GAC7BL,KAAoC,IACNA,KAAK,KAAKI,WAAW,CAAC,CAAC;MAE1CE,gBAAgB,GAAGA,CAC9BN,KAAoC,EACpCO,UAAsB,KAEtBR,aAAa,CAACC,KAAoB,CAAC,IAAIQ,WAAW,CAAC,CAAC,CAAC,KAAKD;MAE/CE,iBAAiB,GAAGA,CAACT,KAAoC,EAAEO,UAAsB,KAAI;AAChG,EAAA,IAAI,CAACR,aAAa,CAACC,KAAK,CAAC,EAAE;AACzB,IAAA,OAAO,CAAYA,SAAAA,EAAAA,KAAK,IAAI,UAAU,CAAE,CAAA;AAC1C;EAEA,IAAIU,OAAO,GAAG,CAAmB,iBAAA,CAAA;AAEjC,EAAA,IAAIP,YAAY,CAACH,KAAK,CAAC,EAAE;AACvBU,IAAAA,OAAO,IAAI,CAAA,CAAA,EAAIA,OAAO,CAAA,EAAA,EAAKV,KAAK,CAAE,CAAA;GACnC,MAAM,IAAIQ,WAAW,CAAC,CAAC,CAAC,KAAKD,UAAU,EAAE;AACxCG,IAAAA,OAAO,IAAI,CAAA,CAAA,EAAIA,OAAO,CAAA,EAAA,EAAKH,UAAU,CAAE,CAAA;AACzC;AAEA,EAAA,OAAOG,OAAO;AAChB;;;;"}
+{"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\n/** @deprecated */\nexport const isThemeModern = (theme: NonNullable<Theming['theme']>): theme is ModernTheme =>\n  modernThemes.includes(theme as ModernTheme);\n\n/** @deprecated */\nexport const isExtraTheme = (theme: NonNullable<Theming['theme']>): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\n/** @deprecated */\nexport const isForestGreenTheme = (\n  theme: NonNullable<Theming['theme']>,\n): theme is ForestGreenTheme => theme === extraThemes[0];\n\n/** @deprecated */\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":";;AAUA;AACO,MAAMA,aAAa,GAAIC,KAAoC,IAChEC,YAAY,CAACC,QAAQ,CAACF,KAAoB,EAAC;AAE7C;AACO,MAAMG,YAAY,GAAIH,KAAoC,IAC/DI,WAAW,CAACF,QAAQ,CAACF,KAAmB,EAAC;AAE3C;AACO,MAAMK,kBAAkB,GAC7BL,KAAoC,IACNA,KAAK,KAAKI,WAAW,CAAC,CAAC,EAAC;AAExD;MACaE,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.d.ts

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

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,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,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/index.js

@@ -2,8 +2,10 @@
 'use strict';
 
 var helpers = require('./helpers.js');
+var ThemeProviderContext = require('./ThemeProviderContext.js');
 var ThemeProvider = require('./ThemeProvider.js');
 var useTheme = require('./useTheme.js');
+var ThemedLayer = require('./ThemedLayer.js');
 
 
 
@@ -12,6 +14,8 @@ exports.isExtraTheme = helpers.isExtraTheme;
 exports.isForestGreenTheme = helpers.isForestGreenTheme;
 exports.isScreenModeDark = helpers.isScreenModeDark;
 exports.isThemeModern = helpers.isThemeModern;
+exports.ThemeContext = ThemeProviderContext.ThemeContext;
 exports.ThemeProvider = ThemeProvider.ThemeProvider;
 exports.useTheme = useTheme.useTheme;
+exports.ThemedLayer = ThemedLayer.ThemedLayer;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

package/dist/index.mjs

@@ -1,5 +1,7 @@
 'use client';
 export { getThemeClassName, isExtraTheme, isForestGreenTheme, isScreenModeDark, isThemeModern } from './helpers.mjs';
+export { ThemeContext } from './ThemeProviderContext.mjs';
 export { ThemeProvider } from './ThemeProvider.mjs';
 export { useTheme } from './useTheme.mjs';
+export { ThemedLayer } from './ThemedLayer.mjs';
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/useTheme.d.ts

@@ -2,9 +2,13 @@ import type { ScreenMode, Theming } from './const';
 interface ThemeHookValue {
     theme: NonNullable<Theming['theme']>;
     screenMode: ScreenMode;
+    /** @deprecated */
     isModern: boolean;
+    /** @deprecated */
     isForestGreenTheme: boolean;
+    /** @deprecated */
     isScreenModeDark: boolean;
+    /** @deprecated */
     className: string;
 }
 export declare const useTheme: () => ThemeHookValue;

package/dist/useTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../src/useTheme.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAInD,UAAU,cAAc;IACtB,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IACrC,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"}
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../src/useTheme.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAInD,UAAU,cAAc;IACtB,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IACrC,UAAU,EAAE,UAAU,CAAC;IACvB,kBAAkB;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,kBAAkB;IAClB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,kBAAkB;IAClB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,kBAAkB;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB;AAeD,eAAO,MAAM,QAAQ,QAAO,cAuB3B,CAAC"}

package/dist/useTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.js","sources":["../src/useTheme.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProviderContext';\nimport type { ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n  theme: NonNullable<Theming['theme']>;\n  screenMode: ScreenMode;\n  isModern: boolean;\n  isForestGreenTheme: boolean;\n  isScreenModeDark: boolean;\n  className: string;\n}\n\nconst FALLBACK_VALUES = {\n  theme: DEFAULT_BASE_THEME,\n  screenMode: DEFAULT_SCREEN_MODE,\n} as const;\n\nconst isNotProduction = () => {\n  try {\n    return ['localhost', 'dev-wi.se'].includes(window.location.hostname);\n  } catch {\n    return false;\n  }\n};\n\nexport const useTheme = (): ThemeHookValue => {\n  const theming = useContext(ThemeContext);\n\n  if (!theming && isNotProduction()) {\n    // eslint-disable-next-line no-console\n    console.warn('Call to useTheme outside a ThemeProvider');\n  }\n\n  const { theme, screenMode: contextScreenMode } = theming ?? FALLBACK_VALUES;\n\n  const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;\n\n  return useMemo(\n    () => ({\n      theme,\n      screenMode,\n      isModern: isThemeModern(theme),\n      isForestGreenTheme: isForestGreenTheme(theme),\n      isScreenModeDark: isScreenModeDark(theme, screenMode),\n      className: getThemeClassName(theme, screenMode),\n    }),\n    [theme, screenMode],\n  );\n};\n"],"names":["FALLBACK_VALUES","theme","DEFAULT_BASE_THEME","screenMode","DEFAULT_SCREEN_MODE","isNotProduction","includes","window","location","hostname","useTheme","theming","useContext","ThemeContext","console","warn","contextScreenMode","useMemo","isModern","isThemeModern","isForestGreenTheme","isScreenModeDark","className","getThemeClassName"],"mappings":";;;;;;;AAgBA,MAAMA,eAAe,GAAG;AACtBC,EAAAA,KAAK,EAAEC,yBAAkB;AACzBC,EAAAA,UAAU,EAAEC;CACJ;AAEV,MAAMC,eAAe,GAAGA,MAAK;EAC3B,IAAI;AACF,IAAA,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACC,MAAM,CAACC,QAAQ,CAACC,QAAQ,CAAC;AACtE,GAAC,CAAC,MAAM;AACN,IAAA,OAAO,KAAK;AACd;AACF,CAAC;AAEYC,MAAAA,QAAQ,GAAGA,MAAqB;AAC3C,EAAA,MAAMC,OAAO,GAAGC,gBAAU,CAACC,iCAAY,CAAC;AAExC,EAAA,IAAI,CAACF,OAAO,IAAIN,eAAe,EAAE,EAAE;AACjC;AACAS,IAAAA,OAAO,CAACC,IAAI,CAAC,0CAA0C,CAAC;AAC1D;EAEA,MAAM;IAAEd,KAAK;AAAEE,IAAAA,UAAU,EAAEa;GAAmB,GAAGL,OAAO,IAAIX,eAAe;EAE3E,MAAMG,UAAU,GAAGF,KAAK,KAAKC,yBAAkB,GAAGE,0BAAmB,GAAGY,iBAAiB;EAEzF,OAAOC,aAAO,CACZ,OAAO;IACLhB,KAAK;IACLE,UAAU;AACVe,IAAAA,QAAQ,EAAEC,qBAAa,CAAClB,KAAK,CAAC;AAC9BmB,IAAAA,kBAAkB,EAAEA,0BAAkB,CAACnB,KAAK,CAAC;AAC7CoB,IAAAA,gBAAgB,EAAEA,wBAAgB,CAACpB,KAAK,EAAEE,UAAU,CAAC;AACrDmB,IAAAA,SAAS,EAAEC,yBAAiB,CAACtB,KAAK,EAAEE,UAAU;AAC/C,GAAA,CAAC,EACF,CAACF,KAAK,EAAEE,UAAU,CAAC,CACpB;AACH;;;;"}
+{"version":3,"file":"useTheme.js","sources":["../src/useTheme.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProviderContext';\nimport type { ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n  theme: NonNullable<Theming['theme']>;\n  screenMode: ScreenMode;\n  /** @deprecated */\n  isModern: boolean;\n  /** @deprecated */\n  isForestGreenTheme: boolean;\n  /** @deprecated */\n  isScreenModeDark: boolean;\n  /** @deprecated */\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":";;;;;;;AAoBA,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,iCAAY,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

@@ -1,7 +1,7 @@
 import { useContext, useMemo } from 'react';
 import { ThemeContext } from './ThemeProviderContext.mjs';
-import { DEFAULT_SCREEN_MODE, DEFAULT_BASE_THEME } from './const.mjs';
-import { getThemeClassName, isScreenModeDark, isForestGreenTheme, isThemeModern } from './helpers.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,

package/dist/useTheme.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.mjs","sources":["../src/useTheme.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProviderContext';\nimport type { ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n  theme: NonNullable<Theming['theme']>;\n  screenMode: ScreenMode;\n  isModern: boolean;\n  isForestGreenTheme: boolean;\n  isScreenModeDark: boolean;\n  className: string;\n}\n\nconst FALLBACK_VALUES = {\n  theme: DEFAULT_BASE_THEME,\n  screenMode: DEFAULT_SCREEN_MODE,\n} as const;\n\nconst isNotProduction = () => {\n  try {\n    return ['localhost', 'dev-wi.se'].includes(window.location.hostname);\n  } catch {\n    return false;\n  }\n};\n\nexport const useTheme = (): ThemeHookValue => {\n  const theming = useContext(ThemeContext);\n\n  if (!theming && isNotProduction()) {\n    // eslint-disable-next-line no-console\n    console.warn('Call to useTheme outside a ThemeProvider');\n  }\n\n  const { theme, screenMode: contextScreenMode } = theming ?? FALLBACK_VALUES;\n\n  const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;\n\n  return useMemo(\n    () => ({\n      theme,\n      screenMode,\n      isModern: isThemeModern(theme),\n      isForestGreenTheme: isForestGreenTheme(theme),\n      isScreenModeDark: isScreenModeDark(theme, screenMode),\n      className: getThemeClassName(theme, screenMode),\n    }),\n    [theme, screenMode],\n  );\n};\n"],"names":["FALLBACK_VALUES","theme","DEFAULT_BASE_THEME","screenMode","DEFAULT_SCREEN_MODE","isNotProduction","includes","window","location","hostname","useTheme","theming","useContext","ThemeContext","console","warn","contextScreenMode","useMemo","isModern","isThemeModern","isForestGreenTheme","isScreenModeDark","className","getThemeClassName"],"mappings":";;;;;AAgBA,MAAMA,eAAe,GAAG;AACtBC,EAAAA,KAAK,EAAEC,kBAAkB;AACzBC,EAAAA,UAAU,EAAEC;CACJ;AAEV,MAAMC,eAAe,GAAGA,MAAK;EAC3B,IAAI;AACF,IAAA,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACC,MAAM,CAACC,QAAQ,CAACC,QAAQ,CAAC;AACtE,GAAC,CAAC,MAAM;AACN,IAAA,OAAO,KAAK;AACd;AACF,CAAC;AAEYC,MAAAA,QAAQ,GAAGA,MAAqB;AAC3C,EAAA,MAAMC,OAAO,GAAGC,UAAU,CAACC,YAAY,CAAC;AAExC,EAAA,IAAI,CAACF,OAAO,IAAIN,eAAe,EAAE,EAAE;AACjC;AACAS,IAAAA,OAAO,CAACC,IAAI,CAAC,0CAA0C,CAAC;AAC1D;EAEA,MAAM;IAAEd,KAAK;AAAEE,IAAAA,UAAU,EAAEa;GAAmB,GAAGL,OAAO,IAAIX,eAAe;EAE3E,MAAMG,UAAU,GAAGF,KAAK,KAAKC,kBAAkB,GAAGE,mBAAmB,GAAGY,iBAAiB;EAEzF,OAAOC,OAAO,CACZ,OAAO;IACLhB,KAAK;IACLE,UAAU;AACVe,IAAAA,QAAQ,EAAEC,aAAa,CAAClB,KAAK,CAAC;AAC9BmB,IAAAA,kBAAkB,EAAEA,kBAAkB,CAACnB,KAAK,CAAC;AAC7CoB,IAAAA,gBAAgB,EAAEA,gBAAgB,CAACpB,KAAK,EAAEE,UAAU,CAAC;AACrDmB,IAAAA,SAAS,EAAEC,iBAAiB,CAACtB,KAAK,EAAEE,UAAU;AAC/C,GAAA,CAAC,EACF,CAACF,KAAK,EAAEE,UAAU,CAAC,CACpB;AACH;;;;"}
+{"version":3,"file":"useTheme.mjs","sources":["../src/useTheme.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProviderContext';\nimport type { ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n  theme: NonNullable<Theming['theme']>;\n  screenMode: ScreenMode;\n  /** @deprecated */\n  isModern: boolean;\n  /** @deprecated */\n  isForestGreenTheme: boolean;\n  /** @deprecated */\n  isScreenModeDark: boolean;\n  /** @deprecated */\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":";;;;;AAoBA,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": "0.0.0-experimental-84d9516",
+  "version": "0.0.0-experimental-010a0a4",
   "description": "Provides theming support for the Wise Design system components",
   "license": "Apache-2.0",
   "keywords": [
@@ -12,31 +12,31 @@
     "url": "git+https://github.com/transferwise/neptune-web.git"
   },
   "dependencies": {
-    "@babel/runtime": "^7.27.1",
+    "@babel/runtime": "^7.24.8",
     "clsx": "^2.1.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.27.1",
-    "@babel/plugin-transform-runtime": "^7.27.1",
-    "@babel/preset-env": "^7.27.2",
-    "@babel/preset-react": "^7.27.1",
-    "@babel/preset-typescript": "^7.27.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": "^12.1.2",
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
-    "@tsconfig/recommended": "^1.0.8",
+    "@rollup/plugin-typescript": "^11.1.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.14",
+    "@types/jest": "^29.5.12",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
     "@wise/eslint-config": "^12.3.0",
-    "eslint": "^9.27.0",
+    "eslint": "^9.26.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "rollup": "^4.41.1",
-    "rollup-preserve-directives": "^1.1.3",
+    "rollup": "^4.18.1",
+    "rollup-preserve-directives": "^1.1.1",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {

package/src/ThemeProvider.tsx

@@ -1,45 +1,23 @@
-import { PropsWithChildren, useContext, useEffect, useMemo } from 'react';
+import { PropsWithChildren, useMemo } from 'react';
 
-import { ThemedChildren } from './ThemedChildren';
+import { ThemedLayer } from './ThemedLayer';
 import type { Theming } from './const';
 import { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';
-import { getThemeClassName } from './helpers';
 import { ThemeContext } from './ThemeProviderContext';
 
 type ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };
 
-// RegEx to check for `np-theme-` class name
-const themeClass = /\bnp-theme-[a-z-]+\b/g;
-
 export const ThemeProvider = ({
   theme = DEFAULT_BASE_THEME,
   screenMode = DEFAULT_SCREEN_MODE,
-  isNotRootProvider = false,
   children,
   className = undefined,
 }: ThemeProviderProps) => {
-  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 (
     <ThemeContext.Provider value={contextValue}>
-      <ThemedChildren className={className}>{children}</ThemedChildren>
+      <ThemedLayer className={className}>{children}</ThemedLayer>
     </ThemeContext.Provider>
   );
 };

package/src/ThemedLayer.tsx

@@ -0,0 +1,14 @@
+import { clsx } from 'clsx';
+import { ReactNode } from 'react';
+
+import { useTheme } from './useTheme';
+import { getThemeClassName } from './helpers';
+
+type ThemedLayerProps = { className?: string; children: ReactNode };
+
+export const ThemedLayer = ({ className, children }: ThemedLayerProps) => {
+  const { theme, screenMode } = useTheme();
+  const themeClass = getThemeClassName(theme, screenMode);
+
+  return <div className={clsx(themeClass, className)}>{children}</div>;
+};

package/src/const.ts

@@ -22,5 +22,6 @@ export const DEFAULT_SCREEN_MODE = 'light';
 export type Theming = {
   theme?: ComponentTheme | BaseTheme | ExtraTheme | PlatformTheme | PlatformForestGreenTheme;
   screenMode?: ScreenMode;
+  /** @deprecated no-op */
   isNotRootProvider?: boolean | undefined;
 };

package/src/helpers.ts

@@ -8,16 +8,20 @@ import type {
 } from './const';
 import { extraThemes, screenModes, modernThemes } from './const';
 
+/** @deprecated */
 export const isThemeModern = (theme: NonNullable<Theming['theme']>): theme is ModernTheme =>
   modernThemes.includes(theme as ModernTheme);
 
+/** @deprecated */
 export const isExtraTheme = (theme: NonNullable<Theming['theme']>): theme is ExtraTheme =>
   extraThemes.includes(theme as ExtraTheme);
 
+/** @deprecated */
 export const isForestGreenTheme = (
   theme: NonNullable<Theming['theme']>,
 ): theme is ForestGreenTheme => theme === extraThemes[0];
 
+/** @deprecated */
 export const isScreenModeDark = (
   theme: NonNullable<Theming['theme']>,
   screenMode: ScreenMode,

package/src/index.ts

@@ -9,5 +9,7 @@ export {
   getThemeClassName,
 } from './helpers';
 
+export { ThemeContext } from './ThemeProviderContext';
 export { ThemeProvider } from './ThemeProvider';
 export { useTheme } from './useTheme';
+export { ThemedLayer } from './ThemedLayer';

package/src/useTheme.ts

@@ -8,9 +8,13 @@ import { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName
 interface ThemeHookValue {
   theme: NonNullable<Theming['theme']>;
   screenMode: ScreenMode;
+  /** @deprecated */
   isModern: boolean;
+  /** @deprecated */
   isForestGreenTheme: boolean;
+  /** @deprecated */
   isScreenModeDark: boolean;
+  /** @deprecated */
   className: string;
 }
 

package/dist/ThemedChildren.d.ts

@@ -1,8 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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,GAAI,yBAAqC,mBAAmB,gCAItF,CAAC"}

package/dist/ThemedChildren.js.map

@@ -1 +0,0 @@
-{"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;AAAQ,CAAuB,KAAI;EACzF,MAAM;AAAEF,IAAAA,SAAS,EAAEG;GAAY,GAAGC,iBAAQ,EAAE;AAE5C,EAAA,oBAAOC,cAAA,CAAA,KAAA,EAAA;AAAKL,IAAAA,SAAS,EAAEM,SAAI,CAACH,UAAU,EAAEH,SAAS,CAAE;AAAAE,IAAAA,QAAA,EAAEA;AAAQ,GAAM,CAAC;AACtE;;;;"}

package/dist/ThemedChildren.mjs.map

@@ -1 +0,0 @@
-{"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;AAAQ,CAAuB,KAAI;EACzF,MAAM;AAAEF,IAAAA,SAAS,EAAEG;GAAY,GAAGC,QAAQ,EAAE;AAE5C,EAAA,oBAAOC,GAAA,CAAA,KAAA,EAAA;AAAKL,IAAAA,SAAS,EAAEM,IAAI,CAACH,UAAU,EAAEH,SAAS,CAAE;AAAAE,IAAAA,QAAA,EAAEA;AAAQ,GAAM,CAAC;AACtE;;;;"}

package/src/ThemedChildren.tsx

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