@neo4j-ndl/react 2.1.1 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Change Log
 
+## 2.2.0
+
+### Minor Changes
+
+- [#700](https://github.com/neo4j/neo4j-design/pull/700) [`3f2bb49`](https://github.com/neo4j/neo4j-design/commit/3f2bb49a3fe8480d2b1c709af76e90d9b6c3fd72) Thanks [@konsalex](https://github.com/konsalex)! - new layout components, that incorporate design tokens
+
+### Patch Changes
+
+- Updated dependencies [[`3f2bb49`](https://github.com/neo4j/neo4j-design/commit/3f2bb49a3fe8480d2b1c709af76e90d9b6c3fd72)]:
+  - @neo4j-ndl/base@2.2.0
+
 ## 2.1.1
 
 ### Patch Changes

package/lib/cjs/layout/Box.js

@@ -0,0 +1,56 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Box = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  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/>.
+ */
+const react_1 = require("react");
+const types_1 = require("./types");
+/**
+ * Box is a general-purpose container that allows for controlled use of design tokens.
+ * Use the given props to configure display behavior and styling that aligns with Needle's tokens.
+ */
+exports.Box = (0, react_1.forwardRef)(function Box(_a, ref) {
+    var { as = 'div', padding, paddingInline, paddingInlineStart, paddingInlineEnd, paddingBlockEnd, paddingBlockStart, borderRadius, children } = _a, restProps = __rest(_a, ["as", "padding", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "paddingBlockEnd", "paddingBlockStart", "borderRadius", "children"]);
+    const Component = as;
+    const style = {
+        padding: (0, types_1.getSpacing)(padding, 'padding'),
+        paddingInline: (0, types_1.getSpacing)(paddingInline, 'paddingInline'),
+        paddingInlineStart: (0, types_1.getSpacing)(paddingInlineStart, 'paddingInlineStart'),
+        paddingInlineEnd: (0, types_1.getSpacing)(paddingInlineEnd, 'paddingInlineEnd'),
+        paddingBlockEnd: (0, types_1.getSpacing)(paddingBlockEnd, 'paddingBlockEnd'),
+        paddingBlockStart: (0, types_1.getSpacing)(paddingBlockStart, 'paddingBlockStart'),
+        borderRadius: (0, types_1.getRadius)(borderRadius, 'borderRadius'),
+    };
+    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ ref: ref }, restProps, { style: Object.assign(Object.assign({}, style), restProps.style), children: children })));
+});
+//# sourceMappingURL=Box.js.map

package/lib/cjs/layout/Box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../src/layout/Box.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,iCAIe;AACf,mCAOiB;AAiDjB;;;GAGG;AACU,QAAA,GAAG,GAAiB,IAAA,kBAAU,EAAC,SAAS,GAAG,CAGtD,EAWc,EACd,GAAoC;QAZpC,EACE,EAAE,GAAG,KAAU,EACf,OAAO,EACP,aAAa,EACb,kBAAkB,EAClB,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EACjB,YAAY,EACZ,QAAQ,OAEI,EADT,SAAS,cAVd,gJAWC,CADa;IAId,MAAM,SAAS,GAAG,EAA+B,CAAC;IAElD,MAAM,KAAK,GAAG;QACZ,OAAO,EAAE,IAAA,kBAAU,EAAC,OAAO,EAAE,SAAS,CAAC;QACvC,aAAa,EAAE,IAAA,kBAAU,EAAC,aAAa,EAAE,eAAe,CAAC;QACzD,kBAAkB,EAAE,IAAA,kBAAU,EAAC,kBAAkB,EAAE,oBAAoB,CAAC;QACxE,gBAAgB,EAAE,IAAA,kBAAU,EAAC,gBAAgB,EAAE,kBAAkB,CAAC;QAClE,eAAe,EAAE,IAAA,kBAAU,EAAC,eAAe,EAAE,iBAAiB,CAAC;QAC/D,iBAAiB,EAAE,IAAA,kBAAU,EAAC,iBAAiB,EAAE,mBAAmB,CAAC;QACrE,YAAY,EAAE,IAAA,iBAAS,EAAC,YAAY,EAAE,cAAc,CAAC;KACtD,CAAC;IAEF,OAAO,CACL,uBAAC,SAAS,kBACR,GAAG,EAAE,GAAG,IACJ,SAAS,IACb,KAAK,kCAAO,KAAK,GAAK,SAAS,CAAC,KAAK,aAEpC,QAAQ,IACC,CACb,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/lib/cjs/layout/Flex.js

