@neo4j-ndl/react 2.8.12 → 2.9.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Change Log
 
+## 2.9.0
+
+### Minor Changes
+
+- [#793](https://github.com/neo4j/needle/pull/793) [`8e7bb553199d7c7f0223dfd52af52358ebaae3cb`](https://github.com/neo4j/needle/commit/8e7bb553199d7c7f0223dfd52af52358ebaae3cb) Thanks [@basickarl](https://github.com/basickarl)! - Added theme agnostic JS token feature
+
+## 2.8.13
+
+### Patch Changes
+
+- [#790](https://github.com/neo4j/needle/pull/790) [`fd10ec95be9de5be3afb43ea748e91df117e5a13`](https://github.com/neo4j/needle/commit/fd10ec95be9de5be3afb43ea748e91df117e5a13) Thanks [@basickarl](https://github.com/basickarl)! - Fix for module build error
+
+- Updated dependencies [[`fd10ec95be9de5be3afb43ea748e91df117e5a13`](https://github.com/neo4j/needle/commit/fd10ec95be9de5be3afb43ea748e91df117e5a13)]:
+  - @neo4j-ndl/base@2.7.9
+
 ## 2.8.12
 
 ### Patch Changes

package/lib/cjs/theme/ThemeProvider.js

@@ -34,7 +34,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NeedleThemeProvider = exports.useNeedleTheme = exports.ThemeContext = void 0;
+exports.NeedleThemeProvider = exports.useNeedleTheme = exports.TokensContext = exports.ThemeContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  *
@@ -59,6 +59,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const defaultImports_1 = require("../_common/defaultImports");
 exports.ThemeContext = (0, react_1.createContext)(undefined);
+exports.TokensContext = (0, react_1.createContext)(undefined);
 /**
  * Hook to access the current theme effortlessly
  */
@@ -71,13 +72,15 @@ const useNeedleTheme = () => {
      */
     if (theme === undefined)
         theme = 'light';
+    const tokens = (0, react_1.useContext)(exports.TokensContext);
     return {
         theme,
         themeClassName: `ndl-theme-${theme}`,
+        tokens,
     };
 };
 exports.useNeedleTheme = useNeedleTheme;
-const NeedleThemeProvider = ({ theme = 'light', children, wrapperProps, }) => {
+const NeedleThemeProvider = ({ theme = 'light', tokens, children, wrapperProps, }) => {
     const clonedChildren = (0, react_1.useMemo)(() => {
         const _a = wrapperProps || {}, { isWrappingChildren, className } = _a, restWrapperProps = __rest(_a, ["isWrappingChildren", "className"]);
         const props = Object.assign(Object.assign({}, restWrapperProps), { className: (0, defaultImports_1.classNames)(className, `ndl-theme-${theme}`) });
@@ -90,7 +93,7 @@ const NeedleThemeProvider = ({ theme = 'light', children, wrapperProps, }) => {
             return ((0, jsx_runtime_1.jsx)("span", Object.assign({}, props, { className: (0, defaultImports_1.classNames)('ndl-theme-wrapper', props.className), children: children })));
         }
     }, [wrapperProps, theme, children]);
-    return ((0, jsx_runtime_1.jsx)(exports.ThemeContext.Provider, { value: theme, children: clonedChildren }));
+    return ((0, jsx_runtime_1.jsx)(exports.ThemeContext.Provider, { value: theme, children: (0, jsx_runtime_1.jsx)(exports.TokensContext.Provider, { value: tokens, children: clonedChildren }) }));
 };
 exports.NeedleThemeProvider = NeedleThemeProvider;
 //# sourceMappingURL=ThemeProvider.js.map

package/lib/cjs/theme/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,+CAMe;AACf,8DAAuD;AAI1C,QAAA,YAAY,GAAG,IAAA,qBAAa,EACvC,SAAS,CACV,CAAC;AAWF;;GAEG;AACI,MAAM,cAAc,GAAoB,GAAG,EAAE;IAClD,IAAI,KAAK,GAAG,IAAA,kBAAU,EAAC,oBAAY,CAAC,CAAC;IACrC;;;;OAIG;IACH,IAAI,KAAK,KAAK,SAAS;QAAE,KAAK,GAAG,OAAO,CAAC;IAEzC,OAAO;QACL,KAAK;QACL,cAAc,EAAE,aAAa,KAAK,EAAE;KACrC,CAAC;AACJ,CAAC,CAAC;AAbW,QAAA,cAAc,kBAazB;AAiBK,MAAM,mBAAmB,GAAG,CAAC,EAClC,KAAK,GAAG,OAAO,EACf,QAAQ,EACR,YAAY,GACa,EAAE,EAAE;IAC7B,MAAM,cAAc,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAClC,MAAM,KACJ,YAAY,IAAI,EAAE,EADd,EAAE,kBAAkB,EAAE,SAAS,OACjB,EADsB,gBAAgB,cAApD,mCAAsD,CACxC,CAAC;QACrB,MAAM,KAAK,mCACN,gBAAgB,KACnB,SAAS,EAAE,IAAA,2BAAU,EAAC,SAAS,EAAE,aAAa,KAAK,EAAE,CAAC,GACvD,CAAC;QAEF,IAAI,kBAAkB,KAAK,IAAI,EAAE;YAC/B,OAAO,eAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;gBAC5C,OAAO,eAAK,CAAC,YAAY,CAAC,KAAK,kCAC1B,KAAK,KACR,SAAS,EAAE,IAAA,2BAAU,EAAC,KAAK,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,IAC7D,CAAC;YACL,CAAC,CAAC,CAAC;SACJ;aAAM;YACL,OAAO,CACL,iDACM,KAAK,IACT,SAAS,EAAE,IAAA,2BAAU,EAAC,mBAAmB,EAAE,KAAK,CAAC,SAAS,CAAC,YAE1D,QAAQ,IACJ,CACR,CAAC;SACH;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEpC,OAAO,CACL,uBAAC,oBAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAChC,cAAc,GACO,CACzB,CAAC;AACJ,CAAC,CAAC;AArCW,QAAA,mBAAmB,uBAqC9B"}
+{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,+CAMe;AACf,8DAAuD;AAI1C,QAAA,YAAY,GAAG,IAAA,qBAAa,EACvC,SAAS,CACV,CAAC;AAMW,QAAA,aAAa,GAAG,IAAA,qBAAa,EACxC,SAAS,CACV,CAAC;AAYF;;GAEG;AACI,MAAM,cAAc,GAAoB,GAAG,EAAE;IAClD,IAAI,KAAK,GAAG,IAAA,kBAAU,EAAC,oBAAY,CAAC,CAAC;IACrC;;;;OAIG;IACH,IAAI,KAAK,KAAK,SAAS;QAAE,KAAK,GAAG,OAAO,CAAC;IAEzC,MAAM,MAAM,GAAG,IAAA,kBAAU,EAAC,qBAAa,CAAC,CAAC;IAEzC,OAAO;QACL,KAAK;QACL,cAAc,EAAE,aAAa,KAAK,EAAE;QACpC,MAAM;KACP,CAAC;AACJ,CAAC,CAAC;AAhBW,QAAA,cAAc,kBAgBzB;AAkBK,MAAM,mBAAmB,GAAG,CAAC,EAClC,KAAK,GAAG,OAAO,EACf,MAAM,EACN,QAAQ,EACR,YAAY,GACa,EAAE,EAAE;IAC7B,MAAM,cAAc,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAClC,MAAM,KACJ,YAAY,IAAI,EAAE,EADd,EAAE,kBAAkB,EAAE,SAAS,OACjB,EADsB,gBAAgB,cAApD,mCAAsD,CACxC,CAAC;QACrB,MAAM,KAAK,mCACN,gBAAgB,KACnB,SAAS,EAAE,IAAA,2BAAU,EAAC,SAAS,EAAE,aAAa,KAAK,EAAE,CAAC,GACvD,CAAC;QAEF,IAAI,kBAAkB,KAAK,IAAI,EAAE;YAC/B,OAAO,eAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;gBAC5C,OAAO,eAAK,CAAC,YAAY,CAAC,KAAK,kCAC1B,KAAK,KACR,SAAS,EAAE,IAAA,2BAAU,EAAC,KAAK,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,IAC7D,CAAC;YACL,CAAC,CAAC,CAAC;SACJ;aAAM;YACL,OAAO,CACL,iDACM,KAAK,IACT,SAAS,EAAE,IAAA,2BAAU,EAAC,mBAAmB,EAAE,KAAK,CAAC,SAAS,CAAC,YAE1D,QAAQ,IACJ,CACR,CAAC;SACH;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEpC,OAAO,CACL,uBAAC,oBAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACjC,uBAAC,qBAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,YAClC,cAAc,GACQ,GACH,CACzB,CAAC;AACJ,CAAC,CAAC;AAxCW,QAAA,mBAAmB,uBAwC9B"}

package/lib/cjs/theme/agnostic.js

@@ -0,0 +1,55 @@
+"use strict";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.n = void 0;
+const ThemeProvider_1 = require("./ThemeProvider");
+function defaultStringToJson(path, json = {}, theme) {
+    const parts = path.split('.');
+    let part;
+    while ((part = parts.shift())) {
+        if (typeof json[part] !== 'object') {
+            return json[part];
+        }
+        json = json[part];
+        // Specific for theme tokens
+        if (part === 'theme') {
+            json = json[theme];
+        }
+    }
+}
+const useN = (path, stringToJson = defaultStringToJson) => {
+    const { theme, tokens } = (0, ThemeProvider_1.useNeedleTheme)();
+    if (!tokens) {
+        console.error('design tokens not found, you need to set the design tokens in the NeedleThemeProvider');
+        return;
+    }
+    const value = stringToJson(path, tokens, theme);
+    if (!value) {
+        console.warn(`design token value "${path}" not found, are you sure the string path is correct?`);
+    }
+    return value;
+};
+// React will complain if we don't use the prefix "use" for
+// holding the useNeedleTheme function call. "n" is a more
+// convenient name for the function.
+exports.n = useN;
+//# sourceMappingURL=agnostic.js.map

package/lib/cjs/theme/agnostic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"agnostic.js","sourceRoot":"","sources":["../../../src/theme/agnostic.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;AAEH,mDAAiD;AAEjD,SAAS,mBAAmB,CAAC,IAAY,EAAE,OAAY,EAAE,EAAE,KAAa;IACtE,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC9B,IAAI,IAAI,CAAC;IACT,OAAO,CAAC,IAAI,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC,EAAE;QAC7B,IAAI,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,QAAQ,EAAE;YAClC,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC;SACnB;QACD,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;QAClB,4BAA4B;QAC5B,IAAI,IAAI,KAAK,OAAO,EAAE;YACpB,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;SACpB;KACF;AACH,CAAC;AAED,MAAM,IAAI,GAAG,CACX,IAAY,EACZ,YAAY,GAAG,mBAAmB,EACnB,EAAE;IACjB,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAC3C,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,CAAC,KAAK,CACX,uFAAuF,CACxF,CAAC;QACF,OAAO;KACR;IACD,MAAM,KAAK,GAAG,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;IAChD,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,CAAC,IAAI,CACV,uBAAuB,IAAI,uDAAuD,CACnF,CAAC;KACH;IACD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,2DAA2D;AAC3D,0DAA0D;AAC1D,oCAAoC;AACvB,QAAA,CAAC,GAAG,IAAI,CAAC"}

package/lib/cjs/theme/index.js

@@ -35,4 +35,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./ThemeProvider"), exports);
+__exportStar(require("./agnostic"), exports);
 //# sourceMappingURL=index.js.map

package/lib/cjs/theme/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/theme/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;;;;;;;;;;;AAEH,kDAAgC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/theme/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;;;;;;;;;;;AAEH,kDAAgC;AAChC,6CAA2B"}

package/lib/esm/theme/ThemeProvider.js

@@ -33,6 +33,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { createContext, useContext, useMemo, } from 'react';
 import { classNames } from '../_common/defaultImports';
 export const ThemeContext = createContext(undefined);
+export const TokensContext = createContext(undefined);
 /**
  * Hook to access the current theme effortlessly
  */
@@ -45,12 +46,14 @@ export const useNeedleTheme = () => {
      */
     if (theme === undefined)
         theme = 'light';
+    const tokens = useContext(TokensContext);
     return {
         theme,
         themeClassName: `ndl-theme-${theme}`,
+        tokens,
     };
 };
-export const NeedleThemeProvider = ({ theme = 'light', children, wrapperProps, }) => {
+export const NeedleThemeProvider = ({ theme = 'light', tokens, children, wrapperProps, }) => {
     const clonedChildren = useMemo(() => {
         const _a = wrapperProps || {}, { isWrappingChildren, className } = _a, restWrapperProps = __rest(_a, ["isWrappingChildren", "className"]);
         const props = Object.assign(Object.assign({}, restWrapperProps), { className: classNames(className, `ndl-theme-${theme}`) });
@@ -63,6 +66,6 @@ export const NeedleThemeProvider = ({ theme = 'light', children, wrapperProps, }
             return (_jsx("span", Object.assign({}, props, { className: classNames('ndl-theme-wrapper', props.className), children: children })));
         }
     }, [wrapperProps, theme, children]);
-    return (_jsx(ThemeContext.Provider, { value: theme, children: clonedChildren }));
+    return (_jsx(ThemeContext.Provider, { value: theme, children: _jsx(TokensContext.Provider, { value: tokens, children: clonedChildren }) }));
 };
 //# sourceMappingURL=ThemeProvider.js.map

package/lib/esm/theme/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,EACZ,aAAa,EAGb,UAAU,EACV,OAAO,GACR,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAIvD,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CACvC,SAAS,CACV,CAAC;AAWF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAoB,GAAG,EAAE;IAClD,IAAI,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACrC;;;;OAIG;IACH,IAAI,KAAK,KAAK,SAAS;QAAE,KAAK,GAAG,OAAO,CAAC;IAEzC,OAAO;QACL,KAAK;QACL,cAAc,EAAE,aAAa,KAAK,EAAE;KACrC,CAAC;AACJ,CAAC,CAAC;AAiBF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAClC,KAAK,GAAG,OAAO,EACf,QAAQ,EACR,YAAY,GACa,EAAE,EAAE;IAC7B,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,MAAM,KACJ,YAAY,IAAI,EAAE,EADd,EAAE,kBAAkB,EAAE,SAAS,OACjB,EADsB,gBAAgB,cAApD,mCAAsD,CACxC,CAAC;QACrB,MAAM,KAAK,mCACN,gBAAgB,KACnB,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,aAAa,KAAK,EAAE,CAAC,GACvD,CAAC;QAEF,IAAI,kBAAkB,KAAK,IAAI,EAAE;YAC/B,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;gBAC5C,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,kCAC1B,KAAK,KACR,SAAS,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,IAC7D,CAAC;YACL,CAAC,CAAC,CAAC;SACJ;aAAM;YACL,OAAO,CACL,+BACM,KAAK,IACT,SAAS,EAAE,UAAU,CAAC,mBAAmB,EAAE,KAAK,CAAC,SAAS,CAAC,YAE1D,QAAQ,IACJ,CACR,CAAC;SACH;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEpC,OAAO,CACL,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAChC,cAAc,GACO,CACzB,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,EACZ,aAAa,EAGb,UAAU,EACV,OAAO,GACR,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAIvD,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CACvC,SAAS,CACV,CAAC;AAMF,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CACxC,SAAS,CACV,CAAC;AAYF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAoB,GAAG,EAAE;IAClD,IAAI,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACrC;;;;OAIG;IACH,IAAI,KAAK,KAAK,SAAS;QAAE,KAAK,GAAG,OAAO,CAAC;IAEzC,MAAM,MAAM,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAEzC,OAAO;QACL,KAAK;QACL,cAAc,EAAE,aAAa,KAAK,EAAE;QACpC,MAAM;KACP,CAAC;AACJ,CAAC,CAAC;AAkBF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAClC,KAAK,GAAG,OAAO,EACf,MAAM,EACN,QAAQ,EACR,YAAY,GACa,EAAE,EAAE;IAC7B,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,MAAM,KACJ,YAAY,IAAI,EAAE,EADd,EAAE,kBAAkB,EAAE,SAAS,OACjB,EADsB,gBAAgB,cAApD,mCAAsD,CACxC,CAAC;QACrB,MAAM,KAAK,mCACN,gBAAgB,KACnB,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,aAAa,KAAK,EAAE,CAAC,GACvD,CAAC;QAEF,IAAI,kBAAkB,KAAK,IAAI,EAAE;YAC/B,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;gBAC5C,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,kCAC1B,KAAK,KACR,SAAS,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,IAC7D,CAAC;YACL,CAAC,CAAC,CAAC;SACJ;aAAM;YACL,OAAO,CACL,+BACM,KAAK,IACT,SAAS,EAAE,UAAU,CAAC,mBAAmB,EAAE,KAAK,CAAC,SAAS,CAAC,YAE1D,QAAQ,IACJ,CACR,CAAC;SACH;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEpC,OAAO,CACL,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACjC,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,YAClC,cAAc,GACQ,GACH,CACzB,CAAC;AACJ,CAAC,CAAC"}

package/lib/esm/theme/agnostic.js

@@ -0,0 +1,52 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { useNeedleTheme } from './ThemeProvider';
+function defaultStringToJson(path, json = {}, theme) {
+    const parts = path.split('.');
+    let part;
+    while ((part = parts.shift())) {
+        if (typeof json[part] !== 'object') {
+            return json[part];
+        }
+        json = json[part];
+        // Specific for theme tokens
+        if (part === 'theme') {
+            json = json[theme];
+        }
+    }
+}
+const useN = (path, stringToJson = defaultStringToJson) => {
+    const { theme, tokens } = useNeedleTheme();
+    if (!tokens) {
+        console.error('design tokens not found, you need to set the design tokens in the NeedleThemeProvider');
+        return;
+    }
+    const value = stringToJson(path, tokens, theme);
+    if (!value) {
+        console.warn(`design token value "${path}" not found, are you sure the string path is correct?`);
+    }
+    return value;
+};
+// React will complain if we don't use the prefix "use" for
+// holding the useNeedleTheme function call. "n" is a more
+// convenient name for the function.
+export const n = useN;
+//# sourceMappingURL=agnostic.js.map

package/lib/esm/theme/agnostic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"agnostic.js","sourceRoot":"","sources":["../../../src/theme/agnostic.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,SAAS,mBAAmB,CAAC,IAAY,EAAE,OAAY,EAAE,EAAE,KAAa;IACtE,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC9B,IAAI,IAAI,CAAC;IACT,OAAO,CAAC,IAAI,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC,EAAE;QAC7B,IAAI,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,QAAQ,EAAE;YAClC,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC;SACnB;QACD,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;QAClB,4BAA4B;QAC5B,IAAI,IAAI,KAAK,OAAO,EAAE;YACpB,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;SACpB;KACF;AACH,CAAC;AAED,MAAM,IAAI,GAAG,CACX,IAAY,EACZ,YAAY,GAAG,mBAAmB,EACnB,EAAE;IACjB,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,cAAc,EAAE,CAAC;IAC3C,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,CAAC,KAAK,CACX,uFAAuF,CACxF,CAAC;QACF,OAAO;KACR;IACD,MAAM,KAAK,GAAG,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;IAChD,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,CAAC,IAAI,CACV,uBAAuB,IAAI,uDAAuD,CACnF,CAAC;KACH;IACD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,2DAA2D;AAC3D,0DAA0D;AAC1D,oCAAoC;AACpC,MAAM,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC"}

package/lib/esm/theme/index.js

@@ -19,4 +19,5 @@
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 export * from './ThemeProvider';
+export * from './agnostic';
 //# sourceMappingURL=index.js.map

package/lib/esm/theme/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/theme/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/theme/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC"}

package/lib/types/theme/ThemeProvider.d.ts

@@ -21,6 +21,10 @@
 import React, { type HTMLAttributes, type PropsWithChildren } from 'react';
 type ThemeContextType = 'light' | 'dark';
 export declare const ThemeContext: React.Context<ThemeContextType | undefined>;
+type TokensContextType = {
+    [key: string]: any;
+};
+export declare const TokensContext: React.Context<TokensContextType | undefined>;
 type NeedleThemeHook = () => {
     theme: ThemeContextType;
     /**
@@ -29,6 +33,7 @@ type NeedleThemeHook = () => {
      * Modals, Popovers, etc.
      */
     themeClassName: string;
+    tokens?: TokensContextType;
 };
 /**
  * Hook to access the current theme effortlessly
@@ -36,6 +41,7 @@ type NeedleThemeHook = () => {
 export declare const useNeedleTheme: NeedleThemeHook;
 export interface NeedleThemeProviderProps extends PropsWithChildren {
     theme?: 'dark' | 'light';
+    tokens?: TokensContextType;
     children: any;
     /**
      * Nested theme providers will receive a wrapping `span` tag
@@ -50,5 +56,5 @@ export interface NeedleThemeProviderProps extends PropsWithChildren {
         isWrappingChildren?: boolean;
     };
 }
-export declare const NeedleThemeProvider: ({ theme, children, wrapperProps, }: NeedleThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NeedleThemeProvider: ({ theme, tokens, children, wrapperProps, }: NeedleThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/types/theme/agnostic.d.ts

@@ -0,0 +1,23 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+declare function defaultStringToJson(path: string, json: any, theme: string): any;
+export declare const n: (path: string, stringToJson?: typeof defaultStringToJson) => string | void;
+export {};

package/lib/types/theme/index.d.ts

@@ -19,3 +19,4 @@
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 export * from './ThemeProvider';
+export * from './agnostic';

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@neo4j-ndl/react",
-  "version": "2.8.12",
-  "type": "module",
+  "version": "2.9.0",
   "sideEffects": false,
   "description": "React implementation of Neo4j Design System",
   "keywords": [
@@ -97,7 +96,7 @@
     "@floating-ui/react": "0.25.1",
     "@heroicons/react": "2.0.13",
     "@neo4j-cypher/react-codemirror": "^1.0.1",
-    "@neo4j-ndl/base": "^2.7.8",
+    "@neo4j-ndl/base": "^2.7.9",
     "@table-nav/core": "0.0.7",
     "@table-nav/react": "0.0.7",
     "@tanstack/react-table": "^8.9.3",