@wise/components-theming 1.4.0 → 1.6.0

package/dist/ThemedChildren.js

@@ -1,13 +1,9 @@
 'use strict';
 
-var classNames = require('classnames');
+var clsx = require('clsx');
 var useTheme = require('./useTheme.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
-
 const ThemedChildren = ({
   className = undefined,
   children
@@ -16,7 +12,7 @@ const ThemedChildren = ({
     className: themeClass
   } = useTheme.useTheme();
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: classNames__default.default(themeClass, className),
+    className: clsx.clsx(themeClass, className),
     children: children
   });
 };

package/dist/ThemedChildren.js.map

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

package/dist/ThemedChildren.mjs

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useTheme } from './useTheme.mjs';
 import { jsx } from 'react/jsx-runtime';
 
@@ -10,7 +10,7 @@ const ThemedChildren = ({
     className: themeClass
   } = useTheme();
   return /*#__PURE__*/jsx("div", {
-    className: classNames(themeClass, className),
+    className: clsx(themeClass, className),
     children: children
   });
 };

package/dist/ThemedChildren.mjs.map

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

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

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

package/dist/index.d.ts.map

@@ -1 +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"}
+{"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"}

package/dist/index.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var helpers = require('./helpers.js');

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,3 +1,4 @@
+'use client';
 export { getThemeClassName, isExtraTheme, isForestGreenTheme, isScreenModeDark, isThemeModern } from './helpers.mjs';
 export { ThemeProvider } from './ThemeProvider.mjs';
 export { useTheme } from './useTheme.mjs';

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/package.json

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

package/src/ThemedChildren.tsx

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

package/src/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 export type { ComponentTheme, BaseTheme, ExtraTheme, ScreenMode, Theming } from './const';
 export {
   isThemeModern,