@@ -0,0 +1,64 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Flex = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  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/>.
+ */
+const react_1 = require("react");
+const types_1 = require("./types");
+const base_1 = require("@neo4j-ndl/base");
+/**
+ * Flex is a general-purpose container that helps
+ * lay out components with consistent spacing in a row or column.
+ */
+exports.Flex = (0, react_1.forwardRef)(function Flex(_a, ref) {
+    var { as = 'div', gap = '4', rowGap, columnGap, children, borderRadius, flexDirection = 'column', flexWrap = 'nowrap', alignItems, justifyContent } = _a, restProps = __rest(_a, ["as", "gap", "rowGap", "columnGap", "children", "borderRadius", "flexDirection", "flexWrap", "alignItems", "justifyContent"]);
+    const Component = as;
+    // If gap is not provided,
+    // and rowGap and columnGap are not provided,
+    // then use the default value.
+    const gapPx = (0, types_1.getSpacing)(gap, 'gap');
+    const rowGapPx = rowGap ? base_1.tokens.space[rowGap] : undefined;
+    const columnGapPx = columnGap ? base_1.tokens.space[columnGap] : undefined;
+    const gapFormatted = `${rowGapPx !== null && rowGapPx !== void 0 ? rowGapPx : gapPx} ${columnGapPx !== null && columnGapPx !== void 0 ? columnGapPx : gapPx}`;
+    const style = {
+        flexDirection,
+        alignItems,
+        flexWrap,
+        justifyContent,
+        display: 'flex',
+        gap: gapFormatted,
+        borderRadius: (0, types_1.getRadius)(borderRadius, 'borderRadius'),
+    };
+    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ ref: ref }, restProps, { style: Object.assign(Object.assign({}, style), restProps.style), children: children })));
+});
+//# sourceMappingURL=Flex.js.map

package/lib/cjs/layout/Flex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.js","sourceRoot":"","sources":["../../../src/layout/Flex.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,iCAIe;AACf,mCAOiB;AACjB,0CAAyC;AAmEzC;;;GAGG;AACU,QAAA,IAAI,GAAkB,IAAA,kBAAU,EAAC,SAAS,IAAI,CAGzD,EAYe,EACf,GAAoC;QAbpC,EACE,EAAE,GAAG,KAAU,EACf,GAAG,GAAG,GAAG,EACT,MAAM,EACN,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,aAAa,GAAG,QAAQ,EACxB,QAAQ,GAAG,QAAQ,EACnB,UAAU,EACV,cAAc,OAED,EADV,SAAS,cAXd,6HAYC,CADa;IAId,MAAM,SAAS,GAAG,EAA+B,CAAC;IAElD,0BAA0B;IAC1B,6CAA6C;IAC7C,8BAA8B;IAC9B,MAAM,KAAK,GAAG,IAAA,kBAAU,EAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IACrC,MAAM,QAAQ,GAAG,MAAM,CAAC,CAAC,CAAC,aAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAC3D,MAAM,WAAW,GAAG,SAAS,CAAC,CAAC,CAAC,aAAM,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACpE,MAAM,YAAY,GAAG,GAAG,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,KAAK,IAAI,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,KAAK,EAAE,CAAC;IAEpE,MAAM,KAAK,GAAwB;QACjC,aAAa;QACb,UAAU;QACV,QAAQ;QACR,cAAc;QACd,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,YAAY;QACjB,YAAY,EAAE,IAAA,iBAAS,EAAC,YAAY,EAAE,cAAc,CAAC;KACtD,CAAC;IAEF,OAAO,CACL,uBAAC,SAAS,kBACR,GAAG,EAAE,GAAG,IACJ,SAAS,IACb,KAAK,kCAAO,KAAK,GAAK,SAAS,CAAC,KAAK,aAEpC,QAAQ,IACC,CACb,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/lib/cjs/layout/index.js

