@wise/components-theming 0.1.1-next-74bd02ad78.0 → 0.1.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.1](https://github.com/transferwise/neptune-web/compare/@wise/components-theming@0.1.0...@wise/components-theming@0.1.1) (2022-11-07)
+
+
+### Bug Fixes
+
+* **components-theming:** fix build ([#1747](https://github.com/transferwise/neptune-web/issues/1747)) ([f077c1a](https://github.com/transferwise/neptune-web/commit/f077c1aff760b8b65fa663a236cf168360ecdcf8))
+
+
+
+
+
 # 0.1.0 (2022-11-02)
 
 

package/dist/cjs/index.d.ts

@@ -9,12 +9,6 @@ type ThemeProviderProps = PropsWithChildren<{
     theme: ComponentTheme | undefined;
 }>;
 declare const ThemeProvider: ({ theme, children }: ThemeProviderProps) => JSX.Element;
-interface ThemeHookValue {
-    theme: ComponentTheme;
-    isModern: boolean;
-    isDark: boolean;
-    className: string;
-}
-declare const useTheme: () => ThemeHookValue;
+declare const useTheme: () => ComponentTheme;
 export type { ComponentTheme };
 export { ThemeProvider, useTheme };

package/dist/cjs/index.js

@@ -3,20 +3,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 
-var modernThemes = ['personal'];
-var darkThemes = [];
 var DEFAULT_COMPONENT_THEME = 'light';
 
-var isThemeModern = function isThemeModern(theme) {
-  return modernThemes.includes(theme);
-};
-var isThemeDark = function isThemeDark(theme) {
-  return darkThemes.includes(theme);
-};
-var getThemeClassName = function getThemeClassName(theme) {
-  return "np-theme-".concat(theme);
-};
-
 var ThemeContext = /*#__PURE__*/react.createContext(DEFAULT_COMPONENT_THEME);
 var ThemeProvider = function ThemeProvider(_ref) {
   var _ref$theme = _ref.theme,
@@ -35,7 +23,7 @@ var ThemeProvider = function ThemeProvider(_ref) {
     } // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
 
 
-    var classNames = [getThemeClassName(theme), child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.className].filter(Boolean).join(' ');
+    var classNames = ["np-theme-".concat(theme), child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.className].filter(Boolean).join(' ');
     return /*#__PURE__*/react.cloneElement(child, {
       className: classNames // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
@@ -50,15 +38,7 @@ var ThemeProvider = function ThemeProvider(_ref) {
 var useTheme = function useTheme() {
   var _useContext;
 
-  var theme = (_useContext = react.useContext(ThemeContext)) !== null && _useContext !== void 0 ? _useContext : DEFAULT_COMPONENT_THEME;
-  return react.useMemo(function () {
-    return {
-      theme: theme,
-      isModern: isThemeModern(theme),
-      isDark: isThemeDark(theme),
-      className: getThemeClassName(theme)
-    };
-  }, [theme]);
+  return (_useContext = react.useContext(ThemeContext)) !== null && _useContext !== void 0 ? _useContext : DEFAULT_COMPONENT_THEME;
 };
 
 exports.ThemeProvider = ThemeProvider;

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/const.ts","../../src/helpers.ts","../../src/ThemeProvider.tsx","../../src/useTheme.ts"],"sourcesContent":["export const componentThemes = ['light', 'personal'] as const;\nexport const modernThemes = ['personal'] as const;\nexport const darkThemes = [] as const;\n\nexport type ComponentTheme = typeof componentThemes[number];\nexport type ModernTheme = typeof modernThemes[number];\nexport type DarkTheme = typeof darkThemes[number];\n\nexport const DEFAULT_COMPONENT_THEME = 'light' as const;\n","import { ComponentTheme, DarkTheme, ModernTheme, modernThemes, darkThemes } from './const';\n\nexport const isThemeModern = (theme: ComponentTheme): theme is ModernTheme =>\n  modernThemes.includes(theme as ModernTheme);\n\nexport const isThemeDark = (theme: ComponentTheme): theme is DarkTheme =>\n  darkThemes.includes(theme as DarkTheme);\n\nexport const getThemeClassName = (theme: ComponentTheme) => `np-theme-${theme}`;\n","import React from 'react';\nimport { Children, cloneElement, createContext, isValidElement, PropsWithChildren } from 'react';\n\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\nimport { getThemeClassName } from './helpers';\n\nexport const ThemeContext = createContext<ComponentTheme>(DEFAULT_COMPONENT_THEME);\n\ntype ThemeProviderProps = PropsWithChildren<{\n  theme: ComponentTheme | undefined;\n}>;\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_COMPONENT_THEME,\n  children,\n}: ThemeProviderProps) => {\n  const themedChildren = Children.map(children, (child) => {\n    if (!isValidElement(child)) {\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.warn(\n          '[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!',\n        );\n      }\n      return child;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n    const classNames = [getThemeClassName(theme), child?.props?.className]\n      .filter(Boolean)\n      .join(' ');\n\n    return cloneElement(child, {\n      className: classNames,\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } as any);\n  });\n\n  return <ThemeContext.Provider value={theme}>{themedChildren}</ThemeContext.Provider>;\n};\n","import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\nimport { getThemeClassName, isThemeDark, isThemeModern } from './helpers';\n\ninterface ThemeHookValue {\n  theme: ComponentTheme;\n  isModern: boolean;\n  isDark: boolean;\n  className: string;\n}\n\nexport const useTheme = (): ThemeHookValue => {\n  const theme = useContext(ThemeContext) ?? DEFAULT_COMPONENT_THEME;\n\n  return useMemo(\n    () => ({\n      theme,\n      isModern: isThemeModern(theme),\n      isDark: isThemeDark(theme),\n      className: getThemeClassName(theme),\n    }),\n    [theme],\n  );\n};\n"],"names":["modernThemes","darkThemes","DEFAULT_COMPONENT_THEME","isThemeModern","theme","includes","isThemeDark","getThemeClassName","ThemeContext","createContext","ThemeProvider","children","themedChildren","Children","map","child","isValidElement","process","env","NODE_ENV","console","warn","classNames","props","className","filter","Boolean","join","cloneElement","_jsx","Provider","value","useTheme","useContext","useMemo","isModern","isDark"],"mappings":";;;;;AACO,IAAMA,YAAY,GAAG,CAAC,UAAD,CAArB,CAAA;AACA,IAAMC,UAAU,GAAG,EAAnB,CAAA;AAMA,IAAMC,uBAAuB,GAAG,OAAhC;;ACNA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAAA;AAAA,EAAA,OAC3BJ,YAAY,CAACK,QAAb,CAAsBD,KAAtB,CAD2B,CAAA;AAAA,CAAtB,CAAA;AAGA,IAAME,WAAW,GAAG,SAAdA,WAAc,CAACF,KAAD,EAAA;AAAA,EAAA,OACzBH,UAAU,CAACI,QAAX,CAAoBD,KAApB,CADyB,CAAA;AAAA,CAApB,CAAA;AAGA,IAAMG,iBAAiB,GAAG,SAApBA,iBAAoB,CAACH,KAAD,EAAA;AAAA,EAAA,OAAA,WAAA,CAAA,MAAA,CAAuCA,KAAvC,CAAA,CAAA;AAAA,CAA1B;;ACFA,IAAMI,YAAY,gBAAGC,mBAAa,CAAiBP,uBAAjB,CAAlC,CAAA;AAMMQ,IAAAA,aAAa,GAAG,SAAhBA,aAAgB,CAGJ,IAAA,EAAA;AAAA,EAAA,IAAA,UAAA,GAAA,IAAA,CAFvBN,KAEuB;MAFvBA,KAEuB,2BAFfF,uBAEe,GAAA,UAAA;MADvBS,QACuB,QADvBA,QACuB,CAAA;EACvB,IAAMC,cAAc,GAAGC,cAAQ,CAACC,GAAT,CAAaH,QAAb,EAAuB,UAACI,KAAD,EAAU;AAAA,IAAA,IAAA,YAAA,CAAA;;AACtD,IAAA,IAAI,eAACC,oBAAc,CAACD,KAAD,CAAnB,EAA4B;AAC1B,MAAA,IAAIE,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,YAA7B,EAA2C;AACzC;QACAC,OAAO,CAACC,IAAR,CACE,iGADF,CAAA,CAAA;AAGD,OAAA;;AACD,MAAA,OAAON,KAAP,CAAA;AACD,KATqD;;;IAYtD,IAAMO,UAAU,GAAG,CAACf,iBAAiB,CAACH,KAAD,CAAlB,EAA2BW,KAA3B,KAA2BA,IAAAA,IAAAA,KAA3B,KAA2BA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,CAAAA,YAAAA,GAAAA,KAAK,CAAEQ,KAAlC,MAAA,IAAA,IAAA,YAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAA2B,YAAcC,CAAAA,SAAzC,CAChBC,CAAAA,MADgB,CACTC,OADS,CAEhBC,CAAAA,IAFgB,CAEX,GAFW,CAAnB,CAAA;IAIA,oBAAOC,kBAAY,CAACb,KAAD,EAAQ;MACzBS,SAAS,EAAEF,UADc;;AAAA,KAAR,CAAnB,CAAA;AAID,GApBsB,CAAvB,CAAA;AAsBA,EAAA,OAAOO,cAACrB,CAAAA,YAAY,CAACsB,QAAd,EAAsB;AAACC,IAAAA,KAAK,EAAE3B,KAAR;IAAaO,QAAGC,EAAAA,cAAAA;AAAhB,GAAtB,CAAP,CAAA;AACD;;AC1BYoB,IAAAA,QAAQ,GAAG,SAAXA,QAAW,GAAqB;AAAA,EAAA,IAAA,WAAA,CAAA;;AAC3C,EAAA,IAAM5B,KAAK,GAAG6B,CAAAA,WAAAA,GAAAA,gBAAU,CAACzB,YAAD,CAAb,qDAA+BN,uBAA1C,CAAA;AAEA,EAAA,OAAOgC,aAAO,CACZ,YAAA;IAAA,OAAO;AACL9B,MAAAA,KAAK,EAALA,KADK;AAEL+B,MAAAA,QAAQ,EAAEhC,aAAa,CAACC,KAAD,CAFlB;AAGLgC,MAAAA,MAAM,EAAE9B,WAAW,CAACF,KAAD,CAHd;MAILoB,SAAS,EAAEjB,iBAAiB,CAACH,KAAD,CAAA;KAJ9B,CAAA;AAAA,GADY,EAOZ,CAACA,KAAD,CAPY,CAAd,CAAA;AASD;;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/const.ts","../../src/ThemeProvider.tsx","../../src/useTheme.ts"],"sourcesContent":["export const componentThemes = ['light', 'personal'] as const;\n\nexport type ComponentTheme = typeof componentThemes[number];\n\nexport const DEFAULT_COMPONENT_THEME = 'light' as const;\n","import { Children, cloneElement, createContext, isValidElement, PropsWithChildren } from 'react';\n\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\n\nexport const ThemeContext = createContext<ComponentTheme>(DEFAULT_COMPONENT_THEME);\n\ntype ThemeProviderProps = PropsWithChildren<{\n  theme: ComponentTheme | undefined;\n}>;\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_COMPONENT_THEME,\n  children,\n}: ThemeProviderProps) => {\n  const themedChildren = Children.map(children, (child) => {\n    if (!isValidElement(child)) {\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.warn(\n          '[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!',\n        );\n      }\n      return child;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n    const classNames = [`np-theme-${theme}`, child?.props?.className].filter(Boolean).join(' ');\n\n    return cloneElement(child, {\n      className: classNames,\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } as any);\n  });\n\n  return <ThemeContext.Provider value={theme}>{themedChildren}</ThemeContext.Provider>;\n};\n","import { useContext } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\n\nexport const useTheme = (): ComponentTheme => {\n  return useContext(ThemeContext) ?? DEFAULT_COMPONENT_THEME;\n};\n"],"names":["DEFAULT_COMPONENT_THEME","ThemeContext","createContext","ThemeProvider","theme","children","themedChildren","Children","map","child","isValidElement","process","env","NODE_ENV","console","warn","classNames","props","className","filter","Boolean","join","cloneElement","_jsx","Provider","value","useTheme","useContext"],"mappings":";;;;;AAIO,IAAMA,uBAAuB,GAAG,OAAhC;;ACAA,IAAMC,YAAY,gBAAGC,mBAAa,CAAiBF,uBAAjB,CAAlC,CAAA;AAMMG,IAAAA,aAAa,GAAG,SAAhBA,aAAgB,CAGJ,IAAA,EAAA;AAAA,EAAA,IAAA,UAAA,GAAA,IAAA,CAFvBC,KAEuB;MAFvBA,KAEuB,2BAFfJ,uBAEe,GAAA,UAAA;MADvBK,QACuB,QADvBA,QACuB,CAAA;EACvB,IAAMC,cAAc,GAAGC,cAAQ,CAACC,GAAT,CAAaH,QAAb,EAAuB,UAACI,KAAD,EAAU;AAAA,IAAA,IAAA,YAAA,CAAA;;AACtD,IAAA,IAAI,eAACC,oBAAc,CAACD,KAAD,CAAnB,EAA4B;AAC1B,MAAA,IAAIE,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,YAA7B,EAA2C;AACzC;QACAC,OAAO,CAACC,IAAR,CACE,iGADF,CAAA,CAAA;AAGD,OAAA;;AACD,MAAA,OAAON,KAAP,CAAA;AACD,KATqD;;;IAYtD,IAAMO,UAAU,GAAG,CAAaZ,WAAAA,CAAAA,MAAAA,CAAAA,KAAb,GAAsBK,KAAtB,KAAA,IAAA,IAAsBA,KAAtB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAA,YAAA,GAAsBA,KAAK,CAAEQ,KAA7B,MAAsB,IAAA,IAAA,YAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAcC,SAApC,CAAA,CAA+CC,MAA/C,CAAsDC,OAAtD,CAA+DC,CAAAA,IAA/D,CAAoE,GAApE,CAAnB,CAAA;IAEA,oBAAOC,kBAAY,CAACb,KAAD,EAAQ;MACzBS,SAAS,EAAEF,UADc;;AAAA,KAAR,CAAnB,CAAA;AAID,GAlBsB,CAAvB,CAAA;AAoBA,EAAA,OAAOO,cAACtB,CAAAA,YAAY,CAACuB,QAAd,EAAsB;AAACC,IAAAA,KAAK,EAAErB,KAAR;IAAaC,QAAGC,EAAAA,cAAAA;AAAhB,GAAtB,CAAP,CAAA;AACD;;AC9BYoB,IAAAA,QAAQ,GAAG,SAAXA,QAAW,GAAqB;AAAA,EAAA,IAAA,WAAA,CAAA;;AAC3C,EAAA,OAAA,CAAA,WAAA,GAAOC,gBAAU,CAAC1B,YAAD,CAAjB,qDAAmCD,uBAAnC,CAAA;AACD;;;;;"}

package/dist/es/index.d.ts

@@ -9,12 +9,6 @@ type ThemeProviderProps = PropsWithChildren<{
     theme: ComponentTheme | undefined;
 }>;
 declare const ThemeProvider: ({ theme, children }: ThemeProviderProps) => JSX.Element;
-interface ThemeHookValue {
-    theme: ComponentTheme;
-    isModern: boolean;
-    isDark: boolean;
-    className: string;
-}
-declare const useTheme: () => ThemeHookValue;
+declare const useTheme: () => ComponentTheme;
 export type { ComponentTheme };
 export { ThemeProvider, useTheme };

package/dist/es/index.js

@@ -1,20 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
-import { Children, isValidElement, cloneElement, createContext, useContext, useMemo } from 'react';
+import { Children, isValidElement, cloneElement, createContext, useContext } from 'react';
 
-var modernThemes = ['personal'];
-var darkThemes = [];
 var DEFAULT_COMPONENT_THEME = 'light';
 
-var isThemeModern = function isThemeModern(theme) {
-  return modernThemes.includes(theme);
-};
-var isThemeDark = function isThemeDark(theme) {
-  return darkThemes.includes(theme);
-};
-var getThemeClassName = function getThemeClassName(theme) {
-  return "np-theme-".concat(theme);
-};
-
 var ThemeContext = /*#__PURE__*/createContext(DEFAULT_COMPONENT_THEME);
 var ThemeProvider = function ThemeProvider(_ref) {
   var _ref$theme = _ref.theme,
@@ -33,7 +21,7 @@ var ThemeProvider = function ThemeProvider(_ref) {
     } // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
 
 
-    var classNames = [getThemeClassName(theme), child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.className].filter(Boolean).join(' ');
+    var classNames = ["np-theme-".concat(theme), child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.className].filter(Boolean).join(' ');
     return /*#__PURE__*/cloneElement(child, {
       className: classNames // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
@@ -48,15 +36,7 @@ var ThemeProvider = function ThemeProvider(_ref) {
 var useTheme = function useTheme() {
   var _useContext;
 
-  var theme = (_useContext = useContext(ThemeContext)) !== null && _useContext !== void 0 ? _useContext : DEFAULT_COMPONENT_THEME;
-  return useMemo(function () {
-    return {
-      theme: theme,
-      isModern: isThemeModern(theme),
-      isDark: isThemeDark(theme),
-      className: getThemeClassName(theme)
-    };
-  }, [theme]);
+  return (_useContext = useContext(ThemeContext)) !== null && _useContext !== void 0 ? _useContext : DEFAULT_COMPONENT_THEME;
 };
 
 export { ThemeProvider, useTheme };

package/dist/es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/const.ts","../../src/helpers.ts","../../src/ThemeProvider.tsx","../../src/useTheme.ts"],"sourcesContent":["export const componentThemes = ['light', 'personal'] as const;\nexport const modernThemes = ['personal'] as const;\nexport const darkThemes = [] as const;\n\nexport type ComponentTheme = typeof componentThemes[number];\nexport type ModernTheme = typeof modernThemes[number];\nexport type DarkTheme = typeof darkThemes[number];\n\nexport const DEFAULT_COMPONENT_THEME = 'light' as const;\n","import { ComponentTheme, DarkTheme, ModernTheme, modernThemes, darkThemes } from './const';\n\nexport const isThemeModern = (theme: ComponentTheme): theme is ModernTheme =>\n  modernThemes.includes(theme as ModernTheme);\n\nexport const isThemeDark = (theme: ComponentTheme): theme is DarkTheme =>\n  darkThemes.includes(theme as DarkTheme);\n\nexport const getThemeClassName = (theme: ComponentTheme) => `np-theme-${theme}`;\n","import React from 'react';\nimport { Children, cloneElement, createContext, isValidElement, PropsWithChildren } from 'react';\n\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\nimport { getThemeClassName } from './helpers';\n\nexport const ThemeContext = createContext<ComponentTheme>(DEFAULT_COMPONENT_THEME);\n\ntype ThemeProviderProps = PropsWithChildren<{\n  theme: ComponentTheme | undefined;\n}>;\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_COMPONENT_THEME,\n  children,\n}: ThemeProviderProps) => {\n  const themedChildren = Children.map(children, (child) => {\n    if (!isValidElement(child)) {\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.warn(\n          '[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!',\n        );\n      }\n      return child;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n    const classNames = [getThemeClassName(theme), child?.props?.className]\n      .filter(Boolean)\n      .join(' ');\n\n    return cloneElement(child, {\n      className: classNames,\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } as any);\n  });\n\n  return <ThemeContext.Provider value={theme}>{themedChildren}</ThemeContext.Provider>;\n};\n","import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\nimport { getThemeClassName, isThemeDark, isThemeModern } from './helpers';\n\ninterface ThemeHookValue {\n  theme: ComponentTheme;\n  isModern: boolean;\n  isDark: boolean;\n  className: string;\n}\n\nexport const useTheme = (): ThemeHookValue => {\n  const theme = useContext(ThemeContext) ?? DEFAULT_COMPONENT_THEME;\n\n  return useMemo(\n    () => ({\n      theme,\n      isModern: isThemeModern(theme),\n      isDark: isThemeDark(theme),\n      className: getThemeClassName(theme),\n    }),\n    [theme],\n  );\n};\n"],"names":["modernThemes","darkThemes","DEFAULT_COMPONENT_THEME","isThemeModern","theme","includes","isThemeDark","getThemeClassName","ThemeContext","createContext","ThemeProvider","children","themedChildren","Children","map","child","isValidElement","process","env","NODE_ENV","console","warn","classNames","props","className","filter","Boolean","join","cloneElement","_jsx","Provider","value","useTheme","useContext","useMemo","isModern","isDark"],"mappings":";;;AACO,IAAMA,YAAY,GAAG,CAAC,UAAD,CAArB,CAAA;AACA,IAAMC,UAAU,GAAG,EAAnB,CAAA;AAMA,IAAMC,uBAAuB,GAAG,OAAhC;;ACNA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAAA;AAAA,EAAA,OAC3BJ,YAAY,CAACK,QAAb,CAAsBD,KAAtB,CAD2B,CAAA;AAAA,CAAtB,CAAA;AAGA,IAAME,WAAW,GAAG,SAAdA,WAAc,CAACF,KAAD,EAAA;AAAA,EAAA,OACzBH,UAAU,CAACI,QAAX,CAAoBD,KAApB,CADyB,CAAA;AAAA,CAApB,CAAA;AAGA,IAAMG,iBAAiB,GAAG,SAApBA,iBAAoB,CAACH,KAAD,EAAA;AAAA,EAAA,OAAA,WAAA,CAAA,MAAA,CAAuCA,KAAvC,CAAA,CAAA;AAAA,CAA1B;;ACFA,IAAMI,YAAY,gBAAGC,aAAa,CAAiBP,uBAAjB,CAAlC,CAAA;AAMMQ,IAAAA,aAAa,GAAG,SAAhBA,aAAgB,CAGJ,IAAA,EAAA;AAAA,EAAA,IAAA,UAAA,GAAA,IAAA,CAFvBN,KAEuB;MAFvBA,KAEuB,2BAFfF,uBAEe,GAAA,UAAA;MADvBS,QACuB,QADvBA,QACuB,CAAA;EACvB,IAAMC,cAAc,GAAGC,QAAQ,CAACC,GAAT,CAAaH,QAAb,EAAuB,UAACI,KAAD,EAAU;AAAA,IAAA,IAAA,YAAA,CAAA;;AACtD,IAAA,IAAI,eAACC,cAAc,CAACD,KAAD,CAAnB,EAA4B;AAC1B,MAAA,IAAIE,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,YAA7B,EAA2C;AACzC;QACAC,OAAO,CAACC,IAAR,CACE,iGADF,CAAA,CAAA;AAGD,OAAA;;AACD,MAAA,OAAON,KAAP,CAAA;AACD,KATqD;;;IAYtD,IAAMO,UAAU,GAAG,CAACf,iBAAiB,CAACH,KAAD,CAAlB,EAA2BW,KAA3B,KAA2BA,IAAAA,IAAAA,KAA3B,KAA2BA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,CAAAA,YAAAA,GAAAA,KAAK,CAAEQ,KAAlC,MAAA,IAAA,IAAA,YAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAA2B,YAAcC,CAAAA,SAAzC,CAChBC,CAAAA,MADgB,CACTC,OADS,CAEhBC,CAAAA,IAFgB,CAEX,GAFW,CAAnB,CAAA;IAIA,oBAAOC,YAAY,CAACb,KAAD,EAAQ;MACzBS,SAAS,EAAEF,UADc;;AAAA,KAAR,CAAnB,CAAA;AAID,GApBsB,CAAvB,CAAA;AAsBA,EAAA,OAAOO,GAACrB,CAAAA,YAAY,CAACsB,QAAd,EAAsB;AAACC,IAAAA,KAAK,EAAE3B,KAAR;IAAaO,QAAGC,EAAAA,cAAAA;AAAhB,GAAtB,CAAP,CAAA;AACD;;AC1BYoB,IAAAA,QAAQ,GAAG,SAAXA,QAAW,GAAqB;AAAA,EAAA,IAAA,WAAA,CAAA;;AAC3C,EAAA,IAAM5B,KAAK,GAAG6B,CAAAA,WAAAA,GAAAA,UAAU,CAACzB,YAAD,CAAb,qDAA+BN,uBAA1C,CAAA;AAEA,EAAA,OAAOgC,OAAO,CACZ,YAAA;IAAA,OAAO;AACL9B,MAAAA,KAAK,EAALA,KADK;AAEL+B,MAAAA,QAAQ,EAAEhC,aAAa,CAACC,KAAD,CAFlB;AAGLgC,MAAAA,MAAM,EAAE9B,WAAW,CAACF,KAAD,CAHd;MAILoB,SAAS,EAAEjB,iBAAiB,CAACH,KAAD,CAAA;KAJ9B,CAAA;AAAA,GADY,EAOZ,CAACA,KAAD,CAPY,CAAd,CAAA;AASD;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/const.ts","../../src/ThemeProvider.tsx","../../src/useTheme.ts"],"sourcesContent":["export const componentThemes = ['light', 'personal'] as const;\n\nexport type ComponentTheme = typeof componentThemes[number];\n\nexport const DEFAULT_COMPONENT_THEME = 'light' as const;\n","import { Children, cloneElement, createContext, isValidElement, PropsWithChildren } from 'react';\n\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\n\nexport const ThemeContext = createContext<ComponentTheme>(DEFAULT_COMPONENT_THEME);\n\ntype ThemeProviderProps = PropsWithChildren<{\n  theme: ComponentTheme | undefined;\n}>;\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_COMPONENT_THEME,\n  children,\n}: ThemeProviderProps) => {\n  const themedChildren = Children.map(children, (child) => {\n    if (!isValidElement(child)) {\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.warn(\n          '[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!',\n        );\n      }\n      return child;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n    const classNames = [`np-theme-${theme}`, child?.props?.className].filter(Boolean).join(' ');\n\n    return cloneElement(child, {\n      className: classNames,\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } as any);\n  });\n\n  return <ThemeContext.Provider value={theme}>{themedChildren}</ThemeContext.Provider>;\n};\n","import { useContext } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\n\nexport const useTheme = (): ComponentTheme => {\n  return useContext(ThemeContext) ?? DEFAULT_COMPONENT_THEME;\n};\n"],"names":["DEFAULT_COMPONENT_THEME","ThemeContext","createContext","ThemeProvider","theme","children","themedChildren","Children","map","child","isValidElement","process","env","NODE_ENV","console","warn","classNames","props","className","filter","Boolean","join","cloneElement","_jsx","Provider","value","useTheme","useContext"],"mappings":";;;AAIO,IAAMA,uBAAuB,GAAG,OAAhC;;ACAA,IAAMC,YAAY,gBAAGC,aAAa,CAAiBF,uBAAjB,CAAlC,CAAA;AAMMG,IAAAA,aAAa,GAAG,SAAhBA,aAAgB,CAGJ,IAAA,EAAA;AAAA,EAAA,IAAA,UAAA,GAAA,IAAA,CAFvBC,KAEuB;MAFvBA,KAEuB,2BAFfJ,uBAEe,GAAA,UAAA;MADvBK,QACuB,QADvBA,QACuB,CAAA;EACvB,IAAMC,cAAc,GAAGC,QAAQ,CAACC,GAAT,CAAaH,QAAb,EAAuB,UAACI,KAAD,EAAU;AAAA,IAAA,IAAA,YAAA,CAAA;;AACtD,IAAA,IAAI,eAACC,cAAc,CAACD,KAAD,CAAnB,EAA4B;AAC1B,MAAA,IAAIE,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,YAA7B,EAA2C;AACzC;QACAC,OAAO,CAACC,IAAR,CACE,iGADF,CAAA,CAAA;AAGD,OAAA;;AACD,MAAA,OAAON,KAAP,CAAA;AACD,KATqD;;;IAYtD,IAAMO,UAAU,GAAG,CAAaZ,WAAAA,CAAAA,MAAAA,CAAAA,KAAb,GAAsBK,KAAtB,KAAA,IAAA,IAAsBA,KAAtB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAA,YAAA,GAAsBA,KAAK,CAAEQ,KAA7B,MAAsB,IAAA,IAAA,YAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAcC,SAApC,CAAA,CAA+CC,MAA/C,CAAsDC,OAAtD,CAA+DC,CAAAA,IAA/D,CAAoE,GAApE,CAAnB,CAAA;IAEA,oBAAOC,YAAY,CAACb,KAAD,EAAQ;MACzBS,SAAS,EAAEF,UADc;;AAAA,KAAR,CAAnB,CAAA;AAID,GAlBsB,CAAvB,CAAA;AAoBA,EAAA,OAAOO,GAACtB,CAAAA,YAAY,CAACuB,QAAd,EAAsB;AAACC,IAAAA,KAAK,EAAErB,KAAR;IAAaC,QAAGC,EAAAA,cAAAA;AAAhB,GAAtB,CAAP,CAAA;AACD;;AC9BYoB,IAAAA,QAAQ,GAAG,SAAXA,QAAW,GAAqB;AAAA,EAAA,IAAA,WAAA,CAAA;;AAC3C,EAAA,OAAA,CAAA,WAAA,GAAOC,UAAU,CAAC1B,YAAD,CAAjB,qDAAmCD,uBAAnC,CAAA;AACD;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/components-theming",
-  "version": "0.1.1-next-74bd02ad78.0+74bd02ad78",
+  "version": "0.1.1",
   "description": "Provides theming support for the Wise Design system components",
   "license": "Apache-2.0",
   "keywords": [
@@ -43,5 +43,5 @@
     "dist/",
     "src/"
   ],
-  "gitHead": "74bd02ad78b0fdafed567c3bc0eb7a1049ec1ccd"
+  "gitHead": "6fdf7eae7b108f3744d768b79c59e04c68be1e5b"
 }

package/src/ThemeProvider.tsx

@@ -1,8 +1,6 @@
-import React from 'react';
 import { Children, cloneElement, createContext, isValidElement, PropsWithChildren } from 'react';
 
 import { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';
-import { getThemeClassName } from './helpers';
 
 export const ThemeContext = createContext<ComponentTheme>(DEFAULT_COMPONENT_THEME);
 
@@ -26,9 +24,7 @@ export const ThemeProvider = ({
     }
 
     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    const classNames = [getThemeClassName(theme), child?.props?.className]
-      .filter(Boolean)
-      .join(' ');
+    const classNames = [`np-theme-${theme}`, child?.props?.className].filter(Boolean).join(' ');
 
     return cloneElement(child, {
       className: classNames,

package/src/const.ts

@@ -1,9 +1,5 @@
 export const componentThemes = ['light', 'personal'] as const;
-export const modernThemes = ['personal'] as const;
-export const darkThemes = [] as const;
 
 export type ComponentTheme = typeof componentThemes[number];
-export type ModernTheme = typeof modernThemes[number];
-export type DarkTheme = typeof darkThemes[number];
 
 export const DEFAULT_COMPONENT_THEME = 'light' as const;

package/src/useTheme.spec.tsx

@@ -9,12 +9,7 @@ describe('useTheme', () => {
       result: { current },
     } = renderHook(() => useTheme());
 
-    expect(current).toStrictEqual({
-      theme: 'light',
-      isModern: false,
-      isDark: false,
-      className: 'np-theme-light',
-    });
+    expect(current).toStrictEqual('light');
   });
 
   it('returns provided theme', () => {
@@ -27,11 +22,6 @@ describe('useTheme', () => {
       },
     });
 
-    expect(current).toStrictEqual({
-      className: 'np-theme-personal',
-      isDark: false,
-      isModern: true,
-      theme: 'personal',
-    });
+    expect(current).toStrictEqual('personal');
   });
 });

package/src/useTheme.ts

@@ -1,26 +1,8 @@
-import { useContext, useMemo } from 'react';
+import { useContext } from 'react';
 
 import { ThemeContext } from './ThemeProvider';
 import { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';
-import { getThemeClassName, isThemeDark, isThemeModern } from './helpers';
 
-interface ThemeHookValue {
-  theme: ComponentTheme;
-  isModern: boolean;
-  isDark: boolean;
-  className: string;
-}
-
-export const useTheme = (): ThemeHookValue => {
-  const theme = useContext(ThemeContext) ?? DEFAULT_COMPONENT_THEME;
-
-  return useMemo(
-    () => ({
-      theme,
-      isModern: isThemeModern(theme),
-      isDark: isThemeDark(theme),
-      className: getThemeClassName(theme),
-    }),
-    [theme],
-  );
+export const useTheme = (): ComponentTheme => {
+  return useContext(ThemeContext) ?? DEFAULT_COMPONENT_THEME;
 };

package/src/helpers.ts

@@ -1,9 +0,0 @@
-import { ComponentTheme, DarkTheme, ModernTheme, modernThemes, darkThemes } from './const';
-
-export const isThemeModern = (theme: ComponentTheme): theme is ModernTheme =>
-  modernThemes.includes(theme as ModernTheme);
-
-export const isThemeDark = (theme: ComponentTheme): theme is DarkTheme =>
-  darkThemes.includes(theme as DarkTheme);
-
-export const getThemeClassName = (theme: ComponentTheme) => `np-theme-${theme}`;