@@ -0,0 +1,39 @@
+"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/>.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Flex"), exports);
+__exportStar(require("./Box"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/layout/index.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;;;;;;;;;;;AAEH,yCAAuB;AACvB,wCAAsB"}

package/lib/cjs/layout/types.js

@@ -0,0 +1,49 @@
+"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.getRadius = exports.RadiusDefaults = exports.getSpacing = exports.SpacingDefaults = void 0;
+const base_1 = require("@neo4j-ndl/base");
+exports.SpacingDefaults = {
+    padding: '4',
+    paddingBlockStart: undefined,
+    paddingBlockEnd: undefined,
+    paddingInline: undefined,
+    paddingInlineStart: undefined,
+    paddingInlineEnd: undefined,
+    gap: '4',
+};
+const getSpacing = (spacing, property) => {
+    return spacing
+        ? base_1.tokens.space[spacing || exports.SpacingDefaults[property]]
+        : undefined;
+};
+exports.getSpacing = getSpacing;
+exports.RadiusDefaults = {
+    borderRadius: undefined,
+};
+const getRadius = (spacing, property) => {
+    return spacing
+        ? base_1.tokens.borderRadius[spacing || exports.RadiusDefaults[property]]
+        : undefined;
+};
+exports.getRadius = getRadius;
+//# sourceMappingURL=types.js.map

package/lib/cjs/layout/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/layout/types.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;AAEH,0CAAyC;AAgB5B,QAAA,eAAe,GAAG;IAC7B,OAAO,EAAE,GAAG;IACZ,iBAAiB,EAAE,SAAS;IAC5B,eAAe,EAAE,SAAS;IAC1B,aAAa,EAAE,SAAS;IACxB,kBAAkB,EAAE,SAAS;IAC7B,gBAAgB,EAAE,SAAS;IAC3B,GAAG,EAAE,GAAG;CACA,CAAC;AAEJ,MAAM,UAAU,GAAG,CACxB,OAA4B,EAC5B,QAAsC,EACtC,EAAE;IACF,OAAO,OAAO;QACZ,CAAC,CAAC,aAAM,CAAC,KAAK,CAAC,OAAO,IAAI,uBAAe,CAAC,QAAQ,CAAC,CAAC;QACpD,CAAC,CAAC,SAAS,CAAC;AAChB,CAAC,CAAC;AAPW,QAAA,UAAU,cAOrB;AAIW,QAAA,cAAc,GAAG;IAC5B,YAAY,EAAE,SAAS;CACxB,CAAC;AAEK,MAAM,SAAS,GAAG,CACvB,OAA2B,EAC3B,QAAqC,EACrC,EAAE;IACF,OAAO,OAAO;QACZ,CAAC,CAAC,aAAM,CAAC,YAAY,CAAC,OAAO,IAAI,sBAAc,CAAC,QAAQ,CAAC,CAAC;QAC1D,CAAC,CAAC,SAAS,CAAC;AAChB,CAAC,CAAC;AAPW,QAAA,SAAS,aAOpB"}

package/lib/esm/layout/Box.js

@@ -0,0 +1,53 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ *
+ *  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 { forwardRef, } from 'react';
+import { getSpacing, getRadius, } from './types';
+/**
+ * Box is a general-purpose container that allows for controlled use of design tokens.
+ * Use the given props to configure display behavior and styling that aligns with Needle's tokens.
+ */
+export const Box = forwardRef(function Box(_a, ref) {
+    var { as = 'div', padding, paddingInline, paddingInlineStart, paddingInlineEnd, paddingBlockEnd, paddingBlockStart, borderRadius, children } = _a, restProps = __rest(_a, ["as", "padding", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "paddingBlockEnd", "paddingBlockStart", "borderRadius", "children"]);
+    const Component = as;
+    const style = {
+        padding: getSpacing(padding, 'padding'),
+        paddingInline: getSpacing(paddingInline, 'paddingInline'),
+        paddingInlineStart: getSpacing(paddingInlineStart, 'paddingInlineStart'),
+        paddingInlineEnd: getSpacing(paddingInlineEnd, 'paddingInlineEnd'),
+        paddingBlockEnd: getSpacing(paddingBlockEnd, 'paddingBlockEnd'),
+        paddingBlockStart: getSpacing(paddingBlockStart, 'paddingBlockStart'),
+        borderRadius: getRadius(borderRadius, 'borderRadius'),
+    };
+    return (_jsx(Component, Object.assign({ ref: ref }, restProps, { style: Object.assign(Object.assign({}, style), restProps.style), children: children })));
+});
+//# sourceMappingURL=Box.js.map

package/lib/esm/layout/Box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../src/layout/Box.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAc,EACZ,UAAU,GAGX,MAAM,OAAO,CAAC;AACf,OAAO,EAKL,UAAU,EACV,SAAS,GACV,MAAM,SAAS,CAAC;AAiDjB;;;GAGG;AACH,MAAM,CAAC,MAAM,GAAG,GAAiB,UAAU,CAAC,SAAS,GAAG,CAGtD,EAWc,EACd,GAAoC;QAZpC,EACE,EAAE,GAAG,KAAU,EACf,OAAO,EACP,aAAa,EACb,kBAAkB,EAClB,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EACjB,YAAY,EACZ,QAAQ,OAEI,EADT,SAAS,cAVd,gJAWC,CADa;IAId,MAAM,SAAS,GAAG,EAA+B,CAAC;IAElD,MAAM,KAAK,GAAG;QACZ,OAAO,EAAE,UAAU,CAAC,OAAO,EAAE,SAAS,CAAC;QACvC,aAAa,EAAE,UAAU,CAAC,aAAa,EAAE,eAAe,CAAC;QACzD,kBAAkB,EAAE,UAAU,CAAC,kBAAkB,EAAE,oBAAoB,CAAC;QACxE,gBAAgB,EAAE,UAAU,CAAC,gBAAgB,EAAE,kBAAkB,CAAC;QAClE,eAAe,EAAE,UAAU,CAAC,eAAe,EAAE,iBAAiB,CAAC;QAC/D,iBAAiB,EAAE,UAAU,CAAC,iBAAiB,EAAE,mBAAmB,CAAC;QACrE,YAAY,EAAE,SAAS,CAAC,YAAY,EAAE,cAAc,CAAC;KACtD,CAAC;IAEF,OAAO,CACL,KAAC,SAAS,kBACR,GAAG,EAAE,GAAG,IACJ,SAAS,IACb,KAAK,kCAAO,KAAK,GAAK,SAAS,CAAC,KAAK,aAEpC,QAAQ,IACC,CACb,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/lib/esm/layout/Flex.js

@@ -0,0 +1,61 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ *
+ *  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 { forwardRef, } from 'react';
+import { getSpacing, getRadius, } from './types';
+import { tokens } from '@neo4j-ndl/base';
+/**
+ * Flex is a general-purpose container that helps
+ * lay out components with consistent spacing in a row or column.
+ */
+export const Flex = forwardRef(function Flex(_a, ref) {
+    var { as = 'div', gap = '4', rowGap, columnGap, children, borderRadius, flexDirection = 'column', flexWrap = 'nowrap', alignItems, justifyContent } = _a, restProps = __rest(_a, ["as", "gap", "rowGap", "columnGap", "children", "borderRadius", "flexDirection", "flexWrap", "alignItems", "justifyContent"]);
+    const Component = as;
+    // If gap is not provided,
+    // and rowGap and columnGap are not provided,
+    // then use the default value.
+    const gapPx = getSpacing(gap, 'gap');
+    const rowGapPx = rowGap ? tokens.space[rowGap] : undefined;
+    const columnGapPx = columnGap ? tokens.space[columnGap] : undefined;
+    const gapFormatted = `${rowGapPx !== null && rowGapPx !== void 0 ? rowGapPx : gapPx} ${columnGapPx !== null && columnGapPx !== void 0 ? columnGapPx : gapPx}`;
+    const style = {
+        flexDirection,
+        alignItems,
+        flexWrap,
+        justifyContent,
+        display: 'flex',
+        gap: gapFormatted,
+        borderRadius: getRadius(borderRadius, 'borderRadius'),
+    };
+    return (_jsx(Component, Object.assign({ ref: ref }, restProps, { style: Object.assign(Object.assign({}, style), restProps.style), children: children })));
+});
+//# sourceMappingURL=Flex.js.map

package/lib/esm/layout/Flex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.js","sourceRoot":"","sources":["../../../src/layout/Flex.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAc,EACZ,UAAU,GAGX,MAAM,OAAO,CAAC;AACf,OAAO,EAKL,UAAU,EACV,SAAS,GACV,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAmEzC;;;GAGG;AACH,MAAM,CAAC,MAAM,IAAI,GAAkB,UAAU,CAAC,SAAS,IAAI,CAGzD,EAYe,EACf,GAAoC;QAbpC,EACE,EAAE,GAAG,KAAU,EACf,GAAG,GAAG,GAAG,EACT,MAAM,EACN,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,aAAa,GAAG,QAAQ,EACxB,QAAQ,GAAG,QAAQ,EACnB,UAAU,EACV,cAAc,OAED,EADV,SAAS,cAXd,6HAYC,CADa;IAId,MAAM,SAAS,GAAG,EAA+B,CAAC;IAElD,0BAA0B;IAC1B,6CAA6C;IAC7C,8BAA8B;IAC9B,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IACrC,MAAM,QAAQ,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAC3D,MAAM,WAAW,GAAG,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACpE,MAAM,YAAY,GAAG,GAAG,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,KAAK,IAAI,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,KAAK,EAAE,CAAC;IAEpE,MAAM,KAAK,GAAwB;QACjC,aAAa;QACb,UAAU;QACV,QAAQ;QACR,cAAc;QACd,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,YAAY;QACjB,YAAY,EAAE,SAAS,CAAC,YAAY,EAAE,cAAc,CAAC;KACtD,CAAC;IAEF,OAAO,CACL,KAAC,SAAS,kBACR,GAAG,EAAE,GAAG,IACJ,SAAS,IACb,KAAK,kCAAO,KAAK,GAAK,SAAS,CAAC,KAAK,aAEpC,QAAQ,IACC,CACb,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/lib/esm/layout/index.js

@@ -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/>.
+ */
+export * from './Flex';
+export * from './Box';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/layout/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC"}

package/lib/esm/layout/types.js

@@ -0,0 +1,44 @@
+/**
+ *
+ *  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 { tokens } from '@neo4j-ndl/base';
+export const SpacingDefaults = {
+    padding: '4',
+    paddingBlockStart: undefined,
+    paddingBlockEnd: undefined,
+    paddingInline: undefined,
+    paddingInlineStart: undefined,
+    paddingInlineEnd: undefined,
+    gap: '4',
+};
+export const getSpacing = (spacing, property) => {
+    return spacing
+        ? tokens.space[spacing || SpacingDefaults[property]]
+        : undefined;
+};
+export const RadiusDefaults = {
+    borderRadius: undefined,
+};
+export const getRadius = (spacing, property) => {
+    return spacing
+        ? tokens.borderRadius[spacing || RadiusDefaults[property]]
+        : undefined;
+};
+//# sourceMappingURL=types.js.map

package/lib/esm/layout/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/layout/types.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAgBzC,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,OAAO,EAAE,GAAG;IACZ,iBAAiB,EAAE,SAAS;IAC5B,eAAe,EAAE,SAAS;IAC1B,aAAa,EAAE,SAAS;IACxB,kBAAkB,EAAE,SAAS;IAC7B,gBAAgB,EAAE,SAAS;IAC3B,GAAG,EAAE,GAAG;CACA,CAAC;AAEX,MAAM,CAAC,MAAM,UAAU,GAAG,CACxB,OAA4B,EAC5B,QAAsC,EACtC,EAAE;IACF,OAAO,OAAO;QACZ,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,IAAI,eAAe,CAAC,QAAQ,CAAC,CAAC;QACpD,CAAC,CAAC,SAAS,CAAC;AAChB,CAAC,CAAC;AAIF,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,YAAY,EAAE,SAAS;CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,OAA2B,EAC3B,QAAqC,EACrC,EAAE;IACF,OAAO,OAAO;QACZ,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,OAAO,IAAI,cAAc,CAAC,QAAQ,CAAC,CAAC;QAC1D,CAAC,CAAC,SAAS,CAAC;AAChB,CAAC,CAAC"}

package/lib/types/layout/Box.d.ts

@@ -0,0 +1,66 @@
+/**
+ *
+ *  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 React, { type ComponentPropsWithoutRef } from 'react';
+import { type CustomElementType, type Spacing, type Radius } from './types';
+type BaseBoxProps<T extends CustomElementType> = {
+    /**
+     * The DOM element to render as the Box.
+     * @default div
+     */
+    as?: T;
+    /**
+     * @default tokens.space['4']
+     */
+    padding?: Spacing;
+    /**
+     * @default undefined
+     */
+    paddingBlockStart?: Spacing;
+    /**
+     * @default undefined
+     */
+    paddingBlockEnd?: Spacing;
+    /**
+     * @default undefined
+     */
+    paddingInline?: Spacing;
+    /**
+     * @default undefined
+     */
+    paddingInlineStart?: Spacing;
+    /**
+     * @default undefined
+     */
+    paddingInlineEnd?: Spacing;
+    /**
+     * @default undefined
+     */
+    borderRadius?: Radius;
+    children?: React.ReactNode;
+};
+export type BoxProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as'> & BaseBoxProps<T>;
+type BoxComponent = <T extends CustomElementType>(props: BoxProps<T>) => React.ReactNode;
+/**
+ * Box is a general-purpose container that allows for controlled use of design tokens.
+ * Use the given props to configure display behavior and styling that aligns with Needle's tokens.
+ */
+export declare const Box: BoxComponent;
+export {};

package/lib/types/layout/Flex.d.ts

@@ -0,0 +1,80 @@
+/**
+ *
+ *  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 React, { type ComponentPropsWithoutRef } from 'react';
+import { type CustomElementType, type Spacing, type Radius } from './types';
+type AllowedFlexElements = 'div' | 'span' | 'ul' | 'ol' | 'li';
+type BaseFlexProps<T extends CustomElementType> = {
+    /**
+     * The DOM element to render as the Flex,
+     * meaning the root node of the children collection.
+     * @default div
+     */
+    as?: AllowedFlexElements;
+    /**
+     * @default tokens.space['4']
+     */
+    gap?: Spacing;
+    /**
+     * @default undefined
+     */
+    rowGap?: Spacing;
+    /**
+     * @default undefined
+     */
+    columnGap?: Spacing;
+    /**
+     * @default undefined
+     */
+    borderRadius?: Radius;
+    /**
+     * Flex direction is set to column by default.
+     * The `row-reverse` and `column-reverse` values
+     * are skipped due to accessibility concerns.
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction#accessibility_concerns
+     *
+     * @default row
+     */
+    flexDirection?: Exclude<React.CSSProperties['flexDirection'], 'row-reverse' | 'column-reverse'>;
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
+     * @default nowrap
+     */
+    flexWrap?: React.CSSProperties['flexWrap'];
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
+     * @default undefined
+     */
+    justifyContent?: React.CSSProperties['justifyContent'];
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
+     * @default undefined
+     */
+    alignItems?: React.CSSProperties['alignItems'];
+    children?: React.ReactNode;
+};
+export type FlexProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as'> & BaseFlexProps<T>;
+type FlexComponent = <T extends CustomElementType>(props: FlexProps<T>) => React.ReactNode;
+/**
+ * Flex is a general-purpose container that helps
+ * lay out components with consistent spacing in a row or column.
+ */
+export declare const Flex: FlexComponent;
+export {};

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

@@ -0,0 +1,22 @@
+/**
+ *
+ *  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/>.
+ */
+export * from './Flex';
+export * from './Box';

package/lib/types/layout/types.d.ts

@@ -0,0 +1,48 @@
+/**
+ *
+ *  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/>.
+ */
+/// <reference types="react" />
+import { tokens } from '@neo4j-ndl/base';
+/**
+ * Currently supporting only native HTML elements.
+ * @todo Allow custom React components as well, like Typography.tsx does.
+ */
+export type CustomElementType = keyof HTMLElementTagNameMap;
+/**
+ * More info here:
+ * https://stackoverflow.com/questions/75085783/conditional-react-component-properties-with-multiple-generics#comment132505139_75086121
+ */
+export type ReactComponent = (args: any) => JSX.Element;
+export type Spacing = keyof typeof tokens.space;
+export declare const SpacingDefaults: {
+    readonly padding: "4";
+    readonly paddingBlockStart: undefined;
+    readonly paddingBlockEnd: undefined;
+    readonly paddingInline: undefined;
+    readonly paddingInlineStart: undefined;
+    readonly paddingInlineEnd: undefined;
+    readonly gap: "4";
+};
+export declare const getSpacing: (spacing: Spacing | undefined, property: keyof typeof SpacingDefaults) => string | undefined;
+export type Radius = keyof typeof tokens.borderRadius;
+export declare const RadiusDefaults: {
+    borderRadius: undefined;
+};
+export declare const getRadius: (spacing: Radius | undefined, property: keyof typeof RadiusDefaults) => string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "sideEffects": false,
   "description": "React implementation of Neo4j Design System",
   "keywords": [
@@ -93,7 +93,7 @@
     "@floating-ui/react": "0.25.1",
     "@heroicons/react": "2.0.13",
     "@neo4j-cypher/react-codemirror": "^1.0.1",
-    "@neo4j-ndl/base": "^2.1.1",
+    "@neo4j-ndl/base": "^2.2.0",
     "@table-nav/core": "0.0.7",
     "@table-nav/react": "0.0.7",
     "@tanstack/react-table": "^8.9.3",